Spaces:

dilpreet77
/

model

Sleeping

App Files Files Community

dilpreet77 commited on Sep 22, 2025

Commit

ca71928

verified ·

1 Parent(s): 5a772dc

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +584 -428

templates/index.html CHANGED Viewed

@@ -1,439 +1,595 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>Flavor Profile Prediction</title>
-  <!-- Bootstrap CSS -->
-  <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, #ffdab9);
-      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-      overflow-x: hidden;
-      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 */
-    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 {
-      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.input-icon {
-      animation: shake 0.5s ease-in-out;
-    }
-    @keyframes shake {
-      0%, 100% { transform: translateX(0); }
-      25% { transform: translateX(-5px); }
-      75% { transform: translateX(5px); }
-    }
-    /* Placeholder styling */
-    ::placeholder {
-      color: #d35400;
-      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);
-      }
-    }
-    /* 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;
-      }
-      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>
-  <!-- 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>
-      <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 input-icon"></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 input-icon"></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="main course">Main Course</option>
-            <option value="starter">Starter</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>
-        <!-- 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="West">West</option>
-            <option value="North">North</option>
-            <option value="South">South</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">
-            <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>
-            <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 input-icon"></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>
-  </main>
-  <!-- Bootstrap JS Bundle -->
-  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.4.1

 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>🍛 Flavor Profile Prediction - Your Culinary Journey Awaits!</title>
+    <!-- Bootstrap CSS -->
+    <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>
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
+        body {
+            background: linear-gradient(135deg, #fff8f0, #ffe8cc, #ffddb5, #ffdab9);
+            font-family: 'Poppins', sans-serif;
+            overflow-x: hidden;
+            position: relative;
+            min-height: 100vh;
+        }
+        /* Enhanced animated background with foody elements */
+        body::before {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-image:
+                /* Floating spices */
+                radial-gradient(3px 3px at 20px 30px, #8B4513, transparent),
+                radial-gradient(2px 2px at 80px 50px, #FF6347, transparent),
+                radial-gradient(4px 4px at 150px 20px, #D2691E, transparent),
+                radial-gradient(2px 2px at 200px 60px, #FFD700, transparent),
+                /* Steam wisps */
+                radial-gradient(1px 20px at 60px 80px, rgba(255, 255, 255, 0.6), transparent),
+                radial-gradient(1px 15px at 180px 100px, rgba(255, 255, 255, 0.5), transparent),
+                /* Curry leaves */
+                radial-gradient(ellipse 8px 4px at 120px 40px, #228B22, transparent),
+                radial-gradient(ellipse 6px 3px at 250px 70px, #32CD32, transparent);
+            background-repeat: repeat;
+            background-size: 300px 200px;
+            animation: floatSpices 30s linear infinite;
+            pointer-events: none;
+            z-index: -1;
+            opacity: 0.3;
+        }
+        /* Floating bubbles animation */
+        body::after {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-image:
+                radial-gradient(circle 8px at 40px 90%, rgba(255, 193, 7, 0.4), transparent),
+                radial-gradient(circle 5px at 100px 70%, rgba(255, 140, 0, 0.3), transparent),
+                radial-gradient(circle 6px at 160px 85%, rgba(255, 99, 71, 0.3), transparent),
+                radial-gradient(circle 4px at 220px 60%, rgba(50, 205, 50, 0.3), transparent);
+            background-repeat: repeat;
+            background-size: 280px 180px;
+            animation: bubbleUp 20s linear infinite;
+            pointer-events: none;
+            z-index: -1;
+            opacity: 0.5;
+        }
+        @keyframes floatSpices {
+            0% { transform: translateY(100vh) rotate(0deg); }
+            100% { transform: translateY(-100vh) rotate(360deg); }
+        }
+        @keyframes bubbleUp {
+            0% { transform: translateY(100vh) scale(0.5); }
+            50% { transform: translateY(50vh) scale(1); }
+            100% { transform: translateY(-10vh) scale(0.8); }
+        }
+        @keyframes pulse {
+            0%, 100% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+        }
+        @keyframes bounceIn {
+            0% {
+                opacity: 0;
+                transform: scale(0.3) translateY(-50px);
+            }
+            50% {
+                opacity: 1;
+                transform: scale(1.05) translateY(-25px);
+            }
+            70% {
+                transform: scale(0.9) translateY(0);
+            }
+            100% {
+                opacity: 1;
+                transform: scale(1) translateY(0);
+            }
+        }
+        @keyframes slideInUp {
+            0% {
+                opacity: 0;
+                transform: translateY(30px);
+            }
+            100% {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        @keyframes wiggle {
+            0%, 7% { transform: rotateZ(0); }
+            15% { transform: rotateZ(-15deg); }
+            20% { transform: rotateZ(10deg); }
+            25% { transform: rotateZ(-10deg); }
+            30% { transform: rotateZ(6deg); }
+            35% { transform: rotateZ(-4deg); }
+            40%, 100% { transform: rotateZ(0); }
+        }
+        .container-main {
+            animation: bounceIn 1s ease-out;
+            backdrop-filter: blur(10px);
+            background: rgba(255, 255, 255, 0.9);
+            border-radius: 20px;
+            box-shadow: 0 15px 35px rgba(0,0,0,0.1);
+            border: 1px solid rgba(255,255,255,0.2);
+        }
+        .header-title {
+            background: linear-gradient(135deg, #ff6b6b, #ffa500, #ff1744);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            animation: pulse 2s infinite;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
+        }
+        .emoji-chef {
+            font-size: 3rem;
+            animation: wiggle 3s infinite;
+            display: inline-block;
+        }
+        .card-enhanced {
+            transition: all 0.4s ease;
+            border-radius: 15px;
+            border: none;
+            box-shadow: 0 8px 25px rgba(0,0,0,0.1);
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(5px);
+            animation: slideInUp 0.8s ease-out;
+        }
+        .card-enhanced:hover {
+            transform: translateY(-10px) scale(1.02);
+            box-shadow: 0 15px 40px rgba(0,0,0,0.15);
+            background: rgba(255, 255, 255, 1);
+        }
+        .btn-predict {
+            background: linear-gradient(135deg, #ff6b6b, #ffa500);
+            border: none;
+            border-radius: 25px;
+            padding: 12px 30px;
+            color: white;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+        .btn-predict::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
+            transition: left 0.5s;
+        }
+        .btn-predict:hover::before {
+            left: 100%;
+        }
+        .btn-predict:hover {
+            transform: scale(1.05);
+            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
+        }
+        .form-control-custom {
+            border-radius: 15px;
+            border: 2px solid #ffe8cc;
+            transition: all 0.3s ease;
+            background: rgba(255, 255, 255, 0.8);
+        }
+        .form-control-custom:focus {
+            border-color: #ff6b6b;
+            box-shadow: 0 0 0 0.2rem rgba(255, 107, 107, 0.25);
+            transform: scale(1.02);
+        }
+        .ingredient-tag {
+            background: linear-gradient(135deg, #ffeaa7, #fdcb6e);
+            color: #2d3436;
+            padding: 8px 15px;
+            border-radius: 20px;
+            margin: 5px;
+            display: inline-block;
+            font-weight: 500;
+            animation: slideInUp 0.5s ease-out;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 15px rgba(253, 203, 110, 0.4);
+        }
+        .ingredient-tag:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 8px 20px rgba(253, 203, 110, 0.6);
+        }
+        .result-card {
+            background: linear-gradient(135deg, #74b9ff, #0984e3);
+            color: white;
+            border-radius: 15px;
+            animation: bounceIn 1s ease-out;
+            box-shadow: 0 10px 30px rgba(116, 185, 255, 0.4);
+        }
+        .loading-spinner {
+            border: 4px solid #f3f3f3;
+            border-top: 4px solid #ff6b6b;
+            border-radius: 50%;
+            width: 50px;
+            height: 50px;
+            animation: spin 1s linear infinite;
+            margin: 20px auto;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .welcome-message {
+            background: linear-gradient(135deg, #fd79a8, #fdcb6e);
+            color: white;
+            padding: 20px;
+            border-radius: 15px;
+            animation: slideInUp 1.2s ease-out;
+            box-shadow: 0 10px 30px rgba(253, 121, 168, 0.3);
+            margin-bottom: 30px;
+        }
+        .feature-icon {
+            font-size: 2.5rem;
+            color: #ff6b6b;
+            animation: pulse 2s infinite;
+            margin-bottom: 15px;
+        }
+        .floating-element {
+            position: absolute;
+            animation: float 6s ease-in-out infinite;
+        }
+        @keyframes float {
+            0%, 100% { transform: translateY(0px); }
+            50% { transform: translateY(-20px); }
+        }
+        .spice-icon-1 {
+            top: 10%;
+            right: 10%;
+            animation-delay: 0s;
+        }
+        .spice-icon-2 {
+            top: 20%;
+            left: 5%;
+            animation-delay: 2s;
+        }
+        .spice-icon-3 {
+            bottom: 15%;
+            right: 5%;
+            animation-delay: 4s;
+        }
+    </style>
 </head>
 <body>
+    <!-- Floating decorative elements -->
+    <div class="floating-element spice-icon-1">🌶️</div>
+    <div class="floating-element spice-icon-2">🧄</div>
+    <div class="floating-element spice-icon-3">🌿</div>
+    <div class="container my-5">
+        <div class="container-main p-4">
+            <!-- Welcome Header -->
+            <div class="welcome-message text-center">
+                <div class="emoji-chef">👨‍🍳</div>
+                <h1 class="header-title display-4 fw-bold mb-3">
+                    Welcome to Your Flavor Adventure!
+                </h1>
+                <p class="lead mb-0">
+                    <i class="fas fa-sparkles me-2"></i>
+                    Discover the perfect blend of spices and ingredients for your culinary masterpiece!
+                    <i class="fas fa-sparkles ms-2"></i>
+                </p>
+            </div>
+            <!-- Main Content -->
+            <div class="row">
+                <!-- Input Section -->
+                <div class="col-md-6 mb-4">
+                    <div class="card card-enhanced h-100">
+                        <div class="card-header bg-gradient text-center py-3" style="background: linear-gradient(135deg, #a8e6cf, #7fcdcd);">
+                            <div class="feature-icon">🥘</div>
+                            <h3 class="mb-0 text-white fw-bold">Tell Us About Your Dish</h3>
+                        </div>
+                        <div class="card-body p-4">
+                            <form id="flavorForm">
+                                <div class="mb-4">
+                                    <label for="ingredients" class="form-label fw-semibold">
+                                        <i class="fas fa-carrot me-2 text-success"></i>
+                                        What ingredients are you using?
+                                    </label>
+                                    <textarea
+                                        class="form-control form-control-custom"
+                                        id="ingredients"
+                                        rows="4"
+                                        placeholder="e.g., tomatoes, onions, garlic, cumin, coriander, chicken...">
+                                    </textarea>
+                                    <small class="form-text text-muted mt-2">
+                                        <i class="fas fa-info-circle me-1"></i>
+                                        List all your ingredients separated by commas
+                                    </small>
+                                </div>
+                                <div class="mb-4">
+                                    <label for="cuisine" class="form-label fw-semibold">
+                                        <i class="fas fa-globe me-2 text-primary"></i>
+                                        What cuisine style are you aiming for?
+                                    </label>
+                                    <select class="form-control form-control-custom" id="cuisine">
+                                        <option value="">Choose a cuisine...</option>
+                                        <option value="indian">🇮🇳 Indian</option>
+                                        <option value="italian">🇮🇹 Italian</option>
+                                        <option value="mexican">🇲🇽 Mexican</option>
+                                        <option value="chinese">🇨🇳 Chinese</option>
+                                        <option value="thai">🇹🇭 Thai</option>
+                                        <option value="mediterranean">🌊 Mediterranean</option>
+                                        <option value="american">🇺🇸 American</option>
+                                        <option value="french">🇫🇷 French</option>
+                                    </select>
+                                </div>
+                                <div class="text-center">
+                                    <button type="submit" class="btn btn-predict btn-lg">
+                                        <i class="fas fa-magic me-2"></i>
+                                        Predict My Flavor Profile!
+                                        <i class="fas fa-rocket ms-2"></i>
+                                    </button>
+                                </div>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+                <!-- Results Section -->
+                <div class="col-md-6 mb-4">
+                    <div class="card card-enhanced h-100">
+                        <div class="card-header bg-gradient text-center py-3" style="background: linear-gradient(135deg, #ffecd2, #fcb69f);">
+                            <div class="feature-icon">✨</div>
+                            <h3 class="mb-0 text-white fw-bold">Your Flavor Profile</h3>
+                        </div>
+                        <div class="card-body p-4" id="resultsSection">
+                            <div class="text-center text-muted py-5">
+                                <i class="fas fa-utensils fa-3x mb-3 opacity-50"></i>
+                                <h5>Ready to discover your perfect flavor combination?</h5>
+                                <p class="mb-0">Fill in your ingredients and cuisine preference, then click the predict button!</p>
+                                <div class="mt-4">
+                                    <div class="ingredient-tag">Sweet 🍯</div>
+                                    <div class="ingredient-tag">Spicy 🌶️</div>
+                                    <div class="ingredient-tag">Savory 🧂</div>
+                                    <div class="ingredient-tag">Aromatic 🌿</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
+            <!-- Features Section -->
+            <div class="row mt-5">
+                <div class="col-md-4 mb-3">
+                    <div class="card card-enhanced text-center p-4">
+                        <div class="feature-icon">🎯</div>
+                        <h5 class="fw-bold">Precise Predictions</h5>
+                        <p class="text-muted mb-0">AI-powered analysis of your ingredients for spot-on flavor profiles</p>
+                    </div>
+                </div>
+                <div class="col-md-4 mb-3">
+                    <div class="card card-enhanced text-center p-4">
+                        <div class="feature-icon">🌍</div>
+                        <h5 class="fw-bold">Global Cuisines</h5>
+                        <p class="text-muted mb-0">Explore flavors from around the world with cultural authenticity</p>
+                    </div>
+                </div>
+                <div class="col-md-4 mb-3">
+                    <div class="card card-enhanced text-center p-4">
+                        <div class="feature-icon">💡</div>
+                        <h5 class="fw-bold">Smart Suggestions</h5>
+                        <p class="text-muted mb-0">Get personalized tips to enhance your cooking experience</p>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.4.1/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+        // Enhanced form submission with animations
+        document.getElementById('flavorForm').addEventListener('submit', function(e) {
+            e.preventDefault();
+            const ingredients = document.getElementById('ingredients').value;
+            const cuisine = document.getElementById('cuisine').value;
+            const resultsSection = document.getElementById('resultsSection');
+            if (!ingredients.trim()) {
+                alert('Please enter some ingredients! 🥕');
+                return;
+            }
+            // Show loading animation
+            resultsSection.innerHTML = `
+                <div class="text-center py-4">
+                    <div class="loading-spinner"></div>
+                    <h5 class="mt-3 text-primary">
+                        <i class="fas fa-magic me-2"></i>
+                        Analyzing your ingredients...
+                        <i class="fas fa-sparkles ms-2"></i>
+                    </h5>
+                    <p class="text-muted">Our AI chef is working on your flavor profile!</p>
+                </div>
+            `;
+            // Simulate API call with realistic delay
+            setTimeout(() => {
+                showResults(ingredients, cuisine);
+            }, 2000);
+        });
+        function showResults(ingredients, cuisine) {
+            const resultsSection = document.getElementById('resultsSection');
+            const ingredientList = ingredients.split(',').map(item => item.trim()).filter(item => item);
+            // Mock prediction logic (replace with actual API call)
+            const flavorProfiles = generateFlavorProfile(ingredientList, cuisine);
+            const suggestions = generateSuggestions(ingredientList, cuisine);
+            resultsSection.innerHTML = `
+                <div class="result-card p-4 mb-4">
+                    <h4 class="mb-3">
+                        <i class="fas fa-award me-2"></i>
+                        Your Flavor Profile Results!
+                    </h4>
+                    <div class="row">
+                        <div class="col-md-6">
+                            <h6><i class="fas fa-star me-2"></i>Primary Flavors:</h6>
+                            <div class="mb-3">
+                                ${flavorProfiles.primary.map(flavor =>
+                                    `<div class="ingredient-tag">${flavor}</div>`
+                                ).join('')}
+                            </div>
+                        </div>
+                        <div class="col-md-6">
+                            <h6><i class="fas fa-palette me-2"></i>Flavor Intensity:</h6>
+                            <div class="mb-3">
+                                ${flavorProfiles.intensity.map(intensity =>
+                                    `<div class="ingredient-tag">${intensity}</div>`
+                                ).join('')}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="card card-enhanced">
+                    <div class="card-body">
+                        <h5 class="card-title">
+                            <i class="fas fa-lightbulb me-2 text-warning"></i>
+                            Chef's Recommendations
+                        </h5>
+                        <div class="alert alert-info">
+                            <strong>Perfect for:</strong> ${suggestions.occasion}
+                        </div>
+                        <div class="alert alert-success">
+                            <strong>Pro Tip:</strong> ${suggestions.tip}
+                        </div>
+                        <div class="alert alert-warning">
+                            <strong>Missing ingredient:</strong> Consider adding ${suggestions.missing} for extra depth!
+                        </div>
+                    </div>
+                </div>
+            `;
+        }
+        function generateFlavorProfile(ingredients, cuisine) {
+            // Mock AI prediction logic
+            const spiceWords = ['cumin', 'coriander', 'chili', 'pepper', 'garam', 'masala'];
+            const hasSpices = ingredients.some(ing =>
+                spiceWords.some(spice => ing.toLowerCase().includes(spice))
+            );
+            const profiles = {
+                primary: hasSpices ?
+                    ['Spicy 🌶️', 'Aromatic 🌿', 'Warm 🔥'] :
+                    ['Mild 🌸', 'Fresh 🌱', 'Balanced ⚖️'],
+                intensity: cuisine === 'indian' ?
+                    ['Bold', 'Complex', 'Layered'] :
+                    ['Moderate', 'Harmonious', 'Refined']
+            };
+            return profiles;
+        }
+        function generateSuggestions(ingredients, cuisine) {
+            const cuisineMap = {
+                indian: {
+                    occasion: 'Comfort food dinners, family gatherings',
+                    tip: 'Toast your whole spices before grinding for deeper flavor',
+                    missing: 'fresh cilantro or mint'
+                },
+                italian: {
+                    occasion: 'Romantic dinners, casual lunches',
+                    tip: 'Use high-quality olive oil and fresh herbs',
+                    missing: 'fresh basil or parmesan cheese'
+                },
+                mexican: {
+                    occasion: 'Festive gatherings, outdoor parties',
+                    tip: 'Balance heat with lime juice and fresh herbs',
+                    missing: 'lime zest or fresh jalapeños'
+                }
+            };
+            return cuisineMap[cuisine] || {
+                occasion: 'Versatile dining occasions',
+                tip: 'Taste as you go and adjust seasonings gradually',
+                missing: 'fresh herbs for brightness'
+            };
+        }
+        // Add some interactive hover effects
+        document.querySelectorAll('.card-enhanced').forEach(card => {
+            card.addEventListener('mouseenter', function() {
+                this.style.animation = 'pulse 0.5s ease-in-out';
+            });
+            card.addEventListener('mouseleave', function() {
+                this.style.animation = '';
+            });
+        });
+        // Animate elements on scroll
+        const observerOptions = {
+            threshold: 0.1,
+            rootMargin: '0px 0px -50px 0px'
+        };
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.style.animation = 'slideInUp 0.6s ease-out';
+                }
+            });
+        }, observerOptions);
+        document.querySelectorAll('.card-enhanced').forEach(card => {
+            observer.observe(card);
+        });
+    </script>
+</body>
+</html>