Hugging Face's logo

Spaces:
lastLord
/
ss
Running

App Files Community
lastLord commited on
Commit
e92aef8
·
verified ·
1 Parent(s): 92a6f29

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +580 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ss
3
- emoji: 🌖
4
- colorFrom: gray
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: ss
3
+ emoji: 🐳
4
+ colorFrom: pink
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,580 @@
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>WallHub - Лучшие обои для устройств</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 float {
11
+ 0%, 100% { transform: translateY(0); }
12
+ 50% { transform: translateY(-10px); }
13
+ }
14
+ .floating {
15
+ animation: float 3s ease-in-out infinite;
16
+ }
17
+ .fade-in {
18
+ animation: fadeIn 0.5s ease-in;
19
+ }
20
+ @keyframes fadeIn {
21
+ from { opacity: 0; }
22
+ to { opacity: 1; }
23
+ }
24
+ .grid-item {
25
+ transition: all 0.3s ease;
26
+ }
27
+ .grid-item:hover {
28
+ transform: scale(1.03);
29
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
30
+ }
31
+ .menu-item {
32
+ position: relative;
33
+ }
34
+ .menu-item::after {
35
+ content: '';
36
+ position: absolute;
37
+ width: 0;
38
+ height: 2px;
39
+ bottom: 0;
40
+ left: 0;
41
+ background-color: #3b82f6;
42
+ transition: width 0.3s ease;
43
+ }
44
+ .menu-item:hover::after {
45
+ width: 100%;
46
+ }
47
+ .dropdown-menu {
48
+ opacity: 0;
49
+ visibility: hidden;
50
+ transition: all 0.3s ease;
51
+ }
52
+ .dropdown:hover .dropdown-menu {
53
+ opacity: 1;
54
+ visibility: visible;
55
+ }
56
+ </style>
57
+ </head>
58
+ <body class="bg-gray-900 text-gray-100 min-h-screen">
59
+ <!-- Header -->
60
+ <header class="sticky top-0 z-50 bg-gray-800/90 backdrop-blur-md shadow-lg">
61
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
62
+ <!-- Logo -->
63
+ <div class="flex items-center space-x-2">
64
+ <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center floating">
65
+ <i class="fas fa-image text-white text-xl"></i>
66
+ </div>
67
+ <h1 class="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">WallHub</h1>
68
+ </div>
69
+
70
+ <!-- Mobile menu button -->
71
+ <button id="mobile-menu-button" class="md:hidden text-gray-300 hover:text-white focus:outline-none">
72
+ <i class="fas fa-bars text-2xl"></i>
73
+ </button>
74
+
75
+ <!-- Desktop Navigation -->
76
+ <nav class="hidden md:flex space-x-8">
77
+ <div class="dropdown relative">
78
+ <button class="menu-item flex items-center space-x-1 py-2 px-1 text-gray-300 hover:text-white transition">
79
+ <span>Категории</span>
80
+ <i class="fas fa-chevron-down text-xs mt-1"></i>
81
+ </button>
82
+ <div class="dropdown-menu absolute left-0 mt-2 w-48 bg-gray-800 rounded-md shadow-xl py-1 z-50">
83
+ <a href="#" class="block px-4 py-2 text-gray-300 hover:bg-gray-700 hover:text-white">Для ПК</a>
84
+ <a href="#" class="block px-4 py-2 text-gray-300 hover:bg-gray-700 hover:text-white">Для смартфонов</a>
85
+ <a href="#" class="block px-4 py-2 text-gray-300 hover:bg-gray-700 hover:text-white">4K Обои</a>
86
+ <a href="#" class="block px-4 py-2 text-gray-300 hover:bg-gray-700 hover:text-white">Минимализм</a>
87
+ <a href="#" class="block px-4 py-2 text-gray-300 hover:bg-gray-700 hover:text-white">Природа</a>
88
+ </div>
89
+ </div>
90
+ <a href="#" class="menu-item py-2 px-1 text-gray-300 hover:text-white transition">Популярные</a>
91
+ <a href="#" class="menu-item py-2 px-1 text-gray-300 hover:text-white transition">Новые</a>
92
+ <a href="#" class="menu-item py-2 px-1 text-gray-300 hover:text-white transition">Коллекции</a>
93
+ </nav>
94
+
95
+ <!-- Search and User -->
96
+ <div class="hidden md:flex items-center space-x-4">
97
+ <div class="relative">
98
+ <input type="text" placeholder="Поиск обоев..." class="bg-gray-700 rounded-full py-2 px-4 pl-10 text-white focus:outline-none focus:ring-2 focus:ring-blue-500 w-64">
99
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
100
+ </div>
101
+ <button class="w-10 h-10 rounded-full bg-gray-700 hover:bg-gray-600 flex items-center justify-center transition">
102
+ <i class="fas fa-user text-gray-300"></i>
103
+ </button>
104
+ </div>
105
+ </div>
106
+
107
+ <!-- Mobile Menu -->
108
+ <div id="mobile-menu" class="hidden md:hidden bg-gray-800 px-4 py-2">
109
+ <div class="mb-3">
110
+ <input type="text" placeholder="Поиск обоев..." class="bg-gray-700 rounded-full py-2 px-4 pl-10 text-white focus:outline-none focus:ring-2 focus:ring-blue-500 w-full">
111
+ <i class="fas fa-search absolute left-7 top-[72px] text-gray-400"></i>
112
+ </div>
113
+ <a href="#" class="block py-2 px-2 text-gray-300 hover:bg-gray-700 hover:text-white rounded">Для ПК</a>
114
+ <a href="#" class="block py-2 px-2 text-gray-300 hover:bg-gray-700 hover:text-white rounded">Для смартфонов</a>
115
+ <a href="#" class="block py-2 px-2 text-gray-300 hover:bg-gray-700 hover:text-white rounded">Популярные</a>
116
+ <a href="#" class="block py-2 px-2 text-gray-300 hover:bg-gray-700 hover:text-white rounded">Новые</a>
117
+ <a href="#" class="block py-2 px-2 text-gray-300 hover:bg-gray-700 hover:text-white rounded">Коллекции</a>
118
+ <div class="pt-2 mt-2 border-t border-gray-700">
119
+ <button class="w-full py-2 px-2 text-left text-gray-300 hover:bg-gray-700 hover:text-white rounded flex items-center">
120
+ <i class="fas fa-user mr-2"></i> Войти
121
+ </button>
122
+ </div>
123
+ </div>
124
+ </header>
125
+
126
+ <!-- Hero Section -->
127
+ <section class="relative bg-gradient-to-br from-gray-800 to-gray-900 py-16 md:py-24">
128
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
129
+ <div class="md:w-1/2 mb-10 md:mb-0 fade-in">
130
+ <h2 class="text-4xl md:text-5xl font-bold mb-4">Найдите идеальные обои</h2>
131
+ <p class="text-xl text-gray-300 mb-6">Тысячи высококачественных обоев для вашего рабочего стола или смартфона. Бесплатно и без регистрации.</p>
132
+ <div class="flex space-x-4">
133
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-full font-medium transition flex items-center">
134
+ <i class="fas fa-download mr-2"></i> Скачать все
135
+ </button>
136
+ <button class="bg-gray-700 hover:bg-gray-600 text-white px-6 py-3 rounded-full font-medium transition flex items-center">
137
+ <i class="fas fa-heart mr-2"></i> Избранное
138
+ </button>
139
+ </div>
140
+ </div>
141
+ <div class="md:w-1/2 flex justify-center fade-in">
142
+ <div class="relative w-full max-w-md">
143
+ <div class="absolute -top-10 -left-10 w-32 h-32 bg-blue-500 rounded-full opacity-20 animate-pulse"></div>
144
+ <div class="absolute -bottom-10 -right-10 w-40 h-40 bg-purple-500 rounded-full opacity-20 animate-pulse delay-300"></div>
145
+ <div class="relative bg-gray-800 p-2 rounded-2xl shadow-2xl">
146
+ <div class="bg-gray-900 rounded-xl overflow-hidden">
147
+ <img src="https://source.unsplash.com/random/600x400/?nature" alt="Nature Wallpaper" class="w-full h-auto">
148
+ <div class="p-4">
149
+ <div class="flex justify-between items-center mb-2">
150
+ <h3 class="font-medium">Горный пейзаж</h3>
151
+ <div class="flex space-x-2">
152
+ <button class="text-gray-400 hover:text-blue-500 transition">
153
+ <i class="fas fa-heart"></i>
154
+ </button>
155
+ <button class="text-gray-400 hover:text-blue-500 transition">
156
+ <i class="fas fa-download"></i>
157
+ </button>
158
+ </div>
159
+ </div>
160
+ <div class="flex justify-between text-sm text-gray-400">
161
+ <span>2560x1440</span>
162
+ <span>4K</span>
163
+ </div>
164
+ </div>
165
+ </div>
166
+ </div>
167
+ </div>
168
+ </div>
169
+ </div>
170
+ </section>
171
+
172
+ <!-- Categories -->
173
+ <section class="py-12 bg-gray-900">
174
+ <div class="container mx-auto px-4">
175
+ <h2 class="text-3xl font-bold mb-8 text-center">Популярные категории</h2>
176
+ <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
177
+ <a href="#" class="category-card bg-gray-800 rounded-xl overflow-hidden transition hover:bg-gray-700 group">
178
+ <div class="aspect-w-16 aspect-h-9 relative">
179
+ <img src="https://source.unsplash.com/random/300x200/?nature" alt="Nature" class="w-full h-full object-cover">
180
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-4">
181
+ <h3 class="text-white font-medium group-hover:text-blue-400 transition">Природа</h3>
182
+ </div>
183
+ </div>
184
+ </a>
185
+ <a href="#" class="category-card bg-gray-800 rounded-xl overflow-hidden transition hover:bg-gray-700 group">
186
+ <div class="aspect-w-16 aspect-h-9 relative">
187
+ <img src="https://source.unsplash.com/random/300x200/?city" alt="City" class="w-full h-full object-cover">
188
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-4">
189
+ <h3 class="text-white font-medium group-hover:text-blue-400 transition">Город</h3>
190
+ </div>
191
+ </div>
192
+ </a>
193
+ <a href="#" class="category-card bg-gray-800 rounded-xl overflow-hidden transition hover:bg-gray-700 group">
194
+ <div class="aspect-w-16 aspect-h-9 relative">
195
+ <img src="https://source.unsplash.com/random/300x200/?space" alt="Space" class="w-full h-full object-cover">
196
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-4">
197
+ <h3 class="text-white font-medium group-hover:text-blue-400 transition">Космос</h3>
198
+ </div>
199
+ </div>
200
+ </a>
201
+ <a href="#" class="category-card bg-gray-800 rounded-xl overflow-hidden transition hover:bg-gray-700 group">
202
+ <div class="aspect-w-16 aspect-h-9 relative">
203
+ <img src="https://source.unsplash.com/random/300x200/?abstract" alt="Abstract" class="w-full h-full object-cover">
204
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-4">
205
+ <h3 class="text-white font-medium group-hover:text-blue-400 transition">Абстракция</h3>
206
+ </div>
207
+ </div>
208
+ </a>
209
+ <a href="#" class="category-card bg-gray-800 rounded-xl overflow-hidden transition hover:bg-gray-700 group">
210
+ <div class="aspect-w-16 aspect-h-9 relative">
211
+ <img src="https://source.unsplash.com/random/300x200/?minimal" alt="Minimal" class="w-full h-full object-cover">
212
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-4">
213
+ <h3 class="text-white font-medium group-hover:text-blue-400 transition">Минимализм</h3>
214
+ </div>
215
+ </div>
216
+ </a>
217
+ <a href="#" class="category-card bg-gray-800 rounded-xl overflow-hidden transition hover:bg-gray-700 group">
218
+ <div class="aspect-w-16 aspect-h-9 relative">
219
+ <img src="https://source.unsplash.com/random/300x200/?anime" alt="Anime" class="w-full h-full object-cover">
220
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-4">
221
+ <h3 class="text-white font-medium group-hover:text-blue-400 transition">Аниме</h3>
222
+ </div>
223
+ </div>
224
+ </a>
225
+ </div>
226
+ </div>
227
+ </section>
228
+
229
+ <!-- Wallpapers Grid -->
230
+ <section class="py-12 bg-gray-900">
231
+ <div class="container mx-auto px-4">
232
+ <div class="flex justify-between items-center mb-8">
233
+ <h2 class="text-3xl font-bold">Новые обои</h2>
234
+ <div class="flex space-x-2">
235
+ <button class="bg-gray-800 hover:bg-gray-700 px-4 py-2 rounded-lg transition">
236
+ <i class="fas fa-th-large"></i>
237
+ </button>
238
+ <button class="bg-gray-800 hover:bg-gray-700 px-4 py-2 rounded-lg transition">
239
+ <i class="fas fa-th-list"></i>
240
+ </button>
241
+ </div>
242
+ </div>
243
+
244
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
245
+ <!-- Wallpaper Item 1 -->
246
+ <div class="grid-item bg-gray-800 rounded-xl overflow-hidden transition">
247
+ <div class="relative">
248
+ <img src="https://source.unsplash.com/random/600x400/?mountain" alt="Mountain" class="w-full h-48 sm:h-56 object-cover">
249
+ <div class="absolute top-3 right-3 flex space-x-2">
250
+ <button class="w-8 h-8 bg-gray-900/70 hover:bg-gray-800 rounded-full flex items-center justify-center transition">
251
+ <i class="fas fa-heart text-white text-sm"></i>
252
+ </button>
253
+ <button class="w-8 h-8 bg-gray-900/70 hover:bg-gray-800 rounded-full flex items-center justify-center transition">
254
+ <i class="fas fa-download text-white text-sm"></i>
255
+ </button>
256
+ </div>
257
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4">
258
+ <h3 class="text-white font-medium">Горный хребет</h3>
259
+ <div class="flex justify-between text-xs text-gray-300 mt-1">
260
+ <span>3840x2160</span>
261
+ <span>4K</span>
262
+ </div>
263
+ </div>
264
+ </div>
265
+ </div>
266
+
267
+ <!-- Wallpaper Item 2 -->
268
+ <div class="grid-item bg-gray-800 rounded-xl overflow-hidden transition">
269
+ <div class="relative">
270
+ <img src="https://source.unsplash.com/random/600x400/?ocean" alt="Ocean" class="w-full h-48 sm:h-56 object-cover">
271
+ <div class="absolute top-3 right-3 flex space-x-2">
272
+ <button class="w-8 h-8 bg-gray-900/70 hover:bg-gray-800 rounded-full flex items-center justify-center transition">
273
+ <i class="fas fa-heart text-white text-sm"></i>
274
+ </button>
275
+ <button class="w-8 h-8 bg-gray-900/70 hover:bg-gray-800 rounded-full flex items-center justify-center transition">
276
+ <i class="fas fa-download text-white text-sm"></i>
277
+ </button>
278
+ </div>
279
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4">
280
+ <h3 class="text-white font-medium">Океанский закат</h3>
281
+ <div class="flex justify-between text-xs text-gray-300 mt-1">
282
+ <span>2560x1440</span>
283
+ <span>QHD</span>
284
+ </div>
285
+ </div>
286
+ </div>
287
+ </div>
288
+
289
+ <!-- Wallpaper Item 3 -->
290
+ <div class="grid-item bg-gray-800 rounded-xl overflow-hidden transition">
291
+ <div class="relative">
292
+ <img src="https://source.unsplash.com/random/600x400/?forest" alt="Forest" class="w-full h-48 sm:h-56 object-cover">
293
+ <div class="absolute top-3 right-3 flex space-x-2">
294
+ <button class="w-8 h-8 bg-gray-900/70 hover:bg-gray-800 rounded-full flex items-center justify-center transition">
295
+ <i class="fas fa-heart text-white text-sm"></i>
296
+ </button>
297
+ <button class="w-8 h-8 bg-gray-900/70 hover:bg-gray-800 rounded-full flex items-center justify-center transition">
298
+ <i class="fas fa-download text-white text-sm"></i>
299
+ </button>
300
+ </div>
301
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4">
302
+ <h3 class="text-white font-medium">Туманный лес</h3>
303
+ <div class="flex justify-between text-xs text-gray-300 mt-1">
304
+ <span>1920x1080</span>
305
+ <span>Full HD</span>
306
+ </div>
307
+ </div>
308
+ </div>
309
+ </div>
310
+
311
+ <!-- Wallpaper Item 4 -->
312
+ <div class="grid-item bg-gray-800 rounded-xl overflow-hidden transition">
313
+ <div class="relative">
314
+ <img src="https://source.unsplash.com/random/600x400/?desert" alt="Desert" class="w-full h-48 sm:h-56 object-cover">
315
+ <div class="absolute top-3 right-3 flex space-x-2">
316
+ <button class="w-8 h-8 bg-gray-900/70 hover:bg-gray-800 rounded-full flex items-center justify-center transition">
317
+ <i class="fas fa-heart text-white text-sm"></i>
318
+ </button>
319
+ <button class="w-8 h-8 bg-gray-900/70 hover:bg-gray-800 rounded-full flex items-center justify-center transition">
320
+ <i class="fas fa-download text-white text-sm"></i>
321
+ </button>
322
+ </div>
323
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4">
324
+ <h3 class="text-white font-medium">Бескрайняя пустыня</h3>
325
+ <div class="flex justify-between text-xs text-gray-300 mt-1">
326
+ <span>5120x2880</span>
327
+ <span>5K</span>
328
+ </div>
329
+ </div>
330
+ </div>
331
+ </div>
332
+
333
+ <!-- Wallpaper Item 5 -->
334
+ <div class="grid-item bg-gray-800 rounded-xl overflow-hidden transition">
335
+ <div class="relative">
336
+ <img src="https://source.unsplash.com/random/600x400/?night" alt="Night" class="w-full h-48 sm:h-56 object-cover">
337
+ <div class="absolute top-3 right-3 flex space-x-2">
338
+ <button class="w-8 h-8 bg-gray-900/70 hover:bg-gray-800 rounded-full flex items-center justify-center transition">
339
+ <i class="fas fa-heart text-white text-sm"></i>
340
+ </button>
341
+ <button class="w-8 h-8 bg-gray-900/70 hover:bg-gray-800 rounded-full flex items-center justify-center transition">
342
+ <i class="fas fa-download text-white text-sm"></i>
343
+ </button>
344
+ </div>
345
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4">
346
+ <h3 class="text-white font-medium">Звездная ночь</h3>
347
+ <div class="flex justify-between text-xs text-gray-300 mt-1">
348
+ <span>3840x2160</span>
349
+ <span>4K</span>
350
+ </div>
351
+ </div>
352
+ </div>
353
+ </div>
354
+
355
+ <!-- Wallpaper Item 6 -->
356
+ <div class="grid-item bg-gray-800 rounded-xl overflow-hidden transition">
357
+ <div class="relative">
358
+ <img src="https://source.unsplash.com/random/600x400/?waterfall" alt="Waterfall" class="w-full h-48 sm:h-56 object-cover">
359
+ <div class="absolute top-3 right-3 flex space-x-2">
360
+ <button class="w-8 h-8 bg-gray-900/70 hover:bg-gray-800 rounded-full flex items-center justify-center transition">
361
+ <i class="fas fa-heart text-white text-sm"></i>
362
+ </button>
363
+ <button class="w-8 h-8 bg-gray-900/70 hover:bg-gray-800 rounded-full flex items-center justify-center transition">
364
+ <i class="fas fa-download text-white text-sm"></i>
365
+ </button>
366
+ </div>
367
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4">
368
+ <h3 class="text-white font-medium">Горный водопад</h3>
369
+ <div class="flex justify-between text-xs text-gray-300 mt-1">
370
+ <span>2560x1440</span>
371
+ <span>QHD</span>
372
+ </div>
373
+ </div>
374
+ </div>
375
+ </div>
376
+
377
+ <!-- Wallpaper Item 7 -->
378
+ <div class="grid-item bg-gray-800 rounded-xl overflow-hidden transition">
379
+ <div class="relative">
380
+ <img src="https://source.unsplash.com/random/600x400/?aurora" alt="Aurora" class="w-full h-48 sm:h-56 object-cover">
381
+ <div class="absolute top-3 right-3 flex space-x-2">
382
+ <button class="w-8 h-8 bg-gray-900/70 hover:bg-gray-800 rounded-full flex items-center justify-center transition">
383
+ <i class="fas fa-heart text-white text-sm"></i>
384
+ </button>
385
+ <button class="w-8 h-8 bg-gray-900/70 hover:bg-gray-800 rounded-full flex items-center justify-center transition">
386
+ <i class="fas fa-download text-white text-sm"></i>
387
+ </button>
388
+ </div>
389
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4">
390
+ <h3 class="text-white font-medium">Северное сияние</h3>
391
+ <div class="flex justify-between text-xs text-gray-300 mt-1">
392
+ <span>3840x2160</span>
393
+ <span>4K</span>
394
+ </div>
395
+ </div>
396
+ </div>
397
+ </div>
398
+
399
+ <!-- Wallpaper Item 8 -->
400
+ <div class="grid-item bg-gray-800 rounded-xl overflow-hidden transition">
401
+ <div class="relative">
402
+ <img src="https://source.unsplash.com/random/600x400/?sunset" alt="Sunset" class="w-full h-48 sm:h-56 object-cover">
403
+ <div class="absolute top-3 right-3 flex space-x-2">
404
+ <button class="w-8 h-8 bg-gray-900/70 hover:bg-gray-800 rounded-full flex items-center justify-center transition">
405
+ <i class="fas fa-heart text-white text-sm"></i>
406
+ </button>
407
+ <button class="w-8 h-8 bg-gray-900/70 hover:bg-gray-800 rounded-full flex items-center justify-center transition">
408
+ <i class="fas fa-download text-white text-sm"></i>
409
+ </button>
410
+ </div>
411
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4">
412
+ <h3 class="text-white font-medium">Закат на пляже</h3>
413
+ <div class="flex justify-between text-xs text-gray-300 mt-1">
414
+ <span>1920x1080</span>
415
+ <span>Full HD</span>
416
+ </div>
417
+ </div>
418
+ </div>
419
+ </div>
420
+ </div>
421
+
422
+ <div class="mt-10 text-center">
423
+ <button class="bg-gray-800 hover:bg-gray-700 text-white px-6 py-3 rounded-full font-medium transition">
424
+ Показать еще
425
+ </button>
426
+ </div>
427
+ </div>
428
+ </section>
429
+
430
+ <!-- Features -->
431
+ <section class="py-16 bg-gray-800">
432
+ <div class="container mx-auto px-4">
433
+ <h2 class="text-3xl font-bold mb-12 text-center">Почему выбирают нас?</h2>
434
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
435
+ <div class="bg-gray-900 p-6 rounded-xl hover:bg-gray-800 transition group">
436
+ <div class="w-14 h-14 bg-blue-600 rounded-full flex items-center justify-center mb-4 group-hover:bg-blue-500 transition">
437
+ <i class="fas fa-image text-white text-2xl"></i>
438
+ </div>
439
+ <h3 class="text-xl font-bold mb-2">Высокое качество</h3>
440
+ <p class="text-gray-400">Все обои проходят тщательный отбор и проверку качества. Только лучшие изображения в высоком разрешении.</p>
441
+ </div>
442
+ <div class="bg-gray-900 p-6 rounded-xl hover:bg-gray-800 transition group">
443
+ <div class="w-14 h-14 bg-purple-600 rounded-full flex items-center justify-center mb-4 group-hover:bg-purple-500 transition">
444
+ <i class="fas fa-mobile-alt text-white text-2xl"></i>
445
+ </div>
446
+ <h3 class="text-xl font-bold mb-2">Оптимизация</h3>
447
+ <p class="text-gray-400">Каждое изображение оптимизировано для разных устройств. Выберите подходящее разрешение для вашего экрана.</p>
448
+ </div>
449
+ <div class="bg-gray-900 p-6 rounded-xl hover:bg-gray-800 transition group">
450
+ <div class="w-14 h-14 bg-green-600 rounded-full flex items-center justify-center mb-4 group-hover:bg-green-500 transition">
451
+ <i class="fas fa-cloud-download-alt text-white text-2xl"></i>
452
+ </div>
453
+ <h3 class="text-xl font-bold mb-2">Быстрая загрузка</h3>
454
+ <p class="text-gray-400">Быстрая загрузка без ограничений и без регистрации. Скачивайте столько обоев, сколько вам нужно.</p>
455
+ </div>
456
+ </div>
457
+ </div>
458
+ </section>
459
+
460
+ <!-- Footer -->
461
+ <footer class="bg-gray-900 py-12">
462
+ <div class="container mx-auto px-4">
463
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
464
+ <div>
465
+ <div class="flex items-center space-x-2 mb-4">
466
+ <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center">
467
+ <i class="fas fa-image text-white text-xl"></i>
468
+ </div>
469
+ <h3 class="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">WallHub</h3>
470
+ </div>
471
+ <p class="text-gray-400 mb-4">Лучшие обои для ваших устройств. Бесплатно и без ограничений.</p>
472
+ <div class="flex space-x-4">
473
+ <a href="#" class="text-gray-400 hover:text-white transition">
474
+ <i class="fab fa-facebook-f"></i>
475
+ </a>
476
+ <a href="#" class="text-gray-400 hover:text-white transition">
477
+ <i class="fab fa-twitter"></i>
478
+ </a>
479
+ <a href="#" class="text-gray-400 hover:text-white transition">
480
+ <i class="fab fa-instagram"></i>
481
+ </a>
482
+ <a href="#" class="text-gray-400 hover:text-white transition">
483
+ <i class="fab fa-pinterest"></i>
484
+ </a>
485
+ </div>
486
+ </div>
487
+ <div>
488
+ <h4 class="text-lg font-bold mb-4">Категории</h4>
489
+ <ul class="space-y-2">
490
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Для ПК</a></li>
491
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Для смартфонов</a></li>
492
+ <li><a href="#" class="text-gray-400 hover:text-white transition">4K Обои</a></li>
493
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Минимализм</a></li>
494
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Природа</a></li>
495
+ </ul>
496
+ </div>
497
+ <div>
498
+ <h4 class="text-lg font-bold mb-4">Информация</h4>
499
+ <ul class="space-y-2">
500
+ <li><a href="#" class="text-gray-400 hover:text-white transition">О нас</a></li>
501
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Контакты</a></li>
502
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Политика конфиденциальности</a></li>
503
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Условия использования</a></li>
504
+ <li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li>
505
+ </ul>
506
+ </div>
507
+ <div>
508
+ <h4 class="text-lg font-bold mb-4">Подписаться</h4>
509
+ <p class="text-gray-400 mb-4">Получайте уведомления о новых обоях прямо на вашу почту.</p>
510
+ <div class="flex">
511
+ <input type="email" placeholder="Ваш email" class="bg-gray-800 text-white px-4 py-2 rounded-l-lg focus:outline-none w-full">
512
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-r-lg transition">
513
+ <i class="fas fa-paper-plane"></i>
514
+ </button>
515
+ </div>
516
+ </div>
517
+ </div>
518
+ <div class="border-t border-gray-800 mt-10 pt-6 text-center text-gray-500">
519
+ <p>&copy; 2023 WallHub. Все права защищены.</p>
520
+ </div>
521
+ </div>
522
+ </footer>
523
+
524
+ <!-- Back to top button -->
525
+ <button id="back-to-top" class="fixed bottom-6 right-6 w-12 h-12 bg-gray-800 hover:bg-gray-700 rounded-full flex items-center justify-center shadow-lg transition opacity-0 invisible">
526
+ <i class="fas fa-arrow-up text-white"></i>
527
+ </button>
528
+
529
+ <script>
530
+ // Mobile menu toggle
531
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
532
+ const mobileMenu = document.getElementById('mobile-menu');
533
+
534
+ mobileMenuButton.addEventListener('click', () => {
535
+ mobileMenu.classList.toggle('hidden');
536
+ });
537
+
538
+ // Back to top button
539
+ const backToTopButton = document.getElementById('back-to-top');
540
+
541
+ window.addEventListener('scroll', () => {
542
+ if (window.pageYOffset > 300) {
543
+ backToTopButton.classList.remove('opacity-0', 'invisible');
544
+ backToTopButton.classList.add('opacity-100', 'visible');
545
+ } else {
546
+ backToTopButton.classList.remove('opacity-100', 'visible');
547
+ backToTopButton.classList.add('opacity-0', 'invisible');
548
+ }
549
+ });
550
+
551
+ backToTopButton.addEventListener('click', () => {
552
+ window.scrollTo({
553
+ top: 0,
554
+ behavior: 'smooth'
555
+ });
556
+ });
557
+
558
+ // Image hover effect
559
+ const gridItems = document.querySelectorAll('.grid-item');
560
+
561
+ gridItems.forEach(item => {
562
+ const img = item.querySelector('img');
563
+ const originalSrc = img.src;
564
+
565
+ item.addEventListener('mouseenter', () => {
566
+ // You could add a hover effect here, like loading a higher quality image
567
+ });
568
+
569
+ item.addEventListener('mouseleave', () => {
570
+ img.src = originalSrc;
571
+ });
572
+ });
573
+
574
+ // Random wallpaper generator for demo
575
+ function getRandomWallpaper(category) {
576
+ return `https://source.unsplash.com/random/600x400/?${category}`;
577
+ }
578
+ </script>
579
+ <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=lastLord/ss" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
580
+ </html>