Hugging Face's logo

Spaces:
LIMATEC
/
pizzaria
Running

App Files Community
LIMATEC commited on
Commit
6fa71f2
·
verified ·
1 Parent(s): 0f44f52

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1145 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Pizzaria
3
- emoji: 🌖
4
- colorFrom: purple
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: pizzaria
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1145 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="pt-BR">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Pizzaria Sabor Italiano - Delivery e Balcão</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .hero-section {
11
+ background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1513104890138-7c749659a591?ixlib=rb-4.0.3');
12
+ background-size: cover;
13
+ background-position: center;
14
+ height: 80vh;
15
+ }
16
+
17
+ .pizza-card:hover {
18
+ transform: translateY(-10px);
19
+ transition: all 0.3s ease;
20
+ }
21
+
22
+ .cart-item {
23
+ animation: fadeIn 0.5s ease-in-out;
24
+ }
25
+
26
+ @keyframes fadeIn {
27
+ from { opacity: 0; transform: translateY(10px); }
28
+ to { opacity: 1; transform: translateY(0); }
29
+ }
30
+
31
+ .pizza-detail {
32
+ background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1541745537411-b8046dc6d66c?ixlib=rb-4.0.3');
33
+ background-size: cover;
34
+ background-position: center;
35
+ }
36
+ </style>
37
+ </head>
38
+ <body class="font-sans bg-gray-100">
39
+ <!-- Header/Navbar -->
40
+ <header class="bg-red-700 text-white shadow-lg sticky top-0 z-50">
41
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
42
+ <div class="flex items-center space-x-2">
43
+ <i class="fas fa-pizza-slice text-2xl"></i>
44
+ <h1 class="text-2xl font-bold">Sabor Italiano</h1>
45
+ </div>
46
+
47
+ <nav class="hidden md:flex space-x-6">
48
+ <a href="#home" class="hover:text-yellow-300 transition">Início</a>
49
+ <a href="#menu" class="hover:text-yellow-300 transition">Cardápio</a>
50
+ <a href="#about" class="hover:text-yellow-300 transition">Sobre</a>
51
+ <a href="#contact" class="hover:text-yellow-300 transition">Contato</a>
52
+ </nav>
53
+
54
+ <div class="flex items-center space-x-4">
55
+ <button id="cart-button" class="relative">
56
+ <i class="fas fa-shopping-cart text-xl"></i>
57
+ <span id="cart-count" class="absolute -top-2 -right-2 bg-yellow-400 text-red-700 rounded-full w-5 h-5 flex items-center justify-center text-xs font-bold">0</span>
58
+ </button>
59
+ <button id="mobile-menu-button" class="md:hidden text-xl">
60
+ <i class="fas fa-bars"></i>
61
+ </button>
62
+ </div>
63
+ </div>
64
+
65
+ <!-- Mobile Menu -->
66
+ <div id="mobile-menu" class="hidden md:hidden bg-red-800 px-4 py-2">
67
+ <div class="flex flex-col space-y-3">
68
+ <a href="#home" class="hover:text-yellow-300 transition">Início</a>
69
+ <a href="#menu" class="hover:text-yellow-300 transition">Cardápio</a>
70
+ <a href="#about" class="hover:text-yellow-300 transition">Sobre</a>
71
+ <a href="#contact" class="hover:text-yellow-300 transition">Contato</a>
72
+ </div>
73
+ </div>
74
+ </header>
75
+
76
+ <!-- Hero Section -->
77
+ <section id="home" class="hero-section flex items-center justify-center text-white">
78
+ <div class="text-center px-4">
79
+ <h1 class="text-4xl md:text-6xl font-bold mb-4">Pizzaria Sabor Italiano</h1>
80
+ <p class="text-xl md:text-2xl mb-8">Autêntica pizza italiana com delivery rápido ou retirada no balcão</p>
81
+ <div class="flex flex-col md:flex-row justify-center gap-4">
82
+ <a href="#menu" class="bg-yellow-400 hover:bg-yellow-500 text-red-700 font-bold py-3 px-6 rounded-full transition duration-300 transform hover:scale-105">
83
+ <i class="fas fa-utensils mr-2"></i>Ver Cardápio
84
+ </a>
85
+ <a href="#delivery" class="bg-white hover:bg-gray-100 text-red-700 font-bold py-3 px-6 rounded-full transition duration-300 transform hover:scale-105">
86
+ <i class="fas fa-motorcycle mr-2"></i>Pedir Delivery
87
+ </a>
88
+ </div>
89
+ </div>
90
+ </section>
91
+
92
+ <!-- Features Section -->
93
+ <section class="py-12 bg-white">
94
+ <div class="container mx-auto px-4">
95
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
96
+ <div class="text-center p-6 rounded-lg bg-gray-50 hover:shadow-lg transition">
97
+ <i class="fas fa-clock text-4xl text-red-600 mb-4"></i>
98
+ <h3 class="text-xl font-bold mb-2">Entrega Rápida</h3>
99
+ <p class="text-gray-600">Entregamos em até 45 minutos ou sua pizza é grátis!</p>
100
+ </div>
101
+ <div class="text-center p-6 rounded-lg bg-gray-50 hover:shadow-lg transition">
102
+ <i class="fas fa-leaf text-4xl text-red-600 mb-4"></i>
103
+ <h3 class="text-xl font-bold mb-2">Ingredientes Frescos</h3>
104
+ <p class="text-gray-600">Usamos apenas ingredientes frescos e de alta qualidade.</p>
105
+ </div>
106
+ <div class="text-center p-6 rounded-lg bg-gray-50 hover:shadow-lg transition">
107
+ <i class="fas fa-award text-4xl text-red-600 mb-4"></i>
108
+ <h3 class="text-xl font-bold mb-2">Tradição Italiana</h3>
109
+ <p class="text-gray-600">Receitas autênticas preparadas por pizzaiolos experientes.</p>
110
+ </div>
111
+ </div>
112
+ </div>
113
+ </section>
114
+
115
+ <!-- Menu Section -->
116
+ <section id="menu" class="py-12 bg-gray-100">
117
+ <div class="container mx-auto px-4">
118
+ <h2 class="text-3xl font-bold text-center mb-12 text-red-700">Nosso Cardápio</h2>
119
+
120
+ <div class="flex justify-center mb-8">
121
+ <div class="inline-flex rounded-md shadow-sm">
122
+ <button type="button" class="category-btn px-4 py-2 text-sm font-medium rounded-l-lg border border-gray-300 bg-white text-red-700 hover:bg-gray-50 focus:z-10 focus:ring-2 focus:ring-red-500" data-category="all">
123
+ Todas
124
+ </button>
125
+ <button type="button" class="category-btn px-4 py-2 text-sm font-medium border-t border-b border-gray-300 bg-white text-red-700 hover:bg-gray-50 focus:z-10 focus:ring-2 focus:ring-red-500" data-category="classic">
126
+ Clássicas
127
+ </button>
128
+ <button type="button" class="category-btn px-4 py-2 text-sm font-medium border border-gray-300 bg-white text-red-700 hover:bg-gray-50 focus:z-10 focus:ring-2 focus:ring-red-500" data-category="special">
129
+ Especiais
130
+ </button>
131
+ <button type="button" class="category-btn px-4 py-2 text-sm font-medium rounded-r-md border border-gray-300 bg-white text-red-700 hover:bg-gray-50 focus:z-10 focus:ring-2 focus:ring-red-500" data-category="dessert">
132
+ Sobremesas
133
+ </button>
134
+ </div>
135
+ </div>
136
+
137
+ <div id="pizza-menu" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
138
+ <!-- Pizzas will be loaded here by JavaScript -->
139
+ </div>
140
+ </div>
141
+ </section>
142
+
143
+ <!-- Delivery Section -->
144
+ <section id="delivery" class="py-12 bg-white">
145
+ <div class="container mx-auto px-4">
146
+ <h2 class="text-3xl font-bold text-center mb-12 text-red-700">Faça seu Pedido</h2>
147
+
148
+ <div class="flex flex-col lg:flex-row gap-8">
149
+ <div class="lg:w-1/2">
150
+ <div class="bg-gray-100 p-6 rounded-lg">
151
+ <h3 class="text-xl font-bold mb-4 text-red-700">Informações de Entrega</h3>
152
+ <form id="delivery-form">
153
+ <div class="mb-4">
154
+ <label class="block text-gray-700 mb-2" for="name">Nome Completo</label>
155
+ <input type="text" id="name" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500" required>
156
+ </div>
157
+ <div class="mb-4">
158
+ <label class="block text-gray-700 mb-2" for="phone">Telefone</label>
159
+ <input type="tel" id="phone" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500" required>
160
+ </div>
161
+ <div class="mb-4">
162
+ <label class="block text-gray-700 mb-2" for="address">Endereço</label>
163
+ <input type="text" id="address" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500" required>
164
+ </div>
165
+ <div class="mb-4">
166
+ <label class="block text-gray-700 mb-2" for="complement">Complemento</label>
167
+ <input type="text" id="complement" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500">
168
+ </div>
169
+ <div class="mb-4">
170
+ <label class="block text-gray-700 mb-2" for="payment">Forma de Pagamento</label>
171
+ <select id="payment" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500" required>
172
+ <option value="">Selecione...</option>
173
+ <option value="cash">Dinheiro</option>
174
+ <option value="credit">Cartão de Crédito</option>
175
+ <option value="debit">Cartão de Débito</option>
176
+ <option value="pix">PIX</option>
177
+ </select>
178
+ </div>
179
+ <div class="mb-4">
180
+ <label class="block text-gray-700 mb-2" for="notes">Observações</label>
181
+ <textarea id="notes" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500"></textarea>
182
+ </div>
183
+ <button type="submit" class="w-full bg-red-700 hover:bg-red-800 text-white font-bold py-3 px-4 rounded-md transition duration-300">
184
+ Finalizar Pedido
185
+ </button>
186
+ </form>
187
+ </div>
188
+ </div>
189
+
190
+ <div class="lg:w-1/2">
191
+ <div class="bg-gray-100 p-6 rounded-lg">
192
+ <h3 class="text-xl font-bold mb-4 text-red-700">Seu Pedido</h3>
193
+ <div id="cart-items" class="mb-4">
194
+ <!-- Cart items will be loaded here -->
195
+ <p class="text-gray-500 text-center py-8">Seu carrinho está vazio</p>
196
+ </div>
197
+ <div class="border-t border-gray-300 pt-4">
198
+ <div class="flex justify-between mb-2">
199
+ <span class="font-semibold">Subtotal:</span>
200
+ <span id="subtotal">R$ 0,00</span>
201
+ </div>
202
+ <div class="flex justify-between mb-2">
203
+ <span class="font-semibold">Taxa de Entrega:</span>
204
+ <span id="delivery-fee">R$ 8,00</span>
205
+ </div>
206
+ <div class="flex justify-between text-lg font-bold">
207
+ <span>Total:</span>
208
+ <span id="total">R$ 8,00</span>
209
+ </div>
210
+ </div>
211
+ </div>
212
+ </div>
213
+ </div>
214
+ </div>
215
+ </section>
216
+
217
+ <!-- About Section -->
218
+ <section id="about" class="py-12 bg-gray-100">
219
+ <div class="container mx-auto px-4">
220
+ <div class="flex flex-col lg:flex-row items-center gap-12">
221
+ <div class="lg:w-1/2">
222
+ <img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?ixlib=rb-4.0.3" alt="Pizzaiolo preparando pizza" class="rounded-lg shadow-lg w-full">
223
+ </div>
224
+ <div class="lg:w-1/2">
225
+ <h2 class="text-3xl font-bold mb-6 text-red-700">Nossa História</h2>
226
+ <p class="text-gray-700 mb-4">Fundada em 1995, a Pizzaria Sabor Italiano nasceu do sonho de trazer para o Brasil a autêntica pizza napolitana, preparada com técnicas tradicionais e ingredientes selecionados.</p>
227
+ <p class="text-gray-700 mb-4">Nosso mestre pizzaiolo, Giovanni Rossi, veio diretamente de Nápoles para compartilhar seu conhecimento e paixão pela verdadeira pizza italiana.</p>
228
+ <p class="text-gray-700 mb-6">Hoje, continuamos mantendo viva essa tradição, assando nossas pizzas em forno a lenha e usando apenas ingredientes frescos e de alta qualidade.</p>
229
+ <div class="flex flex-col sm:flex-row gap-4">
230
+ <div class="bg-white p-4 rounded-lg shadow-sm flex items-center">
231
+ <i class="fas fa-fire text-2xl text-red-600 mr-3"></i>
232
+ <div>
233
+ <h4 class="font-bold">Forno a Lenha</h4>
234
+ <p class="text-sm text-gray-600">Temperatura ideal para pizza</p>
235
+ </div>
236
+ </div>
237
+ <div class="bg-white p-4 rounded-lg shadow-sm flex items-center">
238
+ <i class="fas fa-wheat-alt text-2xl text-red-600 mr-3"></i>
239
+ <div>
240
+ <h4 class="font-bold">Massa Artesanal</h4>
241
+ <p class="text-sm text-gray-600">Feita diariamente</p>
242
+ </div>
243
+ </div>
244
+ </div>
245
+ </div>
246
+ </div>
247
+ </div>
248
+ </section>
249
+
250
+ <!-- Contact Section -->
251
+ <section id="contact" class="py-12 bg-white">
252
+ <div class="container mx-auto px-4">
253
+ <h2 class="text-3xl font-bold text-center mb-12 text-red-700">Entre em Contato</h2>
254
+
255
+ <div class="flex flex-col lg:flex-row gap-8">
256
+ <div class="lg:w-1/2">
257
+ <div class="bg-gray-100 p-6 rounded-lg h-full">
258
+ <h3 class="text-xl font-bold mb-4 text-red-700">Informações de Contato</h3>
259
+
260
+ <div class="space-y-4">
261
+ <div class="flex items-start">
262
+ <i class="fas fa-map-marker-alt text-red-600 mt-1 mr-3"></i>
263
+ <div>
264
+ <h4 class="font-semibold">Endereço</h4>
265
+ <p class="text-gray-600">Rua das Pizzas, 123 - Centro, São Paulo - SP</p>
266
+ </div>
267
+ </div>
268
+
269
+ <div class="flex items-start">
270
+ <i class="fas fa-phone-alt text-red-600 mt-1 mr-3"></i>
271
+ <div>
272
+ <h4 class="font-semibold">Telefone</h4>
273
+ <p class="text-gray-600">(11) 1234-5678</p>
274
+ <p class="text-gray-600">WhatsApp: (11) 98765-4321</p>
275
+ </div>
276
+ </div>
277
+
278
+ <div class="flex items-start">
279
+ <i class="fas fa-envelope text-red-600 mt-1 mr-3"></i>
280
+ <div>
281
+ <h4 class="font-semibold">Email</h4>
282
+ <p class="text-gray-600">contato@saboritaliano.com.br</p>
283
+ </div>
284
+ </div>
285
+
286
+ <div class="flex items-start">
287
+ <i class="fas fa-clock text-red-600 mt-1 mr-3"></i>
288
+ <div>
289
+ <h4 class="font-semibold">Horário de Funcionamento</h4>
290
+ <p class="text-gray-600">Terça a Domingo: 18h - 23h</p>
291
+ <p class="text-gray-600">Sexta e Sábado: 18h - 00h</p>
292
+ </div>
293
+ </div>
294
+ </div>
295
+
296
+ <div class="mt-6">
297
+ <h4 class="font-semibold mb-2">Siga-nos</h4>
298
+ <div class="flex space-x-4">
299
+ <a href="#" class="text-red-600 hover:text-red-800 text-2xl"><i class="fab fa-facebook"></i></a>
300
+ <a href="#" class="text-red-600 hover:text-red-800 text-2xl"><i class="fab fa-instagram"></i></a>
301
+ <a href="#" class="text-red-600 hover:text-red-800 text-2xl"><i class="fab fa-whatsapp"></i></a>
302
+ </div>
303
+ </div>
304
+ </div>
305
+ </div>
306
+
307
+ <div class="lg:w-1/2">
308
+ <div class="bg-gray-100 p-6 rounded-lg h-full">
309
+ <h3 class="text-xl font-bold mb-4 text-red-700">Mensagem</h3>
310
+ <form id="contact-form">
311
+ <div class="mb-4">
312
+ <label class="block text-gray-700 mb-2" for="contact-name">Nome</label>
313
+ <input type="text" id="contact-name" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500" required>
314
+ </div>
315
+ <div class="mb-4">
316
+ <label class="block text-gray-700 mb-2" for="contact-email">Email</label>
317
+ <input type="email" id="contact-email" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500" required>
318
+ </div>
319
+ <div class="mb-4">
320
+ <label class="block text-gray-700 mb-2" for="contact-subject">Assunto</label>
321
+ <input type="text" id="contact-subject" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500" required>
322
+ </div>
323
+ <div class="mb-4">
324
+ <label class="block text-gray-700 mb-2" for="contact-message">Mensagem</label>
325
+ <textarea id="contact-message" rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500" required></textarea>
326
+ </div>
327
+ <button type="submit" class="w-full bg-red-700 hover:bg-red-800 text-white font-bold py-3 px-4 rounded-md transition duration-300">
328
+ Enviar Mensagem
329
+ </button>
330
+ </form>
331
+ </div>
332
+ </div>
333
+ </div>
334
+ </div>
335
+ </section>
336
+
337
+ <!-- Pizza Detail Modal -->
338
+ <div id="pizza-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
339
+ <div class="bg-white rounded-lg max-w-4xl w-full max-h-[90vh] overflow-y-auto">
340
+ <div class="pizza-detail text-white p-6 rounded-t-lg">
341
+ <div class="flex justify-between items-start">
342
+ <div>
343
+ <h2 id="modal-pizza-name" class="text-3xl font-bold mb-2">Nome da Pizza</h2>
344
+ <p id="modal-pizza-category" class="bg-white text-red-700 px-2 py-1 rounded-full text-xs inline-block mb-4">Categoria</p>
345
+ </div>
346
+ <button id="close-modal" class="text-white hover:text-yellow-300 text-2xl">&times;</button>
347
+ </div>
348
+ <p id="modal-pizza-description" class="mb-4">Descrição da pizza</p>
349
+ <div class="flex items-center">
350
+ <span id="modal-pizza-price" class="text-2xl font-bold mr-4">R$ 00,00</span>
351
+ <div class="flex items-center bg-white bg-opacity-20 rounded-full px-3 py-1">
352
+ <i class="fas fa-star text-yellow-300 mr-1"></i>
353
+ <span>4.9</span>
354
+ </div>
355
+ </div>
356
+ </div>
357
+
358
+ <div class="p-6">
359
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
360
+ <div>
361
+ <img id="modal-pizza-image" src="https://images.unsplash.com/photo-1513104890138-7c749659a591?ixlib=rb-4.0.3" alt="Pizza" class="w-full rounded-lg">
362
+ </div>
363
+ <div>
364
+ <h3 class="text-xl font-bold mb-4 text-red-700">Ingredientes</h3>
365
+ <ul id="modal-pizza-ingredients" class="list-disc pl-5 space-y-2">
366
+ <!-- Ingredients will be added here -->
367
+ </ul>
368
+
369
+ <div class="mt-8">
370
+ <h3 class="text-xl font-bold mb-4 text-red-700">Tamanho</h3>
371
+ <div class="flex space-x-4 mb-4">
372
+ <label class="flex items-center">
373
+ <input type="radio" name="size" value="small" class="h-4 w-4 text-red-600 focus:ring-red-500" checked>
374
+ <span class="ml-2">Pequena (30cm)</span>
375
+ </label>
376
+ <label class="flex items-center">
377
+ <input type="radio" name="size" value="medium" class="h-4 w-4 text-red-600 focus:ring-red-500">
378
+ <span class="ml-2">Média (35cm)</span>
379
+ </label>
380
+ <label class="flex items-center">
381
+ <input type="radio" name="size" value="large" class="h-4 w-4 text-red-600 focus:ring-red-500">
382
+ <span class="ml-2">Grande (40cm)</span>
383
+ </label>
384
+ </div>
385
+
386
+ <h3 class="text-xl font-bold mb-4 text-red-700">Adicionais</h3>
387
+ <div class="space-y-2">
388
+ <label class="flex items-center">
389
+ <input type="checkbox" class="h-4 w-4 text-red-600 focus:ring-red-500" value="extra-cheese">
390
+ <span class="ml-2">Queijo Extra (+R$ 5,00)</span>
391
+ </label>
392
+ <label class="flex items-center">
393
+ <input type="checkbox" class="h-4 w-4 text-red-600 focus:ring-red-500" value="pepperoni">
394
+ <span class="ml-2">Pepperoni Extra (+R$ 7,00)</span>
395
+ </label>
396
+ <label class="flex items-center">
397
+ <input type="checkbox" class="h-4 w-4 text-red-600 focus:ring-red-500" value="mushrooms">
398
+ <span class="ml-2">Cogumelos Extra (+R$ 4,00)</span>
399
+ </label>
400
+ </div>
401
+ </div>
402
+ </div>
403
+ </div>
404
+
405
+ <div class="flex justify-between items-center border-t border-gray-200 pt-4">
406
+ <div class="flex items-center">
407
+ <button id="decrease-quantity" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded-l">
408
+ -
409
+ </button>
410
+ <span id="quantity" class="bg-gray-100 px-4 py-2">1</span>
411
+ <button id="increase-quantity" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded-r">
412
+ +
413
+ </button>
414
+ </div>
415
+ <button id="add-to-cart" class="bg-red-700 hover:bg-red-800 text-white font-bold py-3 px-6 rounded-full transition duration-300">
416
+ Adicionar ao Carrinho - R$ <span id="modal-total-price">00,00</span>
417
+ </button>
418
+ </div>
419
+ </div>
420
+ </div>
421
+ </div>
422
+
423
+ <!-- Cart Sidebar -->
424
+ <div id="cart-sidebar" class="fixed top-0 right-0 h-full w-full md:w-96 bg-white shadow-lg transform translate-x-full transition-transform duration-300 ease-in-out z-50 overflow-y-auto">
425
+ <div class="p-6">
426
+ <div class="flex justify-between items-center mb-6">
427
+ <h2 class="text-2xl font-bold text-red-700">Seu Carrinho</h2>
428
+ <button id="close-cart" class="text-gray-500 hover:text-red-700 text-2xl">&times;</button>
429
+ </div>
430
+
431
+ <div id="sidebar-cart-items">
432
+ <!-- Cart items will be loaded here -->
433
+ <p class="text-gray-500 text-center py-8">Seu carrinho está vazio</p>
434
+ </div>
435
+
436
+ <div class="border-t border-gray-300 pt-4 mt-4">
437
+ <div class="flex justify-between mb-2">
438
+ <span class="font-semibold">Subtotal:</span>
439
+ <span id="sidebar-subtotal">R$ 0,00</span>
440
+ </div>
441
+ <div class="flex justify-between mb-2">
442
+ <span class="font-semibold">Taxa de Entrega:</span>
443
+ <span id="sidebar-delivery-fee">R$ 8,00</span>
444
+ </div>
445
+ <div class="flex justify-between text-lg font-bold">
446
+ <span>Total:</span>
447
+ <span id="sidebar-total">R$ 8,00</span>
448
+ </div>
449
+ </div>
450
+
451
+ <a href="#delivery" id="checkout-btn" class="block w-full bg-red-700 hover:bg-red-800 text-white font-bold py-3 px-4 rounded-md text-center mt-6 transition duration-300">
452
+ Finalizar Pedido
453
+ </a>
454
+
455
+ <button id="continue-shopping" class="block w-full bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-3 px-4 rounded-md text-center mt-4 transition duration-300">
456
+ Continuar Comprando
457
+ </button>
458
+ </div>
459
+ </div>
460
+
461
+ <!-- Order Confirmation Modal -->
462
+ <div id="order-confirmation" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
463
+ <div class="bg-white rounded-lg max-w-md w-full p-6 text-center">
464
+ <div class="text-green-500 text-6xl mb-4">
465
+ <i class="fas fa-check-circle"></i>
466
+ </div>
467
+ <h2 class="text-2xl font-bold mb-4 text-red-700">Pedido Confirmado!</h2>
468
+ <p class="mb-6">Seu pedido foi recebido e está sendo preparado. Obrigado por escolher a Pizzaria Sabor Italiano!</p>
469
+ <p class="font-semibold mb-2">Número do Pedido: <span id="order-number" class="text-red-700">#12345</span></p>
470
+ <p class="mb-6">Tempo estimado de entrega: <span class="font-semibold">45 minutos</span></p>
471
+ <button id="close-confirmation" class="bg-red-700 hover:bg-red-800 text-white font-bold py-2 px-6 rounded-full transition duration-300">
472
+ Fechar
473
+ </button>
474
+ </div>
475
+ </div>
476
+
477
+ <!-- Footer -->
478
+ <footer class="bg-gray-900 text-white py-12">
479
+ <div class="container mx-auto px-4">
480
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
481
+ <div>
482
+ <h3 class="text-xl font-bold mb-4 flex items-center">
483
+ <i class="fas fa-pizza-slice text-2xl mr-2"></i> Sabor Italiano
484
+ </h3>
485
+ <p class="text-gray-400">Autêntica pizza italiana com delivery rápido ou retirada no balcão.</p>
486
+ </div>
487
+
488
+ <div>
489
+ <h4 class="text-lg font-semibold mb-4">Links Rápidos</h4>
490
+ <ul class="space-y-2">
491
+ <li><a href="#home" class="text-gray-400 hover:text-white transition">Início</a></li>
492
+ <li><a href="#menu" class="text-gray-400 hover:text-white transition">Cardápio</a></li>
493
+ <li><a href="#about" class="text-gray-400 hover:text-white transition">Sobre N��s</a></li>
494
+ <li><a href="#contact" class="text-gray-400 hover:text-white transition">Contato</a></li>
495
+ </ul>
496
+ </div>
497
+
498
+ <div>
499
+ <h4 class="text-lg font-semibold mb-4">Horário de Funcionamento</h4>
500
+ <ul class="space-y-2 text-gray-400">
501
+ <li class="flex justify-between"><span>Terça - Quinta:</span> <span>18h - 23h</span></li>
502
+ <li class="flex justify-between"><span>Sexta - Sábado:</span> <span>18h - 00h</span></li>
503
+ <li class="flex justify-between"><span>Domingo:</span> <span>18h - 22h</span></li>
504
+ <li class="flex justify-between"><span>Segunda:</span> <span>Fechado</span></li>
505
+ </ul>
506
+ </div>
507
+
508
+ <div>
509
+ <h4 class="text-lg font-semibold mb-4">Newsletter</h4>
510
+ <p class="text-gray-400 mb-4">Inscreva-se para receber promoções especiais!</p>
511
+ <form class="flex">
512
+ <input type="email" placeholder="Seu email" class="px-3 py-2 bg-gray-800 text-white rounded-l-md focus:outline-none focus:ring-1 focus:ring-red-500 w-full">
513
+ <button type="submit" class="bg-red-700 hover:bg-red-800 px-4 rounded-r-md">
514
+ <i class="fas fa-paper-plane"></i>
515
+ </button>
516
+ </form>
517
+ <div class="flex space-x-4 mt-4">
518
+ <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-facebook"></i></a>
519
+ <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-instagram"></i></a>
520
+ <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-whatsapp"></i></a>
521
+ </div>
522
+ </div>
523
+ </div>
524
+
525
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
526
+ <p>&copy; 2023 Pizzaria Sabor Italiano. Todos os direitos reservados.</p>
527
+ </div>
528
+ </div>
529
+ </footer>
530
+
531
+ <script>
532
+ // Pizza Data
533
+ const pizzas = [
534
+ {
535
+ id: 1,
536
+ name: "Margherita",
537
+ category: "classic",
538
+ price: 45.90,
539
+ description: "A clássica pizza Margherita com molho de tomate, mussarela fresca, manjericão e azeite de oliva.",
540
+ ingredients: ["Molho de tomate", "Mussarela fresca", "Manjericão fresco", "Azeite de oliva extra virgem"],
541
+ image: "https://images.unsplash.com/photo-1574071318508-1cdbab80d002?ixlib=rb-4.0.3",
542
+ rating: 4.8
543
+ },
544
+ {
545
+ id: 2,
546
+ name: "Pepperoni",
547
+ category: "classic",
548
+ price: 52.90,
549
+ description: "Pizza com molho de tomate, mussarela e pepperoni em fatias finas.",
550
+ ingredients: ["Molho de tomate", "Mussarela", "Pepperoni", "Orégano"],
551
+ image: "https://images.unsplash.com/photo-1627626775846-122b778965ce?ixlib=rb-4.0.3",
552
+ rating: 4.9
553
+ },
554
+ {
555
+ id: 3,
556
+ name: "Quatro Queijos",
557
+ category: "classic",
558
+ price: 58.90,
559
+ description: "Combinação perfeita de quatro queijos: mussarela, gorgonzola, parmesão e provolone.",
560
+ ingredients: ["Molho de tomate", "Mussarela", "Gorgonzola", "Parmesão", "Provolone"],
561
+ image: "https://images.unsplash.com/photo-1601924582970-9238bcb495d9?ixlib=rb-4.0.3",
562
+ rating: 4.7
563
+ },
564
+ {
565
+ id: 4,
566
+ name: "Calabresa",
567
+ category: "classic",
568
+ price: 49.90,
569
+ description: "Pizza tradicional com calabresa fatiada, cebola e mussarela.",
570
+ ingredients: ["Molho de tomate", "Mussarela", "Calabresa", "Cebola"],
571
+ image: "https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?ixlib=rb-4.0.3",
572
+ rating: 4.6
573
+ },
574
+ {
575
+ id: 5,
576
+ name: "Frango com Catupiry",
577
+ category: "special",
578
+ price: 62.90,
579
+ description: "Deliciosa combinação de frango desfiado com cremoso catupiry.",
580
+ ingredients: ["Molho de tomate", "Mussarela", "Frango desfiado", "Catupiry", "Orégano"],
581
+ image: "https://images.unsplash.com/photo-1653277449107-7b5373f0a1a1?ixlib=rb-4.0.3",
582
+ rating: 4.9
583
+ },
584
+ {
585
+ id: 6,
586
+ name: "Portuguesa",
587
+ category: "special",
588
+ price: 65.90,
589
+ description: "Pizza com presunto, mussarela, ovos, cebola, azeitonas e pimentão.",
590
+ ingredients: ["Molho de tomate", "Mussarela", "Presunto", "Ovos", "Cebola", "Azeitonas", "Pimentão"],
591
+ image: "https://images.unsplash.com/photo-1565299507177-b0ac66763828?ixlib=rb-4.0.3",
592
+ rating: 4.7
593
+ },
594
+ {
595
+ id: 7,
596
+ name: "Vegetariana",
597
+ category: "special",
598
+ price: 59.90,
599
+ description: "Pizza repleta de vegetais frescos: berinjela, abobrinha, pimentão e cebola.",
600
+ ingredients: ["Molho de tomate", "Mussarela", "Berinjela", "Abobrinha", "Pimentão", "Cebola", "Azeitonas"],
601
+ image: "https://images.unsplash.com/photo-1541745537411-b8046dc6d66c?ixlib=rb-4.0.3",
602
+ rating: 4.8
603
+ },
604
+ {
605
+ id: 8,
606
+ name: "Napolitana",
607
+ category: "special",
608
+ price: 68.90,
609
+ description: "Autêntica pizza napolitana com anchovas, alcaparras e azeitonas pretas.",
610
+ ingredients: ["Molho de tomate", "Mussarela de búfala", "Anchovas", "Alcaparras", "Azeitonas pretas", "Manjericão"],
611
+ image: "https://images.unsplash.com/photo-1593504049359-74330189a345?ixlib=rb-4.0.3",
612
+ rating: 4.9
613
+ },
614
+ {
615
+ id: 9,
616
+ name: "Romeu e Julieta",
617
+ category: "dessert",
618
+ price: 48.90,
619
+ description: "Doce combinação de queijo minas e goiabada.",
620
+ ingredients: ["Queijo minas", "Goiabada", "Açúcar de confeiteiro"],
621
+ image: "https://images.unsplash.com/photo-1627626775846-122b778965ce?ixlib=rb-4.0.3",
622
+ rating: 4.8
623
+ },
624
+ {
625
+ id: 10,
626
+ name: "Banana com Canela",
627
+ category: "dessert",
628
+ price: 42.90,
629
+ description: "Pizza doce com banana, canela e leite condensado.",
630
+ ingredients: ["Banana", "Canela", "Leite condensado", "Açúcar mascavo"],
631
+ image: "https://images.unsplash.com/photo-1601924582970-9238bcb495d9?ixlib=rb-4.0.3",
632
+ rating: 4.7
633
+ }
634
+ ];
635
+
636
+ // Cart
637
+ let cart = [];
638
+ const deliveryFee = 8.00;
639
+
640
+ // DOM Elements
641
+ const pizzaMenu = document.getElementById('pizza-menu');
642
+ const cartButton = document.getElementById('cart-button');
643
+ const cartCount = document.getElementById('cart-count');
644
+ const cartSidebar = document.getElementById('cart-sidebar');
645
+ const closeCart = document.getElementById('close-cart');
646
+ const continueShopping = document.getElementById('continue-shopping');
647
+ const sidebarCartItems = document.getElementById('sidebar-cart-items');
648
+ const sidebarSubtotal = document.getElementById('sidebar-subtotal');
649
+ const sidebarTotal = document.getElementById('sidebar-total');
650
+ const sidebarDeliveryFee = document.getElementById('sidebar-delivery-fee');
651
+ const pizzaModal = document.getElementById('pizza-modal');
652
+ const closeModal = document.getElementById('close-modal');
653
+ const modalPizzaName = document.getElementById('modal-pizza-name');
654
+ const modalPizzaCategory = document.getElementById('modal-pizza-category');
655
+ const modalPizzaDescription = document.getElementById('modal-pizza-description');
656
+ const modalPizzaPrice = document.getElementById('modal-pizza-price');
657
+ const modalPizzaImage = document.getElementById('modal-pizza-image');
658
+ const modalPizzaIngredients = document.getElementById('modal-pizza-ingredients');
659
+ const quantityElement = document.getElementById('quantity');
660
+ const decreaseQuantity = document.getElementById('decrease-quantity');
661
+ const increaseQuantity = document.getElementById('increase-quantity');
662
+ const addToCart = document.getElementById('add-to-cart');
663
+ const modalTotalPrice = document.getElementById('modal-total-price');
664
+ const categoryButtons = document.querySelectorAll('.category-btn');
665
+ const cartItems = document.getElementById('cart-items');
666
+ const subtotal = document.getElementById('subtotal');
667
+ const total = document.getElementById('total');
668
+ const deliveryForm = document.getElementById('delivery-form');
669
+ const orderConfirmation = document.getElementById('order-confirmation');
670
+ const closeConfirmation = document.getElementById('close-confirmation');
671
+ const orderNumber = document.getElementById('order-number');
672
+ const checkoutBtn = document.getElementById('checkout-btn');
673
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
674
+ const mobileMenu = document.getElementById('mobile-menu');
675
+
676
+ // Current pizza being viewed in modal
677
+ let currentPizza = null;
678
+ let currentQuantity = 1;
679
+ let currentSize = 'small';
680
+ let currentExtras = [];
681
+
682
+ // Initialize
683
+ document.addEventListener('DOMContentLoaded', () => {
684
+ loadMenu('all');
685
+ setupEventListeners();
686
+ });
687
+
688
+ // Load menu based on category
689
+ function loadMenu(category) {
690
+ pizzaMenu.innerHTML = '';
691
+
692
+ const filteredPizzas = category === 'all'
693
+ ? pizzas
694
+ : pizzas.filter(pizza => pizza.category === category);
695
+
696
+ filteredPizzas.forEach(pizza => {
697
+ const pizzaCard = document.createElement('div');
698
+ pizzaCard.className = 'pizza-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition cursor-pointer';
699
+ pizzaCard.dataset.id = pizza.id;
700
+
701
+ pizzaCard.innerHTML = `
702
+ <div class="relative">
703
+ <img src="${pizza.image}" alt="${pizza.name}" class="w-full h-48 object-cover">
704
+ <span class="absolute top-2 right-2 bg-white text-red-700 px-2 py-1 rounded-full text-xs">${getCategoryName(pizza.category)}</span>
705
+ </div>
706
+ <div class="p-4">
707
+ <div class="flex justify-between items-start mb-2">
708
+ <h3 class="text-xl font-bold text-gray-800">${pizza.name}</h3>
709
+ <span class="text-lg font-bold text-red-700">R$ ${pizza.price.toFixed(2).replace('.', ',')}</span>
710
+ </div>
711
+ <p class="text-gray-600 text-sm mb-4">${pizza.description}</p>
712
+ <div class="flex justify-between items-center">
713
+ <div class="flex items-center">
714
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
715
+ <span class="text-sm">${pizza.rating}</span>
716
+ </div>
717
+ <button class="view-details-btn bg-red-700 hover:bg-red-800 text-white text-sm font-bold py-2 px-4 rounded-full transition duration-300" data-id="${pizza.id}">
718
+ Ver Detalhes
719
+ </button>
720
+ </div>
721
+ </div>
722
+ `;
723
+
724
+ pizzaMenu.appendChild(pizzaCard);
725
+ });
726
+
727
+ // Add event listeners to view details buttons
728
+ document.querySelectorAll('.view-details-btn').forEach(button => {
729
+ button.addEventListener('click', (e) => {
730
+ e.stopPropagation();
731
+ const pizzaId = parseInt(button.dataset.id);
732
+ showPizzaDetails(pizzaId);
733
+ });
734
+ });
735
+
736
+ // Add event listeners to pizza cards
737
+ document.querySelectorAll('.pizza-card').forEach(card => {
738
+ card.addEventListener('click', () => {
739
+ const pizzaId = parseInt(card.dataset.id);
740
+ showPizzaDetails(pizzaId);
741
+ });
742
+ });
743
+ }
744
+
745
+ // Get category name
746
+ function getCategoryName(category) {
747
+ switch(category) {
748
+ case 'classic': return 'Clássica';
749
+ case 'special': return 'Especial';
750
+ case 'dessert': return 'Sobremesa';
751
+ default: return '';
752
+ }
753
+ }
754
+
755
+ // Show pizza details in modal
756
+ function showPizzaDetails(pizzaId) {
757
+ currentPizza = pizzas.find(pizza => pizza.id === pizzaId);
758
+ currentQuantity = 1;
759
+ currentSize = 'small';
760
+ currentExtras = [];
761
+
762
+ modalPizzaName.textContent = currentPizza.name;
763
+ modalPizzaCategory.textContent = getCategoryName(currentPizza.category);
764
+ modalPizzaDescription.textContent = currentPizza.description;
765
+ modalPizzaPrice.textContent = `R$ ${currentPizza.price.toFixed(2).replace('.', ',')}`;
766
+ modalPizzaImage.src = currentPizza.image;
767
+ modalPizzaImage.alt = currentPizza.name;
768
+
769
+ // Clear ingredients list
770
+ modalPizzaIngredients.innerHTML = '';
771
+
772
+ // Add ingredients
773
+ currentPizza.ingredients.forEach(ingredient => {
774
+ const li = document.createElement('li');
775
+ li.textContent = ingredient;
776
+ modalPizzaIngredients.appendChild(li);
777
+ });
778
+
779
+ // Reset quantity
780
+ quantityElement.textContent = currentQuantity;
781
+
782
+ // Calculate total price
783
+ updateModalTotalPrice();
784
+
785
+ // Show modal
786
+ pizzaModal.classList.remove('hidden');
787
+ }
788
+
789
+ // Update modal total price
790
+ function updateModalTotalPrice() {
791
+ let price = currentPizza.price;
792
+
793
+ // Size adjustments
794
+ if (currentSize === 'medium') price += 5;
795
+ if (currentSize === 'large') price += 10;
796
+
797
+ // Extras
798
+ currentExtras.forEach(extra => {
799
+ if (extra === 'extra-cheese') price += 5;
800
+ if (extra === 'pepperoni') price += 7;
801
+ if (extra === 'mushrooms') price += 4;
802
+ });
803
+
804
+ // Quantity
805
+ price *= currentQuantity;
806
+
807
+ modalTotalPrice.textContent = price.toFixed(2).replace('.', ',');
808
+ }
809
+
810
+ // Add to cart
811
+ function addPizzaToCart() {
812
+ let price = currentPizza.price;
813
+
814
+ // Size adjustments
815
+ if (currentSize === 'medium') price += 5;
816
+ if (currentSize === 'large') price += 10;
817
+
818
+ // Extras
819
+ const extras = [];
820
+ currentExtras.forEach(extra => {
821
+ if (extra === 'extra-cheese') {
822
+ price += 5;
823
+ extras.push('Queijo Extra');
824
+ }
825
+ if (extra === 'pepperoni') {
826
+ price += 7;
827
+ extras.push('Pepperoni Extra');
828
+ }
829
+ if (extra === 'mushrooms') {
830
+ price += 4;
831
+ extras.push('Cogumelos Extra');
832
+ }
833
+ });
834
+
835
+ // Add to cart
836
+ cart.push({
837
+ id: currentPizza.id,
838
+ name: currentPizza.name,
839
+ price: price,
840
+ quantity: currentQuantity,
841
+ size: currentSize,
842
+ extras: extras
843
+ });
844
+
845
+ // Update cart count
846
+ updateCartCount();
847
+
848
+ // Update cart display
849
+ updateCartDisplay();
850
+
851
+ // Close modal
852
+ pizzaModal.classList.add('hidden');
853
+
854
+ // Show success message
855
+ alert(`${currentPizza.name} foi adicionada ao carrinho!`);
856
+ }
857
+
858
+ // Update cart count
859
+ function updateCartCount() {
860
+ const count = cart.reduce((total, item) => total + item.quantity, 0);
861
+ cartCount.textContent = count;
862
+ }
863
+
864
+ // Update cart display
865
+ function updateCartDisplay() {
866
+ // Sidebar cart
867
+ if (cart.length === 0) {
868
+ sidebarCartItems.innerHTML = '<p class="text-gray-500 text-center py-8">Seu carrinho está vazio</p>';
869
+ checkoutBtn.classList.add('opacity-50', 'cursor-not-allowed');
870
+ checkoutBtn.disabled = true;
871
+ } else {
872
+ sidebarCartItems.innerHTML = '';
873
+
874
+ cart.forEach((item, index) => {
875
+ const cartItem = document.createElement('div');
876
+ cartItem.className = 'cart-item bg-white p-4 rounded-lg mb-4 shadow-sm';
877
+
878
+ cartItem.innerHTML = `
879
+ <div class="flex justify-between items-start mb-2">
880
+ <h4 class="font-bold">${item.name}</h4>
881
+ <button class="remove-item text-red-600 hover:text-red-800" data-index="${index}">
882
+ <i class="fas fa-times"></i>
883
+ </button>
884
+ </div>
885
+ <div class="text-sm text-gray-600 mb-2">
886
+ ${item.size === 'small' ? 'Pequena' : item.size === 'medium' ? 'Média' : 'Grande'}${item.extras.length > 0 ? ' • ' + item.extras.join(', ') : ''}
887
+ </div>
888
+ <div class="flex justify-between items-center">
889
+ <div class="flex items-center">
890
+ <button class="decrease-quantity text-gray-500 hover:text-red-700 px-2" data-index="${index}">
891
+ <i class="fas fa-minus text-xs"></i>
892
+ </button>
893
+ <span class="mx-2">${item.quantity}</span>
894
+ <button class="increase-quantity text-gray-500 hover:text-red-700 px-2" data-index="${index}">
895
+ <i class="fas fa-plus text-xs"></i>
896
+ </button>
897
+ </div>
898
+ <span class="font-semibold">R$ ${(item.price * item.quantity).toFixed(2).replace('.', ',')}</span>
899
+ </div>
900
+ `;
901
+
902
+ sidebarCartItems.appendChild(cartItem);
903
+ });
904
+
905
+ checkoutBtn.classList.remove('opacity-50', 'cursor-not-allowed');
906
+ checkoutBtn.disabled = false;
907
+ }
908
+
909
+ // Calculate totals
910
+ calculateTotals();
911
+
912
+ // Delivery section cart
913
+ if (cart.length === 0) {
914
+ cartItems.innerHTML = '<p class="text-gray-500 text-center py-8">Seu carrinho está vazio</p>';
915
+ } else {
916
+ cartItems.innerHTML = '';
917
+
918
+ cart.forEach((item, index) => {
919
+ const cartItem = document.createElement('div');
920
+ cartItem.className = 'cart-item bg-white p-4 rounded-lg mb-4 shadow-sm';
921
+
922
+ cartItem.innerHTML = `
923
+ <div class="flex justify-between items-start mb-2">
924
+ <h4 class="font-bold">${item.name}</h4>
925
+ <button class="remove-item text-red-600 hover:text-red-800" data-index="${index}">
926
+ <i class="fas fa-times"></i>
927
+ </button>
928
+ </div>
929
+ <div class="text-sm text-gray-600 mb-2">
930
+ ${item.size === 'small' ? 'Pequena' : item.size === 'medium' ? 'Média' : 'Grande'}${item.extras.length > 0 ? ' • ' + item.extras.join(', ') : ''}
931
+ </div>
932
+ <div class="flex justify-between items-center">
933
+ <div class="flex items-center">
934
+ <button class="decrease-quantity text-gray-500 hover:text-red-700 px-2" data-index="${index}">
935
+ <i class="fas fa-minus text-xs"></i>
936
+ </button>
937
+ <span class="mx-2">${item.quantity}</span>
938
+ <button class="increase-quantity text-gray-500 hover:text-red-700 px-2" data-index="${index}">
939
+ <i class="fas fa-plus text-xs"></i>
940
+ </button>
941
+ </div>
942
+ <span class="font-semibold">R$ ${(item.price * item.quantity).toFixed(2).replace('.', ',')}</span>
943
+ </div>
944
+ `;
945
+
946
+ cartItems.appendChild(cartItem);
947
+ });
948
+ }
949
+
950
+ // Add event listeners to remove buttons
951
+ document.querySelectorAll('.remove-item').forEach(button => {
952
+ button.addEventListener('click', (e) => {
953
+ e.stopPropagation();
954
+ const index = parseInt(button.dataset.index);
955
+ cart.splice(index, 1);
956
+ updateCartCount();
957
+ updateCartDisplay();
958
+ });
959
+ });
960
+
961
+ // Add event listeners to quantity buttons
962
+ document.querySelectorAll('.decrease-quantity').forEach(button => {
963
+ button.addEventListener('click', (e) => {
964
+ e.stopPropagation();
965
+ const index = parseInt(button.dataset.index);
966
+ if (cart[index].quantity > 1) {
967
+ cart[index].quantity--;
968
+ updateCartCount();
969
+ updateCartDisplay();
970
+ }
971
+ });
972
+ });
973
+
974
+ document.querySelectorAll('.increase-quantity').forEach(button => {
975
+ button.addEventListener('click', (e) => {
976
+ e.stopPropagation();
977
+ const index = parseInt(button.dataset.index);
978
+ cart[index].quantity++;
979
+ updateCartCount();
980
+ updateCartDisplay();
981
+ });
982
+ });
983
+ }
984
+
985
+ // Calculate totals
986
+ function calculateTotals() {
987
+ const subtotalValue = cart.reduce((total, item) => total + (item.price * item.quantity), 0);
988
+ const totalValue = subtotalValue + deliveryFee;
989
+
990
+ // Sidebar
991
+ sidebarSubtotal.textContent = `R$ ${subtotalValue.toFixed(2).replace('.', ',')}`;
992
+ sidebarDeliveryFee.textContent = `R$ ${deliveryFee.toFixed(2).replace('.', ',')}`;
993
+ sidebarTotal.textContent = `R$ ${totalValue.toFixed(2).replace('.', ',')}`;
994
+
995
+ // Delivery section
996
+ subtotal.textContent = `R$ ${subtotalValue.toFixed(2).replace('.', ',')}`;
997
+ total.textContent = `R$ ${totalValue.toFixed(2).replace('.', ',')}`;
998
+ }
999
+
1000
+ // Submit delivery form
1001
+ function submitDeliveryForm(e) {
1002
+ e.preventDefault();
1003
+
1004
+ if (cart.length === 0) {
1005
+ alert('Seu carrinho está vazio. Adicione itens antes de finalizar o pedido.');
1006
+ return;
1007
+ }
1008
+
1009
+ // In a real application, you would send this data to your backend
1010
+ const orderData = {
1011
+ customer: {
1012
+ name: document.getElementById('name').value,
1013
+ phone: document.getElementById('phone').value,
1014
+ address: document.getElementById('address').value,
1015
+ complement: document.getElementById('complement').value
1016
+ },
1017
+ payment: document.getElementById('payment').value,
1018
+ notes: document.getElementById('notes').value,
1019
+ items: cart,
1020
+ subtotal: cart.reduce((total, item) => total + (item.price * item.quantity), 0),
1021
+ deliveryFee: deliveryFee,
1022
+ total: cart.reduce((total, item) => total + (item.price * item.quantity), 0) + deliveryFee,
1023
+ date: new Date().toISOString()
1024
+ };
1025
+
1026
+ // Generate random order number
1027
+ const randomOrderNumber = Math.floor(Math.random() * 90000) + 10000;
1028
+ orderNumber.textContent = `#${randomOrderNumber}`;
1029
+
1030
+ // Show confirmation modal
1031
+ orderConfirmation.classList.remove('hidden');
1032
+
1033
+ // Reset form and cart
1034
+ deliveryForm.reset();
1035
+ cart = [];
1036
+ updateCartCount();
1037
+ updateCartDisplay();
1038
+ }
1039
+
1040
+ // Setup event listeners
1041
+ function setupEventListeners() {
1042
+ // Mobile menu toggle
1043
+ mobileMenuButton.addEventListener('click', () => {
1044
+ mobileMenu.classList.toggle('hidden');
1045
+ });
1046
+
1047
+ // Cart button
1048
+ cartButton.addEventListener('click', () => {
1049
+ cartSidebar.classList.remove('translate-x-full');
1050
+ });
1051
+
1052
+ // Close cart
1053
+ closeCart.addEventListener('click', () => {
1054
+ cartSidebar.classList.add('translate-x-full');
1055
+ });
1056
+
1057
+ // Continue shopping
1058
+ continueShopping.addEventListener('click', () => {
1059
+ cartSidebar.classList.add('translate-x-full');
1060
+ });
1061
+
1062
+ // Close modal
1063
+ closeModal.addEventListener('click', () => {
1064
+ pizzaModal.classList.add('hidden');
1065
+ });
1066
+
1067
+ // Quantity controls
1068
+ decreaseQuantity.addEventListener('click', () => {
1069
+ if (currentQuantity > 1) {
1070
+ currentQuantity--;
1071
+ quantityElement.textContent = currentQuantity;
1072
+ updateModalTotalPrice();
1073
+ }
1074
+ });
1075
+
1076
+ increaseQuantity.addEventListener('click', () => {
1077
+ currentQuantity++;
1078
+ quantityElement.textContent = currentQuantity;
1079
+ updateModalTotalPrice();
1080
+ });
1081
+
1082
+ // Size selection
1083
+ document.querySelectorAll('input[name="size"]').forEach(radio => {
1084
+ radio.addEventListener('change', () => {
1085
+ currentSize = radio.value;
1086
+ updateModalTotalPrice();
1087
+ });
1088
+ });
1089
+
1090
+ // Extras selection
1091
+ document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
1092
+ checkbox.addEventListener('change', () => {
1093
+ if (checkbox.checked) {
1094
+ currentExtras.push(checkbox.value);
1095
+ } else {
1096
+ currentExtras = currentExtras.filter(extra => extra !== checkbox.value);
1097
+ }
1098
+ updateModalTotalPrice();
1099
+ });
1100
+ });
1101
+
1102
+ // Add to cart
1103
+ addToCart.addEventListener('click', addPizzaToCart);
1104
+
1105
+ // Category buttons
1106
+ categoryButtons.forEach(button => {
1107
+ button.addEventListener('click', () => {
1108
+ categoryButtons.forEach(btn => btn.classList.remove('bg-red-700', 'text-white'));
1109
+ button.classList.add('bg-red-700', 'text-white');
1110
+ loadMenu(button.dataset.category);
1111
+ });
1112
+ });
1113
+
1114
+ // Delivery form
1115
+ deliveryForm.addEventListener('submit', submitDeliveryForm);
1116
+
1117
+ // Close confirmation
1118
+ closeConfirmation.addEventListener('click', () => {
1119
+ orderConfirmation.classList.add('hidden');
1120
+ });
1121
+
1122
+ // Checkout button
1123
+ checkoutBtn.addEventListener('click', () => {
1124
+ cartSidebar.classList.add('translate-x-full');
1125
+ // Scroll to delivery section
1126
+ document.getElementById('delivery').scrollIntoView({ behavior: 'smooth' });
1127
+ });
1128
+
1129
+ // Close modal when clicking outside
1130
+ pizzaModal.addEventListener('click', (e) => {
1131
+ if (e.target === pizzaModal) {
1132
+ pizzaModal.classList.add('hidden');
1133
+ }
1134
+ });
1135
+
1136
+ // Close order confirmation when clicking outside
1137
+ orderConfirmation.addEventListener('click', (e) => {
1138
+ if (e.target === orderConfirmation) {
1139
+ orderConfirmation.classList.add('hidden');
1140
+ }
1141
+ });
1142
+ }
1143
+ </script>
1144
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=LIMATEC/pizzaria" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1145
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ crie um site de pizzaria profissional com entrega delivery e atendim ento balcao