|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>FreshBites | Delicious Food Delivered</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> |
|
|
|
|
|
.hero-image { |
|
|
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('https://images.unsplash.com/photo-1504674900247-0877df9cc836?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80'); |
|
|
background-size: cover; |
|
|
background-position: center; |
|
|
height: 80vh; |
|
|
} |
|
|
|
|
|
.product-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.cart-item-remove:hover { |
|
|
color: #ef4444; |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; } |
|
|
to { opacity: 1; } |
|
|
} |
|
|
|
|
|
.fade-in { |
|
|
animation: fadeIn 0.5s ease-in-out; |
|
|
} |
|
|
|
|
|
|
|
|
::-webkit-scrollbar { |
|
|
width: 8px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-track { |
|
|
background: #f1f1f1; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb { |
|
|
background: #f59e0b; |
|
|
border-radius: 4px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb:hover { |
|
|
background: #d97706; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 font-sans"> |
|
|
|
|
|
<nav class="bg-white shadow-md sticky top-0 z-50"> |
|
|
<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-utensils text-2xl text-orange-500"></i> |
|
|
<a href="#" class="text-2xl font-bold text-gray-800 hover:text-orange-500">FreshBites</a> |
|
|
</div> |
|
|
|
|
|
<div class="hidden md:flex space-x-6"> |
|
|
<a href="#home" class="text-gray-800 hover:text-orange-500 font-medium">Home</a> |
|
|
<a href="#shop" class="text-gray-800 hover:text-orange-500 font-medium">Shop</a> |
|
|
<a href="#about" class="text-gray-800 hover:text-orange-500 font-medium">About</a> |
|
|
<a href="#contact" class="text-gray-800 hover:text-orange-500 font-medium">Contact</a> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center space-x-4"> |
|
|
<button id="cart-btn" class="relative text-gray-800 hover:text-orange-500"> |
|
|
<i class="fas fa-shopping-cart text-xl"></i> |
|
|
<span id="cart-count" class="absolute -top-2 -right-2 bg-orange-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span> |
|
|
</button> |
|
|
<button id="account-btn" class="text-gray-800 hover:text-orange-500"> |
|
|
<i class="fas fa-user text-xl"></i> |
|
|
</button> |
|
|
<button id="mobile-menu-btn" class="md:hidden text-gray-800 hover:text-orange-500"> |
|
|
<i class="fas fa-bars text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="mobile-menu" class="hidden md:hidden bg-white py-2 px-4 shadow-lg"> |
|
|
<a href="#home" class="block py-2 text-gray-800 hover:text-orange-500">Home</a> |
|
|
<a href="#shop" class="block py-2 text-gray-800 hover:text-orange-500">Shop</a> |
|
|
<a href="#about" class="block py-2 text-gray-800 hover:text-orange-500">About</a> |
|
|
<a href="#contact" class="block py-2 text-gray-800 hover:text-orange-500">Contact</a> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section id="home" class="hero-image flex items-center justify-center text-center text-white"> |
|
|
<div class="px-4"> |
|
|
<h1 class="text-4xl md:text-6xl font-bold mb-4 fade-in">Fresh. Local. Delivered.</h1> |
|
|
<p class="text-xl md:text-2xl mb-8 fade-in">Delicious meals made with love and the finest ingredients</p> |
|
|
<a href="#shop" class="bg-orange-500 hover:bg-orange-600 text-white font-bold py-3 px-8 rounded-full text-lg transition duration-300 transform hover:scale-105 inline-block fade-in">Order Now</a> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-12 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Our Categories</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8"> |
|
|
|
|
|
<div class="bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300"> |
|
|
<img src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" alt="Meals" class="w-full h-48 object-cover"> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-2">Main Meals</h3> |
|
|
<p class="text-gray-600 mb-4">Hearty dishes that satisfy your hunger</p> |
|
|
<a href="#shop" class="text-orange-500 font-medium hover:text-orange-600">Browse Meals →</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300"> |
|
|
<img src="https://images.unsplash.com/photo-1512621776951-a57141f2eefd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Salads" class="w-full h-48 object-cover"> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-2">Healthy Salads</h3> |
|
|
<p class="text-gray-600 mb-4">Fresh, crisp and full of nutrients</p> |
|
|
<a href="#shop" class="text-orange-500 font-medium hover:text-orange-600">Browse Salads →</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300"> |
|
|
<img src="https://images.unsplash.com/photo-1563805042-7684c019e1cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1527&q=80" alt="Desserts" class="w-full h-48 object-cover"> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-2">Sweet Desserts</h3> |
|
|
<p class="text-gray-600 mb-4">Indulge your sweet tooth guilt-free</p> |
|
|
<a href="#shop" class="text-orange-500 font-medium hover:text-orange-600">Browse Desserts →</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300"> |
|
|
<img src="https://images.unsplash.com/photo-1551024506-0bccd828d307?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1557&q=80" alt="Drinks" class="w-full h-48 object-cover"> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-2">Refreshing Drinks</h3> |
|
|
<p class="text-gray-600 mb-4">Natural juices and healthy beverages</p> |
|
|
<a href="#shop" class="text-orange-500 font-medium hover:text-orange-600">Browse Drinks →</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="shop" class="py-12 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center text-gray-800 mb-8">Our Menu</h2> |
|
|
|
|
|
|
|
|
<div class="flex flex-col md:flex-row justify-between items-center mb-8 gap-4"> |
|
|
<div class="relative w-full md:w-1/3"> |
|
|
<input type="text" placeholder="Search dishes..." class="w-full pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent"> |
|
|
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<button class="filter-btn px-4 py-2 rounded-full bg-orange-500 text-white">All</button> |
|
|
<button class="filter-btn px-4 py-2 rounded-full bg-white text-gray-800 border border-gray-300 hover:bg-gray-100">Vegan</button> |
|
|
<button class="filter-btn px-4 py-2 rounded-full bg-white text-gray-800 border border-gray-300 hover:bg-gray-100">Gluten-Free</button> |
|
|
<button class="filter-btn px-4 py-2 rounded-full bg-white text-gray-800 border border-gray-300 hover:bg-gray-100">Spicy</button> |
|
|
<button class="filter-btn px-4 py-2 rounded-full bg-white text-gray-800 border border-gray-300 hover:bg-gray-100">Low-Carb</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"> |
|
|
|
|
|
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" alt="Grilled Salmon" class="w-full h-48 object-cover"> |
|
|
<span class="absolute top-2 right-2 bg-green-500 text-white text-xs px-2 py-1 rounded-full">Healthy</span> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-1">Grilled Salmon</h3> |
|
|
<p class="text-gray-600 text-sm mb-3">Fresh Atlantic salmon with lemon butter sauce</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-lg font-bold text-gray-800">$14.99</span> |
|
|
<button class="add-to-cart-btn bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-full text-sm transition duration-300" data-id="1" data-name="Grilled Salmon" data-price="14.99" data-image="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80"> |
|
|
Add to Cart |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1512621776951-a57141f2eefd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Quinoa Salad" class="w-full h-48 object-cover"> |
|
|
<span class="absolute top-2 right-2 bg-green-500 text-white text-xs px-2 py-1 rounded-full">Vegan</span> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-1">Quinoa Salad</h3> |
|
|
<p class="text-gray-600 text-sm mb-3">Organic quinoa with fresh vegetables and dressing</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-lg font-bold text-gray-800">$9.99</span> |
|
|
<button class="add-to-cart-btn bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-full text-sm transition duration-300" data-id="2" data-name="Quinoa Salad" data-price="9.99" data-image="https://images.unsplash.com/photo-1512621776951-a57141f2eefd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"> |
|
|
Add to Cart |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1603360946369-dc9bb6258143?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Vegetable Couscous" class="w-full h-48 object-cover"> |
|
|
<span class="absolute top-2 right-2 bg-yellow-500 text-white text-xs px-2 py-1 rounded-full">Popular</span> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-1">Couscous royal (poulet, merguez)</h3> |
|
|
<p class="text-gray-600 text-sm mb-3">Traditional North African couscous with chicken and merguez sausage</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-lg font-bold text-gray-800">$11.99</span> |
|
|
<button class="add-to-cart-btn bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-full text-sm transition duration-300" data-id="3" data-name="Vegetable Couscous" data-price="11.99" data-image="https://images.unsplash.com/photo-1603360946369-dc9bb6258143?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"> |
|
|
Add to Cart |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1563805042-7684c019e1cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1527&q=80" alt="Chocolate Cake" class="w-full h-48 object-cover"> |
|
|
<span class="absolute top-2 right-2 bg-red-500 text-white text-xs px-2 py-1 rounded-full">Sweet</span> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-1">Chocolate Cake</h3> |
|
|
<p class="text-gray-600 text-sm mb-3">Rich chocolate cake with raspberry filling</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-lg font-bold text-gray-800">$7.99</span> |
|
|
<button class="add-to-cart-btn bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-full text-sm transition duration-300" data-id="4" data-name="Chocolate Cake" data-price="7.99" data-image="https://images.unsplash.com/photo-1563805042-7684c019e1cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1527&q=80"> |
|
|
Add to Cart |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1551024506-0bccd828d307?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1557&q=80" alt="Fresh Juice" class="w-full h-48 object-cover"> |
|
|
<span class="absolute top-2 right-2 bg-blue-500 text-white text-xs px-2 py-1 rounded-full">Refreshing</span> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-1">Fresh Juice</h3> |
|
|
<p class="text-gray-600 text-sm mb-3">Cold-pressed orange and carrot juice</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-lg font-bold text-gray-800">$5.49</span> |
|
|
<button class="add-to-cart-btn bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-full text-sm transition duration-300" data-id="5" data-name="Fresh Juice" data-price="5.49" data-image="https://images.unsplash.com/photo-1551024506-0bccd828d307?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1557&q=80"> |
|
|
Add to Cart |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1601050690597-df0568f70950?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Avocado Toast" class="w-full h-48 object-cover"> |
|
|
<span class="absolute top-2 right-2 bg-green-500 text-white text-xs px-2 py-1 rounded-full">Vegan</span> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-1">Avocado Toast</h3> |
|
|
<p class="text-gray-600 text-sm mb-3">Sourdough bread with smashed avocado</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-lg font-bold text-gray-800">$8.99</span> |
|
|
<button class="add-to-cart-btn bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-full text-sm transition duration-300" data-id="6" data-name="Avocado Toast" data-price="8.99" data-image="https://images.unsplash.com/photo-1601050690597-df0568f70950?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"> |
|
|
Add to Cart |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1603105037880-880cd4edfb0d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Chicken Wrap" class="w-full h-48 object-cover"> |
|
|
<span class="absolute top-2 right-2 bg-purple-500 text-white text-xs px-2 py-1 rounded-full">Low-Carb</span> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-1">Chicken Wrap</h3> |
|
|
<p class="text-gray-600 text-sm mb-3">Grilled chicken with veggies in lettuce wrap</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-lg font-bold text-gray-800">$10.49</span> |
|
|
<button class="add-to-cart-btn bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-full text-sm transition duration-300" data-id="7" data-name="Chicken Wrap" data-price="10.49" data-image="https://images.unsplash.com/photo-1603105037880-880cd4edfb0d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80"> |
|
|
Add to Cart |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1571115177098-24ec42ed204d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Fruit Bowl" class="w-full h-48 object-cover"> |
|
|
<span class="absolute top-2 right-2 bg-green-500 text-white text-xs px-2 py-1 rounded-full">Healthy</span> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-1">Fruit Bowl</h3> |
|
|
<p class="text-gray-600 text-sm mb-3">Seasonal fresh fruits with yogurt</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-lg font-bold text-gray-800">$6.99</span> |
|
|
<button class="add-to-cart-btn bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-full text-sm transition duration-300" data-id="8" data-name="Fruit Bowl" data-price="6.99" data-image="https://images.unsplash.com/photo-1571115177098-24ec42ed204d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80"> |
|
|
Add to Cart |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-8"> |
|
|
<button class="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-6 border border-gray-300 rounded-full shadow-sm"> |
|
|
Load More |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="about" class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col lg:flex-row items-center gap-12"> |
|
|
<div class="lg:w-1/2"> |
|
|
<img src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1674&q=80" alt="Our Kitchen" class="rounded-lg shadow-xl w-full h-auto"> |
|
|
</div> |
|
|
|
|
|
<div class="lg:w-1/2"> |
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-6">Our Story</h2> |
|
|
<p class="text-gray-600 mb-4"> |
|
|
FreshBites was born from a simple idea: everyone deserves access to delicious, healthy meals made with care. Founded in 2015 by chef Maria Rodriguez, we started as a small kitchen serving local offices and have grown into a beloved food delivery service. |
|
|
</p> |
|
|
<p class="text-gray-600 mb-6"> |
|
|
We believe in the power of fresh, locally-sourced ingredients. Our team of passionate chefs creates each dish with attention to flavor, nutrition, and presentation. Whether you're looking for a quick lunch or a family dinner, we've got you covered. |
|
|
</p> |
|
|
|
|
|
<div class="grid grid-cols-2 gap-4 mb-8"> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-orange-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-leaf text-orange-500 text-xl"></i> |
|
|
</div> |
|
|
<span class="text-gray-800 font-medium">Organic Ingredients</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-orange-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-truck text-orange-500 text-xl"></i> |
|
|
</div> |
|
|
<span class="text-gray-800 font-medium">Fast Delivery</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-orange-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-heart text-orange-500 text-xl"></i> |
|
|
</div> |
|
|
<span class="text-gray-800 font-medium">Made with Love</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-orange-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-recycle text-orange-500 text-xl"></i> |
|
|
</div> |
|
|
<span class="text-gray-800 font-medium">Eco-Friendly</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button class="bg-orange-500 hover:bg-orange-600 text-white font-bold py-3 px-6 rounded-full transition duration-300"> |
|
|
Meet Our Team |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12">What Our Customers Say</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-md"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah J." class="w-12 h-12 rounded-full object-cover mr-4"> |
|
|
<div> |
|
|
<h4 class="font-semibold text-gray-800">Sarah J.</h4> |
|
|
<div class="flex text-yellow-400"> |
|
|
<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> |
|
|
</div> |
|
|
<p class="text-gray-600"> |
|
|
"The food from FreshBites is consistently delicious and arrives fresh every time. The quinoa salad is my absolute favorite!" |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-md"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Abdenour" class="w-12 h-12 rounded-full object-cover mr-4"> |
|
|
<div> |
|
|
<h4 class="font-semibold text-gray-800">Abdenour</h4> |
|
|
<div class="flex text-yellow-400"> |
|
|
<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> |
|
|
</div> |
|
|
<p class="text-gray-600"> |
|
|
"As someone with dietary restrictions, I appreciate how easy it is to find gluten-free options. The chicken wrap is amazing!" |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-md"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emma L." class="w-12 h-12 rounded-full object-cover mr-4"> |
|
|
<div> |
|
|
<h4 class="font-semibold text-gray-800">Emma L.</h4> |
|
|
<div class="flex text-yellow-400"> |
|
|
<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> |
|
|
</div> |
|
|
<p class="text-gray-600"> |
|
|
"I order from FreshBites at least twice a week. It's saved me so much time and the quality is better than most restaurants!" |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-12 bg-orange-500 text-white"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<h2 class="text-3xl font-bold mb-4">Join Our Newsletter</h2> |
|
|
<p class="text-xl mb-8 max-w-2xl mx-auto"> |
|
|
Subscribe to get exclusive offers, new menu announcements, and healthy eating tips! |
|
|
</p> |
|
|
|
|
|
<div class="flex flex-col sm:flex-row justify-center max-w-md mx-auto"> |
|
|
<input type="email" placeholder="Your email address" class="px-4 py-3 rounded-l-full sm:rounded-r-none rounded-r-full mb-2 sm:mb-0 w-full focus:outline-none text-gray-800"> |
|
|
<button class="bg-gray-800 hover:bg-gray-900 px-6 py-3 rounded-r-full sm:rounded-l-none rounded-l-full font-bold transition duration-300"> |
|
|
Subscribe |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<p class="text-sm mt-4 opacity-80"> |
|
|
We respect your privacy. Unsubscribe at any time. |
|
|
</p> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Get In Touch</h2> |
|
|
|
|
|
<div class="flex flex-col lg:flex-row gap-12"> |
|
|
<div class="lg:w-1/2"> |
|
|
<div class="bg-gray-50 p-6 rounded-lg shadow-md mb-6"> |
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-4">Contact Information</h3> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-start"> |
|
|
<i class="fas fa-map-marker-alt text-orange-500 mt-1 mr-4"></i> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-800">Address</h4> |
|
|
<p class="text-gray-600">123 Food Street, Culinary District, NY 10001</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<i class="fas fa-phone-alt text-orange-500 mt-1 mr-4"></i> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-800">Phone</h4> |
|
|
<p class="text-gray-600">(555) 123-4567</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<i class="fas fa-envelope text-orange-500 mt-1 mr-4"></i> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-800">Email</h4> |
|
|
<p class="text-gray-600">hello@freshbites.com</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<i class="fas fa-clock text-orange-500 mt-1 mr-4"></i> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-800">Hours</h4> |
|
|
<p class="text-gray-600">Monday - Friday: 9am - 9pm<br>Saturday - Sunday: 10am - 8pm</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="h-64 bg-gray-200 rounded-lg overflow-hidden"> |
|
|
|
|
|
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d25565.252103135!2d3.1941016!3d36.7451008!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x128e5220d3e8d6a3%3A0x9d8e8c8c1c1c1c1c!2sBordj%20El%20Kiffan%2C%20Algeria!5e0!3m2!1sen!2sus!4v1620000000000!5m2!1sen!2sus" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="lg:w-1/2"> |
|
|
<div class="bg-gray-50 p-6 rounded-lg shadow-md"> |
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-4">Send Us a Message</h3> |
|
|
|
|
|
<form> |
|
|
<div class="mb-4"> |
|
|
<label for="name" class="block text-gray-700 font-medium mb-2">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-orange-500 focus:border-transparent"> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label for="email" class="block text-gray-700 font-medium mb-2">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-orange-500 focus:border-transparent"> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label for="subject" class="block text-gray-700 font-medium mb-2">Subject</label> |
|
|
<input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent"> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label for="message" class="block text-gray-700 font-medium mb-2">Message</label> |
|
|
<textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent"></textarea> |
|
|
</div> |
|
|
|
|
|
<button type="submit" class="bg-orange-500 hover:bg-orange-600 text-white font-bold py-3 px-6 rounded-lg w-full transition duration-300"> |
|
|
Send Message |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-12 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center text-gray-800 mb-8">Follow Us @FreshBites</h2> |
|
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-2"> |
|
|
<a href="#" class="instagram-post hover:opacity-90 transition duration-300"> |
|
|
<img src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" alt="Instagram post" class="w-full h-40 object-cover"> |
|
|
</a> |
|
|
<a href="#" class="instagram-post hover:opacity-90 transition duration-300"> |
|
|
<img src="https://images.unsplash.com/photo-1512621776951-a57141f2eefd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Instagram post" class="w-full h-40 object-cover"> |
|
|
</a> |
|
|
<a href="#" class="instagram-post hover:opacity-90 transition duration-300"> |
|
|
<img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1681&q=80" alt="Instagram post" class="w-full h-40 object-cover"> |
|
|
</a> |
|
|
<a href="#" class="instagram-post hover:opacity-90 transition duration-300"> |
|
|
<img src="https://images.unsplash.com/photo-1563805042-7684c019e1cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1527&q=80" alt="Instagram post" class="w-full h-40 object-cover"> |
|
|
</a> |
|
|
<a href="#" class="instagram-post hover:opacity-90 transition duration-300"> |
|
|
<img src="https://images.unsplash.com/photo-1551024506-0bccd828d307?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1557&q=80" alt="Instagram post" class="w-full h-40 object-cover"> |
|
|
</a> |
|
|
<a href="#" class="instagram-post hover:opacity-90 transition duration-300"> |
|
|
<img src="https://images.unsplash.com/photo-1601050690597-df0568f70950?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Instagram post" class="w-full h-40 object-cover"> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-800 text-white py-12"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<div class="flex items-center space-x-2 mb-4"> |
|
|
<i class="fas fa-utensils text-2xl text-orange-500"></i> |
|
|
<span class="text-2xl font-bold">FreshBites</span> |
|
|
</div> |
|
|
<p class="text-gray-400 mb-4"> |
|
|
Delivering delicious, healthy meals straight to your door. |
|
|
</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-orange-500 transition duration-300"> |
|
|
<i class="fab fa-facebook-f"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-orange-500 transition duration-300"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-orange-500 transition duration-300"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-orange-500 transition duration-300"> |
|
|
<i class="fab fa-tiktok"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Quick Links</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#home" class="text-gray-400 hover:text-orange-500 transition duration-300">Home</a></li> |
|
|
<li><a href="#shop" class="text-gray-400 hover:text-orange-500 transition duration-300">Shop</a></li> |
|
|
<li><a href="#about" class="text-gray-400 hover:text-orange-500 transition duration-300">About Us</a></li> |
|
|
<li><a href="#contact" class="text-gray-400 hover:text-orange-500 transition duration-300">Contact</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-orange-500 transition duration-300">My Account</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Information</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-orange-500 transition duration-300">Privacy Policy</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-orange-500 transition duration-300">Terms & Conditions</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-orange-500 transition duration-300">Shipping Policy</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-orange-500 transition duration-300">Refund Policy</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-orange-500 transition duration-300">FAQ</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Contact Us</h3> |
|
|
<address class="text-gray-400 not-italic"> |
|
|
<p class="mb-2">123 Food Street</p> |
|
|
<p class="mb-2">Culinary District, NY 10001</p> |
|
|
<p class="mb-2">Phone: (555) 123-4567</p> |
|
|
<p class="mb-2">Email: hello@freshbites.com</p> |
|
|
</address> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> |
|
|
<p>© 2023 FreshBites. All rights reserved.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<div id="cart-sidebar" class="fixed top-0 right-0 h-full w-full md:w-96 bg-white shadow-xl transform translate-x-full transition-transform duration-300 ease-in-out z-50 overflow-y-auto"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-2xl font-bold text-gray-800">Your Cart</h2> |
|
|
<button id="close-cart-btn" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-times text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div id="cart-items" class="space-y-4 mb-6"> |
|
|
|
|
|
<div class="text-center py-8 text-gray-500"> |
|
|
<i class="fas fa-shopping-cart text-4xl mb-4"></i> |
|
|
<p>Your cart is empty</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-200 pt-4 mb-4"> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span class="text-gray-600">Subtotal:</span> |
|
|
<span id="cart-subtotal" class="font-semibold">$0.00</span> |
|
|
</div> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span class="text-gray-600">Delivery Fee:</span> |
|
|
<span id="delivery-fee" class="font-semibold">$2.99</span> |
|
|
</div> |
|
|
<div class="flex justify-between text-lg font-bold"> |
|
|
<span>Total:</span> |
|
|
<span id="cart-total">$2.99</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button id="checkout-btn" class="w-full bg-orange-500 hover:bg-orange-600 text-white font-bold py-3 px-4 rounded-lg mb-4 transition duration-300"> |
|
|
Proceed to Checkout |
|
|
</button> |
|
|
|
|
|
<p class="text-sm text-gray-500 text-center"> |
|
|
Free delivery on orders over $25 |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="cart-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden"></div> |
|
|
|
|
|
|
|
|
<div id="login-modal" class="fixed inset-0 flex items-center justify-center z-50 hidden"> |
|
|
<div class="bg-white rounded-lg shadow-xl w-full max-w-md mx-4"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-2xl font-bold text-gray-800">Sign In</h2> |
|
|
<button id="close-login-btn" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-times text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<form> |
|
|
<div class="mb-4"> |
|
|
<label for="login-email" class="block text-gray-700 font-medium mb-2">Email</label> |
|
|
<input type="email" id="login-email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent"> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label for="login-password" class="block text-gray-700 font-medium mb-2">Password</label> |
|
|
<input type="password" id="login-password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent"> |
|
|
</div> |
|
|
|
|
|
<button type="submit" class="w-full bg-orange-500 hover:bg-orange-600 text-white font-bold py-3 px-4 rounded-lg mb-4 transition duration-300"> |
|
|
Sign In |
|
|
</button> |
|
|
|
|
|
<div class="text-center"> |
|
|
<a href="#" class="text-orange-500 hover:text-orange-600 font-medium">Forgot password?</a> |
|
|
</div> |
|
|
</form> |
|
|
|
|
|
<div class="border-t border-gray-200 mt-6 pt-6"> |
|
|
<p class="text-center text-gray-600 mb-4">Don't have an account?</p> |
|
|
<button id="show-register-btn" class="w-full bg-gray-100 hover:bg-gray-200 text-gray-800 font-bold py-3 px-4 rounded-lg transition duration-300"> |
|
|
Create Account |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="register-modal" class="fixed inset-0 flex items-center justify-center z-50 hidden"> |
|
|
<div class="bg-white rounded-lg shadow-xl w-full max-w-md mx-4"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-2xl font-bold text-gray-800">Create Account</h2> |
|
|
<button id="close-register-btn" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-times text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<form> |
|
|
<div class="mb-4"> |
|
|
<label for="register-name" class="block text-gray-700 font-medium mb-2">Full Name</label> |
|
|
<input type="text" id="register-name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent"> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label for="register-email" class="block text-gray-700 font-medium mb-2">Email</label> |
|
|
<input type="email" id="register-email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent"> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label for="register-password" class="block text-gray-700 font-medium mb-2">Password</label> |
|
|
<input type="password" id="register-password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent"> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label for="register-confirm-password" class="block text-gray-700 font-medium mb-2">Confirm Password</label> |
|
|
<input type="password" id="register-confirm-password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent"> |
|
|
</div> |
|
|
|
|
|
<button type="submit" class="w-full bg-orange-500 hover:bg-orange-600 text-white font-bold py-3 px-4 rounded-lg mb-4 transition duration-300"> |
|
|
Create Account |
|
|
</button> |
|
|
|
|
|
<div class="flex items-center mb-4"> |
|
|
<input type="checkbox" id="register-terms" class="mr-2"> |
|
|
<label for="register-terms" class="text-gray-600 text-sm">I agree to the <a href="#" class="text-orange-500 hover:text-orange-600">Terms & Conditions</a></label> |
|
|
</div> |
|
|
</form> |
|
|
|
|
|
<div class="border-t border-gray-200 mt-6 pt-6"> |
|
|
<p class="text-center text-gray-600 mb-4">Already have an account?</p> |
|
|
<button id="show-login-btn" class="w-full bg-gray-100 hover:bg-gray-200 text-gray-800 font-bold py-3 px-4 rounded-lg transition duration-300"> |
|
|
Sign In |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="modal-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden"></div> |
|
|
|
|
|
|
|
|
<div id="checkout-modal" class="fixed inset-0 flex items-center justify-center z-50 hidden"> |
|
|
<div class="bg-white rounded-lg shadow-xl w-full max-w-2xl mx-4 max-h-screen overflow-y-auto"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-2xl font-bold text-gray-800">Checkout</h2> |
|
|
<button id="close-checkout-btn" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-times text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Delivery Information</h3> |
|
|
|
|
|
<form> |
|
|
<div class="mb-4"> |
|
|
<label for="checkout-name" class="block text-gray-700 font-medium mb-2">Full Name</label> |
|
|
<input type="text" id="checkout-name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent"> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label for="checkout-email" class="block text-gray-700 font-medium mb-2">Email</label> |
|
|
<input type="email" id="checkout-email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent"> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label for="checkout-phone" class="block text-gray-700 font-medium mb-2">Phone Number</label> |
|
|
<input type="tel" id="checkout-phone" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent"> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label for="checkout-address" class="block text-gray-700 font-medium mb-2">Delivery Address</label> |
|
|
<textarea id="checkout-address" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent"></textarea> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label for="checkout-date" class="block text-gray-700 font-medium mb-2">Delivery Date</label> |
|
|
<input type="date" id="checkout-date" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent"> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label for="checkout-time" class="block text-gray-700 font-medium mb-2">Delivery Time</label> |
|
|
<select id="checkout-time" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent"> |
|
|
<option value="">Select a time</option> |
|
|
<option value="09:00-11:00">09:00 AM - 11:00 AM</option> |
|
|
<option value="11:00-13:00">11:00 AM - 01:00 PM</option> |
|
|
<option value="13:00-15:00">01:00 PM - 03:00 PM</option> |
|
|
<option value="15:00-17:00">03:00 PM - 05:00 PM</option> |
|
|
<option value="17:00-19:00">05:00 PM - 07:00 PM</option> |
|
|
<option value="19:00-21:00">07:00 PM - 09:00 PM</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label for="checkout-notes" class="block text-gray-700 font-medium mb-2">Delivery Notes (Optional)</label> |
|
|
<textarea id="checkout-notes" rows="2" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent" placeholder="Any special instructions for delivery"></textarea> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Order Summary</h3> |
|
|
|
|
|
<div id="checkout-items" class="mb-6 space-y-4"> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-200 pt-4 mb-4"> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span class="text-gray-600">Subtotal:</span> |
|
|
<span id="checkout-subtotal" class="font-semibold">$0.00</span> |
|
|
</div> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span class="text-gray-600">Delivery Fee:</span> |
|
|
<span id="checkout-delivery" class="font-semibold">$2.99</span> |
|
|
</div> |
|
|
<div class="flex justify-between text-lg font-bold"> |
|
|
<span>Total:</span> |
|
|
<span id="checkout-total">$2.99</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h3 class="text-lg font-semibold mb-4 mt-6">Payment Method</h3> |
|
|
|
|
|
<div class="space-y-3 mb-6"> |
|
|
<div class="flex items-center"> |
|
|
<input type="radio" id="payment-card" name="payment" value="card" class="mr-2" checked> |
|
|
<label for="payment-card" class="flex items-center"> |
|
|
<i class="fas fa-credit-card mr-2 text-gray-600"></i> |
|
|
<span>Credit/Debit Card</span> |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center"> |
|
|
<input type="radio" id="payment-paypal" name="payment" value="paypal" class="mr-2"> |
|
|
<label for="payment-paypal" class="flex items-center"> |
|
|
<i class="fab fa-paypal mr-2 text-blue-500"></i> |
|
|
<span>PayPal</span> |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center"> |
|
|
<input type="radio" id="payment-cash" name="payment" value="cash" class="mr-2"> |
|
|
<label for="payment-cash" class="flex items-center"> |
|
|
<i class="fas fa-money-bill-wave mr-2 text-green-500"></i> |
|
|
<span>Cash on Delivery</span> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<input type="checkbox" id="checkout-terms" class="mr-2"> |
|
|
<label for="checkout-terms" class="text-gray-600 text-sm">I agree to the <a href="#" class="text-orange-500 hover:text-orange-600">Terms & Conditions</a></label> |
|
|
</div> |
|
|
|
|
|
<button id="place-order-btn" class="w-full bg-orange-500 hover:bg-orange-600 text-white font-bold py-3 px-4 rounded-lg mb-4 transition duration-300"> |
|
|
Place Order |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="confirmation-modal" class="fixed inset-0 flex items-center justify-center z-50 hidden"> |
|
|
<div class="bg-white rounded-lg shadow-xl w-full max-w-md mx-4 p-8 text-center"> |
|
|
<div class="mb-6"> |
|
|
<div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4"> |
|
|
<i class="fas fa-check text-green-500 text-3xl"></i> |
|
|
</div> |
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-2">Order Confirmed!</h2> |
|
|
<p class="text-gray-600">Thank you for your order. We'll deliver it soon.</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 p-4 rounded-lg mb-6"> |
|
|
<p class="text-gray-600 mb-2">Order #<span id="order-number">12345</span></p> |
|
|
<p class="text-lg font-semibold">$<span id="order-total">0.00</span></p> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-col sm:flex-row gap-4"> |
|
|
<button id="track-order-btn" class="flex-1 bg-orange-500 hover:bg-orange-600 text-white font-bold py-3 px-4 rounded-lg transition duration-300"> |
|
|
Track Order |
|
|
</button> |
|
|
<button id="continue-shopping-btn" class="flex-1 bg-gray-100 hover:bg-gray-200 text-gray-800 font-bold py-3 px-4 rounded-lg transition duration-300"> |
|
|
Continue Shopping |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<button id="back-to-top" class="fixed bottom-8 right-8 bg-orange-500 text-white p-3 rounded-full shadow-lg hover:bg-orange-600 transition duration-300 hidden"> |
|
|
<i class="fas fa-arrow-up"></i> |
|
|
</button> |
|
|
|
|
|
<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 closeCartBtn = document.getElementById('close-cart-btn'); |
|
|
const cartSidebar = document.getElementById('cart-sidebar'); |
|
|
const cartOverlay = document.getElementById('cart-overlay'); |
|
|
const cartItemsContainer = document.getElementById('cart-items'); |
|
|
const cartSubtotal = document.getElementById('cart-subtotal'); |
|
|
const cartTotal = document.getElementById('cart-total'); |
|
|
const deliveryFee = document.getElementById('delivery-fee'); |
|
|
const cartCount = document.getElementById('cart-count'); |
|
|
|
|
|
let cart = []; |
|
|
|
|
|
// Toggle cart sidebar |
|
|
cartBtn.addEventListener('click', () => { |
|
|
cartSidebar.classList.remove('translate-x-full'); |
|
|
cartOverlay.classList.remove('hidden'); |
|
|
document.body.style.overflow = 'hidden'; |
|
|
}); |
|
|
|
|
|
closeCartBtn.addEventListener('click', () => { |
|
|
cartSidebar.classList.add('translate-x-full'); |
|
|
cartOverlay.classList.add('hidden'); |
|
|
document.body.style.overflow = 'auto'; |
|
|
}); |
|
|
|
|
|
cartOverlay.addEventListener('click', () => { |
|
|
cartSidebar.classList.add('translate-x-full'); |
|
|
cartOverlay.classList.add('hidden'); |
|
|
document.body.style.overflow = 'auto'; |
|
|
}); |
|
|
|
|
|
// Add to cart functionality |
|
|
const addToCartButtons = document.querySelectorAll('.add-to-cart-btn'); |
|
|
|
|
|
addToCartButtons.forEach(button => { |
|
|
button.addEventListener('click', () => { |
|
|
const id = button.getAttribute('data-id'); |
|
|
const name = button.getAttribute('data-name'); |
|
|
const price = parseFloat(button.getAttribute('data-price')); |
|
|
const image = button.getAttribute('data-image'); |
|
|
|
|
|
// Check if item already exists in cart |
|
|
const existingItem = cart.find(item => item.id === id); |
|
|
|
|
|
if (existingItem) { |
|
|
existingItem.quantity += 1; |
|
|
} else { |
|
|
cart.push({ |
|
|
id, |
|
|
name, |
|
|
price, |
|
|
image, |
|
|
quantity: 1 |
|
|
}); |
|
|
} |
|
|
|
|
|
updateCart(); |
|
|
|
|
|
// Show cart sidebar |
|
|
cartSidebar.classList.remove('translate |
|
|
<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=Aerotech/foodsite" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
