Hugging Face's logo

Spaces:
ANTIMOLL
/
opt6968
Running

App Files Community
ANTIMOLL commited on
Commit
aa1faaf
·
verified ·
1 Parent(s): 0bec835

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +426 -661
  2. prompts.txt +5 -1
index.html CHANGED
@@ -3,174 +3,281 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Оптика "ОПТОН" - Профессиональный мир очков</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=Montserrat:wght@400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
  <style>
 
 
 
 
 
 
 
 
11
  body {
12
- font-family: 'Poppins', sans-serif;
13
- background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
 
 
14
  }
15
- .magic-gradient {
16
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 
 
 
 
 
17
  }
18
- .service-card {
19
- transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
20
- background: white;
21
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
22
- border-radius: 20px;
 
23
  overflow: hidden;
24
  }
25
- .service-card:hover {
26
- transform: translateY(-10px) scale(1.02);
27
- box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
28
  }
29
- .floating {
30
- animation: floating 6s ease-in-out infinite;
 
 
31
  }
32
- @keyframes floating {
33
- 0% { transform: translateY(0px); }
34
- 50% { transform: translateY(-15px); }
35
- 100% { transform: translateY(0px); }
 
 
 
 
 
 
 
 
 
 
 
36
  }
37
- .pulse {
38
- animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 
39
  }
40
- @keyframes pulse {
41
- 0%, 100% { opacity: 1; }
42
- 50% { opacity: 0.8; }
 
 
 
 
43
  }
44
- .nav-link {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
45
  position: relative;
 
 
46
  }
47
- .nav-link:after {
 
48
  content: '';
49
  position: absolute;
50
  width: 0;
51
- height: 3px;
52
  bottom: -5px;
53
  left: 0;
54
- background-color: #fff;
55
  transition: width 0.3s ease;
56
- border-radius: 3px;
57
  }
58
- .nav-link:hover:after {
 
 
 
 
 
 
59
  width: 100%;
60
  }
61
- .contact-card {
62
- background: white;
63
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
64
- transition: all 0.3s ease;
65
- border-radius: 15px;
 
 
66
  }
67
- .contact-card:hover {
68
- transform: translateY(-5px);
69
- box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 
 
 
 
 
 
 
70
  }
71
- .schedule-item {
 
 
 
72
  position: relative;
73
- padding-left: 2rem;
74
  }
75
- .schedule-item:before {
 
76
  content: '';
77
  position: absolute;
 
78
  left: 0;
79
- top: 0.5rem;
80
- width: 1rem;
81
- height: 1rem;
82
- background-color: #667eea;
83
- border-radius: 50%;
84
- }
85
- .map-container {
86
- height: 400px;
87
- border-radius: 20px;
88
- overflow: hidden;
89
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
90
- }
91
- .glow-text {
92
- text-shadow: 0 0 10px rgba(102, 126, 234, 0.5);
93
  }
94
- .magic-border {
95
- border: 2px solid transparent;
96
- background-clip: padding-box;
97
- background-image: linear-gradient(white, white),
98
- linear-gradient(135deg, #667eea 0%, #764ba2 100%);
99
- background-origin: border-box;
100
- background-clip: padding-box, border-box;
101
  }
102
- .article-card {
103
- background: white;
104
- border-radius: 20px;
105
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
106
- overflow: hidden;
107
  }
108
- .tip-icon {
109
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
110
- color: white;
111
- border-radius: 50%;
112
- width: 40px;
113
- height: 40px;
114
- display: flex;
115
- align-items: center;
116
- justify-content: center;
117
- flex-shrink: 0;
118
  }
119
- .logo-icon {
120
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
121
- color: white;
122
- border-radius: 12px;
123
- width: 50px;
124
- height: 50px;
125
- display: flex;
126
- align-items: center;
127
- justify-content: center;
128
- font-weight: 700;
129
- font-size: 24px;
130
- font-family: 'Montserrat', sans-serif;
131
  }
132
  </style>
133
  </head>
134
- <body class="bg-gradient-to-br from-blue-50 to-purple-50">
 
 
 
 
 
 
 
 
135
  <!-- Header -->
136
- <header class="magic-gradient text-white shadow-lg sticky top-0 z-50">
137
- <div class="container mx-auto px-4 py-4">
138
  <div class="flex justify-between items-center">
139
  <div class="flex items-center space-x-3">
140
- <div class="logo-icon">
141
- ОП
142
  </div>
143
- <h1 class="text-2xl font-bold tracking-tight">ОПТИКА "ОПТОН"</h1>
144
  </div>
145
  <nav class="hidden md:flex space-x-8 items-center">
146
- <a href="#services" class="nav-link font-medium">Услуги</a>
147
- <a href="#repair" class="nav-link font-medium">Ремонт</a>
148
- <a href="#manufacturing" class="nav-link font-medium">Изготовление</a>
149
- <a href="#care" class="nav-link font-medium">Уход за очками</a>
150
- <a href="#about" class="nav-link font-medium">О нас</a>
151
- <a href="#contacts" class="nav-link font-medium">Контакты</a>
152
- <a href="tel:+79263236886" class="bg-white text-purple-600 px-4 py-2 rounded-lg font-semibold hover:bg-gray-100 transition flex items-center">
153
  <i class="fas fa-phone mr-2"></i>+7 (926) 323-68-86
154
  </a>
155
  </nav>
156
  <div class="md:hidden">
157
- <button id="menu-btn" class="text-2xl focus:outline-none">
158
- <i class="fas fa-bars"></i>
159
  </button>
160
  </div>
161
  </div>
162
  </div>
163
 
164
  <!-- Mobile Menu -->
165
- <div id="mobile-menu" class="hidden md:hidden bg-purple-800 px-4 py-2">
166
- <div class="flex flex-col space-y-3">
167
- <a href="#services" class="nav-link py-2">Услуги</a>
168
- <a href="#repair" class="nav-link py-2">Ремонт</a>
169
- <a href="#manufacturing" class="nav-link py-2">Изготовление</a>
170
- <a href="#care" class="nav-link py-2">Ух��д за очками</a>
171
- <a href="#about" class="nav-link py-2">О нас</a>
172
- <a href="#contacts" class="nav-link py-2">Контакты</a>
173
- <a href="tel:+79263236886" class="bg-white text-purple-600 px-4 py-2 rounded-lg font-semibold hover:bg-gray-100 transition text-center">
174
  <i class="fas fa-phone mr-2"></i>+7 (926) 323-68-86
175
  </a>
176
  </div>
@@ -178,193 +285,154 @@
178
  </header>
179
 
180
  <!-- Hero Section -->
181
- <section class="relative overflow-hidden">
182
- <div class="absolute inset-0 bg-gradient-to-r from-purple-500 to-blue-500 opacity-90"></div>
183
- <div class="container mx-auto px-4 py-32 relative z-10 text-center">
184
- <h1 class="text-5xl md:text-6xl font-bold text-white mb-6">Профессиональный мир очков</h1>
185
- <p class="text-xl md:text-2xl text-white mb-8 max-w-3xl mx-auto">Качественные услуги по ремонту и изготовлению очков с 20-летним опытом</p>
186
- <div class="flex justify-center">
187
- <a href="tel:+79263236886" class="bg-white text-purple-600 px-8 py-4 rounded-full font-semibold hover:bg-gray-100 transition flex items-center text-lg shadow-lg transform hover:scale-105">
188
- <i class="fas fa-phone mr-3"></i>+7 (926) 323-68-86
189
- </a>
 
 
 
 
 
 
 
 
190
  </div>
191
  </div>
192
  </section>
193
 
194
  <!-- Services Section -->
195
- <section id="services" class="py-16 bg-white">
196
- <div class="container mx-auto px-4">
 
197
  <div class="text-center mb-12">
198
- <h2 class="text-3xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-blue-600">Наши профессиональные услуги</h2>
199
- <div class="w-20 h-1 bg-gradient-to-r from-purple-400 to-blue-400 mx-auto rounded-full"></div>
200
  </div>
201
 
202
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
203
  <!-- Service Card 1 -->
204
- <div class="service-card">
205
- <div class="h-48 overflow-hidden">
206
- <img src="https://images.unsplash.com/photo-1556306535-38febf6782e7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
207
- alt="Ремонт очков"
208
- class="w-full h-full object-cover">
209
- </div>
210
- <div class="p-6">
211
- <h3 class="text-xl font-semibold mb-4 text-center text-gray-800">Ремонт очков</h3>
212
- <ul class="space-y-3 text-gray-700">
213
- <li class="flex items-start">
214
- <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
215
- <span>Замена носовых упоров</span>
216
- </li>
217
- <li class="flex items-start">
218
- <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
219
- <span>Замена и подбор заушников</span>
220
- </li>
221
- <li class="flex items-start">
222
- <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
223
- <span>Замена винтиков</span>
224
- </li>
225
- <li class="flex items-start">
226
- <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
227
- <span>Замена гарпунов</span>
228
- </li>
229
- </ul>
230
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
231
  </div>
232
 
233
  <!-- Service Card 2 -->
234
- <div class="service-card">
235
- <div class="h-48 overflow-hidden">
236
- <img src="https://static.wixstatic.com/media/f84ec4_8abcd0ad160b421e86c61d6fd4f6dfe0~mv2.jpg/v1/fill/w_620,h_400,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/tl.jpg"
237
- alt="Окраска линз"
238
- class="w-full h-full object-cover">
239
- </div>
240
- <div class="p-6">
241
- <h3 class="text-xl font-semibold mb-4 text-center text-gray-800">Окраска линз</h3>
242
- <ul class="space-y-3 text-gray-700">
243
- <li class="flex items-start">
244
- <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
245
- <span>Окраска полимерных линз</span>
246
- </li>
247
- <li class="flex items-start">
248
- <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
249
- <span>Любой цвет, включая градиент</span>
250
- </li>
251
- <li class="flex items-start">
252
- <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
253
- <span>Мультицветные решения</span>
254
- </li>
255
- <li class="flex items-start">
256
- <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
257
- <span>Примерка перед окраской</span>
258
- </li>
259
- </ul>
260
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
261
  </div>
262
 
263
  <!-- Service Card 3 -->
264
- <div class="service-card">
265
- <div class="h-48 overflow-hidden">
266
- <img src="https://static.wixstatic.com/media/11062b_bb306819ebe94806ad697b21dc821887~mv2.jpg/v1/fill/w_620,h_400,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/Примерка%20очков.jpg"
267
- alt="Изготовление очков"
268
- class="w-full h-full object-cover">
269
- </div>
270
- <div class="p-6">
271
- <h3 class="text-xl font-semibold mb-4 text-center text-gray-800">Изготовление очков</h3>
272
- <ul class="space-y-3 text-gray-700">
273
- <li class="flex items-start">
274
- <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
275
- <span>По вашему рецепту</span>
276
- </li>
277
- <li class="flex items-start">
278
- <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
279
- <span>Широкий выбор оправ</span>
280
- </li>
281
- <li class="flex items-start">
282
- <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
283
- <span>Качественные линзы</span>
284
- </li>
285
- <li class="flex items-start">
286
- <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
287
- <span>Индивидуальный подход</span>
288
- </li>
289
- </ul>
290
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
291
  </div>
292
  </div>
293
  </div>
294
  </section>
295
 
296
  <!-- Repair Section -->
297
- <section id="repair" class="py-16 bg-gradient-to-br from-blue-50 to-purple-50">
298
- <div class="container mx-auto px-4">
299
- <div class="text-center mb-12">
300
- <h2 class="text-3xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-blue-600">Ремонт очков</h2>
301
- <div class="w-20 h-1 bg-gradient-to-r from-purple-400 to-blue-400 mx-auto rounded-full"></div>
302
- </div>
303
-
304
  <div class="flex flex-col lg:flex-row items-center">
305
  <div class="lg:w-1/2 mb-8 lg:mb-0 lg:pr-8">
306
- <div class="relative">
307
- <img src="https://images.unsplash.com/photo-1556306535-38febf6782e7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
308
- alt="Ремонт очков"
309
- class="rounded-2xl shadow-xl w-full floating">
310
- <div class="absolute -bottom-5 -right-5 bg-white p-4 rounded-lg shadow-lg">
311
- <div class="bg-purple-100 p-3 rounded-full">
312
- <i class="fas fa-clock text-purple-600 text-2xl"></i>
313
- </div>
314
- <p class="mt-2 font-semibold text-gray-800">Быстро</p>
315
- <p class="text-sm text-gray-600">15-30 минут</p>
316
- </div>
317
- </div>
318
  </div>
319
  <div class="lg:w-1/2">
320
- <h3 class="text-2xl font-semibold mb-6 text-gray-800">Быстро, качественно, недорого</h3>
321
- <p class="text-gray-700 mb-6">Мы специализируемся на всех видах ремонта очков, используя только качественные материалы и профессиональное оборудование.</p>
322
 
323
- <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
324
- <div class="bg-white p-4 rounded-lg shadow-sm flex items-start magic-border">
325
- <div class="bg-purple-100 p-2 rounded-full mr-4">
326
- <i class="fas fa-wrench text-purple-600"></i>
327
- </div>
328
- <div>
329
- <h4 class="font-semibold">Замена носовых упоров</h4>
330
- <p class="text-gray-600 text-sm">Комфортные силиконовые или пластиковые упоры</p>
331
- </div>
332
- </div>
333
-
334
- <div class="bg-white p-4 rounded-lg shadow-sm flex items-start magic-border">
335
- <div class="bg-purple-100 p-2 rounded-full mr-4">
336
- <i class="fas fa-exchange-alt text-purple-600"></i>
337
  </div>
338
  <div>
339
- <h4 class="font-semibold">Замена заушников</h4>
340
- <p class="text-gray-600 text-sm">Подберем идеально подходящие по форме и размеру</p>
341
  </div>
342
  </div>
343
 
344
- <div class="bg-white p-4 rounded-lg shadow-sm flex items-start magic-border">
345
- <div class="bg-purple-100 p-2 rounded-full mr-4">
346
- <i class="fas fa-screwdriver text-purple-600"></i>
347
  </div>
348
  <div>
349
- <h4 class="font-semibold">Замена винтиков</h4>
350
- <p class="text-gray-600 text-sm">Миниатюрные винты для надежной фиксации</p>
351
  </div>
352
  </div>
353
 
354
- <div class="bg-white p-4 rounded-lg shadow-sm flex items-start magic-border">
355
- <div class="bg-purple-100 p-2 rounded-full mr-4">
356
- <i class="fas fa-plug text-purple-600"></i>
357
  </div>
358
  <div>
359
- <h4 class="font-semibold">Замена гарпунов</h4>
360
- <p class="text-gray-600 text-sm">Аккуратная работа с пластмассовыми оправами</p>
361
  </div>
362
  </div>
363
  </div>
364
 
365
- <div class="mt-8 bg-yellow-50 border-l-4 border-yellow-400 p-4 rounded-r">
366
- <p class="text-yellow-700 font-medium flex items-start">
367
- <i class="fas fa-exclamation-triangle mr-2 mt-1"></i>
368
  <span>Обратите внимание: мы не производим пайку оправ.</span>
369
  </p>
370
  </div>
@@ -373,457 +441,134 @@
373
  </div>
374
  </section>
375
 
376
- <!-- Care Section -->
377
- <section id="care" class="py-16 bg-white">
378
- <div class="container mx-auto px-4">
379
- <div class="text-center mb-12">
380
- <h2 class="text-3xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-blue-600">Правильный уход за очками</h2>
381
- <div class="w-20 h-1 bg-gradient-to-r from-purple-400 to-blue-400 mx-auto rounded-full"></div>
382
- <p class="text-gray-600 max-w-3xl mx-auto mt-4">Следуйте этим простым правилам, чтобы ваши очки служили долго и сохраняли идеальное состояние</p>
383
- </div>
384
-
385
- <div class="article-card max-w-4xl mx-auto">
386
- <div class="p-8">
387
- <div class="space-y-8">
388
- <!-- 1. Правильное хранение -->
389
- <div class="flex items-start">
390
- <div class="tip-icon mr-4">
391
- <span class="font-bold">1</span>
392
- </div>
393
- <div>
394
- <h3 class="text-xl font-semibold mb-3 text-gray-800">Правильное хранение</h3>
395
- <ul class="space-y-2 text-gray-700">
396
- <li class="flex items-start">
397
- <i class="fas fa-check-circle text-purple-400 mt-1 mr-2"></i>
398
- <span>Используйте футляр. Всегда храните очки в жестком футляре, чтобы защитить их от повреждений, царапин и пыли.</span>
399
- </li>
400
- <li class="flex items-start">
401
- <i class="fas fa-check-circle text-purple-400 mt-1 mr-2"></i>
402
- <span>Кладите очки линзами вверх. Если очки лежат линзами вниз, они могут поцарапаться.</span>
403
- </li>
404
- <li class="flex items-start">
405
- <i class="fas fa-check-circle text-purple-400 mt-1 mr-2"></i>
406
- <span>Не оставляйте очки в местах с высокой температурой. Например, в машине в жаркий день или рядом с отопительными приборами. Высокая температура може�� повредить оправу и линзы.</span>
407
- </li>
408
- </ul>
409
- </div>
410
- </div>
411
-
412
- <!-- 2. Как надевать и снимать очки -->
413
- <div class="flex items-start">
414
- <div class="tip-icon mr-4">
415
- <span class="font-bold">2</span>
416
- </div>
417
- <div>
418
- <h3 class="text-xl font-semibold mb-3 text-gray-800">Как надевать и снимать очки</h3>
419
- <ul class="space-y-2 text-gray-700">
420
- <li class="flex items-start">
421
- <i class="fas fa-check-circle text-purple-400 mt-1 mr-2"></i>
422
- <span>Используйте обе руки. Надевайте и снимайте очки, держа их за дужки двумя руками. Это предотвращает деформацию оправы.</span>
423
- </li>
424
- <li class="flex items-start">
425
- <i class="fas fa-check-circle text-purple-400 mt-1 mr-2"></i>
426
- <span>Не сдвигайте очки на лоб. Это может растянуть дужки и ослабить крепления.</span>
427
- </li>
428
- </ul>
429
- </div>
430
- </div>
431
-
432
- <!-- 3. Очистка линз -->
433
- <div class="flex items-start">
434
- <div class="tip-icon mr-4">
435
- <span class="font-bold">3</span>
436
- </div>
437
- <div>
438
- <h3 class="text-xl font-semibold mb-3 text-gray-800">Очистка линз</h3>
439
- <ul class="space-y-2 text-gray-700">
440
- <li class="flex items-start">
441
- <i class="fas fa-check-circle text-purple-400 mt-1 mr-2"></i>
442
- <span>Используйте специальные салфетки и спреи. Для очистка линз применяйте мягкие салфетки из микрофибры и специальные спреи для очков.</span>
443
- </li>
444
- <li class="flex items-start">
445
- <i class="fas fa-check-circle text-purple-400 mt-1 mr-2"></i>
446
- <span>Не используйте одежду или бумажные салфетки. Они могут оставить царапины на линзах.</span>
447
- </li>
448
- <li class="flex items-start">
449
- <i class="fas fa-check-circle text-purple-400 mt-1 mr-2"></i>
450
- <span>Промывайте линзы водой. Если на линзах есть пыль или песок, сначала промойте их под проточной водой, чтобы избежать царапин, а затем вытрите салфеткой.</span>
451
- </li>
452
- <li class="flex items-start">
453
- <i class="fas fa-check-circle text-purple-400 mt-1 mr-2"></i>
454
- <span>Избегайте агрессивных химикатов. Не используйте средства для стекол, ацeton или спирт — они могут повредить покрытие линз.</span>
455
- </li>
456
- </ul>
457
- </div>
458
- </div>
459
-
460
- <!-- 4. Уход за оправой -->
461
- <div class="flex items-start">
462
- <div class="tip-icon mr-4">
463
- <span class="font-bold">4</span>
464
- </div>
465
- <div>
466
- <h3 class="text-xl font-semibold mb-3 text-gray-800">Уход за оправой</h3>
467
- <ul class="space-y-2 text-gray-700">
468
- <li class="flex items-start">
469
- <i class="fas fa-check-circle text-purple-400 mt-1 mr-2"></i>
470
- <span>Регулярно проверяйте винты. Если дужки ста��и расшатываться, подтяните винты с помощью маленькой отвертки.</span>
471
- </li>
472
- <li class="flex items-start">
473
- <i class="fas fa-check-circle text-purple-400 mt-1 mr-2"></i>
474
- <span>Не подвергайте оправу механическим нагрузкам. Не сгибайте дужки слишком сильно и не кладите на очки тяжелые предметы.</span>
475
- </li>
476
- <li class="flex items-start">
477
- <i class="fas fa-check-circle text-purple-400 mt-1 mr-2"></i>
478
- <span>Очищайте оправу. Протирайте оправу мягкой тканью, чтобы удалить пот и загрязнения.</span>
479
- </li>
480
- </ul>
481
- </div>
482
- </div>
483
-
484
- <!-- 5. Защита от царапин и повреждений -->
485
- <div class="flex items-start">
486
- <div class="tip-icon mr-4">
487
- <span class="font-bold">5</span>
488
- </div>
489
- <div>
490
- <h3 class="text-xl font-semibold mb-3 text-gray-800">Защита от царапин и повреждений</h3>
491
- <ul class="space-y-2 text-gray-700">
492
- <li class="flex items-start">
493
- <i class="fas fa-check-circle text-purple-400 mt-1 mr-2"></i>
494
- <span>Не кладите очки линзами вниз. Это самая частая причина царапин.</span>
495
- </li>
496
- <li class="flex items-start">
497
- <i class="fas fa-check-circle text-purple-400 mt-1 mr-2"></i>
498
- <span>Используйте защитную пленку. Если линзы не имеют защитного покрытия, можно нанести специальную пленку.</span>
499
- </li>
500
- <li class="flex items-start">
501
- <i class="fas fa-check-circle text-purple-400 mt-1 mr-2"></i>
502
- <span>Избегайте контакта с косметикой и парфюмерией. Косметика и спиртосодержащие средства могут повредить покрытие линз.</span>
503
- </li>
504
- </ul>
505
- </div>
506
- </div>
507
-
508
- <!-- 6. Правильное использование в разных условиях -->
509
- <div class="flex items-start">
510
- <div class="tip-icon mr-4">
511
- <span class="font-bold">6</span>
512
- </div>
513
- <div>
514
- <h3 class="text-xl font-semibold mb-3 text-gray-800">Правильное использование в разных условиях</h3>
515
- <ul class="space-y-2 text-gray-700">
516
- <li class="flex items-start">
517
- <i class="fas fa-check-circle text-purple-400 mt-1 mr-2"></i>
518
- <span>На пляже или у бассейна. Не оставляйте очки под прямыми солнечными лучами и избегайте контакта с соленой водой или хлоркой.</span>
519
- </li>
520
- <li class="flex items-start">
521
- <i class="fas fa-check-circle text-purple-400 mt-1 mr-2"></i>
522
- <span>В дождь или снег. После попадания под дождь или снег протрите очки мягкой тканью, чтобы удалить влагу.</span>
523
- </li>
524
- <li class="flex items-start">
525
- <i class="fas fa-check-circle text-purple-400 mt-1 mr-2"></i>
526
- <span>За рулем. Используйте очки с антибликовым покрытие, чтобы избежать усталости глаз.</span>
527
- </li>
528
- </ul>
529
- </div>
530
- </div>
531
-
532
- <!-- 7. Регулярное обслуживание -->
533
- <div class="flex items-start">
534
- <div class="tip-icon mr-4">
535
- <span class="font-bold">7</span>
536
- </div>
537
- <div>
538
- <h3 class="text-xl font-semibold mb-3 text-gray-800">Регулярное обслуживание</h3>
539
- <ul class="space-y-2 text-gray-700">
540
- <li class="flex items-start">
541
- <i class="fas fa-check-circle text-purple-400 mt-1 mr-2"></i>
542
- <span>Проверяйте очки у специалиста. Раз в полгода посещайте оптику, чтобы проверить состояние оправы и линз.</span>
543
- </li>
544
- <li class="flex items-start">
545
- <i class="fas fa-check-circle text-purple-400 mt-1 mr-2"></i>
546
- <span>Меняйте линзы при необходимости. Если линзы сильно поцарапаны или повреждены, замените их, чтобы избежать дискомфорта и усталости глаз.</span>
547
- </li>
548
- </ul>
549
- </div>
550
- </div>
551
-
552
- <!-- 8. Чего избегать -->
553
- <div class="flex items-start">
554
- <div class="tip-icon mr-4">
555
- <span class="font-bold">8</span>
556
- </div>
557
- <div>
558
- <h3 class="text-xl font-semibold mb-3 text-gray-800">Чего избегать</h3>
559
- <ul class="space-y-2 text-gray-700">
560
- <li class="flex items-start">
561
- <i class="fas fa-check-circle text-purple-400 mt-1 mr-2"></i>
562
- <span>Не носите очки на голове. Это может растянуть дужки и деформировать оправу.</span>
563
- </li>
564
- <li class="flex items-start">
565
- <i class="fas fa-check-circle text-purple-400 mt-1 mr-2"></i>
566
- <span>Не используйте очки без необходимости. Например, не надевайте очки для зрения, если вы смотрите вблизи (если это не предписано врачом).</span>
567
- </li>
568
- <li class="flex items-start">
569
- <i class="fas fa-check-circle text-purple-400 mt-1 mr-2"></i>
570
- <span>Не оставляйте очки без присмотра. Особенно в местах, где они могут упасть или быть повреждены.</span>
571
- </li>
572
- </ul>
573
- </div>
574
- </div>
575
-
576
- <!-- Заключение -->
577
- <div class="bg-purple-50 p-6 rounded-lg mt-8">
578
- <h3 class="text-xl font-semibold mb-3 text-purple-800">Заключение</h3>
579
- <p class="text-gray-700">Соблюдение этих простых правил поможет вам сохранить очки в идеальном состоянии на долгие годы. Помните, что очки — это не только аксессуар, но и важный инструмент для защиты вашего зрения. Ухаживайте за ними правильно, и они прослужат вам верой и правдой!</p>
580
- </div>
581
- </div>
582
- </div>
583
- </div>
584
- </div>
585
- </section>
586
-
587
  <!-- Manufacturing Section -->
588
- <section id="manufacturing" class="py-16 bg-white">
589
- <div class="container mx-auto px-4">
 
590
  <div class="text-center mb-12">
591
- <h2 class="text-3xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-blue-600">Изготовление очков</h2>
592
- <div class="w-20 h-1 bg-gradient-to-r from-purple-400 to-blue-400 mx-auto rounded-full"></div>
593
- </div>
594
-
595
- <div class="text-center mb-12 max-w-3xl mx-auto">
596
- <p class="text-gray-700 text-lg">Мы изготавливаем очки по вашему рецепту с учетом всех индивидуальных особенностей.</p>
597
  </div>
598
 
599
  <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
600
- <!-- Glasses Type 1 -->
601
- <div class="service-card">
602
- <div class="h-48 bg-gradient-to-br from-blue-100 to-purple-100 flex items-center justify-center">
603
- <i class="fas fa-eye text-6xl text-purple-600"></i>
604
- </div>
605
- <div class="p-6">
606
- <h3 class="text-xl font-semibold mb-4 text-center text-gray-800">Диоптрийные очки</h3>
607
- <p class="text-gray-700 mb-4 text-center">Коррекция зрения с учетом ваших индивидуальных параметров</p>
608
- <ul class="space-y-2 text-sm text-gray-600">
609
- <li class="flex items-start">
610
- <i class="fas fa-check-circle text-purple-400 mt-1 mr-2"></i>
611
- <span>Точное соответствие рецепту</span>
612
- </li>
613
- <li class="flex items-start">
614
- <i class="fas fa-check-circle text-purple-400 mt-1 mr-2"></i>
615
- <span>Различные типы линз</span>
616
- </li>
617
- <li class="flex items-start">
618
- <i class="fas fa-check-circle text-purple-400 mt-1 mr-2"></i>
619
- <span>Подбор оптимальной оправы</span>
620
- </li>
621
- </ul>
622
- </div>
623
  </div>
624
 
625
- <!-- Glasses Type 2 -->
626
- <div class="service-card">
627
- <div class="h-48 bg-gradient-to-br from-blue-100 to-purple-100 flex items-center justify-center">
628
- <i class="fas fa-car text-6xl text-purple-600"></i>
629
- </div>
630
- <div class="p-6">
631
- <h3 class="text-xl font-semibold mb-4 text-center text-gray-800">Автомобильные очки</ 3>
632
- <p class="text-gray-700 mb-4 text-center">Специальные линзы для комфортного вождения</p>
633
- <ul class="space-y-2 text-sm text-gray-600">
634
- <li class="flex items-start">
635
- <i class="fas fa-check-circle text-purple-400 mt-1 mr-2"></i>
636
- <span>Антибликовое покрытие</span>
637
- </li>
638
- <li class="flex items-start">
639
- <i class="fas fa-check-circle text-purple-400 mt-1 mr-2"></i>
640
- <span>Поляризационные фильтры</span>
641
- </li>
642
- <li class="flex items-start">
643
- <i class="fas fa-check-circle text-purple-400 mt-1 mr-2"></i>
644
- <span>Улучшенная контрастность</span>
645
- </li>
646
- </ul>
647
- </div>
648
  </div>
649
 
650
- <!-- Glasses Type 3 -->
651
- <div class="service-card">
652
- <div class="h-48 bg-gradient-to-br from-blue-100 to-purple-100 flex items-center justify-center">
653
- <i class="fas fa-sun text-6xl text-purple-600"></i>
654
- </div>
655
- <div class="p-6">
656
- <h3 class="text-xl font-semibold mb-4 text-center text-gray-800">Солнцезащитные очки</h3>
657
- <p class="text-gray-700 mb-4 text-center">Стиль и защита от ультрафиолета</p>
658
- <ul class="space-y-2 text-sm text-gray-600">
659
- <li class="flex items-start">
660
- <i class="fas fa-check-circle text-purple-400 mt-1 mr-2"></i>
661
- <span>100% защита от UV-лучей</span>
662
- </li>
663
- <li class="flex items-start">
664
- <i class="fas fa-check-circle text-purple-400 mt-1 mr-2"></i>
665
- <span>Модные оправы</span>
666
- </li>
667
- <li class="flex items-start">
668
- <i class="fas fa-check-circle text-purple-400 mt-1 mr-2"></i>
669
- <span>Различные степени затемнения</span>
670
- </li>
671
- </ul>
672
- </div>
673
  </div>
674
  </div>
675
  </div>
676
  </section>
677
 
678
  <!-- About Section -->
679
- <section id="about" class="py-16 bg-gradient-to-br from-blue-50 to-purple-50">
680
- <div class="container mx-auto px-4">
681
- <div class="text-center mb-12">
682
- <h2 class="text-3xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-blue-600">О нашей мастерской</h2>
683
- <div class="w-20 h-1 bg-gradient-to-r from-purple-400 to-blue-400 mx-auto rounded-full"></div>
684
- </div>
685
-
686
  <div class="flex flex-col lg:flex-row items-center">
687
  <div class="lg:w-1/2 mb-8 lg:mb-0 lg:pr-8">
688
- <img src="https://images.unsplash.com/photo-1581093450021-559792f1d1b3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
689
- alt="Мастерская"
690
- class="rounded-2xl shadow-xl w-full">
691
- </div>
692
- <div class="lg:w-1/2">
693
- <h3 class="text-2xl font-semibold mb-6 text-gray-800">Почему выбирают нас?</h3>
694
- <p class="text-gray-700 mb-6">Наша мастерская уже более 20 лет предоставляет услуги по ремонту и изготовлению очков. Мы гордимся своим вниманием к каждому клиенту.</p>
695
 
696
- <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
697
- <div class="bg-white p-4 rounded-lg shadow-sm flex items-start magic-border">
698
- <div class="bg-purple-100 p-3 rounded-full mr-4">
699
- <i class="fas fa-clock text-purple-600"></i>
700
- </div>
701
- <div>
702
- <h4 class="font-semibold">Быстро</h4>
703
- <p class="text-gray-600 text-sm">Большинство ремонтов выполняем в течение 15-30 минут</p>
704
- </div>
705
- </div>
706
-
707
- <div class="bg-white p-4 rounded-lg shadow-sm flex items-start magic-border">
708
- <div class="bg-purple-100 p-3 rounded-full mr-4">
709
- <i class="fas fa-award text-purple-600"></i>
710
  </div>
711
  <div>
712
- <h4 class="font-semibold">Качественно</h4>
713
- <p class="text-gray-600 text-sm">Используем только проверенные материалы и оборудование</p>
714
  </div>
715
  </div>
716
 
717
- <div class="bg-white p-4 rounded-lg shadow-sm flex items-start magic-border">
718
- <div class="bg-purple-100 p-3 rounded-full mr-4">
719
- <i class="fas fa-wallet text-purple-600"></i>
720
  </div>
721
  <div>
722
- <h4 class="font-semibold">Доступно</h4>
723
- <p class="text-gray-600 text-sm">Демократичные цены при высоком качестве работы</p>
724
  </div>
725
  </div>
726
 
727
- <div class="bg-white p-4 rounded-lg shadow-sm flex items-start magic-border">
728
- <div class="bg-purple-100 p-3 rounded-full mr-4">
729
- <i class="fas fa-shield-alt text-purple-600"></i>
730
  </div>
731
  <div>
732
- <h4 class="font-semibold">Гарантия</h4>
733
- <p class="text-gray-600 text-sm">Предоставляем гарантию на все виды работ</p>
734
  </div>
735
  </div>
736
  </div>
737
  </div>
 
 
 
 
 
738
  </div>
739
  </div>
740
  </section>
741
 
742
  <!-- Contacts Section -->
743
- <section id="contacts" class="py-16 bg-white">
744
- <div class="container mx-auto px-4">
 
745
  <div class="text-center mb-12">
746
- <h2 class="text-3xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-blue-600">Контакты</h2>
747
- <div class="w-20 h-1 bg-gradient-to-r from-purple-400 to-blue-400 mx-auto rounded-full"></div>
748
  </div>
749
 
750
  <div class="flex flex-col lg:flex-row gap-8">
751
  <div class="lg:w-1/2">
752
- <div class="bg-gray-50 p-8 rounded-xl shadow-md h-full">
753
- <h3 class="text-xl font-semibold mb-6 text-gray-800">Свяжитесь с нами</h3>
754
 
755
  <div class="space-y-6">
756
- <div class="contact-card p-4 rounded-lg flex items-start">
757
- <div class="bg-purple-100 p-3 rounded-full mr-4">
758
- <i class="fas fa-map-marker-alt text-purple-600"></i>
759
  </div>
760
  <div>
761
- <h4 class="font-semibold">Адрес</h4>
762
- <p class="text-gray-600">Москва, ул.Берзарина д.34 стр.12</p>
763
  </div>
764
  </div>
765
 
766
- <div class="contact-card p-4 rounded-lg flex items-start">
767
- <div class="bg-purple-100 p-3 rounded-full mr-4">
768
- <i class="fas fa-phone text-purple-600"></i>
769
  </div>
770
  <div>
771
- <h4 class="font-semibold">Телефон</h4>
772
- <p class="text-gray-600">+7 (926) 323-68-86</p>
773
- <a href="tel:+79263236886" class="text-purple-600 text-sm mt-1 inline-block hover:underline">Позвонить</a>
774
  </div>
775
  </div>
776
 
777
- <div class="contact-card p-4 rounded-lg flex items-start">
778
- <div class="bg-purple-100 p-3 rounded-full mr-4">
779
- <i class="fas fa-envelope text-purple-600"></i>
780
  </div>
781
  <div>
782
- <h4 class="font-semibold">Email</h4>
783
- <p class="text-gray-600">info@optica-opton.ru</p>
784
- <a href="mailto:[email protected]" class="text-purple-600 text-sm mt-1 inline-block hover:underline">Написать</a>
785
- </div>
786
- </div>
787
-
788
- <div class="contact-card p-4 rounded-lg">
789
- <div class="flex items-start mb-4">
790
- <div class="bg-purple-100 p-3 rounded-full mr-4">
791
- <i class="fas fa-clock text-purple-600"></i>
792
- </div>
793
- <div>
794
- <h4 class="font-semibold">Время работы</h4>
795
- </div>
796
- </div>
797
- <div class="space-y-3 pl-16">
798
- <div class="schedule-item">
799
- <h5 class="font-medium">Понедельник-Четв��рг</h5>
800
- <p class="text-gray-600 text-sm">с 8:00 до 16:00</p>
801
- </div>
802
- <div class="schedule-item">
803
- <h5 class="font-medium">Воскресенье</h5>
804
- <p class="text-gray-600 text-sm">с 9:00 до 14:00</p>
805
- </div>
806
- <div class="schedule-item">
807
- <h5 class="font-medium">Пятница-Суббота</h5>
808
- <p class="text-gray-600 text-sm">Выходной</p>
809
- </div>
810
- </div>
811
- </div>
812
-
813
- <div class="mt-6">
814
- <div>
815
- <a href="#" class="bg-blue-600 text-white rounded-full hover:bg-blue-700 transition transform hover:scale-110">
816
- <i></i>
817
- </a>
818
- <a href="#">
819
- <i>&nbsp;</i>
820
- </a>
821
- <a href="#">
822
- <i></i>
823
- </a>
824
- <a href="#" class="bg-green-600 transition">
825
- <i></i>
826
- </a>
827
  </div>
828
  </div>
829
  </div>
@@ -831,9 +576,9 @@
831
  </div>
832
 
833
  <div class="lg:w-1/2">
834
- <div class="bg-gray-50 p-8 rounded-xl shadow-md h-full">
835
- <h3 class="text-xl font-semibold mb-6 text-gray-800">Как нас найти</h3>
836
- <div class="map-container">
837
  <!-- Яндекс Карта -->
838
  <script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3Ac8fcb6c1bec1d088da7abd2d9ca82929556153fe8e67aea432ef025fb36f1714&amp;width=100%&amp;height=100%&amp;lang=ru_RU&amp;scroll=true"></script>
839
  </div>
@@ -844,25 +589,26 @@
844
  </section>
845
 
846
  <!-- Footer -->
847
- <footer class="bg-gray-900 text-white py-8">
848
- <div class="container mx-auto px-4">
 
849
  <div class="flex flex-col md:flex-row justify-between items-center">
850
  <div class="mb-4 md:mb-0">
851
  <div class="flex items-center space-x-3">
852
- <div class="logo-icon">
853
- ОП
854
  </div>
855
- <h2 class="text-xl font-bold">ОПТИКА "ОПТОН"</h2>
856
  </div>
857
- <p class="text-gray-400 mt-2">Профессиональные услуги по ремонту и изготовлению очков</p>
858
  </div>
859
  <div class="flex space-x-6">
860
- <a href="#services" class="hover:text-purple-400 transition">Услуги</a>
861
- <a href="#about" class="hover:text-purple-400 transition">О нас</a>
862
- <a href="#contacts" class="hover:text-purple-400 transition">Контакты</a>
863
  </div>
864
  </div>
865
- <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
866
  <p>© 2023 Оптика "ОПТОН". Все права защищены.</p>
867
  </div>
868
  </div>
@@ -873,6 +619,25 @@
873
  document.getElementById('menu-btn').addEventListener('click', function() {
874
  document.getElementById('mobile-menu').classList.toggle('hidden');
875
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
876
  </script>
877
  <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=ANTIMOLL/opt6968" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
878
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>ОПТИКА "ОПТОН" - Профессиональные услуги по ремонту очков</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=Montserrat:wght@400;500;600;700&family=Orbitron:wght@400;500;600;700&display=swap" rel="stylesheet">
10
  <style>
11
+ :root {
12
+ --metal-primary: #3a3a3a;
13
+ --metal-secondary: #1a1a1a;
14
+ --metal-accent: #64c8ff;
15
+ --metal-dark: #0a0a0a;
16
+ --metal-light: #e0e0e0;
17
+ }
18
+
19
  body {
20
+ font-family: 'Montserrat', sans-serif;
21
+ background-color: var(--metal-dark);
22
+ color: var(--metal-light);
23
+ overflow-x: hidden;
24
  }
25
+
26
+ .metal-text {
27
+ font-family: 'Orbitron', sans-serif;
28
+ font-weight: 500;
29
+ letter-spacing: 1px;
30
+ color: white;
31
+ text-shadow: 0 0 8px rgba(100, 200, 255, 0.6);
32
  }
33
+
34
+ .metal-bg {
35
+ background: linear-gradient(145deg, var(--metal-secondary), var(--metal-primary));
36
+ border: 1px solid rgba(100, 200, 255, 0.1);
37
+ box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
38
+ position: relative;
39
  overflow: hidden;
40
  }
41
+
42
+ .metal-bg::before {
43
+ content: '';
44
+ position: absolute;
45
+ top: 0;
46
+ left: 0;
47
+ right: 0;
48
+ bottom: 0;
49
+ background: linear-gradient(
50
+ 135deg,
51
+ rgba(100, 200, 255, 0.05) 0%,
52
+ rgba(100, 200, 255, 0) 20%,
53
+ rgba(100, 200, 255, 0) 80%,
54
+ rgba(100, 200, 255, 0.05) 100%
55
+ );
56
+ pointer-events: none;
57
+ }
58
+
59
+ .metal-card {
60
+ transition: all 0.3s ease;
61
+ transform-style: preserve-3d;
62
+ perspective: 1000px;
63
  }
64
+
65
+ .metal-card:hover {
66
+ transform: translateY(-5px) scale(1.02);
67
+ box-shadow: 0 10px 30px rgba(100, 200, 255, 0.2);
68
  }
69
+
70
+ .metal-card::after {
71
+ content: '';
72
+ position: absolute;
73
+ top: 0;
74
+ left: 0;
75
+ right: 0;
76
+ bottom: 0;
77
+ background: linear-gradient(
78
+ 135deg,
79
+ rgba(100, 200, 255, 0.1) 0%,
80
+ rgba(100, 200, 255, 0) 100%
81
+ );
82
+ opacity: 0;
83
+ transition: opacity 0.3s ease;
84
  }
85
+
86
+ .metal-card:hover::after {
87
+ opacity: 1;
88
  }
89
+
90
+ .metal-icon {
91
+ background: linear-gradient(145deg, var(--metal-primary), var(--metal-secondary));
92
+ color: var(--metal-accent);
93
+ border: 1px solid rgba(100, 200, 255, 0.2);
94
+ box-shadow: 0 0 15px rgba(100, 200, 255, 0.3);
95
+ transition: all 0.3s ease;
96
  }
97
+
98
+ .metal-icon:hover {
99
+ transform: rotate(5deg) scale(1.1);
100
+ box-shadow: 0 0 20px rgba(100, 200, 255, 0.5);
101
+ }
102
+
103
+ .metal-btn {
104
+ background: linear-gradient(135deg, var(--metal-accent), #3a8bc8);
105
+ color: var(--metal-dark);
106
+ font-weight: 600;
107
+ border: none;
108
+ transition: all 0.3s ease;
109
+ box-shadow: 0 0 15px rgba(100, 200, 255, 0.4);
110
+ position: relative;
111
+ overflow: hidden;
112
+ }
113
+
114
+ .metal-btn:hover {
115
+ background: linear-gradient(135deg, #3a8bc8, var(--metal-accent));
116
+ transform: translateY(-2px);
117
+ box-shadow: 0 0 25px rgba(100, 200, 255, 0.6);
118
+ }
119
+
120
+ .metal-btn::after {
121
+ content: '';
122
+ position: absolute;
123
+ top: -50%;
124
+ left: -50%;
125
+ width: 200%;
126
+ height: 200%;
127
+ background: linear-gradient(
128
+ to bottom right,
129
+ rgba(255, 255, 255, 0.3) 0%,
130
+ rgba(255, 255, 255, 0) 60%
131
+ );
132
+ transform: rotate(30deg);
133
+ transition: all 0.3s ease;
134
+ }
135
+
136
+ .metal-btn:hover::after {
137
+ left: 100%;
138
+ }
139
+
140
+ .metal-header {
141
+ background: rgba(20, 20, 20, 0.9);
142
+ backdrop-filter: blur(10px);
143
+ border-bottom: 1px solid rgba(100, 200, 255, 0.1);
144
+ box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
145
+ }
146
+
147
+ .metal-nav-link {
148
  position: relative;
149
+ font-weight: 500;
150
+ transition: all 0.3s ease;
151
  }
152
+
153
+ .metal-nav-link::after {
154
  content: '';
155
  position: absolute;
156
  width: 0;
157
+ height: 2px;
158
  bottom: -5px;
159
  left: 0;
160
+ background: linear-gradient(90deg, var(--metal-accent), #3a8bc8);
161
  transition: width 0.3s ease;
 
162
  }
163
+
164
+ .metal-nav-link:hover {
165
+ color: white;
166
+ text-shadow: 0 0 5px rgba(100, 200, 255, 0.5);
167
+ }
168
+
169
+ .metal-nav-link:hover::after {
170
  width: 100%;
171
  }
172
+
173
+ .metal-section-title {
174
+ position: relative;
175
+ display: inline-block;
176
+ font-family: 'Orbitron', sans-serif;
177
+ color: var(--metal-accent);
178
+ text-shadow: 0 0 10px rgba(100, 200, 255, 0.5);
179
  }
180
+
181
+ .metal-section-title::after {
182
+ content: '';
183
+ position: absolute;
184
+ width: 50%;
185
+ height: 3px;
186
+ bottom: -10px;
187
+ left: 25%;
188
+ background: linear-gradient(90deg, transparent, var(--metal-accent), transparent);
189
+ box-shadow: 0 0 10px rgba(100, 200, 255, 0.5);
190
  }
191
+
192
+ .metal-highlight {
193
+ background: rgba(100, 200, 255, 0.1);
194
+ border-left: 3px solid var(--metal-accent);
195
  position: relative;
 
196
  }
197
+
198
+ .metal-highlight::before {
199
  content: '';
200
  position: absolute;
201
+ top: 0;
202
  left: 0;
203
+ right: 0;
204
+ bottom: 0;
205
+ background: linear-gradient(
206
+ to right,
207
+ rgba(100, 200, 255, 0.1) 0%,
208
+ rgba(100, 200, 255, 0) 100%
209
+ );
 
 
 
 
 
 
 
210
  }
211
+
212
+ @keyframes pulse {
213
+ 0% { box-shadow: 0 0 0 0 rgba(100, 200, 255, 0.4); }
214
+ 70% { box-shadow: 0 0 0 10px rgba(100, 200, 255, 0); }
215
+ 100% { box-shadow: 0 0 0 0 rgba(100, 200, 255, 0); }
 
 
216
  }
217
+
218
+ .pulse {
219
+ animation: pulse 2s infinite;
 
 
220
  }
221
+
222
+ .metal-divider {
223
+ height: 1px;
224
+ background: linear-gradient(90deg, transparent, rgba(100, 200, 255, 0.3), transparent);
 
 
 
 
 
 
225
  }
226
+
227
+ .metal-grid-pattern {
228
+ background-image:
229
+ linear-gradient(rgba(100, 200, 255, 0.05) 1px, transparent 1px),
230
+ linear-gradient(90deg, rgba(100, 200, 255, 0.05) 1px, transparent 1px);
231
+ background-size: 20px 20px;
 
 
 
 
 
 
232
  }
233
  </style>
234
  </head>
235
+ <body class="bg-[#0a0a0a] metal-grid-pattern">
236
+ <!-- Floating particles -->
237
+ <div class="fixed inset-0 pointer-events-none">
238
+ <div class="absolute w-1 h-1 bg-[#64c8ff] rounded-full opacity-30" style="top: 20%; left: 15%;"></div>
239
+ <div class="absolute w-2 h-2 bg-[#64c8ff] rounded-full opacity-20" style="top: 60%; left: 50%;"></div>
240
+ <div class="absolute w-1 h-1 bg-[#64c8ff] rounded-full opacity-30" style="top: 80%; left: 70%;"></div>
241
+ <div class="absolute w-1 h-1 bg-[#64c8ff] rounded-full opacity-20" style="top: 30%; left: 80%;"></div>
242
+ </div>
243
+
244
  <!-- Header -->
245
+ <header class="metal-header sticky top-0 z-50">
246
+ <div class="container mx-auto px-4 py-3">
247
  <div class="flex justify-between items-center">
248
  <div class="flex items-center space-x-3">
249
+ <div class="metal-icon p-3 rounded-lg pulse">
250
+ <i class="fas fa-glasses text-xl"></i>
251
  </div>
252
+ <h1 class="text-2xl metal-text">ОПТИКА "ОПТОН"</h1>
253
  </div>
254
  <nav class="hidden md:flex space-x-8 items-center">
255
+ <a href="#services" class="metal-nav-link font-medium text-gray-300">Услуги</a>
256
+ <a href="#repair" class="metal-nav-link font-medium text-gray-300">Ремонт</a>
257
+ <a href="#manufacturing" class="metal-nav-link font-medium text-gray-300">Изготовление</a>
258
+ <a href="#about" class="metal-nav-link font-medium text-gray-300">О нас</a>
259
+ <a href="#contacts" class="metal-nav-link font-medium text-gray-300">Контакты</a>
260
+ <a href="tel:+79263236886" class="metal-btn px-4 py-2 rounded font-medium flex items-center">
 
261
  <i class="fas fa-phone mr-2"></i>+7 (926) 323-68-86
262
  </a>
263
  </nav>
264
  <div class="md:hidden">
265
+ <button id="menu-btn" class="text-gray-300 hover:text-white focus:outline-none">
266
+ <i class="fas fa-bars text-xl"></i>
267
  </button>
268
  </div>
269
  </div>
270
  </div>
271
 
272
  <!-- Mobile Menu -->
273
+ <div id="mobile-menu" class="hidden md:hidden bg-[#1a1a1a] border-t border-[rgba(100,200,255,0.1)] px-4 py-2">
274
+ <div class="flex flex-col space-y-3 py-3">
275
+ <a href="#services" class="py-2 text-gray-300 hover:text-white">Услуги</a>
276
+ <a href="#repair" class="py-2 text-gray-300 hover:text-white">Ремонт</a>
277
+ <a href="#manufacturing" class="py-2 text-gray-300 hover:text-white">Изготовление</a>
278
+ <a href="#about" class="py-2 text-gray-300 hover:text-white">О нас</a>
279
+ <a href="#contacts" class="py-2 text-gray-300 hover:text-white">Контакты</a>
280
+ <a href="tel:+79263236886" class="metal-btn px-4 py-2 rounded font-medium text-center">
 
281
  <i class="fas fa-phone mr-2"></i>+7 (926) 323-68-86
282
  </a>
283
  </div>
 
285
  </header>
286
 
287
  <!-- Hero Section -->
288
+ <section class="relative py-32 overflow-hidden">
289
+ <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1518655048521-f130df041f66?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80')] bg-cover bg-center opacity-30"></div>
290
+ <div class="absolute inset-0 bg-gradient-to-b from-[rgba(10,10,10,0.8)] to-[rgba(10,10,10,0.9)]"></div>
291
+ <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1IiBoZWlnaHQ9IjUiPgo8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiBmaWxsPSIjMDAwMDAwIj48L3JlY3Q+CjxwYXRoIGQ9Ik0wIDVMNSAwWk02IDRMNCA2Wk0tMSAxTDEgLTFaIiBzdHJva2U9InJnYmEoMTAwLDIwMCwyNTUsMC4xKSIgc3Ryb2tlLXdpZHRoPSIxIj48L3BhdGg+Cjwvc3ZnPg==')] opacity-20"></div>
292
+
293
+ <div class="container mx-auto px-4 relative z-10">
294
+ <div class="max-w-3xl mx-auto text-center">
295
+ <h1 class="text-4xl md:text-5xl font-bold mb-6 text-white metal-text">Профессиональный ремонт очков</h1>
296
+ <p class="text-xl text-gray-300 mb-8">Качественные услуги по ремонту и изготовлению очков с 20-летним опытом работы</p>
297
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
298
+ <a href="tel:+79263236886" class="metal-btn px-8 py-3 rounded font-medium flex items-center justify-center">
299
+ <i class="fas fa-phone mr-3"></i>Заказать звонок
300
+ </a>
301
+ <a href="#contacts" class="metal-bg hover:bg-[#252525] text-white px-8 py-3 rounded font-medium transition flex items-center justify-center border border-[rgba(100,200,255,0.2)]">
302
+ <i class="fas fa-map-marker-alt mr-3"></i>Найти нас
303
+ </a>
304
+ </div>
305
  </div>
306
  </div>
307
  </section>
308
 
309
  <!-- Services Section -->
310
+ <section id="services" class="py-16 relative overflow-hidden">
311
+ <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1IiBoZWlnaHQ9IjUiPgo8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiBmaWxsPSIjMDAwMDAwIj48L3JlY3Q+CjxwYXRoIGQ9Ik0wIDVMNSAwWk02IDRMNCA2Wk0tMSAxTDEgLTFaIiBzdHJva2U9InJnYmEoMTAwLDIwMCwyNTUsMC4wNSkiIHN0cm9rZS13aWR0aD0iMSI+PC9wYXRoPgo8L3N2Zz4=')] opacity-30"></div>
312
+ <div class="container mx-auto px-4 relative z-10">
313
  <div class="text-center mb-12">
314
+ <h2 class="text-3xl font-bold mb-4 metal-section-title">Наши услуги</h2>
315
+ <p class="text-gray-400 max-w-2xl mx-auto">Мы предлагаем полный спектр услуг по ремонту и обслуживанию очков</p>
316
  </div>
317
 
318
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
319
  <!-- Service Card 1 -->
320
+ <div class="metal-bg metal-card rounded-lg p-6 relative">
321
+ <div class="metal-icon p-4 rounded-lg w-16 h-16 flex items-center justify-center mb-4">
322
+ <i class="fas fa-tools text-xl"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
323
  </div>
324
+ <h3 class="text-xl font-semibold mb-3 text-white">Ремонт очков</h3>
325
+ <ul class="space-y-2 text-gray-400">
326
+ <li class="flex items-start">
327
+ <i class="fas fa-check text-[#64c8ff] mt-1 mr-2"></i>
328
+ <span>Замена носовых упоров</span>
329
+ </li>
330
+ <li class="flex items-start">
331
+ <i class="fas fa-check text-[#64c8ff] mt-1 mr-2"></i>
332
+ <span>Замена заушников</span>
333
+ </li>
334
+ <li class="flex items-start">
335
+ <i class="fas fa-check text-[#64c8ff] mt-1 mr-2"></i>
336
+ <span>Замена винтов</span>
337
+ </li>
338
+ </ul>
339
  </div>
340
 
341
  <!-- Service Card 2 -->
342
+ <div class="metal-bg metal-card rounded-lg p-6 relative">
343
+ <div class="metal-icon p-4 rounded-lg w-16 h-16 flex items-center justify-center mb-4">
344
+ <i class="fas fa-paint-brush text-xl"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
345
  </div>
346
+ <h3 class="text-xl font-semibold mb-3 text-white">Окраска линз</h3>
347
+ <ul class="space-y-2 text-gray-400">
348
+ <li class="flex items-start">
349
+ <i class="fas fa-check text-[#64c8ff] mt-1 mr-2"></i>
350
+ <span>Окраска полимерных линз</span>
351
+ </li>
352
+ <li class="flex items-start">
353
+ <i class="fas fa-check text-[#64c8ff] mt-1 mr-2"></i>
354
+ <span>Широкий выбор цветов</span>
355
+ </li>
356
+ <li class="flex items-start">
357
+ <i class="fas fa-check text-[#64c8ff] mt-1 mr-2"></i>
358
+ <span>Градиентные решения</span>
359
+ </li>
360
+ </ul>
361
  </div>
362
 
363
  <!-- Service Card 3 -->
364
+ <div class="metal-bg metal-card rounded-lg p-6 relative">
365
+ <div class="metal-icon p-4 rounded-lg w-16 h-16 flex items-center justify-center mb-4">
366
+ <i class="fas fa-glasses text-xl"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
367
  </div>
368
+ <h3 class="text-xl font-semibold mb-3 text-white">Изготовление очков</h3>
369
+ <ul class="space-y-2 text-gray-400">
370
+ <li class="flex items-start">
371
+ <i class="fas fa-check text-[#64c8ff] mt-1 mr-2"></i>
372
+ <span>По индивидуальному рецепту</span>
373
+ </li>
374
+ <li class="flex items-start">
375
+ <i class="fas fa-check text-[#64c8ff] mt-1 mr-2"></i>
376
+ <span>Качественные материалы</span>
377
+ </li>
378
+ <li class="flex items-start">
379
+ <i class="fas fa-check text-[#64c8ff] mt-1 mr-2"></i>
380
+ <span>Профессиональный подход</span>
381
+ </li>
382
+ </ul>
383
  </div>
384
  </div>
385
  </div>
386
  </section>
387
 
388
  <!-- Repair Section -->
389
+ <section id="repair" class="py-16 relative overflow-hidden">
390
+ <div class="container mx-auto px-4 relative z-10">
 
 
 
 
 
391
  <div class="flex flex-col lg:flex-row items-center">
392
  <div class="lg:w-1/2 mb-8 lg:mb-0 lg:pr-8">
393
+ <img src="https://images.unsplash.com/photo-1556306535-38febf6782e7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
394
+ alt="Ремонт очков"
395
+ class="rounded-lg shadow-lg w-full border border-[rgba(100,200,255,0.2)] transform transition duration-500 hover:scale-105">
 
 
 
 
 
 
 
 
 
396
  </div>
397
  <div class="lg:w-1/2">
398
+ <h2 class="text-3xl font-bold mb-6 metal-section-title">Ремонт очков</h2>
399
+ <p class="text-gray-400 mb-6">Наша мастерская специализируется на всех видах ремонта очков. Мы используем только качественные материалы и профессиональное оборудование.</p>
400
 
401
+ <div class="space-y-4">
402
+ <div class="flex items-start">
403
+ <div class="metal-icon p-2 rounded mr-4">
404
+ <i class="fas fa-check text-[#64c8ff]"></i>
 
 
 
 
 
 
 
 
 
 
405
  </div>
406
  <div>
407
+ <h4 class="font-semibold text-white">Быстро</h4>
408
+ <p class="text-gray-400 text-sm">Большинство ремонтов выполняем за 15-30 минут</p>
409
  </div>
410
  </div>
411
 
412
+ <div class="flex items-start">
413
+ <div class="metal-icon p-2 rounded mr-4">
414
+ <i class="fas fa-check text-[#64c8ff]"></i>
415
  </div>
416
  <div>
417
+ <h4 class="font-semibold text-white">Качественно</h4>
418
+ <p class="text-gray-400 text-sm">Используем проверенные материалы и оборудование</p>
419
  </div>
420
  </div>
421
 
422
+ <div class="flex items-start">
423
+ <div class="metal-icon p-2 rounded mr-4">
424
+ <i class="fas fa-check text-[#64c8ff]"></i>
425
  </div>
426
  <div>
427
+ <h4 class="font-semibold text-white">Гарантия</h4>
428
+ <p class="text-gray-400 text-sm">Предоставляем гарантию на все виды работ</p>
429
  </div>
430
  </div>
431
  </div>
432
 
433
+ <div class="mt-8 metal-highlight p-4 rounded">
434
+ <p class="text-[#64c8ff] font-medium flex items-start">
435
+ <i class="fas fa-info-circle mr-2 mt-1"></i>
436
  <span>Обратите внимание: мы не производим пайку оправ.</span>
437
  </p>
438
  </div>
 
441
  </div>
442
  </section>
443
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
444
  <!-- Manufacturing Section -->
445
+ <section id="manufacturing" class="py-16 relative overflow-hidden">
446
+ <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1IiBoZWlnaHQ9IjUiPgo8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiBmaWxsPSIjMDAwMDAwIj48L3JlY3Q+CjxwYXRoIGQ9Ik0wIDVMNSAwWk02IDRMNCA2Wk0tMSAxTDEgLTFaIiBzdHJva2U9InJnYmEoMTAwLDIwMCwyNTUsMC4wNSkiIHN0cm9rZS13aWR0aD0iMSI+PC9wYXRoPgo8L3N2Zz4=')] opacity-30"></div>
447
+ <div class="container mx-auto px-4 relative z-10">
448
  <div class="text-center mb-12">
449
+ <h2 class="text-3xl font-bold mb-4 metal-section-title">Изготовление очков</h2>
450
+ <p class="text-gray-400 max-w-2xl mx-auto">Мы изготавливаем очки по вашему рецепту с учетом всех индивидуальных особенностей</p>
 
 
 
 
451
  </div>
452
 
453
  <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
454
+ <!-- Step 1 -->
455
+ <div class="metal-bg metal-card rounded-lg p-8 flex flex-col items-center text-center">
456
+ <div class="metal-icon text-[#64c8ff] rounded-lg w-16 h-16 flex items-center justify-center mb-4 text-2xl font-bold">1</div>
457
+ <h3 class="text-xl font-semibold mb-3 text-white">Консультация</h3>
458
+ <p class="text-gray-400">Профессиональный подбор оправы и линз с учетом ваших потребностей</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
459
  </div>
460
 
461
+ <!-- Step 2 -->
462
+ <div class="metal-bg metal-card rounded-lg p-8 flex flex-col items-center text-center">
463
+ <div class="metal-icon text-[#64c8ff] rounded-lg w-16 h-16 flex items-center justify-center mb-4 text-2xl font-bold">2</div>
464
+ <h3 class="text-xl font-semibold mb-3 text-white">Изготовление</h3>
465
+ <p class="text-gray-400">Точное изготовление очков по вашему рецепту на профессиональном оборудовании</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
466
  </div>
467
 
468
+ <!-- Step 3 -->
469
+ <div class="metal-bg metal-card rounded-lg p-8 flex flex-col items-center text-center">
470
+ <div class="metal-icon text-[#64c8ff] rounded-lg w-16 h-16 flex items-center justify-center mb-4 text-2xl font-bold">3</div>
471
+ <h3 class="text-xl font-semibold mb-3 text-white">Примерка</h3>
472
+ <p class="text-gray-400">Точная подгонка и настройка очков для максимального комфорта</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
473
  </div>
474
  </div>
475
  </div>
476
  </section>
477
 
478
  <!-- About Section -->
479
+ <section id="about" class="py-16 relative overflow-hidden">
480
+ <div class="container mx-auto px-4 relative z-10">
 
 
 
 
 
481
  <div class="flex flex-col lg:flex-row items-center">
482
  <div class="lg:w-1/2 mb-8 lg:mb-0 lg:pr-8">
483
+ <h2 class="text-3xl font-bold mb-6 metal-section-title">О нашей мастерской</h2>
484
+ <p class="text-gray-400 mb-6">Наша мастерская уже более 20 лет предоставляет услуги по ремонту и изготовлению очков. Мы гордимся своим вниманием к каждому клиенту и качеством выполняемой работы.</p>
 
 
 
 
 
485
 
486
+ <div class="space-y-4">
487
+ <div class="flex items-start">
488
+ <div class="metal-icon p-2 rounded mr-4">
489
+ <i class="fas fa-check text-[#64c8ff]"></i>
 
 
 
 
 
 
 
 
 
 
490
  </div>
491
  <div>
492
+ <h4 class="font-semibold text-white">Опыт</h4>
493
+ <p class="text-gray-400 text-sm">20 лет профессиональной работы</p>
494
  </div>
495
  </div>
496
 
497
+ <div class="flex items-start">
498
+ <div class="metal-icon p-2 rounded mr-4">
499
+ <i class="fas fa-check text-[#64c8ff]"></i>
500
  </div>
501
  <div>
502
+ <h4 class="font-semibold text-white">Клиенты</h4>
503
+ <p class="text-gray-400 text-sm">Тысячи довольных клиентов</p>
504
  </div>
505
  </div>
506
 
507
+ <div class="flex items-start">
508
+ <div class="metal-icon p-2 rounded mr-4">
509
+ <i class="fas fa-check text-[#64c8ff]"></i>
510
  </div>
511
  <div>
512
+ <h4 class="font-semibold text-white">Оборудование</h4>
513
+ <p class="text-gray-400 text-sm">Современное профессиональное оборудование</p>
514
  </div>
515
  </div>
516
  </div>
517
  </div>
518
+ <div class="lg:w-1/2">
519
+ <img src="https://images.unsplash.com/photo-1581093450021-559792f1d1b3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
520
+ alt="Мастерская"
521
+ class="rounded-lg shadow-lg w-full border border-[rgba(100,200,255,0.2)] transform transition duration-500 hover:scale-105">
522
+ </div>
523
  </div>
524
  </div>
525
  </section>
526
 
527
  <!-- Contacts Section -->
528
+ <section id="contacts" class="py-16 relative overflow-hidden">
529
+ <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1IiBoZWlnaHQ9IjUiPgo8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiBmaWxsPSIjMDAwMDAwIj48L3JlY3Q+CjxwYXRoIGQ9Ik0wIDVMNSAwWk02IDRMNCA2Wk0tMSAxTDEgLTFaIiBzdHJva2U9InJnYmEoMTAwLDIwMCwyNTUsMC4wNSkiIHN0cm9rZS13aWR0aD0iMSI+PC9wYXRoPgo8L3N2Zz4=')] opacity-30"></div>
530
+ <div class="container mx-auto px-4 relative z-10">
531
  <div class="text-center mb-12">
532
+ <h2 class="text-3xl font-bold mb-4 metal-section-title">Контакты</h2>
533
+ <p class="text-gray-400 max-w-2xl mx-auto">Мы всегда рады помочь вам с ремонтом или изготовлением очков</p>
534
  </div>
535
 
536
  <div class="flex flex-col lg:flex-row gap-8">
537
  <div class="lg:w-1/2">
538
+ <div class="metal-bg p-8 rounded-lg h-full">
539
+ <h3 class="text-xl font-semibold mb-6 text-white">Контактная информация</h3>
540
 
541
  <div class="space-y-6">
542
+ <div class="flex items-start">
543
+ <div class="metal-icon p-3 rounded mr-4">
544
+ <i class="fas fa-map-marker-alt"></i>
545
  </div>
546
  <div>
547
+ <h4 class="font-semibold text-white">Адрес</h4>
548
+ <p class="text-gray-400">Москва, ул.Берзарина д.34 стр.12</p>
549
  </div>
550
  </div>
551
 
552
+ <div class="flex items-start">
553
+ <div class="metal-icon p-3 rounded mr-4">
554
+ <i class="fas fa-phone"></i>
555
  </div>
556
  <div>
557
+ <h4 class="font-semibold text-white">Телефон</h4>
558
+ <p class="text-gray-400">+7 (926) 323-68-86</p>
559
+ <a href="tel:+79263236886" class="text-[#64c8ff] text-sm mt-1 inline-block hover:underline">Позвонить</a>
560
  </div>
561
  </div>
562
 
563
+ <div class="flex items-start">
564
+ <div class="metal-icon p-3 rounded mr-4">
565
+ <i class="fas fa-clock"></i>
566
  </div>
567
  <div>
568
+ <h4 class="font-semibold text-white">Время работы</h4>
569
+ <p class="text-gray-400">Пн-Чт: 8:00 - 16:00</p>
570
+ <p class="text-gray-400">Вс: 9:00 - 14:00</p>
571
+ <p class="text-gray-400">Пт-Сб: выходной</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
572
  </div>
573
  </div>
574
  </div>
 
576
  </div>
577
 
578
  <div class="lg:w-1/2">
579
+ <div class="metal-bg p-8 rounded-lg h-full">
580
+ <h3 class="text-xl font-semibold mb-6 text-white">Как нас найти</h3>
581
+ <div class="h-96 rounded-lg overflow-hidden">
582
  <!-- Яндекс Карта -->
583
  <script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3Ac8fcb6c1bec1d088da7abd2d9ca82929556153fe8e67aea432ef025fb36f1714&amp;width=100%&amp;height=100%&amp;lang=ru_RU&amp;scroll=true"></script>
584
  </div>
 
589
  </section>
590
 
591
  <!-- Footer -->
592
+ <footer class="bg-[#1a1a1a] text-gray-300 py-8 relative overflow-hidden">
593
+ <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1IiBoZWlnaHQ9IjUiPgo8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiBmaWxsPSIjMDAwMDAwIj48L3JlY3Q+CjxwYXRoIGQ9Ik0wIDVMNSAwWk02IDRMNCA2Wk0tMSAxTDEgLTFaIiBzdHJva2U9InJnYmEoMTAwLDIwMCwyNTUsMC4wNSkiIHN0cm9rZS13aWR0aD0iMSI+PC9wYXRoPgo8L3N2Zz4=')] opacity-30"></div>
594
+ <div class="container mx-auto px-4 relative z-10">
595
  <div class="flex flex-col md:flex-row justify-between items-center">
596
  <div class="mb-4 md:mb-0">
597
  <div class="flex items-center space-x-3">
598
+ <div class="metal-icon p-2 rounded">
599
+ <i class="fas fa-glasses"></i>
600
  </div>
601
+ <h2 class="text-xl metal-text">ОПТИКА "ОПТОН"</h2>
602
  </div>
603
+ <p class="text-[#64c8ff] mt-2">Профессиональные услуги по ремонту очков</p>
604
  </div>
605
  <div class="flex space-x-6">
606
+ <a href="#services" class="hover:text-[#64c8ff] transition">Услуги</a>
607
+ <a href="#about" class="hover:text-[#64c8ff] transition">О нас</a>
608
+ <a href="#contacts" class="hover:text-[#64c8ff] transition">Контакты</a>
609
  </div>
610
  </div>
611
+ <div class="metal-divider mt-8 pt-8 text-center text-gray-500">
612
  <p>© 2023 Оптика "ОПТОН". Все права защищены.</p>
613
  </div>
614
  </div>
 
619
  document.getElementById('menu-btn').addEventListener('click', function() {
620
  document.getElementById('mobile-menu').classList.toggle('hidden');
621
  });
622
+
623
+ // Add scroll animation
624
+ document.addEventListener('DOMContentLoaded', function() {
625
+ const observerOptions = {
626
+ threshold: 0.1
627
+ };
628
+
629
+ const observer = new IntersectionObserver((entries) => {
630
+ entries.forEach(entry => {
631
+ if (entry.isIntersecting) {
632
+ entry.target.classList.add('animate-fadeIn');
633
+ }
634
+ });
635
+ }, observerOptions);
636
+
637
+ document.querySelectorAll('section').forEach(section => {
638
+ observer.observe(section);
639
+ });
640
+ });
641
  </script>
642
  <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=ANTIMOLL/opt6968" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
643
  </html>
prompts.txt CHANGED
@@ -1 +1,5 @@
1
- измени дизайн логотип замени слова волшебный сделай более строгий
 
 
 
 
 
1
+ измени дизайн логотип замени слова волшебный сделай более строгий
2
+ полностью измени дизайн
3
+ сделай винтажный дизайн и логотип остальное не трогай
4
+ сделай дизайн в стиле металл титан современный с эффектами а контент не трогай
5
+ переделай всё на свой вкус