Update log.html

log.html

@@ -44,19 +44,13 @@ body {
 <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">
-    AI + Location-based smart food redistribution system
+    AI-powered food redistribution system
   </p>
-
-  <button onclick="getUserLocation()"
-    class="mt-4 bg-emerald-600 text-white px-4 py-2 rounded-full">
-    📍 Use My Location
-  </button>
 </section>
 
-<!-- MAIN -->
+<!-- INPUT -->
 <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>
@@ -82,13 +76,13 @@ body {
 
   </div>
 
-  <!-- AI CARD -->
+  <!-- AI -->
   <div class="card bg-white p-8 rounded-xl">
 
     <h2 class="text-2xl font-bold mb-4">AI Recommendation</h2>
 
     <div id="aiText" class="text-gray-600">
-      Click “Ask AI” to generate analysis...
+      Click “Ask AI” to generate recommendation...
     </div>
 
     <button onclick="runAI()"
@@ -118,54 +112,27 @@ body {
 
 <!-- CONFIRM BUTTON -->
 <section class="flex justify-center mt-10 mb-10">
-  <button id="confirmBtn"
-    class="bg-emerald-600 text-white px-10 py-4 rounded-full font-semibold text-lg hover:scale-105 transition shadow-lg">
+  <button class="bg-emerald-600 text-white px-10 py-4 rounded-full font-semibold text-lg hover:scale-105 transition shadow-lg">
     Confirm Donation
   </button>
 </section>
 
 <!-- FOOTER -->
 <footer class="bg-emerald-600 text-white py-12 mt-20">
-
   <div class="px-10 text-center">
-
     <h2 class="text-2xl font-extrabold">NourishNet</h2>
-
     <p class="text-white/80 mt-2">
       AI-powered food surplus redistribution for a zero-waste UAE.
     </p>
-
     <div class="mt-6 text-white/70 text-sm">
       © 2026 NourishNet. All rights reserved.
     </div>
-
   </div>
-
 </footer>
 
 <!-- SCRIPT -->
 <script>
 
-let userLocation = null;
-
-// get location
-function getUserLocation() {
-
-  navigator.geolocation.getCurrentPosition((pos) => {
-
-    userLocation = {
-      lat: pos.coords.latitude,
-      lng: pos.coords.longitude
-    };
-
-    document.getElementById("mapFrame").src =
-      `https://www.google.com/maps?q=${userLocation.lat},${userLocation.lng}&output=embed`;
-
-  });
-
-}
-
-// slider
 const portions = document.getElementById("portions");
 const portionValue = document.getElementById("portionValue");
 
@@ -173,6 +140,13 @@ portions.addEventListener("input", () => {
   portionValue.innerText = portions.value;
 });
 
+// locations for map
+const locations = {
+  "Elderly Home": "Al Rahma Elderly Home Dubai",
+  "Refugee Center": "Hope Refugee Center Dubai",
+  "Food Bank": "Dubai Food Bank"
+};
+
 // AI FUNCTION
 async function runAI() {
 
@@ -183,14 +157,22 @@ async function runAI() {
   let hours = expiryText.includes("6") ? 3 : expiryText.includes("24") ? 12 : 30;
 
   const prompt = `
-You are NourishNet AI.
+You are NourishNet AI (food logistics system).
 
+DO NOT give diets or meals.
+
+ONLY analyze redistribution.
+
+INPUT:
 Meals: ${meals}
 Hours: ${hours}
 Food: ${foodType}
 
-Return:
-Priority, Reason, Action
+OUTPUT FORMAT:
+Priority: HIGH / MEDIUM / LOW
+Recipient: Elderly Home / Refugee Center / Food Bank
+Reason: short
+Action: short
 `;
 
   try {
@@ -199,28 +181,38 @@ Priority, Reason, Action
       method: "POST",
       headers: {
         "Content-Type": "application/json",
-        "Authorization": "Bearer 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 "
+        "Authorization": "Bearer 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"
       },
       body: JSON.stringify({
         model: "llama-3.1-8b-instant",
-        messages: [
-          { role: "user", content: prompt }
-        ]
+        messages: [{ role: "user", content: prompt }]
       })
     });
 
     const data = await response.json();
     const result = data.choices[0].message.content;
 
-    document.getElementById("aiText").innerHTML = `
-      <div class="bg-emerald-50 border border-emerald-200 p-4 rounded-lg">
-        <pre class="whitespace-pre-wrap text-gray-800">${result}</pre>
-      </div>
-    `;
+    // show AI output
+    document.getElementById("aiText").innerHTML =
+      `<pre class="whitespace-pre-wrap bg-emerald-50 p-4 rounded-lg border border-emerald-200">${result}</pre>`;
+
+    // detect recipient
+    let recipient = "Refugee Center";
+
+    if (result.toLowerCase().includes("elderly")) {
+      recipient = "Elderly Home";
+    } else if (result.toLowerCase().includes("food bank")) {
+      recipient = "Food Bank";
+    }
+
+    // update map
+    document.getElementById("mapFrame").src =
+      "https://www.google.com/maps?q=" +
+      encodeURIComponent(locations[recipient]) +
+      "&output=embed";
 
   } catch (err) {
-    document.getElementById("aiText").innerText =
-      "AI failed. Check API key or connection.";
+    document.getElementById("aiText").innerText = "AI failed.";
   }
 }