Update log.html

log.html

@@ -23,10 +23,6 @@ body {
   border: 1px solid #10b981;
   box-shadow: 0 20px 30px rgba(0,0,0,0.08);
 }
-
-.active-match {
-  border: 2px solid #10b981 !important;
-}
 </style>
 </head>
 
@@ -52,9 +48,10 @@ body {
   </p>
 </section>
 
-<!-- INPUT -->
+<!-- MAIN -->
 <section class="px-10 space-y-8">
 
+  <!-- INPUT CARD -->
   <div class="card bg-white p-8 rounded-xl">
 
     <h2 class="text-2xl font-bold mb-6">Food Details</h2>
@@ -80,7 +77,7 @@ body {
 
   </div>
 
-  <!-- AI OUTPUT -->
+  <!-- AI CARD -->
   <div class="card bg-white p-8 rounded-xl">
 
     <h2 class="text-2xl font-bold">AI Recommendation</h2>
@@ -89,7 +86,6 @@ body {
       Click “Ask AI” to get recommendation...
     </p>
 
-    <!-- 🔥 NEW BUTTON -->
     <button onclick="runAI()"
       class="mt-5 bg-emerald-600 text-white px-6 py-2 rounded-full">
       Ask AI
@@ -97,12 +93,41 @@ body {
 
   </div>
 
+  <!-- MAP SECTION -->
+  <div class="card bg-white p-8 rounded-xl">
+
+    <h2 class="text-2xl font-bold mb-4">Delivery Route Map</h2>
+
+    <p class="text-gray-600 mb-4">
+      Visual representation of donation flow across UAE
+    </p>
+
+    <!-- MAP (NO API KEY NEEDED) -->
+    <div class="rounded-xl overflow-hidden border">
+      <iframe
+        src="https://www.google.com/maps?q=Dubai+UAE&output=embed"
+        width="100%"
+        height="350"
+        style="border:0;"
+        loading="lazy">
+      </iframe>
+    </div>
+
+    <!-- INFO -->
+    <div class="flex justify-between mt-4 text-sm text-gray-600">
+      <p>📍 Restaurant</p>
+      <p>➡️ 5 km</p>
+      <p>📍 Recipient Center</p>
+    </div>
+
+  </div>
+
 </section>
 
 <!-- SCRIPT -->
 <script>
 
-// UI update
+// slider UI
 const portions = document.getElementById("portions");
 const portionValue = document.getElementById("portionValue");
 
@@ -110,7 +135,7 @@ portions.addEventListener("input", () => {
   portionValue.innerText = portions.value;
 });
 
-// 🔥 GROQ LLM FUNCTION
+// 🔥 GROQ AI FUNCTION
 async function runAI() {
 
   const meals = document.getElementById("portions").value;
@@ -121,28 +146,20 @@ async function runAI() {
 
   const distance = 5;
 
-const prompt = `
-You are NourishNet AI, a smart food redistribution assistant in the UAE.
+  const prompt = `
+You are NourishNet AI for food redistribution.
 
-Your job is to analyze surplus food and make intelligent decisions.
+Analyze:
 
-Rules:
-- Be precise and structured
-- Always explain WHY clearly
-- Prioritize urgency and impact
-- Think like a logistics coordinator
+Meals: ${meals}
+Hours left: ${hours}
+Distance: ${distance}
+Food type: ${foodType}
 
-Input Data:
-- Meals: ${meals}
-- Hours until expiry: ${hours}
-- Distance to nearest center: ${distance} km
-- Food type: ${foodType}
-
-Output format:
-
-Priority: HIGH / MEDIUM / LOW  
-Reason: (2-3 lines, explain logic clearly)  
-Action: (specific next step, where to send food)
+Return:
+Priority (HIGH/MEDIUM/LOW)
+Reason (2 lines)
+Action (clear next step)
 `;
 
   try {
@@ -161,14 +178,13 @@ Action: (specific next step, where to send food)
     });
 
     const data = await response.json();
-
     const result = data.choices[0].message.content;
 
     document.getElementById("aiText").innerText = result;
 
-  } catch (error) {
+  } catch (err) {
     document.getElementById("aiText").innerText =
-      "AI failed. Check API key or internet connection.";
+      "AI failed. Check API key or internet.";
   }
 }