Hugging Face's logo

Spaces:
Axelnm
/
brunch-beans
Running

App Files Community
Axelnm commited on
Commit
ba8f811
·
verified ·
1 Parent(s): f5b2dcb

верни фотографии они пропали - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +478 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Brunch Beans
3
- emoji: 🐢
4
  colorFrom: purple
5
- colorTo: green
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: brunch-beans
3
+ emoji: 🐳
4
  colorFrom: purple
5
+ colorTo: yellow
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,478 @@
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="ru">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Brunch&Beans - Уютное кафе</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
+ <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
10
+ <style>
11
+ :root {
12
+ --cream: #FFF8F0;
13
+ --brown: #6B4C3B;
14
+ --gray: #4A4A4A;
15
+ --orange: #FF8A65;
16
+ }
17
+
18
+ body {
19
+ font-family: 'Roboto', sans-serif;
20
+ color: var(--gray);
21
+ background-color: var(--cream);
22
+ scroll-behavior: smooth;
23
+ }
24
+
25
+ h1, h2, h3, h4 {
26
+ font-family: 'Playfair Display', serif;
27
+ }
28
+
29
+ .menu-item:hover .menu-overlay {
30
+ opacity: 1;
31
+ transform: translateY(0);
32
+ }
33
+
34
+ .menu-overlay {
35
+ transition: all 0.3s ease;
36
+ opacity: 0;
37
+ transform: translateY(20px);
38
+ }
39
+
40
+ .fade-in {
41
+ animation: fadeIn 0.8s ease-in;
42
+ }
43
+
44
+ @keyframes fadeIn {
45
+ from { opacity: 0; }
46
+ to { opacity: 1; }
47
+ }
48
+
49
+ .hero-overlay {
50
+ background: linear-gradient(to bottom, rgba(107, 76, 59, 0.6), rgba(107, 76, 59, 0.3));
51
+ }
52
+
53
+ .lazy {
54
+ opacity: 0;
55
+ transition: opacity 0.3s;
56
+ }
57
+
58
+ .lazy.loaded {
59
+ opacity: 1;
60
+ }
61
+ </style>
62
+ </head>
63
+ <body class="overflow-x-hidden">
64
+ <!-- Header -->
65
+ <header class="fixed w-full z-50 bg-[#FFF8F0] shadow-md">
66
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
67
+ <a href="#" class="text-2xl font-bold text-[#6B4C3B]">Brunch<span class="text-[#FF8A65]">&</span>Beans</a>
68
+
69
+ <nav class="hidden md:flex space-x-8">
70
+ <a href="#home" class="text-[#6B4C3B] hover:text-[#FF8A65] transition">Главная</a>
71
+ <a href="#menu" class="text-[#6B4C3B] hover:text-[#FF8A65] transition">Меню</a>
72
+ <a href="#gallery" class="text-[#6B4C3B] hover:text-[#FF8A65] transition">Галерея</a>
73
+ <a href="#reservation" class="text-[#6B4C3B] hover:text-[#FF8A65] transition">Бронирование</a>
74
+ <a href="#contact" class="text-[#6B4C3B] hover:text-[#FF8A65] transition">Контакты</a>
75
+ </nav>
76
+
77
+ <button id="mobile-menu-button" class="md:hidden text-[#6B4C3B]">
78
+ <i class="fas fa-bars text-2xl"></i>
79
+ </button>
80
+ </div>
81
+
82
+ <!-- Mobile Menu -->
83
+ <div id="mobile-menu" class="hidden md:hidden bg-[#FFF8F0] w-full px-4 pb-4">
84
+ <div class="flex flex-col space-y-3">
85
+ <a href="#home" class="text-[#6B4C3B] hover:text-[#FF8A65] transition py-2">Главная</a>
86
+ <a href="#menu" class="text-[#6B4C3B] hover:text-[#FF8A65] transition py-2">Меню</a>
87
+ <a href="#gallery" class="text-[#6B4C3B] hover:text-[#FF8A65] transition py-2">Галерея</a>
88
+ <a href="#reservation" class="text-[#6B4C3B] hover:text-[#FF8A65] transition py-2">Бронирование</a>
89
+ <a href="#contact" class="text-[#6B4C3B] hover:text-[#FF8A65] transition py-2">Контакты</a>
90
+ </div>
91
+ </div>
92
+ </header>
93
+
94
+ <!-- Hero Section -->
95
+ <section id="home" class="relative h-screen flex items-center justify-center">
96
+ <div class="absolute inset-0 hero-overlay"></div>
97
+ <img
98
+ src="https://images.unsplash.com/photo-1551218808-94e220e084d2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80"
99
+ alt="Brunch&Beans интерьер"
100
+ class="absolute w-full h-full object-cover lazy"
101
+ loading="lazy"
102
+ onload="this.classList.add('loaded')"
103
+ >
104
+
105
+ <div class="container mx-auto px-4 z-10 text-center text-white fade-in">
106
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">Brunch<span class="text-[#FF8A65]">&</span>Beans</h1>
107
+ <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">Уютное кафе с домашней атмосферой и вкуснейшими блюдами</p>
108
+ <a href="#reservation" class="bg-[#FF8A65] hover:bg-[#e07a55] text-white px-8 py-3 rounded-full text-lg font-medium transition">Забронировать столик</a>
109
+ </div>
110
+ </section>
111
+
112
+ <!-- Menu Section -->
113
+ <section id="menu" class="py-20 bg-[#FFF8F0]">
114
+ <div class="container mx-auto px-4">
115
+ <div class="text-center mb-16">
116
+ <h2 class="text-3xl md:text-4xl font-bold text-[#6B4C3B] mb-4">Наше меню</h2>
117
+ <div class="w-20 h-1 bg-[#FF8A65] mx-auto"></div>
118
+ </div>
119
+
120
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
121
+ <!-- Breakfast -->
122
+ <div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition">
123
+ <div class="relative h-48 overflow-hidden">
124
+ <img
125
+ src="https://images.unsplash.com/photo-1559847844-5315695dadae?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1998&q=80"
126
+ alt="Завтраки"
127
+ class="w-full h-full object-cover lazy"
128
+ loading="lazy"
129
+ onload="this.classList.add('loaded')"
130
+ >
131
+ <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center menu-overlay">
132
+ <h3 class="text-white text-2xl font-bold">Завтраки</h3>
133
+ </div>
134
+ </div>
135
+ <div class="p-6">
136
+ <ul class="space-y-3">
137
+ <li class="flex justify-between">
138
+ <span>Яичница с авокадо</span>
139
+ <span class="text-[#FF8A65] font-medium">450₽</span>
140
+ </li>
141
+ <li class="flex justify-between">
142
+ <span>Блинчики с ягодами</span>
143
+ <span class="text-[#FF8A65] font-medium">380₽</span>
144
+ </li>
145
+ <li class="flex justify-between">
146
+ <span>Гранола с йогуртом</span>
147
+ <span class="text-[#FF8A65] font-medium">320₽</span>
148
+ </li>
149
+ </ul>
150
+ </div>
151
+ </div>
152
+
153
+ <!-- Lunch -->
154
+ <div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition">
155
+ <div class="relative h-48 overflow-hidden">
156
+ <img
157
+ src="https://images.unsplash.com/photo-1466978913421-dad2ebd01d17?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80"
158
+ alt="Обеды"
159
+ class="w-full h-full object-cover lazy"
160
+ loading="lazy"
161
+ onload="this.classList.add('loaded')"
162
+ >
163
+ <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center menu-overlay">
164
+ <h3 class="text-white text-2xl font-bold">Обеды</h3>
165
+ </div>
166
+ </div>
167
+ <div class="p-6">
168
+ <ul class="space-y-3">
169
+ <li class="flex justify-between">
170
+ <span>Салат Цезарь</span>
171
+ <span class="text-[#FF8A65] font-medium">520₽</span>
172
+ </li>
173
+ <li class="flex justify-between">
174
+ <span>Паста Карбонара</span>
175
+ <span class="text-[#FF8A65] font-medium">580₽</span>
176
+ </li>
177
+ <li class="flex justify-between">
178
+ <span>Суп Том Ям</span>
179
+ <span class="text-[#FF8A65] font-medium">490₽</span>
180
+ </li>
181
+ </ul>
182
+ </div>
183
+ </div>
184
+
185
+ <!-- Drinks -->
186
+ <div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition">
187
+ <div class="relative h-48 overflow-hidden">
188
+ <img
189
+ src="https://images.unsplash.com/photo-1514933651103-005eec06c04b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80"
190
+ alt="Напитки"
191
+ class="w-full h-full object-cover lazy"
192
+ loading="lazy"
193
+ onload="this.classList.add('loaded')"
194
+ >
195
+ <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center menu-overlay">
196
+ <h3 class="text-white text-2xl font-bold">Напитки</h3>
197
+ </div>
198
+ </div>
199
+ <div class="p-6">
200
+ <ul class="space-y-3">
201
+ <li class="flex justify-between">
202
+ <span>Латте</span>
203
+ <span class="text-[#FF8A65] font-medium">280₽</span>
204
+ </li>
205
+ <li class="flex justify-between">
206
+ <span>Фреш апельсиновый</span>
207
+ <span class="text-[#FF8A65] font-medium">350₽</span>
208
+ </li>
209
+ <li class="flex justify-between">
210
+ <span>Лимонад домашний</span>
211
+ <span class="text-[#FF8A65] font-medium">320₽</span>
212
+ </li>
213
+ </ul>
214
+ </div>
215
+ </div>
216
+ </div>
217
+
218
+ <div class="text-center mt-12">
219
+ <a href="#" class="inline-block border-2 border-[#6B4C3B] text-[#6B4C3B] hover:bg-[#6B4C3B] hover:text-white px-6 py-2 rounded-full transition">Полное меню (PDF)</a>
220
+ </div>
221
+ </div>
222
+ </section>
223
+
224
+ <!-- Gallery Section -->
225
+ <section id="gallery" class="py-20 bg-white">
226
+ <div class="container mx-auto px-4">
227
+ <div class="text-center mb-16">
228
+ <h2 class="text-3xl md:text-4xl font-bold text-[#6B4C3B] mb-4">Галерея</h2>
229
+ <div class="w-20 h-1 bg-[#FF8A65] mx-auto"></div>
230
+ </div>
231
+
232
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
233
+ <div class="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition">
234
+ <img
235
+ src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80"
236
+ alt="Интерьер кафе"
237
+ class="w-full h-64 object-cover hover:scale-105 transition duration-500 lazy"
238
+ loading="lazy"
239
+ onload="this.classList.add('loaded')"
240
+ >
241
+ </div>
242
+ <div class="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition">
243
+ <img
244
+ src="https://images.unsplash.com/photo-1414235077428-338989a2e8c0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80"
245
+ alt="Блюда кафе"
246
+ class="w-full h-64 object-cover hover:scale-105 transition duration-500 lazy"
247
+ loading="lazy"
248
+ onload="this.classList.add('loaded')"
249
+ >
250
+ </div>
251
+ <div class="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition">
252
+ <img
253
+ src="https://images.unsplash.com/photo-1517248135467-4bab7a99e9c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80"
254
+ alt="Шеф-повар"
255
+ class="w-full h-64 object-cover hover:scale-105 transition duration-500 lazy"
256
+ loading="lazy"
257
+ onload="this.classList.add('loaded')"
258
+ >
259
+ </div>
260
+ <div class="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition">
261
+ <img
262
+ src="https://images.unsplash.com/photo-1544025162-d76694265947?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2069&q=80"
263
+ alt="Кофе"
264
+ class="w-full h-64 object-cover hover:scale-105 transition duration-500 lazy"
265
+ loading="lazy"
266
+ onload="this.classList.add('loaded')"
267
+ >
268
+ </div>
269
+ <div class="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition">
270
+ <img
271
+ src="https://images.unsplash.com/photo-1513558161293-cdaf765ed2fd?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80"
272
+ alt="Бранч"
273
+ class="w-full h-64 object-cover hover:scale-105 transition duration-500 lazy"
274
+ loading="lazy"
275
+ onload="this.classList.add('loaded')"
276
+ >
277
+ </div>
278
+ <div class="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition">
279
+ <img
280
+ src="https://images.unsplash.com/photo-1551218808-94e220e084d2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80"
281
+ alt="Десерты"
282
+ class="w-full h-64 object-cover hover:scale-105 transition duration-500 lazy"
283
+ loading="lazy"
284
+ onload="this.classList.add('loaded')"
285
+ >
286
+ </div>
287
+ </div>
288
+ </div>
289
+ </section>
290
+
291
+ <!-- Reservation Section -->
292
+ <section id="reservation" class="py-20 bg-[#FFF8F0]">
293
+ <div class="container mx-auto px-4">
294
+ <div class="text-center mb-16">
295
+ <h2 class="text-3xl md:text-4xl font-bold text-[#6B4C3B] mb-4">Бронирование столика</h2>
296
+ <div class="w-20 h-1 bg-[#FF8A65] mx-auto"></div>
297
+ </div>
298
+
299
+ <div class="max-w-3xl mx-auto bg-white rounded-lg shadow-lg overflow-hidden">
300
+ <div class="md:flex">
301
+ <div class="md:w-1/2 bg-[#6B4C3B] p-8 text-white">
302
+ <h3 class="text-2xl font-bold mb-6">Часы работы</h3>
303
+ <ul class="space-y-4">
304
+ <li class="flex justify-between border-b border-[#8a6d5d] pb-2">
305
+ <span>Понедельник - Пятница</span>
306
+ <span>8:00 - 22:00</span>
307
+ </li>
308
+ <li class="flex justify-between border-b border-[#8a6d5d] pb-2">
309
+ <span>Суббота</span>
310
+ <span>9:00 - 23:00</span>
311
+ </li>
312
+ <li class="flex justify-between">
313
+ <span>Воскресенье</span>
314
+ <span>9:00 - 21:00</span>
315
+ </li>
316
+ </ul>
317
+
318
+ <div class="mt-12">
319
+ <h3 class="text-2xl font-bold mb-4">Контакты</h3>
320
+ <p class="mb-2"><i class="fas fa-phone-alt mr-2"></i> +7 (123) 456-78-90</p>
321
+ <p><i class="fas fa-envelope mr-2"></i> hello@brunchbeans.ru</p>
322
+ </div>
323
+ </div>
324
+
325
+ <div class="md:w-1/2 p-8">
326
+ <form id="reservation-form" class="space-y-4">
327
+ <div>
328
+ <label for="name" class="block text-[#6B4C3B] mb-1">Имя</label>
329
+ <input type="text" id="name" name="name" required class="w-full px-4 py-2 border border-[#6B4C3B] rounded focus:outline-none focus:ring-2 focus:ring-[#FF8A65]">
330
+ </div>
331
+
332
+ <div>
333
+ <label for="email" class="block text-[#6B4C3B] mb-1">Email</label>
334
+ <input type="email" id="email" name="email" required class="w-full px-4 py-2 border border-[#6B4C3B] rounded focus:outline-none focus:ring-2 focus:ring-[#FF8A65]">
335
+ </div>
336
+
337
+ <div>
338
+ <label for="phone" class="block text-[#6B4C3B] mb-1">Телефон</label>
339
+ <input type="tel" id="phone" name="phone" required class="w-full px-4 py-2 border border-[#6B4C3B] rounded focus:outline-none focus:ring-2 focus:ring-[#FF8A65]">
340
+ </div>
341
+
342
+ <div>
343
+ <label for="date" class="block text-[#6B4C3B] mb-1">Дата</label>
344
+ <input type="date" id="date" name="date" required class="w-full px-4 py-2 border border-[#6B4C3B] rounded focus:outline-none focus:ring-2 focus:ring-[#FF8A65]">
345
+ </div>
346
+
347
+ <div>
348
+ <label for="time" class="block text-[#6B4C3B] mb-1">Время</label>
349
+ <input type="time" id="time" name="time" required class="w-full px-4 py-2 border border-[#6B4C3B] rounded focus:outline-none focus:ring-2 focus:ring-[#FF8A65]">
350
+ </div>
351
+
352
+ <div>
353
+ <label for="guests" class="block text-[#6B4C3B] mb-1">Количество гостей</label>
354
+ <select id="guests" name="guests" class="w-full px-4 py-2 border border-[#6B4C3B] rounded focus:outline-none focus:ring-2 focus:ring-[#FF8A65]">
355
+ <option value="1">1 человек</option>
356
+ <option value="2">2 человека</option>
357
+ <option value="3">3 человека</option>
358
+ <option value="4">4 человека</option>
359
+ <option value="5+">5+ человек</option>
360
+ </select>
361
+ </div>
362
+
363
+ <button type="submit" class="w-full bg-[#FF8A65] hover:bg-[#e07a55] text-white py-3 rounded font-medium transition">Забронировать</button>
364
+ </form>
365
+ </div>
366
+ </div>
367
+ </div>
368
+ </div>
369
+ </section>
370
+
371
+ <!-- Contact Section -->
372
+ <section id="contact" class="py-20 bg-white">
373
+ <div class="container mx-auto px-4">
374
+ <div class="text-center mb-16">
375
+ <h2 class="text-3xl md:text-4xl font-bold text-[#6B4C3B] mb-4">Как нас найти</h2>
376
+ <div class="w-20 h-1 bg-[#FF8A65] mx-auto"></div>
377
+ </div>
378
+
379
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
380
+ <div>
381
+ <h3 class="text-2xl font-bold text-[#6B4C3B] mb-4">Наш адрес</h3>
382
+ <p class="mb-6">г. Москва, ул. Кофейная, д. 42</p>
383
+
384
+ <h3 class="text-2xl font-bold text-[#6B4C3B] mb-4">Социальные сети</h3>
385
+ <div class="flex space-x-4">
386
+ <a href="#" class="text-[#6B4C3B] hover:text-[#FF8A65] text-2xl"><i class="fab fa-instagram"></i></a>
387
+ <a href="#" class="text-[#6B4C3B] hover:text-[#FF8A65] text-2xl"><i class="fab fa-facebook"></i></a>
388
+ <a href="#" class="text-[#6B4C3B] hover:text-[#FF8A65] text-2xl"><i class="fab fa-telegram"></i></a>
389
+ <a href="#" class="text-[#6B4C3B] hover:text-[#FF8A65] text-2xl"><i class="fab fa-vk"></i></a>
390
+ </div>
391
+ </div>
392
+
393
+ <div class="h-80 rounded-lg overflow-hidden">
394
+ <iframe
395
+ src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2245.3737899197454!2d37.618423315930474!3d55.75367698055287!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46b54a5a738fa419%3A0x7c347d506f52311f!2z0JrRgNCw0YHQvdCw0Y8g0JrQvtC70LvQtdC00LY!5e0!3m2!1sru!2sru!4v1688731234567!5m2!1sru!2sru"
396
+ width="100%"
397
+ height="100%"
398
+ style="border:0;"
399
+ allowfullscreen=""
400
+ loading="lazy"
401
+ referrerpolicy="no-referrer-when-downgrade"
402
+ class="lazy"
403
+ onload="this.classList.add('loaded')"
404
+ ></iframe>
405
+ </div>
406
+ </div>
407
+ </div>
408
+ </section>
409
+
410
+ <!-- Footer -->
411
+ <footer class="bg-[#6B4C3B] text-white py-8">
412
+ <div class="container mx-auto px-4">
413
+ <div class="flex flex-col md:flex-row justify-between items-center">
414
+ <div class="mb-4 md:mb-0">
415
+ <a href="#" class="text-2xl font-bold text-white">Brunch<span class="text-[#FF8A65]">&</span>Beans</a>
416
+ <p class="mt-2 text-sm">© 2023 Все права защищены</p>
417
+ </div>
418
+
419
+ <div class="flex space-x-6">
420
+ <a href="#" class="hover:text-[#FF8A65] transition">Политика конфиденциальности</a>
421
+ <a href="#" class="hover:text-[#FF8A65] transition">Условия использования</a>
422
+ </div>
423
+ </div>
424
+ </div>
425
+ </footer>
426
+
427
+ <script>
428
+ // Mobile menu toggle
429
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
430
+ const menu = document.getElementById('mobile-menu');
431
+ menu.classList.toggle('hidden');
432
+ });
433
+
434
+ // Form submission
435
+ document.getElementById('reservation-form').addEventListener('submit', function(e) {
436
+ e.preventDefault();
437
+ alert('Ваше бронирование принято! Мы свяжемся с вами для подтверждения.');
438
+ this.reset();
439
+ });
440
+
441
+ // Lazy loading images
442
+ document.addEventListener('DOMContentLoaded', function() {
443
+ const lazyImages = [].slice.call(document.querySelectorAll('img.lazy'));
444
+
445
+ if ('IntersectionObserver' in window) {
446
+ let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
447
+ entries.forEach(function(entry) {
448
+ if (entry.isIntersecting) {
449
+ let lazyImage = entry.target;
450
+ lazyImage.src = lazyImage.dataset.src;
451
+ lazyImage.classList.add('loaded');
452
+ lazyImageObserver.unobserve(lazyImage);
453
+ }
454
+ });
455
+ });
456
+
457
+ lazyImages.forEach(function(lazyImage) {
458
+ lazyImageObserver.observe(lazyImage);
459
+ });
460
+ }
461
+ });
462
+
463
+ // Simple scroll animation
464
+ window.addEventListener('scroll', function() {
465
+ const elements = document.querySelectorAll('.fade-in');
466
+
467
+ elements.forEach(function(element) {
468
+ const elementPosition = element.getBoundingClientRect().top;
469
+ const screenPosition = window.innerHeight / 1.3;
470
+
471
+ if (elementPosition < screenPosition) {
472
+ element.style.opacity = '1';
473
+ }
474
+ });
475
+ });
476
+ </script>
477
+ <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=Axelnm/brunch-beans" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
478
+ </html>