Hugging Face's logo

Spaces:
samirerty
/
anycoder-b6447f3a
Running

App Files Community
samirerty commited on
Commit
bd184db
·
verified ·
1 Parent(s): baa60a3

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +725 -19
index.html CHANGED
@@ -1,19 +1,725 @@
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="fa" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>فروشگاه اینستاگرامی</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700&display=swap" rel="stylesheet">
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ * {
11
+ margin: 0;
12
+ padding: 0;
13
+ box-sizing: border-box;
14
+ font-family: 'Vazirmatn', sans-serif;
15
+ }
16
+
17
+ :root {
18
+ --primary: #e1306c;
19
+ --bg: #fafafa;
20
+ --border: #dbdbdb;
21
+ --text: #262626;
22
+ --text-light: #8e8e8e;
23
+ }
24
+
25
+ body {
26
+ background: var(--bg);
27
+ color: var(--text);
28
+ min-height: 100vh;
29
+ }
30
+
31
+ /* Header */
32
+ header {
33
+ background: #fff;
34
+ border-bottom: 1px solid var(--border);
35
+ padding: 12px 20px;
36
+ position: sticky;
37
+ top: 0;
38
+ z-index: 100;
39
+ display: flex;
40
+ justify-content: space-between;
41
+ align-items: center;
42
+ }
43
+
44
+ .logo {
45
+ font-size: 22px;
46
+ font-weight: 700;
47
+ background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
48
+ -webkit-background-clip: text;
49
+ -webkit-text-fill-color: transparent;
50
+ background-clip: text;
51
+ }
52
+
53
+ .header-actions {
54
+ display: flex;
55
+ gap: 15px;
56
+ align-items: center;
57
+ }
58
+
59
+ .header-actions i {
60
+ font-size: 22px;
61
+ cursor: pointer;
62
+ color: var(--text);
63
+ transition: 0.2s;
64
+ }
65
+
66
+ .header-actions i:hover {
67
+ color: var(--primary);
68
+ }
69
+
70
+ /* Settings Menu */
71
+ .settings-menu {
72
+ position: fixed;
73
+ top: 60px;
74
+ right: 20px;
75
+ background: #fff;
76
+ border-radius: 12px;
77
+ box-shadow: 0 4px 20px rgba(0,0,0,0.15);
78
+ padding: 10px;
79
+ width: 220px;
80
+ opacity: 0;
81
+ visibility: hidden;
82
+ transform: translateY(-10px);
83
+ transition: 0.3s;
84
+ z-index: 200;
85
+ }
86
+
87
+ .settings-menu.active {
88
+ opacity: 1;
89
+ visibility: visible;
90
+ transform: translateY(0);
91
+ }
92
+
93
+ .settings-menu a {
94
+ display: flex;
95
+ align-items: center;
96
+ gap: 12px;
97
+ padding: 12px;
98
+ color: var(--text);
99
+ text-decoration: none;
100
+ border-radius: 8px;
101
+ transition: 0.2s;
102
+ }
103
+
104
+ .settings-menu a:hover {
105
+ background: #f0f0f0;
106
+ }
107
+
108
+ .settings-menu a i {
109
+ width: 20px;
110
+ color: var(--text-light);
111
+ }
112
+
113
+ /* Profile Section */
114
+ .profile-section {
115
+ background: #fff;
116
+ border-bottom: 1px solid var(--border);
117
+ padding: 30px 20px;
118
+ }
119
+
120
+ .profile-container {
121
+ max-width: 935px;
122
+ margin: 0 auto;
123
+ display: flex;
124
+ align-items: center;
125
+ gap: 50px;
126
+ }
127
+
128
+ .profile-image {
129
+ width: 150px;
130
+ height: 150px;
131
+ border-radius: 50%;
132
+ padding: 3px;
133
+ background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
134
+ flex-shrink: 0;
135
+ }
136
+
137
+ .profile-image img {
138
+ width: 100%;
139
+ height: 100%;
140
+ border-radius: 50%;
141
+ object-fit: cover;
142
+ border: 3px solid #fff;
143
+ }
144
+
145
+ .profile-info h1 {
146
+ font-size: 28px;
147
+ font-weight: 400;
148
+ margin-bottom: 20px;
149
+ display: flex;
150
+ align-items: center;
151
+ gap: 15px;
152
+ }
153
+
154
+ .edit-profile {
155
+ background: transparent;
156
+ border: 1px solid var(--border);
157
+ padding: 5px 15px;
158
+ border-radius: 6px;
159
+ cursor: pointer;
160
+ font-size: 14px;
161
+ }
162
+
163
+ .stats {
164
+ display: flex;
165
+ gap: 40px;
166
+ margin-bottom: 20px;
167
+ }
168
+
169
+ .stat-item {
170
+ text-align: center;
171
+ }
172
+
173
+ .stat-item span {
174
+ font-weight: 700;
175
+ font-size: 18px;
176
+ }
177
+
178
+ .stat-item p {
179
+ color: var(--text);
180
+ font-size: 14px;
181
+ }
182
+
183
+ .bio h2 {
184
+ font-size: 16px;
185
+ font-weight: 700;
186
+ }
187
+
188
+ .bio p {
189
+ font-size: 14px;
190
+ color: var(--text);
191
+ margin-top: 5px;
192
+ }
193
+
194
+ /* Tabs Navigation */
195
+ .tabs {
196
+ background: #fff;
197
+ border-bottom: 1px solid var(--border);
198
+ display: flex;
199
+ justify-content: center;
200
+ gap: 60px;
201
+ }
202
+
203
+ .tab {
204
+ padding: 15px 5px;
205
+ cursor: pointer;
206
+ color: var(--text-light);
207
+ font-size: 12px;
208
+ text-transform: uppercase;
209
+ letter-spacing: 1px;
210
+ border-bottom: 2px solid transparent;
211
+ transition: 0.2s;
212
+ display: flex;
213
+ align-items: center;
214
+ gap: 6px;
215
+ }
216
+
217
+ .tab.active {
218
+ color: var(--text);
219
+ border-bottom-color: var(--text);
220
+ }
221
+
222
+ .tab i {
223
+ font-size: 14px;
224
+ }
225
+
226
+ /* Content Area */
227
+ .content {
228
+ max-width: 935px;
229
+ margin: 0 auto;
230
+ padding: 20px;
231
+ }
232
+
233
+ .tab-content {
234
+ display: none;
235
+ }
236
+
237
+ .tab-content.active {
238
+ display: block;
239
+ }
240
+
241
+ /* Stories */
242
+ .stories-container {
243
+ display: flex;
244
+ gap: 15px;
245
+ overflow-x: auto;
246
+ padding: 10px 0;
247
+ scrollbar-width: none;
248
+ }
249
+
250
+ .stories-container::-webkit-scrollbar {
251
+ display: none;
252
+ }
253
+
254
+ .story {
255
+ display: flex;
256
+ flex-direction: column;
257
+ align-items: center;
258
+ gap: 8px;
259
+ cursor: pointer;
260
+ flex-shrink: 0;
261
+ }
262
+
263
+ .story-ring {
264
+ width: 70px;
265
+ height: 70px;
266
+ border-radius: 50%;
267
+ padding: 3px;
268
+ background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
269
+ }
270
+
271
+ .story-ring.seen {
272
+ background: var(--border);
273
+ }
274
+
275
+ .story-ring img {
276
+ width: 100%;
277
+ height: 100%;
278
+ border-radius: 50%;
279
+ object-fit: cover;
280
+ border: 2px solid #fff;
281
+ }
282
+
283
+ .story span {
284
+ font-size: 12px;
285
+ color: var(--text);
286
+ }
287
+
288
+ /* Posts Grid */
289
+ .posts-grid {
290
+ display: grid;
291
+ grid-template-columns: repeat(3, 1fr);
292
+ gap: 3px;
293
+ }
294
+
295
+ .post {
296
+ aspect-ratio: 1;
297
+ position: relative;
298
+ cursor: pointer;
299
+ overflow: hidden;
300
+ }
301
+
302
+ .post img {
303
+ width: 100%;
304
+ height: 100%;
305
+ object-fit: cover;
306
+ transition: 0.3s;
307
+ }
308
+
309
+ .post:hover img {
310
+ transform: scale(1.05);
311
+ }
312
+
313
+ .post-overlay {
314
+ position: absolute;
315
+ inset: 0;
316
+ background: rgba(0,0,0,0.5);
317
+ display: flex;
318
+ justify-content: center;
319
+ align-items: center;
320
+ gap: 20px;
321
+ opacity: 0;
322
+ transition: 0.3s;
323
+ }
324
+
325
+ .post:hover .post-overlay {
326
+ opacity: 1;
327
+ }
328
+
329
+ .post-overlay span {
330
+ color: #fff;
331
+ font-weight: 700;
332
+ display: flex;
333
+ align-items: center;
334
+ gap: 5px;
335
+ }
336
+
337
+ /* Reels */
338
+ .reels-grid {
339
+ display: grid;
340
+ grid-template-columns: repeat(3, 1fr);
341
+ gap: 3px;
342
+ }
343
+
344
+ .reel {
345
+ aspect-ratio: 9/16;
346
+ position: relative;
347
+ cursor: pointer;
348
+ overflow: hidden;
349
+ border-radius: 8px;
350
+ }
351
+
352
+ .reel img, .reel video {
353
+ width: 100%;
354
+ height: 100%;
355
+ object-fit: cover;
356
+ }
357
+
358
+ .reel-overlay {
359
+ position: absolute;
360
+ bottom: 0;
361
+ left: 0;
362
+ right: 0;
363
+ padding: 15px;
364
+ background: linear-gradient(transparent, rgba(0,0,0,0.7));
365
+ color: #fff;
366
+ }
367
+
368
+ .reel-overlay i {
369
+ margin-left: 10px;
370
+ }
371
+
372
+ /* Mobile Responsive */
373
+ @media (max-width: 768px) {
374
+ .profile-container {
375
+ flex-direction: column;
376
+ gap: 20px;
377
+ text-align: center;
378
+ }
379
+
380
+ .profile-image {
381
+ width: 100px;
382
+ height: 100px;
383
+ }
384
+
385
+ .profile-info h1 {
386
+ justify-content: center;
387
+ font-size: 22px;
388
+ }
389
+
390
+ .stats {
391
+ justify-content: center;
392
+ gap: 25px;
393
+ }
394
+
395
+ .tabs {
396
+ gap: 30px;
397
+ }
398
+
399
+ .posts-grid, .reels-grid {
400
+ grid-template-columns: repeat(2, 1fr);
401
+ }
402
+
403
+ .settings-menu {
404
+ right: 10px;
405
+ left: 10px;
406
+ width: auto;
407
+ }
408
+ }
409
+
410
+ @media (max-width: 480px) {
411
+ .posts-grid, .reels-grid {
412
+ grid-template-columns: repeat(3, 1fr);
413
+ }
414
+
415
+ .profile-section {
416
+ padding: 20px 15px;
417
+ }
418
+ }
419
+
420
+ /* Overlay for menu */
421
+ .overlay {
422
+ position: fixed;
423
+ inset: 0;
424
+ background: rgba(0,0,0,0.5);
425
+ opacity: 0;
426
+ visibility: hidden;
427
+ transition: 0.3s;
428
+ z-index: 150;
429
+ }
430
+
431
+ .overlay.active {
432
+ opacity: 1;
433
+ visibility: visible;
434
+ }
435
+ </style>
436
+ </head>
437
+ <body>
438
+ <!-- Header -->
439
+ <header>
440
+ <div class="logo">فروشگاه</div>
441
+ <div class="header-actions">
442
+ <i class="fas fa-bars" id="settingsBtn"></i>
443
+ <i class="fas fa-heart"></i>
444
+ <i class="fas fa-paper-plane"></i>
445
+ </div>
446
+ </header>
447
+
448
+ <!-- Settings Menu -->
449
+ <div class="overlay" id="overlay"></div>
450
+ <div class="settings-menu" id="settingsMenu">
451
+ <a href="#"><i class="fas fa-user"></i> پروفایل</a>
452
+ <a href="#"><i class="fas fa-bookmark"></i> ذخیره شده</a>
453
+ <a href="#"><i class="fas fa-cog"></i> تنظیمات</a>
454
+ <a href="#"><i class="fas fa-exchange-alt"></i> تعویض حساب</a>
455
+ <a href="#"><i class="fas fa-sign-out-alt"></i> خروج</a>
456
+ </div>
457
+
458
+ <!-- Profile Section -->
459
+ <section class="profile-section">
460
+ <div class="profile-container">
461
+ <div class="profile-image">
462
+ <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=300" alt="Profile">
463
+ </div>
464
+ <div class="profile-info">
465
+ <h1>
466
+ <span>فروشگاه مد</span>
467
+ <button class="edit-profile">ویرایش پروفایل</button>
468
+ </h1>
469
+ <div class="stats">
470
+ <div class="stat-item">
471
+ <span>۲۴۵</span>
472
+ <p>پست</p>
473
+ </div>
474
+ <div class="stat-item">
475
+ <span>۱۵.۲K</span>
476
+ <p>دنبال‌کننده</p>
477
+ </div>
478
+ <div class="stat-item">
479
+ <span>۳۲۰</span>
480
+ <p>دنبال‌شده</p>
481
+ </div>
482
+ </div>
483
+ <div class="bio">
484
+ <h2>فروشگاه تخصصی مد و لباس</h2>
485
+ <p>🌟 ارسال به سراسر کشور<br>📦 ضمانت کیفیت<br>💬 پاسخگویی 24/7</p>
486
+ </div>
487
+ </div>
488
+ </div>
489
+ </section>
490
+
491
+ <!-- Tabs -->
492
+ <nav class="tabs">
493
+ <div class="tab active" data-tab="posts">
494
+ <i class="fas fa-th"></i>
495
+ <span>پست‌ها</span>
496
+ </div>
497
+ <div class="tab" data-tab="reels">
498
+ <i class="fas fa-play"></i>
499
+ <span>ویدیوها</span>
500
+ </div>
501
+ <div class="tab" data-tab="tags">
502
+ <i class="fas fa-user-tag"></i>
503
+ <span>تگ شده</span>
504
+ </div>
505
+ </nav>
506
+
507
+ <!-- Content -->
508
+ <div class="content">
509
+ <!-- Stories -->
510
+ <div class="stories-container">
511
+ <div class="story">
512
+ <div class="story-ring">
513
+ <img src="https://images.unsplash.com/photo-1513721032312-6a18a42cf900?w=150" alt="Story">
514
+ </div>
515
+ <span>کفش‌های جدید</span>
516
+ </div>
517
+ <div class="story">
518
+ <div class="story-ring">
519
+ <img src="https://images.unsplash.com/photo-1529139574466-a303027c1d8b?w=150" alt="Story">
520
+ </div>
521
+ <span>لباس تابستانه</span>
522
+ </div>
523
+ <div class="story">
524
+ <div class="story-ring seen">
525
+ <img src="https://images.unsplash.com/photo-1483985988355-763728e1935b?w=150" alt="Story">
526
+ </div>
527
+ <span>کیف دستی</span>
528
+ </div>
529
+ <div class="story">
530
+ <div class="story-ring">
531
+ <img src="https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=150" alt="Story">
532
+ </div>
533
+ <span>اکسسوری</span>
534
+ </div>
535
+ <div class="story">
536
+ <div class="story-ring">
537
+ <img src="https://images.unsplash.com/photo-1445205170230-053b83016050?w=150" alt="Story">
538
+ </div>
539
+ <span>پوشاک</span>
540
+ </div>
541
+ <div class="story">
542
+ <div class="story-ring seen">
543
+ <img src="https://images.unsplash.com/photo-1469334031218-e382a71b716b?w=150" alt="Story">
544
+ </div>
545
+ <span>فصل بهار</span>
546
+ </div>
547
+ </div>
548
+
549
+ <!-- Posts Grid -->
550
+ <div class="tab-content active" id="posts">
551
+ <div class="posts-grid">
552
+ <div class="post">
553
+ <img src="https://images.unsplash.com/photo-1434389677669-e08b4cac3105?w=400" alt="Post">
554
+ <div class="post-overlay">
555
+ <span><i class="fas fa-heart"></i> 1.2K</span>
556
+ <span><i class="fas fa-comment"></i> 45</span>
557
+ </div>
558
+ </div>
559
+ <div class="post">
560
+ <img src="https://images.unsplash.com/photo-1467043237213-65f2da53396f?w=400" alt="Post">
561
+ <div class="post-overlay">
562
+ <span><i class="fas fa-heart"></i> 890</span>
563
+ <span><i class="fas fa-comment"></i> 32</span>
564
+ </div>
565
+ </div>
566
+ <div class="post">
567
+ <img src="https://images.unsplash.com/photo-1509631179647-0177331693ae?w=400" alt="Post">
568
+ <div class="post-overlay">
569
+ <span><i class="fas fa-heart"></i> 2.1K</span>
570
+ <span><i class="fas fa-comment"></i> 78</span>
571
+ </div>
572
+ </div>
573
+ <div class="post">
574
+ <img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400" alt="Post">
575
+ <div class="post-overlay">
576
+ <span><i class="fas fa-heart"></i> 567</span>
577
+ <span><i class="fas fa-comment"></i> 21</span>
578
+ </div>
579
+ </div>
580
+ <div class="post">
581
+ <img src="https://images.unsplash.com/photo-1551232864-3f0890e580d9?w=400" alt="Post">
582
+ <div class="post-overlay">
583
+ <span><i class="fas fa-heart"></i> 1.5K</span>
584
+ <span><i class="fas fa-comment"></i> 56</span>
585
+ </div>
586
+ </div>
587
+ <div class="post">
588
+ <img src="https://images.unsplash.com/photo-1594938298603-c8148c4dae35?w=400" alt="Post">
589
+ <div class="post-overlay">
590
+ <span><i class="fas fa-heart"></i> 3.2K</span>
591
+ <span><i class="fas fa-comment"></i> 102</span>
592
+ </div>
593
+ </div>
594
+ </div>
595
+ </div>
596
+
597
+ <!-- Reels -->
598
+ <div class="tab-content" id="reels">
599
+ <div class="reels-grid">
600
+ <div class="reel">
601
+ <img src="https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?w=300" alt="Reel">
602
+ <div class="reel-overlay">
603
+ <span><i class="fas fa-heart"></i> 5.2K</span>
604
+ <span><i class="fas fa-comment"></i> 123</span>
605
+ </div>
606
+ </div>
607
+ <div class="reel">
608
+ <img src="https://images.unsplash.com/photo-1552374196-c4e7ffc6e126?w=300" alt="Reel">
609
+ <div class="reel-overlay">
610
+ <span><i class="fas fa-heart"></i> 3.8K</span>
611
+ <span><i class="fas fa-comment"></i> 89</span>
612
+ </div>
613
+ </div>
614
+ <div class="reel">
615
+ <img src="https://images.unsplash.com/photo-1503342217505-b0a15ec3261c?w=300" alt="Reel">
616
+ <div class="reel-overlay">
617
+ <span><i class="fas fa-heart"></i> 7.1K</span>
618
+ <span><i class="fas fa-comment"></i> 201</span>
619
+ </div>
620
+ </div>
621
+ <div class="reel">
622
+ <img src="https://images.unsplash.com/photo-1485968579580-b6d095142e6e?w=300" alt="Reel">
623
+ <div class="reel-overlay">
624
+ <span><i class="fas fa-heart"></i> 2.4K</span>
625
+ <span><i class="fas fa-comment"></i> 67</span>
626
+ </div>
627
+ </div>
628
+ <div class="reel">
629
+ <img src="https://images.unsplash.com/photo-1523381210434-271e8be1f52b?w=300" alt="Reel">
630
+ <div class="reel-overlay">
631
+ <span><i class="fas fa-heart"></i> 4.9K</span>
632
+ <span><i class="fas fa-comment"></i> 156</span>
633
+ </div>
634
+ </div>
635
+ <div class="reel">
636
+ <img src="https://images.unsplash.com/photo-1487222477894-8943e31ef7b2?w=300" alt="Reel">
637
+ <div class="reel-overlay">
638
+ <span><i class="fas fa-heart"></i> 6.3K</span>
639
+ <span><i class="fas fa-comment"></i> 189</span>
640
+ </div>
641
+ </div>
642
+ </div>
643
+ </div>
644
+
645
+ <!-- Tags -->
646
+ <div class="tab-content" id="tags">
647
+ <div class="posts-grid">
648
+ <div class="post">
649
+ <img src="https://images.unsplash.com/photo-1496747611176-843222e1e57c?w=400" alt="Post">
650
+ <div class="post-overlay">
651
+ <span><i class="fas fa-heart"></i> 980</span>
652
+ <span><i class="fas fa-comment"></i> 34</span>
653
+ </div>
654
+ </div>
655
+ <div class="post">
656
+ <img src="https://images.unsplash.com/photo-1512436991641-6745cdb1723f?w=400" alt="Post">
657
+ <div class="post-overlay">
658
+ <span><i class="fas fa-heart"></i> 1.1K</span>
659
+ <span><i class="fas fa-comment"></i> 42</span>
660
+ </div>
661
+ </div>
662
+ <div class="post">
663
+ <img src="https://images.unsplash.com/photo-1475180098004-ca77a66827be?w=400" alt="Post">
664
+ <div class="post-overlay">
665
+ <span><i class="fas fa-heart"></i> 760</span>
666
+ <span><i class="fas fa-comment"></i> 28</span>
667
+ </div>
668
+ </div>
669
+ </div>
670
+ </div>
671
+ </div>
672
+
673
+ <!-- Built with anycoder -->
674
+ <div style="text-align: center; padding: 30px; color: #8e8e8e; font-size: 13px;">
675
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" style="color: #8e8e8e; text-decoration: none;">
676
+ Built with <strong>anycoder</strong>
677
+ </a>
678
+ </div>
679
+
680
+ <script>
681
+ // Settings Menu Toggle
682
+ const settingsBtn = document.getElementById('settingsBtn');
683
+ const settingsMenu = document.getElementById('settingsMenu');
684
+ const overlay = document.getElementById('overlay');
685
+
686
+ settingsBtn.addEventListener('click', (e) => {
687
+ e.stopPropagation();
688
+ settingsMenu.classList.toggle('active');
689
+ overlay.classList.toggle('active');
690
+ });
691
+
692
+ overlay.addEventListener('click', () => {
693
+ settingsMenu.classList.remove('active');
694
+ overlay.classList.remove('active');
695
+ });
696
+
697
+ // Tab Switching
698
+ const tabs = document.querySelectorAll('.tab');
699
+ const tabContents = document.querySelectorAll('.tab-content');
700
+
701
+ tabs.forEach(tab => {
702
+ tab.addEventListener('click', () => {
703
+ // Remove active class from all tabs and contents
704
+ tabs.forEach(t => t.classList.remove('active'));
705
+ tabContents.forEach(c => c.classList.remove('active'));
706
+
707
+ // Add active class to clicked tab
708
+ tab.classList.add('active');
709
+
710
+ // Show corresponding content
711
+ const tabId = tab.getAttribute('data-tab');
712
+ document.getElementById(tabId).classList.add('active');
713
+ });
714
+ });
715
+
716
+ // Close menu when clicking outside
717
+ document.addEventListener('click', (e) => {
718
+ if (!settingsMenu.contains(e.target) && e.target !== settingsBtn) {
719
+ settingsMenu.classList.remove('active');
720
+ overlay.classList.remove('active');
721
+ }
722
+ });
723
+ </script>
724
+ </body>
725
+ </html>