File manager - Edit - /home/webapp69.cm.in.th/u69319090012/shop012/index.html
Back
<!DOCTYPE html> <html lang="th" data-theme="default"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Shopee E-Commerce & Pre-Order Clothing | ร้านค้าและระบบสั่งจองเสื้อผ้าออนไลน์</title> <meta name="description" content="ระบบเปิดจองเสื้อผ้าและขายสินค้าพร้อมส่ง สไตล์ Shopee ชำระเต็มจำนวนหรือชำระมัดจำ การันตีส่งตรงเวลา" /> <!-- Tailwind CSS CDN --> <script src="https://cdn.tailwindcss.com"></script> <!-- Lucide Icons --> <script src="https://unpkg.com/lucide@latest"></script> <!-- Custom Styles --> <link rel="stylesheet" href="assets/css/styles.css" /> </head> <body class="bg-gray-50 min-h-screen flex flex-col"> <!-- ==================== TOP NAVIGATION HEADER ==================== --> <header class="header-glass sticky top-0 z-40 text-white shadow-md"> <div class="max-w-7xl mx-auto px-4 py-3 flex items-center justify-between gap-4"> <!-- Brand Logo --> <a href="index.html" class="flex items-center gap-2 group"> <div class="w-10 h-10 bg-white text-rose-600 rounded-xl flex items-center justify-center font-black text-xl shadow-md group-hover:scale-105 transition-transform"> S </div> <div> <span class="font-extrabold text-xl tracking-tight text-white">Shopee<span class="text-amber-300">Style</span></span> <span class="block text-[10px] text-rose-100 font-medium tracking-wider uppercase">Clothing & Pre-Order</span> </div> </a> <!-- Search Bar --> <div class="flex-1 max-w-xl relative hidden md:block"> <input type="text" id="search-input" placeholder="ค้นหาเสื้อผ้าพร้อมส่ง, เสื้อสั่งจอง Pre-order, คอลเลกชันใหม่..." class="w-full pl-10 pr-24 py-2.5 rounded-xl bg-white text-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-amber-300 shadow-inner placeholder-gray-400" /> <i data-lucide="search" class="w-4 h-4 text-gray-400 absolute left-3.5 top-3"></i> <button onclick="renderProducts()" class="absolute right-1 top-1 bottom-1 px-4 bg-rose-600 hover:bg-rose-700 text-white font-bold text-xs rounded-lg transition-colors flex items-center gap-1"> <span>ค้นหา</span> </button> </div> <!-- Actions (Tracking, Settings, Cart & Dynamic User Profile) --> <div class="flex items-center gap-2 sm:gap-3"> <!-- Order Tracking Button --> <button onclick="openTrackingModal()" title="ติดตามคำสั่งซื้อ & พรีออเดอร์" class="relative p-2 sm:p-2.5 bg-white/10 hover:bg-white/20 rounded-xl transition-colors flex items-center gap-1.5 text-xs font-bold"> <i data-lucide="truck" class="w-5 h-5 text-white"></i> <span class="hidden sm:inline">ติดตามสินค้า</span> </button> <!-- Settings Button --> <button onclick="openSettingsModal()" title="ตั้งค่าระบบ & เปลี่ยนธีม" class="relative p-2.5 bg-white/10 hover:bg-white/20 rounded-xl transition-colors"> <i data-lucide="settings" class="w-6 h-6 text-white"></i> </button> <!-- Cart Icon --> <button onclick="openCartDrawer()" class="relative p-2.5 bg-white/10 hover:bg-white/20 rounded-xl transition-colors"> <i data-lucide="shopping-bag" class="w-6 h-6 text-white"></i> <span id="cart-badge" class="hidden absolute -top-1 -right-1 bg-amber-400 text-rose-950 font-black text-[10px] w-5 h-5 rounded-full flex items-center justify-center border-2 border-rose-600 shadow-sm"> 0 </span> </button> <!-- Dynamic User Auth Header Section --> <div id="user-header-section" class="flex items-center gap-2 border-l border-white/20 pl-3"> <!-- Injected via app.js --> </div> </div> </div> </header> <!-- ==================== HERO PRE-ORDER CAROUSEL BANNER ==================== --> <section class="max-w-7xl mx-auto px-4 mt-6"> <div class="relative hero-banner-gradient bg-gradient-to-r from-rose-600 via-rose-500 to-amber-500 rounded-3xl overflow-hidden shadow-lg p-6 md:p-10 text-white flex flex-col md:flex-row items-center justify-between gap-6"> <div class="space-y-3 max-w-xl"> <div class="inline-flex items-center gap-2 px-3 py-1 bg-amber-400 text-rose-950 rounded-full text-xs font-black tracking-wider uppercase shadow-sm"> <i data-lucide="sparkles" class="w-3.5 h-3.5"></i> <span>Pre-Order Exclusive 2026</span> </div> <h1 class="text-2xl md:text-4xl font-black leading-tight"> เปิดจองเสื้อผ้าคอลเลกชันใหม่ก่อนใคร มัดจำเริ่มต้นเพียง ฿199 </h1> <p class="text-xs md:text-sm text-rose-100 font-normal"> เลือกดูสินค้าและเช็กวันจัดส่งได้ทันที (สมัครสมาชิกเพื่อเข้าสั่งจองและสั่งซื้อ) </p> <div class="flex flex-wrap items-center gap-3 pt-2"> <button onclick="setFilterType('preorder')" class="px-6 py-2.5 bg-white text-rose-600 hover:bg-amber-100 font-extrabold rounded-xl text-xs transition-all shadow-md flex items-center gap-2"> <i data-lucide="clock" class="w-4 h-4"></i> ดูรายการสั่งจอง Pre-Order </button> <button onclick="openTrackingModal()" class="px-6 py-2.5 bg-rose-700/60 hover:bg-rose-700 text-white font-bold rounded-xl text-xs border border-white/20 transition-all flex items-center gap-1.5"> <i data-lucide="truck" class="w-4 h-4"></i> เช็กสถานะการจัดส่ง </button> </div> </div> <!-- Featured Banner Image --> <div class="relative w-48 h-48 md:w-64 md:h-64 rounded-2xl overflow-hidden shadow-2xl border-4 border-white/20"> <img src="assets/images/streetwear_tshirt_1787569537658.png" alt="Streetwear Preorder" class="w-full h-full object-cover" /> <span class="absolute bottom-3 left-3 right-3 bg-black/60 backdrop-blur-md text-white text-[11px] font-bold py-1 px-2.5 rounded-lg text-center"> รอบส่ง 15 ก.ย. 2026 </span> </div> </div> </section> <!-- ==================== MAIN CONTENT AREA ==================== --> <main class="max-w-7xl mx-auto px-4 py-8 flex-1 w-full grid grid-cols-1 lg:grid-cols-4 gap-8"> <!-- SIDEBAR FILTERS --> <aside class="space-y-6"> <!-- Type Filter Tabs --> <div class="bg-white p-4 rounded-2xl border border-gray-100 shadow-sm space-y-3"> <h3 class="text-xs font-bold text-gray-400 uppercase tracking-wider flex items-center gap-1.5"> <i data-lucide="filter" class="w-3.5 h-3.5 text-rose-500"></i> ประเภทสินค้า </h3> <div class="flex flex-col gap-1.5"> <button id="filter-tab-all" onclick="setFilterType('all')" class="filter-tab w-full px-3.5 py-2 rounded-xl text-xs font-bold text-left transition-all bg-rose-500 text-white flex items-center justify-between" > <span>สินค้าทั้งหมด</span> <i data-lucide="layers" class="w-3.5 h-3.5"></i> </button> <button id="filter-tab-preorder" onclick="setFilterType('preorder')" class="filter-tab w-full px-3.5 py-2 rounded-xl text-xs font-bold text-left transition-all bg-white text-gray-600 hover:bg-amber-50 flex items-center justify-between" > <span class="flex items-center gap-1.5"> <span class="w-2 h-2 rounded-full bg-amber-500"></span> เปิดสั่งจอง (Pre-Order) </span> <i data-lucide="clock" class="w-3.5 h-3.5 text-amber-500"></i> </button> <button id="filter-tab-ready" onclick="setFilterType('ready')" class="filter-tab w-full px-3.5 py-2 rounded-xl text-xs font-bold text-left transition-all bg-white text-gray-600 hover:bg-emerald-50 flex items-center justify-between" > <span class="flex items-center gap-1.5"> <span class="w-2 h-2 rounded-full bg-emerald-500"></span> สินค้าพร้อมส่ง </span> <i data-lucide="truck" class="w-3.5 h-3.5 text-emerald-500"></i> </button> </div> </div> <!-- Quick Order Tracking Card --> <div class="bg-white p-4 rounded-2xl border border-gray-100 shadow-sm space-y-2"> <h3 class="text-xs font-bold text-gray-800 flex items-center gap-1.5"> <i data-lucide="package-search" class="w-4 h-4 text-rose-500"></i> ค้นหาพัสดุรวดเร็ว </h3> <p class="text-[11px] text-gray-400">กรอกรหัสคำสั่งซื้อ (เช่น ORD-883921) เพื่อเช็กสถานะ</p> <div class="flex gap-1.5"> <input type="text" id="quick-track-input" placeholder="ORD-XXXXXX" class="w-full px-3 py-1.5 text-xs rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-rose-500" /> <button onclick="searchQuickTracking()" class="px-3 py-1.5 bg-rose-500 hover:bg-rose-600 text-white font-bold text-xs rounded-xl transition-all"> ค้นหา </button> </div> </div> <!-- Category Filter --> <div class="bg-white p-4 rounded-2xl border border-gray-100 shadow-sm space-y-3"> <h3 class="text-xs font-bold text-gray-400 uppercase tracking-wider">หมวดหมู่เสื้อผ้า</h3> <div class="space-y-1 text-xs"> <label class="flex items-center gap-2 p-1.5 hover:bg-gray-50 rounded-lg cursor-pointer"> <input type="radio" name="cat" value="all" checked onclick="state.selectedCategory='all'; renderProducts();" class="text-rose-500 focus:ring-rose-500" /> <span class="font-medium text-gray-700">รวมทั้งหมด</span> </label> <label class="flex items-center gap-2 p-1.5 hover:bg-gray-50 rounded-lg cursor-pointer"> <input type="radio" name="cat" value="tshirts" onclick="state.selectedCategory='tshirts'; renderProducts();" class="text-rose-500 focus:ring-rose-500" /> <span class="font-medium text-gray-700">เสื้อยืด / T-Shirts</span> </label> <label class="flex items-center gap-2 p-1.5 hover:bg-gray-50 rounded-lg cursor-pointer"> <input type="radio" name="cat" value="hoodies" onclick="state.selectedCategory='hoodies'; renderProducts();" class="text-rose-500 focus:ring-rose-500" /> <span class="font-medium text-gray-700">เสื้อฮู้ดดี้ / Hoodies</span> </label> <label class="flex items-center gap-2 p-1.5 hover:bg-gray-50 rounded-lg cursor-pointer"> <input type="radio" name="cat" value="jackets" onclick="state.selectedCategory='jackets'; renderProducts();" class="text-rose-500 focus:ring-rose-500" /> <span class="font-medium text-gray-700">แจ็คเก็ต & สูท / Jackets</span> </label> </div> </div> </aside> <!-- PRODUCT CATALOG GRID --> <section class="lg:col-span-3 space-y-4"> <div class="flex items-center justify-between bg-white p-3.5 rounded-2xl border border-gray-100 shadow-sm"> <h2 class="text-sm font-bold text-gray-800 flex items-center gap-2"> <i data-lucide="grid" class="w-4 h-4 text-rose-500"></i> รายการสินค้าทั้งหมด </h2> <span class="text-xs text-gray-400">อัปเดตโควตาเปิดจองแบบเรียลไทม์</span> </div> <!-- Grid Container --> <div id="product-grid" class="grid grid-cols-2 md:grid-cols-3 gap-4"> <!-- Injected via app.js --> </div> </section> </main> <!-- ==================== ORDER TRACKING MODAL ==================== --> <div id="tracking-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center p-4 modal-overlay bg-black/60 backdrop-blur-xs"> <div class="relative bg-white rounded-3xl max-w-3xl w-full max-h-[90vh] overflow-hidden modal-content shadow-2xl flex flex-col"> <!-- Header --> <div class="p-5 border-b border-gray-100 flex items-center justify-between bg-rose-500 text-white"> <div class="flex items-center gap-2"> <i data-lucide="truck" class="w-5 h-5"></i> <h3 class="font-extrabold text-base">ติดตามคำสั่งซื้อ & สถานะพรีออเดอร์ (Order Tracking)</h3> </div> <button onclick="closeTrackingModal()" class="text-white/80 hover:text-white p-1"> <i data-lucide="x" class="w-5 h-5"></i> </button> </div> <!-- Filter Tabs --> <div class="flex border-b border-gray-100 bg-gray-50 px-4 pt-2 text-xs overflow-x-auto gap-2"> <button onclick="filterTrackingOrders('all')" id="track-tab-all" class="px-4 py-2.5 font-bold border-b-2 border-rose-500 text-rose-600"> ทั้งหมด </button> <button onclick="filterTrackingOrders('preorder')" id="track-tab-preorder" class="px-4 py-2.5 font-medium text-gray-500 hover:text-gray-800"> รายการ Pre-Order ⏳ </button> <button onclick="filterTrackingOrders('shipping')" id="track-tab-shipping" class="px-4 py-2.5 font-medium text-gray-500 hover:text-gray-800"> อยู่ระหว่างจัดส่ง 🚚 </button> <button onclick="filterTrackingOrders('delivered')" id="track-tab-delivered" class="px-4 py-2.5 font-medium text-gray-500 hover:text-gray-800"> จัดส่งสำเร็จแล้ว ✅ </button> </div> <!-- Orders Body --> <div id="tracking-modal-body" class="p-5 flex-1 overflow-y-auto space-y-6"> <!-- Injected via app.js --> </div> </div> </div> <!-- ==================== SETTINGS MODAL (THEME SWITCHER & PREFERENCES) ==================== --> <div id="settings-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center p-4 modal-overlay bg-black/60 backdrop-blur-xs"> <div class="relative bg-white rounded-3xl max-w-md w-full p-6 modal-content shadow-2xl space-y-6"> <div class="flex items-center justify-between border-b pb-3"> <h3 class="font-extrabold text-gray-900 text-base flex items-center gap-2"> <i data-lucide="settings" class="w-5 h-5 text-rose-500"></i> ตั้งค่าระบบ & สไตล์เว็บไซต์ </h3> <button onclick="closeSettingsModal()" class="text-gray-400 hover:text-gray-600"> <i data-lucide="x" class="w-5 h-5"></i> </button> </div> <!-- Theme Switcher Section --> <div class="space-y-3"> <label class="block text-xs font-extrabold text-gray-700 uppercase tracking-wider flex items-center gap-1.5"> <i data-lucide="palette" class="w-4 h-4 text-amber-500"></i> ธีมสีเว็บไซต์ (Theme Switcher) </label> <div class="grid grid-cols-2 gap-2.5"> <!-- 1. Shopee Orange --> <div onclick="changeTheme('default')" id="theme-card-default" class="theme-card-option p-3 rounded-2xl border border-gray-200 bg-white flex items-center gap-3 active ring-2 ring-rose-500"> <div class="w-7 h-7 rounded-xl bg-gradient-to-r from-orange-500 to-rose-500 flex-shrink-0 shadow-sm"></div> <div> <span class="block text-xs font-bold text-gray-800">Shopee Classic</span> <span class="text-[10px] text-gray-400">ส้มมาตรฐาน</span> </div> </div> <!-- 2. Dark Mode --> <div onclick="changeTheme('dark')" id="theme-card-dark" class="theme-card-option p-3 rounded-2xl border border-gray-200 bg-slate-900 text-white flex items-center gap-3"> <div class="w-7 h-7 rounded-xl bg-slate-800 border border-slate-700 flex-shrink-0 flex items-center justify-center text-amber-400"> <i data-lucide="moon" class="w-4 h-4"></i> </div> <div> <span class="block text-xs font-bold text-white">Dark Mode</span> <span class="text-[10px] text-slate-400">โหมดมืด ถนอมสายตา</span> </div> </div> <!-- 3. Sakura Pink --> <div onclick="changeTheme('sakura')" id="theme-card-sakura" class="theme-card-option p-3 rounded-2xl border border-rose-100 bg-rose-50/50 flex items-center gap-3"> <div class="w-7 h-7 rounded-xl bg-gradient-to-r from-rose-500 to-pink-400 flex-shrink-0 shadow-sm"></div> <div> <span class="block text-xs font-bold text-rose-900">Sakura Pink</span> <span class="text-[10px] text-rose-400">ชมพูซากุระ</span> </div> </div> <!-- 4. Emerald Green --> <div onclick="changeTheme('emerald')" id="theme-card-emerald" class="theme-card-option p-3 rounded-2xl border border-emerald-100 bg-emerald-50/50 flex items-center gap-3"> <div class="w-7 h-7 rounded-xl bg-gradient-to-r from-emerald-600 to-teal-400 flex-shrink-0 shadow-sm"></div> <div> <span class="block text-xs font-bold text-emerald-900">Emerald Green</span> <span class="text-[10px] text-emerald-500">เขียวเอมเมอรัลด์</span> </div> </div> <!-- 5. Cyberpunk Neon --> <div onclick="changeTheme('cyberpunk')" id="theme-card-cyberpunk" class="theme-card-option col-span-2 p-3 rounded-2xl border border-purple-100 bg-purple-50/50 flex items-center gap-3"> <div class="w-7 h-7 rounded-xl bg-gradient-to-r from-purple-600 to-indigo-500 flex-shrink-0 shadow-sm"></div> <div> <span class="block text-xs font-bold text-purple-900">Cyberpunk Neon</span> <span class="text-[10px] text-purple-500">ม่วงนีออนสไตล์ Cyberpunk</span> </div> </div> </div> </div> <button onclick="closeSettingsModal()" class="w-full py-3 bg-gray-900 hover:bg-black text-white font-bold rounded-xl text-xs transition-all"> บันทึกการตั้งค่า </button> </div> </div> <!-- ==================== USER AUTH MODAL (LOGIN / REGISTER) ==================== --> <div id="auth-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center p-4 modal-overlay bg-black/60 backdrop-blur-xs"> <div class="relative bg-white rounded-3xl max-w-md w-full p-6 modal-content shadow-2xl space-y-5"> <button onclick="closeAuthModal()" class="absolute top-4 right-4 text-gray-400 hover:text-gray-600"> <i data-lucide="x" class="w-5 h-5"></i> </button> <!-- Auth Header & Notice --> <div class="text-center space-y-1"> <div class="w-12 h-12 bg-rose-100 text-rose-600 rounded-2xl flex items-center justify-center mx-auto font-black text-xl mb-2"> S </div> <h3 class="text-xl font-bold text-gray-900" id="auth-modal-title">เข้าสู่ระบบ ShopeeStyle</h3> <p class="text-xs text-amber-700 bg-amber-50 p-2.5 rounded-xl border border-amber-200" id="auth-notice-msg"> 🔒 กรุณาเข้าสู่ระบบ หรือ สมัครสมาชิก เพื่อดำเนินการสั่งซื้อหรือสั่งจองเสื้อผ้า </p> </div> <!-- Tab Switcher --> <div class="flex bg-gray-100 p-1 rounded-xl"> <button id="auth-tab-login" onclick="switchAuthTab('login')" class="flex-1 py-2 text-xs font-bold rounded-lg transition-all bg-white text-gray-800 shadow-xs"> เข้าสู่ระบบ (Login) </button> <button id="auth-tab-register" onclick="switchAuthTab('register')" class="flex-1 py-2 text-xs font-bold rounded-lg transition-all text-gray-500"> สมัครสมาชิก (Register) </button> </div> <!-- LOGIN FORM --> <form id="login-form" onsubmit="handleLogin(event)" class="space-y-3"> <div> <label class="block text-xs font-bold text-gray-700 mb-1">อีเมล หรือ เบอร์โทรศัพท์</label> <input type="text" id="login-email" required placeholder="somchai@example.com" class="w-full px-3.5 py-2.5 text-xs rounded-xl border border-gray-200 focus:ring-2 focus:ring-rose-500 focus:outline-none" /> </div> <div> <label class="block text-xs font-bold text-gray-700 mb-1">รหัสผ่าน</label> <input type="password" id="login-password" required placeholder="••••••••" class="w-full px-3.5 py-2.5 text-xs rounded-xl border border-gray-200 focus:ring-2 focus:ring-rose-500 focus:outline-none" /> </div> <button type="submit" class="w-full py-3 bg-rose-500 hover:bg-rose-600 text-white font-bold text-xs rounded-xl shadow-lg shadow-rose-200 transition-all"> เข้าสู่ระบบ </button> <div class="relative py-2 text-center"> <span class="bg-white px-2 text-[10px] text-gray-400 relative z-10">หรือทดสอบเข้าใช้งานทันที</span> <div class="absolute inset-0 flex items-center"><div class="w-full border-t border-gray-100"></div></div> </div> <button type="button" onclick="demoLogin()" class="w-full py-2.5 bg-amber-500 hover:bg-amber-600 text-white font-bold text-xs rounded-xl shadow-sm flex items-center justify-center gap-1.5 transition-all"> <i data-lucide="zap" class="w-4 h-4"></i> ทดลองเข้าสู่ระบบด่วน (บัญชีคุณสมชาย) </button> </form> <!-- REGISTER FORM --> <form id="register-form" onsubmit="handleRegister(event)" class="space-y-3 hidden"> <div> <label class="block text-xs font-bold text-gray-700 mb-1">ชื่อ-นามสกุล</label> <input type="text" id="reg-name" required placeholder="สมชาย ใจดี" class="w-full px-3.5 py-2 text-xs rounded-xl border border-gray-200 focus:ring-2 focus:ring-rose-500 focus:outline-none" /> </div> <div class="grid grid-cols-2 gap-2"> <div> <label class="block text-xs font-bold text-gray-700 mb-1">อีเมล</label> <input type="email" id="reg-email" required placeholder="email@domain.com" class="w-full px-3.5 py-2 text-xs rounded-xl border border-gray-200 focus:ring-2 focus:ring-rose-500 focus:outline-none" /> </div> <div> <label class="block text-xs font-bold text-gray-700 mb-1">เบอร์โทรศัพท์</label> <input type="tel" id="reg-phone" required placeholder="081-234-5678" class="w-full px-3.5 py-2 text-xs rounded-xl border border-gray-200 focus:ring-2 focus:ring-rose-500 focus:outline-none" /> </div> </div> <div> <label class="block text-xs font-bold text-gray-700 mb-1">รหัสผ่าน</label> <input type="password" id="reg-password" required placeholder="••••••••" class="w-full px-3.5 py-2 text-xs rounded-xl border border-gray-200 focus:ring-2 focus:ring-rose-500 focus:outline-none" /> </div> <div> <label class="block text-xs font-bold text-gray-700 mb-1">ที่อยู่สำหรับจัดส่งสินค้า</label> <textarea id="reg-address" rows="2" required placeholder="99/1 ซอยสุขุมวิท 55 แขวงคลองตันเหนือ เขตวัฒนา กรุงเทพฯ 10110" class="w-full px-3.5 py-2 text-xs rounded-xl border border-gray-200 focus:ring-2 focus:ring-rose-500 focus:outline-none"></textarea> </div> <button type="submit" class="w-full py-3 bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-xs rounded-xl shadow-lg shadow-emerald-200 transition-all"> สมัครสมาชิก & เริ่มต้นใช้งาน </button> </form> </div> </div> <!-- ==================== PRODUCT DETAIL MODAL ==================== --> <div id="product-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center p-4 modal-overlay bg-black/60 backdrop-blur-xs"> <div class="relative bg-white rounded-3xl max-w-2xl w-full max-h-[90vh] overflow-y-auto modal-content shadow-2xl"> <button onclick="closeProductModal()" class="absolute top-4 right-4 z-10 w-8 h-8 bg-gray-100 hover:bg-gray-200 rounded-full flex items-center justify-center text-gray-500"> <i data-lucide="x" class="w-5 h-5"></i> </button> <div id="product-modal-content"> <!-- Injected via app.js --> </div> </div> </div> <!-- ==================== CART DRAWER ==================== --> <div id="cart-drawer" class="hidden fixed inset-0 z-50 flex justify-end modal-overlay bg-black/50 backdrop-blur-xs"> <div class="bg-white w-full max-w-md h-full flex flex-col justify-between shadow-2xl modal-content"> <!-- Drawer Header --> <div class="p-4 border-b border-gray-100 flex items-center justify-between bg-rose-500 text-white"> <h3 class="font-bold text-sm flex items-center gap-2"> <i data-lucide="shopping-bag" class="w-4 h-4"></i> ตะกร้าสินค้าของคุณ </h3> <button onclick="closeCartDrawer()" class="p-1 hover:bg-white/20 rounded-lg"> <i data-lucide="x" class="w-5 h-5 text-white"></i> </button> </div> <!-- Drawer Body (Grouped Cart) --> <div id="cart-drawer-body" class="p-4 flex-1 overflow-y-auto"> <!-- Injected via app.js --> </div> <!-- Drawer Footer --> <div class="p-4 border-t border-gray-100 bg-gray-50 space-y-3"> <div class="space-y-1 text-xs"> <div class="flex justify-between text-gray-500"> <span>ยอดรวมสินค้า:</span> <span id="cart-subtotal" class="font-bold text-gray-800">฿0</span> </div> <div class="flex justify-between text-base font-black text-rose-600"> <span>ชำระสุทธิ:</span> <span id="cart-grandtotal">฿0</span> </div> </div> <button onclick="openCheckoutModal()" class="w-full py-3.5 bg-rose-500 hover:bg-rose-600 text-white font-bold text-sm rounded-xl shadow-lg shadow-rose-200 flex items-center justify-center gap-2 transition-all" > <span>ดำเนินการสั่งซื้อ & ชำระเงิน</span> <i data-lucide="arrow-right" class="w-4 h-4"></i> </button> </div> </div> </div> <!-- ==================== CHECKOUT & PAYMENT MODAL ==================== --> <div id="checkout-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center p-4 modal-overlay bg-black/60 backdrop-blur-xs"> <div class="bg-white rounded-3xl max-w-lg w-full p-6 modal-content shadow-2xl space-y-5"> <div class="flex items-center justify-between border-b pb-3"> <h3 class="font-extrabold text-gray-900 text-base flex items-center gap-2"> <i data-lucide="credit-card" class="w-5 h-5 text-rose-500"></i> ชำระเงินผ่าน PromptPay QR </h3> <button onclick="closeCheckoutModal()" class="text-gray-400 hover:text-gray-600"> <i data-lucide="x" class="w-5 h-5"></i> </button> </div> <!-- Address Box --> <div id="checkout-address-box" class="p-3 bg-gray-50 rounded-xl border text-xs text-gray-600 space-y-1"> <!-- Injected via app.js --> </div> <!-- QR Code Display Mockup --> <div class="text-center space-y-3"> <div class="p-4 bg-gray-50 border rounded-2xl inline-block shadow-inner"> <img src="https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=ShopeePreOrderMockPay" alt="PromptPay QR" class="w-44 h-44 mx-auto rounded-lg" /> </div> <div class="text-xs text-gray-500"> สแกนผ่านแอป Mobile Banking ได้ทุกธนาคาร </div> </div> <div class="p-3 bg-emerald-50 border border-emerald-200 rounded-xl text-emerald-900 text-xs text-center font-medium"> ระบบจะทำการตรวจสอบและเปลี่ยนสถานะเป็น <span class="font-bold">"ชำระเงินแล้ว"</span> ทันที </div> <button onclick="processPayment()" class="w-full py-3.5 bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-sm rounded-xl shadow-lg shadow-emerald-200 flex items-center justify-center gap-2" > <i data-lucide="check" class="w-4 h-4"></i> จำลองการชำระเงินสำเร็จ (Simulate Pay) </button> </div> </div> <!-- ==================== ORDER RECEIPT MODAL ==================== --> <div id="receipt-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center p-4 modal-overlay bg-black/60 backdrop-blur-xs"> <div class="bg-white rounded-3xl max-w-md w-full modal-content shadow-2xl"> <div id="receipt-modal-content"> <!-- Injected via app.js --> </div> </div> </div> <!-- FOOTER --> <footer class="bg-gray-900 text-gray-400 py-6 mt-12 text-center text-xs border-t border-gray-800"> <div class="max-w-7xl mx-auto px-4"> <p>© 2026 Shopee Style E-Commerce & Clothing Pre-Order Platform. All rights reserved.</p> </div> </footer> <!-- App Script Initialization --> <script src="assets/js/app.js"></script> </body> </html>
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.45 |
proxy
|
phpinfo
|
Settings