Spaces:

fibcon
/

savoryai-culinary-wizard

Running

App Files Files Community

savoryai-culinary-wizard / index.html

fibcon

Redesign my website

9ed4bff verified 6 months ago

raw

history blame contribute delete

18.2 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>SavoryAI - AI Recipe Generator</title>
	<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
	<script src="https://cdn.tailwindcss.com"></script>
	<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
	<script src="https://unpkg.com/feather-icons"></script>
	<style>
	@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
	body {
	font-family: 'Poppins', sans-serif;
	background-color: #f9f5f0;
	}
	.gradient-bg {
	background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
	}
	.recipe-card {
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(10px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	}
	.recipe-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
	}
	.ingredient-tag {
	background-color: #fff5f5;
	border: 1px solid #ffe0e0;
	}
	.equipment-btn {
	transition: all 0.2s ease;
	}
	.equipment-btn.active {
	background-color: #ff6b6b;
	color: white;
	}
	</style>
	</head>
	<body class="min-h-screen">
	<!-- Header -->
	<header class="gradient-bg text-white py-8 px-4 md:px-0">
	<div class="container mx-auto text-center">
	<h1 class="text-4xl md:text-5xl font-bold mb-4">SavoryAI Culinary Wizard</h1>
	<p class="text-xl md:text-2xl font-light">Create delicious recipes from your available ingredients using AI</p>
	<i data-feather="chef-hat" class="mx-auto mt-6 w-16 h-16"></i>
	</div>
	</header>

	<!-- Main Content -->
	<main class="container mx-auto px-4 py-12">
	<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
	<!-- Recipe Form -->
	<div class="recipe-card rounded-2xl p-8">
	<h2 class="text-2xl font-bold text-gray-800 mb-6">Recipe Preferences</h2>
	<p class="text-gray-600 mb-8">Tell us what you have and what you're craving</p>

	<form id="recipeForm">
	<!-- Ingredients -->
	<div class="mb-8">
	<label for="ingredients" class="block text-lg font-medium text-gray-700 mb-2">
	Available Ingredients <span class="text-red-500">*</span>
	</label>
	<div class="flex flex-wrap gap-2 mb-3" id="ingredientTags">
	<!-- Tags will be added here dynamically -->
	</div>
	<div class="relative">
	<input
	type="text"
	id="ingredients"
	placeholder="e.g. chicken, rice, tomatoes, garlic"
	class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-pink-300 focus:border-transparent"
	>
	<button
	type="button"
	id="addIngredient"
	class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-pink-100 text-pink-600 p-1 rounded-full hover:bg-pink-200 transition"
	>
	<i data-feather="plus" class="w-5 h-5"></i>
	</button>
	</div>
	<p class="text-sm text-gray-500 mt-1">Try ingredients like: chicken, rice, tomatoes, garlic</p>
	</div>

	<!-- Equipment -->
	<div class="mb-8">
	<label class="block text-lg font-medium text-gray-700 mb-2">
	Available Equipment
	</label>
	<div class="grid grid-cols-3 md:grid-cols-4 gap-3">
	<button type="button" class="equipment-btn py-2 px-3 rounded-lg border border-gray-200">
	Stovetop
	</button>
	<button type="button" class="equipment-btn py-2 px-3 rounded-lg border border-gray-200">
	Oven
	</button>
	<button type="button" class="equipment-btn py-2 px-3 rounded-lg border border-gray-200">
	Microwave
	</button>
	<button type="button" class="equipment-btn py-2 px-3 rounded-lg border border-gray-200">
	Air Fryer
	</button>
	<button type="button" class="equipment-btn py-2 px-3 rounded-lg border border-gray-200">
	Slow Cooker
	</button>
	<button type="button" class="equipment-btn py-2 px-3 rounded-lg border border-gray-200">
	Pressure Cooker
	</button>
	<button type="button" class="equipment-btn py-2 px-3 rounded-lg border border-gray-200">
	Grill
	</button>
	<button type="button" class="equipment-btn py-2 px-3 rounded-lg border border-gray-200">
	Blender
	</button>
	</div>
	</div>

	<!-- Cuisine Type -->
	<div class="mb-8">
	<label for="cuisineType" class="block text-lg font-medium text-gray-700 mb-2">
	Cuisine Type <span class="text-red-500">*</span>
	</label>
	<select
	id="cuisineType"
	class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-pink-300 focus:border-transparent"
	>
	<option value="">Select a cuisine</option>
	<option value="italian">Italian</option>
	<option value="mexican">Mexican</option>
	<option value="indian">Indian</option>
	<option value="chinese">Chinese</option>
	<option value="american">American</option>
	<option value="mediterranean">Mediterranean</option>
	<option value="thai">Thai</option>
	<option value="japanese">Japanese</option>
	</select>
	</div>

	<!-- Time Available -->
	<div class="mb-8">
	<label for="timeAvailable" class="block text-lg font-medium text-gray-700 mb-2">
	Time Available (minutes) <span class="text-red-500">*</span>
	</label>
	<input
	type="number"
	id="timeAvailable"
	min="5"
	placeholder="30"
	class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-pink-300 focus:border-transparent"
	>
	</div>

	<!-- Dietary Restrictions -->
	<div class="mb-8">
	<label for="dietaryRestrictions" class="block text-lg font-medium text-gray-700 mb-2">
	Dietary Restrictions (Optional)
	</label>
	<div class="flex flex-wrap gap-3">
	<div class="flex items-center">
	<input type="checkbox" id="vegetarian" class="mr-2">
	<label for="vegetarian">Vegetarian</label>
	</div>
	<div class="flex items-center">
	<input type="checkbox" id="vegan" class="mr-2">
	<label for="vegan">Vegan</label>
	</div>
	<div class="flex items-center">
	<input type="checkbox" id="glutenFree" class="mr-2">
	<label for="glutenFree">Gluten-Free</label>
	</div>
	<div class="flex items-center">
	<input type="checkbox" id="dairyFree" class="mr-2">
	<label for="dairyFree">Dairy-Free</label>
	</div>
	<div class="flex items-center">
	<input type="checkbox" id="nutFree" class="mr-2">
	<label for="nutFree">Nut-Free</label>
	</div>
	</div>
	</div>

	<!-- Generate Button -->
	<button
	type="submit"
	class="w-full gradient-bg text-white py-4 rounded-xl text-lg font-medium hover:opacity-90 transition duration-300 flex items-center justify-center"
	>
	<i data-feather="zap" class="mr-2"></i> Generate Recipe
	</button>
	</form>
	</div>

	<!-- Recipe Output -->
	<div class="recipe-card rounded-2xl p-8 flex flex-col">
	<h2 class="text-2xl font-bold text-gray-800 mb-6">Your Generated Recipe</h2>
	<div id="recipeOutput" class="flex-1 flex flex-col items-center justify-center text-center text-gray-500">
	<i data-feather="book-open" class="w-16 h-16 mb-4"></i>
	<p class="text-lg">Your recipe will appear here</p>
	<p class="mt-2">Fill out the form and click "Generate Recipe" to get started!</p>
	</div>
	<div id="recipeContent" class="hidden">
	<!-- Recipe content will be dynamically inserted here -->
	</div>
	</div>
	</div>
	</main>

	<!-- Footer -->
	<footer class="bg-white py-8 border-t border-gray-100">
	<div class="container mx-auto px-4 text-center text-gray-500">
	<p>© 2023 SavoryAI Culinary Wizard. All recipes generated by AI.</p>
	</div>
	</footer>

	<script>
	feather.replace();

	// Equipment button toggle
	document.querySelectorAll('.equipment-btn').forEach(btn => {
	btn.addEventListener('click', () => {
	btn.classList.toggle('active');
	});
	});

	// Add ingredient tags
	const addIngredientBtn = document.getElementById('addIngredient');
	const ingredientsInput = document.getElementById('ingredients');
	const ingredientTags = document.getElementById('ingredientTags');

	addIngredientBtn.addEventListener('click', () => {
	const ingredient = ingredientsInput.value.trim();
	if (ingredient) {
	const tag = document.createElement('div');
	tag.className = 'ingredient-tag flex items-center px-3 py-1 rounded-full';
	tag.innerHTML = `
	<span>${ingredient}</span>
	<button type="button" class="ml-2 text-gray-400 hover:text-red-500">
	<i data-feather="x" class="w-4 h-4"></i>
	</button>
	`;
	ingredientTags.appendChild(tag);
	ingredientsInput.value = '';
	feather.replace();

	// Add event to remove tag
	tag.querySelector('button').addEventListener('click', () => {
	tag.remove();
	});
	}
	});

	// Form submission
	document.getElementById('recipeForm').addEventListener('submit', (e) => {
	e.preventDefault();

	// Simulate generating recipe
	document.getElementById('recipeOutput').classList.add('hidden');
	const recipeContent = document.getElementById('recipeContent');
	recipeContent.classList.remove('hidden');
	recipeContent.innerHTML = `
	<div class="animate-fadeIn">
	<h3 class="text-xl font-bold text-gray-800 mb-4">Spicy Tomato Chicken with Rice</h3>
	<div class="mb-6">
	<div class="flex items-center justify-between mb-2">
	<span class="text-gray-600">Prep Time: 10 mins</span>
	<span class="text-gray-600">Cook Time: 20 mins</span>
	</div>
	<div class="flex items-center justify-between">
	<span class="text-gray-600">Servings: 2</span>
	<span class="text-gray-600">Difficulty: Easy</span>
	</div>
	</div>

	<div class="mb-8">
	<img src="http://static.photos/food/640x360/42" alt="Recipe" class="w-full rounded-lg">
	</div>

	<div class="mb-8">
	<h4 class="text-lg font-semibold text-gray-800 mb-3">Ingredients</h4>
	<ul class="space-y-2">
	<li class="flex items-start">
	<i data-feather="check-circle" class="w-5 h-5 text-pink-500 mr-2 mt-0.5"></i>
	<span>2 chicken breasts, diced</span>
	</li>
	<li class="flex items-start">
	<i data-feather="check-circle" class="w-5 h-5 text-pink-500 mr-2 mt-0.5"></i>
	<span>1 cup rice</span>
	</li>
	<li class="flex items-start">
	<i data-feather="check-circle" class="w-5 h-5 text-pink-500 mr-2 mt-0.5"></i>
	<span>2 tomatoes, chopped</span>
	</li>
	<li class="flex items-start">
	<i data-feather="check-circle" class="w-5 h-5 text-pink-500 mr-2 mt-0.5"></i>
	<span>2 cloves garlic, minced</span>
	</li>
	<li class="flex items-start">
	<i data-feather="check-circle" class="w-5 h-5 text-pink-500 mr-2 mt-0.5"></i>
	<span>1 tsp chili flakes</span>
	</li>
	<li class="flex items-start">
	<i data-feather="check-circle" class="w-5 h-5 text-pink-500 mr-2 mt-0.5"></i>
	<span>1 tbsp olive oil</span>
	</li>
	<li class="flex items-start">
	<i data-feather="check-circle" class="w-5 h-5 text-pink-500 mr-2 mt-0.5"></i>
	<span>Salt and pepper to taste</span>
	</li>
	</ul>
	</div>

	<div>
	<h4 class="text-lg font-semibold text-gray-800 mb-3">Instructions</h4>
	<ol class="space-y-4">
	<li class="flex">
	<span class="bg-pink-500 text-white rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">1</span>
	<span>Cook rice according to package instructions.</span>
	</li>
	<li class="flex">
	<span class="bg-pink-500 text-white rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">2</span>
	<span>Heat olive oil in a pan over medium heat. Add garlic and sauté for 30 seconds.</span>
	</li>
	<li class="flex">
	<span class="bg-pink-500 text-white rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">3</span>
	<span>Add diced chicken and cook until no longer pink, about 5-7 minutes.</span>
	</li>
	<li class="flex">
	<span class="bg-pink-500 text-white rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">4</span>
	<span>Add chopped tomatoes and chili flakes. Cook for another 5 minutes until tomatoes soften.</span>
	</li>
	<li class="flex">
	<span class="bg-pink-500 text-white rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">5</span>
	<span>Season with salt and pepper to taste. Serve over cooked rice.</span>
	</li>
	</ol>
	</div>
	</div>
	`;
	feather.replace();

	// Scroll to recipe
	recipeContent.scrollIntoView({ behavior: 'smooth' });
	});
	</script>
	</body>
	</html>