Hugging Face's logo

Spaces:
Infinity-1995
/
Nourish
Running

App Files Community
Infinity-1995 commited on
Commit
6f126ee
·
verified ·
1 Parent(s): b64c6fd

Create confirmation.html

Browse files
Files changed (1) hide show
  1. confirmation.html +171 -0
confirmation.html ADDED
@@ -0,0 +1,171 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Donation Confirmed - 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: linear-gradient(135deg, #f7f5f0, #e9f7ef);
14
+ }
15
+
16
+ /* CARD */
17
+ .card {
18
+ border: 1px solid #e5e7eb;
19
+ transition: 0.3s ease;
20
+ }
21
+ .card:hover {
22
+ transform: translateY(-4px);
23
+ box-shadow: 0 15px 30px rgba(0,0,0,0.08);
24
+ }
25
+
26
+ /* PROGRESS STEP */
27
+ .step {
28
+ display: flex;
29
+ align-items: center;
30
+ gap: 10px;
31
+ padding: 10px 0;
32
+ opacity: 0.4;
33
+ transition: 0.4s ease;
34
+ }
35
+
36
+ .step.active {
37
+ opacity: 1;
38
+ transform: scale(1.02);
39
+ }
40
+
41
+ .dot {
42
+ width: 14px;
43
+ height: 14px;
44
+ border-radius: 50%;
45
+ background: #d1d5db;
46
+ transition: 0.4s;
47
+ }
48
+
49
+ .step.active .dot {
50
+ background: #10b981;
51
+ box-shadow: 0 0 10px #10b981;
52
+ }
53
+
54
+ /* ANIMATION BAR */
55
+ .bar {
56
+ height: 6px;
57
+ background: #e5e7eb;
58
+ border-radius: 999px;
59
+ overflow: hidden;
60
+ }
61
+
62
+ .fill {
63
+ height: 100%;
64
+ width: 0%;
65
+ background: #10b981;
66
+ transition: 1s ease;
67
+ }
68
+ </style>
69
+ </head>
70
+
71
+ <body class="px-8 py-10">
72
+
73
+ <!-- HEADER -->
74
+ <div class="text-center mb-10">
75
+ <h1 class="text-4xl font-extrabold text-emerald-600">Donation Confirmed 🎉</h1>
76
+ <p class="text-gray-600 mt-2 text-lg">Your surplus has been successfully logged and is now being processed</p>
77
+ </div>
78
+
79
+ <!-- MAIN CARD -->
80
+ <div class="max-w-3xl mx-auto card bg-white p-8 rounded-2xl">
81
+
82
+ <!-- LIVE TRACKING -->
83
+ <h2 class="text-2xl font-bold mb-4">Live Tracking</h2>
84
+
85
+ <div class="bar mb-6">
86
+ <div id="progressBar" class="fill"></div>
87
+ </div>
88
+
89
+ <div id="steps">
90
+
91
+ <div class="step active">
92
+ <div class="dot"></div>
93
+ <p>Surplus Logged</p>
94
+ </div>
95
+
96
+ <div class="step">
97
+ <div class="dot"></div>
98
+ <p>AI Matched Recipient</p>
99
+ </div>
100
+
101
+ <div class="step">
102
+ <div class="dot"></div>
103
+ <p>Volunteer En Route</p>
104
+ </div>
105
+
106
+ <div class="step">
107
+ <div class="dot"></div>
108
+ <p>Delivered Successfully</p>
109
+ </div>
110
+
111
+ </div>
112
+
113
+ </div>
114
+
115
+ <!-- STATS -->
116
+ <div class="max-w-3xl mx-auto grid md:grid-cols-2 gap-6 mt-8">
117
+
118
+ <div class="card bg-white p-6 rounded-2xl text-center">
119
+ <h3 class="text-lg font-semibold text-gray-600">Points Earned</h3>
120
+ <p class="text-4xl font-extrabold text-emerald-600 mt-2">+120</p>
121
+ </div>
122
+
123
+ <div class="card bg-white p-6 rounded-2xl text-center">
124
+ <h3 class="text-lg font-semibold text-gray-600">Leaderboard Rank</h3>
125
+ <p class="text-4xl font-extrabold text-emerald-600 mt-2">#8</p>
126
+ </div>
127
+
128
+ </div>
129
+
130
+ <!-- BUTTON -->
131
+ <div class="text-center mt-10">
132
+ <button onclick="goBack()"
133
+ class="bg-emerald-600 text-white px-10 py-4 rounded-full font-semibold text-lg hover:scale-105 transition shadow-lg">
134
+ Back to Dashboard
135
+ </button>
136
+ </div>
137
+
138
+ <!-- SCRIPT -->
139
+ <script>
140
+
141
+ let steps = document.querySelectorAll(".step");
142
+ let progress = document.getElementById("progressBar");
143
+
144
+ let current = 0;
145
+
146
+ function animateTracking() {
147
+ let interval = setInterval(() => {
148
+
149
+ if (current < steps.length) {
150
+ steps[current].classList.add("active");
151
+
152
+ progress.style.width = ((current + 1) / steps.length) * 100 + "%";
153
+
154
+ current++;
155
+ } else {
156
+ clearInterval(interval);
157
+ }
158
+
159
+ }, 1200);
160
+ }
161
+
162
+ function goBack() {
163
+ window.location.href = "dashboard.html";
164
+ }
165
+
166
+ animateTracking();
167
+
168
+ </script>
169
+
170
+ </body>
171
+ </html>