azpect/Potion
1
1
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases Wiki Activity

(UI/STYLE): Completed* the home page.

Browse Source 
Of course, its not 100% done, it will always be a WIP. But for now,
moving on. Specs are up to date as well.
This commit is contained in:
Hayden Hargreaves 2025-06-03 20:37:20 -07:00
parent a6bf728f06
commit 6ec6f4d1c7
4 changed files with 175 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
assets/tailwind.config.js
View File

@ -28,6 +28,7 @@ module.exports = {
400: "#8a0bd9",
500: "#6707a3",
600: "#4a0575",
700: "#2a0442",
},
}
},

144
lib/potion_web/controllers/page_html/home.html.heex
View File

@ -6,13 +6,67 @@
</div>
-->
<div class="w-full h-full">
<div class="w-full h-full mb-12">
<!-- Container: Page -->
<div class="w-full h-full flex flex-col p-4">
<div class="w-full h-full flex flex-col">
<!-- Section: Welcome Banner -->
<section class="w-full h-fit">
<!-- Element: Background Video -->
<div class="relative">
<video autoplay loop muted playsinline class="opacity-80">
<source src="/images/cooking_salt.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 text-white 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>
<!-- Section: Craving Something... Banner -->
<section class="w-full flex flex-col items-center justify-center my-8 py-4">
<h2 class="text-xl sm:text-2xl font-semibold text-white mb-6
bg-gradient-to-t from-background-400 to-background-300
py-4 w-full text-center border-b-background-500
">
Craving Something Specific?
</h2>
<!-- Element: Pill Button Group -->
<div class="px-4 grid grid-cols-3 gap-4">
<div class="text-md py-1.5 px-3 rounded-lg text-white bg-gradient-to-tr from-primary-600 to-primary-500 shadow-md shadow-primary-600 text-center">
<p>Breakfast</p>
</div>
<div class="text-md py-1.5 px-3 rounded-lg text-white bg-gradient-to-tr from-primary-600 to-primary-500 shadow-md shadow-primary-600 text-center">
<p>Lunch</p>
</div>
<div class="text-md py-1.5 px-3 rounded-lg text-white bg-gradient-to-tr from-primary-600 to-primary-500 shadow-md shadow-primary-600 text-center">
<p>Dinner</p>
</div>
<div class="text-md py-1.5 px-3 rounded-lg text-white bg-gradient-to-tr from-primary-600 to-primary-500 shadow-md shadow-primary-600 text-center">
<p>Dessert</p>
</div>
<div class="text-md py-1.5 px-3 rounded-lg text-white bg-gradient-to-tr from-primary-600 to-primary-500 shadow-md shadow-primary-600 text-center">
<p>Snack</p>
</div>
<div class="text-md py-1.5 px-3 rounded-lg text-white bg-gradient-to-tr from-primary-600 to-primary-500 shadow-md shadow-primary-600 text-center">
<p>Any</p>
</div>
</div>
</section>
<!-- Section: Search -->
<section class="w-full h-fit flex items-center justify-center gap-x-5 my-8">
<section class="w-full h-fit flex items-center justify-center gap-x-5 my-8 p-4">
<input
type="search"
name="search-bar"
@ -36,10 +90,49 @@
</svg>
</section>
<!-- Section: Viewed Recently -->
<section class="w-full flex flex-col my-4">
<!-- Section: Recipe of the Week -->
<section class="w-full flex flex-col my-4 p-4 relative">
<h2 class="text-md text-white my-2">
Recently Viewed
Recipe of the Week
</h2>
<!-- Element: Spotlight -->
<div class="absolute size-64 bg-white rounded-full blur-3xl -z-10 bottom-0 -translate-y-1/4 left-1/2 -translate-x-1/2" />
<!-- Element: Recipe OTW Display -->
<div class="w-full flex justify-center my-4">
<div class="w-3/4 h-[450px] bg-gradient-to-t from-background-400 to-background-300
rounded-lg shadow-black shadow-md flex flex-col items-start justify-end p-4 text-white">
<h3 class="text-lg overflow-hidden whitespace-nowrap text-ellipsis w-full font-semibold">
Avacado Toast
</h3>
<p class="text-sm overflow-hidden text-white [display:-webkit-box] [-webkit-box-orient:vertical] [-webkit-line-clamp:4]">
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>
<p class="text-sm italic text-background-100 mt-2">
Breakfast - 10 min
</p>
<div class="w-full flex justify-center mt-4">
<button class="w-full py-3 bg-gradient-to-t from-background-300 to-background-200 rounded-lg shadow-sm shadow-black">
Make Now!
</button>
</div>
</div>
</div>
</section>
<!-- Section: Viewed Recently -->
<section class="w-full flex flex-col my-4 p-4">
<h2 class="text-md text-white my-2">
Recently viewed
</h2>
<!-- List: Recent Views-->
@ -51,6 +144,10 @@
Avacado Toast
</p>
<p class="text-xs italic text-background-100">
Breakfast
</p>
<div class="flex items-center justify-between w-full text-xs">
<p>10 min</p>
<svg
@ -84,6 +181,10 @@
Fried Chicken
</p>
<p class="text-xs italic text-background-100">
Dinner
</p>
<div class="flex items-center justify-between w-full text-xs">
<p>90 min</p>
<svg
@ -117,6 +218,10 @@
Steak & Eggs
</p>
<p class="text-xs italic text-background-100">
Breakfast
</p>
<div class="flex items-center justify-between w-full text-xs">
<p>15 min</p>
<svg
@ -148,7 +253,7 @@
</section>
<!-- Section: Make Again -->
<section class="w-full flex flex-col my-4">
<section class="w-full flex flex-col my-4 p-4">
<h2 class="text-md text-white my-2">
Make again
</h2>
@ -162,6 +267,10 @@
Avacado Toast
</p>
<p class="text-xs italic text-background-100">
Breakfast
</p>
<div class="flex items-center justify-between w-full text-xs">
<p>10 min</p>
<svg
@ -195,6 +304,10 @@
Fried Chicken
</p>
<p class="text-xs italic text-background-100">
Dinner
</p>
<div class="flex items-center justify-between w-full text-xs">
<p>90 min</p>
<svg
@ -228,6 +341,10 @@
Steak & Eggs
</p>
<p class="text-xs italic text-background-100">
Breakfast
</p>
<div class="flex items-center justify-between w-full text-xs">
<p>15 min</p>
<svg
@ -257,5 +374,18 @@
</ul>
</div>
</section>
<!-- Section: Recipe to Share Section -->
<section class="w-full my-8 p-4">
<div class="bg-gradient-to-tr from-primary-700 to-primary-600 rounded-lg px-8 py-12 text-center shadow-xl">
<h2 class="text-2xl font-bold text-white mb-4">Got a Recipe to Share?</h2>
<p class="text-white text-lg leading-relaxed mb-6">
Unleash your inner chef! Share your unique recipes with our community and inspire others with your culinary genius.
</p>
<button class="inline-block px-10 py-4 bg-white text-primary-700 font-bold text-lg rounded-full shadow-lg">
Create Now!
</button>
</div>
</section>
</div>
</div>

BIN
priv/static/images/cooking_salt.mp4 Normal file
View File

Binary file not shown.

48
spec/TechnicalSpecification.md
View File

@ -2,6 +2,7 @@
<!--toc:start-->
- [Technical Specifications](#technical-specifications)
- [Devices & Responsiveness](#devices-responsiveness)
- [Page Requirements](#page-requirements)
- [Home](#home)
- [UI Requirements](#ui-requirements)
@ -18,6 +19,11 @@
Application specifications.
## Devices & Responsiveness
This application is a web app, however, it is built following a "mobile-first" pattern. Which
means the desktop interface is lacking and will be designed after the completion of the mobile
web interface.
## Page Requirements
@ -31,6 +37,16 @@ Home page will server as the landing page where users can search recipes, filter
well as view lists of recently made recipes, recently viewed and trending recipes lists.
##### UI Requirements
- [ ] Welcome Banner
- [ ] Video display with large text overhead
- [ ] Sub text below the video with a "Call to Action"
- [ ] Interactive banner that can be hidden with a "Got it!" or "X"
- [ ] Message & Pills Banner
- [ ] Message with text like "Craving Something Specific?"
- [ ] Pill buttons below which allow for a direct search for meal type
- [ ] Search bar
- [ ] Ability to search for recipes, meals, and tags
@ -40,6 +56,11 @@ well as view lists of recently made recipes, recently viewed and trending recipe
- [ ] **Filter by difficulty** - *1 to 5 stars*
- [ ] **Filter by serving size** - *1 to 16*
- [ ] Recipe of The Week
- [ ] **Single recipe display** of the best performing recipe, with spotlight effect
- [ ] **Display recipe details in depth** - Title, duration, **image***, meal category, simplified description
- [ ] **Make now** button to allow easy access to meal directions
- [ ] Recently Viewed List
- [ ] Scrolling list of the most recent 5-10 recipes viewed
- [ ] **Display recipe details** - Title, duration, **image***, meal category, and a heart to like the recipe
@ -48,16 +69,18 @@ well as view lists of recently made recipes, recently viewed and trending recipe
- [ ] Scrolling list of the most recent 5-10 recipes made
- [ ] **Display recipe details** - Title, duration, **image***, meal category, and a heart to like the recipe
- [ ] Trending Recipes List
- [ ] Scrolling list of the most recent 5-10 trending recipes
- [ ] **Display recipe details** - Title, duration, **image***, meal category, and a heart to like the recipe
- [ ] Create Recipe CTA (call-to-action)
- [ ] **Large CTA banner** with text prompting users to create a recipe
- [ ] **Button** to take the user to the create page
'*': Not sure yet, still under consideration
##### API Requirements
- [ ] Message & Pills Banner
- [ ] Search all recipes of a specific meal type
- [ ] Search bar
- [ ] Text search on titles based on search query
- [ ] Text search on tags based on search query
@ -69,6 +92,16 @@ well as view lists of recently made recipes, recently viewed and trending recipe
- [ ] Update search to only contain meals that meet the difficulty level of the selected filter
- [ ] Update search to only contain meals that meet the serving size of the selected filter
- [ ] Recipe of The Week
- [ ] Fetch the most performing recipe of the last 7 days and all of the required meta data
- [ ] Most views (W: 0.1)
- [ ] Most makes (W: 0.5)
- [ ] Most likes (W: 0.3)
- [ ] Most reviews (W: 0.4)
- [ ] Highest avg rating (W: 0.2/star, 0.0 - 1.0)
- [ ] Direct a user to the recipes display page
- [ ] Telemetry data to collect clicks for each recipe
- [ ] Recently Viewed List
- [ ] Fetch a list of recently viewed meals and all required meta data
- [ ] Like a post and store it in user's liked posts list
@ -81,13 +114,6 @@ well as view lists of recently made recipes, recently viewed and trending recipe
- [ ] Direct a user to the recipes display page
- [ ] Telemetry data to collect clicks for each recipe
- [ ] Trending Recipes List
- [ ] Fetch a list of recipes and all required meta data with the most likes in the last week
- [ ] Like a post and store it in user's liked posts list
- [ ] Direct a user to the recipes display page
- [ ] Telemetry data to collect clicks for each recipe
'**': Not sure implementation