make this website very much beautiful with beautiful animations,transitions, and effects with amazing ui and redesign it completely and add each and every enhancement to each element to make it amazing as you can ...please make it really really amazing for a cool recipe generator website 
"
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Recipe Generator</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <style>
        body { 
            background: linear-gradient(135deg, #f6f8f9 0%, #e5ebee 100%);
            font-family: 'Arial', sans-serif;
        }
    </style>
</head>
<body class="min-h-screen flex items-center justify-center">
    <div class="bg-white shadow-xl rounded-2xl p-8 w-full max-w-md">
        <h1 class="text-3xl font-bold text-center mb-6 text-blue-600">Recipe Generator</h1>
        
        <div class="mb-4">
            <label class="block text-gray-700 font-bold mb-2">Enter Ingredients</label>
            <input type="text" id="ingredients" placeholder="e.g., chicken, tomatoes, pasta" 
                class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
        </div>
        
        <div class="mb-4">
            <label class="block text-gray-700 font-bold mb-2">Or Upload Ingredient Image</label>
            <input type="file" id="image-upload" accept="image/*" 
                class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
        </div>
        
        <button onclick="generateRecipes()" 
            class="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition duration-300">
            Generate Recipes
        </button>
        
        <div id="recipe-list" class="mt-6 space-y-2"></div>
        
        <div id="generate-more-container" class="mt-4 hidden">
            <button onclick="generateMoreRecipes()" 
                class="w-full bg-green-600 text-white py-2 rounded-lg hover:bg-green-700 transition duration-300">
                Generate More Recipes
            </button>
        </div>
        
        <div id="recipe-details" class="mt-6 hidden bg-gray-50 p-4 rounded-lg"></div>
    </div>

    <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 recipeDetails = document.getElementById('recipe-details');
            const generateMoreContainer = document.getElementById('generate-more-container');
            
            recipeList.innerHTML = '';
            recipeDetails.innerHTML = '';
            recipeDetails.classList.add('hidden');
            generateMoreContainer.classList.add('hidden');
            
            const formData = new FormData();
            
            // Store current ingredients
            currentIngredients = ingredientsInput.value;
            
            if (currentIngredients) {
                formData.append('ingredients', currentIngredients);
            }
            
            if (imageUpload.files.length > 0) {
                formData.append('image', imageUpload.files[0]);
            }
            
            // If generating more recipes, pass previous recipes to avoid duplicates
            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">${recipes.error}</p>`;
                    return;
                }
                
                // Combine or replace recipes based on whether it's initial generation or more recipes
                if (!isMoreRecipes) {
                    generatedRecipes = recipes;
                } else {
                    generatedRecipes = generatedRecipes.concat(recipes);
                }
                
                // Clear previous list and regenerate
                recipeList.innerHTML = '';
                generatedRecipes.forEach(recipe => {
                    const recipeElement = document.createElement('div');
                    recipeElement.className = 'bg-blue-100 p-3 rounded-lg cursor-pointer hover:bg-blue-200';
                    recipeElement.textContent = recipe;
                    recipeElement.onclick = () => getRecipeDetails(recipe);
                    recipeList.appendChild(recipeElement);
                });
                
                // Show Generate More button
                generateMoreContainer.classList.remove('hidden');
            } catch (error) {
                console.error('Error:', error);
                recipeList.innerHTML = `<p class="text-red-500">Failed to generate recipes</p>`;
            }
        }

        function generateMoreRecipes() {
            generateRecipes(true);
        }
        
        async function getRecipeDetails(recipeName) {
            const recipeDetails = document.getElementById('recipe-details');
            recipeDetails.innerHTML = 'Loading recipe details...';
            recipeDetails.classList.remove('hidden');
            
            const formData = new FormData();
            formData.append('recipe_name', recipeName);
            formData.append('ingredients', currentIngredients);
            
            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">${details.error}</p>`;
                    return;
                }
                
                recipeDetails.innerHTML = `
                    <h2 class="text-2xl font-bold mb-4 text-blue-600">${details.name}</h2>
                    
                    <div class="mb-4">
                        <h3 class="font-bold text-lg mb-2">Ingredients</h3>
                        <ul class="list-disc list-inside">
                            ${details.ingredients.map(ing => `<li>${ing}</li>`).join('')}
                        </ul>
                    </div>
                    
                    <div class="mb-4">
                        <h3 class="font-bold text-lg mb-2">Instructions</h3>
                        <ol class="list-decimal list-inside">
                            ${details.instructions.map(step => `<li>${step}</li>`).join('')}
                        </ol>
                    </div>
                    
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <h3 class="font-bold text-lg mb-2">Who Can Eat</h3>
                            <ul class="list-disc list-inside">
                                ${details.who_can_eat.map(group => `<li>${group}</li>`).join('')}
                            </ul>
                        </div>
                        <div>
                            <h3 class="font-bold text-lg mb-2">Who Should Avoid</h3>
                            <ul class="list-disc list-inside">
                                ${details.who_should_avoid.map(group => `<li>${group}</li>`).join('')}
                            </ul>
                        </div>
                    </div>
                    
                    ${details.additional_info ? `
                        <div class="mt-4">
                            <h3 class="font-bold text-lg mb-2">Additional Info</h3>
                            <p>${details.additional_info}</p>
                        </div>
                    ` : ''}
                `;
            } catch (error) {
                console.error('Error:', error);
                recipeDetails.innerHTML = `<p class="text-red-500">Failed to retrieve recipe details</p>`;
            }
        }
    </script>
</body>
</html>
"