Spaces:

Infinity-1995
/

Nourish

Running

App Files Files Community

Infinity-1995 commited on Apr 21

Commit

a948f18

verified ·

1 Parent(s): b647518

Update confirmation.html

Browse files

Files changed (1) hide show

confirmation.html +114 -155

confirmation.html CHANGED Viewed

@@ -2,209 +2,168 @@
 <html lang="en">
 <head>
 <meta charset="UTF-8">
-<title>Log Surplus - NourishNet</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>
 body {
   font-family: 'Inter', sans-serif;
-  background-color: #F7F5F0;
 }
 /* CARD */
 .card {
-  transition: all 0.3s ease;
   border: 1px solid #e5e7eb;
 }
 .card:hover {
-  transform: translateY(-6px);
-  border: 1px solid #10b981;
-  box-shadow: 0 20px 30px rgba(0,0,0,0.08);
 }
-/* ACTIVE MATCH */
-.active-match {
-  border: 2px solid #10b981 !important;
-  box-shadow: 0 10px 25px rgba(16,185,129,0.2);
 }
-</style>
-</head>
-<body>
-<!-- NAVBAR -->
-<nav class="flex justify-between items-center px-10 py-5 bg-emerald-600 text-white">
-  <a href="dashboard.html" class="text-2xl font-extrabold">NourishNet</a>
-  <div class="hidden md:flex gap-10 font-medium items-center text-lg">
-    <a href="dashboard.html">Dashboard</a>
-    <a href="#">Impact</a>
-    <a href="#">Leaderboard</a>
-    <a href="index.html" class="bg-white text-emerald-600 px-4 py-1 rounded-full font-semibold">Logout</a>
-  </div>
-</nav>
-<!-- HEADER -->
-<section class="px-10 py-10">
-  <h1 class="text-4xl font-extrabold">Log Surplus Food</h1>
-  <p class="text-gray-600 mt-2 text-lg">
-    Enter your surplus details and let AI intelligently route your donation
-  </p>
-</section>
-<!-- CONTENT -->
-<section class="px-10 space-y-8">
-  <!-- INPUT -->
-  <div class="card bg-white p-8 rounded-xl">
-    <h2 class="text-2xl font-bold mb-6">Food Details</h2>
-    <label class="font-semibold text-lg">Food Type</label>
-    <select class="w-full mt-2 mb-5 p-3 border rounded-lg">
-      <option>Halal Cooked</option>
-      <option>Baked Goods</option>
-      <option>Raw Ingredients</option>
-      <option>Packaged Food</option>
-      <option>Vegetarian/Vegan</option>
-    </select>
-    <label class="font-semibold text-lg">
-      Portions: <span id="portionValue">50</span>
-    </label>
-    <input type="range" min="1" max="250" value="50" id="portions" class="w-full mt-2 mb-5">
-    <label class="font-semibold text-lg">Expiry Window</label>
-    <select id="expiry" class="w-full mt-2 p-3 border rounded-lg">
-      <option>Less than 6 hours</option>
-      <option>Within 24 hours</option>
-      <option>More than 24 hours</option>
-    </select>
-  </div>
-  <!-- AI OUTPUT -->
-  <div class="card bg-white p-8 rounded-xl">
-    <h2 class="text-2xl font-bold">AI Recommendation</h2>
-    <p id="aiText" class="mt-4 text-gray-700 text-lg leading-relaxed">
-      Adjust inputs to see recommendation...
-    </p>
   </div>
-  <!-- RECIPIENTS -->
-  <div class="card bg-white p-8 rounded-xl">
-    <h2 class="text-2xl font-bold mb-4">Matched Recipients</h2>
-    <div class="space-y-4">
-      <div id="elderly" class="card p-5 rounded-lg">
-        <p class="font-semibold text-lg">📍 Al Rahma Elderly Home</p>
-        <p class="text-gray-600 text-sm mt-1">
-          2.1 km • Capacity: 80 • Halal Friendly
-        </p>
-      </div>
-      <div id="refugee" class="card p-5 rounded-lg">
-        <p class="font-semibold text-lg">📍 Hope Refugee Center</p>
-        <p class="text-gray-600 text-sm mt-1">
-          4.5 km • Capacity: 150 • Mixed Distribution
-        </p>
-      </div>
-      <div id="foodbank" class="card p-5 rounded-lg">
-        <p class="font-semibold text-lg">📍 Dubai Food Bank</p>
-        <p class="text-gray-600 text-sm mt-1">
-          6.2 km • Large Scale • Accepts All Types
-        </p>
-      </div>
-    </div>
   </div>
-</section>
 <!-- BUTTON -->
-<section class="flex justify-center mt-12 mb-10">
-  <button id="confirmBtn"
-    class="bg-emerald-600 text-white px-12 py-4 rounded-full font-semibold text-lg hover:scale-105 transition shadow-lg">
-    Confirm Donation
   </button>
-</section>
 <!-- SCRIPT -->
 <script>
-const portions = document.getElementById("portions");
-const expiry = document.getElementById("expiry");
-const aiText = document.getElementById("aiText");
-const portionValue = document.getElementById("portionValue");
-const elderly = document.getElementById("elderly");
-const refugee = document.getElementById("refugee");
-const foodbank = document.getElementById("foodbank");
-function updateAI() {
-  let p = parseInt(portions.value);
-  let e = expiry.value;
-  portionValue.innerText = p;
-  elderly.classList.remove("active-match");
-  refugee.classList.remove("active-match");
-  foodbank.classList.remove("active-match");
-  let recipient = "";
-  let explanation = "";
-  if (p <= 15) {
-    recipient = "Elderly Individuals";
-    elderly.classList.add("active-match");
-    explanation = `Small quantity (${p}) is best for elderly individuals.`;
-  }
-  else if (p <= 80) {
-    recipient = "Al Rahma Elderly Home";
-    elderly.classList.add("active-match");
-    explanation = `Medium batch (${p}) fits elderly homes.`;
-  }
-  else if (p <= 150) {
-    recipient = "Hope Refugee Center";
-    refugee.classList.add("active-match");
-    explanation = `Large batch (${p}) fits refugee centers.`;
-  }
-  else {
-    recipient = "Dubai Food Bank 🇦🇪";
-    foodbank.classList.add("active-match");
-    explanation = `Very large surplus (${p}) fits food banks.`;
-  }
-  let urgency = (e === "Less than 6 hours") ? "HIGH" :
-                (e === "Within 24 hours") ? "MEDIUM" : "NORMAL";
-  aiText.innerHTML = `
-    <b>Recommended:</b> ${recipient}<br>
-    <b>Urgency:</b> ${urgency}<br><br>
-    ${explanation}
-  `;
-}
-portions.addEventListener("input", updateAI);
-expiry.addEventListener("change", updateAI);
-updateAI();
-// ✅ FIXED NAVIGATION (THIS IS THE IMPORTANT PART)
-document.getElementById("confirmBtn").addEventListener("click", function () {
-  window.location.href = "confirmation.html";
-});
 </script>

 <html lang="en">
 <head>
 <meta charset="UTF-8">
+<title>Donation Confirmed - NourishNet</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>
 body {
   font-family: 'Inter', sans-serif;
+  background: linear-gradient(135deg, #f7f5f0, #e9f7ef);
 }
 /* CARD */
 .card {
   border: 1px solid #e5e7eb;
+  transition: 0.3s ease;
 }
 .card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 15px 30px rgba(0,0,0,0.08);
 }
+/* PROGRESS STEP */
+.step {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 0;
+  opacity: 0.4;
+  transition: 0.4s ease;
 }
+.step.active {
+  opacity: 1;
+  transform: scale(1.02);
+}
+.dot {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: #d1d5db;
+  transition: 0.4s;
+}
+.step.active .dot {
+  background: #10b981;
+  box-shadow: 0 0 10px #10b981;
+}
+/* ANIMATION BAR */
+.bar {
+  height: 6px;
+  background: #e5e7eb;
+  border-radius: 999px;
+  overflow: hidden;
+}
+.fill {
+  height: 100%;
+  width: 0%;
+  background: #10b981;
+  transition: 1s ease;
+}
+</style>
+</head>
+<body class="px-8 py-10">
+<!-- HEADER -->
+<div class="text-center mb-10">
+  <h1 class="text-4xl font-extrabold text-emerald-600">Donation Confirmed 🎉</h1>
+  <p class="text-gray-600 mt-2 text-lg">Your surplus has been successfully logged and is now being processed</p>
+</div>
+<!-- MAIN CARD -->
+<div class="max-w-3xl mx-auto card bg-white p-8 rounded-2xl">
+  <!-- LIVE TRACKING -->
+  <h2 class="text-2xl font-bold mb-4">Live Tracking</h2>
+  <div class="bar mb-6">
+    <div id="progressBar" class="fill"></div>
   </div>
+  <div id="steps">
+    <div class="step active">
+      <div class="dot"></div>
+      <p>Surplus Logged</p>
+    </div>
+    <div class="step">
+      <div class="dot"></div>
+      <p>AI Matched Recipient</p>
+    </div>
+    <div class="step">
+      <div class="dot"></div>
+      <p>Volunteer En Route</p>
+    </div>
+    <div class="step">
+      <div class="dot"></div>
+      <p>Delivered Successfully</p>
+    </div>
+  </div>
+</div>
+<!-- STATS -->
+<div class="max-w-3xl mx-auto grid md:grid-cols-2 gap-6 mt-8">
+  <div class="card bg-white p-6 rounded-2xl text-center">
+    <h3 class="text-lg font-semibold text-gray-600">Points Earned</h3>
+    <p class="text-4xl font-extrabold text-emerald-600 mt-2">+120</p>
+  </div>
+  <div class="card bg-white p-6 rounded-2xl text-center">
+    <h3 class="text-lg font-semibold text-gray-600">Leaderboard Rank</h3>
+    <p class="text-4xl font-extrabold text-emerald-600 mt-2">#8</p>
   </div>
+</div>
 <!-- BUTTON -->
+<div class="text-center mt-10">
+  <button onclick="goBack()"
+    class="bg-emerald-600 text-white px-10 py-4 rounded-full font-semibold text-lg hover:scale-105 transition shadow-lg">
+    Back to Dashboard
   </button>
+</div>
 <!-- SCRIPT -->
 <script>
+let steps = document.querySelectorAll(".step");
+let progress = document.getElementById("progressBar");
+let current = 0;
+function animateTracking() {
+  let interval = setInterval(() => {
+    if (current < steps.length) {
+      steps[current].classList.add("active");
+      progress.style.width = ((current + 1) / steps.length) * 100 + "%";
+      current++;
+    } else {
+      clearInterval(interval);
+    }
+  }, 1200);
+}
+function goBack() {
+  window.location.href = "dashboard.html";
+}
+animateTracking();
 </script>