Hugging Face's logo

Spaces:
Yalexis
/
pizza-restaurant
Running

App Files Community
Yalexis commited on
Commit
1e4cd0e
·
verified ·
1 Parent(s): ae2e310

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +576 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Pizza Restaurant
3
- emoji: 📉
4
- colorFrom: gray
5
- colorTo: indigo
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: pizza-restaurant
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: blue
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,576 @@
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="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Slice Heaven - Artisanal Pizza Restaurant</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
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ scroll-behavior: smooth;
15
+ }
16
+
17
+ .hero {
18
+ background: 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&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
19
+ background-size: cover;
20
+ background-position: center;
21
+ }
22
+
23
+ .pizza-card:hover {
24
+ transform: translateY(-10px);
25
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
26
+ }
27
+
28
+ .pizza-card {
29
+ transition: all 0.3s ease;
30
+ }
31
+
32
+ .spicy::after {
33
+ content: "🌶️";
34
+ position: absolute;
35
+ top: 10px;
36
+ right: 10px;
37
+ }
38
+
39
+ .cart-item {
40
+ animation: slideIn 0.3s ease-out;
41
+ }
42
+
43
+ @keyframes slideIn {
44
+ from {
45
+ opacity: 0;
46
+ transform: translateY(20px);
47
+ }
48
+ to {
49
+ opacity: 1;
50
+ transform: translateY(0);
51
+ }
52
+ }
53
+ </style>
54
+ </head>
55
+ <body class="bg-gray-50">
56
+ <!-- Navigation -->
57
+ <nav class="bg-red-700 text-white sticky top-0 z-50 shadow-lg">
58
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
59
+ <div class="flex items-center space-x-2">
60
+ <i class="fas fa-pizza-slice text-2xl"></i>
61
+ <span class="text-xl font-bold">Slice Heaven</span>
62
+ </div>
63
+ <div class="hidden md:flex space-x-8">
64
+ <a href="#home" class="hover:text-yellow-300 transition">Home</a>
65
+ <a href="#menu" class="hover:text-yellow-300 transition">Menu</a>
66
+ <a href="#about" class="hover:text-yellow-300 transition">About</a>
67
+ <a href="#contact" class="hover:text-yellow-300 transition">Contact</a>
68
+ </div>
69
+ <div class="flex items-center space-x-4">
70
+ <button id="cart-btn" class="relative">
71
+ <i class="fas fa-shopping-cart text-xl"></i>
72
+ <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>
73
+ </button>
74
+ <button class="md:hidden" id="mobile-menu-btn">
75
+ <i class="fas fa-bars text-xl"></i>
76
+ </button>
77
+ </div>
78
+ </div>
79
+
80
+ <!-- Mobile Menu -->
81
+ <div id="mobile-menu" class="hidden md:hidden bg-red-800 px-4 py-2">
82
+ <a href="#home" class="block py-2 hover:text-yellow-300 transition">Home</a>
83
+ <a href="#menu" class="block py-2 hover:text-yellow-300 transition">Menu</a>
84
+ <a href="#about" class="block py-2 hover:text-yellow-300 transition">About</a>
85
+ <a href="#contact" class="block py-2 hover:text-yellow-300 transition">Contact</a>
86
+ </div>
87
+ </nav>
88
+
89
+ <!-- Shopping Cart Sidebar -->
90
+ <div id="cart-sidebar" class="fixed top-0 right-0 h-full w-80 bg-white shadow-lg transform translate-x-full transition-transform duration-300 z-50 overflow-y-auto">
91
+ <div class="p-4 border-b border-gray-200 flex justify-between items-center">
92
+ <h3 class="text-lg font-bold">Your Order</h3>
93
+ <button id="close-cart" class="text-gray-500 hover:text-red-600">
94
+ <i class="fas fa-times"></i>
95
+ </button>
96
+ </div>
97
+ <div id="cart-items" class="p-4">
98
+ <!-- Cart items will be added here dynamically -->
99
+ <p id="empty-cart-message" class="text-gray-500 text-center py-8">Your cart is empty</p>
100
+ </div>
101
+ <div class="p-4 border-t border-gray-200">
102
+ <div class="flex justify-between mb-4">
103
+ <span class="font-bold">Total:</span>
104
+ <span id="cart-total" class="font-bold">$0.00</span>
105
+ </div>
106
+ <button class="w-full bg-red-600 text-white py-2 rounded-lg hover:bg-red-700 transition">Checkout</button>
107
+ </div>
108
+ </div>
109
+
110
+ <!-- Hero Section -->
111
+ <section id="home" class="hero min-h-screen flex items-center justify-center text-center text-white">
112
+ <div class="container mx-auto px-4">
113
+ <h1 class="text-4xl md:text-6xl font-bold mb-4">Artisanal Pizza Crafted with Love</h1>
114
+ <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">Hand-tossed dough, premium ingredients, and authentic flavors that will transport you to Naples</p>
115
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
116
+ <a href="#menu" class="bg-yellow-400 text-red-700 font-bold py-3 px-6 rounded-full hover:bg-yellow-300 transition">View Menu</a>
117
+ <a href="#contact" class="bg-transparent border-2 border-white text-white font-bold py-3 px-6 rounded-full hover:bg-white hover:text-red-700 transition">Reserve a Table</a>
118
+ </div>
119
+ </div>
120
+ </section>
121
+
122
+ <!-- Special Offers -->
123
+ <section class="bg-yellow-50 py-12">
124
+ <div class="container mx-auto px-4">
125
+ <h2 class="text-3xl font-bold text-center mb-8 text-red-700">Today's Specials</h2>
126
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
127
+ <div class="bg-white rounded-lg shadow-md overflow-hidden">
128
+ <div class="relative">
129
+ <img src="https://images.unsplash.com/photo-1604382354936-07c5d9983bd3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Margherita Pizza" class="w-full h-48 object-cover">
130
+ <div class="absolute top-0 left-0 bg-red-600 text-white px-3 py-1 font-bold">-20%</div>
131
+ </div>
132
+ <div class="p-4">
133
+ <h3 class="text-xl font-bold mb-2">Truffle Margherita</h3>
134
+ <p class="text-gray-600 mb-4">Classic Margherita with black truffle oil and fresh basil</p>
135
+ <div class="flex justify-between items-center">
136
+ <span class="text-red-600 font-bold">$14.99 <span class="text-gray-400 line-through text-sm">$18.99</span></span>
137
+ <button class="add-to-cart bg-red-600 text-white px-3 py-1 rounded-full hover:bg-red-700 transition" data-name="Truffle Margherita" data-price="14.99">Add to Cart</button>
138
+ </div>
139
+ </div>
140
+ </div>
141
+ <div class="bg-white rounded-lg shadow-md overflow-hidden">
142
+ <div class="relative">
143
+ <img src="https://images.unsplash.com/photo-1620374645498-af6bd681a0bd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Pepperoni Pizza" class="w-full h-48 object-cover">
144
+ <div class="absolute top-0 left-0 bg-red-600 text-white px-3 py-1 font-bold">-15%</div>
145
+ </div>
146
+ <div class="p-4">
147
+ <h3 class="text-xl font-bold mb-2">Spicy Pepperoni</h3>
148
+ <p class="text-gray-600 mb-4">Double pepperoni with jalapeños and our signature spicy sauce</p>
149
+ <div class="flex justify-between items-center">
150
+ <span class="text-red-600 font-bold">$16.99 <span class="text-gray-400 line-through text-sm">$19.99</span></span>
151
+ <button class="add-to-cart bg-red-600 text-white px-3 py-1 rounded-full hover:bg-red-700 transition" data-name="Spicy Pepperoni" data-price="16.99">Add to Cart</button>
152
+ </div>
153
+ </div>
154
+ </div>
155
+ <div class="bg-white rounded-lg shadow-md overflow-hidden">
156
+ <div class="relative">
157
+ <img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Veggie Pizza" class="w-full h-48 object-cover">
158
+ <div class="absolute top-0 left-0 bg-red-600 text-white px-3 py-1 font-bold">-10%</div>
159
+ </div>
160
+ <div class="p-4">
161
+ <h3 class="text-xl font-bold mb-2">Garden Delight</h3>
162
+ <p class="text-gray-600 mb-4">Seasonal vegetables, goat cheese, and balsamic glaze</p>
163
+ <div class="flex justify-between items-center">
164
+ <span class="text-red-600 font-bold">$15.99 <span class="text-gray-400 line-through text-sm">$17.99</span></span>
165
+ <button class="add-to-cart bg-red-600 text-white px-3 py-1 rounded-full hover:bg-red-700 transition" data-name="Garden Delight" data-price="15.99">Add to Cart</button>
166
+ </div>
167
+ </div>
168
+ </div>
169
+ </div>
170
+ </div>
171
+ </section>
172
+
173
+ <!-- Menu Section -->
174
+ <section id="menu" class="py-16 bg-white">
175
+ <div class="container mx-auto px-4">
176
+ <h2 class="text-3xl font-bold text-center mb-4 text-red-700">Our Menu</h2>
177
+ <p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">All pizzas are 12" and made with our signature sourdough crust. Gluten-free and vegan options available.</p>
178
+
179
+ <div class="flex flex-wrap mb-8 justify-center">
180
+ <button class="menu-filter px-4 py-2 mx-2 rounded-full bg-red-600 text-white" data-category="all">All</button>
181
+ <button class="menu-filter px-4 py-2 mx-2 rounded-full bg-gray-200 hover:bg-red-600 hover:text-white transition" data-category="classic">Classic</button>
182
+ <button class="menu-filter px-4 py-2 mx-2 rounded-full bg-gray-200 hover:bg-red-600 hover:text-white transition" data-category="specialty">Specialty</button>
183
+ <button class="menu-filter px-4 py-2 mx-2 rounded-full bg-gray-200 hover:bg-red-600 hover:text-white transition" data-category="vegetarian">Vegetarian</button>
184
+ <button class="menu-filter px-4 py-2 mx-2 rounded-full bg-gray-200 hover:bg-red-600 hover:text-white transition" data-category="spicy">Spicy</button>
185
+ </div>
186
+
187
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="menu-items">
188
+ <!-- Menu items will be loaded here -->
189
+ </div>
190
+ </div>
191
+ </section>
192
+
193
+ <!-- About Section -->
194
+ <section id="about" class="py-16 bg-gray-100">
195
+ <div class="container mx-auto px-4">
196
+ <div class="flex flex-col md:flex-row items-center">
197
+ <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
198
+ <h2 class="text-3xl font-bold mb-4 text-red-700">Our Story</h2>
199
+ <p class="text-gray-700 mb-4">Founded in 2010 by Italian chef Marco Bianchi, Slice Heaven began as a small food truck with a big dream: to bring authentic Neapolitan pizza to the streets of our city.</p>
200
+ <p class="text-gray-700 mb-4">After years of perfecting our craft and building a loyal following, we opened our first brick-and-mortar location in 2015. Today, we continue to honor traditional techniques while innovating with seasonal, locally-sourced ingredients.</p>
201
+ <p class="text-gray-700 mb-6">Every pizza is hand-tossed, topped with care, and baked in our wood-fired oven at 900°F for that perfect char and chew.</p>
202
+ <a href="#contact" class="inline-block bg-red-600 text-white font-bold py-2 px-6 rounded-full hover:bg-red-700 transition">Visit Us</a>
203
+ </div>
204
+ <div class="md:w-1/2">
205
+ <div class="relative">
206
+ <img src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Pizza chef" class="rounded-lg shadow-lg w-full">
207
+ <div class="absolute -bottom-4 -right-4 bg-yellow-400 text-red-700 p-4 rounded-lg shadow-lg">
208
+ <p class="font-bold text-xl">Marco Bianchi</p>
209
+ <p class="text-sm">Founder & Head Chef</p>
210
+ </div>
211
+ </div>
212
+ </div>
213
+ </div>
214
+ </div>
215
+ </section>
216
+
217
+ <!-- Testimonials -->
218
+ <section class="py-16 bg-red-700 text-white">
219
+ <div class="container mx-auto px-4">
220
+ <h2 class="text-3xl font-bold text-center mb-12">What Our Customers Say</h2>
221
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
222
+ <div class="bg-white text-gray-800 p-6 rounded-lg shadow-lg">
223
+ <div class="flex items-center mb-4">
224
+ <div class="text-yellow-400 mr-2">
225
+ <i class="fas fa-star"></i>
226
+ <i class="fas fa-star"></i>
227
+ <i class="fas fa-star"></i>
228
+ <i class="fas fa-star"></i>
229
+ <i class="fas fa-star"></i>
230
+ </div>
231
+ </div>
232
+ <p class="mb-4 italic">"The best pizza I've had outside of Italy! The crust is perfectly chewy with just the right amount of char."</p>
233
+ <div class="flex items-center">
234
+ <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah J." class="w-10 h-10 rounded-full mr-3">
235
+ <div>
236
+ <p class="font-bold">Sarah J.</p>
237
+ <p class="text-sm text-gray-600">Regular Customer</p>
238
+ </div>
239
+ </div>
240
+ </div>
241
+ <div class="bg-white text-gray-800 p-6 rounded-lg shadow-lg">
242
+ <div class="flex items-center mb-4">
243
+ <div class="text-yellow-400 mr-2">
244
+ <i class="fas fa-star"></i>
245
+ <i class="fas fa-star"></i>
246
+ <i class="fas fa-star"></i>
247
+ <i class="fas fa-star"></i>
248
+ <i class="fas fa-star"></i>
249
+ </div>
250
+ </div>
251
+ <p class="mb-4 italic">"The Spicy Diavola is my go-to. Just the right amount of heat and the quality of ingredients is unmatched."</p>
252
+ <div class="flex items-center">
253
+ <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Michael T." class="w-10 h-10 rounded-full mr-3">
254
+ <div>
255
+ <p class="font-bold">Michael T.</p>
256
+ <p class="text-sm text-gray-600">Food Blogger</p>
257
+ </div>
258
+ </div>
259
+ </div>
260
+ <div class="bg-white text-gray-800 p-6 rounded-lg shadow-lg">
261
+ <div class="flex items-center mb-4">
262
+ <div class="text-yellow-400 mr-2">
263
+ <i class="fas fa-star"></i>
264
+ <i class="fas fa-star"></i>
265
+ <i class="fas fa-star"></i>
266
+ <i class="fas fa-star"></i>
267
+ <i class="fas fa-star-half-alt"></i>
268
+ </div>
269
+ </div>
270
+ <p class="mb-4 italic">"As a vegetarian, I appreciate the creative veggie options. The mushroom truffle pizza is divine!"</p>
271
+ <div class="flex items-center">
272
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emma L." class="w-10 h-10 rounded-full mr-3">
273
+ <div>
274
+ <p class="font-bold">Emma L.</p>
275
+ <p class="text-sm text-gray-600">First-time Visitor</p>
276
+ </div>
277
+ </div>
278
+ </div>
279
+ </div>
280
+ </div>
281
+ </section>
282
+
283
+ <!-- Contact Section -->
284
+ <section id="contact" class="py-16 bg-white">
285
+ <div class="container mx-auto px-4">
286
+ <h2 class="text-3xl font-bold text-center mb-4 text-red-700">Visit Us</h2>
287
+ <p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">We'd love to serve you! Reserve a table or order for pickup.</p>
288
+
289
+ <div class="flex flex-col md:flex-row gap-8">
290
+ <div class="md:w-1/2">
291
+ <div class="bg-gray-100 p-6 rounded-lg shadow-md mb-6">
292
+ <h3 class="text-xl font-bold mb-4 text-red-700">Hours</h3>
293
+ <ul class="space-y-2">
294
+ <li class="flex justify-between border-b border-gray-200 pb-2">
295
+ <span>Monday - Thursday</span>
296
+ <span>11am - 10pm</span>
297
+ </li>
298
+ <li class="flex justify-between border-b border-gray-200 pb-2">
299
+ <span>Friday - Saturday</span>
300
+ <span>11am - 11pm</span>
301
+ </li>
302
+ <li class="flex justify-between">
303
+ <span>Sunday</span>
304
+ <span>12pm - 9pm</span>
305
+ </li>
306
+ </ul>
307
+ </div>
308
+
309
+ <div class="bg-gray-100 p-6 rounded-lg shadow-md">
310
+ <h3 class="text-xl font-bold mb-4 text-red-700">Location</h3>
311
+ <p class="mb-4"><i class="fas fa-map-marker-alt text-red-600 mr-2"></i> 123 Pizza Street, Naples District</p>
312
+ <p class="mb-4"><i class="fas fa-phone text-red-600 mr-2"></i> (555) 123-4567</p>
313
+ <p class="mb-4"><i class="fas fa-envelope text-red-600 mr-2"></i> hello@sliceheaven.com</p>
314
+
315
+ <div class="mt-6">
316
+ <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.215573291234!2d-73.9878449241646!3d40.74844097138992!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259a9b3117469%3A0xd134e199a405a163!2sEmpire%20State%20Building!5e0!3m2!1sen!2sus!4v1689876423581!5m2!1sen!2sus" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" class="rounded-lg"></iframe>
317
+ </div>
318
+ </div>
319
+ </div>
320
+
321
+ <div class="md:w-1/2">
322
+ <div class="bg-gray-100 p-6 rounded-lg shadow-md h-full">
323
+ <h3 class="text-xl font-bold mb-4 text-red-700">Reserve a Table</h3>
324
+ <form id="reservation-form" class="space-y-4">
325
+ <div>
326
+ <label for="name" class="block mb-1 font-medium">Full Name</label>
327
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-600">
328
+ </div>
329
+ <div>
330
+ <label for="email" class="block mb-1 font-medium">Email</label>
331
+ <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-600">
332
+ </div>
333
+ <div>
334
+ <label for="phone" class="block mb-1 font-medium">Phone Number</label>
335
+ <input type="tel" id="phone" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-600">
336
+ </div>
337
+ <div class="grid grid-cols-2 gap-4">
338
+ <div>
339
+ <label for="date" class="block mb-1 font-medium">Date</label>
340
+ <input type="date" id="date" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-600">
341
+ </div>
342
+ <div>
343
+ <label for="time" class="block mb-1 font-medium">Time</label>
344
+ <input type="time" id="time" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-600">
345
+ </div>
346
+ </div>
347
+ <div>
348
+ <label for="guests" class="block mb-1 font-medium">Number of Guests</label>
349
+ <select id="guests" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-600">
350
+ <option value="1">1 person</option>
351
+ <option value="2">2 people</option>
352
+ <option value="3">3 people</option>
353
+ <option value="4">4 people</option>
354
+ <option value="5">5 people</option>
355
+ <option value="6">6+ people</option>
356
+ </select>
357
+ </div>
358
+ <div>
359
+ <label for="special-requests" class="block mb-1 font-medium">Special Requests</label>
360
+ <textarea id="special-requests" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-600"></textarea>
361
+ </div>
362
+ <button type="submit" class="w-full bg-red-600 text-white py-3 rounded-lg font-bold hover:bg-red-700 transition">Reserve Now</button>
363
+ </form>
364
+ </div>
365
+ </div>
366
+ </div>
367
+ </div>
368
+ </section>
369
+
370
+ <!-- Newsletter -->
371
+ <section class="py-12 bg-yellow-50">
372
+ <div class="container mx-auto px-4 text-center">
373
+ <h2 class="text-2xl font-bold mb-2 text-red-700">Join Our Pizza Club</h2>
374
+ <p class="text-gray-600 mb-6 max-w-2xl mx-auto">Sign up for our newsletter and get exclusive offers, new menu announcements, and a free appetizer on your birthday!</p>
375
+ <form class="max-w-md mx-auto flex">
376
+ <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-l-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-red-600">
377
+ <button type="submit" class="bg-red-600 text-white px-6 py-3 rounded-r-lg font-bold hover:bg-red-700 transition">Subscribe</button>
378
+ </form>
379
+ </div>
380
+ </section>
381
+
382
+ <!-- Footer -->
383
+ <footer class="bg-gray-900 text-white py-12">
384
+ <div class="container mx-auto px-4">
385
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
386
+ <div>
387
+ <h3 class="text-xl font-bold mb-4 flex items-center">
388
+ <i class="fas fa-pizza-slice text-red-600 mr-2"></i> Slice Heaven
389
+ </h3>
390
+ <p class="text-gray-400">Authentic Neapolitan pizza crafted with passion and the finest ingredients since 2010.</p>
391
+ </div>
392
+ <div>
393
+ <h4 class="font-bold mb-4">Quick Links</h4>
394
+ <ul class="space-y-2">
395
+ <li><a href="#home" class="text-gray-400 hover:text-white transition">Home</a></li>
396
+ <li><a href="#menu" class="text-gray-400 hover:text-white transition">Menu</a></li>
397
+ <li><a href="#about" class="text-gray-400 hover:text-white transition">About Us</a></li>
398
+ <li><a href="#contact" class="text-gray-400 hover:text-white transition">Contact</a></li>
399
+ </ul>
400
+ </div>
401
+ <div>
402
+ <h4 class="font-bold mb-4">Contact</h4>
403
+ <ul class="space-y-2 text-gray-400">
404
+ <li class="flex items-center">
405
+ <i class="fas fa-map-marker-alt mr-2 text-red-600"></i> 123 Pizza Street
406
+ </li>
407
+ <li class="flex items-center">
408
+ <i class="fas fa-phone mr-2 text-red-600"></i> (555) 123-4567
409
+ </li>
410
+ <li class="flex items-center">
411
+ <i class="fas fa-envelope mr-2 text-red-600"></i> hello@sliceheaven.com
412
+ </li>
413
+ </ul>
414
+ </div>
415
+ <div>
416
+ <h4 class="font-bold mb-4">Follow Us</h4>
417
+ <div class="flex space-x-4">
418
+ <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-red-600 transition">
419
+ <i class="fab fa-facebook-f"></i>
420
+ </a>
421
+ <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-red-600 transition">
422
+ <i class="fab fa-instagram"></i>
423
+ </a>
424
+ <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-red-600 transition">
425
+ <i class="fab fa-twitter"></i>
426
+ </a>
427
+ <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-red-600 transition">
428
+ <i class="fab fa-tiktok"></i>
429
+ </a>
430
+ </div>
431
+ <div class="mt-6">
432
+ <h4 class="font-bold mb-2">Download Our App</h4>
433
+ <div class="flex space-x-2">
434
+ <a href="#" class="flex items-center bg-black text-white px-3 py-1 rounded">
435
+ <i class="fab fa-apple mr-1"></i> App Store
436
+ </a>
437
+ <a href="#" class="flex items-center bg-black text-white px-3 py-1 rounded">
438
+ <i class="fab fa-google-play mr-1"></i> Play Store
439
+ </a>
440
+ </div>
441
+ </div>
442
+ </div>
443
+ </div>
444
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
445
+ <p>&copy; 2023 Slice Heaven. All rights reserved.</p>
446
+ </div>
447
+ </div>
448
+ </footer>
449
+
450
+ <script>
451
+ // Mobile menu toggle
452
+ const mobileMenuBtn = document.getElementById('mobile-menu-btn');
453
+ const mobileMenu = document.getElementById('mobile-menu');
454
+
455
+ mobileMenuBtn.addEventListener('click', () => {
456
+ mobileMenu.classList.toggle('hidden');
457
+ });
458
+
459
+ // Cart functionality
460
+ const cartBtn = document.getElementById('cart-btn');
461
+ const cartSidebar = document.getElementById('cart-sidebar');
462
+ const closeCart = document.getElementById('close-cart');
463
+ const cartItemsContainer = document.getElementById('cart-items');
464
+ const emptyCartMessage = document.getElementById('empty-cart-message');
465
+ const cartTotal = document.getElementById('cart-total');
466
+ const cartCount = document.getElementById('cart-count');
467
+
468
+ let cart = [];
469
+
470
+ cartBtn.addEventListener('click', () => {
471
+ cartSidebar.classList.remove('translate-x-full');
472
+ });
473
+
474
+ closeCart.addEventListener('click', () => {
475
+ cartSidebar.classList.add('translate-x-full');
476
+ });
477
+
478
+ // Add to cart buttons
479
+ const addToCartButtons = document.querySelectorAll('.add-to-cart');
480
+
481
+ addToCartButtons.forEach(button => {
482
+ button.addEventListener('click', () => {
483
+ const name = button.getAttribute('data-name');
484
+ const price = parseFloat(button.getAttribute('data-price'));
485
+
486
+ addToCart(name, price);
487
+ });
488
+ });
489
+
490
+ function addToCart(name, price) {
491
+ // Check if item already exists in cart
492
+ const existingItem = cart.find(item => item.name === name);
493
+
494
+ if (existingItem) {
495
+ existingItem.quantity += 1;
496
+ } else {
497
+ cart.push({
498
+ name: name,
499
+ price: price,
500
+ quantity: 1
501
+ });
502
+ }
503
+
504
+ updateCart();
505
+
506
+ // Show cart sidebar when adding an item
507
+ cartSidebar.classList.remove('translate-x-full');
508
+
509
+ // Animation feedback
510
+ const btn = event.target;
511
+ btn.innerHTML = '<i class="fas fa-check mr-1"></i> Added';
512
+ btn.classList.remove('bg-red-600', 'hover:bg-red-700');
513
+ btn.classList.add('bg-green-500', 'hover:bg-green-600');
514
+
515
+ setTimeout(() => {
516
+ btn.innerHTML = 'Add to Cart';
517
+ btn.classList.remove('bg-green-500', 'hover:bg-green-600');
518
+ btn.classList.add('bg-red-600', 'hover:bg-red-700');
519
+ }, 1500);
520
+ }
521
+
522
+ function updateCart() {
523
+ // Update cart items display
524
+ if (cart.length === 0) {
525
+ emptyCartMessage.classList.remove('hidden');
526
+ cartItemsContainer.innerHTML = '';
527
+ } else {
528
+ emptyCartMessage.classList.add('hidden');
529
+
530
+ let itemsHTML = '';
531
+ let total = 0;
532
+
533
+ cart.forEach(item => {
534
+ const itemTotal = item.price * item.quantity;
535
+ total += itemTotal;
536
+
537
+ itemsHTML += `
538
+ <div class="cart-item mb-4 pb-4 border-b border-gray-200">
539
+ <div class="flex justify-between items-start">
540
+ <div>
541
+ <h4 class="font-bold">${item.name}</h4>
542
+ <p class="text-gray-600">$${item.price.toFixed(2)} each</p>
543
+ </div>
544
+ <div class="flex items-center">
545
+ <button class="decrease-quantity px-2 py-1 bg-gray-200 rounded-l" data-name="${item.name}">-</button>
546
+ <span class="px-3 py-1 bg-gray-100">${item.quantity}</span>
547
+ <button class="increase-quantity px-2 py-1 bg-gray-200 rounded-r" data-name="${item.name}">+</button>
548
+ </div>
549
+ <div class="font-bold">$${itemTotal.toFixed(2)}</div>
550
+ </div>
551
+ <button class="remove-item mt-2 text-red-600 text-sm" data-name="${item.name}">
552
+ <i class="fas fa-trash-alt mr-1"></i> Remove
553
+ </button>
554
+ </div>
555
+ `;
556
+ });
557
+
558
+ cartItemsContainer.innerHTML = itemsHTML;
559
+
560
+ // Add event listeners to new buttons
561
+ document.querySelectorAll('.decrease-quantity').forEach(button => {
562
+ button.addEventListener('click', () => {
563
+ const name = button.getAttribute('data-name');
564
+ updateQuantity(name, -1);
565
+ });
566
+ });
567
+
568
+ document.querySelectorAll('.increase-quantity').forEach(button => {
569
+ button.addEventListener('click', () => {
570
+ const name = button.getAttribute('data-name');
571
+ updateQuantity(name, 1);
572
+ });
573
+ });
574
+
575
+ document.querySelectorAll('.remove
576
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ pizza restaurant