Hugging Face's logo

Spaces:
thetwistedpixie
/
anycoder-70fc087b
Running

App Files Community
thetwistedpixie commited on
Commit
417b355
·
verified ·
1 Parent(s): b20219b

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +777 -19
index.html CHANGED
@@ -1,19 +1,777 @@
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>Photo Gallery</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/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-color: #4a6fa5;
18
+ --secondary-color: #166088;
19
+ --accent-color: #4fc3f7;
20
+ --light-color: #f8f9fa;
21
+ --dark-color: #343a40;
22
+ --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
23
+ --transition: all 0.3s ease;
24
+ }
25
+
26
+ body {
27
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
28
+ color: var(--dark-color);
29
+ line-height: 1.6;
30
+ min-height: 100vh;
31
+ }
32
+
33
+ header {
34
+ background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
35
+ color: white;
36
+ padding: 1.5rem 2rem;
37
+ box-shadow: var(--shadow);
38
+ position: sticky;
39
+ top: 0;
40
+ z-index: 100;
41
+ }
42
+
43
+ .header-content {
44
+ display: flex;
45
+ justify-content: space-between;
46
+ align-items: center;
47
+ max-width: 1200px;
48
+ margin: 0 auto;
49
+ }
50
+
51
+ .logo {
52
+ display: flex;
53
+ align-items: center;
54
+ gap: 10px;
55
+ }
56
+
57
+ .logo i {
58
+ font-size: 1.8rem;
59
+ }
60
+
61
+ .logo h1 {
62
+ font-size: 1.8rem;
63
+ font-weight: 700;
64
+ }
65
+
66
+ .anycoder-link {
67
+ color: white;
68
+ text-decoration: none;
69
+ font-size: 0.9rem;
70
+ opacity: 0.8;
71
+ transition: var(--transition);
72
+ }
73
+
74
+ .anycoder-link:hover {
75
+ opacity: 1;
76
+ text-decoration: underline;
77
+ }
78
+
79
+ main {
80
+ max-width: 1200px;
81
+ margin: 2rem auto;
82
+ padding: 0 1.5rem;
83
+ }
84
+
85
+ .gallery-controls {
86
+ display: flex;
87
+ justify-content: space-between;
88
+ align-items: center;
89
+ margin-bottom: 2rem;
90
+ flex-wrap: wrap;
91
+ gap: 1rem;
92
+ }
93
+
94
+ .search-box {
95
+ display: flex;
96
+ background: white;
97
+ border-radius: 30px;
98
+ padding: 0.5rem 1rem;
99
+ box-shadow: var(--shadow);
100
+ flex: 1;
101
+ max-width: 400px;
102
+ }
103
+
104
+ .search-box input {
105
+ border: none;
106
+ outline: none;
107
+ padding: 0.5rem;
108
+ width: 100%;
109
+ font-size: 1rem;
110
+ }
111
+
112
+ .search-box button {
113
+ background: none;
114
+ border: none;
115
+ color: var(--primary-color);
116
+ cursor: pointer;
117
+ font-size: 1.2rem;
118
+ }
119
+
120
+ .category-filter {
121
+ display: flex;
122
+ gap: 0.5rem;
123
+ flex-wrap: wrap;
124
+ }
125
+
126
+ .category-btn {
127
+ background: white;
128
+ border: none;
129
+ padding: 0.5rem 1rem;
130
+ border-radius: 20px;
131
+ font-weight: 500;
132
+ cursor: pointer;
133
+ transition: var(--transition);
134
+ box-shadow: var(--shadow);
135
+ }
136
+
137
+ .category-btn:hover, .category-btn.active {
138
+ background: var(--primary-color);
139
+ color: white;
140
+ }
141
+
142
+ .upload-btn {
143
+ background: var(--accent-color);
144
+ color: white;
145
+ border: none;
146
+ padding: 0.7rem 1.5rem;
147
+ border-radius: 30px;
148
+ font-weight: 600;
149
+ cursor: pointer;
150
+ display: flex;
151
+ align-items: center;
152
+ gap: 0.5rem;
153
+ transition: var(--transition);
154
+ box-shadow: var(--shadow);
155
+ }
156
+
157
+ .upload-btn:hover {
158
+ background: #03a9f4;
159
+ transform: translateY(-2px);
160
+ }
161
+
162
+ .gallery-container {
163
+ display: grid;
164
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
165
+ gap: 1.5rem;
166
+ }
167
+
168
+ .photo-card {
169
+ background: white;
170
+ border-radius: 12px;
171
+ overflow: hidden;
172
+ box-shadow: var(--shadow);
173
+ transition: var(--transition);
174
+ cursor: pointer;
175
+ }
176
+
177
+ .photo-card:hover {
178
+ transform: translateY(-5px);
179
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
180
+ }
181
+
182
+ .photo-img {
183
+ width: 100%;
184
+ height: 200px;
185
+ object-fit: cover;
186
+ display: block;
187
+ }
188
+
189
+ .photo-details {
190
+ padding: 1rem;
191
+ }
192
+
193
+ .photo-title {
194
+ font-weight: 600;
195
+ margin-bottom: 0.5rem;
196
+ font-size: 1.1rem;
197
+ }
198
+
199
+ .photo-description {
200
+ color: #666;
201
+ font-size: 0.9rem;
202
+ margin-bottom: 1rem;
203
+ }
204
+
205
+ .photo-meta {
206
+ display: flex;
207
+ justify-content: space-between;
208
+ align-items: center;
209
+ font-size: 0.8rem;
210
+ color: #888;
211
+ }
212
+
213
+ .photo-actions {
214
+ display: flex;
215
+ gap: 0.8rem;
216
+ }
217
+
218
+ .action-btn {
219
+ background: none;
220
+ border: none;
221
+ color: #888;
222
+ cursor: pointer;
223
+ transition: var(--transition);
224
+ }
225
+
226
+ .action-btn:hover {
227
+ color: var(--primary-color);
228
+ }
229
+
230
+ .modal {
231
+ display: none;
232
+ position: fixed;
233
+ top: 0;
234
+ left: 0;
235
+ width: 100%;
236
+ height: 100%;
237
+ background: rgba(0, 0, 0, 0.8);
238
+ z-index: 1000;
239
+ justify-content: center;
240
+ align-items: center;
241
+ padding: 1rem;
242
+ }
243
+
244
+ .modal-content {
245
+ background: white;
246
+ border-radius: 12px;
247
+ max-width: 800px;
248
+ width: 100%;
249
+ max-height: 90vh;
250
+ overflow: hidden;
251
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
252
+ }
253
+
254
+ .modal-header {
255
+ display: flex;
256
+ justify-content: space-between;
257
+ align-items: center;
258
+ padding: 1rem 1.5rem;
259
+ border-bottom: 1px solid #eee;
260
+ }
261
+
262
+ .modal-title {
263
+ font-weight: 600;
264
+ font-size: 1.2rem;
265
+ }
266
+
267
+ .close-btn {
268
+ background: none;
269
+ border: none;
270
+ font-size: 1.5rem;
271
+ cursor: pointer;
272
+ color: #888;
273
+ }
274
+
275
+ .modal-body {
276
+ padding: 1.5rem;
277
+ max-height: calc(90vh - 120px);
278
+ overflow-y: auto;
279
+ }
280
+
281
+ .modal-img {
282
+ width: 100%;
283
+ border-radius: 8px;
284
+ margin-bottom: 1rem;
285
+ }
286
+
287
+ .modal-description {
288
+ margin-bottom: 1rem;
289
+ }
290
+
291
+ .modal-meta {
292
+ display: flex;
293
+ justify-content: space-between;
294
+ color: #666;
295
+ font-size: 0.9rem;
296
+ }
297
+
298
+ .upload-modal {
299
+ display: none;
300
+ }
301
+
302
+ .upload-form {
303
+ display: flex;
304
+ flex-direction: column;
305
+ gap: 1rem;
306
+ }
307
+
308
+ .form-group {
309
+ display: flex;
310
+ flex-direction: column;
311
+ gap: 0.5rem;
312
+ }
313
+
314
+ .form-group label {
315
+ font-weight: 500;
316
+ }
317
+
318
+ .form-group input, .form-group textarea, .form-group select {
319
+ padding: 0.8rem;
320
+ border: 1px solid #ddd;
321
+ border-radius: 6px;
322
+ font-family: inherit;
323
+ }
324
+
325
+ .form-group textarea {
326
+ min-height: 100px;
327
+ resize: vertical;
328
+ }
329
+
330
+ .submit-btn {
331
+ background: var(--primary-color);
332
+ color: white;
333
+ border: none;
334
+ padding: 0.8rem 1.5rem;
335
+ border-radius: 6px;
336
+ font-weight: 600;
337
+ cursor: pointer;
338
+ transition: var(--transition);
339
+ }
340
+
341
+ .submit-btn:hover {
342
+ background: var(--secondary-color);
343
+ }
344
+
345
+ .file-input-container {
346
+ position: relative;
347
+ display: inline-block;
348
+ width: 100%;
349
+ }
350
+
351
+ .file-input {
352
+ position: absolute;
353
+ left: 0;
354
+ top: 0;
355
+ opacity: 0;
356
+ width: 100%;
357
+ height: 100%;
358
+ cursor: pointer;
359
+ }
360
+
361
+ .file-input-label {
362
+ display: flex;
363
+ flex-direction: column;
364
+ align-items: center;
365
+ justify-content: center;
366
+ padding: 2rem;
367
+ border: 2px dashed #ddd;
368
+ border-radius: 6px;
369
+ cursor: pointer;
370
+ transition: var(--transition);
371
+ text-align: center;
372
+ }
373
+
374
+ .file-input-label:hover {
375
+ border-color: var(--primary-color);
376
+ background: rgba(74, 111, 165, 0.05);
377
+ }
378
+
379
+ .file-input-label i {
380
+ font-size: 2rem;
381
+ color: #888;
382
+ margin-bottom: 0.5rem;
383
+ }
384
+
385
+ footer {
386
+ background: var(--dark-color);
387
+ color: white;
388
+ text-align: center;
389
+ padding: 1.5rem;
390
+ margin-top: 3rem;
391
+ }
392
+
393
+ @media (max-width: 768px) {
394
+ .header-content {
395
+ flex-direction: column;
396
+ gap: 1rem;
397
+ text-align: center;
398
+ }
399
+
400
+ .gallery-controls {
401
+ flex-direction: column;
402
+ align-items: stretch;
403
+ }
404
+
405
+ .search-box {
406
+ max-width: 100%;
407
+ }
408
+
409
+ .category-filter {
410
+ justify-content: center;
411
+ }
412
+
413
+ .gallery-container {
414
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
415
+ }
416
+ }
417
+
418
+ @media (max-width: 480px) {
419
+ .gallery-container {
420
+ grid-template-columns: 1fr;
421
+ }
422
+
423
+ .modal-content {
424
+ margin: 1rem;
425
+ }
426
+ }
427
+ </style>
428
+ </head>
429
+ <body>
430
+ <header>
431
+ <div class="header-content">
432
+ <div class="logo">
433
+ <i class="fas fa-camera"></i>
434
+ <h1>Photo Gallery</h1>
435
+ </div>
436
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank">Built with anycoder</a>
437
+ </div>
438
+ </header>
439
+
440
+ <main>
441
+ <div class="gallery-controls">
442
+ <div class="search-box">
443
+ <input type="text" placeholder="Search photos...">
444
+ <button><i class="fas fa-search"></i></button>
445
+ </div>
446
+
447
+ <div class="category-filter">
448
+ <button class="category-btn active">All</button>
449
+ <button class="category-btn">Nature</button>
450
+ <button class="category-btn">Portrait</button>
451
+ <button class="category-btn">Urban</button>
452
+ <button class="category-btn">Abstract</button>
453
+ </div>
454
+
455
+ <button class="upload-btn" id="openUploadModal">
456
+ <i class="fas fa-cloud-upload-alt"></i>
457
+ Upload Photo
458
+ </button>
459
+ </div>
460
+
461
+ <div class="gallery-container" id="gallery">
462
+ <!-- Photos will be dynamically added here -->
463
+ </div>
464
+ </main>
465
+
466
+ <!-- Photo Detail Modal -->
467
+ <div class="modal" id="photoModal">
468
+ <div class="modal-content">
469
+ <div class="modal-header">
470
+ <h2 class="modal-title" id="modalPhotoTitle">Photo Title</h2>
471
+ <button class="close-btn" id="closeModal">&times;</button>
472
+ </div>
473
+ <div class="modal-body">
474
+ <img id="modalPhotoImg" src="" alt="" class="modal-img">
475
+ <p class="modal-description" id="modalPhotoDescription">Photo description</p>
476
+ <div class="modal-meta">
477
+ <span id="modalPhotoDate">Date</span>
478
+ <span id="modalPhotoCategory">Category</span>
479
+ </div>
480
+ </div>
481
+ </div>
482
+ </div>
483
+
484
+ <!-- Upload Modal -->
485
+ <div class="modal upload-modal" id="uploadModal">
486
+ <div class="modal-content">
487
+ <div class="modal-header">
488
+ <h2 class="modal-title">Upload New Photo</h2>
489
+ <button class="close-btn" id="closeUploadModal">&times;</button>
490
+ </div>
491
+ <div class="modal-body">
492
+ <form class="upload-form" id="uploadForm">
493
+ <div class="form-group">
494
+ <label for="photoTitle">Photo Title</label>
495
+ <input type="text" id="photoTitle" placeholder="Enter photo title" required>
496
+ </div>
497
+
498
+ <div class="form-group">
499
+ <label for="photoDescription">Description</label>
500
+ <textarea id="photoDescription" placeholder="Enter photo description"></textarea>
501
+ </div>
502
+
503
+ <div class="form-group">
504
+ <label for="photoCategory">Category</label>
505
+ <select id="photoCategory">
506
+ <option value="nature">Nature</option>
507
+ <option value="portrait">Portrait</option>
508
+ <option value="urban">Urban</option>
509
+ <option value="abstract">Abstract</option>
510
+ </select>
511
+ </div>
512
+
513
+ <div class="form-group">
514
+ <label>Upload Photo</label>
515
+ <div class="file-input-container">
516
+ <input type="file" id="photoFile" class="file-input" accept="image/*" required>
517
+ <label for="photoFile" class="file-input-label">
518
+ <i class="fas fa-cloud-upload-alt"></i>
519
+ <span>Click to upload or drag and drop</span>
520
+ <small>PNG, JPG, GIF up to 5MB</small>
521
+ </label>
522
+ </div>
523
+ </div>
524
+
525
+ <button type="submit" class="submit-btn">Upload Photo</button>
526
+ </form>
527
+ </div>
528
+ </div>
529
+ </div>
530
+
531
+ <footer>
532
+ <p>&copy; 2023 Photo Gallery App. All rights reserved.</p>
533
+ </footer>
534
+
535
+ <script>
536
+ // Sample photo data with real image URLs from Picsum
537
+ const photos = [
538
+ {
539
+ id: 1,
540
+ title: "Mountain Landscape",
541
+ description: "A breathtaking view of snow-capped mountains during sunset.",
542
+ category: "nature",
543
+ date: "2023-05-15",
544
+ imageUrl: "https://picsum.photos/id/1018/600/400",
545
+ likes: 42,
546
+ views: 128
547
+ },
548
+ {
549
+ id: 2,
550
+ title: "Urban Architecture",
551
+ description: "Modern city buildings with unique geometric patterns.",
552
+ category: "urban",
553
+ date: "2023-06-22",
554
+ imageUrl: "https://picsum.photos/id/1015/600/400",
555
+ likes: 28,
556
+ views: 95
557
+ },
558
+ {
559
+ id: 3,
560
+ title: "Portrait in Nature",
561
+ description: "A thoughtful portrait taken in a natural forest setting.",
562
+ category: "portrait",
563
+ date: "2023-04-10",
564
+ imageUrl: "https://picsum.photos/id/1011/600/400",
565
+ likes: 56,
566
+ views: 210
567
+ },
568
+ {
569
+ id: 4,
570
+ title: "Abstract Patterns",
571
+ description: "Colorful abstract patterns created with digital art techniques.",
572
+ category: "abstract",
573
+ date: "2023-07-05",
574
+ imageUrl: "https://picsum.photos/id/1019/600/400",
575
+ likes: 37,
576
+ views: 143
577
+ },
578
+ {
579
+ id: 5,
580
+ title: "Coastal View",
581
+ description: "Serene coastal landscape with rocky shores and crashing waves.",
582
+ category: "nature",
583
+ date: "2023-05-30",
584
+ imageUrl: "https://picsum.photos/id/1005/600/400",
585
+ likes: 64,
586
+ views: 187
587
+ },
588
+ {
589
+ id: 6,
590
+ title: "City Lights",
591
+ description: "Vibrant cityscape at night with illuminated buildings and streets.",
592
+ category: "urban",
593
+ date: "2023-06-18",
594
+ imageUrl: "https://picsum.photos/id/1016/600/400",
595
+ likes: 49,
596
+ views: 165
597
+ },
598
+ {
599
+ id: 7,
600
+ title: "Floral Close-up",
601
+ description: "Macro photography of delicate flowers with intricate details.",
602
+ category: "nature",
603
+ date: "2023-04-25",
604
+ imageUrl: "https://picsum.photos/id/1020/600/400",
605
+ likes: 71,
606
+ views: 234
607
+ },
608
+ {
609
+ id: 8,
610
+ title: "Minimalist Portrait",
611
+ description: "Clean and simple portrait with emphasis on facial expressions.",
612
+ category: "portrait",
613
+ date: "2023-07-12",
614
+ imageUrl: "https://picsum.photos/id/1025/600/400",
615
+ likes: 33,
616
+ views: 112
617
+ }
618
+ ];
619
+
620
+ // DOM elements
621
+ const galleryContainer = document.getElementById('gallery');
622
+ const photoModal = document.getElementById('photoModal');
623
+ const uploadModal = document.getElementById('uploadModal');
624
+ const closeModalBtn = document.getElementById('closeModal');
625
+ const closeUploadModalBtn = document.getElementById('closeUploadModal');
626
+ const openUploadModalBtn = document.getElementById('openUploadModal');
627
+ const uploadForm = document.getElementById('uploadForm');
628
+ const searchInput = document.querySelector('.search-box input');
629
+ const categoryButtons = document.querySelectorAll('.category-btn');
630
+
631
+ // Initialize gallery
632
+ function initGallery() {
633
+ renderPhotos(photos);
634
+ }
635
+
636
+ // Render photos to the gallery
637
+ function renderPhotos(photosArray) {
638
+ galleryContainer.innerHTML = '';
639
+
640
+ photosArray.forEach(photo => {
641
+ const photoCard = document.createElement('div');
642
+ photoCard.className = 'photo-card';
643
+ photoCard.innerHTML = `
644
+ <img src="${photo.imageUrl}" alt="${photo.title}" class="photo-img">
645
+ <div class="photo-details">
646
+ <h3 class="photo-title">${photo.title}</h3>
647
+ <p class="photo-description">${photo.description}</p>
648
+ <div class="photo-meta">
649
+ <span>${photo.date}</span>
650
+ <div class="photo-actions">
651
+ <button class="action-btn"><i class="far fa-heart"></i> ${photo.likes}</button>
652
+ <button class="action-btn"><i class="far fa-eye"></i> ${photo.views}</button>
653
+ </div>
654
+ </div>
655
+ </div>
656
+ `;
657
+
658
+ photoCard.addEventListener('click', () => openPhotoModal(photo));
659
+ galleryContainer.appendChild(photoCard);
660
+ });
661
+ }
662
+
663
+ // Open photo modal with details
664
+ function openPhotoModal(photo) {
665
+ document.getElementById('modalPhotoTitle').textContent = photo.title;
666
+ document.getElementById('modalPhotoImg').src = photo.imageUrl;
667
+ document.getElementById('modalPhotoImg').alt = photo.title;
668
+ document.getElementById('modalPhotoDescription').textContent = photo.description;
669
+ document.getElementById('modalPhotoDate').textContent = `Uploaded: ${photo.date}`;
670
+ document.getElementById('modalPhotoCategory').textContent = `Category: ${photo.category.charAt(0).toUpperCase() + photo.category.slice(1)}`;
671
+
672
+ photoModal.style.display = 'flex';
673
+ }
674
+
675
+ // Open upload modal
676
+ function openUploadModal() {
677
+ uploadModal.style.display = 'flex';
678
+ }
679
+
680
+ // Close modals
681
+ function closeModals() {
682
+ photoModal.style.display = 'none';
683
+ uploadModal.style.display = 'none';
684
+ }
685
+
686
+ // Filter photos by category
687
+ function filterByCategory(category) {
688
+ if (category === 'all') {
689
+ renderPhotos(photos);
690
+ } else {
691
+ const filteredPhotos = photos.filter(photo => photo.category === category);
692
+ renderPhotos(filteredPhotos);
693
+ }
694
+ }
695
+
696
+ // Search photos
697
+ function searchPhotos(query) {
698
+ const filteredPhotos = photos.filter(photo =>
699
+ photo.title.toLowerCase().includes(query.toLowerCase()) ||
700
+ photo.description.toLowerCase().includes(query.toLowerCase())
701
+ );
702
+ renderPhotos(filteredPhotos);
703
+ }
704
+
705
+ // Handle photo upload
706
+ function handlePhotoUpload(event) {
707
+ event.preventDefault();
708
+
709
+ const title = document.getElementById('photoTitle').value;
710
+ const description = document.getElementById('photoDescription').value;
711
+ const category = document.getElementById('photoCategory').value;
712
+ const fileInput = document.getElementById('photoFile');
713
+
714
+ if (fileInput.files.length > 0) {
715
+ const file = fileInput.files[0];
716
+ const reader = new FileReader();
717
+
718
+ reader.onload = function(e) {
719
+ const newPhoto = {
720
+ id: photos.length + 1,
721
+ title: title,
722
+ description: description,
723
+ category: category,
724
+ date: new Date().toISOString().split('T')[0],
725
+ imageUrl: e.target.result,
726
+ likes: 0,
727
+ views: 0
728
+ };
729
+
730
+ photos.unshift(newPhoto);
731
+ renderPhotos(photos);
732
+ closeModals();
733
+ uploadForm.reset();
734
+
735
+ // Show success message
736
+ alert('Photo uploaded successfully!');
737
+ };
738
+
739
+ reader.readAsDataURL(file);
740
+ }
741
+ }
742
+
743
+ // Event listeners
744
+ closeModalBtn.addEventListener('click', closeModals);
745
+ closeUploadModalBtn.addEventListener('click', closeModals);
746
+ openUploadModalBtn.addEventListener('click', openUploadModal);
747
+ uploadForm.addEventListener('submit', handlePhotoUpload);
748
+
749
+ // Close modal when clicking outside
750
+ window.addEventListener('click', (event) => {
751
+ if (event.target === photoModal || event.target === uploadModal) {
752
+ closeModals();
753
+ }
754
+ });
755
+
756
+ // Category filter event listeners
757
+ categoryButtons.forEach(button => {
758
+ button.addEventListener('click', () => {
759
+ // Remove active class from all buttons
760
+ categoryButtons.forEach(btn => btn.classList.remove('active'));
761
+ // Add active class to clicked button
762
+ button.classList.add('active');
763
+ // Filter photos
764
+ filterByCategory(button.textContent.toLowerCase());
765
+ });
766
+ });
767
+
768
+ // Search functionality
769
+ searchInput.addEventListener('input', (event) => {
770
+ searchPhotos(event.target.value);
771
+ });
772
+
773
+ // Initialize the gallery
774
+ document.addEventListener('DOMContentLoaded', initGallery);
775
+ </script>
776
+ </body>
777
+ </html>