Hugging Face's logo

Spaces:
ANTIMOLL
/
opt6968
Running

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

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +545 -514
  2. prompts.txt +2 -1
index.html CHANGED
@@ -3,640 +3,671 @@
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>
284
  </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>
439
  </div>
440
  </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>
575
  </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>
 
 
 
 
 
 
 
 
 
 
 
585
  </div>
586
  </div>
 
 
 
 
 
 
 
 
 
 
587
  </div>
588
  </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>
615
  </footer>
616
-
617
  <script>
618
- // Mobile menu toggle
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>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Cosmic Explorers | Виртуальные космические экспедиции</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=Orbitron:wght@400;700&family=Space+Grotesk:wght@300;500;700&display=swap');
11
+
12
  :root {
13
+ --starfield-bg: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
14
+ --neon-blue: #00f3ff;
15
+ --deep-space: #0a0e17;
16
+ --stellar-purple: #7b2dff;
 
17
  }
18
 
19
  body {
20
+ font-family: 'Space Grotesk', sans-serif;
21
+ background: var(--starfield-bg);
22
+ color: white;
23
+ min-height: 100vh;
24
  overflow-x: hidden;
25
  }
26
 
27
+ h1, h2, h3 {
28
  font-family: 'Orbitron', sans-serif;
 
 
 
 
29
  }
30
 
31
+ .logo-container {
 
 
 
32
  position: relative;
33
+ width: 120px;
34
+ height: 120px;
35
  }
36
 
37
+ .logo-base {
 
38
  position: absolute;
39
+ width: 100%;
40
+ height: 100%;
41
+ background: conic-gradient(from 180deg, var(--neon-blue), var(--stellar-purple));
42
+ border-radius: 50%;
43
+ animation: spin 8s linear infinite;
44
+ filter: blur(10px);
45
+ opacity: 0.7;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
46
  }
47
 
48
+ .logo-text {
 
49
  position: absolute;
50
+ width: 100%;
51
+ height: 100%;
52
+ display: flex;
53
+ align-items: center;
54
+ justify-content: center;
55
+ font-size: 1.8rem;
56
+ font-weight: 700;
57
+ background: transparent;
58
+ border-radius: 50%;
59
+ z-index: 2;
 
60
  }
61
 
62
+ @keyframes spin {
63
+ from { transform: rotate(0deg); }
64
+ to { transform: rotate(360deg); }
65
  }
66
 
67
+ .star {
68
+ position: absolute;
69
+ background: white;
70
+ border-radius: 50%;
71
+ animation: twinkle var(--duration) ease-in-out infinite;
 
72
  }
73
 
74
+ @keyframes twinkle {
75
+ 0%, 100% { opacity: 0.2; }
76
+ 50% { opacity: 1; }
77
  }
78
 
79
+ .planet-card {
 
 
 
 
80
  transition: all 0.3s ease;
81
+ background: rgba(10, 14, 23, 0.7);
82
+ border: 1px solid rgba(123, 45, 255, 0.3);
83
+ border-radius: 16px;
84
  overflow: hidden;
85
  }
86
 
87
+ .planet-card:hover {
88
+ transform: translateY(-10px);
89
+ box-shadow: 0 10px 25px rgba(0, 243, 255, 0.3);
90
+ border-color: var(--neon-blue);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
91
  }
92
 
93
+ .nav-link {
 
 
 
 
 
 
 
 
 
 
 
94
  position: relative;
 
 
95
  }
96
 
97
+ .nav-link::after {
98
  content: '';
99
  position: absolute;
 
 
100
  bottom: -5px;
101
  left: 0;
102
+ width: 0;
103
+ height: 2px;
104
+ background: var(--neon-blue);
105
+ transition: width 0.3s;
 
 
 
106
  }
107
 
108
+ .nav-link:hover::after {
109
  width: 100%;
110
  }
111
 
112
+ .btn-neon {
113
+ background: linear-gradient(45deg, var(--neon-blue), var(--stellar-purple));
114
+ color: var(--deep-space);
115
+ font-weight: 700;
116
+ transition: all 0.3s;
 
 
 
 
 
 
 
 
 
 
 
 
117
  }
118
 
119
+ .btn-neon:hover {
120
+ transform: translateY(-2px);
121
+ box-shadow: 0 5px 15px rgba(0, 243, 255, 0.4);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
122
  }
123
 
124
+ .mission-path {
125
+ stroke-dasharray: 1000;
126
+ stroke-dashoffset: 1000;
127
+ animation: dash 5s linear forwards;
128
  }
129
 
130
+ @keyframes dash {
131
+ to {
132
+ stroke-dashoffset: 0;
133
+ }
 
134
  }
135
  </style>
136
  </head>
137
+ <body class="antialiased">
138
+ <!-- Starfield Background -->
139
+ <div id="starfield" class="fixed top-0 left-0 w-full h-full -z-10"></div>
140
+
141
+ <!-- Navigation -->
142
+ <nav class="container mx-auto px-6 py-4 flex justify-between items-center">
143
+ <div class="flex items-center space-x-4">
144
+ <div class="logo-container">
145
+ <div class="logo-base"></div>
146
+ <div class="logo-text">CE</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
147
  </div>
148
+ <span class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-purple-500">
149
+ Cosmic Explorers
150
+ </span>
151
  </div>
152
 
153
+ <div class="hidden md:flex items-center space-x-8">
154
+ <a href="#" class="nav-link text-lg">Экспедиции</a>
155
+ <a href="#" class="nav-link text-lg">Обучение</a>
156
+ <a href="#" class="nav-link text-lg">Сообщество</a>
157
+ <a href="#" class="nav-link text-lg">О нас</a>
 
 
 
 
 
 
 
158
  </div>
 
 
 
 
 
 
 
159
 
160
+ <div class="flex items-center space-x-4">
161
+ <button class="px-4 py-2 rounded-full border border-cyan-400 text-cyan-400 hover:bg-cyan-400 hover:bg-opacity-10 transition">
162
+ Войти
163
+ </button>
164
+ <button class="btn-neon px-6 py-2 rounded-full">
165
+ Старт
166
+ </button>
167
+ <button class="md:hidden text-2xl">
168
+ <i class="fas fa-bars"></i>
169
+ </button>
170
+ </div>
171
+ </nav>
172
+
173
+ <!-- Hero Section -->
174
+ <section class="container mx-auto px-6 py-20 mt-10">
175
+ <div class="flex flex-col md:flex-row items-center">
176
+ <div class="md:w-1/2 mb-12 md:mb-0">
177
+ <h1 class="text-5xl md:text-6xl font-bold mb-6 leading-tight">
178
+ Исследуйте <span class="text-cyan-400">Вселенную</span> не выходя из дома
179
+ </h1>
180
+ <p class="text-xl text-gray-300 mb-8">
181
+ Виртуальные космические экспедиции с элементами обучения.
182
+ Отправляйтесь к далеким галактикам, изучайте экзопланеты и собирайте космические достижения.
183
+ </p>
184
+ <div class="flex space-x-4">
185
+ <button class="btn-neon px-8 py-3 rounded-full text-lg">
186
+ Начать путешествие
187
+ </button>
188
+ <button class="px-6 py-3 rounded-full border border-purple-500 text-purple-400 hover:bg-purple-500 hover:bg-opacity-10 transition flex items-center">
189
+ <i class="fas fa-play-circle mr-2"></i> Демо
190
+ </button>
191
+ </div>
192
+ <div class="mt-12 flex items-center space-x-8">
193
+ <div>
194
+ <div class="text-3xl font-bold text-cyan-400">47+</div>
195
+ <div class="text-gray-400">Планетных систем</div>
196
+ </div>
197
+ <div>
198
+ <div class="text-3xl font-bold text-purple-400">120K+</div>
199
+ <div class="text-gray-400">Исследователей</div>
200
+ </div>
201
+ <div>
202
+ <div class="text-3xl font-bold text-pink-400">3D</div>
203
+ <div class="text-gray-400">Полное погружение</div>
204
+ </div>
205
+ </div>
206
+ </div>
207
+
208
+ <div class="md:w-1/2 relative">
209
+ <div class="relative">
210
+ <img src="https://images.unsplash.com/photo-1454789548928-9a2293cd51b1?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80"
211
+ alt="Cosmic Explorer"
212
+ class="rounded-2xl shadow-2xl w-full max-w-lg mx-auto border-2 border-cyan-400 border-opacity-30">
213
+ <div class="absolute -bottom-6 -right-6 bg-gray-900 rounded-xl px-4 py-2 border border-cyan-400 shadow-lg">
214
+ <div class="flex items-center">
215
+ <div class="h-3 w-3 rounded-full bg-green-400 mr-2 animate-pulse"></div>
216
+ <span>Экспедиция активна</span>
217
+ </div>
218
+ </div>
219
  </div>
220
  </div>
221
  </div>
222
  </section>
223
+
224
+ <!-- Featured Expeditions -->
225
+ <section class="container mx-auto px-6 py-16">
226
+ <div class="text-center mb-16">
227
+ <h2 class="text-4xl font-bold mb-4">Популярные экспедиции</h2>
228
+ <p class="text-xl text-gray-400 max-w-2xl mx-auto">
229
+ Выберите свою следующую космическую миссию из нашей постоянно расширяющейся коллекции
230
+ </p>
231
+ </div>
232
+
233
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
234
+ <!-- Expedition 1 -->
235
+ <div class="planet-card group">
236
+ <div class="relative overflow-hidden h-64">
237
+ <img src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80"
238
+ alt="Kepler-186f"
239
+ class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
240
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-80"></div>
241
+ <div class="absolute bottom-4 left-4">
242
+ <span class="bg-cyan-600 text-xs px-2 py-1 rounded">НОВИНКА</span>
243
+ <h3 class="text-2xl font-bold mt-2">Kepler-186f</h3>
244
+ <p class="text-sm text-gray-300">Землеподобная экзопланета</p>
245
+ </div>
246
+ </div>
247
+ <div class="p-6">
248
+ <div class="flex justify-between items-center mb-4">
249
+ <div class="flex items-center">
250
+ <i class="fas fa-lightbulb text-yellow-400 mr-2"></i>
251
+ <span class="text-sm">Средний уровень</span>
252
+ </div>
253
+ <div class="text-purple-400">
254
+ <i class="fas fa-clock mr-1"></i>
255
+ <span>2.5 часа</span>
256
+ </div>
257
+ </div>
258
+ <p class="text-gray-400 mb-4">
259
+ Первая планета размером с Землю, обнаруженная в обитаемой зоне другой звезды.
260
+ </p>
261
+ <div class="flex justify-between items-center">
262
+ <div class="flex -space-x-2">
263
+ <img class="w-8 h-8 rounded-full border-2 border-gray-800" src="https://randomuser.me/api/portraits/women/44.jpg" alt="">
264
+ <img class="w-8 h-8 rounded-full border-2 border-gray-800" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
265
+ <img class="w-8 h-8 rounded-full border-2 border-gray-800" src="https://randomuser.me/api/portraits/women/68.jpg" alt="">
266
+ <div class="w-8 h-8 rounded-full border-2 border-gray-800 bg-gray-700 flex items-center justify-center text-xs">
267
+ +12
268
+ </div>
269
+ </div>
270
+ <button class="btn-neon px-4 py-2 rounded-full text-sm">
271
+ Присоединиться
272
+ </button>
273
+ </div>
274
+ </div>
275
  </div>
276
 
277
+ <!-- Expedition 2 -->
278
+ <div class="planet-card group">
279
+ <div class="relative overflow-hidden h-64">
280
+ <img src="https://images.unsplash.com/photo-1462331940025-496dfbfc7564?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80"
281
+ alt="Туманность Ориона"
282
+ class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
283
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-80"></div>
284
+ <div class="absolute bottom-4 left-4">
285
+ <h3 class="text-2xl font-bold mt-2">Туманность Ориона</h3>
286
+ <p class="text-sm text-gray-300">Звездные ясли</p>
287
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
288
  </div>
289
+ <div class="p-6">
290
+ <div class="flex justify-between items-center mb-4">
291
+ <div class="flex items-center">
292
+ <i class="fas fa-lightbulb text-green-400 mr-2"></i>
293
+ <span class="text-sm">Начинающий</span>
294
+ </div>
295
+ <div class="text-purple-400">
296
+ <i class="fas fa-clock mr-1"></i>
297
+ <span>1.5 часа</span>
298
+ </div>
299
  </div>
300
+ <p class="text-gray-400 mb-4">
301
+ Исследуйте одну из самых ярких туманностей, где рождаются новые звезды и планетные системы.
302
+ </p>
303
+ <div class="flex justify-between items-center">
304
+ <div class="flex -space-x-2">
305
+ <img class="w-8 h-8 rounded-full border-2 border-gray-800" src="https://randomuser.me/api/portraits/men/22.jpg" alt="">
306
+ <img class="w-8 h-8 rounded-full border-2 border-gray-800" src="https://randomuser.me/api/portraits/women/33.jpg" alt="">
307
+ <div class="w-8 h-8 rounded-full border-2 border-gray-800 bg-gray-700 flex items-center justify-center text-xs">
308
+ +28
309
+ </div>
310
+ </div>
311
+ <button class="btn-neon px-4 py-2 rounded-full text-sm">
312
+ Присоединиться
313
+ </button>
 
 
 
 
 
 
 
314
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
315
  </div>
316
  </div>
317
+
318
+ <!-- Expedition 3 -->
319
+ <div class="planet-card group">
320
+ <div class="relative overflow-hidden h-64">
321
+ <img src="https://images.unsplash.com/photo-1464802686167-b939a6910659?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80"
322
+ alt="Галактика Андромеды"
323
+ class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
324
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-80"></div>
325
+ <div class="absolute bottom-4 left-4">
326
+ <span class="bg-purple-600 text-xs px-2 py-1 rounded">ПРЕМИУМ</span>
327
+ <h3 class="text-2xl font-bold mt-2">Галактика Андромеды</h3>
328
+ <p class="text-sm text-gray-300">Спиральная галактика</p>
329
+ </div>
330
  </div>
331
+ <div class="p-6">
332
+ <div class="flex justify-between items-center mb-4">
333
+ <div class="flex items-center">
334
+ <i class="fas fa-lightbulb text-red-400 mr-2"></i>
335
+ <span class="text-sm">Эксперт</span>
 
 
 
 
 
 
 
 
336
  </div>
337
+ <div class="text-purple-400">
338
+ <i class="fas fa-clock mr-1"></i>
339
+ <span>4 часа</span>
 
 
 
 
 
 
340
  </div>
341
+ </div>
342
+ <p class="text-gray-400 mb-4">
343
+ Отправьтесь в межгалактическое путешествие к нашей ближайшей сосед��е, которая столкнется с Млечным Путем через 4 млрд лет.
344
+ </p>
345
+ <div class="flex justify-between items-center">
346
+ <div class="flex -space-x-2">
347
+ <img class="w-8 h-8 rounded-full border-2 border-gray-800" src="https://randomuser.me/api/portraits/men/75.jpg" alt="">
348
+ <img class="w-8 h-8 rounded-full border-2 border-gray-800" src="https://randomuser.me/api/portraits/women/90.jpg" alt="">
349
+ <img class="w-8 h-8 rounded-full border-2 border-gray-800" src="https://randomuser.me/api/portraits/men/42.jpg" alt="">
350
+ <div class="w-8 h-8 rounded-full border-2 border-gray-800 bg-gray-700 flex items-center justify-center text-xs">
351
+ +5
352
  </div>
353
  </div>
354
+ <button class="btn-neon px-4 py-2 rounded-full text-sm">
355
+ Присоединиться
356
+ </button>
 
 
 
 
357
  </div>
358
  </div>
359
  </div>
360
  </div>
361
+
362
+ <div class="text-center mt-12">
363
+ <button class="px-8 py-3 rounded-full border border-cyan-400 text-cyan-400 hover:bg-cyan-400 hover:bg-opacity-10 transition flex items-center mx-auto">
364
+ <i class="fas fa-globe-americas mr-2"></i> Все экспедиции
365
+ </button>
366
+ </div>
367
  </section>
368
+
369
+ <!-- Learning Path -->
370
+ <section class="container mx-auto px-6 py-16 bg-gradient-to-r from-gray-900 to-gray-800 rounded-3xl my-16">
371
+ <div class="text-center mb-16">
372
+ <h2 class="text-4xl font-bold mb-4">Образовательные маршруты</h2>
373
+ <p class="text-xl text-gray-400 max-w-2xl mx-auto">
374
+ Систематизированные программы обучения, сочетающие теорию и практику космических исследований
375
+ </p>
376
+ </div>
377
+
378
+ <div class="relative">
379
+ <svg class="hidden md:block absolute top-0 left-0 w-full h-full" viewBox="0 0 1000 300" preserveAspectRatio="none">
380
+ <path d="M100,150 Q250,50 400,150 T700,150 L900,150"
381
+ stroke="rgba(0, 243, 255, 0.3)"
382
+ stroke-width="4"
383
+ fill="none"
384
+ class="mission-path"/>
385
+ </svg>
386
 
387
+ <div class="relative grid grid-cols-1 md:grid-cols-3 gap-8">
388
  <!-- Step 1 -->
389
+ <div class="bg-gray-800 bg-opacity-50 rounded-2xl p-6 border border-cyan-400 border-opacity-30 backdrop-blur-sm">
390
+ <div class="w-12 h-12 rounded-full bg-cyan-500 flex items-center justify-center text-xl mb-4">
391
+ 1
392
+ </div>
393
+ <h3 class="text-2xl font-bold mb-3">Основы астрономии</h3>
394
+ <p class="text-gray-400 mb-4">
395
+ Изучите фундаментальные концепции: от движения планет до жизненных циклов звезд.
396
+ </p>
397
+ <div class="flex items-center text-sm text-cyan-400">
398
+ <span>8 модулей</span>
399
+ <span class="mx-2">•</span>
400
+ <span>15 часов</span>
401
+ </div>
402
  </div>
403
 
404
  <!-- Step 2 -->
405
+ <div class="bg-gray-800 bg-opacity-50 rounded-2xl p-6 border border-purple-500 border-opacity-30 backdrop-blur-sm md:mt-20">
406
+ <div class="w-12 h-12 rounded-full bg-purple-500 flex items-center justify-center text-xl mb-4">
407
+ 2
408
+ </div>
409
+ <h3 class="text-2xl font-bold mb-3">Космические технологии</h3>
410
+ <p class="text-gray-400 mb-4">
411
+ Как работают телескопы, космические аппараты и системы навигации в космосе.
412
+ </p>
413
+ <div class="flex items-center text-sm text-purple-400">
414
+ <span>6 модулей</span>
415
+ <span class="mx-2">•</span>
416
+ <span>12 часов</span>
417
+ </div>
418
  </div>
419
 
420
  <!-- Step 3 -->
421
+ <div class="bg-gray-800 bg-opacity-50 rounded-2xl p-6 border border-pink-500 border-opacity-30 backdrop-blur-sm">
422
+ <div class="w-12 h-12 rounded-full bg-pink-500 flex items-center justify-center text-xl mb-4">
423
+ 3
424
+ </div>
425
+ <h3 class="text-2xl font-bold mb-3">Экзопланетология</h3>
426
+ <p class="text-gray-400 mb-4">
427
+ Методы поиска и анализа планет за пределами Солнечной системы.
428
+ </p>
429
+ <div class="flex items-center text-sm text-pink-400">
430
+ <span>10 модулей</span>
431
+ <span class="mx-2">•</span>
432
+ <span>20 часов</span>
433
+ </div>
434
  </div>
435
  </div>
436
  </div>
437
+
438
+ <div class="text-center mt-16">
439
+ <button class="btn-neon px-8 py-3 rounded-full text-lg">
440
+ Начать обучение
441
+ </button>
442
+ </div>
443
  </section>
444
+
445
+ <!-- Testimonials -->
446
+ <section class="container mx-auto px-6 py-16">
447
+ <div class="text-center mb-16">
448
+ <h2 class="text-4xl font-bold mb-4">Отзывы исследователей</h2>
449
+ <p class="text-xl text-gray-400 max-w-2xl mx-auto">
450
+ Присоединяйтесь к сообществу космических энтузиастов
451
+ </p>
452
+ </div>
453
+
454
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
455
+ <!-- Testimonial 1 -->
456
+ <div class="bg-gray-900 rounded-2xl p-8 border border-gray-800">
457
+ <div class="flex items-center mb-6">
458
+ <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Анна К." class="w-16 h-16 rounded-full border-2 border-cyan-400">
459
+ <div class="ml-4">
460
+ <h4 class="text-xl font-bold">Анна К.</h4>
461
+ <p class="text-gray-400">Учитель физики</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
462
  </div>
463
  </div>
464
+ <p class="text-gray-300 mb-6">
465
+ "Использую Cosmic Explorers на своих уроках. Дети в восторге от 3D-моделей планетных систем! Лучший способ заинтересовать астрономией."
466
+ </p>
467
+ <div class="flex space-x-2">
468
+ <i class="fas fa-star text-yellow-400"></i>
469
+ <i class="fas fa-star text-yellow-400"></i>
470
+ <i class="fas fa-star text-yellow-400"></i>
471
+ <i class="fas fa-star text-yellow-400"></i>
472
+ <i class="fas fa-star text-yellow-400"></i>
473
  </div>
474
  </div>
 
 
 
 
 
 
 
 
 
 
 
475
 
476
+ <!-- Testimonial 2 -->
477
+ <div class="bg-gray-900 rounded-2xl p-8 border border-gray-800">
478
+ <div class="flex items-center mb-6">
479
+ <img src="https://randomuser.me/api/portraits/men/54.jpg" alt="Дмитрий П." class="w-16 h-16 rounded-full border-2 border-purple-500">
480
+ <div class="ml-4">
481
+ <h4 class="text-xl font-bold">Дмитрий П.</h4>
482
+ <p class="text-gray-400">Студент-астрофизик</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
483
  </div>
484
  </div>
485
+ <p class="text-gray-300 mb-6">
486
+ "Как будущий ученый ценю точность данных и качество визуализации. Особенно впечатлила симуляция релятивистских эффектов возле черных дыр!"
487
+ </p>
488
+ <div class="flex space-x-2">
489
+ <i class="fas fa-star text-yellow-400"></i>
490
+ <i class="fas fa-star text-yellow-400"></i>
491
+ <i class="fas fa-star text-yellow-400"></i>
492
+ <i class="fas fa-star text-yellow-400"></i>
493
+ <i class="fas fa-star-half-alt text-yellow-400"></i>
494
+ </div>
495
+ </div>
496
+
497
+ <!-- Testimonial 3 -->
498
+ <div class="bg-gray-900 rounded-2xl p-8 border border-gray-800">
499
+ <div class="flex items-center mb-6">
500
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Елена С." class="w-16 h-16 rounded-full border-2 border-pink-500">
501
+ <div class="ml-4">
502
+ <h4 class="text-xl font-bold">Елена С.</h4>
503
+ <p class="text-gray-400">UX дизайнер</p>
504
  </div>
505
  </div>
506
+ <p class="text-gray-300 mb-6">
507
+ "Как дизайнер оцениваю безупречный UI/UX. А как обычный человек - возможность доступно узнать о сложных космических явлениях. Идеальный баланс!"
508
+ </p>
509
+ <div class="flex space-x-2">
510
+ <i class="fas fa-star text-yellow-400"></i>
511
+ <i class="fas fa-star text-yellow-400"></i>
512
+ <i class="fas fa-star text-yellow-400"></i>
513
+ <i class="fas fa-star text-yellow-400"></i>
514
+ <i class="fas fa-star text-yellow-400"></i>
515
+ </div>
516
  </div>
517
  </div>
518
  </section>
519
+
520
+ <!-- CTA Section -->
521
+ <section class="container mx-auto px-6 py-20 text-center">
522
+ <div class="max-w-4xl mx-auto bg-gray-900 bg-opacity-50 rounded-3xl p-12 border border-cyan-400 border-opacity-30 backdrop-blur-sm">
523
+ <h2 class="text-4xl md:text-5xl font-bold mb-6">Готовы к запуску?</h2>
524
+ <p class="text-xl text-gray-400 mb-8 max-w-2xl mx-auto">
525
+ Присоединяйтесь к более чем 120,000 космических исследователей по всему миру
526
+ </p>
527
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
528
+ <button class="btn-neon px-8 py-4 rounded-full text-lg">
529
+ Начать бесплатно
530
+ </button>
531
+ <button class="px-8 py-4 rounded-full border border-purple-500 text-purple-400 hover:bg-purple-500 hover:bg-opacity-10 transition">
532
+ Узнать о премиум
533
+ </button>
534
+ </div>
535
+ </div>
536
+ </section>
537
+
538
  <!-- Footer -->
539
+ <footer class="bg-gray-900 bg-opacity-80 border-t border-gray-800">
540
+ <div class="container mx-auto px-6 py-12">
541
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-12">
542
+ <div>
543
+ <div class="flex items-center space-x-4 mb-6">
544
+ <div class="logo-container" style="width: 50px; height: 50px;">
545
+ <div class="logo-base"></div>
546
+ <div class="logo-text text-sm">CE</div>
547
  </div>
548
+ <span class="text-xl font-bold">Cosmic Explorers</span>
549
+ </div>
550
+ <p class="text-gray-400 mb-4">
551
+ Виртуальные космические экспедиции с 2023 года
552
+ </p>
553
+ <div class="flex space-x-4">
554
+ <a href="#" class="text-gray-400 hover:text-cyan-400 transition">
555
+ <i class="fab fa-twitter"></i>
556
+ </a>
557
+ <a href="#" class="text-gray-400 hover:text-purple-400 transition">
558
+ <i class="fab fa-discord"></i>
559
+ </a>
560
+ <a href="#" class="text-gray-400 hover:text-pink-400 transition">
561
+ <i class="fab fa-instagram"></i>
562
+ </a>
563
+ <a href="#" class="text-gray-400 hover:text-blue-400 transition">
564
+ <i class="fab fa-youtube"></i>
565
+ </a>
566
  </div>
 
567
  </div>
568
+
569
+ <div>
570
+ <h4 class="text-lg font-bold mb-6">Экспедиции</h4>
571
+ <ul class="space-y-3">
572
+ <li><a href="#" class="text-gray-400 hover:text-cyan-400 transition">Солнечная система</a></li>
573
+ <li><a href="#" class="text-gray-400 hover:text-cyan-400 transition">Экзопланеты</a></li>
574
+ <li><a href="#" class="text-gray-400 hover:text-cyan-400 transition">Галактики</a></li>
575
+ <li><a href="#" class="text-gray-400 hover:text-cyan-400 transition">Туманности</a></li>
576
+ <li><a href="#" class="text-gray-400 hover:text-cyan-400 transition">Черные дыры</a></li>
577
+ </ul>
578
+ </div>
579
+
580
+ <div>
581
+ <h4 class="text-lg font-bold mb-6">Обучение</h4>
582
+ <ul class="space-y-3">
583
+ <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Курсы</a></li>
584
+ <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Квесты</a></li>
585
+ <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Достижения</a></li>
586
+ <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Энциклопедия</a></li>
587
+ <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Для преподавателей</a></li>
588
+ </ul>
589
+ </div>
590
+
591
+ <div>
592
+ <h4 class="text-lg font-bold mb-6">Компания</h4>
593
+ <ul class="space-y-3">
594
+ <li><a href="#" class="text-gray-400 hover:text-pink-400 transition">О нас</a></li>
595
+ <li><a href="#" class="text-gray-400 hover:text-pink-400 transition">Карьера</a></li>
596
+ <li><a href="#" class="text-gray-400 hover:text-pink-400 transition">Блог</a></li>
597
+ <li><a href="#" class="text-gray-400 hover:text-pink-400 transition">Контакты</a></li>
598
+ <li><a href="#" class="text-gray-400 hover:text-pink-400 transition">Поддержка</a></li>
599
+ </ul>
600
  </div>
601
  </div>
602
+
603
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
604
+ <p class="text-gray-500 mb-4 md:mb-0">
605
+ © 2023 Cosmic Explorers. Все права защищены.
606
+ </p>
607
+ <div class="flex space-x-6">
608
+ <a href="#" class="text-gray-500 hover:text-gray-300 transition">Условия</a>
609
+ <a href="#" class="text-gray-500 hover:text-gray-300 transition">Конфиденциальность</a>
610
+ <a href="#" class="text-gray-500 hover:text-gray-300 transition">Cookies</a>
611
+ </div>
612
  </div>
613
  </div>
614
  </footer>
615
+
616
  <script>
617
+ // Create starfield
 
 
 
 
 
618
  document.addEventListener('DOMContentLoaded', function() {
619
+ const starfield = document.getElementById('starfield');
620
+ const starsCount = 200;
621
+
622
+ for (let i = 0; i < starsCount; i++) {
623
+ const star = document.createElement('div');
624
+ star.classList.add('star');
625
+
626
+ // Random size between 1 and 3px
627
+ const size = Math.random() * 2 + 1;
628
+ star.style.width = `${size}px`;
629
+ star.style.height = `${size}px`;
630
+
631
+ // Random position
632
+ star.style.left = `${Math.random() * 100}%`;
633
+ star.style.top = `${Math.random() * 100}%`;
634
+
635
+ // Random animation duration
636
+ star.style.setProperty('--duration', `${Math.random() * 5 + 3}s`);
637
+
638
+ starfield.appendChild(star);
639
+ }
640
 
641
+ // Animate mission path
642
+ const path = document.querySelector('.mission-path');
643
+ if (path) {
644
+ setTimeout(() => {
645
+ path.style.strokeDashoffset = '0';
646
+ }, 500);
647
+ }
648
+
649
+ // Mobile menu toggle
650
+ const mobileMenuButton = document.querySelector('.md\\:hidden');
651
+ if (mobileMenuButton) {
652
+ mobileMenuButton.addEventListener('click', function() {
653
+ const navLinks = document.querySelector('.md\\:flex');
654
+ if (navLinks) {
655
+ navLinks.classList.toggle('hidden');
656
+ navLinks.classList.toggle('flex');
657
+ navLinks.classList.toggle('flex-col');
658
+ navLinks.classList.toggle('absolute');
659
+ navLinks.classList.toggle('top-20');
660
+ navLinks.classList.toggle('right-6');
661
+ navLinks.classList.toggle('bg-gray-900');
662
+ navLinks.classList.toggle('p-4');
663
+ navLinks.classList.toggle('rounded-lg');
664
+ navLinks.classList.toggle('border');
665
+ navLinks.classList.toggle('border-gray-800');
666
+ navLinks.classList.toggle('space-y-4');
667
+ navLinks.classList.toggle('space-x-0');
668
  }
669
  });
670
+ }
 
 
 
 
671
  });
672
  </script>
673
  <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>
prompts.txt CHANGED
@@ -2,4 +2,5 @@
2
  полностью измени дизайн
3
  сделай винтажный дизайн и логотип остальное не трогай
4
  сделай дизайн в стиле металл титан современный с эффектами а контент не трогай
5
- переделай всё на свой вкус
 
 
2
  полностью измени дизайн
3
  сделай винтажный дизайн и логотип остальное не трогай
4
  сделай дизайн в стиле металл титан современный с эффектами а контент не трогай
5
+ переделай всё на свой вкус
6
+ полностью придумай спроектируй сайт которого еще не существует тему дизайн логотип итд