File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090007/shoping/index.html

Back
<!DOCTYPE html> <html lang="th"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>uายD - ตลาดออนไลน์สินค้าราคาพิเศษ ตัวเลือกเยอะที่สุด</title> <meta name="description" content="uายD ช้อปปิ้งออนไลน์ พบกับสินค้าตัวเลือกเยอะที่สุด พร้อมระบบสมัครสมาชิกและ Seller Dashboard สำหรับผู้ขาย"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> <link rel="stylesheet" href="css/styles.css"> </head> <body> <!-- Top Announcement Bar --> <div class="top-bar"> <div class="container"> <div> <span><i class="fa-solid fa-shield-halved" style="color:var(--warning);"></i> uายD Mall แท้ 100% \| คืนเงินได้ภายใน 15 วัน \| ส่งฟรีทั่วไทย </span> </div> <div class="top-bar-links" style="display:flex;align-items:center;gap:16px;"> <a href="#"><i class="fa-solid fa-bell"></i> การแจ้งเตือน</a> <a href="#"><i class="fa-solid fa-circle-question"></i> ช่วยเหลือ</a> <div id="user-header-area"><!-- rendered by app.js --></div> </div> </div> </div> <!-- Main Sticky Header --> <header class="main-header"> <div class="container"> <div class="header-content"> <!-- Logo --> <a href="index.html" class="logo-brand"> <div class="logo-icon">U</div> <div> <span class="logo-text">uายD</span> <span class="logo-tag">SHOP</span> </div> </a> <!-- Search Bar --> <div class="search-box"> <div class="search-input-wrapper"> <input type="text" id="search-input" class="search-input" placeholder="ค้นหาสินค้า, แบรนด์, ตัวเลือก..."> <button class="search-btn"><i class="fa-solid fa-magnifying-glass"></i> ค้นหา</button> </div> <div class="search-tags"> <span onclick="quickSearch('ShopeePhone')">ShopeePhone Pro</span> <span onclick="quickSearch('หูฟัง')">หูฟัง ANC</span> <span onclick="quickSearch('ฮู้ดดี้')">เสื้อฮู้ดเกาหลี</span> <span onclick="quickSearch('คีย์บอร์ด')">Mechanical Keyboard</span> <span onclick="quickSearch('Watch')">Smart Watch</span> </div> </div> <!-- Action Icons --> <div class="header-actions"> <div class="action-btn" title="Seller Dashboard" onclick="openSellerDashboard()" style="width:auto;padding:0 14px;gap:6px;font-size:0.85rem;font-weight:700;"> <i class="fa-solid fa-store"></i><span>ขายสินค้า</span> </div> <div class="action-btn" title="ประวัติการสั่งซื้อ" onclick="openUserProfileModal('orders')"> <i class="fa-solid fa-clock-rotate-left"></i> </div> <div class="action-btn" title="รายการโปรด"> <i class="fa-regular fa-heart"></i> </div> <div class="action-btn" onclick="toggleCartDrawer(true)" title="ตะกร้าสินค้า"> <i class="fa-solid fa-bag-shopping"></i> <span class="badge-count" id="cart-badge">0</span> </div> </div> </div> </div> </header> <!-- Hero Section --> <section class="hero-section"> <div class="container"> <div class="hero-grid"> <div class="hero-banner-main"> <span class="hero-tag"><i class="fa-solid fa-fire"></i> uายD FLASH SALE DEALS</span> <h1 class="hero-title">ลดใหญ่จัดเต็ม สินค้าออฟชันเยอะที่สุด!</h1> <p class="hero-desc">เลือกสี เลือกสเปก เลือกของแถมได้ตามใจ • สะสม uายD Coins แลกส่วนลด • เปิดร้านขายได้ฟรี!</p> <button class="hero-cta" onclick="document.getElementById('flash-section').scrollIntoView({behavior:'smooth'})"> ช้อปเลยตอนนี้ <i class="fa-solid fa-arrow-right"></i> </button> </div> <div class="hero-side"> <div class="side-banner-card orange" onclick="quickSearch('ShopeePhone')"> <div class="banner-content"> <h4>ShopeePhone Pro 15</h4> <p>เลือกความจุสูงสุด 1TB + สลักชื่อฟรี</p> </div> <i class="fa-solid fa-mobile-screen" style="font-size:2.2rem;opacity:0.8;"></i> </div> <div class="side-banner-card purple" onclick="openSellerDashboard()"> <div class="banner-content"> <h4>เปิดร้านค้าบน uายD</h4> <p>สมัครฟรี! เพิ่มสินค้าได้ไม่จำกัด</p> </div> <i class="fa-solid fa-store" style="font-size:2.2rem;opacity:0.8;"></i> </div> </div> </div> </div> </section> <!-- Main Content --> <main class="container"> <!-- Flash Sale Bar --> <div class="flash-sale-bar" id="flash-section"> <div class="flash-sale-header"> <div class="flash-title"> <i class="fa-solid fa-bolt-lightning" style="color:var(--warning);"></i> FLASH SALE </div> <div class="timer-box"> <span>จบใน</span> <span class="timer-num" id="timer-hours">03</span> <span class="timer-sep">:</span> <span class="timer-num" id="timer-mins">45</span> <span class="timer-sep">:</span> <span class="timer-num" id="timer-secs">12</span> </div> </div> <div style="font-weight:600;color:var(--primary);font-size:0.9rem;">ดูทั้งหมด <i class="fa-solid fa-chevron-right"></i></div> </div> <!-- Categories --> <section class="categories-wrapper"> <div class="section-title-wrapper"> <h2 class="section-title"><i class="fa-solid fa-shapes" style="color:var(--primary);"></i> หมวดหมู่สินค้า</h2> </div> <div class="categories-grid" id="categories-grid"></div> </section> <!-- Products --> <section> <div class="section-title-wrapper"> <h2 class="section-title"><i class="fa-solid fa-fire-flame-curved" style="color:var(--primary);"></i> สินค้าแนะนำ (พร้อมออฟชันเยอะ)</h2> </div> <div class="products-grid" id="products-grid"></div> </section> </main> <!-- ============================================================ MODALS ============================================================ --> <!-- Product Detail Modal --> <div class="modal-overlay" id="product-modal"> <div class="modal-container" id="modal-content"></div> </div> <!-- ---- User Profile Modal ---- --> <div class="modal-overlay" id="user-profile-modal"> <div class="modal-container user-modal-container" style="padding:24px;position:relative;"> <button class="modal-close-btn" onclick="closeUserProfileModal()"><i class="fa-solid fa-xmark"></i></button> <div class="user-nav-tabs"> <button class="user-tab-btn" id="tab-btn-orders" onclick="switchUserTab('orders')"> <i class="fa-solid fa-box-archive"></i> คำสั่งซื้อ </button> <button class="user-tab-btn" id="tab-btn-coins" onclick="switchUserTab('coins')"> <i class="fa-solid fa-coins"></i> Coins </button> <button class="user-tab-btn" id="tab-btn-profile" onclick="switchUserTab('profile')"> <i class="fa-solid fa-user-gear"></i> ข้อมูลส่วนตัว </button> </div> <div id="user-tab-content-area"></div> </div> </div> <!-- ---- Auth (Login / Register) Modal ---- --> <div class="modal-overlay" id="auth-modal"> <div class="modal-container" style="max-width:480px;padding:28px;position:relative;"> <button class="modal-close-btn" onclick="closeAuthModal()"><i class="fa-solid fa-xmark"></i></button> <!-- Tabs --> <div style="display:flex;border-bottom:2px solid var(--gray-200);margin-bottom:20px;"> <button id="auth-tab-login" class="user-tab-btn active" onclick="switchAuthTab('login')"> <i class="fa-solid fa-right-to-bracket"></i> เข้าสู่ระบบ </button> <button id="auth-tab-register" class="user-tab-btn" onclick="switchAuthTab('register')"> <i class="fa-solid fa-user-plus"></i> สมัครสมาชิกใหม่ </button> </div> <!-- Login Form --> <form id="auth-login-form" class="auth-form-card" onsubmit="handleLoginSubmit(event)" style="display:flex;flex-direction:column;gap:14px;"> <p style="font-size:0.9rem;color:var(--gray-500);margin-bottom:4px;"> ยังไม่มีบัญชี? <span onclick="switchAuthTab('register')" style="color:var(--primary);cursor:pointer;font-weight:700;">สมัครสมาชิกฟรี</span> </p> <div> <label class="seller-form-label">ชื่อผู้ใช้ / อีเมล</label> <input class="auth-input-field" id="login-user-input" placeholder="username หรือ email" required> </div> <div> <label class="seller-form-label">รหัสผ่าน</label> <input class="auth-input-field" id="login-pass-input" type="password" placeholder="••••••••" required> </div> <div id="login-error-msg" style="color:var(--danger);font-size:0.85rem;display:none;"></div> <div style="font-size:0.82rem;color:var(--gray-500);"> บัญชีทดสอบ: <strong>somchai_shopee</strong> / รหัส: <strong>shopee123</strong> </div> <button type="submit" class="auth-submit-btn"> <i class="fa-solid fa-right-to-bracket"></i> เข้าสู่ระบบ </button> </form> <!-- Register Form --> <form id="auth-register-form" class="auth-form-card" onsubmit="handleRegisterSubmit(event)" style="display:none;flex-direction:column;gap:14px;"> <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;"> <div> <label class="seller-form-label">ชื่อ-นามสกุล </label> <input class="auth-input-field" id="reg-name-input" placeholder="เช่น สมหมาย ใจดี" required> </div> <div> <label class="seller-form-label">ชื่อผู้ใช้ (Username) </label> <input class="auth-input-field" id="reg-username-input" placeholder="เช่น sommai99" required> </div> </div> <div> <label class="seller-form-label">อีเมล </label> <input class="auth-input-field" id="reg-email-input" type="email" placeholder="example@email.com" required> </div> <div> <label class="seller-form-label">เบอร์โทรศัพท์</label> <input class="auth-input-field" id="reg-phone-input" placeholder="08X-XXX-XXXX"> </div> <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;"> <div> <label class="seller-form-label">รหัสผ่าน </label> <input class="auth-input-field" id="reg-pass-input" type="password" placeholder="อย่างน้อย 6 ตัวอักษร" required> </div> <div> <label class="seller-form-label">ยืนยันรหัสผ่าน *</label> <input class="auth-input-field" id="reg-pass-confirm-input" type="password" placeholder="ยืนยันรหัสผ่าน" required> </div> </div> <!-- Role Selection --> <div style="background:var(--gray-100);padding:14px;border-radius:var(--radius-md);"> <label class="seller-form-label" style="margin-bottom:10px;display:block;">สมัครในฐานะ</label> <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;"> <label style="display:flex;align-items:center;gap:10px;padding:12px;background:var(--white);border:2px solid var(--gray-300);border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition-fast);" id="role-buyer-label"> <input type="radio" name="reg-role" value="buyer" checked onchange="updateRoleUI()"> <div> <div style="font-weight:700;"><i class="fa-solid fa-user-tag" style="color:var(--primary);"></i> ผู้ซื้อ (Buyer)</div> <div style="font-size:0.75rem;color:var(--gray-500);">ช้อปปิ้ง สะสม Coins</div> </div> </label> <label style="display:flex;align-items:center;gap:10px;padding:12px;background:var(--white);border:2px solid var(--gray-300);border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition-fast);" id="role-seller-label"> <input type="radio" name="reg-role" value="seller" onchange="updateRoleUI()"> <div> <div style="font-weight:700;"><i class="fa-solid fa-store" style="color:var(--primary);"></i> ผู้ขาย (Seller)</div> <div style="font-size:0.75rem;color:var(--gray-500);">เพิ่มสินค้า จัดการร้านค้า</div> </div> </label> </div> </div> <div id="register-error-msg" style="color:var(--danger);font-size:0.85rem;display:none;"></div> <button type="submit" class="auth-submit-btn"> <i class="fa-solid fa-user-plus"></i> สมัครสมาชิกฟรี (รับโบนัส 50 Coins!) </button> </form> </div> </div> <!-- ---- Seller Dashboard Modal ---- --> <div class="modal-overlay" id="seller-dashboard-modal"> <div class="modal-container" style="max-width:960px;padding:24px;position:relative;max-height:92vh;overflow-y:auto;"> <button class="modal-close-btn" onclick="closeSellerDashboard()"><i class="fa-solid fa-xmark"></i></button> <!-- Seller Header --> <div style="display:flex;align-items:center;gap:14px;margin-bottom:20px;padding-bottom:16px;border-bottom:2px solid var(--gray-200);"> <div style="background:var(--gradient-main);width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.4rem;"> <i class="fa-solid fa-store"></i> </div> <div> <h2 style="font-size:1.3rem;font-weight:800;color:var(--dark);">uายD Seller Dashboard</h2> <p style="font-size:0.85rem;color:var(--gray-500);">จัดการสินค้า เพิ่ม/แก้ไข/ลบสินค้าในร้านค้าของคุณ</p> </div> </div> <!-- Tabs --> <div class="user-nav-tabs" style="margin-bottom:20px;"> <button class="user-tab-btn active" id="seller-tab-my-products" onclick="switchSellerTab('my-products')"> <i class="fa-solid fa-boxes-stacked"></i> สินค้าของฉัน </button> <button class="user-tab-btn" id="seller-tab-add-product" onclick="switchSellerTab('add-product'); draftOptions=[];"> <i class="fa-solid fa-plus"></i> เพิ่มสินค้าใหม่ </button> </div> <div id="seller-tab-content"></div> </div> </div> <!-- Cart Drawer --> <div class="drawer-overlay" id="cart-drawer"> <div class="drawer-header"> <h3><i class="fa-solid fa-bag-shopping"></i> ตะกร้าสินค้าของคุณ</h3> <button onclick="toggleCartDrawer(false)" style="background:none;border:none;color:#fff;font-size:1.4rem;cursor:pointer;"> <i class="fa-solid fa-xmark"></i> </button> </div> <div class="drawer-body" id="cart-items-list"></div> <div class="voucher-section" style="margin:0 20px;"> <input type="text" id="voucher-code-input" class="voucher-input" placeholder="โค้ดส่วนลด (เช่น SHOPEE50)"> <button class="apply-voucher-btn" onclick="applyVoucherCode()">ใช้โค้ด</button> </div> <div class="drawer-footer"> <div class="summary-row"> <span>ราคารวม:</span><span id="cart-subtotal">฿0</span> </div> <div class="summary-row" style="color:var(--success);"> <span>ส่วนลด:</span><span id="cart-discount">-฿0</span> </div> <div class="summary-row total-row"> <span>ยอดสุทธิ:</span><span id="cart-total">฿0</span> </div> <button class="btn-checkout" onclick="openCheckoutModal()"> ดำเนินการชำระเงิน <i class="fa-solid fa-arrow-right"></i> </button> </div> </div> <!-- Checkout Modal --> <div class="modal-overlay" id="checkout-modal"> <div class="modal-container checkout-modal"> <div class="checkout-header"><i class="fa-solid fa-credit-card"></i> ชำระเงินสั่งซื้อสินค้า</div> <div style="padding:20px;"> <div style="margin-bottom:14px;"> <label style="font-weight:700;font-size:0.9rem;display:block;margin-bottom:6px;">ที่อยู่จัดส่ง</label> <input type="text" class="custom-input-box" value="123/45 ถนนสุขุมวิท กรุงเทพมหานคร 10110" style="width:100%;"> </div> <!-- Coins --> <div style="background:#FFF9E6;padding:10px 14px;border-radius:var(--radius-sm);border:1px dashed var(--warning);margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;"> <div style="display:flex;align-items:center;gap:8px;"> <i class="fa-solid fa-coins" style="color:#FFC107;font-size:1.2rem;"></i> <span id="checkout-coins-label" style="font-size:0.85rem;font-weight:600;">ใช้ Shopee Coins</span> </div> <input type="checkbox" id="coins-checkbox" onchange="toggleUseCoins(this.checked)" style="width:18px;height:18px;cursor:pointer;"> </div> <label style="font-weight:700;font-size:0.9rem;">เลือกช่องทางชำระเงิน</label> <div class="payment-methods-grid"> <div class="payment-option selected" id="pay-promptpay" onclick="selectPaymentMethod('promptpay')"> <i class="fa-solid fa-qrcode" style="font-size:1.2rem;color:var(--primary);"></i><br>PromptPay QR </div> <div class="payment-option" id="pay-shopeepay" onclick="selectPaymentMethod('shopeepay')"> <i class="fa-solid fa-wallet" style="font-size:1.2rem;color:var(--accent-pink);"></i><br>ShopeePay </div> <div class="payment-option" id="pay-card" onclick="selectPaymentMethod('card')"> <i class="fa-solid fa-credit-card" style="font-size:1.2rem;"></i><br>บัตรเครดิต </div> <div class="payment-option" id="pay-cod" onclick="selectPaymentMethod('cod')"> <i class="fa-solid fa-truck-ramp-box" style="font-size:1.2rem;color:var(--secondary);"></i><br>เก็บเงินปลายทาง </div> </div> <div class="qr-box" id="qr-payment-box"> <h4 style="font-size:0.95rem;margin-bottom:8px;">สแกนชำระผ่าน Mobile Banking ทุกธนาคาร</h4> <img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=PROMPTPAY_SHOPEE_VIBRANT" class="qr-img" alt="QR Code"> <p style="font-size:0.8rem;color:var(--gray-500);margin-top:6px;">ยอดชำระ: <strong id="checkout-total-val" style="color:var(--primary);">฿0</strong></p> </div> <div style="display:flex;gap:12px;margin-top:20px;"> <button onclick="closeCheckoutModal()" style="flex:1;padding:12px;border:1px solid var(--gray-300);background:#fff;border-radius:var(--radius-md);font-weight:700;cursor:pointer;">ยกเลิก</button> <button onclick="confirmOrderCheckout()" style="flex:2;padding:12px;background:var(--gradient-main);color:#fff;border:none;border-radius:var(--radius-md);font-weight:700;font-size:1rem;cursor:pointer;box-shadow:0 4px 15px rgba(255,61,0,0.3);"> ยืนยันชำระเงิน <i class="fa-solid fa-check"></i> </button> </div> </div> </div> </div> <!-- Live Chat --> <div class="chat-widget-btn" onclick="toggleChatWindow()"> <i class="fa-solid fa-comments" style="font-size:1.4rem;"></i> <span>แชทกับร้านค้า</span> </div> <div class="chat-box-window" id="chat-window"> <div class="chat-box-header"> <div style="display:flex;align-items:center;gap:8px;"> <i class="fa-solid fa-store" style="color:var(--warning);"></i> <span style="font-weight:700;">Shopee Official Store</span> </div> <i class="fa-solid fa-xmark" style="cursor:pointer;" onclick="toggleChatWindow()"></i> </div> <div class="chat-messages" id="chat-msg-container"> <div class="chat-msg seller">สวัสดีครับ! ยินดีต้อนรับสู่ uายD Store 😊 มีสินค้าให้เลือกมากมาย หรือจะสมัครเป็น Seller ก็ทำได้ฟรีเลยครับ!</div> </div> <div class="chat-input-row"> <input type="text" id="chat-input" placeholder="พิมพ์ข้อความ..." onkeypress="if(event.key==='Enter')sendChatMessage()"> <button onclick="sendChatMessage()" style="background:var(--primary);color:#fff;border:none;padding:6px 14px;border-radius:6px;cursor:pointer;font-weight:700;"> <i class="fa-solid fa-paper-plane"></i> </button> </div> </div> <!-- Scripts --> <script src="js/data.js"></script> <script src="js/app.js"></script> <script> // Helper: update role card UI highlight function updateRoleUI() { const isSellerChecked = document.querySelector('input[name="reg-role"]:checked')?.value === 'seller'; const buyerLabel = document.getElementById('role-buyer-label'); const sellerLabel = document.getElementById('role-seller-label'); if (buyerLabel) buyerLabel.style.borderColor = !isSellerChecked ? 'var(--primary)' : 'var(--gray-300)'; if (sellerLabel) sellerLabel.style.borderColor = isSellerChecked ? 'var(--primary)' : 'var(--gray-300)'; } </script> </body> </html>

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