File manager - Edit - /home/webapp69.cm.in.th/u69319090021/Shop21/Shop/index.php
Back
<?php session_start(); // Initialize mock session state if empty if (!isset($_SESSION['cart'])) { $_SESSION['cart'] = []; } if (!isset($_SESSION['favorites'])) { $_SESSION['favorites'] = []; } if (!isset($_SESSION['orders'])) { $_SESSION['orders'] = []; } if (!isset($_SESSION['chat_messages'])) { $_SESSION['chat_messages'] = [ ['sender' => 'system', 'text' => 'ยินดีต้อนรับสู่ Aether AI Concierge! มีอะไรให้เราช่วยแนะนำแฟชั่น Cyber Futuristic ในวันนี้ไหมครับ? ⚡', 'time' => date('H:i')] ]; } // Database of Cyber Futuristic Products $products = [ [ 'id' => 1, 'name_th' => 'Aether x aespa Cyber-Purple Casual Streetwear Hoodie', 'name_en' => 'Aether x aespa Cyber-Purple Casual Streetwear Hoodie', 'category' => 'Hoodie', 'category_th' => 'ฮู้ดดี้', 'price' => 1490, 'original_price' => 2990, 'image' => '../assets/images/winter_aespa.jpg', 'images' => [ '../assets/images/winter_aespa.jpg', '../assets/images/cyber_hoodie_1784876612441.png' ], 'sizes' => ['S', 'M', 'L', 'XL', '2XL'], 'colors_th' => ['ม่วงพาสเทล (Pastel Violet)', 'ดำสตรีท (Street Black)', 'เทาเงิน (Silver Grey)'], 'colors_en' => ['Pastel Violet', 'Street Black', 'Silver Grey'], 'stock' => 18, 'rating' => 4.9, 'review_count' => 142, 'sales_count' => 680, 'badge' => 'HOT ITEM', 'description' => 'เสื้อฮู้ดดี้แขนยาวทรง Oversize สไตล์แคชชวลสตรีทแวร์ของสมาชิกวง aespa สวมใส่นุ่มสบายด้วยผ้า Cotton เกรดพรีเมียม ตัดเย็บสไตล์มินิมอลไซเบอร์', 'is_new' => true, 'is_best' => true, 'is_recommended' => true ], [ 'id' => 2, 'name_th' => 'aespa Metallic Accent Casual Varsity Jacket', 'name_en' => 'aespa Metallic Accent Casual Varsity Jacket', 'category' => 'Jacket', 'category_th' => 'แจ็กเก็ต', 'price' => 2890, 'original_price' => 4500, 'image' => '../assets/images/aespa_pants_new.png', 'images' => [ '../assets/images/aespa_pants_new.png', '../assets/images/ningning_aespa.png' ], 'sizes' => ['M', 'L', 'XL'], 'colors_th' => ['เงินโครเมียม (Metallic Silver)', 'ดำไซเบอร์ (Cyber Black)'], 'colors_en' => ['Metallic Silver', 'Cyber Black'], 'stock' => 12, 'rating' => 5.0, 'review_count' => 98, 'sales_count' => 420, 'badge' => 'NEW ARRIVAL', 'description' => 'เสื้อแจ็กเก็ตกันหนาวทรงสตรีทแวร์ ดีไซน์เรียบเท่แต่งแถบโลหะสะท้อนแสงสไตล์ K-Pop aespa ลุคชิคๆ สวมใส่ได้จริงทุกวัน', 'is_new' => true, 'is_best' => false, 'is_recommended' => true ], [ 'id' => 3, 'name_th' => 'Neo-Casual Streetwear Jogger Cargo Pants', 'name_en' => 'Neo-Casual Streetwear Jogger Cargo Pants', 'category' => 'Pants', 'category_th' => 'กางเกง', 'price' => 1290, 'original_price' => 2300, 'image' => '../assets/images/aespa_jacket_new.png', 'images' => [ '../assets/images/aespa_jacket_new.png', '../assets/images/aespa_pants_new.png', '../assets/images/giselle_aespa.png' ], 'sizes' => ['28', '30', '32', '34', '36'], 'colors_th' => ['ดำสตรีท (Street Black)', 'ม่วงเข้ม (Deep Violet)'], 'colors_en' => ['Street Black', 'Deep Violet'], 'stock' => 25, 'rating' => 4.8, 'review_count' => 210, 'sales_count' => 950, 'badge' => 'BEST SELLER', 'description' => 'กางเกงวอร์มและคาร์โก้สไตล์จ็อกเกอร์ สวมใส่สบายทรงเกาหลี แมตช์คู่กับเสื้อฮู้ดดี้ได้อย่างลงตัว', 'is_new' => false, 'is_best' => true, 'is_recommended' => true ], [ 'id' => 4, 'name_th' => 'aespa Cyber-Chic Beanie & Tech Accessories', 'name_en' => 'aespa Cyber-Chic Beanie & Tech Accessories', 'category' => 'Accessory', 'category_th' => 'เครื่องประดับ', 'price' => 890, 'original_price' => 1500, 'image' => 'https://images.unsplash.com/photo-1576871337622-98d48d1cf531?w=600&auto=format&fit=crop&q=80', 'images' => [ 'https://images.unsplash.com/photo-1576871337622-98d48d1cf531?w=600&auto=format&fit=crop&q=80', 'https://images.unsplash.com/photo-1511499767150-a48a237f0083?w=600&auto=format&fit=crop&q=80' ], 'sizes' => ['FREE SIZE'], 'colors_th' => ['ดำ (Midnight Black)', 'ม่วง (Neon Purple)'], 'colors_en' => ['Midnight Black', 'Neon Purple'], 'stock' => 15, 'rating' => 4.9, 'review_count' => 85, 'sales_count' => 310, 'badge' => 'LIMITED', 'description' => 'หมวกไหมพรม Beanie และอุปกรณ์ตกแต่งแฟชั่นแนว K-Pop ไซเบอร์ชิค เพิ่มกิมมิคความเท่ให้กับชุดกันหนาวของคุณ', 'is_new' => true, 'is_best' => true, 'is_recommended' => false ], [ 'id' => 5, 'name_th' => 'Cyberpunk Matrix Mesh Tech Graphic T-Shirt', 'name_en' => 'Cyberpunk Matrix Mesh Tech Graphic T-Shirt', 'category' => 'T-Shirt', 'category_th' => 'เสื้อยืด', 'price' => 790, 'original_price' => 1490, 'image' => '../assets/images/karina_aespa.png', 'images' => [ '../assets/images/karina_aespa.png', '../assets/images/aespa_tshirt_1784877280916.png' ], 'sizes' => ['S', 'M', 'L', 'XL'], 'colors_th' => ['ดำแมทริกซ์ (Matrix Black)', 'ขาวสว่าง (Neon White)'], 'colors_en' => ['Matrix Black', 'Neon White'], 'stock' => 30, 'rating' => 4.7, 'review_count' => 175, 'sales_count' => 1120, 'badge' => 'POPULAR', 'description' => 'เสื้อยืดสกรีนลายกราฟิกพิกเซลแมทริกซ์เรืองแสง ดีไซน์แฟชั่นแนว aespa Savage/Armageddon ลุคสตรีทแวร์ไซเบอร์สุดเท่', 'is_new' => false, 'is_best' => true, 'is_recommended' => true ], [ 'id' => 6, 'name_th' => 'Futuristic Holographic Sling Cyber Bag', 'name_en' => 'Futuristic Holographic Sling Cyber Bag', 'category' => 'Bag', 'category_th' => 'กระเป๋า', 'price' => 1190, 'original_price' => 1990, 'image' => 'https://images.unsplash.com/photo-1548036328-c9fa89d128fa?w=600&auto=format&fit=crop&q=80', 'images' => [ 'https://images.unsplash.com/photo-1548036328-c9fa89d128fa?w=600&auto=format&fit=crop&q=80', 'https://images.unsplash.com/photo-1622560480605-d83c853bc5c3?w=600&auto=format&fit=crop&q=80' ], 'sizes' => ['ONE SIZE'], 'colors_th' => ['ฮอโลกราฟิก (Holographic)', 'ดำนีออน (Cyber Black)'], 'colors_en' => ['Holographic', 'Cyber Black'], 'stock' => 15, 'rating' => 4.8, 'review_count' => 64, 'sales_count' => 380, 'badge' => 'NEW', 'description' => 'กระเป๋าสะพายข้างดีไซน์ทรงเรขาคณิตฮอโลกราฟิก เล่นแสงไฟได้อย่างงดงาม พร้อมช่องใส่แท็บเล็ตและพอร์ตชาร์จ USB ด้านนอก', 'is_new' => true, 'is_best' => false, 'is_recommended' => true ] ]; // Handle Form Posts / Actions if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) { $action = $_POST['action']; if ($action === 'login') { $username = trim($_POST['username'] ?? ''); $password = trim($_POST['password'] ?? ''); $role = ($username === 'admin') ? 'admin' : 'user'; if (!empty($username) && !empty($password)) { $_SESSION['user'] = [ 'username' => htmlspecialchars($username), 'role' => $role, 'logged_in' => true ]; } header('Location: ' . $_SERVER['PHP_SELF']); exit; } elseif ($action === 'register') { $username = trim($_POST['username'] ?? ''); $email = trim($_POST['email'] ?? ''); $password = trim($_POST['password'] ?? ''); if (!empty($username) && !empty($email) && !empty($password)) { $_SESSION['user'] = [ 'username' => htmlspecialchars($username), 'role' => 'user', 'logged_in' => true ]; } header('Location: ' . $_SERVER['PHP_SELF']); exit; } elseif ($action === 'logout') { unset($_SESSION['user']); header('Location: ' . $_SERVER['PHP_SELF']); exit; } } // User session variables $isLoggedIn = isset($_SESSION['user']['logged_in']) && $_SESSION['user']['logged_in'] === true; $currentUser = $isLoggedIn ? $_SESSION['user']['username'] : ''; $isAdmin = $isLoggedIn && ($_SESSION['user']['role'] ?? '') === 'admin'; ?> <!DOCTYPE html> <html lang="th" class="dark scroll-smooth"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>AETHER FASHION SHOP | Futuristic Cyber & AI Fashion Experience</title> <meta name="description" content="เว็บไซต์สั่งจองและจำหน่ายเสื้อผ้าแฟชั่นสไตล์ล้ำสมัย Cyber Futuristic สีดำ ม่วง และฟ้านีออน"> <!-- 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=Orbitron:wght@400;600;700;900&family=Rajdhani:wght@400;600;700&family=Prompt:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <!-- FontAwesome Icons --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <!-- CSS Styling (Cyber Futuristic Design System) --> <style> :root { --bg-main: #060713; --bg-card: rgba(18, 16, 38, 0.65); --bg-glass: rgba(15, 23, 42, 0.7); --neon-purple: #b026ff; --neon-purple-glow: rgba(176, 38, 255, 0.5); --neon-cyan: #00f3ff; --neon-cyan-glow: rgba(0, 243, 255, 0.5); --neon-pink: #ff007f; --text-main: #e2e8f0; --border-cyber: rgba(0, 243, 255, 0.25); --font-title: 'Orbitron', 'Prompt', sans-serif; --font-sub: 'Rajdhani', 'Prompt', sans-serif; --font-body: 'Prompt', sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } body { background-color: var(--bg-main); color: var(--text-main); font-family: var(--font-body); background-image: radial-gradient(circle at 15% 15%, rgba(176, 38, 255, 0.12) 0%, transparent 40%), radial-gradient(circle at 85% 85%, rgba(0, 243, 255, 0.12) 0%, transparent 40%), linear-gradient(rgba(0, 243, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 243, 255, 0.03) 1px, transparent 1px); background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px; min-height: 100vh; overflow-x: hidden; } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #060713; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--neon-purple), var(--neon-cyan)); border-radius: 4px; } /* Typography */ .font-cyber { font-family: var(--font-title); letter-spacing: 1px; } .font-sub { font-family: var(--font-sub); } /* Neon Glow Effects */ .neon-text-purple { color: var(--neon-purple); text-shadow: 0 0 10px var(--neon-purple-glow), 0 0 20px var(--neon-purple-glow); } .neon-text-cyan { color: var(--neon-cyan); text-shadow: 0 0 10px var(--neon-cyan-glow), 0 0 20px var(--neon-cyan-glow); } .neon-border-purple { border-color: var(--neon-purple); box-shadow: 0 0 15px var(--neon-purple-glow); } .neon-border-cyan { border-color: var(--neon-cyan); box-shadow: 0 0 15px var(--neon-cyan-glow); } /* Glassmorphism Card */ .cyber-glass { background: var(--bg-card); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--border-cyber); border-radius: 12px; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .cyber-glass:hover { border-color: var(--neon-cyan); box-shadow: 0 0 20px rgba(0, 243, 255, 0.3), inset 0 0 15px rgba(0, 243, 255, 0.1); transform: translateY(-4px); } /* Cyber Buttons */ .btn-cyber-primary { background: linear-gradient(135deg, var(--neon-purple) 0%, #7000ff 100%); color: #fff; border: 1px solid var(--neon-purple); font-family: var(--font-title); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 12px 24px; border-radius: 8px; cursor: pointer; position: relative; overflow: hidden; transition: all 0.3s ease; box-shadow: 0 0 15px var(--neon-purple-glow); } .btn-cyber-primary:hover { background: linear-gradient(135deg, #c447ff 0%, var(--neon-purple) 100%); box-shadow: 0 0 25px rgba(176, 38, 255, 0.8), 0 0 10px #fff; transform: scale(1.02); } .btn-cyber-cyan { background: linear-gradient(135deg, #00b4d8 0%, var(--neon-cyan) 100%); color: #060713; border: 1px solid var(--neon-cyan); font-family: var(--font-title); font-weight: 800; text-transform: uppercase; padding: 12px 24px; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 0 15px var(--neon-cyan-glow); } .btn-cyber-cyan:hover { box-shadow: 0 0 25px rgba(0, 243, 255, 0.8), 0 0 12px #fff; transform: scale(1.02); } .btn-cyber-outline { background: transparent; color: var(--neon-cyan); border: 1px solid var(--neon-cyan); font-family: var(--font-title); padding: 10px 20px; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; } .btn-cyber-outline:hover { background: rgba(0, 243, 255, 0.15); box-shadow: 0 0 15px var(--neon-cyan-glow); color: #fff; } /* Cyber Badges */ .cyber-badge { background: rgba(0, 243, 255, 0.15); color: var(--neon-cyan); border: 1px solid var(--neon-cyan); font-family: var(--font-sub); font-weight: 700; font-size: 11px; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: 1px; } /* Splash Screen Animation */ #splash-screen { position: fixed; inset: 0; z-index: 9999; background: #030308; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity 0.8s ease, visibility 0.8s ease; } #splash-screen.fade-out { opacity: 0; visibility: hidden; } .cyber-loader { width: 80px; height: 80px; border: 4px solid transparent; border-top-color: var(--neon-purple); border-bottom-color: var(--neon-cyan); border-radius: 50%; animation: spin 1.2s linear infinite; box-shadow: 0 0 20px var(--neon-purple-glow); } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Floating Live Chat Widget */ #chat-widget { position: fixed; bottom: 24px; right: 24px; z-index: 900; } /* TikTok Style Video / Reel Overlay Simulation */ .tiktok-badge { background: linear-gradient(45deg, #ff0050, #00f2fe); color: #fff; font-weight: bold; font-size: 10px; padding: 3px 8px; border-radius: 12px; display: inline-flex; align-items: center; gap: 4px; } /* Responsive Layout Grid */ .grid-responsive { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; } /* Category Filter Pills */ .cat-pill { padding: 10px 22px; border-radius: 20px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: #94a3b8; cursor: pointer; font-family: var(--font-title); font-size: 13px; transition: all 0.3s ease; white-space: nowrap; } .cat-pill.active, .cat-pill:hover { background: rgba(176, 38, 255, 0.2); border-color: var(--neon-purple); color: #fff; box-shadow: 0 0 15px var(--neon-purple-glow); } </style> <!-- Tailwind CSS (CDN for utility classes) --> <script src="https://cdn.tailwindcss.com"></script> <script> tailwind.config = { darkMode: 'class', theme: { extend: { colors: { cyberBg: '#060713', cyberPurple: '#b026ff', cyberCyan: '#00f3ff', cyberPink: '#ff007f', cyberCard: 'rgba(18, 16, 38, 0.65)' } } } } </script> </head> <body class="text-slate-200"> <!-- 1. SPLASH SCREEN (หน้าเปิดเว็บไซต์สุดล้ำ) --> <div id="splash-screen"> <div class="relative flex items-center justify-center mb-6"> <div class="cyber-loader"></div> <i class="fa-solid fa-bolt absolute text-2xl text-cyan-400 animate-pulse"></i> </div> <h1 class="font-cyber text-3xl md:text-4xl font-black text-transparent bg-clip-text bg-gradient-to-r from-purple-500 via-cyan-400 to-pink-500 tracking-widest uppercase mb-2"> AETHER FASHION </h1> <p class="font-sub text-sm text-cyan-300 tracking-widest uppercase animate-pulse"> LOADING CYBER & AI FUTURISTIC EXPERIENCE... </p> </div> <!-- 2. HEADER & NAVIGATION BAR --> <header class="sticky top-0 z-50 w-full bg-slate-950/80 backdrop-blur-xl border-b border-cyan-500/20"> <!-- Top Announcement Bar --> <div class="bg-gradient-to-r from-purple-900/60 via-slate-900 to-cyan-900/60 text-xs py-1.5 px-4 text-center border-b border-purple-500/20 flex justify-center items-center gap-2 font-sub"> <span class="tiktok-badge"><i class="fa-brands fa-tiktok"></i> TIKTOK SHOP STYLE</span> <span>⚡ โปรโมชันเปิดตัว: ลดสูงสุด 50% + คูปองส่วนลดพิเศษส่งฟรีทั่วไทย!</span> <button onclick="copyCoupon('AETHER2026')" class="underline hover:text-cyan-300 cursor-pointer font-bold ml-2">โค้ด: AETHER2026</button> </div> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-20 flex items-center justify-between"> <!-- Brand Logo --> <a href="#" class="flex items-center gap-3 group"> <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-purple-600 to-cyan-400 p-0.5 shadow-[0_0_15px_rgba(0,243,255,0.5)] group-hover:scale-105 transition-transform"> <div class="w-full h-full bg-slate-950 rounded-[7px] flex items-center justify-center"> <i class="fa-solid fa-atom text-cyan-400 text-xl group-hover:rotate-180 transition-transform duration-700"></i> </div> </div> <div> <span class="font-cyber font-black text-xl md:text-2xl text-transparent bg-clip-text bg-gradient-to-r from-purple-400 via-cyan-300 to-white tracking-widest">AETHER</span> <span class="block text-[10px] font-sub text-cyan-400 tracking-widest uppercase -mt-1">CYBER FASHION SHOP</span> </div> </a> <!-- Search Bar (Live Search) --> <div class="hidden md:flex flex-1 max-w-md mx-8 relative"> <input type="text" id="search-input" onkeyup="filterProducts()" placeholder="ค้นหาเสื้อผ้าไซเบอร์ ฮู้ดดี้ แจ็กเก็ต คาร์โก้..." class="w-full bg-slate-900/90 border border-cyan-500/30 rounded-full py-2 pl-10 pr-12 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:border-cyan-400 focus:ring-1 focus:ring-cyan-400 transition-all"> <i class="fa-solid fa-magnifying-glass absolute left-3.5 top-3 text-cyan-400 text-sm"></i> <button onclick="filterProducts()" class="absolute right-1 top-1 bg-purple-600 hover:bg-purple-500 text-white rounded-full px-3 py-1 text-xs font-cyber transition"> ค้นหา </button> </div> <!-- Navigation Controls & User Actions --> <div class="flex items-center gap-4"> <!-- Wishlist Icon Counter --> <button onclick="openFavoritesModal()" class="relative text-slate-300 hover:text-cyan-400 p-2 transition" title="รายการโปรด"> <i class="fa-solid fa-heart text-xl"></i> <span id="fav-counter" class="absolute -top-1 -right-1 bg-purple-600 text-white text-[10px] font-bold w-4 h-4 rounded-full flex items-center justify-center">0</span> </button> <!-- Shopping Cart Icon Counter --> <button onclick="toggleCartDrawer()" class="relative text-slate-300 hover:text-cyan-400 p-2 transition" title="ตะกร้าสินค้า"> <i class="fa-solid fa-bag-shopping text-xl"></i> <span id="cart-counter" class="absolute -top-1 -right-1 bg-cyan-400 text-slate-950 text-[10px] font-black w-4 h-4 rounded-full flex items-center justify-center shadow-[0_0_8px_rgba(0,243,255,0.8)]">0</span> </button> <!-- User Auth Status --> <?php if ($isLoggedIn): ?> <div class="flex items-center gap-3 pl-2 border-l border-cyan-500/30"> <div class="text-right hidden sm:block"> <span class="block text-xs text-slate-400">ยินดีต้อนรับ</span> <span class="font-bold text-sm text-cyan-300 font-sub"><?= $currentUser; ?> <?= $isAdmin ? '<span class="text-xs bg-purple-600/80 px-1.5 py-0.5 rounded text-white font-cyber">ADMIN</span>' : '' ?></span> </div> <?php if ($isAdmin): ?> <button onclick="openAdminModal()" class="btn-cyber-outline py-1.5 px-3 text-xs" title="จัดการระบบผู้ดูแล"> <i class="fa-solid fa-sliders mr-1"></i> ADMIN </button> <?php endif; ?> <form method="POST" action="" class="inline"> <input type="hidden" name="action" value="logout"> <button type="submit" class="text-xs text-rose-400 hover:text-rose-300 p-2 font-sub uppercase border border-rose-500/30 rounded-lg hover:bg-rose-500/10 transition" title="ออกจากระบบ"> <i class="fa-solid fa-right-from-bracket"></i> </button> </form> </div> <?php else: ?> <button onclick="openAuthModal('login')" class="btn-cyber-cyan py-2 px-4 text-xs font-cyber flex items-center gap-2"> <i class="fa-solid fa-user-astronaut"></i> เข้าสู่ระบบ </button> <?php endif; ?> </div> </div> </header> <!-- 3. HERO SLIDER BANNER (แบนเนอร์สไลด์โปรโมชันอัตโนมัติ) --> <section class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-6"> <div class="cyber-glass relative overflow-hidden rounded-2xl border border-cyan-500/40 p-6 md:p-12 min-h-[360px] flex items-center"> <!-- Background Banner Graphic --> <img src="../assets/images/cyber_fashion_banner_1784876598830.png" alt="Aether Banner" class="absolute inset-0 w-full h-full object-cover opacity-35 mix-blend-luminosity"> <div class="absolute inset-0 bg-gradient-to-r from-slate-950 via-slate-950/80 to-transparent"></div> <!-- Banner Text Content --> <div class="relative z-10 max-w-xl"> <span class="cyber-badge mb-3 inline-block">CYBER FASHION COLLECTION 2026</span> <h2 class="font-cyber text-3xl md:text-5xl font-black text-white leading-tight mb-4"> FUTURE WEAR <br> <span class="neon-text-cyan">REDEFINED BY AI</span> </h2> <p class="text-sm md:text-base text-slate-300 mb-6 font-light leading-relaxed"> สัมผัสประสบการณ์เสื้อผ้าแฟชั่นแห่งอนาคต ผสมผสานโทนสีม่วง-ฟ้านีออนกับดีไซน์เกราะไซเบอร์และเส้นใยสะท้อนแสงไฟเบอร์ออปติก สั่งจองได้ก่อนใครที่นี่! </p> <div class="flex flex-wrap gap-4"> <a href="#catalog-section" class="btn-cyber-primary text-sm flex items-center gap-2"> <i class="fa-solid fa-bolt"></i> เลือกชมสินค้าสั่งจอง </a> <button onclick="copyCoupon('AETHER2026')" class="btn-cyber-outline text-sm flex items-center gap-2"> <i class="fa-solid fa-ticket text-purple-400"></i> รับคูปองส่วนลด 20% </button> </div> </div> </div> </section> <!-- 4. CATEGORY FILTER BAR & SEARCH (หมวดหมู่สินค้า) --> <section id="catalog-section" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-12"> <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-8"> <div> <h3 class="font-cyber text-2xl font-bold text-white flex items-center gap-3"> <span class="w-3 h-8 bg-cyan-400 rounded-sm shadow-[0_0_10px_#00f3ff]"></span> หมวดหมู่สินค้าแฟชั่น </h3> <p class="text-xs text-slate-400 font-sub mt-1">เลือกค้นหาเสื้อผ้าและอุปกรณ์ตามประเภทที่คุณชื่นชอบ</p> </div> <!-- Quick Filter Tabs --> <div class="flex items-center gap-2 overflow-x-auto pb-2 scrollbar-none"> <button onclick="filterCategory('All', this)" class="cat-pill active">ทั้งหมด (All)</button> <button onclick="filterCategory('Hoodie', this)" class="cat-pill">ฮู้ดดี้ (Hoodie)</button> <button onclick="filterCategory('Jacket', this)" class="cat-pill">แจ็กเก็ต (Jacket)</button> <button onclick="filterCategory('Pants', this)" class="cat-pill">กางเกง (Pants)</button> <button onclick="filterCategory('T-Shirt', this)" class="cat-pill">เสื้อยืด (T-Shirt)</button> <button onclick="filterCategory('Bag', this)" class="cat-pill">กระเป๋า (Bag)</button> <button onclick="filterCategory('Accessory', this)" class="cat-pill">เครื่องประดับ (Accessory)</button> </div> </div> <!-- PRODUCT CATALOG GRID (แสดงรายการสินค้า) --> <div id="product-grid" class="grid-responsive"> <!-- Rendered dynamically by JavaScript --> </div> </section> <!-- 5. TIKTOK SHOP STYLE HIGHLIGHT SECTION (สินค้ามาใหม่ & สินค้าขายดี) --> <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-16"> <div class="cyber-glass p-8 border border-purple-500/30 relative overflow-hidden"> <div class="flex items-center justify-between mb-6"> <div> <span class="tiktok-badge mb-1"><i class="fa-solid fa-fire text-amber-300"></i> POPULAR TRENDING</span> <h3 class="font-cyber text-2xl font-bold text-white">HOT PRE-ORDER TRENDS</h3> </div> <span class="text-xs font-sub text-cyan-400"><i class="fa-solid fa-rotate animate-spin"></i> Realtime Updating</span> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> <div class="bg-slate-900/80 p-4 rounded-xl border border-purple-500/20 flex gap-4 items-center"> <img src="../assets/images/winter_aespa.jpg" onerror="this.onerror=null; this.src='../assets/images/cyber_hoodie_1784876612441.png';" class="w-20 h-20 object-cover rounded-lg border border-purple-500/40"> <div> <span class="text-[10px] text-purple-400 font-cyber">#1 BEST SELLER</span> <h4 class="text-sm font-bold text-white line-clamp-1">Aether Cyber-Neon Hoodie</h4> <span class="text-cyan-400 font-bold text-sm">฿1,490</span> <p class="text-[11px] text-slate-400">จองแล้ว 680+ ชิ้น</p> </div> </div> <div class="bg-slate-900/80 p-4 rounded-xl border border-cyan-500/20 flex gap-4 items-center"> <img src="../assets/images/aespa_jacket_new.png" onerror="this.onerror=null; this.src='../assets/images/ningning_aespa.png';" class="w-20 h-20 object-cover rounded-lg border border-cyan-500/40"> <div> <span class="text-[10px] text-cyan-400 font-cyber">#2 TOP RATED</span> <h4 class="text-sm font-bold text-white line-clamp-1">Quantum Metallic Armored Jacket</h4> <span class="text-cyan-400 font-bold text-sm">฿2,890</span> <p class="text-[11px] text-slate-400">จองแล้ว 420+ ชิ้น</p> </div> </div> <div class="bg-slate-900/80 p-4 rounded-xl border border-pink-500/20 flex gap-4 items-center"> <img src="../assets/images/aespa_pants_new.png" onerror="this.onerror=null; this.src='../assets/images/giselle_aespa.png';" class="w-20 h-20 object-cover rounded-lg border border-pink-500/40"> <div> <span class="text-[10px] text-pink-400 font-cyber">#3 TRENDING NOW</span> <h4 class="text-sm font-bold text-white line-clamp-1">Neo-Tokyo Cargo Combat Pants</h4> <span class="text-cyan-400 font-bold text-sm">฿1,290</span> <p class="text-[11px] text-slate-400">จองแล้ว 950+ ชิ้น</p> </div> </div> </div> </div> </section> <!-- 6. PRODUCT DETAIL MODAL (หน้ารายละเอียดสินค้าหลายมุมมอง รีวิว ตะกร้า สั่งซื้อ) --> <div id="product-modal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-md hidden"> <div class="relative w-full max-w-4xl bg-slate-900 border border-cyan-500/40 rounded-2xl shadow-[0_0_30px_rgba(0,243,255,0.2)] overflow-hidden max-h-[90vh] flex flex-col"> <!-- Modal Header --> <div class="flex justify-between items-center px-6 py-4 border-b border-cyan-500/20 bg-slate-950/50"> <span class="font-cyber text-sm text-cyan-400 flex items-center gap-2"> <i class="fa-solid fa-microchip"></i> PRODUCT SPECIFICATION </span> <button onclick="closeProductModal()" class="text-slate-400 hover:text-white text-xl font-bold p-1">✕</button> </div> <!-- Modal Content (Scrollable) --> <div class="p-6 overflow-y-auto flex-1 grid grid-cols-1 md:grid-cols-2 gap-8"> <!-- Left: Multi-angle Images Gallery --> <div class="space-y-4"> <div class="aspect-square rounded-xl overflow-hidden border border-purple-500/30 bg-slate-950 relative group"> <span id="modal-badge" class="cyber-badge absolute top-3 left-3 z-10">PRE-ORDER</span> <img id="modal-main-img" src="" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"> </div> <div id="modal-gallery-thumbs" class="flex gap-3 overflow-x-auto"> <!-- Thumbnail images --> </div> </div> <!-- Right: Product Details & Variant Selection --> <div class="flex flex-col justify-between space-y-4"> <div> <h2 id="modal-title" class="font-cyber text-xl md:text-2xl font-bold text-white mb-2">-</h2> <!-- Ratings & Reviews --> <div class="flex items-center gap-3 text-xs text-slate-300 mb-4"> <div class="flex text-amber-400 gap-1"> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> </div> <span id="modal-rating" class="font-bold text-cyan-300">4.9</span> <span class="text-slate-500">|</span> <span id="modal-reviews" class="underline">142 รีวิว</span> <span class="text-slate-500">|</span> <span id="modal-sales" class="text-purple-400">สั่งจองแล้ว 680 ชิ้น</span> </div> <!-- Price Tag --> <div class="p-4 rounded-xl bg-slate-950/70 border border-cyan-500/20 mb-4"> <div class="flex items-baseline gap-3"> <span id="modal-price" class="font-cyber text-3xl font-black text-cyan-400">฿-</span> <span id="modal-orig-price" class="text-sm text-slate-500 line-through">฿-</span> <span class="bg-rose-500/20 text-rose-400 text-xs px-2 py-0.5 rounded font-bold border border-rose-500/30">ลดพิเศษ</span> </div> <p class="text-[11px] text-slate-400 mt-1"><i class="fa-solid fa-truck-fast text-cyan-400"></i> สินค้ารับประกันคุณภาพ สั่งจองล่วงหน้าจัดส่งใน 7-14 วัน</p> </div> <!-- Description --> <p id="modal-desc" class="text-xs text-slate-300 leading-relaxed mb-4">-</p> <!-- Color Variant Selection --> <div class="mb-4"> <label class="block text-xs font-cyber text-slate-400 mb-2">เลือกโทนสี (COLOR): <span id="selected-color-text" class="text-cyan-300 font-bold"></span></label> <div id="modal-colors" class="flex flex-wrap gap-2"></div> </div> <!-- Size Variant Selection --> <div class="mb-4"> <label class="block text-xs font-cyber text-slate-400 mb-2">เลือกขนาด (SIZE): <span id="selected-size-text" class="text-cyan-300 font-bold"></span></label> <div id="modal-sizes" class="flex flex-wrap gap-2"></div> </div> <!-- Quantity Selector --> <div class="flex items-center gap-4 mb-6"> <span class="text-xs font-cyber text-slate-400">จำนวน:</span> <div class="flex items-center border border-cyan-500/30 rounded-lg bg-slate-950"> <button onclick="adjustModalQty(-1)" class="px-3 py-1 text-slate-300 hover:text-white font-bold">-</button> <input type="text" id="modal-qty-input" value="1" readonly class="w-12 text-center bg-transparent text-cyan-300 font-bold text-sm"> <button onclick="adjustModalQty(1)" class="px-3 py-1 text-slate-300 hover:text-white font-bold">+</button> </div> <span class="text-xs text-slate-400">(คงเหลือในคลัง: <span id="modal-stock-counter" class="text-purple-400 font-bold">18</span> ชิ้น)</span> </div> </div> <!-- Action Buttons --> <div class="grid grid-cols-2 gap-4 pt-4 border-t border-cyan-500/20"> <button onclick="addToCartFromModal()" class="btn-cyber-outline py-3 text-xs flex items-center justify-center gap-2"> <i class="fa-solid fa-cart-plus"></i> เพิ่มลงตะกร้า </button> <button onclick="buyNowFromModal()" class="btn-cyber-cyan py-3 text-xs flex items-center justify-center gap-2"> <i class="fa-solid fa-bolt"></i> สั่งซื้อทันที </button> </div> </div> </div> </div> </div> <!-- 7. CART DRAWER (ตะกร้าสินค้าสไตล์ TikTok Shop) --> <div id="cart-drawer" class="fixed inset-y-0 right-0 z-50 w-full max-w-md bg-slate-950 border-l border-cyan-500/30 shadow-[0_0_40px_rgba(0,0,0,0.8)] transform translate-x-full transition-transform duration-300 flex flex-col"> <div class="p-4 border-b border-cyan-500/20 flex justify-between items-center bg-slate-900/80"> <h3 class="font-cyber text-base font-bold text-white flex items-center gap-2"> <i class="fa-solid fa-bag-shopping text-cyan-400"></i> ตะกร้าสินค้าของคุณ </h3> <button onclick="toggleCartDrawer()" class="text-slate-400 hover:text-white text-lg">✕</button> </div> <!-- Cart Items List --> <div id="cart-items-container" class="flex-1 p-4 overflow-y-auto space-y-4"> <!-- Rendered by JS --> </div> <!-- Coupon Input & Order Summary --> <div class="p-4 border-t border-cyan-500/20 bg-slate-900/50 space-y-3"> <div class="flex gap-2"> <input type="text" id="coupon-input" placeholder="ใส่โค้ดคูปองส่วนลด..." class="flex-1 bg-slate-950 border border-cyan-500/30 rounded-lg px-3 py-1.5 text-xs text-white focus:outline-none"> <button onclick="applyCoupon()" class="btn-cyber-outline py-1.5 px-3 text-xs">ใช้โค้ด</button> </div> <div id="coupon-discount-row" class="hidden flex justify-between text-xs text-emerald-400"> <span>ส่วนลดคูปอง:</span> <span id="coupon-discount-text">-฿0</span> </div> <div class="flex justify-between items-center text-sm"> <span class="text-slate-400">ยอดชำระสุทธิ:</span> <span id="cart-total-price" class="font-cyber text-2xl font-black text-cyan-400">฿0</span> </div> <button onclick="checkoutCart()" class="w-full btn-cyber-primary py-3 text-sm flex items-center justify-center gap-2"> <i class="fa-solid fa-credit-card"></i> ดำเนินการสั่งซื้อ & ชำระเงิน </button> </div> </div> <!-- 8. ORDER STATUS & TRACKING PANEL (ติดตามสถานะคำสั่งซื้อ) --> <div id="order-status-modal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-md hidden"> <div class="w-full max-w-lg bg-slate-900 border border-purple-500/40 rounded-2xl p-6 shadow-2xl"> <div class="flex justify-between items-center mb-6"> <h3 class="font-cyber text-lg font-bold text-white flex items-center gap-2"> <i class="fa-solid fa-truck-ramp-box text-purple-400"></i> ติดตามสถานะคำสั่งซื้อ </h3> <button onclick="closeOrderStatusModal()" class="text-slate-400 hover:text-white">✕</button> </div> <div id="order-tracking-content" class="space-y-4"> <!-- Rendered Order Details --> </div> </div> </div> <!-- 9. LIVE CHAT CONCIERGE WIDGET (แชทติดต่อร้านค้า) --> <div id="chat-widget"> <!-- Chat Popup Box --> <div id="chat-box" class="hidden mb-4 w-80 md:w-96 h-96 bg-slate-900 border border-cyan-500/40 rounded-2xl shadow-2xl flex flex-col overflow-hidden"> <div class="p-3 bg-gradient-to-r from-purple-900 to-slate-900 border-b border-cyan-500/20 flex justify-between items-center"> <div class="flex items-center gap-2"> <span class="w-2.5 h-2.5 bg-emerald-400 rounded-full animate-ping"></span> <span class="font-cyber text-xs text-white">AETHER AI CONCIERGE CHAT</span> </div> <button onclick="toggleChatBox()" class="text-slate-400 hover:text-white text-sm">✕</button> </div> <div id="chat-messages" class="flex-1 p-3 overflow-y-auto space-y-3 text-xs"> <?php foreach ($_SESSION['chat_messages'] as $msg): ?> <div class="flex gap-2 <?= $msg['sender'] === 'user' ? 'justify-end' : '' ?>"> <?php if ($msg['sender'] === 'system'): ?> <div class="w-6 h-6 rounded-full bg-cyan-400 text-slate-950 flex items-center justify-center font-bold text-[10px]">AI</div> <?php endif; ?> <div class="max-w-[75%] p-2.5 rounded-xl <?= $msg['sender'] === 'user' ? 'bg-purple-600 text-white' : 'bg-slate-800 text-slate-200 border border-cyan-500/20' ?>"> <p><?= htmlspecialchars($msg['text']) ?></p> <span class="text-[9px] opacity-60 block mt-1 text-right"><?= $msg['time'] ?></span> </div> </div> <?php endforeach; ?> </div> <div class="p-2 border-t border-cyan-500/20 bg-slate-950 flex gap-2"> <input type="text" id="chat-input" onkeypress="if(event.key==='Enter') sendChatMessage()" placeholder="พิมพ์ข้อความสอบถามร้านค้า..." class="flex-1 bg-slate-900 border border-cyan-500/30 rounded-lg px-3 py-1.5 text-xs text-white focus:outline-none"> <button onclick="sendChatMessage()" class="btn-cyber-cyan p-2 text-xs"><i class="fa-solid fa-paper-plane"></i></button> </div> </div> <!-- Chat Toggle Button --> <button onclick="toggleChatBox()" class="btn-cyber-primary rounded-full w-14 h-14 flex items-center justify-center text-xl shadow-[0_0_20px_rgba(176,38,255,0.8)]"> <i class="fa-solid fa-headset text-white"></i> </button> </div> <!-- 10. ADMIN DASHBOARD MODAL (ส่วนผู้ดูแลระบบ) --> <div id="admin-modal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/90 backdrop-blur-lg hidden"> <div class="w-full max-w-5xl bg-slate-900 border border-purple-500/50 rounded-2xl p-6 shadow-2xl max-h-[90vh] overflow-y-auto"> <div class="flex justify-between items-center border-b border-purple-500/20 pb-4 mb-6"> <div> <h2 class="font-cyber text-xl font-bold text-white flex items-center gap-2"> <i class="fa-solid fa-chart-line text-purple-400"></i> AETHER ADMIN MANAGEMENT DASHBOARD </h2> <p class="text-xs text-slate-400">จัดการข้อมูลสินค้า หมวดหมู่ คำสั่งซื้อ โปรโมชัน และตรวจสอบรายงานยอดขาย</p> </div> <button onclick="closeAdminModal()" class="text-slate-400 hover:text-white text-xl">✕</button> </div> <!-- Sales Summary Widgets --> <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8"> <div class="bg-slate-950 p-4 rounded-xl border border-purple-500/30"> <span class="text-xs text-slate-400">ยอดขายรวมทั้งหมด</span> <h3 class="font-cyber text-2xl font-bold text-cyan-400 mt-1">฿1,845,900</h3> <span class="text-[10px] text-emerald-400">▲ +18.4% จากเดือนที่แล้ว</span> </div> <div class="bg-slate-950 p-4 rounded-xl border border-cyan-500/30"> <span class="text-xs text-slate-400">จำนวนการสั่งจอง</span> <h3 class="font-cyber text-2xl font-bold text-purple-400 mt-1">2,480 รายการ</h3> <span class="text-[10px] text-emerald-400">▲ +12.1% สัปดาห์นี้</span> </div> <div class="bg-slate-950 p-4 rounded-xl border border-pink-500/30"> <span class="text-xs text-slate-400">สมาชิกทั้งหมด</span> <h3 class="font-cyber text-2xl font-bold text-pink-400 mt-1">1,250 คน</h3> <span class="text-[10px] text-cyan-400">+45 สมาชิกใหม่วันนี้</span> </div> <div class="bg-slate-950 p-4 rounded-xl border border-amber-500/30"> <span class="text-xs text-slate-400">สต็อกสินค้าคงเหลือ</span> <h3 class="font-cyber text-2xl font-bold text-amber-400 mt-1">103 ชิ้น</h3> <span class="text-[10px] text-rose-400">! 2 สินค้าสต็อกต่ำ</span> </div> </div> <!-- Admin Product List Table --> <div class="space-y-4"> <div class="flex justify-between items-center"> <h3 class="font-cyber text-sm text-slate-300">รายการสินค้าในระบบ</h3> <button onclick="addNewProductPrompt()" class="btn-cyber-cyan py-1.5 px-3 text-xs"><i class="fa-solid fa-plus"></i> เพิ่มสินค้าใหม่</button> </div> <div class="overflow-x-auto"> <table class="w-full text-xs text-left text-slate-300"> <thead class="bg-slate-950 text-cyan-400 font-cyber"> <tr> <th class="p-3">ID</th> <th class="p-3">รูปภาพ</th> <th class="p-3">ชื่อสินค้า</th> <th class="p-3">หมวดหมู่</th> <th class="p-3">ราคา</th> <th class="p-3">สต็อก</th> <th class="p-3 text-right">การจัดการ</th> </tr> </thead> <tbody id="admin-product-table-body" class="divide-y divide-slate-800"> <!-- Rendered by JS --> </tbody> </table> </div> </div> </div> </div> <!-- 11. AUTHENTICATION MODAL (เข้าสู่ระบบ / สมัครสมาชิก) --> <div id="auth-modal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-md hidden"> <div class="relative w-full max-w-md bg-slate-900 border border-cyan-500/40 rounded-2xl p-6 md:p-8 shadow-2xl"> <button onclick="closeAuthModal()" class="absolute top-4 right-4 text-slate-400 hover:text-white">✕</button> <div class="flex border-b border-slate-800 mb-6"> <button onclick="switchAuthTab('login')" id="tab-login" class="flex-1 pb-3 font-cyber text-sm text-cyan-400 border-b-2 border-cyan-400 font-bold">เข้าสู่ระบบ</button> <button onclick="switchAuthTab('register')" id="tab-register" class="flex-1 pb-3 font-cyber text-sm text-slate-500 hover:text-slate-300">สมัครสมาชิก</button> </div> <!-- Login Form --> <form id="form-login" method="POST" action="" class="space-y-4"> <input type="hidden" name="action" value="login"> <div> <label class="block text-xs font-cyber text-slate-400 mb-1">ชื่อผู้ใช้ (Username)</label> <input type="text" name="username" required placeholder="ใส่ 'admin' สำหรับผู้ดูแลระบบ" class="w-full bg-slate-950 border border-cyan-500/30 rounded-lg p-2.5 text-sm text-white focus:outline-none focus:border-cyan-400"> </div> <div> <label class="block text-xs font-cyber text-slate-400 mb-1">รหัสผ่าน (Password)</label> <input type="password" name="password" required placeholder="••••••••" class="w-full bg-slate-950 border border-cyan-500/30 rounded-lg p-2.5 text-sm text-white focus:outline-none focus:border-cyan-400"> </div> <button type="submit" class="w-full btn-cyber-primary py-3 text-xs mt-2">เข้าสู่ระบบทันที</button> </form> <!-- Register Form --> <form id="form-register" method="POST" action="" class="space-y-4 hidden"> <input type="hidden" name="action" value="register"> <div> <label class="block text-xs font-cyber text-slate-400 mb-1">ชื่อผู้ใช้ (Username)</label> <input type="text" name="username" required class="w-full bg-slate-950 border border-cyan-500/30 rounded-lg p-2.5 text-sm text-white focus:outline-none focus:border-cyan-400"> </div> <div> <label class="block text-xs font-cyber text-slate-400 mb-1">อีเมล (Email)</label> <input type="email" name="email" required class="w-full bg-slate-950 border border-cyan-500/30 rounded-lg p-2.5 text-sm text-white focus:outline-none focus:border-cyan-400"> </div> <div> <label class="block text-xs font-cyber text-slate-400 mb-1">รหัสผ่าน (Password)</label> <input type="password" name="password" required class="w-full bg-slate-950 border border-cyan-500/30 rounded-lg p-2.5 text-sm text-white focus:outline-none focus:border-cyan-400"> </div> <button type="submit" class="w-full btn-cyber-cyan py-3 text-xs mt-2">สมัครสมาชิกใหม่</button> </form> </div> </div> <!-- FOOTER SECTION --> <footer class="mt-24 border-t border-cyan-500/20 bg-slate-950/80 py-12"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center space-y-4"> <div class="flex justify-center items-center gap-2"> <i class="fa-solid fa-atom text-cyan-400 text-xl"></i> <span class="font-cyber font-bold text-white tracking-widest">AETHER FASHION SHOP</span> </div> <p class="text-xs text-slate-400 max-w-xl mx-auto font-light leading-relaxed"> ศูนย์รวมแฟชั่นเสื้อผ้าแห่งอนาคตสไตล์ Cyber Futuristic & AI Technology ออกแบบให้ใช้งานง่ายด้วยระบบ TikTok Shop สั่งจองสินค้าพรีออเดอร์สะดวกรวดเร็ว </p> <div class="text-[11px] text-slate-500 font-sub"> © 2026 AETHER CYBER FASHION. ALL RIGHTS RESERVED. </div> </div> </footer> <!-- JAVASCRIPT LOGIC (ระบบการทำงานแบบโต้ตอบทั้งหมด) --> <script> // Import PHP products array into JavaScript let productsData = <?= json_encode($products); ?>; let cart = JSON.parse(localStorage.getItem('aether_cart')) || []; let favorites = JSON.parse(localStorage.getItem('aether_favs')) || []; let currentSelectedProduct = null; let selectedColor = ''; let selectedSize = ''; let modalQty = 1; let appliedCoupon = null; // Hide Splash Screen after 1.2s window.addEventListener('load', () => { setTimeout(() => { const splash = document.getElementById('splash-screen'); splash.classList.add('fade-out'); }, 1000); renderProductCatalog(productsData); updateCounters(); }); // 1. RENDER PRODUCT CATALOG function renderProductCatalog(items) { const grid = document.getElementById('product-grid'); grid.innerHTML = ''; if (items.length === 0) { grid.innerHTML = '<div class="col-span-full text-center py-12 text-slate-500 font-cyber">ไม่พบรายการสินค้าที่ค้นหา</div>'; return; } items.forEach(product => { const isFav = favorites.includes(product.id); const card = document.createElement('div'); card.className = 'cyber-glass p-4 rounded-xl flex flex-col justify-between group relative overflow-hidden'; card.innerHTML = ` <div class="relative aspect-square rounded-lg overflow-hidden mb-4 bg-slate-950"> <span class="cyber-badge absolute top-2 left-2 z-10">${product.badge}</span> <!-- Favorite Heart Button --> <button onclick="toggleFavorite(event, ${product.id})" class="absolute top-2 right-2 z-10 w-8 h-8 rounded-full bg-slate-950/70 border border-slate-700 flex items-center justify-center text-xs text-slate-300 hover:text-rose-400 transition"> <i class="fa-${isFav ? 'solid text-rose-500' : 'regular'} fa-heart"></i> </button> <img src="${product.image}" alt="${product.name_th}" onerror="this.onerror=null; this.src='../assets/images/cyber_hoodie_1784876612441.png';" class="w-full h-full object-cover group-hover:scale-110 transition duration-500"> </div> <div class="space-y-2"> <span class="text-[10px] font-cyber text-purple-400 uppercase tracking-widest">${product.category_th}</span> <h4 class="font-bold text-sm text-white line-clamp-1 group-hover:text-cyan-300 transition">${product.name_th}</h4> <div class="flex items-center gap-2 text-xs"> <span class="text-amber-400"><i class="fa-solid fa-star"></i> ${product.rating}</span> <span class="text-slate-500">|</span> <span class="text-slate-400 text-[11px]">จองแล้ว ${product.sales_count}</span> </div> <div class="flex justify-between items-baseline pt-2"> <div> <span class="font-cyber text-lg font-black text-cyan-400">฿${product.price.toLocaleString()}</span> <span class="text-xs text-slate-500 line-through ml-1">฿${product.original_price.toLocaleString()}</span> </div> </div> </div> <div class="grid grid-cols-2 gap-2 mt-4"> <button onclick="openProductModal(${product.id})" class="btn-cyber-outline py-2 text-[11px]"> ดูรายละเอียด </button> <button onclick="quickAddToCart(${product.id})" class="btn-cyber-cyan py-2 text-[11px]"> <i class="fa-solid fa-cart-plus"></i> เพิ่มตะกร้า </button> </div> `; grid.appendChild(card); }); } // 2. CATEGORY & LIVE SEARCH FILTER function filterCategory(cat, btn) { document.querySelectorAll('.cat-pill').forEach(b => b.classList.remove('active')); btn.classList.add('active'); if (cat === 'All') { renderProductCatalog(productsData); } else { const filtered = productsData.filter(p => p.category === cat); renderProductCatalog(filtered); } } function filterProducts() { const query = document.getElementById('search-input').value.toLowerCase().trim(); const filtered = productsData.filter(p => p.name_th.toLowerCase().includes(query) || p.name_en.toLowerCase().includes(query) || p.category.toLowerCase().includes(query) || p.description.toLowerCase().includes(query) ); renderProductCatalog(filtered); } // 3. PRODUCT MODAL DETAILED VIEW function openProductModal(id) { const product = productsData.find(p => p.id === id); if (!product) return; currentSelectedProduct = product; modalQty = 1; document.getElementById('modal-qty-input').value = modalQty; document.getElementById('modal-title').innerText = product.name_th; document.getElementById('modal-price').innerText = `฿${product.price.toLocaleString()}`; document.getElementById('modal-orig-price').innerText = `฿${product.original_price.toLocaleString()}`; document.getElementById('modal-desc').innerText = product.description; document.getElementById('modal-rating').innerText = product.rating; document.getElementById('modal-reviews').innerText = `${product.review_count} รีวิว`; document.getElementById('modal-sales').innerText = `สั่งจองแล้ว ${product.sales_count} ชิ้น`; document.getElementById('modal-stock-counter').innerText = product.stock; document.getElementById('modal-badge').innerText = product.badge; // Gallery Main & Thumbnails const mainImg = document.getElementById('modal-main-img'); mainImg.src = product.image; const thumbsContainer = document.getElementById('modal-gallery-thumbs'); thumbsContainer.innerHTML = ''; product.images.forEach(img => { const t = document.createElement('img'); t.src = img; t.className = 'w-14 h-14 object-cover rounded-lg border border-slate-700 cursor-pointer hover:border-cyan-400 transition'; t.onclick = () => { mainImg.src = img; }; thumbsContainer.appendChild(t); }); // Color Variant Buttons selectedColor = product.colors_th[0]; document.getElementById('selected-color-text').innerText = selectedColor; const colorsContainer = document.getElementById('modal-colors'); colorsContainer.innerHTML = ''; product.colors_th.forEach((color, idx) => { const btn = document.createElement('button'); btn.innerText = color; btn.className = idx === 0 ? 'btn-cyber-cyan text-xs py-1 px-3' : 'btn-cyber-outline text-xs py-1 px-3'; btn.onclick = () => { selectedColor = color; document.getElementById('selected-color-text').innerText = color; Array.from(colorsContainer.children).forEach(c => c.className = 'btn-cyber-outline text-xs py-1 px-3'); btn.className = 'btn-cyber-cyan text-xs py-1 px-3'; }; colorsContainer.appendChild(btn); }); // Size Variant Buttons selectedSize = product.sizes[0]; document.getElementById('selected-size-text').innerText = selectedSize; const sizesContainer = document.getElementById('modal-sizes'); sizesContainer.innerHTML = ''; product.sizes.forEach((size, idx) => { const btn = document.createElement('button'); btn.innerText = size; btn.className = idx === 0 ? 'btn-cyber-primary text-xs py-1 px-3' : 'btn-cyber-outline text-xs py-1 px-3'; btn.onclick = () => { selectedSize = size; document.getElementById('selected-size-text').innerText = size; Array.from(sizesContainer.children).forEach(s => s.className = 'btn-cyber-outline text-xs py-1 px-3'); btn.className = 'btn-cyber-primary text-xs py-1 px-3'; }; sizesContainer.appendChild(btn); }); document.getElementById('product-modal').classList.remove('hidden'); } function closeProductModal() { document.getElementById('product-modal').classList.add('hidden'); } function adjustModalQty(amt) { let n = modalQty + amt; if (n >= 1 && n <= (currentSelectedProduct ? currentSelectedProduct.stock : 99)) { modalQty = n; document.getElementById('modal-qty-input').value = modalQty; } } // 4. CART DRAWER & OPERATIONS function quickAddToCart(productId) { const prod = productsData.find(p => p.id === productId); if (!prod) return; const cartItem = { id: prod.id, name: prod.name_th, price: prod.price, image: prod.image, color: prod.colors_th[0], size: prod.sizes[0], qty: 1 }; addToCartList(cartItem); } function addToCartFromModal() { if (!currentSelectedProduct) return; const cartItem = { id: currentSelectedProduct.id, name: currentSelectedProduct.name_th, price: currentSelectedProduct.price, image: currentSelectedProduct.image, color: selectedColor, size: selectedSize, qty: modalQty }; addToCartList(cartItem); closeProductModal(); toggleCartDrawer(); } function buyNowFromModal() { addToCartFromModal(); checkoutCart(); } function addToCartList(newItem) { const existingIdx = cart.findIndex(i => i.id === newItem.id && i.color === newItem.color && i.size === newItem.size); if (existingIdx > -1) { cart[existingIdx].qty += newItem.qty; } else { cart.push(newItem); } saveCart(); updateCounters(); renderCartItems(); } function renderCartItems() { const container = document.getElementById('cart-items-container'); container.innerHTML = ''; if (cart.length === 0) { container.innerHTML = '<div class="text-center py-12 text-slate-500 font-cyber">ไม่มีสินค้าในตะกร้า</div>'; document.getElementById('cart-total-price').innerText = '฿0'; return; } let total = 0; cart.forEach((item, index) => { const subtotal = item.price * item.qty; total += subtotal; const row = document.createElement('div'); row.className = 'bg-slate-900 p-3 rounded-xl border border-cyan-500/20 flex gap-3 items-center'; row.innerHTML = ` <img src="${item.image}" class="w-14 h-14 object-cover rounded-lg border border-slate-700"> <div class="flex-1"> <h5 class="text-xs font-bold text-white line-clamp-1">${item.name}</h5> <p class="text-[10px] text-slate-400 font-sub">${item.color} | ${item.size}</p> <span class="text-cyan-400 text-xs font-cyber font-bold">฿${item.price.toLocaleString()}</span> </div> <div class="flex items-center gap-1 border border-slate-700 rounded bg-slate-950 px-1"> <button onclick="updateCartItemQty(${index}, -1)" class="text-xs px-1 text-slate-400">-</button> <span class="text-xs text-white font-bold px-1">${item.qty}</span> <button onclick="updateCartItemQty(${index}, 1)" class="text-xs px-1 text-slate-400">+</button> </div> <button onclick="removeFromCart(${index})" class="text-rose-400 hover:text-rose-300 text-xs p-1">✕</button> `; container.appendChild(row); }); if (appliedCoupon === 'AETHER2026') { total = Math.round(total * 0.8); } document.getElementById('cart-total-price').innerText = `฿${total.toLocaleString()}`; } function updateCartItemQty(index, change) { cart[index].qty += change; if (cart[index].qty <= 0) { cart.splice(index, 1); } saveCart(); updateCounters(); renderCartItems(); } function removeFromCart(index) { cart.splice(index, 1); saveCart(); updateCounters(); renderCartItems(); } function saveCart() { localStorage.setItem('aether_cart', JSON.stringify(cart)); } function toggleCartDrawer() { const drawer = document.getElementById('cart-drawer'); drawer.classList.toggle('translate-x-full'); renderCartItems(); } function applyCoupon() { const code = document.getElementById('coupon-input').value.trim().toUpperCase(); if (code === 'AETHER2026') { appliedCoupon = 'AETHER2026'; document.getElementById('coupon-discount-row').classList.remove('hidden'); document.getElementById('coupon-discount-text').innerText = '-20%'; alert('ใช้โค้ดส่วนลด AETHER2026 สำเร็จ! ได้รับส่วนลด 20%'); renderCartItems(); } else { alert('โค้ดส่วนลดไม่ถูกต้อง'); } } function checkoutCart() { if (cart.length === 0) { alert('กรุณาเลือกสินค้าใส่ตะกร้าก่อนทำการสั่งซื้อ'); return; } alert('ยืนยันคำสั่งซื้อสำเร็จ! ระบบกำลังออกใบบันทึกการสั่งจองสินค้าพรีออเดอร์ให้คุณ...'); cart = []; saveCart(); updateCounters(); renderCartItems(); toggleCartDrawer(); openOrderStatusModal(); } function copyCoupon(code) { navigator.clipboard.writeText(code); alert(`คัดลอกโค้ดส่วนลด ${code} แล้ว!`); } // 5. FAVORITES SYSTEM function toggleFavorite(event, id) { event.stopPropagation(); const idx = favorites.indexOf(id); if (idx > -1) { favorites.splice(idx, 1); } else { favorites.push(id); } localStorage.setItem('aether_favs', JSON.stringify(favorites)); updateCounters(); renderProductCatalog(productsData); } function updateCounters() { document.getElementById('cart-counter').innerText = cart.reduce((sum, item) => sum + item.qty, 0); document.getElementById('fav-counter').innerText = favorites.length; } function openFavoritesModal() { const favProducts = productsData.filter(p => favorites.includes(p.id)); renderProductCatalog(favProducts); } // 6. ORDER TRACKING MODAL function openOrderStatusModal() { const trackingContent = document.getElementById('order-tracking-content'); trackingContent.innerHTML = ` <div class="bg-slate-950 p-4 rounded-xl border border-cyan-500/30 space-y-3"> <div class="flex justify-between items-center text-xs"> <span class="text-slate-400">หมายเลขคำสั่งซื้อ: <strong class="text-cyan-300 font-cyber">#ATH-20260724-9982</strong></span> <span class="cyber-badge">กำลังจัดเตรียมสินค้า</span> </div> <div class="space-y-2 pt-2 border-t border-slate-800"> <div class="flex items-center gap-3 text-xs text-slate-300"> <i class="fa-solid fa-circle-check text-emerald-400"></i> <span>1. ยืนยันคำสั่งซื้อเรียบร้อยแล้ว</span> </div> <div class="flex items-center gap-3 text-xs text-slate-300"> <i class="fa-solid fa-gear text-purple-400 animate-spin"></i> <span>2. กำลังถักทอและส่งเข้ากระบวนการผลิต Pre-order</span> </div> <div class="flex items-center gap-3 text-xs text-slate-500"> <i class="fa-regular fa-circle"></i> <span>3. จัดส่งพัสดุและแจ้งเลขพัสดุ tracking</span> </div> </div> </div> `; document.getElementById('order-status-modal').classList.remove('hidden'); } function closeOrderStatusModal() { document.getElementById('order-status-modal').classList.add('hidden'); } // 7. LIVE CHAT FUNCTIONALITY function toggleChatBox() { document.getElementById('chat-box').classList.toggle('hidden'); } function sendChatMessage() { const input = document.getElementById('chat-input'); const text = input.value.trim(); if (!text) return; const chatMessages = document.getElementById('chat-messages'); // Add user message const time = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); chatMessages.innerHTML += ` <div class="flex gap-2 justify-end"> <div class="max-w-[75%] p-2.5 rounded-xl bg-purple-600 text-white"> <p>${text}</p> <span class="text-[9px] opacity-60 block mt-1 text-right">${time}</span> </div> </div> `; input.value = ''; chatMessages.scrollTop = chatMessages.scrollHeight; // Simulated AI Auto Reply setTimeout(() => { chatMessages.innerHTML += ` <div class="flex gap-2"> <div class="w-6 h-6 rounded-full bg-cyan-400 text-slate-950 flex items-center justify-center font-bold text-[10px]">AI</div> <div class="max-w-[75%] p-2.5 rounded-xl bg-slate-800 text-slate-200 border border-cyan-500/20"> <p>แอดมินรับทราบข้อความของคุณแล้วครับ! สินค้า Cyber Futuristic สั่งจองจัดส่งรวดเร็ว มีข้อสงสัยเรื่องไซส์หรือส่วนลดเพิ่มเติมถามได้เลยนะครับ ⚡</p> <span class="text-[9px] opacity-60 block mt-1 text-right">${time}</span> </div> </div> `; chatMessages.scrollTop = chatMessages.scrollHeight; }, 800); } // 8. ADMIN DASHBOARD MANAGEMENT function openAdminModal() { renderAdminTable(); document.getElementById('admin-modal').classList.remove('hidden'); } function closeAdminModal() { document.getElementById('admin-modal').classList.add('hidden'); } function renderAdminTable() { const body = document.getElementById('admin-product-table-body'); body.innerHTML = ''; productsData.forEach(p => { const tr = document.createElement('tr'); tr.innerHTML = ` <td class="p-3 font-cyber text-slate-400">#${p.id}</td> <td class="p-3"><img src="${p.image}" class="w-10 h-10 object-cover rounded border border-slate-700"></td> <td class="p-3 font-bold text-white">${p.name_th}</td> <td class="p-3"><span class="cyber-badge">${p.category}</span></td> <td class="p-3 text-cyan-400 font-bold">฿${p.price.toLocaleString()}</td> <td class="p-3">${p.stock} ชิ้น</td> <td class="p-3 text-right"> <button onclick="editProductStock(${p.id})" class="text-cyan-400 hover:underline mr-2">แก้ไขสต็อก</button> <button onclick="deleteAdminProduct(${p.id})" class="text-rose-400 hover:underline">ลบ</button> </td> `; body.appendChild(tr); }); } function editProductStock(id) { const p = productsData.find(x => x.id === id); if (!p) return; const newStock = prompt(`แก้ไขจำนวนสต็อกสินค้า: ${p.name_th}`, p.stock); if (newStock !== null) { p.stock = parseInt(newStock) || 0; renderAdminTable(); } } function deleteAdminProduct(id) { if (confirm('ยืนยันลบสินค้านี้จากระบบ?')) { productsData = productsData.filter(p => p.id !== id); renderAdminTable(); renderProductCatalog(productsData); } } function addNewProductPrompt() { const name = prompt('กรอกชื่อสินค้าใหม่:'); if (!name) return; const price = parseInt(prompt('กรอกราคาสินค้า (บาท):') || '990'); const newProd = { id: productsData.length + 1, name_th: name, name_en: name, category: 'T-Shirt', category_th: 'เสื้อยืด', price: price, original_price: price * 2, image: '../assets/images/cyber_hoodie_1784876612441.png', images: ['../assets/images/cyber_hoodie_1784876612441.png'], sizes: ['S', 'M', 'L'], colors_th: ['ดำนีออน'], colors_en: ['Cyber Black'], stock: 20, rating: 5.0, review_count: 1, sales_count: 0, badge: 'NEW', description: 'สินค้าใหม่เพิ่มโดยผู้ดูแลระบบ', is_new: true, is_best: false, is_recommended: true }; productsData.push(newProd); renderAdminTable(); renderProductCatalog(productsData); } // 9. AUTH MODAL SYSTEM function openAuthModal(tab) { document.getElementById('auth-modal').classList.remove('hidden'); switchAuthTab(tab); } function closeAuthModal() { document.getElementById('auth-modal').classList.add('hidden'); } function switchAuthTab(tab) { const tabLogin = document.getElementById('tab-login'); const tabRegister = document.getElementById('tab-register'); const formLogin = document.getElementById('form-login'); const formRegister = document.getElementById('form-register'); if (tab === 'login') { tabLogin.className = 'flex-1 pb-3 font-cyber text-sm text-cyan-400 border-b-2 border-cyan-400 font-bold'; tabRegister.className = 'flex-1 pb-3 font-cyber text-sm text-slate-500 hover:text-slate-300'; formLogin.classList.remove('hidden'); formRegister.classList.add('hidden'); } else { tabRegister.className = 'flex-1 pb-3 font-cyber text-sm text-cyan-400 border-b-2 border-cyan-400 font-bold'; tabLogin.className = 'flex-1 pb-3 font-cyber text-sm text-slate-500 hover:text-slate-300'; formRegister.classList.remove('hidden'); formLogin.classList.add('hidden'); } } </script> </body> </html>
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.28 |
proxy
|
phpinfo
|
Settings