Skip to content

Commit

Permalink
Merge pull request #6 from Esekyi/feature/search
Browse files Browse the repository at this point in the history 
Feature/search
  • Loading branch information
@Esekyi
Esekyi authored Sep 10, 2024
2 parents a17a70c + 498acdb commit 5617792
Show file tree
Hide file tree
Showing 13 changed files with 489 additions and 90 deletions.
9 changes: 7 additions & 2 deletions app/routes/auth_routes.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,13 +27,18 @@ def login():
return redirect(url_for('user_routes.user_profile', user_id=current_user.id))

if request.method == 'POST':
email = request.form["email"]
email = request.form.get("email").strip().lower()
password = request.form["password"]
next_page = request.form.get("next")
remember_me = request.form.get('remember_me')

# Convert checkbox to boolean
remember = True if remember_me == "on" else False

user = User.query.filter_by(email=email).first()

if user and check_password_hash(user.password_hash, password):
login_user(user)
login_user(user, remember=remember)

if next_page and is_safe_url(next_page):
return redirect(next_page)
Expand Down
15 changes: 10 additions & 5 deletions app/routes/user_routes.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,11 @@ def register():
first_name = data.get('first_name')
last_name = data.get('last_name')
username = data.get('username')
email = data.get('email')
email = data.get('email').strip().lower()
password = data.get('password')
confirm_password = request.form.get('confirm_password')

if not first_name or not last_name or not username or not email or not password:
if not first_name or not last_name or not username or not email or not password or not confirm_password:
flash('All fields are required', 'error')
return redirect(url_for('user_routes.register'))

Expand All @@ -56,9 +57,13 @@ def register():
return redirect(url_for('user_routes.register'))

try:
create_user(first_name, last_name, username, email, password)
flash('Registration successful, proceed to login!', 'info')
return redirect(url_for('auth.login'))
if password == confirm_password:
create_user(first_name, last_name, username, email, password)
flash('Registration successful, proceed to login!', 'info')
return redirect(url_for('auth.login'))
else:
flash('Password and confirm password do not match', 'error')

except Exception as e:
db.session.rollback()
flash('An error occured during registeration. Please try again', 'error')
Expand Down
51 changes: 45 additions & 6 deletions app/static/css/recipe_form.css
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,54 @@
.navbar-brand {
font-family: 'Raleway', sans-serif;
font-weight: 800;
}


.input-group {
display: flex;
align-items: center;
gap: 8px;
}

/* Hide the default checkbox */
.ingredient-checkbox:checked+label .custom-checkbox {
background-color: gray;
border-color: gray;
}

.ingredient-checkbox:checked+label .custom-checkbox:before {
content: '\2713';
/* Unicode checkmark */
display: block;
color: white;
font-size: 0.75rem;
text-align: center;
line-height: 1rem;
}

/* Custom checkbox styling */
.custom-checkbox {
position: relative;
display: inline-block;
width: 1rem;
height: 1rem;
background-color: white;
border: 2px solid gray;
border-radius: 0.25rem;
box-sizing: border-box;
}

.custom-checkbox:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
display: none;
}

.ingredient-checkbox:checked+label .custom-checkbox:before {
display: block;
}

/* Styling for crossed-out ingredient labels */
.line-through {
text-decoration: line-through;
}

.input-group input {
flex: 1;
}
Expand Down
Binary file added app/static/images/cooking.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 7 additions & 0 deletions app/static/js/scripts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,11 @@ document.addEventListener('DOMContentLoaded', function ()
flash.style.display = 'none';
}, 5000); // Flash message disappears after 5 seconds
});

// Toggle mobile menu
document.getElementById('mobile-menu-button').addEventListener('click', function ()
{
var menu = document.getElementById('mobile-menu');
menu.classList.toggle('hidden');
});
});
207 changes: 187 additions & 20 deletions app/templates/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,11 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="recipe, cooking, food, SpiceShare">
<meta name="keywords" content="recipe, cooking, food, SpiceShare, Landing Page, ALX portfolio project">
<meta name="author" content="Emmanuel Sekyi, Esekyi">
<meta name="description" content="Landing page for SpiceShare, an ALX prtfolio project">
<title>SpiceShare - Share Your Taste, Explore New Flavors</title>
<!-- Tailwind CSS -->

<link rel="stylesheet" href="{{url_for('static', filename='css/output.css')}}">
<style>
.flash-message {
Expand Down Expand Up @@ -55,6 +57,63 @@
<div class="spinner"></div>
</div>

<!-- Navbar -->
<nav class="bg-white shadow sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex">
<div class="flex-shrink-0 flex items-center">
<a href="/" class="text-xl font-bold text-orange-600">SpiceShare</a>
</div>
<!-- Hamburger Menu (Mobile) -->
<div class="-mr-2 flex items-center md:hidden">
<button id="mobile-menu-button" type="button"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16m-7 6h7"></path>
</svg>
</button>
</div>
</div>
<!-- Links Section -->
<div class="hidden md:flex md:ml-6 md:space-x-8">
<a href="#about"
class="text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 hover:text-orange-600 hover:border-orange-600">About</a>
<a href="#features"
class="text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 hover:text-orange-600 hover:border-orange-600">Features</a>
<a href="#testimonials"
class="text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 hover:text-orange-600 hover:border-orange-600">Testimonials</a>
<a href="#join"
class="text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 hover:text-orange-600 hover:border-orange-600">Join
Us</a>
</div>
<!-- Login Button -->
<div class="flex items-center">
<div class="flex-shrink-0">
<a href="{{ url_for('auth.login') }}"
class="relative inline-flex items-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-orange-600 shadow hover:bg-orange-700 focus:outline-none focus:shadow-outline-orange transition duration-150 ease-in-out">Login</a>
</div>
</div>
</div>
</div>

<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden">
<div class="pt-2 pb-3 space-y-1">
<a href="#about"
class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-700 hover:bg-gray-50 hover:border-orange-600 hover:text-orange-600">About</a>
<a href="#features"
class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-700 hover:bg-gray-50 hover:border-orange-600 hover:text-orange-600">Features</a>
<a href="#testimonials"
class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-700 hover:bg-gray-50 hover:border-orange-600 hover:text-orange-600">Testimonials</a>
<a href="#cta"
class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-700 hover:bg-gray-50 hover:border-orange-600 hover:text-orange-600">Join
Us</a>
</div>
</div>
</nav>

<!-- Hero Section -->
<section class="relative h-screen bg-cover bg-center"
style="background-image: url('{{url_for('static', filename='images/hero_image1.jpg')}}');">
Expand All @@ -74,23 +133,112 @@ <h1 class="text-5xl font-bold mb-4">Welcome to SpiceShare</h1>
</div>
</section>

<!-- About Section -->
<section id="about" class="bg-gray-50 py-12">
<div class="container mx-auto px-4">
<div class="grid md:grid-cols-2 gap-8">
<div>
<h2 class="text-3xl font-bold text-gray-900 mb-4">About SpiceShare</h2>
<p class="text-lg text-gray-600 mb-4">SpiceShare is a platform where cooking enthusiasts can share
and discover recipes from around the world. Whether you're a professional chef or just love to
cook, you'll find a place here to connect with like-minded people and expand your culinary
horizons.</p>
<a href="{{ url_for('user_routes.register') }}"
class="text-orange-600 hover:text-orange-700 font-medium">Join our community &rarr;</a>
</div>
<div>
<img src="{{ url_for('static', filename='images/cooking.png') }}" alt="Cooking"
class="rounded-lg shadow-md object-cover">
</div>
</div>
</div>
</section>


<!-- Features Section -->
<section id="features" class="bg-white py-12">
<div class="container mx-auto px-4 text-center">
<h2 class="text-3xl font-bold text-gray-900 mb-8">Features</h2>
<div class="grid md:grid-cols-3 gap-8">
<div class="p-6 bg-gray-50 rounded-lg shadow-md">
<h3 class="text-xl font-bold text-gray-800 mb-4">Diverse Recipes</h3>
<p class="text-gray-600">Explore a vast collection of recipes from different cultures and cuisines,
carefully curated by our community of food lovers.</p>
</div>
<div class="p-6 bg-gray-50 rounded-lg shadow-md">
<h3 class="text-xl font-bold text-gray-800 mb-4">User-Friendly Interface</h3>
<p class="text-gray-600">Easily navigate and find the recipes you're looking for with our intuitive
and responsive design.</p>
</div>
<div class="p-6 bg-gray-50 rounded-lg shadow-md">
<h3 class="text-xl font-bold text-gray-800 mb-4">Share Your Creations</h3>
<p class="text-gray-600">Upload your own recipes and share your culinary masterpieces with the
SpiceShare community.</p>
</div>
</div>
</div>
</section>


<!-- Newsletter Section -->
<section id="newsletter" class="bg-orange-600 py-12">
<div class="container mx-auto px-4 text-center text-white">
<h2 class="text-3xl font-bold mb-4">Subscribe to Our Newsletter</h2>
<p class="text-lg mb-8">Get the latest recipes and cooking tips delivered right to your inbox!</p>
<form action="" method="POST" class="max-w-md mx-auto">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<div class="flex flex-col md:flex-row md:space-x-4">
<input type="email" name="email" placeholder="Enter your email" required
class="w-full px-4 py-3 text-gray-800 rounded-md focus:outline-none">
<button type="button"
class="mt-4 md:mt-0 px-8 py-3 bg-white text-orange-600 hover:bg-gray-100 rounded-full text-lg font-medium shadow">Subscribe</button>
</div>
</form>
</div>
</section>

<!-- Testimonials Section -->
<section id="testimonials" class="bg-gray-50 py-12">
<div class="container mx-auto px-4 text-center">
<h2 class="text-3xl font-bold text-gray-900 mb-8">What Our Users Are Saying</h2>
<div class="grid md:grid-cols-3 gap-8">
<div class="p-6 bg-white rounded-lg shadow-md">
<p class="text-gray-600 mb-4">"SpiceShare has completely transformed the way I cook. I love being
able to find new and exciting recipes from all over the world."</p>
<h3 class="font-bold text-gray-800">Sarah L.</h3>
</div>
<div class="p-6 bg-white rounded-lg shadow-md">
<p class="text-gray-600 mb-4">"As a chef, I'm always looking for inspiration. SpiceShare is an
amazing resource for discovering new ideas and techniques."</p>
<h3 class="font-bold text-gray-800">Chef Michael R.</h3>
</div>
<div class="p-6 bg-white rounded-lg shadow-md">
<p class="text-gray-600 mb-4">"I love being able to share my recipes with others. The community on
SpiceShare is so supportive and encouraging."</p>
<h3 class="font-bold text-gray-800">Emily W.</h3>
</div>
</div>
</div>
</section>


<!-- Most Popular Recipes Section -->
<section class="py-16 px-4 bg-white" id="popular-recipes">
<div class="container mx-auto text-center">
<h2 class="text-4xl font-bold text-gray-800 mb-8">Most Popular Recipes</h2>

<!-- Recipes Container -->
<div id="recipeCards" class="relative flex items-center justify-center">
<button id="prevButton" disabled
class="absolute left-0 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-full transition duration-300">
&#8249;
</button>

<div id="recipeGrid"
class="grid grid-cols-1 md:grid-cols-3 gap-6 mx-16 transition-transform duration-500 transform">
<!-- Recipe cards will be dynamically inserted here -->
</div>

<button id="nextButton"
class="absolute right-0 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-full transition duration-300">
&#8250;
Expand All @@ -100,24 +248,24 @@ <h2 class="text-4xl font-bold text-gray-800 mb-8">Most Popular Recipes</h2>
</section>




<!-- Join Section -->
<section class="py-16 px-4 bg-blue-600 text-white" id="join">
<div class="container mx-auto text-center">
<h2 class="text-4xl font-bold mb-8">Ready to Join?</h2>
<p class="text-lg mb-8">Join SpiceShare and start sharing your favorite recipes with the world!</p>
<a href="{{ url_for('user_routes.register')}}"
class="px-8 py-4 bg-white hover:bg-gray-200 text-blue-600 rounded-lg text-lg transition duration-300">Join
Now</a>
<section class="bg-orange-600 py-12" id="join">
<div class="container mx-auto px-4 text-center text-white">
<h2 class="text-4xl font-bold mb-4">Ready to Spice Up Your Cooking?</h2>
<p class="text-lg mb-8">Join SpiceShare today and start exploring, cooking, and sharing your favorite
recipes!</p>
<a href="{{ url_for('user_routes.register') }}"
class="inline-block px-8 py-3 bg-white text-orange-600 hover:bg-gray-100 rounded-full text-lg font-medium shadow">Sign
Up Now</a>
</div>
</section>

<!-- Footer -->
<footer class="py-8 bg-gray-800 text-white text-center">
<p>&copy; 2024 SpiceShare. All rights reserved.</p>
</footer>

<!-- Footer -->
<footer class="bg-gray-800 text-gray-400 py-6">
<div class="container mx-auto px-4 text-center">
<p>&copy; 2024 SpiceShare. All rights reserved.</p>
</div>
</footer>

{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
Expand Down Expand Up @@ -220,6 +368,15 @@ <h3 class="text-lg font-bold text-gray-800 mb-2">${recipe.title}</h3>
});
}

// Remove the loader after the page has loaded
window.addEventListener('load', function ()
{
const loader = document.getElementById('loader');
loader.style.opacity = 0;
loader.style.transition = 'opacity 1s ease-out';
setTimeout(() => loader.remove(), 1000);
});

document.getElementById('prevButton').addEventListener('click', () => {
if (currentPage > 1) {
currentPage--;
Expand All @@ -239,8 +396,18 @@ <h3 class="text-lg font-bold text-gray-800 mb-2">${recipe.title}</h3>
fetchRecipes(currentPage);
});


// Toggle mobile menu
document.getElementById('mobile-menu-button').addEventListener('click', function ()
{
var menu = document.getElementById('mobile-menu');
menu.classList.toggle('hidden');
});

</script>

</body>

</html>
</html>


Loading

0 comments on commit 5617792

Please sign in to comment.