siderdk · siderdk · Jan 6, 2025 · Jan 6, 2025 · Jan 10, 2025 · Jan 17, 2025
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+._*
diff --git a/README.md b/README.md
@@ -2,6 +2,6 @@ Tweat 🍴✨
 
 Tweat is a modern recipe web app designed to make your cooking experience delightful and personal. Explore a collection of built-in recipes for inspiration, and easily add your own creations to build a customized recipe book. Whether you're a home chef or a foodie, Tweat helps you organize, discover, and share your culinary ideas with ease.
 
- Tweat, is not an homonym of the old "tweet", but is a fast way to say "To Eat!" 
+ Tweat, is not an homonym of the old "tweet", but is a "tweak" and a fast way to say "To Eat!" ;)
 
 The pitch is simple, and techy people should get it right away: Tweat, is the git of the kitchen. How? you may say. It's easy: You browse recipes, then you choose one or more, at first we aggregate ingredients, and pre-cooked elements (equivalent to staging), then once that is done, we move to the execution stage (the commit). 
diff --git a/app.js b/app.js
diff --git a/assets/full_screen_bg.png b/assets/full_screen_bg.png
diff --git a/assets/mobile_bg.png b/assets/mobile_bg.png
diff --git a/index.html b/index.html
@@ -3,37 +3,116 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./styles.css">
+    <link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;700&display=swap" rel="stylesheet">
     <title>Tweat</title>
-</head>
+</head rel=>
 <body>
+    <nav>
+        <a class="shoppingList"><svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 92.26"><defs><style>.cls-1{fill:#f60;}.cls-2{fill:#2e1d1d;}.cls-3,.cls-4{fill:#fff;}.cls-4{fill-rule:evenodd;}.cls-5{fill:#027cbd;}.cls-6{fill:#ff714c;}.cls-7{fill:#5e990b;}.cls-8{fill:#392424;}</style></defs><title>grocery</title><path class="cls-1" d="M66,29.53q2.17-4.19,4.54-8.27A243.67,243.67,0,0,1,84.11.38.9.9,0,0,1,85.24.09h0l2.39,1.13a.9.9,0,0,1,.52.79c.13,1.63.26,2,.4,2a3,3,0,0,0,.57-.18,4.38,4.38,0,0,1,1-.29c1.12-.15,2.15.29,2.68,2.85l.31-.08c1.48-.41,2.24-.62,2.94-.2s.86,1.28,1,2.95l.68-.14c1.26-.25,1.91-.37,2.54,0s.81,1.09,1.11,2.45l.09.42c.28-.08.53-.17.75-.25,1.22-.4,1.84-.62,2.49-.26s.83,1.09,1.08,2.55l.05.33.71-.2a3.31,3.31,0,0,1,2.23-.21c.74.29,1,.92,1.59,2.27l.16.38,4.6.78a.91.91,0,0,1,.75,1.05,1.66,1.66,0,0,1-.06.21h0q-2.46,5.63-5.18,11.09H66ZM82.07,6.43c4.88,3.42,9.59,6.42,14.41,9.19s9.74,5.3,15.12,7.77c.72-1.52,1.41-3.06,2.1-4.62l-3.93-.67h0a.92.92,0,0,1-.68-.53l-.36-.83a10,10,0,0,0-.6-1.31,6.38,6.38,0,0,0-1,.27c-.44.13-1,.28-1.65.45l-.12,0a.92.92,0,0,1-1.06-.74c-.08-.41-.16-.9-.23-1.32-.14-.87-.08-1.21-.15-1.25s-.32.15-1,.4c-.45.15-1,.33-1.73.55h0a.9.9,0,0,1-1.09-.67c-.14-.59-.24-1-.32-1.41-.19-.87-.28-1.29-.29-1.29s-.43.07-1.22.22c-.43.09-.95.19-1.64.3l-.09,0a.92.92,0,0,1-1-.8l-.1-.91c-.12-1.11-.17-1.65-.17-1.65s-.54.13-1.52.4l-1.26.34-.14,0a.91.91,0,0,1-1-.79c-.26-2-.53-2.34-.81-2.3a3.56,3.56,0,0,0-.59.19,3.76,3.76,0,0,1-1.07.29c-1.1.09-2-.47-2.31-3.15l-1.23-.59q-1.59,2.16-3.09,4.37Z"/><path class="cls-2" d="M118,26.68c1.62,0,2.13.66,3.19,1.72a5.83,5.83,0,0,1,1.72,4.14v6.93A5.87,5.87,0,0,1,117,45.33h-3.84L109.82,87.6a5.15,5.15,0,0,1-1.48,3.25h0a4.72,4.72,0,0,1-3.38,1.4H42.69a1.27,1.27,0,0,0,1.21-1.32l-.09-46.36a1.44,1.44,0,0,0-.17-.78l-6-10.93.06-6.18Z"/><path class="cls-3" d="M84.61,26.74a7.4,7.4,0,0,1,10-2.61,7.32,7.32,0,0,1,2.66,2.61Z"/><path class="cls-4" d="M66,47V76.3H55.69V47Zm25.63,0V76.3H81.32V47Z"/><path class="cls-3" d="M36.55,35.51,31,43.1h9.78l-4.2-7.59ZM29.72,45.75V89.61H41.81l-.08-43.86ZM27.28,89.61V45.75H2.54V89.61Zm-17-55.46H8.65a1,1,0,0,1-.08.14L3.67,43.1H27.86l6.59-8.94H10.27Z"/><path class="cls-5" d="M15.29,57.26c1.22,5.66,6,9.78,6,13.11a6.43,6.43,0,0,1-1.77,4.56,5.65,5.65,0,0,1-8.47,0,6.39,6.39,0,0,1-1.77-4.56c0-3.36,4.79-7.42,6-13.11Z"/><polygon class="cls-4" points="8.71 25.04 35.44 25.04 35.44 34.17 8.71 34.17 8.71 25.04 8.71 25.04"/><path class="cls-6" d="M57.67,17.67a11.61,11.61,0,0,1,1.95,4.27,16,16,0,0,1,.38,4.8h7.81a9.85,9.85,0,0,0-3.46-6.56,12.2,12.2,0,0,0-6.68-2.51Zm.91,9.07a14.83,14.83,0,0,0-.34-4.47,8.88,8.88,0,0,0-3.9-5.73,10.9,10.9,0,0,0-6.58-1,10,10,0,0,0-5.35,2.85,12.68,12.68,0,0,0-3.19,5.54,14.38,14.38,0,0,0-.48,2.8Z"/><path d="M56,16a10.72,10.72,0,0,1,.39-1.73,6.67,6.67,0,0,0-1-1,7.73,7.73,0,0,1-.95.49,8.43,8.43,0,0,1-4,.68q-.54,0-1.08-.09c-.21,0-.42-.08-.64-.13a9.6,9.6,0,0,1-5.46-3.73A12.39,12.39,0,0,1,41.86,8a.7.7,0,0,1,.36-.92l.08,0a20.65,20.65,0,0,1,2.16-.68A15.57,15.57,0,0,1,46.71,6,9.94,9.94,0,0,1,53,7.26a7.44,7.44,0,0,1,3.3,4.88v0c.24.2.47.42.69.63a7.8,7.8,0,0,1,.87-1.35,8.31,8.31,0,0,1,4.29-2.72.7.7,0,0,1,.39,1.34A6.9,6.9,0,0,0,59,12.34a6.39,6.39,0,0,0-1.07,1.95.76.76,0,0,1-.06.16,10.08,10.08,0,0,0-.46,2.09L56,16Zm-1.86-3.64a12.88,12.88,0,0,0-1.62-.81,14.53,14.53,0,0,0-5.89-1A.71.71,0,0,1,46,9.82a.7.7,0,0,1,.68-.72,15.8,15.8,0,0,1,6.45,1.15,12,12,0,0,1,1.35.64,5.77,5.77,0,0,0-2.15-2.46,8.61,8.61,0,0,0-5.44-1.07,14.51,14.51,0,0,0-2,.35c-.45.11-.9.25-1.34.39a11,11,0,0,0,.95,1.55,8.2,8.2,0,0,0,4.68,3.2,7.66,7.66,0,0,0,4.85-.39l.24-.11Z"/><path d="M57.17,16.48a13.5,13.5,0,0,1,7.9,2.82,10.65,10.65,0,0,1,3.63,5.77A11.64,11.64,0,0,1,69,26.74h-1.4a9.74,9.74,0,0,0-.24-1.33,9.19,9.19,0,0,0-3.15-5,11.82,11.82,0,0,0-6.55-2.46h0a11.28,11.28,0,0,1,1.91,4.18,15.65,15.65,0,0,1,.38,4.64h-1.4a14.42,14.42,0,0,0-.33-4.31,8.7,8.7,0,0,0-3.83-5.63,10.77,10.77,0,0,0-6.45-1,9.85,9.85,0,0,0-5.26,2.8,12.48,12.48,0,0,0-3.12,5.43,13.91,13.91,0,0,0-.47,2.68H37.68a14,14,0,0,1,.52-3,13.78,13.78,0,0,1,3.48-6,11.21,11.21,0,0,1,6-3.19,10.59,10.59,0,0,1,1.5-.16l2,.1h0a13.82,13.82,0,0,1,3.57,1l.17.07.08.05c.27.13.55.26.82.41v-.06l1.34.5v.06Z"/><path class="cls-7" d="M54.33,12.41a12.71,12.71,0,0,0-1.65-.83,14.89,14.89,0,0,0-6-1.06.71.71,0,1,1,0-1.41,16.14,16.14,0,0,1,6.55,1.16c.47.2.93.41,1.37.65A5.93,5.93,0,0,0,52.4,8.43a8.7,8.7,0,0,0-5.51-1.09,14.84,14.84,0,0,0-2.08.36c-.46.11-.91.25-1.36.4a11.2,11.2,0,0,0,1,1.56,8.32,8.32,0,0,0,4.75,3.25,7.81,7.81,0,0,0,4.92-.39l.24-.11Z"/><path class="cls-8" d="M6.27,33.08V23.66a1.28,1.28,0,0,1,1.22-1.33H36.7a1.28,1.28,0,0,1,1.22,1.33.57.57,0,0,1,0,.13l-.08,9.07,6.05,10.93a1.44,1.44,0,0,1,.17.78l.09,46.36a1.27,1.27,0,0,1-1.21,1.32H1.22A1.27,1.27,0,0,1,0,90.93V44.36a1.35,1.35,0,0,1,.29-.86l6-10.42ZM29.62,45.75V89.61H41.71l-.08-43.86ZM27.18,89.61V45.75H2.43V89.61Zm6.18-58.16h2L35.47,25H8.71v6.47h1.46v2.7H8.55l-.08.14L3.57,43.1H27.76l6.58-8.94h-1V31.45Zm-5.17,0h2.65v2.7H28.19v-2.7Zm-5.17,0h2.65v2.7H23v-2.7Zm-5.17,0H20.5v2.7H17.85v-2.7Zm-5.17,0h2.65v2.7H12.68v-2.7Zm23.77,4.06L30.87,43.1h9.78l-4.2-7.59Z"/></svg></a>
+    </nav>
     <section class="top">
-
+        <div class="time-counter">
+            <p>You have spent <span class="time-count"></span> here</p>
+        </div>
+        <div class="timer-container">
+            <p>Make a timer for less than 60min</p>
+            <label>
+                <input type="number" max="59" min="1" class="time-amount-input"><button class="set-timer-btn">set</button>
+                <p class="timer-state"></p>
+            </label>
+        </div>
     </section>
     <section class="main">
-
-        <div class="builtinRecipes">
-            <div class="recipeCard">
-                <h3 class="recipe_name"></h3>
-                <img src="" class="recipeImg" alt="recipe illustration">
-                <ul class="ingredientsList">
-
-                </ul>
-                <p class="cookingSteps">
-
-                </p>
-            </div>
+        <div class="banner">
+            <h1>tweat</h1>
+            <p class="full-view-tag">Health, taste, and sustainability</p>
+            <p class="mobile-tag">to your health!</p>
         </div>
+    </section>
+    <section class="search-section">
+        <div class="search-bar">
+            <label>
+                <input type="text" class="keyword-seach-input" placeholder="Search by keyword">
+             </label><button class="keyword-search-btn">find</button>
+        </div>
+        <div class="search-bar">
+             <label>
+                Or, search by number of ingredients <input type="number" min="5" max="20" class="number-seach-input">
+             </label><button class="ingr-nbr-find-btn">find</button>
+        </div>
+    </section>
+    <section class="recipes">
+        <div class="recipesContainer">
+
+        </div>
+    </section>
+    <section class="userInput">
+        <p>Not impressed by what we have? check our feature below:</p>
         <div class="create_recipes">
-            <button class="addRecipeButton">Add a recipe</button>
-
+            <button class="addRecipeButton">Add your recipe to the list</button>
+            <div class="addRecipeForm hidden">
+                <fieldset>
+                    <legend>Add a name to your recipe</legend>
+                <label>
+                    <input type="text" class="newRecipeName" placeholder="Recipe name">
+                </label>
+                    <legend>Add a link to an illustration of your recipe</legend>
+                <label>
+                    <input type="text" class="newRecipeImage" placeholder="Image URL">
+                </label>
+                <legend>Choose a type</legend>
+                    <select type="dropdown" class="newRecipeType" placeholder="Type">
+                        <option value="" selected disabled></option>
+                        <option value="breakfast">Breakfast</option>
+                        <option value="lunch">Lunch</option>
+                        <option value="dinner">Dinner</option>
+                        <option value="dessert">Dessert</option>
+                        <option value="snack">Snack</option>
+                    </select>
+                <legend>Add a short pitch</legend>
+                <label>
+                    <input type="text" class="newRecipePitch" placeholder="Your one liner description">
+                </label>   
+                    <legend>Add the ingredients and instructions to your recipe</legend>
+                <label>
+                    <input type="text" class="newRecipeIngredientName" placeholder="Ingredient">
+                    <input type="number" class="newIngredientAmount" placeholder="Amount">
+                    <select type="dropdown" class="newIngredientUnit" placeholder="Unit">
+                        <option value="" selected disabled></option>
+                        <option value="unitTypes.weight[0]">gr</option>
+                        <option value="unitTypes.weight[1]">kg</option>
+                        <option value="unitTypes.volume[0]">ml</option>
+                        <option value="unitTypes.volume[1]">dl</option>
+                        <option value="unitTypes.volume[2]">l</option>
+                        <option value="unitTypes.volume[3]">cup</option>
+                        <option value="unitTypes.volume[4]">tbsp</option>
+                        <option value="unitTypes.volume[5]">tsp</option>
+                        <option value="unitTypes.counts[0]">pieces</option>
+                        <option value="unitTypes.counts[1]">dozen</option>
+                        <option value="unitTypes.counts[2]">bottle</option>
+                        <option value="unitTypes.counts[3]">pack</option>
+                        <option value="unitTypes.counts[4]">clove</option>
+                    </select>
+                    <button class="addNewIngredientsBtn">add another ingredient</button>
+                    <div class="moreIngredients">
+
+                    </div>
+                </label>
+                    <legend>Add the instructions to your recipe</legend>
+                <label>
+                    <textarea maxlength="1000" class="newRecipeDescription" placeholder="Instructions"></textarea>
+                </label><hr>
+                <button class="submitRecipe">Save recipe to the list</button>
+                </fieldset>
 
+            </div>
         </div>
-
     </section>
-    <section class="bottom">
+    <section class="footer">
 
     </section>
 
-    <script src="scripts.js"></script>
+    <script src="app.js" type="module"></script>
 </body>
 </html>