completely redesign this website with beautful effects,animations, transitions and awesome look such that it should look tremendously amazing...and remove the footer section and #generator section...please make it really really amsazing...add cool loading and loading scollbar animations too...please make it really amazing 
"
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Recipe Master</title>
    <!-- Tailwind CSS CDN -->
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Pacifico&display=swap" rel="stylesheet">
    <!-- Font Awesome Icons -->
    <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
    <!-- Custom CSS -->
    <style>
        body {
            font-family: 'Montserrat', sans-serif;
            overflow-x: hidden;
            background-color: #f9fafb;
        }
        /* Hero Section */
        .hero {
            background-image: url('https://images.unsplash.com/photo-1516684669134-de6c33d3b55e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80');
            background-size: cover;
            background-position: center;
            height: 100vh;
            position: relative;
        }
        .hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.6);
        }
        .hero-content {
            position: relative;
            z-index: 1;
        }
        .fade-in {
            opacity: 0;
            animation: fadeIn ease-in 1;
            animation-fill-mode: forwards;
            animation-duration: 1s;
        }
        .fade-in-delay-1 {
            animation-delay: 0.5s;
        }
        .fade-in-delay-2 {
            animation-delay: 1s;
        }
        @keyframes fadeIn {
            to {
                opacity: 1;
            }
        }
        /* Card Hover Effect */
        .card:hover {
            transform: translateY(-10px);
            box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.1);
        }
        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-thumb {
            background-color: #ff6b6b;
            border-radius: 4px;
        }
        /* Loader */
        .loader {
            border: 8px solid #f3f3f3;
            border-top: 8px solid #ff6b6b;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            animation: spin 1s linear infinite;
            margin: 20px auto;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        /* Modal */
        .modal {
            transition: opacity 0.25s ease;
        }
    </style>
</head>
<body>

    <!-- Hero Section -->
    <header class="hero flex items-center justify-center text-white">
        <div class="hero-content text-center">
            <h1 class="text-5xl md:text-7xl font-bold mb-4 fade-in" style="font-family: 'Pacifico', cursive;">
                Recipe <span class="text-red-400">Master</span>
            </h1>
            <p class="text-xl md:text-2xl mb-8 fade-in-delay-1">
                Discover recipes tailored to your ingredients
            </p>
            <a href="#generator" class="bg-red-500 hover:bg-red-600 px-8 py-4 rounded-full text-white font-semibold text-lg transition duration-300 inline-block fade-in-delay-2">
                Get Started
            </a>
        </div>
    </header>

    <!-- Main Content -->
    <section id="generator" class="py-16">
        <div class="container mx-auto px-6">
            <div class="bg-white shadow-2xl rounded-2xl p-10 max-w-3xl mx-auto">
                <h2 class="text-4xl font-bold text-center mb-10 text-gray-800">
                    <i class="fas fa-utensils mr-2 text-red-500"></i> Generate Recipes
                </h2>

                <!-- Input Fields -->
                <div class="mb-8">
                    <label class="block text-gray-700 font-semibold mb-3">Enter Ingredients</label>
                    <input type="text" id="ingredients" placeholder="e.g., chicken, tomatoes, pasta" 
                        class="w-full px-5 py-4 border-2 border-gray-300 rounded-lg focus:outline-none focus:border-red-500 transition duration-300">
                </div>

                <div class="mb-8">
                    <label class="block text-gray-700 font-semibold mb-3">Or Upload an Image</label>
                    <input type="file" id="image-upload" accept="image/*" 
                        class="w-full px-5 py-4 border-2 border-gray-300 rounded-lg focus:outline-none focus:border-red-500 transition duration-300">
                </div>

                <!-- Generate Button -->
                <button onclick="generateRecipes()" 
                    class="w-full bg-gradient-to-r from-red-500 to-orange-400 text-white py-4 rounded-lg font-bold text-xl shadow-lg hover:shadow-xl transition duration-300 transform hover:scale-105">
                    Generate Recipes
                </button>
            </div>

            <!-- Recipe List -->
            <div id="recipe-list" class="mt-16 grid gap-8 grid-cols-1 md:grid-cols-2 lg:grid-cols-3"></div>

            <!-- Generate More Button -->
            <div id="generate-more-container" class="mt-12 hidden text-center">
                <button onclick="generateMoreRecipes()" 
                    class="bg-green-500 text-white py-4 px-8 rounded-full font-bold text-xl shadow-lg hover:bg-green-600 transition duration-300 transform hover:scale-105">
                    Generate More Recipes
                </button>
            </div>
        </div>
    </section>

    <!-- Recipe Details Modal -->
    <div id="recipe-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden flex items-center justify-center z-50">
        <div class="bg-white rounded-2xl shadow-2xl overflow-y-auto max-h-full w-11/12 md:w-3/4 lg:w-2/3">
            <div class="p-8" id="recipe-details"></div>
            <div class="text-right p-6">
                <button onclick="closeModal()" class="bg-red-500 text-white px-6 py-3 rounded-full font-bold hover:bg-red-600 transition duration-300">
                    Close
                </button>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer class="bg-gray-800 text-white py-8">
        <div class="container mx-auto px-6 text-center">
            <p>&copy; 2023 Recipe Master. All rights reserved.</p>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
      let currentIngredients = '';
let generatedRecipes = [];

async function generateRecipes(isMoreRecipes = false) {
   const ingredientsInput = document.getElementById('ingredients');
   const imageUpload = document.getElementById('image-upload');
   const recipeList = document.getElementById('recipe-list');
   const generateMoreContainer = document.getElementById('generate-more-container');

   if (!isMoreRecipes) {
       recipeList.innerHTML = '';
       generatedRecipes = [];
   }

   recipeList.innerHTML = '<div class="loader"></div>';
   generateMoreContainer.classList.add('hidden');

   const formData = new FormData();
   currentIngredients = ingredientsInput.value;

   if (currentIngredients) {
       formData.append('ingredients', currentIngredients);
   }

   if (imageUpload.files.length > 0) {
       formData.append('image', imageUpload.files[0]);
   }

   if (isMoreRecipes && generatedRecipes.length > 0) {
       generatedRecipes.forEach(recipe => {
           formData.append('previous_recipes[]', recipe);
       });
   }

   try {
       const response = await fetch('/generate_recipes', {
           method: 'POST',
           body: formData
       });

       const recipes = await response.json();

       if (recipes.error) {
           recipeList.innerHTML = `<p class="text-red-500 text-center mt-4">${recipes.error}</p>`;
           return;
       }

       generatedRecipes = generatedRecipes.concat(recipes);
       recipeList.innerHTML = '';

       recipes.forEach(recipe => {
           const card = document.createElement('div');
           card.className = 'bg-white rounded-xl shadow-md p-6 card transform transition-transform duration-300 cursor-pointer';
           card.innerHTML = `
               <h3 class="text-2xl font-bold mb-3 text-gray-800">${recipe}</h3>
               <p class="text-gray-600">Click to view details</p>
           `;
           card.onclick = () => getRecipeDetails(recipe);
           recipeList.appendChild(card);
       });

       generateMoreContainer.classList.remove('hidden');
   } catch (error) {
       console.error('Error:', error);
       recipeList.innerHTML = `<p class="text-red-500 text-center mt-4">Failed to generate recipes.</p>`;
   }
}

function generateMoreRecipes() {
   generateRecipes(true);
}

async function getRecipeDetails(recipeName) {
   const recipeModal = document.getElementById('recipe-modal');
   const recipeDetails = document.getElementById('recipe-details');
   const imageUpload = document.getElementById('image-upload');

   recipeDetails.innerHTML = '<div class="loader"></div>';
   recipeModal.classList.remove('hidden');

   const formData = new FormData();
   formData.append('recipe_name', recipeName);
   
   if (currentIngredients) {
       formData.append('ingredients', currentIngredients);
   }

   if (imageUpload.files.length > 0) {
       formData.append('image', imageUpload.files[0]);
   }

   try {
       const response = await fetch('/get_recipe_details', {
           method: 'POST',
           body: formData
       });

       const details = await response.json();

       if (details.error) {
           recipeDetails.innerHTML = `
               <p class="text-red-500 text-center mt-4">
                   ${details.error} 
                   ${details.ingredients ? `<br>Ingredients detected: ${details.ingredients}` : ''}
               </p>
           `;
           return;
       }

       recipeDetails.innerHTML = `
           <h2 class="text-3xl font-bold mb-6 text-gray-800">${details.name}</h2>
           <h3 class="text-2xl font-semibold mb-4 text-red-500">Ingredients</h3>
           <ul class="list-disc list-inside mb-6 space-y-2">
               ${details.ingredients.map(ing => `<li>${ing}</li>`).join('')}
           </ul>
           <h3 class="text-2xl font-semibold mb-4 text-red-500">Instructions</h3>
           <ol class="list-decimal list-inside space-y-2">
               ${details.instructions.map(step => `<li>${step}</li>`).join('')}
           </ol>
           <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8">
               <div>
                   <h3 class="text-xl font-semibold mb-3 text-green-600">Who Can Eat</h3>
                   <ul class="list-disc list-inside space-y-1">
                       ${details.who_can_eat.map(group => `<li>${group}</li>`).join('')}
                   </ul>
               </div>
               <div>
                   <h3 class="text-xl font-semibold mb-3 text-red-600">Who Should Avoid</h3>
                   <ul class="list-disc list-inside space-y-1">
                       ${details.who_should_avoid.map(group => `<li>${group}</li>`).join('')}
                   </ul>
               </div>
           </div>
           ${details.additional_info ? `
               <div class="mt-6">
                   <h3 class="text-xl font-semibold mb-3 text-gray-800">Additional Info</h3>
                   <p>${details.additional_info}</p>
               </div>
           ` : ''}
       `;
   } catch (error) {
       console.error('Error:', error);
       recipeDetails.innerHTML = `<p class="text-red-500 text-center mt-4">Failed to retrieve recipe details.</p>`;
   }
}

function closeModal() {
   const recipeModal = document.getElementById('recipe-modal');
   recipeModal.classList.add('hidden');
}
    </script>

</body>
</html>
"