<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ร้านขนมไทย - Thai Dessert Shop</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;500;600;700&family=Mitr:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- Header -->
<header class="header">
<div class="container">
<div class="header-content">
<div class="logo">
<i class="bi bi-cup-straw"></i>
<span>ร้านขนมไทย</span>
</div>
<nav class="main-nav">
<ul>
<li><a href="#" class="active">หน้าแรก</a></li>
<li><a href="#products">สินค้า</a></li>
<li><a href="#about">เกี่ยวกับเรา</a></li>
<li><a href="#contact">ติดต่อ</a></li>
</ul>
</nav>
<div class="header-actions">
<div class="search-box">
<input type="text" id="searchInput" placeholder="ค้นหาขนมไทย...">
<button><i class="bi bi-search"></i></button>
</div>
<div class="cart-icon">
<i class="bi bi-cart3"></i>
<span class="cart-count">0</span>
</div>
</div>
<div class="mobile-menu-toggle">
<i class="bi bi-list"></i>
</div>
</div>
</div>
</header>
<!-- Hero Section -->
<section class="hero">
<div class="container">
<div class="hero-content">
<h1>ขนมไทยโบราณ รสชาติดั้งเดิม</h1>
<p>สั่งซื้อออนไลน์หรือมาที่ร้านได้เลย</p>
<a href="#products" class="btn btn-primary">สั่งซื้อเลย</a>
</div>
</div>
</section>
<!-- Categories -->
<section class="categories">
<div class="container">
<h2 class="section-title">หมวดหมู่สินค้า</h2>
<div class="category-list">
<div class="category-item active" data-category="all">
<i class="bi bi-grid-3x3-gap"></i>
<span>ทั้งหมด</span>
</div>
<div class="category-item" data-category="ขนมหวาน">
<i class="bi bi-gift"></i>
<span>ขนมหวาน</span>
</div>
<div class="category-item" data-category="ขนมคำ">
<i class="bi bi-cup-hot"></i>
<span>ขนมคำ</span>
</div>
<div class="category-item" data-category="ขนมชั้น">
<i class="bi bi-layers"></i>
<span>ขนมชั้น</span>
</div>
<div class="category-item" data-category="ขนมทอด">
<i class="bi bi-egg-fried"></i>
<span>ขนมทอด</span>
</div>
</div>
</div>
</section>
<!-- Products -->
<section id="products" class="products">
<div class="container">
<h2 class="section-title">สินค้าของเรา</h2>
<div class="product-grid" id="productGrid">
<!-- Products will be loaded here -->
</div>
</div>
</section>
<!-- Best Sellers -->
<section class="best-sellers">
<div class="container">
<h2 class="section-title">สินค้าขายดี</h2>
<div class="best-seller-grid" id="bestSellerGrid">
<!-- Best sellers will be loaded here -->
</div>
</div>
</section>
<!-- About -->
<section id="about" class="about">
<div class="container">
<div class="about-content">
<div class="about-text">
<h2>เกี่ยวกับร้านขนมไทย</h2>
<p>ร้านขนมไทยของเราเปิดมานานกว่า 20 ปี ด้วยสูตรต้นตำรับที่สืบทอดกันมาหลายชั่วอายุคน เราใช้วัตถุดิบคุณภาพดีที่สุดและวิธีการทำแบบดั้งเดิมเพื่อให้ได้รสชาติที่อร่อยและแท้จริง</p>
<p>ทุกชิ้นทำด้วยใจ เพื่อให้คุณได้ลิ้มลองรสชาติของขนมไทยแท้ๆ ที่หาทานได้ยากในปัจจุบัน</p>
<div class="about-features">
<div class="feature">
<i class="bi bi-award"></i>
<span>สูตรต้นตำรับ</span>
</div>
<div class="feature">
<i class="bi bi-heart"></i>
<span>ทำด้วยใจ</span>
</div>
<div class="feature">
<i class="bi bi-shield-check"></i>
<span>วัตถุดิบคุณภาพ</span>
</div>
</div>
</div>
<div class="about-image">
<!-- Image is set via CSS background -->
</div>
</div>
</div>
</section>
<!-- Contact -->
<section id="contact" class="contact">
<div class="container">
<h2 class="section-title">ติดต่อเรา</h2>
<div class="contact-content">
<div class="contact-info">
<div class="contact-item">
<i class="bi bi-geo-alt"></i>
<div>
<h3>ที่อยู่</h3>
<p>123 ถนนขนมไทย แขวงขนมหวาน เขตหวานกรอบ กรุงเทพฯ 10100</p>
</div>
</div>
<div class="contact-item">
<i class="bi bi-telephone"></i>
<div>
<h3>โทรศัพท์</h3>
<p>02-123-4567</p>
</div>
</div>
<div class="contact-item">
<i class="bi bi-envelope"></i>
<div>
<h3>อีเมล</h3>
<p>info@thaidessertshop.com</p>
</div>
</div>
<div class="contact-item">
<i class="bi bi-clock"></i>
<div>
<h3>เวลาทำการ</h3>
<p>จันทร์ - เสาร์: 9:00 - 18:00<br>อาทิตย์: 10:00 - 17:00</p>
</div>
</div>
</div>
<div class="contact-form">
<h3>ส่งข้อความถึงเรา</h3>
<form id="contactForm">
<div class="form-group">
<input type="text" id="name" placeholder="ชื่อของคุณ" required>
</div>
<div class="form-group">
<input type="email" id="email" placeholder="อีเมลของคุณ" required>
</div>
<div class="form-group">
<textarea id="message" placeholder="ข้อความของคุณ" rows="5" required></textarea>
</div>
<button type="submit" class="btn btn-primary">ส่งข้อความ</button>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-logo">
<i class="bi bi-cup-straw"></i>
<span>ร้านขนมไทย</span>
</div>
<div class="footer-links">
<ul>
<li><a href="#">หน้าแรก</a></li>
<li><a href="#products">สินค้า</a></li>
<li><a href="#about">เกี่ยวกับเรา</a></li>
<li><a href="#contact">ติดต่อ</a></li>
</ul>
</div>
<div class="footer-social">
<a href="#"><i class="bi bi-facebook"></i></a>
<a href="#"><i class="bi bi-instagram"></i></a>
<a href="#"><i class="bi bi-line"></i></a>
</div>
</div>
<div class="footer-bottom">
<p>© 2023 ร้านขนมไทย. สงวนลิขสิทธิ์</p>
</div>
</div>
</footer>
<!-- Cart Modal -->
<div class="modal" id="cartModal">
<div class="modal-content">
<div class="modal-header">
<h2>ตะกร้าสินค้า</h2>
<span class="close-modal">×</span>
</div>
<div class="modal-body">
<div class="cart-items" id="cartItems">
<!-- Cart items will be loaded here -->
</div>
<div class="cart-summary">
<div class="summary-row">
<span>รวม:</span>
<span id="cartSubtotal">฿0</span>
</div>
<div class="summary-row">
<span>ค่าจัดส่ง:</span>
<span id="cartShipping">฿0</span>
</div>
<div class="summary-row total">
<span>ทั้งหมด:</span>
<span id="cartTotal">฿0</span>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-outline" id="continueShopping">ซื้อสินค้าต่อ</button>
<button class="btn btn-primary" id="checkoutBtn">ชำระเงิน</button>
</div>
</div>
</div>
<!-- Checkout Modal -->
<div class="modal" id="checkoutModal">
<div class="modal-content">
<div class="modal-header">
<h2>ชำระเงิน</h2>
<span class="close-modal">×</span>
</div>
<div class="modal-body">
<form id="checkoutForm">
<div class="form-section">
<h3>ข้อมูลผู้รับ</h3>
<div class="form-group">
<input type="text" id="customerName" placeholder="ชื่อ-นามสกุล" required>
</div>
<div class="form-group">
<input type="tel" id="customerPhone" placeholder="เบอร์โทรศัพท์" required>
</div>
</div>
<div class="form-section" id="addressSection">
<h3>ที่อยู่จัดส่ง</h3>
<div class="form-group">
<input type="text" id="customerAddress" placeholder="ที่อยู่">
</div>
<div class="form-row">
<div class="form-group">
<input type="text" id="customerProvince" placeholder="จังหวัด">
</div>
<div class="form-group">
<input type="text" id="customerZipcode" placeholder="รหัสไปรษณีย์">
</div>
</div>
</div>
<div class="form-section">
<h3>วิธีการจัดส่ง</h3>
<div class="radio-group">
<label class="radio-item">
<input type="radio" name="deliveryMethod" value="home" checked>
<span>จัดส่งถึงบ้าน (฿50)</span>
</label>
<label class="radio-item">
<input type="radio" name="deliveryMethod" value="pickup">
<span>รับที่ร้าน (ฟรี)</span>
</label>
</div>
</div>
<div class="form-section">
<h3>วิธีการชำระเงิน</h3>
<div class="radio-group">
<label class="radio-item">
<input type="radio" name="paymentMethod" value="promptpay" checked>
<span>PromptPay</span>
</label>
<label class="radio-item">
<input type="radio" name="paymentMethod" value="bank">
<span>โอนเงินผ่านธนาคาร</span>
</label>
<label class="radio-item">
<input type="radio" name="paymentMethod" value="cod">
<span>เก็บเงินปลายทาง (COD)</span>
</label>
</div>
</div>
<div class="payment-details" id="promptpayDetails">
<div class="qr-code">
<img src="https://picsum.photos/seed/promptpay-qr/200/200.webp" alt="PromptPay QR">
<p>สแกน QR Code เพื่อชำระเงิน</p>
</div>
</div>
<div class="payment-details hidden" id="bankDetails">
<div class="bank-info">
<p>ธนาคาร: ธนาคารไทยพาณิชย์</p>
<p>ชื่อบัญชี: ร้านขนมไทย</p>
<p>เลขที่บัญชี: 123-456-7890</p>
</div>
</div>
<div class="cart-summary">
<div class="summary-row">
<span>รวม:</span>
<span id="checkoutSubtotal">฿0</span>
</div>
<div class="summary-row">
<span>ค่าจัดส่ง:</span>
<span id="checkoutShipping">฿0</span>
</div>
<div class="summary-row total">
<span>ทั้งหมด:</span>
<span id="checkoutTotal">฿0</span>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-outline" id="backToCart">กลับไปยังตะกร้า</button>
<button class="btn btn-primary" id="placeOrderBtn">ยืนยันการสั่งซื้อ</button>
</div>
</div>
</div>
<!-- Order Confirmation Modal -->
<div class="modal" id="orderConfirmationModal">
<div class="modal-content">
<div class="modal-header">
<h2>ยืนยันการสั่งซื้อ</h2>
</div>
<div class="modal-body">
<div class="confirmation-message">
<i class="bi bi-check-circle"></i>
<h3>ขอบคุณสำหรับการสั่งซื้อ!</h3>
<p>หมายเลขคำสั่งซื้อ: <span id="orderNumber"></span></p>
<p>เราได้รับคำสั่งซื้อของคุณแล้ว และจะดำเนินการจัดส่งโดยเร็วที่สุด</p>
</div>
<div class="order-summary">
<h4>สรุปคำสั่งซื้อ</h4>
<div id="orderSummaryItems"></div>
<div class="summary-row">
<span>รวม:</span>
<span id="orderSubtotal"></span>
</div>
<div class="summary-row">
<span>ค่าจัดส่ง:</span>
<span id="orderShipping"></span>
</div>
<div class="summary-row total">
<span>ทั้งหมด:</span>
<span id="orderTotal"></span>
</div>
</div>
<div class="order-details">
<h4>ข้อมูลการจัดส่ง</h4>
<p id="orderCustomerName"></p>
<p id="orderCustomerPhone"></p>
<p id="orderCustomerAddress"></p>
<p id="orderDeliveryMethod"></p>
<p id="orderPaymentMethod"></p>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" id="continueShoppingBtn">ซื้อสินค้าต่อ</button>
</div>
</div>
</div>
<!-- Toast Notification -->
<div class="toast" id="toast">
<div class="toast-content">
<i class="bi bi-check-circle"></i>
<span id="toastMessage">สินค้าถูกเพิ่มในตะกร้าแล้ว</span>
</div>
</div>
<script src="js/db.js"></script>
<script src="js/components.js"></script>
<script src="js/app.js"></script>
</body>
</html>