Hugging Face's logo

Spaces:
Infinity-1995
/
Nourish
Running

App Files Community
Infinity-1995 commited on
Commit
13166ca
·
verified ·
1 Parent(s): cb4b07d

Update confirmation.html

Browse files
Files changed (1) hide show
  1. confirmation.html +133 -26
confirmation.html CHANGED
@@ -5,6 +5,7 @@
5
  <title>Donation confirmed</title>
6
 
7
  <script src="https://cdn.tailwindcss.com"></script>
 
8
 
9
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
10
 
@@ -14,67 +15,173 @@ body {
14
  background-color: #F7F5F0;
15
  }
16
 
17
- .timeline {position:relative;padding-left:32px;}
18
- .timeline::before{content:"";position:absolute;left:10px;top:0;bottom:0;width:2px;background:#e5e7eb;}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
 
20
- .step{margin-bottom:26px;opacity:0.35;}
21
- .step.active{opacity:1;}
22
- .step::before{content:"";position:absolute;left:-26px;width:14px;height:14px;border-radius:50%;background:#d1d5db;}
23
- .step.active::before{background:#10b981;}
 
 
 
 
 
 
 
 
 
 
 
 
 
24
  </style>
25
  </head>
26
 
27
  <body>
28
 
29
- <nav class="flex justify-between items-center px-10 py-5 bg-emerald-600 text-white">
30
- <a href="#" class="text-2xl font-bold">NourishNet</a>
 
 
 
 
 
 
 
 
 
 
 
31
  </nav>
32
 
33
- <div class="text-center mt-10">
 
34
 
35
- <h1 class="text-3xl font-bold">Donation Confirmed 🎉</h1>
36
 
37
- <p id="summaryText" class="text-gray-600 mt-2"></p>
 
 
38
 
39
  </div>
40
 
41
- <div class="max-w-2xl mx-auto bg-white p-8 rounded-xl mt-10">
 
 
 
 
 
42
 
43
- <h2 class="font-bold text-xl mb-6">Live Tracking</h2>
 
44
 
45
- <div class="timeline">
 
 
 
46
 
47
- <div id="s1" class="step">Surplus logged</div>
48
- <div id="s2" class="step">AI matched</div>
49
- <div id="s3" class="step">Volunteer en route</div>
50
- <div id="s4" class="step">Out for delivery</div>
51
 
 
52
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
53
  </div>
54
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
55
  <script>
56
 
57
  const data = JSON.parse(localStorage.getItem("donationData"));
58
 
59
  const summaryText = document.getElementById("summaryText");
 
60
 
61
  const s1 = document.getElementById("s1");
62
  const s2 = document.getElementById("s2");
63
  const s3 = document.getElementById("s3");
64
 
65
- if(data && data.accepted){
66
 
67
- const ngos = data.accepted.map(x=>x.recipient).join(", ");
 
68
 
69
  summaryText.innerText =
70
- `${data.portions} portions of ${data.foodType} sent to ${ngos}`;
 
 
 
 
 
 
 
 
 
 
71
 
72
- setTimeout(()=>s1.classList.add("active"),500);
73
- setTimeout(()=>s2.classList.add("active"),1200);
74
- setTimeout(()=>s3.classList.add("active"),2000);
 
75
 
76
- }else{
77
- summaryText.innerText = "No donation data found.";
78
  }
79
 
80
  </script>
 
5
  <title>Donation confirmed</title>
6
 
7
  <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="supabase.js"></script>
9
 
10
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
11
 
 
15
  background-color: #F7F5F0;
16
  }
17
 
18
+ /* TIMELINE */
19
+ .timeline {
20
+ position: relative;
21
+ padding-left: 32px;
22
+ }
23
+
24
+ .timeline::before {
25
+ content: "";
26
+ position: absolute;
27
+ left: 10px;
28
+ top: 0;
29
+ bottom: 0;
30
+ width: 2px;
31
+ background: #e5e7eb;
32
+ }
33
+
34
+ /* STEP */
35
+ .step {
36
+ position: relative;
37
+ margin-bottom: 26px;
38
+ opacity: 0.35;
39
+ transition: 0.4s ease;
40
+ }
41
+
42
+ .step.active {
43
+ opacity: 1;
44
+ }
45
 
46
+ /* DOTS */
47
+ .step::before {
48
+ content: "";
49
+ position: absolute;
50
+ left: -26px;
51
+ top: 4px;
52
+ width: 14px;
53
+ height: 14px;
54
+ border-radius: 50%;
55
+ background: #d1d5db;
56
+ border: 2px solid white;
57
+ }
58
+
59
+ .step.active::before {
60
+ background: #10b981;
61
+ box-shadow: 0 0 0 4px rgba(16,185,129,0.2);
62
+ }
63
  </style>
64
  </head>
65
 
66
  <body>
67
 
68
+ <!-- HEADER -->
69
+ <nav class="flex justify-between items-center px-10 py-5 bg-emerald-600 text-white sticky top-0">
70
+ <a href="index.html" class="text-2xl font-extrabold">NourishNet</a>
71
+
72
+ <div class="hidden md:flex gap-10 font-medium">
73
+ <a href="dashboard.html">Dashboard</a>
74
+ <a href="#">Impact</a>
75
+ <a href="#">Leaderboard</a>
76
+ </div>
77
+
78
+ <a href="index.html" class="bg-white text-emerald-600 px-5 py-2 rounded-full font-semibold">
79
+ Logout
80
+ </a>
81
  </nav>
82
 
83
+ <!-- TITLE -->
84
+ <div class="text-center mt-12">
85
 
86
+ <h1 class="text-3xl font-bold">Donation confirmed!</h1>
87
 
88
+ <p id="summaryText" class="text-gray-600 mt-2">
89
+ Loading donation details...
90
+ </p>
91
 
92
  </div>
93
 
94
+ <!-- TRACKING -->
95
+ <div class="max-w-2xl mx-auto bg-white p-8 rounded-xl mt-10 shadow-sm">
96
+
97
+ <h2 class="font-bold text-xl mb-6">Live Tracking</h2>
98
+
99
+ <div class="timeline">
100
 
101
+ <div id="s1" class="step">Surplus logged</div>
102
+ <div id="s2" class="step">AI matched</div>
103
 
104
+ <div id="s3" class="step">
105
+ Volunteer en route
106
+ <p id="volunteerText" class="text-sm text-gray-500 mt-1"></p>
107
+ </div>
108
 
109
+ <div id="s4" class="step">Out for delivery</div>
 
 
 
110
 
111
+ </div>
112
  </div>
113
+
114
+ <!-- POINTS (UNCHANGED) -->
115
+ <div class="max-w-2xl mx-auto mt-6 bg-emerald-600 text-white p-6 rounded-2xl flex justify-between items-center">
116
+
117
+ <div>
118
+ <p class="text-sm opacity-90">Points earned</p>
119
+ <p class="text-3xl font-bold">+45</p>
120
+ <p class="text-sm opacity-90">1 point per portion</p>
121
+ </div>
122
+
123
+ <div class="bg-emerald-500 px-4 py-3 rounded-xl text-sm">
124
+ <p class="font-semibold">13 day streak!</p>
125
+ <p>1 more for "Fortnight Hero"</p>
126
+ </div>
127
+
128
  </div>
129
 
130
+ <!-- BACK -->
131
+ <div class="text-center mt-8">
132
+ <button onclick="window.location.href='dashboard.html'"
133
+ class="bg-white border px-6 py-3 rounded-full font-semibold hover:scale-105 transition">
134
+ ← Back to dashboard
135
+ </button>
136
+ </div>
137
+
138
+ <div id="footer"></div>
139
+
140
+ <script>
141
+ fetch("footer.html")
142
+ .then(res => res.text())
143
+ .then(data => {
144
+ document.getElementById("footer").innerHTML = data;
145
+ });
146
+ </script>
147
+
148
+ <!-- ✅ ONLY LOGIC FIXED HERE -->
149
  <script>
150
 
151
  const data = JSON.parse(localStorage.getItem("donationData"));
152
 
153
  const summaryText = document.getElementById("summaryText");
154
+ const volunteerText = document.getElementById("volunteerText");
155
 
156
  const s1 = document.getElementById("s1");
157
  const s2 = document.getElementById("s2");
158
  const s3 = document.getElementById("s3");
159
 
160
+ if (data && data.accepted && data.accepted.length > 0) {
161
 
162
+ // ✅ dynamic NGO list
163
+ const ngos = data.accepted.map(a => a.recipient).join(", ");
164
 
165
  summaryText.innerText =
166
+ `${data.portions} portions of ${data.foodType} successfully routed to ${ngos}`;
167
+
168
+ // optional ETA logic (UNCHANGED style)
169
+ let eta = "15–25 min";
170
+
171
+ if (data.portions <= 50) eta = "10–15 min";
172
+ else if (data.portions <= 120) eta = "15–25 min";
173
+ else eta = "25–40 min";
174
+
175
+ volunteerText.innerText =
176
+ `Volunteer Ahmed assigned • ETA ${eta}`;
177
 
178
+ // animation
179
+ setTimeout(() => s1.classList.add("active"), 400);
180
+ setTimeout(() => s2.classList.add("active"), 1200);
181
+ setTimeout(() => s3.classList.add("active"), 2000);
182
 
183
+ } else {
184
+ summaryText.innerText = "No donation data found. Please submit again.";
185
  }
186
 
187
  </script>