| <!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> |
|
|
