-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
342 lines (292 loc) · 13.6 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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
<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=Poppins:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap"
rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Meta tag de OG -->
<meta property="og:type" content="website"/>
<meta property="og:title" content="DEV burguer - O melhor hamburguer desenvolvido!"/>
<meta property="og:image" content="https://dev-hamburgueria.vercel.app/assets/hamb-1.png"/>
<meta property="og:description" content="Experimente o sabor inovador do DEV Burguer. Feito com ingredientes de qualidade, é a combinação perfeita de sabor e tecnologia para qualquer ocasião."/>
<meta property="og:site_name" content="DevBurguer"/>
<link rel="stylesheet" href="./styles/output.css" />
<title>Dev burguer - A melhor Hambúrgueria dev!</title>
</head>
<body>
<!-- header -->
<header class="w-full h-[420px] bg-zinc-900 bg-home bg-cover bg-center">
<div class="w-full h-full flex flex-col justify-center items-center">
<img src="./assets/hamb-1.png" alt="logo dev burguer"
class="w-32 h-32 rounded-full shadow-lg hover:scale-110 duration-300" />
<h1 class="text-4xl mt-4 mb-2 font-bold text-white">
Dev burguer
</h1>
<span class="text-white font-medium">Rua dev 10. centro, São Paulo</span>
<div class="bg-green-600 px-4 py-1 rounded-lg mt-5" id="date-span">
<span class="text-white font-medium">Seg á Dom - 18:00 as 22:00</span>
</div>
</div>
</header>
<!-- fim do header -->
<h2 class="text-2xl md:text-3xl font-bold text-center mt-9 mb-6">
CONHEÇA NOSSO MENU:
</h2>
<!-- INICIO MENU -->
<div id="menu">
<main class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-7 md:gap-10 mx-auto max-w-7xl px-2 mb-16">
<!--Produto item 1: SMASH -->
<div class="flex gap-2">
<img src="./assets/hamb-1.png" alt="Hamburguer SMASH"
class="w-28 h-28 rounded-md hover:scale-110 hover:-rotate-2 duration-300" />
<div>
<p class="font-bold">Hambúrguer SMASH</p>
<p class="text-sm">
Pão levinho de fermentação natural da Trigou, burguer 160g, queijo prato e maionese da casa.
</p>
<div class="flex items-center gap-2 justify-between mt-3">
<p class="font-bold text-lg">R$: 28,90</p>
<button class="bg-gray-900 px-5 rounded add-to-cart-btn" data-name="hamburguer SMASH" data-price="28.90">
<i class="fa fa-cart-plus text-lg text-white"></i>
</button>
</div>
</div>
</div>
<!--Fim do Produto -->
<!--Produto item 2: DUPLO -->
<div class="flex gap-2">
<img src="./assets/hamb-2.png" alt="Hambúrguer X2 DUPLO"
class="w-28 h-28 rounded-md hover:scale-110 hover:-rotate-2 duration-300" />
<div>
<p class="font-bold">Hambúrguer X2 DUPLO</p>
<p class="text-sm">
Pão brioche, dois smash burgers 150g, queijo cheddar, cebola caramelizada e maionese especial.
</p>
<div class="flex items-center gap-2 justify-between mt-3">
<p class="font-bold text-lg">R$: 32,90</p>
<button class="bg-gray-900 px-5 rounded add-to-cart-btn" data-name="hamburguer X2 DUPLO" data-price="32.90">
<i class="fa fa-cart-plus text-lg text-white"></i>
</button>
</div>
</div>
</div>
<!--Fim do Produto -->
<!--Produto item 3: BACON -->
<div class="flex gap-2">
<img src="./assets/hamb-3.png" alt="Hamburguer FAROFA DE BACON"
class="w-28 h-28 rounded-md hover:scale-110 hover:-rotate-2 duration-300" />
<div>
<p class="font-bold">Hambúrguer FAROFA DE BACON</p>
<p class="text-sm">
Pão rústico, burguer 160g, queijo prato, farofa crocante de bacon e maionese da casa.
</p>
<div class="flex items-center gap-2 justify-between mt-3">
<p class="font-bold text-lg">R$: 18,90</p>
<button class="bg-gray-900 px-5 rounded add-to-cart-btn" data-name="hamburguer FAROFA DE BACON"
data-price="18.90">
<i class="fa fa-cart-plus text-lg text-white"></i>
</button>
</div>
</div>
</div>
<!--Fim do Produto -->
<!--Produto item 4: SALAD -->
<div class="flex gap-2">
<img src="./assets/hamb-4.png" alt="Hamburguer SALAD"
class="w-28 h-28 rounded-md hover:scale-110 hover:-rotate-2 duration-300" />
<div>
<p class="font-bold">Hambúrguer SALAD</p>
<p class="text-sm">
Pão integral, burguer 160g, queijo prato, alface, tomate, cebola roxa e maionese da casa.
</p>
<div class="flex items-center gap-2 justify-between mt-3">
<p class="font-bold text-lg">R$: 20,00</p>
<button class="bg-gray-900 px-5 rounded add-to-cart-btn" data-name="hamburguer SALAD" data-price="20.00">
<i class="fa fa-cart-plus text-lg text-white"></i>
</button>
</div>
</div>
</div>
<!--Fim do Produto -->
<!--Produto item 5: BBQ -->
<div class="flex gap-2">
<img src="./assets/hamb-5.png" alt="Hamburguer BBQ"
class="w-28 h-28 rounded-md hover:scale-110 hover:-rotate-2 duration-300" />
<div>
<p class="font-bold">Hambúrguer BBQ</p>
<p class="text-sm">
Pão de cebola, burguer 160g, queijo muçarela, bacon crocante e molho barbecue.
</p>
<div class="flex items-center gap-2 justify-between mt-3">
<p class="font-bold text-lg">R$: 25,00</p>
<button class="bg-gray-900 px-5 rounded add-to-cart-btn" data-name="hamburguer BBQ" data-price="25.00">
<i class="fa fa-cart-plus text-lg text-white"></i>
</button>
</div>
</div>
</div>
<!--Fim do Produto -->
<!--Produto item 6: CHEESEBURGER -->
<div class="flex gap-2">
<img src="./assets/hamb-6.png" alt="Hamburguer CHEESEBURGER"
class="w-28 h-28 rounded-md hover:scale-110 hover:-rotate-2 duration-300" />
<div>
<p class="font-bold">Hambúrguer CHEESEBURGER</p>
<p class="text-sm">
Pão de brioche, burguer 160g, queijo cheddar, ketchup e mostarda.
</p>
<div class="flex items-center gap-2 justify-between mt-3">
<p class="font-bold text-lg">R$: 22,50</p>
<button class="bg-gray-900 px-5 rounded add-to-cart-btn" data-name="hamburguer CHEESEBURGER"
data-price="22.50">
<i class="fa fa-cart-plus text-lg text-white"></i>
</button>
</div>
</div>
</div>
<!--Fim do Produto -->
<!--Produto item 7: MEXICAN -->
<div class="flex gap-2">
<img src="./assets/hamb-7.png" alt="Hamburguer MEXICAN"
class="w-28 h-28 rounded-md hover:scale-110 hover:-rotate-2 duration-300" />
<div>
<p class="font-bold">Hambúrguer MEXICAN</p>
<p class="text-sm">
Pão de milho, burguer 160g, queijo pepper jack, guacamole e jalapeños.
</p>
<div class="flex items-center gap-2 justify-between mt-3">
<p class="font-bold text-lg">R$: 27,50</p>
<button class="bg-gray-900 px-5 rounded add-to-cart-btn" data-name="hamburguer MEXICAN" data-price="27.50">
<i class="fa fa-cart-plus text-lg text-white"></i>
</button>
</div>
</div>
</div>
<!--Fim do Produto -->
<!--Produto item 8: VEGGIE -->
<div class="flex gap-2">
<img src="./assets/hamb-8.png" alt="Hamburguer VEGGIE"
class="w-28 h-28 rounded-md hover:scale-110 hover:-rotate-2 duration-300" />
<div>
<p class="font-bold">Hambúrguer VEGGIE</p>
<p class="text-sm">
Pão integral, hambúrguer de grão-de-bico, queijo vegano, alface, tomate e maionese vegana.
</p>
<div class="flex items-center gap-2 justify-between mt-3">
<p class="font-bold text-lg">R$: 24,00</p>
<button class="bg-gray-900 px-5 rounded add-to-cart-btn" data-name="hamburguer VEGGIE" data-price="24.00">
<i class="fa fa-cart-plus text-lg text-white"></i>
</button>
</div>
</div>
</div>
<!--Fim do Produto -->
</main>
<!-- Bebidas -->
<div class="mx-auto max-w-7xl px-2 my-2">
<h2 class="font-bold text-3xl">Bebidas</h2>
</div>
<!--Grid Bebidas-->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-7 md:gap-10 mx-auto max-w-7xl px-2 mb-16" id="menu">
<!--Produto item 1: Coca lata -->
<div class="product_card">
<img src="./assets/refri-1.png" alt="Coca-lata"
class="w-28 h-28 rounded-md hover:scale-110 hover:-rotate-2 duration-300" />
<div class="w-full">
<p class="font-bold">Coca-Cola 250 ML</p>
<div class="flex items-center gap-2 justify-between mt-3">
<p class="font-bold text-lg">R$: 10,00</p>
<button class="bg-gray-900 px-5 rounded add-to-cart-btn" data-name="Coca-lata" data-price="10.00">
<i class="fa fa-cart-plus text-lg text-white"></i>
</button>
</div>
</div>
</div>
<!--Fim do Produto -->
<!--Produto item 2: Guarana lata -->
<div class="product_card">
<img src="./assets/refri-2.png" alt="Guarana-lata"
class="w-28 h-28 rounded-md hover:scale-110 hover:-rotate-2 duration-300" />
<div class="w-full">
<p class="font-bold">Guaraná 250 ML</p>
<div class="flex items-center gap-2 justify-between mt-3">
<p class="font-bold text-lg">R$: 7,00</p>
<button class="bg-gray-900 px-5 rounded add-to-cart-btn" data-name="Guarana-lata" data-price="7.00">
<i class="fa fa-cart-plus text-lg text-white"></i>
</button>
</div>
</div>
</div>
<!--Fim do Produto -->
<!--Produto item 3: Água -->
<div class="product_card">
<img src="./assets/agua-1.png" alt="Água sem gás da Crystal"
class="w-28 h-28 rounded-md hover:scale-110 hover:-rotate-2 duration-300" />
<div class="w-full">
<p class="font-bold">Água sem Gás Crystal 500 ML</p>
<div class="flex items-center gap-2 justify-between mt-3">
<p class="font-bold text-lg">R$: 5,00</p>
<button class="bg-gray-900 px-5 rounded add-to-cart-btn" data-name="Água sem Gás Crystal" data-price="5.00">
<i class="fa fa-cart-plus text-lg text-white"></i>
</button>
</div>
</div>
</div>
<!--Fim do Produto -->
<!--Produto item 4: Energético Monster -->
<div class="product_card">
<img src="./assets/monster-1.png" alt="Energético Monster"
class="w-28 h-28 rounded-md hover:scale-110 hover:-rotate-2 duration-300" />
<div class="w-full">
<p class="font-bold">Energético Monster 500 ML</p>
<div class="flex items-center gap-2 justify-between mt-3">
<p class="font-bold text-lg">R$: 12,00</p>
<button class="bg-gray-900 px-5 rounded add-to-cart-btn" data-name="Energético Monster" data-price="12.00">
<i class="fa fa-cart-plus text-lg text-white"></i>
</button>
</div>
</div>
</div>
<!--Fim do Produto -->
</div>
<!--Grid Bebidas-->
</div>
<!-- FIM MENU -->
<!-- Modal cart -->
<div class="bg-black/60 w-full h-full fixed top-0 left-0 z-[99] items-center justify-center hidden" id="cart-modal">
<div class=" bg-white p-5 rounded-md min-w-[90%] md:min-w-[600px]">
<h2 class="text-center font-bold text-2xl mb-2">Meu Carrinho</h2>
<div id="cart-items" class="flex justify-between mb-2 flex-col"></div>
<p class="font-bold">Total: <span id="cart-total"></span></p>
<p class="font-bold mt-4">Endereço de Entrega:</p>
<input type="text" placeholder="Digite seu endereço completo..." id="address"
class="w-full border-2 p-2 rounded my-1" />
<p class="text-red-500 hidden" id="address-warn">Digite seu endereço completo!</p>
<div class="flex items-center justify-between w-full">
<button id="close-modal-btn">Fechar</button>
<button id="checkout-btn" class="bg-green-500 text-white px-4 py-1 rounded">Finalizar pedido</button>
</div>
</div>
</div>
<!-- Modal cart -->
<!--Button cart footer-->
<footer class="w-full bg-red-500 py-3 fixed bottom-0 z-40 flex items-center justify-center">
<button class="flex items-center gap-2 text-white font-bold" id="cart-btn">
(<span id="cart-count">0</span>)
Veja meu carrinho
<i class="fa fa-cart-plus text-lg text-white"></i>
</button>
</footer>
<!--Fim Button cart footer-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
<script src="script.js"></script>
</body>
</html>