Update log.html

log.html

@@ -5,8 +5,6 @@
 <title>Log Surplus - NourishNet</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>
@@ -19,6 +17,7 @@ body {
   transition: all 0.3s ease;
   border: 1px solid #e5e7eb;
 }
+
 .card:hover {
   transform: translateY(-6px);
   border: 1px solid #10b981;
@@ -27,7 +26,6 @@ body {
 
 .active-match {
   border: 2px solid #10b981 !important;
-  box-shadow: 0 10px 25px rgba(16,185,129,0.2);
 }
 </style>
 </head>
@@ -40,8 +38,8 @@ body {
 
   <div class="hidden md:flex gap-10 font-medium items-center text-lg">
     <a href="dashboard.html">Dashboard</a>
-    <a href="#">Impact</a>
-    <a href="#">Leaderboard</a>
+    <a href="impact.html">Impact</a>
+    <a href="leaderboard.html">Leaderboard</a>
     <a href="index.html" class="bg-white text-emerald-600 px-4 py-1 rounded-full font-semibold">Logout</a>
   </div>
 </nav>
@@ -54,15 +52,14 @@ body {
   </p>
 </section>
 
-<!-- CONTENT -->
+<!-- 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>
 
-    <label class="font-semibold text-lg">Food Type</label>
+    <label class="font-semibold">Food Type</label>
     <select class="w-full mt-2 mb-5 p-3 border rounded-lg">
       <option>Halal Cooked</option>
       <option>Baked Goods</option>
@@ -71,12 +68,10 @@ body {
       <option>Vegetarian/Vegan</option>
     </select>
 
-    <label class="font-semibold text-lg">
-      Portions: <span id="portionValue">50</span>
-    </label>
+    <label class="font-semibold">Portions: <span id="portionValue">50</span></label>
     <input type="range" min="1" max="250" value="50" id="portions" class="w-full mt-2 mb-5">
 
-    <label class="font-semibold text-lg">Expiry Window</label>
+    <label class="font-semibold">Expiry Window</label>
     <select id="expiry" class="w-full mt-2 p-3 border rounded-lg">
       <option>Less than 6 hours</option>
       <option>Within 24 hours</option>
@@ -90,162 +85,85 @@ body {
 
     <h2 class="text-2xl font-bold">AI Recommendation</h2>
 
-    <p id="aiText" class="mt-4 text-gray-700 text-lg leading-relaxed">
-      Adjust inputs to see recommendation...
+    <p id="aiText" class="mt-4 text-gray-700 text-lg">
+      Click “Ask AI” to get recommendation...
     </p>
 
-    <!-- ✅ NEW AI BUTTON -->
-    <button onclick="runAI()" 
-      class="mt-4 bg-emerald-600 text-white px-6 py-2 rounded-full">
-      Get AI Recommendation
+    <!-- 🔥 NEW BUTTON -->
+    <button onclick="runAI()"
+      class="mt-5 bg-emerald-600 text-white px-6 py-2 rounded-full">
+      Ask AI
     </button>
 
   </div>
 
-  <!-- RECIPIENTS -->
-  <div class="card bg-white p-8 rounded-xl">
-
-    <h2 class="text-2xl font-bold mb-4">Matched Recipients</h2>
-
-    <div class="space-y-4">
-
-      <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 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 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</p>
-      </div>
-
-    </div>
-
-  </div>
-
 </section>
 
-<!-- BUTTON -->
-<section class="flex justify-center mt-12 mb-10">
-  <button id="confirmBtn"
-    class="bg-emerald-600 text-white px-12 py-4 rounded-full font-semibold text-lg hover:scale-105 transition shadow-lg">
-    Confirm Donation
-  </button>
-</section>
-
-<div id="footer"></div>
-
+<!-- SCRIPT -->
 <script>
-fetch("footer.html")
-  .then(res => res.text())
-  .then(data => {
-    document.getElementById("footer").innerHTML = data;
-  });
-</script>
 
-<!-- EXISTING LOGIC -->
-<script>
+// UI update
 const portions = document.getElementById("portions");
-const expiry = document.getElementById("expiry");
-const aiText = document.getElementById("aiText");
 const portionValue = document.getElementById("portionValue");
 
-const elderly = document.getElementById("elderly");
-const refugee = document.getElementById("refugee");
-const foodbank = document.getElementById("foodbank");
-
-function updateAI() {
-  let p = parseInt(portions.value);
-  let e = expiry.value;
-
-  portionValue.innerText = p;
-
-  elderly.classList.add("hidden");
-  refugee.classList.add("hidden");
-  foodbank.classList.add("hidden");
-
-  let recipient = "";
-  let showCard = null;
-
-  if (p <= 80) {
-    recipient = "Al Rahma Elderly Home";
-    showCard = elderly;
-  } else if (p <= 150) {
-    recipient = "Hope Refugee Center";
-    showCard = refugee;
-  } else {
-    recipient = "Dubai Food Bank";
-    showCard = foodbank;
-  }
-
-  if (showCard) {
-    showCard.classList.remove("hidden");
-    showCard.classList.add("active-match");
-  }
-
-  aiText.innerHTML = `<b>Recommended:</b> ${recipient}`;
-}
+portions.addEventListener("input", () => {
+  portionValue.innerText = portions.value;
+});
 
-portions.addEventListener("input", updateAI);
-expiry.addEventListener("change", updateAI);
-updateAI();
+// 🔥 GROQ LLM FUNCTION
+async function runAI() {
 
-// STORE DATA
-document.getElementById("confirmBtn").addEventListener("click", function () {
-  const data = {
-    foodType: document.querySelector("select").value,
-    portions: portions.value,
-    expiry: expiry.value
-  };
+  const meals = document.getElementById("portions").value;
+  const foodType = document.querySelector("select").value;
+  const expiryText = document.getElementById("expiry").value;
 
-  localStorage.setItem("donationData", JSON.stringify(data));
-  window.location.href = "confirmation.html";
-});
-</script>
+  let hours = expiryText.includes("6") ? 3 : expiryText.includes("24") ? 12 : 30;
 
-<!-- ✅ AI INTEGRATION -->
-<script>
-async function runAI() {
+  const distance = 5;
 
-  const meals = parseInt(document.getElementById("portions").value);
+  const prompt = `
+You are an AI for food surplus redistribution in the UAE (NourishNet).
 
-  let expiryText = document.getElementById("expiry").value;
-  let hours = 24;
+Analyze the data:
 
-  if (expiryText.includes("6")) hours = 3;
-  else if (expiryText.includes("24")) hours = 12;
-  else hours = 30;
+Meals: ${meals}
+Hours left: ${hours}
+Distance: ${distance}
+Food type: ${foodType}
 
-  const distance = 5;
+Return:
+Priority (HIGH / MEDIUM / LOW)
+Reason (short explanation)
+Action (what should be done)
+`;
 
   try {
-    const response = await fetch("https://infinity-1995-nourish.hf.space/run/predict", {
+    const response = await fetch("https://api.groq.com/openai/v1/chat/completions", {
       method: "POST",
       headers: {
-        "Content-Type": "application/json"
+        "Content-Type": "application/json",
+        "Authorization": "Bearer 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"
       },
       body: JSON.stringify({
-        data: [meals, hours, distance]
+        model: "llama-3.1-8b-instant",
+        messages: [
+          { role: "user", content: prompt }
+        ]
       })
     });
 
-    const result = await response.json();
+    const data = await response.json();
 
-    document.getElementById("aiText").innerHTML = `
-      <b>AI Recommendation:</b><br>
-      ${result.data[0]}
-    `;
+    const result = data.choices[0].message.content;
+
+    document.getElementById("aiText").innerText = result;
 
   } catch (error) {
-    document.getElementById("aiText").innerText = "AI failed. Try again.";
-    console.log(error);
+    document.getElementById("aiText").innerText =
+      "AI failed. Check API key or internet connection.";
   }
 }
+
 </script>
 
 </body>