Hugging Face's logo

Spaces:
IGORANT
/
optonnos
Running

App Files Community
IGORANT commited on
Commit
1a05ca5
·
verified ·
1 Parent(s): a8b843e

Add 3 files

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