Update templates/index.html

templates/index.html

@@ -37,11 +37,11 @@
     .main-card {
       animation: fadeInUp 0.8s ease-out;
       width: 100%;
-      max-width: 540px;
+      max-width: 600px;
       background: linear-gradient(135deg, #fff9f1, #fff5e6);
       border-radius: 1rem;
       box-shadow: 0 10px 30px rgba(230, 126, 34, 0.15);
-      padding: 3rem 3rem 2rem;
+      padding: 3rem;
     }
 
     @keyframes fadeInUp {
@@ -55,100 +55,80 @@
       }
     }
 
-    /* Input group styling */
-    .input-group {
+    /* Form group styling */
+    .form-group {
+      margin-bottom: 1.5rem;
       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;
+    /* Label styling */
+    .form-label {
+      font-weight: 600 !important;
+      font-size: 1rem !important;
+      color: #8b4513 !important;
+      margin-bottom: 0.5rem !important;
+      display: block;
     }
 
-    .input-group input:not(textarea) + .input-icon,
-    .input-group select + .input-icon {
-      top: 50%;
-      transform: translateY(-50%);
+    .label-icon {
       font-size: 1.1rem;
+      margin-right: 0.5rem;
+      color: #e67e22;
+      width: 16px;
+      text-align: center;
     }
 
-    /* For textarea */
-    .input-group textarea {
-      padding-left: 45px;
-      padding-top: 14px;
-      border-width: 2px !important;
-      border-color: #f39c12 !important;
+    /* Input styling */
+    .form-control, .form-select {
+      border: 2px solid #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;
+      padding: 0.75rem 1rem !important;
+      font-size: 1rem !important;
+      transition: all 0.3s ease !important;
+      background-color: #fffbf7 !important;
+      min-height: 48px;
     }
 
-    /* Input focus effect */
-    input:focus, select:focus, textarea:focus {
+    .form-control:focus, .form-select:focus {
       outline: none !important;
-      box-shadow: 0 0 8px rgba(230, 126, 34, 0.6), 0 0 0 0.25rem rgba(230, 126, 34, 0.25) !important;
+      box-shadow: 0 0 8px rgba(230, 126, 34, 0.4), 0 0 0 0.25rem rgba(230, 126, 34, 0.2) !important;
       border-color: #e67e22 !important;
-      transform: scale(1.02);
-      transition: all 0.3s ease;
-    }
-
-    /* Icon shake on focus */
-    .input-group:focus-within .input-icon {
-      animation: shake 0.5s ease-in-out;
+      transform: scale(1.01);
+      background-color: #ffffff !important;
     }
 
-    @keyframes shake {
-      0%, 100% { transform: translateX(0); }
-      25% { transform: translateX(-5px); }
-      75% { transform: translateX(5px); }
+    /* Textarea specific */
+    textarea.form-control {
+      resize: vertical;
+      min-height: 100px !important;
+      padding-top: 0.75rem !important;
     }
 
     /* Placeholder styling */
     ::placeholder {
       color: #d35400;
       opacity: 0.7;
+      font-style: italic;
     }
 
     /* Button styling */
-    .btn-warning {
-      background: linear-gradient(45deg, #f39c12, #e67e22);
-      border: none;
+    .btn-predict {
+      background: linear-gradient(45deg, #f39c12, #e67e22) !important;
+      border: none !important;
       transition: all 0.3s ease;
       position: relative;
       overflow: hidden;
-      border-radius: 0.75rem;
-      font-weight: 700;
-      font-size: 1.25rem;
-      padding: 0.75rem 1rem;
+      border-radius: 0.75rem !important;
+      font-weight: 700 !important;
+      font-size: 1.2rem !important;
+      padding: 1rem 2rem !important;
       box-shadow: 0 4px 12px rgba(231, 111, 32, 0.3);
+      color: white !important;
+      width: 100%;
+      margin-top: 1rem;
     }
 
-    .btn-warning::before {
+    .btn-predict::before {
       content: '';
       position: absolute;
       top: 0;
@@ -160,67 +140,97 @@
       border-radius: 0.75rem;
     }
 
-    .btn-warning:hover::before {
+    .btn-predict:hover::before {
       left: 100%;
     }
 
-    .btn-warning:hover {
+    .btn-predict:hover {
       background: linear-gradient(45deg, #e67e22, #d68910) !important;
       box-shadow: 0 8px 25px rgba(231, 111, 32, 0.5);
       transform: translateY(-2px);
+      color: white !important;
+    }
+
+    /* Time inputs row */
+    .time-row {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 1rem;
     }
 
     /* Card hover */
-    .card:hover {
+    .main-card:hover {
       box-shadow: 0 20px 40px rgba(230, 126, 34, 0.25) !important;
-      transform: translateY(-5px);
+      transform: translateY(-2px);
       transition: all 0.3s ease;
     }
 
     /* Prediction result styling */
     .prediction-result {
-      animation: slideInRight 0.6s ease-out;
+      animation: slideInUp 0.6s ease-out;
       border: none;
-      background: linear-gradient(135deg, #fff8f0, #ffe8cc);
-      box-shadow: 0 4px 15px rgba(230, 126, 34, 0.1);
+      background: linear-gradient(135deg, #e8f5e8, #d4edda);
+      box-shadow: 0 4px 15px rgba(40, 167, 69, 0.2);
       border-radius: 0.75rem;
       padding: 1.5rem;
       margin-top: 1.5rem;
-      color: #d35400;
+      color: #155724;
       font-weight: 600;
-      font-size: 1.25rem;
+      font-size: 1.1rem;
       text-align: center;
+      border-left: 4px solid #28a745;
     }
 
-    @keyframes slideInRight {
+    @keyframes slideInUp {
       from {
         opacity: 0;
-        transform: translateX(100%);
+        transform: translateY(30px);
       }
       to {
         opacity: 1;
-        transform: translateX(0);
+        transform: translateY(0);
       }
     }
 
+    /* Form validation styles */
+    .form-control.is-invalid, .form-select.is-invalid {
+      border-color: #dc3545 !important;
+      box-shadow: 0 0 8px rgba(220, 53, 69, 0.4) !important;
+    }
+
+    .invalid-feedback {
+      display: block;
+      color: #dc3545;
+      font-size: 0.875rem;
+      margin-top: 0.25rem;
+      font-style: italic;
+    }
+
     /* Responsive adjustments */
-    @media (max-width: 576px) {
+    @media (max-width: 768px) {
       .main-card {
-        padding: 2rem 1.5rem 1.5rem;
+        padding: 2rem 1.5rem;
+        margin: 1rem;
+      }
+      
+      .time-row {
+        grid-template-columns: 1fr;
+        gap: 1rem;
       }
+      
       h1 {
         font-size: 1.8rem !important;
       }
-      .input-group input, .input-group select, .input-group textarea {
-        padding-left: 40px;
-      }
-      .input-group .input-icon {
-        left: 12px;
-        font-size: 1rem;
+    }
+
+    @media (max-width: 480px) {
+      .main-card {
+        padding: 1.5rem 1rem;
       }
-      .btn-warning {
-        font-size: 1.1rem;
-        padding: 0.65rem 1rem;
+      
+      .btn-predict {
+        font-size: 1.1rem !important;
+        padding: 0.875rem 1.5rem !important;
       }
     }
   </style>
@@ -229,96 +239,116 @@
 
   <main>
     <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 class="text-center mb-4 text-3xl font-extrabold text-orange-600 animate__animated animate__bounceIn">
+        🍛 Indian Food Flavor Profile Prediction
       </h1>
 
       <form method="post" class="needs-validation" novalidate id="predictionForm">
         
         <!-- Ingredients -->
-        <div class="mb-4 input-group">
-          <label for="ingredients" class="form-label fw-semibold fs-6 text-secondary">
-            <i class="fas fa-list me-1"></i>Ingredients (comma separated):
+        <div class="form-group">
+          <label for="ingredients" class="form-label">
+            <span class="label-icon">🌶️</span>Ingredients
           </label>
-          <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>
+          <textarea 
+            id="ingredients" 
+            name="ingredients" 
+            rows="3" 
+            required 
+            placeholder="Enter ingredients separated by commas (e.g., cumin, coriander, ginger, turmeric)" 
+            class="form-control"
+          ></textarea>
+          <div class="invalid-feedback">Please enter at least one ingredient.</div>
         </div>
 
         <!-- Diet -->
-        <div class="mb-4 input-group">
-          <label for="diet" class="form-label fw-semibold fs-6 text-secondary">
-            <i class="fas fa-leaf me-1"></i>Diet:
+        <div class="form-group">
+          <label for="diet" class="form-label">
+            <span class="label-icon">🥬</span>Diet Type
           </label>
           <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>
+            <option value="" disabled selected>Choose diet type</option>
+            <option value="vegetarian">🌱 Vegetarian</option>
+            <option value="non vegetarian">🍖 Non Vegetarian</option>
           </select>
-          <i class="fas fa-seedling input-icon"></i>
-          <div class="invalid-feedback">Please select a diet.</div>
+          <div class="invalid-feedback">Please select a diet type.</div>
         </div>
 
         <!-- Course -->
-        <div class="mb-4 input-group">
-          <label for="course" class="form-label fw-semibold fs-6 text-secondary">
-            <i class="fas fa-drumstick-bite me-1"></i>Course:
+        <div class="form-group">
+          <label for="course" class="form-label">
+            <span class="label-icon">🍽️</span>Course Type
           </label>
           <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>
-            <option value="starter">Starter</option>
-            <option value="snack">Snack</option>
+            <option value="" disabled selected>Choose course type</option>
+            <option value="starter">🥗 Starter</option>
+            <option value="main course">🍛 Main Course</option>
+            <option value="dessert">🍮 Dessert</option>
+            <option value="snack">🍿 Snack</option>
           </select>
-          <i class="fas fa-utensil-spoon input-icon"></i>
-          <div class="invalid-feedback">Please select a course.</div>
+          <div class="invalid-feedback">Please select a course type.</div>
         </div>
 
         <!-- Region -->
-        <div class="mb-4 input-group">
-          <label for="region" class="form-label fw-semibold fs-6 text-secondary">
-            <i class="fas fa-map-marker-alt me-1"></i>Region:
+        <div class="form-group">
+          <label for="region" class="form-label">
+            <span class="label-icon">🗺️</span>Indian Region
           </label>
           <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>
-            <option value="North">North</option>
-            <option value="South">South</option>
+            <option value="" disabled selected>Choose regional cuisine</option>
+            <option value="North">🏔️ North Indian</option>
+            <option value="South">🏝️ South Indian</option>
+            <option value="East">🌅 East Indian</option>
+            <option value="West">🌊 West Indian</option>
           </select>
-          <i class="fas fa-globe-americas input-icon"></i>
           <div class="invalid-feedback">Please select a region.</div>
         </div>
 
         <!-- Prep & Cook Time -->
-        <div class="row mb-4 g-3">
-          <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):
+        <div class="time-row">
+          <div class="form-group">
+            <label for="prep_time" class="form-label">
+              <span class="label-icon">⏱️</span>Prep Time (minutes)
             </label>
-            <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>
+            <input 
+              id="prep_time" 
+              type="number" 
+              name="prep_time" 
+              min="0" 
+              max="300"
+              required 
+              placeholder="e.g., 15" 
+              class="form-control" 
+            />
+            <div class="invalid-feedback">Enter preparation time (0-300 minutes).</div>
           </div>
-          <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):
+          
+          <div class="form-group">
+            <label for="cook_time" class="form-label">
+              <span class="label-icon">🔥</span>Cook Time (minutes)
             </label>
-            <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>
+            <input 
+              id="cook_time" 
+              type="number" 
+              name="cook_time" 
+              min="0" 
+              max="600"
+              required 
+              placeholder="e.g., 30" 
+              class="form-control" 
+            />
+            <div class="invalid-feedback">Enter cooking time (0-600 minutes).</div>
           </div>
         </div>
 
-        <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 type="submit" class="btn btn-predict shadow-sm" id="submitBtn">
+          ✨ Predict Flavor Profile
         </button>
       </form>
 
       {% if prediction %}
       <div class="prediction-result">
-        <i class="fas fa-star-and-crescent me-2"></i>Predicted Flavor Profile: {{ prediction }}
+        🎯 Predicted Flavor Profile: <strong>{{ prediction }}</strong>
       </div>
       {% endif %}
     </div>
@@ -340,14 +370,26 @@
           } 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.disabled = true;
+            btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status"></span>🔮 Analyzing flavors...';
             btn.classList.add('animate__animated', 'animate__pulse');
           }
           form.classList.add('was-validated');
         }, false);
       });
     })();
+
+    // Add some interactive feedback
+    document.querySelectorAll('.form-control, .form-select').forEach(input => {
+      input.addEventListener('focus', function() {
+        this.parentElement.style.transform = 'scale(1.01)';
+        this.parentElement.style.transition = 'transform 0.2s ease';
+      });
+      
+      input.addEventListener('blur', function() {
+        this.parentElement.style.transform = 'scale(1)';
+      });
+    });
   </script>
 </body>
-</html>
+</html>