Spaces:

dilpreet77
/

model

Sleeping

App Files Files Community

dilpreet77 commited on Sep 22, 2025

Commit

195e83f

verified ·

1 Parent(s): ca71928

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +428 -584

templates/index.html CHANGED Viewed

@@ -1,595 +1,439 @@
 <!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>

 <!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