Hugging Face's logo

Spaces:
Greats
/
optical
Running

App Files Community
Greats commited on
Commit
6dfcf57
·
verified ·
1 Parent(s): 26e64b2

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +627 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Optical
3
- emoji: 🐨
4
- colorFrom: green
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: optical
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,627 @@
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>Optica Opton - Современная оптика в Москве</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=Montserrat:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Montserrat', sans-serif;
14
+ scroll-behavior: smooth;
15
+ }
16
+
17
+ .hero-gradient {
18
+ background: linear-gradient(135deg, #6b82ff 0%, #3a56e8 100%);
19
+ }
20
+
21
+ .nav-link:hover {
22
+ color: #3a56e8;
23
+ }
24
+
25
+ .product-card:hover {
26
+ transform: translateY(-5px);
27
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
28
+ }
29
+
30
+ .input-focus:focus {
31
+ border-color: #3a56e8;
32
+ box-shadow: 0 0 0 3px rgba(58, 86, 232, 0.2);
33
+ }
34
+
35
+ .transition-all {
36
+ transition: all 0.3s ease;
37
+ }
38
+ </style>
39
+ </head>
40
+ <body class="bg-gray-50">
41
+ <!-- Header -->
42
+ <header class="bg-white shadow-sm sticky top-0 z-50">
43
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
44
+ <div class="flex items-center space-x-2">
45
+ <i class="fas fa-glasses text-3xl text-blue-600"></i>
46
+ <span class="text-xl font-bold text-gray-800">Optica Opton</span>
47
+ </div>
48
+
49
+ <nav class="hidden md:flex space-x-8">
50
+ <a href="#home" class="nav-link text-gray-600 hover:text-blue-600 font-medium transition-all">Главная</a>
51
+ <a href="#services" class="nav-link text-gray-600 hover:text-blue-600 font-medium transition-all">Услуги</a>
52
+ <a href="#products" class="nav-link text-gray-600 hover:text-blue-600 font-medium transition-all">Товары</a>
53
+ <a href="#about" class="nav-link text-gray-600 hover:text-blue-600 font-medium transition-all">О нас</a>
54
+ <a href="#contacts" class="nav-link text-gray-600 hover:text-blue-600 font-medium transition-all">Контакты</a>
55
+ </nav>
56
+
57
+ <div class="flex items-center space-x-4">
58
+ <a href="tel:+74951234567" class="hidden md:flex items-center text-gray-700 hover:text-blue-600">
59
+ <i class="fas fa-phone-alt mr-2"></i>
60
+ <span>+7 (495) 123-45-67</span>
61
+ </a>
62
+ <button class="md:hidden text-gray-600" id="mobile-menu-button">
63
+ <i class="fas fa-bars text-2xl"></i>
64
+ </button>
65
+ </div>
66
+ </div>
67
+
68
+ <!-- Mobile menu -->
69
+ <div class="md:hidden hidden bg-white py-4 px-4 shadow-md" id="mobile-menu">
70
+ <div class="flex flex-col space-y-3">
71
+ <a href="#home" class="nav-link text-gray-600 hover:text-blue-600 font-medium">Главная</a>
72
+ <a href="#services" class="nav-link text-gray-600 hover:text-blue-600 font-medium">Услуги</a>
73
+ <a href="#products" class="nav-link text-gray-600 hover:text-blue-600 font-medium">Товары</a>
74
+ <a href="#about" class="nav-link text-gray-600 hover:text-blue-600 font-medium">О нас</a>
75
+ <a href="#contacts" class="nav-link text-gray-600 hover:text-blue-600 font-medium">Контакты</a>
76
+ <a href="tel:+74951234567" class="flex items-center text-gray-700 hover:text-blue-600 pt-2 border-t">
77
+ <i class="fas fa-phone-alt mr-2"></i>
78
+ <span>+7 (495) 123-45-67</span>
79
+ </a>
80
+ </div>
81
+ </div>
82
+ </header>
83
+
84
+ <!-- Hero Section -->
85
+ <section id="home" class="hero-gradient text-white py-20">
86
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
87
+ <div class="md:w-1/2 mb-10 md:mb-0">
88
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Современная оптика в Москве</h1>
89
+ <p class="text-xl mb-8">Качественные очки, линзы и аксессуары с профессиональным подходом к кажд��му клиенту.</p>
90
+ <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
91
+ <a href="#products" class="bg-white text-blue-600 font-bold py-3 px-6 rounded-lg text-center hover:bg-gray-100 transition-all">
92
+ Каталог товаров
93
+ </a>
94
+ <a href="#contacts" class="border-2 border-white text-white font-bold py-3 px-6 rounded-lg text-center hover:bg-white hover:text-blue-600 transition-all">
95
+ Записаться на прием
96
+ </a>
97
+ </div>
98
+ </div>
99
+ <div class="md:w-1/2 flex justify-center">
100
+ <img src="https://images.unsplash.com/photo-1556306535-0f09a537f0a3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
101
+ alt="Очки" class="rounded-lg shadow-2xl max-w-full h-auto">
102
+ </div>
103
+ </div>
104
+ </section>
105
+
106
+ <!-- Services Section -->
107
+ <section id="services" class="py-16 bg-white">
108
+ <div class="container mx-auto px-4">
109
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Наши услуги</h2>
110
+
111
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
112
+ <!-- Service 1 -->
113
+ <div class="bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all">
114
+ <div class="text-blue-600 mb-4">
115
+ <i class="fas fa-eye text-4xl"></i>
116
+ </div>
117
+ <h3 class="text-xl font-semibold mb-3 text-gray-800">Проверка зрения</h3>
118
+ <p class="text-gray-600">Профессиональная диагностика зрения на современном оборудовании с точной подборкой линз.</p>
119
+ </div>
120
+
121
+ <!-- Service 2 -->
122
+ <div class="bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all">
123
+ <div class="text-blue-600 mb-4">
124
+ <i class="fas fa-glasses text-4xl"></i>
125
+ </div>
126
+ <h3 class="text-xl font-semibold mb-3 text-gray-800">Подбор очков</h3>
127
+ <p class="text-gray-600">Индивидуальный подбор оправ и линз с учетом ваших потребностей и стиля жизни.</p>
128
+ </div>
129
+
130
+ <!-- Service 3 -->
131
+ <div class="bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all">
132
+ <div class="text-blue-600 mb-4">
133
+ <i class="fas fa-sun text-4xl"></i>
134
+ </div>
135
+ <h3 class="text-xl font-semibold mb-3 text-gray-800">Солнцезащитные очки</h3>
136
+ <p class="text-gray-600">Широкий выбор солнцезащитных очков от ведущих мировых брендов с защитой от UV-излучения.</p>
137
+ </div>
138
+
139
+ <!-- Service 4 -->
140
+ <div class="bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all">
141
+ <div class="text-blue-600 mb-4">
142
+ <i class="fas fa-clock text-4xl"></i>
143
+ </div>
144
+ <h3 class="text-xl font-semibold mb-3 text-gray-800">Срочное изготовление</h3>
145
+ <p class="text-gray-600">Изготовление очков в течение 1-2 дней с использованием современных технологий.</p>
146
+ </div>
147
+
148
+ <!-- Service 5 -->
149
+ <div class="bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all">
150
+ <div class="text-blue-600 mb-4">
151
+ <i class="fas fa-user-md text-4xl"></i>
152
+ </div>
153
+ <h3 class="text-xl font-semibold mb-3 text-gray-800">Консультация офтальмолога</h3>
154
+ <p class="text-gray-600">Профессиональные консультации по вопросам здоровья глаз и профилактике заболеваний.</p>
155
+ </div>
156
+
157
+ <!-- Service 6 -->
158
+ <div class="bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition-all">
159
+ <div class="text-blue-600 mb-4">
160
+ <i class="fas fa-tools text-4xl"></i>
161
+ </div>
162
+ <h3 class="text-xl font-semibold mb-3 text-gray-800">Ремонт очков</h3>
163
+ <p class="text-gray-600">Качественный ремонт и регулировка оправ любой сложности с гарантией на работу.</p>
164
+ </div>
165
+ </div>
166
+ </div>
167
+ </section>
168
+
169
+ <!-- Products Section -->
170
+ <section id="products" class="py-16 bg-gray-50">
171
+ <div class="container mx-auto px-4">
172
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Наши товары</h2>
173
+
174
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
175
+ <!-- Product 1 -->
176
+ <div class="bg-white rounded-xl overflow-hidden shadow-md product-card transition-all">
177
+ <div class="relative overflow-hidden h-64">
178
+ <img src="https://images.unsplash.com/photo-1591073113125-e46713c829ed?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
179
+ alt="Очки Ray-Ban" class="w-full h-full object-cover">
180
+ <div class="absolute top-2 right-2 bg-blue-600 text-white text-xs font-bold px-2 py-1 rounded">
181
+ NEW
182
+ </div>
183
+ </div>
184
+ <div class="p-4">
185
+ <h3 class="font-semibold text-lg mb-1 text-gray-800">Ray-Ban Aviator</h3>
186
+ <p class="text-gray-600 text-sm mb-3">Классические авиаторы с поляризационными линзами</p>
187
+ <div class="flex justify-between items-center">
188
+ <span class="font-bold text-gray-800">12,990 ₽</span>
189
+ <button class="bg-blue-600 text-white px-3 py-1 rounded hover:bg-blue-700 transition-all">
190
+ <i class="fas fa-shopping-cart"></i>
191
+ </button>
192
+ </div>
193
+ </div>
194
+ </div>
195
+
196
+ <!-- Product 2 -->
197
+ <div class="bg-white rounded-xl overflow-hidden shadow-md product-card transition-all">
198
+ <div class="relative overflow-hidden h-64">
199
+ <img src="https://images.unsplash.com/photo-1511499767150-a48a237f0083?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1480&q=80"
200
+ alt="Очки Oakley" class="w-full h-full object-cover">
201
+ </div>
202
+ <div class="p-4">
203
+ <h3 class="font-semibold text-lg mb-1 text-gray-800">Oakley Holbrook</h3>
204
+ <p class="text-gray-600 text-sm mb-3">Спортивные очки с защитой от ультрафиолета</p>
205
+ <div class="flex justify-between items-center">
206
+ <span class="font-bold text-gray-800">14,500 ₽</span>
207
+ <button class="bg-blue-600 text-white px-3 py-1 rounded hover:bg-blue-700 transition-all">
208
+ <i class="fas fa-shopping-cart"></i>
209
+ </button>
210
+ </div>
211
+ </div>
212
+ </div>
213
+
214
+ <!-- Product 3 -->
215
+ <div class="bg-white rounded-xl overflow-hidden shadow-md product-card transition-all">
216
+ <div class="relative overflow-hidden h-64">
217
+ <img src="https://images.unsplash.com/photo-1556306535-38febf6782e7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
218
+ alt="Очки Prada" class="w-full h-full object-cover">
219
+ <div class="absolute top-2 right-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded">
220
+ SALE
221
+ </div>
222
+ </div>
223
+ <div class="p-4">
224
+ <h3 class="font-semibold text-lg mb-1 text-gray-800">Prada PR 16ZS</h3>
225
+ <p class="text-gray-600 text-sm mb-3">Стильные очки с градиентными линзами</p>
226
+ <div class="flex justify-between items-center">
227
+ <div>
228
+ <span class="text-red-500 font-bold">18,990 ₽</span>
229
+ <span class="text-gray-400 text-sm line-through ml-2">22,500 ₽</span>
230
+ </div>
231
+ <button class="bg-blue-600 text-white px-3 py-1 rounded hover:bg-blue-700 transition-all">
232
+ <i class="fas fa-shopping-cart"></i>
233
+ </button>
234
+ </div>
235
+ </div>
236
+ </div>
237
+
238
+ <!-- Product 4 -->
239
+ <div class="bg-white rounded-xl overflow-hidden shadow-md product-card transition-all">
240
+ <div class="relative overflow-hidden h-64">
241
+ <img src="https://images.unsplash.com/photo-1572635196234-14e3d0bff39d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
242
+ alt="Очки Gucci" class="w-full h-full object-cover">
243
+ </div>
244
+ <div class="p-4">
245
+ <h3 class="font-semibold text-lg mb-1 text-gray-800">Gucci GG0397S</h3>
246
+ <p class="text-gray-600 text-sm mb-3">Элегантные очки с логотипом Gucci</p>
247
+ <div class="flex justify-between items-center">
248
+ <span class="font-bold text-gray-800">23,700 ₽</span>
249
+ <button class="bg-blue-600 text-white px-3 py-1 rounded hover:bg-blue-700 transition-all">
250
+ <i class="fas fa-shopping-cart"></i>
251
+ </button>
252
+ </div>
253
+ </div>
254
+ </div>
255
+ </div>
256
+
257
+ <div class="text-center mt-10">
258
+ <a href="#" class="inline-block border-2 border-blue-600 text-blue-600 font-bold py-3 px-8 rounded-lg hover:bg-blue-600 hover:text-white transition-all">
259
+ Смотреть все товары
260
+ </a>
261
+ </div>
262
+ </div>
263
+ </section>
264
+
265
+ <!-- About Section -->
266
+ <section id="about" class="py-16 bg-white">
267
+ <div class="container mx-auto px-4">
268
+ <div class="flex flex-col lg:flex-row items-center">
269
+ <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10">
270
+ <h2 class="text-3xl font-bold mb-6 text-gray-800">О нашей оптике</h2>
271
+ <p class="text-gray-600 mb-4">Optica Opton - это современный оптический салон, работающий на рынке с 2010 года. Мы предлагаем широкий ассортимент очков, линз и аксессуаров от ведущих мировых производителей.</p>
272
+ <p class="text-gray-600 mb-6">Наши специалисты имеют многолетний опыт работы и регулярно проходят обучение, чтобы предложить вам самые современные решения для коррекции зрения.</p>
273
+
274
+ <div class="grid grid-cols-2 gap-4 mb-6">
275
+ <div class="flex items-center">
276
+ <div class="bg-blue-100 p-2 rounded-full mr-3">
277
+ <i class="fas fa-check text-blue-600"></i>
278
+ </div>
279
+ <span class="text-gray-700">Гарантия качества</span>
280
+ </div>
281
+ <div class="flex items-center">
282
+ <div class="bg-blue-100 p-2 rounded-full mr-3">
283
+ <i class="fas fa-check text-blue-600"></i>
284
+ </div>
285
+ <span class="text-gray-700">Опытные специалисты</span>
286
+ </div>
287
+ <div class="flex items-center">
288
+ <div class="bg-blue-100 p-2 rounded-full mr-3">
289
+ <i class="fas fa-check text-blue-600"></i>
290
+ </div>
291
+ <span class="text-gray-700">Современное оборудование</span>
292
+ </div>
293
+ <div class="flex items-center">
294
+ <div class="bg-blue-100 p-2 rounded-full mr-3">
295
+ <i class="fas fa-check text-blue-600"></i>
296
+ </div>
297
+ <span class="text-gray-700">Индивидуальный подход</span>
298
+ </div>
299
+ </div>
300
+
301
+ <a href="#contacts" class="inline-block bg-blue-600 text-white font-bold py-3 px-6 rounded-lg hover:bg-blue-700 transition-all">
302
+ Записаться на прием
303
+ </a>
304
+ </div>
305
+
306
+ <div class="lg:w-1/2">
307
+ <div class="relative">
308
+ <img src="https://images.unsplash.com/photo-1571622840901-92ae1385a6b1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
309
+ alt="Наш салон" class="rounded-lg shadow-lg w-full">
310
+ <div class="absolute -bottom-5 -right-5 bg-white p-4 rounded-lg shadow-lg hidden md:block">
311
+ <div class="text-center">
312
+ <div class="text-3xl font-bold text-blue-600">10+</div>
313
+ <div class="text-gray-600">лет на ры��ке</div>
314
+ </div>
315
+ </div>
316
+ </div>
317
+ </div>
318
+ </div>
319
+ </div>
320
+ </section>
321
+
322
+ <!-- Testimonials Section -->
323
+ <section class="py-16 bg-gray-50">
324
+ <div class="container mx-auto px-4">
325
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Отзывы наших клиентов</h2>
326
+
327
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
328
+ <!-- Testimonial 1 -->
329
+ <div class="bg-white p-6 rounded-xl shadow-sm">
330
+ <div class="flex items-center mb-4">
331
+ <div class="text-yellow-400 mr-2">
332
+ <i class="fas fa-star"></i>
333
+ <i class="fas fa-star"></i>
334
+ <i class="fas fa-star"></i>
335
+ <i class="fas fa-star"></i>
336
+ <i class="fas fa-star"></i>
337
+ </div>
338
+ </div>
339
+ <p class="text-gray-600 mb-4">"Отличный сервис и профессиональный подход! Подобрали идеальные очки, которые мне очень идут. Спасибо!"</p>
340
+ <div class="flex items-center">
341
+ <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Анна" class="w-10 h-10 rounded-full mr-3">
342
+ <div>
343
+ <h4 class="font-medium text-gray-800">Анна К.</h4>
344
+ <p class="text-sm text-gray-500">Клиент с 2018 года</p>
345
+ </div>
346
+ </div>
347
+ </div>
348
+
349
+ <!-- Testimonial 2 -->
350
+ <div class="bg-white p-6 rounded-xl shadow-sm">
351
+ <div class="flex items-center mb-4">
352
+ <div class="text-yellow-400 mr-2">
353
+ <i class="fas fa-star"></i>
354
+ <i class="fas fa-star"></i>
355
+ <i class="fas fa-star"></i>
356
+ <i class="fas fa-star"></i>
357
+ <i class="fas fa-star"></i>
358
+ </div>
359
+ </div>
360
+ <p class="text-gray-600 mb-4">"Очень доволен качеством линз и обслуживанием. Очки сделали быстро, все идеально подошло. Рекомендую!"</p>
361
+ <div class="flex items-center">
362
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Дмитрий" class="w-10 h-10 rounded-full mr-3">
363
+ <div>
364
+ <h4 class="font-medium text-gray-800">Дмитрий С.</h4>
365
+ <p class="text-sm text-gray-500">Клиент с 2020 года</p>
366
+ </div>
367
+ </div>
368
+ </div>
369
+
370
+ <!-- Testimonial 3 -->
371
+ <div class="bg-white p-6 rounded-xl shadow-sm">
372
+ <div class="flex items-center mb-4">
373
+ <div class="text-yellow-400 mr-2">
374
+ <i class="fas fa-star"></i>
375
+ <i class="fas fa-star"></i>
376
+ <i class="fas fa-star"></i>
377
+ <i class="fas fa-star"></i>
378
+ <i class="fas fa-star-half-alt"></i>
379
+ </div>
380
+ </div>
381
+ <p class="text-gray-600 mb-4">"Приятная атмосфера и внимательные специалисты. Подобрали солнцезащитные очки с диоптриями, теперь могу комфортно водить машину."</p>
382
+ <div class="flex items-center">
383
+ <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Елена" class="w-10 h-10 rounded-full mr-3">
384
+ <div>
385
+ <h4 class="font-medium text-gray-800">Елена В.</h4>
386
+ <p class="text-sm text-gray-500">Клиент с 2021 года</p>
387
+ </div>
388
+ </div>
389
+ </div>
390
+ </div>
391
+ </div>
392
+ </section>
393
+
394
+ <!-- Contacts Section -->
395
+ <section id="contacts" class="py-16 bg-white">
396
+ <div class="container mx-auto px-4">
397
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Контакты</h2>
398
+
399
+ <div class="flex flex-col lg:flex-row">
400
+ <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10">
401
+ <h3 class="text-xl font-semibold mb-4 text-gray-800">Наши контакты</h3>
402
+
403
+ <div class="space-y-4 mb-8">
404
+ <div class="flex items-start">
405
+ <div class="text-blue-600 mr-3 mt-1">
406
+ <i class="fas fa-map-marker-alt"></i>
407
+ </div>
408
+ <div>
409
+ <h4 class="font-medium text-gray-800">Адрес</h4>
410
+ <p class="text-gray-600">г. Москва, ул. Оптическая, д. 15</p>
411
+ </div>
412
+ </div>
413
+
414
+ <div class="flex items-start">
415
+ <div class="text-blue-600 mr-3 mt-1">
416
+ <i class="fas fa-phone-alt"></i>
417
+ </div>
418
+ <div>
419
+ <h4 class="font-medium text-gray-800">Телефон</h4>
420
+ <p class="text-gray-600">+7 (495) 123-45-67</p>
421
+ </div>
422
+ </div>
423
+
424
+ <div class="flex items-start">
425
+ <div class="text-blue-600 mr-3 mt-1">
426
+ <i class="fas fa-envelope"></i>
427
+ </div>
428
+ <div>
429
+ <h4 class="font-medium text-gray-800">Email</h4>
430
+ <p class="text-gray-600">[email protected]</p>
431
+ </div>
432
+ </div>
433
+
434
+ <div class="flex items-start">
435
+ <div class="text-blue-600 mr-3 mt-1">
436
+ <i class="fas fa-clock"></i>
437
+ </div>
438
+ <div>
439
+ <h4 class="font-medium text-gray-800">Часы работы</h4>
440
+ <p class="text-gray-600">Пн-Пт: 10:00 - 20:00<br>Сб-Вс: 11:00 - 18:00</p>
441
+ </div>
442
+ </div>
443
+ </div>
444
+
445
+ <h3 class="text-xl font-semibold mb-4 text-gray-800">Мы в социальных сетях</h3>
446
+ <div class="flex space-x-4">
447
+ <a href="#" class="bg-blue-600 text-white p-3 rounded-full hover:bg-blue-700 transition-all">
448
+ <i class="fab fa-vk"></i>
449
+ </a>
450
+ <a href="#" class="bg-blue-400 text-white p-3 rounded-full hover:bg-blue-500 transition-all">
451
+ <i class="fab fa-telegram"></i>
452
+ </a>
453
+ <a href="#" class="bg-pink-600 text-white p-3 rounded-full hover:bg-pink-700 transition-all">
454
+ <i class="fab fa-instagram"></i>
455
+ </a>
456
+ <a href="#" class="bg-green-600 text-white p-3 rounded-full hover:bg-green-700 transition-all">
457
+ <i class="fab fa-whatsapp"></i>
458
+ </a>
459
+ </div>
460
+ </div>
461
+
462
+ <div class="lg:w-1/2">
463
+ <h3 class="text-xl font-semibold mb-4 text-gray-800">Записаться на прием</h3>
464
+ <form class="space-y-4">
465
+ <div>
466
+ <label for="name" class="block text-gray-700 mb-1">Ваше имя</label>
467
+ <input type="text" id="name" class="w-full px-4 py-2 border rounded-lg input-focus transition-all" placeholder="Иван Иванов">
468
+ </div>
469
+
470
+ <div>
471
+ <label for="phone" class="block text-gray-700 mb-1">Телефон</label>
472
+ <input type="tel" id="phone" class="w-full px-4 py-2 border rounded-lg input-focus transition-all" placeholder="+7 (999) 123-45-67">
473
+ </div>
474
+
475
+ <div>
476
+ <label for="service" class="block text-gray-700 mb-1">Услуга</label>
477
+ <select id="service" class="w-full px-4 py-2 border rounded-lg input-focus transition-all">
478
+ <option value="">Выберите услугу</option>
479
+ <option value="checkup">Проверка зрения</option>
480
+ <option value="glasses">Подбор очков</option>
481
+ <option value="sunglasses">Солнцезащитные очки</option>
482
+ <option value="consult">Консультация офтальмолога</option>
483
+ <option value="repair">Ремонт очков</option>
484
+ </select>
485
+ </div>
486
+
487
+ <div>
488
+ <label for="date" class="block text-gray-700 mb-1">Дата приема</label>
489
+ <input type="date" id="date" class="w-full px-4 py-2 border rounded-lg input-focus transition-all">
490
+ </div>
491
+
492
+ <div>
493
+ <label for="message" class="block text-gray-700 mb-1">Комментарий</label>
494
+ <textarea id="message" rows="3" class="w-full px-4 py-2 border rounded-lg input-focus transition-all" placeholder="Ваши пожелания..."></textarea>
495
+ </div>
496
+
497
+ <button type="submit" class="w-full bg-blue-600 text-white font-bold py-3 px-6 rounded-lg hover:bg-blue-700 transition-all">
498
+ Отправить заявку
499
+ </button>
500
+ </form>
501
+ </div>
502
+ </div>
503
+ </div>
504
+ </section>
505
+
506
+ <!-- Map Section -->
507
+ <div class="h-96 w-full">
508
+ <iframe src="https://yandex.ru/map-widget/v1/?um=constructor%3A1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a&amp;source=constructor"
509
+ width="100%" height="100%" frameborder="0" class="block"></iframe>
510
+ </div>
511
+
512
+ <!-- Footer -->
513
+ <footer class="bg-gray-800 text-white py-10">
514
+ <div class="container mx-auto px-4">
515
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
516
+ <div>
517
+ <div class="flex items-center space-x-2 mb-4">
518
+ <i class="fas fa-glasses text-2xl text-blue-400"></i>
519
+ <span class="text-xl font-bold">Optica Opton</span>
520
+ </div>
521
+ <p class="text-gray-400">Современная оптика в Москве с 2010 года. Качество, стиль и забота о вашем зрении.</p>
522
+ </div>
523
+
524
+ <div>
525
+ <h4 class="font-semibold text-lg mb-4">Меню</h4>
526
+ <ul class="space-y-2">
527
+ <li><a href="#home" class="text-gray-400 hover:text-white transition-all">Главная</a></li>
528
+ <li><a href="#services" class="text-gray-400 hover:text-white transition-all">Услуги</a></li>
529
+ <li><a href="#products" class="text-gray-400 hover:text-white transition-all">Товары</a></li>
530
+ <li><a href="#about" class="text-gray-400 hover:text-white transition-all">О нас</a></li>
531
+ <li><a href="#contacts" class="text-gray-400 hover:text-white transition-all">Контакты</a></li>
532
+ </ul>
533
+ </div>
534
+
535
+ <div>
536
+ <h4 class="font-semibold text-lg mb-4">Контакты</h4>
537
+ <ul class="space-y-2">
538
+ <li class="flex items-start">
539
+ <i class="fas fa-map-marker-alt text-gray-400 mr-2 mt-1"></i>
540
+ <span class="text-gray-400">г. Москва, ул. Оптическая, д. 15</span>
541
+ </li>
542
+ <li class="flex items-center">
543
+ <i class="fas fa-phone-alt text-gray-400 mr-2"></i>
544
+ <span class="text-gray-400">+7 (495) 123-45-67</span>
545
+ </li>
546
+ <li class="flex items-center">
547
+ <i class="fas fa-envelope text-gray-400 mr-2"></i>
548
+ <span class="text-gray-400">[email protected]</span>
549
+ </li>
550
+ </ul>
551
+ </div>
552
+
553
+ <div>
554
+ <h4 class="font-semibold text-lg mb-4">Подписаться</h4>
555
+ <p class="text-gray-400 mb-4">Будьте в курсе наших акций и новинок</p>
556
+ <form class="flex">
557
+ <input type="email" placeholder="Ваш email" class="px-4 py-2 rounded-l-lg focus:outline-none text-gray-800 w-full">
558
+ <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded-r-lg hover:bg-blue-700 transition-all">
559
+ <i class="fas fa-paper-plane"></i>
560
+ </button>
561
+ </form>
562
+ <div class="flex space-x-4 mt-4">
563
+ <a href="#" class="text-gray-400 hover:text-white transition-all">
564
+ <i class="fab fa-vk"></i>
565
+ </a>
566
+ <a href="#" class="text-gray-400 hover:text-white transition-all">
567
+ <i class="fab fa-telegram"></i>
568
+ </a>
569
+ <a href="#" class="text-gray-400 hover:text-white transition-all">
570
+ <i class="fab fa-instagram"></i>
571
+ </a>
572
+ </div>
573
+ </div>
574
+ </div>
575
+
576
+ <div class="border-t border-gray-700 mt-10 pt-6 flex flex-col md:flex-row justify-between items-center">
577
+ <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 Optica Opton. Все права защищены.</p>
578
+ <div class="flex space-x-6">
579
+ <a href="#" class="text-gray-400 hover:text-white text-sm transition-all">Политика конфиденциальности</a>
580
+ <a href="#" class="text-gray-400 hover:text-white text-sm transition-all">Пользовательское соглашение</a>
581
+ </div>
582
+ </div>
583
+ </div>
584
+ </footer>
585
+
586
+ <script>
587
+ // Mobile menu toggle
588
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
589
+ const menu = document.getElementById('mobile-menu');
590
+ menu.classList.toggle('hidden');
591
+ });
592
+
593
+ // Smooth scrolling for anchor links
594
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
595
+ anchor.addEventListener('click', function (e) {
596
+ e.preventDefault();
597
+
598
+ const targetId = this.getAttribute('href');
599
+ const targetElement = document.querySelector(targetId);
600
+
601
+ if (targetElement) {
602
+ window.scrollTo({
603
+ top: targetElement.offsetTop - 80,
604
+ behavior: 'smooth'
605
+ });
606
+
607
+ // Close mobile menu if open
608
+ const mobileMenu = document.getElementById('mobile-menu');
609
+ if (!mobileMenu.classList.contains('hidden')) {
610
+ mobileMenu.classList.add('hidden');
611
+ }
612
+ }
613
+ });
614
+ });
615
+
616
+ // Form submission
617
+ const contactForm = document.querySelector('form');
618
+ if (contactForm) {
619
+ contactForm.addEventListener('submit', function(e) {
620
+ e.preventDefault();
621
+ alert('Спасибо! Ваша заявка отправлена. Мы свяжемся с вами в ближайшее время.');
622
+ this.reset();
623
+ });
624
+ }
625
+ </script>
626
+ <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=Greats/optical" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
627
+ </html>