File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090026/Shop CMTC.html

Back
<!DOCTYPE html> <html lang="th"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Shop CMTC - E-Commerce App</title> <!-- Google Fonts & FontAwesome Icons --> <link href="https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <style> :root { --bg-pastel-purple: #f3e8ff; --primary-purple: #a855f7; --dark-purple: #7e22ce; --light-purple: #faf5ff; --text-color: #4a044e; --card-bg: #ffffff; --border-color: #e9d5ff; --search-bg: #ffffff; --input-bg: #faf5ff; --muted-color: #888; } /* === DARK MODE THEME === / [data-theme="dark"] { --bg-pastel-purple: #1a0a2e; --primary-purple: #c084fc; --dark-purple: #e9d5ff; --light-purple: #1e0f35; --text-color: #f3e8ff; --card-bg: #150a28; --border-color: #3d1f66; --search-bg: #1e0f35; --input-bg: #1a0a2e; --muted-color: #b09acc; } [data-theme="dark"] body { background-color: var(--bg-pastel-purple); } [data-theme="dark"] .app-container { background-color: var(--light-purple); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); } [data-theme="dark"] .app-header { background-color: var(--card-bg); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4); border-bottom: 1px solid var(--border-color); } [data-theme="dark"] .nav-link { color: #c4a8f0; } [data-theme="dark"] .nav-link:hover, [data-theme="dark"] .nav-link.active { color: var(--dark-purple); background-color: rgba(192, 132, 252, 0.15); } [data-theme="dark"] .lang-btn { background-color: rgba(192, 132, 252, 0.15); border-color: var(--primary-purple); color: var(--dark-purple); } [data-theme="dark"] .search-box { background-color: var(--search-bg); border-color: var(--border-color); } [data-theme="dark"] .search-box input { background-color: transparent; color: var(--text-color); } [data-theme="dark"] .search-box input::placeholder { color: var(--muted-color); } [data-theme="dark"] .product-card { background-color: var(--card-bg); border-color: var(--border-color); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .product-card:hover { box-shadow: 0 12px 25px rgba(192, 132, 252, 0.2); } [data-theme="dark"] .product-sales { color: var(--muted-color); } [data-theme="dark"] .hero-banner { background: linear-gradient(135deg, #1e0f35 0%, #2a1055 40%, #1a0a2e 100%); border-color: var(--border-color); } [data-theme="dark"] .hero-tag-badge { background: rgba(30, 15, 53, 0.9); border-color: var(--border-color); color: var(--primary-purple); } [data-theme="dark"] .hero-text h1 { color: #e9d5ff; } [data-theme="dark"] .hero-text p { color: #c4a8f0; } [data-theme="dark"] .hero-floating-badge { background: rgba(21, 10, 40, 0.95); border-color: var(--border-color); color: #e9d5ff; } [data-theme="dark"] .category-pill { background-color: var(--card-bg); border-color: var(--border-color); color: var(--text-color); } [data-theme="dark"] .category-pill:hover { background-color: rgba(192, 132, 252, 0.15); } [data-theme="dark"] .coupon-card { background: linear-gradient(135deg, #1e0f35 0%, #150a28 100%); } [data-theme="dark"] .coupon-card::before, [data-theme="dark"] .coupon-card::after { background: var(--light-purple); } [data-theme="dark"] .coupon-info h4 { color: var(--dark-purple); } [data-theme="dark"] .coupon-info p { color: var(--muted-color); } [data-theme="dark"] .coupon-code-badge { background-color: rgba(192, 132, 252, 0.15); border-color: var(--border-color); color: var(--dark-purple); } [data-theme="dark"] .detail-wrapper { background-color: var(--card-bg); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .back-btn { background-color: var(--card-bg); border-color: var(--border-color); color: var(--dark-purple); } [data-theme="dark"] .back-btn:hover { background-color: rgba(192, 132, 252, 0.15); } [data-theme="dark"] .cart-drawer { background: var(--card-bg); } [data-theme="dark"] .cart-drawer-header { background: linear-gradient(135deg, #1e0f35 0%, #2a1055 100%); border-color: var(--border-color); } [data-theme="dark"] .cart-item { background-color: var(--light-purple); border-color: var(--border-color); } [data-theme="dark"] .cart-item-title { color: var(--dark-purple); } [data-theme="dark"] .cart-item-meta { color: var(--muted-color); } [data-theme="dark"] .cart-drawer-footer { background-color: var(--card-bg); border-color: var(--border-color); } [data-theme="dark"] .qty-btn { background-color: var(--light-purple); border-color: var(--border-color); color: var(--dark-purple); } [data-theme="dark"] .auth-container { background-color: var(--card-bg); } [data-theme="dark"] .form-group input { background-color: var(--input-bg); border-color: var(--border-color); color: var(--text-color); } [data-theme="dark"] .order-card { background-color: var(--card-bg); border-color: var(--border-color); } [data-theme="dark"] .admin-card { background-color: var(--card-bg); } [data-theme="dark"] .admin-table th { background-color: var(--light-purple); } [data-theme="dark"] .admin-table td { border-color: var(--border-color); } [data-theme="dark"] .admin-table th { border-color: var(--border-color); } [data-theme="dark"] .admin-table tr:hover { background-color: rgba(192, 132, 252, 0.1); } [data-theme="dark"] .status-select { background-color: var(--input-bg); border-color: var(--border-color); color: var(--text-color); } [data-theme="dark"] .payment-option-card { background-color: var(--card-bg); border-color: var(--border-color); } [data-theme="dark"] .payment-option-card.active { background-color: rgba(192, 132, 252, 0.15); border-color: var(--primary-purple); } [data-theme="dark"] .size-opt { background-color: var(--card-bg); border-color: var(--border-color); color: var(--text-color); } [data-theme="dark"] .eta-banner { background-color: rgba(192, 132, 252, 0.1); } [data-theme="dark"] .app-footer { background-color: var(--card-bg); border-color: var(--border-color); color: var(--muted-color); } [data-theme="dark"] .tracking-timeline::before { background-color: #3d1f66; } [data-theme="dark"] .step-icon { background-color: var(--card-bg); border-color: #3d1f66; color: var(--muted-color); } [data-theme="dark"] .discount-input-group input { background-color: var(--input-bg); border-color: var(--border-color); color: var(--text-color); } / === DARK MODE TOGGLE BUTTON === / .theme-toggle-btn { position: relative; width: 54px; height: 28px; background: linear-gradient(135deg, #87CEEB, #FFF9C4); border: none; border-radius: 20px; cursor: pointer; padding: 0; transition: background 0.4s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); flex-shrink: 0; } [data-theme="dark"] .theme-toggle-btn { background: linear-gradient(135deg, #1a0a2e, #3d1f66); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); } .theme-toggle-btn .toggle-thumb { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: white; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); } [data-theme="dark"] .theme-toggle-btn .toggle-thumb { transform: translateX(26px); background: #c084fc; } / Global transition for smooth theme switching / , ::before, ::after { transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; } * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Kanit', sans-serif; -webkit-tap-highlight-color: transparent; } body { background-color: var(--bg-pastel-purple); color: var(--text-color); min-height: 100vh; display: flex; flex-direction: column; } .app-container { width: 100%; max-width: 1200px; margin: 0 auto; min-height: 100vh; background-color: var(--light-purple); box-shadow: 0 10px 30px rgba(126, 34, 206, 0.08); display: flex; flex-direction: column; position: relative; } /* Top Desktop Header Navbar / .app-header { background-color: var(--card-bg); padding: 15px 40px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 12px rgba(126, 34, 206, 0.08); z-index: 10; position: sticky; top: 0; } .header-brand { display: flex; align-items: center; gap: 12px; cursor: pointer; } .header-brand i { font-size: 1.8rem; color: var(--primary-purple); } .app-title { font-size: 1.6rem; font-weight: 700; color: var(--dark-purple); letter-spacing: -0.5px; } / Desktop Navigation Links / .desktop-nav { display: flex; align-items: center; gap: 25px; } .nav-link { display: flex; align-items: center; gap: 8px; color: #6b7280; font-weight: 500; font-size: 0.95rem; text-decoration: none; cursor: pointer; padding: 8px 14px; border-radius: 20px; transition: all 0.2s ease; } .nav-link:hover, .nav-link.active { color: var(--dark-purple); background-color: var(--bg-pastel-purple); font-weight: 600; } .header-actions { display: flex; align-items: center; gap: 15px; } .lang-btn { background-color: var(--bg-pastel-purple); color: var(--dark-purple); border: 1px solid var(--primary-purple); padding: 6px 14px; border-radius: 20px; cursor: pointer; font-weight: 600; font-size: 0.85rem; transition: all 0.2s; } .lang-btn:hover { background-color: var(--primary-purple); color: white; } / Cart Icon Button in Nav / .cart-btn { position: relative; background: linear-gradient(135deg, var(--primary-purple), var(--dark-purple)); color: white; border: none; width: 44px; height: 44px; border-radius: 50%; font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3); } .cart-btn:hover { transform: scale(1.1); } .cart-badge { position: absolute; top: -5px; right: -5px; background-color: #ef4444; color: white; font-size: 0.7rem; font-weight: 700; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; display: none; } .cart-badge.has-items { display: flex; } / Cart Drawer Overlay / .cart-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .cart-overlay.open { opacity: 1; pointer-events: all; } / Cart Drawer / .cart-drawer { position: fixed; top: 0; right: -420px; width: 400px; max-width: 95vw; height: 100vh; background: white; z-index: 1001; display: flex; flex-direction: column; box-shadow: -8px 0 30px rgba(0, 0, 0, 0.15); transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .cart-drawer.open { right: 0; } .cart-drawer-header { padding: 20px 24px; border-bottom: 1px solid #f3e8ff; display: flex; justify-content: space-between; align-items: center; background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%); } .cart-drawer-header h3 { color: var(--dark-purple); font-size: 1.1rem; font-weight: 700; } .cart-close-btn { background: none; border: none; font-size: 1.3rem; color: var(--dark-purple); cursor: pointer; padding: 4px; border-radius: 8px; transition: background 0.2s; } .cart-close-btn:hover { background: #f3e8ff; } .cart-items-list { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; } .cart-item { display: flex; align-items: center; gap: 12px; background: var(--light-purple); border-radius: 12px; padding: 12px; border: 1px solid #e9d5ff; animation: fadeIn 0.2s ease; } .cart-item img { width: 60px; height: 60px; object-fit: cover; border-radius: 8px; flex-shrink: 0; } .cart-item-info { flex: 1; min-width: 0; } .cart-item-title { font-size: 0.9rem; font-weight: 600; color: var(--dark-purple); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cart-item-meta { font-size: 0.8rem; color: #888; margin-top: 3px; } .cart-item-price { font-size: 1rem; font-weight: 700; color: var(--primary-purple); margin-top: 4px; } .cart-qty-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; } .qty-btn { width: 26px; height: 26px; border-radius: 50%; border: 1px solid #e9d5ff; background: white; color: var(--dark-purple); font-size: 1rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .qty-btn:hover { background: var(--primary-purple); color: white; border-color: var(--primary-purple); } .qty-display { font-weight: 600; font-size: 0.95rem; min-width: 20px; text-align: center; } .cart-remove-btn { background: none; border: none; color: #ef4444; font-size: 1rem; cursor: pointer; padding: 4px; border-radius: 6px; transition: background 0.2s; } .cart-remove-btn:hover { background: #fee2e2; } .cart-empty-state { text-align: center; padding: 60px 20px; color: #aaa; } .cart-empty-state i { font-size: 3.5rem; margin-bottom: 15px; color: #ddd; } .cart-drawer-footer { padding: 20px 24px; border-top: 1px solid #f3e8ff; background: white; } .cart-total-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } .cart-total-label { font-size: 1rem; font-weight: 500; color: #555; } .cart-total-price { font-size: 1.4rem; font-weight: 700; color: var(--dark-purple); } .checkout-btn { width: 100%; padding: 14px; background: linear-gradient(135deg, var(--primary-purple), var(--dark-purple)); color: white; border: none; border-radius: 14px; font-size: 1rem; font-weight: 700; cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 15px rgba(168, 85, 247, 0.35); } .checkout-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(168, 85, 247, 0.4); } / Add to Cart card button / .add-to-cart-btn { width: 100%; margin-top: 8px; padding: 9px 0; background: white; color: var(--primary-purple); border: 2px solid var(--primary-purple); border-radius: 25px; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 6px; } .add-to-cart-btn:hover { background: var(--primary-purple); color: white; } / Size Picker in Detail / .size-picker-container { margin: 14px 0; } .size-picker-label { font-size: 0.9rem; font-weight: 600; color: var(--dark-purple); margin-bottom: 8px; } .size-options { display: flex; gap: 8px; flex-wrap: wrap; } .size-opt { width: 46px; height: 46px; border-radius: 10px; border: 2px solid #e9d5ff; background: white; color: var(--dark-purple); font-weight: 600; font-size: 0.85rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .size-opt:hover { border-color: var(--primary-purple); color: var(--primary-purple); } .size-opt.selected { background: var(--primary-purple); color: white; border-color: var(--primary-purple); } / Main Content Area / .content-area { flex: 1; padding: 30px 40px; } / Page System / .page { display: none; animation: fadeIn 0.3s ease; } .page.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } / Hero Banner (Soft Pastel & Lifestyle Visuals) / .hero-banner { background: linear-gradient(135deg, #f3e8ff 0%, #ede9fe 40%, #e9d5ff 100%); border: 1px solid #ddd6fe; border-radius: 24px; padding: 36px 40px; color: var(--text-color); margin-bottom: 30px; display: flex; justify-content: space-between; align-items: center; gap: 30px; box-shadow: 0 12px 30px rgba(168, 85, 247, 0.08); position: relative; overflow: hidden; } .hero-banner::before { content: ''; position: absolute; top: -50px; right: -50px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(192, 132, 252, 0.25) 0%, rgba(255, 255, 255, 0) 70%); border-radius: 50%; pointer-events: none; } .hero-banner::after { content: ''; position: absolute; bottom: -60px; left: -40px; width: 220px; height: 220px; background: radial-gradient(circle, rgba(233, 213, 255, 0.6) 0%, rgba(255, 255, 255, 0) 70%); border-radius: 50%; pointer-events: none; } .hero-text { flex: 1; z-index: 2; max-width: 580px; } .hero-tag-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(8px); color: #7e22ce; border: 1px solid #d8b4fe; padding: 6px 14px; border-radius: 20px; font-size: 0.85rem; font-weight: 600; margin-bottom: 14px; box-shadow: 0 2px 8px rgba(126, 34, 206, 0.08); } .hero-text h1 { font-size: 2.2rem; font-weight: 700; color: #4c1d95; margin-bottom: 12px; line-height: 1.3; letter-spacing: -0.5px; } .hero-text p { font-size: 1.05rem; color: #6b21a8; opacity: 0.9; line-height: 1.6; margin-bottom: 22px; } .hero-cta-btn { display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%); color: white; padding: 12px 24px; border-radius: 25px; font-weight: 600; font-size: 0.95rem; border: none; cursor: pointer; box-shadow: 0 6px 18px rgba(168, 85, 247, 0.3); transition: all 0.3s ease; text-decoration: none; } .hero-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(168, 85, 247, 0.4); background: linear-gradient(135deg, #9333ea 0%, #6b21a8 100%); } .hero-visual-wrapper { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } / === HERO PRODUCT SHOWCASE GRID === / .hero-product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 290px; position: relative; z-index: 3; } .hero-product-card { background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(12px); border: 1.5px solid rgba(216, 180, 254, 0.6); border-radius: 18px; padding: 14px 10px; text-align: center; cursor: pointer; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; overflow: hidden; box-shadow: 0 4px 16px rgba(168, 85, 247, 0.10); } .hero-product-card::before { content: ''; position: absolute; inset: 0; border-radius: 18px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(243, 232, 255, 0.3) 100%); pointer-events: none; } .hero-product-card:hover { transform: translateY(-6px) scale(1.04); box-shadow: 0 16px 32px rgba(168, 85, 247, 0.22); border-color: rgba(168, 85, 247, 0.5); } .hero-product-card:nth-child(1) { animation: heroFloat 4.5s ease-in-out infinite; } .hero-product-card:nth-child(2) { animation: heroFloat 5s ease-in-out infinite 0.7s; } .hero-product-card:nth-child(3) { animation: heroFloat 4.8s ease-in-out infinite 1.2s; } .hero-product-card:nth-child(4) { animation: heroFloat 5.2s ease-in-out infinite 0.4s; } .hero-product-emoji { font-size: 2.4rem; display: block; margin-bottom: 6px; filter: drop-shadow(0 4px 8px rgba(168, 85, 247, 0.2)); line-height: 1; } .hero-product-name { font-size: 0.72rem; font-weight: 700; color: #6b21a8; line-height: 1.3; display: block; margin-bottom: 4px; } .hero-product-price { font-size: 0.8rem; font-weight: 800; color: #a855f7; display: block; } .hero-product-badge { position: absolute; top: 8px; right: 8px; background: linear-gradient(135deg, #ef4444, #dc2626); color: white; font-size: 0.6rem; font-weight: 800; padding: 2px 6px; border-radius: 8px; z-index: 2; } .hero-product-emoji, .hero-product-name, .hero-product-price { position: relative; z-index: 1; } / Hero Stats Bar / .hero-stats-bar { display: flex; gap: 20px; margin-top: 20px; flex-wrap: wrap; } .hero-stat-item { display: flex; align-items: center; gap: 8px; } .hero-stat-icon { width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, 0.7); border: 1px solid #e9d5ff; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; color: #7e22ce; } .hero-stat-text { font-size: 0.78rem; color: #6b21a8; } .hero-stat-text strong { display: block; font-size: 0.88rem; font-weight: 700; color: #4c1d95; } .hero-floating-badge { position: absolute; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); border: 1px solid #e9d5ff; padding: 8px 14px; border-radius: 16px; font-size: 0.82rem; font-weight: 600; color: #581c87; box-shadow: 0 8px 20px rgba(126, 34, 206, 0.12); display: flex; align-items: center; gap: 8px; white-space: nowrap; z-index: 10; } .hero-floating-badge.badge-top-left { top: -14px; left: -18px; animation: floatSlow 4s ease-in-out infinite alternate; } .hero-floating-badge.badge-bottom-right { bottom: -12px; right: -14px; animation: floatSlow 4s ease-in-out infinite alternate 1.5s; } @keyframes heroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes floatSlow { 0% { transform: translateY(0); } 100% { transform: translateY(-5px); } } / Dark mode overrides for hero product cards / [data-theme="dark"] .hero-product-card { background: rgba(30, 15, 53, 0.85); border-color: rgba(61, 31, 102, 0.8); } [data-theme="dark"] .hero-product-name { color: #e9d5ff; } [data-theme="dark"] .hero-product-price { color: #c084fc; } [data-theme="dark"] .hero-stat-icon { background: rgba(30, 15, 53, 0.7); border-color: #3d1f66; } [data-theme="dark"] .hero-stat-text { color: #c4a8f0; } [data-theme="dark"] .hero-stat-text strong { color: #e9d5ff; } @media (max-width: 768px) { .hero-banner { flex-direction: column; padding: 25px 20px; text-align: center; } .hero-text { max-width: 100%; } .hero-product-grid { width: 100%; max-width: 280px; } .hero-floating-badge.badge-top-left { left: 5px; } .hero-floating-badge.badge-bottom-right { right: 5px; } .hero-stats-bar { justify-content: center; } } / Search Bar Container / .toolbar-container { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; } .search-box { background-color: white; border-radius: 25px; padding: 10px 20px; display: flex; align-items: center; flex: 1; max-width: 500px; border: 1px solid #e9d5ff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03); } .search-box input { border: none; outline: none; width: 100%; margin-left: 10px; font-size: 0.95rem; color: var(--text-color); } / Desktop Product Grid / .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; } .product-card { background-color: var(--card-bg); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04); cursor: pointer; transition: all 0.3s ease; border: 1px solid #f3e8ff; display: flex; flex-direction: column; } .product-card:hover { transform: translateY(-5px); box-shadow: 0 12px 25px rgba(126, 34, 206, 0.12); } .product-img { width: 100%; height: 200px; object-fit: cover; background-color: #e9d5ff; transition: transform 0.3s ease; } .product-card:hover .product-img { transform: scale(1.03); } .product-info { padding: 16px; display: flex; flex-direction: column; flex: 1; } .product-title { font-size: 1rem; font-weight: 500; margin-bottom: 8px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .product-price { color: var(--dark-purple); font-weight: 700; font-size: 1.2rem; margin-top: auto; padding-top: 10px; } .product-sales { font-size: 0.8rem; color: #888; margin-top: 4px; } / Product Detail Page / .back-btn { background: white; border: 1px solid #e9d5ff; padding: 8px 18px; border-radius: 20px; font-size: 0.95rem; font-weight: 500; color: var(--dark-purple); cursor: pointer; margin-bottom: 20px; display: inline-flex; align-items: center; gap: 8px; transition: all 0.2s; } .back-btn:hover { background-color: var(--bg-pastel-purple); } .detail-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; background: white; padding: 30px; border-radius: 20px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03); } .detail-img { width: 100%; height: 380px; object-fit: cover; border-radius: 16px; } .detail-card { display: flex; flex-direction: column; justify-content: center; } .detail-price { font-size: 2rem; color: var(--dark-purple); font-weight: 700; margin-bottom: 15px; } .buy-btn { width: 100%; max-width: 300px; background-color: var(--primary-purple); color: white; border: none; padding: 14px 24px; border-radius: 25px; font-weight: 600; font-size: 1rem; cursor: pointer; margin-top: 20px; box-shadow: 0 4px 15px rgba(168, 85, 247, 0.3); transition: all 0.2s; } .buy-btn:hover { background-color: var(--dark-purple); transform: translateY(-2px); } / Auth Forms (Login / Register) / .auth-container { background-color: white; padding: 40px; border-radius: 20px; max-width: 450px; margin: 30px auto; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05); } .form-group { margin-bottom: 20px; } .form-group label { display: block; font-size: 0.9rem; font-weight: 500; margin-bottom: 8px; color: var(--dark-purple); } .form-group input { width: 100%; padding: 12px 16px; border-radius: 12px; border: 1px solid #e9d5ff; outline: none; background-color: var(--light-purple); font-size: 0.95rem; } .auth-toggle { text-align: center; margin-top: 20px; font-size: 0.9rem; color: var(--primary-purple); cursor: pointer; font-weight: 500; } .auth-toggle:hover { text-decoration: underline; } / Order Tracking & Dashboard Elements / .order-card { background: white; border-radius: 16px; padding: 24px; margin-bottom: 20px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03); border: 1px solid #f3e8ff; } .order-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dashed #e9d5ff; padding-bottom: 15px; margin-bottom: 20px; } .order-id { font-weight: 600; color: var(--dark-purple); } .badge-status { padding: 6px 14px; border-radius: 20px; font-size: 0.85rem; font-weight: 500; } .badge-shipping { background-color: #fef3c7; color: #d97706; } .badge-delivered { background-color: #dcfce7; color: #15803d; } .badge-processing { background-color: #e0e7ff; color: #4338ca; } / Tracking Stepper Timeline / .tracking-timeline { display: flex; justify-content: space-between; position: relative; margin: 30px 0; } .tracking-timeline::before { content: ''; position: absolute; top: 20px; left: 10%; right: 10%; height: 4px; background-color: #e5e7eb; z-index: 1; } .tracking-timeline-progress { position: absolute; top: 20px; left: 10%; height: 4px; background-color: var(--primary-purple); z-index: 1; transition: width 0.3s ease; } .step-item { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; flex: 1; } .step-icon { width: 44px; height: 44px; border-radius: 50%; background-color: white; border: 3px solid #e5e7eb; display: flex; align-items: center; justify-content: center; color: #9ca3af; font-size: 1rem; margin-bottom: 8px; transition: all 0.3s ease; } .step-item.completed .step-icon { background-color: var(--primary-purple); border-color: var(--primary-purple); color: white; } .step-item.active .step-icon { border-color: var(--primary-purple); color: var(--primary-purple); background-color: white; box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.2); } .step-label { font-size: 0.85rem; font-weight: 500; color: #6b7280; text-align: center; } .step-item.completed .step-label, .step-item.active .step-label { color: var(--dark-purple); font-weight: 600; } .eta-banner { background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%); border: 1px solid #e9d5ff; border-radius: 12px; padding: 15px; display: flex; align-items: center; gap: 15px; margin-top: 20px; } .eta-banner i { font-size: 1.8rem; color: var(--primary-purple); } .eta-text strong { color: var(--dark-purple); font-size: 1.1rem; } / Admin Dashboard Styles / .admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; } .admin-card { background: white; border-radius: 20px; padding: 30px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03); margin-bottom: 25px; } .admin-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; } .admin-table { width: 100%; border-collapse: collapse; margin-top: 15px; } .admin-table th, .admin-table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #f3e8ff; } .admin-table th { background-color: var(--light-purple); color: var(--dark-purple); font-weight: 600; } .admin-table tr:hover { background-color: #faf5ff; } .status-select { padding: 6px 12px; border-radius: 8px; border: 1px solid #e9d5ff; background: white; font-size: 0.85rem; color: var(--text-color); outline: none; } / Promotion & Discount Styles / .promo-container { margin-bottom: 30px; } .promo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; margin-top: 15px; } .coupon-card { background: linear-gradient(135deg, #ffffff 0%, #faf5ff 100%); border: 2px dashed var(--primary-purple); border-radius: 16px; padding: 18px 24px 18px 32px; display: flex; align-items: center; justify-content: space-between; gap: 15px; box-shadow: 0 4px 14px rgba(168, 85, 247, 0.08); position: relative; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; } .coupon-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(168, 85, 247, 0.12); } .coupon-card::before { content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; background: var(--light-purple); border-radius: 50%; border-right: 2px dashed var(--primary-purple); z-index: 2; } .coupon-card::after { content: ''; position: absolute; right: -12px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; background: var(--light-purple); border-radius: 50%; border-left: 2px dashed var(--primary-purple); z-index: 2; } .coupon-info { flex: 1; min-width: 0; } .coupon-info h4 { color: var(--dark-purple); font-size: 1.1rem; font-weight: 700; white-space: nowrap; } .coupon-info p { font-size: 0.82rem; color: #6b7280; margin-top: 3px; white-space: nowrap; } .coupon-code-badge { background-color: var(--bg-pastel-purple); color: var(--dark-purple); font-weight: 700; padding: 4px 12px; border-radius: 8px; font-size: 0.85rem; display: inline-block; margin-top: 8px; letter-spacing: 1px; border: 1px solid #e9d5ff; } .copy-coupon-btn { background-color: var(--primary-purple); color: white; border: none; padding: 9px 16px; border-radius: 12px; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.2s; flex-shrink: 0; z-index: 3; } .copy-coupon-btn:hover { background-color: var(--dark-purple); transform: scale(1.04); } / Product Price & Discount Badge / .discount-badge { position: absolute; top: 12px; right: 12px; background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: white; font-weight: 700; font-size: 0.75rem; padding: 4px 10px; border-radius: 12px; box-shadow: 0 4px 10px rgba(239, 68, 68, 0.3); z-index: 2; } .price-container { display: flex; align-items: baseline; gap: 8px; margin-top: auto; padding-top: 8px; } .original-price { text-decoration: line-through; color: #9ca3af; font-size: 0.9rem; font-weight: 400; } .final-price { color: var(--dark-purple); font-weight: 700; font-size: 1.25rem; } / Checkout Discount Input / .discount-input-group { display: flex; gap: 10px; margin-top: 15px; } .discount-input-group input { flex: 1; padding: 10px 15px; border-radius: 12px; border: 1px solid #e9d5ff; outline: none; text-transform: uppercase; font-weight: 600; } .apply-coupon-btn { background-color: var(--dark-purple); color: white; border: none; padding: 10px 18px; border-radius: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s; } .apply-coupon-btn:hover { background-color: var(--primary-purple); } / Payment Methods Selector CSS / .payment-methods-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 10px; } .payment-option-card { background: white; border: 2px solid #e9d5ff; border-radius: 12px; padding: 12px 8px; text-align: center; cursor: pointer; transition: all 0.2s ease; user-select: none; } .payment-option-card:hover { border-color: var(--primary-purple); background-color: var(--light-purple); } .payment-option-card.active { border-color: var(--dark-purple); background-color: #f3e8ff; box-shadow: 0 4px 12px rgba(168, 85, 247, 0.2); } .payment-option-card i { font-size: 1.5rem; color: var(--dark-purple); margin-bottom: 6px; display: block; } .payment-option-card span { font-size: 0.8rem; font-weight: 600; color: var(--text-color); display: block; } / Desktop Footer / .app-footer { background-color: var(--card-bg); border-top: 1px solid #f3e8ff; padding: 25px 40px; text-align: center; font-size: 0.9rem; color: #888; margin-top: auto; } / Category Filter Pills CSS / .category-pills-container { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 5px; margin-top: 15px; } .category-pill { background-color: white; color: var(--text-color); border: 1px solid #e9d5ff; padding: 8px 16px; border-radius: 20px; font-size: 0.9rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all 0.2s ease; display: flex; align-items: center; gap: 6px; } .category-pill:hover { border-color: var(--primary-purple); color: var(--dark-purple); background-color: var(--light-purple); } .category-pill.active { background-color: var(--dark-purple); color: white; border-color: var(--dark-purple); box-shadow: 0 4px 10px rgba(126, 34, 206, 0.25); } / Order Tracking Card & Timeline CSS / .order-card { background-color: white; border-radius: 16px; padding: 20px; margin-bottom: 20px; box-shadow: 0 4px 15px rgba(126, 34, 206, 0.05); border: 1px solid #f3e8ff; } .order-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f3e8ff; padding-bottom: 12px; margin-bottom: 15px; } .order-id { font-weight: 700; color: var(--dark-purple); font-size: 0.95rem; } .badge-status { font-size: 0.8rem; padding: 4px 12px; border-radius: 20px; font-weight: 600; } .badge-processing { background-color: #fef3c7; color: #d97706; } .badge-shipping { background-color: #e0f2fe; color: #0284c7; } .badge-delivered { background-color: #dcfce7; color: #16a34a; } .tracking-timeline { display: flex; justify-content: space-between; position: relative; margin: 25px 0; padding: 0 10px; } .tracking-timeline::before { content: ''; position: absolute; top: 18px; left: 30px; right: 30px; height: 4px; background-color: #e5e7eb; z-index: 1; } .tracking-timeline-progress { position: absolute; top: 18px; left: 30px; height: 4px; background-color: var(--primary-purple); z-index: 2; transition: width 0.4s ease; } .step-item { position: relative; z-index: 3; text-align: center; flex: 1; } .step-icon { width: 36px; height: 36px; border-radius: 50%; background-color: white; border: 3px solid #e5e7eb; display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; font-size: 0.9rem; color: #9ca3af; transition: all 0.3s ease; } .step-item.completed .step-icon { background-color: var(--dark-purple); border-color: var(--dark-purple); color: white; } .step-item.active .step-icon { background-color: var(--primary-purple); border-color: var(--primary-purple); color: white; box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.2); } .step-label { font-size: 0.75rem; color: #6b7280; font-weight: 500; } .step-item.completed .step-label, .step-item.active .step-label { color: var(--dark-purple); font-weight: 600; } .eta-banner { background-color: var(--light-purple); border-radius: 12px; padding: 12px 16px; display: flex; align-items: center; gap: 12px; font-size: 0.85rem; color: var(--text-color); } .eta-banner i { font-size: 1.3rem; color: var(--dark-purple); } .eta-text div:first-child { font-weight: 600; margin-bottom: 2px; } .eta-text div:last-child { color: #555; } </style> </head> <body> <div class="app-container"> <!-- Header Nav Bar --> <header class="app-header"> <div class="header-brand" onclick="showPage('home')"> <i class="fa-solid fa-store"></i> <div class="app-title" id="app-logo">Shop CMTC</div> </div> <nav class="desktop-nav"> <a class="nav-link active" id="nav-home" onclick="showPage('home')"> <i class="fa-solid fa-house"></i> <span data-i18n="nav_home">หน้าแรก</span> </a> <a class="nav-link" id="nav-orders" onclick="showPage('orders')"> <i class="fa-solid fa-truck-fast"></i> <span data-i18n="nav_orders">ติดตามคำสั่งซื้อ</span> </a> <a class="nav-link" id="nav-profile" onclick="showPage('profile')"> <i class="fa-solid fa-user"></i> <span data-i18n="nav_profile">เข้าสู่ระบบ / บัญชี</span> </a> <a class="nav-link" id="nav-admin" onclick="showPage('admin-login')"> <i class="fa-solid fa-user-shield"></i> <span>หลังบ้านแอดมิน</span> </a> </nav> <div class="header-actions"> <!-- Dark/Light Mode Toggle --> <button class="theme-toggle-btn" id="theme-toggle-btn" onclick="toggleTheme()" title="เปลี่ยนโหมดกลางคืน/กลางวัน"> <span class="toggle-thumb" id="toggle-thumb">☀️</span> </button> <button class="cart-btn" onclick="openCart()" title="ตะกร้าสินค้า"> <i class="fa-solid fa-cart-shopping"></i> <span class="cart-badge" id="cart-badge">0</span> </button> <button class="lang-btn" onclick="toggleLanguage()" id="lang-toggle-btn">EN</button> </div> </header> <!-- Cart Overlay & Drawer --> <div class="cart-overlay" id="cart-overlay" onclick="closeCart()"></div> <div class="cart-drawer" id="cart-drawer"> <div class="cart-drawer-header"> <h3><i class="fa-solid fa-cart-shopping"></i> ตะกร้าสินค้า (<span id="cart-count">0</span> รายการ)</h3> <button class="cart-close-btn" onclick="closeCart()"><i class="fa-solid fa-xmark"></i></button> </div> <div class="cart-items-list" id="cart-items-list"></div> <div class="cart-drawer-footer" id="cart-footer" style="display:none;"> <div class="cart-total-row"> <span class="cart-total-label">ยอดรวมทั้งหมด</span> <span class="cart-total-price" id="cart-total-price">฿0</span> </div> <button class="checkout-btn" onclick="checkoutFromCart()"><i class="fa-solid fa-credit-card"></i> ดำเนินการชำระเงิน</button> </div> </div> <!-- Main Content Area --> <main class="content-area"> <!-- PAGE 1: HOME / FEED --> <div id="page-home" class="page active"> <div class="hero-banner"> <div class="hero-text"> <div class="hero-tag-badge"> <i class="fa-solid fa-sparkles"></i> Pastel Lifestyle Collection 2026 </div> <h1>ยินดีต้อนรับสู่ Shop CMTC</h1> <p>ช้อปสินค้าพาสเทลน่ารักๆ โทนสีละมุน ราคาสุดคุ้ม พร้อมโปรโมชั่นส่วนลดพิเศษสูงสุด 30%</p> <button class="hero-cta-btn" onclick="document.getElementById('search-input').focus()"> <i class="fa-solid fa-bag-shopping"></i> ช้อปเลยตอนนี้ </button> <!-- Hero Stats Bar --> <div class="hero-stats-bar"> <div class="hero-stat-item"> <div class="hero-stat-icon"><i class="fa-solid fa-users"></i></div> <div class="hero-stat-text"> <strong>12,400+</strong> ลูกค้าพึงพอใจ </div> </div> <div class="hero-stat-item"> <div class="hero-stat-icon"><i class="fa-solid fa-box-open"></i></div> <div class="hero-stat-text"> <strong>500+ สินค้า</strong> รอคุณเลือกช้อป </div> </div> <div class="hero-stat-item"> <div class="hero-stat-icon"><i class="fa-solid fa-truck-fast"></i></div> <div class="hero-stat-text"> <strong>จัดส่งทั่วไทย</strong> ภายใน 3 วัน </div> </div> </div> </div> <!-- CSS Product Showcase Grid --> <div class="hero-visual-wrapper"> <div class="hero-floating-badge badge-top-left"> <i class="fa-solid fa-fire-flame-curved" style="color: #ef4444;"></i> ฮิตสุดประจำสัปดาห์ </div> <div class="hero-product-grid"> <!-- Card 1: Squishy --> <div class="hero-product-card" onclick="setCategoryFilter('lifestyle', document.querySelector('.category-pill[onclick=lifestyle]'))"> <span class="hero-product-badge">HOT</span> <span class="hero-product-emoji">🧸</span> <span class="hero-product-name">สกุชชี่พาสเทล</span> <span class="hero-product-price">฿149</span> </div> <!-- Card 2: Bag --> <div class="hero-product-card" onclick="setCategoryFilter('fashion', document.querySelector('.category-pill[onclick=fashion]'))"> <span class="hero-product-badge">-30%</span> <span class="hero-product-emoji">👜</span> <span class="hero-product-name">กระเป๋าพาสเทล</span> <span class="hero-product-price">฿399</span> </div> <!-- Card 3: Earbuds --> <div class="hero-product-card" onclick="setCategoryFilter('gadgets', document.querySelector('.category-pill[onclick=gadgets]'))"> <span class="hero-product-emoji">🎧</span> <span class="hero-product-name">หูฟัง Wireless</span> <span class="hero-product-price">฿890</span> </div> <!-- Card 4: Mug --> <div class="hero-product-card" onclick="setCategoryFilter('lifestyle', document.querySelector('.category-pill[onclick=lifestyle]'))"> <span class="hero-product-badge">NEW</span> <span class="hero-product-emoji">☕</span> <span class="hero-product-name">แก้วเก็บอุณหภูมิ</span> <span class="hero-product-price">฿320</span> </div> </div> <div class="hero-floating-badge badge-bottom-right"> <i class="fa-solid fa-tags" style="color: #a855f7;"></i> ลดสูงสุด 30% </div> </div> </div> <!-- PROMOTION COUPONS SECTION --> <div class="promo-container"> <h3 style="color: var(--dark-purple);"><i class="fa-solid fa-ticket"></i> คูปองส่วนลดพิเศษประจำเดือน </h3> <div class="promo-grid"> <div class="coupon-card"> <div class="coupon-info"> <h4>ลดทันที 50 บาท</h4> <p>เมื่อช้อปครบ 200 บาทขึ้นไป</p> <span class="coupon-code-badge">PASTEL50</span> </div> <button class="copy-coupon-btn" onclick="copyCouponCode('PASTEL50')"><i class="fa-solid fa-copy"></i> คัดลอก</button> </div> <div class="coupon-card"> <div class="coupon-info"> <h4>ลดพิเศษ 15%</h4> <p>ไม่มีขั้นต่ำ ลดสูงสุด 100 บาท</p> <span class="coupon-code-badge">SUPER15</span> </div> <button class="copy-coupon-btn" onclick="copyCouponCode('SUPER15')"><i class="fa-solid fa-copy"></i> คัดลอก</button> </div> </div> </div> <div class="toolbar-container" style="flex-direction: column; align-items: stretch; gap: 10px;"> <div class="search-box"> <i class="fa-solid fa-magnifying-glass" style="color: var(--primary-purple);"></i> <input type="text" id="search-input" placeholder="ค้นหาสินค้าที่คุณต้องการ..." onkeyup="filterProducts()"> </div> <!-- Category Pills Filter --> <div class="category-pills-container"> <div class="category-pill active" onclick="setCategoryFilter('all', this)"> <i class="fa-solid fa-border-all"></i> ทั้งหมด </div> <div class="category-pill" onclick="setCategoryFilter('sports', this)"> <i class="fa-solid fa-shirt"></i> เสื้อกีฬา </div> <div class="category-pill" onclick="setCategoryFilter('fashion', this)"> <i class="fa-solid fa-bag-shopping"></i> แฟชั่น & กระเป๋า </div> <div class="category-pill" onclick="setCategoryFilter('gadgets', this)"> <i class="fa-solid fa-headphones"></i> ไอที & แก็ดเจ็ต </div> <div class="category-pill" onclick="setCategoryFilter('lifestyle', this)"> <i class="fa-solid fa-mug-hot"></i> ไลฟ์สไตล์ </div> </div> </div> <div class="product-grid" id="product-list"> <!-- สินค้าจะถูก Render ด้วย JavaScript --> </div> </div> <!-- PAGE 2: PRODUCT DETAIL --> <div id="page-detail" class="page"> <button class="back-btn" onclick="showPage('home')"> <i class="fa-solid fa-arrow-left"></i> <span data-i18n="back">ย้อนกลับ</span> </button> <div class="detail-wrapper"> <div style="position: relative;"> <img id="detail-img" src="" class="detail-img" alt="Product Image"> <div id="detail-discount-badge" class="discount-badge" style="display: none;"></div> </div> <div class="detail-card"> <h1 id="detail-title" style="margin-bottom: 10px; font-size: 1.5rem; color: var(--text-color);"> </h1> <div class="price-container"> <div id="detail-original-price" class="original-price"></div> <div id="detail-price" class="final-price">฿0</div> </div> <p id="detail-desc" style="font-size: 1rem; color: #666; line-height: 1.6; margin: 15px 0;"></p> <!-- Size Picker (shown only for clothing) --> <div id="size-picker-section" class="size-picker-container" style="display:none;"> <div class="size-picker-label"><i class="fa-solid fa-ruler-combined"></i> เลือกไซส์</div> <div class="size-options"> <button class="size-opt" onclick="selectSize('XS', this)">XS</button> <button class="size-opt" onclick="selectSize('S', this)">S</button> <button class="size-opt selected" onclick="selectSize('M', this)">M</button> <button class="size-opt" onclick="selectSize('L', this)">L</button> <button class="size-opt" onclick="selectSize('XL', this)">XL</button> </div> </div> <!-- Apply Coupon Section --> <div style="background-color: var(--light-purple); padding: 15px; border-radius: 12px; border: 1px solid #e9d5ff; margin-bottom: 15px;"> <label style="font-weight: 600; font-size: 0.9rem; color: var(--dark-purple);"><i class="fa-solid fa-ticket"></i> ใส่โค้ดส่วนลดโปรโมชั่น</label> <div class="discount-input-group"> <input type="text" id="coupon-input" placeholder="เช่น PASTEL50"> <button class="apply-coupon-btn" onclick="applyCoupon()">ใช้โค้ด</button> </div> <div id="coupon-message" style="font-size: 0.85rem; margin-top: 8px; font-weight: 500;"> </div> </div> <!-- Select Payment Method Section --> <div style="background-color: white; padding: 15px; border-radius: 12px; border: 1px solid #e9d5ff; margin-bottom: 20px;"> <label style="font-weight: 600; font-size: 0.9rem; color: var(--dark-purple);"><i class="fa-solid fa-credit-card"></i> เลือกช่องทางการชำระเงิน</label> <div class="payment-methods-grid"> <div class="payment-option-card active" id="pay-opt-qr" onclick="selectPaymentMethod('qr')"> <i class="fa-solid fa-qrcode"></i> <span>พร้อมเพย์ QR</span> </div> <div class="payment-option-card" id="pay-opt-cod" onclick="selectPaymentMethod('cod')"> <i class="fa-solid fa-truck-ramp-box"></i> <span>เก็บเงินปลายทาง</span> </div> </div> <!-- Payment Details Box --> <div id="payment-details-box" style="margin-top: 15px; font-size: 0.85rem; color: #555; background-color: var(--light-purple); padding: 12px; border-radius: 10px;"> <div id="pay-info-qr" style="display: block;"> <i class="fa-solid fa-info-circle"></i> สแกนชำระผ่าน PromptPay QR Code ฟรีค่าธรรมเนียม อัปโหลดสลิปยืนยันอัตโนมัติ </div> <div id="pay-info-cod" style="display: none;"> <i class="fa-solid fa-info-circle"></i> ชำระเงินสดกับเจ้าหน้าที่ขนส่งเมื่อได้รับพัสดุเรียบร้อยแล้ว (+ค่าบริการ 15 บาท) </div> </div> </div> <div style="display:flex; gap:12px; flex-wrap: wrap; margin-top: 20px;"> <button class="add-to-cart-btn" style="flex:1; border-radius:14px; padding:13px;" onclick="addToCartFromDetail()"> <i class="fa-solid fa-cart-plus"></i> เพิ่มลงตะกร้า </button> <button class="buy-btn" style="flex:1; margin-top:0;" onclick="processOrderCheckout()" data-i18n="buy_now">สั่งซื้อเลย</button> </div> </div> </div> </div> <!-- PAGE: ORDER TRACKING --> <div id="page-orders" class="page"> <button class="back-btn" onclick="showPage('home')"> <i class="fa-solid fa-arrow-left"></i> <span data-i18n="back">ย้อนกลับ</span> </button> <h2 style="margin-bottom: 20px; color: var(--dark-purple);" data-i18n="track_title"><i class="fa-solid fa-truck-fast"></i> ติดตามสถานะคำสั่งซื้อ & พัสดุ</h2> <div id="orders-container"> <!-- รายการคำสั่งซื้อจะถูก Render ด้วย JavaScript --> </div> </div> <!-- PAGE 3: LOGIN / REGISTER / USER PROFILE --> <div id="page-profile" class="page"> <!-- User Logged-in View --> <div id="user-logged-in-box" class="auth-container" style="display: none; text-align: center;"> <i class="fa-solid fa-circle-user" style="font-size: 4rem; color: var(--primary-purple); margin-bottom: 15px;"></i> <h2 id="logged-user-name" style="color: var(--dark-purple); margin-bottom: 5px;">ผู้ใช้งาน</h2> <p id="logged-user-email" style="color: #666; font-size: 0.9rem; margin-bottom: 20px;"> user@example.com</p> <div style="background-color: var(--light-purple); padding: 15px; border-radius: 12px; margin-bottom: 20px; text-align: left;"> <div style="font-weight: 600; color: var(--dark-purple); margin-bottom: 8px;"><i class="fa-solid fa-shield-halved"></i> ข้อมูลบัญชีสมาชิก</div> <div style="font-size: 0.85rem; color: #555; line-height: 1.6;"> • สถานะบัญชี: <span style="color: #16a34a; font-weight: 600;">ปกติ (ยืนยันตัวตนแล้ว)</span><br> • ประเภทสมาชิก: สมาชิกระดับ พาสเทล VIP<br> • คูปองส่วนลดสะสม: 2 ใบ </div> </div> <button class="buy-btn" style="width: 100%; max-width: 100%; margin-bottom: 12px;" onclick="showPage('home')"><i class="fa-solid fa-bag-shopping"></i> ไปเลือกซื้อสินค้า</button> <button class="buy-btn" style="width: 100%; max-width: 100%; background-color: #ef4444;" onclick="handleUserLogout()"><i class="fa-solid fa-right-from-bracket"></i> ออกจากระบบ</button> </div> <!-- Login Box --> <div id="login-box" class="auth-container"> <h2 style="margin-bottom: 20px; color: var(--dark-purple); text-align: center;" data-i18n="login_title">เข้าสู่ระบบผู้ใช้งาน</h2> <form onsubmit="handleUserLogin(event)"> <div class="form-group"> <label data-i18n="username">ชื่อผู้ใช้งาน / อีเมล</label> <input type="text" id="login-username" placeholder="กรอกชื่อผู้ใช้หรืออีเมล" required> </div> <div class="form-group"> <label data-i18n="password">รหัสผ่าน</label> <input type="password" id="login-password" placeholder="กรอกรหัสผ่าน" required> </div> <button type="submit" class="buy-btn" style="width: 100%; max-width: 100%;" data-i18n="login_btn">เข้าสู่ระบบ</button> </form> <div class="auth-toggle" onclick="toggleAuth('register')" data-i18n="go_register">ยังไม่มีบัญชี? สมัครสมาชิกใหม่</div> </div> <!-- Register Box --> <div id="register-box" class="auth-container" style="display: none;"> <h2 style="margin-bottom: 20px; color: var(--dark-purple); text-align: center;" data-i18n="reg_title">สมัครสมาชิกใหม่</h2> <form onsubmit="handleUserRegister(event)"> <div class="form-group"> <label data-i18n="username">ชื่อผู้ใช้งาน</label> <input type="text" id="reg-username" placeholder="ตั้งชื่อผู้ใช้งาน" required> </div> <div class="form-group"> <label data-i18n="email">อีเมล</label> <input type="email" id="reg-email" placeholder="example@mail.com" required> </div> <div class="form-group"> <label data-i18n="password">รหัสผ่าน</label> <input type="password" id="reg-password" placeholder="ตั้งรหัสผ่าน" required> </div> <button type="submit" class="buy-btn" style="width: 100%; max-width: 100%;" data-i18n="reg_btn">สมัครสมาชิก</button> </form> <div class="auth-toggle" onclick="toggleAuth('login')" data-i18n="go_login">มีบัญชีอยู่แล้ว? เข้าสู่ระบบ</div> </div> </div> <!-- PAGE 5: ADMIN LOGIN PAGE --> <div id="page-admin-login" class="page"> <div class="auth-container"> <div style="text-align: center; margin-bottom: 20px;"> <i class="fa-solid fa-user-shield" style="font-size: 3rem; color: var(--primary-purple);"></i> <h2 style="color: var(--dark-purple); margin-top: 10px;">เข้าสู่ระบบผู้ดูแลระบบ (Admin)</h2> <p style="font-size: 0.85rem; color: #666;">สำหรับเจ้าหน้าที่จัดการสินค้าและสถานะคำสั่งซื้อ</p> </div> <form onsubmit="handleAdminLogin(event)"> <div class="form-group"> <label>ชื่อผู้ใช้แอดมิน</label> <input type="text" id="admin-user" placeholder="admin" required> </div> <div class="form-group"> <label>รหัสผ่าน</label> <input type="password" id="admin-pass" placeholder="1234" required> </div> <button type="submit" class="buy-btn" style="width: 100%; max-width: 100%;">เข้าสู่ระบบหลังบ้าน</button> </form> </div> </div> <!-- PAGE 6: ADMIN DASHBOARD (หลังบ้าน) --> <div id="page-admin-dashboard" class="page"> <div class="admin-header"> <div> <h2 style="color: var(--dark-purple);"><i class="fa-solid fa-gauge-high"></i> ระบบหลังบ้านผู้ดูแลระบบ (Admin Panel)</h2> <p style="color: #666; font-size: 0.9rem;">จัดการเพิ่มสินค้าใหม่ และอัปเดตสถานะการจัดส่งพัสดุ </p> </div> <button class="back-btn" onclick="logoutAdmin()"><i class="fa-solid fa-right-from-bracket"></i> ออกจากระบบแอดมิน</button> </div> <!-- Section A: เพิ่มสินค้าใหม่ --> <div class="admin-card"> <h3 style="color: var(--dark-purple); margin-bottom: 15px;"><i class="fa-solid fa-plus-circle"></i> เพิ่มสินค้าใหม่เข้าร้านค้า</h3> <form onsubmit="addNewProduct(event)"> <div class="admin-form-grid"> <div class="form-group"> <label>ชื่อสินค้า (ภาษาไทย)</label> <input type="text" id="new-title-th" placeholder="เช่น เสื้อฟุตบอลพาสเทล ลายทาง" required> </div> <div class="form-group"> <label>ชื่อสินค้า (English)</label> <input type="text" id="new-title-en" placeholder="e.g. Pastel Sports Jersey" required> </div> <div class="form-group"> <label>ราคาสินค้า (บาท)</label> <input type="number" id="new-price" placeholder="390" required> </div> <div class="form-group"> <label>หมวดหมู่สินค้า</label> <select id="new-category" style="width: 100%; padding: 10px; border-radius: 12px; border: 1px solid #e9d5ff;"> <option value="sports">เสื้อกีฬา (Sports Jersey)</option> <option value="fashion">แฟชั่น & กระเป๋า (Fashion)</option> <option value="gadgets">ไอที & แก็ดเจ็ต (Gadgets)</option> <option value="lifestyle">ไลฟ์สไตล์ (Lifestyle)</option> </select> </div> <div class="form-group" style="grid-column: span 2;"> <label>URL รูปภาพสินค้า</label> <input type="url" id="new-img" placeholder="https://..." required> </div> </div> <div class="form-group"> <label>รายละเอียดสินค้า</label> <input type="text" id="new-desc-th" placeholder="เช่น เสื้อกีฬาพาสเทล ผ้าแห้งไว..." required> </div> <button type="submit" class="buy-btn" style="max-width: 250px;"><i class="fa-solid fa-check"></i> บันทึกเพิ่มสินค้าใหม่</button> </form> </div> <!-- Section B: จัดการคำสั่งซื้อและอัปเดตสถานะขนส่ง --> <div class="admin-card"> <h3 style="color: var(--dark-purple); margin-bottom: 15px;"><i class="fa-solid fa-boxes-packing"></i> จัดการสถานะคำสั่งซื้อ & การจัดส่ง</h3> <div style="overflow-x: auto;"> <table class="admin-table"> <thead> <tr> <th>รหัสคำสั่งซื้อ</th> <th>รายการสินค้า</th> <th>ผู้สั่งซื้อ</th> <th>วันที่จัดส่ง</th> <th>ระยะเวลา (วัน)</th> <th>สถานะการจัดส่ง</th> </tr> </thead> <tbody id="admin-orders-table"> <!-- คำสั่งซื้อจะถูก Render ด้วย JavaScript --> </tbody> </table> </div> </div> </div> </main> <!-- Footer --> <footer class="app-footer"> <p>© 2026 Shop CMTC - E-Commerce Website. All rights reserved.</p> </footer> </div> <script> // Data Store (ข้อมูลสินค้า) const products = [ { id: 1, category: 'sports', title: { th: 'เสื้อฟุตบอลพาสเทล รุ่น Pastel Jersey 2026', en: 'Pastel Football Jersey 2026' }, price: 390, originalPrice: 490, discountBadge: 'ขายดี🔥', sales: { th: 'ขายแล้ว 2.1พัน ชิ้น', en: '2.1k sold' }, img: 'https://images.unsplash.com/photo-1511746315387-c4a76990fdce?w=500&q=80', desc: { th: 'เสื้อกีฬาพาสเทล เนื้อผ้าไดรฟิต (Dry-Fit) ระบายอากาศได้ดีเยี่ยม ใส่ออกกำลังกายหรือใส่เที่ยวสไตล์สปอร์ต', en: 'Pastel sports jersey made with breathable Dry-Fit fabric. Perfect for sports or casual streetwear.' } }, { id: 2, category: 'sports', title: { th: 'เสื้อบาสเกตบอลสปอร์ต สีม่วง-ชมพูพาสเทล', en: 'Pastel Purple Basketball Jersey' }, price: 350, originalPrice: 450, discountBadge: 'ลด 22%', sales: { th: 'ขายแล้ว 1.5พัน ชิ้น', en: '1.5k sold' }, img: 'https://images.unsplash.com/photo-1574629810360-7efbbe195018?w=500&q=80', desc: { th: 'เสื้อบาสเกตบอลดีไซน์โอเวอร์ไซส์ นุ่มสบาย น้ำหนักเบา ซับเหงื่อได้ดี ไม่ร้อน', en: 'Oversized basketball jersey design. Soft, lightweight, quick-dry fabric.' } }, { id: 3, category: 'sports', title: { th: 'เสื้อวิ่งออกกำลังกายระบายอากาศ AeroRun', en: 'AeroRun Breathable Running Shirt' }, price: 290, originalPrice: 380, discountBadge: 'ลด 23%', sales: { th: 'ขายแล้ว 980 ชิ้น', en: '980 sold' }, img: 'https://images.unsplash.com/photo-1503342217505-b0a15ec3261c?w=500&q=80', desc: { th: 'เสื้อวิ่งน้ำหนักเบาพิเศษ มีแถบสะท้อนแสงเพื่อความปลอดภัยยามค่ำคืน ผ้าแห้งไว ไม่เหนียวติดตัว', en: 'Ultra-lightweight running tee with reflective details for night visibility. Fast-drying material.' } }, { id: 4, category: 'sports', title: { th: 'เสื้อแบดมินตัน/เทนนิส สตรีทสปอร์ต', en: 'Street Sport Badminton & Tennis Polo' }, price: 420, originalPrice: 520, discountBadge: 'ลด 100฿', sales: { th: 'ขายแล้ว 1.1พัน ชิ้น', en: '1.1k sold' }, img: 'https://images.unsplash.com/photo-1618354691373-d851c5c3a990?w=500&q=80', desc: { th: 'เสื้อโปโลสปอร์ต คอปกกระดุม ผ้ายืดหยุ่น 4 ทิศทาง เคลื่อนไหวได้คล่องตัวทุกการหวดลูก', en: 'Sport polo shirt with 4-way stretch fabric for maximum agility during games.' } }, { id: 5, category: 'sports', title: { th: 'เสื้อฮู้ดสปอร์ตกันลม สไตล์ฟิตเนส', en: 'Fitness Windproof Sport Hoodie' }, price: 590, originalPrice: 750, discountBadge: 'ลด 21%', sales: { th: 'ขายแล้ว 720 ชิ้น', en: '720 sold' }, img: 'https://images.unsplash.com/photo-1556905055-8f358a7a47b2?w=500&q=80', desc: { th: 'เสื้อแจ็คเก็ตฮู้ดใส่ออกกำลังกาย กันลม กันรังสี UV ผ้าบางเบาแต่เก็บความอบอุ่นได้ดี', en: 'Windproof and UV-resistant hoodie jacket for outdoor workout and gym training.' } }, { id: 6, category: 'sports', title: { th: 'เสื้อกล้ามโยคะ/ฟิตเนส ซัพพอร์ตทรงสวย', en: 'Active Yoga & Fitness Workout Tank' }, price: 250, originalPrice: 320, discountBadge: 'ลด 21%', sales: { th: 'ขายแล้ว 3.2พัน ชิ้น', en: '3.2k sold' }, img: 'https://images.unsplash.com/photo-1518310383802-640c2de311b2?w=500&q=80', desc: { th: 'เสื้อกล้ามทรงสปอร์ต ผ้านุ่มกระชับ ไม่ย้วยง่าย เหมาะกับคลาสโยคะ พิลาทิส และเวทเทรนนิ่ง', en: 'Supportive and comfortable workout tank top, ideal for Yoga, Pilates, and gym classes.' } }, { id: 7, category: 'sports', title: { th: 'เสื้อวอร์มสปอร์ตวินเทจ Retro Track Jacket', en: 'Retro Track Jacket Sportswear' }, price: 650, originalPrice: 850, discountBadge: 'ฮิต🔥', sales: { th: 'ขายแล้ว 1.8พัน ชิ้น', en: '1.8k sold' }, img: 'https://images.unsplash.com/photo-1578632767115-351597cf2477?w=500&q=80', desc: { th: 'เสื้อวอร์มซิปหน้า ดีไซน์วินเทจย้อนยุค ใส่ออกกำลังกายหรือแมตช์ชุดสตรีทแฟชั่นก็เท่สุดๆ', en: 'Classic vintage zip track jacket. Great for both athletic training and street fashion.' } }, { id: 8, category: 'sports', title: { th: 'เสื้อแขนยาวกันรังสี UV สำหรับขี่จักรยาน/เดินป่า', en: 'Long Sleeve UV Protection Outdoor Shirt' }, price: 450, originalPrice: 580, discountBadge: 'ลด 130฿', sales: { th: 'ขายแล้ว 640 ชิ้น', en: '640 sold' }, img: 'https://images.unsplash.com/photo-1517838277536-f5f99be501cd?w=500&q=80', desc: { th: 'เสื้อกีฬาแขนยาว ป้องกันแสงแดด UPF 50+ เหมาะสำหรับกิจกรรมกลางแจ้ง ขี่จักรยาน วิ่ง เทรล', en: 'UPF 50+ long sleeve performance shirt for outdoor cycling, hiking, and trail running.' } }, { id: 9, category: 'fashion', title: { th: 'กระเป๋าพาสเทลน่ารัก สไตล์เกาหลี', en: 'Cute Pastel Korean Bag' }, price: 240, originalPrice: 290, discountBadge: 'ลด 17%', sales: { th: 'ขายแล้ว 1.2พัน ชิ้น', en: '1.2k sold' }, img: 'https://images.unsplash.com/photo-1584917865442-de89df76afd3?w=500&q=80', desc: { th: 'กระเป๋าสีพาสเทล สัมผัสนุ่ม มีช่องเก็บของเยอะ จุของได้เยอะ เหมาะสำหรับใชวันสบายๆ', en: 'Pastel bag with soft touch, multiple compartments, spacious and perfect for daily use.' } }, { id: 10, category: 'gadgets', title: { th: 'หูฟังบลูทูธไร้สาย พาสเทลมินิมอล', en: 'Minimalist Wireless Bluetooth Headphones' }, price: 490, originalPrice: 590, discountBadge: 'ลด 100฿', sales: { th: 'ขายแล้ว 850 ชิ้น', en: '850 sold' }, img: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=500&q=80', desc: { th: 'เสียงดี เบสแน่น ตัดเสียงรบกวน แบตเตอรี่อึดใช้งานได้นานต่อเนื่อง 20 ชั่วโมง', en: 'Great sound, deep bass, noise cancellation, and up to 20 hours battery life.' } }, { id: 11, category: 'lifestyle', title: { th: 'แก้วน้ำเก็บอุณหภูมิ สีม่วงพาสเทล', en: 'Pastel Purple Vacuum Tumbler' }, price: 159, originalPrice: 199, discountBadge: 'ลด 20%', sales: { th: 'ขายแล้ว 3.4พัน ชิ้น', en: '3.4k sold' }, img: 'https://images.unsplash.com/photo-1602143407151-7111542de6e8?w=500&q=80', desc: { th: 'เก็บความเย็น-ความร้อนได้นาน 12 ชั่วโมง วัสดุ Stainless Steel 304 อย่างดี', en: 'Keeps drinks cold or hot for up to 12 hours. Premium 304 stainless steel material.' } }, { id: 12, category: 'fashion', title: { th: 'เคสมือถือนุ่มนิ่ม ลายการ์ตูน', en: 'Soft Cute Cartoon Phone Case' }, price: 69, originalPrice: 89, discountBadge: 'ลด 22%', sales: { th: 'ขายแล้ว 5พัน+ ชิ้น', en: '5k+ sold' }, img: 'https://images.unsplash.com/photo-1601784551446-20c9e07cdbdb?w=500&q=80', desc: { th: 'กันกระแทกอย่างดี ปกป้องกล้องถ่ายรูป สัมผัสนุ่มมือ ไม่เกาะฝุ่น', en: 'Great shockproof protection, protects camera lens, soft touch, dust resistant.' } } ]; // Initial Mock Orders Data let orders = [ { id: 'ORD-88230', productTitle: 'เสื้อบาสเกตบอลสปอร์ต สีม่วง-ชมพูพาสเทล [ชำระผ่าน: พร้อมเพย์ QR]', customerName: 'คุณธนกฤต อัครเดช', shippingDate: '2026-07-27', daysLeft: 3, status: 'processing', statusText: { th: 'กำลังเตรียมจัดส่ง (ผู้ขายกำลังแพ็คของ)', en: 'Preparing Order' }, step: 1 }, { id: 'ORD-88229', productTitle: 'เสื้อแบดมินตัน/เทนนิส สตรีทสปอร์ต [ชำระผ่าน: พร้อมเพย์ QR]', customerName: 'คุณพิชญา สุวรรณ', shippingDate: '2026-07-26', daysLeft: 2, status: 'shipping', statusText: { th: 'อยู่ระหว่างขนส่งไปศูนย์กระจายสินค้า', en: 'In Transit to Sorting Hub' }, step: 2 }, { id: 'ORD-88228', productTitle: 'เสื้อฮู้ดสปอร์ตกันลม สไตล์ฟิตเนส [ชำระผ่าน: เก็บเงินปลายทาง]', customerName: 'คุณชลธิชา เจริญสุข', shippingDate: '2026-07-29', daysLeft: 5, status: 'processing', statusText: { th: 'ชำระเงินสำเร็จ (รอรับสินค้าจากผู้ผลิต)', en: 'Payment Confirmed' }, step: 0 }, { id: 'ORD-88227', productTitle: 'เสื้อแขนยาวกันรังสี UV สำหรับขี่จักรยาน [ชำระผ่าน: พร้อมเพย์ QR]', customerName: 'คุณภาคิน เลิศอนันต์', shippingDate: '2026-07-25', daysLeft: 1, status: 'shipping', statusText: { th: 'กำลังจัดส่งสินค้า (ขนส่ง Kerry Express)', en: 'In Transit via Kerry Express' }, step: 2 }, { id: 'ORD-88225', productTitle: 'เสื้อฟุตบอลพาสเทล รุ่น Pastel Jersey 2026 [ชำระผ่าน: พร้อมเพย์ QR]', customerName: 'คุณอนันต์ สุขสวัสดิ์', shippingDate: '2026-07-27', daysLeft: 3, status: 'processing', statusText: { th: 'กำลังเตรียมจัดส่ง (ผู้ขายกำลังแพ็คของ)', en: 'Preparing Order' }, step: 1 }, { id: 'ORD-88224', productTitle: 'เสื้อวอร์มสปอร์ตวินเทจ Retro Track Jacket [ชำระผ่าน: เก็บเงินปลายทาง]', customerName: 'คุณณัฐพงษ์ วงศ์สว่าง', shippingDate: '2026-07-25', daysLeft: 1, status: 'shipping', statusText: { th: 'กำลังจัดส่งสินค้า (ขนส่งอยู่ระหว่างเดินทาง)', en: 'In Transit' }, step: 2 }, { id: 'ORD-88223', productTitle: 'เสื้อกล้ามโยคะ/ฟิตเนส ซัพพอร์ตทรงสวย [ชำระผ่าน: เก็บเงินปลายทาง]', customerName: 'คุณกัญญารัตน์ ชัยพร', shippingDate: '2026-07-24', daysLeft: 0, status: 'shipping', statusText: { th: 'พัสดุถึงสาขาปลายทาง (กำลังนำจ่ายวันนี้)', en: 'Out for Delivery Today' }, step: 2 }, { id: 'ORD-88219', productTitle: 'กระเป๋าพาสเทลน่ารัก สไตล์เกาหลี [ชำระผ่าน: พร้อมเพย์ QR]', customerName: 'คุณสมชาย ใจดี', shippingDate: '2026-07-26', daysLeft: 2, status: 'shipping', statusText: { th: 'กำลังจัดส่งสินค้า (ขนส่ง)', en: 'In Transit' }, step: 2 }, { id: 'ORD-88220', productTitle: 'หูฟังบลูทูธไร้สาย พาสเทลมินิมอล [ชำระผ่าน: พร้อมเพย์ QR]', customerName: 'คุณสมหญิง สุขใจ', shippingDate: '2026-07-28', daysLeft: 4, status: 'processing', statusText: { th: 'ชำระเงินสำเร็จ (รอผู้ขายจัดเตรียมสินค้า)', en: 'Payment Confirmed' }, step: 0 }, { id: 'ORD-88180', productTitle: 'เสื้อวิ่งออกกำลังกายระบายอากาศ AeroRun [ชำระผ่าน: พร้อมเพย์ QR]', customerName: 'คุณวิศรุต รัตนากุล', shippingDate: '2026-07-22', daysLeft: 0, status: 'delivered', statusText: { th: 'จัดส่งสำเร็จแล้ว (ผู้รับเซ็นรับพัสดุ)', en: 'Delivered' }, step: 3 }, { id: 'ORD-88150', productTitle: 'เคสมือถือนุ่มนิ่ม ลายการ์ตูน [ชำระผ่าน: พร้อมเพย์ QR]', customerName: 'คุณนภา วัฒนากุล', shippingDate: '2026-07-20', daysLeft: 0, status: 'delivered', statusText: { th: 'จัดส่งสำเร็จแล้ว (วางพัสดุไว้ในกล่องรับพัสดุ)', en: 'Delivered to Parcel Drop' }, step: 3 }, { id: 'ORD-88105', productTitle: 'แก้วน้ำเก็บอุณหภูมิ สีม่วงพาสเทล [ชำระผ่าน: พร้อมเพย์ QR]', customerName: 'คุณประเสริฐ ดีเยี่ยม', shippingDate: '2026-07-21', daysLeft: 0, status: 'delivered', statusText: { th: 'จัดส่งสำเร็จแล้ว', en: 'Delivered' }, step: 3 } ]; let isAdminLoggedIn = false; let currentLang = 'th'; // i18n Translations Dictionary const translations = { th: { search_ph: "ค้นหาสินค้าที่คุณต้องการ...", back: "ย้อนกลับ", buy_now: "สั่งซื้อสินค้า", login_title: "เข้าสู่ระบบ", username: "ชื่อผู้ใช้งาน", password: "รหัสผ่าน", email: "อีเมล", login_btn: "เข้าสู่ระบบ", go_register: "ยังไม่มีบัญชี? สมัครสมาชิกใหม่", reg_title: "สมัครสมาชิกใหม่", reg_btn: "สมัครสมาชิก", go_login: "มีบัญชีอยู่แล้ว? เข้าสู่ระบบ", nav_home: "หน้าแรก", nav_profile: "เข้าสู่ระบบ / บัญชี", nav_orders: "ติดตามคำสั่งซื้อ", track_title: "ติดตามสถานะคำสั่งซื้อ & พัสดุ" }, en: { search_ph: "Search products...", back: "Back", buy_now: "Buy Now", login_title: "Login", username: "Username", password: "Password", email: "Email", login_btn: "Log In", go_register: "No account? Register here", reg_title: "Create Account", reg_btn: "Register", go_login: "Already have an account? Login", nav_home: "Home", nav_profile: "Login / Account", nav_orders: "Track Orders", track_title: "Track Orders & Shipping Status" } }; let currentCategoryFilter = 'all'; // Set Category Filter Function function setCategoryFilter(category, element) { currentCategoryFilter = category; document.querySelectorAll('.category-pill').forEach(pill => pill.classList.remove('active')); if (element) { element.classList.add('active'); } renderProducts(); } // Search & Category Combined Filter Function function filterProducts() { renderProducts(); } // Render Product List with Category Filter & Search function renderProducts() { const listContainer = document.getElementById('product-list'); if (!listContainer) return; const searchKeyword = document.getElementById('search-input')?.value.toLowerCase().trim() \|\| ''; listContainer.innerHTML = ''; const filteredProducts = products.filter(p => { const matchesCategory = (currentCategoryFilter === 'all') \|\| (p.category === currentCategoryFilter); const matchesSearch = p.title[currentLang].toLowerCase().includes(searchKeyword); return matchesCategory && matchesSearch; }); if (filteredProducts.length === 0) { listContainer.innerHTML = ` <div style="grid-column: 1 / -1; text-align: center; padding: 40px; color: #888;"> <i class="fa-solid fa-box-open" style="font-size: 3rem; margin-bottom: 10px; color: #ccc;"></i> <p>ไม่พบสินค้าในหมวดหมู่นี้</p> </div> `; return; } filteredProducts.forEach(p => { const card = document.createElement('div'); card.className = 'product-card'; card.style.position = 'relative'; const discountBadgeHtml = p.discountBadge ? `<div class="discount-badge">${p.discountBadge}</div>` : ''; const originalPriceHtml = p.originalPrice ? `<span class="original-price">฿${p.originalPrice}</span>` : ''; card.innerHTML = ` ${discountBadgeHtml} <img src="${p.img}" class="product-img" alt="${p.title[currentLang]}" onclick="openProductDetail(${p.id})"> <div class="product-info"> <div class="product-title" onclick="openProductDetail(${p.id})" style="cursor:pointer;">${p.title[currentLang]}</div> <div class="price-container"> ${originalPriceHtml} <span class="final-price">฿${p.price}</span> </div> <div class="product-sales">${p.sales[currentLang]}</div> <button class="add-to-cart-btn" onclick="addToCart(${p.id})"> <i class="fa-solid fa-cart-plus"></i> เพิ่มลงตะกร้า </button> </div> `; listContainer.appendChild(card); }); } // Initialize App function initApp() { renderProducts(); renderOrders(); renderAdminOrders(); updateLanguageUI(); } // ===== CART SYSTEM ===== let cart = []; // { id, title, img, price, qty, size } let selectedSize = 'M'; function isClothing(product) { return product.title.th.includes('เสื้อ'); } function addToCart(productId, size) { const p = products.find(x => x.id === productId); if (!p) return; const cartSize = size \|\| (isClothing(p) ? selectedSize : null); const key = cartSize ? `${productId}-${cartSize}` : `${productId}`; const existing = cart.find(c => c.key === key); if (existing) { existing.qty++; } else { cart.push({ key, id: productId, title: p.title[currentLang], img: p.img, price: p.price, qty: 1, size: cartSize }); } updateCartBadge(); showCartToast(p.title[currentLang], cartSize); } function showCartToast(title, size) { const existing = document.getElementById('cart-toast'); if (existing) existing.remove(); const toast = document.createElement('div'); toast.id = 'cart-toast'; toast.style.cssText = `position:fixed;bottom:30px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#a855f7,#7e22ce);color:white;padding:12px 24px;border-radius:20px;font-size:0.9rem;font-weight:600;z-index:9999;box-shadow:0 8px 20px rgba(168,85,247,0.4);display:flex;align-items:center;gap:10px;animation:fadeIn 0.3s ease;`; toast.innerHTML = `<i class="fa-solid fa-circle-check"></i> เพิ่ม "${title.length > 20 ? title.slice(0, 20) + '...' : title}"${size ? ' (' + size + ')' : ''} ลงตะกร้าแล้ว!`; document.body.appendChild(toast); setTimeout(() => toast.remove(), 2500); } function updateCartBadge() { const total = cart.reduce((sum, c) => sum + c.qty, 0); const badge = document.getElementById('cart-badge'); const countEl = document.getElementById('cart-count'); if (badge) { badge.textContent = total; badge.classList.toggle('has-items', total > 0); } if (countEl) countEl.textContent = cart.length; } function openCart() { renderCart(); document.getElementById('cart-drawer').classList.add('open'); document.getElementById('cart-overlay').classList.add('open'); } function closeCart() { document.getElementById('cart-drawer').classList.remove('open'); document.getElementById('cart-overlay').classList.remove('open'); } function renderCart() { const list = document.getElementById('cart-items-list'); const footer = document.getElementById('cart-footer'); list.innerHTML = ''; if (cart.length === 0) { list.innerHTML = `<div class="cart-empty-state"><i class="fa-solid fa-cart-shopping"></i><p>ยังไม่มีสินค้าในตะกร้า</p><p style="font-size:0.85rem;margin-top:8px;">เลือกสินค้าที่คุณชื่นชอบได้เลย!</p></div>`; footer.style.display = 'none'; return; } footer.style.display = 'block'; cart.forEach((item, idx) => { const div = document.createElement('div'); div.className = 'cart-item'; div.innerHTML = ` <img src="${item.img}" alt="${item.title}"> <div class="cart-item-info"> <div class="cart-item-title">${item.title}</div> <div class="cart-item-meta">${item.size ? 'ไซส์: ' + item.size + ' • ' : ''}฿${item.price} / ชิ้น</div> <div class="cart-item-price">฿${(item.price item.qty).toLocaleString()}</div> <div class="cart-qty-row"> <button class="qty-btn" onclick="updateQty(${idx}, -1)">−</button> <span class="qty-display">${item.qty}</span> <button class="qty-btn" onclick="updateQty(${idx}, 1)">+</button> </div> </div> <button class="cart-remove-btn" onclick="removeFromCart(${idx})" title="ลบออก"><i class="fa-solid fa-trash"></i></button> `; list.appendChild(div); }); const total = cart.reduce((sum, c) => sum + c.price * c.qty, 0); document.getElementById('cart-total-price').textContent = '฿' + total.toLocaleString(); document.getElementById('cart-count').textContent = cart.length; } function removeFromCart(idx) { cart.splice(idx, 1); updateCartBadge(); renderCart(); } function updateQty(idx, delta) { cart[idx].qty = Math.max(1, cart[idx].qty + delta); updateCartBadge(); renderCart(); } function checkoutFromCart() { if (cart.length === 0) return; const total = cart.reduce((sum, c) => sum + c.price * c.qty, 0); const itemList = cart.map(c => `• ${c.title}${c.size ? ' [' + c.size + ']' : ''} x${c.qty}`).join('\n'); const customerName = currentUser ? currentUser.username : 'คุณลูกค้า (ผู้ใช้ทั่วไป)'; const newOrderId = `ORD-${Math.floor(10000 + Math.random() * 90000)}`; orders.unshift({ id: newOrderId, productTitle: cart.map(c => c.title + (c.size ? ' [' + c.size + ']' : '')).join(', ') + ' [ชำระผ่าน: ตะกร้าสินค้า]', customerName: customerName, shippingDate: new Date(Date.now() + 86400000 * 3).toISOString().split('T')[0], daysLeft: 3, status: 'processing', statusText: { th: 'กำลังเตรียมจัดส่ง (ผู้ขายกำลังแพ็คของ)', en: 'Preparing Order' }, step: 1 }); alert(`สั่งซื้อสำเร็จ! 🎉\n\nรหัสคำสั่งซื้อ: ${newOrderId}\nรายการ:\n${itemList}\n\nยอดรวม: ฿${total.toLocaleString()}\n\nระบบได้เพิ่มคำสั่งซื้อในหน้าติดตามพัสดุแล้วครับ!`); cart = []; updateCartBadge(); closeCart(); showPage('orders'); } function selectSize(size, btn) { selectedSize = size; document.querySelectorAll('.size-opt').forEach(b => b.classList.remove('selected')); if (btn) btn.classList.add('selected'); } function addToCartFromDetail() { if (!selectedProduct) return; const size = isClothing(selectedProduct) ? selectedSize : null; addToCart(selectedProduct.id, size); } let selectedProduct = null; let appliedDiscount = 0; let selectedPaymentMethod = 'qr'; // Select Payment Method Switcher function selectPaymentMethod(method) { selectedPaymentMethod = method; document.querySelectorAll('.payment-option-card').forEach(card => card.classList.remove('active')); document.getElementById(`pay-opt-${method}`).classList.add('active'); document.getElementById('pay-info-qr').style.display = method === 'qr' ? 'block' : 'none'; document.getElementById('pay-info-cod').style.display = method === 'cod' ? 'block' : 'none'; } // Open Product Detail & Reset Coupon State & Payment State function openProductDetail(id) { selectedProduct = products.find(p => p.id === id); if (!selectedProduct) return; appliedDiscount = 0; selectedSize = 'M'; selectPaymentMethod('qr'); document.getElementById('coupon-input').value = ''; document.getElementById('coupon-message').innerHTML = ''; // Show/hide size picker based on whether product is clothing const sizePicker = document.getElementById('size-picker-section'); if (isClothing(selectedProduct)) { sizePicker.style.display = 'block'; // Reset size buttons document.querySelectorAll('.size-opt').forEach(b => b.classList.remove('selected')); const mBtn = Array.from(document.querySelectorAll('.size-opt')).find(b => b.textContent === 'M'); if (mBtn) mBtn.classList.add('selected'); } else { sizePicker.style.display = 'none'; } document.getElementById('detail-img').src = selectedProduct.img; document.getElementById('detail-title').innerText = selectedProduct.title[currentLang]; const badgeEl = document.getElementById('detail-discount-badge'); if (selectedProduct.discountBadge) { badgeEl.innerText = selectedProduct.discountBadge; badgeEl.style.display = 'block'; } else { badgeEl.style.display = 'none'; } const origPriceEl = document.getElementById('detail-original-price'); if (selectedProduct.originalPrice) { origPriceEl.innerText = `฿${selectedProduct.originalPrice}`; origPriceEl.style.display = 'inline'; } else { origPriceEl.style.display = 'none'; } document.getElementById('detail-price').innerText = `฿${selectedProduct.price}`; document.getElementById('detail-desc').innerText = selectedProduct.desc[currentLang]; showPage('detail'); } // Copy Coupon Code Function function copyCouponCode(code) { navigator.clipboard.writeText(code).then(() => { alert(`คัดลอกโค้ดส่วนลด "${code}" เรียบร้อยแล้ว! สามารถนำไปใส่ในหน้าสั่งซื้อสินค้าได้เลย`); }).catch(() => { alert(`โค้ดส่วนลด: ${code}`); }); } // Apply Coupon Discount Calculation Logic function applyCoupon() { if (!selectedProduct) return; const code = document.getElementById('coupon-input').value.trim().toUpperCase(); const msgEl = document.getElementById('coupon-message'); let finalPrice = selectedProduct.price; if (code === 'PASTEL50') { if (selectedProduct.price >= 200) { appliedDiscount = 50; finalPrice = selectedProduct.price - 50; msgEl.style.color = '#16a34a'; msgEl.innerHTML = `<i class="fa-solid fa-circle-check"></i> ใช้โค้ดส่วนลด PASTEL50 สำเร็จ! ลดทันที 50 บาท (เหลือ ฿${finalPrice})`; } else { appliedDiscount = 0; msgEl.style.color = '#dc2626'; msgEl.innerHTML = `<i class="fa-solid fa-circle-xmark"></i> โค้ดนี้ใช้ได้เมื่อยอดซื้อขั้นต่ำ 200 บาทขึ้นไป`; } } else if (code === 'SUPER15') { appliedDiscount = Math.round(selectedProduct.price * 0.15); finalPrice = selectedProduct.price - appliedDiscount; msgEl.style.color = '#16a34a'; msgEl.innerHTML = `<i class="fa-solid fa-circle-check"></i> ใช้โค้ดส่วนลด SUPER15 สำเร็จ! ลด 15% (-฿${appliedDiscount}) (เหลือ ฿${finalPrice})`; } else if (code === '') { appliedDiscount = 0; msgEl.style.color = '#dc2626'; msgEl.innerHTML = `กรุณากรอกโค้ดส่วนลด`; } else { appliedDiscount = 0; msgEl.style.color = '#dc2626'; msgEl.innerHTML = `<i class="fa-solid fa-circle-xmark"></i> โค้ดส่วนลดไม่ถูกต้องหรือหมดอายุแล้ว`; } document.getElementById('detail-price').innerText = `฿${finalPrice}`; } // Checkout Process Handler with Payment Option Integration function processOrderCheckout() { if (!selectedProduct) return; const finalPrice = selectedProduct.price - appliedDiscount; let payMethodName = 'พร้อมเพย์ QR Code'; if (selectedPaymentMethod === 'cod') payMethodName = 'เก็บเงินปลายทาง (+15฿)'; const discountInfo = appliedDiscount > 0 ? ` (ส่วนลด -฿${appliedDiscount})` : ''; const newOrderId = `ORD-${Math.floor(10000 + Math.random() * 90000)}`; const customerName = currentUser ? currentUser.username : 'คุณลูกค้า (ผู้ใช้ทั่วไป)'; // Push New Order into Order Tracking System orders.unshift({ id: newOrderId, productTitle: `${selectedProduct.title[currentLang]} [ชำระผ่าน: ${payMethodName}]`, customerName: customerName, shippingDate: new Date(Date.now() + 86400000 * 3).toISOString().split('T')[0], daysLeft: 3, status: 'processing', statusText: { th: 'กำลังเตรียมจัดส่ง (ผู้ขายกำลังแพ็คของ)', en: 'Preparing Order' }, step: 1 }); alert(`สั่งซื้อสินค้าสำเร็จ! 🎉\n\nรหัสคำสั่งซื้อ: ${newOrderId}\nรายการ: ${selectedProduct.title[currentLang]}\nช่องทางชำระเงิน: ${payMethodName}\nยอดรวมชำระสุทธิ: ฿${finalPrice}${discountInfo}\n\nระบบได้เพิ่มคำสั่งซื้อของคุณไปยัง "หน้าติดตามคำสั่งซื้อ" แล้วครับ!`); showPage('orders'); } // Render Order Tracking List with Timeline and Days Count function renderOrders() { const container = document.getElementById('orders-container'); container.innerHTML = ''; orders.forEach(order => { const card = document.createElement('div'); card.className = 'order-card'; const progressWidth = (order.step / 3) * 80; let badgeClass = 'badge-processing'; if (order.status === 'shipping') badgeClass = 'badge-shipping'; if (order.status === 'delivered') badgeClass = 'badge-delivered'; let etaText = ''; if (order.status === 'delivered') { etaText = 'พัสดุถึงมือผู้รับเรียบร้อยแล้ว'; } else if (order.daysLeft > 0) { etaText = `พัสดุอยู่ระหว่างการเดินทาง คาดว่าจะถึงในอีก <strong>${order.daysLeft} วัน</strong> (${order.shippingDate})`; } else { etaText = `คาดว่าจะได้รับสินค้าภายในวันนี้ (${order.shippingDate})`; } card.innerHTML = ` <div class="order-header"> <div> <span class="order-id"><i class="fa-solid fa-receipt"></i> ${order.id}</span> <div style="font-size: 0.95rem; font-weight: 500; margin-top: 4px;">${order.productTitle}</div> </div> <span class="badge-status ${badgeClass}">${order.statusText[currentLang]}</span> </div> <!-- Timeline Tracker --> <div class="tracking-timeline"> <div class="tracking-timeline-progress" style="width: ${progressWidth}%;"></div> <div class="step-item ${order.step >= 0 ? (order.step === 0 ? 'active' : 'completed') : ''}"> <div class="step-icon"><i class="fa-solid fa-credit-card"></i></div> <div class="step-label">ชำระเงินสำเร็จ</div> </div> <div class="step-item ${order.step >= 1 ? (order.step === 1 ? 'active' : 'completed') : ''}"> <div class="step-icon"><i class="fa-solid fa-box"></i></div> <div class="step-label">กำลังแพ็คของ</div> </div> <div class="step-item ${order.step >= 2 ? (order.step === 2 ? 'active' : 'completed') : ''}"> <div class="step-icon"><i class="fa-solid fa-truck"></i></div> <div class="step-label">อยู่ระหว่างขนส่ง</div> </div> <div class="step-item ${order.step >= 3 ? 'completed' : ''}"> <div class="step-icon"><i class="fa-solid fa-house-chimney-check"></i></div> <div class="step-label">จัดส่งเรียบร้อย</div> </div> </div> <div class="eta-banner"> <i class="fa-solid fa-clock"></i> <div class="eta-text"> <div>สถานะระยะเวลาการจัดส่ง</div> <div>${etaText}</div> </div> </div> `; container.appendChild(card); }); } // Render Admin Orders Table function renderAdminOrders() { const tableBody = document.getElementById('admin-orders-table'); if (!tableBody) return; tableBody.innerHTML = ''; orders.forEach((order, index) => { const tr = document.createElement('tr'); tr.innerHTML = ` <td><strong>${order.id}</strong></td> <td>${order.productTitle}</td> <td>${order.customerName}</td> <td>${order.shippingDate}</td> <td>${order.daysLeft} วัน</td> <td> <select class="status-select" onchange="updateOrderStatus(${index}, this.value)"> <option value="0" ${order.step === 0 ? 'selected' : ''}>0. ชำระเงินแล้ว</option> <option value="1" ${order.step === 1 ? 'selected' : ''}>1. กำลังแพ็คสินค้า</option> <option value="2" ${order.step === 2 ? 'selected' : ''}>2. อยู่ระหว่างขนส่ง (อีก 2 วัน)</option> <option value="3" ${order.step === 3 ? 'selected' : ''}>3. จัดส่งสำเร็จแล้ว</option> </select> </td> `; tableBody.appendChild(tr); }); } // Admin Update Order Status Function function updateOrderStatus(index, newStep) { newStep = parseInt(newStep); orders[index].step = newStep; if (newStep === 0) { orders[index].status = 'processing'; orders[index].statusText = { th: 'ชำระเงินแล้ว', en: 'Paid' }; orders[index].daysLeft = 4; } else if (newStep === 1) { orders[index].status = 'processing'; orders[index].statusText = { th: 'กำลังเตรียมจัดส่ง (ผู้ขายกำลังแพ็คของ)', en: 'Preparing Order' }; orders[index].daysLeft = 3; } else if (newStep === 2) { orders[index].status = 'shipping'; orders[index].statusText = { th: 'กำลังจัดส่งสินค้า (ขนส่ง)', en: 'In Transit' }; orders[index].daysLeft = 2; } else if (newStep === 3) { orders[index].status = 'delivered'; orders[index].statusText = { th: 'จัดส่งสำเร็จแล้ว', en: 'Delivered' }; orders[index].daysLeft = 0; } renderOrders(); renderAdminOrders(); alert(`อัปเดตสถานะคำสั่งซื้อ ${orders[index].id} สำเร็จ!`); } // Users Data Store let registeredUsers = [ { username: 'user', email: 'user@example.com', password: '123' }, { username: 'pastel', email: 'pastel@shop.com', password: '123' } ]; let currentUser = null; // User Login Handler function handleUserLogin(e) { e.preventDefault(); const usernameInput = document.getElementById('login-username').value.trim(); const passwordInput = document.getElementById('login-password').value.trim(); const foundUser = registeredUsers.find(u => (u.username === usernameInput \|\| u.email === usernameInput) && u.password === passwordInput ); if (foundUser) { currentUser = foundUser; updateUserProfileUI(); alert(`เข้าสู่ระบบสำเร็จ! ยินดีต้อนรับคุณ ${currentUser.username}`); showPage('home'); } else { alert('ชื่อผู้ใช้ อีเมล หรือรหัสผ่านไม่ถูกต้อง!\n\n(ทดลองเข้าสู่ระบบด้วย:\nชื่อผู้ใช้: user\nรหัสผ่าน: 123)'); } } // User Register Handler function handleUserRegister(e) { e.preventDefault(); const username = document.getElementById('reg-username').value.trim(); const email = document.getElementById('reg-email').value.trim(); const password = document.getElementById('reg-password').value.trim(); const existing = registeredUsers.find(u => u.username === username \|\| u.email === email); if (existing) { alert('ชื่อผู้ใช้หรืออีเมลนี้มีอยู่ในระบบแล้ว!'); return; } const newUser = { username, email, password }; registeredUsers.push(newUser); currentUser = newUser; updateUserProfileUI(); alert('สมัครสมาชิกสำเร็จ! เข้าสู่ระบบเรียบร้อยแล้ว'); showPage('home'); } // User Logout Handler function handleUserLogout() { currentUser = null; updateUserProfileUI(); alert('ออกจากระบบเรียบร้อยแล้ว'); } // Update User Profile UI state function updateUserProfileUI() { const loginBox = document.getElementById('login-box'); const registerBox = document.getElementById('register-box'); const loggedInBox = document.getElementById('user-logged-in-box'); const navProfileText = document.querySelector('#nav-profile span'); if (currentUser) { loginBox.style.display = 'none'; registerBox.style.display = 'none'; loggedInBox.style.display = 'block'; document.getElementById('logged-user-name').innerText = currentUser.username; document.getElementById('logged-user-email').innerText = currentUser.email; if (navProfileText) { navProfileText.innerText = currentUser.username; } } else { loginBox.style.display = 'block'; registerBox.style.display = 'none'; loggedInBox.style.display = 'none'; if (navProfileText) { navProfileText.innerText = translations[currentLang].nav_profile \|\| 'เข้าสู่ระบบ / บัญชี'; } } } // Admin Login Handler function handleAdminLogin(e) { e.preventDefault(); const user = document.getElementById('admin-user').value; const pass = document.getElementById('admin-pass').value; if (user === 'admin' && pass === '1234') { isAdminLoggedIn = true; alert('เข้าสู่ระบบผู้ดูแลระบบสำเร็จ!'); showPage('admin-dashboard'); } else { alert('ชื่อผู้ใช้หรือรหัสผ่านแอดมินไม่ถูกต้อง! (ลองใส่ admin / 1234)'); } } // Admin Logout function logoutAdmin() { isAdminLoggedIn = false; showPage('home'); } // Admin Add New Product Handler function addNewProduct(e) { e.preventDefault(); const titleTh = document.getElementById('new-title-th').value; const titleEn = document.getElementById('new-title-en').value; const price = parseFloat(document.getElementById('new-price').value); const category = document.getElementById('new-category') ? document.getElementById('new-category').value : 'sports'; const img = document.getElementById('new-img').value; const descTh = document.getElementById('new-desc-th').value; const newProduct = { id: products.length + 1, category: category, title: { th: titleTh, en: titleEn }, price: price, sales: { th: 'สินค้าใหม่', en: 'New item' }, img: img, desc: { th: descTh, en: descTh } }; products.unshift(newProduct); renderProducts(); e.target.reset(); alert('เพิ่มสินค้าใหม่เรียบร้อยแล้ว!'); showPage('home'); } // Switch Pages function showPage(pageId) { if (pageId === 'admin-dashboard' && !isAdminLoggedIn) { pageId = 'admin-login'; } document.querySelectorAll('.page').forEach(page => page.classList.remove('active')); document.querySelectorAll('.nav-link').forEach(nav => nav.classList.remove('active')); if (pageId === 'home') { document.getElementById('page-home').classList.add('active'); document.getElementById('nav-home')?.classList.add('active'); } else if (pageId === 'orders') { document.getElementById('page-orders').classList.add('active'); document.getElementById('nav-orders')?.classList.add('active'); renderOrders(); } else if (pageId === 'profile') { document.getElementById('page-profile').classList.add('active'); document.getElementById('nav-profile')?.classList.add('active'); updateUserProfileUI(); } else if (pageId === 'detail') { document.getElementById('page-detail').classList.add('active'); } else if (pageId === 'admin-login') { document.getElementById('page-admin-login').classList.add('active'); document.getElementById('nav-admin')?.classList.add('active'); } else if (pageId === 'admin-dashboard') { document.getElementById('page-admin-dashboard').classList.add('active'); document.getElementById('nav-admin')?.classList.add('active'); renderAdminOrders(); } } // Toggle Auth View (Login / Register) function toggleAuth(type) { if (currentUser) return; if (type === 'register') { document.getElementById('login-box').style.display = 'none'; document.getElementById('register-box').style.display = 'block'; } else { document.getElementById('login-box').style.display = 'block'; document.getElementById('register-box').style.display = 'none'; } } // Toggle Language System function toggleLanguage() { currentLang = currentLang === 'th' ? 'en' : 'th'; document.getElementById('lang-toggle-btn').innerText = currentLang === 'th' ? 'EN' : 'TH'; updateLanguageUI(); renderProducts(); renderOrders(); } function updateLanguageUI() { // Update Text Placeholders & Fixed Texts const searchInput = document.getElementById('search-input'); if (searchInput) searchInput.placeholder = translations[currentLang].search_ph; document.querySelectorAll('[data-i18n]').forEach(element => { const key = element.getAttribute('data-i18n'); if (translations[currentLang][key]) { element.innerText = translations[currentLang][key]; } }); } // ===== DARK / LIGHT MODE TOGGLE ===== function toggleTheme() { const html = document.documentElement; const isDark = html.getAttribute('data-theme') === 'dark'; const thumb = document.getElementById('toggle-thumb'); if (isDark) { // Switch to Light Mode html.removeAttribute('data-theme'); if (thumb) thumb.textContent = '☀️'; localStorage.setItem('shopTheme', 'light'); } else { // Switch to Dark Mode html.setAttribute('data-theme', 'dark'); if (thumb) thumb.textContent = '🌙'; localStorage.setItem('shopTheme', 'dark'); } } // Apply saved theme from localStorage on page load (function initTheme() { const savedTheme = localStorage.getItem('shopTheme'); const thumb = document.getElementById('toggle-thumb'); if (savedTheme === 'dark') { document.documentElement.setAttribute('data-theme', 'dark'); if (thumb) thumb.textContent = '🌙'; } else { document.documentElement.removeAttribute('data-theme'); if (thumb) thumb.textContent = '☀️'; } })(); // Run Application initApp(); </script> </body> </html>

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