Hugging Face's logo

Spaces:
gurwa
/
ruart
Running

App Files Community
gurwa commited on
Commit
92be765
·
verified ·
1 Parent(s): c026f35

Сделай новый полностью рабочий сайт по продаже готовых картин и услуг по написанию новых, с возможностью создания аукционов, добавлнния в корзину, покупки. С приятными звуками, легкой и красивой анимацией и минималистичном стиле - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +955 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ruart
3
- emoji: 👁
4
  colorFrom: purple
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: ruart
3
+ emoji: 🐳
4
  colorFrom: purple
5
+ colorTo: pink
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,955 @@
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>ArtCanvas | Картины и авторские работы</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @keyframes fadeIn {
11
+ from { opacity: 0; transform: translateY(10px); }
12
+ to { opacity: 1; transform: translateY(0); }
13
+ }
14
+
15
+ @keyframes pulse {
16
+ 0%, 100% { transform: scale(1); }
17
+ 50% { transform: scale(1.05); }
18
+ }
19
+
20
+ .fade-in {
21
+ animation: fadeIn 0.5s ease-out forwards;
22
+ }
23
+
24
+ .pulse:hover {
25
+ animation: pulse 1.5s infinite;
26
+ }
27
+
28
+ .cart-pulse {
29
+ animation: pulse 1s ease-out;
30
+ }
31
+
32
+ .auction-timer {
33
+ font-family: monospace;
34
+ }
35
+
36
+ .artwork-card:hover .artwork-overlay {
37
+ opacity: 1;
38
+ transform: translateY(0);
39
+ }
40
+
41
+ .artwork-overlay {
42
+ opacity: 0;
43
+ transform: translateY(10px);
44
+ transition: all 0.3s ease;
45
+ }
46
+
47
+ .drawer {
48
+ transition: transform 0.3s ease-out;
49
+ }
50
+
51
+ .drawer.open {
52
+ transform: translateX(0);
53
+ }
54
+
55
+ .drawer.closed {
56
+ transform: translateX(100%);
57
+ }
58
+ </style>
59
+ </head>
60
+ <body class="bg-gray-50 font-sans">
61
+ <audio id="addToCartSound" src="https://assets.mixkit.co/sfx/preview/mixkit-arrow-whoosh-1491.mp3" preload="auto"></audio>
62
+ <audio id="purchaseSound" src="https://assets.mixkit.co/sfx/preview/mixkit-cash-machine-buttons-press-1104.mp3" preload="auto"></audio>
63
+ <audio id="bidSound" src="https://assets.mixkit.co/sfx/preview/mixkit-unlock-game-notification-253.mp3" preload="auto"></audio>
64
+
65
+ <!-- Header -->
66
+ <header class="bg-white shadow-sm sticky top-0 z-50">
67
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
68
+ <div class="flex items-center space-x-2">
69
+ <i class="fas fa-palette text-2xl text-indigo-600"></i>
70
+ <h1 class="text-xl font-bold text-gray-800">ArtCanvas</h1>
71
+ </div>
72
+
73
+ <nav class="hidden md:flex space-x-8">
74
+ <a href="#gallery" class="text-gray-600 hover:text-indigo-600 transition">Галерея</a>
75
+ <a href="#auctions" class="text-gray-600 hover:text-indigo-600 transition">Аукционы</a>
76
+ <a href="#custom" class="text-gray-600 hover:text-indigo-600 transition">На заказ</a>
77
+ <a href="#about" class="text-gray-600 hover:text-indigo-600 transition">О нас</a>
78
+ </nav>
79
+
80
+ <div class="flex items-center space-x-4">
81
+ <button id="cartButton" class="relative">
82
+ <i class="fas fa-shopping-cart text-gray-700 hover:text-indigo-600 text-xl transition"></i>
83
+ <span id="cartCounter" class="absolute -top-2 -right-2 bg-indigo-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center hidden">0</span>
84
+ </button>
85
+
86
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-full transition transform hover:scale-105">
87
+ Войти
88
+ </button>
89
+
90
+ <button id="mobileMenuButton" class="md:hidden text-gray-700">
91
+ <i class="fas fa-bars text-xl"></i>
92
+ </button>
93
+ </div>
94
+ </div>
95
+
96
+ <!-- Mobile Menu -->
97
+ <div id="mobileMenu" class="hidden md:hidden bg-white border-t px-4 py-3 space-y-3">
98
+ <a href="#gallery" class="block text-gray-600 hover:text-indigo-600 transition">Галерея</a>
99
+ <a href="#auctions" class="block text-gray-600 hover:text-indigo-600 transition">Аукционы</a>
100
+ <a href="#custom" class="block text-gray-600 hover:text-indigo-600 transition">На заказ</a>
101
+ <a href="#about" class="block text-gray-600 hover:text-indigo-600 transition">О нас</a>
102
+ </div>
103
+ </header>
104
+
105
+ <!-- Hero Section -->
106
+ <section class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white py-20 px-4">
107
+ <div class="container mx-auto text-center fade-in">
108
+ <h2 class="text-4xl md:text-5xl font-bold mb-6">Искусство, которое вдохновляет</h2>
109
+ <p class="text-xl mb-8 max-w-3xl mx-auto">Уникальные картины от талантливых художников. Находите, покупайте или заказывайте собственные шедевры.</p>
110
+ <div class="flex justify-center space-x-4">
111
+ <a href="#gallery" class="bg-white text-indigo-600 px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition transform hover:scale-105">Исследовать</a>
112
+ <a href="#custom" class="border-2 border-white text-white px-6 py-3 rounded-full font-medium hover:bg-white hover:text-indigo-600 transition transform hover:scale-105">Заказать</a>
113
+ </div>
114
+ </div>
115
+ </section>
116
+
117
+ <!-- Gallery Section -->
118
+ <section id="gallery" class="py-16 px-4 bg-white">
119
+ <div class="container mx-auto">
120
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Галерея картин</h2>
121
+
122
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
123
+ <!-- Artwork 1 -->
124
+ <div class="artwork-card bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition relative">
125
+ <div class="relative overflow-hidden">
126
+ <img src="https://images.unsplash.com/photo-1578926375605-eaf7559b1458?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1286&q=80"
127
+ alt="Городской пейзаж"
128
+ class="w-full h-64 object-cover transition-transform duration-500 hover:scale-105">
129
+ <div class="artwork-overlay absolute inset-0 bg-black bg-opacity-40 flex items-end p-4">
130
+ <div class="text-white">
131
+ <p class="text-sm">Масло, холст</p>
132
+ <p class="text-xs">50×70 см</p>
133
+ </div>
134
+ </div>
135
+ </div>
136
+ <div class="p-4">
137
+ <h3 class="text-xl font-semibold mb-2 text-gray-800">Городские огни</h3>
138
+ <p class="text-gray-600 mb-4">Экспрессивный городской пейзаж в ночное время</p>
139
+ <div class="flex justify-between items-center">
140
+ <span class="text-indigo-600 font-bold text-lg">12,500 ₽</span>
141
+ <button class="add-to-cart-btn" data-id="1" data-title="Городские огни" data-price="12500"
142
+ class="bg-indigo-100 text-indigo-600 px-4 py-2 rounded-full hover:bg-indigo-600 hover:text-white transition">
143
+ В корзину
144
+ </button>
145
+ </div>
146
+ </div>
147
+ </div>
148
+
149
+ <!-- Artwork 2 -->
150
+ <div class="artwork-card bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition relative">
151
+ <div class="relative overflow-hidden">
152
+ <img src="https://images.unsplash.com/photo-1579783902614-a3fb3927b6a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1345&q=80"
153
+ alt="Портрет"
154
+ class="w-full h-64 object-cover transition-transform duration-500 hover:scale-105">
155
+ <div class="artwork-overlay absolute inset-0 bg-black bg-opacity-40 flex items-end p-4">
156
+ <div class="text-white">
157
+ <p class="text-sm">Акрил, холст</p>
158
+ <p class="text-xs">60×80 см</p>
159
+ </div>
160
+ </div>
161
+ </div>
162
+ <div class="p-4">
163
+ <h3 class="text-xl font-semibold mb-2 text-gray-800">Весенний взгляд</h3>
164
+ <p class="text-gray-600 mb-4">Женский портрет с цветочными элементами</p>
165
+ <div class="flex justify-between items-center">
166
+ <span class="text-indigo-600 font-bold text-lg">18,200 ₽</span>
167
+ <button class="add-to-cart-btn" data-id="2" data-title="Весенний взгляд" data-price="18200"
168
+ class="bg-indigo-100 text-indigo-600 px-4 py-2 rounded-full hover:bg-indigo-600 hover:text-white transition">
169
+ В корзину
170
+ </button>
171
+ </div>
172
+ </div>
173
+ </div>
174
+
175
+ <!-- Artwork 3 -->
176
+ <div class="artwork-card bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition relative">
177
+ <div class="relative overflow-hidden">
178
+ <img src="https://images.unsplash.com/photo-1500462918059-b1a0cb512f1d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1287&q=80"
179
+ alt="Горы"
180
+ class="w-full h-64 object-cover transition-transform duration-500 hover:scale-105">
181
+ <div class="artwork-overlay absolute inset-0 bg-black bg-opacity-40 flex items-end p-4">
182
+ <div class="text-white">
183
+ <p class="text-sm">Акварель, бумага</p>
184
+ <p class="text-xs">40×60 см</p>
185
+ </div>
186
+ </div>
187
+ </div>
188
+ <div class="p-4">
189
+ <h3 class="text-xl font-semibold mb-2 text-gray-800">Горное эхо</h3>
190
+ <p class="text-gray-600 mb-4">Завораживающий вид на горный хребет</p>
191
+ <div class="flex justify-between items-center">
192
+ <span class="text-indigo-600 font-bold text-lg">9,800 ₽</span>
193
+ <button class="add-to-cart-btn" data-id="3" data-title="Горное эхо" data-price="9800"
194
+ class="bg-indigo-100 text-indigo-600 px-4 py-2 rounded-full hover:bg-indigo-600 hover:text-white transition">
195
+ В корзину
196
+ </button>
197
+ </div>
198
+ </div>
199
+ </div>
200
+
201
+ <!-- Artwork 4 -->
202
+ <div class="artwork-card bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition relative">
203
+ <div class="relative overflow-hidden">
204
+ <img src="https://images.unsplash.com/photo-1579547945413-497e1b99dac0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
205
+ alt="Абстракция"
206
+ class="w-full h-64 object-cover transition-transform duration-500 hover:scale-105">
207
+ <div class="artwork-overlay absolute inset-0 bg-black bg-opacity-40 flex items-end p-4">
208
+ <div class="text-white">
209
+ <p class="text-sm">Смешанная техника</p>
210
+ <p class="text-xs">70×90 см</p>
211
+ </div>
212
+ </div>
213
+ </div>
214
+ <div class="p-4">
215
+ <h3 class="text-xl font-semibold mb-2 text-gray-800">Цветной хаос</h3>
216
+ <p class="text-gray-600 mb-4">Энергичная абстрактная композиция</p>
217
+ <div class="flex justify-between items-center">
218
+ <span class="text-indigo-600 font-bold text-lg">15,300 ₽</span>
219
+ <button class="add-to-cart-btn" data-id="4" data-title="Цветной хаос" data-price="15300"
220
+ class="bg-indigo-100 text-indigo-600 px-4 py-2 rounded-full hover:bg-indigo-600 hover:text-white transition">
221
+ В корзину
222
+ </button>
223
+ </div>
224
+ </div>
225
+ </div>
226
+
227
+ <!-- Artwork 5 -->
228
+ <div class="artwork-card bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition relative">
229
+ <div class="relative overflow-hidden">
230
+ <img src="https://images.unsplash.com/photo-1574362848149-11496d93a7c6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1284&q=80"
231
+ alt="Морской пейзаж"
232
+ class="w-full h-64 object-cover transition-transform duration-500 hover:scale-105">
233
+ <div class="artwork-overlay absolute inset-0 bg-black bg-opacity-40 flex items-end p-4">
234
+ <div class="text-white">
235
+ <p class="text-sm">Масло, холст</p>
236
+ <p class="text-xs">50×70 см</p>
237
+ </div>
238
+ </div>
239
+ </div>
240
+ <div class="p-4">
241
+ <h3 class="text-xl font-semibold mb-2 text-gray-800">Морская симфония</h3>
242
+ <p class="text-gray-600 mb-4">Драматический морской пейзаж с волнами</p>
243
+ <div class="flex justify-between items-center">
244
+ <span class="text-indigo-600 font-bold text-lg">13,750 ₽</span>
245
+ <button class="add-to-cart-btn" data-id="5" data-title="Морская симфония" data-price="13750"
246
+ class="bg-indigo-100 text-indigo-600 px-4 py-2 rounded-full hover:bg-indigo-600 hover:text-white transition">
247
+ В корзину
248
+ </button>
249
+ </div>
250
+ </div>
251
+ </div>
252
+
253
+ <!-- Artwork 6 -->
254
+ <div class="artwork-card bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition relative">
255
+ <div class="relative overflow-hidden">
256
+ <img src="https://images.unsplash.com/photo-1490750967868-88aa4486c946?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
257
+ alt="Цветы" class="w-full h-64 object-cover transition-transform duration-500 hover:scale-105">
258
+ <div class="artwork-overlay absolute inset-0 bg-black bg-opacity-40 flex items-end p-4">
259
+ <div class="text-white">
260
+ <p class="text-sm">Гуашь, бумага</p>
261
+ <p class="text-xs">40×50 см</p>
262
+ </div>
263
+ </div>
264
+ </div>
265
+ <div class="p-4">
266
+ <h3 class="text-xl font-semibold mb-2 text-gray-800">Цветочная гармония</h3>
267
+ <p class="text-gray-600 mb-4">Нежные полевые цветы в тёплых тонах</p>
268
+ <div class="flex justify-between items-center">
269
+ <span class="text-indigo-600 font-bold text-lg">8,900 ₽</span>
270
+ <button class="add-to-cart-btn" data-id="6" data-title="Цветочная гармония" data-price="8900"
271
+ class="bg-indigo-100 text-indigo-600 px-4 py-2 rounded-full hover:bg-indigo-600 hover:text-white transition">
272
+ В корзину
273
+ </button>
274
+ </div>
275
+ </div>
276
+ </div>
277
+ </div>
278
+
279
+ <div class="text-center mt-12">
280
+ <button class="px-6 py-3 bg-gray-100 text-gray-700 rounded-full hover:bg-gray-200 transition font-medium">
281
+ Показать больше
282
+ </button>
283
+ </div>
284
+ </div>
285
+ </section>
286
+
287
+ <!-- Auctions Section -->
288
+ <section id="auctions" class="py-16 px-4 bg-gray-50">
289
+ <div class="container mx-auto">
290
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Активные аукционы</h2>
291
+
292
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
293
+ <!-- Auction 1 -->
294
+ <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition">
295
+ <div class="relative">
296
+ <img src="https://images.unsplash.com/photo-1618221195710-dd6b41fa6866?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1400&q=80"
297
+ alt="Аукционная картина" class="w-full h-64 object-cover">
298
+ <div class="absolute top-4 right-4 bg-indigo-600 text-white px-3 py-1 rounded-full text-sm font-medium">
299
+ Идёт торг
300
+ </div>
301
+ </div>
302
+ <div class="p-6">
303
+ <div class="flex justify-between items-start mb-4">
304
+ <div>
305
+ <h3 class="text-xl font-semibold mb-1 text-gray-800">Ночной город</h3>
306
+ <p class="text-gray-600">Масло, холст • 50×70 см</p>
307
+ </div>
308
+ <div class="text-right">
309
+ <p class="text-sm text-gray-500">Текущая цена:</p>
310
+ <p class="text-indigo-600 font-bold text-xl">24,500 ₽</p>
311
+ </div>
312
+ </div>
313
+
314
+ <div class="mb-6">
315
+ <div class="flex justify-between text-sm text-gray-500 mb-1">
316
+ <span>Следующая ставка от:</span>
317
+ <span>25,500 ₽</span>
318
+ </div>
319
+ <div class="w-full bg-gray-200 rounded-full h-2">
320
+ <div class="bg-indigo-600 h-2 rounded-full" style="width: 65%"></div>
321
+ </div>
322
+ </div>
323
+
324
+ <div class="mb-6">
325
+ <p class="text-sm text-gray-500 mb-2">До окончания аукциона:</p>
326
+ <div id="auction1Timer" class="auction-timer text-xl font-bold text-gray-800">
327
+ 2д 6ч 34м 12с
328
+ </div>
329
+ </div>
330
+
331
+ <button class="place-bid-btn w-full bg-indigo-600 hover:bg-indigo-700 text-white py-3 rounded-full font-medium transition">
332
+ Сделать ставку
333
+ </button>
334
+ </div>
335
+ </div>
336
+
337
+ <!-- Auction 2 -->
338
+ <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition">
339
+ <div class="relative">
340
+ <img src="https://images.unsplash.com/photo-1479064555552-3ef4979f8908?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
341
+ alt="Аукционная картина" class="w-full h-64 object-cover">
342
+ <div class="absolute top-4 right-4 bg-indigo-600 text-white px-3 py-1 rounded-full text-sm font-medium">
343
+ Идёт торг
344
+ </div>
345
+ </div>
346
+ <div class="p-6">
347
+ <div class="flex justify-between items-start mb-4">
348
+ <div>
349
+ <h3 class="text-xl font-semibold mb-1 text-gray-800">Далекие горизонты</h3>
350
+ <p class="text-gray-600">Акварель, бумага • 40×60 см</p>
351
+ </div>
352
+ <div class="text-right">
353
+ <p class="text-sm text-gray-500">Текущая цена:</p>
354
+ <p class="text-indigo-600 font-bold text-xl">15,800 ₽</p>
355
+ </div>
356
+ </div>
357
+
358
+ <div class="mb-6">
359
+ <div class="flex justify-between text-sm text-gray-500 mb-1">
360
+ <span>Следующая ставка от:</span>
361
+ <span>16,800 ₽</span>
362
+ </div>
363
+ <div class="w-full bg-gray-200 rounded-full h-2">
364
+ <div class="bg-indigo-600 h-2 rounded-full" style="width: 45%"></div>
365
+ </div>
366
+ </div>
367
+
368
+ <div class="mb-6">
369
+ <p class="text-sm text-gray-500 mb-2">До окончания аукциона:</p>
370
+ <div id="auction2Timer" class="auction-timer text-xl font-bold text-gray-800">
371
+ 1д 3ч 15м 42с
372
+ </div>
373
+ </div>
374
+
375
+ <button class="place-bid-btn w-full bg-indigo-600 hover:bg-indigo-700 text-white py-3 rounded-full font-medium transition">
376
+ Сделать ставку
377
+ </button>
378
+ </div>
379
+ </div>
380
+ </div>
381
+ </div>
382
+ </section>
383
+
384
+ <!-- Custom Art Section -->
385
+ <section id="custom" class="py-16 px-4 bg-white">
386
+ <div class="container mx-auto">
387
+ <div class="text-center mb-12">
388
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Картина на заказ</h2>
389
+ <p class="text-gray-600 max-w-2xl mx-auto">Расскажите нам о картине вашей мечты, и наши художники воплотят ваши идеи в реальность</p>
390
+ </div>
391
+
392
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
393
+ <div class="fade-in">
394
+ <img src="https://images.unsplash.com/photo-1526661295964-905dbe821965?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80"
395
+ alt="Художник за работой" class="rounded-xl shadow-lg w-full h-auto">
396
+ </div>
397
+
398
+ <div class="fade-in">
399
+ <form class="space-y-6">
400
+ <div>
401
+ <label for="artType" class="block text-gray-700 font-medium mb-2">Тип картины</label>
402
+ <select id="artType" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
403
+ <option value="">Выберите тип картины</option>
404
+ <option value="portrait">Портрет</option>
405
+ <option value="landscape">Пейзаж</option>
406
+ <option value="abstract">Абстракция</option>
407
+ <option value="still-life">Натюрморт</option>
408
+ <option value="other">Другое</option>
409
+ </select>
410
+ </div>
411
+
412
+ <div>
413
+ <label for="artSize" class="block text-gray-700 font-medium mb-2">Размер (см)</label>
414
+ <select id="artSize" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
415
+ <option value="">Выберите размер</option>
416
+ <option value="40x50">40×50</option>
417
+ <option value="50x70">50×70</option>
418
+ <option value="60x80">60×80</option>
419
+ <option value="70x90">70×90</option>
420
+ <option value="custom">Нестандартный</option>
421
+ </select>
422
+ </div>
423
+
424
+ <div>
425
+ <label for="artStyle" class="block text-gray-700 font-medium mb-2">Стиль</label>
426
+ <select id="artStyle" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
427
+ <option value="">Выберите стиль</option>
428
+ <option value="realism">Реализм</option>
429
+ <option value="impressionism">Импрессионизм</option>
430
+ <option value="abstract">Абстракция</option>
431
+ <option value="pop-art">Поп-арт</option>
432
+ <option value="other">Другое</option>
433
+ </select>
434
+ </div>
435
+
436
+ <div>
437
+ <label for="artDescription" class="block text-gray-700 font-medium mb-2">Описание</label>
438
+ <textarea id="artDescription" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Опишите вашу идею как можно подробнее..."></textarea>
439
+ </div>
440
+
441
+ <div>
442
+ <label for="artPhoto" class="block text-gray-700 font-medium mb-2">Эталонные изображения (макс. 3)</label>
443
+ <input type="file" id="artPhoto" multiple accept="image/*" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
444
+ </div>
445
+
446
+ <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-4 rounded-full transition transform hover:scale-105">
447
+ Отправить запрос
448
+ </button>
449
+ </form>
450
+ </div>
451
+ </div>
452
+ </div>
453
+ </section>
454
+
455
+ <!-- About Section -->
456
+ <section id="about" class="py-16 px-4 bg-gray-50">
457
+ <div class="container mx-auto">
458
+ <div class="text-center mb-12">
459
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">О ArtCanvas</h2>
460
+ <p class="text-gray-600 max-w-3xl mx-auto">Мы объединяем талантливых художников и ценителей искусства со всего мира</p>
461
+ </div>
462
+
463
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
464
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition text-center">
465
+ <div class="text-indigo-600 mb-4 text-4xl">
466
+ <i class="fas fa-paint-brush"></i>
467
+ </div>
468
+ <h3 class="text-xl font-semibold mb-3 text-gray-800">150+ художников</h3>
469
+ <p class="text-gray-600">Работаем только с профессиональными художниками, прошедшими отбор</p>
470
+ </div>
471
+
472
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition text-center">
473
+ <div class="text-indigo-600 mb-4 text-4xl">
474
+ <i class="fas fa-star"></i>
475
+ </div>
476
+ <h3 class="text-xl font-semibold mb-3 text-gray-800">Гарантия подлинности</h3>
477
+ <p class="text-gray-600">Все произведения сопровождаются сертификатом подлинности</p>
478
+ </div>
479
+
480
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition text-center">
481
+ <div class="text-indigo-600 mb-4 text-4xl">
482
+ <i class="fas fa-truck"></i>
483
+ </div>
484
+ <h3 class="text-xl font-semibold mb-3 text-gray-800">Безопасная доставка</h3>
485
+ <p class="text-gray-600">Идеальная упаковка и страховка каждого произведения при пересылке</p>
486
+ </div>
487
+ </div>
488
+ </div>
489
+ </section>
490
+
491
+ <!-- Cart Drawer -->
492
+ <div id="cartDrawer" class="drawer fixed inset-y-0 right-0 w-full sm:w-96 bg-white shadow-xl z-50 overflow-y-auto closed">
493
+ <div class="p-6">
494
+ <div class="flex justify-between items-center mb-6">
495
+ <h3 class="text-xl font-bold text-gray-800">Корзина</h3>
496
+ <button id="closeCartButton" class="text-gray-500 hover:text-gray-700">
497
+ <i class="fas fa-times text-xl"></i>
498
+ </button>
499
+ </div>
500
+
501
+ <div id="cartItemsContainer" class="space-y-4 mb-6">
502
+ <!-- Cart items will be added here dynamically -->
503
+ </div>
504
+
505
+ <div class="border-t border-gray-200 pt-4 mb-6">
506
+ <div class="flex justify-between mb-2">
507
+ <span class="text-gray-600">Промежуточный итог:</span>
508
+ <span id="cartSubtotal" class="font-medium">0 ₽</span>
509
+ </div>
510
+ <div class="flex justify-between mb-2">
511
+ <span class="text-gray-600">Доставка:</span>
512
+ <span class="font-medium">Рассчитывается</span>
513
+ </div>
514
+ <div class="flex justify-between text-lg font-bold">
515
+ <span>Итого:</span>
516
+ <span id="cartTotal">0 ₽</span>
517
+ </div>
518
+ </div>
519
+
520
+ <button id="checkoutButton" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-4 rounded-full transition transform hover:scale-105">
521
+ Оформить заказ
522
+ </button>
523
+
524
+ <p class="text-center text-gray-500 mt-4 text-sm">Мы гарантируем конфиденциальность ваших данных</p>
525
+ </div>
526
+ </div>
527
+
528
+ <!-- Bid Modal -->
529
+ <div id="bidModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
530
+ <div class="bg-white rounded-xl max-w-md w-full p-6">
531
+ <div class="flex justify-between items-center mb-4">
532
+ <h3 class="text-xl font-bold text-gray-800">Сделать ставку</h3>
533
+ <button id="closeBidModal" class="text-gray-500 hover:text-gray-700">
534
+ <i class="fas fa-times"></i>
535
+ </button>
536
+ </div>
537
+
538
+ <div class="mb-6">
539
+ <p class="text-gray-700 mb-4">Текущая цена: <span id="currentBidPrice" class="font-bold">25,500 ₽</span></p>
540
+ <p class="text-sm text-gray-500 mb-4">Следующая минимальная ставка: <span id="nextBidPrice" class="font-bold">26,500 ₽</span></p>
541
+
542
+ <label for="bidAmount" class="block text-gray-700 font-medium mb-2">Ваша ставка:</label>
543
+ <div class="relative">
544
+ <input type="number" id="bidAmount" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
545
+ <span class="absolute right-4 top-2 text-gray-500">₽</span>
546
+ </div>
547
+ </div>
548
+
549
+ <button id="confirmBid" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-4 rounded-full transition">
550
+ Подтвердить ставку
551
+ </button>
552
+ </div>
553
+ </div>
554
+
555
+ <!-- Footer -->
556
+ <footer class="bg-gray-800 text-white py-12 px-4">
557
+ <div class="container mx-auto">
558
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
559
+ <div>
560
+ <h4 class="text-lg font-semibold mb-4">ArtCanvas</h4>
561
+ <p class="text-gray-400">Искусство доступное каждому. Галерея, аукционы и заказ картин.</p>
562
+ </div>
563
+
564
+ <div>
565
+ <h4 class="text-lg font-semibold mb-4">Меню</h4>
566
+ <ul class="space-y-2">
567
+ <li><a href="#gallery" class="text-gray-400 hover:text-white transition">Галерея</a></li>
568
+ <li><a href="#auctions" class="text-gray-400 hover:text-white transition">Аукционы</a></li>
569
+ <li><a href="#custom" class="text-gray-400 hover:text-white transition">На заказ</a></li>
570
+ <li><a href="#about" class="text-gray-400 hover:text-white transition">О нас</a></li>
571
+ </ul>
572
+ </div>
573
+
574
+ <div>
575
+ <h4 class="text-lg font-semibold mb-4">Контакты</h4>
576
+ <ul class="space-y-2 text-gray-400">
577
+ <li><i class="fas fa-map-marker-alt mr-2"></i> Москва, ул. Искусств, 15</li>
578
+ <li><i class="fas fa-phone mr-2"></i> +7 (495) 123-45-67</li>
579
+ <li><i class="fas fa-envelope mr-2"></i> info@artcanvas.ru</li>
580
+ </ul>
581
+ </div>
582
+
583
+ <div>
584
+ <h4 class="text-lg font-semibold mb-4">Подписаться</h4>
585
+ <p class="text-gray-400 mb-4">Подпишитесь на наши новости и акции</p>
586
+ <div class="flex">
587
+ <input type="email" placeholder="Ваш email" class="px-4 py-2 rounded-l-lg w-full focus:outline-none text-gray-800">
588
+ <button class="bg-indigo-600 hover:bg-indigo-700 px-4 rounded-r-lg transition">
589
+ <i class="fas fa-paper-plane"></i>
590
+ </button>
591
+ </div>
592
+ <div class="flex space-x-4 mt-4">
593
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram text-xl"></i></a>
594
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook text-xl"></i></a>
595
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-telegram text-xl"></i></a>
596
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-youtube text-xl"></i></a>
597
+ </div>
598
+ </div>
599
+ </div>
600
+
601
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400 text-sm">
602
+ <p>© 2023 ArtCanvas. Все права защищены.</p>
603
+ </div>
604
+ </div>
605
+ </footer>
606
+
607
+ <!-- Success Notification -->
608
+ <div id="successNotification" class="hidden fixed bottom-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg">
609
+ <div class="flex items-center">
610
+ <i class="fas fa-check-circle mr-2"></i>
611
+ <span id="notificationMessage">Товар добавлен в корзину</span>
612
+ </div>
613
+ </div>
614
+
615
+ <script>
616
+ // Cart functionality
617
+ const cart = [];
618
+
619
+ // DOM elements
620
+ const cartButton = document.getElementById('cartButton');
621
+ const cartCounter = document.getElementById('cartCounter');
622
+ const cartDrawer = document.getElementById('cartDrawer');
623
+ const closeCartButton = document.getElementById('closeCartButton');
624
+ const cartItemsContainer = document.getElementById('cartItemsContainer');
625
+ const cartSubtotal = document.getElementById('cartSubtotal');
626
+ const cartTotal = document.getElementById('cartTotal');
627
+ const checkoutButton = document.getElementById('checkoutButton');
628
+ const addToCartButtons = document.querySelectorAll('.add-to-cart-btn');
629
+ const addToCartSound = document.getElementById('addToCartSound');
630
+ const purchaseSound = document.getElementById('purchaseSound');
631
+ const bidSound = document.getElementById('bidSound');
632
+ const successNotification = document.getElementById('successNotification');
633
+ const notificationMessage = document.getElementById('notificationMessage');
634
+ const mobileMenuButton = document.getElementById('mobileMenuButton');
635
+ const mobileMenu = document.getElementById('mobileMenu');
636
+ const bidModal = document.getElementById('bidModal');
637
+ const closeBidModal = document.getElementById('closeBidModal');
638
+ const placeBidButtons = document.querySelectorAll('.place-bid-btn');
639
+ const confirmBid = document.getElementById('confirmBid');
640
+ const currentBidPrice = document.getElementById('currentBidPrice');
641
+ const nextBidPrice = document.getElementById('nextBidPrice');
642
+ const bidAmount = document.getElementById('bidAmount');
643
+
644
+ // Mobile menu toggle
645
+ mobileMenuButton.addEventListener('click', () => {
646
+ mobileMenu.classList.toggle('hidden');
647
+ });
648
+
649
+ // Update cart counter
650
+ function updateCartCounter() {
651
+ const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);
652
+ cartCounter.textContent = totalItems;
653
+
654
+ if (totalItems > 0) {
655
+ cartCounter.classList.remove('hidden');
656
+ } else {
657
+ cartCounter.classList.add('hidden');
658
+ }
659
+ }
660
+
661
+ // Calculate cart total
662
+ function calculateCartTotal() {
663
+ const subtotal = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
664
+ cartSubtotal.textContent = `${subtotal.toLocaleString()} ₽`;
665
+ cartTotal.textContent = `${subtotal.toLocaleString()} ₽`;
666
+ }
667
+
668
+ // Render cart items
669
+ function renderCartItems() {
670
+ cartItemsContainer.innerHTML = '';
671
+
672
+ if (cart.length === 0) {
673
+ cartItemsContainer.innerHTML = `
674
+ <div class="text-center py-8">
675
+ <i class="fas fa-shopping-cart text-4xl text-gray-300 mb-4"></i>
676
+ <p class="text-gray-500">Ваша корзина пуста</p>
677
+ </div>
678
+ `;
679
+ checkoutButton.disabled = true;
680
+ return;
681
+ }
682
+
683
+ checkoutButton.disabled = false;
684
+
685
+ cart.forEach(item => {
686
+ const cartItemElement = document.createElement('div');
687
+ cartItemElement.className = 'flex justify-between items-start p-3 bg-gray-50 rounded-lg';
688
+ cartItemElement.innerHTML = `
689
+ <div class="flex items-start space-x-3">
690
+ <img src="${item.image}" alt="${item.title}" class="w-16 h-16 object-cover rounded">
691
+ <div>
692
+ <h4 class="font-medium text-gray-800">${item.title}</h4>
693
+ <p class="text-sm text-gray-500">${item.size}</p>
694
+ <div class="flex items-center mt-1">
695
+ <button class="decrease-quantity text-gray-500 hover:text-indigo-600" data-id="${item.id}">
696
+ <i class="fas fa-minus text-xs"></i>
697
+ </button>
698
+ <span class="quantity mx-2">${item.quantity}</span>
699
+ <button class="increase-quantity text-gray-500 hover:text-indigo-600" data-id="${item.id}">
700
+ <i class="fas fa-plus text-xs"></i>
701
+ </button>
702
+ </div>
703
+ </div>
704
+ </div>
705
+ <div class="text-right">
706
+ <p class="text-indigo-600 font-medium">${(item.price * item.quantity).toLocaleString()} ₽</p>
707
+ <button class="remove-item mt-1 text-xs text-gray-400 hover:text-red-500" data-id="${item.id}">
708
+ Удалить
709
+ </button>
710
+ </div>
711
+ `;
712
+ cartItemsContainer.appendChild(cartItemElement);
713
+ });
714
+
715
+ // Add event listeners to dynamically created buttons
716
+ document.querySelectorAll('.increase-quantity').forEach(button => {
717
+ button.addEventListener('click', () => {
718
+ const id = button.dataset.id;
719
+ const item = cart.find(item => item.id === id);
720
+ item.quantity += 1;
721
+ renderCartItems();
722
+ updateCartCounter();
723
+ calculateCartTotal();
724
+ });
725
+ });
726
+
727
+ document.querySelectorAll('.decrease-quantity').forEach(button => {
728
+ button.addEventListener('click', () => {
729
+ const id = button.dataset.id;
730
+ const item = cart.find(item => item.id === id);
731
+ if (item.quantity > 1) {
732
+ item.quantity -= 1;
733
+ } else {
734
+ const index = cart.findIndex(item => item.id === id);
735
+ cart.splice(index, 1);
736
+ }
737
+ renderCartItems();
738
+ updateCartCounter();
739
+ calculateCartTotal();
740
+ });
741
+ });
742
+
743
+ document.querySelectorAll('.remove-item').forEach(button => {
744
+ button.addEventListener('click', () => {
745
+ const id = button.dataset.id;
746
+ const index = cart.findIndex(item => item.id === id);
747
+ cart.splice(index, 1);
748
+ renderCartItems();
749
+ updateCartCounter();
750
+ calculateCartTotal();
751
+ });
752
+ });
753
+ }
754
+
755
+ // Add to cart
756
+ addToCartButtons.forEach(button => {
757
+ button.addEventListener('click', () => {
758
+ const id = button.dataset.id;
759
+ const title = button.dataset.title;
760
+ const price = parseInt(button.dataset.price);
761
+ const image = button.closest('.artwork-card').querySelector('img').src;
762
+ const size = button.closest('.artwork-card').querySelector('.artwork-overlay p.text-xs').textContent;
763
+
764
+ const existingItem = cart.find(item => item.id === id);
765
+
766
+ if (existingItem) {
767
+ existingItem.quantity += 1;
768
+ } else {
769
+ cart.push({
770
+ id,
771
+ title,
772
+ price,
773
+ image,
774
+ size,
775
+ quantity: 1
776
+ });
777
+ }
778
+
779
+ // Play sound
780
+ addToCartSound.currentTime = 0;
781
+ addToCartSound.play();
782
+
783
+ // Update UI
784
+ updateCartCounter();
785
+ cartCounter.classList.add('cart-pulse');
786
+ setTimeout(() => cartCounter.classList.remove('cart-pulse'), 1000);
787
+
788
+ // Show notification
789
+ notificationMessage.textContent = `"${title}" добавлена в корзину`;
790
+ successNotification.classList.remove('hidden');
791
+ setTimeout(() => successNotification.classList.add('hidden'), 3000);
792
+ });
793
+ });
794
+
795
+ // Cart drawer toggle
796
+ cartButton.addEventListener('click', () => {
797
+ cartDrawer.classList.remove('closed');
798
+ cartDrawer.classList.add('open');
799
+ renderCartItems();
800
+ calculateCartTotal();
801
+ });
802
+
803
+ closeCartButton.addEventListener('click', () => {
804
+ cartDrawer.classList.remove('open');
805
+ cartDrawer.classList.add('closed');
806
+ });
807
+
808
+ // Checkout
809
+ checkoutButton.addEventListener('click', () => {
810
+ purchaseSound.play();
811
+
812
+ // Show notification
813
+ notificationMessage.textContent = 'Ваш заказ успешно оформлен!';
814
+ successNotification.classList.add('bg-green-500');
815
+ successNotification.classList.remove('hidden');
816
+
817
+ // Clear cart
818
+ cart.length = 0;
819
+ renderCartItems();
820
+ updateCartCounter();
821
+
822
+ setTimeout(() => {
823
+ successNotification.classList.add('hidden');
824
+ cartDrawer.classList.remove('open');
825
+ cartDrawer.classList.add('closed');
826
+ }, 3000);
827
+ });
828
+
829
+ // Bid functionality
830
+ placeBidButtons.forEach(button => {
831
+ button.addEventListener('click', () => {
832
+ const currentPrice = button.closest('div').querySelector('p.text-indigo-600').textContent;
833
+ const nextPrice = button.closest('div').querySelector('span:nth-child(2)').textContent;
834
+
835
+ currentBidPrice.textContent = currentPrice;
836
+ nextBidPrice.textContent = nextPrice;
837
+ bidAmount.value = nextPrice.replace(/[^0-9]/g, '');
838
+
839
+ bidModal.classList.remove('hidden');
840
+ document.body.style.overflow = 'hidden';
841
+ });
842
+ });
843
+
844
+ closeBidModal.addEventListener('click', () => {
845
+ bidModal.classList.add('hidden');
846
+ document.body.style.overflow = 'auto';
847
+ });
848
+
849
+ confirmBid.addEventListener('click', () => {
850
+ if (!bidAmount.value || parseInt(bidAmount.value) < parseInt(nextBidPrice.textContent.replace(/[^0-9]/g, ''))) {
851
+ alert(`Ваша ставка должна быть не менее ${nextBidPrice.textContent}`);
852
+ return;
853
+ }
854
+
855
+ bidSound.play();
856
+
857
+ // Show notification
858
+ notificationMessage.textContent = `Ваша ставка ${bidAmount.value} ₽ принята!`;
859
+ successNotification.classList.add('bg-indigo-500');
860
+ successNotification.classList.remove('hidden');
861
+
862
+ bidModal.classList.add('hidden');
863
+ document.body.style.overflow = 'auto';
864
+
865
+ setTimeout(() => {
866
+ successNotification.classList.add('hidden');
867
+ successNotification.classList.remove('bg-indigo-500');
868
+ successNotification.classList.add('bg-green-500');
869
+ }, 3000);
870
+ });
871
+
872
+ // Simulate auction timers
873
+ function updateAuctionTimers() {
874
+ let time1 = document.getElementById('auction1Timer').textContent.split(/[дчмс]/);
875
+ let days1 = parseInt(time1[0]) || 0;
876
+ let hours1 = parseInt(time1[1]) || 0;
877
+ let minutes1 = parseInt(time1[2]) || 0;
878
+ let seconds1 = parseInt(time1[3]) || 0;
879
+
880
+ seconds1--;
881
+ if (seconds1 < 0) {
882
+ seconds1 = 59;
883
+ minutes1--;
884
+ if (minutes1 < 0) {
885
+ minutes1 = 59;
886
+ hours1--;
887
+ if (hours1 < 0) {
888
+ hours1 = 23;
889
+ days1--;
890
+ if (days1 < 0) {
891
+ days1 = 0;
892
+ }
893
+ }
894
+ }
895
+ }
896
+
897
+ document.getElementById('auction1Timer').textContent =
898
+ `${days1}д ${hours1}ч ${minutes1}м ${seconds1}с`;
899
+
900
+ let time2 = document.getElementById('auction2Timer').textContent.split(/[дчмс]/);
901
+ let days2 = parseInt(time2[0]) || 0;
902
+ let hours2 = parseInt(time2[1]) || 0;
903
+ let minutes2 = parseInt(time2[2]) || 0;
904
+ let seconds2 = parseInt(time2[3]) || 0;
905
+
906
+ seconds2--;
907
+ if (seconds2 < 0) {
908
+ seconds2 = 59;
909
+ minutes2--;
910
+ if (minutes2 < 0) {
911
+ minutes2 = 59;
912
+ hours2--;
913
+ if (hours2 < 0) {
914
+ hours2 = 23;
915
+ days2--;
916
+ if (days2 < 0) {
917
+ days2 = 0;
918
+ }
919
+ }
920
+ }
921
+ }
922
+
923
+ document.getElementById('auction2Timer').textContent =
924
+ `${days2}д ${hours2}ч ${minutes2}м ${seconds2}с`;
925
+ }
926
+
927
+ setInterval(updateAuctionTimers, 1000);
928
+
929
+ // Animate elements on scroll
930
+ function animateOnScroll() {
931
+ const elements = document.querySelectorAll('.fade-in');
932
+
933
+ elements.forEach(element => {
934
+ const elementPosition = element.getBoundingClientRect().top;
935
+ const screenPosition = window.innerHeight / 1.3;
936
+
937
+ if (elementPosition < screenPosition) {
938
+ element.style.animation = 'fadeIn 0.5s ease-out forwards';
939
+ }
940
+ });
941
+ }
942
+
943
+ window.addEventListener('scroll', animateOnScroll);
944
+
945
+ // Initial animation on load
946
+ document.addEventListener('DOMContentLoaded', () => {
947
+ setTimeout(() => {
948
+ document.querySelectorAll('.fade-in').forEach(element => {
949
+ element.style.animation = 'fadeIn 0.5s ease-out forwards';
950
+ });
951
+ }, 500);
952
+ });
953
+ </script>
954
+ <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=gurwa/ruart" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
955
+ </html>