230 lines
10 KiB
Plaintext
230 lines
10 KiB
Plaintext
package templates
|
|
|
|
import "github.com/haydenhargreaves/Potion/internal/templates/components"
|
|
|
|
templ introSection() {
|
|
<section class="w-full h-fit mb-16">
|
|
<div class="relative">
|
|
<video class="" autoplay loop muted playsinline>
|
|
<source src="/v1/web/static/img/salmon_video.mp4" type="video/mp4" />
|
|
</video>
|
|
<h1 class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center
|
|
text-white text-3xl w-4/5 font-bold z-10">
|
|
Discover Your Next Favorite Meal
|
|
</h1>
|
|
</div>
|
|
<p class="leading-relaxed p-4 my-8">
|
|
Welcome to your ultimate recipe hub! Whether you're a seasoned chef or just starting your culinary adventure,
|
|
we're here to inspire. Explore thousands of delicious recipes, from quick weeknight dinners to gourmet delights,
|
|
all at your fingertips. Find exactly what you're craving with our powerful search and intuitive filters, or
|
|
browse our trending dishes for fresh ideas.
|
|
</p>
|
|
</section>
|
|
}
|
|
|
|
templ pillButton(name string) {
|
|
<button
|
|
class="w-32 px-4 py-1.5 border-gray-300 border rounded-full hover:border-blue-500 hover:shadow-sm hover:shadow-blue-300 duration-200">
|
|
{ name }
|
|
</button>
|
|
}
|
|
|
|
templ bannerText(content string) {
|
|
<h2 class="text-xl md:text-2xl bg-gradient-to-r from-blue-400 to-blue-600 w-full h-fit py-6 text-center text-white">
|
|
{ content }
|
|
</h2>
|
|
}
|
|
|
|
templ searchBar() {
|
|
<div class="relative w-full max-w-xl">
|
|
<input type="text" placeholder="Search recipes, ingredients..."
|
|
class="w-full pr-4 pl-10 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" />
|
|
<svg class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" fill="none" stroke="currentColor"
|
|
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
|
</svg>
|
|
</div>
|
|
}
|
|
|
|
templ searchSection() {
|
|
<section class="w-full flex flex-col items-center justify-center my-8 py-4">
|
|
@bannerText("Craving Something Specific?")
|
|
<div class="w-full md:w-2/3 px-4 py-6 bg-gray-50 rounded-lg shadow-md flex flex-col gap-4 items-center my-4">
|
|
@searchBar()
|
|
<div class="flex flex-wrap justify-center gap-3 my-4">
|
|
@pillButton("Breakfast")
|
|
@pillButton("Lunch")
|
|
@pillButton("Dinner")
|
|
@pillButton("Desert")
|
|
@pillButton("Snack")
|
|
@pillButton("Side")
|
|
@pillButton("Other")
|
|
</div>
|
|
<button class="bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 duration-200">
|
|
Search Recipes
|
|
</button>
|
|
</div>
|
|
</section>
|
|
}
|
|
|
|
templ largeLikeButton(liked bool) {
|
|
<button class="hover:cursor-pointer">
|
|
<svg class="h-6 text-red-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
if liked {
|
|
<path
|
|
d="M2 9.1371C2 14 6.01943 16.5914 8.96173 18.9109C10 19.7294 11 20.5 12 20.5C13 20.5 14 19.7294 15.0383 18.9109C17.9806 16.5914 22 14 22 9.1371C22 4.27416 16.4998 0.825464 12 5.50063C7.50016 0.825464 2 4.27416 2 9.1371Z"
|
|
fill="currentColor"></path>
|
|
} else {
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
|
d="M12 6.00019C10.2006 3.90317 7.19377 3.2551 4.93923 5.17534C2.68468 7.09558 2.36727 10.3061 4.13778 12.5772C5.60984 14.4654 10.0648 18.4479 11.5249 19.7369C11.6882 19.8811 11.7699 19.9532 11.8652 19.9815C11.9483 20.0062 12.0393 20.0062 12.1225 19.9815C12.2178 19.9532 12.2994 19.8811 12.4628 19.7369C13.9229 18.4479 18.3778 14.4654 19.8499 12.5772C21.6204 10.3061 21.3417 7.07538 19.0484 5.17534C16.7551 3.2753 13.7994 3.90317 12 6.00019Z"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
|
|
}
|
|
</svg>
|
|
</button>
|
|
}
|
|
|
|
templ highlightSection(liked bool) {
|
|
<section class="w-full flex flex-col items-center justify-center my-8 py-4">
|
|
@bannerText("Recipe of the Week!")
|
|
<p class="leading-relaxed p-4 my-8">
|
|
Our 'Recipe of the Week' is the cream of the crop! We handpick it by looking at what recipes
|
|
our community loves most. This isn't just about how many people view a recipe; it's also about
|
|
how many times it's been made, liked, reviewed, and its average rating, all combined to find
|
|
the true fan favorite of the week. It's our way of highlighting the best recipes that truly
|
|
resonate with our users!
|
|
</p>
|
|
<div class="flex items-center justify-center w-full">
|
|
<div
|
|
class="w-9/10 md:w-2/5 flex flex-col items-center justify-between rounded-lg border-gray-300 border shadow-md p-4">
|
|
<img class="size-80 md:size-64 rounded-sm" src="" />
|
|
<div class="mt-8">
|
|
<h2 class="font-semibold">Avocado Toast</h2>
|
|
<p class="text-xs overflow-hidden whitespace-nowrap text-ellipsis">
|
|
Hayden Hargreaves
|
|
</p>
|
|
<p
|
|
class="text-sm overflow-hidden [display:-webkit-box] [-webkit-box-orient:vertical] [-webkit-line-clamp:4] my-2">
|
|
Avocado toast is a delicious and simple breakfast, snack or light meal! Learn how to
|
|
make the BEST avocado toast with this recipe, plus fun variations.
|
|
Avocado toast is a delicious and simple breakfast, snack or light meal! Learn how to
|
|
make the BEST avocado toast with this recipe, plus fun variations.
|
|
Avocado toast is a delicious and simple breakfast, snack or light meal! Learn how to
|
|
make the BEST avocado toast with this recipe, plus fun variations.
|
|
</p>
|
|
<div class="flex items-center justify-between">
|
|
<p class="text-xs my-2 bg-gray-200 rounded-lg w-fit px-2 py-1 mt-2">
|
|
Breakfast - 15 min
|
|
</p>
|
|
@likeButton(liked)
|
|
</div>
|
|
<button
|
|
class="w-full rounded-lg py-2 bg-gradient-to-r from-blue-400 to-blue-600 text-white mt-2 hover:ring-blue-700 hover:shadow shadow-blue-300 duration-200">
|
|
Make Now!
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
}
|
|
|
|
templ likeButton(liked bool) {
|
|
<button class="hover:cursor-pointer">
|
|
<svg class="h-6 text-red-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
if liked {
|
|
<path
|
|
d="M2 9.1371C2 14 6.01943 16.5914 8.96173 18.9109C10 19.7294 11 20.5 12 20.5C13 20.5 14 19.7294 15.0383 18.9109C17.9806 16.5914 22 14 22 9.1371C22 4.27416 16.4998 0.825464 12 5.50063C7.50016 0.825464 2 4.27416 2 9.1371Z"
|
|
fill="currentColor"></path>
|
|
} else {
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
|
d="M12 6.00019C10.2006 3.90317 7.19377 3.2551 4.93923 5.17534C2.68468 7.09558 2.36727 10.3061 4.13778 12.5772C5.60984 14.4654 10.0648 18.4479 11.5249 19.7369C11.6882 19.8811 11.7699 19.9532 11.8652 19.9815C11.9483 20.0062 12.0393 20.0062 12.1225 19.9815C12.2178 19.9532 12.2994 19.8811 12.4628 19.7369C13.9229 18.4479 18.3778 14.4654 19.8499 12.5772C21.6204 10.3061 21.3417 7.07538 19.0484 5.17534C16.7551 3.2753 13.7994 3.90317 12 6.00019Z"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
|
|
}
|
|
</svg>
|
|
</button>
|
|
}
|
|
|
|
templ smallRecipeIcon(name, meal, author string, liked bool) {
|
|
<div
|
|
class="w-44 md:w-48 flex flex-col items-center justify-between rounded-lg border-gray-300 border shadow-md p-4 flex-shrink-0">
|
|
<img class="size-32 md:size-32 rounded-sm" src="" />
|
|
<div class="w-full mt-8">
|
|
<h2 class="font-semibold overflow-hidden whitespace-nowrap text-ellipsis">
|
|
{ name }
|
|
</h2>
|
|
<p class="text-xs overflow-hidden whitespace-nowrap text-ellipsis">
|
|
{ author }
|
|
</p>
|
|
<div class="flex items-end justify-between">
|
|
<p class="text-xs mt-4 bg-gray-200 rounded-lg w-fit px-2 py-1">
|
|
{ meal }
|
|
</p>
|
|
@likeButton(liked)
|
|
</div>
|
|
<button
|
|
class="w-full rounded-lg py-2 bg-gradient-to-r from-blue-400 to-blue-600 text-white mt-2 hover:ring-blue-700 hover:shadow shadow-blue-300 duration-200">
|
|
Make Now!
|
|
</button>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
templ listsSection() {
|
|
<section class="w-full flex flex-col items-center justify-center my-8 py-4">
|
|
@bannerText("Take Another Look.")
|
|
<div class="w-full">
|
|
<h3 class="text-lg mt-8 mx-4">Recently viewed</h3>
|
|
<div class="flex overflow-x-auto gap-x-4 mx-4 my-4">
|
|
@smallRecipeIcon("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves", true)
|
|
@smallRecipeIcon("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves", false)
|
|
@smallRecipeIcon("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves", false)
|
|
@smallRecipeIcon("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves", true)
|
|
@smallRecipeIcon("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves", false)
|
|
@smallRecipeIcon("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves", false)
|
|
</div>
|
|
<h3 class="text-lg mt-8 mx-4">Make again</h3>
|
|
<div class="flex overflow-x-auto gap-x-4 mx-4 my-4">
|
|
@smallRecipeIcon("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves", true)
|
|
@smallRecipeIcon("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves", false)
|
|
@smallRecipeIcon("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves", false)
|
|
@smallRecipeIcon("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves", true)
|
|
@smallRecipeIcon("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves", false)
|
|
@smallRecipeIcon("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves", false)
|
|
</div>
|
|
</div>
|
|
</section>
|
|
}
|
|
|
|
templ ctaSection() {
|
|
<section
|
|
class="w-full flex flex-col items-center justify-center mt-16 py-8 md:py-12 bg-gradient-to-br from-blue-100 to-purple-100 text-center">
|
|
<h2 class="text-2xl md:text-3xl font-extrabold text-gray-800 mb-6 px-4">
|
|
Unleash Your Inner Chef!
|
|
</h2>
|
|
<p class="text-md md:text-lg text-gray-700 max-w-2xl mb-10 px-4 leading-relaxed">
|
|
Have a unique recipe idea? Want to share your culinary masterpiece with the world?
|
|
It's time to bring your creations to life!
|
|
</p>
|
|
<a href="/v1/web/create" class="flex items-center justify-center
|
|
bg-gradient-to-r from-blue-400 to-blue-600 text-white
|
|
px-12 py-5 rounded-full shadow-sm hover:shadow-md
|
|
transition-all duration-300 ease-in-out shadow-blue-700
|
|
text-lg md:text-2xl font-bold uppercase tracking-wide">
|
|
Create Your Recipe!
|
|
</a>
|
|
</section>
|
|
}
|
|
|
|
templ HomePage() {
|
|
@components.Navbar("home")
|
|
<div class="w-full h-fit flex justify-center">
|
|
<div class="mx-2 md:mx-0 w-full md:w-1/2 md:pt-14 h-full border-l border-r border-gray-300 bg-white">
|
|
@introSection()
|
|
@searchSection()
|
|
@highlightSection(false)
|
|
@listsSection()
|
|
@ctaSection()
|
|
</div>
|
|
</div>
|
|
}
|