ANTIMOLL commited on
Commit
ac37498
·
verified ·
1 Parent(s): 4597a18

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +452 -418
  2. prompts.txt +2 -1
index.html CHANGED
@@ -3,494 +3,528 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>СССР Очки - Ретро Линзы 60-х</title>
7
- <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
8
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <script src="https://cdn.tailwindcss.com"></script>
10
- <style>
11
- :root {
12
- --red: #CC2222;
13
- --gold: #FFD700;
14
- --vintage: #2F2F2F;
15
- --cream: #F5F5DC;
16
- }
17
-
18
- body {
19
- font-family: 'Roboto', sans-serif;
20
- background-color: var(--cream);
21
- margin: 0;
22
- color: #333;
23
- }
24
-
25
- .logo {
26
- animation: pulse 3s infinite;
27
- filter: drop-shadow(0 0 10px rgba(204, 34, 34, 0.7));
28
- }
29
-
30
- @keyframes pulse {
31
- 0% { transform: scale(1); }
32
- 50% { transform: scale(1.05); }
33
- 100% { transform: scale(1); }
34
- }
35
-
36
- .header {
37
- background: linear-gradient(135deg, var(--red) 0%, var(--vintage) 100%);
38
- padding: 15px;
39
- text-align: center;
40
- border-bottom: 3px solid var(--gold);
41
- position: relative;
42
- overflow: hidden;
43
  }
44
-
45
- .header::before {
46
- content: "";
47
- position: absolute;
48
- top: 0;
49
- left: 0;
50
- right: 0;
51
- bottom: 0;
52
- background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><text x="10" y="50" font-family="Arial" font-size="20" fill="rgba(255,255,255,0.05)">◭◮</text></svg>');
53
- opacity: 0.3;
54
  }
55
-
56
- .hero {
57
- background: rgba(245, 245, 220, 0.7);
58
- padding: 80px 20px;
59
- text-align: center;
60
- position: relative;
61
  }
62
-
63
- .hero::after {
64
- content: "";
65
  position: absolute;
66
- top: 0;
67
- left: 0;
68
- right: 0;
69
- bottom: 0;
70
- background: rgba(245, 245, 220, 0.7);
 
 
71
  }
72
-
73
- .hero-content {
74
- position: relative;
75
- z-index: 1;
 
 
 
76
  }
77
-
78
- .cta-button {
79
- background: var(--gold);
80
- color: var(--red) !important;
81
- padding: 12px 30px;
82
- border: none;
83
- font-size: 1.1em;
84
- font-weight: bold;
85
- cursor: pointer;
86
- transition: all 0.3s;
87
- text-decoration: none;
88
- display: inline-block;
89
- margin-top: 20px;
90
- border-radius: 30px;
91
- box-shadow: 0 4px 8px rgba(0,0,0,0.2);
92
  }
93
-
94
- .cta-button:hover {
95
- transform: translateY(-3px);
96
- box-shadow: 0 6px 12px rgba(0,0,0,0.3);
97
  }
98
-
99
- .product-card {
100
- border: 2px solid var(--red);
101
- padding: 20px;
102
- text-align: center;
103
- transition: all 0.3s;
104
- background: white;
105
- border-radius: 8px;
106
- box-shadow: 0 4px 6px rgba(0,0,0,0.1);
107
  }
108
-
109
- .product-card:hover {
110
- transform: translateY(-10px);
111
- box-shadow: 0 10px 20px rgba(0,0,0,0.2);
112
  }
113
-
114
- .gallery {
115
- padding: 40px 20px;
116
  position: relative;
117
  }
118
-
119
- .gallery::before {
120
- content: "";
121
  position: absolute;
122
- top: 0;
123
  left: 0;
124
- right: 0;
125
- bottom: 0;
126
- background: rgba(0,0,0,0.03);
 
127
  }
128
-
129
- .gallery img {
130
  width: 100%;
131
- height: 250px;
132
- object-fit: cover;
133
- filter: sepia(0.4) contrast(1.1);
134
- border: 3px solid var(--gold);
135
- transition: all 0.3s;
136
- border-radius: 4px;
137
  }
138
-
139
- .gallery img:hover {
140
- filter: sepia(0.2) contrast(1.2);
141
- transform: scale(1.02);
142
  }
143
-
144
- .newsletter {
145
- background: linear-gradient(135deg, var(--vintage) 0%, #1a1a1a 100%);
146
- padding: 40px 20px;
147
- text-align: center;
148
- color: white;
149
- position: relative;
150
- overflow: hidden;
151
  }
152
-
153
- .newsletter::before {
154
- content: "";
155
- position: absolute;
156
- top: 0;
157
- left: 0;
158
- right: 0;
159
- bottom: 0;
160
- background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><text x="10" y="50" font-family="Arial" font-size="20" fill="rgba(255,215,0,0.05)">СССР</text></svg>');
161
- opacity: 0.3;
162
  }
163
-
164
- input[type="email"] {
165
- padding: 12px 15px;
166
- width: 100%;
167
- max-width: 400px;
168
- margin: 15px auto;
169
- border: 2px solid var(--gold);
170
- border-radius: 30px;
171
- font-size: 1em;
172
- outline: none;
173
  }
174
-
175
  .mobile-menu {
176
- display: none;
177
- position: fixed;
178
- bottom: 20px;
179
- left: 50%;
180
- transform: translateX(-50%);
181
- background: var(--red);
182
- border-radius: 30px;
183
- padding: 10px;
184
- box-shadow: 0 4px 12px rgba(0,0,0,0.3);
185
- z-index: 100;
186
- }
187
-
188
- .mobile-menu a {
189
- color: white;
190
- margin: 0 10px;
191
- font-size: 1.2em;
192
- }
193
-
194
- @media (max-width: 768px) {
195
- .header h1 {
196
- font-size: 1.8em;
197
- }
198
-
199
- .hero {
200
- padding: 60px 20px;
201
- }
202
-
203
- .features {
204
- grid-template-columns: 1fr;
205
- gap: 20px;
206
- }
207
-
208
- .mobile-menu {
209
- display: flex;
210
- }
211
-
212
- .gallery {
213
- grid-template-columns: 1fr;
214
- }
215
- }
216
-
217
- @media (min-width: 769px) and (max-width: 1024px) {
218
- .features {
219
- grid-template-columns: repeat(2, 1fr);
220
- }
221
- }
222
-
223
- .floating {
224
- animation: floating 3s ease-in-out infinite;
225
- }
226
-
227
- @keyframes floating {
228
- 0% { transform: translateY(0px); }
229
- 50% { transform: translateY(-10px); }
230
- 100% { transform: translateY(0px); }
231
- }
232
-
233
- .hammer-sickle {
234
- font-size: 1.5em;
235
- margin: 0 5px;
236
- color: var(--gold);
237
  }
238
-
239
-
240
-
241
- .colors-container {
242
- margin: 30px 0;
243
- display: flex;
244
- flex-wrap: wrap;
245
- justify-content: center;
246
- max-width: 600px;
247
- margin-left: auto;
248
- margin-right: auto;
249
  }
250
  </style>
251
  </head>
252
- <body>
253
- <header class="header">
254
- <div class="logo">
255
- <h1 class="text-3xl md:text-4xl font-bold font-serif text-white">
256
- <span class="hammer-sickle">☭</span> СССР ОЧКИ 1960 <span class="hammer-sickle"></span>
257
- </h1>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
258
  </div>
259
  </header>
260
 
261
- <section class="hero">
262
- <div class="hero-content">
263
- <h2 class="text-2xl md:text-3xl font-bold mb-4" style="color: var(--red);">Смотри на мир через линзы истории</h2>
264
- <p class="text-lg md:text-xl mb-6">Оригинальные оправы из СССР с линзами ручной окраски</p>
265
- <a href="#colors" class="cta-button">
266
- <i class="fas fa-glasses mr-2"></i> ВЫБРАТЬ СВОЙ ЦВЕТ
267
- </a>
268
-
269
- <!-- Добавленный блок с цветами линз -->
270
- <div id="colors" class="colors-container">
271
- <div class="lens-color active" style="background: #4a6fa5;" title="Синий"></div>
272
- <div class="lens-color" style="background: #8b4513;" title="Коричневый"></div>
273
- <div class="lens-color" style="background: #228b22;" title="Зеленый"></div>
274
- <div class="lens-color" style="background: #ff6347;" title="Красный"></div>
275
- <div class="lens-color" style="background: #9370db;" title="Фиолетовый"></div>
276
- <div class="lens-color" style="background: #ffd700;" title="Золотой"></div>
277
- <div class="lens-color" style="background: #708090;" title="Серый"></div>
278
- <div class="lens-color" style="background: #ff69b4;" title="Розовый"></div>
279
- <div class="lens-color" style="background: #40e0d0;" title="Бирюзовый"></div>
280
- <div class="lens-color" style="background: #000000;" title="Черный"></div>
281
  </div>
282
 
283
- <div class="mt-8 floating">
284
- <i class="fas fa-angle-double-down text-3xl text-red-600"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
285
  </div>
286
  </div>
287
  </section>
288
 
289
- <section class="py-12 px-4">
 
290
  <div class="max-w-6xl mx-auto">
291
- <h2 class="text-3xl font-bold text-center mb-10" style="color: var(--red);">
292
- <i class="fas fa-star mr-2" style="color: var(--gold);"></i> Почему выбирают нас
293
- </h2>
294
- <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
295
- <div class="product-card">
296
- <div class="text-4xl mb-4" style="color: var(--red);">
297
- <i class="fas fa-certificate"></i>
 
 
 
 
 
 
 
298
  </div>
299
- <h3 class="text-xl font-bold mb-2">Аутентичность</h3>
300
- <p class="text-gray-700">Оправы 1960-х годов с архивных складов</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
301
  </div>
302
- <div class="product-card">
303
- <div class="text-4xl mb-4" style="color: var(--red);">
304
- <i class="fas fa-palette"></i>
 
 
305
  </div>
306
- <h3 class="text-xl font-bold mb-2">Индивидуальность</h3>
307
- <p class="text-gray-700">Ручная окраска линз пигментом </p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
308
  </div>
309
- <div class="product-card">
310
- <div class="text-4xl mb-4" style="color: var(--red);">
311
- <i class="fas fa-crown"></i>
 
 
312
  </div>
313
- <h3 class="text-xl font-bold mb-2">Эксклюзив</h3>
314
- <p class="text-gray-700">Только 10 экземпляров каждой модели</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
315
  </div>
316
  </div>
317
  </div>
318
  </section>
319
 
320
- <section id="catalog" class="gallery">
 
321
  <div class="max-w-6xl mx-auto">
322
- <h2 class="text-3xl font-bold text-center mb-10" style="color: var(--red);">
323
- <i class="fas fa-images mr-2" style="color: var(--gold);"></i> КАТАЛОГ
324
- </h2>
325
- <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
326
- <div class="group relative overflow-hidden rounded-lg">
327
- <img src="/glasses1.jpg" alt="Очки модель артийный'" class="w-full h-64 md:h-80 object-cover">
328
- <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
329
- <div class="text-center text-white p-4">
330
- <h3 class="text-xl font-bold">"Партийный"</h3>
331
- <p class="mt-2">Официальный стиль партийных работников</p>
332
- <button class="mt-4 px-6 py-2 bg-red-600 text-white rounded-full">Подробнее</button>
 
 
 
 
333
  </div>
334
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
335
  </div>
336
- <div class="group relative overflow-hidden rounded-lg">
337
- <img src="/glasses3.jpg" alt="Очки модель 'Космос'" class="w-full h-64 md:h-80 object-cover">
338
- <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
339
- <div class="text-center text-white p-4">
340
- <h3 class="text-xl font-bold">"Космос"</h3>
341
- <p class="mt-2">Вдохновлено эпохой космических достижений</p>
342
- <button class="mt-4 px-6 py-2 bg-red-600 text-white rounded-full">Подробнее</button>
 
 
343
  </div>
344
  </div>
345
- </div>
346
- <div class="group relative overflow-hidden rounded-lg">
347
- <img src="/glasses2.jpg" alt="Очки модель 'Стиляга'" class="w-full h-64 md:h-80 object-cover">
348
- <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
349
- <div class="text-center text-white p-4">
350
- <h3 class="text-xl font-bold">"Стиляга"</h3>
351
- <p class="mt-2">Яркий акц��нт для поклонников западной моды</p>
352
- <button class="mt-4 px-6 py-2 bg-red-600 text-white rounded-full">Подробнее</button>
353
  </div>
354
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
355
  </div>
356
  </div>
357
  </div>
358
  </section>
359
 
360
- <section class="newsletter">
361
- <div class="max-w-4xl mx-auto relative z-10">
362
- <p class="text-lg mb-6">Подпишись на рассылку и получи гид по стилю 60-х</p>
363
- <div class="flex flex-col md:flex-row items-center justify-center">
364
- <input type="email" placeholder="Ваш e-mail" class="mb-4 md:mb-0 md:mr-4">
365
- <button class="cta-button">
366
- <i class="fas fa-envelope mr-2"></i> ПОДПИСАТЬСЯ
367
- </button>
368
- </div>
369
- </div>
370
- </section>
371
-
372
- <footer class="bg-gray-900 text-white py-8 px-4">
373
- <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
374
- <div>
375
- <h3 class="text-xl font-bold mb-4" style="color: var(--gold);">СССР Очки</h3>
376
- <p>Возвращаем моду 60-х в современный мир</p>
377
- <div class="mt-4 flex space-x-4">
378
- <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-vk fa-lg"></i></a>
379
- <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-telegram fa-lg"></i></a>
380
- <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram fa-lg"></i></a>
381
  </div>
382
  </div>
383
- <div>
384
- <h3 class="text-xl font-bold mb-4" style="color: var(--gold);">Контакты</h3>
385
- <p><i class="fas fa-map-marker-alt mr-2"></i> Москва, ул. Берзарина, 34 стр.12</p>
386
- <p class="mt-2"><i class="fas fa-phone mr-2"></i> +7 (926) 323-68-86</p>
387
- <p class="mt-2"><i class="fas fa-envelope mr-2"></i> info@xoptica.ru</p>
388
- </div>
389
- <div>
390
- <h3 class="text-xl font-bold mb-4" style="color: var(--gold);">Часы работы</h3>
391
- <p>Пн-Чт: 08:00 - 16:00</p>
392
- <p class="mt-2">Вс: 09:00 - 14:00</p>
393
- </div>
394
- </div>
395
- <div class="max-w-6xl mx-auto mt-8 pt-4 border-t border-gray-700 text-center text-gray-400">
396
- <p>© 2025 xoptica.ru СССР Очки. Все права защищены.</p>
397
  </div>
398
  </footer>
399
 
400
- <div class="mobile-menu">
401
- <a href="#"><i class="fas fa-home"></i></a>
402
- <a href="#catalog"><i class="fas fa-glasses"></i></a>
403
- <a href="#"><i class="fas fa-shopping-cart"></i></a>
404
- <a href="#"><i class="fas fa-user"></i></a>
405
- </div>
406
-
407
  <script>
408
- // Анимация при скролле
409
- document.addEventListener('DOMContentLoaded', function() {
410
- // Плавная прокрутка
411
- document.querySelectorAll('a[href^="#"]').forEach(anchor => {
412
- anchor.addEventListener('click', function(e) {
413
- e.preventDefault();
414
- document.querySelector(this.getAttribute('href')).scrollIntoView({
415
- behavior: 'smooth'
416
- });
417
- });
 
 
 
418
  });
419
-
420
- // Анимация карточек
421
- const cards = document.querySelectorAll('.product-card');
422
- cards.forEach(card => {
423
- card.addEventListener('mouseover', () => {
424
- card.style.transform = 'rotate(-2deg)';
425
- });
426
 
427
- card.addEventListener('mouseout', () => {
428
- card.style.transform = 'none';
429
- });
430
- });
431
-
432
- // Обработка формы
433
- document.querySelector('.newsletter button').addEventListener('click', () => {
434
- const email = document.querySelector('.newsletter input').value;
435
- if(email.includes('@')) {
436
- Swal.fire({
437
- title: 'Спасибо!',
438
- text: 'Чек-лист "Стиль 60-х" уже летит к вам!',
439
- icon: 'success',
440
- confirmButtonColor: '#CC2222'
441
- });
442
- } else {
443
- Swal.fire({
444
- title: 'Ошибка',
445
- text: 'Пожалуйста, введите корректный email',
446
- icon: 'error',
447
- confirmButtonColor: '#CC2222'
448
  });
449
  }
450
  });
451
-
452
- // Анимация появления элементов при скролле
453
- const observer = new IntersectionObserver((entries) => {
454
- entries.forEach(entry => {
455
- if(entry.isIntersecting) {
456
- entry.target.classList.add('animate__animated', 'animate__fadeInUp');
457
- }
458
- });
459
- }, { threshold: 0.1 });
460
-
461
- document.querySelectorAll('.product-card, .gallery img, .newsletter').forEach(el => {
462
- observer.observe(el);
463
- });
464
-
465
- // Выбор цвета линз
466
- const colorLenses = document.querySelectorAll('.lens-color');
467
- colorLenses.forEach(lens => {
468
- lens.addEventListener('click', function() {
469
- // Удаляем активный класс у всех линз
470
- colorLenses.forEach(l => l.classList.remove('active'));
471
- // Добавляем активный класс текущей линзе
472
- this.classList.add('active');
473
-
474
- // Можно добавить здесь логику для изменения цвета линз в галерее
475
- // Например:
476
- // const color = this.style.backgroundColor;
477
- // document.querySelectorAll('.gallery img').forEach(img => {
478
- // img.style.filter = `sepia(0.4) contrast(1.1) hue-rotate(...)`;
479
- // });
480
- });
481
- });
482
  });
483
-
484
- // Добавляем SweetAlert для красивых уведомлений
485
- const SwalScript = document.createElement('script');
486
- SwalScript.src = 'https://cdn.jsdelivr.net/npm/sweetalert2@11';
487
- document.head.appendChild(SwalScript);
488
-
489
- // Добавляем анимации
490
- const animateCSS = document.createElement('link');
491
- animateCSS.href = 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css';
492
- animateCSS.rel = 'stylesheet';
493
- document.head.appendChild(animateCSS);
494
  </script>
495
- <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/ussroptical5" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
496
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>БУТЫЛЁК— Digital с характером</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
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ vodka: {
15
+ blue: '#0066CC',
16
+ dark: '#0A2540',
17
+ light: '#F0F8FF'
18
+ },
19
+ accent: {
20
+ gold: '#FfD800',
21
+ green: '#1A3A2A'
22
+ }
23
+ },
24
+ fontFamily: {
25
+ sans: ['Inter', 'sans-serif'],
26
+ display: ['Bebas Neue', 'sans-serif']
27
+ }
28
+ }
29
+ }
 
 
 
 
 
 
 
 
 
 
 
30
  }
31
+ </script>
32
+ <style>
33
+ @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;600;700&display=swap');
34
+
35
+ .logo-animation {
36
+ animation: logoFloat 3s ease-in-out infinite alternate;
 
 
 
 
37
  }
38
+
39
+ @keyframes logoFloat {
40
+ 0% { transform: translateY(0) rotate(-5deg); }
41
+ 100% { transform: translateY(-10px) rotate(5deg); }
 
 
42
  }
43
+
44
+ .bottle-effect {
 
45
  position: absolute;
46
+ width: 150px;
47
+ height: 300px;
48
+ background: rgba(255,255,255,0.08);
49
+ transform: skewX(-15deg) rotate(10deg);
50
+ filter: blur(20px);
51
+ animation: bottleFlow 12s infinite linear;
52
+ z-index: 0;
53
  }
54
+
55
+ @keyframes bottleFlow {
56
+ 0% { left: -30%; top: 10%; opacity: 0; }
57
+ 20% { opacity: 0.3; }
58
+ 50% { left: 70%; top: 40%; }
59
+ 80% { opacity: 0.3; }
60
+ 100% { left: -30%; top: 10%; opacity: 0; }
61
  }
62
+
63
+ .gallery-item {
64
+ transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
65
+ transform-style: preserve-3d;
 
 
 
 
 
 
 
 
 
 
 
66
  }
67
+
68
+ .gallery-item:hover {
69
+ transform: perspective(1000px) rotateX(5deg) translateY(-10px);
70
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
71
  }
72
+
73
+ .overlay {
74
+ transition: all 0.4s ease;
75
+ transform: translateY(100%);
 
 
 
 
 
76
  }
77
+
78
+ .gallery-item:hover .overlay {
79
+ transform: translateY(0);
 
80
  }
81
+
82
+ .nav-link {
 
83
  position: relative;
84
  }
85
+
86
+ .nav-link::after {
87
+ content: '';
88
  position: absolute;
89
+ bottom: -5px;
90
  left: 0;
91
+ width: 0;
92
+ height: 2px;
93
+ background: #FFD100;
94
+ transition: width 0.3s ease;
95
  }
96
+
97
+ .nav-link:hover::after {
98
  width: 100%;
 
 
 
 
 
 
99
  }
100
+
101
+ .hamburger {
102
+ transition: all 0.3s ease;
 
103
  }
104
+
105
+ .hamburger.active span:nth-child(1) {
106
+ transform: rotate(45deg) translate(5px, 5px);
 
 
 
 
 
107
  }
108
+
109
+ .hamburger.active span:nth-child(2) {
110
+ opacity: 0;
 
 
 
 
 
 
 
111
  }
112
+
113
+ .hamburger.active span:nth-child(3) {
114
+ transform: rotate(-45deg) translate(7px, -6px);
 
 
 
 
 
 
 
115
  }
116
+
117
  .mobile-menu {
118
+ max-height: 0;
119
+ overflow: hidden;
120
+ transition: max-height 0.5s ease;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
121
  }
122
+
123
+ .mobile-menu.open {
124
+ max-height: 500px;
 
 
 
 
 
 
 
 
125
  }
126
  </style>
127
  </head>
128
+ <body class="bg-vodka-dark text-vodka-light font-sans">
129
+ <!-- Hero Section -->
130
+ <header class="relative min-h-screen overflow-hidden bg-gradient-to-br from-vodka-blue to-vodka-dark px-6 pt-8">
131
+ <div class="bottle-effect"></div>
132
+ <div class="bottle-effect" style="animation-delay: 4s;"></div>
133
+
134
+ <!-- Navigation -->
135
+ <nav class="relative z-10 flex items-center justify-between mb-16 md:mb-24">
136
+ <!-- Animated Logo -->
137
+ <div class="logo-animation">
138
+ <h1 class="text-4xl md:text-5xl font-display font-bold text-accent-gold">
139
+ <span class="inline-block">Б</span>
140
+ <span class="inline-block">У</span>
141
+ <span class="inline-block">Т</span>
142
+ <span class="inline-block">Ы</span>
143
+ <span class="inline-block">Л</span>
144
+ <span class="inline-block">Ё</span>
145
+ <span class="inline-block">К</span>
146
+ </h1>
147
+ </div>
148
+
149
+ <!-- Desktop Menu -->
150
+ <ul class="hidden md:flex space-x-8">
151
+ <li><a href="#services" class="nav-link text-lg font-medium">Услуги</a></li>
152
+ <li><a href="#catalog" class="nav-link text-lg font-medium">Портфолио</a></li>
153
+ <li><a href="#contact" class="nav-link text-lg font-medium">Контакты</a></li>
154
+ </ul>
155
+
156
+ <!-- Mobile Menu Button -->
157
+ <button id="menu-btn" class="md:hidden hamburger focus:outline-none">
158
+ <span class="block w-6 h-0.5 bg-accent-gold mb-1.5 transition-all"></span>
159
+ <span class="block w-6 h-0.5 bg-accent-gold mb-1.5 transition-all"></span>
160
+ <span class="block w-6 h-0.5 bg-accent-gold transition-all"></span>
161
+ </button>
162
+ </nav>
163
+
164
+ <!-- Mobile Menu -->
165
+ <div id="mobile-menu" class="mobile-menu md:hidden relative z-10">
166
+ <ul class="py-4 space-y-4">
167
+ <li><a href="#services" class="block py-2 text-xl font-medium">Услуги</a></li>
168
+ <li><a href="#catalog" class="block py-2 text-xl font-medium">Портфолио</a></li>
169
+ <li><a href="#contact" class="block py-2 text-xl font-medium">Контакты</a></li>
170
+ </ul>
171
+ </div>
172
+
173
+ <!-- Hero Content -->
174
+ <div class="relative z-10 mt-24 md:mt-32 max-w-4xl">
175
+ <h2 class="text-4xl md:text-6xl font-display font-bold leading-tight mb-6">
176
+ Digital-решения,<br>
177
+ <span class="text-accent-gold">от которых захмелеет</span><br>
178
+ ваш конкурент
179
+ </h2>
180
+ <p class="text-lg md:text-xl opacity-90 mb-10">
181
+ Создаём крепкие digital-продукты с выдержкой и характером.
182
+ Как хороший виски — насыщенный вкус и долгое послевкусие.
183
+ </p>
184
+ <div class="flex flex-col sm:flex-row gap-4">
185
+ <a href="#contact" class="px-8 py-4 bg-accent-gold text-vodka-dark font-bold rounded-lg hover:bg-opacity-90 transition text-center">
186
+ Обсудить проект
187
+ </a>
188
+ <a href="#catalog" class="px-8 py-4 border-2 border-accent-gold text-accent-gold font-bold rounded-lg hover:bg-accent-gold hover:bg-opacity-10 transition text-center">
189
+ Наши работы
190
+ </a>
191
+ </div>
192
+ </div>
193
+
194
+ <!-- Scroll Indicator -->
195
+ <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 z-10 animate-bounce">
196
+ <a href="#catalog" class="block w-8 h-8 border-r-2 border-b-2 border-accent-gold transform rotate-45"></a>
197
  </div>
198
  </header>
199
 
200
+ <!-- Portfolio Section -->
201
+ <section id="catalog" class="py-20 px-6">
202
+ <div class="max-w-6xl mx-auto">
203
+ <div class="text-center mb-16">
204
+ <h2 class="text-3xl md:text-4xl font-display font-bold mb-4">
205
+ Наше <span class="text-accent-gold">"Выдержанное"</span> Портфолио
206
+ </h2>
207
+ <p class="text-lg max-w-2xl mx-auto opacity-80">
208
+ Каждый проект как бутылка коллекционного алкоголя: уникальный вкус,
209
+ изысканное оформление и только премиальные ингредиенты.
210
+ </p>
 
 
 
 
 
 
 
 
 
211
  </div>
212
 
213
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
214
+ <!-- Project 1 -->
215
+ <div class="gallery-item relative rounded-xl overflow-hidden bg-vodka-blue aspect-square">
216
+ <img src="https://images.unsplash.com/photo-1556740738-b6a17113d0ad?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
217
+ alt="Проект 1" class="w-full h-full object-cover">
218
+ <div class="overlay absolute inset-0 bg-gradient-to-t from-vodka-dark/90 via-transparent to-transparent p-6 flex flex-col justify-end">
219
+ <h3 class="text-2xl font-bold mb-2">Ледяной Лендинг</h3>
220
+ <p class="text-accent-gold mb-4">Чистый дизайн как кристалл льда</p>
221
+ <a href="#" class="text-accent-gold font-medium flex items-center">
222
+ Подробнее <i class="fas fa-arrow-right ml-2"></i>
223
+ </a>
224
+ </div>
225
+ </div>
226
+
227
+ <!-- Project 2 -->
228
+ <div class="gallery-item relative rounded-xl overflow-hidden bg-vodka-blue aspect-square">
229
+ <img src="https://images.unsplash.com/photo-1556740738-b6a17113d0ad?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
230
+ alt="Проект 2" class="w-full h-full object-cover">
231
+ <div class="overlay absolute inset-0 bg-gradient-to-t from-vodka-dark/90 via-transparent to-transparent p-6 flex flex-col justify-end">
232
+ <h3 class="text-2xl font-bold mb-2">Дистилляция Бренда</h3>
233
+ <p class="text-accent-gold mb-4">Крепкая айдентика</p>
234
+ <a href="#" class="text-accent-gold font-medium flex items-center">
235
+ Подробнее <i class="fas fa-arrow-right ml-2"></i>
236
+ </a>
237
+ </div>
238
+ </div>
239
+
240
+ <!-- Project 3 -->
241
+ <div class="gallery-item relative rounded-xl overflow-hidden bg-vodka-blue aspect-square">
242
+ <img src="https://images.unsplash.com/photo-1556740738-b6a17113d0ad?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
243
+ alt="Проект 3" class="w-full h-full object-cover">
244
+ <div class="overlay absolute inset-0 bg-gradient-to-t from-vodka-dark/90 via-transparent to-transparent p-6 flex flex-col justify-end">
245
+ <h3 class="text-2xl font-bold mb-2">Виски-Магазин</h3>
246
+ <p class="text-accent-gold mb-4">E-commerce с характером</p>
247
+ <a href="#" class="text-accent-gold font-medium flex items-center">
248
+ Подробне�� <i class="fas fa-arrow-right ml-2"></i>
249
+ </a>
250
+ </div>
251
+ </div>
252
+
253
+ <!-- Project 4 -->
254
+ <div class="gallery-item relative rounded-xl overflow-hidden bg-vodka-blue aspect-square">
255
+ <img src="https://images.unsplash.com/photo-1556740738-b6a17113d0ad?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
256
+ alt="Проект 4" class="w-full h-full object-cover">
257
+ <div class="overlay absolute inset-0 bg-gradient-to-t from-vodka-dark/90 via-transparent to-transparent p-6 flex flex-col justify-end">
258
+ <h3 class="text-2xl font-bold mb-2">Барная Карта</h3>
259
+ <p class="text-accent-gold mb-4">Интерактивное меню</p>
260
+ <a href="#" class="text-accent-gold font-medium flex items-center">
261
+ Подробнее <i class="fas fa-arrow-right ml-2"></i>
262
+ </a>
263
+ </div>
264
+ </div>
265
+
266
+ <!-- Project 5 -->
267
+ <div class="gallery-item relative rounded-xl overflow-hidden bg-vodka-blue aspect-square">
268
+ <img src="https://images.unsplash.com/photo-1556740738-b6a17113d0ad?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
269
+ alt="Проект 5" class="w-full h-full object-cover">
270
+ <div class="overlay absolute inset-0 bg-gradient-to-t from-vodka-dark/90 via-transparent to-transparent p-6 flex flex-col justify-end">
271
+ <h3 class="text-2xl font-bold mb-2">Коктейльное Приложение</h3>
272
+ <p class="text-accent-gold mb-4">Мобильный миксолог</p>
273
+ <a href="#" class="text-accent-gold font-medium flex items-center">
274
+ Подробнее <i class="fas fa-arrow-right ml-2"></i>
275
+ </a>
276
+ </div>
277
+ </div>
278
+
279
+ <!-- Project 6 -->
280
+ <div class="gallery-item relative rounded-xl overflow-hidden bg-vodka-blue aspect-square">
281
+ <img src="https://images.unsplash.com/photo-1556740738-b6a17113d0ad?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
282
+ alt="Проект 6" class="w-full h-full object-cover">
283
+ <div class="overlay absolute inset-0 bg-gradient-to-t from-vodka-dark/90 via-transparent to-transparent p-6 flex flex-col justify-end">
284
+ <h3 class="text-2xl font-bold mb-2">Винная Коллекция</h3>
285
+ <p class="text-accent-gold mb-4">Элегантный каталог</p>
286
+ <a href="#" class="text-accent-gold font-medium flex items-center">
287
+ Подробнее <i class="fas fa-arrow-right ml-2"></i>
288
+ </a>
289
+ </div>
290
+ </div>
291
  </div>
292
  </div>
293
  </section>
294
 
295
+ <!-- Services Section -->
296
+ <section id="services" class="py-20 px-6 bg-vodka-light text-vodka-dark">
297
  <div class="max-w-6xl mx-auto">
298
+ <div class="text-center mb-16">
299
+ <h2 class="text-3xl md:text-4xl font-display font-bold mb-4">
300
+ Наши <span class="text-vodka-blue">"Крепкие"</span> Услуги
301
+ </h2>
302
+ <p class="text-lg max-w-2xl mx-auto opacity-80">
303
+ Мы предлагаем полный цикл digital-дистилляции — от идеи до готового продукта.
304
+ </p>
305
+ </div>
306
+
307
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
308
+ <!-- Service 1 -->
309
+ <div class="service-card bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition">
310
+ <div class="text-4xl text-accent-gold mb-4">
311
+ <i class="fas fa-laptop-code"></i>
312
  </div>
313
+ <h3 class="text-2xl font-bold mb-3">🥃 Крепкие сайты</h3>
314
+ <p class="mb-4 opacity-90">
315
+ Надёжность выдержанного коньяка. Современные технологии и проверенные решения.
316
+ </p>
317
+ <ul class="space-y-2 text-vodka-blue">
318
+ <li class="flex items-center">
319
+ <i class="fas fa-check-circle mr-2 text-accent-gold"></i>
320
+ Корпоративные сайты
321
+ </li>
322
+ <li class="flex items-center">
323
+ <i class="fas fa-check-circle mr-2 text-accent-gold"></i>
324
+ Интернет-магазины
325
+ </li>
326
+ <li class="flex items-center">
327
+ <i class="fas fa-check-circle mr-2 text-accent-gold"></i>
328
+ Лендинги
329
+ </li>
330
+ </ul>
331
  </div>
332
+
333
+ <!-- Service 2 -->
334
+ <div class="service-card bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition">
335
+ <div class="text-4xl text-accent-gold mb-4">
336
+ <i class="fas fa-mobile-alt"></i>
337
  </div>
338
+ <h3 class="text-2xl font-bold mb-3">🧊 Ледяной UX</h3>
339
+ <p class="mb-4 opacity-90">
340
+ Кристальная ясность интерфейсов. Интуитивно понятные и удобные решения.
341
+ </p>
342
+ <ul class="space-y-2 text-vodka-blue">
343
+ <li class="flex items-center">
344
+ <i class="fas fa-check-circle mr-2 text-accent-gold"></i>
345
+ Прототипирование
346
+ </li>
347
+ <li class="flex items-center">
348
+ <i class="fas fa-check-circle mr-2 text-accent-gold"></i>
349
+ User Research
350
+ </li>
351
+ <li class="flex items-center">
352
+ <i class="fas fa-check-circle mr-2 text-accent-gold"></i>
353
+ Тестирование
354
+ </li>
355
+ </ul>
356
  </div>
357
+
358
+ <!-- Service 3 -->
359
+ <div class="service-card bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition">
360
+ <div class="text-4xl text-accent-gold mb-4">
361
+ <i class="fas fa-paint-brush"></i>
362
  </div>
363
+ <h3 class="text-2xl font-bold mb-3">🍸 Брендинг с изюминкой</h3>
364
+ <p class="mb-4 opacity-90">
365
+ Уникальный стиль как у коллекционного алкоголя. Запоминающаяся идентичность.
366
+ </p>
367
+ <ul class="space-y-2 text-vodka-blue">
368
+ <li class="flex items-center">
369
+ <i class="fas fa-check-circle mr-2 text-accent-gold"></i>
370
+ Логотипы
371
+ </li>
372
+ <li class="flex items-center">
373
+ <i class="fas fa-check-circle mr-2 text-accent-gold"></i>
374
+ Фирменный стиль
375
+ </li>
376
+ <li class="flex items-center">
377
+ <i class="fas fa-check-circle mr-2 text-accent-gold"></i>
378
+ Упаковка
379
+ </li>
380
+ </ul>
381
  </div>
382
  </div>
383
  </div>
384
  </section>
385
 
386
+ <!-- Contact Section -->
387
+ <section id="contact" class="py-20 px-6 bg-vodka-blue text-vodka-light">
388
  <div class="max-w-6xl mx-auto">
389
+ <div class="text-center mb-16">
390
+ <h2 class="text-3xl md:text-4xl font-display font-bold mb-4">
391
+ Готовы <span class="text-accent-gold">"Поднять бокал"</span> за ваш проект?
392
+ </h2>
393
+ <p class="text-lg max-w-2xl mx-auto opacity-90">
394
+ Оставьте заявку, и мы обсудим ваш проект за бокалом (виртуального) виски.
395
+ </p>
396
+ </div>
397
+
398
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
399
+ <div class="contact-form bg-vodka-dark p-8 rounded-xl shadow-lg">
400
+ <form class="space-y-6">
401
+ <div>
402
+ <label for="name" class="block mb-2 font-medium">Ваше имя</label>
403
+ <input type="text" id="name" class="w-full px-4 py-3 bg-vodka-dark border border-vodka-light/20 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-gold">
404
  </div>
405
+
406
+ <div>
407
+ <label for="email" class="block mb-2 font-medium">Email</label>
408
+ <input type="email" id="email" class="w-full px-4 py-3 bg-vodka-dark border border-vodka-light/20 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-gold">
409
+ </div>
410
+
411
+ <div>
412
+ <label for="message" class="block mb-2 font-medium">Сообщение</label>
413
+ <textarea id="message" rows="5" class="w-full px-4 py-3 bg-vodka-dark border border-vodka-light/20 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-gold"></textarea>
414
+ </div>
415
+
416
+ <button type="submit" class="w-full py-4 bg-accent-gold text-vodka-dark font-bold rounded-lg hover:bg-opacity-90 transition">
417
+ Отправить заявку
418
+ </button>
419
+ </form>
420
  </div>
421
+
422
+ <div class="contact-info space-y-8">
423
+ <div class="flex items-start">
424
+ <div class="text-2xl text-accent-gold mr-4 mt-1">
425
+ <i class="fas fa-map-marker-alt"></i>
426
+ </div>
427
+ <div>
428
+ <h3 class="text-xl font-bold mb-2">Наш офис</h3>
429
+ <p>Москва, ул. Барная, 12</p>
430
  </div>
431
  </div>
432
+
433
+ <div class="flex items-start">
434
+ <div class="text-2xl text-accent-gold mr-4 mt-1">
435
+ <i class="fas fa-envelope"></i>
436
+ </div>
437
+ <div>
438
+ <h3 class="text-xl font-bold mb-2">Email</h3>
439
+ <p>hello@butylek.ru</p>
440
  </div>
441
  </div>
442
+
443
+ <div class="flex items-start">
444
+ <div class="text-2xl text-accent-gold mr-4 mt-1">
445
+ <i class="fas fa-phone-alt"></i>
446
+ </div>
447
+ <div>
448
+ <h3 class="text-xl font-bold mb-2">Телефон</h3>
449
+ <p>+7 (999) 123-45-67</p>
450
+ </div>
451
+ </div>
452
+
453
+ <div class="social-links flex space-x-6 pt-4">
454
+ <a href="#" class="w-12 h-12 rounded-full bg-vodka-dark flex items-center justify-center text-xl hover:bg-accent-gold hover:text-vodka-dark transition">
455
+ <i class="fab fa-telegram"></i>
456
+ </a>
457
+ <a href="#" class="w-12 h-12 rounded-full bg-vodka-dark flex items-center justify-center text-xl hover:bg-accent-gold hover:text-vodka-dark transition">
458
+ <i class="fab fa-whatsapp"></i>
459
+ </a>
460
+ <a href="#" class="w-12 h-12 rounded-full bg-vodka-dark flex items-center justify-center text-xl hover:bg-accent-gold hover:text-vodka-dark transition">
461
+ <i class="fab fa-behance"></i>
462
+ </a>
463
+ <a href="#" class="w-12 h-12 rounded-full bg-vodka-dark flex items-center justify-center text-xl hover:bg-accent-gold hover:text-vodka-dark transition">
464
+ <i class="fab fa-dribbble"></i>
465
+ </a>
466
+ </div>
467
  </div>
468
  </div>
469
  </div>
470
  </section>
471
 
472
+ <!-- Footer -->
473
+ <footer class="py-8 px-6 bg-vodka-dark text-center text-vodka-light/70">
474
+ <div class="max-w-6xl mx-auto">
475
+ <div class="flex flex-col md:flex-row justify-between items-center mb-6">
476
+ <div class="logo-animation mb-4 md:mb-0">
477
+ <h2 class="text-3xl font-display font-bold text-accent-gold">
478
+ XOPTICA
479
+ </h2>
480
+ </div>
481
+
482
+ <div class="flex space-x-6">
483
+ <a href="#" class="hover:text-accent-gold transition">Политика конфиденциальности</a>
484
+ <a href="#" class="hover:text-accent-gold transition">Условия использования</a>
 
 
 
 
 
 
 
 
485
  </div>
486
  </div>
487
+
488
+ <p class="text-sm">
489
+ © 2024 Бутылёк. Все права защищены. Любое копирование материалов без разрешения запрещено.
490
+ </p>
 
 
 
 
 
 
 
 
 
 
491
  </div>
492
  </footer>
493
 
494
+ <!-- Mobile Menu Script -->
 
 
 
 
 
 
495
  <script>
496
+ const menuBtn = document.getElementById('menu-btn');
497
+ const mobileMenu = document.getElementById('mobile-menu');
498
+
499
+ menuBtn.addEventListener('click', () => {
500
+ menuBtn.classList.toggle('active');
501
+ mobileMenu.classList.toggle('open');
502
+ });
503
+
504
+ // Close menu when clicking on a link
505
+ document.querySelectorAll('#mobile-menu a').forEach(link => {
506
+ link.addEventListener('click', () => {
507
+ menuBtn.classList.remove('active');
508
+ mobileMenu.classList.remove('open');
509
  });
510
+ });
511
+
512
+ // Smooth scrolling for all links
513
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
514
+ anchor.addEventListener('click', function (e) {
515
+ e.preventDefault();
 
516
 
517
+ const targetId = this.getAttribute('href');
518
+ const targetElement = document.querySelector(targetId);
519
+
520
+ if (targetElement) {
521
+ window.scrollTo({
522
+ top: targetElement.offsetTop - 80,
523
+ behavior: 'smooth'
 
 
 
 
 
 
 
 
 
 
 
 
 
 
524
  });
525
  }
526
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
527
  });
 
 
 
 
 
 
 
 
 
 
 
528
  </script>
529
+ <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/ussroptical" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
530
  </html>
prompts.txt CHANGED
@@ -1 +1,2 @@
1
- сделай под мобильные устройства добавь еффектом логотип и измени дизайн
 
 
1
+ сделай под мобильные устройства добавь еффектом логотип и измени дизайн
2
+ сделай лучше