Spaces:

Infinity-1995
/

Nourish

Running

App Files Files Community

Infinity-1995 commited on Apr 25

Commit

2b2494d

verified ·

1 Parent(s): 2ba92dc

Update confirmation.html

Browse files

Files changed (1) hide show

confirmation.html +29 -132

confirmation.html CHANGED Viewed

@@ -5,7 +5,7 @@
 <title>Donation confirmed</title>
 <script src="https://cdn.tailwindcss.com"></script>
-  <script src="supabase.js"></script>
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
 <style>
@@ -14,172 +14,69 @@ body {
   background-color: #F7F5F0;
 }
-/* TIMELINE */
-.timeline {
-  position: relative;
-  padding-left: 32px;
-}
-.timeline::before {
-  content: "";
-  position: absolute;
-  left: 10px;
-  top: 0;
-  bottom: 0;
-  width: 2px;
-  background: #e5e7eb;
-}
-/* STEP */
-.step {
-  position: relative;
-  margin-bottom: 26px;
-  opacity: 0.35;
-  transition: 0.4s ease;
-}
-.step.active {
-  opacity: 1;
-}
-/* DOTS */
-.step::before {
-  content: "";
-  position: absolute;
-  left: -26px;
-  top: 4px;
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  background: #d1d5db;
-  border: 2px solid white;
-}
-.step.active::before {
-  background: #10b981;
-  box-shadow: 0 0 0 4px rgba(16,185,129,0.2);
-}
 </style>
 </head>
 <body>
-<!-- HEADER -->
-<nav class="flex justify-between items-center px-10 py-5 bg-emerald-600 text-white sticky top-0">
-  <a href="index.html" class="text-2xl font-extrabold">NourishNet</a>
-  <div class="hidden md:flex gap-10 font-medium">
-    <a href="dashboard.html">Dashboard</a>
-    <a href="#">Impact</a>
-    <a href="#">Leaderboard</a>
-  </div>
-  <a href="index.html" class="bg-white text-emerald-600 px-5 py-2 rounded-full font-semibold">
-    Logout
-  </a>
 </nav>
-<!-- TITLE -->
-<div class="text-center mt-12">
-  <h1 class="text-3xl font-bold">Donation confirmed!</h1>
-  <p id="summaryText" class="text-gray-600 mt-2">
-    Loading donation details...
-  </p>
 </div>
-<!-- TRACKING -->
-<div class="max-w-2xl mx-auto bg-white p-8 rounded-xl mt-10 shadow-sm">
-  <h2 class="font-bold text-xl mb-6">Live Tracking</h2>
-  <div class="timeline">
-    <div id="s1" class="step">Surplus logged</div>
-    <div id="s2" class="step">AI matched</div>
-    <div id="s3" class="step">
-      Volunteer en route
-      <p id="volunteerText" class="text-sm text-gray-500 mt-1"></p>
-    </div>
-    <div id="s4" class="step">
-      Out for delivery
-    </div>
-  </div>
-</div>
-<!-- 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>
-<!-- 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>
-  <div id="footer"></div>
 <script>
-fetch("footer.html")
-  .then(res => res.text())
-  .then(data => {
-    document.getElementById("footer").innerHTML = data;
-  });
-</script>
-<!-- SCRIPT -->
-<script>
 const data = JSON.parse(localStorage.getItem("donationData"));
 const summaryText = document.getElementById("summaryText");
-const volunteerText = document.getElementById("volunteerText");
 const s1 = document.getElementById("s1");
 const s2 = document.getElementById("s2");
 const s3 = document.getElementById("s3");
-if (data) {
-  // 🔥 CLEAR SUMMARY (as requested)
-  summaryText.innerText =
-    `${data.portions} portions of ${data.foodType} successfully routed`;
-  // 🚚 ETA
-  let eta = "15–25 min";
-  if (data.portions <= 50) eta = "10–15 min";
-  else if (data.portions <= 120) eta = "15–25 min";
-  else eta = "25–40 min";
-  volunteerText.innerText =
-    `Volunteer Ahmed assigned • ETA ${eta}`;
-  // 🔥 ONLY FIRST 3 STEPS ACTIVE
-  setTimeout(() => s1.classList.add("active"), 400);
-  setTimeout(() => s2.classList.add("active"), 1200);
-  setTimeout(() => s3.classList.add("active"), 2000);
 }
 </script>
 </body>

 <title>Donation confirmed</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
 <style>
   background-color: #F7F5F0;
 }
+.timeline {position:relative;padding-left:32px;}
+.timeline::before{content:"";position:absolute;left:10px;top:0;bottom:0;width:2px;background:#e5e7eb;}
+.step{margin-bottom:26px;opacity:0.35;}
+.step.active{opacity:1;}
+.step::before{content:"";position:absolute;left:-26px;width:14px;height:14px;border-radius:50%;background:#d1d5db;}
+.step.active::before{background:#10b981;}
 </style>
 </head>
 <body>
+<nav class="flex justify-between items-center px-10 py-5 bg-emerald-600 text-white">
+  <a href="#" class="text-2xl font-bold">NourishNet</a>
 </nav>
+<div class="text-center mt-10">
+<h1 class="text-3xl font-bold">Donation Confirmed 🎉</h1>
+<p id="summaryText" class="text-gray-600 mt-2"></p>
 </div>
+<div class="max-w-2xl mx-auto bg-white p-8 rounded-xl mt-10">
+<h2 class="font-bold text-xl mb-6">Live Tracking</h2>
+<div class="timeline">
+<div id="s1" class="step">Surplus logged</div>
+<div id="s2" class="step">AI matched</div>
+<div id="s3" class="step">Volunteer en route</div>
+<div id="s4" class="step">Out for delivery</div>
 </div>
 </div>
 <script>
 const data = JSON.parse(localStorage.getItem("donationData"));
 const summaryText = document.getElementById("summaryText");
 const s1 = document.getElementById("s1");
 const s2 = document.getElementById("s2");
 const s3 = document.getElementById("s3");
+if(data && data.accepted){
+  const ngos = data.accepted.map(x=>x.recipient).join(", ");
+  summaryText.innerText =
+    `${data.portions} portions of ${data.foodType} sent to ${ngos}`;
+  setTimeout(()=>s1.classList.add("active"),500);
+  setTimeout(()=>s2.classList.add("active"),1200);
+  setTimeout(()=>s3.classList.add("active"),2000);
+}else{
+  summaryText.innerText = "No donation data found.";
 }
 </script>
 </body>