| | <!DOCTYPE html> |
| | <html lang="en" class="dark"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>YourHand.co - Handcrafted Marketplace</title> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| | <script src="https://unpkg.com/feather-icons"></script> |
| | <script> |
| | tailwind.config = { |
| | darkMode: 'class', |
| | theme: { |
| | extend: { |
| | colors: { |
| | primary: { |
| | 500: '#d946ef', |
| | }, |
| | secondary: { |
| | 500: '#d946ef', |
| | } |
| | } |
| | } |
| | } |
| | } |
| | </script> |
| | <style> |
| | .vanta-bg { |
| | position: absolute; |
| | z-index: -1; |
| | top: 0; |
| | left: 0; |
| | width: 100%; |
| | height: 100%; |
| | opacity: 0.2; |
| | } |
| | .gradient-text { |
| | background: linear-gradient(90deg, #d946ef 0%, #a855f7 100%); |
| | -webkit-background-clip: text; |
| | background-clip: text; |
| | color: transparent; |
| | } |
| | .card-hover:hover { |
| | transform: translateY(-5px); |
| | box-shadow: 0 25px 50px -12px rgba(216, 70, 239, 0.25); |
| | } |
| | </style> |
| | </head> |
| | <body class="bg-gray-900 text-gray-100 min-h-screen"> |
| | |
| | <nav class="bg-gray-800 border-b border-gray-700 px-4 py-3"> |
| | <div class="max-w-7xl mx-auto flex items-center justify-between"> |
| | <div class="flex items-center space-x-2"> |
| | <i data-feather="hand" class="text-primary-500 w-8 h-8"></i> |
| | <span class="text-2xl font-bold gradient-text">YourHand.co</span> |
| | </div> |
| | <div class="hidden md:flex space-x-6"> |
| | <a href="#" class="hover:text-primary-500 transition">Home</a> |
| | <a href="#marketplace" class="hover:text-primary-500 transition">Marketplace</a> |
| | <a href="#food-rescue" class="hover:text-primary-500 transition">Food Rescue</a> |
| | <a href="#about" class="hover:text-primary-500 transition">About</a> |
| | <a href="#contact" class="hover:text-primary-500 transition">Contact</a> |
| | </div> |
| | <div class="flex items-center space-x-4"> |
| | <a href="cart.html" class="p-2 rounded-full hover:bg-gray-700 transition relative"> |
| | <i data-feather="shopping-cart" class="w-5 h-5"></i> |
| | <span id="cartCounter" class="absolute -top-1 -right-1 bg-primary-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center hidden">0</span> |
| | </a> |
| | <a href="login.html" class="p-2 rounded-full hover:bg-gray-700 transition"> |
| | <i data-feather="user" class="w-5 h-5"></i> |
| | </a> |
| | <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-700 transition"> |
| | <i data-feather="moon" class="w-5 h-5"></i> |
| | </button> |
| | <a href="register.html" class="hidden md:block bg-primary-500 hover:bg-primary-600 text-white font-medium py-2 px-4 rounded-lg transition"> |
| | Register |
| | </a> |
| | <button class="md:hidden p-2 rounded-full hover:bg-gray-700 transition"> |
| | <i data-feather="menu" class="w-5 h-5"></i> |
| | </button> |
| | </div> |
| | </div> |
| | </nav> |
| |
|
| | |
| | <section class="relative overflow-hidden py-20 px-4"> |
| | <div class="max-w-7xl mx-auto text-center relative z-10"> |
| | <h1 class="text-5xl md:text-7xl font-bold mb-6"> |
| | <span class="gradient-text">Handmade</span> Meets <span class="gradient-text">Sustainability</span> |
| | </h1> |
| | <p class="text-xl md:text-2xl text-gray-300 mb-10 max-w-3xl mx-auto"> |
| | Discover unique handcrafted items and rescue delicious food - all in one place. Support local artisans and reduce food waste. |
| | </p> |
| | <div class="flex flex-col sm:flex-row justify-center gap-4"> |
| | <a href="#marketplace" class="bg-primary-500 hover:bg-primary-600 text-white font-bold py-3 px-8 rounded-full transition transform hover:scale-105"> |
| | Shop Handmade |
| | </a> |
| | <a href="#food-rescue" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 px-8 rounded-full transition transform hover:scale-105"> |
| | Rescue Food |
| | </a> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | <script> |
| | function initFoodMap() { |
| | if (navigator.geolocation) { |
| | navigator.geolocation.getCurrentPosition(function(position) { |
| | const userPosition = [position.coords.longitude, position.coords.latitude]; |
| | |
| | const map = new AMap.Map("foodMap", { |
| | viewMode: "3D", |
| | zoom: 12, |
| | center: userPosition, |
| | mapStyle: "amap://styles/dark" |
| | }); |
| | |
| | new AMap.Marker({ |
| | position: userPosition, |
| | map: map, |
| | title: "Your Location", |
| | icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png" |
| | }); |
| | |
| | |
| | const foodLocations = [ |
| | { |
| | position: [userPosition[0] + 0.008, userPosition[1] + 0.008], |
| | title: "Bakery Delight", |
| | offer: "Bread Surprise Bag", |
| | price: "$3.99", |
| | distance: "0.3 mi" |
| | }, |
| | { |
| | position: [userPosition[0] + 0.015, userPosition[1] - 0.01], |
| | title: "GreenEats", |
| | offer: "Vegetarian Lunch Box", |
| | price: "$4.80", |
| | distance: "0.7 mi" |
| | }, |
| | { |
| | position: [userPosition[0] - 0.02, userPosition[1] - 0.015], |
| | title: "Ocean Bites", |
| | offer: "Sushi Surprise Pack", |
| | price: "$6.00", |
| | distance: "1.2 mi" |
| | } |
| | ]; |
| | |
| | |
| | foodLocations.forEach(location => { |
| | const marker = new AMap.Marker({ |
| | position: location.position, |
| | map: map, |
| | title: location.title, |
| | icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png" |
| | }); |
| | |
| | const infoWindow = new AMap.InfoWindow({ |
| | content: ` |
| | <div class="text-gray-800 p-2"> |
| | <h3 class="font-bold">${location.title}</h3> |
| | <p>Offer: ${location.offer}</p> |
| | <p>Price: ${location.price}</p> |
| | <p>Distance: ${location.distance}</p> |
| | </div> |
| | `, |
| | offset: new AMap.Pixel(0, -30) |
| | }); |
| | |
| | marker.on('click', () => { |
| | infoWindow.open(map, marker.getPosition()); |
| | }); |
| | }); |
| | }); |
| | } |
| | } |
| | |
| | function initMaps() { |
| | initMap(); |
| | initFoodMap(); |
| | } |
| | |
| | document.addEventListener('DOMContentLoaded', initMaps); |
| | </script> |
| | <script src="https://webapi.amap.com/maps?v=2.0&key=YOUR_PETAL_MAP_KEY"></script> |
| | <script> |
| | |
| | function initMap() { |
| | if (navigator.geolocation) { |
| | navigator.geolocation.getCurrentPosition(function(position) { |
| | const userPosition = [position.coords.longitude, position.coords.latitude]; |
| | |
| | const map = new AMap.Map("productsMap", { |
| | viewMode: "3D", |
| | zoom: 12, |
| | center: userPosition, |
| | mapStyle: "amap://styles/dark" |
| | }); |
| | |
| | new AMap.Marker({ |
| | position: userPosition, |
| | map: map, |
| | title: "Your Location", |
| | icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png" |
| | }); |
| | |
| | |
| | const products = [ |
| | { |
| | position: [userPosition[0] + 0.01, userPosition[1] + 0.01], |
| | title: "Handwoven Macrame", |
| | price: "$45", |
| | distance: "0.5 mi" |
| | }, |
| | { |
| | position: [userPosition[0] + 0.02, userPosition[1] - 0.01], |
| | title: "Ceramic Mug Set", |
| | price: "$28", |
| | distance: "1.2 mi" |
| | }, |
| | { |
| | position: [userPosition[0] - 0.03, userPosition[1] - 0.02], |
| | title: "Leather Wallet", |
| | price: "$75", |
| | distance: "2.5 mi" |
| | } |
| | ]; |
| | |
| | |
| | products.forEach(product => { |
| | const marker = new AMap.Marker({ |
| | position: product.position, |
| | map: map, |
| | title: product.title, |
| | icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png" |
| | }); |
| | |
| | const infoWindow = new AMap.InfoWindow({ |
| | content: ` |
| | <div class="text-gray-800 p-2"> |
| | <h3 class="font-bold">${product.title}</h3> |
| | <p>Price: ${product.price}</p> |
| | <p>Distance: ${product.distance}</p> |
| | </div> |
| | `, |
| | offset: new AMap.Pixel(0, -30) |
| | }); |
| | |
| | marker.on('click', () => { |
| | infoWindow.open(map, marker.getPosition()); |
| | }); |
| | }); |
| | }); |
| | } |
| | } |
| | |
| | |
| | window.initMap = initMap; |
| | document.addEventListener('DOMContentLoaded', initMap); |
| | </script> |
| | |
| | <section id="marketplace" class="py-16 px-4 bg-gray-800"> |
| | <div class="max-w-7xl mx-auto"> |
| | |
| | <div class="mb-10 bg-gray-700 rounded-xl overflow-hidden h-96"> |
| | <div id="productsMap" class="w-full h-full"></div> |
| | </div> |
| | <div class="flex items-center justify-between mb-10"> |
| | <h2 class="text-3xl font-bold"> |
| | <span class="gradient-text">Etsy-style</span> Marketplace |
| | </h2> |
| | <a href="#" class="flex items-center text-primary-500 hover:text-primary-400 transition"> |
| | View all <i data-feather="chevron-right" class="ml-1 w-5 h-5"></i> |
| | </a> |
| | </div> |
| | |
| | <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> |
| | |
| | <div class="bg-gray-700 rounded-xl overflow-hidden shadow-lg transition duration-300 card-hover"> |
| | <div class="relative h-60 overflow-hidden"> |
| | <img src="http://static.photos/craft/640x360/1" alt="Handmade Product" class="w-full h-full object-cover"> |
| | <div class="absolute top-2 right-2 bg-gray-900 text-primary-500 px-2 py-1 rounded-full text-xs font-bold"> |
| | $45 |
| | </div> |
| | </div> |
| | <div class="p-4"> |
| | <div class="flex items-center justify-between mb-1"> |
| | <div class="flex items-center"> |
| | <div class="w-6 h-6 rounded-full overflow-hidden mr-2"> |
| | <img src="http://static.photos/people/200x200/1" alt="Seller" class="w-full h-full object-cover"> |
| | </div> |
| | <span class="text-sm text-gray-300">CraftyHands</span> |
| | </div> |
| | <div class="flex items-center text-gray-400 text-xs"> |
| | <i data-feather="map-pin" class="w-3 h-3 mr-1"></i> |
| | <span>1.2mi</span> |
| | </div> |
| | </div> |
| | <h3 class="font-bold mb-2">Handwoven Macrame Wall Hanging</h3> |
| | <div class="flex items-center justify-between"> |
| | <div class="flex items-center text-yellow-400"> |
| | <i data-feather="star" class="w-4 h-4 fill-current"></i> |
| | <i data-feather="star" class="w-4 h-4 fill-current"></i> |
| | <i data-feather="star" class="w-4 h-4 fill-current"></i> |
| | <i data-feather="star" class="w-4 h-4 fill-current"></i> |
| | <i data-feather="star" class="w-4 h-4"></i> |
| | <span class="text-gray-400 text-sm ml-1">(24)</span> |
| | </div> |
| | <button |
| | class="text-primary-500 hover:text-primary-400 transition" |
| | data-add-to-cart |
| | data-product-id="macrame-wall-hanging" |
| | data-product-name="Handwoven Macrame Wall Hanging" |
| | data-product-price="45" |
| | data-product-image="http://static.photos/craft/640x360/1"> |
| | <i data-feather="shopping-cart" class="w-5 h-5"></i> |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="bg-gray-700 rounded-xl overflow-hidden shadow-lg transition duration-300 card-hover"> |
| | <div class="relative h-60 overflow-hidden"> |
| | <img src="http://static.photos/craft/640x360/2" alt="Handmade Product" class="w-full h-full object-cover"> |
| | <div class="absolute top-2 right-2 bg-gray-900 text-primary-500 px-2 py-1 rounded-full text-xs font-bold"> |
| | $28 |
| | </div> |
| | </div> |
| | <div class="p-4"> |
| | <div class="flex items-center justify-between mb-1"> |
| | <div class="flex items-center"> |
| | <div class="w-6 h-6 rounded-full overflow-hidden mr-2"> |
| | <img src="http://static.photos/people/200x200/2" alt="Seller" class="w-full h-full object-cover"> |
| | </div> |
| | <span class="text-sm text-gray-300">EarthCeramics</span> |
| | </div> |
| | <div class="flex items-center text-gray-400 text-xs"> |
| | <i data-feather="map-pin" class="w-3 h-3 mr-1"></i> |
| | <span>0.8mi</span> |
| | </div> |
| | </div> |
| | <h3 class="font-bold mb-2">Hand-thrown Ceramic Mug Set</h3> |
| | <div class="flex items-center justify-between"> |
| | <div class="flex items-center text-yellow-400"> |
| | <i data-feather="star" class="w-4 h-4 fill-current"></i> |
| | <i data-feather="star" class="w-4 h-4 fill-current"></i> |
| | <i data-feather="star" class="w-4 h-4 fill-current"></i> |
| | <i data-feather="star" class="w-4 h-4 fill-current"></i> |
| | <i data-feather="star" class="w-4 h-4 fill-current"></i> |
| | <span class="text-gray-400 text-sm ml-1">(56)</span> |
| | </div> |
| | <button |
| | class="text-primary-500 hover:text-primary-400 transition" |
| | data-add-to-cart |
| | data-product-id="ceramic-mug-set" |
| | data-product-name="Hand-thrown Ceramic Mug Set" |
| | data-product-price="28" |
| | data-product-image="http://static.photos/craft/640x360/2"> |
| | <i data-feather="shopping-cart" class="w-5 h-5"></i> |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="bg-gray-700 rounded-xl overflow-hidden shadow-lg transition duration-300 card-hover"> |
| | <div class="relative h-60 overflow-hidden"> |
| | <img src="http://static.photos/craft/640x360/3" alt="Handmade Product" class="w-full h-full object-cover"> |
| | <div class="absolute top-2 right-2 bg-gray-900 text-primary-500 px-2 py-1 rounded-full text-xs font-bold"> |
| | $75 |
| | </div> |
| | </div> |
| | <div class="p-4"> |
| | <div class="flex items-center justify-between mb-1"> |
| | <div class="flex items-center"> |
| | <div class="w-6 h-6 rounded-full overflow-hidden mr-2"> |
| | <img src="http://static.photos/people/200x200/3" alt="Seller" class="w-full h-full object-cover"> |
| | </div> |
| | <span class="text-sm text-gray-300">LeatherCraft</span> |
| | </div> |
| | <div class="flex items-center text-gray-400 text-xs"> |
| | <i data-feather="map-pin" class="w-3 h-3 mr-1"></i> |
| | <span>2.5mi</span> |
| | </div> |
| | </div> |
| | <h3 class="font-bold mb-2">Hand-stitched Leather Wallet</h3> |
| | <div class="flex items-center justify-between"> |
| | <div class="flex items-center text-yellow-400"> |
| | <i data-feather="star" class="w-4 h-4 fill-current"></i> |
| | <i data-feather="star" class="w-4 h-4 fill-current"></i> |
| | <i data-feather="star" class="w-4 h-4 fill-current"></i> |
| | <i data-feather="star" class="w-4 h-4 fill-current"></i> |
| | <i data-feather="star" class="w-4 h-4"></i> |
| | <span class="text-gray-400 text-sm ml-1">(18)</span> |
| | </div> |
| | <button |
| | class="text-primary-500 hover:text-primary-400 transition" |
| | data-add-to-cart |
| | data-product-id="leather-wallet" |
| | data-product-name="Hand-stitched Leather Wallet" |
| | data-product-price="75" |
| | data-product-image="http://static.photos/craft/640x360/3"> |
| | <i data-feather="shopping-cart" class="w-5 h-5"></i> |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="bg-gray-700 rounded-xl overflow-hidden shadow-lg transition duration-300 card-hover"> |
| | <div class="relative h-60 overflow-hidden"> |
| | <img src="http://static.photos/craft/640x360/4" alt="Handmade Product" class="w-full h-full object-cover"> |
| | <div class="absolute top-2 right-2 bg-gray-900 text-primary-500 px-2 py-1 rounded-full text-xs font-bold"> |
| | $32 |
| | </div> |
| | </div> |
| | <div class="p-4"> |
| | <div class="flex items-center justify-between mb-1"> |
| | <div class="flex items-center"> |
| | <div class="w-6 h-6 rounded-full overflow-hidden mr-2"> |
| | <img src="http://static.photos/people/200x200/4" alt="Seller" class="w-full h-full object-cover"> |
| | </div> |
| | <span class="text-sm text-gray-300">WoodArt</span> |
| | </div> |
| | <div class="flex items-center text-gray-400 text-xs"> |
| | <i data-feather="map-pin" class="w-3 h-3 mr-1"></i> |
| | <span>1.7mi</span> |
| | </div> |
| | </div> |
| | <h3 class="font-bold mb-2">Hand-carved Wooden Spoon Set</h3> |
| | <div class="flex items-center justify-between"> |
| | <div class="flex items-center text-yellow-400"> |
| | <i data-feather="star" class="w-4 h-4 fill-current"></i> |
| | <i data-feather="star" class="w-4 h-4 fill-current"></i> |
| | <i data-feather="star" class="w-4 h-4 fill-current"></i> |
| | <i data-feather="star" class="w-4 h-4 fill-current"></i> |
| | <i data-feather="star" class="w-4 h-4"></i> |
| | <span class="text-gray-400 text-sm ml-1">(32)</span> |
| | </div> |
| | <button |
| | class="text-primary-500 hover:text-primary-400 transition" |
| | data-add-to-cart |
| | data-product-id="wooden-spoon-set" |
| | data-product-name="Hand-carved Wooden Spoon Set" |
| | data-product-price="32" |
| | data-product-image="http://static.photos/craft/640x360/4"> |
| | <i data-feather="shopping-cart" class="w-5 h-5"></i> |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| | |
| | <section id="food-rescue" class="py-16 px-4 bg-gray-900"> |
| | <div class="max-w-7xl mx-auto"> |
| | |
| | <div class="mb-10 bg-gray-800 rounded-xl overflow-hidden h-96"> |
| | <div id="foodMap" class="w-full h-full"></div> |
| | </div> |
| | <div class="flex items-center justify-between mb-10"> |
| | <h2 class="text-3xl font-bold"> |
| | <span class="gradient-text">Too Good To Go</span> Style Food Rescue |
| | </h2> |
| | <a href="#" class="flex items-center text-primary-500 hover:text-primary-400 transition"> |
| | View all <i data-feather="chevron-right" class="ml-1 w-5 h-5"></i> |
| | </a> |
| | </div> |
| | |
| | <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> |
| | |
| | <div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg transition duration-300 card-hover"> |
| | <div class="relative h-48 overflow-hidden"> |
| | <img src="http://static.photos/food/640x360/1" alt="Food Rescue" class="w-full h-full object-cover"> |
| | <div class="absolute top-2 right-2 bg-gray-900 text-primary-500 px-2 py-1 rounded-full text-xs font-bold"> |
| | 75% OFF |
| | </div> |
| | </div> |
| | <div class="p-4"> |
| | <h3 class="font-bold mb-1">Fresh Bakery Surprise Bag</h3> |
| | <p class="text-gray-400 text-sm mb-3">Bakery Delight • 0.3 mi</p> |
| | <div class="flex items-center justify-between"> |
| | <div> |
| | <span class="text-gray-400 line-through">$15</span> |
| | <span class="text-primary-500 font-bold ml-2">$3.99</span> |
| | </div> |
| | <div class="flex items-center text-gray-400 text-sm"> |
| | <i data-feather="clock" class="w-4 h-4 mr-1"></i> |
| | <span>Pickup: 4-5 PM</span> |
| | </div> |
| | </div> |
| | <button |
| | class="w-full mt-4 bg-primary-500 hover:bg-primary-600 text-white font-bold py-2 px-4 rounded-lg transition" |
| | data-add-to-cart |
| | data-product-id="bakery-surprise" |
| | data-product-name="Fresh Bakery Surprise Bag" |
| | data-product-price="3.99" |
| | data-product-image="http://static.photos/food/640x360/1"> |
| | Add to Cart - $3.99 |
| | </button> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg transition duration-300 card-hover"> |
| | <div class="relative h-48 overflow-hidden"> |
| | <img src="http://static.photos/food/640x360/2" alt="Food Rescue" class="w-full h-full object-cover"> |
| | <div class="absolute top-2 right-2 bg-gray-900 text-primary-500 px-2 py-1 rounded-full text-xs font-bold"> |
| | 60% OFF |
| | </div> |
| | </div> |
| | <div class="p-4"> |
| | <h3 class="font-bold mb-1">Vegetarian Lunch Box</h3> |
| | <p class="text-gray-400 text-sm mb-3">GreenEats • 0.7 mi</p> |
| | <div class="flex items-center justify-between"> |
| | <div> |
| | <span class="text-gray-400 line-through">$12</span> |
| | <span class="text-primary-500 font-bold ml-2">$4.80</span> |
| | </div> |
| | <div class="flex items-center text-gray-400 text-sm"> |
| | <i data-feather="clock" class="w-4 h-4 mr-1"></i> |
| | <span>Pickup: 1-2 PM</span> |
| | </div> |
| | </div> |
| | <button |
| | class="w-full mt-4 bg-primary-500 hover:bg-primary-600 text-white font-bold py-2 px-4 rounded-lg transition" |
| | data-add-to-cart |
| | data-product-id="vegetarian-lunch" |
| | data-product-name="Vegetarian Lunch Box" |
| | data-product-price="4.80" |
| | data-product-image="http://static.photos/food/640x360/2"> |
| | Add to Cart - $4.80 |
| | </button> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg transition duration-300 card-hover"> |
| | <div class="relative h-48 overflow-hidden"> |
| | <img src="http://static.photos/food/640x360/3" alt="Food Rescue" class="w-full h-full object-cover"> |
| | <div class="absolute top-2 right-2 bg-gray-900 text-primary-500 px-2 py-1 rounded-full text-xs font-bold"> |
| | 70% OFF |
| | </div> |
| | </div> |
| | <div class="p-4"> |
| | <h3 class="font-bold mb-1">Sushi Surprise Pack</h3> |
| | <p class="text-gray-400 text-sm mb-3">Ocean Bites • 1.2 mi</p> |
| | <div class="flex items-center justify-between"> |
| | <div> |
| | <span class="text-gray-400 line-through">$20</span> |
| | <span class="text-primary-500 font-bold ml-2">$6.00</span> |
| | </div> |
| | <div class="flex items-center text-gray-400 text-sm"> |
| | <i data-feather="clock" class="w-4 h-4 mr-1"></i> |
| | <span>Pickup: 8-9 PM</span> |
| | </div> |
| | </div> |
| | <button |
| | class="w-full mt-4 bg-primary-500 hover:bg-primary-600 text-white font-bold py-2 px-4 rounded-lg transition" |
| | data-add-to-cart |
| | data-product-id="sushi-pack" |
| | data-product-name="Sushi Surprise Pack" |
| | data-product-price="6.00" |
| | data-product-image="http://static.photos/food/640x360/3"> |
| | Add to Cart - $6.00 |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-16 px-4 bg-gray-800"> |
| | <div class="max-w-7xl mx-auto"> |
| | <div class="text-center mb-16"> |
| | <h2 class="text-3xl font-bold mb-4"> |
| | Why Choose <span class="gradient-text">YourHand.co</span>? |
| | </h2> |
| | <p class="text-xl text-gray-300 max-w-3xl mx-auto"> |
| | We combine the best of handmade craftsmanship and sustainable food practices in one platform. |
| | </p> |
| | </div> |
| | |
| | <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| | <div class="bg-gray-700 p-6 rounded-xl text-center"> |
| | <div class="w-16 h-16 bg-primary-500 bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4"> |
| | <i data-feather="shopping-bag" class="w-8 h-8 text-primary-500"></i> |
| | </div> |
| | <h3 class="text-xl font-bold mb-2">Unique Handmade Items</h3> |
| | <p class="text-gray-400"> |
| | Discover one-of-a-kind pieces crafted with love and care by talented artisans worldwide. |
| | </p> |
| | </div> |
| | |
| | <div class="bg-gray-700 p-6 rounded-xl text-center"> |
| | <div class="w-16 h-16 bg-primary-500 bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4"> |
| | <i data-feather="heart" class="w-8 h-8 text-primary-500"></i> |
| | </div> |
| | <h3 class="text-xl font-bold mb-2">Support Small Businesses</h3> |
| | <p class="text-gray-400"> |
| | Your purchases directly support independent creators and their small businesses. |
| | </p> |
| | </div> |
| | |
| | <div class="bg-gray-700 p-6 rounded-xl text-center"> |
| | <div class="w-16 h-16 bg-primary-500 bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4"> |
| | <i data-feather="globe" class="w-8 h-8 text-primary-500"></i> |
| | </div> |
| | <h3 class="text-xl font-bold mb-2">Reduce Food Waste</h3> |
| | <p class="text-gray-400"> |
| | Rescue delicious food at discounted prices while helping the environment. |
| | </p> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-16 px-4 bg-gray-900"> |
| | <div class="max-w-7xl mx-auto"> |
| | <h2 class="text-3xl font-bold text-center mb-16"> |
| | What Our <span class="gradient-text">Community</span> Says |
| | </h2> |
| | |
| | <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| | <div class="bg-gray-800 p-6 rounded-xl"> |
| | <div class="flex items-center mb-4"> |
| | <div class="w-12 h-12 rounded-full overflow-hidden mr-4"> |
| | <img src="http://static.photos/people/200x200/5" alt="User" class="w-full h-full object-cover"> |
| | </div> |
| | <div> |
| | <h4 class="font-bold">Jamie L.</h4> |
| | <div class="flex items-center text-yellow-400"> |
| | <i data-feather="star" class="w-4 h-4 fill-current"></i> |
| | <i data-feather="star" class="w-4 h-4 fill-current"></i> |
| | <i data-feather="star" class="w-4 h-4 fill-current"></i> |
| | <i data-feather="star" class="w-4 h-4 fill-current"></i> |
| | <i data-feather="star" class="w-4 h-4 fill-current"></i> |
| | </div> |
| | </div> |
| | </div> |
| | <p class="text-gray-300"> |
| | "I've found the most beautiful handmade jewelry here that I can't find anywhere else. Plus, I love being able to rescue food from my favorite cafes!" |
| | </p> |
| | </div> |
| | |
| | <div class="bg-gray-800 p-6 rounded-xl"> |
| | <div class="flex items-center mb-4"> |
| | <div class="w-12 h-12 rounded-full overflow-hidden mr-4"> |
| | <img src="http://static.photos/people/200x200/6" alt="User" class="w-full h-full object-cover"> |
| | </div> |
| | <div> |
| | <h4 class="font-bold">Marcus T.</h4> |
| | <div class="flex items-center text-yellow-400"> |
| | <i data-feather="star" class="w-4 h-4 fill-current"></i> |
| | <i data-feather="star" class="w-4 h-4 fill-current"></i> |
| | <i data-feather="star" class="w-4 h-4 fill-current"></i> |
| | <i data-feather="star" class="w-4 h-4 fill-current"></i> |
| | <i data-feather="star" class="w-4 h-4 fill-current"></i> |
| | </div> |
| | </div> |
| | </div> |
| | <p class="text-gray-300"> |
| | "As a small business owner, YourHand.co has given me the perfect platform to showcase my woodworking. The community is amazing and sales have been great!" |
| | </p> |
| | </div> |
| | |
| | <div class="bg-gray-800 p-6 rounded-xl"> |
| | <div class="flex items-center mb-4"> |
| | <div class="w-12 h-12 rounded-full overflow-hidden mr-4"> |
| | <img src="http://static.photos/people/200x200/7" alt="User" class="w-full h-full object-cover"> |
| | </div> |
| | <div> |
| | <h4 class="font-bold">Sophia K.</h4> |
| | <div class="flex items-center text-yellow-400"> |
| | <i data-feather="star" class="w-4 h-4 fill-current"></i> |
| | <i data-feather="star" class="w-4 h-4 fill-current"></i> |
| | <i data-feather="star" class="w-4 h-4 fill-current"></i> |
| | <i data-feather="star" class="w-4 h-4 fill-current"></i> |
| | <i data-feather="star" class="w-4 h-4"></i> |
| | </div> |
| | </div> |
| | </div> |
| | <p class="text-gray-300"> |
| | "The food rescue program has saved me so much money on lunches! I get high-quality meals for a fraction of the price while reducing waste. Win-win!" |
| | </p> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| | |
| | <section class="py-16 px-4 bg-gray-800"> |
| | <div class="max-w-7xl mx-auto"> |
| | <div class="flex items-center justify-between mb-10"> |
| | <h2 class="text-3xl font-bold"> |
| | <span class="gradient-text">Live Shopping</span> Broadcasts |
| | </h2> |
| | <a href="#" class="flex items-center text-primary-500 hover:text-primary-400 transition"> |
| | View all <i data-feather="chevron-right" class="ml-1 w-5 h-5"></i> |
| | </a> |
| | </div> |
| | |
| | <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> |
| | |
| | <div class="bg-gray-700 rounded-xl overflow-hidden shadow-lg"> |
| | <div class="relative h-96 overflow-hidden"> |
| | <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center"> |
| | <div class="text-center"> |
| | <i data-feather="play-circle" class="w-16 h-16 text-primary-500 mx-auto mb-4"></i> |
| | <span class="text-white text-xl font-bold">Live Now</span> |
| | </div> |
| | </div> |
| | <img src="http://static.photos/workspace/1024x576/1" alt="Live Stream" class="w-full h-full object-cover"> |
| | <div class="absolute bottom-4 left-4 bg-red-500 text-white px-2 py-1 rounded-full text-xs font-bold"> |
| | LIVE |
| | </div> |
| | <div class="absolute bottom-4 right-4 bg-gray-900 text-white px-2 py-1 rounded-full text-xs font-bold"> |
| | 128 Viewers |
| | </div> |
| | </div> |
| | <div class="p-4 h-64 flex flex-col"> |
| | <div class="flex items-center mb-4"> |
| | <div class="w-10 h-10 rounded-full overflow-hidden mr-3"> |
| | <img src="http://static.photos/people/200x200/8" alt="Seller" class="w-full h-full object-cover"> |
| | </div> |
| | <div> |
| | <h4 class="font-bold">CraftyHands Studio</h4> |
| | <p class="text-sm text-gray-400">Macrame & Home Decor</p> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="flex-1 bg-gray-800 rounded-lg overflow-hidden flex flex-col"> |
| | <div id="chatMessages" class="flex-1 p-3 space-y-2 overflow-y-auto text-sm"> |
| | <div class="bg-gray-700 rounded-lg p-2 max-w-xs"> |
| | <span class="font-bold text-primary-500">Sarah:</span> Love that wall hanging! |
| | </div> |
| | <div class="bg-gray-700 rounded-lg p-2 max-w-xs ml-auto"> |
| | <span class="font-bold text-green-500">Seller:</span> Thanks! It's 100% handmade. |
| | </div> |
| | </div> |
| | <div class="border-t border-gray-700 p-2"> |
| | <div class="flex"> |
| | <input type="text" placeholder="Type your message..." |
| | class="flex-1 bg-gray-700 border border-gray-600 rounded-l-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary-500"> |
| | <button class="bg-primary-500 hover:bg-primary-600 text-white px-3 py-2 rounded-r-lg transition"> |
| | <i data-feather="send" class="w-4 h-4"></i> |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <button class="mt-4 w-full bg-primary-500 hover:bg-primary-600 text-white font-bold py-2 px-4 rounded-lg transition"> |
| | Buy Now - $45.00 |
| | </button> |
| | </div> |
| | </div> |
| | |
| | |
| | <div> |
| | <h3 class="text-xl font-bold mb-4">Upcoming Streams</h3> |
| | <div class="space-y-4"> |
| | |
| | <div class="bg-gray-700 rounded-lg p-4 flex items-center"> |
| | <div class="w-16 h-16 rounded-lg overflow-hidden mr-3"> |
| | <img src="http://static.photos/craft/200x200/5" alt="Upcoming" class="w-full h-full object-cover"> |
| | </div> |
| | <div class="flex-1"> |
| | <h4 class="font-bold">Pottery Workshop</h4> |
| | <p class="text-sm text-gray-400">Tomorrow, 3PM EST</p> |
| | </div> |
| | <button class="bg-gray-600 hover:bg-gray-500 text-white px-3 py-1 rounded-lg text-sm transition"> |
| | Remind Me |
| | </button> |
| | </div> |
| | |
| | |
| | <div class="bg-gray-700 rounded-lg p-4 flex items-center"> |
| | <div class="w-16 h-16 rounded-lg overflow-hidden mr-3"> |
| | <img src="http://static.photos/food/200x200/5" alt="Upcoming" class="w-full h-full object-cover"> |
| | </div> |
| | <div class="flex-1"> |
| | <h4 class="font-bold">Bakery Surprise Box</h4> |
| | <p class="text-sm text-gray-400">Friday, 10AM EST</p> |
| | </div> |
| | <button class="bg-gray-600 hover:bg-gray-500 text-white px-3 py-1 rounded-lg text-sm transition"> |
| | Remind Me |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-20 px-4 bg-gradient-to-r from-gray-800 to-gray-900"> |
| | <div class="max-w-4xl mx-auto text-center"> |
| | <h2 class="text-3xl md:text-5xl font-bold mb-6"> |
| | Ready to Join the <span class="gradient-text">YourHand.co</span> Community? |
| | </h2> |
| | <p class="text-xl text-gray-300 mb-10"> |
| | Whether you're looking for unique handmade items or want to rescue delicious food while saving money, we've got you covered. |
| | </p> |
| | <div class="flex flex-col sm:flex-row justify-center gap-4"> |
| | <a href="#" class="bg-primary-500 hover:bg-primary-600 text-white font-bold py-3 px-8 rounded-full transition transform hover:scale-105"> |
| | Shop Now |
| | </a> |
| | <a href="register.html?role=seller" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 px-8 rounded-full transition transform hover:scale-105"> |
| | Become a Seller |
| | </a> |
| | </div> |
| | </div> |
| | </section> |
| | |
| | <script> |
| | |
| | function initMaps() { |
| | initMap(); |
| | initFoodMap(); |
| | } |
| | |
| | |
| | const chatMessages = document.getElementById('chatMessages'); |
| | const chatInput = document.querySelector('#chatMessages + div input'); |
| | const chatSendBtn = document.querySelector('#chatMessages + div button'); |
| | |
| | chatSendBtn.addEventListener('click', () => { |
| | if (chatInput.value.trim() !== '') { |
| | const messageDiv = document.createElement('div'); |
| | messageDiv.className = 'bg-gray-700 rounded-lg p-2 max-w-xs ml-auto'; |
| | messageDiv.innerHTML = `<span class="font-bold">You:</span> ${chatInput.value}`; |
| | chatMessages.appendChild(messageDiv); |
| | chatInput.value = ''; |
| | chatMessages.scrollTop = chatMessages.scrollHeight; |
| | } |
| | }); |
| | |
| | |
| | setInterval(() => { |
| | const messages = [ |
| | {user: 'Alex', text: 'How long did that take to make?'}, |
| | {user: 'Seller', text: 'About 8 hours total work!', isSeller: true}, |
| | {user: 'Jamie', text: 'Do you do custom colors?'}, |
| | {user: 'Taylor', text: 'Just bought one - so excited!'} |
| | ]; |
| | |
| | const randomMsg = messages[Math.floor(Math.random() * messages.length)]; |
| | const messageDiv = document.createElement('div'); |
| | messageDiv.className = 'bg-gray-700 rounded-lg p-2 max-w-xs'; |
| | if (randomMsg.isSeller) { |
| | messageDiv.innerHTML = `<span class="font-bold text-green-500">Seller:</span> ${randomMsg.text}`; |
| | } else { |
| | messageDiv.innerHTML = `<span class="font-bold text-primary-500">${randomMsg.user}:</span> ${randomMsg.text}`; |
| | } |
| | chatMessages.appendChild(messageDiv); |
| | chatMessages.scrollTop = chatMessages.scrollHeight; |
| | }, 10000); |
| | </script> |
| |
|
| | |
| | <footer class="bg-gray-900 border-t border-gray-800 py-12 px-4 relative z-10"> |
| | <div class="max-w-7xl mx-auto"> |
| | <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| | <div> |
| | <div class="flex items-center space-x-2 mb-4"> |
| | <i data-feather="hand" class="text-primary-500 w-8 h-8"></i> |
| | <span class="text-2xl font-bold gradient-text">YourHand.co</span> |
| | </div> |
| | <p class="text-gray-400 mb-4"> |
| | Where handmade meets sustainability. Supporting artisans and reducing food waste. |
| | </p> |
| | <div class="flex space-x-4"> |
| | <a href="#" class="text-gray-400 hover:text-primary-500 transition"> |
| | <i data-feather="facebook" class="w-5 h-5"></i> |
| | </a> |
| | <a href="#" class="text-gray-400 hover:text-primary-500 transition"> |
| | <i data-feather="instagram" class="w-5 h-5"></i> |
| | </a> |
| | <a href="#" class="text-gray-400 hover:text-primary-500 transition"> |
| | <i data-feather="twitter" class="w-5 h-5"></i> |
| | </a> |
| | <a href="#" class="text-gray-400 hover:text-primary-500 transition"> |
| | <i data-feather="youtube" class="w-5 h-5"></i> |
| | </a> |
| | </div> |
| | </div> |
| | |
| | <div> |
| | <h3 class="text-lg font-bold mb-4">Marketplace</h3> |
| | <ul class="space-y-2"> |
| | <li><a href="#" class="text-gray-400 hover:text-primary-500 transition">All Categories</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-primary-500 transition">New Arrivals</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-primary-500 transition">Best Sellers</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-primary-500 transition">Gift Ideas</a></li> |
| | <li> |
| | <a href="login.html" class="text-gray-400 hover:text-primary-500 transition">Become a Seller</a> |
| | </li> |
| | </ul> |
| | </div> |
| | |
| | <div> |
| | <h3 class="text-lg font-bold mb-4">Food Rescue</h3> |
| | <ul class="space-y-2"> |
| | <li><a href="#" class="text-gray-400 hover:text-primary-500 transition">Nearby Offers</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-primary-500 transition">How It Works</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-primary-500 transition">For Businesses</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-primary-500 transition">Impact</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-primary-500 transition">FAQ</a></li> |
| | </ul> |
| | </div> |
| | |
| | <div> |
| | <h3 class="text-lg font-bold mb-4">Company</h3> |
| | <ul class="space-y-2"> |
| | <li><a href="#" class="text-gray-400 hover:text-primary-500 transition">About Us</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-primary-500 transition">Careers</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-primary-500 transition">Blog</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-primary-500 transition">Press</a></li> |
| | <li><a href="#" class="text-gray-400 hover:text-primary-500 transition">Contact</a></li> |
| | </ul> |
| | </div> |
| | </div> |
| | |
| | <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> |
| | <p class="text-gray-500 text-sm mb-4 md:mb-0"> |
| | © 2023 YourHand.co. All rights reserved. |
| | </p> |
| | <div class="flex space-x-6"> |
| | <a href="#" class="text-gray-500 hover:text-primary-500 text-sm transition">Privacy Policy</a> |
| | <a href="#" class="text-gray-500 hover:text-primary-500 text-sm transition">Terms of Service</a> |
| | <a href="#" class="text-gray-500 hover:text-primary-500 text-sm transition">Cookie Policy</a> |
| | </div> |
| | </div> |
| | </div> |
| | </footer> |
| |
|
| | <script> |
| | |
| | const themeToggle = document.getElementById('theme-toggle'); |
| | const html = document.documentElement; |
| | |
| | themeToggle.addEventListener('click', () => { |
| | html.classList.toggle('dark'); |
| | const icon = themeToggle.querySelector('i'); |
| | if (html.classList.contains('dark')) { |
| | icon.setAttribute('data-feather', 'moon'); |
| | } else { |
| | icon.setAttribute('data-feather', 'sun'); |
| | } |
| | feather.replace(); |
| | }); |
| | |
| | feather.replace(); |
| | |
| | |
| | function loadGoogleMaps() { |
| | const script = document.createElement('script'); |
| | script.src = `https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMaps`; |
| | script.async = true; |
| | script.defer = true; |
| | document.head.appendChild(script); |
| | } |
| | |
| | window.initMap = initMap; |
| | document.addEventListener('DOMContentLoaded', initMap); |
| | |
| | let cart = JSON.parse(localStorage.getItem('cart')) || []; |
| | |
| | function updateCartCounter() { |
| | const counter = document.getElementById('cartCounter'); |
| | const totalItems = cart.reduce((total, item) => total + item.quantity, 0); |
| | counter.textContent = totalItems; |
| | totalItems > 0 ? counter.classList.remove('hidden') : counter.classList.add('hidden'); |
| | } |
| | |
| | |
| | document.querySelectorAll('[data-add-to-cart]').forEach(button => { |
| | button.addEventListener('click', function() { |
| | const productId = this.dataset.productId; |
| | const productName = this.dataset.productName; |
| | const productPrice = parseFloat(this.dataset.productPrice); |
| | const productImage = this.dataset.productImage; |
| | |
| | |
| | const existingItem = cart.find(item => item.id === productId); |
| | if (existingItem) { |
| | existingItem.quantity += 1; |
| | } else { |
| | cart.push({ |
| | id: productId, |
| | name: productName, |
| | price: productPrice, |
| | image: productImage, |
| | quantity: 1 |
| | }); |
| | } |
| | |
| | localStorage.setItem('cart', JSON.stringify(cart)); |
| | updateCartCounter(); |
| | |
| | |
| | const notification = document.createElement('div'); |
| | notification.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg z-50 animate-bounce'; |
| | notification.innerHTML = ` |
| | <div class="flex items-center"> |
| | <i data-feather="check-circle" class="w-5 h-5 mr-2"></i> |
| | Added to cart! |
| | </div> |
| | `; |
| | document.body.appendChild(notification); |
| | feather.replace(); |
| | |
| | setTimeout(() => { |
| | notification.remove(); |
| | }, 3000); |
| | }); |
| | }); |
| | |
| | updateCartCounter(); |
| | |
| | |
| | const chatWidget = document.createElement('div'); |
| | chatWidget.innerHTML = ` |
| | <div class="fixed bottom-6 right-6 z-50"> |
| | <button id="chatToggle" class="w-14 h-14 bg-primary-500 rounded-full shadow-lg flex items-center justify-center text-white hover:bg-primary-600 transition transform hover:scale-110"> |
| | <i data-feather="message-circle" class="w-6 h-6"></i> |
| | </button> |
| | <div id="chatWindow" class="hidden absolute bottom-16 right-0 w-80 bg-gray-800 rounded-xl shadow-xl border border-gray-700 overflow-hidden"> |
| | <div class="bg-gray-700 px-4 py-3 flex justify-between items-center border-b border-gray-600"> |
| | <h3 class="font-bold">Chat Support</h3> |
| | <button id="closeChat" class="text-gray-400 hover:text-white"> |
| | <i data-feather="x" class="w-5 h-5"></i> |
| | </button> |
| | </div> |
| | <div id="chatMessages" class="h-64 overflow-y-auto p-4 space-y-3"> |
| | <div class="bg-gray-700 rounded-lg p-3 text-sm max-w-xs"> |
| | <p>Hello! How can we help you today?</p> |
| | <span class="text-xs text-gray-400 block mt-1">Just now</span> |
| | </div> |
| | </div> |
| | <div class="border-t border-gray-700 p-3"> |
| | <div class="flex"> |
| | <input type="text" placeholder="Type your message..." |
| | class="flex-1 bg-gray-700 border border-gray-600 rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500"> |
| | <button class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-r-lg transition"> |
| | <i data-feather="send" class="w-5 h-5"></i> |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | `; |
| | document.body.appendChild(chatWidget); |
| | feather.replace(); |
| | |
| | |
| | const chatToggle = document.getElementById('chatToggle'); |
| | const chatWindow = document.getElementById('chatWindow'); |
| | const closeChat = document.getElementById('chatClose'); |
| | |
| | chatToggle.addEventListener('click', () => { |
| | chatWindow.classList.toggle('hidden'); |
| | feather.replace(); |
| | }); |
| | |
| | closeChat.addEventListener('click', () => { |
| | chatWindow.classList.add('hidden'); |
| | }); |
| | </script> |
| | </body> |
| | </html> |
| |
|
