Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Muddy Bites - Premium Chocolate Desserts</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| --primary-color: #3d2f1f; | |
| --secondary-color: #8b4513; | |
| --accent-color: #d2691e; | |
| --light-cream: #f5e6d3; | |
| --dark-chocolate: #2c1810; | |
| --milk-chocolate: #7b5a3a; | |
| --white-chocolate: #f8f4e6; | |
| --success: #4caf50; | |
| --danger: #f44336; | |
| --warning: #ff9800; | |
| --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1); | |
| --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); | |
| --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| background: linear-gradient(135deg, #f5e6d3 0%, #faf8f3 100%); | |
| color: var(--dark-chocolate); | |
| line-height: 1.6; | |
| overflow-x: hidden; | |
| } | |
| /* Header Styles */ | |
| header { | |
| background: linear-gradient(135deg, var(--dark-chocolate), var(--primary-color)); | |
| color: white; | |
| padding: 1rem 0; | |
| position: sticky; | |
| top: 0; | |
| z-index: 1000; | |
| box-shadow: var(--shadow-lg); | |
| animation: slideDown 0.5s ease-out; | |
| } | |
| @keyframes slideDown { | |
| from { | |
| transform: translateY(-100%); | |
| opacity: 0; | |
| } | |
| to { | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| } | |
| .header-container { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| padding: 0 2rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| font-size: 1.8rem; | |
| font-weight: bold; | |
| text-decoration: none; | |
| color: white; | |
| transition: transform 0.3s ease; | |
| } | |
| .logo:hover { | |
| transform: scale(1.05); | |
| } | |
| .logo-icon { | |
| width: 40px; | |
| height: 40px; | |
| background: var(--accent-color); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.5rem; | |
| } | |
| nav { | |
| display: flex; | |
| gap: 2rem; | |
| align-items: center; | |
| } | |
| .nav-links { | |
| display: flex; | |
| gap: 1.5rem; | |
| list-style: none; | |
| } | |
| .nav-links a { | |
| color: white; | |
| text-decoration: none; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| padding: 0.5rem 0; | |
| } | |
| .nav-links a::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background: var(--accent-color); | |
| transition: width 0.3s ease; | |
| } | |
| .nav-links a:hover::after { | |
| width: 100%; | |
| } | |
| .cart-button { | |
| background: var(--accent-color); | |
| color: white; | |
| border: none; | |
| padding: 0.75rem 1.5rem; | |
| border-radius: 50px; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| font-size: 1rem; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| } | |
| .cart-button:hover { | |
| background: var(--secondary-color); | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .cart-count { | |
| background: var(--danger); | |
| color: white; | |
| border-radius: 50%; | |
| width: 24px; | |
| height: 24px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 0.8rem; | |
| position: absolute; | |
| top: -8px; | |
| right: -8px; | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.7); | |
| } | |
| 70% { | |
| box-shadow: 0 0 0 10px rgba(244, 67, 54, 0); | |
| } | |
| 100% { | |
| box-shadow: 0 0 0 0 rgba(244, 67, 54, 0); | |
| } | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| background: linear-gradient(135deg, var(--dark-chocolate), var(--primary-color)); | |
| padding: 4rem 2rem; | |
| text-align: center; | |
| color: white; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hero::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| left: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: radial-gradient(circle, rgba(210, 105, 30, 0.1) 0%, transparent 70%); | |
| animation: rotate 30s linear infinite; | |
| } | |
| @keyframes rotate { | |
| from { | |
| transform: rotate(0deg); | |
| } | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| .hero-content { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .hero h1 { | |
| font-size: 3.5rem; | |
| margin-bottom: 1rem; | |
| animation: fadeInUp 0.8s ease-out; | |
| } | |
| .hero p { | |
| font-size: 1.3rem; | |
| margin-bottom: 2rem; | |
| opacity: 0.9; | |
| animation: fadeInUp 0.8s ease-out 0.2s both; | |
| } | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .cta-button { | |
| background: var(--accent-color); | |
| color: white; | |
| border: none; | |
| padding: 1rem 2.5rem; | |
| font-size: 1.1rem; | |
| border-radius: 50px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| animation: fadeInUp 0.8s ease-out 0.4s both; | |
| text-decoration: none; | |
| display: inline-block; | |
| } | |
| .cta-button:hover { | |
| background: var(--secondary-color); | |
| transform: scale(1.05); | |
| box-shadow: var(--shadow-xl); | |
| } | |
| /* Filter Section */ | |
| .filter-section { | |
| max-width: 1400px; | |
| margin: 2rem auto; | |
| padding: 0 2rem; | |
| } | |
| .filter-container { | |
| background: white; | |
| padding: 1.5rem; | |
| border-radius: 15px; | |
| box-shadow: var(--shadow-md); | |
| display: flex; | |
| gap: 1rem; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| } | |
| .filter-group { | |
| display: flex; | |
| gap: 0.5rem; | |
| } | |
| .filter-btn { | |
| background: var(--light-cream); | |
| color: var(--dark-chocolate); | |
| border: 2px solid transparent; | |
| padding: 0.5rem 1rem; | |
| border-radius: 25px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| font-size: 0.95rem; | |
| } | |
| .filter-btn:hover { | |
| background: var(--accent-color); | |
| color: white; | |
| transform: translateY(-2px); | |
| } | |
| .filter-btn.active { | |
| background: var(--secondary-color); | |
| color: white; | |
| border-color: var(--primary-color); | |
| } | |
| .search-box { | |
| margin-left: auto; | |
| position: relative; | |
| flex: 1; | |
| max-width: 300px; | |
| } | |
| .search-box input { | |
| width: 100%; | |
| padding: 0.5rem 2.5rem 0.5rem 1rem; | |
| border: 2px solid var(--light-cream); | |
| border-radius: 25px; | |
| font-size: 0.95rem; | |
| transition: all 0.3s ease; | |
| } | |
| .search-box input:focus { | |
| outline: none; | |
| border-color: var(--accent-color); | |
| box-shadow: 0 0 0 3px rgba(210, 105, 30, 0.1); | |
| } | |
| .search-icon { | |
| position: absolute; | |
| right: 1rem; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| color: var(--secondary-color); | |
| } | |
| /* Product Grid */ | |
| .products-section { | |
| max-width: 1400px; | |
| margin: 2rem auto; | |
| padding: 0 2rem; | |
| } | |
| .products-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); | |
| gap: 2rem; | |
| animation: fadeIn 0.8s ease-out; | |
| } | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| } | |
| to { | |
| opacity: 1; | |
| } | |
| } | |
| .product-card { | |
| background: white; | |
| border-radius: 15px; | |
| overflow: hidden; | |
| box-shadow: var(--shadow-md); | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| position: relative; | |
| } | |
| .product-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: var(--shadow-xl); | |
| } | |
| .product-badge { | |
| position: absolute; | |
| top: 1rem; | |
| right: 1rem; | |
| background: var(--danger); | |
| color: white; | |
| padding: 0.25rem 0.75rem; | |
| border-radius: 20px; | |
| font-size: 0.8rem; | |
| font-weight: bold; | |
| z-index: 10; | |
| } | |
| .product-image { | |
| width: 100%; | |
| height: 200px; | |
| object-fit: cover; | |
| transition: transform 0.3s ease; | |
| } | |
| .product-card:hover .product-image { | |
| transform: scale(1.1); | |
| } | |
| .product-info { | |
| padding: 1.5rem; | |
| } | |
| .product-name { | |
| font-size: 1.2rem; | |
| font-weight: bold; | |
| margin-bottom: 0.5rem; | |
| color: var(--dark-chocolate); | |
| } | |
| .product-description { | |
| color: var(--milk-chocolate); | |
| font-size: 0.9rem; | |
| margin-bottom: 1rem; | |
| line-height: 1.4; | |
| } | |
| .product-footer { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .product-price { | |
| font-size: 1.3rem; | |
| font-weight: bold; | |
| color: var(--accent-color); | |
| } | |
| .add-to-cart-btn { | |
| background: var(--secondary-color); | |
| color: white; | |
| border: none; | |
| padding: 0.5rem 1rem; | |
| border-radius: 25px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .add-to-cart-btn:hover { | |
| background: var(--accent-color); | |
| transform: scale(1.05); | |
| } | |
| /* Cart Sidebar */ | |
| .cart-sidebar { | |
| position: fixed; | |
| top: 0; | |
| right: -400px; | |
| width: 400px; | |
| height: 100vh; | |
| background: white; | |
| box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1); | |
| transition: right 0.3s ease; | |
| z-index: 2000; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .cart-sidebar.open { | |
| right: 0; | |
| } | |
| .cart-header { | |
| background: var(--dark-chocolate); | |
| color: white; | |
| padding: 1.5rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .cart-items { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 1rem; | |
| } | |
| .cart-item { | |
| display: flex; | |
| gap: 1rem; | |
| padding: 1rem; | |
| border-bottom: 1px solid var(--light-cream); | |
| animation: slideIn 0.3s ease; | |
| } | |
| @keyframes slideIn { | |
| from { | |
| opacity: 0; | |
| transform: translateX(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| } | |
| .cart-item-image { | |
| width: 60px; | |
| height: 60px; | |
| object-fit: cover; | |
| border-radius: 10px; | |
| } | |
| .cart-item-info { | |
| flex: 1; | |
| } | |
| .cart-item-name { | |
| font-weight: bold; | |
| margin-bottom: 0.25rem; | |
| } | |
| .cart-item-price { | |
| color: var(--accent-color); | |
| font-weight: bold; | |
| } | |
| .cart-item-quantity { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| margin-top: 0.5rem; | |
| } | |
| .quantity-btn { | |
| background: var(--light-cream); | |
| border: none; | |
| width: 25px; | |
| height: 25px; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .quantity-btn:hover { | |
| background: var(--accent-color); | |
| color: white; | |
| } | |
| .cart-footer { | |
| padding: 1.5rem; | |
| background: var(--light-cream); | |
| border-top: 2px solid var(--secondary-color); | |
| } | |
| .cart-total { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 1.3rem; | |
| font-weight: bold; | |
| margin-bottom: 1rem; | |
| } | |
| .checkout-btn { | |
| width: 100%; | |
| background: var(--accent-color); | |
| color: white; | |
| border: none; | |
| padding: 1rem; | |
| border-radius: 10px; | |
| font-size: 1.1rem; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .checkout-btn:hover { | |
| background: var(--secondary-color); | |
| transform: scale(1.02); | |
| } | |
| .close-cart { | |
| background: none; | |
| border: none; | |
| color: white; | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| transition: transform 0.3s ease; | |
| } | |
| .close-cart:hover { | |
| transform: rotate(90deg); | |
| } | |
| /* Overlay */ | |
| .overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0, 0, 0, 0.5); | |
| display: none; | |
| z-index: 1999; | |
| } | |
| .overlay.active { | |
| display: block; | |
| } | |
| /* Toast Notification */ | |
| .toast { | |
| position: fixed; | |
| bottom: -100px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background: var(--success); | |
| color: white; | |
| padding: 1rem 2rem; | |
| border-radius: 50px; | |
| box-shadow: var(--shadow-lg); | |
| transition: bottom 0.3s ease; | |
| z-index: 3000; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .toast.show { | |
| bottom: 30px; | |
| } | |
| /* Footer */ | |
| footer { | |
| background: var(--dark-chocolate); | |
| color: white; | |
| padding: 3rem 2rem 1rem; | |
| margin-top: 4rem; | |
| } | |
| .footer-content { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 2rem; | |
| margin-bottom: 2rem; | |
| } | |
| .footer-section h3 { | |
| margin-bottom: 1rem; | |
| color: var(--accent-color); | |
| } | |
| .footer-section ul { | |
| list-style: none; | |
| } | |
| .footer-section ul li { | |
| margin-bottom: 0.5rem; | |
| } | |
| .footer-section a { | |
| color: var(--light-cream); | |
| text-decoration: none; | |
| transition: color 0.3s ease; | |
| } | |
| .footer-section a:hover { | |
| color: var(--accent-color); | |
| } | |
| .footer-bottom { | |
| text-align: center; | |
| padding-top: 2rem; | |
| border-top: 1px solid var(--milk-chocolate); | |
| } | |
| .built-with { | |
| color: var(--accent-color); | |
| text-decoration: none; | |
| font-weight: bold; | |
| transition: color 0.3s ease; | |
| } | |
| .built-with:hover { | |
| color: var(--light-cream); | |
| } | |
| /* Mobile Menu */ | |
| .mobile-menu-btn { | |
| display: none; | |
| background: none; | |
| border: none; | |
| color: white; | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 768px) { | |
| .header-container { | |
| flex-wrap: wrap; | |
| } | |
| .nav-links { | |
| display: none; | |
| width: 100%; | |
| flex-direction: column; | |
| gap: 1rem; | |
| margin-top: 1rem; | |
| padding-top: 1rem; | |
| border-top: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| .nav-links.active { | |
| display: flex; | |
| } | |
| .mobile-menu-btn { | |
| display: block; | |
| } | |
| .hero h1 { | |
| font-size: 2.5rem; | |
| } | |
| .hero p { | |
| font-size: 1.1rem; | |
| } | |
| .cart-sidebar { | |
| width: 100%; | |
| right: -100%; | |
| } | |
| .products-grid { | |
| grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); | |
| gap: 1rem; | |
| } | |
| .filter-container { | |
| flex-direction: column; | |
| align-items: stretch; | |
| } | |
| .search-box { | |
| max-width: 100%; | |
| } | |
| } | |
| /* Loading Animation */ | |
| .loading { | |
| display: inline-block; | |
| width: 20px; | |
| height: 20px; | |
| border: 3px solid rgba(255, 255, 255, 0.3); | |
| border-radius: 50%; | |
| border-top-color: white; | |
| animation: spin 1s ease-in-out infinite; | |
| } | |
| @keyframes spin { | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header> | |
| <div class="header-container"> | |
| <a href="#" class="logo"> | |
| <div class="logo-icon">🍫</div> | |
| <span>Muddy Bites</span> | |
| </a> | |
| <nav> | |
| <ul class="nav-links" id="navLinks"> | |
| <li><a href="#home">Home</a></li> | |
| <li><a href="#products">Products</a></li> | |
| <li><a href="#about">About</a></li> | |
| <li><a href="#contact">Contact</a></li> | |
| </ul> | |
| <button class="cart-button" onclick="toggleCart()"> | |
| 🛒 Cart | |
| <span class="cart-count" id="cartCount">0</span> | |
| </button> | |
| <button class="mobile-menu-btn" onclick="toggleMobileMenu()">☰</button> | |
| </nav> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero" id="home"> | |
| <div class="hero-content"> | |
| <h1>Indulge in Chocolate Perfection</h1> | |
| <p>Handcrafted brownies, truffles, and chocolate treats made with love</p> | |
| <button class="cta-button" onclick="scrollToProducts()">Shop Now</button> | |
| </div> | |
| </section> | |
| <!-- Filter Section --> | |
| <section class="filter-section"> | |
| <div class="filter-container"> | |
| <div class="filter-group"> | |
| <button class="filter-btn active" onclick="filterProducts('all')">All Products</button> | |
| <button class="filter-btn" onclick="filterProducts('brownies')">Brownies</button> | |
| <button class="filter-btn" onclick="filterProducts('truffles')">Truffles</button> | |
| <button class="filter-btn" onclick="filterProducts('cakes')">Cakes</button> | |
| <button class="filter-btn" onclick="filterProducts('special')">Special</button> | |
| </div> | |
| <div class="search-box"> | |
| <input type="text" placeholder="Search products..." id="searchInput" onkeyup="searchProducts()"> | |
| <span class="search-icon">🔍</span> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Products Section --> | |
| <section class="products-section" id="products"> | |
| <div class="products-grid" id="productsGrid"> | |
| <!-- Products will be dynamically inserted here --> | |
| </div> | |
| </section> | |
| <!-- Cart Sidebar --> | |
| <div class="cart-sidebar" id="cartSidebar"> | |
| <div class="cart-header"> | |
| <h2>Your Cart</h2> | |
| <button class="close-cart" onclick="toggleCart()">✕</button> | |
| </div> | |
| <div class="cart-items" id="cartItems"> | |
| <!-- Cart items will be dynamically inserted here --> | |
| </div> | |
| <div class="cart-footer"> | |
| <div class="cart-total"> | |
| <span>Total:</span> | |
| <span id="cartTotal">$0.00</span> | |
| </div> | |
| <button class="checkout-btn" onclick="checkout()">Proceed to Checkout</button> | |
| </div> | |
| </div> | |
| <!-- Overlay --> | |
| <div class="overlay" id="overlay" onclick="toggleCart()"></div> | |
| <!-- Toast Notification --> | |
| <div class="toast" id="toast"> | |
| <span>✓</span> | |
| <span id="toastMessage">Item added to cart!</span> | |
| </div> | |
| <!-- Footer --> | |
| <footer> | |
| <div class="footer-content"> | |
| <div class="footer-section"> | |
| <h3>About Muddy Bites</h3> | |
| <p>We're passionate about creating the most delicious chocolate treats using the finest ingredients and | |
| traditional recipes.</p> | |
| </div> | |
| <div class="footer-section"> | |
| <h3>Quick Links</h3> | |
| <ul> | |
| <li><a href="#products">Shop</a></li> | |
| <li><a href="#about">About Us</a></li> | |
| <li><a href="#contact">Contact</a></li> | |
| <li><a href="#faq">FAQ</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-section"> | |
| <h3>Customer Service</h3> | |
| <ul> | |
| <li><a href="#shipping">Shipping Info</a></li> | |
| <li><a href="#returns">Returns</a></li> | |
| <li><a href="#privacy">Privacy Policy</a></li> | |
| <li><a href="#terms">Terms of Service</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-section"> | |
| <h3>Connect With Us</h3> | |
| <p>📧 info@muddybites.com</p> | |
| <p>📞 1-800-CHOCO</p> | |
| <p>📍 123 Sweet Street, Cocoa City</p> | |
| </div> | |
| </div> | |
| <div class="footer-bottom"> | |
| <p>© 2024 Muddy Bites. All rights reserved. | <a href="https://huggingface.co/spaces/akhaliq/anycoder" | |
| target="_blank" class="built-with">Built with anycoder</a></p> | |
| </div> | |
| </footer> | |
| <script> | |
| // Product Data | |
| const products = [ | |
| { | |
| id: 1, | |
| name: "Classic Brownie Box", | |
| category: "brownies", | |
| price: 24.99, | |
| description: "Rich, fudgy brownies with chocolate chips", | |
| image: "https://picsum.photos/seed/brownie1/300/200", | |
| badge: "Best Seller" | |
| }, | |
| { | |
| id: 2, | |
| name: "Belgian Truffle Collection", | |
| category: "truffles", | |
| price: 34.99, | |
| description: "12 premium dark chocolate truffles", | |
| image: "https://picsum.photos/seed/truffle1/300/200", | |
| badge: "Premium" | |
| }, | |
| { | |
| id: 3, | |
| name: "Chocolate Lava Cake", | |
| category: "cakes", | |
| price: 18.99, | |
| description: "Warm cake with molten chocolate center", | |
| image: "https://picsum.photos/seed/cake1/300/200" | |
| }, | |
| { | |
| id: 4, | |
| name: "Nutty Brownie Mix", | |
| category: "brownies", | |
| price: 22.99, | |
| description: "Brownies with walnuts and pecans", | |
| image: "https://picsum.photos/seed/brownie2/300/200" | |
| }, | |
| { | |
| id: 5, | |
| name: "Mint Chocolate Truffles", | |
| category: "truffles", | |
| price: 28.99, | |
| description: "Refreshing mint-filled dark chocolate", | |
| image: "https://picsum.photos/seed/truffle2/300/200", | |
| badge: "New" | |
| }, | |
| { | |
| id: 6, | |
| name: "Triple Chocolate Cake", | |
| category: "cakes", | |
| price: 45.99, | |
| description: "Three layers of pure chocolate bliss", | |
| image: "https://picsum.photos/seed/cake2/300/200" | |
| }, | |
| { | |
| id: 7, | |
| name: "Salted Caramel Brownies", | |
| category: "brownies", | |
| price: 26.99, | |
| description: "Sweet and salty perfection", | |
| image: "https://picsum.photos/seed/brownie3/300/200", | |
| badge: "Limited" | |
| }, | |
| { | |
| id: 8, | |
| name: "Raspberry Truffle Box", | |
| category: "truffles", | |
| price: 32.99, | |
| description: "Dark chocolate with raspberry filling", | |
| image: "https://picsum.photos/seed/truffle3/300/200" | |
| }, | |
| { | |
| id: 9, | |
| name: "Chocolate Cheesecake", | |
| category: "cakes", | |
| price: 38.99, | |
| description: "Creamy cheesecake with chocolate crust", | |
| image: "https://picsum.photos/seed/cake3/300/200" | |
| }, | |
| { | |
| id: 10, | |
| name: "Ultimate Brownie Tower", | |
| category: "special", | |
| price: 89.99, | |
| description: "3-tier brownie masterpiece", | |
| image: "https://picsum.photos/seed/special1/300/200", | |
| badge: "Exclusive" | |
| }, | |
| { | |
| id: 11, | |
| name: "Chocolate Dipped Strawberries", | |
| category: "special", | |
| price: 29.99, | |
| description: "Fresh berries in premium chocolate", | |
| image: "https://picsum.photos/seed/special2/300/200" | |
| }, | |
| { | |
| id: 12, | |
| name: "Chocolate Gift Basket", | |
| category: "special", | |
| price: 99.99, | |
| description: "Complete chocolate experience", | |
| image: "https://picsum.photos/seed/special3/300/200", | |
| badge: "Gift" | |
| } | |
| ]; | |
| // Cart State | |
| let cart = []; | |
| let currentFilter = 'all'; | |
| // Initialize App | |
| document.addEventListener('DOMContentLoaded', function() { | |
| renderProducts(products); | |
| updateCartUI(); | |
| }); | |
| // Render Products | |
| function renderProducts(productsToRender) { | |
| const grid = document.getElementById('productsGrid'); | |
| grid.innerHTML = ''; | |
| productsToRender.forEach((product, index) => { | |
| const card = document.createElement('div'); | |
| card.className = 'product-card'; | |
| card.style.animationDelay = `${index * 0.1}s`; | |
| card.innerHTML = ` | |
| ${product.badge ? `<div class="product-badge">${product.badge}</div>` : ''} | |
| <img src="${product.image}" alt="${product.name}" class="product-image"> | |
| <div class="product-info"> | |
| <h3 class="product-name">${product.name}</h3> | |
| <p class="product-description">${product.description}</p> | |
| <div class="product-footer"> | |
| <span class="product-price">$${product.price.toFixed(2)}</span> | |
| <button class="add-to-cart-btn" onclick="addToCart(${product.id})"> | |
| <span>+</span> Add | |
| </button> | |
| </div> | |
| </div> | |
| `; | |
| grid.appendChild(card); | |
| }); | |
| } | |
| // Filter Products | |
| function filterProducts(category) { | |
| currentFilter = category; | |
| // Update active button | |
| document.querySelectorAll('.filter-btn').forEach(btn => { | |
| btn.classList.remove('active'); | |
| }); | |
| event.target.classList.add('active'); | |
| // Filter and render | |
| const filtered = category === 'all' | |
| ? products | |
| : products.filter(p => p.category === category); | |
| renderProducts(filtered); | |
| } | |
| // Search Products | |
| function searchProducts() { | |
| const searchTerm = document.getElementById('searchInput').value.toLowerCase(); | |
| const filtered = products.filter(p => | |
| p.name.toLowerCase().includes(searchTerm) || | |
| p.description.toLowerCase().includes(searchTerm) | |
| ); | |
| renderProducts(filtered); | |
| } | |
| // 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++; | |
| } else { | |
| cart.push({ | |
| ...product, | |
| quantity: 1 | |
| }); | |
| } | |
| updateCartUI(); | |
| showToast(`${product.name} added to cart!`); | |
| } | |
| // Update Cart UI | |
| function updateCartUI() { | |
| const cartCount = document.getElementById('cartCount'); | |
| const cartItems = document.getElementById('cartItems'); | |
| const cartTotal = document.getElementById('cartTotal'); | |
| // Update count | |
| const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0); | |
| cartCount.textContent = totalItems; | |
| // Update items | |
| cartItems.innerHTML = ''; | |
| if (cart.length === 0) { | |
| cartItems.innerHTML = '<p style="text-align: center; padding: 2rem; color: #999;">Your cart is empty</p>'; | |
| } else { | |
| cart.forEach(item => { | |
| const cartItem = document.createElement('div'); | |
| cartItem.className = 'cart-item'; | |
| cartItem.innerHTML = ` | |
| <img src="${item.image}" alt="${item.name}" class="cart-item-image"> | |
| <div class="cart-item-info"> | |
| <div class="cart-item-name">${item.name}</div> | |
| <div class="cart-item-price">$${item.price.toFixed(2)}</div> | |
| <div class="cart-item-quantity"> | |
| <button class="quantity-btn" onclick="updateQuantity(${item.id}, -1)">-</button> | |
| <span>${item.quantity}</span> | |
| <button class="quantity-btn" onclick="updateQuantity(${item.id}, 1)">+</button> | |
| </div> | |
| </div> | |
| `; | |
| cartItems.appendChild(cartItem); | |
| }); | |
| } | |
| // Update total | |
| const total = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0); | |
| cartTotal.textContent = `$${total.toFixed(2)}`; | |
| } | |
| // 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(item => item.id !== productId); | |
| } | |
| updateCartUI(); | |
| } | |
| } | |
| // Toggle Cart | |
| function toggleCart() { | |
| const sidebar = document.getElementById('cartSidebar'); | |
| const overlay = document.getElementById('overlay'); | |
| sidebar.classList.toggle('open'); | |
| overlay.classList.toggle('active'); | |
| } | |
| // Toggle Mobile Menu | |
| function toggleMobileMenu() { | |
| const navLinks = document.getElementById('navLinks'); | |
| navLinks.classList.toggle('active'); | |
| } | |
| // Scroll to Products | |
| function scrollToProducts() { | |
| document.getElementById('products').scrollIntoView({ behavior: 'smooth' }); | |
| } | |
| // Show Toast | |
| function showToast(message) { | |
| const toast = document.getElementById('toast'); | |
| const toastMessage = document.getElementById('toastMessage'); | |
| toastMessage.textContent = message; | |
| toast.classList.add('show'); | |
| setTimeout(() => { | |
| toast.classList.remove('show'); | |
| }, 3000); | |
| } | |
| // Checkout | |
| function checkout() { | |
| if (cart.length === 0) { | |
| showToast('Your cart is empty!'); | |
| return; | |
| } | |
| const total = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0); | |
| showToast(`Order placed! Total: $${total.toFixed(2)}`); | |
| // Clear cart after a delay | |
| setTimeout(() => { | |
| cart = []; | |
| updateCartUI(); | |
| toggleCart(); | |
| }, 2000); | |
| } | |
| // Smooth scroll for navigation links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const target = document.querySelector(this.getAttribute('href')); | |
| if (target) { | |
| target.scrollIntoView({ behavior: 'smooth' }); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |