Spaces:

puwanath
/

anycoder-adadf141

Running

App Files Files Community

puwanath commited on Feb 14

Commit

b0b757e

verified ·

1 Parent(s): 759b890

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +483 -696

index.html CHANGED Viewed

@@ -1,377 +1,236 @@
 <!DOCTYPE html>
 <html lang="th">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Smart POS - Modern Store</title>
-    <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;600;800&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 {
-            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --primary-color: #667eea;
-            --secondary-color: #764ba2;
-            --accent-color: #20e3b2;
-            --danger-color: #ff4757;
-            --bg-color: #f0f2f5;
-            --card-bg: rgba(255, 255, 255, 0.95);
-            --text-dark: #2d3436;
-            --text-light: #636e72;
-            --shadow: 0 10px 30px rgba(0,0,0,0.1);
-            --radius: 16px;
         }
         * {
             box-sizing: border-box;
             margin: 0;
             padding: 0;
-            font-family: 'Kanit', sans-serif;
         }
         body {
             background-color: var(--bg-color);
-            background-image:
-                radial-gradient(circle at 10% 20%, rgba(102, 126, 234, 0.1) 0%, transparent 20%),
-                radial-gradient(circle at 90% 80%, rgba(118, 75, 162, 0.1) 0%, transparent 20%);
-            color: var(--text-dark);
             height: 100vh;
             display: flex;
             flex-direction: column;
-            overflow: hidden;
         }
-        /* --- Header --- */
         header {
-            background: var(--card-bg);
             padding: 1rem 2rem;
             display: flex;
             justify-content: space-between;
             align-items: center;
-            box-shadow: 0 4px 20px rgba(0,0,0,0.05);
-            z-index: 100;
-            backdrop-filter: blur(10px);
         }
         .brand {
             display: flex;
             align-items: center;
-            gap: 15px;
-            font-size: 1.8rem;
-            font-weight: 800;
             color: var(--primary-color);
-            letter-spacing: 1px;
-        }
-        .brand i { color: var(--secondary-color); }
-        .header-info {
-            display: flex;
-            align-items: center;
-            gap: 25px;
-        }
-        .user-badge {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            background: #f8f9fa;
-            padding: 8px 16px;
-            border-radius: 50px;
-            color: var(--text-light);
-            font-weight: 600;
-            border: 1px solid #e9ecef;
-        }
-        .user-avatar {
-            width: 35px;
-            height: 35px;
-            border-radius: 50%;
-            background: var(--primary-gradient);
-            color: white;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 1.2rem;
         }
-        .btn-logout {
-            background: var(--danger-color);
-            color: white;
             border: none;
-            padding: 10px 20px;
-            border-radius: 50px;
             cursor: pointer;
-            font-weight: 600;
-            transition: all 0.3s ease;
-            box-shadow: 0 4px 15px rgba(255, 71, 87, 0.3);
         }
-        .btn-logout:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 6px 20px rgba(255, 71, 87, 0.4);
         }
-        /* --- Main Layout --- */
         main {
-            display: grid;
-            grid-template-columns: 280px 1fr 380px;
             flex: 1;
             overflow: hidden;
             gap: 20px;
             padding: 20px;
         }
-        /* Left Panel: Categories */
-        .categories-panel {
-            background: var(--card-bg);
-            border-radius: var(--radius);
-            padding: 20px;
-            box-shadow: var(--shadow);
             display: flex;
             flex-direction: column;
-            overflow-y: auto;
-            height: 100%;
-            border-top: 4px solid var(--primary-color);
-        }
-        .panel-title {
-            font-size: 1.4rem;
-            font-weight: 800;
-            margin-bottom: 20px;
-            color: var(--text-dark);
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-        .category-list {
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-        }
-        .cat-btn {
-            padding: 15px;
-            text-align: left;
-            background: white;
-            border: 2px solid #e0e0e0;
-            border-radius: 12px;
-            cursor: pointer;
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            display: flex;
-            align-items: center;
             gap: 15px;
-            font-size: 1.1rem;
-            color: var(--text-light);
-            font-weight: 600;
-        }
-        .cat-btn:hover {
-            border-color: var(--primary-color);
-            background: #f8f9ff;
-            transform: translateX(5px);
-        }
-        .cat-btn.active {
-            background: var(--primary-gradient);
-            color: white;
-            border-color: var(--primary-color);
-            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
-        }
-        .cat-btn i { font-size: 1.4rem; width: 30px; text-align: center; }
-        /* Center Panel: Products */
-        .products-panel {
-            background: #f8f9fa;
-            border-radius: var(--radius);
-            padding: 25px;
-            box-shadow: var(--shadow);
-            display: flex;
-            flex-direction: column;
-            overflow: hidden;
         }
         .search-container {
             position: relative;
-            margin-bottom: 25px;
         }
         .search-input {
             width: 100%;
-            padding: 15px 20px 15px 55px;
-            border-radius: 50px;
-            border: none;
-            background: white;
-            font-size: 1.1rem;
-            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
-            transition: all 0.3s;
-            outline: none;
         }
         .search-input:focus {
-            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2);
-            transform: scale(1.01);
         }
         .search-icon {
             position: absolute;
-            left: 20px;
             top: 50%;
             transform: translateY(-50%);
-            color: var(--primary-color);
-            font-size: 1.3rem;
         }
-        .products-grid {
             display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-            gap: 25px;
-            overflow-y: auto;
-            padding-right: 5px;
-            height: 100%;
             padding-bottom: 20px;
         }
         .product-card {
-            background: white;
-            border-radius: 20px;
-            padding: 20px;
-            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
             cursor: pointer;
             position: relative;
-            overflow: hidden;
         }
         .product-card:hover {
-            transform: translateY(-10px);
-            box-shadow: 0 15px 30px rgba(102, 126, 234, 0.2);
-        }
-        .product-img-container {
-            width: 100%;
-            height: 140px;
-            border-radius: 15px;
-            overflow: hidden;
-            margin-bottom: 15px;
-            background: #f0f0f0;
-            position: relative;
         }
         .product-img {
             width: 100%;
-            height: 100%;
             object-fit: cover;
-            transition: transform 0.5s ease;
         }
-        .product-card:hover .product-img {
-            transform: scale(1.1);
         }
         .product-name {
-            font-weight: 700;
-            font-size: 1.2rem;
-            margin-bottom: 8px;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-        .product-footer {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-top: auto;
         }
         .product-price {
             color: var(--primary-color);
-            font-size: 1.4rem;
-            font-weight: 800;
         }
         .add-btn {
-            background: var(--primary-gradient);
             color: white;
-            width: 35px;
-            height: 35px;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: 0.2s;
-            box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3);
         }
         .add-btn:hover {
-            transform: scale(1.1);
-            box-shadow: 0 6px 15px rgba(102, 126, 234, 0.4);
         }
-        /* Right Panel: Cart */
-        .cart-panel {
-            background: white;
             border-radius: var(--radius);
-            box-shadow: var(--shadow);
             display: flex;
             flex-direction: column;
             overflow: hidden;
-            border: 1px solid #e0e0e0;
         }
         .cart-header {
             padding: 20px;
-            background: var(--primary-gradient);
-            color: white;
             display: flex;
             justify-content: space-between;
             align-items: center;
         }
-        .cart-title h2 {
-            font-size: 1.5rem;
-            margin-bottom: 5px;
-        }
-        .cart-count-badge {
-            background: rgba(255,255,255,0.2);
-            padding: 5px 12px;
-            border-radius: 20px;
-            font-weight: 800;
-            font-size: 1rem;
         }
         .cart-items {
             flex: 1;
             overflow-y: auto;
-            padding: 20px;
-            background: #fafafa;
-        }
-        .cart-items-empty {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            height: 100%;
-            color: var(--text-light);
-            opacity: 0.6;
         }
         .cart-item {
-            background: white;
-            padding: 15px;
-            border-radius: 12px;
-            margin-bottom: 15px;
             display: flex;
             align-items: center;
-            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
             animation: slideIn 0.3s ease;
         }
@@ -380,642 +239,570 @@
             to { opacity: 1; transform: translateX(0); }
         }
-        .cart-item-img {
-            width: 60px;
-            height: 60px;
-            border-radius: 10px;
-            object-fit: cover;
-            margin-right: 15px;
-        }
-        .cart-item-details {
             flex: 1;
         }
         .cart-item-name {
-            font-weight: 700;
-            font-size: 1.1rem;
-            margin-bottom: 5px;
         }
         .cart-item-price {
-            color: var(--primary-color);
-            font-weight: 600;
         }
-        .cart-actions {
             display: flex;
             align-items: center;
             gap: 10px;
-            background: #f0f2f5;
-            padding: 5px;
-            border-radius: 10px;
         }
         .qty-btn {
             width: 28px;
             height: 28px;
-            border: none;
             background: white;
-            border-radius: 6px;
             cursor: pointer;
-            color: var(--text-light);
-            font-weight: 700;
-            transition: 0.2s;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
         }
-        .qty-btn:hover { color: var(--primary-color); }
-        .qty-btn.minus:hover { color: var(--danger-color); }
         .cart-footer {
-            padding: 25px;
-            background: #f9fafb;
-            border-top: 1px solid #e0e0e0;
         }
         .summary-row {
             display: flex;
             justify-content: space-between;
-            margin-bottom: 12px;
-            font-size: 1.1rem;
-            color: var(--text-light);
         }
         .summary-row.total {
-            font-size: 1.8rem;
-            font-weight: 800;
-            color: var(--text-dark);
-            border-top: 2px dashed #dfe6e9;
-            padding-top: 20px;
-            margin-top: 10px;
-        }
-        .action-buttons {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 15px;
-            margin-top: 20px;
         }
-        .btn {
-            padding: 16px;
-            border-radius: 12px;
             font-size: 1.1rem;
-            font-weight: 700;
             cursor: pointer;
-            transition: all 0.3s ease;
             display: flex;
-            align-items: center;
             justify-content: center;
             gap: 10px;
-            border: none;
-            font-family: 'Kanit', sans-serif;
         }
-        .btn-clear {
-            background: #f1f2f6;
-            color: var(--text-light);
         }
-        .btn-clear:hover { background: #dfe6e9; }
-        .btn-checkout {
-            background: var(--primary-gradient);
-            color: white;
-            box-shadow: 0 10px 20px rgba(102, 126, 234, 0.4);
-            font-size: 1.3rem;
-            padding: 18px;
-        }
-        .btn-checkout:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 15px 25px rgba(102, 126, 234, 0.5);
         }
-        /* --- Modal (Receipt) --- */
         .modal-overlay {
             position: fixed;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(5px);
-            z-index: 1000;
             display: flex;
             justify-content: center;
             align-items: center;
             opacity: 0;
-            pointer-events: none;
-            transition: opacity 0.3s ease;
         }
         .modal-overlay.active {
             opacity: 1;
-            pointer-events: all;
         }
         .modal {
             background: white;
             width: 90%;
-            max-width: 500px;
-            border-radius: 20px;
-            padding: 40px;
-            box-shadow: 0 25px 50px rgba(0,0,0,0.25);
             text-align: center;
-            transform: scale(0.8);
-            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
         }
         .modal-overlay.active .modal {
             transform: scale(1);
         }
-        .receipt-paper {
-            background: #f8f9fa;
-            padding: 30px;
-            border-radius: 10px;
-            margin: 30px 0;
-            border: 2px dashed #dfe6e9;
-            position: relative;
         }
-        .receipt-paper::before {
-            content: "Receipt";
-            position: absolute;
-            top: -15px;
-            left: 50%;
-            transform: translateX(-50%);
-            background: white;
-            padding: 0 10px;
-            color: var(--text-light);
-            font-weight: 700;
-            font-size: 0.9rem;
         }
-        .receipt-header h3 {
-            color: var(--primary-color);
-            font-size: 2rem;
-            margin-bottom: 5px;
-        }
-        .receipt-meta {
-            color: var(--text-light);
-            font-size: 0.9rem;
             margin-bottom: 20px;
-            border-bottom: 1px solid #e0e0e0;
-            padding-bottom: 15px;
         }
-        .receipt-item-row {
             display: flex;
-            justify-content: space-between;
-            margin-bottom: 10px;
-            font-size: 1.1rem;
-            color: var(--text-dark);
         }
-        .receipt-item-sub {
-            font-size: 0.9rem;
-            color: var(--text-light);
         }
-        .receipt-total-row {
-            display: flex;
-            justify-content: space-between;
-            font-size: 1.5rem;
-            font-weight: 800;
-            color: var(--primary-color);
-            margin-top: 20px;
-            padding-top: 15px;
-            border-top: 2px solid #dfe6e9;
         }
-        .modal-actions {
-            display: flex;
-            gap: 15px;
-            margin-top: 30px;
         }
-        /* Responsive Design */
-        @media (max-width: 1024px) {
-            main { grid-template-columns: 250px 1fr 350px; }
         }
         @media (max-width: 768px) {
             main {
-                grid-template-columns: 1fr;
-                grid-template-rows: auto auto 1fr 250px;
-                overflow-y: auto;
                 padding: 10px;
             }
-            .categories-panel { order: 1; }
-            .products-panel { order: 2; min-height: 500px; }
-            .cart-panel { order: 3; }
-            .brand span { display: none; }
-            .header-info { display: none; }
-        }
-        @media (max-width: 480px) {
-            .products-grid { grid-template-columns: repeat(2, 1fr); }
-            .brand { font-size: 1.4rem; }
-            .cart-footer { padding: 15px; }
-            .btn-checkout { font-size: 1rem; }
-        }
-        /* Print Styles */
-        @media print {
-            body * { visibility: hidden; }
-            #receiptContent, #receiptContent * { visibility: visible; }
-            #receiptContent {
-                position: absolute;
-                left: 0;
-                top: 0;
-                width: 100%;
-                background: white;
-                box-shadow: none;
-                border: none;
             }
-            .no-print { display: none !important; }
         }
     </style>
 </head>
 <body>
     <!-- Header -->
-    <header class="no-print">
         <div class="brand">
             <i class="fa-solid fa-cash-register"></i>
-            <span>Smart<span style="color:var(--secondary-color)">POS</span></span>
         </div>
-        <div class="header-info">
-            <div class="user-badge">
-                <div class="user-avatar"><i class="fa-solid fa-user"></i></div>
-                <div>
-                    <div style="font-size: 0.8rem; opacity: 0.8;">พนักงาน</div>
-                    <div style="font-weight: 700;">ปกรณ์ ปกรณ์</div>
-                </div>
-            </div>
-            <button class="btn-logout" onclick="logout()">
-                <i class="fa-solid fa-right-from-bracket"></i> ออกจากระบบ
             </button>
         </div>
     </header>
     <!-- Main Content -->
     <main>
-        <!-- Left: Categories -->
-        <aside class="categories-panel no-print">
-            <div class="panel-title">
-                <i class="fa-solid fa-list-ul"></i> หมวดหมู่สินค้า
-            </div>
-            <div class="category-list" id="categoryList">
-                <!-- Categories injected by JS -->
-            </div>
-        </aside>
-        <!-- Center: Products -->
-        <section class="products-panel no-print">
             <div class="search-container">
-                <i class="fa-solid fa-search search-icon"></i>
-                <input type="text" id="searchInput" class="search-input" placeholder="ค้นหาสินค้า (เช่น กาแฟ, พิซซ่า)...">
             </div>
-            <div class="products-grid" id="productsGrid">
-                <!-- Products injected by JS -->
             </div>
         </section>
-        <!-- Right: Cart -->
-        <aside class="cart-panel no-print">
             <div class="cart-header">
-                <div class="cart-title">
-                    <h2>ตะกร้าสินค้า</h2>
-                    <span style="font-size: 0.9rem; opacity: 0.9;">เลือกสินค้าเพื่อชำระเงิน</span>
-                </div>
-                <div class="cart-count-badge" id="cartCount">0 ชิ้น</div>
             </div>
-            <div class="cart-items" id="cartItems">
-                <!-- Cart Items injected by JS -->
-                <div class="cart-items-empty">
-                    <i class="fa-solid fa-shopping-cart" style="font-size: 4rem; margin-bottom: 20px; opacity: 0.3;"></i>
                     <p>ยังไม่มีสินค้าในตะกร้า</p>
                 </div>
             </div>
             <div class="cart-footer">
                 <div class="summary-row">
-                    <span><i class="fa-solid fa-calculator"></i> จำนวนชิ้น</span>
-                    <span id="summaryQty" style="font-weight: 700;">0</span>
                 </div>
                 <div class="summary-row">
-                    <span><i class="fa-solid fa-percentage"></i> ส่วนลด</span>
-                    <span style="color: var(--accent-color);">0.00 บาท</span>
                 </div>
                 <div class="summary-row total">
-                    <span>รวมทั้งสิ้น</span>
-                    <span id="summaryTotal">0.00 บาท</span>
-                </div>
-                <div class="action-buttons">
-                    <button class="btn btn-clear" onclick="clearCart()">
-                        <i class="fa-solid fa-rotate-left"></i> ยกเลิก
-                    </button>
-                    <button class="btn btn-checkout" onclick="checkout()">
-                        <i class="fa-solid fa-credit-card"></i> ชำระเงิน
-                    </button>
                 </div>
             </div>
-        </aside>
     </main>
-    <!-- Checkout Modal -->
-    <div class="modal-overlay" id="checkoutModal">
         <div class="modal">
-            <i class="fa-solid fa-check-circle" style="font-size: 4rem; color: var(--accent-color); margin-bottom: 20px;"></i>
-            <h2 style="color: var(--text-dark); margin-bottom: 10px;">ชำระเงินสำเร็จ!</h2>
-            <p style="color: var(--text-light);">ขอบคุณที่ใช้บริการ Smart POS</p>
-            <div class="receipt-paper" id="receiptContent">
-                <div class="receipt-header">
-                    <h3>Smart POS</h3>
-                    <p>123 ถนนสุขุมวิท แขวงคลองตัน</p>
-                    <p>เขตคลองเต็ง กรุงเทพฯ 10110</p>
-                    <p style="font-size: 0.8rem; color: #999;">Tel: 02-123-4567</p>
-                </div>
-                <div class="receipt-meta">
-                    <div id="receiptDate">วันที่: -</div>
-                    <div id="receiptTime">เวลา: -</div>
-                    <div id="receiptCashier">Cashier: ปกรณ์ ปกรณ์</div>
-                </div>
-                <div id="receiptItemsContainer">
-                    <!-- Items injected here -->
-                </div>
-                <div class="receipt-total-row">
-                    <span>ยอดรวมสุทธิ</span>
-                    <span id="receiptTotalAmount">0.00 บาท</span>
-                </div>
             </div>
             <div class="modal-actions">
-                <button class="btn btn-clear" onclick="closeModal()">
-                    <i class="fa-solid fa-print"></i> พิมพ์ใบเสร็จ
-                </button>
-                <button class="btn btn-checkout" onclick="resetAndClose()">
-                    <i class="fa-solid fa-cart-shopping"></i> ทำรายการต่อไป
-                </button>
             </div>
         </div>
     </div>
-    <script>
-        // --- Data & State ---
-        const categories = [
-            { id: 'all', name: 'ทั้งหมด', icon: 'fa-layer-group' },
-            { id: 'beverage', name: 'เครื่องดื่ม', icon: 'fa-mug-hot' },
-            { id: 'snack', name: 'ของว่าง', icon: 'fa-cookie-bite' },
-            { id: 'meal', name: 'มื้อหลัก', icon: 'fa-utensils' },
-            { id: 'dessert', name: 'ของหวาน', icon: 'fa-ice-cream' }
-        ];
         const products = [
-            { id: 1, name: 'กาแฟดำ', price: 45, category: 'beverage', img: 'https://placehold.co/300x200/3e2723/FFF?text=Black+Coffee&font=roboto' },
-            { id: 2, name: 'ชาเขียว', price: 55, category: 'beverage', img: 'https://placehold.co/300x200/1b5e20/FFF?text=Green+Tea&font=roboto' },
-            { id: 3, name: 'น้ำส้มคั้นสด', price: 60, category: 'beverage', img: 'https://placehold.co/300x200/e65100/FFF?text=Orange+Juice&font=roboto' },
-            { id: 4, name: 'โซดาสตรอว์เบอร์รี่', price: 40, category: 'beverage', img: 'https://placehold.co/300x200/f44336/FFF?text=Strawberry+Soda&font=roboto' },
-            { id: 5, name: 'พิซซ่าเนื้อสับ', price: 199, category: 'meal', img: 'https://placehold.co/300x200/d32f2f/FFF?text=Pizza&font=roboto' },
-            { id: 6, name: 'ข้าวหมูแดง', price: 85, category: 'meal', img: 'https://placehold.co/300x200/b71c1c/FFF?text=Pork+Rice&font=roboto' },
-            { id: 7, name: 'สปาเกตตี้มิลล์', price: 150, category: 'meal', img: 'https://placehold.co/300x200/ff6f00/FFF?text=Pasta&font=roboto' },
-            { id: 8, name: 'ไก่ทอดกรอบ', price: 120, category: 'meal', img: 'https://placehold.co/300x200/fbc02d/FFF?text=Fried+Chicken&font=roboto' },
-            { id: 9, name: 'เค้กช็อกโกแลต', price: 95, category: 'dessert', img: 'https://placehold.co/300x200/3e2723/FFF?text=Chocolate+Cake&font=roboto' },
-            { id: 10, name: 'ไอศครีมวานิลลา', price: 50, category: 'dessert', img: 'https://placehold.co/300x200/9e9e9e/FFF?text=Vanilla+IceCream&font=roboto' },
-            { id: 11, name: 'คุกกี้ช็อกชิป', price: 45, category: 'snack', img: 'https://placehold.co/300x200/5d4037/FFF?text=Chips+Cookie&font=roboto' },
-            { id: 12, name: 'มันฝรั่งทอด', price: 40, category: 'snack', img: 'https://placehold.co/300x200/fbc02d/FFF?text=Chips&font=roboto' }
         ];
         let cart = [];
-        let currentCategory = 'all';
-        let searchQuery = '';
-        // --- DOM Elements ---
-        const productsGrid = document.getElementById('productsGrid');
-        const categoryList = document.getElementById('categoryList');
-        const cartItems = document.getElementById('cartItems');
-        const cartCount = document.getElementById('cartCount');
-        const summaryQty = document.getElementById('summaryQty');
-        const summaryTotal = document.getElementById('summaryTotal');
-        const searchInput = document.getElementById('searchInput');
-        const checkoutModal = document.getElementById('checkoutModal');
-        const receiptContent = document.getElementById('receiptContent');
-        // --- Initialization ---
-        function init() {
-            renderCategories();
-            renderProducts();
-            updateCartUI();
-        }
         // --- Render Functions ---
-        function renderCategories() {
-            categoryList.innerHTML = categories.map(cat => `
-                <button class="cat-btn ${currentCategory === cat.id ? 'active' : ''}"
-                        onclick="filterByCategory('${cat.id}')">
-                    <i class="${cat.icon}"></i>
-                    ${cat.name}
-                </button>
-            `).join('');
         }
-        function renderProducts() {
-            const filteredProducts = products.filter(product => {
-                const matchCategory = currentCategory === 'all' || product.category === currentCategory;
-                const matchSearch = product.name.toLowerCase().includes(searchQuery.toLowerCase());
-                return matchCategory && matchSearch;
-            });
-            if (filteredProducts.length === 0) {
-                productsGrid.innerHTML = `
-                    <div style="grid-column: 1/-1; text-align: center; padding: 50px; color: #999;">
-                        <i class="fa-solid fa-box-open" style="font-size: 3rem; margin-bottom: 20px; opacity: 0.5;"></i>
-                        <h3>ไม่พบสินค้า</h3>
-                        <p>ลองเปลี่ยนคำค้นหาหรือหมวดหมู่</p>
                     </div>`;
                 return;
             }
-            productsGrid.innerHTML = filteredProducts.map(product => `
-                <div class="product-card" onclick="addToCart(${product.id})">
-                    <div class="product-img-container">
-                        <img src="${product.img}" alt="${product.name}" class="product-img" loading="lazy">
                     </div>
-                    <div class="product-name">${product.name}</div>
-                    <div class="product-footer">
-                        <div class="product-price">${product.price.toFixed(2)} บาท</div>
-                        <div class="add-btn">
-                            <i class="fa-solid fa-plus"></i>
-                        </div>
                     </div>
-                </div>
-            `).join('');
         }
-        // --- Cart Logic ---
-        function addToCart(productId) {
-            const product = products.find(p => p.id === productId);
-            if (!product) return;
-            const existingItem = cart.find(item => item.id === productId);
-            if (existingItem) {
-                existingItem.qty++;
             } else {
                 cart.push({ ...product, qty: 1 });
             }
-            // Animation effect on cart
-            cartItems.style.opacity = '0';
-            setTimeout(() => {
-                updateCartUI();
-                cartItems.style.opacity = '1';
-            }, 200);
         }
-        function updateCartUI() {
-            cartCount.innerText = cart.reduce((acc, item) => acc + item.qty, 0) + " ชิ้น";
-            let totalQty = 0;
-            let totalPrice = 0;
-            if (cart.length === 0) {
-                cartItems.innerHTML = `
-                    <div class="cart-items-empty">
-                        <i class="fa-solid fa-shopping-cart" style="font-size: 4rem; margin-bottom: 20px; opacity: 0.3;"></i>
-                        <p>ยังไม่มีสินค้าในตะกร��า</p>
-                    </div>`;
             } else {
-                cartItems.innerHTML = cart.map(item => `
-                    <div class="cart-item">
-                        <img src="${item.img}" alt="${item.name}" class="cart-item-img">
-                        <div class="cart-item-details">
-                            <div class="cart-item-name">${item.name}</div>
-                            <div class="cart-item-price">${item.price.toFixed(2)} บาท</div>
-                        </div>
-                        <div class="cart-actions">
-                            <button class="qty-btn minus" onclick="changeQty(${item.id}, -1)">-</button>
-                            <span style="font-weight: 700; width: 30px; text-align: center;">${item.qty}</span>
-                            <button class="qty-btn plus" onclick="changeQty(${item.id}, 1)">+</button>
-                        </div>
-                    </div>
-                `).join('');
             }
-            cart.forEach(item => {
-                totalQty += item.qty;
-                totalPrice += item.price * item.qty;
-            });
-            summaryQty.innerText = totalQty;
-            summaryTotal.innerText = totalPrice.toFixed(2) + ' บาท';
         }
-        function changeQty(id, change) {
-            const itemIndex = cart.findIndex(item => item.id === id);
-            if (itemIndex > -1) {
-                cart[itemIndex].qty += change;
-                if (cart[itemIndex].qty <= 0) {
-                    cart.splice(itemIndex, 1);
-                }
-                updateCartUI();
-            }
         }
-        function clearCart() {
-            if (cart.length === 0) return;
-            if (confirm('ต้องการยกเลิกรายการทั้งหมดหรือไม่?')) {
                 cart = [];
-                updateCartUI();
             }
         }
-        // --- Checkout Logic ---
-        function checkout() {
-            if (cart.length === 0) {
-                alert('กรุณาเลือกสินค้าก่อนชำระเงิน');
-                return;
-            }
-            const totalAmount = cart.reduce((sum, item) => sum + (item.price * item.qty), 0);
-            // Populate Receipt
-            const date = new Date();
-            const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' };
-            document.getElementById('receiptDate').innerText = 'วันที่: ' + date.toLocaleDateString('th-TH', {year: 'numeric', month: 'long', day: 'numeric'});
-            document.getElementById('receiptTime').innerText = 'เวลา: ' + date.toLocaleTimeString('th-TH', {hour: '2-digit', minute: '2-digit'});
-            document.getElementById('receiptCashier').innerText = 'Cashier: ปกรณ์ ปกรณ์';
-            const itemsContainer = document.getElementById('receiptItemsContainer');
-            itemsContainer.innerHTML = cart.map(item => `
-                <div class="receipt-item-row">
-                    <div>
-                        <span>${item.name} x ${item.qty}</span>
-                        <div class="receipt-item-sub">${item.price.toFixed(2)} บาท</div>
-                    </div>
-                    <span>${(item.price * item.qty).toFixed(2)} บาท</span>
-                </div>
-            `).join('');
-            document.getElementById('receiptTotalAmount').innerText = totalAmount.toFixed(2) + ' บาท';
-            checkoutModal.classList.add('active');
         }
-        function closeModal() {
-            window.print();
-        }
-        function resetAndClose() {
-            checkoutModal.classList.remove('active');
             cart = [];
-            updateCartUI();
         }
-        function logout() {
-            if(confirm('คุณต้องการออกจากระบบใช่หรือไม่?')) {
-                alert('กำลังออกจากระบบ...');
-                // In a real app, this would redirect to login
-                window.location.href = "#";
-            }
         }
-        // --- Event Listeners ---
-        searchInput.addEventListener('input', (e) => {
-            searchQuery = e.target.value.toLowerCase();
-            renderProducts();
-        });
-        function filterByCategory(catId) {
-            currentCategory = catId;
-            renderCategories();
-            renderProducts();
         }
-        // Start the app
-        init();
-        // Built with anycoder link
-        const footerLink = document.createElement('div');
-        footerLink.style.position = 'fixed';
-        footerLink.style.bottom = '10px';
-        footerLink.style.right = '10px';
-        footerLink.style.zIndex = '9999';
-        footerLink.style.fontSize = '0.8rem';
-        footerLink.innerHTML = 'Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" style="color: var(--primary-color); text-decoration: none;">anycoder</a>';
-        document.body.appendChild(footerLink);
     </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="th">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Smart POS System - ระบบขายปลีกอัจฉริยะ</title>
+    <!-- Google Fonts: Sarabun เพื่อความสวยงามและอ่านง่ายภาษาไทย -->
+    <link href="https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <!-- FontAwesome for Icons -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         :root {
+            --primary-color: #2563eb;
+            --secondary-color: #1e40af;
+            --accent-color: #f59e0b;
+            --bg-color: #f3f4f6;
+            --card-bg: #ffffff;
+            --text-main: #1f2937;
+            --text-muted: #6b7280;
+            --border-color: #e5e7eb;
+            --danger-color: #ef4444;
+            --success-color: #10b981;
+            --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+            --radius: 12px;
         }
         * {
             box-sizing: border-box;
             margin: 0;
             padding: 0;
+            font-family: 'Sarabun', sans-serif;
         }
         body {
             background-color: var(--bg-color);
+            color: var(--text-main);
             height: 100vh;
             display: flex;
             flex-direction: column;
+            overflow: hidden; /* ป้องกันการเลื่อนหน้าจร้างเกิน */
         }
+        /* Header */
         header {
+            background-color: var(--card-bg);
             padding: 1rem 2rem;
             display: flex;
             justify-content: space-between;
             align-items: center;
+            box-shadow: var(--shadow-sm);
+            z-index: 10;
         }
         .brand {
             display: flex;
             align-items: center;
+            gap: 12px;
+            font-size: 1.5rem;
+            font-weight: 700;
             color: var(--primary-color);
         }
+        .header-actions button {
+            background: none;
             border: none;
+            font-size: 1.2rem;
+            color: var(--text-muted);
             cursor: pointer;
+            transition: color 0.3s;
         }
+        .header-actions button:hover {
+            color: var(--primary-color);
         }
+        /* Main Layout */
         main {
+            display: flex;
             flex: 1;
             overflow: hidden;
             gap: 20px;
             padding: 20px;
         }
+        /* Left Side: Product Grid */
+        .product-section {
+            flex: 2;
             display: flex;
             flex-direction: column;
             gap: 15px;
+            overflow-y: auto;
+            padding-right: 5px;
         }
+        /* Search Bar */
         .search-container {
             position: relative;
+            margin-bottom: 10px;
         }
         .search-input {
             width: 100%;
+            padding: 12px 20px 12px 45px;
+            border: 1px solid var(--border-color);
+            border-radius: var(--radius);
+            font-size: 1rem;
+            background-color: var(--card-bg);
+            box-shadow: var(--shadow-sm);
+            transition: all 0.3s ease;
         }
         .search-input:focus {
+            outline: none;
+            border-color: var(--primary-color);
+            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
         }
         .search-icon {
             position: absolute;
+            left: 15px;
             top: 50%;
             transform: translateY(-50%);
+            color: var(--text-muted);
         }
+        /* Product Grid */
+        .product-grid {
             display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+            gap: 15px;
             padding-bottom: 20px;
         }
         .product-card {
+            background: var(--card-bg);
+            border-radius: var(--radius);
+            overflow: hidden;
+            box-shadow: var(--shadow-sm);
+            transition: transform 0.2s, box-shadow 0.2s;
             cursor: pointer;
+            display: flex;
+            flex-direction: column;
             position: relative;
         }
         .product-card:hover {
+            transform: translateY(-4px);
+            box-shadow: var(--shadow-md);
         }
         .product-img {
             width: 100%;
+            height: 120px;
             object-fit: cover;
+            background-color: #e5e7eb;
         }
+        .product-info {
+            padding: 12px;
+            flex: 1;
+            display: flex;
+            flex-direction: column;
         }
         .product-name {
+            font-weight: 600;
+            font-size: 1rem;
+            margin-bottom: 4px;
+            color: var(--text-main);
         }
         .product-price {
+            font-size: 1.1rem;
             color: var(--primary-color);
+            font-weight: 700;
+            margin-top: auto;
         }
         .add-btn {
+            margin-top: 10px;
+            width: 100%;
+            padding: 8px;
+            background-color: var(--primary-color);
             color: white;
+            border: none;
+            border-radius: 8px;
+            font-weight: 500;
+            transition: background 0.2s;
         }
         .add-btn:hover {
+            background-color: var(--secondary-color);
         }
+        /* Right Side: Cart */
+        .cart-section {
+            flex: 1;
+            background: var(--card-bg);
             border-radius: var(--radius);
+            box-shadow: var(--shadow-md);
             display: flex;
             flex-direction: column;
             overflow: hidden;
+            min-width: 350px;
         }
         .cart-header {
             padding: 20px;
+            border-bottom: 1px solid var(--border-color);
             display: flex;
             justify-content: space-between;
             align-items: center;
         }
+        .cart-header h2 {
+            font-size: 1.25rem;
+            color: var(--text-main);
         }
         .cart-items {
             flex: 1;
             overflow-y: auto;
+            padding: 15px;
         }
         .cart-item {
             display: flex;
+            justify-content: space-between;
             align-items: center;
+            padding: 12px 0;
+            border-bottom: 1px solid var(--border-color);
             animation: slideIn 0.3s ease;
         }
             to { opacity: 1; transform: translateX(0); }
         }
+        .cart-item-info {
             flex: 1;
         }
         .cart-item-name {
+            font-weight: 600;
+            font-size: 0.95rem;
         }
         .cart-item-price {
+            font-size: 0.85rem;
+            color: var(--text-muted);
         }
+        .cart-controls {
             display: flex;
             align-items: center;
             gap: 10px;
         }
         .qty-btn {
             width: 28px;
             height: 28px;
+            border-radius: 50%;
+            border: 1px solid var(--border-color);
             background: white;
             cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.2s;
+        }
+        .qty-btn:hover {
+            background-color: var(--bg-color);
+            border-color: var(--primary-color);
+            color: var(--primary-color);
+        }
+        .qty-value {
+            font-weight: 600;
+            width: 20px;
+            text-align: center;
         }
+        .remove-btn {
+            color: var(--text-muted);
+            cursor: pointer;
+            padding: 5px;
+            transition: color 0.2s;
+        }
+        .remove-btn:hover {
+            color: var(--danger-color);
+        }
         .cart-footer {
+            padding: 20px;
+            background-color: #f9fafb;
+            border-top: 1px solid var(--border-color);
         }
         .summary-row {
             display: flex;
             justify-content: space-between;
+            margin-bottom: 8px;
+            font-size: 0.95rem;
+            color: var(--text-muted);
         }
         .summary-row.total {
+            font-size: 1.4rem;
+            font-weight: 700;
+            color: var(--text-main);
+            margin-top: 15px;
+            padding-top: 15px;
+            border-top: 2px dashed var(--border-color);
         }
+        .checkout-btn {
+            width: 100%;
+            padding: 15px;
+            background-color: var(--success-color);
+            color: white;
+            border: none;
+            border-radius: var(--radius);
             font-size: 1.1rem;
+            font-weight: 600;
+            margin-top: 15px;
             cursor: pointer;
+            transition: background 0.3s;
             display: flex;
             justify-content: center;
+            align-items: center;
             gap: 10px;
         }
+        .checkout-btn:hover {
+            background-color: #059669;
         }
+        .checkout-btn:disabled {
+            background-color: #9ca3af;
+            cursor: not-allowed;
         }
+        /* Modal / Toast */
         .modal-overlay {
             position: fixed;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
+            background: rgba(0, 0, 0, 0.5);
             display: flex;
             justify-content: center;
             align-items: center;
+            z-index: 100;
             opacity: 0;
+            visibility: hidden;
+            transition: all 0.3s;
         }
         .modal-overlay.active {
             opacity: 1;
+            visibility: visible;
         }
         .modal {
             background: white;
+            padding: 30px;
+            border-radius: var(--radius);
             width: 90%;
+            max-width: 400px;
             text-align: center;
+            transform: scale(0.9);
+            transition: transform 0.3s;
         }
         .modal-overlay.active .modal {
             transform: scale(1);
         }
+        .modal-icon {
+            font-size: 3rem;
+            color: var(--success-color);
+            margin-bottom: 15px;
         }
+        .modal-title {
+            font-size: 1.5rem;
+            margin-bottom: 10px;
         }
+        .modal-body {
+            color: var(--text-muted);
             margin-bottom: 20px;
         }
+        .modal-actions {
             display: flex;
+            gap: 10px;
+            justify-content: center;
         }
+        .btn {
+            padding: 10px 20px;
+            border-radius: 8px;
+            border: none;
+            cursor: pointer;
+            font-weight: 500;
+            transition: opacity 0.2s;
         }
+        .btn:hover {
+            opacity: 0.9;
         }
+        .btn-primary {
+            background-color: var(--primary-color);
+            color: white;
         }
+        .btn-secondary {
+            background-color: var(--bg-color);
+            color: var(--text-main);
         }
+        /* Responsive */
         @media (max-width: 768px) {
             main {
+                flex-direction: column;
                 padding: 10px;
+                gap: 10px;
             }
+            .product-section {
+                flex: none;
+                height: 60vh;
+            }
+            .cart-section {
+                flex: none;
+                height: 40vh;
+                min-width: auto;
             }
         }
     </style>
 </head>
 <body>
     <!-- Header -->
+    <header>
         <div class="brand">
             <i class="fa-solid fa-cash-register"></i>
+            Smart POS
         </div>
+        <div class="header-actions">
+            <button title="รีเซ็ตระบบ" onclick="resetSystem()">
+                <i class="fa-solid fa-rotate-right"></i>
+            </button>
+            <button title="เกี่ยวกับ" onclick="showAbout()">
+                <i class="fa-solid fa-circle-info"></i>
             </button>
         </div>
     </header>
     <!-- Main Content -->
     <main>
+        <!-- Product Section -->
+        <section class="product-section">
             <div class="search-container">
+                <i class="fa-solid fa-magnifying-glass search-icon"></i>
+                <input type="text" id="searchInput" class="search-input" placeholder="ค้นหาสินค้า (เช่น กาแฟ, ขนม)...">
             </div>
+            <div id="productGrid" class="product-grid">
+                <!-- Products will be injected here via JS -->
             </div>
         </section>
+        <!-- Cart Section -->
+        <section class="cart-section">
             <div class="cart-header">
+                <h2><i class="fa-solid fa-cart-shopping"></i> ตะกร้าสินค้า</h2>
+                <span id="cartCount" style="background: var(--primary-color); color: white; padding: 2px 8px; border-radius: 10px; font-size: 0.8rem;">0 รายการ</span>
             </div>
+            <div id="cartItems" class="cart-items">
+                <!-- Cart items will be injected here -->
+                <div style="text-align: center; color: var(--text-muted); margin-top: 50px;">
+                    <i class="fa-solid fa-basket-shopping" style="font-size: 3rem; margin-bottom: 10px; opacity: 0.3;"></i>
                     <p>ยังไม่มีสินค้าในตะกร้า</p>
                 </div>
             </div>
             <div class="cart-footer">
                 <div class="summary-row">
+                    <span>ยอดรวมสินค้า</span>
+                    <span id="subtotalDisplay">฿0.00</span>
                 </div>
                 <div class="summary-row">
+                    <span>ภาษีมูลค่าเพิ่ม (7%)</span>
+                    <span id="taxDisplay">฿0.00</span>
                 </div>
                 <div class="summary-row total">
+                    <span>ยอดสุทธิ</span>
+                    <span id="totalDisplay">฿0.00</span>
                 </div>
+                <button id="checkoutBtn" class="checkout-btn" onclick="openCheckoutModal()" disabled>
+                    <i class="fa-solid fa-credit-card"></i> ชำระเงิน
+                </button>
             </div>
+        </section>
     </main>
+    <!-- Payment Modal -->
+    <div id="paymentModal" class="modal-overlay">
         <div class="modal">
+            <div class="modal-icon"><i class="fa-solid fa-receipt"></i></div>
+            <h3 class="modal-title">ยืนยันการชำระเงิน</h3>
+            <p class="modal-body">ยอดชำระทั้งหมด: <strong id="modalTotal" style="color: var(--primary-color);">฿0.00</strong></p>
+            <div style="margin-bottom: 15px;">
+                <label style="display: block; margin-bottom: 5px; font-weight: 500;">วิธีการชำระ</label>
+                <select id="paymentMethod" class="search-input" style="padding: 10px;">
+                    <option value="cash">เงินสด</option>
+                    <option value="card">บัตรเครดิต</option>
+                </select>
+            </div>
+            <div id="cashInputGroup" style="margin-bottom: 15px;">
+                <label style="display: block; margin-bottom: 5px; font-weight: 500;">จำนวนเงินที่รับ</label>
+                <input type="number" id="cashReceived" class="search-input" placeholder="0.00" oninput="calculateChange()">
+            </div>
+            <div class="summary-row total" style="margin-top: 10px; border-top: none;">
+                <span>เงินทอน</span>
+                <span id="changeDisplay">฿0.00</span>
             </div>
             <div class="modal-actions">
+                <button class="btn btn-secondary" onclick="closeModal('paymentModal')">ยกเลิก</button>
+                <button class="btn btn-primary" onclick="processPayment()">ยืนยัน</button>
             </div>
         </div>
     </div>
+    <!-- Success Modal -->
+    <div id="successModal" class="modal-overlay">
+        <div class="modal">
+            <div class="modal-icon"><i class="fa-solid fa-check-circle"></i></div>
+            <h3 class="modal-title">ชำระเงินสำเร็จ!</h3>
+            <p class="modal-body">ขอบคุณที่ใช้บริการ Smart POS</p>
+            <div style="background: #f3f4f6; padding: 15px; border-radius: 8px; margin-bottom: 20px;">
+                <p style="font-size: 0.9rem; margin-bottom: 5px;">รายการสินค้า</p>
+                <ul id="receiptList" style="text-align: left; font-size: 0.85rem; color: var(--text-muted); list-style: none;">
+                    <!-- Receipt items -->
+                </ul>
+            </div>
+            <button class="btn btn-primary" onclick="closeModal('successModal')">ปิดหน้าต่าง</button>
+        </div>
+    </div>
+    <!-- About Modal -->
+    <div id="aboutModal" class="modal-overlay">
+        <div class="modal">
+            <div class="modal-icon"><i class="fa-solid fa-code"></i></div>
+            <h3 class="modal-title">Smart POS System</h3>
+            <p class="modal-body">ระบบ POS ระดับมืออาชีพ ที่สร้างด้วย HTML, CSS และ JavaScript แบบ Vanilla</p>
+            <p style="font-size: 0.9rem; color: var(--text-muted);">Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" style="color: var(--primary-color); text-decoration: none; font-weight: bold;">anycoder</a></p>
+            <button class="btn btn-primary" onclick="closeModal('aboutModal')">เข้าใจแล้ว</button>
+        </div>
+    </div>
+    <script>
+        // --- Data ---
         const products = [
+            { id: 1, name: "กาแฟโบราณ", price: 45, category: "drink", img: "https://picsum.photos/seed/coffee1/200/200" },
+            { id: 2, name: "โกโก้อบเชย", price: 35, category: "drink", img: "https://picsum.photos/seed/cocoa/200/200" },
+            { id: 3, name: "ชามะนาว", price: 40, category: "drink", img: "https://picsum.photos/seed/tea/200/200" },
+            { id: 4, name: "น้ำผลไม้สด", price: 50, category: "drink", img: "https://picsum.photos/seed/juice/200/200" },
+            { id: 5, name: "บราวนี่ชีส", price: 90, category: "food", img: "https://picsum.photos/seed/brownie/200/200" },
+            { id: 6, name: "เค้กท็อปปิ้ง", price: 85, category: "food", img: "https://picsum.photos/seed/cake/200/200" },
+            { id: 7, name: "แซนวิชปลาทูน่า", price: 110, category: "food", img: "https://picsum.photos/seed/sandwich/200/200" },
+            { id: 8, name: "ไส้กรอก", price: 120, category: "food", img: "https://picsum.photos/seed/sausage/200/200" },
+            { id: 9, name: "บัตรอาหาร", price: 5, category: "other", img: "https://picsum.photos/seed/card/200/200" },
+            { id: 10, name: "ช้อนทอง", price: 15, category: "other", img: "https://picsum.photos/seed/spoon/200/200" },
+            { id: 11, name: "ไข่ต้ม", price: 20, category: "other", img: "https://picsum.photos/seed/egg/200/200" },
+            { id: 12, name: "โซดาไฮโดรเจน", price: 25, category: "drink", img: "https://picsum.photos/seed/soda/200/200" },
         ];
         let cart = [];
+        // --- Init ---
+        document.addEventListener('DOMContentLoaded', () => {
+            renderProducts(products);
+            // Search Listener
+            document.getElementById('searchInput').addEventListener('input', (e) => {
+                const term = e.target.value.toLowerCase();
+                const filtered = products.filter(p => p.name.toLowerCase().includes(term));
+                renderProducts(filtered);
+            });
+            // Payment Method Listener
+            document.getElementById('paymentMethod').addEventListener('change', (e) => {
+                const cashGroup = document.getElementById('cashInputGroup');
+                if (e.target.value === 'card') {
+                    cashGroup.style.display = 'none';
+                } else {
+                    cashGroup.style.display = 'block';
+                }
+                calculateChange();
+            });
+        });
         // --- Render Functions ---
+        function renderProducts(list) {
+            const grid = document.getElementById('productGrid');
+            grid.innerHTML = '';
+            list.forEach(product => {
+                const card = document.createElement('div');
+                card.className = 'product-card';
+                card.onclick = () => addToCart(product.id);
+                card.innerHTML = `
+                    <img src="${product.img}" alt="${product.name}" class="product-img" loading="lazy">
+                    <div class="product-info">
+                        <div class="product-name">${product.name}</div>
+                        <div class="product-price">฿${product.price.toFixed(2)}</div>
+                    </div>
+                    <button class="add-btn"><i class="fa-solid fa-plus"></i> เพิ่ม</button>
+                `;
+                grid.appendChild(card);
+            });
         }
+        function renderCart() {
+            const container = document.getElementById('cartItems');
+            const countBadge = document.getElementById('cartCount');
+            const checkoutBtn = document.getElementById('checkoutBtn');
+            container.innerHTML = '';
+            if (cart.length === 0) {
+                container.innerHTML = `
+                    <div style="text-align: center; color: var(--text-muted); margin-top: 50px;">
+                        <i class="fa-solid fa-basket-shopping" style="font-size: 3rem; margin-bottom: 10px; opacity: 0.3;"></i>
+                        <p>ยังไม่มีสินค้าในตะกร้า</p>
                     </div>`;
+                countBadge.textContent = '0 รายการ';
+                checkoutBtn.disabled = true;
+                updateTotals();
                 return;
             }
+            let totalQty = 0;
+            cart.forEach(item => {
+                totalQty += item.qty;
+                const el = document.createElement('div');
+                el.className = 'cart-item';
+                el.innerHTML = `
+                    <div class="cart-item-info">
+                        <div class="cart-item-name">${item.name}</div>
+                        <div class="cart-item-price">฿${item.price.toFixed(2)} x ${item.qty}</div>
                     </div>
+                    <div class="cart-controls">
+                        <button class="qty-btn" onclick="updateQty(${item.id}, -1)">-</button>
+                        <span class="qty-value">${item.qty}</span>
+                        <button class="qty-btn" onclick="updateQty(${item.id}, 1)">+</button>
+                        <i class="fa-solid fa-trash remove-btn" onclick="removeFromCart(${item.id})"></i>
                     </div>
+                `;
+                container.appendChild(el);
+            });
+            countBadge.textContent = `${totalQty} รายการ`;
+            checkoutBtn.disabled = false;
+            updateTotals();
         }
+        function updateTotals() {
+            const subtotal = cart.reduce((sum, item) => sum + (item.price * item.qty), 0);
+            const tax = subtotal * 0.07;
+            const total = subtotal + tax;
+            document.getElementById('subtotalDisplay').textContent = `฿${subtotal.toFixed(2)}`;
+            document.getElementById('taxDisplay').textContent = `฿${tax.toFixed(2)}`;
+            document.getElementById('totalDisplay').textContent = `฿${total.toFixed(2)}`;
+            return total;
+        }
+        // --- Cart Logic ---
+        function addToCart(id) {
+            const product = products.find(p => p.id === id);
+            const existing = cart.find(item => item.id === id);
+            if (existing) {
+                existing.qty++;
             } else {
                 cart.push({ ...product, qty: 1 });
             }
+            renderCart();
         }
+        function updateQty(id, change) {
+            const item = cart.find(i => i.id === id);
+            if (!item) return;
+            item.qty += change;
+            if (item.qty <= 0) {
+                removeFromCart(id);
             } else {
+                renderCart();
             }
         }
+        function removeFromCart(id) {
+            cart = cart.filter(item => item.id !== id);
+            renderCart();
         }
+        function resetSystem() {
+            if(confirm('ต้องการรีเซ็ตตะกร้าสินค้าใหม่หรือไม่?')) {
                 cart = [];
+                renderCart();
             }
         }
+        // --- Payment Logic ---
+        function openCheckoutModal() {
+            const total = updateTotals();
+            document.getElementById('modalTotal').textContent = `฿${total.toFixed(2)}`;
+            document.getElementById('paymentMethod').value = 'cash';
+            document.getElementById('cashInput').value = '';
+            document.getElementById('cashInputGroup').style.display = 'block';
+            document.getElementById('changeDisplay').textContent = '฿0.00';
+            openModal('paymentModal');
+            document.getElementById('cashReceived').focus();
+        }
+        function calculateChange() {
+            const method = document.getElementById('paymentMethod').value;
+            const total = parseFloat(document.getElementById('modalTotal').textContent.replace('฿', '').replace(',', ''));
+            let cash = 0;
+            if (method === 'cash') {
+                cash = parseFloat(document.getElementById('cashReceived').value) || 0;
+                const change = cash - total;
+                document.getElementById('changeDisplay').textContent = `฿${change.toFixed(2)}`;
+            } else {
+                document.getElementById('changeDisplay').textContent = 'N/A';
+            }
         }
+        function processPayment() {
+            const method = document.getElementById('paymentMethod').value;
+            const total = parseFloat(document.getElementById('modalTotal').textContent.replace('฿', '').replace(',', ''));
+            if (method === 'cash') {
+                const cash = parseFloat(document.getElementById('cashReceived').value);
+                if (isNaN(cash) || cash < total) {
+                    alert('เงินที่รับไม่เพียงพอ');
+                    return;
+                }
+            }
+            // Show Receipt
+            const receiptList = document.getElementById('receiptList');
+            receiptList.innerHTML = '';
+            cart.forEach(item => {
+                const li = document.createElement('li');
+                li.innerHTML = `<span>${item.name}</span> <span>฿${(item.price * item.qty).toFixed(2)}</span>`;
+                receiptList.appendChild(li);
+            });
+            // Clear Cart
             cart = [];
+            renderCart();
+            closeModal('paymentModal');
+            openModal('successModal');
         }
+        // --- UI Utilities ---
+        function openModal(id) {
+            document.getElementById(id).classList.add('active');
         }
+        function closeModal(id) {
+            document.getElementById(id).classList.remove('active');
         }
+        function showAbout() {
+            openModal('aboutModal');
+        }
+        // Close modal on outside click
+        window.onclick = function(event) {
+            if (event.target.classList.contains('modal-overlay')) {
+                event.target.classList.remove('active');
+            }
+        }
     </script>
 </body>
 </html>