<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ขนมปังสังขยาโฮมเมด รสชาติอร่อย เนื้อนุ่ม หอมหวาน มีให้เลือกหลากหลายไส้">
<title>ขนมปังสังขยา - อร่อยทุกคำ หอมหวานทุกชิ้น</title>
<!-- PWA Support -->
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#ff9933">
<link rel="apple-touch-icon" href="assets/images/icons/icon-192x192.png">
<!-- Fonts & Icons -->
<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=Prompt:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<!-- Stylesheets -->
<link rel="stylesheet" href="assets/css/main.css">
<link rel="stylesheet" href="assets/css/products.css">
<link rel="stylesheet" href="assets/css/filter.css">
<link rel="stylesheet" href="assets/css/cart.css">
<link rel="stylesheet" href="assets/css/modal.css">
<link rel="stylesheet" href="assets/css/animations.css">
</head>
<body>
<!-- Header -->
<header class="site-header glass">
<nav class="nav-container">
<div class="logo">
<img src="assets/images/logo.svg" alt="ขนมปังสังขยา" id="siteLogo">
</div>
<div class="nav-buttons">
<button class="button-modern" onclick="CustomerManager.showProfileEditor()">
<i class="fas fa-user"></i>
<span class="button-text">โปรไฟล์</span>
</button>
<button class="button-modern" onclick="OrderManager.showOrderHistory()">
<i class="fas fa-history"></i>
<span class="button-text">ประวัติสั่งซื้อ</span>
</button>
<button id="loginBtn" class="button-modern">
<i class="fas fa-sign-in-alt"></i>
<span class="button-text">เข้าสู่ระบบ</span>
</button>
</div>
</nav>
</header>
<!-- Main Content -->
<main>
<!-- Hero Section -->
<section class="hero">
<div class="hero-content glass">
<h1 class="title">ขนมปังสังขยา</h1>
<p class="subtitle">อร่อยทุกคำ หอมหวานทุกชิ้น</p>
<button class="button-modern cta-button" onclick="scrollToMenu()">
<i class="fas fa-arrow-down"></i> ดูเมนู
</button>
</div>
</section>
<!-- Menu Section -->
<section id="menu" class="section menu-section">
<div class="container">
<h2 class="section-title">เมนูของเรา</h2>
<!-- Category Filters -->
<div id="categoryFilters" class="category-filters">
<!-- จะถูกเพิ่มโดย JavaScript -->
</div>
<!-- Products Grid -->
<div id="productGrid" class="products-grid">
<!-- จะถูกเพิ่มโดย JavaScript -->
</div>
</div>
</section>
</main>
<!-- Cart Button -->
<button id="cartBtn" class="cart-button" aria-label="ตะกร้าสินค้า">
<i class="fas fa-shopping-cart"></i>
<span class="cart-count">0</span>
</button>s="cart-count">0</span>
</button>
<!-- Cart Modal -->
<div id="cartModal" class="modal">
<div class="modal-content glass">
<div class="modal-header">
<h2>
<i class="fas fa-shopping-cart"></i>
ตะกร้าสินค้า
</h2>
<button class="modal-close" aria-label="ปิด">×</button>
</div>
<div id="cartItems" class="cart-items"></div>
</div>
</div>
<!-- Checkout Modal -->
<div id="checkoutModal" class="modal">
<div class="modal-content glass">
<div class="modal-header">
<h2>
<i class="fas fa-shopping-basket"></i>
ข้อมูลการสั่งซื้อ
</h2>
<button class="modal-close" aria-label="ปิด">×</button>
</div>
<form id="checkoutForm">
<!-- Customer Information -->
<div class="form-section">
<h3>
<i class="fas fa-user"></i>
ข้อมูลผู้สั่งซื้อ
</h3>
<div class="form-group">
<label for="name">ชื่อ-นามสกุล</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="phone">เบอร์โทรศัพท์</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{10}" required>
</div>
<div class="form-group">
<label for="address">ที่อยู่จัดส่ง</label>
<textarea id="address" name="address" required></textarea>
</div>
</div>
<!-- Payment Methods -->
<div class="form-section">
<h3>
<i class="fas fa-credit-card"></i>
วิธีการชำระเงิน
</h3>
<div class="payment-methods">
<label class="payment-method-option">
<input type="radio" name="payment" value="promptpay" checked>
<i class="fab fa-cc-jcb"></i>
พร้อมเพย์
</label>
<label class="payment-method-option">
<input type="radio" name="payment" value="banking">
<i class="fas fa-university"></i>
โอนผ่านธนาคาร
</label>
<label class="payment-method-option">
<input type="radio" name="payment" value="cod">
<i class="fas fa-money-bill-wave"></i>
เก็บเงินปลายทาง
</label>
</div>
</div>
<button type="submit" class="submit-btn">
<i class="fas fa-check"></i>
ยืนยันการสั่งซื้อ
</button>
</form>
</div>
</div>
<!-- Profile Modal -->
<div id="profileModal" class="modal">
<!-- Content will be inserted by CustomerManager -->
</div>
<!-- Login Modal -->
<div id="loginModal" class="modal">
<div class="modal-content glass">
<button class="modal-close">
<i class="fas fa-times"></i>
</button>
<h2>
<i class="fas fa-sign-in-alt"></i>
เข้าสู่ระบบ
</h2>
<form id="loginForm" class="login-form">
<div class="form-group">
<label for="username">ชื่อผู้ใช้</label>
<input type="text" id="username" class="input-modern" required>
</div>
<div class="form-group">
<label for="password">รหัสผ่าน</label>
<input type="password" id="password" class="input-modern" required>
</div>
<button type="submit" class="button-modern">
<i class="fas fa-sign-in-alt"></i> เข้าสู่ระบบ
</button>
</form>
</div>
</div>
<!-- Notification Container -->
<div id="notificationContainer" class="notification-container"></div>
<!-- Loading Spinner -->
<div id="loadingSpinner" class="loading-spinner">
<div class="spinner"></div>
</div>
<!-- Scripts -->
<script src="assets/js/config.js"></script>
<script src="assets/js/utils.js"></script>
<script src="assets/js/notification.js"></script>
<script src="assets/js/customer-manager.js"></script>
<script src="assets/js/payment-manager.js"></script>
<script src="assets/js/cart.js"></script>
<script src="assets/js/products.js"></script>
<script src="assets/js/order-manager.js"></script>
<script src="assets/js/modal-manager.js"></script>
<!-- Initialize -->
<script>
// Register Service Worker
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('sw.js')
.then(registration => {
console.log('Service Worker registered successfully');
})
.catch(err => {
console.log('Service Worker registration failed:', err);
});
});
}
// Initialize all managers
document.addEventListener('DOMContentLoaded', () => {
try {
ModalManager.init();
NotificationManager.init();
CustomerManager.init();
ProductManager.init();
CartManager.init();
PaymentManager.init();
} catch (error) {
console.error('Initialization error:', error);
}
});
// Smooth scroll to menu
function scrollToMenu() {
document.getElementById('menu').scrollIntoView({
behavior: 'smooth'
});
}
</script>
</body>
</html>