Spaces:

dilpreet77
/

model

Sleeping

App Files Files Community

dilpreet77 commited on Sep 22, 2025

Commit

2bca5e4

verified ·

1 Parent(s): 6a5f05e

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +212 -29

templates/index.html CHANGED Viewed

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" >
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -9,19 +9,78 @@
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.4.1/dist/css/bootstrap.min.css" rel="stylesheet" />
   <!-- Tailwind CSS CDN -->
   <script src="https://cdn.tailwindcss.com"></script>
   <style>
     body {
-      background: linear-gradient(135deg, #fff8f0, #ffe8cc);
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     }
-    /* Smooth input focus ring */
     input:focus, select:focus, textarea:focus {
       outline: none !important;
-      box-shadow: 0 0 8px rgba(230, 126, 34, 0.6);
       border-color: #e67e22 !important;
-      transition: box-shadow 0.3s ease;
     }
     /* Placeholder styling */
@@ -30,48 +89,144 @@
       opacity: 0.7;
     }
-    /* Button hover transition */
     .btn-warning:hover {
-      background-color: #e76f20 !important;
-      box-shadow: 0 4px 15px rgba(231, 111, 32, 0.5);
     }
-    /* Card shadow on hover */
     .card:hover {
-      box-shadow: 0 15px 30px rgba(230, 126, 34, 0.2);
-      transition: box-shadow 0.3s ease;
     }
   </style>
 </head>
 <body>
   <main class="min-vh-100 d-flex align-items-center justify-content-center p-4">
-    <div class="card shadow rounded-4 p-5 w-100" style="max-width: 540px; background:#fff9f1;">
-      <h1 class="text-center text-4xl font-extrabold mb-5 text-orange-600">Indian Food Flavor Profile Prediction</h1>
-      <form method="post" class="needs-validation" novalidate>
         <!-- Ingredients -->
-        <div class="mb-4">
-          <label for="ingredients" class="form-label fw-semibold fs-6 text-secondary">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>
           <div class="invalid-feedback">Please enter ingredients.</div>
         </div>
         <!-- Diet -->
-        <div class="mb-4">
-          <label for="diet" class="form-label fw-semibold fs-6 text-secondary">Diet:</label>
           <select id="diet" name="diet" required class="form-select rounded-3 border-2 border-warning">
             <option value="" disabled selected>Select diet</option>
             <option value="vegetarian">Vegetarian</option>
             <option value="non vegetarian">Non Vegetarian</option>
           </select>
           <div class="invalid-feedback">Please select a diet.</div>
         </div>
         <!-- Course -->
-        <div class="mb-4">
-          <label for="course" class="form-label fw-semibold fs-6 text-secondary">Course:</label>
           <select id="course" name="course" required class="form-select rounded-3 border-2 border-warning">
             <option value="" disabled selected>Select course</option>
             <option value="dessert">Dessert</option>
@@ -79,12 +234,15 @@
             <option value="starter">Starter</option>
             <option value="snack">Snack</option>
           </select>
           <div class="invalid-feedback">Please select a course.</div>
         </div>
         <!-- Region -->
-        <div class="mb-4">
-          <label for="region" class="form-label fw-semibold fs-6 text-secondary">Region:</label>
           <select id="region" name="region" required class="form-select rounded-3 border-2 border-warning">
             <option value="" disabled selected>Select region</option>
             <option value="East">East</option>
@@ -92,29 +250,42 @@
             <option value="North">North</option>
             <option value="South">South</option>
           </select>
           <div class="invalid-feedback">Please select a region.</div>
         </div>
         <!-- Prep & Cook Time -->
         <div class="row mb-4 g-3">
           <div class="col-6">
-            <label for="prep_time" class="form-label fw-semibold fs-6 text-secondary">Preparation Time (minutes):</label>
-            <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" />
             <div class="invalid-feedback">Please enter preparation time.</div>
           </div>
           <div class="col-6">
-            <label for="cook_time" class="form-label fw-semibold fs-6 text-secondary">Cook Time (minutes):</label>
-            <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" />
             <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">Predict Flavor Profile</button>
       </form>
       {% if prediction %}
-      <div class="mt-5 p-4 rounded-3 bg-orange-50 border-l-4 border-warning text-warning fs-5 text-center shadow-sm fw-semibold">
-        Predicted Flavor Profile: {{ prediction }}
       </div>
       {% endif %}
     </div>
@@ -133,11 +304,23 @@
           if (!form.checkValidity()) {
             event.preventDefault();
             event.stopPropagation();
           }
           form.classList.add('was-validated');
         }, false);
       });
     })();
   </script>
 </body>
 </html>

 <!DOCTYPE html>
+<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.4.1/dist/css/bootstrap.min.css" rel="stylesheet" />
   <!-- Tailwind CSS CDN -->
   <script src="https://cdn.tailwindcss.com"></script>
+  <!-- Font Awesome for Icons -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
+  <!-- Animate.css for Animations -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
   <style>
     body {
+      background: linear-gradient(135deg, #fff8f0, #ffe8cc, #ffddb5);
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+      overflow-x: hidden;
+    }
+    /* Animated background particles (subtle) */
+    body::before {
+      content: '';
+      position: fixed;
+      top: 0;
+      left: 0;
+      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);
+      background-repeat: repeat;
+      background-size: 200px 100px;
+      animation: sparkle 20s linear infinite;
+      pointer-events: none;
+      z-index: -1;
+      opacity: 0.3;
+    }
+    @keyframes sparkle {
+      0% { transform: translateY(0px) rotate(0deg); }
+      100% { transform: translateY(-100px) rotate(360deg); }
     }
+    /* Card entrance animation */
+    .main-card {
+      animation: fadeInUp 0.8s ease-out;
+    }
+    @keyframes fadeInUp {
+      from {
+        opacity: 0;
+        transform: translateY(30px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+    /* Smooth input focus ring with scale */
     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;
       border-color: #e67e22 !important;
+      transform: scale(1.02);
+      transition: all 0.3s ease;
+    }
+    /* Icon shake on focus for fun */
+    .input-group:focus-within i {
+      animation: shake 0.5s ease-in-out;
+    }
+    @keyframes shake {
+      0%, 100% { transform: translateX(0); }
+      25% { transform: translateX(-5px); }
+      75% { transform: translateX(5px); }
     }
     /* Placeholder styling */
       opacity: 0.7;
     }
+    /* Enhanced button hover with pulse */
+    .btn-warning {
+      background: linear-gradient(45deg, #f39c12, #e67e22);
+      border: none;
+      transition: all 0.3s ease;
+      position: relative;
+      overflow: hidden;
+    }
+    .btn-warning::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: -100%;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+      transition: left 0.5s;
+    }
+    .btn-warning:hover::before {
+      left: 100%;
+    }
     .btn-warning:hover {
+      background: linear-gradient(45deg, #e67e22, #d68910) !important;
+      box-shadow: 0 8px 25px rgba(231, 111, 32, 0.4);
+      transform: translateY(-2px);
     }
+    /* Card hover enhancement */
     .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 {
+      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);
+    }
+    @keyframes slideInRight {
+      from {
+        opacity: 0;
+        transform: translateX(100%);
+      }
+      to {
+        opacity: 1;
+        transform: translateX(0);
+      }
+    }
+    /* Input group styling for icons */
+    .input-group {
+      position: relative;
+    }
+    .input-group i {
+      position: absolute;
+      left: 12px;
+      top: 50%;
+      transform: translateY(-50%);
+      color: #e67e22;
+      z-index: 10;
+      transition: color 0.3s ease;
+    }
+    .input-group input, .input-group select, .input-group textarea {
+      padding-left: 40px;
+    }
+    /* 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;
+      }
+      h1 {
+        font-size: 1.8rem !important;
+      }
     }
   </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);">
+      <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>
+      <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):
+          </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>
           <div class="invalid-feedback">Please enter ingredients.</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:
+          </label>
           <select id="diet" name="diet" required class="form-select rounded-3 border-2 border-warning">
             <option value="" disabled selected>Select diet</option>
             <option value="vegetarian">Vegetarian</option>
             <option value="non vegetarian">Non Vegetarian</option>
           </select>
+          <i class="fas fa-seedling"></i>
           <div class="invalid-feedback">Please select a diet.</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:
+          </label>
           <select id="course" name="course" required class="form-select rounded-3 border-2 border-warning">
             <option value="" disabled selected>Select course</option>
             <option value="dessert">Dessert</option>
             <option value="starter">Starter</option>
             <option value="snack">Snack</option>
           </select>
+          <i class="fas fa-utensil-spoon"></i>
           <div class="invalid-feedback">Please select a course.</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:
+          </label>
           <select id="region" name="region" required class="form-select rounded-3 border-2 border-warning">
             <option value="" disabled selected>Select region</option>
             <option value="East">East</option>
             <option value="North">North</option>
             <option value="South">South</option>
           </select>
+          <i class="fas fa-globe-americas"></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">
+            <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"></i>
+            </div>
             <div class="invalid-feedback">Please enter preparation time.</div>
           </div>
           <div class="col-6">
+            <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"></i>
+            </div>
             <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">
+          <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">
+        <i class="fas fa-star-and-crescent me-2"></i>Predicted Flavor Profile: {{ prediction }}
       </div>
       {% endif %}
     </div>
           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>