File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090014/shop non 014/product-detail.php

Back
<?php // product-detail.php - Product Detail and Options Selector (Cyberpunk Theme) session_start(); require_once 'db.php'; // Enforce login access control: redirect to login if session not set if (!isset($_SESSION['user_id'])) { header("Location: login.php"); exit(); } // Initialize session cart if not exists if (!isset($_SESSION['cart'])) { $_SESSION['cart'] = []; } // Validate ID $id = isset($_GET['id']) ? intval($_GET['id']) : 0; if ($id <= 0) { header("Location: index.php"); exit(); } // Fetch Product securely using Prepared Statement $stmt = $pdo->prepare("SELECT * FROM products WHERE id = :id"); $stmt->execute([':id' => $id]); $product = $stmt->fetch(PDO::FETCH_ASSOC); if (!$product) { header("Location: index.php"); exit(); } $sizes = array_map('trim', explode(',', $product['sizes'])); $colors = array_map('trim', explode(',', $product['colors'])); // Calculate total cart items count $cart_count = 0; foreach ($_SESSION['cart'] as $item) { $cart_count += $item['quantity']; } ?> <!DOCTYPE html> <html lang="th" class="dark"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title><?php echo htmlspecialchars($product['name']); ?> // NON LUXURY</title> <!-- Google Fonts --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300&family=Sarabun:wght@300;400;500;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <!-- Tailwind CSS CDN --> <script src="https://cdn.tailwindcss.com"></script> <script> tailwind.config = { theme: { extend: { colors: { cyber: { bg: '#0A0A0B', // Matte Deep Black card: '#121215', // Warm charcoal card accent: '#D4AF37', // Elegant Satin Gold accentGlow: '#E5C158',// Brighter Champagne Gold success: '#94A89A', // Premium Muted Sage Green danger: '#A94444', // Luxury Wine Red border: '#22211E' // Subtle gold-tinted grey border } }, fontFamily: { sans: ['Sarabun', 'Montserrat', 'sans-serif'], cyber: ['Cinzel', 'Cormorant Garamond', 'Sarabun', 'serif'] } } } } </script> <style> body { background-color: #0A0A0B; color: #EAE6DF; font-family: 'Sarabun', sans-serif; background-image: radial-gradient(circle at 50% 0%, #171512 0%, #0A0A0B 70%); } .neon-text-purple { text-shadow: 0 0 5px #D4AF37, 0 0 10px rgba(212, 175, 55, 0.4); } .neon-text-success { text-shadow: 0 0 5px #94A89A, 0 0 10px rgba(148, 168, 154, 0.4); } .neon-border-purple { border-color: #D4AF37; box-shadow: 0 0 10px rgba(212, 175, 55, 0.2); } .cyber-grid { background-size: 40px 40px; background-image: linear-gradient(to right, rgba(212, 175, 55, 0.02) 1px, transparent 1px), linear-gradient(to bottom, rgba(212, 175, 55, 0.02) 1px, transparent 1px); } .cyber-btn-glow:hover { box-shadow: 0 0 15px rgba(212, 175, 55, 0.4); } .attr-active { border-color: #D4AF37 !important; background-color: #1A1815 !important; color: #E5C158 !important; box-shadow: 0 0 8px rgba(212, 175, 55, 0.3); } <!-- Multi-language Support --> <script src="lang.js"></script> </head> <body class="flex flex-col min-h-screen cyber-grid text-stone-200"> <!-- Header Navigation --> <header class="sticky top-0 z-50 bg-[#0E0E10]/90 backdrop-blur-md border-b border-cyber-border"> <!-- Top bar with user session metadata --> <div class="bg-[#050506] text-[10px] py-1.5 px-6 md:px-12 flex justify-between w-full text-stone-400 font-sans tracking-wide"> <div class="flex gap-4"> <span data-lang-key="vip_guest">VIP GUEST: </span><?php echo htmlspecialchars($_SESSION['username']); ?> <span>\|</span> <span data-lang-key="status_label">STATUS: </span><span class="text-cyber-accent font-bold uppercase" data-lang-key="<?php echo $_SESSION['role'] === 'admin' ? 'admin_member' : 'vip_member'; ?>"><?php echo htmlspecialchars($_SESSION['role']); ?> MEMBER</span> </div> <div class="flex gap-4"> <?php if ($_SESSION['role'] === 'admin'): ?> <a href="admin.php" class="text-cyber-accent hover:text-white transition font-bold tracking-widest" data-lang-key="admin_portal">⚡ ADMIN PORTAL</a> <?php endif; ?> <a href="logout.php" class="text-cyber-danger hover:text-white transition font-bold tracking-widest" data-lang-key="leave_salon">✕ LEAVE SALON</a> </div> </div> <!-- Main Header --> <div class="w-full px-6 md:px-12 py-4 flex items-center justify-between"> <a href="index.php" class="flex items-center gap-3 text-2xl font-bold font-cyber tracking-wider hover:opacity-90 transition"> <div class="w-9 h-9 rounded-full bg-gradient-to-br from-cyber-accent to-cyber-border flex items-center justify-center shadow-lg border border-cyber-accent/40"> <span class="text-cyber-accent text-sm">N</span> </div> <span class="font-cyber font-medium text-lg tracking-[0.35em] text-white">NON LUXURY</span> </a> <div class="flex items-center gap-4"> <!-- Language Selector --> <div class="flex items-center gap-1.5 bg-cyber-card border border-cyber-border px-3 py-1.5 rounded-lg shadow-sm"> <span class="text-xs text-stone-500">🌐</span> <select id="lang-selector" class="bg-transparent text-xs text-stone-300 outline-none cursor-pointer focus:text-cyber-accent"> <option value="th">TH / ไทย</option> <option value="en">EN / English</option> <option value="zh">ZH / 中文</option> <option value="ja">JA / 日本語</option> <option value="ko">KO / 한국어</option> </select> </div> <a href="cart.php" class="relative p-2 px-4 bg-cyber-card border border-cyber-border hover:border-cyber-accent rounded-lg transition flex items-center gap-3"> <div class="relative"> <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path> </svg> <?php if ($cart_count > 0): ?> <span class="absolute -top-2.5 -right-2.5 bg-cyber-accent text-black text-[9px] font-black w-4.5 h-4.5 rounded-full flex items-center justify-center shadow-lg"> <?php echo $cart_count; ?> </span> <?php endif; ?> </div> <span class="text-[11px] font-cyber tracking-[0.15em] text-stone-300 hidden lg:inline" data-lang-key="shopping_bag">SHOPPING BAG</span> </a> </div> </div> </header> <!-- Main Container --> <main class="flex-grow w-full px-6 md:px-12 py-8"> <!-- Breadcrumb --> <nav class="text-[10px] font-sans text-stone-500 mb-6 flex items-center gap-2 tracking-wider"> <a href="index.php" class="hover:text-cyber-accent transition" data-lang-key="return_to_salon">← RETURN TO SALON // ย้อนกลับหน้าร้าน</a> </nav> <!-- Product Presentation --> <div class="bg-cyber-card rounded-2xl border border-cyber-border shadow-2xl overflow-hidden p-6 md:p-8"> <div class="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12"> <!-- Left: Product Image --> <div class="space-y-4"> <div class="border border-cyber-border rounded-xl overflow-hidden bg-black aspect-square flex items-center justify-center relative group"> <img src="<?php echo htmlspecialchars($product['image']); ?>" alt="<?php echo htmlspecialchars($product['name']); ?>" class="w-full h-full object-cover group-hover:scale-105 transition duration-500" id="main-product-image" onerror="this.src='https://images.unsplash.com/photo-1521572267360-ee0c2909d518?w=800&auto=format&fit=crop';"> <span class="absolute bottom-4 left-4 bg-black/80 backdrop-blur-sm text-[#94A89A] border border-[#94A89A]/30 text-[9px] font-sans px-3 py-1.5 rounded-full flex items-center gap-1.5 tracking-wider"> <span class="w-2 h-2 rounded-full bg-[#94A89A] animate-ping"></span> ✓ COLLECTIBLE IN STOCK </span> </div> <!-- Trust factors --> <div class="grid grid-cols-3 gap-2.5 text-center text-[9px] font-sans text-stone-400 pt-2"> <div class="p-3 bg-[#0A0A0B] rounded-lg border border-cyber-border flex flex-col items-center gap-1"> <span>⚜️</span> <span class="font-semibold text-stone-200">GENUINE CERTIFICATE</span> </div> <div class="p-3 bg-[#0A0A0B] rounded-lg border border-cyber-border flex flex-col items-center gap-1"> <span>💼</span> <span class="font-semibold text-stone-200">SECURED COURIER</span> </div> <div class="p-3 bg-[#0A0A0B] rounded-lg border border-cyber-border flex flex-col items-center gap-1"> <span>🛡️</span> <span class="font-semibold text-stone-200">PRIVATE GUARANTEE</span> </div> </div> </div> <!-- Right: Options & checkout form --> <div class="flex flex-col justify-between"> <div> <!-- Category & Title --> <span class="text-[9px] font-sans font-semibold text-cyber-accent tracking-[0.15em] uppercase bg-amber-950/40 border border-cyber-accent/30 px-3 py-1 rounded inline-block"> <?php echo htmlspecialchars($product['category']); ?> </span> <h1 class="text-xl md:text-2xl font-serif font-medium text-white mt-4 leading-snug"> <?php echo htmlspecialchars($product['name']); ?> </h1> <!-- Ratings / Stats --> <div class="flex items-center gap-4 mt-3.5 text-xs font-sans text-stone-400 divide-x divide-cyber-border"> <div class="flex items-center gap-1 text-amber-500"> <span>4.9</span> <div class="flex text-[10px]">★★★★★</div> </div> <span class="pl-4">REVIEWS (18)</span> <span class="pl-4">DISPATCHED: <strong class="text-white">142</strong> items</span> </div> <!-- Price box --> <div class="bg-[#0A0A0B] border border-cyber-border rounded-xl p-5 mt-6 flex items-center gap-4"> <span class="text-stone-500 text-[9px] uppercase tracking-wider font-sans">EXCLUSIVE PRICE</span> <span class="text-3xl font-cyber font-medium text-cyber-accent neon-text-purple"> ฿<?php echo number_format($product['price'], 2); ?> </span> <span class="text-xs text-stone-500 line-through"> ฿<?php echo number_format($product['price'] * 1.15, 2); ?> </span> <span class="bg-[#2A2318] text-cyber-accent text-[8px] font-semibold tracking-wider px-2 py-1 rounded uppercase font-sans border border-cyber-accent/30"> VIP ADVANTAGE </span> </div> <!-- Shipping info simulator --> <div class="mt-6 space-y-2 text-xs font-sans text-stone-400"> <div class="flex items-start gap-4"> <span class="text-stone-500 font-semibold w-24 shrink-0">SHIPPING:</span> <div> <p class="flex items-center gap-1.5 font-semibold text-cyber-accent"> ⚜️ COMPLIMENTARY INSURED SHIPPING </p> <p class="text-[10px] text-stone-500 mt-0.5">บริการจัดส่งพร้อมประกันภัยเต็มมูลค่าโดยไม่เสียค่าใช้จ่ายสำหรับสมาชิกระดับ VIP</p> </div> </div> </div> <!-- Selection parameters form --> <form action="cart.php" method="POST" id="order-form" class="mt-6 border-t border-cyber-border/40 pt-6 space-y-6"> <input type="hidden" name="action" value="add"> <input type="hidden" name="product_id" value="<?php echo $product['id']; ?>"> <!-- Size Selector --> <div class="flex flex-col gap-2 sm:flex-row sm:items-center text-xs"> <span class="text-stone-400 font-sans font-semibold w-28 shrink-0" data-lang-key="select_size">ขนาด / SIZE:</span> <div class="flex flex-wrap gap-2"> <input type="hidden" name="size" id="selected-size" value=""> <?php foreach ($sizes as $sz): ?> <button type="button" onclick="selectSize('<?php echo htmlspecialchars($sz); ?>', this)" class="size-btn px-4 py-2 bg-[#0A0A0B] border border-cyber-border rounded font-semibold text-stone-300 hover:border-cyber-accent hover:text-white transition focus:outline-none text-[11px] font-mono"> <?php echo htmlspecialchars($sz); ?> </button> <?php endforeach; ?> </div> </div> <!-- Color Selector --> <div class="flex flex-col gap-2 sm:flex-row sm:items-center text-xs"> <span class="text-stone-400 font-sans font-semibold w-28 shrink-0" data-lang-key="select_color">เฉดสี / SHADE:</span> <div class="flex flex-wrap gap-2"> <input type="hidden" name="color" id="selected-color" value=""> <?php foreach ($colors as $col): ?> <button type="button" onclick="selectColor('<?php echo htmlspecialchars($col); ?>', this)" class="color-btn px-4 py-2 bg-[#0A0A0B] border border-cyber-border rounded font-semibold text-stone-300 hover:border-cyber-accent hover:text-white transition focus:outline-none text-[11px] font-mono"> <?php echo htmlspecialchars($col); ?> </button> <?php endforeach; ?> </div> </div> <!-- Quantity Selector --> <div class="flex flex-col gap-2 sm:flex-row sm:items-center text-xs"> <span class="text-stone-400 font-sans font-semibold w-28 shrink-0" data-lang-key="quantity_label">QUANTITY:</span> <div class="flex items-center gap-4"> <div class="flex border border-cyber-border rounded overflow-hidden bg-[#0A0A0B]"> <button type="button" onclick="changeQty(-1)" class="px-3.5 py-1.5 hover:bg-stone-900 text-stone-300 font-bold outline-none transition">-</button> <input type="number" name="quantity" id="qty-input" value="1" min="1" max="<?php echo $product['stock']; ?>" class="w-12 text-center py-1.5 font-cyber font-medium outline-none border-x border-cyber-border bg-transparent text-white [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"> <button type="button" onclick="changeQty(1)" class="px-3.5 py-1.5 hover:bg-stone-900 text-stone-300 font-bold outline-none transition">+</button> </div> <span class="text-[10px] font-sans text-stone-500"> VAULT STOCK: <!-- Actions submit button --> <div class="pt-4 flex flex-col sm:flex-row gap-4 text-xs"> <?php if ($product['stock'] > 0): ?> <!-- Add to Cart --> <button type="submit" class="flex-1 bg-transparent hover:bg-stone-900 text-cyber-accent border border-cyber-accent/60 font-cyber font-medium tracking-[0.15em] py-3.5 px-6 rounded transition flex items-center justify-center gap-2.5 focus:outline-none"> <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"> <path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/> </svg> <span data-lang-key="add_to_bag">ADD TO BAG</span> </button> <!-- Buy Now --> <button type="button" onclick="buyNow()" class="flex-1 bg-cyber-accent hover:bg-cyber-accentGlow text-black font-cyber font-semibold tracking-[0.15em] py-3.5 px-6 rounded transition flex items-center justify-center gap-2.5 focus:outline-none shadow-md"> <span data-lang-key="acquire_now">ACQUIRE NOW</span> </button> <?php else: ?> <button type="button" disabled class="w-full bg-stone-900 text-stone-600 border border-cyber-border font-cyber font-bold tracking-widest py-4 px-6 rounded cursor-not-allowed text-center" data-lang-key="out_of_stock"> TEMPORARILY RESERVED </button> <?php endif; ?> </div> </form> </div> </div> </div> <!-- Description --> <div class="mt-12 border-t border-cyber-border/40 pt-8"> <h3 class="font-cyber font-medium text-xs tracking-[0.15em] text-white border-b border-cyber-border pb-3 mb-4 flex items-center gap-2" data-lang-key="product_description"> <span>⚜️</span> ARCHIVAL DETAILS // รายละเอียดสินค้า </h3> <div class="text-xs text-stone-400 leading-relaxed max-w-3xl space-y-4 font-sans"> <p class="font-medium text-stone-200 text-sm leading-relaxed"> <?php echo nl2br(htmlspecialchars($product['description'])); ?> </p> <div class="bg-[#0A0A0B] border border-cyber-border rounded-xl p-5 mt-4 space-y-2.5 font-sans text-[11px] text-stone-400"> <p class="font-cyber font-medium text-cyber-accent tracking-wider">// เอกสารรับรองสินค้า (AUTHENTICITY & FIT):</p> <p>สินค้าทั้งหมดได้รับการตรวจสอบความแท้ 100% พร้อมกล่องและเอกสารใบรับประกันศูนย์ของแบรนด์โดยตรง ท่านสามารถระบุรายละเอียดขนาดหรือขนาดพิเศษเพิ่มเติมได้ผ่านบริการห้องแชทส่วนตัวของลูกค้า VIP</p> </div> </div> </div> </div> </main> <!-- Footer --> <footer class="bg-[#050506] border-t border-cyber-border text-stone-500 py-8 mt-12 text-xs"> <div class="w-full px-6 md:px-12 flex flex-col md:flex-row items-center justify-between gap-4"> <div> <p data-lang-key="footer_rights">⚜️ <span class="font-cyber tracking-[0.25em] text-white">NON LUXURY</span> // CONCIERGE SERVICES. สงวนลิขสิทธิ์</p> <p class="text-[10px] text-stone-600 mt-1" data-lang-key="footer_port">ระบบฐานข้อมูล PDO MySQL // รหัสพอร์ต 014</p> </div> <div class="text-right"> <p data-lang-key="footer_developer">VIP CLIENT SERVICES: <span class="text-white font-bold">Nontawat 014</span></p> <p class="text-[10px] text-stone-600 mt-1">© 2026 Simulation Server. All rights reserved.</p> </div> </div> </footer> <!-- Scripts --> <script> const maxStock = <?php echo $product['stock']; ?>; function selectSize(size, element) { document.getElementById('selected-size').value = size; const buttons = document.querySelectorAll('.size-btn'); buttons.forEach(btn => btn.classList.remove('attr-active')); element.classList.add('attr-active'); } function selectColor(color, element) { document.getElementById('selected-color').value = color; const buttons = document.querySelectorAll('.color-btn'); buttons.forEach(btn => btn.classList.remove('attr-active')); element.classList.add('attr-active'); } function changeQty(amount) { const input = document.getElementById('qty-input'); let current = parseInt(input.value); if (isNaN(current)) current = 1; let newValue = current + amount; if (newValue < 1) newValue = 1; if (newValue > maxStock) newValue = maxStock; input.value = newValue; } // Form Validation on Submit document.getElementById('order-form').addEventListener('submit', function(e) { const size = document.getElementById('selected-size').value; const color = document.getElementById('selected-color').value; const currentLang = localStorage.getItem("selected_lang") \|\| "th"; const alerts = { th: { select_size_alert: 'กรุณาเลือก ขนาด (Size) ของสินค้าก่อนเพิ่มลงในถุงช้อปปิ้ง', select_color_alert: 'กรุณาเลือก สี/เฉดสี (Color) ของสินค้าก่อนเพิ่มลงในถุงช้อปปิ้ง' }, en: { select_size_alert: 'Please select a Size before adding to shopping bag.', select_color_alert: 'Please select a Shade before adding to shopping bag.' }, zh: { select_size_alert: '请在加入购物袋前选择尺寸。', select_color_alert: '请在加入购物袋前选择颜色。' }, ja: { select_size_alert: 'バッグに追加する前にサイズを選択してください。', select_color_alert: 'バッグに追加する前にカラーを選択してください。' }, ko: { select_size_alert: '쇼핑백에 추가하기 전에 크기를 선택하십시오.', select_color_alert: '쇼핑백에 추가하기 전에 색상을 선택하십시오.' } }; const msg = alerts[currentLang] \|\| alerts['th']; if (!size) { e.preventDefault(); alert(msg.select_size_alert); return false; } if (!color) { e.preventDefault(); alert(msg.select_color_alert); return false; } }); // "Buy Now" Direct Order Flow function buyNow() { const size = document.getElementById('selected-size').value; const color = document.getElementById('selected-color').value; const currentLang = localStorage.getItem("selected_lang") \|\| "th"; const alerts = { th: { select_size_buy: 'กรุณาเลือก ขนาด (Size) ของสินค้าก่อนทำรายการชำระเงิน', select_color_buy: 'กรุณาเลือก สี/เฉดสี (Color) ของสินค้าก่อนทำรายการชำระเงิน' }, en: { select_size_buy: 'Please select a Size before purchasing.', select_color_buy: 'Please select a Shade before purchasing.' }, zh: { select_size_buy: '请在购买前选择尺寸。', select_color_buy: '请在购买前选择颜色。' }, ja: { select_size_buy: '購入する前にサイズを選択してください。', select_color_buy: '購入する前にカラーを選択してください。' }, ko: { select_size_buy: '구매하기 전에 크기를 선택하십시오.', select_color_buy: '구매하기 전에 색상을 선택하십시오.' } }; const msg = alerts[currentLang] \|\| alerts['th']; if (!size) { alert(msg.select_size_buy); return; } if (!color) { alert(msg.select_color_buy); return; } const form = document.getElementById('order-form'); const redirectInput = document.createElement('input'); redirectInput.type = 'hidden'; redirectInput.name = 'redirect_checkout'; redirectInput.value = '1'; form.appendChild(redirectInput); form.submit(); } </script> </body> </html>

| ver. 1.4 | Github | . | PHP 7.4.33 | Generation time: 0.24 | proxy | phpinfo | Settings