Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Dashboard - NourishNet</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></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 { | |
| transition: all 0.3s ease; | |
| border: 1px solid transparent; | |
| } | |
| .card:hover { | |
| transform: translateY(-6px); | |
| border: 1px solid #10b981; | |
| box-shadow: 0 20px 30px rgba(0,0,0,0.08); | |
| } | |
| .ai-card { | |
| background: #ecfdf5; | |
| border: 1px solid #10b981; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- NAVBAR --> | |
| <nav class="flex justify-between items-center px-10 py-5 bg-emerald-600 text-white"> | |
| <a href="log.html" class="text-2xl font-extrabold"> | |
| NourishNet | |
| </a> | |
| <div class="hidden md:flex gap-10 font-medium items-center"> | |
| <a href="dashboard.html">Dashboard</a> | |
| <a href="impact.html" class="hover:opacity-80">Impact</a> | |
| <a href="leaderboard.html" class="hover:opacity-80">Leaderboard</a> | |
| <a href="index.html" class="bg-white text-emerald-600 px-4 py-1 rounded-full font-semibold"> | |
| Logout | |
| </a> | |
| </div> | |
| </nav> | |
| <!-- HEADER --> | |
| <section class="px-10 py-10"> | |
| <h1 class="text-3xl font-extrabold"> | |
| Welcome back, Al Safadi Restaurant | |
| </h1> | |
| <p class="text-gray-600 mt-2"> | |
| Dubai · This week's overview | |
| </p> | |
| </section> | |
| <!-- STATS --> | |
| <section class="grid md:grid-cols-3 gap-6 px-10"> | |
| <div class="card bg-white p-6 rounded-xl"> | |
| <p class="text-3xl font-bold text-emerald-600">127</p> | |
| <p class="text-gray-600">Meals saved this week</p> | |
| </div> | |
| <div class="card bg-white p-6 rounded-xl"> | |
| <p class="text-3xl font-bold text-emerald-600">0.52</p> | |
| <p class="text-gray-600">CO₂ avoided (tons)</p> | |
| </div> | |
| <div class="card bg-white p-6 rounded-xl"> | |
| <p class="text-3xl font-bold text-emerald-600">340</p> | |
| <p class="text-gray-600">Points earned</p> | |
| </div> | |
| </section> | |
| <!-- AI PREDICTION --> | |
| <section class="px-10 mt-10"> | |
| <div class="ai-card p-8 rounded-xl"> | |
| <h2 class="text-xl font-bold"> | |
| AI prediction for tonight | |
| </h2> | |
| <p class="mt-2 text-gray-700"> | |
| Predicted surplus: medium urgency | |
| </p> | |
| <p class="text-3xl font-bold text-emerald-600 mt-4"> | |
| ~45 portions | |
| </p> | |
| <p class="text-gray-600 mt-2"> | |
| Based on your last 4 weeks of Tuesday donations | |
| </p> | |
| <div class="mt-4 p-4 bg-white rounded-lg border"> | |
| <p class="font-semibold">Best match: Elderly care home</p> | |
| <p class="text-gray-600 mt-1"> | |
| 45 portions perfectly sized for Al Rahma Elderly Care Home (capacity: 80) | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- STREAK + BADGE --> | |
| <section class="grid md:grid-cols-2 gap-6 px-10 mt-10"> | |
| <!-- STREAK --> | |
| <div class="card bg-white p-6 rounded-xl"> | |
| <h3 class="font-bold text-lg">Donation streak</h3> | |
| <p class="text-4xl font-bold text-emerald-600 mt-2">12</p> | |
| <p class="text-gray-600">days</p> | |
| <p class="mt-3 text-gray-700"> | |
| Keep it going! 2 more days to unlock the "Fortnight Hero" badge. | |
| </p> | |
| <div class="w-full bg-gray-200 h-2 rounded-full mt-4"> | |
| <div class="bg-emerald-600 h-2 rounded-full" style="width:85%"></div> | |
| </div> | |
| </div> | |
| <!-- BADGE --> | |
| <div class="card bg-white p-6 rounded-xl"> | |
| <h3 class="font-bold text-lg">Current badge</h3> | |
| <p class="text-2xl mt-4">🥇 Gold Contributor</p> | |
| <p class="text-gray-600 mt-4"> | |
| 155 more meals to reach Platinum | |
| </p> | |
| </div> | |
| </section> | |
| <!-- ✅ BUTTON MOVED OUTSIDE + CENTERED --> | |
| <section class="flex justify-center mt-10"> | |
| <a href="log.html"> | |
| <button class="bg-emerald-600 text-white px-10 py-3 rounded-full font-semibold text-lg hover:scale-105 transition"> | |
| Log surplus now | |
| </button> | |
| </a> | |
| </section> | |
| <div id="footer"></div> | |
| <script> | |
| fetch("footer.html") | |
| .then(res => res.text()) | |
| .then(data => { | |
| document.getElementById("footer").innerHTML = data; | |
| }); | |
| </script> | |
| </body> | |
| </html> |