Hugging Face's logo

Spaces:
Infinity-1995
/
Nourish
Running

App Files Community
Infinity-1995 commited on
Commit
47a6528
·
verified ·
1 Parent(s): ba7cf45

Update dashboard.html

Browse files
Files changed (1) hide show
  1. dashboard.html +58 -75
dashboard.html CHANGED
@@ -33,20 +33,25 @@ body {
33
 
34
  <body>
35
 
36
- <!-- NAVBAR -->
37
  <nav class="flex justify-between items-center px-10 py-5 bg-emerald-600 text-white">
38
 
39
- <a href="index.html" class="text-2xl font-extrabold">NourishNet</a>
 
 
 
 
40
 
41
- <div class="hidden md:flex gap-10 font-medium">
42
- <a href="index.html">Home</a>
43
- <a href="about.html">About</a>
44
  <a href="dashboard.html" class="underline">Dashboard</a>
45
- </div>
 
46
 
47
- <button class="bg-white text-emerald-600 px-5 py-2 rounded-full font-semibold">
48
- Log surplus
49
- </button>
 
 
 
50
 
51
  </nav>
52
 
@@ -68,12 +73,12 @@ body {
68
 
69
  <div class="card bg-white p-6 rounded-xl">
70
  <p class="text-3xl font-bold text-emerald-600">127</p>
71
- <p class="text-gray-600">Meals saved</p>
72
  </div>
73
 
74
  <div class="card bg-white p-6 rounded-xl">
75
  <p class="text-3xl font-bold text-emerald-600">0.52</p>
76
- <p class="text-gray-600">CO₂ avoided</p>
77
  </div>
78
 
79
  <div class="card bg-white p-6 rounded-xl">
@@ -83,105 +88,83 @@ body {
83
 
84
  </section>
85
 
86
- <!-- AI -->
87
  <section class="px-10 mt-10">
88
 
89
  <div class="ai-card p-8 rounded-xl">
90
 
91
- <h2 class="text-xl font-bold">AI prediction for tonight</h2>
 
 
92
 
93
- <p class="mt-2 text-gray-700">Predicted surplus: medium urgency</p>
 
 
94
 
95
- <p class="text-3xl font-bold text-emerald-600 mt-4">~45 portions</p>
 
 
96
 
97
  <p class="text-gray-600 mt-2">
98
- Based on your last 4 weeks of donations
99
  </p>
100
 
 
 
 
 
 
 
 
101
  </div>
102
 
103
  </section>
104
 
105
- <!-- STREAK -->
106
  <section class="grid md:grid-cols-2 gap-6 px-10 mt-10">
107
 
 
108
  <div class="card bg-white p-6 rounded-xl">
109
- <h3 class="font-bold">Donation streak</h3>
 
110
 
111
  <p class="text-4xl font-bold text-emerald-600 mt-2">12</p>
112
- <p>days</p>
113
 
114
- <p class="mt-3 text-gray-600">
115
- Keep going! 2 more days to unlock badge.
116
  </p>
 
 
 
 
 
117
  </div>
118
 
 
119
  <div class="card bg-white p-6 rounded-xl">
120
- <h3 class="font-bold">Current badge</h3>
 
121
 
122
  <p class="text-2xl mt-4">🥇 Gold Contributor</p>
123
 
124
  <p class="text-gray-600 mt-4">
125
  155 more meals to reach Platinum
126
  </p>
 
 
 
 
 
 
127
  </div>
128
 
129
  </section>
130
 
131
  <!-- FOOTER -->
132
- <!-- FOOTER -->
133
- <footer class="bg-emerald-600 text-white py-14 mt-20">
134
-
135
- <div class="w-full px-10 text-left">
136
-
137
- <!-- BRAND -->
138
- <div class="mb-10">
139
- <h2 class="text-2xl font-extrabold">NourishNet</h2>
140
- <p class="text-white/80 mt-2">
141
- AI-powered food surplus redistribution for a zero-waste UAE.
142
- </p>
143
- </div>
144
-
145
- <!-- SECTIONS -->
146
- <div class="space-y-10 text-white/90">
147
-
148
- <!-- PLATFORM -->
149
- <div>
150
- <p class="font-extrabold mb-3">Platform</p>
151
- <div class="space-y-1 text-white/80">
152
- <p>Dashboard</p>
153
- <p>Impact</p>
154
- <p>Leaderboard</p>
155
- </div>
156
- </div>
157
-
158
- <!-- LEARN -->
159
- <div>
160
- <p class="font-extrabold mb-3">Learn</p>
161
- <div class="space-y-1 text-white/80">
162
- <p>About</p>
163
- <p>How it works</p>
164
- </div>
165
- </div>
166
-
167
- <!-- CONTACT -->
168
- <div>
169
- <p class="font-extrabold mb-3">Contact</p>
170
- <div class="space-y-1 text-white/80">
171
- <p>hello@nourishnet.ae</p>
172
- <p>Dubai, UAE</p>
173
- </div>
174
- </div>
175
-
176
- </div>
177
-
178
- <!-- COPYRIGHT -->
179
- <div class="pt-8 mt-10 border-t border-white/20 text-white/80 text-sm">
180
- © 2026 NourishNet. All rights reserved.
181
- </div>
182
-
183
- </div>
184
-
185
  </footer>
186
 
187
  </body>
 
33
 
34
  <body>
35
 
36
+ <!-- NAVBAR (UPDATED) -->
37
  <nav class="flex justify-between items-center px-10 py-5 bg-emerald-600 text-white">
38
 
39
+ <a href="dashboard.html" class="text-2xl font-extrabold">
40
+ NourishNet
41
+ </a>
42
+
43
+ <div class="hidden md:flex gap-10 font-medium items-center">
44
 
 
 
 
45
  <a href="dashboard.html" class="underline">Dashboard</a>
46
+ <a href="#" class="hover:opacity-80">Impact</a>
47
+ <a href="#" class="hover:opacity-80">Leaderboard</a>
48
 
49
+ <!-- LOGOUT -->
50
+ <a href="index.html" class="bg-white text-emerald-600 px-4 py-1 rounded-full font-semibold">
51
+ Logout
52
+ </a>
53
+
54
+ </div>
55
 
56
  </nav>
57
 
 
73
 
74
  <div class="card bg-white p-6 rounded-xl">
75
  <p class="text-3xl font-bold text-emerald-600">127</p>
76
+ <p class="text-gray-600">Meals saved this week</p>
77
  </div>
78
 
79
  <div class="card bg-white p-6 rounded-xl">
80
  <p class="text-3xl font-bold text-emerald-600">0.52</p>
81
+ <p class="text-gray-600">CO₂ avoided (tons)</p>
82
  </div>
83
 
84
  <div class="card bg-white p-6 rounded-xl">
 
88
 
89
  </section>
90
 
91
+ <!-- AI PREDICTION -->
92
  <section class="px-10 mt-10">
93
 
94
  <div class="ai-card p-8 rounded-xl">
95
 
96
+ <h2 class="text-xl font-bold">
97
+ AI prediction for tonight
98
+ </h2>
99
 
100
+ <p class="mt-2 text-gray-700">
101
+ Predicted surplus: medium urgency
102
+ </p>
103
 
104
+ <p class="text-3xl font-bold text-emerald-600 mt-4">
105
+ ~45 portions
106
+ </p>
107
 
108
  <p class="text-gray-600 mt-2">
109
+ Based on your last 4 weeks of Tuesday donations
110
  </p>
111
 
112
+ <div class="mt-4 p-4 bg-white rounded-lg border">
113
+ <p class="font-semibold">Best match: Elderly care home</p>
114
+ <p class="text-gray-600 mt-1">
115
+ 45 portions perfectly sized for Al Rahma Elderly Care Home (capacity: 80)
116
+ </p>
117
+ </div>
118
+
119
  </div>
120
 
121
  </section>
122
 
123
+ <!-- STREAK + BADGE -->
124
  <section class="grid md:grid-cols-2 gap-6 px-10 mt-10">
125
 
126
+ <!-- STREAK -->
127
  <div class="card bg-white p-6 rounded-xl">
128
+
129
+ <h3 class="font-bold text-lg">Donation streak</h3>
130
 
131
  <p class="text-4xl font-bold text-emerald-600 mt-2">12</p>
132
+ <p class="text-gray-600">days</p>
133
 
134
+ <p class="mt-3 text-gray-700">
135
+ Keep it going! 2 more days to unlock the "Fortnight Hero" badge.
136
  </p>
137
+
138
+ <div class="w-full bg-gray-200 h-2 rounded-full mt-4">
139
+ <div class="bg-emerald-600 h-2 rounded-full" style="width:85%"></div>
140
+ </div>
141
+
142
  </div>
143
 
144
+ <!-- BADGE + BUTTON (MOVED HERE) -->
145
  <div class="card bg-white p-6 rounded-xl">
146
+
147
+ <h3 class="font-bold text-lg">Current badge</h3>
148
 
149
  <p class="text-2xl mt-4">🥇 Gold Contributor</p>
150
 
151
  <p class="text-gray-600 mt-4">
152
  155 more meals to reach Platinum
153
  </p>
154
+
155
+ <!-- MOVED BUTTON -->
156
+ <button class="mt-6 w-full bg-emerald-600 text-white py-2 rounded-full font-semibold hover:scale-105 transition">
157
+ Log surplus now
158
+ </button>
159
+
160
  </div>
161
 
162
  </section>
163
 
164
  <!-- FOOTER -->
165
+ <footer class="bg-emerald-600 text-white text-center py-8 mt-20">
166
+ <p class="font-semibold">NourishNet</p>
167
+ <p class="text-sm opacity-80 mt-2">AI-powered food surplus redistribution platform</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
168
  </footer>
169
 
170
  </body>