-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
80 lines (71 loc) · 7.12 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RecipeHub</title>
<link rel="stylesheet" href="./public/style.css">
<link rel="stylesheet" href="./public/custom.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="icon" type="image/x-icon" href="./public/favicon.png">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-Avb2QiuDEEvB4bZJYdft2mNjVShBftLdPG8FJ0V7irTLQ8Uo0qcPxh4Plq7G5tGm0rU+1SPhVotteLpBERwTkw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body class="text-center ">
<header class="backdrop-blur-3xl fixed top-0 w-full shadow-md">
<nav class="bg-transparent z-40">
<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
<a href="#top" class="flex items-center space-x-3 rtl:space-x-reverse">
<span class="text-white self-center text-2xl font-semibold whitespace-nowrap dark:text-white nameOfWebsite">RecipeHub</span>
</a>
<div class="flex md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse text-2xl">
<a href="#foodSection"><button id="foodRecipes" class="text-white rounded-t-lg before:ease relative h-12 w-40 overflow-hidden before:absolute before:left-0 before:-ml-2 before:h-48 before:w-48 before:origin-top-right before:-translate-x-full before:translate-y-12 before:-rotate-90 before:bg-white before:transition-all before:duration-300 hover:text-black hover:shadow-black hover:before:-rotate-180"><span class="relative z-10"><i class="fa-solid fa-burger"></i> Food</span></button></a>
<a href="#drinkSection"><button id="drinkRecipes" class="text-white rounded-t-lg before:ease relative h-12 w-40 overflow-hidden before:absolute before:left-0 before:-ml-2 before:h-48 before:w-48 before:origin-top-right before:-translate-x-full before:translate-y-12 before:-rotate-90 before:bg-white before:transition-all before:duration-300 hover:text-black hover:shadow-black hover:before:-rotate-180"><span class="relative z-10"><i class="fa-solid fa-martini-glass-citrus"></i> Drink</span></button></a>
<a href="#savedItemsSection"><button id="savedRecipes" class="text-white rounded-t-lg before:ease relative h-12 w-60 overflow-hidden before:absolute before:left-0 before:-ml-2 before:h-48 before:w-64 before:origin-top-right before:-translate-x-full before:translate-y-12 before:-rotate-90 before:bg-white before:transition-all before:duration-300 hover:text-black hover:shadow-black hover:before:-rotate-180"><span class="relative z-10"><i class="fa-solid fa-bookmark"></i> Saved Recipes</span></button></a>
</div>
</div>
</nav>
</header>
<main >
<section class="mt-72 mb-64 ">
<h2 id="mainItems" class="text-6xl mb-16 text-white text-shadow">Food & Drink Recipe Ideas</h2>
<p id="mainItems" class="text-2xl text-white text-shadow">Search for what your palate desires</p>
<button id="randomMeal" class="btn mt-40 text-2xl hover:before:bg-redborder-white relative h-[50px] w-64 overflow-hidden border border-white bg-transparent px-3 text-white shadow-2xl transition-all before:absolute before:bottom-0 before:left-0 before:top-0 before:z-0 before:h-full before:w-0 before:bg-white before:transition-all before:duration-500 hover:text-black hover:shadow-white hover:before:left-0 hover:before:w-full" onclick="my_modal_3.showModal()"><span class="relative z-10">Random Meal</span></button>
<dialog id="my_modal_3" class="modal text-white relative backdrop-filter w-3/6 rounded-md shadow dark:bg-gray-700 border border-solid border-white">
<div class="modal-box m-5">
<form method="dialog">
<button class="btn mt-1 btn-sm btn-circle btn-ghost absolute right-2 top-2 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white">✕</button>
</form>
<div class="flex">
<div id="foodContainerRandom" class="p-4 w-1/2"></div>
<div id="drinkContainerRandom" class="p-4 w-1/2"></div>
</div>
</div>
</dialog>
</section>
<section id="foodSection" class="main-bg px-10 text-white pb-10">
<p class="text-shadow text-3xl px-5 pt-36 pb-10">What kind/type of food <i class="fa-solid fa-utensils"></i> would you like to search for:</p>
<input class="py-2 pl-2 text-2xl text-black rounded-md w-full" type="text" id="searchInputFood" placeholder="e.g. Chicken, Pasta...">
<button id="foodSearch"class="mt-5 mb-10 text-white text-xl rounded-full hover:before:bg-redborder-red-500 relative h-[50px] w-40 overflow-hidden border border-black bg-black px-3 shadow-2xl transition-all before:absolute before:bottom-0 before:left-0 before:top-0 before:z-0 before:h-full before:w-0 before:bg-white before:transition-all before:duration-500 hover:text-black hover:shadow-white hover:before:left-0 hover:before:w-full"><span class="relative z-10">Search</span></button>
<div id="mainResults" class="main-bg px-5 pb-10">
<div id="spaceForFood" class=" grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 gap-4 "></div>
</div>
</section>
<section id="drinkSection" class="main-bg px-10 text-white pb-10">
<p class="text-shadow text-3xl px-5 pt-36 pb-10">What kind/type of drink <i class="fa-solid fa-martini-glass"></i> would you like to search for:</p>
<input class="py-2 pl-2 text-2xl text-black rounded-md w-full" type="text" id="searchInputDrink" placeholder="e.g. Margarita, Mojito...">
<button id="drinkSearch"class="mt-5 text-white text-xl rounded-full hover:before:bg-redborder-red-500 relative h-[50px] w-40 overflow-hidden border border-black bg-black px-3 shadow-2xl transition-all before:absolute before:bottom-0 before:left-0 before:top-0 before:z-0 before:h-full before:w-0 before:bg-white before:transition-all before:duration-500 hover:text-black hover:shadow-white hover:before:left-0 hover:before:w-full"><span class="relative z-10">Search</span></button>
<div id="spaceForDrinks" class="m-10 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 gap-4"></div>
</section>
<section id="savedItemsSection" class="main-bg text-white pb-10">
<p class="text-shadow text-3xl pt-36 px-5 pb-10">These are all your saved recipes:</p>
<div id="spaceForSavedItems" class="m-10 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"></div>
</section>
<footer id="footer"class="main-bg text-white pb-10">
<h1 class="text-2xl text-shadow">Made with love <i class="fa-solid fa-heart"></i></h1>
</footer>
</main>
<script type="module" src="./public/script.js"></script>
</body>
</html>