-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
489 lines (438 loc) · 22.3 KB
/
Copy pathindex.html
File metadata and controls
489 lines (438 loc) · 22.3 KB
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
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Beco da Chapa — Hambúrgueres artesanais feitos na hora. Peça agora pelo WhatsApp.">
<!-- URL pública: manter igual a SITE_URL em src/config.js e ao QR em assets/images/qr-code.png -->
<link rel="canonical" href="https://mesaflow-menu.vercel.app">
<meta property="og:title" content="Beco da Chapa — Cardápio Digital">
<meta property="og:description" content="Hambúrgueres artesanais feitos na hora, blends selecionados e muito sabor. Peça agora!">
<meta property="og:type" content="website">
<meta property="og:url" content="https://mesaflow-menu.vercel.app">
<title>Beco da Chapa — Cardápio</title>
<link rel="icon" type="image/svg+xml" href="/assets/favicon.svg">
<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=Outfit:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles/reset.css">
<link rel="stylesheet" href="styles/variables.css">
<link rel="stylesheet" href="styles/layout.css">
<link rel="stylesheet" href="styles/components.css">
<link rel="stylesheet" href="styles/pages.css">
</head>
<body>
<!-- ═══ Header ════════════════════════════════════════════════════════════ -->
<header class="header">
<div class="container header__inner">
<a href="#" class="header__logo" aria-label="Beco da Chapa — início">
<span class="header__logo-icon" aria-hidden="true">🔥</span>
Beco da Chapa
</a>
<nav class="header__nav" aria-label="Navegação principal">
<a href="#cardapio">Cardápio</a>
<a href="#sobre">Sobre</a>
<a href="#avaliacoes">Avaliações</a>
<a href="#contato">Contato</a>
</nav>
<button class="cart-btn" id="cartBtn" aria-label="Abrir carrinho">
<svg class="cart-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/>
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/>
</svg>
<span class="cart-btn__count hidden" id="cartCount" aria-live="polite">0</span>
</button>
</div>
</header>
<main>
<!-- ═══ Hero ══════════════════════════════════════════════════════════════ -->
<section class="hero" aria-label="Banner principal">
<div class="hero__content">
<div class="hero__eyebrow">
<span aria-hidden="true">🔥</span>
Artesanal desde 2019
</div>
<h1 class="hero__title">
Burgers que<br>
<span class="accent">incendeiam</span><br>
o paladar
</h1>
<p class="hero__subtitle">
Hambúrgueres artesanais feitos na hora, com blends selecionados e ingredientes frescos.
Peça agora e receba em até 40 minutos.
</p>
<div class="hero__rating">
<div class="hero__rating-stars">
<span class="hero__stars" aria-hidden="true">★★★★★</span>
<span class="hero__rating-score">4.9</span>
</div>
<span class="hero__rating-count">+1.200 pedidos</span>
<div class="hero__rating-divider" aria-hidden="true"></div>
<div class="hero__stat">
<div class="hero__stat-value">25–40</div>
<div class="hero__stat-label">min entrega</div>
</div>
<div class="hero__rating-divider" aria-hidden="true"></div>
<div class="hero__stat">
<div class="hero__stat-value">R$ 30</div>
<div class="hero__stat-label">pedido mín.</div>
</div>
</div>
<div class="hero__actions">
<a href="#cardapio" class="btn btn--primary btn--lg">Ver Cardápio</a>
<button class="btn btn--ghost btn--lg" id="heroShareBtn">Compartilhar 🔗</button>
</div>
<div class="hero__info" role="list" aria-label="Informações rápidas">
<div class="hero__info-chip" role="listitem">
<span class="status-dot" id="storeStatusDot"></span>
<span id="storeStatusText">Verificando...</span>
</div>
<div class="hero__info-chip" role="listitem">
<span aria-hidden="true">💳</span>
Pix, Cartão, Dinheiro
</div>
<div class="hero__info-chip" role="listitem">
<span aria-hidden="true">🛵</span>
Frete: R$ 8,00
</div>
</div>
</div>
<div class="hero__image">
<img
src="assets/images/hero.jpg"
alt="Hambúrguer artesanal Beco da Chapa"
loading="eager"
fetchpriority="high"
>
<div class="hero__image-overlay" aria-hidden="true"></div>
</div>
</section>
<!-- ═══ Catalog ═══════════════════════════════════════════════════════════ -->
<section class="catalog" id="cardapio" aria-label="Cardápio">
<div class="container">
<!-- Store closed -->
<div class="store-closed-banner" id="storeClosedBanner" hidden role="alert">
<span aria-hidden="true">🔒</span>
<span>Estamos fechados agora. Horário: Seg–Sex 18h–23h | Sáb–Dom 12h–23h30</span>
</div>
<!-- Rotating promo banner -->
<div class="promo-banner" id="promoBanner">
<div class="promo-banner__content">
<span class="promo-banner__icon" id="promoBannerIcon" aria-hidden="true">🎉</span>
<span class="promo-banner__text" id="promoBannerText">Frete grátis em pedidos acima de R$ 80,00!</span>
</div>
<button class="promo-banner__dismiss" id="promoBannerDismiss" aria-label="Fechar banner">✕</button>
</div>
<!-- Featured -->
<div class="featured">
<h2 class="section-title">Em Destaque</h2>
<div class="featured__scroll" id="featuredProducts" role="list" aria-label="Produtos em destaque"></div>
</div>
<!-- Catalog controls -->
<div class="catalog__controls">
<div class="search-bar">
<svg class="search-bar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
</svg>
<input
type="search"
id="searchInput"
placeholder="Buscar produtos..."
autocomplete="off"
aria-label="Buscar produtos"
>
</div>
<div class="category-filter" id="categoryFilter" role="tablist" aria-label="Filtrar por categoria"></div>
</div>
<!-- Products grid -->
<div class="products-grid" id="productsGrid" role="list" aria-label="Produtos"></div>
<!-- Empty state -->
<div class="empty-state" id="emptyState" hidden role="status">
<div class="empty-state__icon" aria-hidden="true">🔍</div>
<h3 class="empty-state__title">Nenhum produto encontrado</h3>
<p class="empty-state__subtitle">Tente buscar por outro termo ou escolha outra categoria</p>
<button class="btn btn--ghost btn--sm" onclick="document.getElementById('searchInput').value='';document.getElementById('searchInput').dispatchEvent(new Event('input'))">
Limpar busca
</button>
</div>
</div>
</section>
<!-- ═══ About ══════════════════════════════════════════════════════════════ -->
<section class="about" id="sobre" aria-label="Sobre nós">
<div class="container">
<div class="about__grid">
<div>
<p class="about__eyebrow">Nossa história</p>
<h2 class="about__title">Paixão pelo fogo,<br>respeito pelo sabor</h2>
<p class="about__text">
Nascemos em 2019 com uma missão simples: fazer o hambúrguer artesanal que a gente queria comer.
Blends desenvolvidos com carnes nacionais selecionadas, pão brioche assado diariamente e ingredientes que fazem diferença.
</p>
<p class="about__text">
Cada pedido sai da nossa cozinha com o mesmo cuidado do primeiro.
Sem atalhos, sem congelado, sem pressa. Se demorar um pouco mais, é porque está no ponto certo.
</p>
<div class="about__stats">
<div>
<div class="about__stat-value">5+</div>
<div class="about__stat-label">Anos de história</div>
</div>
<div>
<div class="about__stat-value">12k</div>
<div class="about__stat-label">Pedidos entregues</div>
</div>
<div>
<div class="about__stat-value">4.9★</div>
<div class="about__stat-label">Avaliação média</div>
</div>
</div>
</div>
<div class="about__gallery">
<div class="about__gallery-main about__gallery-img">
<img
src="assets/images/about-burger.jpg"
alt="Hambúrguer artesanal da Beco da Chapa"
loading="lazy"
>
</div>
<div class="about__gallery-img">
<img
src="assets/images/about-ambiente.jpg"
alt="Ambiente interno da Beco da Chapa"
loading="lazy"
>
</div>
<div class="about__gallery-img">
<img
src="assets/images/about-cozinha.jpg"
alt="Cozinha da Beco da Chapa"
loading="lazy"
>
</div>
</div>
</div>
</div>
</section>
<!-- ═══ Reviews ═══════════════════════════════════════════════════════════ -->
<section class="reviews" id="avaliacoes" aria-label="Avaliações dos clientes">
<div class="container">
<div class="reviews__header">
<div>
<p class="section-eyebrow">O que dizem nossos clientes</p>
<h2 class="section-title" style="margin-bottom: 0">Avaliações</h2>
<div class="reviews__aggregate">
<span class="reviews__aggregate-score">4.9</span>
<div>
<div class="reviews__aggregate-stars" aria-label="4.9 de 5 estrelas">★★★★★</div>
<div class="reviews__aggregate-count">Baseado em +1.200 pedidos</div>
</div>
</div>
</div>
</div>
<div class="reviews__scroll" id="reviewsContainer" role="list" aria-label="Avaliações"></div>
</div>
</section>
</main>
<!-- ═══ Footer ════════════════════════════════════════════════════════════ -->
<footer class="footer" id="contato" aria-label="Rodapé">
<div class="container">
<div class="footer__location" aria-label="Localização do restaurante Beco da Chapa">
<span class="footer__location-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 21s7-6.13 7-11a7 7 0 1 0-14 0c0 4.87 7 11 7 11Z"
stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/>
<circle cx="12" cy="10" r="2.5" stroke="currentColor" stroke-width="1.8"/>
</svg>
</span>
<div class="footer__location-info">
<span class="footer__location-label">Localização</span>
<span class="footer__location-title">Beco da Chapa</span>
<span class="footer__location-text">Rua das Brasas, 42 — Vila Madalena, São Paulo – SP</span>
</div>
</div>
<div class="footer__grid">
<div>
<div class="footer__brand-name">
<span aria-hidden="true">🔥</span> Beco da Chapa
</div>
<p class="footer__brand-desc">
Hambúrgueres artesanais feitos na hora, com ingredientes selecionados. Entregamos alegria a cada mordida.
</p>
<div class="footer__social">
<span class="footer__social-btn" aria-label="Instagram (demonstração)">
<span aria-hidden="true">📸</span> Instagram
</span>
<span class="footer__social-btn" aria-label="WhatsApp (demonstração)">
<span aria-hidden="true">💬</span> WhatsApp
</span>
</div>
</div>
<div>
<div class="footer__col-title">Horário</div>
<div class="footer__links">
<span>Seg–Sex: 18h às 23h</span>
<span>Sáb–Dom: 12h às 23h30</span>
<span style="color: var(--clr-text-muted); margin-top: 4px">Fechado às segundas</span>
</div>
</div>
<div>
<div class="footer__col-title">Contato</div>
<div class="footer__links">
<span>(11) 99999-9999</span>
<span>WhatsApp: peça pelo carrinho</span>
<span>oi@becodachapa.com.br</span>
<span style="margin-top: 4px">Rua das Brasas, 42<br>Vila Madalena – SP</span>
</div>
</div>
<div>
<div class="footer__col-title">Cardápio no celular</div>
<div class="footer__qr">
<p class="footer__qr-label">Escaneie o QR Code para acessar o cardápio no celular</p>
<img
src="assets/images/qr-code.png"
alt="QR Code do cardápio Beco da Chapa"
loading="lazy"
width="100"
height="100"
>
</div>
</div>
</div>
<div class="footer__bottom">
<span class="footer__copy">© 2026 Beco da Chapa. Todos os direitos reservados.</span>
<span class="footer__powered">
Cardápio digital por <span class="footer__powered-brand">MesaFlow</span>
</span>
</div>
</div>
</footer>
<!-- ═══ Cart Overlay ══════════════════════════════════════════════════════ -->
<div class="cart-overlay" id="cartOverlay" aria-hidden="true"></div>
<!-- ═══ Cart Drawer ═══════════════════════════════════════════════════════ -->
<aside class="cart-drawer" id="cartDrawer" aria-label="Carrinho de compras" role="dialog" aria-modal="true">
<div class="cart-drawer__header">
<h2 class="cart-drawer__title">Seu Pedido</h2>
<button class="cart-drawer__close" id="closeCartBtn" aria-label="Fechar carrinho">✕</button>
</div>
<div class="cart-drawer__body" id="cartDrawerBody"></div>
<div class="cart-drawer__footer" id="cartDrawerFooter"></div>
</aside>
<!-- ═══ Modal Overlay ════════════════════════════════════════════════════ -->
<div class="modal-overlay" id="modalOverlay" aria-hidden="true"></div>
<!-- ═══ Checkout Modal ════════════════════════════════════════════════════ -->
<div class="modal" id="checkoutModal" role="dialog" aria-modal="true" aria-labelledby="checkoutModalTitle">
<div class="modal__header">
<button class="modal__back" id="backToCartBtn" aria-label="Voltar ao carrinho">← Carrinho</button>
<h2 class="modal__title" id="checkoutModalTitle">Finalizar Pedido</h2>
<button class="modal__close" id="closeModalBtn" aria-label="Fechar">✕</button>
</div>
<div class="modal__body">
<div id="checkoutSummary"></div>
<form id="checkoutForm" novalidate>
<div class="form-section">
<div class="form-section__title">Seus dados</div>
<div class="form-group">
<label class="form-label" for="customerName">Nome completo <span>*</span></label>
<input class="form-input" type="text" id="customerName" placeholder="Seu nome" autocomplete="name" required>
</div>
<div class="form-group">
<label class="form-label" for="customerPhone">WhatsApp <span>*</span></label>
<input class="form-input" type="tel" id="customerPhone" placeholder="(11) 99999-9999" autocomplete="tel" required>
</div>
</div>
<div class="form-section">
<div class="form-section__title">Entrega</div>
<div class="form-group" id="deliveryTypeGroup">
<div class="toggle-group">
<label class="toggle-option">
<input type="radio" name="deliveryType" value="delivery" checked>
<div class="toggle-option__label">
<span class="toggle-option__icon">🛵</span>
<span class="toggle-option__text">Delivery</span>
</div>
</label>
<label class="toggle-option">
<input type="radio" name="deliveryType" value="retirada">
<div class="toggle-option__label">
<span class="toggle-option__icon">🏃</span>
<span class="toggle-option__text">Retirada</span>
</div>
</label>
</div>
</div>
<div class="form-group" id="addressGroup">
<label class="form-label" for="address">Endereço completo <span>*</span></label>
<input class="form-input" type="text" id="address" placeholder="Rua, número, complemento, bairro" autocomplete="street-address">
</div>
</div>
<div class="form-section">
<div class="form-section__title">Pagamento</div>
<div class="form-group" id="paymentGroup">
<div class="payment-options">
<label class="payment-option">
<input type="radio" name="payment" value="pix" checked>
<div class="payment-option__label">
<span class="payment-option__icon">💠</span>
<span class="payment-option__text">Pix</span>
</div>
</label>
<label class="payment-option">
<input type="radio" name="payment" value="cartao">
<div class="payment-option__label">
<span class="payment-option__icon">💳</span>
<span class="payment-option__text">Cartão</span>
</div>
</label>
<label class="payment-option">
<input type="radio" name="payment" value="dinheiro">
<div class="payment-option__label">
<span class="payment-option__icon">💵</span>
<span class="payment-option__text">Dinheiro</span>
</div>
</label>
</div>
</div>
<div class="form-group" id="changeGroup" hidden>
<label class="form-label" for="change">Troco para quanto?</label>
<input class="form-input" type="number" id="change" placeholder="R$ 50,00" min="0" step="0.01">
</div>
</div>
<div class="form-section">
<div class="form-section__title">Observações</div>
<div class="form-group">
<label class="form-label" for="notes">Alguma observação?</label>
<textarea class="form-input" id="notes" placeholder="Ex: sem cebola, alergia a glúten..."></textarea>
</div>
</div>
<button type="submit" class="btn btn--primary btn--full btn--lg">
Enviar pedido no WhatsApp 🟢
</button>
</form>
</div>
</div>
<!-- ═══ Customization Overlay ═════════════════════════════════════════════ -->
<div class="customize-overlay" id="customizeOverlay" aria-hidden="true"></div>
<!-- ═══ Customization Modal ══════════════════════════════════════════════ -->
<div class="customize-modal" id="customizeModal" role="dialog" aria-modal="true" aria-labelledby="customizeTitle">
<div class="customize-modal__handle" aria-hidden="true"></div>
<div class="customize-modal__header">
<h3 class="customize-modal__title" id="customizeTitle">Personalizar</h3>
<button class="customize-modal__close" id="customizeCloseBtn" aria-label="Fechar">✕</button>
</div>
<div class="customize-modal__body" id="customizeBody"></div>
<div class="customize-modal__footer">
<button class="btn btn--primary btn--full" id="customizeConfirmBtn">
Adicionar ao pedido
</button>
</div>
</div>
<!-- ═══ Toast container ════════════════════════════════════════════════════ -->
<div class="toast-container" id="toastContainer" aria-live="polite" aria-atomic="false"></div>
<!-- ═══ Floating cart bar (mobile) ═══════════════════════════════════════ -->
<div class="cart-bar" id="cartBar" hidden aria-live="polite">
<span class="cart-bar__info" id="cartBarInfo">0 itens</span>
<button class="cart-bar__btn" id="cartBarBtn">Ver carrinho</button>
</div>
<script type="module" src="src/app.js"></script>
</body>
</html>