[Templates📁] Created recipe pages html, js and css

app/routes/auth_routes.py

@@ -22,7 +22,7 @@ def login():
 
 		flash('Invalid Credentials', 'warning')
 
-	return render_template('login.html')
+	return render_template('user_auth/login.html')
 
 @auth_bp.route('/logout')
 @login_required

app/static/css/recipe_form.css

@@ -0,0 +1,50 @@
+.directions-section {
+	margin-bottom: 20px;
+}
+
+.direction-row {
+	display: flex;
+	align-items: flex-start;
+	margin-bottom: 10px;
+}
+
+.direction-step-number {
+	width: 30px;
+	font-size: 1.5rem;
+	margin-right: 10px;
+}
+
+.direction-input {
+	flex: 1;
+	padding: 8px;
+	border: 1px solid #ccc;
+	border-radius: 4px;
+	resize: vertical;
+	min-height: 50px;
+}
+
+.remove-direction-btn {
+	background-color: #e74c3c;
+	color: white;
+	border: none;
+	padding: 8px 12px;
+	margin-left: 10px;
+	cursor: pointer;
+	border-radius: 4px;
+}
+
+.add-direction-btn {
+	background-color: #3498db;
+	color: white;
+	border: none;
+	padding: 10px 20px;
+	cursor: pointer;
+	border-radius: 4px;
+}
+
+.recipe-image {
+	max-width: 100%;
+	height: auto;
+	border-radius: 8px;
+	margin-bottom: 15px;
+}

app/static/js/recipe_form.js

@@ -0,0 +1,56 @@
+document.addEventListener('DOMContentLoaded', function ()
+{
+	const ingredientsList = document.getElementById('ingredients-list');
+	const addIngredientBtn = document.getElementById('add-ingredient-btn');
+	const directionsList = document.getElementById('directions-list');
+	const addDirectionBtn = document.getElementById('add-direction-btn');
+
+	addIngredientBtn.addEventListener('click', function ()
+	{
+		const ingredientRow = document.createElement('div');
+		ingredientRow.classList.add('ingredient-row');
+
+		ingredientRow.innerHTML = `
+            <input type="text" name="ingredients[]" class="ingredient-input" placeholder="Enter ingredient" required />
+            <button type="button" class="remove-ingredient-btn">X</button>
+        `;
+
+		ingredientsList.appendChild(ingredientRow);
+
+		// Add event listener to the remove button
+		ingredientRow.querySelector('.remove-ingredient-btn').addEventListener('click', function ()
+		{
+			ingredientsList.removeChild(ingredientRow);
+		});
+	});
+
+	addDirectionBtn.addEventListener('click', function ()
+	{
+		const directionCount = directionsList.children.length + 1;
+		const directionRow = document.createElement('div');
+		directionRow.classList.add('direction-row');
+
+		directionRow.innerHTML = `
+            <div class="direction-step-number">${directionCount}</div>
+            <textarea name="directions[]" class="direction-input" placeholder="Enter instruction..." required></textarea>
+            <button type="button" class="remove-direction-btn">X</button>
+        `;
+
+		directionsList.appendChild(directionRow);
+
+		// Add event listener to the remove button
+		directionRow.querySelector('.remove-direction-btn').addEventListener('click', function ()
+		{
+			directionsList.removeChild(directionRow);
+			updateStepNumbers();
+		});
+	});
+
+	function updateStepNumbers()
+	{
+		document.querySelectorAll('.direction-step-number').forEach((step, index) =>
+		{
+			step.textContent = index + 1;
+		});
+	}
+});

app/templates/base.html

@@ -5,11 +5,15 @@
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-	<title>{% block title %}
-		SpiceShare{% endblock %}
+	<title>
+		{% block title %}
+			{{title}} | SpiceShare
+		{% endblock %}
 	</title>
 
 	<link rel="stylesheet" href="{{url_for('static', filename='css/output.css')}}">
+	<link rel="stylesheet" href="{{ url_for('static', filename='css/recipe_form.css') }}">
+
 	<style>
 		body {
 			display: flex;
@@ -62,6 +66,8 @@ <h1 class="text-3xl font-bold"><a href="{{ url_for('user_routes.list_users') }}"
 
 	{% block scripts %}
 	<script src="{{ url_for('static', filename='js/scripts.js') }}"></script>
+	<script src="{{ url_for('static', filename='js/recipe_form.js') }}"></script>
+
 	{% endblock %}
 </body>
 

app/templates/recipes/create.html

@@ -0,0 +1,40 @@
+{% extends "base.html" %}
+{% block content %}
+<h2>Create Recipe</h2>
+<form action="{{ url_for('recipe_routes.add_recipe') }}" method="POST" enctype="multipart/form-data">
+
+	<div class="form-group">
+		<label for="image">Upload an image:</label>
+		<input type="file" name="image" id="image" accept="image/*" class="form-control">
+	</div>
+
+	<input type="text" name="title" placeholder="Recipe Title" required>
+	<textarea name="description" placeholder="Description" required></textarea>
+	<textarea name="instructions" placeholder="Instructions" required></textarea>
+	<input type="number" name="prep_time" placeholder="Prep Time (mins)">
+	<input type="number" name="cook_time" placeholder="Cook Time (mins)">
+	<input type="number" name="servings" placeholder="Servings">
+	<select name="category" required>
+		{% if categories %}
+			{% for category in categories %}
+				<option value="{{ category.id }}">{{ category.name }}</option>
+			{% endfor %}
+		{% else %}
+			<option value="">No categories available</option>
+		{% endif %}
+	</select>
+	<div id="ingredients-container">
+		<input type="text" name="ingredients[]" placeholder="Ingredient">
+	</div>
+	<button type="button" onclick="addIngredient()">Add Ingredient</button>
+	<div class="directions-section">
+		<h3>Directions</h3>
+		<div id="directions-list">
+			<!-- This will hold all the direction steps -->
+		</div>
+		<button type="button" id="add-direction-btn" class="add-direction-btn">+ Add Direction</button>
+	</div>
+	<button type="submit">Create Recipe</button>
+</form>
+{% endblock %}
+

app/templates/recipes/list.html

@@ -0,0 +1,26 @@
+{% extends "base.html" %}
+{% block content %}
+<h2>Recipes</h2>
+<div class="recipe-detail">
+	{% for recipe in recipes %}
+		<h2>
+			{{ recipe.title }} - <a href="{{ url_for('recipe_routes.view_recipe', recipe_id=recipe.id) }}">View</a>
+		</h2>
+		{% if recipe.image_url %}
+			<img src="{{ recipe.image_url }}" alt="{{ recipe.title }} image" class="recipe-image">
+		{% endif %}
+		<div class="recipe-directions">
+			<h3>Directions</h3>
+			<ol>
+				{% for direction in recipe.instructions %}
+				<li>{{ direction.name }}</li>
+				{% endfor %}
+			</ol>
+		</div>
+		<!-- Other recipe details -->
+
+		{% endfor %}
+
+</div>
+
+{% endblock %}

app/templates/user_auth/index.html

@@ -0,0 +1,12 @@
+{% extends "base.html" %}
+
+{% block title %}Home - SpiceShare{% endblock %}
+
+{% block content %}
+<div class="text-center">
+	<h2 class="text-4xl font-bold text-primary mb-4">Welcome to SpiceShare</h2>
+	<p class="text-lg mb-8">Discover and share delicious recipes from around the world!</p>
+	<a href="{{ url_for('auth.login') }}" class="bg-primary text-white py-2 px-4 rounded hover:bg-primary-dark">Explore
+		Recipes</a>
+</div>
+{% endblock %}

app/templates/user_auth/login.html

@@ -0,0 +1,22 @@
+{% extends "base.html" %}
+
+{% block title %}
+Login - SpiceShare
+{% endblock %}
+
+{% block content %}
+<div class="max-w-md mx-auto bg-white p-8 rounded shadow-md">
+	<h2 class="text-2xl font-semibold text-text mb-6">Login</h2>
+	<form action="{{ url_for('auth.login') }}" method="post">
+		<div class="mb-4">
+			<label for="email" class="block text-sm font-medium text-text">Email:</label>
+			<input type="email" id="email" name="email" class="mt-1 p-2 w-full border rounded" required>
+		</div>
+		<div class="mb-4">
+			<label for="password" class="block text-sm font-medium text-text">Password:</label>
+			<input type="password" id="password" name="password" class="mt-1 p-2 w-full border rounded" required>
+		</div>
+		<button type="submit" class="bg-primary text-white py-2 px-4 rounded hover:bg-primary-dark">Login</button>
+	</form>
+</div>
+{% endblock %}

app/templates/user_auth/register.html

@@ -0,0 +1,37 @@
+{% extends "base.html" %}
+
+{% block title %}
+Sign Up - SpiceShare
+{% endblock title %}
+
+{% block content %}
+<div class="max-w-md mx-auto bg-white p-8 rounded shadow-md">
+	<h2 class="text-2xl font-semibold text-text mb-6">Create Account</h2>
+	<form action="{{ url_for('user_routes.register') }}" method="POST">
+		<div class="mb-4">
+			<label for="first_name" class="block text-sm font-medium text-text">First Name:</label>
+			<input type="text" id="first_name" name="first_name" class="mt-1 p-2 w-full border rounded" required
+				placeholder="John">
+		</div>
+		<div class="mb-4">
+			<label for="last_name" class="block text-sm font-medium text-text">Last Name:</label>
+			<input type="text" name="last_name" class="mt-1 p-2 w-full border rounded" required placeholder="Doe">
+		</div>
+		<div class="mb-4">
+			<label for="email" class="block text-sm font-medium text-text">Email:</label>
+			<input type="email" id="email" name="email" class="mt-1 p-2 w-full border rounded" required
+				placeholder="[email protected]">
+		</div>
+		<div class="mb-4">
+			<label for="username" class="block text-sm font-medium text-text">Username:</label>
+			<input type="text" name="username" class="mt-1 p-2 w-full border rounded" required placeholder="j_doe123">
+		</div>
+		<div class="mb-4">
+			<label for="password" class="block text-sm font-medium text-text">Password:</label>
+			<input type="password" id="password" name="password" class="mt-1 p-2 w-full border rounded" required
+				placeholder="*******">
+		</div>
+		<button type="submit" class="bg-primary text-white py-2 px-4 rounded hover:bg-primary-dark">Register</button>
+	</form>
+</div>
+{% endblock content %}