Hugging Face's logo

Spaces:
Infinity-1995
/
Nourish
Running

App Files Community
Infinity-1995 commited on
Commit
733beb6
·
verified ·
1 Parent(s): 7e0168a

Update confirmation.html

Browse files
Files changed (1) hide show
  1. confirmation.html +115 -0
confirmation.html CHANGED
@@ -7,12 +7,127 @@
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
  /* timeline */
17
  .timeline {
18
  position: relative;
 
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><!DOCTYPE html>
11
+ <html lang="en">
12
+ <head>
13
+ <meta charset="UTF-8">
14
+ <title>Donation confirmed</title>
15
+
16
+ <script src="https://cdn.tailwindcss.com"></script>
17
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
18
+
19
  <style>
20
  body {
21
  font-family: 'Inter', sans-serif;
22
  background-color: #F7F5F0;
23
  }
24
 
25
+ .timeline {
26
+ position: relative;
27
+ padding-left: 28px;
28
+ }
29
+
30
+ .timeline::before {
31
+ content: "";
32
+ position: absolute;
33
+ left: 10px;
34
+ top: 0;
35
+ bottom: 0;
36
+ width: 2px;
37
+ background: #e5e7eb;
38
+ }
39
+
40
+ .step {
41
+ margin-bottom: 20px;
42
+ opacity: 0.6;
43
+ }
44
+
45
+ .step.active {
46
+ opacity: 1;
47
+ }
48
+ </style>
49
+ </head>
50
+
51
+ <body>
52
+
53
+ <!-- HEADER (UNCHANGED STYLE IDEA) -->
54
+ <nav class="flex justify-between items-center px-10 py-5 bg-emerald-600 text-white">
55
+ <a href="index.html" class="text-2xl font-extrabold">NourishNet</a>
56
+
57
+ <div class="hidden md:flex gap-10 font-medium">
58
+ <a href="dashboard.html">Dashboard</a>
59
+ <a href="#">Impact</a>
60
+ <a href="#">Leaderboard</a>
61
+ </div>
62
+
63
+ <a href="index.html" class="bg-white text-emerald-600 px-5 py-2 rounded-full font-semibold">
64
+ Logout
65
+ </a>
66
+ </nav>
67
+
68
+ <!-- TITLE -->
69
+ <div class="text-center mt-12">
70
+
71
+ <h1 class="text-3xl font-bold">Donation confirmed!</h1>
72
+
73
+ <!-- 🔥 DYNAMIC LINE -->
74
+ <p id="summaryText" class="text-gray-600 mt-2">
75
+ Loading...
76
+ </p>
77
+
78
+ </div>
79
+
80
+ <!-- TRACKING -->
81
+ <div class="max-w-2xl mx-auto bg-white p-8 rounded-xl mt-10">
82
+
83
+ <h2 class="font-bold text-xl mb-6">Live Tracking</h2>
84
+
85
+ <div class="timeline">
86
+
87
+ <div class="step active">Surplus logged</div>
88
+ <div class="step active">AI matched</div>
89
+
90
+ <div class="step active">
91
+ Volunteer en route
92
+ <p id="volunteerText" class="text-sm text-gray-500 mt-1"></p>
93
+ </div>
94
+
95
+ <div class="step">Delivered</div>
96
+
97
+ </div>
98
+
99
+ </div>
100
+
101
+ <!-- SCRIPT (ONLY ADD DYNAMIC TEXT) -->
102
+ <script>
103
+ const data = JSON.parse(localStorage.getItem("donationData"));
104
+
105
+ const summaryText = document.getElementById("summaryText");
106
+ const volunteerText = document.getElementById("volunteerText");
107
+
108
+ if (data) {
109
+
110
+ summaryText.innerText =
111
+ `${data.portions} portions of ${data.foodType}`;
112
+
113
+ let eta = "15–25 min";
114
+
115
+ if (data.portions <= 50) eta = "10–15 min";
116
+ else if (data.portions <= 150) eta = "15–25 min";
117
+ else eta = "25–40 min";
118
+
119
+ volunteerText.innerText =
120
+ `Collecting ${data.portions} portions of ${data.foodType}. ETA ${eta}`;
121
+ }
122
+ </script>
123
+
124
+ </body>
125
+ </html>
126
+ body {
127
+ font-family: 'Inter', sans-serif;
128
+ background-color: #F7F5F0;
129
+ }
130
+
131
  /* timeline */
132
  .timeline {
133
  position: relative;