Hugging Face's logo

Spaces:
d310h
/
anycoder-17f8ba0a
Running

App Files Community
d310h commited on
Commit
6dda236
·
verified ·
1 Parent(s): 42ca21d

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +832 -19
index.html CHANGED
@@ -1,19 +1,832 @@
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>File Portal 2025</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ :root {
10
+ --primary: #4a6bff;
11
+ --primary-dark: #3a5bef;
12
+ --secondary: #f8f9fa;
13
+ --text: #212529;
14
+ --text-light: #6c757d;
15
+ --success: #28a745;
16
+ --danger: #dc3545;
17
+ --warning: #ffc107;
18
+ --border-radius: 12px;
19
+ --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
20
+ --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
21
+ }
22
+
23
+ * {
24
+ margin: 0;
25
+ padding: 0;
26
+ box-sizing: border-box;
27
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
28
+ }
29
+
30
+ body {
31
+ background-color: #f5f7ff;
32
+ color: var(--text);
33
+ line-height: 1.6;
34
+ min-height: 100vh;
35
+ display: flex;
36
+ flex-direction: column;
37
+ }
38
+
39
+ /* Header */
40
+ header {
41
+ background-color: white;
42
+ box-shadow: var(--box-shadow);
43
+ padding: 1rem 2rem;
44
+ display: flex;
45
+ justify-content: space-between;
46
+ align-items: center;
47
+ position: sticky;
48
+ top: 0;
49
+ z-index: 100;
50
+ }
51
+
52
+ .logo {
53
+ font-size: 1.5rem;
54
+ font-weight: 700;
55
+ color: var(--primary);
56
+ text-decoration: none;
57
+ display: flex;
58
+ align-items: center;
59
+ gap: 0.5rem;
60
+ }
61
+
62
+ .anycoder-link {
63
+ font-size: 0.8rem;
64
+ color: var(--text-light);
65
+ text-decoration: none;
66
+ margin-left: 1rem;
67
+ }
68
+
69
+ .nav-links {
70
+ display: flex;
71
+ gap: 1.5rem;
72
+ }
73
+
74
+ .nav-link {
75
+ text-decoration: none;
76
+ color: var(--text-light);
77
+ font-weight: 500;
78
+ transition: var(--transition);
79
+ padding: 0.5rem 0;
80
+ position: relative;
81
+ }
82
+
83
+ .nav-link:hover {
84
+ color: var(--primary);
85
+ }
86
+
87
+ .nav-link::after {
88
+ content: '';
89
+ position: absolute;
90
+ bottom: 0;
91
+ left: 0;
92
+ width: 0;
93
+ height: 2px;
94
+ background-color: var(--primary);
95
+ transition: var(--transition);
96
+ }
97
+
98
+ .nav-link:hover::after {
99
+ width: 100%;
100
+ }
101
+
102
+ .auth-buttons {
103
+ display: flex;
104
+ gap: 1rem;
105
+ }
106
+
107
+ .btn {
108
+ padding: 0.5rem 1rem;
109
+ border-radius: var(--border-radius);
110
+ text-decoration: none;
111
+ font-weight: 500;
112
+ transition: var(--transition);
113
+ border: none;
114
+ cursor: pointer;
115
+ display: inline-flex;
116
+ align-items: center;
117
+ gap: 0.5rem;
118
+ }
119
+
120
+ .btn-primary {
121
+ background-color: var(--primary);
122
+ color: white;
123
+ }
124
+
125
+ .btn-primary:hover {
126
+ background-color: var(--primary-dark);
127
+ }
128
+
129
+ .btn-secondary {
130
+ background-color: transparent;
131
+ color: var(--text);
132
+ border: 1px solid var(--text-light);
133
+ }
134
+
135
+ .btn-secondary:hover {
136
+ background-color: var(--secondary);
137
+ }
138
+
139
+ /* Main Content */
140
+ main {
141
+ flex: 1;
142
+ padding: 2rem;
143
+ max-width: 1200px;
144
+ margin: 0 auto;
145
+ width: 100%;
146
+ }
147
+
148
+ /* Hero Section */
149
+ .hero {
150
+ text-align: center;
151
+ padding: 3rem 0;
152
+ background: linear-gradient(135deg, var(--primary), var(--primary-dark));
153
+ color: white;
154
+ border-radius: var(--border-radius);
155
+ margin-bottom: 2rem;
156
+ position: relative;
157
+ overflow: hidden;
158
+ }
159
+
160
+ .hero::before {
161
+ content: '';
162
+ position: absolute;
163
+ top: 0;
164
+ left: 0;
165
+ width: 100%;
166
+ height: 100%;
167
+ background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="1" fill="rgba(255,255,255,0.1)"/></svg>');
168
+ opacity: 0.3;
169
+ }
170
+
171
+ .hero-content {
172
+ position: relative;
173
+ z-index: 1;
174
+ }
175
+
176
+ .hero h1 {
177
+ font-size: 2.5rem;
178
+ margin-bottom: 1rem;
179
+ }
180
+
181
+ .hero p {
182
+ font-size: 1.2rem;
183
+ margin-bottom: 2rem;
184
+ max-width: 700px;
185
+ margin-left: auto;
186
+ margin-right: auto;
187
+ }
188
+
189
+ /* File Grid */
190
+ .file-grid {
191
+ display: grid;
192
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
193
+ gap: 1.5rem;
194
+ margin-top: 2rem;
195
+ }
196
+
197
+ .file-card {
198
+ background-color: white;
199
+ border-radius: var(--border-radius);
200
+ padding: 1.5rem;
201
+ box-shadow: var(--box-shadow);
202
+ transition: var(--transition);
203
+ display: flex;
204
+ flex-direction: column;
205
+ }
206
+
207
+ .file-card:hover {
208
+ transform: translateY(-5px);
209
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
210
+ }
211
+
212
+ .file-icon {
213
+ font-size: 3rem;
214
+ color: var(--primary);
215
+ margin-bottom: 1rem;
216
+ text-align: center;
217
+ }
218
+
219
+ .file-info h3 {
220
+ margin-bottom: 0.5rem;
221
+ color: var(--text);
222
+ }
223
+
224
+ .file-info p {
225
+ color: var(--text-light);
226
+ font-size: 0.9rem;
227
+ margin-bottom: 1rem;
228
+ }
229
+
230
+ .file-actions {
231
+ display: flex;
232
+ justify-content: space-between;
233
+ margin-top: auto;
234
+ }
235
+
236
+ .btn-download {
237
+ background-color: var(--success);
238
+ color: white;
239
+ width: 100%;
240
+ }
241
+
242
+ .btn-download:hover {
243
+ background-color: #218838;
244
+ }
245
+
246
+ /* Admin Panel */
247
+ .admin-panel {
248
+ display: none;
249
+ background-color: white;
250
+ border-radius: var(--border-radius);
251
+ padding: 2rem;
252
+ box-shadow: var(--box-shadow);
253
+ margin-top: 2rem;
254
+ }
255
+
256
+ .admin-panel h2 {
257
+ margin-bottom: 1.5rem;
258
+ color: var(--primary);
259
+ }
260
+
261
+ .upload-form {
262
+ display: flex;
263
+ flex-direction: column;
264
+ gap: 1rem;
265
+ margin-bottom: 2rem;
266
+ }
267
+
268
+ .form-group {
269
+ display: flex;
270
+ flex-direction: column;
271
+ gap: 0.5rem;
272
+ }
273
+
274
+ .form-group label {
275
+ font-weight: 500;
276
+ color: var(--text);
277
+ }
278
+
279
+ .form-control {
280
+ padding: 0.75rem;
281
+ border: 1px solid #ced4da;
282
+ border-radius: var(--border-radius);
283
+ font-size: 1rem;
284
+ transition: var(--transition);
285
+ }
286
+
287
+ .form-control:focus {
288
+ outline: none;
289
+ border-color: var(--primary);
290
+ box-shadow: 0 0 0 3px rgba(74, 107, 255, 0.25);
291
+ }
292
+
293
+ .file-list {
294
+ margin-top: 2rem;
295
+ }
296
+
297
+ .file-item {
298
+ display: flex;
299
+ justify-content: space-between;
300
+ align-items: center;
301
+ padding: 1rem;
302
+ border-bottom: 1px solid #eee;
303
+ }
304
+
305
+ .file-item:last-child {
306
+ border-bottom: none;
307
+ }
308
+
309
+ .file-actions-admin {
310
+ display: flex;
311
+ gap: 0.5rem;
312
+ }
313
+
314
+ .btn-danger {
315
+ background-color: var(--danger);
316
+ color: white;
317
+ }
318
+
319
+ .btn-danger:hover {
320
+ background-color: #c82333;
321
+ }
322
+
323
+ .btn-warning {
324
+ background-color: var(--warning);
325
+ color: white;
326
+ }
327
+
328
+ .btn-warning:hover {
329
+ background-color: #e0a800;
330
+ }
331
+
332
+ /* Login Modal */
333
+ .modal {
334
+ display: none;
335
+ position: fixed;
336
+ top: 0;
337
+ left: 0;
338
+ width: 100%;
339
+ height: 100%;
340
+ background-color: rgba(0, 0, 0, 0.5);
341
+ z-index: 200;
342
+ justify-content: center;
343
+ align-items: center;
344
+ }
345
+
346
+ .modal.active {
347
+ display: flex;
348
+ }
349
+
350
+ .modal-content {
351
+ background-color: white;
352
+ padding: 2rem;
353
+ border-radius: var(--border-radius);
354
+ width: 100%;
355
+ max-width: 400px;
356
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
357
+ position: relative;
358
+ }
359
+
360
+ .modal-close {
361
+ position: absolute;
362
+ top: 1rem;
363
+ right: 1rem;
364
+ background: none;
365
+ border: none;
366
+ font-size: 1.5rem;
367
+ cursor: pointer;
368
+ color: var(--text-light);
369
+ }
370
+
371
+ .modal h2 {
372
+ margin-bottom: 1.5rem;
373
+ color: var(--primary);
374
+ text-align: center;
375
+ }
376
+
377
+ /* Responsive */
378
+ @media (max-width: 768px) {
379
+ header {
380
+ padding: 1rem;
381
+ }
382
+
383
+ .nav-links {
384
+ display: none;
385
+ }
386
+
387
+ .hero h1 {
388
+ font-size: 2rem;
389
+ }
390
+
391
+ .hero p {
392
+ font-size: 1rem;
393
+ }
394
+
395
+ .file-grid {
396
+ grid-template-columns: 1fr;
397
+ }
398
+ }
399
+
400
+ /* 2025 UI Enhancements */
401
+ /* Glassmorphism effect */
402
+ .glass-effect {
403
+ background: rgba(255, 255, 255, 0.1);
404
+ backdrop-filter: blur(10px);
405
+ -webkit-backdrop-filter: blur(10px);
406
+ border: 1px solid rgba(255, 255, 255, 0.2);
407
+ }
408
+
409
+ /* Neon glow for interactive elements */
410
+ .neon-glow {
411
+ box-shadow: 0 0 10px rgba(74, 107, 255, 0.5);
412
+ }
413
+
414
+ /* Micro-interactions */
415
+ @keyframes pulse {
416
+ 0% { transform: scale(1); }
417
+ 50% { transform: scale(1.05); }
418
+ 100% { transform: scale(1); }
419
+ }
420
+
421
+ .pulse-animation {
422
+ animation: pulse 2s infinite;
423
+ }
424
+
425
+ /* Dark mode support */
426
+ @media (prefers-color-scheme: dark) {
427
+ :root {
428
+ --primary: #6a7bff;
429
+ --primary-dark: #5a6bef;
430
+ --secondary: #212529;
431
+ --text: #f8f9fa;
432
+ --text-light: #adb5bd;
433
+ --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
434
+ }
435
+
436
+ body {
437
+ background-color: #121212;
438
+ }
439
+
440
+ header {
441
+ background-color: #1e1e1e;
442
+ }
443
+
444
+ .file-card, .modal-content, .admin-panel {
445
+ background-color: #2d2d2d;
446
+ }
447
+
448
+ .form-control {
449
+ background-color: #3d3d3d;
450
+ border-color: #4d4d4d;
451
+ color: white;
452
+ }
453
+ }
454
+ </style>
455
+ </head>
456
+ <body>
457
+ <header>
458
+ <a href="#" class="logo">
459
+ <i class="fas fa-cloud-download-alt"></i>
460
+ FilePortal
461
+ </a>
462
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank">Built with anycoder</a>
463
+ <div class="auth-buttons">
464
+ <button id="loginBtn" class="btn btn-secondary">
465
+ <i class="fas fa-sign-in-alt"></i> Login
466
+ </button>
467
+ <button id="adminBtn" class="btn btn-primary">
468
+ <i class="fas fa-user-shield"></i> Admin
469
+ </button>
470
+ </div>
471
+ </header>
472
+
473
+ <main>
474
+ <section class="hero">
475
+ <div class="hero-content">
476
+ <h1>Welcome to FilePortal 2025</h1>
477
+ <p>Download files securely with your credentials. Admins can manage content with our advanced dashboard.</p>
478
+ <div class="auth-buttons">
479
+ <button id="loginBtnHero" class="btn btn-secondary glass-effect">
480
+ <i class="fas fa-sign-in-alt"></i> User Login
481
+ </button>
482
+ <button id="adminBtnHero" class="btn btn-primary glass-effect neon-glow">
483
+ <i class="fas fa-user-shield"></i> Admin Panel
484
+ </button>
485
+ </div>
486
+ </div>
487
+ </section>
488
+
489
+ <section class="file-section">
490
+ <h2>Available Files</h2>
491
+ <div class="file-grid" id="fileGrid">
492
+ <!-- Files will be loaded here -->
493
+ <div class="file-card">
494
+ <div class="file-icon">
495
+ <i class="fas fa-file-pdf"></i>
496
+ </div>
497
+ <div class="file-info">
498
+ <h3>Documentation.pdf</h3>
499
+ <p>Updated: 2025-01-15 | Size: 2.4MB</p>
500
+ </div>
501
+ <div class="file-actions">
502
+ <button class="btn btn-download">
503
+ <i class="fas fa-download"></i> Download
504
+ </button>
505
+ </div>
506
+ </div>
507
+
508
+ <div class="file-card">
509
+ <div class="file-icon">
510
+ <i class="fas fa-file-code"></i>
511
+ </div>
512
+ <div class="file-info">
513
+ <h3>SourceCode.zip</h3>
514
+ <p>Updated: 2025-01-10 | Size: 15.6MB</p>
515
+ </div>
516
+ <div class="file-actions">
517
+ <button class="btn btn-download">
518
+ <i class="fas fa-download"></i> Download
519
+ </button>
520
+ </div>
521
+ </div>
522
+
523
+ <div class="file-card">
524
+ <div class="file-icon">
525
+ <i class="fas fa-file-excel"></i>
526
+ </div>
527
+ <div class="file-info">
528
+ <h3>DataSheet.xlsx</h3>
529
+ <p>Updated: 2025-01-12 | Size: 1.8MB</p>
530
+ </div>
531
+ <div class="file-actions">
532
+ <button class="btn btn-download">
533
+ <i class="fas fa-download"></i> Download
534
+ </button>
535
+ </div>
536
+ </div>
537
+ </div>
538
+ </section>
539
+
540
+ <section class="admin-panel" id="adminPanel">
541
+ <h2>Admin Dashboard</h2>
542
+ <div class="upload-form">
543
+ <div class="form-group">
544
+ <label for="fileName">File Name</label>
545
+ <input type="text" id="fileName" class="form-control" placeholder="Enter file name">
546
+ </div>
547
+ <div class="form-group">
548
+ <label for="fileUpload">Upload File</label>
549
+ <input type="file" id="fileUpload" class="form-control">
550
+ </div>
551
+ <button id="uploadBtn" class="btn btn-primary">
552
+ <i class="fas fa-upload"></i> Upload File
553
+ </button>
554
+ </div>
555
+
556
+ <div class="file-list">
557
+ <h3>Managed Files</h3>
558
+ <div id="adminFileList">
559
+ <!-- Admin file list will be loaded here -->
560
+ </div>
561
+ </div>
562
+ </section>
563
+ </main>
564
+
565
+ <!-- Login Modal -->
566
+ <div class="modal" id="loginModal">
567
+ <div class="modal-content">
568
+ <button class="modal-close" id="closeModal">&times;</button>
569
+ <h2>Login</h2>
570
+ <form id="loginForm">
571
+ <div class="form-group">
572
+ <label for="username">Username</label>
573
+ <input type="text" id="username" class="form-control" placeholder="Enter username" required>
574
+ </div>
575
+ <div class="form-group">
576
+ <label for="password">Password</label>
577
+ <input type="password" id="password" class="form-control" placeholder="Enter password" required>
578
+ </div>
579
+ <div class="form-group">
580
+ <label for="userType">Login As</label>
581
+ <select id="userType" class="form-control">
582
+ <option value="user">Regular User</option>
583
+ <option value="admin">Administrator</option>
584
+ </select>
585
+ </div>
586
+ <button type="submit" class="btn btn-primary" style="width: 100%;">
587
+ <i class="fas fa-sign-in-alt"></i> Login
588
+ </button>
589
+ </form>
590
+ </div>
591
+ </div>
592
+
593
+ <script>
594
+ // DOM Elements
595
+ const loginBtn = document.getElementById('loginBtn');
596
+ const loginBtnHero = document.getElementById('loginBtnHero');
597
+ const adminBtn = document.getElementById('adminBtn');
598
+ const adminBtnHero = document.getElementById('adminBtnHero');
599
+ const adminPanel = document.getElementById('adminPanel');
600
+ const loginModal = document.getElementById('loginModal');
601
+ const closeModal = document.getElementById('closeModal');
602
+ const loginForm = document.getElementById('loginForm');
603
+ const uploadBtn = document.getElementById('uploadBtn');
604
+ const fileGrid = document.getElementById('fileGrid');
605
+ const adminFileList = document.getElementById('adminFileList');
606
+
607
+ // State
608
+ let isAdmin = false;
609
+ let currentUser = null;
610
+
611
+ // Sample data
612
+ let files = [
613
+ { id: 1, name: 'Documentation.pdf', type: 'pdf', size: '2.4MB', date: '2025-01-15' },
614
+ { id: 2, name: 'SourceCode.zip', type: 'zip', size: '15.6MB', date: '2025-01-10' },
615
+ { id: 3, name: 'DataSheet.xlsx', type: 'xlsx', size: '1.8MB', date: '2025-01-12' }
616
+ ];
617
+
618
+ // Event Listeners
619
+ loginBtn.addEventListener('click', openLoginModal);
620
+ loginBtnHero.addEventListener('click', openLoginModal);
621
+ adminBtn.addEventListener('click', toggleAdminPanel);
622
+ adminBtnHero.addEventListener('click', openLoginModal);
623
+ closeModal.addEventListener('click', closeLoginModal);
624
+ uploadBtn.addEventListener('click', handleUpload);
625
+ loginForm.addEventListener('submit', handleLogin);
626
+
627
+ // Functions
628
+ function openLoginModal() {
629
+ loginModal.classList.add('active');
630
+ }
631
+
632
+ function closeLoginModal() {
633
+ loginModal.classList.remove('active');
634
+ }
635
+
636
+ function toggleAdminPanel() {
637
+ if (isAdmin) {
638
+ adminPanel.style.display = adminPanel.style.display === 'block' ? 'none' : 'block';
639
+ adminBtn.textContent = adminPanel.style.display === 'block' ? 'Hide Admin' : 'Admin';
640
+ } else {
641
+ openLoginModal();
642
+ }
643
+ }
644
+
645
+ function handleLogin(e) {
646
+ e.preventDefault();
647
+ const username = document.getElementById('username').value;
648
+ const password = document.getElementById('password').value;
649
+ const userType = document.getElementById('userType').value;
650
+
651
+ // Simple authentication (in a real app, this would be server-side)
652
+ if (username && password) {
653
+ currentUser = username;
654
+ isAdmin = userType === 'admin';
655
+
656
+ if (isAdmin) {
657
+ adminBtn.textContent = 'Admin Panel';
658
+ adminPanel.style.display = 'block';
659
+ }
660
+
661
+ closeLoginModal();
662
+ loginForm.reset();
663
+ showNotification(`Logged in as ${isAdmin ? 'Admin' : 'User'}`, 'success');
664
+ } else {
665
+ showNotification('Please enter username and password', 'danger');
666
+ }
667
+ }
668
+
669
+ function handleUpload() {
670
+ if (!isAdmin) {
671
+ showNotification('You need admin privileges to upload files', 'danger');
672
+ return;
673
+ }
674
+
675
+ const fileName = document.getElementById('fileName').value;
676
+ const fileInput = document.getElementById('fileUpload');
677
+
678
+ if (fileName && fileInput.files.length > 0) {
679
+ const file = fileInput.files[0];
680
+ const newFile = {
681
+ id: files.length + 1,
682
+ name: fileName,
683
+ type: fileName.split('.').pop(),
684
+ size: formatFileSize(file.size),
685
+ date: new Date().toISOString().split('T')[0]
686
+ };
687
+
688
+ files.push(newFile);
689
+ renderFiles();
690
+ renderAdminFiles();
691
+ showNotification('File uploaded successfully!', 'success');
692
+
693
+ // Reset form
694
+ document.getElementById('fileName').value = '';
695
+ fileInput.value = '';
696
+ } else {
697
+ showNotification('Please fill all fields', 'danger');
698
+ }
699
+ }
700
+
701
+ function deleteFile(id) {
702
+ files = files.filter(file => file.id !== id);
703
+ renderFiles();
704
+ renderAdminFiles();
705
+ showNotification('File deleted successfully', 'success');
706
+ }
707
+
708
+ function formatFileSize(bytes) {
709
+ if (bytes < 1024) return bytes + ' bytes';
710
+ else if (bytes < 1048576) return (bytes / 1024).toFixed(2) + ' KB';
711
+ else return (bytes / 1048576).toFixed(2) + ' MB';
712
+ }
713
+
714
+ function renderFiles() {
715
+ fileGrid.innerHTML = files.map(file => `
716
+ <div class="file-card">
717
+ <div class="file-icon">
718
+ ${getFileIcon(file.type)}
719
+ </div>
720
+ <div class="file-info">
721
+ <h3>${file.name}</h3>
722
+ <p>Updated: ${file.date} | Size: ${file.size}</p>
723
+ </div>
724
+ <div class="file-actions">
725
+ <button class="btn btn-download" onclick="downloadFile(${file.id})">
726
+ <i class="fas fa-download"></i> Download
727
+ </button>
728
+ </div>
729
+ </div>
730
+ `).join('');
731
+ }
732
+
733
+ function renderAdminFiles() {
734
+ adminFileList.innerHTML = files.map(file => `
735
+ <div class="file-item">
736
+ <div>
737
+ <strong>${file.name}</strong>
738
+ <span style="color: var(--text-light); margin-left: 1rem;">${file.date}</span>
739
+ </div>
740
+ <div class="file-actions-admin">
741
+ <button class="btn btn-warning" onclick="editFile(${file.id})">
742
+ <i class="fas fa-edit"></i> Edit
743
+ </button>
744
+ <button class="btn btn-danger" onclick="deleteFile(${file.id})">
745
+ <i class="fas fa-trash"></i> Delete
746
+ </button>
747
+ </div>
748
+ </div>
749
+ `).join('');
750
+ }
751
+
752
+ function getFileIcon(type) {
753
+ const icons = {
754
+ pdf: '<i class="fas fa-file-pdf"></i>',
755
+ zip: '<i class="fas fa-file-archive"></i>',
756
+ xlsx: '<i class="fas fa-file-excel"></i>',
757
+ docx: '<i class="fas fa-file-word"></i>',
758
+ txt: '<i class="fas fa-file-alt"></i>',
759
+ jpg: '<i class="fas fa-file-image"></i>',
760
+ png: '<i class="fas fa-file-image"></i>'
761
+ };
762
+ return icons[type.toLowerCase()] || '<i class="fas fa-file"></i>';
763
+ }
764
+
765
+ function downloadFile(id) {
766
+ const file = files.find(f => f.id === id);
767
+ if (file) {
768
+ showNotification(`Downloading ${file.name}...`, 'success');
769
+ // In a real app, this would trigger a file download
770
+ console.log(`Downloading file: ${file.name}`);
771
+ }
772
+ }
773
+
774
+ function editFile(id) {
775
+ const file = files.find(f => f.id === id);
776
+ if (file) {
777
+ const newName = prompt('Edit file name:', file.name);
778
+ if (newName) {
779
+ file.name = newName;
780
+ file.date = new Date().toISOString().split('T')[0];
781
+ renderFiles();
782
+ renderAdminFiles();
783
+ showNotification('File updated successfully', 'success');
784
+ }
785
+ }
786
+ }
787
+
788
+ function showNotification(message, type) {
789
+ const notification = document.createElement('div');
790
+ notification.textContent = message;
791
+ notification.style.position = 'fixed';
792
+ notification.style.bottom = '20px';
793
+ notification.style.right = '20px';
794
+ notification.style.padding = '1rem 1.5rem';
795
+ notification.style.borderRadius = 'var(--border-radius)';
796
+ notification.style.backgroundColor = type === 'success' ? 'var(--success)' :
797
+ type === 'danger' ? 'var(--danger)' : 'var(--warning)';
798
+ notification.style.color = 'white';
799
+ notification.style.boxShadow = 'var(--box-shadow)';
800
+ notification.style.zIndex = '300';
801
+ notification.style.animation = 'fadeIn 0.3s ease-in-out';
802
+
803
+ document.body.appendChild(notification);
804
+
805
+ setTimeout(() => {
806
+ notification.style.animation = 'fadeOut 0.3s ease-in-out';
807
+ setTimeout(() => {
808
+ notification.remove();
809
+ }, 300);
810
+ }, 3000);
811
+ }
812
+
813
+ // Initialize
814
+ renderFiles();
815
+ renderAdminFiles();
816
+
817
+ // Add fade animations to CSS
818
+ const style = document.createElement('style');
819
+ style.textContent = `
820
+ @keyframes fadeIn {
821
+ from { opacity: 0; transform: translateY(20px); }
822
+ to { opacity: 1; transform: translateY(0); }
823
+ }
824
+ @keyframes fadeOut {
825
+ from { opacity: 1; transform: translateY(0); }
826
+ to { opacity: 0; transform: translateY(20px); }
827
+ }
828
+ `;
829
+ document.head.appendChild(style);
830
+ </script>
831
+ </body>
832
+ </html>