<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Forest Brew — กาแฟวินเทจในอ้อมกอดธรรมชาติ</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&display=swap');
* {
font-family: 'Kanit', sans-serif;
}
.vintage-bg {
background: linear-gradient(135deg, #8B4513 0%, #D2691E 50%, #CD853F 100%);
position: relative;
overflow: hidden;
}
.vintage-bg::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: repeating-linear-gradient(45deg,
transparent,
transparent 10px,
rgba(255, 255, 255, 0.05) 10px,
rgba(255, 255, 255, 0.05) 20px);
animation: slide 20s linear infinite;
}
@keyframes slide {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(50px, 50px);
}
}
.coffee-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
transition: all 0.3s ease;
border: 2px solid transparent;
}
.coffee-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
border-color: #8B4513;
}
.map-container {
height: 300px;
background: url('https://picsum.photos/seed/forestmap/800/300') center/cover;
position: relative;
}
.map-overlay {
position: absolute;
inset: 0;
background: rgba(139, 69, 19, 0.3);
display: flex;
align-items: center;
justify-content: center;
}
.notification {
animation: slideIn 0.3s ease-out;
}
@keyframes slideIn {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.cart-badge {
animation: bounce 0.5s ease;
}
@keyframes bounce {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
}
</style>
</head>
<body class="bg-amber-50">
<!-- Header -->
<header class="vintage-bg text-white sticky top-0 z-50 shadow-lg">
<div class="container mx-auto px-4 py-4">
<div class="flex justify-between items-center">
<div class="flex items-center space-x-3">
<i class="fas fa-coffee text-3xl"></i>
<h1 class="text-2xl font-bold">Forest Brew</h1>
<span class="text-sm opacity-80">กาแฟวินเทจ ท่ามกลางธรรมชาติ</span>
</div>
<div class="flex items-center space-x-6">
<button onclick="showLoginModal()" class="hover:text-amber-200 transition">
<i class="fas fa-user mr-2"></i>
<span id="userDisplay">เข้าสู่ระบบ</span>
</button>
<button onclick="toggleCart()" class="relative hover:text-amber-200 transition">
<i class="fas fa-shopping-cart text-xl"></i>
<span id="cartCount" class="cart-badge absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full w-6 h-6 flex items-center justify-center">0</span>
</button>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<main class="container mx-auto px-4 py-8">
<!-- Hero Section (enhanced) -->
<section class="mb-12">
<div class="bg-[url('assets/images/hero.webp')] bg-center bg-cover rounded-xl overflow-hidden relative">
<div class="absolute inset-0 bg-gradient-to-r from-amber-900/80 via-amber-700/50 to-transparent"></div>
<div class="container mx-auto px-10 py-20 relative z-10">
<div class="grid md:grid-cols-2 gap-8 items-center">
<div class="text-white">
<h2 class="text-4xl lg:text-5xl font-extrabold mb-4">รสกาแฟที่ถ่ายทอดจากไร่สู่ถ้วย</h2>
<p class="text-lg max-w-xl mb-6 opacity-90">คัดสรรเมล็ดจากไร่บนพื้นที่สูง คั่วอย่างพิถีพิถันเพื่อให้ได้กลิ่นและรสที่สมดุล เพลิดเพลินกับบรรยากาศวินเทจและความสงบของป่า</p>
<div class="flex space-x-3">
<button onclick="document.getElementById('menuGrid').scrollIntoView({behavior: 'smooth'})" class="bg-white text-amber-800 font-semibold px-5 py-3 rounded-lg shadow">ดูเมนู</button>
<button onclick="document.querySelector('.map-container').scrollIntoView({behavior: 'smooth'})" class="bg-transparent border border-white text-white px-5 py-3 rounded-lg">แผนที่ร้าน</button>
</div>
</div>
<div class="hidden md:block">
<div class="bg-white/10 backdrop-blur-sm rounded-lg p-4 shadow-lg">
<img src="assets/images/500.webp" alt="ภาพกาแฟ" class="w-full h-64 object-cover rounded-lg">
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Menu Section -->
<section class="mb-12">
<h3 class="text-2xl font-bold text-amber-900 mb-6 text-center">เมนูแนะนำ</h3>
<div id="menuGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Menu items will be dynamically inserted here -->
</div>
</section>
<!-- Delivery Section -->
<section class="mb-12 bg-white rounded-lg shadow-lg p-6">
<h3 class="text-2xl font-bold text-amber-900 mb-6">การจัดส่งและการรับสินค้า</h3>
<div class="grid md:grid-cols-2 gap-8">
<div>
<h4 class="text-lg font-semibold mb-4">เลือกวิธีรับสินค้า</h4>
<div class="space-y-3">
<label class="flex items-center p-3 border rounded-lg cursor-pointer hover:bg-amber-50">
<input type="radio" name="delivery" value="delivery" class="mr-3" onchange="toggleDeliveryOptions('delivery')">
<i class="fas fa-truck mr-2 text-amber-600"></i>
<span>จัดส่งถึงที่</span>
</label>
<label class="flex items-center p-3 border rounded-lg cursor-pointer hover:bg-amber-50">
<input type="radio" name="delivery" value="pickup" class="mr-3" onchange="toggleDeliveryOptions('pickup')" checked>
<i class="fas fa-store mr-2 text-amber-600"></i>
<span>รับที่ร้าน</span>
</label>
</div>
<div id="deliveryAddress" class="mt-4 hidden">
<h5 class="font-semibold mb-2">ที่อยู่สำหรับจัดส่ง</h5>
<textarea id="addressInput" class="w-full p-3 border rounded-lg" rows="3" placeholder="กรอกที่อยู่ (ระบุบ้าน/คอนโด, เขต/อำเภอ, จังหวัด, รหัสไปรษณีย์)"></textarea>
</div>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">แผนที่ร้าน</h4>
<div class="map-container rounded-lg overflow-hidden">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d186.77178066666238!2d99.54697025992964!3d14.01203232986944!2m3!1f0!2f8.859640863305998!3f0!3m2!1i1024!2i768!4f56.82048596602601!3m3!1m2!1s0x30e30b53056936ed%3A0x66c8c60c5d14c520!2z4LiV4Lil4Liy4LiU4LiZ4Lix4LiU4Lij4LmI4Lih4LmB4Lid4LiB!5e1!3m2!1sth!2sth!4v1759458802324!5m2!1sth!2sth" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
<div class="p-4 bg-white">
<p class="text-sm text-gray-700 mb-1">123 ถนนป่าสัก ตำบลป่าสัก อำเภอป่าสัก จังหวัดลพบุรี</p>
<p class="text-sm text-gray-600">เปิดทุกวัน 07:00 - 18:00 | โทร. 02-123-4567</p>
</div>
</div>
</div>
</div>
</section>
<!-- Additional Sections -->
<section id="about" class="mb-12">
<div class="bg-white rounded-lg shadow-lg p-6">
<h3 class="text-2xl font-bold text-amber-900 mb-4">เกี่ยวกับเรา</h3>
<p class="text-gray-700 mb-4">Forest Brew เกิดจากความตั้งใจนำกาแฟคุณภาพจากไร่บนที่สูง มาคัดสรรและคั่วอย่างพิถีพิถัน เพื่อให้ได้รสและกลิ่นที่เป็นเอกลักษณ์ บรรยากาศร้านออกแบบสไตล์วินเทจผสมกลิ่นอายธรรมชาติ เหมาะกับการพักผ่อนและทำงาน</p>
<div class="grid md:grid-cols-3 gap-4">
<div class="p-4 border rounded-lg">
<h4 class="font-semibold mb-2">เมล็ดคัดพิเศษ</h4>
<p class="text-sm text-gray-600">เราเลือกเมล็ดจากไร่ที่มีกระบวนการปลูกยั่งยืน</p>
</div>
<div class="p-4 border rounded-lg">
<h4 class="font-semibold mb-2">การคั่วเฉพาะตัว</h4>
<p class="text-sm text-gray-600">คั่วด้วยสูตรเฉพาะเพื่อบาลานซ์รสชาติ</p>
</div>
<div class="p-4 border rounded-lg">
<h4 class="font-semibold mb-2">บรรยากาศเป็นกันเอง</h4>
<p class="text-sm text-gray-600">ที่นั่งสบาย เหมาะกับการนั่งชิลหรือประชุมงาน</p>
</div>
</div>
</div>
</section>
<section id="specials" class="mb-12">
<div class="bg-amber-50 rounded-lg p-6">
<h3 class="text-2xl font-bold text-amber-900 mb-4">เมนูพิเศษประจำเดือน</h3>
<div id="specialsGrid" class="grid md:grid-cols-3 gap-6">
<!-- Special items will be rendered here -->
</div>
</div>
</section>
<section id="testimonials" class="mb-12">
<div class="bg-white rounded-lg shadow-lg p-6">
<h3 class="text-2xl font-bold text-amber-900 mb-4">รีวิวจากลูกค้า</h3>
<div class="grid md:grid-cols-3 gap-4">
<div class="p-4 border rounded-lg">
<p class="text-gray-700">"กาแฟหอมและเข้มข้น ชอบบรรยากาศร้านมาก"</p>
<p class="text-sm text-gray-500 mt-2">— ปรเมศร์</p>
</div>
<div class="p-4 border rounded-lg">
<p class="text-gray-700">"มานั่งทำงานบ่อย เครื่องดื่มดี พนักงานใจดี"</p>
<p class="text-sm text-gray-500 mt-2">— ศศิธร</p>
</div>
<div class="p-4 border rounded-lg">
<p class="text-gray-700">"เมนูพิเศษอร่อยมาก คุ้มค่ากับราคา"</p>
<p class="text-sm text-gray-500 mt-2">— วรัญญา</p>
</div>
</div>
</div>
</section>
<section id="newsletter" class="mb-12">
<div class="bg-amber-50 rounded-lg p-6 text-center">
<h3 class="text-2xl font-bold text-amber-900 mb-4">รับข่าวสารและโปรโมชั่น</h3>
<p class="text-gray-700 mb-4">สมัครรับข่าวสารเพื่อรับส่วนลดและเมนูพิเศษก่อนใคร</p>
<form onsubmit="event.preventDefault(); showNotification('ขอบคุณ! สมัครรับข่าวสารเรียบร้อย', 'success')" class="max-w-md mx-auto flex">
<input type="email" required placeholder="อีเมลของคุณ" class="w-full p-3 rounded-l-lg border-t border-b border-l border-gray-300">
<button type="submit" class="bg-amber-700 text-white px-4 rounded-r-lg">สมัคร</button>
</form>
</div>
</section>
<section id="contact" class="mb-12">
<div class="bg-white rounded-lg shadow-lg p-6">
<h3 class="text-2xl font-bold text-amber-900 mb-4">ติดต่อเรา</h3>
<div class="grid md:grid-cols-2 gap-6">
<div>
<p class="text-gray-700">ที่อยู่: 123 ถนนป่าสัก ต.ป่าสัก อ.ป่าสัก จ.ลพบุรี</p>
<p class="text-gray-700">โทร: 02-123-4567</p>
<p class="text-gray-700">เวลาเปิด: ทุกวัน 07:00 - 18:00</p>
</div>
<div>
<h4 class="font-semibold mb-2">ติดตามเรา</h4>
<div class="flex space-x-3">
<a href="#" class="text-amber-700"><i class="fab fa-facebook fa-lg"></i></a>
<a href="#" class="text-amber-700"><i class="fab fa-instagram fa-lg"></i></a>
<a href="#" class="text-amber-700"><i class="fab fa-line fa-lg"></i></a>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Cart Modal -->
<div id="cartModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden">
<div class="fixed right-0 top-0 h-full w-full max-w-md bg-white shadow-xl transform translate-x-full transition-transform duration-300" id="cartPanel">
<div class="p-6 border-b">
<div class="flex justify-between items-center">
<h3 class="text-xl font-bold">ตะกร้าสินค้า</h3>
<button onclick="toggleCart()" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times text-xl"></i>
</button>
</div>
</div>
<div class="p-6 overflow-y-auto h-full" style="max-height: calc(100vh - 200px);">
<div id="cartItems" class="space-y-4">
<!-- Cart items will be inserted here -->
</div>
<div class="mt-6 pt-6 border-t">
<div class="flex justify-between text-lg font-bold mb-4">
<span>รวม</span>
<span id="totalPrice">฿0</span>
</div>
<button onclick="showCheckout()" class="w-full bg-amber-600 text-white py-3 rounded-lg hover:bg-amber-700 transition">
ชำระเงิน
</button>
</div>
</div>
</div>
</div>
<!-- Login Modal -->
<div id="loginModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden">
<div class="flex items-center justify-center h-full p-4">
<div class="bg-white rounded-lg p-8 max-w-md w-full">
<h3 class="text-2xl font-bold mb-6">เข้าสู่ระบบ</h3>
<form onsubmit="login(event)">
<div class="mb-4">
<label class="block mb-2">ชื่อผู้ใช้</label>
<input type="text" id="username" required class="w-full p-3 border rounded-lg" placeholder="กรอกชื่อผู้ใช้">
</div>
<div class="mb-6">
<label class="block mb-2">รหัสผ่าน</label>
<input type="password" id="password" required class="w-full p-3 border rounded-lg" placeholder="กรอกรหัสผ่าน">
</div>
<button type="submit" class="w-full bg-amber-600 text-white py-3 rounded-lg hover:bg-amber-700 transition">
เข้าสู่ระบบ
</button>
</form>
<p class="text-center mt-4 text-sm">
ยังไม่มีบัญชี? <a href="#" onclick="showRegister()" class="text-amber-600">สมัครสมาชิก</a>
</p>
<button onclick="closeLoginModal()" class="mt-4 text-gray-500 hover:text-gray-700">
ยกเลิก
</button>
</div>
</div>
</div>
<!-- Checkout Modal -->
<div id="checkoutModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden">
<div class="flex items-center justify-center h-full p-4">
<div class="bg-white rounded-lg p-8 max-w-md w-full">
<h3 class="text-2xl font-bold mb-6">ชำระเงิน</h3>
<div class="mb-6">
<p class="text-lg mb-2">ยอดรวม: <span id="checkoutTotal" class="font-bold">฿0</span></p>
</div>
<div class="mb-6">
<h4 class="font-semibold mb-3">เลือกวิธีการชำระเงิน</h4>
<div class="space-y-3">
<label class="flex items-center p-3 border rounded-lg cursor-pointer hover:bg-amber-50">
<input type="radio" name="payment" value="qr" class="mr-3" checked>
<i class="fas fa-qrcode mr-2 text-amber-600"></i>
<span>QR Code</span>
</label>
<label class="flex items-center p-3 border rounded-lg cursor-pointer hover:bg-amber-50">
<input type="radio" name="payment" value="cash" class="mr-3">
<i class="fas fa-money-bill-wave mr-2 text-amber-600"></i>
<span>เงินสด</span>
</label>
</div>
</div>
<div id="qrCodeContainer" class="mb-6 text-center">
<div id="qrcode" class="mb-4"></div>
<p class="text-sm text-gray-600">สแกน QR Code เพื่อชำระเงิน</p>
</div>
<div id="cashMessage" class="mb-6 hidden">
<p class="text-center text-green-600">
<i class="fas fa-check-circle text-2xl mb-2"></i><br>
รอการรับเงินสดจากพนักงาน
</p>
</div>
<div class="flex space-x-3">
<button onclick="confirmPayment()" class="flex-1 bg-amber-600 text-white py-3 rounded-lg hover:bg-amber-700 transition">
ยืนยันการชำระเงิน
</button>
<button onclick="closeCheckout()" class="flex-1 bg-gray-300 text-gray-700 py-3 rounded-lg hover:bg-gray-400 transition">
ยกเลิก
</button>
</div>
</div>
</div>
</div>
<!-- Notification Container -->
<div id="notificationContainer" class="fixed top-20 right-4 z-50 space-y-2"></div>
<script>
// Menu data will be loaded from data/menu.json
let menuItems = [];
// State
let cart = [];
let currentUser = null;
// Initialize
document.addEventListener('DOMContentLoaded', () => {
loadCart();
loadUser();
loadMenu();
updateCartUI();
});
// Load menu JSON
async function loadMenu() {
try {
const res = await fetch('data/menu.json');
if (!res.ok) throw new Error('ไม่สามารถโหลดเมนูได้');
menuItems = await res.json();
} catch (err) {
console.error('loadMenu error', err);
// Fallback: small inline menu
menuItems = [
{id: 1, name: 'เอสเปรสโซ ฟอเรสต์', price: 45, description: 'เอสเปรสโซเข้มข้น จากเมล็ดคั่วสด', image: 'assets/images/espresso.svg'}
];
showNotification('ไม่สามารถโหลดเมนูจากไฟล์ได้ — ใช้เมนูสำรอง', 'warning');
}
renderMenu();
renderSpecials();
}
// User Management
function loadUser() {
const user = localStorage.getItem('currentUser');
if (user) {
currentUser = JSON.parse(user);
document.getElementById('userDisplay').textContent = `สวัสดี, ${currentUser.username}`;
}
}
function login(event) {
event.preventDefault();
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
// Simple validation (in real app, this would be server-side)
if (username && password) {
currentUser = {username};
localStorage.setItem('currentUser', JSON.stringify(currentUser));
document.getElementById('userDisplay').textContent = `สวัสดี, ${username}`;
closeLoginModal();
showNotification('เข้าสู่ระบบเรียบร้อย', 'success');
}
}
function showLoginModal() {
document.getElementById('loginModal').classList.remove('hidden');
}
function closeLoginModal() {
document.getElementById('loginModal').classList.add('hidden');
}
function showRegister() {
// In a real app, this would show a registration form
showNotification('ฟีเจอร์สมัครสมาชิก กำลังพัฒนา', 'info');
}
// Cart Management
function loadCart() {
const savedCart = localStorage.getItem('cart');
if (savedCart) {
cart = JSON.parse(savedCart);
}
}
function saveCart() {
localStorage.setItem('cart', JSON.stringify(cart));
}
function addToCart(item) {
if (!currentUser) {
showNotification('กรุณาเข้าสู่ระบบก่อนสั่งซื้อ', 'warning');
showLoginModal();
return;
}
const existingItem = cart.find(cartItem => cartItem.id === item.id);
if (existingItem) {
existingItem.quantity++;
} else {
cart.push({...item, quantity: 1});
}
saveCart();
updateCartUI();
showNotification('เพิ่มแล้ว — อยู่ในตะกร้าของคุณ', 'success');
}
function removeFromCart(itemId) {
cart = cart.filter(item => item.id !== itemId);
saveCart();
updateCartUI();
showNotification('ลบออกจากตะกร้าเรียบร้อย', 'info');
}
function updateQuantity(itemId, change) {
const item = cart.find(cartItem => cartItem.id === itemId);
if (item) {
item.quantity += change;
if (item.quantity <= 0) {
removeFromCart(itemId);
} else {
saveCart();
updateCartUI();
}
}
}
function updateCartUI() {
const cartCount = cart.reduce((sum, item) => sum + item.quantity, 0);
const totalPrice = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
document.getElementById('cartCount').textContent = cartCount;
document.getElementById('totalPrice').textContent = `฿${totalPrice}`;
renderCartItems();
}
function renderCartItems() {
const cartItemsContainer = document.getElementById('cartItems');
if (cart.length === 0) {
cartItemsContainer.innerHTML = '<p class="text-gray-500 text-center">ตะกร้าว่าง</p>';
return;
}
cartItemsContainer.innerHTML = cart.map(item => `
<div class="flex items-center justify-between p-3 border rounded-lg">
<div class="flex-1">
<h4 class="font-semibold">${item.name}</h4>
<p class="text-sm text-gray-600">฿${item.price}</p>
</div>
<div class="flex items-center space-x-2">
<button onclick="updateQuantity(${item.id}, -1)" class="w-8 h-8 bg-gray-200 rounded-full hover:bg-gray-300">
<i class="fas fa-minus text-xs"></i>
</button>
<span class="w-8 text-center">${item.quantity}</span>
<button onclick="updateQuantity(${item.id}, 1)" class="w-8 h-8 bg-gray-200 rounded-full hover:bg-gray-300">
<i class="fas fa-plus text-xs"></i>
</button>
<button onclick="removeFromCart(${item.id})" class="ml-2 text-red-500 hover:text-red-700">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
`).join('');
}
function toggleCart() {
const cartModal = document.getElementById('cartModal');
const cartPanel = document.getElementById('cartPanel');
if (cartModal.classList.contains('hidden')) {
cartModal.classList.remove('hidden');
setTimeout(() => {
cartPanel.classList.remove('translate-x-full');
}, 10);
} else {
cartPanel.classList.add('translate-x-full');
setTimeout(() => {
cartModal.classList.add('hidden');
}, 300);
}
}
// Menu Rendering
function renderMenu() {
const menuGrid = document.getElementById('menuGrid');
menuGrid.innerHTML = menuItems.map(item => `
<div class="coffee-card rounded-lg overflow-hidden">
<img src="${item.image}" alt="${item.name}" class="w-full h-48 object-cover">
<div class="p-4">
<h4 class="font-bold text-lg mb-2">${item.name}</h4>
<p class="text-gray-600 mb-3">${item.description}</p>
<div class="flex justify-between items-center">
<span class="text-xl font-bold text-amber-700">฿${item.price}</span>
<button onclick="addToCart(${JSON.stringify(item).replace(/"/g, '"')})"
class="bg-amber-600 text-white px-4 py-2 rounded-lg hover:bg-amber-700 transition">
<i class="fas fa-plus mr-1"></i>เพิ่มลงตะกร้า
</button>
</div>
</div>
</div>
`).join('');
}
function renderSpecials() {
const specialsGrid = document.getElementById('specialsGrid');
if (!specialsGrid) return;
const specials = menuItems.filter(i => i.special);
if (specials.length === 0) {
specialsGrid.innerHTML = '<p class="text-gray-600">ยังไม่มีเมนูพิเศษในขณะนี้</p>';
return;
}
specialsGrid.innerHTML = specials.map(item => `
<div class="coffee-card p-4">
<img src="${item.image}" alt="${item.name}" class="w-full h-40 object-cover rounded mb-4">
<h4 class="font-semibold">${item.name}</h4>
<p class="text-sm text-gray-600 mb-2">${item.description}</p>
<div class="flex justify-between items-center">
<span class="font-bold">฿${item.price}</span>
<button onclick="addToCart(${JSON.stringify(item).replace(/"/g, '"')})" class="text-amber-700">สั่งเลย</button>
</div>
</div>
`).join('');
}
// Delivery Options
function toggleDeliveryOptions(type) {
const addressDiv = document.getElementById('deliveryAddress');
if (type === 'delivery') {
addressDiv.classList.remove('hidden');
} else {
addressDiv.classList.add('hidden');
}
}
// Checkout
function showCheckout() {
if (cart.length === 0) {
showNotification('ตะกร้าว่าง', 'warning');
return;
}
const checkoutModal = document.getElementById('checkoutModal');
const totalPrice = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
document.getElementById('checkoutTotal').textContent = `฿${totalPrice}`;
checkoutModal.classList.remove('hidden');
// Generate QR Code
new QRCode(document.getElementById("qrcode"), {
text: `Forest Brew Payment - Total: ${totalPrice}`,
width: 200,
height: 200
});
}
function closeCheckout() {
document.getElementById('checkoutModal').classList.add('hidden');
}
function confirmPayment() {
const paymentMethod = document.querySelector('input[name="payment"]:checked').value;
const totalPrice = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
if (paymentMethod === 'qr') {
document.getElementById('qrCodeContainer').classList.add('hidden');
document.getElementById('cashMessage').classList.remove('hidden');
showNotification('กรุณาสแกน QR Code เพื่อดำเนินการชำระเงิน', 'info');
} else {
showNotification('รอการยืนยันการรับเงินสดจากพนักงาน', 'info');
}
// Clear cart after payment
setTimeout(() => {
cart = [];
saveCart();
updateCartUI();
closeCheckout();
showNotification('ชำระเงินเรียบร้อย ขอบคุณที่อุดหนุน', 'success');
}, 3000);
}
// Notifications
function showNotification(message, type = 'info') {
const notificationContainer = document.getElementById('notificationContainer');
const notification = document.createElement('div');
const colors = {
success: 'bg-green-500',
warning: 'bg-yellow-500',
error: 'bg-red-500',
info: 'bg-blue-500'
};
notification.className = `notification ${colors[type]} text-white px-6 py-3 rounded-lg shadow-lg`;
notification.innerHTML = `
<div class="flex items-center">
<i class="fas fa-${type === 'success' ? 'check-circle' : type === 'warning' ? 'exclamation-triangle' : 'info-circle'} mr-2"></i>
<span>${message}</span>
</div>
`;
notificationContainer.appendChild(notification);
setTimeout(() => {
notification.style.opacity = '0';
setTimeout(() => notification.remove(), 300);
}, 3000);
}
// Close modals when clicking outside
document.getElementById('cartModal').addEventListener('click', (e) => {
if (e.target.id === 'cartModal') {
toggleCart();
}
});
document.getElementById('loginModal').addEventListener('click', (e) => {
if (e.target.id === 'loginModal') {
closeLoginModal();
}
});
document.getElementById('checkoutModal').addEventListener('click', (e) => {
if (e.target.id === 'checkoutModal') {
closeCheckout();
}
});
</script>
<!-- Footer -->
<footer class="bg-amber-900 text-white mt-12">
<div class="container mx-auto px-4 py-10">
<div class="md:flex md:justify-between">
<div class="mb-6 md:mb-0">
<h4 class="text-xl font-bold">Forest Brew</h4>
<p class="text-sm opacity-90">กาแฟวินเทจในอ้อมกอดธรรมชาติ — คุณภาพจากไร่สู่ถ้วย</p>
<p class="text-sm mt-2">123 ถนนป่าสัก ต.ป่าสัก อ.ป่าสัก จ.ลพบุรี</p>
</div>
<div class="grid grid-cols-2 gap-6 md:grid-cols-3">
<div>
<h5 class="font-semibold">เมนู</h5>
<ul class="text-sm mt-2 space-y-1">
<li><a href="#menuGrid" class="hover:underline">เมนูแนะนำ</a></li>
<li><a href="#specials" class="hover:underline">เมนูพิเศษ</a></li>
</ul>
</div>
<div>
<h5 class="font-semibold">บริการ</h5>
<ul class="text-sm mt-2 space-y-1">
<li><a href="#about" class="hover:underline">เกี่ยวกับเรา</a></li>
<li><a href="#contact" class="hover:underline">ติดต่อ</a></li>
</ul>
</div>
<div>
<h5 class="font-semibold">ติดตาม</h5>
<div class="flex space-x-3 mt-2">
<a href="#" class="text-white"><i class="fab fa-facebook"></i></a>
<a href="#" class="text-white"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
</div>
<div class="mt-8 border-t border-amber-700 pt-4 text-sm text-center opacity-90">
© <span id="year"></span> Forest Brew. สงวนลิขสิทธิ์
</div>
</div>
</footer>
<script>document.getElementById('year').textContent = new Date().getFullYear();</script>
</body>
</html>