Hugging Face's logo

Spaces:
block
/
pixel
Running

App Files Community
block commited on
Commit
92033c2
·
verified ·
1 Parent(s): 144be8e

build image search platform homepage. The application must be pixel-perfect, responsive, and scalable, supporting over 10 million monthly active users globally. accessibility standards (WCAG 2.1 AA) 1. **Layout** : - **Hero** : Contains the logo, search bar, and login button. - **Search Bar** : Supports drag-and-drop functionality and includes a camera icon for image uploads. - **Popular Searches** : Displays trending search terms horizontally. - **Feature Cards** : Grid layout with cards for features like "Image creation," "Image Editing," etc. - **Image Gallery** : Displays a masonry grid of images with hover effects and captions. Use https://picsum.photos/ for image holder - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +602 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Pixel
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: pixel
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: purple
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,602 @@
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="en" class="scroll-smooth">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>PixSearch - Find & Create Stunning Images</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
+ /* Custom styles for masonry layout and accessibility */
11
+ .masonry {
12
+ column-count: 1;
13
+ column-gap: 1rem;
14
+ }
15
+
16
+ @media (min-width: 640px) {
17
+ .masonry {
18
+ column-count: 2;
19
+ }
20
+ }
21
+
22
+ @media (min-width: 768px) {
23
+ .masonry {
24
+ column-count: 3;
25
+ }
26
+ }
27
+
28
+ @media (min-width: 1024px) {
29
+ .masonry {
30
+ column-count: 4;
31
+ }
32
+ }
33
+
34
+ .masonry-item {
35
+ break-inside: avoid;
36
+ margin-bottom: 1rem;
37
+ }
38
+
39
+ .search-drop-zone {
40
+ border: 2px dashed #e5e7eb;
41
+ transition: all 0.3s ease;
42
+ }
43
+
44
+ .search-drop-zone.active {
45
+ border-color: #3b82f6;
46
+ background-color: #eff6ff;
47
+ }
48
+
49
+ /* Focus styles for accessibility */
50
+ *:focus-visible {
51
+ outline: 2px solid #3b82f6;
52
+ outline-offset: 2px;
53
+ }
54
+
55
+ /* Skip to content link for screen readers */
56
+ .skip-link {
57
+ position: absolute;
58
+ left: -9999px;
59
+ top: 0;
60
+ background: #000;
61
+ color: white;
62
+ padding: 0.5rem;
63
+ z-index: 100;
64
+ }
65
+
66
+ .skip-link:focus {
67
+ left: 0;
68
+ }
69
+
70
+ /* Image hover effect */
71
+ .image-card {
72
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
73
+ }
74
+
75
+ .image-card:hover {
76
+ transform: translateY(-4px);
77
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
78
+ }
79
+
80
+ .image-overlay {
81
+ opacity: 0;
82
+ transition: opacity 0.3s ease;
83
+ }
84
+
85
+ .image-card:hover .image-overlay {
86
+ opacity: 1;
87
+ }
88
+ </style>
89
+ </head>
90
+ <body class="bg-gray-50 text-gray-900 font-sans antialiased">
91
+ <!-- Skip to content link for accessibility -->
92
+ <a href="#main-content" class="skip-link">Skip to main content</a>
93
+
94
+ <!-- Header/Navigation -->
95
+ <header class="sticky top-0 z-50 bg-white shadow-sm">
96
+ <div class="container mx-auto px-4 py-3 flex items-center justify-between">
97
+ <div class="flex items-center space-x-8">
98
+ <a href="#" class="flex items-center" aria-label="PixSearch Home">
99
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#3b82f6" class="w-8 h-8">
100
+ <path fill-rule="evenodd" d="M1.5 6a2.25 2.25 0 012.25-2.25h16.5A2.25 2.25 0 0122.5 6v12a2.25 2.25 0 01-2.25 2.25H3.75A2.25 2.25 0 011.5 18V6zM3 16.06V18c0 .414.336.75.75.75h16.5A.75.75 0 0021 18v-1.94l-2.69-2.689a1.5 1.5 0 00-2.12 0l-.88.879.97.97a.75.75 0 11-1.06 1.06l-5.16-5.159a1.5 1.5 0 00-2.12 0L3 16.061zm10.125-7.81a1.125 1.125 0 112.25 0 1.125 1.125 0 01-2.25 0z" clip-rule="evenodd" />
101
+ </svg>
102
+ <span class="ml-2 text-xl font-bold text-blue-600">PixSearch</span>
103
+ </a>
104
+ <nav class="hidden md:flex space-x-6">
105
+ <a href="#" class="text-gray-700 hover:text-blue-600 transition">Explore</a>
106
+ <a href="#" class="text-gray-700 hover:text-blue-600 transition">Collections</a>
107
+ <a href="#" class="text-gray-700 hover:text-blue-600 transition">Community</a>
108
+ </nav>
109
+ </div>
110
+ <div class="flex items-center space-x-4">
111
+ <button aria-label="Toggle dark mode" class="p-2 rounded-full hover:bg-gray-100">
112
+ <i class="fas fa-moon text-gray-600"></i>
113
+ </button>
114
+ <button class="hidden md:block px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
115
+ Sign in
116
+ </button>
117
+ <button aria-label="Menu" class="md:hidden p-2 rounded-full hover:bg-gray-100">
118
+ <i class="fas fa-bars text-gray-600"></i>
119
+ </button>
120
+ </div>
121
+ </div>
122
+ </header>
123
+
124
+ <main id="main-content">
125
+ <!-- Hero Section -->
126
+ <section class="py-12 md:py-20 bg-gradient-to-b from-blue-50 to-white">
127
+ <div class="container mx-auto px-4">
128
+ <div class="max-w-3xl mx-auto text-center">
129
+ <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
130
+ Discover over 100 million high-quality images
131
+ </h1>
132
+ <p class="text-xl text-gray-600 mb-8">
133
+ Find the perfect image for your next project. Free to use, no attribution required.
134
+ </p>
135
+
136
+ <!-- Search Bar with Drag & Drop -->
137
+ <div class="max-w-2xl mx-auto mb-12">
138
+ <div id="searchDropZone" class="search-drop-zone relative rounded-full bg-white shadow-md border border-gray-200 flex items-center px-6 py-3">
139
+ <input
140
+ type="text"
141
+ placeholder="Search for images..."
142
+ class="flex-grow outline-none bg-transparent pr-4"
143
+ aria-label="Search for images"
144
+ >
145
+ <div class="flex items-center space-x-3">
146
+ <button
147
+ id="uploadBtn"
148
+ class="p-2 rounded-full hover:bg-gray-100 text-gray-600"
149
+ aria-label="Upload image"
150
+ >
151
+ <i class="fas fa-camera"></i>
152
+ </button>
153
+ <button
154
+ class="px-4 py-2 bg-blue-600 text-white rounded-full hover:bg-blue-700 transition"
155
+ aria-label="Search"
156
+ >
157
+ <i class="fas fa-search"></i>
158
+ <span class="ml-2 hidden md:inline">Search</span>
159
+ </button>
160
+ </div>
161
+ <div id="dropMessage" class="absolute inset-0 bg-blue-50 bg-opacity-90 flex items-center justify-center rounded-full pointer-events-none opacity-0 transition">
162
+ <div class="text-center p-4">
163
+ <i class="fas fa-cloud-upload-alt text-blue-600 text-3xl mb-2"></i>
164
+ <p class="font-medium text-blue-600">Drop your image here to search</p>
165
+ </div>
166
+ </div>
167
+ </div>
168
+ <input type="file" id="fileInput" class="hidden" accept="image/*">
169
+
170
+ <p class="text-sm text-gray-500 mt-3">
171
+ Try: <span class="font-medium">nature</span>, <span class="font-medium">wallpaper</span>, <span class="font-medium">food</span>, <span class="font-medium">business</span>
172
+ </p>
173
+ </div>
174
+ </div>
175
+ </div>
176
+ </section>
177
+
178
+ <!-- Popular Searches -->
179
+ <section class="py-8 bg-white">
180
+ <div class="container mx-auto px-4">
181
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">Popular searches</h2>
182
+ <div class="flex flex-wrap gap-3">
183
+ <a href="#" class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-gray-800 transition">Nature</a>
184
+ <a href="#" class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-gray-800 transition">Wallpaper</a>
185
+ <a href="#" class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-gray-800 transition">Background</a>
186
+ <a href="#" class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-gray-800 transition">Food</a>
187
+ <a href="#" class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-gray-800 transition">Business</a>
188
+ <a href="#" class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-gray-800 transition">Travel</a>
189
+ <a href="#" class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-gray-800 transition">Art</a>
190
+ <a href="#" class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-gray-800 transition">Technology</a>
191
+ </div>
192
+ </div>
193
+ </section>
194
+
195
+ <!-- Feature Cards -->
196
+ <section class="py-12 bg-gray-50">
197
+ <div class="container mx-auto px-4">
198
+ <h2 class="text-2xl font-bold text-gray-900 mb-8 text-center">Create something amazing</h2>
199
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
200
+ <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition">
201
+ <div class="h-40 bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center">
202
+ <i class="fas fa-magic text-white text-5xl"></i>
203
+ </div>
204
+ <div class="p-6">
205
+ <h3 class="text-lg font-semibold mb-2">AI Image Creation</h3>
206
+ <p class="text-gray-600">Generate unique images with AI based on your description.</p>
207
+ <button class="mt-4 text-blue-600 font-medium hover:text-blue-700 transition">Try now</button>
208
+ </div>
209
+ </div>
210
+
211
+ <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition">
212
+ <div class="h-40 bg-gradient-to-r from-blue-500 to-teal-400 flex items-center justify-center">
213
+ <i class="fas fa-edit text-white text-5xl"></i>
214
+ </div>
215
+ <div class="p-6">
216
+ <h3 class="text-lg font-semibold mb-2">Image Editing</h3>
217
+ <p class="text-gray-600">Powerful online editor to enhance and modify your images.</p>
218
+ <button class="mt-4 text-blue-600 font-medium hover:text-blue-700 transition">Edit now</button>
219
+ </div>
220
+ </div>
221
+
222
+ <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition">
223
+ <div class="h-40 bg-gradient-to-r from-orange-500 to-yellow-400 flex items-center justify-center">
224
+ <i class="fas fa-palette text-white text-5xl"></i>
225
+ </div>
226
+ <div class="p-6">
227
+ <h3 class="text-lg font-semibold mb-2">Color Palette</h3>
228
+ <p class="text-gray-600">Extract color palettes from images for your designs.</p>
229
+ <button class="mt-4 text-blue-600 font-medium hover:text-blue-700 transition">Explore</button>
230
+ </div>
231
+ </div>
232
+
233
+ <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition">
234
+ <div class="h-40 bg-gradient-to-r from-green-500 to-emerald-400 flex items-center justify-center">
235
+ <i class="fas fa-layer-group text-white text-5xl"></i>
236
+ </div>
237
+ <div class="p-6">
238
+ <h3 class="text-lg font-semibold mb-2">Background Removal</h3>
239
+ <p class="text-gray-600">Instantly remove backgrounds from your images.</p>
240
+ <button class="mt-4 text-blue-600 font-medium hover:text-blue-700 transition">Remove now</button>
241
+ </div>
242
+ </div>
243
+ </div>
244
+ </div>
245
+ </section>
246
+
247
+ <!-- Image Gallery -->
248
+ <section class="py-12 bg-white">
249
+ <div class="container mx-auto px-4">
250
+ <div class="flex justify-between items-center mb-8">
251
+ <h2 class="text-2xl font-bold text-gray-900">Trending images</h2>
252
+ <a href="#" class="text-blue-600 hover:text-blue-700 font-medium transition">View all</a>
253
+ </div>
254
+
255
+ <div class="masonry">
256
+ <!-- Masonry grid of images -->
257
+ <div class="masonry-item">
258
+ <div class="image-card relative rounded-lg overflow-hidden mb-4">
259
+ <img
260
+ src="https://picsum.photos/600/800?random=1"
261
+ alt="Beautiful mountain landscape with sunset"
262
+ class="w-full h-auto object-cover"
263
+ loading="lazy"
264
+ >
265
+ <div class="image-overlay absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex flex-col justify-end p-4">
266
+ <div class="flex justify-between items-center">
267
+ <div>
268
+ <h3 class="text-white font-medium">Mountain Sunset</h3>
269
+ <p class="text-gray-300 text-sm">Nature • 4K</p>
270
+ </div>
271
+ <button class="text-white hover:text-blue-300 transition" aria-label="Save image">
272
+ <i class="far fa-heart"></i>
273
+ </button>
274
+ </div>
275
+ </div>
276
+ </div>
277
+ </div>
278
+
279
+ <div class="masonry-item">
280
+ <div class="image-card relative rounded-lg overflow-hidden mb-4">
281
+ <img
282
+ src="https://picsum.photos/600/600?random=2"
283
+ alt="Modern city skyline at night"
284
+ class="w-full h-auto object-cover"
285
+ loading="lazy"
286
+ >
287
+ <div class="image-overlay absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex flex-col justify-end p-4">
288
+ <div class="flex justify-between items-center">
289
+ <div>
290
+ <h3 class="text-white font-medium">City Lights</h3>
291
+ <p class="text-gray-300 text-sm">Urban • HD</p>
292
+ </div>
293
+ <button class="text-white hover:text-blue-300 transition" aria-label="Save image">
294
+ <i class="far fa-heart"></i>
295
+ </button>
296
+ </div>
297
+ </div>
298
+ </div>
299
+ </div>
300
+
301
+ <div class="masonry-item">
302
+ <div class="image-card relative rounded-lg overflow-hidden mb-4">
303
+ <img
304
+ src="https://picsum.photos/600/700?random=3"
305
+ alt="Delicious pasta dish with fresh ingredients"
306
+ class="w-full h-auto object-cover"
307
+ loading="lazy"
308
+ >
309
+ <div class="image-overlay absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex flex-col justify-end p-4">
310
+ <div class="flex justify-between items-center">
311
+ <div>
312
+ <h3 class="text-white font-medium">Gourmet Pasta</h3>
313
+ <p class="text-gray-300 text-sm">Food • 4K</p>
314
+ </div>
315
+ <button class="text-white hover:text-blue-300 transition" aria-label="Save image">
316
+ <i class="far fa-heart"></i>
317
+ </button>
318
+ </div>
319
+ </div>
320
+ </div>
321
+ </div>
322
+
323
+ <div class="masonry-item">
324
+ <div class="image-card relative rounded-lg overflow-hidden mb-4">
325
+ <img
326
+ src="https://picsum.photos/600/900?random=4"
327
+ alt="Person hiking in beautiful forest"
328
+ class="w-full h-auto object-cover"
329
+ loading="lazy"
330
+ >
331
+ <div class="image-overlay absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex flex-col justify-end p-4">
332
+ <div class="flex justify-between items-center">
333
+ <div>
334
+ <h3 class="text-white font-medium">Forest Hike</h3>
335
+ <p class="text-gray-300 text-sm">Adventure • HD</p>
336
+ </div>
337
+ <button class="text-white hover:text-blue-300 transition" aria-label="Save image">
338
+ <i class="far fa-heart"></i>
339
+ </button>
340
+ </div>
341
+ </div>
342
+ </div>
343
+ </div>
344
+
345
+ <div class="masonry-item">
346
+ <div class="image-card relative rounded-lg overflow-hidden mb-4">
347
+ <img
348
+ src="https://picsum.photos/600/500?random=5"
349
+ alt="Abstract colorful geometric shapes"
350
+ class="w-full h-auto object-cover"
351
+ loading="lazy"
352
+ >
353
+ <div class="image-overlay absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex flex-col justify-end p-4">
354
+ <div class="flex justify-between items-center">
355
+ <div>
356
+ <h3 class="text-white font-medium">Abstract Art</h3>
357
+ <p class="text-gray-300 text-sm">Art • 4K</p>
358
+ </div>
359
+ <button class="text-white hover:text-blue-300 transition" aria-label="Save image">
360
+ <i class="far fa-heart"></i>
361
+ </button>
362
+ </div>
363
+ </div>
364
+ </div>
365
+ </div>
366
+
367
+ <div class="masonry-item">
368
+ <div class="image-card relative rounded-lg overflow-hidden mb-4">
369
+ <img
370
+ src="https://picsum.photos/600/750?random=6"
371
+ alt="Tropical beach with crystal clear water"
372
+ class="w-full h-auto object-cover"
373
+ loading="lazy"
374
+ >
375
+ <div class="image-overlay absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex flex-col justify-end p-4">
376
+ <div class="flex justify-between items-center">
377
+ <div>
378
+ <h3 class="text-white font-medium">Tropical Paradise</h3>
379
+ <p class="text-gray-300 text-sm">Travel • 4K</p>
380
+ </div>
381
+ <button class="text-white hover:text-blue-300 transition" aria-label="Save image">
382
+ <i class="far fa-heart"></i>
383
+ </button>
384
+ </div>
385
+ </div>
386
+ </div>
387
+ </div>
388
+
389
+ <div class="masonry-item">
390
+ <div class="image-card relative rounded-lg overflow-hidden mb-4">
391
+ <img
392
+ src="https://picsum.photos/600/650?random=7"
393
+ alt="Modern workspace with laptop and coffee"
394
+ class="w-full h-auto object-cover"
395
+ loading="lazy"
396
+ >
397
+ <div class="image-overlay absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex flex-col justify-end p-4">
398
+ <div class="flex justify-between items-center">
399
+ <div>
400
+ <h3 class="text-white font-medium">Workspace</h3>
401
+ <p class="text-gray-300 text-sm">Business • HD</p>
402
+ </div>
403
+ <button class="text-white hover:text-blue-300 transition" aria-label="Save image">
404
+ <i class="far fa-heart"></i>
405
+ </button>
406
+ </div>
407
+ </div>
408
+ </div>
409
+ </div>
410
+
411
+ <div class="masonry-item">
412
+ <div class="image-card relative rounded-lg overflow-hidden mb-4">
413
+ <img
414
+ src="https://picsum.photos/600/850?random=8"
415
+ alt="Close-up of a cute puppy"
416
+ class="w-full h-auto object-cover"
417
+ loading="lazy"
418
+ >
419
+ <div class="image-overlay absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex flex-col justify-end p-4">
420
+ <div class="flex justify-between items-center">
421
+ <div>
422
+ <h3 class="text-white font-medium">Golden Retriever</h3>
423
+ <p class="text-gray-300 text-sm">Animals • 4K</p>
424
+ </div>
425
+ <button class="text-white hover:text-blue-300 transition" aria-label="Save image">
426
+ <i class="far fa-heart"></i>
427
+ </button>
428
+ </div>
429
+ </div>
430
+ </div>
431
+ </div>
432
+ </div>
433
+
434
+ <div class="text-center mt-8">
435
+ <button class="px-6 py-3 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
436
+ Load more images
437
+ </button>
438
+ </div>
439
+ </div>
440
+ </section>
441
+
442
+ <!-- CTA Section -->
443
+ <section class="py-16 bg-blue-600 text-white">
444
+ <div class="container mx-auto px-4 text-center">
445
+ <h2 class="text-3xl font-bold mb-4">Ready to find your perfect image?</h2>
446
+ <p class="text-xl mb-8 max-w-2xl mx-auto">Join millions of creators who trust PixSearch for their image needs.</p>
447
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
448
+ <button class="px-6 py-3 bg-white text-blue-600 rounded-md hover:bg-gray-100 transition font-medium">
449
+ Start searching now
450
+ </button>
451
+ <button class="px-6 py-3 border border-white rounded-md hover:bg-blue-700 transition font-medium">
452
+ Learn more
453
+ </button>
454
+ </div>
455
+ </div>
456
+ </section>
457
+ </main>
458
+
459
+ <!-- Footer -->
460
+ <footer class="bg-gray-900 text-gray-300 py-12">
461
+ <div class="container mx-auto px-4">
462
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
463
+ <div>
464
+ <h3 class="text-white font-bold text-lg mb-4">PixSearch</h3>
465
+ <p class="mb-4">The internet's source for freely usable images. Powered by creators everywhere.</p>
466
+ <div class="flex space-x-4">
467
+ <a href="#" aria-label="Twitter" class="hover:text-white transition"><i class="fab fa-twitter"></i></a>
468
+ <a href="#" aria-label="Facebook" class="hover:text-white transition"><i class="fab fa-facebook"></i></a>
469
+ <a href="#" aria-label="Instagram" class="hover:text-white transition"><i class="fab fa-instagram"></i></a>
470
+ <a href="#" aria-label="Pinterest" class="hover:text-white transition"><i class="fab fa-pinterest"></i></a>
471
+ </div>
472
+ </div>
473
+
474
+ <div>
475
+ <h3 class="text-white font-bold text-lg mb-4">Company</h3>
476
+ <ul class="space-y-2">
477
+ <li><a href="#" class="hover:text-white transition">About</a></li>
478
+ <li><a href="#" class="hover:text-white transition">Careers</a></li>
479
+ <li><a href="#" class="hover:text-white transition">Blog</a></li>
480
+ <li><a href="#" class="hover:text-white transition">Press</a></li>
481
+ </ul>
482
+ </div>
483
+
484
+ <div>
485
+ <h3 class="text-white font-bold text-lg mb-4">Resources</h3>
486
+ <ul class="space-y-2">
487
+ <li><a href="#" class="hover:text-white transition">Help Center</a></li>
488
+ <li><a href="#" class="hover:text-white transition">Licensing</a></li>
489
+ <li><a href="#" class="hover:text-white transition">API</a></li>
490
+ <li><a href="#" class="hover:text-white transition">Contributors</a></li>
491
+ </ul>
492
+ </div>
493
+
494
+ <div>
495
+ <h3 class="text-white font-bold text-lg mb-4">Legal</h3>
496
+ <ul class="space-y-2">
497
+ <li><a href="#" class="hover:text-white transition">Terms</a></li>
498
+ <li><a href="#" class="hover:text-white transition">Privacy</a></li>
499
+ <li><a href="#" class="hover:text-white transition">Cookies</a></li>
500
+ <li><a href="#" class="hover:text-white transition">Guidelines</a></li>
501
+ </ul>
502
+ </div>
503
+ </div>
504
+
505
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
506
+ <p>© 2023 PixSearch. All rights reserved.</p>
507
+ <div class="mt-4 md:mt-0">
508
+ <a href="#" class="hover:text-white transition">Privacy Policy</a>
509
+ <span class="mx-2">•</span>
510
+ <a href="#" class="hover:text-white transition">Terms of Service</a>
511
+ </div>
512
+ </div>
513
+ </div>
514
+ </footer>
515
+
516
+ <script>
517
+ // Drag and drop functionality for search
518
+ const searchDropZone = document.getElementById('searchDropZone');
519
+ const dropMessage = document.getElementById('dropMessage');
520
+ const uploadBtn = document.getElementById('uploadBtn');
521
+ const fileInput = document.getElementById('fileInput');
522
+
523
+ // Handle drag events
524
+ ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
525
+ searchDropZone.addEventListener(eventName, preventDefaults, false);
526
+ });
527
+
528
+ function preventDefaults(e) {
529
+ e.preventDefault();
530
+ e.stopPropagation();
531
+ }
532
+
533
+ ['dragenter', 'dragover'].forEach(eventName => {
534
+ searchDropZone.addEventListener(eventName, highlight, false);
535
+ });
536
+
537
+ ['dragleave', 'drop'].forEach(eventName => {
538
+ searchDropZone.addEventListener(eventName, unhighlight, false);
539
+ });
540
+
541
+ function highlight() {
542
+ searchDropZone.classList.add('active');
543
+ dropMessage.classList.remove('opacity-0');
544
+ }
545
+
546
+ function unhighlight() {
547
+ searchDropZone.classList.remove('active');
548
+ dropMessage.classList.add('opacity-0');
549
+ }
550
+
551
+ // Handle dropped files
552
+ searchDropZone.addEventListener('drop', handleDrop, false);
553
+
554
+ function handleDrop(e) {
555
+ const dt = e.dataTransfer;
556
+ const files = dt.files;
557
+ handleFiles(files);
558
+ }
559
+
560
+ // Handle file input click
561
+ uploadBtn.addEventListener('click', () => {
562
+ fileInput.click();
563
+ });
564
+
565
+ fileInput.addEventListener('change', function() {
566
+ if (this.files.length) {
567
+ handleFiles(this.files);
568
+ }
569
+ });
570
+
571
+ function handleFiles(files) {
572
+ const file = files[0];
573
+ if (file.type.match('image.*')) {
574
+ // In a real app, you would upload the file and perform a reverse image search
575
+ alert(`Image "${file.name}" selected for search. In a real app, this would trigger an image search.`);
576
+ } else {
577
+ alert('Please select an image file.');
578
+ }
579
+ }
580
+
581
+ // Mobile menu toggle (would be expanded in a real app)
582
+ document.querySelector('.md\\:hidden').addEventListener('click', function() {
583
+ alert('Mobile menu would open here in a complete implementation.');
584
+ });
585
+
586
+ // Dark mode toggle
587
+ document.querySelector('[aria-label="Toggle dark mode"]').addEventListener('click', function() {
588
+ document.documentElement.classList.toggle('dark');
589
+ const icon = this.querySelector('i');
590
+ if (document.documentElement.classList.contains('dark')) {
591
+ icon.classList.replace('fa-moon', 'fa-sun');
592
+ document.body.classList.add('bg-gray-900', 'text-gray-100');
593
+ document.body.classList.remove('bg-gray-50', 'text-gray-900');
594
+ } else {
595
+ icon.classList.replace('fa-sun', 'fa-moon');
596
+ document.body.classList.remove('bg-gray-900', 'text-gray-100');
597
+ document.body.classList.add('bg-gray-50', 'text-gray-900');
598
+ }
599
+ });
600
+ </script>
601
+ <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=block/pixel" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
602
+ </html>