<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fashion Store - ร้านเสื้อผ้าออนไลน์</title>
<link href="https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/style.css">
<script src="assets/js/script.js" defer></script>
</head>
<body>
<header>
<nav class="container">
<a href="#" class="logo">
<i class="fas fa-tshirt"></i> Fashion Store
</a>
<ul class="nav-links">
<li><a href="#home">หน้าแรก</a></li>
<li><a href="#products">สินค้า</a></li>
<li><a href="#about">เกี่ยวกับเรา</a></li>
<li><a href="#contact">ติดต่อ</a></li>
</ul>
<div class="nav-actions">
<div class="cart-icon" onclick="toggleCart()">
<i class="fas fa-shopping-cart"></i>
<span class="cart-count" id="cartCount">0</span>
</div>
</div>
</nav>
</header>
<main>
<section class="hero" id="home">
<div class="container">
<div class="hero-content">
<h1>แฟชั่นสุดชิค</h1>
<p>เสื้อผ้าแฟชั่นคุณภาพดี ราคาย่อมเยา ส่งถึงบ้าน</p>
<a href="#products" class="btn">เลือกซื้อสินค้า</a>
</div>
</div>
</section>
<div class="container">
<section class="filters">
<div class="filter-group">
<select id="categoryFilter">
<option value="">หมวดหมู่ทั้งหมด</option>
<option value="เสื้อ">เสื้อ</option>
<option value="กางเกง">กางเกง</option>
<option value="กระโปรง">กระโปรง</option>
<option value="เดรส">เดรส</option>
<option value="เสื้อนอก">เสื้อนอก</option>
</select>
<select id="sizeFilter">
<option value="">ไซส์ทั้งหมด</option>
<option value="XS">XS</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
<option value="XXL">XXL</option>
</select>
<select id="priceFilter">
<option value="">ช่วงราคา</option>
<option value="0-500">0 - 500 บาท</option>
<option value="500-1000">500 - 1,000 บาท</option>
<option value="1000-2000">1,000 - 2,000 บาท</option>
<option value="2000+">มากกว่า 2,000 บาท</option>
</select>
<input type="text" id="searchInput" placeholder="ค้นหาสินค้า..." />
</div>
</section>
<section class="products-section" id="products">
<h2 class="section-title">สินค้าแนะนำ</h2>
<div class="loading" id="loading">
<i class="fas fa-spinner fa-spin"></i> กำลังโหลดสินค้า...
</div>
<div class="products-grid" id="productsGrid"></div>
</section>
</div>
</main>
<!-- About Section -->
<section class="container" id="about" style="margin-bottom: 3rem;">
<h2 class="section-title">เกี่ยวกับเรา</h2>
<div style="background: white; border-radius: 15px; box-shadow: 0 5px 30px rgba(0,0,0,0.07); padding: 2rem; color: #333; max-width: 800px; margin: 0 auto;">
<p>Fashion Store คือร้านค้าแฟชั่นออนไลน์ที่คัดสรรเสื้อผ้าแฟชั่นคุณภาพดี ดีไซน์ทันสมัย ในราคาย่อมเยา พร้อมบริการจัดส่งถึงบ้านคุณอย่างรวดเร็ว</p>
<ul style="margin: 1rem 0 0 1.5rem;">
<li>สินค้าหลากหลาย ทั้งเสื้อผ้า กระโปรง กางเกง เดรส ฯลฯ</li>
<li>เลือกไซส์และสีได้ตามต้องการ</li>
<li>ชำระเงินสะดวกผ่าน QR Code</li>
<li>บริการด้วยใจ ส่งไวถึงบ้าน</li>
</ul>
</div>
</section>
<!-- Contact Section -->
<section class="container" id="contact" style="margin-bottom: 3rem;">
<h2 class="section-title">ติดต่อเรา</h2>
<div style="background: white; border-radius: 15px; box-shadow: 0 5px 30px rgba(0,0,0,0.07); padding: 2rem; color: #333; max-width: 800px; margin: 0 auto;">
<p><i class="fas fa-phone"></i> โทร: <a href="tel:0812345678">081-234-5678</a></p>
<p><i class="fas fa-envelope"></i> อีเมล: <a href="mailto:fashionstore@email.com">fashionstore@email.com</a></p>
<p><i class="fab fa-facebook"></i> Facebook: <a href="https://facebook.com/fashionstore" target="_blank">facebook.com/fashionstore</a></p>
<p><i class="fas fa-map-marker-alt"></i> ที่อยู่: 123 ถนนสุขุมวิท กรุงเทพฯ 10110</p>
</div>
</section>
<!-- Cart Modal -->
<div id="cartModal" class="modal">
<div class="modal-content">
<span class="close" onclick="toggleCart()">×</span>
<h2>ตะกร้าสินค้า</h2>
<div id="cartItems"></div>
<div class="cart-total" id="cartTotal">รวม: 0 บาท</div>
<div class="checkout-section" id="checkoutSection" style="display: none;">
<h3>ข้อมูลการสั่งซื้อ</h3>
<form class="customer-form" id="customerForm">
<div class="form-group">
<label>ชื่อ-นามสกุล *</label>
<input type="text" id="customerName" required>
</div>
<div class="form-group">
<label>เบอร์โทร *</label>
<input type="tel" id="customerPhone" required>
</div>
<div class="form-group">
<label>อีเมล</label>
<input type="email" id="customerEmail">
</div>
<div class="form-group">
<label>ที่อยู่จัดส่ง *</label>
<textarea id="customerAddress" rows="3" required></textarea>
</div>
</form>
<div class="qr-payment" id="qrPayment" style="display: none;">
<h3>ชำระเงินผ่าน PromptPay</h3>
<img class="qr-code" id="qrCode" alt="QR Code PromptPay">
<div class="payment-info">
<p>สแกน QR Code เพื่อชำระเงิน</p>
<div class="payment-amount" id="paymentAmount">0 บาท</div>
<p>หมายเลข PromptPay: 0812345678</p>
</div>
<button class="btn" onclick="confirmPayment()">ยืนยันการชำระเงิน</button>
</div>
<button class="btn" id="proceedToPayment" onclick="proceedToPayment()" style="width: 100%; margin-top: 1rem;">
ดำเนินการชำระเงิน
</button>
</div>
</div>
</div>
</body>
</html>