Hugging Face's logo

Spaces:
unzerror
/
undefined
Running

App Files Community
unzerror commited on
Commit
1f77bfa
·
verified ·
1 Parent(s): f9269de

Используй цветовую гамму как на го сайтах рф например как тут http://kremlin.ru/

Browse files
Files changed (2) hide show
  1. README.md +7 -3
  2. index.html +592 -18
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Undefined
3
- emoji: 🏢
4
  colorFrom: green
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: undefined
 
3
  colorFrom: green
4
  colorTo: blue
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
index.html CHANGED
@@ -1,19 +1,593 @@
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
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.min.js"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: {
17
+ DEFAULT: '#0056B3',
18
+ 50: '#E6F3FF',
19
+ 100: '#CCE7FF',
20
+ 200: '#99D0FF',
21
+ 300: '#66B8FF',
22
+ 400: '#33A1FF',
23
+ 500: '#0056B3',
24
+ 600: '#004494',
25
+ 700: '#003375',
26
+ 800: '#002255',
27
+ 900: '#001137',
28
+ },
29
+ secondary: {
30
+ DEFAULT: '#C41230',
31
+ 50: '#FEE8EB',
32
+ 100: '#FDD1D7',
33
+ 200: '#FBA3AF',
34
+ 300: '#F87585',
35
+ 400: '#F54760',
36
+ 500: '#C41230',
37
+ 600: '#9E0E26',
38
+ 700: '#780A1C',
39
+ 800: '#520713',
40
+ 900: '#2C0309',
41
+ }
42
+ },
43
+ animation: {
44
+ 'fade-in': 'fadeIn 0.5s ease-in-out',
45
+ 'slide-up': 'slideUp 0.6s ease-out',
46
+ 'bounce-soft': 'bounceSoft 2s infinite',
47
+ },
48
+ keyframes: {
49
+ fadeIn: {
50
+ '0%': { opacity: '0' },
51
+ '100%': { opacity: '1' },
52
+ },
53
+ slideUp: {
54
+ '0%': { transform: 'translateY(20px)', opacity: '0' },
55
+ '100%': { transform: 'translateY(0)', opacity: '1' },
56
+ },
57
+ bounceSoft: {
58
+ '0%, 100%': { transform: 'translateY(0)' },
59
+ '50%': { transform: 'translateY(-10px)' },
60
+ }
61
+ }
62
+ }
63
+ }
64
+ }
65
+ </script>
66
+ <style>
67
+ .gradient-text {
68
+ background: linear-gradient(135deg, #0056B3 0%, #002255 100%);
69
+ -webkit-background-clip: text;
70
+ -webkit-text-fill-color: transparent;
71
+ background-clip: text;
72
+ }
73
+ .hero-overlay {
74
+ background: linear-gradient(135deg, rgba(0, 86, 179, 0.9) 0%, rgba(0, 34, 85, 0.9) 100%);
75
+ }
76
+ .card-hover {
77
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
78
+ }
79
+ .card-hover:hover {
80
+ transform: translateY(-8px) scale(1.02);
81
+ box-shadow: 0 20px 40px rgba(0, 86, 179, 0.2);
82
+ }
83
+ .vendor-logo {
84
+ transition: all 0.3s ease;
85
+ filter: grayscale(100%);
86
+ opacity: 0.7;
87
+ }
88
+ .vendor-logo:hover {
89
+ filter: grayscale(0%);
90
+ opacity: 1;
91
+ transform: scale(1.1);
92
+ }
93
+ .scroll-smooth {
94
+ scroll-behavior: smooth;
95
+ }
96
+ </style>
97
+ </head>
98
+ <body class="bg-gray-50 scroll-smooth">
99
+ <!-- Header Navigation -->
100
+ <header class="bg-white shadow-lg sticky top-0 z-50 border-b-2 border-primary-500">
101
+ <nav class="container mx-auto px-4 lg:px-8">
102
+ <div class="flex justify-between items-center py-4">
103
+ <div class="flex items-center space-x-2">
104
+ <div class="w-10 h-10 bg-primary-500 rounded-lg flex items-center justify-center">
105
+ <i data-feather="cpu" class="w-6 h-6 text-white"></i>
106
+ </div>
107
+ <h1 class="text-2xl font-bold text-primary-500">Ника</h1>
108
+ </div>
109
+ <!-- Desktop Menu -->
110
+ <div class="hidden lg:flex items-center space-x-8">
111
+ <a href="#home" class="text-gray-700 hover:text-primary-500 transition-colors font-medium border-b-2 border-transparent hover:border-primary-500 pb-1">Главная</a>
112
+ <a href="#vendors" class="text-gray-700 hover:text-primary-500 transition-colors font-medium border-b-2 border-transparent hover:border-primary-500 pb-1">Вендоры</a>
113
+ <a href="#price" class="text-gray-700 hover:text-primary-500 transition-colors font-medium border-b-2 border-transparent hover:border-primary-500 pb-1">Прайс-лист</a>
114
+ <a href="#delivery" class="text-gray-700 hover:text-primary-500 transition-colors font-medium border-b-2 border-transparent hover:border-primary-500 pb-1">Доставка</a>
115
+ <a href="#contacts" class="text-gray-700 hover:text-primary-500 transition-colors font-medium border-b-2 border-transparent hover:border-primary-500 pb-1">Контакты</a>
116
+ <button class="bg-primary-500 text-white px-6 py-2 rounded-full hover:bg-primary-600 transition-all transform hover:scale-105 shadow-md">
117
+ Сделать заказ
118
+ </button>
119
+ </div>
120
+ <!-- Mobile Menu Button -->
121
+ <button id="mobileMenuBtn" class="lg:hidden">
122
+ <i data-feather="menu" class="w-6 h-6 text-gray-700"></i>
123
+ </button>
124
+ </div>
125
+ <!-- Mobile Menu -->
126
+ <div id="mobileMenu" class="hidden lg:hidden pb-4 border-t border-gray-200 mt-4 pt-4">
127
+ <a href="#home" class="block py-2 text-gray-700 hover:text-primary-500 hover:bg-primary-50 px-2 rounded">Главная</a>
128
+ <a href="#vendors" class="block py-2 text-gray-700 hover:text-primary-500 hover:bg-primary-50 px-2 rounded">Вендоры</a>
129
+ <a href="#price" class="block py-2 text-gray-700 hover:text-primary-500 hover:bg-primary-50 px-2 rounded">Прайс-лист</a>
130
+ <a href="#delivery" class="block py-2 text-gray-700 hover:text-primary-500 hover:bg-primary-50 px-2 rounded">Доставка</a>
131
+ <a href="#contacts" class="block py-2 text-gray-700 hover:text-primary-500 hover:bg-primary-50 px-2 rounded">Контакты</a>
132
+ </div>
133
+ </nav>
134
+ </header>
135
+
136
+ <!-- Hero Section -->
137
+ <section id="home" class="relative overflow-hidden">
138
+ <div class="absolute inset-0">
139
+ <img src="http://nika-kamchatka.ru/bitrix/templates/pkgb/images/03header_slider_photo.jpg" alt="Доставка" class="w-full h-full object-cover">
140
+ <div class="hero-overlay absolute inset-0"></div>
141
+ </div>
142
+ <div class="relative container mx-auto px-4 lg:px-8 py-24 lg:py-32">
143
+ <div class="max-w-3xl mx-auto text-center text-white">
144
+ <h2 class="text-4xl lg:text-6xl font-bold mb-6 animate-fade-in">
145
+ Офисная техника и ПО для камчатских организаций
146
+ </h2>
147
+ <p class="text-xl lg:text-2xl mb-8 animate-slide-up">
148
+ Надежные решения для вашего бизнеса с 2010 года
149
+ </p>
150
+ <div class="flex flex-col sm:flex-row gap-4 justify-center">
151
+ <button class="bg-primary-500 text-white px-8 py-3 rounded font-semibold hover:bg-primary-600 transition-all transform hover:scale-105 shadow-lg">
152
+ Каталог продукции
153
+ </button>
154
+ <button class="bg-white text-primary-500 px-8 py-3 rounded font-semibold hover:bg-primary-50 hover:text-primary-600 transition-all shadow-lg">
155
+ Консультация
156
+ </button>
157
+ </div>
158
+ </div>
159
+ </div>
160
+ </section>
161
+
162
+ <!-- Features Section -->
163
+ <section class="py-16 lg:py-24">
164
+ <div class="container mx-auto px-4 lg:px-8">
165
+ <div class="grid md:grid-cols-3 gap-8">
166
+ <!-- Feature 1 -->
167
+ <div class="bg-white rounded-2xl shadow-xl p-8 card-hover">
168
+ <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mb-6">
169
+ <i data-feather="truck" class="w-8 h-8 text-primary-500"></i>
170
+ </div>
171
+ <h3 class="text-2xl font-bold text-gray-800 mb-4">ДОСТАВКА</h3>
172
+ <p class="text-gray-600 mb-4">по всему Камчатскому краю</p>
173
+ <p class="text-primary-500 font-semibold">в самые минимальные сроки</p>
174
+ </div>
175
+
176
+ <!-- Feature 2 -->
177
+ <div class="bg-white rounded-2xl shadow-xl p-8 card-hover">
178
+ <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mb-6">
179
+ <i data-feather="package" class="w-8 h-8 text-primary-500"></i>
180
+ </div>
181
+ <h3 class="text-2xl font-bold text-gray-800 mb-4">ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ</h3>
182
+ <p class="text-gray-600 mb-4">для офисных компьютеров</p>
183
+ <p class="text-primary-500 font-semibold">под любые задачи</p>
184
+ </div>
185
+
186
+ <!-- Feature 3 -->
187
+ <div class="bg-white rounded-2xl shadow-xl p-8 card-hover">
188
+ <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mb-6">
189
+ <i data-feather="monitor" class="w-8 h-8 text-primary-500"></i>
190
+ </div>
191
+ <h3 class="text-2xl font-bold text-gray-800 mb-4">ОФИСНАЯ ТЕХНИКА</h3>
192
+ <p class="text-gray-600 mb-4">лучших мировых производителей</p>
193
+ <p class="text-primary-500 font-semibold">по минимальным ценам</p>
194
+ </div>
195
+ </div>
196
+ </div>
197
+ </section>
198
+
199
+ <!-- About Section -->
200
+ <section class="py-16 lg:py-24 bg-white">
201
+ <div class="container mx-auto px-4 lg:px-8">
202
+ <div class="grid lg:grid-cols-2 gap-12 items-center">
203
+ <div class="order-2 lg:order-1 animate-slide-up">
204
+ <h2 class="text-3xl lg:text-4xl font-bold text-gray-800 mb-6">
205
+ О компании <span class="gradient-text">ООО "Ника"</span>
206
+ </h2>
207
+ <p class="text-gray-600 mb-6 leading-relaxed">
208
+ Компания ООО "Ника" была образована в 2010 году. Основным видом деятельности являются оптовая торговля офисным оборудованием, в том числе компьютерное и периферийное оборудование, комплектующие, расходные материалы для офисной техники и программное обеспечение для нужд предприятий и организаций Камчатского края.
209
+ </p>
210
+ <div class="grid grid-cols-2 gap-4">
211
+ <div class="flex items-center space-x-3">
212
+ <i data-feather="check-circle" class="w-5 h-5 text-primary-500"></i>
213
+ <span class="text-gray-700">10+ лет на рынке</span>
214
+ </div>
215
+ <div class="flex items-center space-x-3">
216
+ <i data-feather="check-circle" class="w-5 h-5 text-primary-500"></i>
217
+ <span class="text-gray-700">1000+ клиентов</span>
218
+ </div>
219
+ <div class="flex items-center space-x-3">
220
+ <i data-feather="check-circle" class="w-5 h-5 text-primary-500"></i>
221
+ <span class="text-gray-700">Официальный дилер</span>
222
+ </div>
223
+ <div class="flex items-center space-x-3">
224
+ <i data-feather="check-circle" class="w-5 h-5 text-primary-500"></i>
225
+ <span class="text-gray-700">Гарантия качества</span>
226
+ </div>
227
+ </div>
228
+ </div>
229
+ <div class="order-1 lg:order-2">
230
+ <img src="http://nika-kamchatka.ru/upload/medialibrary/f6e/f6e1e2da7771657f325c3a1f93f97dc3.png" alt="Оборудование" class="rounded-2xl shadow-2xl w-full">
231
+ </div>
232
+ </div>
233
+ </div>
234
+ </section>
235
+
236
+ <!-- Advantages Section -->
237
+ <section class="py-16 lg:py-24 bg-gray-50">
238
+ <div class="container mx-auto px-4 lg:px-8">
239
+ <h2 class="text-3xl lg:text-4xl font-bold text-center text-gray-800 mb-12">
240
+ Наши преимущества
241
+ </h2>
242
+ <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
243
+ <div class="bg-white rounded-xl p-6 text-center card-hover">
244
+ <div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
245
+ <i data-feather="layers" class="w-6 h-6 text-primary-500"></i>
246
+ </div>
247
+ <h3 class="font-bold text-gray-800 mb-2">Широкий</h3>
248
+ <p class="text-primary-500 font-semibold">ассортимент</p>
249
+ </div>
250
+ <div class="bg-white rounded-xl p-6 text-center card-hover">
251
+ <div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
252
+ <i data-feather="trending-down" class="w-6 h-6 text-primary-500"></i>
253
+ </div>
254
+ <h3 class="font-bold text-gray-800 mb-2">Минимальные</h3>
255
+ <p class="text-primary-500 font-semibold">цены</p>
256
+ </div>
257
+ <div class="bg-white rounded-xl p-6 text-center card-hover">
258
+ <div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
259
+ <i data-feather="users" class="w-6 h-6 text-primary-500"></i>
260
+ </div>
261
+ <h3 class="font-bold text-gray-800 mb-2">Квалифицированный</h3>
262
+ <p class="text-primary-500 font-semibold">персонал</p>
263
+ </div>
264
+ <div class="bg-white rounded-xl p-6 text-center card-hover">
265
+ <div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
266
+ <i data-feather="award" class="w-6 h-6 text-primary-500"></i>
267
+ </div>
268
+ <h3 class="font-bold text-gray-800 mb-2">Качественное</h3>
269
+ <p class="text-primary-500 font-semibold">обслуживание</p>
270
+ </div>
271
+ <div class="bg-white rounded-xl p-6 text-center card-hover">
272
+ <div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
273
+ <i data-feather="map-pin" class="w-6 h-6 text-primary-500"></i>
274
+ </div>
275
+ <h3 class="font-bold text-gray-800 mb-2">Доставка по</h3>
276
+ <p class="text-primary-500 font-semibold">Камчатскому краю</p>
277
+ </div>
278
+ <div class="bg-white rounded-xl p-6 text-center card-hover">
279
+ <div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
280
+ <i data-feather="zap" class="w-6 h-6 text-primary-500"></i>
281
+ </div>
282
+ <h3 class="font-bold text-gray-800 mb-2">Выполнение</h3>
283
+ <p class="text-primary-500 font-semibold">нестандартных заказов</p>
284
+ </div>
285
+ <div class="bg-white rounded-xl p-6 text-center card-hover">
286
+ <div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
287
+ <i data-feather="shield" class="w-6 h-6 text-primary-500"></i>
288
+ </div>
289
+ <h3 class="font-bold text-gray-800 mb-2">Гарантия</h3>
290
+ <p class="text-primary-500 font-semibold">производителей</p>
291
+ </div>
292
+ </div>
293
+ </div>
294
+ </section>
295
+
296
+ <!-- Vendors Section -->
297
+ <section id="vendors" class="py-16 lg:py-24 bg-white">
298
+ <div class="container mx-auto px-4 lg:px-8">
299
+ <h2 class="text-3xl lg:text-4xl font-bold text-center text-gray-800 mb-12">
300
+ Наши партнеры
301
+ </h2>
302
+ <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8">
303
+ <a href="https://www.apc.ru/" target="_blank" class="flex items-center justify-center p-4 bg-gray-50 rounded-lg vendor-logo">
304
+ <img src="http://nika-kamchatka.ru/bitrix/templates/pkgb/images/banner_apc.jpg" alt="APC" class="h-12 object-contain">
305
+ </a>
306
+ <a href="https://www8.hp.com/ru/ru/home.html" target="_blank" class="flex items-center justify-center p-4 bg-gray-50 rounded-lg vendor-logo">
307
+ <img src="http://nika-kamchatka.ru/bitrix/templates/pkgb/images/banner_hp.jpg" alt="HP" class="h-12 object-contain">
308
+ </a>
309
+ <a href="https://iru.ru/" target="_blank" class="flex items-center justify-center p-4 bg-gray-50 rounded-lg vendor-logo">
310
+ <img src="http://nika-kamchatka.ru/bitrix/templates/pkgb/images/banner_iru.jpg" alt="IRU" class="h-12 object-contain">
311
+ </a>
312
+ <a href="https://www.xerox.ru/" target="_blank" class="flex items-center justify-center p-4 bg-gray-50 rounded-lg vendor-logo">
313
+ <img src="http://nika-kamchatka.ru/bitrix/templates/pkgb/images/banner_xerox.jpg" alt="Xerox" class="h-12 object-contain">
314
+ </a>
315
+ <a href="https://www.brother.ru/" target="_blank" class="flex items-center justify-center p-4 bg-gray-50 rounded-lg vendor-logo">
316
+ <img src="http://nika-kamchatka.ru/bitrix/templates/pkgb/images/banner_brother.jpg" alt="Brother" class="h-12 object-contain">
317
+ </a>
318
+ <a href="https://russia.kyocera.com/" target="_blank" class="flex items-center justify-center p-4 bg-gray-50 rounded-lg vendor-logo">
319
+ <img src="http://nika-kamchatka.ru/bitrix/templates/pkgb/images/banner_kyocera.jpg" alt="Kyocera" class="h-12 object-contain">
320
+ </a>
321
+ <a href="https://www.kaspersky.ru/" target="_blank" class="flex items-center justify-center p-4 bg-gray-50 rounded-lg vendor-logo">
322
+ <img src="http://nika-kamchatka.ru/bitrix/templates/pkgb/images/banner_kaspersky.jpg" alt="Kaspersky" class="h-12 object-contain">
323
+ </a>
324
+ <a href="https://www.microsoft.com/ru-ru" target="_blank" class="flex items-center justify-center p-4 bg-gray-50 rounded-lg vendor-logo">
325
+ <img src="http://nika-kamchatka.ru/bitrix/templates/pkgb/images/banner_microsoft.jpg" alt="Microsoft" class="h-12 object-contain">
326
+ </a>
327
+ </div>
328
+ </div>
329
+ </section>
330
+
331
+ <!-- Order Form Section -->
332
+ <section class="py-16 lg:py-24 bg-gray-50">
333
+ <div class="container mx-auto px-4 lg:px-8">
334
+ <div class="max-w-2xl mx-auto">
335
+ <h2 class="text-3xl lg:text-4xl font-bold text-center text-gray-800 mb-12">
336
+ Сделать заказ
337
+ </h2>
338
+ <form class="bg-white rounded-2xl shadow-xl p-8">
339
+ <div class="mb-6">
340
+ <label class="block text-gray-700 font-semibold mb-2">ФИО:</label>
341
+ <input type="text" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-primary-500 transition-colors" placeholder="Введите ваше ФИО">
342
+ </div>
343
+ <div class="mb-6">
344
+ <label class="block text-gray-700 font-semibold mb-2">E-mail:</label>
345
+ <input type="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-primary-500 transition-colors" placeholder="example@email.com">
346
+ </div>
347
+ <div class="mb-6">
348
+ <label class="block text-gray-700 font-semibold mb-2">Телефон:</label>
349
+ <input type="tel" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-primary-500 transition-colors" placeholder="+7 (___) ___-__-__">
350
+ </div>
351
+ <div class="mb-6">
352
+ <label class="block text-gray-700 font-semibold mb-2">Комментарий к заказу:</label>
353
+ <textarea class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-primary-500 transition-colors" rows="4" placeholder="Опишите ваш заказ..."></textarea>
354
+ </div>
355
+ <div class="mb-6">
356
+ <div class="flex items-center space-x-2">
357
+ <input type="checkbox" id="agree" class="w-4 h-4 text-primary-500">
358
+ <label for="agree" class="text-gray-600 text-sm">Я согласен с условиями обработки персональных данных</label>
359
+ </div>
360
+ </div>
361
+ <button type="submit" class="w-full bg-primary-500 text-white py-3 rounded-lg font-semibold hover:bg-primary-600 transition-all transform hover:scale-105">
362
+ Подтвердить заказ
363
+ </button>
364
+ </form>
365
+ </div>
366
+ </div>
367
+ </section>
368
+
369
+ <!-- Contacts Section -->
370
+ <section id="contacts" class="py-16 lg:py-24 bg-white">
371
+ <div class="container mx-auto px-4 lg:px-8">
372
+ <h2 class="text-3xl lg:text-4xl font-bold text-center text-gray-800 mb-12">
373
+ Наши реквизиты
374
+ </h2>
375
+ <div class="max-w-3xl mx-auto">
376
+ <div class="bg-gray-50 rounded-2xl p-8">
377
+ <div class="space-y-4">
378
+ <div class="flex items-start space-x-3">
379
+ <i data-feather="map-pin" class="w-5 h-5 text-primary-500 mt-1"></i>
380
+ <div>
381
+ <p class="font-semibold text-gray-800">Адрес:</p>
382
+ <p class="text-gray-600">683023, Камчатский край, г. Петропавловск-Камчатский ул. Флотская д. 14 кв. 6</p>
383
+ </div>
384
+ </div>
385
+ <div class="flex items-start space-x-3">
386
+ <i data-feather="phone" class="w-5 h-5 text-primary-500 mt-1"></i>
387
+ <div>
388
+ <p class="font-semibold text-gray-800">Телефон:</p>
389
+ <p class="text-gray-600">+7 (909) 830-87-77</p>
390
+ <p class="text-gray-600">Факс: (415) 2-256-864</p>
391
+ </div>
392
+ </div>
393
+ <div class="flex items-start space-x-3">
394
+ <i data-feather="file-text" class="w-5 h-5 text-primary-500 mt-1"></i>
395
+ <div>
396
+ <p class="font-semibold text-gray-800">Реквизиты:</p>
397
+ <p class="text-gray-600">ИНН/КПП 4101139197/410101001</p>
398
+ <p class="text-gray-600">ОГРН 1104101003841</p>
399
+ </div>
400
+ </div>
401
+ <div class="flex items-start space-x-3">
402
+ <i data-feather="credit-card" class="w-5 h-5 text-primary-500 mt-1"></i>
403
+ <div>
404
+ <p class="font-semibold text-gray-800">Банковские реквизиты:</p>
405
+ <p class="text-gray-600">р/сч 40702810836170003423 в Северо-Восточном Банке Сбербанка России г. Магадан</p>
406
+ <p class="text-gray-600">БИК 044442607, к/сч 30101810300000000607</p>
407
+ </div>
408
+ </div>
409
+ </div>
410
+ </div>
411
+ </div>
412
+ </div>
413
+ </section>
414
+
415
+ <!-- Footer -->
416
+ <footer class="bg-zinc-900 text-white py-12">
417
+ <div class="container mx-auto px-4 lg:px-8">
418
+ <div class="grid md:grid-cols-4 gap-8">
419
+ <div>
420
+ <div class="flex items-center space-x-2 mb-4">
421
+ <div class="w-10 h-10 bg-primary-500 rounded-lg flex items-center justify-center">
422
+ <i data-feather="cpu" class="w-6 h-6 text-white"></i>
423
+ </div>
424
+ <h3 class="text-xl font-bold">Ника</h3>
425
+ </div>
426
+ <p class="text-gray-400">Оптовые продажи офисной и компьютерной техники для предприятий на Камчатке</p>
427
+ </div>
428
+ <div>
429
+ <h4 class="font-semibold mb-4">Меню</h4>
430
+ <ul class="space-y-2">
431
+ <li><a href="#home" class="text-gray-400 hover:text-primary-500 transition-colors">Главная</a></li>
432
+ <li><a href="#vendors" class="text-gray-400 hover:text-primary-500 transition-colors">Вендоры</a></li>
433
+ <li><a href="#price" class="text-gray-400 hover:text-primary-500 transition-colors">Прайс-лист</a></li>
434
+ <li><a href="#delivery" class="text-gray-400 hover:text-primary-500 transition-colors">Доставка</a></li>
435
+ </ul>
436
+ </div>
437
+ <div>
438
+ <h4 class="font-semibold mb-4">Услуги</h4>
439
+ <ul class="space-y-2">
440
+ <li><a href="#" class="text-gray-400 hover:text-primary-500 transition-colors hover:text-white border-l-2 border-transparent hover:border-primary-500 pl-2">Офисная техника</a></li>
441
+ <li><a href="#" class="text-gray-400 hover:text-primary-500 transition-colors hover:text-white border-l-2 border-transparent hover:border-primary-500 pl-2">Программное обеспечение</a></li>
442
+ <li><a href="#" class="text-gray-400 hover:text-primary-500 transition-colors hover:text-white border-l-2 border-transparent hover:border-primary-500 pl-2">Расходные материалы</a></li>
443
+ <li><a href="#" class="text-gray-400 hover:text-primary-500 transition-colors hover:text-white border-l-2 border-transparent hover:border-primary-500 pl-2">Сервисное обслуживание</a></li>
444
+ </ul>
445
+ </div>
446
+ <div>
447
+ <h4 class="font-semibold mb-4">Контакты</h4>
448
+ <ul class="space-y-2 text-gray-400">
449
+ <li class="flex items-center space-x-2">
450
+ <i data-feather="phone" class="w-4 h-4"></i>
451
+ <span>+7 (909) 830-87-77</span>
452
+ </li>
453
+ <li class="flex items-center space-x-2">
454
+ <i data-feather="mail" class="w-4 h-4"></i>
455
+ <span>nika@example.ru</span>
456
+ </li>
457
+ <li class="flex items-center space-x-2">
458
+ <i data-feather="map-pin" class="w-4 h-4"></i>
459
+ <span>Петропавловск-Камчатский</span>
460
+ </li>
461
+ </ul>
462
+ </div>
463
+ </div>
464
+ <div class="border-t border-zinc-800 mt-8 pt-8 text-center text-gray-400">
465
+ <p>© 2010 - 2024 ООО "Ника" - Все права защищены</p>
466
+ </div>
467
+ </div>
468
+ </footer>
469
+
470
+ <!-- Back to Top Button -->
471
+ <button id="backToTop" class="fixed bottom-8 right-8 bg-primary-500 text-white w-12 h-12 rounded-full shadow-lg hidden hover:bg-primary-600 transition-all transform hover:scale-110">
472
+ <i data-feather="arrow-up" class="w-6 h-6 mx-auto"></i>
473
+ </button>
474
+
475
+ <script>
476
+ // Initialize Feather Icons
477
+ feather.replace();
478
+
479
+ // Mobile Menu Toggle
480
+ const mobileMenuBtn = document.getElementById('mobileMenuBtn');
481
+ const mobileMenu = document.getElementById('mobileMenu');
482
+
483
+ mobileMenuBtn.addEventListener('click', () => {
484
+ mobileMenu.classList.toggle('hidden');
485
+ });
486
+
487
+ // Back to Top Button
488
+ const backToTopBtn = document.getElementById('backToTop');
489
+
490
+ window.addEventListener('scroll', () => {
491
+ if (window.scrollY > 300) {
492
+ backToTopBtn.classList.remove('hidden');
493
+ } else {
494
+ backToTopBtn.classList.add('hidden');
495
+ }
496
+ });
497
+
498
+ backToTopBtn.addEventListener('click', () => {
499
+ window.scrollTo({ top: 0, behavior: 'smooth' });
500
+ });
501
+
502
+ // Smooth Scroll for Anchor Links
503
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
504
+ anchor.addEventListener('click', function (e) {
505
+ e.preventDefault();
506
+ const target = document.querySelector(this.getAttribute('href'));
507
+ if (target) {
508
+ target.scrollIntoView({ behavior: 'smooth', block: 'start' });
509
+ // Close mobile menu if open
510
+ mobileMenu.classList.add('hidden');
511
+ }
512
+ });
513
+ });
514
+
515
+ // Form Validation
516
+ const orderForm = document.querySelector('form');
517
+ orderForm.addEventListener('submit', (e) => {
518
+ e.preventDefault();
519
+
520
+ const name = orderForm.querySelector('input[type="text"]').value;
521
+ const email = orderForm.querySelector('input[type="email"]').value;
522
+ const phone = orderForm.querySelector('input[type="tel"]').value;
523
+ const agree = orderForm.querySelector('#agree').checked;
524
+
525
+ if (!name || !email || !phone) {
526
+ showNotification('Пожалуйста, заполните все обязательные поля', 'error');
527
+ return;
528
+ }
529
+
530
+ if (!agree) {
531
+ showNotification('Необходимо согласие на обработку персональных данных', 'error');
532
+ return;
533
+ }
534
+
535
+ showNotification('Ваш заказ успешно отправлен! Мы свяжемся с вами в ближайшее время.', 'success');
536
+ orderForm.reset();
537
+ });
538
+
539
+ // Notification Function
540
+ function showNotification(message, type) {
541
+ const notification = document.createElement('div');
542
+ notification.className = `fixed top-20 right-4 px-6 py-4 rounded-lg shadow-lg z-50 animate-slide-up border-l-4 ${
543
+ type === 'success' ? 'bg-green-50 text-green-800 border-green-500' : 'bg-red-50 text-red-800 border-red-500'
544
+ }`;
545
+ notification.textContent = message;
546
+ document.body.appendChild(notification);
547
+
548
+ setTimeout(() => {
549
+ notification.remove();
550
+ }, 3000);
551
+ }
552
+
553
+ // Animate on Scroll
554
+ const observerOptions = {
555
+ threshold: 0.1,
556
+ rootMargin: '0px 0px -50px 0px'
557
+ };
558
+
559
+ const observer = new IntersectionObserver((entries) => {
560
+ entries.forEach(entry => {
561
+ if (entry.isIntersecting) {
562
+ entry.target.classList.add('animate-fade-in');
563
+ }
564
+ });
565
+ }, observerOptions);
566
+
567
+ document.querySelectorAll('.card-hover').forEach(el => {
568
+ observer.observe(el);
569
+ });
570
+
571
+ // Phone Mask
572
+ const phoneInput = document.querySelector('input[type="tel"]');
573
+ phoneInput.addEventListener('input', (e) => {
574
+ let value = e.target.value.replace(/\D/g, '');
575
+ if (value.length > 0) {
576
+ if (value[0] === '7') {
577
+ value = value.substring(1);
578
+ }
579
+ if (value.length <= 3) {
580
+ value = `+7 (${value}`;
581
+ } else if (value.length <= 6) {
582
+ value = `+7 (${value.substring(0, 3)}) ${value.substring(3)}`;
583
+ } else if (value.length <= 8) {
584
+ value = `+7 (${value.substring(0, 3)}) ${value.substring(3, 6)}-${value.substring(6)}`;
585
+ } else {
586
+ value = `+7 (${value.substring(0, 3)}) ${value.substring(3, 6)}-${value.substring(6, 8)}-${value.substring(8, 10)}`;
587
+ }
588
+ }
589
+ e.target.value = value;
590
+ });
591
+ </script>
592
+ </body>
593
  </html>