-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
148 lines (141 loc) · 9.35 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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0" />
<link
rel="preconnect"
href="https://fonts.googleapis.com" />
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Anton&family=Manrope:wght@200;300;400;500;600&display=swap"
rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link
href="style.css"
rel="stylesheet"
type="text/css" />
<title>Les Petits Plats</title>
</head>
<body class="font-manrope">
<header
class="p-10 w-screen h-auto md:h-[calc(100vh-15vh)] bg-[url('src/assets/images/main-background.jpeg')] bg-cover bg-no-repeat bg-bottom-hero-bg">
<img
src="src/assets/images/logo.svg"
alt="" />
<div class="w-full flex flex-col items-center mt-28 md:mt-36">
<h1 class="font-anton text-center text-primary text-5xl uppercase leading-relaxed max-w-3xl">
Cherchez parmi plus de 1500 recettes du quotidien, simples et délicieuses
</h1>
<div class="relative w-full max-w-4xl mt-7">
<input
class="main-search-input w-full h-16 py-4 px-7 rounded-xl outline-0"
placeholder="Rechercher une recette, un ingrédient, ..."
type="text" />
<div class="main-search-input_remove-icon w-fit absolute top-5 right-20 cursor-pointer hidden">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="gray">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</div>
<svg
class="main-search-input_search-icon absolute right-4 top-2.5 bg-black hover:bg-primary text-white hover:text-black transition-all duration-300 w-11 h-11 p-2 rounded-lg cursor-pointer"
xmlns="http://www.w3.org/2000/svg" width="27" height="27" viewBox="0 0 28 29" fill="none">
<circle cx="10" cy="10.4219" r="9.5" stroke="currentColor"/>
<line x1="18.3536" y1="19.0683" x2="27.3536" y2="28.0683" stroke="currentColor"/>
</svg>
</div>
</div>
</header>
<!-- main section -->
<main class="relative p-10 bg-gray">
<!-- Recipes filters -->
<div class="flex justify-between items-center mb-10">
<div class="relative w-1/2 flex justify-between items-center">
<div class="datalist-container-ingredients absolute top-0 left-0 z-20 w-48 !p-4 bg-white rounded-lg">
<div class="flex justify-between">
<label class="font-medium" for="ingredient">Ingédients</label>
<svg class="icon-chevron-up-ingredients w-6 h-6 cursor-pointer" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
</svg>
<svg class="icon-chevron-down-ingredients w-6 h-6 hidden cursor-pointer" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</div>
<div class="hidden">
<div class="relative mt-3 h-fit">
<input class="w-full outline-none p-1 border border-gray" type="text" id="ingredient" />
<svg class="absolute top-3 right-3 font-light" xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 28 29" fill="none">
<circle cx="10" cy="10.4219" r="9.5" stroke="gray"/>
<line x1="18.3536" y1="19.0683" x2="27.3536" y2="28.0683" stroke="gray"/>
</svg>
</div>
<ul class="mt-4 max-h-52 overflow-scroll" id="ingredients"></ul>
</div>
</div>
<div class="datalist-container-appliance absolute top-0 left-1/2 transform -translate-x-1/2 z-20 w-48 !p-4 bg-white rounded-lg">
<div class="flex justify-between">
<label class="font-medium" for="appliance">Appareils</label>
<svg class="icon-chevron-up-appliance w-6 h-6 cursor-pointer" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
</svg>
<svg class="icon-chevron-down-appliance w-6 h-6 hidden cursor-pointer" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</div>
<div class="hidden">
<div class="relative mt-3 h-fit">
<input class="w-full outline-none p-1 border border-gray" type="text" id="appliance" />
<svg class="absolute top-3 right-3 font-light" xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 28 29" fill="none">
<circle cx="10" cy="10.4219" r="9.5" stroke="gray"/>
<line x1="18.3536" y1="19.0683" x2="27.3536" y2="28.0683" stroke="gray"/>
</svg>
</div>
<ul class="mt-4 max-h-52 overflow-scroll" id="appliance"></ul>
</div>
</div>
<div class="datalist-container-utensils absolute top-0 right-0 z-20 w-48 !p-4 bg-white rounded-lg">
<div class="flex justify-between">
<label class="font-medium" for="ingredient">Ustensiles</label>
<svg class="icon-chevron-up-utensils w-6 h-6 cursor-pointer" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
</svg>
<svg class="icon-chevron-down-utensils w-6 h-6 hidden cursor-pointer" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</div>
<div class="hidden">
<div class="relative mt-3 h-fit">
<input class="w-full outline-none p-1 border border-gray" type="text" id="utensils" />
<svg class="absolute top-3 right-3 font-light" xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 28 29" fill="none">
<circle cx="10" cy="10.4219" r="9.5" stroke="gray"/>
<line x1="18.3536" y1="19.0683" x2="27.3536" y2="28.0683" stroke="gray"/>
</svg>
</div>
<ul class="mt-4 max-h-52 overflow-scroll" id="utensils"></ul>
</div>
</div>
<!-- Tags section -->
<div id="ingredient-tags-container" class="w-48 absolute top-16 z-10"></div>
<div id="appliance-tags-container" class="w-48 absolute top-16 left-1/2 transform -translate-x-1/2 mx-auto z-10"></div>
<div id="utensil-tags-container" class="w-48 absolute top-16 right-0 mx-auto z-10"></div>
</div>
<h2 class="totale-recipes-available text-xl font-anton"><span>0</span> recettes</h2>
</div>
<!-- Recipes cards -->
<div
id="recipes-container"
class="recipes-container mt-24 flex justify-center lg:justify-between items-start flex-wrap gap-7">
</div>
<div id="alert-message" class="hidden w-full h-60 justify-center items-center text-balck"></div>
</main>
<script src="./src/scripts/index.js" type="module"></script>
<script src="./src/scripts/utils/displayRecipes.js" type="module"></script>
<script src="./src/scripts/utils/uniquifyIgredients.js" type="module"></script>
<script src="./src/scripts/searches/mainSearch.js" type="module"></script>
</body>
</html>