Hugging Face's logo

Spaces:
Yalexis
/
pizza-restaurant
Running

App Files Community
pizza-restaurant / index.html
Yalexis's picture
Yalexis
Add 3 files
1e4cd0e verified
Raw
History Blame Contribute Delete
33.3 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Slice Heaven - Artisanal Pizza Restaurant</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>
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
body {
 font-family: 'Poppins', sans-serif;
 scroll-behavior: smooth;
 }
.hero {
 background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1513104890138-7c749659a591?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
 background-size: cover;
 background-position: center;
 }
.pizza-card:hover {
 transform: translateY(-10px);
 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 }
.pizza-card {
 transition: all 0.3s ease;
 }
.spicy::after {
 content: "🌶️";
 position: absolute;
 top: 10px;
 right: 10px;
 }
.cart-item {
 animation: slideIn 0.3s ease-out;
 }
@keyframes slideIn {
 from {
 opacity: 0;
 transform: translateY(20px);
 }
 to {
 opacity: 1;
 transform: translateY(0);
 }
 }
 </style>
</head>
<body class="bg-gray-50">
 <!-- Navigation -->
 <nav class="bg-red-700 text-white sticky top-0 z-50 shadow-lg">
 <div class="container mx-auto px-4 py-3 flex justify-between items-center">
 <div class="flex items-center space-x-2">
 <i class="fas fa-pizza-slice text-2xl"></i>
 <span class="text-xl font-bold">Slice Heaven</span>
 </div>
 <div class="hidden md:flex space-x-8">
 <a href="#home" class="hover:text-yellow-300 transition">Home</a>
 <a href="#menu" class="hover:text-yellow-300 transition">Menu</a>
 <a href="#about" class="hover:text-yellow-300 transition">About</a>
 <a href="#contact" class="hover:text-yellow-300 transition">Contact</a>
 </div>
 <div class="flex items-center space-x-4">
 <button id="cart-btn" class="relative">
 <i class="fas fa-shopping-cart text-xl"></i>
 <span id="cart-count" class="absolute -top-2 -right-2 bg-yellow-400 text-red-700 rounded-full w-5 h-5 flex items-center justify-center text-xs font-bold">0</span>
 </button>
 <button class="md:hidden" id="mobile-menu-btn">
 <i class="fas fa-bars text-xl"></i>
 </button>
 </div>
 </div>
<!-- Mobile Menu -->
 <div id="mobile-menu" class="hidden md:hidden bg-red-800 px-4 py-2">
 <a href="#home" class="block py-2 hover:text-yellow-300 transition">Home</a>
 <a href="#menu" class="block py-2 hover:text-yellow-300 transition">Menu</a>
 <a href="#about" class="block py-2 hover:text-yellow-300 transition">About</a>
 <a href="#contact" class="block py-2 hover:text-yellow-300 transition">Contact</a>
 </div>
 </nav>
<!-- Shopping Cart Sidebar -->
 <div id="cart-sidebar" class="fixed top-0 right-0 h-full w-80 bg-white shadow-lg transform translate-x-full transition-transform duration-300 z-50 overflow-y-auto">
 <div class="p-4 border-b border-gray-200 flex justify-between items-center">
 <h3 class="text-lg font-bold">Your Order</h3>
 <button id="close-cart" class="text-gray-500 hover:text-red-600">
 <i class="fas fa-times"></i>
 </button>
 </div>
 <div id="cart-items" class="p-4">
 <!-- Cart items will be added here dynamically -->
 <p id="empty-cart-message" class="text-gray-500 text-center py-8">Your cart is empty</p>
 </div>
 <div class="p-4 border-t border-gray-200">
 <div class="flex justify-between mb-4">
 <span class="font-bold">Total:</span>
 <span id="cart-total" class="font-bold">$0.00</span>
 </div>
 <button class="w-full bg-red-600 text-white py-2 rounded-lg hover:bg-red-700 transition">Checkout</button>
 </div>
 </div>
<!-- Hero Section -->
 <section id="home" class="hero min-h-screen flex items-center justify-center text-center text-white">
 <div class="container mx-auto px-4">
 <h1 class="text-4xl md:text-6xl font-bold mb-4">Artisanal Pizza Crafted with Love</h1>
 <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">Hand-tossed dough, premium ingredients, and authentic flavors that will transport you to Naples</p>
 <div class="flex flex-col sm:flex-row justify-center gap-4">
 <a href="#menu" class="bg-yellow-400 text-red-700 font-bold py-3 px-6 rounded-full hover:bg-yellow-300 transition">View Menu</a>
 <a href="#contact" class="bg-transparent border-2 border-white text-white font-bold py-3 px-6 rounded-full hover:bg-white hover:text-red-700 transition">Reserve a Table</a>
 </div>
 </div>
 </section>
<!-- Special Offers -->
 <section class="bg-yellow-50 py-12">
 <div class="container mx-auto px-4">
 <h2 class="text-3xl font-bold text-center mb-8 text-red-700">Today's Specials</h2>
 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
 <div class="bg-white rounded-lg shadow-md overflow-hidden">
 <div class="relative">
 <img src="https://images.unsplash.com/photo-1604382354936-07c5d9983bd3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Margherita Pizza" class="w-full h-48 object-cover">
 <div class="absolute top-0 left-0 bg-red-600 text-white px-3 py-1 font-bold">-20%</div>
 </div>
 <div class="p-4">
 <h3 class="text-xl font-bold mb-2">Truffle Margherita</h3>
 <p class="text-gray-600 mb-4">Classic Margherita with black truffle oil and fresh basil</p>
 <div class="flex justify-between items-center">
 <span class="text-red-600 font-bold">$14.99 <span class="text-gray-400 line-through text-sm">$18.99</span></span>
 <button class="add-to-cart bg-red-600 text-white px-3 py-1 rounded-full hover:bg-red-700 transition" data-name="Truffle Margherita" data-price="14.99">Add to Cart</button>
 </div>
 </div>
 </div>
 <div class="bg-white rounded-lg shadow-md overflow-hidden">
 <div class="relative">
 <img src="https://images.unsplash.com/photo-1620374645498-af6bd681a0bd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Pepperoni Pizza" class="w-full h-48 object-cover">
 <div class="absolute top-0 left-0 bg-red-600 text-white px-3 py-1 font-bold">-15%</div>
 </div>
 <div class="p-4">
 <h3 class="text-xl font-bold mb-2">Spicy Pepperoni</h3>
 <p class="text-gray-600 mb-4">Double pepperoni with jalapeños and our signature spicy sauce</p>
 <div class="flex justify-between items-center">
 <span class="text-red-600 font-bold">$16.99 <span class="text-gray-400 line-through text-sm">$19.99</span></span>
 <button class="add-to-cart bg-red-600 text-white px-3 py-1 rounded-full hover:bg-red-700 transition" data-name="Spicy Pepperoni" data-price="16.99">Add to Cart</button>
 </div>
 </div>
 </div>
 <div class="bg-white rounded-lg shadow-md overflow-hidden">
 <div class="relative">
 <img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Veggie Pizza" class="w-full h-48 object-cover">
 <div class="absolute top-0 left-0 bg-red-600 text-white px-3 py-1 font-bold">-10%</div>
 </div>
 <div class="p-4">
 <h3 class="text-xl font-bold mb-2">Garden Delight</h3>
 <p class="text-gray-600 mb-4">Seasonal vegetables, goat cheese, and balsamic glaze</p>
 <div class="flex justify-between items-center">
 <span class="text-red-600 font-bold">$15.99 <span class="text-gray-400 line-through text-sm">$17.99</span></span>
 <button class="add-to-cart bg-red-600 text-white px-3 py-1 rounded-full hover:bg-red-700 transition" data-name="Garden Delight" data-price="15.99">Add to Cart</button>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Menu Section -->
 <section id="menu" class="py-16 bg-white">
 <div class="container mx-auto px-4">
 <h2 class="text-3xl font-bold text-center mb-4 text-red-700">Our Menu</h2>
 <p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">All pizzas are 12" and made with our signature sourdough crust. Gluten-free and vegan options available.</p>
<div class="flex flex-wrap mb-8 justify-center">
 <button class="menu-filter px-4 py-2 mx-2 rounded-full bg-red-600 text-white" data-category="all">All</button>
 <button class="menu-filter px-4 py-2 mx-2 rounded-full bg-gray-200 hover:bg-red-600 hover:text-white transition" data-category="classic">Classic</button>
 <button class="menu-filter px-4 py-2 mx-2 rounded-full bg-gray-200 hover:bg-red-600 hover:text-white transition" data-category="specialty">Specialty</button>
 <button class="menu-filter px-4 py-2 mx-2 rounded-full bg-gray-200 hover:bg-red-600 hover:text-white transition" data-category="vegetarian">Vegetarian</button>
 <button class="menu-filter px-4 py-2 mx-2 rounded-full bg-gray-200 hover:bg-red-600 hover:text-white transition" data-category="spicy">Spicy</button>
 </div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="menu-items">
 <!-- Menu items will be loaded here -->
 </div>
 </div>
 </section>
<!-- About Section -->
 <section id="about" class="py-16 bg-gray-100">
 <div class="container mx-auto px-4">
 <div class="flex flex-col md:flex-row items-center">
 <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
 <h2 class="text-3xl font-bold mb-4 text-red-700">Our Story</h2>
 <p class="text-gray-700 mb-4">Founded in 2010 by Italian chef Marco Bianchi, Slice Heaven began as a small food truck with a big dream: to bring authentic Neapolitan pizza to the streets of our city.</p>
 <p class="text-gray-700 mb-4">After years of perfecting our craft and building a loyal following, we opened our first brick-and-mortar location in 2015. Today, we continue to honor traditional techniques while innovating with seasonal, locally-sourced ingredients.</p>
 <p class="text-gray-700 mb-6">Every pizza is hand-tossed, topped with care, and baked in our wood-fired oven at 900°F for that perfect char and chew.</p>
 <a href="#contact" class="inline-block bg-red-600 text-white font-bold py-2 px-6 rounded-full hover:bg-red-700 transition">Visit Us</a>
 </div>
 <div class="md:w-1/2">
 <div class="relative">
 <img src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Pizza chef" class="rounded-lg shadow-lg w-full">
 <div class="absolute -bottom-4 -right-4 bg-yellow-400 text-red-700 p-4 rounded-lg shadow-lg">
 <p class="font-bold text-xl">Marco Bianchi</p>
 <p class="text-sm">Founder & Head Chef</p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Testimonials -->
 <section class="py-16 bg-red-700 text-white">
 <div class="container mx-auto px-4">
 <h2 class="text-3xl font-bold text-center mb-12">What Our Customers Say</h2>
 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
 <div class="bg-white text-gray-800 p-6 rounded-lg shadow-lg">
 <div class="flex items-center mb-4">
 <div class="text-yellow-400 mr-2">
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 </div>
 </div>
 <p class="mb-4 italic">"The best pizza I've had outside of Italy! The crust is perfectly chewy with just the right amount of char."</p>
 <div class="flex items-center">
 <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah J." class="w-10 h-10 rounded-full mr-3">
 <div>
 <p class="font-bold">Sarah J.</p>
 <p class="text-sm text-gray-600">Regular Customer</p>
 </div>
 </div>
 </div>
 <div class="bg-white text-gray-800 p-6 rounded-lg shadow-lg">
 <div class="flex items-center mb-4">
 <div class="text-yellow-400 mr-2">
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 </div>
 </div>
 <p class="mb-4 italic">"The Spicy Diavola is my go-to. Just the right amount of heat and the quality of ingredients is unmatched."</p>
 <div class="flex items-center">
 <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Michael T." class="w-10 h-10 rounded-full mr-3">
 <div>
 <p class="font-bold">Michael T.</p>
 <p class="text-sm text-gray-600">Food Blogger</p>
 </div>
 </div>
 </div>
 <div class="bg-white text-gray-800 p-6 rounded-lg shadow-lg">
 <div class="flex items-center mb-4">
 <div class="text-yellow-400 mr-2">
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="fas fa-star-half-alt"></i>
 </div>
 </div>
 <p class="mb-4 italic">"As a vegetarian, I appreciate the creative veggie options. The mushroom truffle pizza is divine!"</p>
 <div class="flex items-center">
 <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emma L." class="w-10 h-10 rounded-full mr-3">
 <div>
 <p class="font-bold">Emma L.</p>
 <p class="text-sm text-gray-600">First-time Visitor</p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Contact Section -->
 <section id="contact" class="py-16 bg-white">
 <div class="container mx-auto px-4">
 <h2 class="text-3xl font-bold text-center mb-4 text-red-700">Visit Us</h2>
 <p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">We'd love to serve you! Reserve a table or order for pickup.</p>
<div class="flex flex-col md:flex-row gap-8">
 <div class="md:w-1/2">
 <div class="bg-gray-100 p-6 rounded-lg shadow-md mb-6">
 <h3 class="text-xl font-bold mb-4 text-red-700">Hours</h3>
 <ul class="space-y-2">
 <li class="flex justify-between border-b border-gray-200 pb-2">
 <span>Monday - Thursday</span>
 <span>11am - 10pm</span>
 </li>
 <li class="flex justify-between border-b border-gray-200 pb-2">
 <span>Friday - Saturday</span>
 <span>11am - 11pm</span>
 </li>
 <li class="flex justify-between">
 <span>Sunday</span>
 <span>12pm - 9pm</span>
 </li>
 </ul>
 </div>
<div class="bg-gray-100 p-6 rounded-lg shadow-md">
 <h3 class="text-xl font-bold mb-4 text-red-700">Location</h3>
 <p class="mb-4"><i class="fas fa-map-marker-alt text-red-600 mr-2"></i> 123 Pizza Street, Naples District</p>
 <p class="mb-4"><i class="fas fa-phone text-red-600 mr-2"></i> (555) 123-4567</p>
 <p class="mb-4"><i class="fas fa-envelope text-red-600 mr-2"></i> hello@sliceheaven.com</p>
<div class="mt-6">
 <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.215573291234!2d-73.9878449241646!3d40.74844097138992!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259a9b3117469%3A0xd134e199a405a163!2sEmpire%20State%20Building!5e0!3m2!1sen!2sus!4v1689876423581!5m2!1sen!2sus" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" class="rounded-lg"></iframe>
 </div>
 </div>
 </div>
<div class="md:w-1/2">
 <div class="bg-gray-100 p-6 rounded-lg shadow-md h-full">
 <h3 class="text-xl font-bold mb-4 text-red-700">Reserve a Table</h3>
 <form id="reservation-form" class="space-y-4">
 <div>
 <label for="name" class="block mb-1 font-medium">Full Name</label>
 <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-600">
 </div>
 <div>
 <label for="email" class="block mb-1 font-medium">Email</label>
 <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-600">
 </div>
 <div>
 <label for="phone" class="block mb-1 font-medium">Phone Number</label>
 <input type="tel" id="phone" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-600">
 </div>
 <div class="grid grid-cols-2 gap-4">
 <div>
 <label for="date" class="block mb-1 font-medium">Date</label>
 <input type="date" id="date" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-600">
 </div>
 <div>
 <label for="time" class="block mb-1 font-medium">Time</label>
 <input type="time" id="time" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-600">
 </div>
 </div>
 <div>
 <label for="guests" class="block mb-1 font-medium">Number of Guests</label>
 <select id="guests" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-600">
 <option value="1">1 person</option>
 <option value="2">2 people</option>
 <option value="3">3 people</option>
 <option value="4">4 people</option>
 <option value="5">5 people</option>
 <option value="6">6+ people</option>
 </select>
 </div>
 <div>
 <label for="special-requests" class="block mb-1 font-medium">Special Requests</label>
 <textarea id="special-requests" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-600"></textarea>
 </div>
 <button type="submit" class="w-full bg-red-600 text-white py-3 rounded-lg font-bold hover:bg-red-700 transition">Reserve Now</button>
 </form>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Newsletter -->
 <section class="py-12 bg-yellow-50">
 <div class="container mx-auto px-4 text-center">
 <h2 class="text-2xl font-bold mb-2 text-red-700">Join Our Pizza Club</h2>
 <p class="text-gray-600 mb-6 max-w-2xl mx-auto">Sign up for our newsletter and get exclusive offers, new menu announcements, and a free appetizer on your birthday!</p>
 <form class="max-w-md mx-auto flex">
 <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-l-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-red-600">
 <button type="submit" class="bg-red-600 text-white px-6 py-3 rounded-r-lg font-bold hover:bg-red-700 transition">Subscribe</button>
 </form>
 </div>
 </section>
<!-- Footer -->
 <footer class="bg-gray-900 text-white py-12">
 <div class="container mx-auto px-4">
 <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
 <div>
 <h3 class="text-xl font-bold mb-4 flex items-center">
 <i class="fas fa-pizza-slice text-red-600 mr-2"></i> Slice Heaven
 </h3>
 <p class="text-gray-400">Authentic Neapolitan pizza crafted with passion and the finest ingredients since 2010.</p>
 </div>
 <div>
 <h4 class="font-bold mb-4">Quick Links</h4>
 <ul class="space-y-2">
 <li><a href="#home" class="text-gray-400 hover:text-white transition">Home</a></li>
 <li><a href="#menu" class="text-gray-400 hover:text-white transition">Menu</a></li>
 <li><a href="#about" class="text-gray-400 hover:text-white transition">About Us</a></li>
 <li><a href="#contact" class="text-gray-400 hover:text-white transition">Contact</a></li>
 </ul>
 </div>
 <div>
 <h4 class="font-bold mb-4">Contact</h4>
 <ul class="space-y-2 text-gray-400">
 <li class="flex items-center">
 <i class="fas fa-map-marker-alt mr-2 text-red-600"></i> 123 Pizza Street
 </li>
 <li class="flex items-center">
 <i class="fas fa-phone mr-2 text-red-600"></i> (555) 123-4567
 </li>
 <li class="flex items-center">
 <i class="fas fa-envelope mr-2 text-red-600"></i> hello@sliceheaven.com
 </li>
 </ul>
 </div>
 <div>
 <h4 class="font-bold mb-4">Follow Us</h4>
 <div class="flex space-x-4">
 <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-red-600 transition">
 <i class="fab fa-facebook-f"></i>
 </a>
 <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-red-600 transition">
 <i class="fab fa-instagram"></i>
 </a>
 <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-red-600 transition">
 <i class="fab fa-twitter"></i>
 </a>
 <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-red-600 transition">
 <i class="fab fa-tiktok"></i>
 </a>
 </div>
 <div class="mt-6">
 <h4 class="font-bold mb-2">Download Our App</h4>
 <div class="flex space-x-2">
 <a href="#" class="flex items-center bg-black text-white px-3 py-1 rounded">
 <i class="fab fa-apple mr-1"></i> App Store
 </a>
 <a href="#" class="flex items-center bg-black text-white px-3 py-1 rounded">
 <i class="fab fa-google-play mr-1"></i> Play Store
 </a>
 </div>
 </div>
 </div>
 </div>
 <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
 <p>&copy; 2023 Slice Heaven. All rights reserved.</p>
 </div>
 </div>
 </footer>
<script>
 // Mobile menu toggle
 const mobileMenuBtn = document.getElementById('mobile-menu-btn');
 const mobileMenu = document.getElementById('mobile-menu');
mobileMenuBtn.addEventListener('click', () => {
 mobileMenu.classList.toggle('hidden');
 });
// Cart functionality
 const cartBtn = document.getElementById('cart-btn');
 const cartSidebar = document.getElementById('cart-sidebar');
 const closeCart = document.getElementById('close-cart');
 const cartItemsContainer = document.getElementById('cart-items');
 const emptyCartMessage = document.getElementById('empty-cart-message');
 const cartTotal = document.getElementById('cart-total');
 const cartCount = document.getElementById('cart-count');
let cart = [];
cartBtn.addEventListener('click', () => {
 cartSidebar.classList.remove('translate-x-full');
 });
closeCart.addEventListener('click', () => {
 cartSidebar.classList.add('translate-x-full');
 });
// Add to cart buttons
 const addToCartButtons = document.querySelectorAll('.add-to-cart');
addToCartButtons.forEach(button => {
 button.addEventListener('click', () => {
 const name = button.getAttribute('data-name');
 const price = parseFloat(button.getAttribute('data-price'));
addToCart(name, price);
 });
 });
function addToCart(name, price) {
 // Check if item already exists in cart
 const existingItem = cart.find(item => item.name === name);
if (existingItem) {
 existingItem.quantity += 1;
 } else {
 cart.push({
 name: name,
 price: price,
 quantity: 1
 });
 }
updateCart();
// Show cart sidebar when adding an item
 cartSidebar.classList.remove('translate-x-full');
// Animation feedback
 const btn = event.target;
 btn.innerHTML = '<i class="fas fa-check mr-1"></i> Added';
 btn.classList.remove('bg-red-600', 'hover:bg-red-700');
 btn.classList.add('bg-green-500', 'hover:bg-green-600');
setTimeout(() => {
 btn.innerHTML = 'Add to Cart';
 btn.classList.remove('bg-green-500', 'hover:bg-green-600');
 btn.classList.add('bg-red-600', 'hover:bg-red-700');
 }, 1500);
 }
function updateCart() {
 // Update cart items display
 if (cart.length === 0) {
 emptyCartMessage.classList.remove('hidden');
 cartItemsContainer.innerHTML = '';
 } else {
 emptyCartMessage.classList.add('hidden');
let itemsHTML = '';
 let total = 0;
cart.forEach(item => {
 const itemTotal = item.price * item.quantity;
 total += itemTotal;
itemsHTML += `
 <div class="cart-item mb-4 pb-4 border-b border-gray-200">
 <div class="flex justify-between items-start">
 <div>
 <h4 class="font-bold">${item.name}</h4>
 <p class="text-gray-600">$${item.price.toFixed(2)} each</p>
 </div>
 <div class="flex items-center">
 <button class="decrease-quantity px-2 py-1 bg-gray-200 rounded-l" data-name="${item.name}">-</button>
 <span class="px-3 py-1 bg-gray-100">${item.quantity}</span>
 <button class="increase-quantity px-2 py-1 bg-gray-200 rounded-r" data-name="${item.name}">+</button>
 </div>
 <div class="font-bold">$${itemTotal.toFixed(2)}</div>
 </div>
 <button class="remove-item mt-2 text-red-600 text-sm" data-name="${item.name}">
 <i class="fas fa-trash-alt mr-1"></i> Remove
 </button>
 </div>
 `;
 });
cartItemsContainer.innerHTML = itemsHTML;
// Add event listeners to new buttons
 document.querySelectorAll('.decrease-quantity').forEach(button => {
 button.addEventListener('click', () => {
 const name = button.getAttribute('data-name');
 updateQuantity(name, -1);
 });
 });
document.querySelectorAll('.increase-quantity').forEach(button => {
 button.addEventListener('click', () => {
 const name = button.getAttribute('data-name');
 updateQuantity(name, 1);
 });
 });
document.querySelectorAll('.remove
</html>