Hugging Face's logo

Spaces:
TORZ
/
my
Running

App Files Community
TORZ commited on
Commit
afb0339
·
verified ·
1 Parent(s): 649e4ae

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +747 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: My
3
- emoji: 😻
4
- colorFrom: green
5
  colorTo: gray
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: my
3
+ emoji: 🐳
4
+ colorFrom: gray
5
  colorTo: gray
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,747 @@
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">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>MEDIATORZ | AI Image Management</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
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#6C63FF',
15
+ secondary: '#4F46E5',
16
+ dark: '#1E1E2C',
17
+ light: '#F8F9FA',
18
+ accent: '#FF6584',
19
+ },
20
+ fontFamily: {
21
+ sans: ['Poppins', 'sans-serif'],
22
+ mono: ['Fira Code', 'monospace'],
23
+ },
24
+ boxShadow: {
25
+ 'neumorph': '8px 8px 16px #d1d9e6, -8px -8px 16px #ffffff',
26
+ 'neumorph-inset': 'inset 4px 4px 8px #d1d9e6, inset -4px -4px 8px #ffffff',
27
+ 'neumorph-sm': '4px 4px 8px #d1d9e6, -4px -4px 8px #ffffff',
28
+ 'neumorph-lg': '12px 12px 24px #d1d9e6, -12px -12px 24px #ffffff',
29
+ }
30
+ }
31
+ }
32
+ }
33
+ </script>
34
+ <style>
35
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Fira+Code:wght@400;500&display=swap');
36
+
37
+ body {
38
+ font-family: 'Poppins', sans-serif;
39
+ background-color: #F0F2F5;
40
+ color: #1E1E2C;
41
+ min-height: 100vh;
42
+ }
43
+
44
+ .neumorph {
45
+ border-radius: 16px;
46
+ background: #F0F2F5;
47
+ box-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #ffffff;
48
+ transition: all 0.3s ease;
49
+ }
50
+
51
+ .neumorph:hover {
52
+ box-shadow: 12px 12px 24px #d1d9e6, -12px -12px 24px #ffffff;
53
+ }
54
+
55
+ .neumorph-inset {
56
+ border-radius: 16px;
57
+ background: #F0F2F5;
58
+ box-shadow: inset 4px 4px 8px #d1d9e6, inset -4px -4px 8px #ffffff;
59
+ }
60
+
61
+ .neumorph-btn {
62
+ border-radius: 12px;
63
+ background: #F0F2F5;
64
+ box-shadow: 4px 4px 8px #d1d9e6, -4px -4px 8px #ffffff;
65
+ transition: all 0.2s ease;
66
+ }
67
+
68
+ .neumorph-btn:active {
69
+ box-shadow: inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #ffffff;
70
+ }
71
+
72
+ .neumorph-btn-primary {
73
+ border-radius: 12px;
74
+ background: #6C63FF;
75
+ box-shadow: 4px 4px 8px #5a52d9, -4px -4px 8px #7e74ff;
76
+ color: white;
77
+ transition: all 0.2s ease;
78
+ }
79
+
80
+ .neumorph-btn-primary:active {
81
+ box-shadow: inset 2px 2px 4px #5a52d9, inset -2px -2px 4px #7e74ff;
82
+ }
83
+
84
+ .tag {
85
+ display: inline-flex;
86
+ align-items: center;
87
+ border-radius: 20px;
88
+ padding: 4px 12px;
89
+ background: #F0F2F5;
90
+ box-shadow: 2px 2px 4px #d1d9e6, -2px -2px 4px #ffffff;
91
+ margin-right: 8px;
92
+ margin-bottom: 8px;
93
+ font-size: 0.8rem;
94
+ transition: all 0.2s ease;
95
+ }
96
+
97
+ .tag:hover {
98
+ box-shadow: 3px 3px 6px #d1d9e6, -3px -3px 6px #ffffff;
99
+ }
100
+
101
+ .upload-area {
102
+ border: 2px dashed #d1d9e6;
103
+ border-radius: 16px;
104
+ transition: all 0.3s ease;
105
+ }
106
+
107
+ .upload-area:hover {
108
+ border-color: #6C63FF;
109
+ }
110
+
111
+ .upload-area.dragover {
112
+ background-color: rgba(108, 99, 255, 0.1);
113
+ border-color: #6C63FF;
114
+ }
115
+
116
+ .image-card {
117
+ transition: all 0.3s ease;
118
+ transform-origin: center;
119
+ }
120
+
121
+ .image-card:hover {
122
+ transform: scale(1.02);
123
+ }
124
+
125
+ .color-swatch {
126
+ width: 20px;
127
+ height: 20px;
128
+ border-radius: 50%;
129
+ display: inline-block;
130
+ margin-right: 4px;
131
+ box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
132
+ }
133
+
134
+ /* Custom scrollbar */
135
+ ::-webkit-scrollbar {
136
+ width: 8px;
137
+ height: 8px;
138
+ }
139
+
140
+ ::-webkit-scrollbar-track {
141
+ background: #F0F2F5;
142
+ border-radius: 10px;
143
+ }
144
+
145
+ ::-webkit-scrollbar-thumb {
146
+ background: #d1d9e6;
147
+ border-radius: 10px;
148
+ }
149
+
150
+ ::-webkit-scrollbar-thumb:hover {
151
+ background: #6C63FF;
152
+ }
153
+
154
+ /* Floating animation for logo */
155
+ @keyframes float {
156
+ 0% { transform: translateY(0px); }
157
+ 50% { transform: translateY(-10px); }
158
+ 100% { transform: translateY(0px); }
159
+ }
160
+
161
+ .floating {
162
+ animation: float 4s ease-in-out infinite;
163
+ }
164
+
165
+ /* Pulse animation for upload button */
166
+ @keyframes pulse {
167
+ 0% { box-shadow: 0 0 0 0 rgba(108, 99, 255, 0.4); }
168
+ 70% { box-shadow: 0 0 0 10px rgba(108, 99, 255, 0); }
169
+ 100% { box-shadow: 0 0 0 0 rgba(108, 99, 255, 0); }
170
+ }
171
+
172
+ .pulse {
173
+ animation: pulse 2s infinite;
174
+ }
175
+
176
+ /* Gradient text */
177
+ .gradient-text {
178
+ background: linear-gradient(45deg, #6C63FF, #FF6584);
179
+ -webkit-background-clip: text;
180
+ background-clip: text;
181
+ color: transparent;
182
+ }
183
+ </style>
184
+ </head>
185
+ <body class="min-h-screen flex flex-col">
186
+ <!-- Header -->
187
+ <header class="py-6 px-8 flex justify-between items-center">
188
+ <div class="flex items-center space-x-4">
189
+ <div class="neumorph w-16 h-16 rounded-full flex items-center justify-center floating">
190
+ <i class="fas fa-eye text-3xl gradient-text"></i>
191
+ </div>
192
+ <h1 class="text-3xl font-bold gradient-text">MEDIATORZ</h1>
193
+ </div>
194
+ <div class="flex items-center space-x-4">
195
+ <div class="neumorph-inset px-4 py-2 rounded-full flex items-center">
196
+ <i class="fas fa-search text-gray-500 mr-2"></i>
197
+ <input type="text" placeholder="Search images..." class="bg-transparent outline-none w-64 text-gray-700">
198
+ </div>
199
+ <button class="neumorph-btn-primary px-6 py-2 rounded-full font-medium">
200
+ <i class="fas fa-user mr-2"></i> Account
201
+ </button>
202
+ </div>
203
+ </header>
204
+
205
+ <!-- Main Content -->
206
+ <main class="flex-1 px-8 pb-12">
207
+ <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
208
+ <!-- Sidebar -->
209
+ <aside class="lg:col-span-1">
210
+ <div class="neumorph p-6 mb-8">
211
+ <h2 class="text-xl font-semibold mb-4 gradient-text">Collections</h2>
212
+ <ul class="space-y-2">
213
+ <li class="flex items-center py-2 px-3 rounded-lg hover:bg-gray-100 cursor-pointer transition">
214
+ <i class="fas fa-images mr-3 text-primary"></i>
215
+ <span>All Images</span>
216
+ <span class="ml-auto bg-primary text-white text-xs px-2 py-1 rounded-full">1,248</span>
217
+ </li>
218
+ <li class="flex items-center py-2 px-3 rounded-lg hover:bg-gray-100 cursor-pointer transition">
219
+ <i class="fas fa-star mr-3 text-yellow-500"></i>
220
+ <span>Favorites</span>
221
+ <span class="ml-auto bg-yellow-500 text-white text-xs px-2 py-1 rounded-full">42</span>
222
+ </li>
223
+ <li class="flex items-center py-2 px-3 rounded-lg hover:bg-gray-100 cursor-pointer transition">
224
+ <i class="fas fa-tags mr-3 text-accent"></i>
225
+ <span>Tagged</span>
226
+ </li>
227
+ <li class="flex items-center py-2 px-3 rounded-lg hover:bg-gray-100 cursor-pointer transition">
228
+ <i class="fas fa-trash mr-3 text-gray-500"></i>
229
+ <span>Recently Deleted</span>
230
+ </li>
231
+ </ul>
232
+ </div>
233
+
234
+ <div class="neumorph p-6">
235
+ <h2 class="text-xl font-semibold mb-4 gradient-text">Filters</h2>
236
+ <div class="mb-4">
237
+ <h3 class="font-medium mb-2">Medium</h3>
238
+ <div class="flex flex-wrap">
239
+ <span class="tag"><i class="fas fa-camera mr-1"></i> Photo</span>
240
+ <span class="tag"><i class="fas fa-paint-brush mr-1"></i> Art</span>
241
+ <span class="tag"><i class="fas fa-laptop-code mr-1"></i> Digital</span>
242
+ </div>
243
+ </div>
244
+ <div class="mb-4">
245
+ <h3 class="font-medium mb-2">People</h3>
246
+ <div class="flex flex-wrap">
247
+ <span class="tag"><i class="fas fa-male mr-1"></i> Male</span>
248
+ <span class="tag"><i class="fas fa-female mr-1"></i> Female</span>
249
+ <span class="tag"><i class="fas fa-child mr-1"></i> Child</span>
250
+ </div>
251
+ </div>
252
+ <div class="mb-4">
253
+ <h3 class="font-medium mb-2">Colors</h3>
254
+ <div class="flex flex-wrap">
255
+ <span class="color-swatch" style="background-color: #FF6584;"></span>
256
+ <span class="color-swatch" style="background-color: #6C63FF;"></span>
257
+ <span class="color-swatch" style="background-color: #4F46E5;"></span>
258
+ <span class="color-swatch" style="background-color: #1E1E2C;"></span>
259
+ <span class="color-swatch" style="background-color: #F8F9FA;"></span>
260
+ </div>
261
+ </div>
262
+ <div class="mb-4">
263
+ <h3 class="font-medium mb-2">Mood</h3>
264
+ <div class="flex flex-wrap">
265
+ <span class="tag"><i class="fas fa-smile mr-1"></i> Happy</span>
266
+ <span class="tag"><i class="fas fa-sad-tear mr-1"></i> Sad</span>
267
+ <span class="tag"><i class="fas fa-angry mr-1"></i> Angry</span>
268
+ </div>
269
+ </div>
270
+ </div>
271
+ </aside>
272
+
273
+ <!-- Main Content Area -->
274
+ <div class="lg:col-span-3">
275
+ <div class="neumorph p-6 mb-8">
276
+ <div class="flex justify-between items-center mb-6">
277
+ <h2 class="text-2xl font-bold gradient-text">Image Library</h2>
278
+ <div class="flex space-x-4">
279
+ <button id="uploadBtn" class="neumorph-btn-primary px-6 py-2 rounded-full font-medium pulse">
280
+ <i class="fas fa-cloud-upload-alt mr-2"></i> Upload Images
281
+ </button>
282
+ <input type="file" id="fileInput" class="hidden" multiple accept="image/*">
283
+ <button class="neumorph-btn px-4 py-2 rounded-full">
284
+ <i class="fas fa-sliders-h"></i>
285
+ </button>
286
+ </div>
287
+ </div>
288
+
289
+ <!-- Upload Area (Hidden by default) -->
290
+ <div id="uploadArea" class="upload-area p-12 text-center mb-8 hidden">
291
+ <div class="neumorph w-24 h-24 rounded-full mx-auto mb-6 flex items-center justify-center">
292
+ <i class="fas fa-cloud-upload-alt text-3xl gradient-text"></i>
293
+ </div>
294
+ <h3 class="text-xl font-semibold mb-2">Drag & Drop Images Here</h3>
295
+ <p class="text-gray-500 mb-6">or click to browse files</p>
296
+ <button class="neumorph-btn px-6 py-2 rounded-full font-medium">
297
+ Select Files
298
+ </button>
299
+ </div>
300
+
301
+ <!-- Image Grid -->
302
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
303
+ <!-- Sample Image Card 1 -->
304
+ <div class="image-card neumorph rounded-xl overflow-hidden">
305
+ <div class="relative h-48 overflow-hidden">
306
+ <img src="https://source.unsplash.com/random/600x400/?portrait" alt="Sample image" class="w-full h-full object-cover">
307
+ <div class="absolute top-2 right-2">
308
+ <button class="neumorph-btn w-8 h-8 rounded-full flex items-center justify-center">
309
+ <i class="fas fa-heart text-gray-600"></i>
310
+ </button>
311
+ </div>
312
+ </div>
313
+ <div class="p-4">
314
+ <h3 class="font-medium mb-2">Portrait of a woman</h3>
315
+ <p class="text-sm text-gray-500 mb-3">A young woman smiling in natural light with blurred background.</p>
316
+ <div class="flex flex-wrap mb-2">
317
+ <span class="tag"><i class="fas fa-camera mr-1"></i> Photo</span>
318
+ <span class="tag"><i class="fas fa-female mr-1"></i> Female</span>
319
+ <span class="tag"><i class="fas fa-smile mr-1"></i> Happy</span>
320
+ </div>
321
+ <div class="flex justify-between items-center">
322
+ <div class="flex">
323
+ <span class="color-swatch" style="background-color: #F3D2C1;"></span>
324
+ <span class="color-swatch" style="background-color: #8B5A2B;"></span>
325
+ <span class="color-swatch" style="background-color: #5F9EA0;"></span>
326
+ </div>
327
+ <button class="neumorph-btn w-8 h-8 rounded-full flex items-center justify-center">
328
+ <i class="fas fa-ellipsis-h text-gray-600"></i>
329
+ </button>
330
+ </div>
331
+ </div>
332
+ </div>
333
+
334
+ <!-- Sample Image Card 2 -->
335
+ <div class="image-card neumorph rounded-xl overflow-hidden">
336
+ <div class="relative h-48 overflow-hidden">
337
+ <img src="https://source.unsplash.com/random/600x400/?city" alt="Sample image" class="w-full h-full object-cover">
338
+ <div class="absolute top-2 right-2">
339
+ <button class="neumorph-btn w-8 h-8 rounded-full flex items-center justify-center">
340
+ <i class="fas fa-heart text-red-500"></i>
341
+ </button>
342
+ </div>
343
+ </div>
344
+ <div class="p-4">
345
+ <h3 class="font-medium mb-2">Urban landscape</h3>
346
+ <p class="text-sm text-gray-500 mb-3">Modern city skyline at dusk with vibrant colors and reflections.</p>
347
+ <div class="flex flex-wrap mb-2">
348
+ <span class="tag"><i class="fas fa-camera mr-1"></i> Photo</span>
349
+ <span class="tag"><i class="fas fa-city mr-1"></i> Urban</span>
350
+ <span class="tag"><i class="fas fa-moon mr-1"></i> Night</span>
351
+ </div>
352
+ <div class="flex justify-between items-center">
353
+ <div class="flex">
354
+ <span class="color-swatch" style="background-color: #1E1E2C;"></span>
355
+ <span class="color-swatch" style="background-color: #6C63FF;"></span>
356
+ <span class="color-swatch" style="background-color: #FF6584;"></span>
357
+ </div>
358
+ <button class="neumorph-btn w-8 h-8 rounded-full flex items-center justify-center">
359
+ <i class="fas fa-ellipsis-h text-gray-600"></i>
360
+ </button>
361
+ </div>
362
+ </div>
363
+ </div>
364
+
365
+ <!-- Sample Image Card 3 -->
366
+ <div class="image-card neumorph rounded-xl overflow-hidden">
367
+ <div class="relative h-48 overflow-hidden">
368
+ <img src="https://source.unsplash.com/random/600x400/?abstract" alt="Sample image" class="w-full h-full object-cover">
369
+ <div class="absolute top-2 right-2">
370
+ <button class="neumorph-btn w-8 h-8 rounded-full flex items-center justify-center">
371
+ <i class="fas fa-heart text-gray-600"></i>
372
+ </button>
373
+ </div>
374
+ </div>
375
+ <div class="p-4">
376
+ <h3 class="font-medium mb-2">Abstract composition</h3>
377
+ <p class="text-sm text-gray-500 mb-3">Colorful fluid shapes blending together in an abstract pattern.</p>
378
+ <div class="flex flex-wrap mb-2">
379
+ <span class="tag"><i class="fas fa-paint-brush mr-1"></i> Art</span>
380
+ <span class="tag"><i class="fas fa-palette mr-1"></i> Colorful</span>
381
+ <span class="tag"><i class="fas fa-water mr-1"></i> Fluid</span>
382
+ </div>
383
+ <div class="flex justify-between items-center">
384
+ <div class="flex">
385
+ <span class="color-swatch" style="background-color: #FF6584;"></span>
386
+ <span class="color-swatch" style="background-color: #6C63FF;"></span>
387
+ <span class="color-swatch" style="background-color: #4F46E5;"></span>
388
+ </div>
389
+ <button class="neumorph-btn w-8 h-8 rounded-full flex items-center justify-center">
390
+ <i class="fas fa-ellipsis-h text-gray-600"></i>
391
+ </button>
392
+ </div>
393
+ </div>
394
+ </div>
395
+
396
+ <!-- Sample Image Card 4 -->
397
+ <div class="image-card neumorph rounded-xl overflow-hidden">
398
+ <div class="relative h-48 overflow-hidden">
399
+ <img src="https://source.unsplash.com/random/600x400/?nature" alt="Sample image" class="w-full h-full object-cover">
400
+ <div class="absolute top-2 right-2">
401
+ <button class="neumorph-btn w-8 h-8 rounded-full flex items-center justify-center">
402
+ <i class="fas fa-heart text-gray-600"></i>
403
+ </button>
404
+ </div>
405
+ </div>
406
+ <div class="p-4">
407
+ <h3 class="font-medium mb-2">Mountain landscape</h3>
408
+ <p class="text-sm text-gray-500 mb-3">Snow-capped mountains with a clear blue sky and pine trees.</p>
409
+ <div class="flex flex-wrap mb-2">
410
+ <span class="tag"><i class="fas fa-camera mr-1"></i> Photo</span>
411
+ <span class="tag"><i class="fas fa-mountain mr-1"></i> Nature</span>
412
+ <span class="tag"><i class="fas fa-snowflake mr-1"></i> Winter</span>
413
+ </div>
414
+ <div class="flex justify-between items-center">
415
+ <div class="flex">
416
+ <span class="color-swatch" style="background-color: #5F9EA0;"></span>
417
+ <span class="color-swatch" style="background-color: #FFFFFF;"></span>
418
+ <span class="color-swatch" style="background-color: #8B5A2B;"></span>
419
+ </div>
420
+ <button class="neumorph-btn w-8 h-8 rounded-full flex items-center justify-center">
421
+ <i class="fas fa-ellipsis-h text-gray-600"></i>
422
+ </button>
423
+ </div>
424
+ </div>
425
+ </div>
426
+
427
+ <!-- Sample Image Card 5 -->
428
+ <div class="image-card neumorph rounded-xl overflow-hidden">
429
+ <div class="relative h-48 overflow-hidden">
430
+ <img src="https://source.unsplash.com/random/600x400/?food" alt="Sample image" class="w-full h-full object-cover">
431
+ <div class="absolute top-2 right-2">
432
+ <button class="neumorph-btn w-8 h-8 rounded-full flex items-center justify-center">
433
+ <i class="fas fa-heart text-gray-600"></i>
434
+ </button>
435
+ </div>
436
+ </div>
437
+ <div class="p-4">
438
+ <h3 class="font-medium mb-2">Gourmet dish</h3>
439
+ <p class="text-sm text-gray-500 mb-3">Artfully plated restaurant dish with fresh ingredients and herbs.</p>
440
+ <div class="flex flex-wrap mb-2">
441
+ <span class="tag"><i class="fas fa-camera mr-1"></i> Photo</span>
442
+ <span class="tag"><i class="fas fa-utensils mr-1"></i> Food</span>
443
+ <span class="tag"><i class="fas fa-leaf mr-1"></i> Fresh</span>
444
+ </div>
445
+ <div class="flex justify-between items-center">
446
+ <div class="flex">
447
+ <span class="color-swatch" style="background-color: #8B5A2B;"></span>
448
+ <span class="color-swatch" style="background-color: #FF6584;"></span>
449
+ <span class="color-swatch" style="background-color: #F3D2C1;"></span>
450
+ </div>
451
+ <button class="neumorph-btn w-8 h-8 rounded-full flex items-center justify-center">
452
+ <i class="fas fa-ellipsis-h text-gray-600"></i>
453
+ </button>
454
+ </div>
455
+ </div>
456
+ </div>
457
+
458
+ <!-- Sample Image Card 6 -->
459
+ <div class="image-card neumorph rounded-xl overflow-hidden">
460
+ <div class="relative h-48 overflow-hidden">
461
+ <img src="https://source.unsplash.com/random/600x400/?animal" alt="Sample image" class="w-full h-full object-cover">
462
+ <div class="absolute top-2 right-2">
463
+ <button class="neumorph-btn w-8 h-8 rounded-full flex items-center justify-center">
464
+ <i class="fas fa-heart text-gray-600"></i>
465
+ </button>
466
+ </div>
467
+ </div>
468
+ <div class="p-4">
469
+ <h3 class="font-medium mb-2">Wildlife photography</h3>
470
+ <p class="text-sm text-gray-500 mb-3">Close-up of a lion in its natural habitat with soft morning light.</p>
471
+ <div class="flex flex-wrap mb-2">
472
+ <span class="tag"><i class="fas fa-camera mr-1"></i> Photo</span>
473
+ <span class="tag"><i class="fas fa-paw mr-1"></i> Animal</span>
474
+ <span class="tag"><i class="fas fa-sun mr-1"></i> Morning</span>
475
+ </div>
476
+ <div class="flex justify-between items-center">
477
+ <div class="flex">
478
+ <span class="color-swatch" style="background-color: #8B5A2B;"></span>
479
+ <span class="color-swatch" style="background-color: #1E1E2C;"></span>
480
+ <span class="color-swatch" style="background-color: #F3D2C1;"></span>
481
+ </div>
482
+ <button class="neumorph-btn w-8 h-8 rounded-full flex items-center justify-center">
483
+ <i class="fas fa-ellipsis-h text-gray-600"></i>
484
+ </button>
485
+ </div>
486
+ </div>
487
+ </div>
488
+ </div>
489
+
490
+ <!-- Pagination -->
491
+ <div class="flex justify-center mt-8">
492
+ <nav class="neumorph p-2 rounded-full">
493
+ <ul class="flex space-x-2">
494
+ <li>
495
+ <button class="neumorph-btn w-10 h-10 rounded-full flex items-center justify-center">
496
+ <i class="fas fa-chevron-left"></i>
497
+ </button>
498
+ </li>
499
+ <li>
500
+ <button class="neumorph-btn-primary w-10 h-10 rounded-full flex items-center justify-center">1</button>
501
+ </li>
502
+ <li>
503
+ <button class="neumorph-btn w-10 h-10 rounded-full flex items-center justify-center">2</button>
504
+ </li>
505
+ <li>
506
+ <button class="neumorph-btn w-10 h-10 rounded-full flex items-center justify-center">3</button>
507
+ </li>
508
+ <li>
509
+ <button class="neumorph-btn w-10 h-10 rounded-full flex items-center justify-center">
510
+ <i class="fas fa-ellipsis-h"></i>
511
+ </button>
512
+ </li>
513
+ <li>
514
+ <button class="neumorph-btn w-10 h-10 rounded-full flex items-center justify-center">8</button>
515
+ </li>
516
+ <li>
517
+ <button class="neumorph-btn w-10 h-10 rounded-full flex items-center justify-center">
518
+ <i class="fas fa-chevron-right"></i>
519
+ </button>
520
+ </li>
521
+ </ul>
522
+ </nav>
523
+ </div>
524
+ </div>
525
+ </div>
526
+ </div>
527
+ </main>
528
+
529
+ <!-- Image Detail Modal (Hidden by default) -->
530
+ <div id="imageModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
531
+ <div class="neumorph-lg w-full max-w-5xl rounded-2xl overflow-hidden">
532
+ <div class="flex">
533
+ <div class="w-2/3">
534
+ <img id="modalImage" src="" alt="Enlarged image" class="w-full h-full object-cover">
535
+ </div>
536
+ <div class="w-1/3 p-6">
537
+ <div class="flex justify-between items-center mb-4">
538
+ <h3 id="modalTitle" class="text-xl font-bold"></h3>
539
+ <button id="closeModal" class="neumorph-btn w-8 h-8 rounded-full flex items-center justify-center">
540
+ <i class="fas fa-times"></i>
541
+ </button>
542
+ </div>
543
+ <p id="modalDescription" class="text-sm text-gray-500 mb-4"></p>
544
+
545
+ <div class="mb-4">
546
+ <h4 class="font-medium mb-2">Metadata</h4>
547
+ <div class="neumorph-inset p-4 rounded-lg">
548
+ <div class="grid grid-cols-2 gap-2 text-sm">
549
+ <div><span class="font-medium">Medium:</span> <span id="modalMedium">Photography</span></div>
550
+ <div><span class="font-medium">People:</span> <span id="modalPeople">1 female</span></div>
551
+ <div><span class="font-medium">Actions:</span> <span id="modalActions">Standing</span></div>
552
+ <div><span class="font-medium">Clothes:</span> <span id="modalClothes">Casual</span></div>
553
+ <div><span class="font-medium">Environment:</span> <span id="modalEnvironment">Outdoor</span></div>
554
+ <div><span class="font-medium">Colors:</span>
555
+ <span id="modalColors" class="flex">
556
+ <span class="color-swatch" style="background-color: #F3D2C1;"></span>
557
+ <span class="color-swatch" style="background-color: #8B5A2B;"></span>
558
+ <span class="color-swatch" style="background-color: #5F9EA0;"></span>
559
+ </span>
560
+ </div>
561
+ <div><span class="font-medium">Style:</span> <span id="modalStyle">Realistic</span></div>
562
+ <div><span class="font-medium">Mood:</span> <span id="modalMood">Happy</span></div>
563
+ </div>
564
+ </div>
565
+ </div>
566
+
567
+ <div class="mb-4">
568
+ <h4 class="font-medium mb-2">Tags</h4>
569
+ <div class="flex flex-wrap" id="modalTags">
570
+ <span class="tag"><i class="fas fa-camera mr-1"></i> Photo</span>
571
+ <span class="tag"><i class="fas fa-female mr-1"></i> Female</span>
572
+ <span class="tag"><i class="fas fa-smile mr-1"></i> Happy</span>
573
+ </div>
574
+ <div class="mt-2 flex">
575
+ <input type="text" placeholder="Add tag..." class="neumorph-inset px-3 py-1 rounded-l-full text-sm w-full">
576
+ <button class="neumorph-btn-primary px-3 py-1 rounded-r-full text-sm">
577
+ <i class="fas fa-plus"></i>
578
+ </button>
579
+ </div>
580
+ </div>
581
+
582
+ <div class="flex space-x-2">
583
+ <button class="neumorph-btn-primary flex-1 py-2 rounded-full">
584
+ <i class="fas fa-download mr-2"></i> Download
585
+ </button>
586
+ <button class="neumorph-btn w-10 h-10 rounded-full flex items-center justify-center">
587
+ <i class="fas fa-share-alt"></i>
588
+ </button>
589
+ <button class="neumorph-btn w-10 h-10 rounded-full flex items-center justify-center">
590
+ <i class="fas fa-trash"></i>
591
+ </button>
592
+ </div>
593
+ </div>
594
+ </div>
595
+ </div>
596
+ </div>
597
+
598
+ <!-- Footer -->
599
+ <footer class="py-6 px-8 text-center text-gray-500 text-sm">
600
+ <div class="neumorph p-4 rounded-xl">
601
+ <p>© 2023 MEDIATORZ - AI-Powered Image Management System</p>
602
+ <div class="flex justify-center space-x-6 mt-3">
603
+ <a href="#" class="hover:text-primary transition">Privacy</a>
604
+ <a href="#" class="hover:text-primary transition">Terms</a>
605
+ <a href="#" class="hover:text-primary transition">API</a>
606
+ <a href="#" class="hover:text-primary transition">Documentation</a>
607
+ <a href="#" class="hover:text-primary transition">Contact</a>
608
+ </div>
609
+ </div>
610
+ </footer>
611
+
612
+ <script>
613
+ // Toggle upload area
614
+ document.getElementById('uploadBtn').addEventListener('click', function() {
615
+ const uploadArea = document.getElementById('uploadArea');
616
+ uploadArea.classList.toggle('hidden');
617
+ });
618
+
619
+ // Drag and drop functionality
620
+ const uploadArea = document.getElementById('uploadArea');
621
+
622
+ ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
623
+ uploadArea.addEventListener(eventName, preventDefaults, false);
624
+ });
625
+
626
+ function preventDefaults(e) {
627
+ e.preventDefault();
628
+ e.stopPropagation();
629
+ }
630
+
631
+ ['dragenter', 'dragover'].forEach(eventName => {
632
+ uploadArea.addEventListener(eventName, highlight, false);
633
+ });
634
+
635
+ ['dragleave', 'drop'].forEach(eventName => {
636
+ uploadArea.addEventListener(eventName, unhighlight, false);
637
+ });
638
+
639
+ function highlight() {
640
+ uploadArea.classList.add('dragover');
641
+ }
642
+
643
+ function unhighlight() {
644
+ uploadArea.classList.remove('dragover');
645
+ }
646
+
647
+ uploadArea.addEventListener('drop', handleDrop, false);
648
+
649
+ function handleDrop(e) {
650
+ const dt = e.dataTransfer;
651
+ const files = dt.files;
652
+ handleFiles(files);
653
+ }
654
+
655
+ function handleFiles(files) {
656
+ ([...files]).forEach(uploadFile);
657
+ }
658
+
659
+ function uploadFile(file) {
660
+ // Here you would handle the file upload
661
+ console.log('Uploading file:', file.name);
662
+ // In a real app, you would send this to your server
663
+ }
664
+
665
+ // Image modal functionality
666
+ const imageCards = document.querySelectorAll('.image-card');
667
+ const imageModal = document.getElementById('imageModal');
668
+ const modalImage = document.getElementById('modalImage');
669
+ const modalTitle = document.getElementById('modalTitle');
670
+ const modalDescription = document.getElementById('modalDescription');
671
+ const closeModal = document.getElementById('closeModal');
672
+
673
+ imageCards.forEach(card => {
674
+ card.addEventListener('click', function() {
675
+ const imgSrc = this.querySelector('img').src;
676
+ const title = this.querySelector('h3').textContent;
677
+ const description = this.querySelector('p').textContent;
678
+
679
+ modalImage.src = imgSrc;
680
+ modalTitle.textContent = title;
681
+ modalDescription.textContent = description;
682
+
683
+ imageModal.classList.remove('hidden');
684
+ });
685
+ });
686
+
687
+ closeModal.addEventListener('click', function() {
688
+ imageModal.classList.add('hidden');
689
+ });
690
+
691
+ // Close modal when clicking outside
692
+ imageModal.addEventListener('click', function(e) {
693
+ if (e.target === imageModal) {
694
+ imageModal.classList.add('hidden');
695
+ }
696
+ });
697
+
698
+ // File input handling
699
+ const fileInput = document.getElementById('fileInput');
700
+ uploadArea.addEventListener('click', function() {
701
+ fileInput.click();
702
+ });
703
+
704
+ fileInput.addEventListener('change', function() {
705
+ if (this.files.length > 0) {
706
+ handleFiles(this.files);
707
+ }
708
+ });
709
+
710
+ // Sample data for modal (in a real app, this would come from your database)
711
+ const sampleMetadata = {
712
+ medium: "Photography",
713
+ people: "1 female, age 25-30",
714
+ actions: "Smiling, looking at camera",
715
+ clothes: "Casual summer dress",
716
+ environment: "Outdoor, park setting",
717
+ colors: ["#F3D2C1", "#8B5A2B", "#5F9EA0"],
718
+ style: "Portrait, shallow depth of field",
719
+ mood: "Happy, relaxed",
720
+ tags: ["photo", "female", "happy", "portrait", "summer"]
721
+ };
722
+
723
+ // This would be populated from your actual data in a real app
724
+ function populateModalData() {
725
+ document.getElementById('modalMedium').textContent = sampleMetadata.medium;
726
+ document.getElementById('modalPeople').textContent = sampleMetadata.people;
727
+ document.getElementById('modalActions').textContent = sampleMetadata.actions;
728
+ document.getElementById('modalClothes').textContent = sampleMetadata.clothes;
729
+ document.getElementById('modalEnvironment').textContent = sampleMetadata.environment;
730
+ document.getElementById('modalStyle').textContent = sampleMetadata.style;
731
+ document.getElementById('modalMood').textContent = sampleMetadata.mood;
732
+
733
+ const tagsContainer = document.getElementById('modalTags');
734
+ tagsContainer.innerHTML = '';
735
+ sampleMetadata.tags.forEach(tag => {
736
+ const tagElement = document.createElement('span');
737
+ tagElement.className = 'tag';
738
+ tagElement.textContent = tag;
739
+ tagsContainer.appendChild(tagElement);
740
+ });
741
+ }
742
+
743
+ // Call this when opening a modal with actual image data
744
+ populateModalData();
745
+ </script>
746
+ <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=TORZ/my" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
747
+ </html>