Update log.html

log.html

@@ -104,21 +104,21 @@ body {
 
     <div class="space-y-4">
 
-      <div id="elderly" class="card p-5 rounded-lg">
+      <div id="elderly" class="card p-5 rounded-lg hidden">
         <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">
+      <div id="refugee" class="card p-5 rounded-lg hidden">
         <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">
+      <div id="foodbank" class="card p-5 rounded-lg hidden">
         <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
@@ -155,37 +155,49 @@ function updateAI() {
 
   portionValue.innerText = p;
 
-  // remove highlights
+  // reset all
   elderly.classList.remove("active-match");
   refugee.classList.remove("active-match");
   foodbank.classList.remove("active-match");
 
+  // hide all
+  elderly.classList.add("hidden");
+  refugee.classList.add("hidden");
+  foodbank.classList.add("hidden");
+
   let recipient = "";
   let explanation = "";
+  let showCard = null;
 
   if (p <= 15) {
-    recipient = "Elderly Individuals ";
-    elderly.classList.add("active-match");
-    explanation = `With a small quantity of ${p} portions, this donation is best suited for direct distribution to elderly individuals who require smaller, manageable meal sizes.`;
+    recipient = "Elderly Individuals";
+    showCard = elderly;
+    explanation = `With a small quantity of ${p} portions, this donation is best suited for elderly individuals.`;
   } 
   else if (p <= 80) {
-    recipient = "Elderly Care Home ";
-    elderly.classList.add("active-match");
-    explanation = `A medium batch of ${p} portions is ideal for an elderly care home, where meals can be efficiently distributed among residents within capacity limits.`;
+    recipient = "Al Rahma Elderly Home";
+    showCard = elderly;
+    explanation = `A medium batch of ${p} portions is ideal for an elderly care home.`;
   } 
   else if (p <= 150) {
-    recipient = "Refugee Center ";
-    refugee.classList.add("active-match");
-    explanation = `With ${p} portions available, this is best directed to a refugee center where larger groups can be served effectively.`;
+    recipient = "Hope Refugee Center";
+    showCard = refugee;
+    explanation = `With ${p} portions, this is best for a refugee center.`;
   } 
   else {
-    recipient = "UAE Food Bank 🇦🇪";
-    foodbank.classList.add("active-match");
-    explanation = `A large surplus of ${p} portions is most efficiently handled by a food bank, which can redistribute at scale across multiple communities.`;
+    recipient = "Dubai Food Bank 🇦🇪";
+    showCard = foodbank;
+    explanation = `A large surplus of ${p} portions is best for a food bank.`;
+  }
+
+  // show only selected
+  if (showCard) {
+    showCard.classList.remove("hidden");
+    showCard.classList.add("active-match");
   }
 
-  let urgency = (e === "Less than 6 hours") ? "HIGH " :
-                (e === "Within 24 hours") ? "MEDIUM " : "NORMAL";
+  let urgency = (e === "Less than 6 hours") ? "HIGH" :
+                (e === "Within 24 hours") ? "MEDIUM" : "NORMAL";
 
   aiText.innerHTML = `
     <b>Recommended:</b> ${recipient}<br>