|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>FoodDash - Food Delivery App</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"> |
|
|
<style> |
|
|
|
|
|
.custom-scroll::-webkit-scrollbar { |
|
|
width: 6px; |
|
|
height: 6px; |
|
|
} |
|
|
.custom-scroll::-webkit-scrollbar-track { |
|
|
background: #f1f1f1; |
|
|
border-radius: 10px; |
|
|
} |
|
|
.custom-scroll::-webkit-scrollbar-thumb { |
|
|
background: #888; |
|
|
border-radius: 10px; |
|
|
} |
|
|
.custom-scroll::-webkit-scrollbar-thumb:hover { |
|
|
background: #555; |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(10px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
.animate-fadeIn { |
|
|
animation: fadeIn 0.3s ease-out forwards; |
|
|
} |
|
|
|
|
|
|
|
|
.diet-checkbox:checked + .diet-label { |
|
|
background-color: #f59e0b; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes pulse { |
|
|
0% { transform: scale(1); } |
|
|
50% { transform: scale(1.1); } |
|
|
100% { transform: scale(1); } |
|
|
} |
|
|
.pulse { |
|
|
animation: pulse 1.5s infinite; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 font-sans"> |
|
|
|
|
|
<div class="max-w-md mx-auto bg-white shadow-lg rounded-lg overflow-hidden relative" style="height: 100vh; max-height: 800px;"> |
|
|
|
|
|
<div class="bg-orange-500 p-4 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-map-marker-alt text-white"></i> |
|
|
<div> |
|
|
<p class="text-xs text-white">Delivery to</p> |
|
|
<p class="text-white font-medium">Home • 15-20 min</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<button id="cartBtn" class="bg-white text-orange-500 p-2 rounded-full relative"> |
|
|
<i class="fas fa-shopping-basket"></i> |
|
|
<span id="cartCount" class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="p-4"> |
|
|
<div class="relative"> |
|
|
<input type="text" placeholder="Search for restaurants or dishes..." class="w-full bg-gray-100 rounded-full py-2 px-4 pl-10 focus:outline-none focus:ring-2 focus:ring-orange-300"> |
|
|
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="px-4 pb-2 overflow-x-auto custom-scroll"> |
|
|
<div class="flex space-x-3"> |
|
|
<button class="category-btn bg-orange-500 text-white px-4 py-1 rounded-full text-sm whitespace-nowrap">All</button> |
|
|
<button class="category-btn bg-gray-100 text-gray-700 px-4 py-1 rounded-full text-sm whitespace-nowrap">Burger</button> |
|
|
<button class="category-btn bg-gray-100 text-gray-700 px-4 py-1 rounded-full text-sm whitespace-nowrap">Pizza</button> |
|
|
<button class="category-btn bg-gray-100 text-gray-700 px-4 py-1 rounded-full text-sm whitespace-nowrap">Sushi</button> |
|
|
<button class="category-btn bg-gray-100 text-gray-700 px-4 py-1 rounded-full text-sm whitespace-nowrap">Salad</button> |
|
|
<button class="category-btn bg-gray-100 text-gray-700 px-4 py-1 rounded-full text-sm whitespace-nowrap">Dessert</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mx-4 my-2 bg-gradient-to-r from-orange-400 to-orange-600 rounded-xl p-4 text-white relative overflow-hidden"> |
|
|
<div class="relative z-10"> |
|
|
<h3 class="font-bold text-lg">Special Offer!</h3> |
|
|
<p class="text-sm">Get 20% off on your first order</p> |
|
|
<button class="mt-2 bg-white text-orange-500 text-xs px-3 py-1 rounded-full">Order Now</button> |
|
|
</div> |
|
|
<div class="absolute right-0 bottom-0 opacity-20"> |
|
|
<i class="fas fa-utensils text-6xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="px-4 py-2 overflow-y-auto custom-scroll" style="height: calc(100% - 240px);"> |
|
|
<h3 class="font-bold text-lg mb-3">Popular Near You</h3> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-2 gap-3" id="foodItems"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="absolute bottom-0 left-0 right-0 bg-white border-t border-gray-200 flex justify-around py-2"> |
|
|
<button class="text-orange-500 flex flex-col items-center"> |
|
|
<i class="fas fa-home"></i> |
|
|
<span class="text-xs">Home</span> |
|
|
</button> |
|
|
<button class="text-gray-500 flex flex-col items-center"> |
|
|
<i class="fas fa-search"></i> |
|
|
<span class="text-xs">Search</span> |
|
|
</button> |
|
|
<button class="text-gray-500 flex flex-col items-center"> |
|
|
<i class="fas fa-heart"></i> |
|
|
<span class="text-xs">Favorites</span> |
|
|
</button> |
|
|
<button class="text-gray-500 flex flex-col items-center"> |
|
|
<i class="fas fa-user"></i> |
|
|
<span class="text-xs">Profile</span> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="cartModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"> |
|
|
<div class="bg-white rounded-t-xl w-full max-w-md absolute bottom-0 max-h-[80vh] overflow-hidden"> |
|
|
<div class="p-4 border-b border-gray-200 flex justify-between items-center"> |
|
|
<h3 class="font-bold text-lg">Your Order</h3> |
|
|
<button id="closeCart" class="text-gray-500"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="overflow-y-auto custom-scroll" style="max-height: 60vh;"> |
|
|
<div id="cartItems" class="divide-y divide-gray-200"> |
|
|
|
|
|
<div class="p-4 text-center text-gray-500"> |
|
|
<i class="fas fa-shopping-basket text-4xl mb-2 opacity-30"></i> |
|
|
<p>Your cart is empty</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4 border-t border-gray-200 bg-white"> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span>Subtotal</span> |
|
|
<span id="subtotal">$0.00</span> |
|
|
</div> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span>Delivery Fee</span> |
|
|
<span>$2.99</span> |
|
|
</div> |
|
|
<div class="flex justify-between font-bold text-lg"> |
|
|
<span>Total</span> |
|
|
<span id="total">$2.99</span> |
|
|
</div> |
|
|
<button id="checkoutBtn" class="w-full bg-orange-500 text-white py-3 rounded-lg mt-3 disabled:opacity-50" disabled> |
|
|
Checkout |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="foodDetailModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"> |
|
|
<div class="bg-white rounded-xl w-full max-w-md mx-4 max-h-[80vh] overflow-hidden"> |
|
|
<div class="relative"> |
|
|
<img id="detailImage" src="https://via.placeholder.com/400x200" alt="Food" class="w-full h-48 object-cover"> |
|
|
<button id="closeDetail" class="absolute top-2 right-2 bg-white text-gray-800 p-2 rounded-full shadow"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="p-4 overflow-y-auto custom-scroll" style="max-height: calc(80vh - 200px);"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<h3 id="detailName" class="font-bold text-xl">Food Name</h3> |
|
|
<p id="detailDescription" class="text-gray-600 text-sm mt-1">Description goes here</p> |
|
|
</div> |
|
|
<span id="detailPrice" class="font-bold text-orange-500">$12.99</span> |
|
|
</div> |
|
|
|
|
|
<div class="mt-4"> |
|
|
<h4 class="font-medium mb-2">Dietary Preferences</h4> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<div> |
|
|
<input type="checkbox" id="vegetarian" class="diet-checkbox hidden"> |
|
|
<label for="vegetarian" class="diet-label bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-xs flex items-center"> |
|
|
<i class="fas fa-leaf mr-1"></i> Vegetarian |
|
|
</label> |
|
|
</div> |
|
|
<div> |
|
|
<input type="checkbox" id="vegan" class="diet-checkbox hidden"> |
|
|
<label for="vegan" class="diet-label bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-xs flex items-center"> |
|
|
<i class="fas fa-seedling mr-1"></i> Vegan |
|
|
</label> |
|
|
</div> |
|
|
<div> |
|
|
<input type="checkbox" id="glutenFree" class="diet-checkbox hidden"> |
|
|
<label for="glutenFree" class="diet-label bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-xs flex items-center"> |
|
|
<i class="fas fa-bread-slice mr-1"></i> Gluten Free |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-4"> |
|
|
<h4 class="font-medium mb-2">Special Instructions</h4> |
|
|
<textarea placeholder="Any special requests?" class="w-full border border-gray-300 rounded-lg p-2 text-sm focus:outline-none focus:ring-1 focus:ring-orange-300"></textarea> |
|
|
</div> |
|
|
|
|
|
<div class="mt-4 flex items-center justify-between"> |
|
|
<div class="flex items-center border border-gray-300 rounded-lg"> |
|
|
<button id="decreaseQty" class="px-3 py-1 text-gray-600"> |
|
|
<i class="fas fa-minus"></i> |
|
|
</button> |
|
|
<span id="quantity" class="px-3">1</span> |
|
|
<button id="increaseQty" class="px-3 py-1 text-gray-600"> |
|
|
<i class="fas fa-plus"></i> |
|
|
</button> |
|
|
</div> |
|
|
<button id="addToCart" class="bg-orange-500 text-white px-4 py-2 rounded-lg"> |
|
|
Add to Cart - <span id="totalPrice">$12.99</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const foodItems = [ |
|
|
{ |
|
|
id: 1, |
|
|
name: "Classic Burger", |
|
|
description: "Beef patty with cheese, lettuce, and special sauce", |
|
|
price: 8.99, |
|
|
image: "https://images.unsplash.com/photo-1568901346375-23c9450c58cd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8YnVyZ2VyfGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60" |
|
|
}, |
|
|
{ |
|
|
id: 2, |
|
|
name: "Pepperoni Pizza", |
|
|
description: "Classic pizza with mozzarella and pepperoni", |
|
|
price: 12.99, |
|
|
image: "https://images.unsplash.com/photo-1628840042765-356cda07504e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cGVwcGVyb25pJTIwcGl6emF8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60" |
|
|
}, |
|
|
{ |
|
|
id: 3, |
|
|
name: "California Roll", |
|
|
description: "Crab, avocado and cucumber sushi roll", |
|
|
price: 10.50, |
|
|
image: "https://images.unsplash.com/photo-1617196035154-1ed7f6ac3f91?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3VzaGl8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60" |
|
|
}, |
|
|
{ |
|
|
id: 4, |
|
|
name: "Caesar Salad", |
|
|
description: "Romaine lettuce, croutons, parmesan with Caesar dressing", |
|
|
price: 7.99, |
|
|
image: "https://images.unsplash.com/photo-1546793665-c74683f339c1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8c2FsYWR8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60" |
|
|
}, |
|
|
{ |
|
|
id: 5, |
|
|
name: "Chocolate Brownie", |
|
|
description: "Warm chocolate brownie with vanilla ice cream", |
|
|
price: 5.99, |
|
|
image: "https://images.unsplash.com/photo-1564355808539-22fda35bed7e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8ZGVzc2VydHxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60" |
|
|
}, |
|
|
{ |
|
|
id: 6, |
|
|
name: "Chicken Wings", |
|
|
description: "Crispy fried wings with your choice of sauce", |
|
|
price: 9.99, |
|
|
image: "https://images.unsplash.com/photo-1567620832903-9fc6e53a2ead?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8Y2hpY2tlbiUyMHdpbmdzfGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60" |
|
|
} |
|
|
]; |
|
|
|
|
|
|
|
|
let cart = []; |
|
|
let currentFoodItem = null; |
|
|
let quantity = 1; |
|
|
|
|
|
|
|
|
const foodItemsContainer = document.getElementById('foodItems'); |
|
|
const cartModal = document.getElementById('cartModal'); |
|
|
const cartBtn = document.getElementById('cartBtn'); |
|
|
const closeCart = document.getElementById('closeCart'); |
|
|
const cartItems = document.getElementById('cartItems'); |
|
|
const cartCount = document.getElementById('cartCount'); |
|
|
const subtotal = document.getElementById('subtotal'); |
|
|
const total = document.getElementById('total'); |
|
|
const checkoutBtn = document.getElementById('checkoutBtn'); |
|
|
const foodDetailModal = document.getElementById('foodDetailModal'); |
|
|
const closeDetail = document.getElementById('closeDetail'); |
|
|
const detailName = document.getElementById('detailName'); |
|
|
const detailDescription = document.getElementById('detailDescription'); |
|
|
const detailPrice = document.getElementById('detailPrice'); |
|
|
const detailImage = document.getElementById('detailImage'); |
|
|
const quantityElement = document.getElementById('quantity'); |
|
|
const totalPrice = document.getElementById('totalPrice'); |
|
|
const increaseQty = document.getElementById('increaseQty'); |
|
|
const decreaseQty = document.getElementById('decreaseQty'); |
|
|
const addToCart = document.getElementById('addToCart'); |
|
|
|
|
|
|
|
|
function init() { |
|
|
renderFoodItems(); |
|
|
setupEventListeners(); |
|
|
} |
|
|
|
|
|
|
|
|
function renderFoodItems() { |
|
|
foodItemsContainer.innerHTML = ''; |
|
|
|
|
|
foodItems.forEach((item, index) => { |
|
|
const foodItem = document.createElement('div'); |
|
|
foodItem.className = 'bg-white rounded-lg overflow-hidden shadow-sm border border-gray-100 animate-fadeIn'; |
|
|
foodItem.style.animationDelay = `${index * 0.05}s`; |
|
|
foodItem.innerHTML = ` |
|
|
<div class="relative"> |
|
|
<img src="${item.image}" alt="${item.name}" class="w-full h-32 object-cover"> |
|
|
<button class="absolute top-2 right-2 bg-white text-orange-500 p-1 rounded-full shadow food-detail-btn" data-id="${item.id}"> |
|
|
<i class="fas fa-plus text-xs"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="p-3"> |
|
|
<h4 class="font-medium">${item.name}</h4> |
|
|
<p class="text-gray-500 text-xs mt-1 truncate">${item.description}</p> |
|
|
<div class="flex justify-between items-center mt-2"> |
|
|
<span class="font-bold text-orange-500">$${item.price.toFixed(2)}</span> |
|
|
<span class="text-yellow-500 text-xs"> |
|
|
<i class="fas fa-star"></i> 4.5 |
|
|
</span> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
foodItemsContainer.appendChild(foodItem); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function setupEventListeners() { |
|
|
|
|
|
cartBtn.addEventListener('click', () => { |
|
|
cartModal.classList.remove('hidden'); |
|
|
renderCartItems(); |
|
|
}); |
|
|
|
|
|
closeCart.addEventListener('click', () => { |
|
|
cartModal.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.food-detail-btn').forEach(btn => { |
|
|
btn.addEventListener('click', (e) => { |
|
|
const id = parseInt(e.currentTarget.getAttribute('data-id')); |
|
|
showFoodDetail(id); |
|
|
}); |
|
|
}); |
|
|
|
|
|
closeDetail.addEventListener('click', () => { |
|
|
foodDetailModal.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
increaseQty.addEventListener('click', () => { |
|
|
quantity++; |
|
|
updateQuantity(); |
|
|
}); |
|
|
|
|
|
decreaseQty.addEventListener('click', () => { |
|
|
if (quantity > 1) { |
|
|
quantity--; |
|
|
updateQuantity(); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
addToCart.addEventListener('click', () => { |
|
|
if (currentFoodItem) { |
|
|
addItemToCart(currentFoodItem, quantity); |
|
|
foodDetailModal.classList.add('hidden'); |
|
|
quantity = 1; |
|
|
updateCartCount(); |
|
|
|
|
|
|
|
|
cartBtn.classList.add('pulse'); |
|
|
setTimeout(() => { |
|
|
cartBtn.classList.remove('pulse'); |
|
|
}, 3000); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.category-btn').forEach(btn => { |
|
|
btn.addEventListener('click', (e) => { |
|
|
document.querySelectorAll('.category-btn').forEach(b => { |
|
|
b.classList.remove('bg-orange-500', 'text-white'); |
|
|
b.classList.add('bg-gray-100', 'text-gray-700'); |
|
|
}); |
|
|
e.currentTarget.classList.remove('bg-gray-100', 'text-gray-700'); |
|
|
e.currentTarget.classList.add('bg-orange-500', 'text-white'); |
|
|
|
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
checkoutBtn.addEventListener('click', () => { |
|
|
alert('Order placed successfully!'); |
|
|
cart = []; |
|
|
updateCartCount(); |
|
|
renderCartItems(); |
|
|
cartModal.classList.add('hidden'); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function showFoodDetail(id) { |
|
|
currentFoodItem = foodItems.find(item => item.id === id); |
|
|
if (currentFoodItem) { |
|
|
detailName.textContent = currentFoodItem.name; |
|
|
detailDescription.textContent = currentFoodItem.description; |
|
|
detailPrice.textContent = `$${currentFoodItem.price.toFixed(2)}`; |
|
|
detailImage.src = currentFoodItem.image; |
|
|
quantityElement.textContent = '1'; |
|
|
totalPrice.textContent = `$${currentFoodItem.price.toFixed(2)}`; |
|
|
foodDetailModal.classList.remove('hidden'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function updateQuantity() { |
|
|
quantityElement.textContent = quantity; |
|
|
if (currentFoodItem) { |
|
|
const total = (currentFoodItem.price * quantity).toFixed(2); |
|
|
totalPrice.textContent = `$${total}`; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function addItemToCart(item, qty) { |
|
|
const existingItem = cart.find(cartItem => cartItem.id === item.id); |
|
|
|
|
|
if (existingItem) { |
|
|
existingItem.quantity += qty; |
|
|
} else { |
|
|
cart.push({ |
|
|
...item, |
|
|
quantity: qty |
|
|
}); |
|
|
} |
|
|
|
|
|
updateCartCount(); |
|
|
renderCartItems(); |
|
|
} |
|
|
|
|
|
|
|
|
function updateCartCount() { |
|
|
const count = cart.reduce((total, item) => total + item.quantity, 0); |
|
|
cartCount.textContent = count; |
|
|
|
|
|
if (count > 0) { |
|
|
cartCount.classList.remove('hidden'); |
|
|
checkoutBtn.disabled = false; |
|
|
} else { |
|
|
cartCount.classList.add('hidden'); |
|
|
checkoutBtn.disabled = true; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function renderCartItems() { |
|
|
if (cart.length === 0) { |
|
|
cartItems.innerHTML = ` |
|
|
<div class="p-4 text-center text-gray-500"> |
|
|
<i class="fas fa-shopping-basket text-4xl mb-2 opacity-30"></i> |
|
|
<p>Your cart is empty</p> |
|
|
</div> |
|
|
`; |
|
|
subtotal.textContent = '$0.00'; |
|
|
total.textContent = '$2.99'; |
|
|
return; |
|
|
} |
|
|
|
|
|
cartItems.innerHTML = ''; |
|
|
|
|
|
let subtotalAmount = 0; |
|
|
|
|
|
cart.forEach(item => { |
|
|
const itemTotal = item.price * item.quantity; |
|
|
subtotalAmount += itemTotal; |
|
|
|
|
|
const cartItem = document.createElement('div'); |
|
|
cartItem.className = 'p-4 flex items-center'; |
|
|
cartItem.innerHTML = ` |
|
|
<div class="flex-shrink-0 w-16 h-16 bg-gray-100 rounded-lg overflow-hidden"> |
|
|
<img src="${item.image}" alt="${item.name}" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="ml-3 flex-grow"> |
|
|
<h4 class="font-medium">${item.name}</h4> |
|
|
<div class="flex justify-between items-center mt-1"> |
|
|
<span class="text-orange-500 font-medium">$${item.price.toFixed(2)}</span> |
|
|
<div class="flex items-center"> |
|
|
<button class="decrease-item px-2 text-gray-500" data-id="${item.id}"> |
|
|
<i class="fas fa-minus text-xs"></i> |
|
|
</button> |
|
|
<span class="mx-2">${item.quantity}</span> |
|
|
<button class="increase-item px-2 text-gray-500" data-id="${item.id}"> |
|
|
<i class="fas fa-plus text-xs"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<button class="remove-item ml-2 text-red-500" data-id="${item.id}"> |
|
|
<i class="fas fa-trash"></i> |
|
|
</button> |
|
|
`; |
|
|
cartItems.appendChild(cartItem); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.increase-item').forEach(btn => { |
|
|
btn.addEventListener('click', (e) => { |
|
|
const id = parseInt(e.currentTarget.getAttribute('data-id')); |
|
|
const item = cart.find(item => item.id === id); |
|
|
if (item) { |
|
|
item.quantity++; |
|
|
updateCartCount(); |
|
|
renderCartItems(); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
document.querySelectorAll('.decrease-item').forEach(btn => { |
|
|
btn.addEventListener('click', (e) => { |
|
|
const id = parseInt(e.currentTarget.getAttribute('data-id')); |
|
|
const itemIndex = cart.findIndex(item => item.id === id); |
|
|
if (itemIndex !== -1) { |
|
|
if (cart[itemIndex].quantity > 1) { |
|
|
cart[itemIndex].quantity--; |
|
|
} else { |
|
|
cart.splice(itemIndex, 1); |
|
|
} |
|
|
updateCartCount(); |
|
|
renderCartItems(); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
document.querySelectorAll('.remove-item').forEach(btn => { |
|
|
btn.addEventListener('click', (e) => { |
|
|
const id = parseInt(e.currentTarget.getAttribute('data-id')); |
|
|
const itemIndex = cart.findIndex(item => item.id === id); |
|
|
if (itemIndex !== -1) { |
|
|
cart.splice(itemIndex, 1); |
|
|
updateCartCount(); |
|
|
renderCartItems(); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const deliveryFee = 2.99; |
|
|
const totalAmount = subtotalAmount + deliveryFee; |
|
|
|
|
|
subtotal.textContent = `$${subtotalAmount.toFixed(2)}`; |
|
|
total.textContent = `$${totalAmount.toFixed(2)}`; |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', init); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=chimpuuuu/hhh" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
