Update templates/index.html

templates/index.html

@@ -22,117 +22,7 @@
       position: relative;
     }
 
-    /* Enhanced animated background with foody elements */
-    body::before {
-      content: '';
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-image: 
-        /* 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: 400px 150px;
-      animation: riseSteam 15s ease-in-out infinite;
-      pointer-events: none;
-      z-index: -1;
-      opacity: 0.3;
-    }
-
-    @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 */
+    /* Center main content */
     main {
       min-height: 100vh;
       display: flex;
@@ -143,11 +33,15 @@
       z-index: 1;
     }
 
-    /* Card entrance animation */
+    /* Card styling */
     .main-card {
       animation: fadeInUp 0.8s ease-out;
       width: 100%;
       max-width: 540px;
+      background: linear-gradient(135deg, #fff9f1, #fff5e6);
+      border-radius: 1rem;
+      box-shadow: 0 10px 30px rgba(230, 126, 34, 0.15);
+      padding: 3rem 3rem 2rem;
     }
 
     @keyframes fadeInUp {
@@ -161,17 +55,70 @@
       }
     }
 
-    /* Smooth input focus ring with scale */
+    /* Input group styling */
+    .input-group {
+      position: relative;
+      display: block;
+    }
+
+    /* Icon styling and positioning */
+    .input-icon {
+      position: absolute;
+      left: 15px;
+      color: #e67e22;
+      z-index: 10;
+      pointer-events: none;
+      transition: color 0.3s ease;
+    }
+
+    /* For single-line inputs and selects */
+    .input-group input:not(textarea),
+    .input-group select {
+      padding-left: 45px;
+      min-height: 44px;
+      border-width: 2px !important;
+      border-color: #f39c12 !important;
+      border-radius: 0.75rem !important;
+      transition: all 0.3s ease;
+    }
+
+    .input-group input:not(textarea) + .input-icon,
+    .input-group select + .input-icon {
+      top: 50%;
+      transform: translateY(-50%);
+      font-size: 1.1rem;
+    }
+
+    /* For textarea */
+    .input-group textarea {
+      padding-left: 45px;
+      padding-top: 14px;
+      border-width: 2px !important;
+      border-color: #f39c12 !important;
+      border-radius: 0.75rem !important;
+      transition: all 0.3s ease;
+      resize: vertical;
+      min-height: 90px;
+    }
+
+    .input-group textarea + .input-icon {
+      top: 14px;
+      font-size: 1.2rem;
+      line-height: 1;
+      transform: none;
+    }
+
+    /* Input focus effect */
     input:focus, select:focus, textarea:focus {
       outline: none !important;
-      box-shadow: 0 0 8px rgba(230, 126, 34, 0.6), 0 0 0 0.2rem rgba(230, 126, 34, 0.25) !important;
+      box-shadow: 0 0 8px rgba(230, 126, 34, 0.6), 0 0 0 0.25rem rgba(230, 126, 34, 0.25) !important;
       border-color: #e67e22 !important;
       transform: scale(1.02);
       transition: all 0.3s ease;
     }
 
-    /* Icon shake on focus for fun */
-    .input-group:focus-within i.input-icon {
+    /* Icon shake on focus */
+    .input-group:focus-within .input-icon {
       animation: shake 0.5s ease-in-out;
     }
 
@@ -187,13 +134,18 @@
       opacity: 0.7;
     }
 
-    /* Enhanced button hover with pulse */
+    /* Button styling */
     .btn-warning {
       background: linear-gradient(45deg, #f39c12, #e67e22);
       border: none;
       transition: all 0.3s ease;
       position: relative;
       overflow: hidden;
+      border-radius: 0.75rem;
+      font-weight: 700;
+      font-size: 1.25rem;
+      padding: 0.75rem 1rem;
+      box-shadow: 0 4px 12px rgba(231, 111, 32, 0.3);
     }
 
     .btn-warning::before {
@@ -205,6 +157,7 @@
       height: 100%;
       background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
       transition: left 0.5s;
+      border-radius: 0.75rem;
     }
 
     .btn-warning:hover::before {
@@ -213,23 +166,30 @@
 
     .btn-warning:hover {
       background: linear-gradient(45deg, #e67e22, #d68910) !important;
-      box-shadow: 0 8px 25px rgba(231, 111, 32, 0.4);
+      box-shadow: 0 8px 25px rgba(231, 111, 32, 0.5);
       transform: translateY(-2px);
     }
 
-    /* Card hover enhancement */
+    /* Card hover */
     .card:hover {
       box-shadow: 0 20px 40px rgba(230, 126, 34, 0.25) !important;
       transform: translateY(-5px);
       transition: all 0.3s ease;
     }
 
-    /* Prediction slide-in animation */
+    /* Prediction result styling */
     .prediction-result {
       animation: slideInRight 0.6s ease-out;
       border: none;
       background: linear-gradient(135deg, #fff8f0, #ffe8cc);
       box-shadow: 0 4px 15px rgba(230, 126, 34, 0.1);
+      border-radius: 0.75rem;
+      padding: 1.5rem;
+      margin-top: 1.5rem;
+      color: #d35400;
+      font-weight: 600;
+      font-size: 1.25rem;
+      text-align: center;
     }
 
     @keyframes slideInRight {
@@ -243,99 +203,32 @@
       }
     }
 
-    /* Improved Input group styling for icons - Fixed positioning */
-    .input-group {
-      position: relative;
-      display: block; /* Ensure consistent layout */
-    }
-
-    .input-group .input-icon {
-      position: absolute;
-      left: 12px;
-      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;
-    }
-
-    /* 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 */
-    .btn-loading {
-      pointer-events: none;
-      opacity: 0.7;
-    }
-
-    .spinner-border-sm {
-      width: 1rem;
-      height: 1rem;
-    }
-
     /* Responsive adjustments */
     @media (max-width: 576px) {
-      .card {
-        margin: 10px;
-        padding: 20px !important;
+      .main-card {
+        padding: 2rem 1.5rem 1.5rem;
       }
-      
       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;
+        padding-left: 40px;
       }
-
       .input-group .input-icon {
-        left: 10px;
-        font-size: 0.9rem;
+        left: 12px;
+        font-size: 1rem;
+      }
+      .btn-warning {
+        font-size: 1.1rem;
+        padding: 0.65rem 1rem;
       }
     }
   </style>
 </head>
 <body>
 
-  <!-- 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);">
+    <div class="card main-card shadow-lg animate__animated">
       <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>
@@ -347,7 +240,7 @@
           <label for="ingredients" class="form-label fw-semibold fs-6 text-secondary">
             <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>
+          <textarea id="ingredients" name="ingredients" rows="3" required placeholder="e.g., cumin, coriander, ginger" class="form-control"></textarea>
           <i class="fas fa-pepper-hot input-icon"></i>
           <div class="invalid-feedback">Please enter ingredients.</div>
         </div>
@@ -357,7 +250,7 @@
           <label for="diet" class="form-label fw-semibold fs-6 text-secondary">
             <i class="fas fa-leaf me-1"></i>Diet:
           </label>
-          <select id="diet" name="diet" required class="form-select rounded-3 border-2 border-warning">
+          <select id="diet" name="diet" required class="form-select">
             <option value="" disabled selected>Select diet</option>
             <option value="vegetarian">Vegetarian</option>
             <option value="non vegetarian">Non Vegetarian</option>
@@ -371,7 +264,7 @@
           <label for="course" class="form-label fw-semibold fs-6 text-secondary">
             <i class="fas fa-drumstick-bite me-1"></i>Course:
           </label>
-          <select id="course" name="course" required class="form-select rounded-3 border-2 border-warning">
+          <select id="course" name="course" required class="form-select">
             <option value="" disabled selected>Select course</option>
             <option value="dessert">Dessert</option>
             <option value="main course">Main Course</option>
@@ -387,7 +280,7 @@
           <label for="region" class="form-label fw-semibold fs-6 text-secondary">
             <i class="fas fa-map-marker-alt me-1"></i>Region:
           </label>
-          <select id="region" name="region" required class="form-select rounded-3 border-2 border-warning">
+          <select id="region" name="region" required class="form-select">
             <option value="" disabled selected>Select region</option>
             <option value="East">East</option>
             <option value="West">West</option>
@@ -400,35 +293,31 @@
 
         <!-- Prep & Cook Time -->
         <div class="row mb-4 g-3">
-          <div class="col-6">
+          <div class="col-6 input-group">
             <label for="prep_time" class="form-label fw-semibold fs-6 text-secondary">
               <i class="fas fa-clock me-1"></i>Preparation Time (minutes):
             </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 input-icon"></i>
-            </div>
+            <input id="prep_time" type="number" name="prep_time" min="0" required placeholder="e.g., 15" class="form-control" />
+            <i class="fas fa-stopwatch input-icon"></i>
             <div class="invalid-feedback">Please enter preparation time.</div>
           </div>
-          <div class="col-6">
+          <div class="col-6 input-group">
             <label for="cook_time" class="form-label fw-semibold fs-6 text-secondary">
               <i class="fas fa-fire me-1"></i>Cook Time (minutes):
             </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 input-icon"></i>
-            </div>
+            <input id="cook_time" type="number" name="cook_time" min="0" required placeholder="e.g., 30" class="form-control" />
+            <i class="fas fa-burn input-icon"></i>
             <div class="invalid-feedback">Please enter cook time.</div>
           </div>
         </div>
 
-        <button type="submit" class="btn btn-warning w-100 py-3 fs-5 fw-bold shadow-sm mb-3" id="submitBtn">
+        <button type="submit" class="btn btn-warning w-100 shadow-sm" id="submitBtn">
           <i class="fas fa-magic me-2"></i>Predict Flavor Profile
         </button>
       </form>
 
       {% if prediction %}
-      <div class="prediction-result mt-4 p-4 rounded-3 bg-gradient text-warning fs-5 text-center shadow-sm fw-semibold border-0">
+      <div class="prediction-result">
         <i class="fas fa-star-and-crescent me-2"></i>Predicted Flavor Profile: {{ prediction }}
       </div>
       {% endif %}
@@ -436,4 +325,29 @@
   </main>
 
   <!-- Bootstrap JS Bundle -->
-  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.4.1
+  <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);
+      });
+    })();
+  </script>
+</body>
+</html>