Spaces:
Running
Running
| <html><head><base href="https://websim.ai/culinary-creator"><title>Culinary Creator: Your Personal Recipe Wizard</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| @keyframes float { | |
| 0% { transform: translateY(0px) rotate(0deg); } | |
| 50% { transform: translateY(-10px) rotate(5deg); } | |
| 100% { transform: translateY(0px) rotate(0deg); } | |
| } | |
| .float-animation { | |
| animation: float 4s ease-in-out infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-r from-green-400 to-blue-500 text-white min-h-screen font-sans"> | |
| <header class="py-6 relative"> | |
| <div class="container mx-auto px-4"> | |
| <h1 class="text-4xl font-bold text-center">Culinary Creator</h1> | |
| <p class="mt-2 text-center text-green-100">Your Personal Recipe Wizard</p> | |
| </div> | |
| </header> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div class="bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg p-6 mb-8"> | |
| <h2 class="text-2xl font-semibold mb-4">What's in Your Kitchen?</h2> | |
| <form id="recipe-form" class="space-y-4"> | |
| <div> | |
| <label for="ingredients" class="block text-sm font-medium text-green-100">Available Ingredients</label> | |
| <textarea id="ingredients" rows="3" class="mt-1 block w-full px-3 py-2 bg-green-600 border border-green-400 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 text-white" placeholder="Enter ingredients separated by commas (e.g., chicken, rice, tomatoes)"></textarea> | |
| </div> | |
| <div> | |
| <label for="dietary-preferences" class="block text-sm font-medium text-green-100">Dietary Preferences</label> | |
| <select id="dietary-preferences" class="mt-1 block w-full px-3 py-2 bg-green-600 border border-green-400 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 text-white"> | |
| <option value="none">No specific preference</option> | |
| <option value="vegetarian">Vegetarian</option> | |
| <option value="vegan">Vegan</option> | |
| <option value="gluten-free">Gluten-Free</option> | |
| <option value="low-carb">Low-Carb</option> | |
| <option value="keto">Keto</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="cuisine" class="block text-sm font-medium text-green-100">Preferred Cuisine (Optional)</label> | |
| <input type="text" id="cuisine" class="mt-1 block w-full px-3 py-2 bg-green-600 border border-green-400 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 text-white" placeholder="e.g., Italian, Mexican, Asian"> | |
| </div> | |
| <div> | |
| <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-green-900 bg-green-300 hover:bg-green-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"> | |
| Create Recipe | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| <div id="recipe-container" class="bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg p-6 hidden"> | |
| <h2 class="text-2xl font-semibold mb-4">Your Custom Recipe</h2> | |
| <div id="recipe-content" class="space-y-4"> | |
| <!-- Recipe will be inserted here --> | |
| </div> | |
| </div> | |
| </main> | |
| <div class="fixed bottom-4 right-4 w-24 h-24"> | |
| <img src="https://websim.ai/culinary-creator/chef-hat.png" alt="Chef hat" class="w-full h-full object-contain float-animation"> | |
| </div> | |
| <script> | |
| document.getElementById('recipe-form').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const ingredients = document.getElementById('ingredients').value; | |
| const dietaryPreferences = document.getElementById('dietary-preferences').value; | |
| const cuisine = document.getElementById('cuisine').value; | |
| if (!ingredients) { | |
| alert('Please enter some ingredients.'); | |
| return; | |
| } | |
| generateRecipe(ingredients, dietaryPreferences, cuisine); | |
| }); | |
| function generateRecipe(ingredients, dietaryPreferences, cuisine) { | |
| // Show loading state | |
| const recipeContainer = document.getElementById('recipe-container'); | |
| recipeContainer.classList.remove('hidden'); | |
| const recipeContent = document.getElementById('recipe-content'); | |
| recipeContent.innerHTML = '<p>Cooking up a delicious recipe...</p>'; | |
| // Simulate API call with setTimeout | |
| setTimeout(() => { | |
| const recipe = createRecipe(ingredients, dietaryPreferences, cuisine); | |
| recipeContent.innerHTML = ` | |
| <h3 class="text-xl font-semibold">${recipe.name}</h3> | |
| <p class="italic">${recipe.description}</p> | |
| <h4 class="font-semibold mt-4">Ingredients:</h4> | |
| <ul class="list-disc list-inside"> | |
| ${recipe.ingredients.map(ingredient => `<li>${ingredient}</li>`).join('')} | |
| </ul> | |
| <h4 class="font-semibold mt-4">Instructions:</h4> | |
| <ol class="list-decimal list-inside"> | |
| ${recipe.instructions.map(instruction => `<li>${instruction}</li>`).join('')} | |
| </ol> | |
| `; | |
| }, 2000); | |
| } | |
| function createRecipe(ingredients, dietaryPreferences, cuisine) { | |
| // This is a simplified recipe generation. In a real application, this would be much more complex and context-aware. | |
| const ingredientList = ingredients.split(',').map(i => i.trim()); | |
| let recipeName = "Delicious " + ingredientList[0].charAt(0).toUpperCase() + ingredientList[0].slice(1) + " Dish"; | |
| if (cuisine) { | |
| recipeName = cuisine.charAt(0).toUpperCase() + cuisine.slice(1) + "-style " + recipeName; | |
| } | |
| let description = `A ${dietaryPreferences !== 'none' ? dietaryPreferences + ' ' : ''}recipe featuring ${ingredientList.join(', ')}.`; | |
| let recipeIngredients = ingredientList.map(ingredient => `1 cup ${ingredient}`); | |
| recipeIngredients.push("Salt and pepper to taste"); | |
| recipeIngredients.push("2 tablespoons olive oil"); | |
| let instructions = [ | |
| "Prepare all ingredients by washing and chopping as needed.", | |
| `Heat olive oil in a large pan over medium heat.`, | |
| `Add ${ingredientList[0]} to the pan and cook for 5 minutes.`, | |
| `Add the remaining ingredients and stir well.`, | |
| "Cook for an additional 10-15 minutes, stirring occasionally.", | |
| "Season with salt and pepper to taste.", | |
| "Serve hot and enjoy your custom creation!" | |
| ]; | |
| return { | |
| name: recipeName, | |
| description: description, | |
| ingredients: recipeIngredients, | |
| instructions: instructions | |
| }; | |
| } | |
| </script> | |
| </body></html> |