Update confirmation.html

confirmation.html

@@ -13,9 +13,10 @@ body {
   background-color: #F7F5F0;
 }
 
+/* TIMELINE */
 .timeline {
   position: relative;
-  padding-left: 28px;
+  padding-left: 32px;
 }
 
 .timeline::before {
@@ -28,31 +29,29 @@ body {
   background: #e5e7eb;
 }
 
+/* STEP */
 .step {
-  margin-bottom: 22px;
+  position: relative;
+  margin-bottom: 26px;
   opacity: 0.35;
-  transition: all 0.5s ease;
+  transition: 0.4s ease;
 }
 
 .step.active {
   opacity: 1;
 }
 
-.step.done {
-  opacity: 1;
-  color: #059669;
-}
-
+/* DOTS ON LINE */
 .step::before {
   content: "";
   position: absolute;
-  left: -22px;
-  margin-top: 6px;
-  width: 12px;
-  height: 12px;
+  left: -26px;
+  top: 4px;
+  width: 14px;
+  height: 14px;
   border-radius: 50%;
   background: #d1d5db;
-  transition: 0.4s;
+  border: 2px solid white;
 }
 
 .step.active::before {
@@ -84,7 +83,7 @@ body {
 
   <h1 class="text-3xl font-bold">Donation confirmed!</h1>
 
-  <!-- 🔥 CLEAR DYNAMIC SUMMARY -->
+  <!-- CLEAN SUMMARY -->
   <p id="summaryText" class="text-gray-600 mt-2">
     Loading donation details...
   </p>
@@ -98,40 +97,56 @@ body {
 
   <div class="timeline">
 
-    <div id="step1" class="step">Surplus logged</div>
+    <div id="s1" class="step">Surplus logged</div>
 
-    <div id="step2" class="step">AI matching in progress</div>
+    <div id="s2" class="step">AI matched</div>
 
-    <div id="step3" class="step">
-      Volunteer assigned
+    <div id="s3" class="step">
+      Volunteer en route
       <p id="volunteerText" class="text-sm text-gray-500 mt-1"></p>
     </div>
 
-    <div id="step4" class="step">Out for delivery</div>
+    <!-- ❗ stays inactive (as you requested) -->
+    <div id="s4" class="step">
+      Out for delivery
+    </div>
 
   </div>
 </div>
 
-<!-- POINTS -->
+<!-- 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>
+</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>
 </div>
 
+<!-- FOOTER (RESTORED) -->
+<footer class="text-center mt-10 text-gray-500 text-sm pb-10">
+  © 2026 NourishNet • AI-powered food redistribution platform
+</footer>
+
 <!-- SCRIPT -->
 <script>
 const data = JSON.parse(localStorage.getItem("donationData"));
 
 const summaryText = document.getElementById("summaryText");
 const volunteerText = document.getElementById("volunteerText");
+const extraInfo = document.getElementById("extraInfo");
 
-const step1 = document.getElementById("step1");
-const step2 = document.getElementById("step2");
-const step3 = document.getElementById("step3");
-const step4 = document.getElementById("step4");
+const s1 = document.getElementById("s1");
+const s2 = document.getElementById("s2");
+const s3 = document.getElementById("s3");
 
 if (data) {
 
-  // 🔥 CLEAN SUMMARY (as you requested)
+  // 🔥 CLEAN MAIN LINE
   summaryText.innerText =
     `${data.portions} portions of ${data.foodType} successfully routed`;
 
@@ -143,19 +158,16 @@ if (data) {
   else eta = "25–40 min";
 
   volunteerText.innerText =
-    `Ahmed is assigned. Estimated pickup: ${eta}`;
-
-  // 🔥 LIVE STEP ANIMATION
-  setTimeout(() => step1.classList.add("active"), 300);
-  setTimeout(() => step1.classList.add("done"), 800);
-
-  setTimeout(() => step2.classList.add("active"), 1200);
-  setTimeout(() => step2.classList.add("done"), 1800);
+    `Volunteer Ahmed assigned • ETA ${eta}`;
 
-  setTimeout(() => step3.classList.add("active"), 2200);
-  setTimeout(() => step3.classList.add("done"), 3000);
+  // 🔥 RESTORED EXTRA INFO
+  extraInfo.innerText =
+    `AI has matched your ${data.foodType} donation with the best-fit recipient based on urgency and distance.`;
 
-  setTimeout(() => step4.classList.add("active"), 3400);
+  // 🔥 ONLY FIRST 3 STEPS ACTIVE (as you wanted)
+  setTimeout(() => s1.classList.add("active"), 400);
+  setTimeout(() => s2.classList.add("active"), 1200);
+  setTimeout(() => s3.classList.add("active"), 2000);
 
 }
 </script>