Spaces:
Running
Running
File size: 4,301 Bytes
6f126ee 733beb6 13166ca 2b2494d 733beb6 6f126ee dacaeac 610c010 13166ca 727ddc7 13166ca 733beb6 13166ca 610c010 13166ca b74991f 13166ca 6f126ee 13166ca b74991f fc366ba 6f126ee 13166ca a948f18 13166ca e5827bf 13166ca 727ddc7 13166ca e27ca9f 13166ca 8480cd1 13166ca a948f18 6f126ee 13166ca a17a287 8480cd1 7e0168a dacaeac 7e0168a 13166ca dacaeac 8480cd1 727ddc7 13166ca dacaeac 13166ca dacaeac 60b9d03 2b2494d 60b9d03 13166ca 727ddc7 13166ca 727ddc7 13166ca a948f18 2b2494d 6f126ee | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
body {
font-family: 'Inter', sans-serif;
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 (UNCHANGED) -->
<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 -->
<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>
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 && data.accepted && data.accepted.length > 0) {
const ngos = data.accepted.map(a => a.recipient).join(", ");
/* CHANGED: use foodName if typed, else fallback to foodType */
const label = (data.foodName && data.foodName.trim() !== "")
? data.foodName
: data.foodType;
summaryText.innerText =
`${data.portions} portions of ${label} → ${ngos}`;
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}`;
setTimeout(() => s1.classList.add("active"), 400);
setTimeout(() => s2.classList.add("active"), 1200);
setTimeout(() => s3.classList.add("active"), 2000);
} else {
summaryText.innerText = "No donation data found. Please submit again.";
}
</script>
</body>
</html> |