Hugging Face's logo

Spaces:
Aliwan
/
File-storage
Running

App Files Community
Aliwan commited on
Commit
1eb81ba
·
verified ·
1 Parent(s): eec3421

Upload 2 files

Browse files
Files changed (2) hide show
  1. all.min.css +0 -0
  2. index.html +442 -19
all.min.css ADDED
The diff for this file is too large to render. See raw diff
 
index.html CHANGED
@@ -1,19 +1,442 @@
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>MediaVault - Digital Library</title>
7
+ <link rel="stylesheet" href="all.min.css">
8
+ <style>
9
+ * {
10
+ margin: 0;
11
+ padding: 0;
12
+ box-sizing: border-box;
13
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
14
+ }
15
+
16
+ :root {
17
+ --primary: #6366f1;
18
+ --secondary: #8b5cf6;
19
+ --dark: #1e293b;
20
+ --darker: #0f172a;
21
+ --light: #f1f5f9;
22
+ --gray: #94a3b8;
23
+ --success: #10b981;
24
+ }
25
+
26
+ body {
27
+ background: linear-gradient(135deg, var(--darker), #1a202c);
28
+ color: var(--light);
29
+ min-height: 100vh;
30
+ padding: 20px;
31
+ }
32
+
33
+ .container {
34
+ max-width: 1400px;
35
+ margin: 0 auto;
36
+ }
37
+
38
+ header {
39
+ display: flex;
40
+ justify-content: space-between;
41
+ align-items: center;
42
+ padding: 20px 0;
43
+ margin-bottom: 30px;
44
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
45
+ }
46
+
47
+ .logo {
48
+ display: flex;
49
+ align-items: center;
50
+ gap: 15px;
51
+ }
52
+
53
+ .logo i {
54
+ font-size: 2.5rem;
55
+ color: var(--primary);
56
+ }
57
+
58
+ .logo h1 {
59
+ font-size: 2.2rem;
60
+ background: linear-gradient(to right, var(--primary), var(--secondary));
61
+ -webkit-background-clip: text;
62
+ background-clip: text;
63
+ color: transparent;
64
+ font-weight: 700;
65
+ }
66
+
67
+ .search-bar {
68
+ display: flex;
69
+ width: 40%;
70
+ position: relative;
71
+ }
72
+
73
+ .search-bar input {
74
+ width: 100%;
75
+ padding: 12px 20px 12px 45px;
76
+ border-radius: 30px;
77
+ border: none;
78
+ background: rgba(255, 255, 255, 0.1);
79
+ color: white;
80
+ font-size: 1rem;
81
+ backdrop-filter: blur(10px);
82
+ }
83
+
84
+ .search-bar i {
85
+ position: absolute;
86
+ left: 15px;
87
+ top: 50%;
88
+ transform: translateY(-50%);
89
+ color: var(--gray);
90
+ }
91
+
92
+ .controls {
93
+ display: flex;
94
+ gap: 15px;
95
+ }
96
+
97
+ .btn {
98
+ padding: 10px 20px;
99
+ border-radius: 30px;
100
+ border: none;
101
+ background: var(--primary);
102
+ color: white;
103
+ font-weight: 600;
104
+ cursor: pointer;
105
+ transition: all 0.3s ease;
106
+ display: flex;
107
+ align-items: center;
108
+ gap: 8px;
109
+ }
110
+
111
+ .btn:hover {
112
+ background: var(--secondary);
113
+ transform: translateY(-2px);
114
+ box-shadow: 0 5px 15px rgba(99, 102, 241, 0.4);
115
+ }
116
+
117
+ .btn-outline {
118
+ background: transparent;
119
+ border: 1px solid var(--primary);
120
+ }
121
+
122
+ .stats {
123
+ display: flex;
124
+ gap: 25px;
125
+ margin: 25px 0;
126
+ }
127
+
128
+ .stat-card {
129
+ background: rgba(255, 255, 255, 0.05);
130
+ border-radius: 15px;
131
+ padding: 20px;
132
+ flex: 1;
133
+ text-align: center;
134
+ backdrop-filter: blur(10px);
135
+ }
136
+
137
+ .stat-card h3 {
138
+ font-size: 1.8rem;
139
+ margin-bottom: 5px;
140
+ color: var(--primary);
141
+ }
142
+
143
+ .stat-card p {
144
+ color: var(--gray);
145
+ font-size: 0.9rem;
146
+ }
147
+
148
+ .filters {
149
+ display: flex;
150
+ gap: 15px;
151
+ margin: 25px 0;
152
+ flex-wrap: wrap;
153
+ }
154
+
155
+ .filter-btn {
156
+ padding: 8px 20px;
157
+ border-radius: 30px;
158
+ background: rgba(255, 255, 255, 0.05);
159
+ border: 1px solid rgba(255, 255, 255, 0.1);
160
+ color: var(--light);
161
+ cursor: pointer;
162
+ transition: all 0.3s ease;
163
+ }
164
+
165
+ .filter-btn.active, .filter-btn:hover {
166
+ background: var(--primary);
167
+ border-color: var(--primary);
168
+ }
169
+
170
+ .media-grid {
171
+ display: grid;
172
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
173
+ gap: 25px;
174
+ margin-top: 20px;
175
+ }
176
+
177
+ .media-item {
178
+ background: rgba(255, 255, 255, 0.05);
179
+ border-radius: 15px;
180
+ overflow: hidden;
181
+ transition: all 0.3s ease;
182
+ backdrop-filter: blur(10px);
183
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
184
+ }
185
+
186
+ .media-item:hover {
187
+ transform: translateY(-10px);
188
+ box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
189
+ }
190
+
191
+ .thumbnail {
192
+ height: 180px;
193
+ width: 100%;
194
+ object-fit: cover;
195
+ display: block;
196
+ }
197
+
198
+ .video-thumb {
199
+ position: relative;
200
+ }
201
+
202
+ .video-icon {
203
+ position: absolute;
204
+ top: 50%;
205
+ left: 50%;
206
+ transform: translate(-50%, -50%);
207
+ font-size: 2.5rem;
208
+ color: white;
209
+ background: rgba(0, 0, 0, 0.6);
210
+ width: 50px;
211
+ height: 50px;
212
+ border-radius: 50%;
213
+ display: flex;
214
+ align-items: center;
215
+ justify-content: center;
216
+ }
217
+
218
+ .media-info {
219
+ padding: 15px;
220
+ }
221
+
222
+ .media-info h3 {
223
+ font-size: 1.1rem;
224
+ margin-bottom: 8px;
225
+ white-space: nowrap;
226
+ overflow: hidden;
227
+ text-overflow: ellipsis;
228
+ }
229
+
230
+ .media-meta {
231
+ display: flex;
232
+ justify-content: space-between;
233
+ color: var(--gray);
234
+ font-size: 0.8rem;
235
+ }
236
+
237
+ footer {
238
+ text-align: center;
239
+ margin-top: 50px;
240
+ padding: 20px;
241
+ color: var(--gray);
242
+ font-size: 0.9rem;
243
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
244
+ }
245
+
246
+ @media (max-width: 768px) {
247
+ header {
248
+ flex-direction: column;
249
+ gap: 20px;
250
+ }
251
+
252
+ .search-bar {
253
+ width: 100%;
254
+ }
255
+
256
+ .controls {
257
+ width: 100%;
258
+ justify-content: center;
259
+ }
260
+ }
261
+ </style>
262
+ </head>
263
+ <body>
264
+ <div class="container">
265
+ <header>
266
+ <div class="logo">
267
+ <i class="fas fa-cloud-upload-alt"></i>
268
+ <h1>MediaVault</h1>
269
+ </div>
270
+ <div class="search-bar">
271
+ <i class="fas fa-search"></i>
272
+ <input type="text" placeholder="Search your media...">
273
+ </div>
274
+ <div class="controls">
275
+ <button class="btn"><i class="fas fa-plus"></i> Upload</button>
276
+ <button class="btn btn-outline"><i class="fas fa-sync-alt"></i> Refresh</button>
277
+ </div>
278
+ </header>
279
+
280
+ <div class="stats">
281
+ <div class="stat-card">
282
+ <h3>1,248</h3>
283
+ <p>Total Files</p>
284
+ </div>
285
+ <div class="stat-card">
286
+ <h3>842</h3>
287
+ <p>Images</p>
288
+ </div>
289
+ <div class="stat-card">
290
+ <h3>406</h3>
291
+ <p>Videos</p>
292
+ </div>
293
+ <div class="stat-card">
294
+ <h3>24.7 GB</h3>
295
+ <p>Storage Used</p>
296
+ </div>
297
+ </div>
298
+
299
+ <div class="filters">
300
+ <button class="filter-btn active">All Media</button>
301
+ <button class="filter-btn">Images</button>
302
+ <button class="filter-btn">Videos</button>
303
+ <button class="filter-btn">Recent</button>
304
+ <button class="filter-btn">Favorites</button>
305
+ <button class="filter-btn">Documents</button>
306
+ </div>
307
+
308
+ <div class="media-grid">
309
+ <!-- Image items -->
310
+ <div class="media-item">
311
+ <img src="1.png" alt="" class="thumbnail">
312
+ <div class="media-info">
313
+ <h3></h3>
314
+ <div class="media-meta">
315
+ <span><i class="fas fa-image"></i> JPG</span>
316
+ <span>2.4 MB</span>
317
+ </div>
318
+ </div>
319
+ </div>
320
+
321
+ <div class="media-item">
322
+ <img src="" alt="Ocean Sunset" class="thumbnail">
323
+ <div class="media-info">
324
+ <h3>Ocean Sunset</h3>
325
+ <div class="media-meta">
326
+ <span><i class="fas fa-image"></i> PNG</span>
327
+ <span>3.1 MB</span>
328
+ </div>
329
+ </div>
330
+ </div>
331
+
332
+ <div class="media-item">
333
+ <div class="thumbnail video-thumb">
334
+ <img src="" alt="Video Preview">
335
+ <div class="video-icon">
336
+ <i class="fas fa-play"></i>
337
+ </div>
338
+ </div>
339
+ <div class="media-info">
340
+ <h3>Travel Vlog</h3>
341
+ <div class="media-meta">
342
+ <span><i class="fas fa-film"></i> MP4</span>
343
+ <span>12.4 MB</span>
344
+ </div>
345
+ </div>
346
+ </div>
347
+
348
+ <div class="media-item">
349
+ <img src="" alt="Forest Path" class="thumbnail">
350
+ <div class="media-info">
351
+ <h3>Forest Path</h3>
352
+ <div class="media-meta">
353
+ <span><i class="fas fa-image"></i> JPEG</span>
354
+ <span>1.8 MB</span>
355
+ </div>
356
+ </div>
357
+ </div>
358
+
359
+ <div class="media-item">
360
+ <div class="thumbnail video-thumb">
361
+ <img src="" alt="Product Demo">
362
+ <div class="video-icon">
363
+ <i class="fas fa-play"></i>
364
+ </div>
365
+ </div>
366
+ <div class="media-info">
367
+ <h3>Product Demo</h3>
368
+ <div class="media-meta">
369
+ <span><i class="fas fa-film"></i> MOV</span>
370
+ <span>45.2 MB</span>
371
+ </div>
372
+ </div>
373
+ </div>
374
+
375
+ <div class="media-item">
376
+ <img src="" alt="City Lights" class="thumbnail">
377
+ <div class="media-info">
378
+ <h3>City Lights</h3>
379
+ <div class="media-meta">
380
+ <span><i class="fas fa-image"></i> JPG</span>
381
+ <span>4.2 MB</span>
382
+ </div>
383
+ </div>
384
+ </div>
385
+
386
+ <div class="media-item">
387
+ <img src="" alt="Nature Closeup" class="thumbnail">
388
+ <div class="media-info">
389
+ <h3>Nature Closeup</h3>
390
+ <div class="media-meta">
391
+ <span><i class="fas fa-image"></i> PNG</span>
392
+ <span>2.7 MB</span>
393
+ </div>
394
+ </div>
395
+ </div>
396
+
397
+ <div class="media-item">
398
+ <div class="thumbnail video-thumb">
399
+ <img src="" alt="Event Highlights">
400
+ <div class="video-icon">
401
+ <i class="fas fa-play"></i>
402
+ </div>
403
+ </div>
404
+ <div class="media-info">
405
+ <h3>Event Highlights</h3>
406
+ <div class="media-meta">
407
+ <span><i class="fas fa-film"></i> MP4</span>
408
+ <span>8.9 MB</span>
409
+ </div>
410
+ </div>
411
+ </div>
412
+ </div>
413
+
414
+ <footer>
415
+ <p>© 2023 MediaVault - Secure Cloud Storage for Your Media Files</p>
416
+ </footer>
417
+ </div>
418
+
419
+ <script>
420
+ // Add interactivity to filter buttons
421
+ document.querySelectorAll('.filter-btn').forEach(button => {
422
+ button.addEventListener('click', function() {
423
+ document.querySelectorAll('.filter-btn').forEach(btn => {
424
+ btn.classList.remove('active');
425
+ });
426
+ this.classList.add('active');
427
+ });
428
+ });
429
+
430
+ // Add here hover effect to media items in the future
431
+ document.querySelectorAll('.media-item').forEach(item => {
432
+ item.addEventListener('mouseenter', function() {
433
+ this.style.transform = 'translateY(-10px)';
434
+ });
435
+
436
+ item.addEventListener('mouseleave', function() {
437
+ this.style.transform = 'translateY(0)';
438
+ });
439
+ });
440
+ </script>
441
+ </body>
442
+ </html>