Update templates/index.html

templates/index.html

@@ -16,12 +16,13 @@
   
   <style>
     body {
-      background: linear-gradient(135deg, #fff8f0, #ffe8cc, #ffddb5);
+      background: linear-gradient(135deg, #fff8f0, #ffe8cc, #ffddb5, #ffdab9);
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
       overflow-x: hidden;
+      position: relative;
     }
 
-    /* Animated background particles (subtle) */
+    /* Enhanced animated background with foody elements */
     body::before {
       content: '';
       position: fixed;
@@ -30,26 +31,123 @@
       width: 100%;
       height: 100%;
       background-image: 
-        radial-gradient(2px 2px at 20px 30px, #e67e22, transparent),
-        radial-gradient(2px 2px at 40px 70px, rgba(230, 126, 34, 0.8), transparent),
-        radial-gradient(1px 1px at 90px 40px, #f39c12, transparent),
-        radial-gradient(1px 1px at 130px 80px, rgba(241, 196, 15, 0.6), transparent);
+        /* Spice particles (cumin-like dots) */
+        radial-gradient(3px 3px at 20px 30px, #8B4513, transparent),
+        radial-gradient(2px 2px at 80px 50px, #FF4500, transparent),
+        radial-gradient(4px 4px at 150px 20px, #D2691E, transparent),
+        /* Steam wisps (curved lines for cooking steam) */
+        radial-gradient(1px 20px at 60px 80px, rgba(255, 255, 255, 0.6), transparent),
+        radial-gradient(1px 15px at 200px 100px, rgba(255, 255, 255, 0.4), transparent),
+        /* Floating leaf/curry leaf shapes */
+        radial-gradient(ellipse 10px 5px at 120px 60px, #228B22, transparent),
+        radial-gradient(ellipse 8px 4px at 250px 90px, #32CD32, transparent);
+      background-repeat: repeat;
+      background-size: 300px 200px;
+      animation: floatSpices 25s linear infinite;
+      pointer-events: none;
+      z-index: -1;
+      opacity: 0.4;
+    }
+
+    /* Additional foody animation layer: Rising bubbles/steam */
+    body::after {
+      content: '';
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-image: 
+        radial-gradient(circle 5px at 40px 90%, rgba(255, 193, 7, 0.5), transparent),
+        radial-gradient(circle 3px at 100px 70%, rgba(255, 140, 0, 0.4), transparent),
+        radial-gradient(circle 4px at 180px 85%, rgba(255, 69, 0, 0.3), transparent),
+        radial-gradient(circle 6px at 300px 95%, rgba(255, 215, 0, 0.5), transparent);
       background-repeat: repeat;
-      background-size: 200px 100px;
-      animation: sparkle 20s linear infinite;
+      background-size: 400px 150px;
+      animation: riseSteam 15s ease-in-out infinite;
       pointer-events: none;
       z-index: -1;
       opacity: 0.3;
     }
 
-    @keyframes sparkle {
-      0% { transform: translateY(0px) rotate(0deg); }
-      100% { transform: translateY(-100px) rotate(360deg); }
+    @keyframes floatSpices {
+      0% { 
+        transform: translateY(0px) rotate(0deg); 
+        opacity: 0.4;
+      }
+      50% { 
+        opacity: 0.8;
+      }
+      100% { 
+        transform: translateY(-200px) rotate(180deg); 
+        opacity: 0.4;
+      }
+    }
+
+    @keyframes riseSteam {
+      0% { 
+        transform: translateY(100vh) scale(0);
+        opacity: 0;
+      }
+      10% { 
+        opacity: 1;
+      }
+      90% { 
+        opacity: 1;
+      }
+      100% { 
+        transform: translateY(-100px) scale(1.5);
+        opacity: 0;
+      }
+    }
+
+    /* Subtle rotating utensil in background (optional, low opacity) */
+    .bg-utensil {
+      position: fixed;
+      top: 20%;
+      right: 10%;
+      font-size: 3rem;
+      color: rgba(230, 126, 34, 0.1);
+      z-index: -1;
+      animation: rotateUtensil 20s linear infinite;
+    }
+
+    .bg-plate {
+      position: fixed;
+      bottom: 20%;
+      left: 10%;
+      font-size: 4rem;
+      color: rgba(255, 193, 7, 0.08);
+      z-index: -1;
+      animation: bouncePlate 8s ease-in-out infinite;
+    }
+
+    @keyframes rotateUtensil {
+      from { transform: rotate(0deg); }
+      to { transform: rotate(360deg); }
+    }
+
+    @keyframes bouncePlate {
+      0%, 100% { transform: translateY(0px); }
+      50% { transform: translateY(-20px); }
+    }
+
+    /* Ensure main content is perfectly centered */
+    main {
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 2rem;
+      position: relative;
+      z-index: 1;
     }
 
     /* Card entrance animation */
     .main-card {
       animation: fadeInUp 0.8s ease-out;
+      width: 100%;
+      max-width: 540px;
     }
 
     @keyframes fadeInUp {
@@ -73,7 +171,7 @@
     }
 
     /* Icon shake on focus for fun */
-    .input-group:focus-within i {
+    .input-group:focus-within i.input-icon {
       animation: shake 0.5s ease-in-out;
     }
 
@@ -145,23 +243,46 @@
       }
     }
 
-    /* Input group styling for icons */
+    /* Improved Input group styling for icons - Fixed positioning */
     .input-group {
       position: relative;
+      display: block; /* Ensure consistent layout */
     }
 
-    .input-group i {
+    .input-group .input-icon {
       position: absolute;
       left: 12px;
-      top: 50%;
-      transform: translateY(-50%);
       color: #e67e22;
       z-index: 10;
       transition: color 0.3s ease;
+      pointer-events: none; /* Prevent icon from interfering with input */
+    }
+
+    /* For single-line inputs and selects: center vertically */
+    .input-group input:not(textarea), .input-group select {
+      padding-left: 40px;
+      min-height: 42px; /* Consistent height for alignment */
+    }
+
+    .input-group input:not(textarea) + .input-icon,
+    .input-group select + .input-icon {
+      top: 50%;
+      transform: translateY(-50%);
+      font-size: 1rem;
     }
 
-    .input-group input, .input-group select, .input-group textarea {
+    /* For textarea: Align icon to the top-left, near the first line */
+    .input-group textarea {
       padding-left: 40px;
+      padding-top: 12px; /* Space for icon */
+      resize: vertical; /* Allow vertical resize only */
+    }
+
+    .input-group textarea + .input-icon {
+      top: 12px;
+      transform: none; /* No vertical centering for multi-line */
+      font-size: 1.1rem;
+      line-height: 1;
     }
 
     /* Loading spinner for button */
@@ -185,13 +306,36 @@
       h1 {
         font-size: 1.8rem !important;
       }
+
+      /* Hide background elements on small screens for performance */
+      body::before, body::after, .bg-utensil, .bg-plate {
+        display: none;
+      }
+
+      /* Adjust icon padding on mobile */
+      .input-group input, .input-group select, .input-group textarea {
+        padding-left: 35px;
+      }
+
+      .input-group .input-icon {
+        left: 10px;
+        font-size: 0.9rem;
+      }
     }
   </style>
 </head>
 <body>
 
-  <main class="min-vh-100 d-flex align-items-center justify-content-center p-4">
-    <div class="card main-card shadow-lg rounded-4 p-5 w-100 animate__animated" style="max-width: 540px; background: linear-gradient(135deg, #fff9f1, #fff5e6);">
+  <!-- Background foody elements -->
+  <div class="bg-utensil">
+    <i class="fas fa-utensils"></i>
+  </div>
+  <div class="bg-plate">
+    <i class="fas fa-circle"></i> <!-- Simple plate representation -->
+  </div>
+
+  <main>
+    <div class="card main-card shadow-lg rounded-4 p-5 w-100 animate__animated" style="background: linear-gradient(135deg, #fff9f1, #fff5e6);">
       <h1 class="text-center mb-5 text-4xl font-extrabold text-orange-600 animate__animated animate__bounceIn">
         <i class="fas fa-utensils me-2"></i>Indian Food Flavor Profile Prediction
       </h1>
@@ -204,7 +348,7 @@
             <i class="fas fa-list me-1"></i>Ingredients (comma separated):
           </label>
           <textarea id="ingredients" name="ingredients" rows="3" required placeholder="e.g., cumin, coriander, ginger" class="form-control rounded-3 border-2 border-warning"></textarea>
-          <i class="fas fa-pepper-hot"></i>
+          <i class="fas fa-pepper-hot input-icon"></i>
           <div class="invalid-feedback">Please enter ingredients.</div>
         </div>
 
@@ -218,7 +362,7 @@
             <option value="vegetarian">Vegetarian</option>
             <option value="non vegetarian">Non Vegetarian</option>
           </select>
-          <i class="fas fa-seedling"></i>
+          <i class="fas fa-seedling input-icon"></i>
           <div class="invalid-feedback">Please select a diet.</div>
         </div>
 
@@ -234,7 +378,7 @@
             <option value="starter">Starter</option>
             <option value="snack">Snack</option>
           </select>
-          <i class="fas fa-utensil-spoon"></i>
+          <i class="fas fa-utensil-spoon input-icon"></i>
           <div class="invalid-feedback">Please select a course.</div>
         </div>
 
@@ -250,7 +394,7 @@
             <option value="North">North</option>
             <option value="South">South</option>
           </select>
-          <i class="fas fa-globe-americas"></i>
+          <i class="fas fa-globe-americas input-icon"></i>
           <div class="invalid-feedback">Please select a region.</div>
         </div>
 
@@ -262,7 +406,7 @@
             </label>
             <div class="input-group">
               <input id="prep_time" type="number" name="prep_time" min="0" required placeholder="e.g., 15" class="form-control rounded-3 border-2 border-warning" />
-              <i class="fas fa-stopwatch"></i>
+              <i class="fas fa-stopwatch input-icon"></i>
             </div>
             <div class="invalid-feedback">Please enter preparation time.</div>
           </div>
@@ -272,7 +416,7 @@
             </label>
             <div class="input-group">
               <input id="cook_time" type="number" name="cook_time" min="0" required placeholder="e.g., 30" class="form-control rounded-3 border-2 border-warning" />
-              <i class="fas fa-burn"></i>
+              <i class="fas fa-burn input-icon"></i>
             </div>
             <div class="invalid-feedback">Please enter cook time.</div>
           </div>
@@ -292,35 +436,4 @@
   </main>
 
   <!-- Bootstrap JS Bundle -->
-  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.4.1/dist/js/bootstrap.bundle.min.js"></script>
-  
-  <script>
-    // Bootstrap form validation
-    (() => {
-      'use strict';
-      const forms = document.querySelectorAll('.needs-validation');
-      Array.from(forms).forEach(form => {
-        form.addEventListener('submit', event => {
-          if (!form.checkValidity()) {
-            event.preventDefault();
-            event.stopPropagation();
-          } else {
-            // Add loading state to button
-            const btn = document.getElementById('submitBtn');
-            btn.classList.add('btn-loading');
-            btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status"></span> Predicting...';
-            btn.classList.add('animate__animated', 'animate__pulse');
-          }
-          form.classList.add('was-validated');
-        }, false);
-      });
-    })();
-
-    // Reset button on form reset or page load if needed
-    document.addEventListener('DOMContentLoaded', function() {
-      const btn = document.getElementById('submitBtn');
-      // Note: Loading state will be reset by server response in a real app
-    });
-  </script>
-</body>
-</html>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.4.1