Hugging Face's logo

Spaces:
User48320479
/
xoptic3
Running

App Files Community
User48320479 commited on
Commit
7ce116a
·
verified ·
1 Parent(s): 8fdd28a

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +365 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Xoptic3
3
- emoji: 👀
4
- colorFrom: purple
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: xoptic3
3
+ emoji: 🐳
4
+ colorFrom: pink
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,365 @@
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>Xoptic - Оптика премиум класса</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, #6b21a8 0%, #2563eb 100%);
19
+ }
20
+
21
+ .service-card:hover {
22
+ transform: translateY(-10px);
23
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
24
+ }
25
+
26
+ .glass-effect {
27
+ background: rgba(255, 255, 255, 0.2);
28
+ backdrop-filter: blur(10px);
29
+ -webkit-backdrop-filter: blur(10px);
30
+ border-radius: 10px;
31
+ border: 1px solid rgba(255, 255, 255, 0.18);
32
+ }
33
+
34
+ .pulse-animation {
35
+ animation: pulse 2s infinite;
36
+ }
37
+
38
+ @keyframes pulse {
39
+ 0% {
40
+ transform: scale(1);
41
+ }
42
+ 50% {
43
+ transform: scale(1.05);
44
+ }
45
+ 100% {
46
+ transform: scale(1);
47
+ }
48
+ }
49
+ </style>
50
+ </head>
51
+ <body class="bg-gray-50">
52
+ <!-- Header -->
53
+ <header class="sticky top-0 z-50 glass-effect shadow-sm">
54
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
55
+ <!-- Logo -->
56
+ <div class="flex items-center space-x-2">
57
+ <div class="w-10 h-10 bg-purple-600 rounded-full flex items-center justify-center text-white">
58
+ <i class="fas fa-glasses text-xl"></i>
59
+ </div>
60
+ <span class="text-xl font-bold text-gray-800">XOPTIC</span>
61
+ </div>
62
+
63
+ <!-- Navigation -->
64
+ <nav class="hidden md:flex space-x-8">
65
+ <a href="#services" class="text-gray-700 hover:text-purple-600 font-medium transition">Услуги</a>
66
+ <a href="#about" class="text-gray-700 hover:text-purple-600 font-medium transition">О нас</a>
67
+ <a href="#contacts" class="text-gray-700 hover:text-purple-600 font-medium transition">Контакты</a>
68
+ <a href="#reviews" class="text-gray-700 hover:text-purple-600 font-medium transition">Отзывы</a>
69
+ </nav>
70
+
71
+ <!-- Mobile menu button -->
72
+ <button id="mobile-menu-button" class="md:hidden text-gray-700">
73
+ <i class="fas fa-bars text-2xl"></i>
74
+ </button>
75
+ </div>
76
+
77
+ <!-- Mobile menu -->
78
+ <div id="mobile-menu" class="hidden md:hidden bg-white py-4 px-4 shadow-lg">
79
+ <div class="flex flex-col space-y-3">
80
+ <a href="#services" class="text-gray-700 hover:text-purple-600 font-medium transition">Услуги</a>
81
+ <a href="#about" class="text-gray-700 hover:text-purple-600 font-medium transition">О нас</a>
82
+ <a href="#contacts" class="text-gray-700 hover:text-purple-600 font-medium transition">Контакты</a>
83
+ <a href="#reviews" class="text-gray-700 hover:text-purple-600 font-medium transition">Отзывы</a>
84
+ </div>
85
+ </div>
86
+ </header>
87
+
88
+ <!-- Hero Section -->
89
+ <section class="hero-gradient text-white py-20">
90
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
91
+ <div class="md:w-1/2 mb-10 md:mb-0">
92
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Ваше зрение - наша забота</h1>
93
+ <p class="text-xl mb-8 opacity-90">Профессиональный ремонт очков, тонировка линз и подбор оправ премиум-класса</p>
94
+ <div class="flex space-x-4">
95
+ <a href="#contacts" class="bg-white text-purple-600 px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition duration-300 pulse-animation">
96
+ Записаться онлайн
97
+ </a>
98
+ <a href="tel:+79991234567" class="border-2 border-white px-6 py-3 rounded-full font-medium hover:bg-white hover:text-purple-600 transition duration-300">
99
+ <i class="fas fa-phone mr-2"></i> +7 (999) 123-45-67
100
+ </a>
101
+ </div>
102
+ </div>
103
+ <div class="md:w-1/2 flex justify-center">
104
+ <div class="relative">
105
+ <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"
106
+ alt="Очки премиум класса"
107
+ class="rounded-lg shadow-2xl w-full max-w-md">
108
+ <div class="absolute -bottom-5 -right-5 bg-white p-4 rounded-lg shadow-lg">
109
+ <div class="text-purple-600 text-3xl font-bold">15%</div>
110
+ <div class="text-gray-800 font-medium">Скидка на первый визит</div>
111
+ </div>
112
+ </div>
113
+ </div>
114
+ </div>
115
+ </section>
116
+
117
+ <!-- Services Section -->
118
+ <section id="services" class="py-20 bg-white">
119
+ <div class="container mx-auto px-4">
120
+ <div class="text-center mb-16">
121
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Наши услуги</h2>
122
+ <div class="w-20 h-1 bg-purple-600 mx-auto"></div>
123
+ </div>
124
+
125
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
126
+ <!-- Service 1 -->
127
+ <div class="service-card bg-gray-50 p-8 rounded-xl transition duration-300">
128
+ <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6">
129
+ <i class="fas fa-tools text-purple-600 text-2xl"></i>
130
+ </div>
131
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Ремонт очков</h3>
132
+ <p class="text-gray-600 mb-4">Профессиональный ремонт любых видов очков: замена носоупоров, дужек, шарниров и других элементов.</p>
133
+ <ul class="text-gray-600 space-y-2 mb-6">
134
+ <li class="flex items-center">
135
+ <i class="fas fa-check-circle text-purple-600 mr-2"></i> Быстро - от 30 минут
136
+ </li>
137
+ <li class="flex items-center">
138
+ <i class="fas fa-check-circle text-purple-600 mr-2"></i> Гарантия на работу
139
+ </li>
140
+ <li class="flex items-center">
141
+ <i class="fas fa-check-circle text-purple-600 mr-2"></i> Оригинальные запчасти
142
+ </li>
143
+ </ul>
144
+ <a href="#contacts" class="text-purple-600 font-medium hover:underline">Узнать стоимость →</a>
145
+ </div>
146
+
147
+ <!-- Service 2 -->
148
+ <div class="service-card bg-gray-50 p-8 rounded-xl transition duration-300">
149
+ <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6">
150
+ <i class="fas fa-sun text-purple-600 text-2xl"></i>
151
+ </div>
152
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Тонировка линз</h3>
153
+ <p class="text-gray-600 mb-4">Качественная тонировка линз в любом цвете и с различной степенью затемнения по вашему вкусу.</p>
154
+ <ul class="text-gray-600 space-y-2 mb-6">
155
+ <li class="flex items-center">
156
+ <i class="fas fa-check-circle text-purple-600 mr-2"></i> 20+ вариантов оттенков
157
+ </li>
158
+ <li class="flex items-center">
159
+ <i class="fas fa-check-circle text-purple-600 mr-2"></i> Защита от UV-излучения
160
+ </li>
161
+ <li class="flex items-center">
162
+ <i class="fas fa-check-circle text-purple-600 mr-2"></i> Сохранение четкости зрения
163
+ </li>
164
+ </ul>
165
+ <a href="#contacts" class="text-purple-600 font-medium hover:underline">Выбрать цвет →</a>
166
+ </div>
167
+
168
+ <!-- Service 3 -->
169
+ <div class="service-card bg-gray-50 p-8 rounded-xl transition duration-300">
170
+ <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6">
171
+ <i class="fas fa-glasses text-purple-600 text-2xl"></i>
172
+ </div>
173
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Подбор очков</h3>
174
+ <p class="text-gray-600 mb-4">Индивидуальный подбор очков с учетом формы лица, стиля жизни и медицинских показаний.</p>
175
+ <ul class="text-gray-600 space-y-2 mb-6">
176
+ <li class="flex items-center">
177
+ <i class="fas fa-check-circle text-purple-600 mr-2"></i> 100+ брендовых оправ
178
+ </li>
179
+ <li class="flex items-center">
180
+ <i class="fas fa-check-circle text-purple-600 mr-2"></i> Бесплатная диагностика
181
+ </li>
182
+ <li class="flex items-center">
183
+ <i class="fas fa-check-circle text-purple-600 mr-2"></i> 3D примерка
184
+ </li>
185
+ </ul>
186
+ <a href="#contacts" class="text-purple-600 font-medium hover:underline">Записаться →</a>
187
+ </div>
188
+ </div>
189
+ </div>
190
+ </section>
191
+
192
+ <!-- About Section -->
193
+ <section id="about" class="py-20 bg-gray-50">
194
+ <div class="container mx-auto px-4">
195
+ <div class="flex flex-col md:flex-row items-center">
196
+ <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
197
+ <img src="https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
198
+ alt="Мастерская Xoptic"
199
+ class="rounded-lg shadow-lg w-full">
200
+ </div>
201
+ <div class="md:w-1/2">
202
+ <h2 class="text-3xl font-bold text-gray-800 mb-6">Почему выбирают Xoptic?</h2>
203
+ <p class="text-gray-600 mb-6">Мы - команда профессиональных оптиков с 15-летним опытом работы. Наша мастерская оснащена современным оборудованием, что позволяет выполнять работы любой сложности с ювелирной точностью.</p>
204
+
205
+ <div class="space-y-6">
206
+ <div class="flex items-start">
207
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
208
+ <i class="fas fa-award text-purple-600"></i>
209
+ </div>
210
+ <div>
211
+ <h4 class="font-bold text-gray-800 mb-2">Гарантия качества</h4>
212
+ <p class="text-gray-600">На все работы предоставляется гарантия до 1 года. Мы используем только проверенные материалы от ведущих производителей.</p>
213
+ </div>
214
+ </div>
215
+
216
+ <div class="flex items-start">
217
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
218
+ <i class="fas fa-clock text-purple-600"></i>
219
+ </div>
220
+ <div>
221
+ <h4 class="font-bold text-gray-800 mb-2">Быстрое выполнение</h4>
222
+ <p class="text-gray-600">Большинство работ выполняем в течение дня, а срочный ремонт - за 1-2 часа. Ваши очки не задержатся у нас дольше необходимого.</p>
223
+ </div>
224
+ </div>
225
+
226
+ <div class="flex items-start">
227
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
228
+ <i class="fas fa-user-tie text-purple-600"></i>
229
+ </div>
230
+ <div>
231
+ <h4 class="font-bold text-gray-800 mb-2">Индивидуальный подход</h4>
232
+ <p class="text-gray-600">Для каждого клиента мы подбираем оптимальное решение, учитывая все пожелания и особенности зрения.</p>
233
+ </div>
234
+ </div>
235
+ </div>
236
+ </div>
237
+ </div>
238
+ </div>
239
+ </section>
240
+
241
+ <!-- Reviews Section -->
242
+ <section id="reviews" class="py-20 bg-white">
243
+ <div class="container mx-auto px-4">
244
+ <div class="text-center mb-16">
245
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Отзывы наших клиентов</h2>
246
+ <div class="w-20 h-1 bg-purple-600 mx-auto"></div>
247
+ </div>
248
+
249
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
250
+ <!-- Review 1 -->
251
+ <div class="bg-gray-50 p-6 rounded-xl">
252
+ <div class="flex items-center mb-4">
253
+ <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center text-purple-600 font-bold mr-4">АК</div>
254
+ <div>
255
+ <h4 class="font-bold text-gray-800">Анна К.</h4>
256
+ <div class="flex text-yellow-400">
257
+ <i class="fas fa-star"></i>
258
+ <i class="fas fa-star"></i>
259
+ <i class="fas fa-star"></i>
260
+ <i class="fas fa-star"></i>
261
+ <i class="fas fa-star"></i>
262
+ </div>
263
+ </div>
264
+ </div>
265
+ <p class="text-gray-600">"Принесла сломанные очки, которые уже собиралась выбросить. В Xoptic их не только починили, но и сделали тонировку линз. Теперь выглядят как новые, даже лучше!"</p>
266
+ </div>
267
+
268
+ <!-- Review 2 -->
269
+ <div class="bg-gray-50 p-6 rounded-xl">
270
+ <div class="flex items-center mb-4">
271
+ <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center text-purple-600 font-bold mr-4">МС</div>
272
+ <div>
273
+ <h4 class="font-bold text-gray-800">Михаил С.</h4>
274
+ <div class="flex text-yellow-400">
275
+ <i class="fas fa-star"></i>
276
+ <i class="fas fa-star"></i>
277
+ <i class="fas fa-star"></i>
278
+ <i class="fas fa-star"></i>
279
+ <i class="fas fa-star"></i>
280
+ </div>
281
+ </div>
282
+ </div>
283
+ <p class="text-gray-600">"Отличный сервис! Сделали тонировку линз за час, пока я пил кофе в соседнем кафе. Цвет подобрали идеально, теперь мои очки не только корректируют зрение, но и стильно выглядят."</p>
284
+ </div>
285
+
286
+ <!-- Review 3 -->
287
+ <div class="bg-gray-50 p-6 rounded-xl">
288
+ <div class="flex items-center mb-4">
289
+ <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center text-purple-600 font-bold mr-4">ЕП</div>
290
+ <div>
291
+ <h4 class="font-bold text-gray-800">Елена П.</h4>
292
+ <div class="flex text-yellow-400">
293
+ <i class="fas fa-star"></i>
294
+ <i class="fas fa-star"></i>
295
+ <i class="fas fa-star"></i>
296
+ <i class="fas fa-star"></i>
297
+ <i class="fas fa-star-half-alt"></i>
298
+ </div>
299
+ </div>
300
+ </div>
301
+ <p class="text-gray-600">"Ребенок сломал дужку у моих любимых очков. В Xoptic нашли оригинальную запчасть и починили за полчаса. Очень вежливый персонал и приятная атмосфера в мастерской."</p>
302
+ </div>
303
+ </div>
304
+
305
+ <div class="text-center mt-12">
306
+ <a href="https://a.ru" class="inline-block bg-purple-600 text-white px-6 py-3 rounded-full font-medium hover:bg-purple-700 transition duration-300">
307
+ <i class="fab fa-vk mr-2"></i> Читать больше отзывов
308
+ </a>
309
+ </div>
310
+ </div>
311
+ </section>
312
+
313
+ <!-- Contacts Section -->
314
+ <section id="contacts" class="py-20 bg-gray-50">
315
+ <div class="container mx-auto px-4">
316
+ <div class="text-center mb-16">
317
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Как нас найти</h2>
318
+ <div class="w-20 h-1 bg-purple-600 mx-auto"></div>
319
+ </div>
320
+
321
+ <div class="flex flex-col lg:flex-row gap-8">
322
+ <div class="lg:w-1/2">
323
+ <!-- Yandex Map Placeholder -->
324
+ <div class="bg-gray-200 rounded-xl overflow-hidden" style="height: 400px;">
325
+ <iframe src="https://yandex.ru/map-widget/v1/?um=constructor%3A3b3b3b3b3b3b3b3b3b3b3b3b3b3b3b3b3b3b3b3b3b3b3b3b3b3b3b3b3b3b3b3b&amp;source=constructor"
326
+ width="100%"
327
+ height="400"
328
+ frameborder="0"
329
+ class="rounded-xl"></iframe>
330
+ </div>
331
+ </div>
332
+
333
+ <div class="lg:w-1/2">
334
+ <div class="bg-white p-8 rounded-xl shadow-md">
335
+ <h3 class="text-2xl font-bold text-gray-800 mb-6">Контакты</h3>
336
+
337
+ <div class="space-y-6">
338
+ <div class="flex items-start">
339
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
340
+ <i class="fas fa-map-marker-alt text-purple-600"></i>
341
+ </div>
342
+ <div>
343
+ <h4 class="font-bold text-gray-800 mb-1">Адрес</h4>
344
+ <p class="text-gray-600">г. Москва, ул. Оптическая, д. 15</p>
345
+ </div>
346
+ </div>
347
+
348
+ <div class="flex items-start">
349
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
350
+ <i class="fas fa-clock text-purple-600"></i>
351
+ </div>
352
+ <div>
353
+ <h4 class="font-bold text-gray-800 mb-1">Часы работы</h4>
354
+ <p class="text-gray-600">Пн-Пт: 10:00 - 20:00</p>
355
+ <p class="text-gray-600">Сб-Вс: 11:00 - 18:00</p>
356
+ </div>
357
+ </div>
358
+
359
+ <div class="flex items-start">
360
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
361
+ <i class="fas fa-phone text-purple-600"></i>
362
+ </div>
363
+ <div>
364
+ <h4 class="font
365
+ </html>