Hugging Face's logo

Spaces:
PapyrusPapa
/
trial-site
Running

App Files Community
PapyrusPapa commited on
Commit
71d991b
·
verified ·
1 Parent(s): a8d4c3a

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +911 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Trial Site
3
- emoji: 👁
4
- colorFrom: gray
5
- colorTo: blue
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: trial-site
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: pink
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,911 @@
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>Savory Haven - Gourmet Dining Delivered</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;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ scroll-behavior: smooth;
15
+ }
16
+
17
+ .hero-bg {
18
+ background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?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
+ .menu-item:hover .menu-overlay {
24
+ opacity: 1;
25
+ transform: translateY(0);
26
+ }
27
+
28
+ .menu-overlay {
29
+ transition: all 0.3s ease;
30
+ opacity: 0;
31
+ transform: translateY(20px);
32
+ }
33
+
34
+ .cart-item-enter {
35
+ animation: slideIn 0.3s forwards;
36
+ }
37
+
38
+ .cart-item-exit {
39
+ animation: slideOut 0.3s forwards;
40
+ }
41
+
42
+ @keyframes slideIn {
43
+ from { transform: translateX(100%); opacity: 0; }
44
+ to { transform: translateX(0); opacity: 1; }
45
+ }
46
+
47
+ @keyframes slideOut {
48
+ from { transform: translateX(0); opacity: 1; }
49
+ to { transform: translateX(100%); opacity: 0; }
50
+ }
51
+
52
+ .floating-btn {
53
+ animation: float 3s ease-in-out infinite;
54
+ }
55
+
56
+ @keyframes float {
57
+ 0% { transform: translateY(0px); }
58
+ 50% { transform: translateY(-15px); }
59
+ 100% { transform: translateY(0px); }
60
+ }
61
+ </style>
62
+ </head>
63
+ <body class="bg-gray-50">
64
+ <!-- Navigation -->
65
+ <nav class="bg-white shadow-lg fixed w-full z-50">
66
+ <div class="max-w-7xl mx-auto px-4">
67
+ <div class="flex justify-between items-center h-16">
68
+ <div class="flex items-center">
69
+ <a href="#" class="flex items-center">
70
+ <i class="fas fa-utensils text-amber-600 text-2xl mr-2"></i>
71
+ <span class="text-xl font-bold text-gray-800">Savory Haven</span>
72
+ </a>
73
+ </div>
74
+
75
+ <div class="hidden md:flex items-center space-x-8">
76
+ <a href="#home" class="text-gray-800 hover:text-amber-600 transition">Home</a>
77
+ <a href="#menu" class="text-gray-800 hover:text-amber-600 transition">Menu</a>
78
+ <a href="#about" class="text-gray-800 hover:text-amber-600 transition">About</a>
79
+ <a href="#testimonials" class="text-gray-800 hover:text-amber-600 transition">Reviews</a>
80
+ <a href="#contact" class="text-gray-800 hover:text-amber-600 transition">Contact</a>
81
+ </div>
82
+
83
+ <div class="flex items-center">
84
+ <button id="cart-btn" class="relative p-2 text-gray-800 hover:text-amber-600">
85
+ <i class="fas fa-shopping-cart text-xl"></i>
86
+ <span id="cart-count" class="absolute -top-1 -right-1 bg-amber-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>
87
+ </button>
88
+ <button class="md:hidden p-2 text-gray-800" id="mobile-menu-button">
89
+ <i class="fas fa-bars text-xl"></i>
90
+ </button>
91
+ </div>
92
+ </div>
93
+ </div>
94
+
95
+ <!-- Mobile menu -->
96
+ <div class="md:hidden hidden bg-white" id="mobile-menu">
97
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
98
+ <a href="#home" class="block px-3 py-2 text-gray-800 hover:text-amber-600">Home</a>
99
+ <a href="#menu" class="block px-3 py-2 text-gray-800 hover:text-amber-600">Menu</a>
100
+ <a href="#about" class="block px-3 py-2 text-gray-800 hover:text-amber-600">About</a>
101
+ <a href="#testimonials" class="block px-3 py-2 text-gray-800 hover:text-amber-600">Reviews</a>
102
+ <a href="#contact" class="block px-3 py-2 text-gray-800 hover:text-amber-600">Contact</a>
103
+ </div>
104
+ </div>
105
+ </nav>
106
+
107
+ <!-- Hero Section -->
108
+ <section id="home" class="hero-bg min-h-screen flex items-center justify-center text-white pt-16">
109
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
110
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">Gourmet Dining <span class="text-amber-400">Delivered</span></h1>
111
+ <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Experience restaurant-quality meals crafted by our master chefs, delivered straight to your doorstep.</p>
112
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
113
+ <a href="#menu" class="bg-amber-600 hover:bg-amber-700 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105">Order Now</a>
114
+ <a href="#about" class="bg-transparent hover:bg-white hover:text-gray-900 border-2 border-white text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105">Learn More</a>
115
+ </div>
116
+ </div>
117
+ </section>
118
+
119
+ <!-- Features Section -->
120
+ <section class="py-16 bg-white">
121
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
122
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
123
+ <div class="text-center p-6 rounded-lg hover:shadow-lg transition duration-300">
124
+ <div class="bg-amber-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
125
+ <i class="fas fa-bolt text-amber-600 text-2xl"></i>
126
+ </div>
127
+ <h3 class="text-xl font-bold mb-2">Fast Delivery</h3>
128
+ <p class="text-gray-600">Get your food delivered in under 30 minutes or it's free.</p>
129
+ </div>
130
+
131
+ <div class="text-center p-6 rounded-lg hover:shadow-lg transition duration-300">
132
+ <div class="bg-amber-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
133
+ <i class="fas fa-leaf text-amber-600 text-2xl"></i>
134
+ </div>
135
+ <h3 class="text-xl font-bold mb-2">Fresh Ingredients</h3>
136
+ <p class="text-gray-600">We source only the freshest, highest quality ingredients.</p>
137
+ </div>
138
+
139
+ <div class="text-center p-6 rounded-lg hover:shadow-lg transition duration-300">
140
+ <div class="bg-amber-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
141
+ <i class="fas fa-utensils text-amber-600 text-2xl"></i>
142
+ </div>
143
+ <h3 class="text-xl font-bold mb-2">Master Chefs</h3>
144
+ <p class="text-gray-600">Our chefs have over 50 years of combined culinary experience.</p>
145
+ </div>
146
+ </div>
147
+ </div>
148
+ </section>
149
+
150
+ <!-- Menu Section -->
151
+ <section id="menu" class="py-16 bg-gray-50">
152
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
153
+ <div class="text-center mb-12">
154
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Our <span class="text-amber-600">Delicious</span> Menu</h2>
155
+ <p class="text-gray-600 max-w-2xl mx-auto">From classic comfort foods to innovative culinary creations, our menu has something for every palate.</p>
156
+ </div>
157
+
158
+ <div class="flex justify-center mb-8">
159
+ <div class="inline-flex rounded-md shadow-sm" role="group">
160
+ <button type="button" class="category-btn px-4 py-2 text-sm font-medium rounded-l-lg border border-gray-200 bg-white text-gray-900 hover:bg-gray-100" data-category="all">All</button>
161
+ <button type="button" class="category-btn px-4 py-2 text-sm font-medium border-t border-b border-gray-200 bg-white text-gray-900 hover:bg-gray-100" data-category="starters">Starters</button>
162
+ <button type="button" class="category-btn px-4 py-2 text-sm font-medium border-t border-b border-gray-200 bg-white text-gray-900 hover:bg-gray-100" data-category="mains">Main Courses</button>
163
+ <button type="button" class="category-btn px-4 py-2 text-sm font-medium border border-gray-200 bg-white text-gray-900 hover:bg-gray-100" data-category="desserts">Desserts</button>
164
+ <button type="button" class="category-btn px-4 py-2 text-sm font-medium rounded-r-lg border border-gray-200 bg-white text-gray-900 hover:bg-gray-100" data-category="drinks">Drinks</button>
165
+ </div>
166
+ </div>
167
+
168
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="menu-items">
169
+ <!-- Menu items will be loaded here by JavaScript -->
170
+ </div>
171
+ </div>
172
+ </section>
173
+
174
+ <!-- About Section -->
175
+ <section id="about" class="py-16 bg-white">
176
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
177
+ <div class="flex flex-col lg:flex-row items-center">
178
+ <div class="lg:w-1/2 mb-8 lg:mb-0 lg:pr-12">
179
+ <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="Our Restaurant" class="rounded-lg shadow-xl w-full h-auto">
180
+ </div>
181
+ <div class="lg:w-1/2">
182
+ <h2 class="text-3xl font-bold text-gray-800 mb-6">Our <span class="text-amber-600">Story</span></h2>
183
+ <p class="text-gray-600 mb-4">Founded in 2010 by Chef Michael Savory, Savory Haven began as a small bistro with just 10 tables in downtown. Our passion for exceptional food and warm hospitality quickly earned us a loyal following.</p>
184
+ <p class="text-gray-600 mb-6">Today, we've expanded our reach through our online platform, bringing our signature dishes to food lovers across the city while maintaining the same commitment to quality that defined our humble beginnings.</p>
185
+ <div class="grid grid-cols-2 gap-4 mb-6">
186
+ <div class="flex items-center">
187
+ <i class="fas fa-check-circle text-amber-600 mr-2"></i>
188
+ <span class="text-gray-700">100% Organic</span>
189
+ </div>
190
+ <div class="flex items-center">
191
+ <i class="fas fa-check-circle text-amber-600 mr-2"></i>
192
+ <span class="text-gray-700">Award Winning</span>
193
+ </div>
194
+ <div class="flex items-center">
195
+ <i class="fas fa-check-circle text-amber-600 mr-2"></i>
196
+ <span class="text-gray-700">Eco-Friendly</span>
197
+ </div>
198
+ <div class="flex items-center">
199
+ <i class="fas fa-check-circle text-amber-600 mr-2"></i>
200
+ <span class="text-gray-700">Family Owned</span>
201
+ </div>
202
+ </div>
203
+ <a href="#contact" class="inline-block bg-amber-600 hover:bg-amber-700 text-white font-bold py-3 px-8 rounded-full transition duration-300">Visit Us</a>
204
+ </div>
205
+ </div>
206
+ </div>
207
+ </section>
208
+
209
+ <!-- Testimonials Section -->
210
+ <section id="testimonials" class="py-16 bg-gray-50">
211
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
212
+ <div class="text-center mb-12">
213
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">What Our <span class="text-amber-600">Customers</span> Say</h2>
214
+ <p class="text-gray-600 max-w-2xl mx-auto">Don't just take our word for it - hear from our satisfied customers.</p>
215
+ </div>
216
+
217
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
218
+ <div class="bg-white p-6 rounded-lg shadow-md">
219
+ <div class="flex items-center mb-4">
220
+ <div class="text-amber-400 text-2xl">
221
+ <i class="fas fa-star"></i>
222
+ <i class="fas fa-star"></i>
223
+ <i class="fas fa-star"></i>
224
+ <i class="fas fa-star"></i>
225
+ <i class="fas fa-star"></i>
226
+ </div>
227
+ </div>
228
+ <p class="text-gray-600 mb-4">"The food arrived hot and fresh, just like dining in the restaurant. The beef Wellington was cooked to perfection!"</p>
229
+ <div class="flex items-center">
230
+ <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah J." class="w-10 h-10 rounded-full mr-3">
231
+ <div>
232
+ <h4 class="font-bold text-gray-800">Sarah J.</h4>
233
+ <p class="text-gray-500 text-sm">Regular Customer</p>
234
+ </div>
235
+ </div>
236
+ </div>
237
+
238
+ <div class="bg-white p-6 rounded-lg shadow-md">
239
+ <div class="flex items-center mb-4">
240
+ <div class="text-amber-400 text-2xl">
241
+ <i class="fas fa-star"></i>
242
+ <i class="fas fa-star"></i>
243
+ <i class="fas fa-star"></i>
244
+ <i class="fas fa-star"></i>
245
+ <i class="fas fa-star"></i>
246
+ </div>
247
+ </div>
248
+ <p class="text-gray-600 mb-4">"I order from Savory Haven at least twice a week. Their consistency and quality are unmatched in the city."</p>
249
+ <div class="flex items-center">
250
+ <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Michael T." class="w-10 h-10 rounded-full mr-3">
251
+ <div>
252
+ <h4 class="font-bold text-gray-800">Michael T.</h4>
253
+ <p class="text-gray-500 text-sm">Food Blogger</p>
254
+ </div>
255
+ </div>
256
+ </div>
257
+
258
+ <div class="bg-white p-6 rounded-lg shadow-md">
259
+ <div class="flex items-center mb-4">
260
+ <div class="text-amber-400 text-2xl">
261
+ <i class="fas fa-star"></i>
262
+ <i class="fas fa-star"></i>
263
+ <i class="fas fa-star"></i>
264
+ <i class="fas fa-star"></i>
265
+ <i class="fas fa-star-half-alt"></i>
266
+ </div>
267
+ </div>
268
+ <p class="text-gray-600 mb-4">"The delivery was faster than promised and the packaging was eco-friendly. The food tasted amazing!"</p>
269
+ <div class="flex items-center">
270
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Jennifer L." class="w-10 h-10 rounded-full mr-3">
271
+ <div>
272
+ <h4 class="font-bold text-gray-800">Jennifer L.</h4>
273
+ <p class="text-gray-500 text-sm">First-time Customer</p>
274
+ </div>
275
+ </div>
276
+ </div>
277
+ </div>
278
+ </div>
279
+ </section>
280
+
281
+ <!-- CTA Section -->
282
+ <section class="py-16 bg-amber-600 text-white">
283
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
284
+ <h2 class="text-3xl font-bold mb-6">Ready to Experience <span class="text-amber-100">Gourmet Dining</span> at Home?</h2>
285
+ <p class="text-xl mb-8 max-w-3xl mx-auto">Download our app for exclusive deals and faster ordering.</p>
286
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
287
+ <a href="#" class="bg-white hover:bg-gray-100 text-amber-600 font-bold py-3 px-8 rounded-full transition duration-300 flex items-center justify-center">
288
+ <i class="fab fa-apple text-2xl mr-2"></i>
289
+ <span>App Store</span>
290
+ </a>
291
+ <a href="#" class="bg-gray-900 hover:bg-gray-800 text-white font-bold py-3 px-8 rounded-full transition duration-300 flex items-center justify-center">
292
+ <i class="fab fa-google-play text-2xl mr-2"></i>
293
+ <span>Google Play</span>
294
+ </a>
295
+ </div>
296
+ </div>
297
+ </section>
298
+
299
+ <!-- Contact Section -->
300
+ <section id="contact" class="py-16 bg-white">
301
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
302
+ <div class="flex flex-col lg:flex-row">
303
+ <div class="lg:w-1/2 mb-8 lg:mb-0 lg:pr-12">
304
+ <h2 class="text-3xl font-bold text-gray-800 mb-6">Get In <span class="text-amber-600">Touch</span></h2>
305
+ <p class="text-gray-600 mb-6">Have questions or feedback? We'd love to hear from you! Reach out to us through any of the channels below.</p>
306
+
307
+ <div class="space-y-4 mb-8">
308
+ <div class="flex items-start">
309
+ <div class="bg-amber-100 p-3 rounded-full mr-4">
310
+ <i class="fas fa-map-marker-alt text-amber-600"></i>
311
+ </div>
312
+ <div>
313
+ <h4 class="font-bold text-gray-800">Address</h4>
314
+ <p class="text-gray-600">123 Gourmet Street, Foodville, FC 12345</p>
315
+ </div>
316
+ </div>
317
+
318
+ <div class="flex items-start">
319
+ <div class="bg-amber-100 p-3 rounded-full mr-4">
320
+ <i class="fas fa-phone-alt text-amber-600"></i>
321
+ </div>
322
+ <div>
323
+ <h4 class="font-bold text-gray-800">Phone</h4>
324
+ <p class="text-gray-600">(123) 456-7890</p>
325
+ </div>
326
+ </div>
327
+
328
+ <div class="flex items-start">
329
+ <div class="bg-amber-100 p-3 rounded-full mr-4">
330
+ <i class="fas fa-envelope text-amber-600"></i>
331
+ </div>
332
+ <div>
333
+ <h4 class="font-bold text-gray-800">Email</h4>
334
+ <p class="text-gray-600">info@savoryhaven.com</p>
335
+ </div>
336
+ </div>
337
+ </div>
338
+
339
+ <div>
340
+ <h4 class="font-bold text-gray-800 mb-4">Opening Hours</h4>
341
+ <div class="space-y-2">
342
+ <div class="flex justify-between border-b border-gray-200 pb-2">
343
+ <span class="text-gray-600">Monday - Friday</span>
344
+ <span class="font-medium">10:00 AM - 10:00 PM</span>
345
+ </div>
346
+ <div class="flex justify-between border-b border-gray-200 pb-2">
347
+ <span class="text-gray-600">Saturday</span>
348
+ <span class="font-medium">11:00 AM - 11:00 PM</span>
349
+ </div>
350
+ <div class="flex justify-between border-b border-gray-200 pb-2">
351
+ <span class="text-gray-600">Sunday</span>
352
+ <span class="font-medium">11:00 AM - 9:00 PM</span>
353
+ </div>
354
+ </div>
355
+ </div>
356
+ </div>
357
+
358
+ <div class="lg:w-1/2">
359
+ <div class="bg-gray-50 p-6 rounded-lg shadow-md">
360
+ <h3 class="text-xl font-bold text-gray-800 mb-6">Send Us a Message</h3>
361
+ <form id="contact-form">
362
+ <div class="mb-4">
363
+ <label for="name" class="block text-gray-700 mb-2">Name</label>
364
+ <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-amber-500">
365
+ </div>
366
+ <div class="mb-4">
367
+ <label for="email" class="block text-gray-700 mb-2">Email</label>
368
+ <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-amber-500">
369
+ </div>
370
+ <div class="mb-4">
371
+ <label for="message" class="block text-gray-700 mb-2">Message</label>
372
+ <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500"></textarea>
373
+ </div>
374
+ <button type="submit" class="w-full bg-amber-600 hover:bg-amber-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300">Send Message</button>
375
+ </form>
376
+ </div>
377
+ </div>
378
+ </div>
379
+ </div>
380
+ </section>
381
+
382
+ <!-- Footer -->
383
+ <footer class="bg-gray-900 text-white py-12">
384
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
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-utensils text-amber-600 mr-2"></i>
389
+ <span>Savory Haven</span>
390
+ </h3>
391
+ <p class="text-gray-400">Bringing gourmet dining experiences to your home since 2010.</p>
392
+ </div>
393
+
394
+ <div>
395
+ <h4 class="text-lg font-semibold mb-4">Quick Links</h4>
396
+ <ul class="space-y-2">
397
+ <li><a href="#home" class="text-gray-400 hover:text-amber-400 transition">Home</a></li>
398
+ <li><a href="#menu" class="text-gray-400 hover:text-amber-400 transition">Menu</a></li>
399
+ <li><a href="#about" class="text-gray-400 hover:text-amber-400 transition">About Us</a></li>
400
+ <li><a href="#testimonials" class="text-gray-400 hover:text-amber-400 transition">Testimonials</a></li>
401
+ <li><a href="#contact" class="text-gray-400 hover:text-amber-400 transition">Contact</a></li>
402
+ </ul>
403
+ </div>
404
+
405
+ <div>
406
+ <h4 class="text-lg font-semibold mb-4">Legal</h4>
407
+ <ul class="space-y-2">
408
+ <li><a href="#" class="text-gray-400 hover:text-amber-400 transition">Privacy Policy</a></li>
409
+ <li><a href="#" class="text-gray-400 hover:text-amber-400 transition">Terms of Service</a></li>
410
+ <li><a href="#" class="text-gray-400 hover:text-amber-400 transition">Refund Policy</a></li>
411
+ <li><a href="#" class="text-gray-400 hover:text-amber-400 transition">Delivery Policy</a></li>
412
+ </ul>
413
+ </div>
414
+
415
+ <div>
416
+ <h4 class="text-lg font-semibold mb-4">Follow Us</h4>
417
+ <div class="flex space-x-4 mb-4">
418
+ <a href="#" class="bg-gray-800 hover:bg-amber-600 w-10 h-10 rounded-full flex items-center justify-center transition">
419
+ <i class="fab fa-facebook-f"></i>
420
+ </a>
421
+ <a href="#" class="bg-gray-800 hover:bg-amber-600 w-10 h-10 rounded-full flex items-center justify-center transition">
422
+ <i class="fab fa-twitter"></i>
423
+ </a>
424
+ <a href="#" class="bg-gray-800 hover:bg-amber-600 w-10 h-10 rounded-full flex items-center justify-center transition">
425
+ <i class="fab fa-instagram"></i>
426
+ </a>
427
+ <a href="#" class="bg-gray-800 hover:bg-amber-600 w-10 h-10 rounded-full flex items-center justify-center transition">
428
+ <i class="fab fa-yelp"></i>
429
+ </a>
430
+ </div>
431
+ <p class="text-gray-400">Subscribe to our newsletter</p>
432
+ <div class="mt-2 flex">
433
+ <input type="email" placeholder="Your email" class="px-3 py-2 bg-gray-800 text-white rounded-l-lg focus:outline-none w-full">
434
+ <button class="bg-amber-600 hover:bg-amber-700 px-4 rounded-r-lg">
435
+ <i class="fas fa-paper-plane"></i>
436
+ </button>
437
+ </div>
438
+ </div>
439
+ </div>
440
+
441
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
442
+ <p>&copy; 2023 Savory Haven. All rights reserved.</p>
443
+ </div>
444
+ </div>
445
+ </footer>
446
+
447
+ <!-- Shopping Cart Sidebar -->
448
+ <div id="cart-sidebar" class="fixed top-0 right-0 w-full md:w-96 h-full bg-white shadow-xl z-50 transform translate-x-full transition-transform duration-300 overflow-y-auto">
449
+ <div class="p-6">
450
+ <div class="flex justify-between items-center mb-6">
451
+ <h3 class="text-xl font-bold">Your Order</h3>
452
+ <button id="close-cart" class="text-gray-500 hover:text-gray-700">
453
+ <i class="fas fa-times text-xl"></i>
454
+ </button>
455
+ </div>
456
+
457
+ <div id="cart-items" class="mb-6">
458
+ <!-- Cart items will be loaded here by JavaScript -->
459
+ <div id="empty-cart-message" class="text-center py-8">
460
+ <i class="fas fa-shopping-cart text-4xl text-gray-300 mb-4"></i>
461
+ <p class="text-gray-500">Your cart is empty</p>
462
+ </div>
463
+ </div>
464
+
465
+ <div id="cart-summary" class="border-t border-gray-200 pt-4 mb-6 hidden">
466
+ <div class="flex justify-between mb-2">
467
+ <span class="text-gray-600">Subtotal</span>
468
+ <span id="cart-subtotal" class="font-medium">$0.00</span>
469
+ </div>
470
+ <div class="flex justify-between mb-2">
471
+ <span class="text-gray-600">Delivery Fee</span>
472
+ <span id="delivery-fee" class="font-medium">$3.99</span>
473
+ </div>
474
+ <div class="flex justify-between text-lg font-bold">
475
+ <span>Total</span>
476
+ <span id="cart-total">$3.99</span>
477
+ </div>
478
+ </div>
479
+
480
+ <button id="checkout-btn" class="w-full bg-amber-600 hover:bg-amber-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300 hidden">
481
+ Proceed to Checkout
482
+ </button>
483
+ </div>
484
+ </div>
485
+
486
+ <!-- Backdrop for cart sidebar -->
487
+ <div id="cart-backdrop" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden"></div>
488
+
489
+ <!-- Floating action button -->
490
+ <button id="floating-order-btn" class="fixed bottom-8 right-8 bg-amber-600 hover:bg-amber-700 text-white w-16 h-16 rounded-full shadow-lg flex items-center justify-center z-40 floating-btn transition-transform">
491
+ <i class="fas fa-utensils text-xl"></i>
492
+ </button>
493
+
494
+ <script>
495
+ // Menu data
496
+ const menuItems = [
497
+ {
498
+ id: 1,
499
+ name: "Truffle Arancini",
500
+ description: "Crispy risotto balls with black truffle and mozzarella",
501
+ price: 8.99,
502
+ category: "starters",
503
+ image: "https://images.unsplash.com/photo-1603105037880-880cd4edfb1d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80"
504
+ },
505
+ {
506
+ id: 2,
507
+ name: "Burrata Salad",
508
+ description: "Creamy burrata with heirloom tomatoes and basil",
509
+ price: 12.99,
510
+ category: "starters",
511
+ image: "https://images.unsplash.com/photo-1607532944453-304c3b3c3a13?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80"
512
+ },
513
+ {
514
+ id: 3,
515
+ name: "Filet Mignon",
516
+ description: "8oz grass-fed beef with truffle mashed potatoes",
517
+ price: 32.99,
518
+ category: "mains",
519
+ image: "https://images.unsplash.com/photo-1588168333986-5078d3ae3976?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80"
520
+ },
521
+ {
522
+ id: 4,
523
+ name: "Lobster Risotto",
524
+ description: "Creamy arborio rice with fresh Maine lobster",
525
+ price: 28.99,
526
+ category: "mains",
527
+ image: "https://images.unsplash.com/photo-1611273426858-450d8e3c9fce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
528
+ },
529
+ {
530
+ id: 5,
531
+ name: "Truffle Pasta",
532
+ description: "Handmade tagliatelle with wild mushroom and truffle cream",
533
+ price: 22.99,
534
+ category: "mains",
535
+ image: "https://images.unsplash.com/photo-1473093295043-cdd812d0e601?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
536
+ },
537
+ {
538
+ id: 6,
539
+ name: "Chocolate Soufflé",
540
+ description: "Warm chocolate soufflé with vanilla bean ice cream",
541
+ price: 10.99,
542
+ category: "desserts",
543
+ image: "https://images.unsplash.com/photo-1563805042-7684c019e1cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1527&q=80"
544
+ },
545
+ {
546
+ id: 7,
547
+ name: "Crème Brûlée",
548
+ description: "Classic vanilla bean custard with caramelized sugar",
549
+ price: 8.99,
550
+ category: "desserts",
551
+ image: "https://images.unsplash.com/photo-1535254973040-607447b4a517?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
552
+ },
553
+ {
554
+ id: 8,
555
+ name: "Signature Cocktail",
556
+ description: "House special with gin, elderflower, and cucumber",
557
+ price: 12.99,
558
+ category: "drinks",
559
+ image: "https://images.unsplash.com/photo-1470337458703-46ad1756a187?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80"
560
+ },
561
+ {
562
+ id: 9,
563
+ name: "Wine Selection",
564
+ description: "Glass of our sommelier's choice red or white",
565
+ price: 9.99,
566
+ category: "drinks",
567
+ image: "https://images.unsplash.com/photo-1510812431401-41d2bd2722f3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
568
+ }
569
+ ];
570
+
571
+ // Cart state
572
+ let cart = [];
573
+
574
+ // DOM elements
575
+ const menuItemsContainer = document.getElementById('menu-items');
576
+ const cartItemsContainer = document.getElementById('cart-items');
577
+ const emptyCartMessage = document.getElementById('empty-cart-message');
578
+ const cartSummary = document.getElementById('cart-summary');
579
+ const cartSubtotal = document.getElementById('cart-subtotal');
580
+ const cartTotal = document.getElementById('cart-total');
581
+ const cartCount = document.getElementById('cart-count');
582
+ const checkoutBtn = document.getElementById('checkout-btn');
583
+ const cartSidebar = document.getElementById('cart-sidebar');
584
+ const cartBackdrop = document.getElementById('cart-backdrop');
585
+ const cartBtn = document.getElementById('cart-btn');
586
+ const closeCartBtn = document.getElementById('close-cart');
587
+ const categoryBtns = document.querySelectorAll('.category-btn');
588
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
589
+ const mobileMenu = document.getElementById('mobile-menu');
590
+ const contactForm = document.getElementById('contact-form');
591
+ const floatingOrderBtn = document.getElementById('floating-order-btn');
592
+
593
+ // Initialize the page
594
+ document.addEventListener('DOMContentLoaded', () => {
595
+ renderMenuItems('all');
596
+ updateCartCount();
597
+
598
+ // Load cart from localStorage if available
599
+ const savedCart = localStorage.getItem('savoryHavenCart');
600
+ if (savedCart) {
601
+ cart = JSON.parse(savedCart);
602
+ renderCartItems();
603
+ }
604
+ });
605
+
606
+ // Render menu items based on category
607
+ function renderMenuItems(category) {
608
+ menuItemsContainer.innerHTML = '';
609
+
610
+ const filteredItems = category === 'all'
611
+ ? menuItems
612
+ : menuItems.filter(item => item.category === category);
613
+
614
+ if (filteredItems.length === 0) {
615
+ menuItemsContainer.innerHTML = '<p class="text-gray-500 text-center col-span-3 py-8">No items in this category yet. Check back soon!</p>';
616
+ return;
617
+ }
618
+
619
+ filteredItems.forEach(item => {
620
+ const menuItem = document.createElement('div');
621
+ menuItem.className = 'bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition duration-300 menu-item';
622
+ menuItem.innerHTML = `
623
+ <div class="relative">
624
+ <img src="${item.image}" alt="${item.name}" class="w-full h-48 object-cover">
625
+ <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center menu-overlay">
626
+ <button class="add-to-cart bg-amber-600 hover:bg-amber-700 text-white font-bold py-2 px-6 rounded-full transition duration-300" data-id="${item.id}">
627
+ Add to Cart
628
+ </button>
629
+ </div>
630
+ </div>
631
+ <div class="p-4">
632
+ <h3 class="text-lg font-bold text-gray-800 mb-1">${item.name}</h3>
633
+ <p class="text-gray-600 text-sm mb-2">${item.description}</p>
634
+ <div class="flex justify-between items-center">
635
+ <span class="text-amber-600 font-bold">$${item.price.toFixed(2)}</span>
636
+ <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded-full">${item.category.charAt(0).toUpperCase() + item.category.slice(1)}</span>
637
+ </div>
638
+ </div>
639
+ `;
640
+ menuItemsContainer.appendChild(menuItem);
641
+ });
642
+
643
+ // Add event listeners to the "Add to Cart" buttons
644
+ document.querySelectorAll('.add-to-cart').forEach(button => {
645
+ button.addEventListener('click', (e) => {
646
+ const itemId = parseInt(e.target.getAttribute('data-id'));
647
+ addToCart(itemId);
648
+
649
+ // Add animation feedback
650
+ e.target.innerHTML = '<i class="fas fa-check mr-1"></i> Added!';
651
+ setTimeout(() => {
652
+ e.target.innerHTML = 'Add to Cart';
653
+ }, 1000);
654
+ });
655
+ });
656
+ }
657
+
658
+ // Add item to cart
659
+ function addToCart(itemId) {
660
+ const item = menuItems.find(item => item.id === itemId);
661
+
662
+ // Check if item already exists in cart
663
+ const existingItem = cart.find(cartItem => cartItem.id === itemId);
664
+
665
+ if (existingItem) {
666
+ existingItem.quantity += 1;
667
+ } else {
668
+ cart.push({
669
+ ...item,
670
+ quantity: 1
671
+ });
672
+ }
673
+
674
+ // Save to localStorage
675
+ localStorage.setItem('savoryHavenCart', JSON.stringify(cart));
676
+
677
+ updateCartCount();
678
+ renderCartItems();
679
+
680
+ // Show cart sidebar if it's hidden
681
+ if (cartSidebar.classList.contains('translate-x-full')) {
682
+ toggleCart();
683
+ }
684
+ }
685
+
686
+ // Remove item from cart
687
+ function removeFromCart(itemId) {
688
+ cart = cart.filter(item => item.id !== itemId);
689
+
690
+ // Save to localStorage
691
+ localStorage.setItem('savoryHavenCart', JSON.stringify(cart));
692
+
693
+ updateCartCount();
694
+ renderCartItems();
695
+ }
696
+
697
+ // Update item quantity in cart
698
+ function updateQuantity(itemId, newQuantity) {
699
+ const item = cart.find(item => item.id === itemId);
700
+
701
+ if (item) {
702
+ if (newQuantity < 1) {
703
+ removeFromCart(itemId);
704
+ return;
705
+ }
706
+
707
+ item.quantity = newQuantity;
708
+
709
+ // Save to localStorage
710
+ localStorage.setItem('savoryHavenCart', JSON.stringify(cart));
711
+
712
+ updateCartCount();
713
+ renderCartItems();
714
+ }
715
+ }
716
+
717
+ // Update cart count in navbar
718
+ function updateCartCount() {
719
+ const totalItems = cart.reduce((total, item) => total + item.quantity, 0);
720
+ cartCount.textContent = totalItems;
721
+
722
+ // Show/hide floating order button based on cart items
723
+ if (totalItems > 0) {
724
+ floatingOrderBtn.classList.remove('hidden');
725
+ } else {
726
+ floatingOrderBtn.classList.add('hidden');
727
+ }
728
+ }
729
+
730
+ // Render cart items
731
+ function renderCartItems() {
732
+ cartItemsContainer.innerHTML = '';
733
+
734
+ if (cart.length === 0) {
735
+ emptyCartMessage.classList.remove('hidden');
736
+ cartSummary.classList.add('hidden');
737
+ checkoutBtn.classList.add('hidden');
738
+ return;
739
+ }
740
+
741
+ emptyCartMessage.classList.add('hidden');
742
+ cartSummary.classList.remove('hidden');
743
+ checkoutBtn.classList.remove('hidden');
744
+
745
+ let subtotal = 0;
746
+
747
+ cart.forEach(item => {
748
+ const cartItem = document.createElement('div');
749
+ cartItem.className = 'flex items-center py-4 border-b border-gray-200 cart-item-enter';
750
+
751
+ // Calculate item total
752
+ const itemTotal = item.price * item.quantity;
753
+ subtotal += itemTotal;
754
+
755
+ cartItem.innerHTML = `
756
+ <img src="${item.image}" alt="${item.name}" class="w-16 h-16 object-cover rounded-lg">
757
+ <div class="ml-4 flex-1">
758
+ <h4 class="font-medium text-gray-800">${item.name}</h4>
759
+ <p class="text-gray-600 text-sm">$${item.price.toFixed(2)}</p>
760
+ </div>
761
+ <div class="flex items-center">
762
+ <button class="quantity-btn decrease w-8 h-8 rounded-full border border-gray-300 flex items-center justify-center" data-id="${item.id}">
763
+ <i class="fas fa-minus text-xs"></i>
764
+ </button>
765
+ <span class="quantity mx-2 w-8 text-center">${item.quantity}</span>
766
+ <button class="quantity-btn increase w-8 h-8 rounded-full border border-gray-300 flex items-center justify-center" data-id="${item.id}">
767
+ <i class="fas fa-plus text-xs"></i>
768
+ </button>
769
+ </div>
770
+ <div class="ml-4">
771
+ <span class="font-medium">$${itemTotal.toFixed(2)}</span>
772
+ </div>
773
+ <button class="remove-item ml-4 text-gray-400 hover:text-red-500" data-id="${item.id}">
774
+ <i class="fas fa-times"></i>
775
+ </button>
776
+ `;
777
+ cartItemsContainer.appendChild(cartItem);
778
+ });
779
+
780
+ // Update cart summary
781
+ const deliveryFee = 3.99;
782
+ const total = subtotal + deliveryFee;
783
+
784
+ cartSubtotal.textContent = `$${subtotal.toFixed(2)}`;
785
+ cartTotal.textContent = `$${total.toFixed(2)}`;
786
+
787
+ // Add event listeners to quantity buttons
788
+ document.querySelectorAll('.quantity-btn').forEach(button => {
789
+ button.addEventListener('click', (e) => {
790
+ const itemId = parseInt(button.getAttribute('data-id'));
791
+ const isIncrease = button.classList.contains('increase');
792
+ const isDecrease = button.classList.contains('decrease');
793
+ const item = cart.find(item => item.id === itemId);
794
+
795
+ if (item) {
796
+ if (isIncrease) {
797
+ updateQuantity(itemId, item.quantity + 1);
798
+ } else if (isDecrease) {
799
+ updateQuantity(itemId, item.quantity - 1);
800
+ }
801
+ }
802
+ });
803
+ });
804
+
805
+ // Add event listeners to remove buttons
806
+ document.querySelectorAll('.remove-item').forEach(button => {
807
+ button.addEventListener('click', (e) => {
808
+ const itemId = parseInt(button.getAttribute('data-id'));
809
+ removeFromCart(itemId);
810
+ });
811
+ });
812
+ }
813
+
814
+ // Toggle cart sidebar
815
+ function toggleCart() {
816
+ cartSidebar.classList.toggle('translate-x-full');
817
+ cartBackdrop.classList.toggle('hidden');
818
+
819
+ // Prevent scrolling when cart is open
820
+ if (cartSidebar.classList.contains('translate-x-full')) {
821
+ document.body.style.overflow = 'auto';
822
+ } else {
823
+ document.body.style.overflow = 'hidden';
824
+ }
825
+ }
826
+
827
+ // Event listeners
828
+ cartBtn.addEventListener('click', toggleCart);
829
+ closeCartBtn.addEventListener('click', toggleCart);
830
+ cartBackdrop.addEventListener('click', toggleCart);
831
+ floatingOrderBtn.addEventListener('click', toggleCart);
832
+
833
+ // Category filter buttons
834
+ categoryBtns.forEach(button => {
835
+ button.addEventListener('click', () => {
836
+ // Remove active class from all buttons
837
+ categoryBtns.forEach(btn => {
838
+ btn.classList.remove('bg-amber-600', 'text-white');
839
+ btn.classList.add('bg-white', 'text-gray-900');
840
+ });
841
+
842
+ // Add active class to clicked button
843
+ button.classList.remove('bg-white', 'text-gray-900');
844
+ button.classList.add('bg-amber-600', 'text-white');
845
+
846
+ const category = button.getAttribute('data-category');
847
+ renderMenuItems(category);
848
+ });
849
+ });
850
+
851
+ // Mobile menu toggle
852
+ mobileMenuButton.addEventListener('click', () => {
853
+ mobileMenu.classList.toggle('hidden');
854
+ });
855
+
856
+ // Contact form submission
857
+ contactForm.addEventListener('submit', (e) => {
858
+ e.preventDefault();
859
+
860
+ const name = document.getElementById('name').value;
861
+ const email = document.getElementById('email').value;
862
+ const message = document.getElementById('message').value;
863
+
864
+ // Here you would typically send the form data to a server
865
+ // For this example, we'll just show an alert
866
+ alert(`Thank you for your message, ${name}! We'll get back to you soon.`);
867
+
868
+ // Reset the form
869
+ contactForm.reset();
870
+ });
871
+
872
+ // Checkout button
873
+ checkoutBtn.addEventListener('click', () => {
874
+ alert('Proceeding to checkout! This would connect to a payment system in a real application.');
875
+
876
+ // Clear the cart
877
+ cart = [];
878
+ localStorage.removeItem('savoryHavenCart');
879
+ updateCartCount();
880
+ renderCartItems();
881
+ toggleCart();
882
+ });
883
+
884
+ // Smooth scrolling for anchor links
885
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
886
+ anchor.addEventListener('click', function (e) {
887
+ e.preventDefault();
888
+
889
+ const targetId = this.getAttribute('href');
890
+ const targetElement = document.querySelector(targetId);
891
+
892
+ if (targetElement) {
893
+ // Close mobile menu if open
894
+ if (!mobileMenu.classList.contains('hidden')) {
895
+ mobileMenu.classList.add('hidden');
896
+ }
897
+
898
+ // Calculate the scroll position, accounting for the fixed header
899
+ const headerHeight = document.querySelector('nav').offsetHeight;
900
+ const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - headerHeight;
901
+
902
+ window.scrollTo({
903
+ top: targetPosition,
904
+ behavior: 'smooth'
905
+ });
906
+ }
907
+ });
908
+ });
909
+ </script>
910
+ <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=PapyrusPapa/trial-site" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
911
+ </html>