Update confirmation.html

confirmation.html

@@ -41,7 +41,7 @@ body {
   opacity: 1;
 }
 
-/* DOTS ON LINE */
+/* DOTS */
 .step::before {
   content: "";
   position: absolute;
@@ -83,7 +83,6 @@ body {
 
   <h1 class="text-3xl font-bold">Donation confirmed!</h1>
 
-  <!-- CLEAN SUMMARY -->
   <p id="summaryText" class="text-gray-600 mt-2">
     Loading donation details...
   </p>
@@ -106,7 +105,6 @@ body {
       <p id="volunteerText" class="text-sm text-gray-500 mt-1"></p>
     </div>
 
-    <!-- ❗ stays inactive (as you requested) -->
     <div id="s4" class="step">
       Out for delivery
     </div>
@@ -114,20 +112,31 @@ body {
   </div>
 </div>
 
-<!-- EXTRA INFO (RESTORED SECTION) -->
-<div class="max-w-2xl mx-auto mt-6 bg-emerald-600 text-white p-6 rounded-2xl">
-  <p id="extraInfo" class="text-sm opacity-90">
-    Processing your donation through AI routing system...
-  </p>
+<!-- POINTS (RESTORED EXACTLY) -->
+<div class="max-w-2xl mx-auto mt-6 bg-emerald-600 text-white p-6 rounded-2xl flex justify-between items-center">
+
+  <div>
+    <p class="text-sm opacity-90">Points earned</p>
+    <p class="text-3xl font-bold">+45</p>
+    <p class="text-sm opacity-90">1 point per portion</p>
+  </div>
+
+  <div class="bg-emerald-500 px-4 py-3 rounded-xl text-sm">
+    <p class="font-semibold">13 day streak!</p>
+    <p>1 more for "Fortnight Hero"</p>
+  </div>
+
 </div>
 
-<!-- POINTS -->
-<div class="max-w-2xl mx-auto mt-4 bg-emerald-500 text-white p-6 rounded-2xl">
-  <p class="text-3xl font-bold">+45 Points Earned</p>
-  <p class="text-sm opacity-90">Thank you for reducing food waste 🌱</p>
+<!-- BACK BUTTON -->
+<div class="text-center mt-8">
+  <button onclick="window.location.href='dashboard.html'"
+    class="bg-white border px-6 py-3 rounded-full font-semibold hover:scale-105 transition">
+    ← Back to dashboard
+  </button>
 </div>
 
-<!-- FOOTER (RESTORED) -->
+<!-- FOOTER -->
 <footer class="text-center mt-10 text-gray-500 text-sm pb-10">
   © 2026 NourishNet • AI-powered food redistribution platform
 </footer>
@@ -138,7 +147,6 @@ const data = JSON.parse(localStorage.getItem("donationData"));
 
 const summaryText = document.getElementById("summaryText");
 const volunteerText = document.getElementById("volunteerText");
-const extraInfo = document.getElementById("extraInfo");
 
 const s1 = document.getElementById("s1");
 const s2 = document.getElementById("s2");
@@ -146,11 +154,11 @@ const s3 = document.getElementById("s3");
 
 if (data) {
 
-  // 🔥 CLEAN MAIN LINE
+  // 🔥 CLEAR SUMMARY (as requested)
   summaryText.innerText =
     `${data.portions} portions of ${data.foodType} successfully routed`;
 
-  // 🚚 ETA logic
+  // 🚚 ETA
   let eta = "15–25 min";
 
   if (data.portions <= 50) eta = "10–15 min";
@@ -160,11 +168,7 @@ if (data) {
   volunteerText.innerText =
     `Volunteer Ahmed assigned • ETA ${eta}`;
 
-  // 🔥 RESTORED EXTRA INFO
-  extraInfo.innerText =
-    `AI has matched your ${data.foodType} donation with the best-fit recipient based on urgency and distance.`;
-
-  // 🔥 ONLY FIRST 3 STEPS ACTIVE (as you wanted)
+  // 🔥 ONLY FIRST 3 STEPS ACTIVE
   setTimeout(() => s1.classList.add("active"), 400);
   setTimeout(() => s2.classList.add("active"), 1200);
   setTimeout(() => s3.classList.add("active"), 2000);