-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
207 lines (195 loc) · 11 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
<!DOCTYPE html>
<html lang="pt-BR>
<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="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 Open Graph-->
<meta property="og:type" content="website" />
<meta property="og:title" content="Come-Come Lanches - O melhor lanche da cidade!" />
<meta property="og:image" content="https://come-come-lanches.vercel.app/assets/Logo.jpg" />
<meta property="og:description" content="Hoje é dia de pedir o seu Come Come Lanche" />
<meta property="og:site_name" content="Come-Come Lanches" />
<link rel="stylesheet" href="styles/output.css" />
<title>Come come Lanches - O melhor lanche da cidade.</title>
</head>
<body>
<!--INÍCIO 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/Logo.jpg"
alt="Logo Come Come Lanches"
class="w-32 h-32 rounded-full shadow-lg hover:scale-110 duration-200"
/>
<h1 class="text-4xl mt-4 mb-2 font-bold text-white">Come Come Lanches</h1>
<span class="text-white font-medium">Rua: Cap. Francisco Lima 41, Centro - Nepomuceno - MG</span>
<div class="bg-green-600 px-4 py-1 rounded-lg mt-5" id="date-span">
<span class="text-white font-medium">Seg a Dom - 19:00 as 23:00</span>
</div>
</div>
</header>
<!--FIM HEADER-->
<h2 class="text-2xl md:text-3xl font-bold text-center mt-9 mb-6">
Conheça nosso cardápio
</h2>
<hr/>
<div class="mx-auto max-w-7xl px-2 my-2">
<h2 class="font-bold text-3xl">
Lanches
</h2>
</div>
<!--INÍCIO MENU-->
<div id="menu">
<main class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-7 mx-auto max-w-7xl px-2 mb-16">
<!--INÍCIO GRID LANCHES-->
<script src="scripts/menu.js"></script>
<!--FIM GRID PRODUTOS-->
</main>
<hr />
<div class="mx-auto max-w-7xl px-2 my-2">
<h2 class="font-bold text-3xl">
Bebidas
</h2>
</div>
<!-- INÍCIO GRID BEBIDAS -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-7 mx-auto max-w-7xl px-2 mb-16" id="menu">
<!--INÍCIO PRODUTO ITEM BEBIDAS 1 -->
<div class="flex gap-2 w-full">
<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 lata</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="Coca lata" data-price="5.00">
<i class="fa fa-cart-plus text-lg text-white"></i>
</button>
</div>
</div>
</div>
<!-- FIM PRODUTO ITEM BEBIDAS 1-->
<!--INÍCIO PRODUTO ITEM BEBIDAS 2-->
<div class="flex gap-2 w-full">
<img src="./assets/refri-2.png" alt="Guaraná"
class="w-28 h-28 rounded-md hover:scale-110 hover:-rotate-2 duration-300" />
<div class="w-full">
<p class="font-bold">Guaraná</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="Guarana" data-price="5.00">
<i class="fa fa-cart-plus text-lg text-white"></i>
</button>
</div>
</div>
</div>
<!-- FIM PRODUTO ITEM BEBIDAS 2-->
<!--INÍCIO PRODUTO ITEM BEBIDAS 3-->
<div class="flex gap-2 w-full">
<img src="./assets/agua-mineral.png" alt="água mineral"
class="w-28 h-28 rounded-md hover:scale-110 hover:-rotate-2 duration-300" />
<div class="w-full">
<p class="font-bold">Água mineral</p>
<div class="flex items-center gap-2 justify-between mt-3">
<p class="font-bold text-lg">R$ 4.00</p>
<button class="bg-gray-900 px-5 rounded add-to-cart-btn" data-name="Agua mineiral" data-price="4.00">
<i class="fa fa-cart-plus text-lg text-white"></i>
</button>
</div>
</div>
</div>
<!-- FIM PRODUTO ITEM BEBIDAS 3-->
</div>
<!-- FIM GRID BEBIDAS-->
<hr />
<div class="mx-auto max-w-7xl px-2 my-2">
<h2 class="font-bold text-3xl">
Outros
</h2>
</div>
<!-- INÍCIO GRID OUTROS -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-7 mx-auto max-w-7xl px-2 mb-16" id="menu">
<!--INÍCIO PRODUTO ITEM OUTROS 1 -->
<div class="flex gap-2 w-full">
<img src="./assets/chokito.png" alt="Chokito"
class="w-28 h-28 rounded-md hover:scale-110 hover:-rotate-2 duration-300" />
<div class="w-full">
<p class="font-bold">Chokito</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="Chokito" data-price="5.00">
<i class="fa fa-cart-plus text-lg text-white"></i>
</button>
</div>
</div>
</div>
<!-- FIM PRODUTO ITEM OUTROS 1-->
<!--INÍCIO PRODUTO ITEM OUTROS 2-->
<div class="flex gap-2 w-full">
<img src="./assets/prestigio.png" alt="Préstigio"
class="w-28 h-28 rounded-md hover:scale-110 hover:-rotate-2 duration-300" />
<div class="w-full">
<p class="font-bold">Préstigio</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="Prestigio" data-price="5.00">
<i class="fa fa-cart-plus text-lg text-white"></i>
</button>
</div>
</div>
</div>
<!-- FIM PRODUTO ITEM OUTROS 2-->
<!--INÍCIO PRODUTO ITEM OUTROS 3 -->
<div class="flex gap-2 w-full">
<img src="./assets/halls.png" alt="Halls"
class="w-28 h-28 rounded-md hover:scale-110 hover:-rotate-2 duration-300" />
<div class="w-full">
<p class="font-bold">Halls</p>
<div class="flex items-center gap-2 justify-between mt-3">
<p class="font-bold text-lg">R$ 2.00</p>
<button class="bg-gray-900 px-5 rounded add-to-cart-btn" data-name="Halls" data-price="2.00">
<i class="fa fa-cart-plus text-lg text-white"></i>
</button>
</div>
</div>
</div>
<!-- FIM PRODUTO ITEM OUROS 3-->
<h2 class="text-center">
Desenvolvido por:
<a href="https://www.linkedin.com/in/andsilva515" target="_blank">@andsilva515
</a>
<h2>
</div>
<!-- FIM GRID OUTROS-->
</div>
<!--FIM MENU-->
<!--INÍCIO 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> <!-- Itens do Carrinho-->
<p class="font-bold">Total: <span id="cart-total">0.00</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-1 rounded my-1"/>
<p class="text-red-500 hidden" id="address-warn">Digite seu endereo completo!</p>
<div class="flex items-center justify-between mt-5 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>
<!--FIM MODAL CART -->
<!--INÍCIO 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="/scripts/script.js"></script>
</body>
</html>