Spaces:

Infinity-1995
/

Nourish

Running

File size: 4,127 Bytes

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