<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Smoothie Paradise - ร้านน้ำปั่นออนไลน์</title>
<link href="https://fonts.googleapis.com/css2?family=Kanit:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Kanit', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
color: #333;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
header {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 20px;
margin-bottom: 30px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 20px;
z-index: 100;
}
.logo {
display: flex;
align-items: center;
gap: 10px;
font-size: 28px;
font-weight: 700;
color: #667eea;
}
.cart-button {
position: relative;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
border: none;
padding: 12px 20px;
border-radius: 50px;
cursor: pointer;
font-family: 'Kanit', sans-serif;
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.cart-button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
.cart-count {
position: absolute;
top: -8px;
right: -8px;
background: #ff4757;
color: white;
border-radius: 50%;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 600;
}
.products-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 25px;
margin-bottom: 30px;
}
.product-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 25px;
text-align: center;
transition: all 0.3s ease;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}
.product-image {
width: 120px;
height: 120px;
border-radius: 50%;
margin: 0 auto 20px;
background: linear-gradient(135deg, #ff9a9e, #fecfef);
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
color: white;
box-shadow: 0 8px 25px rgba(255, 154, 158, 0.3);
}
.product-name {
font-size: 22px;
font-weight: 600;
margin-bottom: 10px;
color: #333;
}
.product-description {
color: #666;
margin-bottom: 15px;
font-size: 14px;
line-height: 1.5;
}
.product-price {
font-size: 28px;
font-weight: 700;
color: #667eea;
margin-bottom: 20px;
}
.add-to-cart {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
border: none;
padding: 12px 25px;
border-radius: 50px;
cursor: pointer;
font-family: 'Kanit', sans-serif;
font-weight: 500;
font-size: 16px;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
margin: 0 auto;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.add-to-cart:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
.cart-sidebar {
position: fixed;
right: -400px;
top: 0;
width: 400px;
height: 100vh;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
padding: 30px;
transition: all 0.3s ease;
z-index: 1000;
overflow-y: auto;
box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
}
.cart-sidebar.open {
right: 0;
}
.cart-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.cart-overlay.open {
opacity: 1;
visibility: visible;
}
.cart-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 2px solid #eee;
}
.cart-title {
font-size: 24px;
font-weight: 600;
color: #333;
}
.close-cart {
background: none;
border: none;
font-size: 24px;
cursor: pointer;
color: #666;
padding: 5px;
transition: color 0.3s ease;
}
.close-cart:hover {
color: #333;
}
.cart-item {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
padding: 15px;
background: rgba(102, 126, 234, 0.05);
border-radius: 15px;
border: 1px solid rgba(102, 126, 234, 0.1);
}
.cart-item-image {
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, #ff9a9e, #fecfef);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: white;
flex-shrink: 0;
}
.cart-item-info {
flex: 1;
}
.cart-item-name {
font-weight: 500;
margin-bottom: 5px;
}
.cart-item-price {
color: #667eea;
font-weight: 600;
}
.quantity-controls {
display: flex;
align-items: center;
gap: 10px;
}
.qty-btn {
background: #667eea;
color: white;
border: none;
width: 30px;
height: 30px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
transition: all 0.3s ease;
}
.qty-btn:hover {
background: #5a67d8;
transform: scale(1.1);
}
.quantity {
font-weight: 600;
min-width: 30px;
text-align: center;
}
.cart-total {
margin-top: 30px;
padding-top: 20px;
border-top: 2px solid #eee;
}
.total-row {
display: flex;
justify-content: space-between;
margin-bottom: 15px;
font-size: 18px;
}
.total-final {
font-weight: 700;
font-size: 24px;
color: #667eea;
border-top: 1px solid #eee;
padding-top: 15px;
}
.checkout-btn {
width: 100%;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
border: none;
padding: 15px;
border-radius: 50px;
font-family: 'Kanit', sans-serif;
font-weight: 600;
font-size: 18px;
cursor: pointer;
margin-top: 20px;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.checkout-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
.empty-cart {
text-align: center;
color: #666;
font-size: 16px;
margin-top: 50px;
}
.empty-cart-icon {
font-size: 64px;
color: #ddd;
margin-bottom: 20px;
}
@media (max-width: 768px) {
.cart-sidebar {
width: 100%;
right: -100%;
}
.container {
padding: 10px;
}
header {
padding: 15px;
flex-direction: column;
gap: 15px;
}
.products-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.product-card {
padding: 20px;
}
}
.notification {
position: fixed;
top: 20px;
right: 20px;
background: #4caf50;
color: white;
padding: 15px 20px;
border-radius: 10px;
font-weight: 500;
z-index: 1001;
transform: translateX(400px);
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
}
.notification.show {
transform: translateX(0);
}
</style>
</head>
<body>
<div class="container">
<header>
<div class="logo">
<span class="material-icons">local_drink</span>
Smoothie Paradise
</div>
<button class="cart-button" onclick="toggleCart()">
<span class="material-icons">shopping_cart</span>
ตะกร้าสินค้า
<span class="cart-count" id="cartCount">0</span>
</button>
</header>
<div class="products-grid" id="productsGrid">
<!-- Products will be generated by JavaScript -->
</div>
</div>
<div class="cart-overlay" id="cartOverlay" onclick="toggleCart()"></div>
<div class="cart-sidebar" id="cartSidebar">
<div class="cart-header">
<h2 class="cart-title">ตะกร้าสินค้า</h2>
<button class="close-cart" onclick="toggleCart()">
<span class="material-icons">close</span>
</button>
</div>
<div id="cartItems"></div>
<div class="cart-total" id="cartTotal" style="display: none;">
<div class="total-row">
<span>ยอดรวม:</span>
<span id="totalAmount">฿0</span>
</div>
<div class="total-row total-final">
<span>ยอดรวมทั้งหมด:</span>
<span id="finalAmount">฿0</span>
</div>
<button class="checkout-btn" onclick="checkout()">
<span class="material-icons">payment</span>
สั่งซื้อตอนนี้
</button>
</div>
<div class="empty-cart" id="emptyCart">
<div class="empty-cart-icon">🛒</div>
<p>ตะกร้าสินค้าว่างเปล่า</p>
<p>เลือกเครื่องดื่มที่คุณชอบเลย!</p>
</div>
</div>
<div class="notification" id="notification"></div>
<script>
// Product data
const products = [
{
id: 1,
name: "สตรอเบอร์รี่ สมูทตี้",
description: "น้ำปั่นสตรอเบอร์รี่สดใหม่ หวานหอม อร่อยเข้มข้น",
price: 69,
icon: "🍓"
},
{
id: 2,
name: "มะม่วง สมูทตี้",
description: "น้ำปั่นมะม่วงสุกหวาน รสชาติเข้มข้น หอมหวนใจ",
price: 75,
icon: "🥭"
},
{
id: 3,
name: "กล้วยหอม สมูทตี้",
description: "น้ำปั่นกล้วยหอมสุก เนื้อเนียนนุ่ม หวานกำลังดี",
price: 59,
icon: "🍌"
},
{
id: 4,
name: "ผลไม้รวม สมูทตี้",
description: "น้ำปั่นผลไม้รวม สีสันสดใส อร่อยครบรส",
price: 85,
icon: "🍹"
},
{
id: 5,
name: "ชาเขียว มัทฉะ",
description: "ชาเขียวมัทฉะแท้ รสชาติกลมกล่อม หอมหวาน",
price: 79,
icon: "🍵"
},
{
id: 6,
name: "กาแฟเย็น",
description: "กาแฟเย็นเข้มข้น หอมกรุ่น ชูใจยามบ่าย",
price: 49,
icon: "☕"
},
{
id: 7,
name: "ชาไทย",
description: "ชาไทยแท้ รสชาติหวานมัน เย็นชื่นใจ",
price: 45,
icon: "🧋"
},
{
id: 8,
name: "น้ำส้มคั้นสด",
description: "น้ำส้มคั้นสดใหม่ วิตามินซีสูง เปรี้ยวหวาน",
price: 55,
icon: "🍊"
}
];
let cart = [];
// Generate products
function generateProducts() {
const productsGrid = document.getElementById('productsGrid');
productsGrid.innerHTML = '';
products.forEach(product => {
const productCard = document.createElement('div');
productCard.className = 'product-card';
productCard.innerHTML = `
<div class="product-image">${product.icon}</div>
<h3 class="product-name">${product.name}</h3>
<p class="product-description">${product.description}</p>
<div class="product-price">฿${product.price}</div>
<button class="add-to-cart" onclick="addToCart(${product.id})">
<span class="material-icons">add_shopping_cart</span>
เพิ่มลงตะกร้า
</button>
`;
productsGrid.appendChild(productCard);
});
}
// Add to cart
function addToCart(productId) {
const product = products.find(p => p.id === productId);
const existingItem = cart.find(item => item.id === productId);
if (existingItem) {
existingItem.quantity += 1;
} else {
cart.push({
...product,
quantity: 1
});
}
updateCartUI();
showNotification(`เพิ่ม ${product.name} ลงตะกร้าแล้ว!`);
}
// Update cart UI
function updateCartUI() {
const cartCount = document.getElementById('cartCount');
const cartItems = document.getElementById('cartItems');
const cartTotal = document.getElementById('cartTotal');
const emptyCart = document.getElementById('emptyCart');
// Update cart count
const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);
cartCount.textContent = totalItems;
if (cart.length === 0) {
cartItems.innerHTML = '';
cartTotal.style.display = 'none';
emptyCart.style.display = 'block';
return;
}
emptyCart.style.display = 'none';
cartTotal.style.display = 'block';
// Generate cart items
cartItems.innerHTML = '';
let total = 0;
cart.forEach(item => {
const itemTotal = item.price * item.quantity;
total += itemTotal;
const cartItem = document.createElement('div');
cartItem.className = 'cart-item';
cartItem.innerHTML = `
<div class="cart-item-image">${item.icon}</div>
<div class="cart-item-info">
<div class="cart-item-name">${item.name}</div>
<div class="cart-item-price">฿${item.price}</div>
</div>
<div class="quantity-controls">
<button class="qty-btn" onclick="updateQuantity(${item.id}, -1)">-</button>
<span class="quantity">${item.quantity}</span>
<button class="qty-btn" onclick="updateQuantity(${item.id}, 1)">+</button>
</div>
`;
cartItems.appendChild(cartItem);
});
// Update totals
document.getElementById('totalAmount').textContent = `฿${total}`;
document.getElementById('finalAmount').textContent = `฿${total}`;
}
// Update quantity
function updateQuantity(productId, change) {
const item = cart.find(item => item.id === productId);
if (item) {
item.quantity += change;
if (item.quantity <= 0) {
cart = cart.filter(cartItem => cartItem.id !== productId);
}
updateCartUI();
}
}
// Toggle cart
function toggleCart() {
const cartSidebar = document.getElementById('cartSidebar');
const cartOverlay = document.getElementById('cartOverlay');
cartSidebar.classList.toggle('open');
cartOverlay.classList.toggle('open');
}
// Checkout
function checkout() {
if (cart.length === 0) return;
const total = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
alert(`ขอบคุณสำหรับการสั่งซื้อ!\nยอดรวม: ฿${total}\n\nเราจะติดต่อกลับในไม่ช้า!`);
// Clear cart
cart = [];
updateCartUI();
toggleCart();
}
// Show notification
function showNotification(message) {
const notification = document.getElementById('notification');
notification.textContent = message;
notification.classList.add('show');
setTimeout(() => {
notification.classList.remove('show');
}, 3000);
}
// Initialize
document.addEventListener('DOMContentLoaded', function() {
generateProducts();
updateCartUI();
});
// Close cart when clicking outside
document.addEventListener('click', function(e) {
const cartSidebar = document.getElementById('cartSidebar');
const cartButton = document.querySelector('.cart-button');
if (!cartSidebar.contains(e.target) && !cartButton.contains(e.target) && cartSidebar.classList.contains('open')) {
toggleCart();
}
});
</script>
</body>
</html>