Hugging Face's logo

Spaces:
Infinity-1995
/
Nourish
Running

App Files Community
Infinity-1995 commited on
Commit
741b728
·
verified ·
1 Parent(s): 8b809a4

Create impact.html

Browse files
Files changed (1) hide show
  1. impact.html +166 -0
impact.html ADDED
@@ -0,0 +1,166 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Impact - NourishNet</title>
6
+
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
9
+
10
+ <style>
11
+ body {
12
+ font-family: 'Inter', sans-serif;
13
+ background-color: #F7F5F0;
14
+ }
15
+
16
+ .card {
17
+ transition: all 0.3s ease;
18
+ border: 1px solid #e5e7eb;
19
+ }
20
+ .card:hover {
21
+ transform: translateY(-6px);
22
+ border: 1px solid #10b981;
23
+ box-shadow: 0 20px 30px rgba(0,0,0,0.08);
24
+ }
25
+ </style>
26
+ </head>
27
+
28
+ <body>
29
+
30
+ <!-- NAVBAR -->
31
+ <nav class="flex justify-between items-center px-10 py-5 bg-emerald-600 text-white">
32
+ <a href="dashboard.html" class="text-2xl font-extrabold">NourishNet</a>
33
+
34
+ <div class="hidden md:flex gap-10 font-medium items-center">
35
+ <a href="dashboard.html">Dashboard</a>
36
+ <a href="impact.html" class="underline">Impact</a>
37
+ <a href="#">Leaderboard</a>
38
+ <a href="index.html" class="bg-white text-emerald-600 px-4 py-1 rounded-full font-semibold">Logout</a>
39
+ </div>
40
+ </nav>
41
+
42
+ <!-- HEADER -->
43
+ <section class="px-10 py-10">
44
+ <h1 class="text-4xl font-extrabold">Your Impact</h1>
45
+ <p class="text-gray-600 mt-2 text-lg">
46
+ See how your donations are making a difference
47
+ </p>
48
+ </section>
49
+
50
+ <!-- METRICS -->
51
+ <section class="grid md:grid-cols-4 gap-6 px-10">
52
+
53
+ <div class="card bg-white p-6 rounded-xl text-center">
54
+ <p class="text-3xl font-bold text-emerald-600">1,240</p>
55
+ <p class="text-gray-600 mt-2">Meals saved</p>
56
+ </div>
57
+
58
+ <div class="card bg-white p-6 rounded-xl text-center">
59
+ <p class="text-3xl font-bold text-emerald-600">2.8</p>
60
+ <p class="text-gray-600 mt-2">CO₂ saved (tons)</p>
61
+ </div>
62
+
63
+ <div class="card bg-white p-6 rounded-xl text-center">
64
+ <p class="text-3xl font-bold text-emerald-600">$1,920</p>
65
+ <p class="text-gray-600 mt-2">Disposal costs avoided</p>
66
+ </div>
67
+
68
+ <div class="card bg-white p-6 rounded-xl text-center">
69
+ <p class="text-3xl font-bold text-emerald-600">85</p>
70
+ <p class="text-gray-600 mt-2">Donations made</p>
71
+ </div>
72
+
73
+ </section>
74
+
75
+ <!-- DISTRIBUTION -->
76
+ <section class="px-10 mt-12">
77
+
78
+ <div class="card bg-white p-8 rounded-xl">
79
+
80
+ <h2 class="text-2xl font-bold mb-6">Distribution Breakdown</h2>
81
+
82
+ <!-- Elderly -->
83
+ <div class="mb-5">
84
+ <p class="font-semibold">Elderly Homes (40%)</p>
85
+ <div class="w-full bg-gray-200 h-3 rounded-full mt-2">
86
+ <div class="bg-emerald-600 h-3 rounded-full" style="width:40%"></div>
87
+ </div>
88
+ </div>
89
+
90
+ <!-- Refugee -->
91
+ <div class="mb-5">
92
+ <p class="font-semibold">Refugee Centers (35%)</p>
93
+ <div class="w-full bg-gray-200 h-3 rounded-full mt-2">
94
+ <div class="bg-emerald-600 h-3 rounded-full" style="width:35%"></div>
95
+ </div>
96
+ </div>
97
+
98
+ <!-- Low income -->
99
+ <div>
100
+ <p class="font-semibold">Low-Income Families (25%)</p>
101
+ <div class="w-full bg-gray-200 h-3 rounded-full mt-2">
102
+ <div class="bg-emerald-600 h-3 rounded-full" style="width:25%"></div>
103
+ </div>
104
+ </div>
105
+
106
+ </div>
107
+
108
+ </section>
109
+
110
+ <!-- IMPACT MESSAGE -->
111
+ <section class="px-10 mt-10">
112
+
113
+ <div class="card bg-white p-8 rounded-xl">
114
+
115
+ <h2 class="text-2xl font-bold">Latest Impact Message</h2>
116
+
117
+ <p class="text-gray-700 mt-4 text-lg leading-relaxed">
118
+ "Thanks to your recent donation, over 40 individuals at Al Rahma Elderly Home received fresh meals today. Your contribution helped reduce food waste while directly supporting those in need."
119
+ </p>
120
+
121
+ </div>
122
+
123
+ </section>
124
+
125
+ <!-- BADGES -->
126
+ <section class="px-10 mt-12 mb-12">
127
+
128
+ <h2 class="text-2xl font-bold mb-6">Your Badges</h2>
129
+
130
+ <div class="grid md:grid-cols-3 gap-6">
131
+
132
+ <!-- Earned -->
133
+ <div class="card bg-white p-6 rounded-xl text-center">
134
+ <p class="text-4xl">🥇</p>
135
+ <p class="font-semibold mt-2">Gold Contributor</p>
136
+ <p class="text-gray-600 text-sm mt-1">150+ meals donated</p>
137
+ </div>
138
+
139
+ <!-- Earned -->
140
+ <div class="card bg-white p-6 rounded-xl text-center">
141
+ <p class="text-4xl">🔥</p>
142
+ <p class="font-semibold mt-2">7-Day Streak</p>
143
+ <p class="text-gray-600 text-sm mt-1">Consistent donations</p>
144
+ </div>
145
+
146
+ <!-- Locked -->
147
+ <div class="card bg-gray-100 p-6 rounded-xl text-center opacity-70">
148
+ <p class="text-4xl">💎</p>
149
+ <p class="font-semibold mt-2">Platinum Hero</p>
150
+ <p class="text-gray-600 text-sm mt-1">300+ meals needed</p>
151
+ </div>
152
+
153
+ </div>
154
+
155
+ </section>
156
+
157
+ <!-- FOOTER -->
158
+ <footer class="bg-emerald-600 text-white text-center py-8">
159
+ <p class="font-semibold">NourishNet</p>
160
+ <p class="text-sm opacity-80 mt-2">
161
+ Turning surplus into impact
162
+ </p>
163
+ </footer>
164
+
165
+ </body>
166
+ </html>