Main

frontend/assets/css/style.css

@@ -0,0 +1,229 @@
+/* === Reset & Fonts === */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  background-color: #fff8f0;
+  color: #333;
+  line-height: 1.6;
+}
+
+/* === Navigation === */
+nav {
+  background: linear-gradient(90deg, #ff6b6b, #ff9f43);
+  color: white;
+  padding: 1rem 0;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  border-bottom: 4px solid #ffa94d;
+}
+
+.nav-container {
+  max-width: 1100px;
+  margin: auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px;
+}
+
+nav h1 {
+  font-size: 1.8rem;
+  font-weight: bold;
+}
+
+nav ul {
+  list-style: none;
+  display: flex;
+  gap: 20px;
+}
+
+nav a {
+  color: white;
+  text-decoration: none;
+  font-weight: bold;
+  transition: opacity 0.3s ease;
+}
+
+nav a:hover,
+nav a.active {
+  opacity: 0.8;
+}
+
+/* === If nav is outside <nav> (like in Preference form page) === */
+.nav-container {
+  background: linear-gradient(90deg, #ff6b6b, #ff9f43);
+  padding: 1rem 20px;
+  color: white;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  border-bottom: 4px solid #ffa94d;
+}
+
+/* === Recipes Grid === */
+.recipes {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 1.5rem;
+  padding: 2rem;
+  background-color: #fff6e5;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.recipe-card {
+  background: white;
+  border-radius: 15px;
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06);
+  padding: 1.5rem;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.recipe-card:hover {
+  transform: scale(1.03);
+  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
+}
+
+.recipe-card h3 {
+  color: #d35400;
+  margin-bottom: 0.5rem;
+  font-size: 1.2rem;
+}
+
+.recipe-card p {
+  font-size: 0.95rem;
+  color: #444;
+}
+
+/* === Search Bar === */
+.search-section input {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid #ffb366;
+  border-radius: 10px;
+  margin: 1rem 0;
+  background: #fffdf9;
+}
+
+/* === Chatbot Section === */
+.chatbot-section h2 {
+  font-size: 2rem;
+  color: #ff6b6b;
+  margin-bottom: 0.5rem;
+}
+
+.chatbox {
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
+  padding: 1.5rem;
+  margin-top: 1rem;
+}
+
+.chat-window {
+  height: 300px;
+  overflow-y: auto;
+  background: #fffaf2;
+  border-radius: 8px;
+  padding: 1rem;
+  margin-bottom: 1rem;
+  border: 1px solid #ffd9b3;
+}
+
+.message {
+  padding: 0.6rem 1rem;
+  border-radius: 20px;
+  margin-bottom: 0.8rem;
+  max-width: 80%;
+}
+
+.message.bot {
+  background: #ffe0cc;
+}
+
+.message.user {
+  background: #c5f6c7;
+  align-self: flex-end;
+  text-align: right;
+}
+
+#chat-form {
+  display: flex;
+  gap: 10px;
+}
+
+#chat-form input[type="text"] {
+  flex: 1;
+  padding: 0.75rem;
+  border-radius: 20px;
+  border: 1px solid #ccc;
+}
+
+#chat-form button {
+  padding: 0.75rem 1.5rem;
+  border: none;
+  background: #ffa94d;
+  color: white;
+  font-weight: bold;
+  border-radius: 20px;
+  cursor: pointer;
+  transition: background 0.3s ease;
+}
+
+#chat-form button:hover {
+  background: #ff922b;
+}
+
+/* === Preference Form Styling === */
+form {
+  background: #fff;
+  padding: 2rem;
+  border-radius: 12px;
+  max-width: 700px;
+  margin: 2rem auto;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
+}
+
+form label {
+  display: block;
+  margin: 1rem 0 0.5rem;
+  font-weight: 600;
+  color: #d35400;
+}
+
+form input,
+form select,
+form textarea {
+  width: 100%;
+  padding: 0.75rem;
+  border-radius: 10px;
+  border: 1px solid #ccc;
+  background-color: #fffdf9;
+}
+
+form button {
+  margin-top: 1.5rem;
+  padding: 0.8rem 1.5rem;
+  background-color: #f76707;
+  color: white;
+  border: none;
+  font-weight: bold;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: background 0.3s ease;
+}
+
+form button:hover {
+  background-color: #e8590c;
+}
+
+/* === Footer === */
+footer {
+  text-align: center;
+  padding: 1rem;
+  background: #ff9f43;
+  color: white;
+  margin-top: 2rem;
+}

frontend/assets/js/app.js

@@ -1,11 +1,81 @@
-/*
-app.js - Handles Preferences & Recipe Search Logic
-
-Includes:
-1. Form submission logic (from preferences.html):
-   - Collect user input and send POST request to backend (/save_preferences).
-2. Recipe search:
-   - Capture user search input
-   - Send GET/POST request to backend (/get_recipes)
-   - Display search results dynamically on the page
-*/
+// Wait for the DOM to load
+document.addEventListener("DOMContentLoaded", function () {
+
+  /* -------------------------
+     1. Homepage Recipe Filter
+  -------------------------- */
+  const searchInput = document.getElementById("search");
+  if (searchInput) {
+    searchInput.addEventListener("keyup", function () {
+      const input = searchInput.value.toLowerCase();
+      const cards = document.getElementsByClassName("recipe-card");
+
+      Array.from(cards).forEach(card => {
+        const text = card.innerText.toLowerCase();
+        card.style.display = text.includes(input) ? "block" : "none";
+      });
+    });
+  }
+
+  /* -------------------------
+     2. Chatbot Page Logic
+  -------------------------- */
+  const chatForm = document.getElementById("chat-form");
+  const chatWindow = document.getElementById("chat-window");
+  const userInput = document.getElementById("user-input");
+
+  if (chatForm && chatWindow && userInput) {
+    chatForm.addEventListener("submit", function (e) {
+      e.preventDefault();
+
+      const message = userInput.value.trim();
+      if (!message) return;
+
+      appendMessage("user", message);
+
+      setTimeout(() => {
+        const botResponse = getBotResponse(message);
+        appendMessage("bot", botResponse);
+        chatWindow.scrollTop = chatWindow.scrollHeight;
+      }, 600);
+
+      userInput.value = "";
+    });
+
+    function appendMessage(sender, text) {
+      const messageElement = document.createElement("div");
+      messageElement.className = `message ${sender}`;
+      messageElement.textContent = text;
+      chatWindow.appendChild(messageElement);
+    }
+
+    function getBotResponse(input) {
+      const lowerInput = input.toLowerCase();
+      if (lowerInput.includes("vegan")) {
+        return "Try a Vegan Chickpea Curry or Quinoa Salad!";
+      } else if (lowerInput.includes("diabetic")) {
+        return "Low-carb Grilled Chicken or Steamed Veggie Stir Fry are great options.";
+      } else if (lowerInput.includes("breakfast")) {
+        return "How about oatmeal with berries or an egg-white omelet?";
+      } else if (lowerInput.includes("gluten")) {
+        return "Gluten-free Pasta Primavera or Brown Rice Bowls work well.";
+      } else {
+        return "Tell me more — what kind of recipe are you looking for (e.g. high protein, low carb)?";
+      }
+    }
+  }
+
+});
+document.getElementById("submit").onclick = function() {
+  window.location.href = "/Frontend/index.html";
+};
+
+function filterRecipes() {
+  const input = document.getElementById("search").value.toLowerCase();
+  const cards = document.getElementsByClassName("recipe-card");
+
+  Array.from(cards).forEach(card => {
+    const text = card.innerText.toLowerCase();
+    card.style.display = text.includes(input) ? "block" : "none";
+  });
+}