File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090005/shop005/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>BABYMONSTER Fashion Shop \| Official E-Commerce Store</title> <meta name="description" content="ร้านค้าแฟชั่นอย่างเป็นทางการ BABYMONSTER Fashion Shop - สั่งซื้อเสื้อผ้า ฮู้ดดี้ แจ็กเก็ต หมวก และเครื่องประดับสุดเท่สไตล์ BABYMONSTER"> <!-- Google Fonts --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700;800&family=Outfit:wght@400;600;700;800;900&display=swap" rel="stylesheet"> <!-- Font Awesome Icons --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <!-- Main CSS --> <link rel="stylesheet" href="css/style.css"> </head> <body class="dark-theme"> <!-- Splash Screen Intro --> <div id="splash-screen" class="splash-screen"> <div class="splash-content"> <div class="splash-logo-container"> <span class="logo-badge">EXCLUSIVE SHOP</span> <h1 class="splash-title">BABYMONSTER</h1> <p class="splash-subtitle">FASHION & MERCH STORE</p> <div class="splash-glow"></div> </div> <div class="splash-loader"> <div class="loader-bar"><div class="loader-progress"></div></div> <span class="loader-text">LOADING EXPERIENCE...</span> </div> <button id="btn-enter-shop" class="btn-enter pulse-animation"> <i class="fa-solid fa-bolt"></i> เข้าสู่ร้านค้า SHOP NOW </button> </div> </div> <!-- Top Announcement Bar --> <div class="announcement-bar"> <div class="announcement-slider"> <span>🔥 <strong>BABYMONSTER WORLD TOUR MERCH</strong> - สินค้าใหม่พร้อมส่ง!</span> <span>⚡ ส่งฟรีทั่วประเทศ เมื่อช็อปครบ 1,500 บาท \| ใช้โค้ด <strong>BMFIRST10</strong> ลด 10%</span> <span>🎵 รับสิทธิ์ลุ้นบัตร VIP Fan Meeting เมื่อสั่งซื้อในแอปวันนี้!</span> </div> </div> <!-- Main Navigation Bar --> <header class="main-header"> <div class="container header-container"> <a href="#" class="brand-logo"> <span class="logo-text-red">BABY</span><span class="logo-text-white">MONSTER</span> <span class="brand-tag">SHOP</span> </a> <!-- Search Bar --> <div class="header-search"> <div class="search-input-wrapper"> <i class="fa-solid fa-magnifying-glass search-icon"></i> <input type="text" id="search-input" placeholder="ค้นหาสินค้า BABYMONSTER เช่น Hoodie, Cap, Jacket..." autocomplete="off"> <button id="btn-clear-search" class="btn-clear-search hide"><i class="fa-solid fa-xmark"></i></button> </div> <div id="search-suggestions" class="search-suggestions hide"></div> </div> <!-- Header Actions --> <div class="header-actions"> <button class="nav-action-btn tiktok-mode-btn" id="btn-tiktok-mode" title="เปิดโหมด TikTok Feed"> <i class="fa-brands fa-tiktok"></i> <span class="btn-badge-live">LIVE</span> <span class="action-label">TikTok Feed</span> </button> <button class="nav-action-btn" id="btn-notifications-toggle" title="การแจ้งเตือน"> <i class="fa-regular fa-bell"></i> <span class="badge badge-primary" id="notification-badge">3</span> <span class="action-label">การแจ้งเตือน</span> </button> <button class="nav-action-btn" id="btn-wishlist-toggle" title="รายการโปรด"> <i class="fa-regular fa-heart"></i> <span class="badge" id="wishlist-badge">0</span> <span class="action-label">รายการโปรด</span> </button> <button class="nav-action-btn" id="btn-cart-toggle" title="ตะกร้าสินค้า"> <i class="fa-solid fa-bag-shopping"></i> <span class="badge badge-primary" id="cart-badge">0</span> <span class="action-label">ตะกร้า</span> </button> <button class="nav-action-btn" id="btn-user-profile" title="บัญชีผู้ใช้"> <div class="user-avatar-small" id="header-user-avatar"> <i class="fa-solid fa-user"></i> </div> <span class="action-label" id="header-user-name">เข้าสู่ระบบ</span> </button> </div> </div> <!-- Secondary Navigation Bar with Requested Menus --> <nav class="sub-nav-bar"> <div class="container sub-nav-container"> <a href="#hero-section" class="sub-nav-item active" onclick="app.navToSection('home')"> <i class="fa-solid fa-house"></i> <span>หน้าแรก</span> </a> <a href="#products-catalog" class="sub-nav-item" onclick="app.filterCategory('all')"> <i class="fa-solid fa-bag-shopping"></i> <span>สินค้า</span> </a> <a href="#flash-sale-section" class="sub-nav-item highlight-promo" onclick="app.navToSection('promo')"> <i class="fa-solid fa-fire"></i> <span>โปรโมชั่น</span> </a> <a href="#products-catalog" class="sub-nav-item" onclick="app.filterSpecial('bestseller')"> <i class="fa-solid fa-star"></i> <span>Best Seller</span> </a> <a href="javascript:void(0)" class="sub-nav-item" onclick="app.openUserProfile('orders')"> <i class="fa-solid fa-box-archive"></i> <span>ติดตามสินค้า</span> </a> <a href="javascript:void(0)" class="sub-nav-item" onclick="app.openUserProfile('wishlist')"> <i class="fa-solid fa-heart"></i> <span>รายการโปรด</span> </a> <a href="javascript:void(0)" class="sub-nav-item" onclick="app.toggleCart(true)"> <i class="fa-solid fa-cart-shopping"></i> <span>ตะกร้า</span> </a> <a href="javascript:void(0)" class="sub-nav-item" onclick="app.openUserProfile('profile')"> <i class="fa-solid fa-user"></i> <span>บัญชี</span> </a> </div> </nav> </header> <!-- Sub-navigation & Categories bar --> <nav class="category-nav"> <div class="container category-container"> <div class="category-pills" id="category-pills"> <button class="cat-pill active" data-category="all"><i class="fa-solid fa-fire"></i> ทั้งหมด</button> <button class="cat-pill" data-category="tshirt"><i class="fa-solid fa-shirt"></i> เสื้อยืด (T-Shirts)</button> <button class="cat-pill" data-category="hoodie"><i class="fa-solid fa-vest"></i> ฮู้ดดี้ (Hoodies)</button> <button class="cat-pill" data-category="jacket"><i class="fa-solid fa-user-ninja"></i> แจ็กเก็ต (Jackets)</button> <button class="cat-pill" data-category="pants"><i class="fa-solid fa-socks"></i> กางเกง (Pants)</button> <button class="cat-pill" data-category="cap"><i class="fa-solid fa-hat-cowboy"></i> หมวก (Caps)</button> <button class="cat-pill" data-category="bag"><i class="fa-solid fa-briefcase"></i> กระเป๋า (Bags)</button> <button class="cat-pill" data-category="accessory"><i class="fa-solid fa-gem"></i> เครื่องประดับ</button> </div> <button id="btn-open-filters" class="btn-filter-trigger"> <i class="fa-solid fa-sliders"></i> ตัวกรองสินค้า </button> </div> </nav> <!-- Main Content Area --> <main class="main-body container"> <!-- Hero Promotional Banner Carousel --> <section class="hero-section"> <div class="hero-carousel" id="hero-carousel"> <div class="hero-slide active" style="background-image: linear-gradient(to right, rgba(0,0,0,0.85), rgba(0,0,0,0.3)), url('https://images.unsplash.com/photo-1509631179647-0177331693ae?auto=format&fit=crop&w=1400&q=80');"> <div class="hero-content"> <span class="hero-tag">NEW COLLECTION 2026</span> <h2 class="hero-title">BABYMONSTER WORLD TOUR MERCH</h2> <p class="hero-desc">คอลเลกชันใหม่ล่าสุด ออกแบบโดยรับแรงบันดาลใจจากลุคสเตจของ 7 สาว BABYMONSTER</p> <div class="hero-btns"> <button class="btn btn-primary btn-lg" onclick="app.scrollToProducts('hoodie')"><i class="fa-solid fa-bag-shopping"></i> ช้อปคอลเลกชันนี้</button> <button class="btn btn-outline btn-lg" id="btn-watch-video-hero"><i class="fa-solid fa-play"></i> ชมวิดีโอลุคบุ๊ก</button> </div> </div> </div> <div class="hero-slide" style="background-image: linear-gradient(to right, rgba(0,0,0,0.85), rgba(0,0,0,0.3)), url('https://images.unsplash.com/photo-1558769132-cb1aea458c5e?auto=format&fit=crop&w=1400&q=80');"> <div class="hero-content"> <span class="hero-tag badge-danger">FLASH SALE 30% OFF</span> <h2 class="hero-title">LIMITED STREETWEAR EDITION</h2> <p class="hero-desc">สินค้าแฟชั่นจำนวนจำกัด พร้อมรับโปสการ์ดพร้อมลายเซ็นดิจิทัลทุกคำสั่งซื้อ</p> <div class="hero-btns"> <button class="btn btn-primary btn-lg" onclick="app.filterByTag('flash_sale')"><i class="fa-solid fa-bolt"></i> ดูสินค้า Flash Sale</button> </div> </div> </div> </div> <div class="carousel-indicators" id="carousel-indicators"> <span class="indicator active" data-index="0"></span> <span class="indicator" data-index="1"></span> </div> </section> <!-- Quick Highlight Badges --> <section class="features-bar"> <div class="feature-item"> <i class="fa-solid fa-truck-fast"></i> <div> <h4>จัดส่งด่วน Express</h4> <p>ส่งถึงหน้าบ้านภายใน 1-2 วัน</p> </div> </div> <div class="feature-item"> <i class="fa-solid fa-shield-halved"></i> <div> <h4>ของแท้ 100% Guaranteed</h4> <p>ลิขสิทธิ์แท้จากสโมสร/ค่ายเพลง</p> </div> </div> <div class="feature-item"> <i class="fa-solid fa-rotate-left"></i> <div> <h4>เปลี่ยน/คืนง่ายใน 7 วัน</h4> <p>หากไซส์ไม่พอดีเปลี่ยนฟรี</p> </div> </div> <div class="feature-item"> <i class="fa-solid fa-headset"></i> <div> <h4>บริการลูกค้า 24 ชม.</h4> <p>พร้อมตอบแชทและให้คำแนะนำ</p> </div> </div> </section> <!-- Flash Sale Section --> <section class="section-container flash-sale-section"> <div class="section-header"> <div class="section-title-wrap"> <span class="flash-icon"><i class="fa-solid fa-bolt"></i></span> <h2 class="section-title">FLASH SALE สินค้าลดราคาพิเศษ</h2> <div class="countdown-timer" id="flash-countdown"> <span class="timer-box" id="timer-hours">04</span> : <span class="timer-box" id="timer-mins">32</span> : <span class="timer-box" id="timer-secs">15</span> </div> </div> <button class="btn-link" onclick="app.filterByTag('flash_sale')">ดูทั้งหมด <i class="fa-solid fa-chevron-right"></i></button> </div> <div class="products-horizontal-scroll" id="flash-sale-grid"> <!-- Injected JS --> </div> </section> <!-- Best Sellers & Recommended Tabs --> <section class="section-container"> <div class="section-header"> <div class="tab-buttons"> <button class="tab-btn active" data-tab="best-sellers"><i class="fa-solid fa-fire-flame-curved"></i> สินค้าขายดี (Best Sellers)</button> <button class="tab-btn" data-tab="new-arrivals"><i class="fa-solid fa-sparkles"></i> สินค้ามาใหม่ (New Arrivals)</button> <button class="tab-btn" data-tab="recommended"><i class="fa-solid fa-thumbs-up"></i> สินค้าแนะนำสำหรับคุณ</button> </div> </div> <div class="product-grid" id="curated-products-grid"> <!-- Injected via JS --> </div> </section> <!-- All Products Section with Active Filters Bar --> <section class="section-container" id="products-catalog-section"> <div class="section-header"> <h2 class="section-title"><i class="fa-solid fa-grid-2"></i> รายการสินค้าทั้งหมด (<span id="products-count">0</span>)</h2> <div class="sort-wrapper"> <label for="sort-select">เรียงตาม:</label> <select id="sort-select" class="custom-select"> <option value="popular">ยอดนิยมสูงสุด</option> <option value="newest">มาใหม่ล่าสุด</option> <option value="price-asc">ราคา: ต่ำสุด -> สูงสุด</option> <option value="price-desc">ราคา: สูงสุด -> ต่ำสุด</option> <option value="rating">คะแนนรีวิวสูงสุด</option> </select> </div> </div> <!-- Active Filters Indicator Bar --> <div id="active-filters-bar" class="active-filters-bar hide"> <span class="filter-label">ตัวกรองที่เลือก:</span> <div id="filter-tags-container" class="filter-tags-container"></div> <button id="btn-reset-filters" class="btn-reset-filters"><i class="fa-solid fa-trash"></i> ล้างตัวกรองทั้งหมด</button> </div> <!-- Main Product Grid --> <div class="product-grid" id="main-products-grid"> <!-- Injected via JS --> </div> <!-- Empty State --> <div id="no-products-found" class="empty-state hide"> <i class="fa-solid fa-box-open empty-icon"></i> <h3>ไม่พบสินค้าที่ค้นหา</h3> <p>ลองปรับเปลี่ยนคำค้นหาหรือล้างตัวกรองสินค้า</p> <button class="btn btn-primary" onclick="app.resetAllFilters()">ดูสินค้าทั้งหมด</button> </div> </section> </main> <!-- TikTok Style Feed Modal --> <div id="tiktok-modal" class="modal tiktok-modal hide"> <div class="tiktok-feed-wrapper"> <button class="tiktok-close-btn" id="btn-close-tiktok"><i class="fa-solid fa-xmark"></i></button> <div class="tiktok-container" id="tiktok-container"> <!-- Dynamically populated vertical TikTok video style cards --> </div> </div> </div> <!-- Product Detail Modal --> <div id="product-detail-modal" class="modal hide"> <div class="modal-backdrop" onclick="app.closeProductDetail()"></div> <div class="modal-dialog modal-lg"> <button class="modal-close-btn" onclick="app.closeProductDetail()"><i class="fa-solid fa-xmark"></i></button> <div class="product-detail-layout" id="product-detail-content"> <!-- Dynamically populated JS --> </div> </div> </div> <!-- Cart Slide-over / Modal --> <div id="cart-drawer" class="cart-drawer hide"> <div class="cart-backdrop" onclick="app.toggleCart(false)"></div> <div class="cart-panel"> <div class="cart-header"> <h3><i class="fa-solid fa-bag-shopping"></i> ตะกร้าสินค้า (<span id="cart-items-count">0</span>)</h3> <button class="btn-close-icon" onclick="app.toggleCart(false)"><i class="fa-solid fa-xmark"></i></button> </div> <div class="cart-body" id="cart-body-items"> <!-- Cart items JS --> </div> <!-- Cart Footer --> <div class="cart-footer"> <!-- Coupon Input --> <div class="coupon-box"> <input type="text" id="coupon-input" placeholder="ใส่โค้ดส่วนลด เช่น BMFIRST10"> <button id="btn-apply-coupon" class="btn btn-dark">ใช้โค้ด</button> </div> <div id="coupon-message" class="coupon-message"></div> <!-- Price Summary --> <div class="cart-summary"> <div class="summary-row"> <span>ราคาสินค้ารวม:</span> <span id="cart-subtotal">฿0</span> </div> <div class="summary-row" id="row-discount" style="display: none;"> <span>ส่วนลดคูปอง:</span> <span class="text-danger" id="cart-discount">-฿0</span> </div> <div class="summary-row"> <span>ค่าจัดส่ง:</span> <span id="cart-shipping">฿0</span> </div> <div class="summary-row total-row"> <span>ยอดชำระสุทธิ:</span> <span class="total-price" id="cart-total">฿0</span> </div> </div> <button class="btn btn-primary btn-block btn-checkout" id="btn-proceed-checkout"> <i class="fa-solid fa-credit-card"></i> ดำเนินการสั่งซื้อ (Checkout) </button> </div> </div> </div> <!-- Checkout Modal --> <div id="checkout-modal" class="modal hide"> <div class="modal-backdrop" onclick="app.closeCheckout()"></div> <div class="modal-dialog modal-md"> <button class="modal-close-btn" onclick="app.closeCheckout()"><i class="fa-solid fa-xmark"></i></button> <div class="checkout-wrapper"> <h2 class="modal-title"><i class="fa-solid fa-cash-register"></i> ยืนยันการสั่งซื้อและชำระเงิน</h2> <form id="checkout-form" onsubmit="app.handleOrderSubmit(event)"> <!-- Customer Shipping Info --> <div class="form-section"> <h4><i class="fa-solid fa-location-dot"></i> ข้อมูลที่อยู่จัดส่ง</h4> <div class="form-grid"> <div class="form-group"> <label>ชื่อ-นามสกุล </label> <input type="text" id="ship-name" required placeholder="เช่น สมชาย ใจดี"> </div> <div class="form-group"> <label>เบอร์โทรศัพท์ </label> <input type="tel" id="ship-phone" required placeholder="0812345678"> </div> </div> <div class="form-group"> <label>ที่อยู่สำหรับจัดส่งสินค้า </label> <textarea id="ship-address" rows="3" required placeholder="บ้านเลขที่, ถนน, แขวง/ตำบล, เขต/อำเภอ, จังหวัด, รหัสไปรษณีย์"></textarea> </div> </div> <!-- Payment Method Selector --> <div class="form-section"> <h4><i class="fa-solid fa-wallet"></i> เลือกช่องทางการชำระเงิน</h4> <div class="payment-options"> <label class="payment-card active"> <input type="radio" name="payment" value="promptpay" checked onchange="app.onPaymentChange(this.value)"> <div class="pay-icon"><i class="fa-solid fa-qrcode"></i></div> <div class="pay-info"> <strong>QR PromptPay</strong> <small>สแกนชำระเงินได้ทันที ทุกธนาคาร</small> </div> </label> <label class="payment-card"> <input type="radio" name="payment" value="mobilebanking" onchange="app.onPaymentChange(this.value)"> <div class="pay-icon"><i class="fa-solid fa-mobile-screen"></i></div> <div class="pay-info"> <strong>Mobile Banking</strong> <small>K PLUS, SCB EASY, Krungthai NEXT</small> </div> </label> <label class="payment-card"> <input type="radio" name="payment" value="card" onchange="app.onPaymentChange(this.value)"> <div class="pay-icon"><i class="fa-solid fa-credit-card"></i></div> <div class="pay-info"> <strong>บัตรเครดิต / เดบิต</strong> <small>Visa, Mastercard, JCB</small> </div> </label> <label class="payment-card"> <input type="radio" name="payment" value="cod" onchange="app.onPaymentChange(this.value)"> <div class="pay-icon"><i class="fa-solid fa-hand-holding-dollar"></i></div> <div class="pay-info"> <strong>เก็บเงินปลายทาง (COD)</strong> <small>ชำระเงินกับพนักงานขนส่งเมื่อได้รับของ</small> </div> </label> </div> <!-- Dynamic Payment Details (e.g. PromptPay QR Code container) --> <div id="payment-details-box" class="payment-details-box"> <!-- PromptPay QR Code preview generated dynamically --> </div> </div> <!-- Order Summary Box --> <div class="checkout-summary-box"> <div class="summary-line"><span>ยอดสั่งซื้อทั้งหมด:</span> <strong id="checkout-total-price">฿0</strong></div> <p class="terms-text"><i class="fa-solid fa-circle-info"></i> เมื่อคลิก "ยืนยันคำสั่งซื้อ" คุณยอมรับข้อกำหนดเงื่อนไขของ BABYMONSTER Shop</p> </div> <button type="submit" class="btn btn-primary btn-block btn-lg"> <i class="fa-solid fa-check-circle"></i> ยืนยันการสั่งซื้อ (PLACE ORDER) </button> </form> </div> </div> </div> <!-- Order Success / Tracking Modal --> <div id="order-success-modal" class="modal hide"> <div class="modal-backdrop"></div> <div class="modal-dialog modal-md text-center"> <div class="order-success-box"> <div class="success-icon-wrap"> <i class="fa-solid fa-circle-check"></i> </div> <h2>สั่งซื้อสินค้าสำเร็จ!</h2> <p>ขอบคุณสำหรับการสั่งซื้อสินค้ากับ BABYMONSTER Fashion Shop</p> <div class="order-receipt-card" id="receipt-card-details"> <!-- Dynamic receipt --> </div> <div class="success-actions"> <button class="btn btn-primary" onclick="app.openUserProfile('orders')"><i class="fa-solid fa-truck-ramp-box"></i> ติดตามสถานะพัสดุ</button> <button class="btn btn-outline" onclick="app.closeOrderSuccess()"><i class="fa-solid fa-house"></i> กลับสู่หน้าหลัก</button> </div> </div> </div> </div> <!-- Member Login / Profile Modal --> <div id="user-modal" class="modal hide"> <div class="modal-backdrop" onclick="app.closeUserModal()"></div> <div class="modal-dialog modal-md"> <button class="modal-close-btn" onclick="app.closeUserModal()"><i class="fa-solid fa-xmark"></i></button> <!-- User Auth Tabs --> <div class="user-modal-tabs hide" id="auth-tabs"> <button class="auth-tab-btn active" id="tab-login-btn" onclick="app.switchAuthTab('login')">เข้าสู่ระบบ</button> <button class="auth-tab-btn" id="tab-register-btn" onclick="app.switchAuthTab('register')">สมัครสมาชิก</button> </div> <!-- Login View --> <div id="login-view" class="user-view"> <h3 class="modal-title"><i class="fa-solid fa-user-lock"></i> เข้าสู่ระบบสมาชิก</h3> <form onsubmit="app.handleLogin(event)"> <div class="form-group"> <label>อีเมล หรือ เบอร์โทรศัพท์</label> <input type="text" id="login-email" required value="monster.fan@babymonster.com"> </div> <div class="form-group"> <label>รหัสผ่าน</label> <input type="password" id="login-password" required value="123456"> </div> <button type="submit" class="btn btn-primary btn-block"><i class="fa-solid fa-right-to-bracket"></i> เข้าสู่ระบบ</button> </form> </div> <!-- Register View --> <div id="register-view" class="user-view hide"> <h3 class="modal-title"><i class="fa-solid fa-user-plus"></i> สมัครสมาชิกใหม่</h3> <form onsubmit="app.handleRegister(event)"> <div class="form-group"> <label>ชื่อ-นามสกุล </label> <input type="text" id="reg-name" required placeholder="เช่น อารา กวินทร์"> </div> <div class="form-group"> <label>อีเมล </label> <input type="email" id="reg-email" required placeholder="name@example.com"> </div> <div class="form-group"> <label>เบอร์โทรศัพท์ </label> <input type="tel" id="reg-phone" required placeholder="08xxxxxxxx"> </div> <div class="form-group"> <label>รหัสผ่าน </label> <input type="password" id="reg-password" required placeholder="อย่างน้อย 6 ตัวอักษร"> </div> <button type="submit" class="btn btn-primary btn-block"><i class="fa-solid fa-user-check"></i> สร้างบัญชีสมาชิก</button> </form> </div> <!-- User Dashboard View (When Logged In) --> <div id="profile-dashboard-view" class="user-view hide"> <div class="profile-header"> <div class="profile-avatar"> <i class="fa-solid fa-user"></i> </div> <div class="profile-info"> <h3 id="profile-display-name">MONSTER FAN</h3> <span class="badge badge-danger">VIP MEMBER</span> <p id="profile-display-email">monster.fan@babymonster.com</p> </div> </div> <div class="dashboard-tabs"> <button class="dash-tab active" data-dash="orders" onclick="app.switchDashTab('orders')"><i class="fa-solid fa-box"></i> ประวัติคำสั่งซื้อ (<span id="user-orders-count">0</span>)</button> <button class="dash-tab" data-dash="wishlist" onclick="app.switchDashTab('wishlist')"><i class="fa-solid fa-heart"></i> รายการโปรด (<span id="user-wishlist-count">0</span>)</button> </div> <div class="dash-content" id="dash-orders-panel"> <!-- Orders tracking timeline list injected by JS --> </div> <div class="dash-content hide" id="dash-wishlist-panel"> <!-- Wishlist grid injected by JS --> </div> <div class="profile-footer"> <button class="btn btn-outline btn-block" onclick="app.handleLogout()"><i class="fa-solid fa-right-from-bracket"></i> ออกจากระบบ</button> </div> </div> </div> </div> <!-- Filter Modal Side Drawer --> <div id="filter-drawer" class="filter-drawer hide"> <div class="filter-backdrop" onclick="app.toggleFilterDrawer(false)"></div> <div class="filter-panel"> <div class="filter-header"> <h3><i class="fa-solid fa-sliders"></i> กรองสินค้าตามต้องการ</h3> <button class="btn-close-icon" onclick="app.toggleFilterDrawer(false)"><i class="fa-solid fa-xmark"></i></button> </div> <div class="filter-body"> <!-- Category Filter --> <div class="filter-group"> <h4>หมวดหมู่สินค้า</h4> <div class="filter-options-grid" id="filter-category-options"> <!-- JS injected --> </div> </div> <!-- Price Range Filter --> <div class="filter-group"> <h4>ช่วงราคา (บาท)</h4> <div class="price-inputs"> <input type="number" id="filter-min-price" placeholder="ขั้นต่ำ 0" min="0"> <span>-</span> <input type="number" id="filter-max-price" placeholder="สูงสุด 5000" min="0"> </div> </div> <!-- Color Filter --> <div class="filter-group"> <h4>สีสินค้า</h4> <div class="color-swatches" id="filter-color-options"> <label class="color-swatch-item"><input type="checkbox" value="Black"><span class="color-circle black"></span> ดำ</label> <label class="color-swatch-item"><input type="checkbox" value="Red"><span class="color-circle red"></span> แดง</label> <label class="color-swatch-item"><input type="checkbox" value="White"><span class="color-circle white"></span> ขาว</label> <label class="color-swatch-item"><input type="checkbox" value="Grey"><span class="color-circle grey"></span> เทา</label> <label class="color-swatch-item"><input type="checkbox" value="Beige"><span class="color-circle beige"></span> เบจ</label> </div> </div> <!-- Size Filter --> <div class="filter-group"> <h4>ขนาด / ไซส์ (Size)</h4> <div class="size-boxes" id="filter-size-options"> <label class="size-chip"><input type="checkbox" value="S"> S</label> <label class="size-chip"><input type="checkbox" value="M"> M</label> <label class="size-chip"><input type="checkbox" value="L"> L</label> <label class="size-chip"><input type="checkbox" value="XL"> XL</label> <label class="size-chip"><input type="checkbox" value="FREE"> FREE</label> </div> </div> </div> <div class="filter-footer"> <button class="btn btn-outline" onclick="app.resetAllFilters()"><i class="fa-solid fa-rotate"></i> ล้างทั้งหมด</button> <button class="btn btn-primary" onclick="app.applyFilters()"><i class="fa-solid fa-check"></i> ประยุกต์ใช้ตัวกรอง</button> </div> </div> </div> <!-- Notifications Drawer --> <div id="notifications-drawer" class="filter-drawer hide"> <div class="filter-backdrop" onclick="app.toggleNotificationsDrawer(false)"></div> <div class="filter-panel" style="max-width: 400px;"> <div class="filter-header"> <h3><i class="fa-regular fa-bell"></i> ศูนย์แจ้งเตือน (Notifications)</h3> <button class="btn-close-icon" onclick="app.toggleNotificationsDrawer(false)"><i class="fa-solid fa-xmark"></i></button> </div> <div class="filter-body" id="notifications-list-container"> <!-- Notifications Injected via JS --> </div> </div> </div> <!-- Admin Portal Dashboard Modal --> <div id="admin-modal" class="modal hide"> <div class="modal-backdrop" onclick="app.closeAdminModal()"></div> <div class="modal-dialog modal-lg" style="max-width: 1100px;"> <button class="modal-close-btn" onclick="app.closeAdminModal()"><i class="fa-solid fa-xmark"></i></button> <div class="admin-dashboard-container"> <div class="admin-header-bar"> <h2><i class="fa-solid fa-user-shield text-danger"></i> ระบบจัดการร้านค้า (BABYMONSTER Admin)</h2> <span class="badge badge-danger">ADMIN MODE</span> </div> <!-- Admin Navigation Tabs --> <div class="admin-tabs"> <button class="admin-tab-btn active" data-tab="overview" onclick="app.switchAdminTab('overview')"><i class="fa-solid fa-chart-line"></i> สรุปยอดขาย (Sales)</button> <button class="admin-tab-btn" data-tab="products" onclick="app.switchAdminTab('products')"><i class="fa-solid fa-box"></i> จัดการสินค้า (Products)</button> <button class="admin-tab-btn" data-tab="orders" onclick="app.switchAdminTab('orders')"><i class="fa-solid fa-truck-fast"></i> จัดการออเดอร์ (Orders)</button> <button class="admin-tab-btn" data-tab="coupons" onclick="app.switchAdminTab('coupons')"><i class="fa-solid fa-ticket"></i> โค้ดส่วนลด (Coupons)</button> </div> <!-- Admin Sales Overview Panel --> <div id="admin-overview-panel" class="admin-panel"> <div class="admin-stats-grid"> <div class="stat-card"> <i class="fa-solid fa-money-bill-trend-up"></i> <div> <span>ยอดขายรวมทั้งหมด</span> <h3 id="admin-stat-sales">฿48,900</h3> </div> </div> <div class="stat-card"> <i class="fa-solid fa-bag-shopping"></i> <div> <span>คำสั่งซื้อรวม</span> <h3 id="admin-stat-orders">18 รายการ</h3> </div> </div> <div class="stat-card"> <i class="fa-solid fa-users"></i> <div> <span>สมาชิกทั้งหมด</span> <h3>342 คน</h3> </div> </div> <div class="stat-card"> <i class="fa-solid fa-box-open"></i> <div> <span>สินค้าคงคลังรวม</span> <h3 id="admin-stat-stock">190 ชิ้น</h3> </div> </div> </div> </div> <!-- Admin Products Panel --> <div id="admin-products-panel" class="admin-panel hide"> <div class="admin-action-bar"> <h4>รายการสินค้าในระบบ</h4> <button class="btn btn-primary" onclick="app.openAddProductForm()"><i class="fa-solid fa-plus"></i> เพิ่มสินค้าใหม่</button> </div> <div class="admin-table-wrapper"> <table class="admin-table"> <thead> <tr> <th>รูป</th> <th>ชื่อสินค้า</th> <th>หมวดหมู่</th> <th>ราคา</th> <th>คงเหลือ</th> <th>การจัดการ</th> </tr> </thead> <tbody id="admin-products-tbody"> <!-- Injected JS --> </tbody> </table> </div> </div> <!-- Admin Orders Panel --> <div id="admin-orders-panel" class="admin-panel hide"> <h4>จัดการสถานะคำสั่งซื้อพัสดุ</h4> <div class="admin-table-wrapper"> <table class="admin-table"> <thead> <tr> <th>เลขคำสั่งซื้อ</th> <th>วันที่</th> <th>ลูกค้า</th> <th>ยอดชำระ</th> <th>สถานะปัจจุบัน</th> <th>อัปเดตสถานะ / เลขพัสดุ</th> </tr> </thead> <tbody id="admin-orders-tbody"> <!-- Injected JS --> </tbody> </table> </div> </div> <!-- Admin Coupons Panel --> <div id="admin-coupons-panel" class="admin-panel hide"> <h4>โค้ดส่วนลดและโปรโมชัน</h4> <div class="admin-table-wrapper"> <table class="admin-table"> <thead> <tr> <th>รหัสโค้ด</th> <th>ประเภทส่วนลด</th> <th>มูลค่า</th> <th>ขั้นต่ำ</th> <th>สถานะ</th> </tr> </thead> <tbody> <tr><td><strong>BMFIRST10</strong></td><td>ส่วนลด %</td><td>10%</td><td>฿500</td><td><span class="badge badge-primary">เปิดใช้งาน</span></td></tr> <tr><td><strong>MONSTIEZ200</strong></td><td>ส่วนลดเงินสด</td><td>฿200</td><td>฿1,500</td><td><span class="badge badge-primary">เปิดใช้งาน</span></td></tr> <tr><td><strong>FREESHIP</strong></td><td>ฟรีค่าส่ง</td><td>฿60</td><td>฿1,000</td><td><span class="badge badge-primary">เปิดใช้งาน</span></td></tr> </tbody> </table> </div> </div> </div> </div> </div> <!-- Product Add/Edit Form Modal --> <div id="admin-product-form-modal" class="modal hide"> <div class="modal-backdrop" onclick="document.getElementById('admin-product-form-modal').classList.add('hide')"></div> <div class="modal-dialog modal-md"> <button class="modal-close-btn" onclick="document.getElementById('admin-product-form-modal').classList.add('hide')"><i class="fa-solid fa-xmark"></i></button> <h3 class="modal-title" id="product-form-title"><i class="fa-solid fa-box"></i> เพิ่มสินค้าใหม่</h3> <form onsubmit="app.handleSaveProduct(event)" id="admin-product-form"> <input type="hidden" id="prod-form-id"> <div class="form-group"> <label>ชื่อสินค้า </label> <input type="text" id="prod-form-name" required placeholder="เช่น BABYMONSTER Stage Jacket"> </div> <div class="form-grid"> <div class="form-group"> <label>หมวดหมู่ </label> <select id="prod-form-cat" class="custom-select" required> <option value="hoodie">ฮู้ดดี้ (Hoodie)</option> <option value="tshirt">เสื้อยืด (T-Shirt)</option> <option value="jacket">แจ็กเก็ต (Jacket)</option> <option value="pants">กางเกง (Pants)</option> <option value="cap">หมวก (Cap)</option> <option value="bag">กระเป๋า (Bag)</option> <option value="accessory">เครื่องประดับ (Accessory)</option> </select> </div> <div class="form-group"> <label>ราคา (บาท) </label> <input type="number" id="prod-form-price" required placeholder="1290"> </div> </div> <div class="form-grid"> <div class="form-group"> <label>ราคาเดิม (บาท)</label> <input type="number" id="prod-form-orig-price" placeholder="1590"> </div> <div class="form-group"> <label>จำนวนในสต็อก </label> <input type="number" id="prod-form-stock" required placeholder="30"> </div> </div> <div class="form-group"> <label>URL รูปภาพสินค้า </label> <input type="url" id="prod-form-img" required placeholder="https://images.unsplash.com/..."> </div> <div class="form-group"> <label>รายละเอียดสินค้า</label> <textarea id="prod-form-desc" rows="3" placeholder="ระบุข้อมูลคุณลักษณะสินค้า"></textarea> </div> <button type="submit" class="btn btn-primary btn-block"><i class="fa-solid fa-floppy-disk"></i> บันทึกข้อมูลสินค้า</button> </form> </div> </div> <!-- Live Customer Chat Floating Widget --> <div id="chat-widget" class="chat-widget"> <button id="btn-toggle-chat" class="chat-trigger-btn"> <i class="fa-solid fa-comments"></i> <span class="chat-unread-dot"></span> </button> <div id="chat-box" class="chat-box hide"> <div class="chat-header"> <div class="chat-store-info"> <div class="admin-avatar"><i class="fa-solid fa-headset"></i></div> <div> <h4>BABYMONSTER Admin</h4> <small><span class="online-indicator"></span> ตอบกลับเร็วใน 1 นาที</small> </div> </div> <button onclick="app.toggleChat(false)" class="chat-close"><i class="fa-solid fa-xmark"></i></button> </div> <div class="chat-messages" id="chat-messages-container"> <div class="chat-msg system-msg"> <div class="msg-bubble"> สวัสดีค่ะ! ยินดีต้อนรับสู่ <strong>BABYMONSTER Fashion Shop</strong> 💕 <br>มีข้อสงสัยเกี่ยวกับสินค้า ไซส์เสื้อผ้า หรือการจัดส่ง สามารถสอบถามแอดมินได้เลยนะคะ! </div> </div> </div> <form class="chat-input-area" onsubmit="app.handleSendChatMessage(event)"> <input type="text" id="chat-input" placeholder="พิมพ์ข้อความที่นี่..." required> <button type="submit" class="btn-send-chat"><i class="fa-solid fa-paper-plane"></i></button> </form> </div> </div> <!-- Floating Quick TikTok Feed Trigger Button --> <button class="floating-tiktok-btn" id="btn-floating-tiktok" title="รับชมวิดีโอรีวิว TikTok"> <i class="fa-brands fa-tiktok"></i> <span>SHOP FEED</span> </button> <!-- Dynamic Toast Notification Box --> <div id="toast-container" class="toast-container"></div> <!-- Footer --> <footer class="main-footer"> <div class="container footer-grid"> <div class="footer-col"> <a href="#" class="brand-logo footer-logo"> <span class="logo-text-red">BABY</span><span class="logo-text-white">MONSTER</span> </a> <p class="footer-about"> ร้านค้าจำหน่ายสินค้าแฟชั่นและคอลเลกชันทางการ BABYMONSTER ลิขสิทธิ์แท้ ดีไซน์ทันสมัย โดดเด่น สไตล์ K-pop & Streetwear สั่งซื้อง่ายส่งไว ปลอดภัย 100% </p> <div class="footer-socials"> <a href="#" title="TikTok"><i class="fa-brands fa-tiktok"></i></a> <a href="#" title="Instagram"><i class="fa-brands fa-instagram"></i></a> <a href="#" title="YouTube"><i class="fa-brands fa-youtube"></i></a> <a href="#" title="Facebook"><i class="fa-brands fa-facebook-f"></i></a> <a href="#" title="X / Twitter"><i class="fa-brands fa-x-twitter"></i></a> </div> </div> <div class="footer-col"> <h4>หมวดหมู่สินค้า</h4> <ul> <li><a href="#" onclick="app.filterByCategory('hoodie'); return false;">ฮู้ดดี้ (Hoodies)</a></li> <li><a href="#" onclick="app.filterByCategory('tshirt'); return false;">เสื้อยืด (T-Shirts)</a></li> <li><a href="#" onclick="app.filterByCategory('jacket'); return false;">แจ็กเก็ต (Jackets)</a></li> <li><a href="#" onclick="app.filterByCategory('cap'); return false;">หมวก (Caps)</a></li> <li><a href="#" onclick="app.filterByCategory('accessory'); return false;">เครื่องประดับ (Accessories)</a></li> </ul> </div> <div class="footer-col"> <h4>ช่วยเหลือและบริการ</h4> <ul> <li><a href="#" onclick="app.openUserProfile('orders'); return false;">ติดตามสถานะพัสดุ</a></li> <li><a href="#" onclick="app.openChat(); return false;">สอบถามแอดมิน / ซัพพอร์ต</a></li> <li><a href="#">เงื่อนไขการรับประกันสินค้า</a></li> <li><a href="#">นโยบายความเป็นส่วนตัว</a></li> <li><a href="#">คำถามที่พบบ่อย (FAQ)</a></li> </ul> </div> <div class="footer-col"> <h4>รับข่าวสารและคูปองพิเศษ</h4> <p>ลงทะเบียนอีเมลเพื่อรับโค้ดส่วนลด 15% สำหรับคำสั่งซื้อแรก</p> <form class="newsletter-form" onsubmit="app.handleNewsletter(event)"> <input type="email" placeholder="ระบุอีเมลของคุณ" required> <button type="submit" class="btn btn-primary"><i class="fa-solid fa-paper-plane"></i></button> </form> <div class="payment-methods-icons"> <i class="fa-solid fa-qrcode" title="PromptPay"></i> <i class="fa-brands fa-cc-visa" title="Visa"></i> <i class="fa-brands fa-cc-mastercard" title="Mastercard"></i> <i class="fa-solid fa-truck-fast" title="COD"></i> </div> </div> </div> <div class="footer-bottom"> <div class="container footer-bottom-flex"> <p>© 2026 BABYMONSTER Fashion Shop. All Rights Reserved. Designed with <i class="fa-solid fa-heart text-danger"></i> for MONSTIEZ</p> <p class="dev-tag">Official Fan-centric E-Commerce Store</p> </div> </div> </footer> <!-- App Scripts --> <script src="js/data.js"></script> <script src="js/app.js"></script> </body> </html>

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