Update log.html

log.html

@@ -44,14 +44,19 @@ 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">
-    Enter your surplus details and let AI intelligently route your donation
+    AI + Location-based smart 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 -->
 <section class="px-10 space-y-8">
 
-  <!-- INPUT CARD -->
+  <!-- INPUT -->
   <div class="card bg-white p-8 rounded-xl">
 
     <h2 class="text-2xl font-bold mb-6">Food Details</h2>
@@ -80,11 +85,11 @@ body {
   <!-- AI CARD -->
   <div class="card bg-white p-8 rounded-xl">
 
-    <h2 class="text-2xl font-bold">AI Recommendation</h2>
+    <h2 class="text-2xl font-bold mb-4">AI Recommendation</h2>
 
-    <p id="aiText" class="mt-4 text-gray-700 text-lg">
-      Click “Ask AI” to get recommendation...
-    </p>
+    <div id="aiText" class="text-gray-600">
+      Click “Ask AI” to generate analysis...
+    </div>
 
     <button onclick="runAI()"
       class="mt-5 bg-emerald-600 text-white px-6 py-2 rounded-full">
@@ -93,41 +98,74 @@ body {
 
   </div>
 
-  <!-- MAP SECTION -->
+  <!-- MAP -->
   <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>
+    <iframe
+      id="mapFrame"
+      src="https://www.google.com/maps?q=Dubai+UAE&output=embed"
+      width="100%"
+      height="350"
+      style="border:0;"
+      loading="lazy">
+    </iframe>
 
-    <!-- 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>
+  </div>
+
+</section>
+
+<!-- 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">
+    Confirm Donation
+  </button>
+</section>
+
+<!-- FOOTER -->
+<footer class="bg-emerald-600 text-white py-12 mt-20">
 
-    <!-- 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 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>
 
-</section>
+</footer>
 
 <!-- SCRIPT -->
 <script>
 
-// slider UI
+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");
 
@@ -135,7 +173,7 @@ portions.addEventListener("input", () => {
   portionValue.innerText = portions.value;
 });
 
-// 🔥 GROQ AI FUNCTION
+// AI FUNCTION
 async function runAI() {
 
   const meals = document.getElementById("portions").value;
@@ -144,30 +182,24 @@ async function runAI() {
 
   let hours = expiryText.includes("6") ? 3 : expiryText.includes("24") ? 12 : 30;
 
-  const distance = 5;
-
   const prompt = `
-You are NourishNet AI for food redistribution.
-
-Analyze:
+You are NourishNet AI.
 
 Meals: ${meals}
-Hours left: ${hours}
-Distance: ${distance}
-Food type: ${foodType}
+Hours: ${hours}
+Food: ${foodType}
 
 Return:
-Priority (HIGH/MEDIUM/LOW)
-Reason (2 lines)
-Action (clear next step)
+Priority, Reason, Action
 `;
 
   try {
+
     const response = await fetch("https://api.groq.com/openai/v1/chat/completions", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
-        "Authorization": "Bearer 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"
+        "Authorization": "Bearer YOUR_GROQ_API_KEY"
       },
       body: JSON.stringify({
         model: "llama-3.1-8b-instant",
@@ -180,11 +212,15 @@ Action (clear next step)
     const data = await response.json();
     const result = data.choices[0].message.content;
 
-    document.getElementById("aiText").innerText = result;
+    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>
+    `;
 
   } catch (err) {
     document.getElementById("aiText").innerText =
-      "AI failed. Check API key or internet.";
+      "AI failed. Check API key or connection.";
   }
 }