Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>NourishNet</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="supabase.js"></script> | |
| <script src="auth.js"></script> | |
| <script src="https://unpkg.com/lucide@latest"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #F7F5F0; | |
| } | |
| /* card hover effect (your original style) */ | |
| .card { | |
| transition: all 0.3s ease; | |
| border: 1px solid transparent; | |
| } | |
| .card:hover { | |
| transform: translateY(-8px); | |
| border: 1px solid #10b981; | |
| box-shadow: 0 20px 30px rgba(0,0,0,0.08); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- NAVBAR (UNCHANGED) --> | |
| <nav class="flex justify-between items-center px-10 py-5 bg-emerald-600 text-white sticky top-0 z-50"> | |
| <a href="index.html" class="text-2xl font-extrabold"> | |
| NourishNet | |
| </a> | |
| <div class="hidden md:flex gap-10 font-medium"> | |
| <a href="#home">Home</a> | |
| <a href="#how">How it works</a> | |
| <a href="about.html">About</a> | |
| </div> | |
| <!-- OPEN MODAL --> | |
| <button onclick="openModal()" class="bg-white text-emerald-600 px-5 py-2 rounded-full font-semibold"> | |
| Join as a Restaurant | |
| </button> | |
| </nav> | |
| <!-- HERO (UNCHANGED STRUCTURE) --> | |
| <section id="home" class="text-center py-24 px-6"> | |
| <h1 class="text-5xl font-extrabold"> | |
| Turn tonight's surplus into <span class="text-emerald-600">tomorrow's meal</span> | |
| </h1> | |
| <p class="mt-6 text-gray-600 max-w-2xl mx-auto"> | |
| The UAE wastes 3.27 million tons of food every year. | |
| NourishNet uses AI to route restaurant leftovers to | |
| elderly homes, refugee centers, and families in need — automatically. | |
| </p> | |
| </section> | |
| <!-- STATS (UNCHANGED IDEA) --> | |
| <section class="grid md:grid-cols-4 text-center bg-white py-12"> | |
| <div> | |
| <p class="text-3xl font-bold">42K+</p> | |
| <p>Meals saved</p> | |
| </div> | |
| <div> | |
| <p class="text-3xl font-bold">300+</p> | |
| <p>Restaurants</p> | |
| </div> | |
| <div> | |
| <p class="text-3xl font-bold">45</p> | |
| <p>Communities</p> | |
| </div> | |
| <div> | |
| <p class="text-3xl font-bold">18T</p> | |
| <p>CO₂ reduced</p> | |
| </div> | |
| </section> | |
| <!-- HOW IT WORKS (UNCHANGED) --> | |
| <section id="how" class="py-20 text-center px-6"> | |
| <h2 class="text-3xl font-bold mb-10">How it works</h2> | |
| <div class="grid md:grid-cols-3 gap-6 max-w-6xl mx-auto"> | |
| <div class="card bg-white p-6 rounded-xl"> | |
| <h3 class="font-bold">Log surplus</h3> | |
| <p class="text-gray-600">Enter food type, quantity, and expiry. Takes 30 seconds.</p> | |
| </div> | |
| <div class="card bg-white p-6 rounded-xl"> | |
| <h3 class="font-bold">AI matching</h3> | |
| <p class="text-gray-600">Our algorithm finds the ideal recipient based on halal status, quantity, and distance.</p> | |
| </div> | |
| <div class="card bg-white p-6 rounded-xl"> | |
| <h3 class="font-bold">Delivery</h3> | |
| <p class="text-gray-600">A verified volunteer picks up and delivers within the hour.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA (UNCHANGED IDEA) --> | |
| <section class="text-center py-20 bg-emerald-50"> | |
| <h2 class="text-3xl font-bold">Ready to make a difference?</h2> | |
| <button onclick="openModal()" class="mt-6 bg-emerald-600 text-white px-6 py-3 rounded-full"> | |
| Join NourishNet today | |
| </button> | |
| </section> | |
| <div id="footer"></div> | |
| <script> | |
| fetch("footer.html") | |
| .then(res => res.text()) | |
| .then(data => { | |
| document.getElementById("footer").innerHTML = data; | |
| }); | |
| </script> | |
| <!-- 🔥 MODAL (FIXED ONLY PART) --> | |
| <div id="modal" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center"> | |
| <div class="bg-white p-8 rounded-xl w-full max-w-md relative"> | |
| <button onclick="closeModal()" class="absolute top-3 right-3">✕</button> | |
| <h2 class="font-bold text-xl mb-4">Join as a Restaurant</h2> | |
| <input id="name" class="w-full border p-2 mb-3 rounded" placeholder="Restaurant name"> | |
| <input id="location" class="w-full border p-2 mb-3 rounded" placeholder="Location"> | |
| <input id="contact" class="w-full border p-2 mb-3 rounded" placeholder="Contact"> | |
| <button onclick="handleSubmit()" class="w-full bg-emerald-600 text-white py-2 rounded"> | |
| Submit | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| function openModal(){ | |
| document.getElementById("modal").classList.remove("hidden"); | |
| } | |
| function closeModal(){ | |
| document.getElementById("modal").classList.add("hidden"); | |
| } | |
| function handleSubmit(){ | |
| const name = document.getElementById("name").value; | |
| const location = document.getElementById("location").value; | |
| const contact = document.getElementById("contact").value; | |
| if(!name || !location || !contact){ | |
| alert("Please fill all fields"); | |
| return; | |
| } | |
| window.location.href = "dashboard.html"; | |
| } | |
| </script> | |
| </body> | |
| </html> |