Hugging Face's logo

Spaces:
Infinity-1995
/
Nourish
Running

App Files Community
Nourish
File size: 4,750 Bytes
741b728
 
 
 
 
 
 
b6d4780
172ef3d
741b728
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6a652f4
e169006
741b728
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
cea1e69
741b728
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
84d9250
741b728
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2632285
 
 
 
 
 
 
 
 
741b728
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Impact - NourishNet</title>

<script src="https://cdn.tailwindcss.com"></script>
  <script src="supabase.js"></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 #e5e7eb;
}
.card:hover {
  transform: translateY(-6px);
  border: 1px solid #10b981;
  box-shadow: 0 20px 30px rgba(0,0,0,0.08);
}
</style>
</head>

<body>

<!-- NAVBAR -->
<nav class="flex justify-between items-center px-10 py-5 bg-emerald-600 text-white">
  <a href="dashboard.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">Impact</a>
    <a href="leaderboard.html">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-4xl font-extrabold">Your Impact</h1>
  <p class="text-gray-600 mt-2 text-lg">
    See how your donations are making a difference
  </p>
</section>

<!-- METRICS -->
<section class="grid md:grid-cols-4 gap-6 px-10">

  <div class="card bg-white p-6 rounded-xl text-center">
    <p class="text-3xl font-bold text-emerald-600">1,240</p>
    <p class="text-gray-600 mt-2">Meals saved</p>
  </div>

  <div class="card bg-white p-6 rounded-xl text-center">
    <p class="text-3xl font-bold text-emerald-600">2.8</p>
    <p class="text-gray-600 mt-2">CO₂ saved (tons)</p>
  </div>

  <div class="card bg-white p-6 rounded-xl text-center">
    <p class="text-3xl font-bold text-emerald-600">DHS 1,920</p>
    <p class="text-gray-600 mt-2">Disposal costs avoided</p>
  </div>

  <div class="card bg-white p-6 rounded-xl text-center">
    <p class="text-3xl font-bold text-emerald-600">85</p>
    <p class="text-gray-600 mt-2">Donations made</p>
  </div>

</section>

<!-- DISTRIBUTION -->
<section class="px-10 mt-12">

  <div class="card bg-white p-8 rounded-xl">

    <h2 class="text-2xl font-bold mb-6">Distribution Breakdown</h2>

    <!-- Elderly -->
    <div class="mb-5">
      <p class="font-semibold">Elderly Homes (40%)</p>
      <div class="w-full bg-gray-200 h-3 rounded-full mt-2">
        <div class="bg-emerald-600 h-3 rounded-full" style="width:40%"></div>
      </div>
    </div>

    <!-- Refugee -->
    <div class="mb-5">
      <p class="font-semibold">Refugee Centers (35%)</p>
      <div class="w-full bg-gray-200 h-3 rounded-full mt-2">
        <div class="bg-emerald-600 h-3 rounded-full" style="width:35%"></div>
      </div>
    </div>

    <!-- Low income -->
    <div>
      <p class="font-semibold">Low-Income Families (25%)</p>
      <div class="w-full bg-gray-200 h-3 rounded-full mt-2">
        <div class="bg-emerald-600 h-3 rounded-full" style="width:25%"></div>
      </div>
    </div>

  </div>

</section>

<!-- IMPACT MESSAGE -->
<section class="px-10 mt-10">

  <div class="card bg-white p-8 rounded-xl">

    <h2 class="text-2xl font-bold">Latest Impact Message</h2>

    <p class="text-gray-700 mt-4 text-lg leading-relaxed">
      "Your recent contribution helped deliver fresh meals to people in need while reducing food waste in the community. Every donation continues to support families, shelters, and care centers across the UAE."
    </p>

  </div>

</section>

<!-- BADGES -->
<section class="px-10 mt-12 mb-12">

  <h2 class="text-2xl font-bold mb-6">Your Badges</h2>

  <div class="grid md:grid-cols-3 gap-6">

    <!-- Earned -->
    <div class="card bg-white p-6 rounded-xl text-center">
      <p class="text-4xl">🥇</p>
      <p class="font-semibold mt-2">Gold Contributor</p>
      <p class="text-gray-600 text-sm mt-1">150+ meals donated</p>
    </div>

    <!-- Earned -->
    <div class="card bg-white p-6 rounded-xl text-center">
      <p class="text-4xl">🔥</p>
      <p class="font-semibold mt-2">7-Day Streak</p>
      <p class="text-gray-600 text-sm mt-1">Consistent donations</p>
    </div>

    <!-- Locked -->
    <div class="card bg-gray-100 p-6 rounded-xl text-center opacity-70">
      <p class="text-4xl">💎</p>
      <p class="font-semibold mt-2">Platinum Hero</p>
      <p class="text-gray-600 text-sm mt-1">300+ meals needed</p>
    </div>

  </div>

</section>
<div id="footer"></div>

<script>
fetch("footer.html")
  .then(res => res.text())
  .then(data => {
    document.getElementById("footer").innerHTML = data;
  });
</script>

</body>
</html>