File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090003/portfolio/69319090003/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>ClothDee \| ร้านค้าเสื้อผ้าออนไลน์สไตล์คุณ</title> <meta name="description" content="ช้อปเสื้อผ้าแฟชั่นราคาพิเศษ สั่งซื้อง่าย ได้เสื้อผ้าหลากหลายไซส์ S - XXXL พร้อมบริการระดับพรีเมียม"> <!-- 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=Outfit:wght@300;400;500;600;700;800&family=Sarabun:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> <!-- Tabler Icons CSS CDN --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css"> <!-- Custom Style CSS --> <link rel="stylesheet" href="style.css"> </head> <body> <!-- Brand Header (Minimalist Closet Style) --> <header class="main-header"> <div class="header-container"> <!-- Brand Logo --> <a href="#" class="brand-logo" id="logoReload"> <div class="logo-text"> <span class="logo-main">วิทยาลัยเทคนิคเชียงใหม่</span> <span class="logo-sub">MINIMALIST CLOSET</span> </div> </a> <!-- Header Actions --> <div class="header-actions"> <!-- Theme Toggle --> <button class="theme-toggle-btn" id="themeToggleBtn" aria-label="Toggle Dark Mode"> <i class="ti ti-moon"></i> </button> <!-- Cart Trigger Icon --> <div class="cart-container" id="cartTrigger"> <div class="cart-icon-wrapper"> <i class="ti ti-shopping-bag"></i> <span class="cart-badge" id="cartCount">0</span> </div> <!-- Quick Mini-Cart Hover Dropdown --> <div class="cart-dropdown" id="cartDropdown"> <div class="dropdown-header">สินค้าที่เพิ่มเพิ่งล่าสุด</div> <div class="dropdown-items" id="dropdownCartItems"> <!-- Dynamic items --> <div class="empty-dropdown">ไม่มีสินค้าในตะกร้า</div> </div> <div class="dropdown-footer"> <span class="total-label">รวมทั้งหมด: <span class="total-price" id="dropdownTotal">฿0</span></span> <button class="btn-go-cart" id="btnGoCart">ดูตะกร้าสินค้า</button> </div> </div> </div> <!-- User Account Section (Auth state injects here) --> <div class="auth-status-container" id="authStatusContainer"> <button class="btn-login-outline" id="btnShowLogin">เข้าสู่ระบบ</button> <button class="btn-register-solid" id="btnShowRegister">สมัครสมาชิก</button> </div> </div> </div> </header> <!-- Main Content --> <main class="app-body"> <!-- Hero Banner Section --> <section class="hero-section"> <div class="hero-container"> <div class="hero-content"> <h1 class="hero-title">ระบบสั่งจองสินค้าล่วงหน้าออนไลน์</h1> </div> </div> </section> <div class="main-container" id="productSection"> <!-- Filter & Search Bar Area --> <div class="catalog-filters-bar"> <div class="search-box-minimalist"> <i class="ti ti-search search-icon"></i> <input type="text" id="searchInput" placeholder="ค้นหาเสื้อผ้าคอลเลคชัน..."> <button id="searchBtn" style="display:none;"></button> </div> <div class="category-tabs-minimalist" id="categoryMenu"> <button class="btn-tab active" data-category="all">ทั้งหมด</button> <button class="btn-tab" data-category="tshirt">เสื้อยืด</button> <button class="btn-tab" data-category="shirt">เสื้อเชิ้ต</button> <button class="btn-tab" data-category="jacket">แจ็คเก็ต</button> <button class="btn-tab" data-category="hoodie">เสื้อฮู้ด</button> </div> <!-- Sizing filter quick filter --> <div class="size-filter-minimalist" id="sizeFilterGrid"> <span class="filter-label">ไซส์:</span> <button class="btn-size-tab" data-size="S">S</button> <button class="btn-size-tab" data-size="M">M</button> <button class="btn-size-tab" data-size="L">L</button> <button class="btn-size-tab" data-size="XL">XL</button> <button class="btn-size-tab" data-size="XXL">XXL</button> <button class="btn-size-tab" data-size="XXXL">XXXL</button> </div> </div> <!-- Store Layout Section (Full-width grid) --> <div class="store-grid-full"> <!-- Products Display Shelf --> <section class="products-shelf"> <div class="shelf-header"> <div class="shelf-title-group"> <h2 class="shelf-title">OUR COLLECTION</h2> <p class="shelf-subtitle">รายการสินค้าทั้งหมด</p> </div> <div class="shelf-controls"> </div> </div> <!-- Products Grid --> <div class="products-grid-container" id="productsGridContainer"> <!-- Dynamic Clothing Cards inject here --> </div> <div class="no-products-found hidden" id="noProductsFound"> <i class="ti ti-mood-empty"></i> <p>ไม่พบสินค้าที่คุณกำลังมองหา ลองเปลี่ยนตัวค้นหาดูนะ</p> </div> </section> </div> </div> </main> <!-- FOOTER --> <footer class="footer"> <div class="footer-top"> <div class="footer-col"> <h4>บริการลูกค้า</h4> <a href="#">ศูนย์ช่วยเหลือ</a> <a href="#">ช่องทางการชำระเงิน</a> <a href="#">การสั่งซื้อสินค้าและคืนเงิน</a> </div> <div class="footer-col"> <h4>เกี่ยวกับ ClothDee</h4> <a href="#">เกี่ยวกับเรา</a> <a href="#">ร่วมงานกับเรา</a> <a href="#">นโยบายความเป็นส่วนตัว</a> </div> <div class="footer-col"> <h4>พันธมิตรจัดส่งสินค้า</h4> <div class="shipping-icons"> <span class="ship-badge"><i class="ti ti-truck-delivery"></i> Kerry Express</span> <span class="ship-badge"><i class="ti ti-truck"></i> Flash Express</span> </div> </div> </div> <div class="footer-bottom"> <p>© 2026 ClothDee E-Commerce Co., Ltd. All Rights Reserved. (Inspired by Shopee UI)</p> </div> </footer> <!-- ==================== MODALS ==================== --> <!-- 1. LOGIN MODAL --> <div class="modal-overlay" id="loginModal"> <div class="modal-card auth-modal"> <button class="modal-close" data-modal="loginModal"><i class="ti ti-x"></i></button> <div class="modal-header"> <h2>เข้าสู่ระบบผู้ขาย</h2> <p>ลงลงชื่อเข้าใช้เพื่อทำการลงขายสินค้าหรือจัดการสินค้าของคุณ</p> </div> <form id="loginForm" class="auth-form"> <div class="form-group"> <label for="loginUsername">ชื่อผู้ใช้ (Username)</label> <div class="input-wrapper"> <i class="ti ti-user input-icon"></i> <input type="text" id="loginUsername" placeholder="ระบุชื่อผู้ใช้ (แอดมินใช้: admin)" required autocomplete="username"> </div> </div> <div class="form-group"> <label for="loginPassword">รหัสผ่าน (Password)</label> <div class="input-wrapper"> <i class="ti ti-lock input-icon"></i> <input type="password" id="loginPassword" placeholder="ระบุรหัสผ่าน (แอดมินใช้: 123456)" required autocomplete="current-password"> </div> </div> <div class="admin-hint-alert"> <i class="ti ti-info-circle"></i> บัญชีแอดมินทดสอบ: <strong>admin</strong> / รหัสผ่าน: <strong>123456</strong> </div> <button type="submit" class="btn-submit-form">เข้าสู่ระบบ</button> </form> <div class="modal-footer"> <span>ยังไม่มีบัญชีร้านค้า? <button class="btn-switch-auth" id="switchToRegister">สมัครสมาชิกใหม่</button></span> </div> </div> </div> <!-- 2. REGISTER MODAL --> <div class="modal-overlay" id="registerModal"> <div class="modal-card auth-modal"> <button class="modal-close" data-modal="registerModal"><i class="ti ti-x"></i></button> <div class="modal-header"> <h2>สมัครสมาชิกผู้ขาย</h2> <p>สร้างบัญชีร้านค้าเสื้อผ้าของคุณเพื่อลงขายเสื้อผ้าและจัดการสต็อก</p> </div> <form id="registerForm" class="auth-form"> <div class="form-group"> <label for="regUsername">ชื่อผู้ใช้ (Username)</label> <div class="input-wrapper"> <i class="ti ti-user input-icon"></i> <input type="text" id="regUsername" placeholder="ตัวอักษรภาษาอังกฤษหรือตัวเลข" required autocomplete="username"> </div> </div> <div class="form-group"> <label for="regPassword">รหัสผ่าน (Password)</label> <div class="input-wrapper"> <i class="ti ti-lock input-icon"></i> <input type="password" id="regPassword" placeholder="ความยาว 4 ตัวอักษรขึ้นไป" required autocomplete="new-password"> </div> </div> <button type="submit" class="btn-submit-form btn-reg-submit">สร้างบัญชีผู้ขาย</button> </form> <div class="modal-footer"> <span>มีบัญชีผู้ขายแล้ว? <button class="btn-switch-auth" id="switchToLogin">เข้าสู่ระบบ</button></span> </div> </div> </div> <!-- 3. ADD PRODUCT MODAL --> <div class="modal-overlay" id="addProductModal"> <div class="modal-card product-upload-modal"> <button class="modal-close" data-modal="addProductModal"><i class="ti ti-x"></i></button> <div class="modal-header"> <h2><i class="ti ti-shirt"></i> ลงรูปและรายละเอียดสินค้าใหม่</h2> <p>ระบุรายละเอียดข้อมูลเสื้อผ้าของคุณให้ครบถ้วนเพื่อให้ดึงดูดลูกค้า</p> </div> <form id="addProductForm" class="product-form"> <div class="form-grid"> <!-- Left Inputs --> <div class="form-left-col"> <div class="form-group"> <label for="prodName">ชื่อสินค้าเสื้อผ้า <span class="required"></span></label> <input type="text" id="prodName" placeholder="เช่น เสื้อยืดทรง Oversize ลายมินิมอล" required> </div> <div class="form-row"> <div class="form-group"> <label for="prodPrice">ราคาสินค้า (บาท) <span class="required"></span></label> <input type="number" id="prodPrice" placeholder="เช่น 290" min="1" required> </div> <div class="form-group"> <label for="prodCategory">ประเภทสินค้าเสื้อผ้า <span class="required"></span></label> <select id="prodCategory" required> <option value="" disabled selected>เลือกประเภท...</option> <option value="tshirt">เสื้อยืด (T-Shirt)</option> <option value="shirt">เสื้อเชิ้ต (Shirt)</option> <option value="jacket">แจ็คเก็ต & เสื้อคลุม</option> <option value="hoodie">เสื้อฮู้ด & สเวตเตอร์</option> </select> </div> </div> <div class="form-group"> <label>ไซส์เสื้อที่จัดจำหน่าย <span class="required"> (เลือกได้อย่างน้อย 1 ไซส์)</span></label> <div class="size-checkbox-grid"> <label class="size-checkbox-item"> <input type="checkbox" name="prodSizes" value="S" checked> <span class="chk-box-btn">S</span> </label> <label class="size-checkbox-item"> <input type="checkbox" name="prodSizes" value="M" checked> <span class="chk-box-btn">M</span> </label> <label class="size-checkbox-item"> <input type="checkbox" name="prodSizes" value="L" checked> <span class="chk-box-btn">L</span> </label> <label class="size-checkbox-item"> <input type="checkbox" name="prodSizes" value="XL"> <span class="chk-box-btn">XL</span> </label> <label class="size-checkbox-item"> <input type="checkbox" name="prodSizes" value="XXL"> <span class="chk-box-btn">XXL</span> </label> <label class="size-checkbox-item"> <input type="checkbox" name="prodSizes" value="XXXL"> <span class="chk-box-btn">XXXL</span> </label> </div> </div> <div class="form-group"> <label for="prodDesc">รายละเอียดเสื้อผ้าสินค้า <span class="required"></span></label> <textarea id="prodDesc" placeholder="อธิบายวัสดุที่ใช้, ไซส์ความยาวอก-ยาวเสื้อ, คำแนะนำการซักเสื้อผ้า..." rows="4" required></textarea> </div> </div> <!-- Right Upload Area --> <div class="form-right-col"> <label>รูปภาพตัวอย่างสินค้าเสื้อผ้า <span class="required"></span></label> <div class="image-uploader-wrapper" id="imageUploaderWrapper"> <input type="file" id="prodImageFile" accept="image/*" class="file-hidden-input" required> <div class="uploader-placeholder" id="uploaderPlaceholder"> <i class="ti ti-photo-up"></i> <span class="upload-title">เลือกรูปเสื้อผ้าของคุณ</span> <span class="upload-note">รองรับไฟล์ JPG, PNG, GIF</span> </div> <img id="uploadPreviewImage" class="upload-preview-img hidden" src="" alt="preview"> <button type="button" class="btn-remove-preview hidden" id="btnRemovePreviewImage"><i class="ti ti-trash"></i> เอาออก</button> </div> </div> </div> <div class="form-footer-actions"> <button type="button" class="btn-cancel" data-modal="addProductModal">ยกเลิก</button> <button type="submit" class="btn-confirm-add">บันทึกและขึ้นขายสินค้า</button> </div> </form> </div> </div> <!-- 4. PRODUCT DETAIL MODAL (Quick View) --> <div class="modal-overlay" id="productDetailModal"> <div class="modal-card product-detail-modal"> <button class="modal-close" data-modal="productDetailModal"><i class="ti ti-x"></i></button> <div class="detail-modal-grid"> <div class="detail-image-box"> <img id="detailModalImg" src="" alt="Product Large View"> </div> <div class="detail-info-box"> <span class="detail-category" id="detailModalCategory">หมวดหมู่</span> <h2 class="detail-title" id="detailModalTitle">ชื่อสินค้าเสื้อผ้าแฟชั่น</h2> <div class="detail-seller-badge"> <i class="ti ti-user"></i> ผู้ลงขาย: <span id="detailModalSeller" class="seller-name">admin</span> </div> <div class="detail-price-tag"> <span class="currency">฿</span><span class="price-val" id="detailModalPrice">0</span> </div> <div class="detail-divider"></div> <p class="detail-desc" id="detailModalDesc"> คำอธิบายรายละเอียดสิ้นค้า </p> <div class="detail-divider"></div> <!-- Size Selection --> <div class="detail-section-group"> <label class="section-label">ไซส์เสื้อที่มีให้เลือก:</label> <div class="detail-size-options" id="detailModalSizeOptions"> <!-- Dynamic Size pills injected here --> </div> </div> <!-- Action Button --> <div class="detail-actions"> <button class="btn-add-to-cart-action" id="btnDetailModalAddToCart"> <i class="ti ti-shopping-cart-plus"></i> เพิ่มเข้าตะกร้าสินค้า </button> </div> </div> </div> </div> </div> <!-- 5. CART MODAL (Drawer / Panel) --> <div class="modal-overlay" id="cartModal"> <div class="modal-card cart-checkout-modal"> <button class="modal-close" data-modal="cartModal"><i class="ti ti-x"></i></button> <div class="modal-header"> <h2><i class="ti ti-shopping-cart"></i> ตะกร้าสินค้าของคุณ</h2> <p>ตรวจสอบความถูกต้องของรายการไซส์และจำนวนสินค้าก่อนชำระเงิน</p> </div> <div class="cart-items-container" id="cartItemsList"> <!-- Cart items inject dynamically --> </div> <div class="cart-summary-section"> <div class="sum-row"> <span>จำนวนสินค้าในตะกร้าทั้งหมด:</span> <span class="sum-val" id="cartTotalItemsCount">0 ชิ้น</span> </div> <div class="sum-row total-row"> <span>ราคารวมสินค้าทั้งหมด:</span> <span class="sum-val total-price" id="cartGrandTotal">฿0</span> </div> </div> <div class="cart-modal-footer"> <button class="btn-continue-shopping" data-modal="cartModal">ช้อปเสื้อผ้าต่อ</button> <button class="btn-checkout-order" id="btnCheckoutSubmit">ดำเนินการสั่งซื้อสินค้า</button> </div> </div> </div> <!-- Toast Notifications Toast Area --> <div class="toast-notification-box" id="toastBox"></div> <!-- JS script --> <script src="script.js"></script> </body> </html>

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