Hugging Face's logo

Spaces:
samirerty
/
anycoder-db355395
Running

App Files Community
samirerty commited on
Commit
661d5a3
·
verified ·
1 Parent(s): d0c93e7

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +297 -593
index.html CHANGED
@@ -3,706 +3,410 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>فروشگاه آنلاین استایل</title>
7
-
8
- <!-- فونت فارسی وزیرمتن -->
9
- <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700;900&display=swap" rel="stylesheet">
10
-
11
- <!-- آیکون‌ها -->
12
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
13
-
14
  <style>
15
  :root {
16
- --bg-color: #fafafa;
17
- --card-bg: #ffffff;
18
- --text-main: #262626;
19
- --text-secondary: #8e8e8e;
20
- --accent-color: #0095f6;
21
- --border-color: #dbdbdb;
22
- --gradient-stories: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
23
- --shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
24
- --radius: 12px;
25
- }
26
-
27
  * {
28
- box-sizing: border-box;
29
  margin: 0;
30
  padding: 0;
31
- outline: none;
 
32
  }
33
-
34
  body {
35
- font-family: 'Vazirmatn', sans-serif;
36
- background-color: var(--bg-color);
37
- color: var(--text-main);
38
- line-height: 1.6;
39
- -webkit-font-smoothing: antialiased;
40
- padding-bottom: 80px; /* فضای پایین برای موبایل */
41
- }
42
-
43
- /* --- Header --- */
 
44
  header {
45
- background: var(--card-bg);
46
- border-bottom: 1px solid var(--border-color);
47
- padding: 15px 20px;
48
- position: sticky;
49
- top: 0;
50
- z-index: 100;
51
  display: flex;
52
  justify-content: space-between;
53
  align-items: center;
54
- }
55
-
56
- .brand {
57
- font-weight: 900;
58
- font-size: 1.2rem;
59
- color: var(--text-main);
60
- display: flex;
61
- align-items: center;
62
- gap: 8px;
63
  }
64
 
65
- .brand i {
66
- color: var(--accent-color);
 
 
67
  }
68
-
69
- .settings-btn {
70
- background: none;
71
- border: none;
72
- font-size: 1.2rem;
73
- cursor: pointer;
74
- color: var(--text-main);
75
- padding: 8px;
76
- border-radius: 50%;
77
- transition: background 0.2s;
78
- }
79
-
80
- .settings-btn:hover {
81
- background-color: #f0f0f0;
82
- }
83
-
84
- /* --- Settings Dropdown --- */
85
- .settings-dropdown {
86
- position: absolute;
87
- top: 60px;
88
- right: 20px;
89
- background: var(--card-bg);
90
- border: 1px solid var(--border-color);
91
- border-radius: var(--radius);
92
- width: 200px;
93
- box-shadow: var(--shadow);
94
- display: none;
95
- flex-direction: column;
96
- padding: 8px 0;
97
- z-index: 200;
98
- }
99
-
100
- .settings-dropdown.active {
101
- display: flex;
102
- }
103
-
104
- .dropdown-item {
105
- padding: 10px 15px;
106
- text-decoration: none;
107
- color: var(--text-main);
108
- font-size: 0.9rem;
109
- transition: background 0.2s;
110
  display: flex;
111
- align-items: center;
112
- gap: 10px;
113
  }
114
-
115
- .dropdown-item:hover {
116
- background-color: #f5f5f5;
 
 
117
  }
118
-
119
- /* --- Profile Section --- */
120
- .profile-container {
121
- max-width: 935px;
122
- margin: 0 auto;
123
- padding: 30px 20px;
124
  display: flex;
125
- flex-direction: column;
126
- align-items: center;
127
- gap: 20px;
128
- text-align: center;
129
  }
130
-
131
- .avatar-wrapper {
132
- position: relative;
133
- }
134
-
135
- .avatar {
136
  width: 150px;
137
  height: 150px;
138
  border-radius: 50%;
139
  object-fit: cover;
140
- border: 1px solid var(--border-color);
141
- box-shadow: var(--shadow);
142
- }
143
-
144
- .avatar-ring {
145
- position: absolute;
146
- inset: -3px;
147
- border-radius: 50%;
148
- background: var(--gradient-stories);
149
- z-index: -1;
150
- }
151
-
152
- .username {
153
- font-size: 1.5rem;
154
- font-weight: 600;
155
- }
156
-
157
- .bio {
158
- font-size: 1rem;
159
- color: var(--text-main);
160
- max-width: 400px;
161
- }
162
-
163
- /* --- Action Buttons --- */
164
- .actions {
165
- display: flex;
166
- gap: 10px;
167
- }
168
-
169
- .btn {
170
- padding: 5px 9px;
171
- border-radius: 4px;
172
- border: 1px solid var(--border-color);
173
- background: white;
174
- color: var(--text-main);
175
- font-family: inherit;
176
- font-weight: 600;
177
- cursor: pointer;
178
- transition: all 0.2s;
179
- display: flex;
180
- align-items: center;
181
- gap: 5px;
182
- font-size: 0.9rem;
183
- }
184
-
185
- .btn-primary {
186
- background: var(--accent-color);
187
- color: white;
188
- border-color: var(--accent-color);
189
  }
190
-
191
- .btn-primary:hover {
192
- opacity: 0.9;
193
- }
194
-
195
- .btn-outline:hover {
196
- background: #f0f0f0;
197
  }
198
-
199
- /* --- Stats --- */
200
- .stats {
201
  display: flex;
202
- gap: 20px;
203
- font-weight: 600;
204
- font-size: 1rem;
205
- margin-top: 10px;
206
  }
207
-
208
  .stat-item {
209
- display: flex;
210
- align-items: center;
211
- gap: 5px;
212
- cursor: pointer;
213
- }
214
-
215
- .stat-item:hover {
216
- opacity: 0.7;
217
  }
218
-
219
- /* --- Navigation (Tabs) --- */
220
- .nav-tabs {
221
- display: flex;
222
- justify-content: center;
223
- gap: 40px;
224
- margin-top: 10px;
225
- border-top: 1px solid var(--border-color);
226
- border-bottom: 1px solid var(--border-color);
227
- background: var(--card-bg);
228
- }
229
-
230
- .nav-tab {
231
- padding: 15px 0;
232
- cursor: pointer;
233
- font-weight: 600;
234
- color: var(--text-main);
235
- position: relative;
236
  }
237
-
238
- .nav-tab.active {
239
- color: var(--text-main);
 
240
  }
241
-
242
- .nav-tab.active::after {
243
- content: '';
244
- position: absolute;
245
- bottom: -1px;
246
- left: 0;
247
- width: 100%;
248
- height: 3px;
249
- background: var(--text-main);
250
  }
251
-
252
- .nav-tab.inactive {
253
- color: var(--text-secondary);
 
254
  }
255
-
256
- /* --- Content Grid --- */
257
- .content-area {
258
- max-width: 935px;
259
- margin: 0 auto;
260
- padding: 20px;
261
  }
262
-
263
- /* Stories Row */
264
- .stories-row {
265
  display: flex;
266
- gap: 15px;
267
- overflow-x: auto;
268
- padding-bottom: 10px;
269
- margin-bottom: 20px;
270
- scrollbar-width: none; /* Firefox */
271
  }
272
 
273
- .stories-row::-webkit-scrollbar {
274
- display: none; /* Chrome/Safari */
275
- }
276
-
277
- .story-item {
278
- display: flex;
279
- flex-direction: column;
280
- align-items: center;
281
- gap: 5px;
282
  cursor: pointer;
283
- min-width: 70px;
 
 
284
  }
285
-
286
- .story-ring {
287
- width: 66px;
288
- height: 66px;
289
- border-radius: 50%;
290
- padding: 2px;
291
- background: var(--gradient-stories);
292
- display: flex;
293
- align-items: center;
294
- justify-content: center;
295
  }
296
-
297
- .story-img {
298
- width: 100%;
299
- height: 100%;
300
- border-radius: 50%;
301
- border: 3px solid var(--card-bg);
302
- object-fit: cover;
303
  }
304
-
305
- .story-name {
306
- font-size: 0.75rem;
307
- white-space: nowrap;
308
- overflow: hidden;
309
- text-overflow: ellipsis;
310
- max-width: 70px;
 
 
311
  }
312
-
313
- /* Grid Layout */
314
- .grid {
315
  display: grid;
316
  grid-template-columns: repeat(3, 1fr);
317
- gap: 28px;
318
  }
319
-
320
- .card {
 
 
321
  position: relative;
322
- background: var(--card-bg);
323
- border-radius: var(--radius);
324
  overflow: hidden;
325
- cursor: pointer;
326
- aspect-ratio: 1 / 1;
327
  }
328
-
329
- .card img {
330
  width: 100%;
331
  height: 100%;
332
  object-fit: cover;
333
- transition: transform 0.3s ease;
334
- }
335
-
336
- .card:hover img {
337
- transform: scale(1.05);
338
  }
339
-
340
- /* Reels / Video Card Overlay */
341
- .card-type-icon {
342
  position: absolute;
343
- top: 10px;
344
- right: 10px;
345
- color: white;
346
- background: rgba(0,0,0,0.4);
347
- border-radius: 50%;
348
- width: 32px;
349
- height: 32px;
350
  display: flex;
351
- align-items: center;
352
  justify-content: center;
353
- backdrop-filter: blur(2px);
354
- }
355
-
356
- .play-btn {
357
- position: absolute;
358
- top: 50%;
359
- left: 50%;
360
- transform: translate(-50%, -50%);
361
- color: white;
362
- font-size: 2rem;
363
- opacity: 0.8;
364
- transition: opacity 0.2s;
365
- }
366
-
367
- .card:hover .play-btn {
368
- opacity: 1;
369
- }
370
-
371
- /* Highlight Card Style */
372
- .highlight-card {
373
- aspect-ratio: 1 / 1;
374
- cursor: pointer;
375
- position: relative;
376
- display: flex;
377
  align-items: center;
378
- justify-content: center;
 
379
  }
380
 
381
- .highlight-img {
382
- width: 100%;
383
- height: 100%;
384
- object-fit: cover;
385
- filter: brightness(0.6);
386
- transition: transform 0.3s;
387
  }
388
 
389
- .highlight-card:hover .highlight-img {
390
- transform: scale(1.05);
391
- filter: brightness(0.5);
392
- }
393
-
394
- .highlight-title {
395
- position: absolute;
396
  color: white;
397
- font-weight: 700;
398
- text-shadow: 0 1px 3px rgba(0,0,0,0.5);
399
- text-align: center;
400
- line-height: 1.2;
401
- padding: 5px;
402
- }
403
-
404
- /* --- Footer Link --- */
405
- .footer-link {
406
- margin-top: 40px;
407
- text-align: center;
408
  }
409
 
410
- .footer-link a {
411
- color: var(--text-secondary);
 
 
 
 
 
 
412
  text-decoration: none;
413
- font-size: 0.9rem;
414
- display: flex;
415
- align-items: center;
416
- justify-content: center;
417
- gap: 5px;
418
  }
419
 
420
- .footer-link a:hover {
421
- color: var(--accent-color);
422
- }
423
-
424
- /* --- Responsive --- */
425
  @media (max-width: 768px) {
426
- .stats {
427
- font-size: 0.9rem;
428
- flex-wrap: wrap;
429
- justify-content: center;
430
  }
431
 
432
- .nav-tabs {
433
- gap: 20px;
434
- font-size: 0.9rem;
435
- overflow-x: auto;
436
- justify-content: flex-start;
437
  }
438
 
439
- .grid {
 
 
 
 
 
 
 
 
440
  grid-template-columns: repeat(2, 1fr);
441
- gap: 14px;
442
  }
443
-
444
- .card {
445
- border-radius: 8px;
 
 
446
  }
447
 
448
- .profile-container {
449
- padding: 20px 10px;
450
  }
451
 
452
- .avatar {
453
- width: 110px;
454
- height: 110px;
455
  }
456
  }
457
  </style>
458
  </head>
459
  <body>
460
-
461
- <!-- Header -->
462
- <header>
463
- <div class="brand">
464
- <i class="fa-brands fa-instagram"></i>
465
- <span>فروشگاه استایل</span>
466
- </div>
467
- <button class="settings-btn" id="settingsBtn" aria-label="تنظیمات">
468
- <i class="fa-solid fa-bars"></i>
469
- </button>
470
-
471
- <!-- Settings Menu -->
472
- <div class="settings-dropdown" id="settingsDropdown">
473
- <a href="#" class="dropdown-item"><i class="fa-solid fa-user-group"></i> مدیریت پیج</a>
474
- <a href="#" class="dropdown-item"><i class="fa-solid fa-store"></i> محصولات من</a>
475
- <a href="#" class="dropdown-item"><i class="fa-solid fa-chart-line"></i> آمار فروش</a>
476
- <a href="#" class="dropdown-item"><i class="fa-solid fa-palette"></i> تم فروشگاه</a>
477
- <a href="#" class="dropdown-item"><i class="fa-solid fa-right-from-bracket"></i> خروج</a>
478
- </div>
479
- </header>
480
-
481
- <!-- Main Content -->
482
- <main>
483
-
484
- <!-- Profile Section -->
485
- <section class="profile-container">
486
- <div class="avatar-wrapper">
487
- <div class="avatar-ring"></div>
488
- <img src="https://picsum.photos/seed/shopavatar/300/300.jpg" alt="آواتار فروشگاه" class="avatar">
489
- </div>
490
-
491
- <h1 class="username">استایل پلاس</h1>
492
- <p class="bio">🛍️ فروشگاه آنلاین پوشاک و اکسسوری<br>📍 تهران، بازار بزرگ<br>📩 برای سفارش پیام دهید</p>
493
-
494
- <div class="actions">
495
- <button class="btn btn-primary"><i class="fa-solid fa-plus"></i> دنبال کردن</button>
496
- <button class="btn btn-outline"><i class="fa-regular fa-envelope"></i> پیام</button>
497
- <button class="btn btn-outline"><i class="fa-solid fa-user-plus"></i> لینک</button>
498
- </div>
499
-
500
- <div class="stats">
501
- <div class="stat-item">
502
- <span>۱۲۵</span>
503
- <span>پست</span>
504
- </div>
505
- <div class="stat-item">
506
- <span>۴.۵K</span>
507
- <span>فالوور</span>
508
- </div>
509
- <div class="stat-item">
510
- <span>۱۲</span>
511
- <span>دنبال‌کننده</span>
512
- </div>
513
- <div class="stat-item">
514
- <span>۱۲.۵K</span>
515
- <span>لایک</span>
516
- </div>
517
  </div>
518
- </section>
519
-
520
- <!-- Navigation Tabs -->
521
- <nav class="nav-tabs">
522
- <div class="nav-tab active" onclick="switchTab(this, 'content-grid')">محصولات</div>
523
- <div class="nav-tab inactive" onclick="switchTab(this, 'reels-grid')">ویدیوها</div>
524
- <div class="nav-tab inactive" onclick="switchTab(this, 'highlights-grid')">استوری‌ها</div>
525
- </nav>
526
-
527
- <!-- Content Area -->
528
- <div class="content-area">
529
 
530
- <!-- Stories Row -->
531
- <div class="stories-row">
532
- <!-- Story Items -->
533
- <div class="story-item">
534
- <div class="story-ring"><img src="https://picsum.photos/seed/story1/100/100.jpg" class="story-img"></div>
535
- <span class="story-name">جدیدترین</span>
536
- </div>
537
- <div class="story-item">
538
- <div class="story-ring"><img src="https://picsum.photos/seed/story2/100/100.jpg" class="story-img"></div>
539
- <span class="story-name">پرفروش‌ها</span>
540
- </div>
541
- <div class="story-item">
542
- <div class="story-ring"><img src="https://picsum.photos/seed/story3/100/100.jpg" class="story-img"></div>
543
- <span class="story-name">دکوراسیون</span>
544
- </div>
545
- <div class="story-item">
546
- <div class="story-ring"><img src="https://picsum.photos/seed/story4/100/100.jpg" class="story-img"></div>
547
- <span class="story-name">پیشنهاد ویژه</span>
548
- </div>
549
- <div class="story-item">
550
- <div class="story-ring"><img src="https://picsum.photos/seed/story5/100/100.jpg" class="story-img"></div>
551
- <span class="story-name">تخفیف‌ها</span>
552
- </div>
553
- </div>
554
-
555
- <!-- Grid: Products (Default) -->
556
- <div class="grid content-grid" id="content-grid">
557
- <!-- Product Cards -->
558
- <div class="card">
559
- <img src="https://picsum.photos/seed/prod1/400/400.jpg" alt="محصول">
560
- <div style="position: absolute; bottom: 10px; left: 10px; color: white; font-weight: bold; text-shadow: 0 1px 2px black;">
561
- ۴۵۰,۰۰۰ تومان
562
  </div>
563
- </div>
564
- <div class="card">
565
- <img src="https://picsum.photos/seed/prod2/400/400.jpg" alt="محصول">
566
- <div style="position: absolute; bottom: 10px; left: 10px; color: white; font-weight: bold; text-shadow: 0 1px 2px black;">
567
- ۳۲۰,۰۰۰ تومان
568
  </div>
569
- </div>
570
- <div class="card">
571
- <img src="https://picsum.photos/seed/prod3/400/400.jpg" alt="محصول">
572
- </div>
573
- <div class="card">
574
- <img src="https://picsum.photos/seed/prod4/400/400.jpg" alt="محصول">
575
- <div style="position: absolute; bottom: 10px; left: 10px; color: white; font-weight: bold; text-shadow: 0 1px 2px black;">
576
- ۸۹۰,۰۰۰ تومان
577
  </div>
578
  </div>
579
- <div class="card">
580
- <img src="https://picsum.photos/seed/prod5/400/400.jpg" alt="محصول">
581
- </div>
582
- <div class="card">
583
- <img src="https://picsum.photos/seed/prod6/400/400.jpg" alt="محصول">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
584
  </div>
585
  </div>
586
-
587
- <!-- Hidden Grid: Reels -->
588
- <div class="grid reels-grid" id="reels-grid" style="display: none;">
589
- <!-- Reel Cards -->
590
- <div class="card">
591
- <img src="https://picsum.photos/seed/reel1/400/400.jpg" alt="Reel">
592
- <div class="card-type-icon"><i class="fa-solid fa-play"></i></div>
593
- <div class="play-btn"><i class="fa-solid fa-play"></i></div>
594
  </div>
595
- <div class="card">
596
- <img src="https://picsum.photos/seed/reel2/400/400.jpg" alt="Reel">
597
- <div class="card-type-icon"><i class="fa-solid fa-play"></i></div>
598
- <div class="play-btn"><i class="fa-solid fa-play"></i></div>
 
 
599
  </div>
600
- <div class="card">
601
- <img src="https://picsum.photos/seed/reel3/400/400.jpg" alt="Reel">
602
- <div class="card-type-icon"><i class="fa-solid fa-play"></i></div>
603
- <div class="play-btn"><i class="fa-solid fa-play"></i></div>
 
 
604
  </div>
605
- <div class="card">
606
- <img src="https://picsum.photos/seed/reel4/400/400.jpg" alt="Reel">
607
- <div class="card-type-icon"><i class="fa-solid fa-play"></i></div>
608
- <div class="play-btn"><i class="fa-solid fa-play"></i></div>
 
 
609
  </div>
610
- <div class="card">
611
- <img src="https://picsum.photos/seed/reel5/400/400.jpg" alt="Reel">
612
- <div class="card-type-icon"><i class="fa-solid fa-play"></i></div>
613
- <div class="play-btn"><i class="fa-solid fa-play"></i></div>
 
 
614
  </div>
615
- <div class="card">
616
- <img src="https://picsum.photos/seed/reel6/400/400.jpg" alt="Reel">
617
- <div class="card-type-icon"><i class="fa-solid fa-play"></i></div>
618
- <div class="play-btn"><i class="fa-solid fa-play"></i></div>
 
 
 
 
619
  </div>
620
  </div>
621
-
622
- <!-- Hidden Grid: Highlights -->
623
- <div class="grid highlights-grid" id="highlights-grid" style="display: none;">
624
- <!-- Highlight Cards (Square/Circular mix) -->
625
- <div class="highlight-card">
626
- <img src="https://picsum.photos/seed/high1/400/400.jpg" class="highlight-img" alt="Highlight">
627
- <span class="highlight-title">مردانه</span>
628
  </div>
629
- <div class="highlight-card">
630
- <img src="https://picsum.photos/seed/high2/400/400.jpg" class="highlight-img" alt="Highlight">
631
- <span class="highlight-title">زنانه</span>
 
 
632
  </div>
633
- <div class="highlight-card">
634
- <img src="https://picsum.photos/seed/high3/400/400.jpg" class="highlight-img" alt="Highlight">
635
- <span class="highlight-title">کفش</span>
 
 
 
 
 
636
  </div>
637
- <div class="highlight-card">
638
- <img src="https://picsum.photos/seed/high4/400/400.jpg" class="highlight-img" alt="Highlight">
639
- <span class="highlight-title">کلاه</span>
 
 
640
  </div>
641
- <div class="highlight-card">
642
- <img src="https://picsum.photos/seed/high5/400/400.jpg" class="highlight-img" alt="Highlight">
643
- <span class="highlight-title">اکسسوری</span>
 
 
644
  </div>
645
- <div class="highlight-card">
646
- <img src="https://picsum.photos/seed/high6/400/400.jpg" class="highlight-img" alt="Highlight">
647
- <span class="highlight-title">پکیج</span>
 
 
648
  </div>
649
  </div>
650
-
651
- </div>
652
-
653
- <div class="footer-link">
654
- <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">
655
- <i class="fa-solid fa-code"></i> Built with anycoder
656
- </a>
657
- </div>
658
- </main>
659
-
660
  <script>
661
- // تنظیمات منوی اپلیکیشن
662
- const settingsBtn = document.getElementById('settingsBtn');
663
- const settingsDropdown = document.getElementById('settingsDropdown');
664
-
665
- settingsBtn.addEventListener('click', (e) => {
666
- e.stopPropagation();
667
- settingsDropdown.classList.toggle('active');
668
- });
669
-
670
- // بستن منو با کلیک بیرون
671
- document.addEventListener('click', (e) => {
672
- if (!settingsDropdown.contains(e.target) && e.target !== settingsBtn) {
673
- settingsDropdown.classList.remove('active');
674
- }
675
- });
676
-
677
- // تابع تغییر تب‌ها
678
- function switchTab(clickedTab, targetGridId) {
679
- // حذف کلاس فعال از همه تب‌ها
680
- document.querySelectorAll('.nav-tab').forEach(tab => {
681
- tab.classList.remove('active');
682
- tab.classList.add('inactive');
683
- });
684
 
685
- // اضافه کردن کلاس فعال به تب کلیک شده
686
- clickedTab.classList.add('active');
687
- clickedTab.classList.remove('inactive');
688
-
689
- // پنهان کردن تمام گریدها
690
- document.querySelectorAll('.grid').forEach(grid => {
691
- grid.style.display = 'none';
692
- });
693
-
694
- // نمایش گرید مربوطه
695
- const targetGrid = document.getElementById(targetGridId);
696
- if (targetGrid) {
697
- targetGrid.style.display = 'grid';
698
- }
699
- }
700
-
701
- // اضافه کردن افکت کلیک به کارت‌ها (شبیه اینستاگرام)
702
- document.querySelectorAll('.card, .highlight-card').forEach(card => {
703
- card.addEventListener('click', () => {
704
- // اینجا می‌توانید لینک به صفحه محصول یا پخش ویدیو را اضافه کنید
705
- console.log('Card clicked!');
706
  });
707
  });
708
  </script>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>پروفایل فروشگاه آنلاین</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-color: #405DE6;
11
+ --secondary-color: #5851DB;
12
+ --accent-color: #FD1D1D;
13
+ --light-color: #f8f9fa;
14
+ --dark-color: #262626;
15
+ --gray-color: #8e8e8e;
16
+ }
17
+
 
 
 
18
  * {
 
19
  margin: 0;
20
  padding: 0;
21
+ box-sizing: border-box;
22
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
23
  }
24
+
25
  body {
26
+ background-color: var(--light-color);
27
+ color: var(--dark-color);
28
+ }
29
+
30
+ .container {
31
+ max-width: 935px;
32
+ margin: 0 auto;
33
+ padding: 20px;
34
+ }
35
+
36
  header {
 
 
 
 
 
 
37
  display: flex;
38
  justify-content: space-between;
39
  align-items: center;
40
+ padding: 10px 0;
41
+ border-bottom: 1px solid #dbdbdb;
42
+ margin-bottom: 20px;
 
 
 
 
 
 
43
  }
44
 
45
+ .logo {
46
+ font-size: 24px;
47
+ font-weight: bold;
48
+ color: var(--primary-color);
49
  }
50
+
51
+ .settings-menu {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
52
  display: flex;
53
+ gap: 20px;
 
54
  }
55
+
56
+ .settings-menu i {
57
+ font-size: 24px;
58
+ color: var(--dark-color);
59
+ cursor: pointer;
60
  }
61
+
62
+ .profile-section {
 
 
 
 
63
  display: flex;
64
+ padding: 20px 0;
65
+ border-bottom: 1px solid #dbdbdb;
 
 
66
  }
67
+
68
+ .profile-pic {
 
 
 
 
69
  width: 150px;
70
  height: 150px;
71
  border-radius: 50%;
72
  object-fit: cover;
73
+ margin-left: 50px;
74
+ border: 3px solid var(--primary-color);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
75
  }
76
+
77
+ .profile-info {
78
+ flex: 1;
 
 
 
 
79
  }
80
+
81
+ .profile-stats {
 
82
  display: flex;
83
+ gap: 30px;
84
+ margin-bottom: 20px;
 
 
85
  }
86
+
87
  .stat-item {
88
+ text-align: center;
 
 
 
 
 
 
 
89
  }
90
+
91
+ .stat-number {
92
+ font-weight: bold;
93
+ font-size: 18px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
94
  }
95
+
96
+ .stat-label {
97
+ font-size: 14px;
98
+ color: var(--gray-color);
99
  }
100
+
101
+ .profile-name {
102
+ font-weight: bold;
103
+ margin-bottom: 10px;
 
 
 
 
 
104
  }
105
+
106
+ .profile-bio {
107
+ color: var(--gray-color);
108
+ margin-bottom: 10px;
109
  }
110
+
111
+ .profile-website {
112
+ color: var(--primary-color);
113
+ text-decoration: none;
114
+ font-weight: 500;
 
115
  }
116
+
117
+ .tabs {
 
118
  display: flex;
119
+ justify-content: space-around;
120
+ border-top: 1px solid #dbdbdb;
121
+ margin-top: 20px;
 
 
122
  }
123
 
124
+ .tab {
125
+ padding: 15px 0;
126
+ text-align: center;
 
 
 
 
 
 
127
  cursor: pointer;
128
+ width: 100%;
129
+ border-top: 1px solid transparent;
130
+ transition: all 0.3s;
131
  }
132
+
133
+ .tab.active {
134
+ border-top: 1px solid var(--dark-color);
 
 
 
 
 
 
 
135
  }
136
+
137
+ .tab i {
138
+ font-size: 24px;
139
+ margin-bottom: 5px;
 
 
 
140
  }
141
+
142
+ .tab-label {
143
+ font-size: 12px;
144
+ text-transform: uppercase;
145
+ }
146
+
147
+ .content {
148
+ display: none;
149
+ padding: 20px 0;
150
  }
151
+
152
+ .content.active {
 
153
  display: grid;
154
  grid-template-columns: repeat(3, 1fr);
155
+ gap: 5px;
156
  }
157
+
158
+ .item {
159
+ aspect-ratio: 1/1;
160
+ background-color: #f0f0f0;
161
  position: relative;
 
 
162
  overflow: hidden;
 
 
163
  }
164
+
165
+ .item img {
166
  width: 100%;
167
  height: 100%;
168
  object-fit: cover;
 
 
 
 
 
169
  }
170
+
171
+ .item-overlay {
 
172
  position: absolute;
173
+ top: 0;
174
+ left: 0;
175
+ right: 0;
176
+ bottom: 0;
177
+ background: rgba(0, 0, 0, 0.3);
 
 
178
  display: flex;
 
179
  justify-content: center;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
180
  align-items: center;
181
+ opacity: 0;
182
+ transition: opacity 0.3s;
183
  }
184
 
185
+ .item:hover .item-overlay {
186
+ opacity: 1;
 
 
 
 
187
  }
188
 
189
+ .item-overlay i {
 
 
 
 
 
 
190
  color: white;
191
+ font-size: 24px;
192
+ margin: 0 5px;
 
 
 
 
 
 
 
 
 
193
  }
194
 
195
+ .anycoder-link {
196
+ position: fixed;
197
+ bottom: 20px;
198
+ right: 20px;
199
+ background-color: var(--primary-color);
200
+ color: white;
201
+ padding: 10px 15px;
202
+ border-radius: 5px;
203
  text-decoration: none;
204
+ font-size: 14px;
205
+ z-index: 100;
 
 
 
206
  }
207
 
 
 
 
 
 
208
  @media (max-width: 768px) {
209
+ .profile-section {
210
+ flex-direction: column;
211
+ align-items: center;
 
212
  }
213
 
214
+ .profile-pic {
215
+ margin-left: 0;
216
+ margin-bottom: 20px;
 
 
217
  }
218
 
219
+ .profile-info {
220
+ text-align: center;
221
+ }
222
+
223
+ .profile-stats {
224
+ justify-content: center;
225
+ }
226
+
227
+ .content.active {
228
  grid-template-columns: repeat(2, 1fr);
 
229
  }
230
+ }
231
+
232
+ @media (max-width: 480px) {
233
+ .content.active {
234
+ grid-template-columns: 1fr;
235
  }
236
 
237
+ .tab i {
238
+ font-size: 20px;
239
  }
240
 
241
+ .tab-label {
242
+ display: none;
 
243
  }
244
  }
245
  </style>
246
  </head>
247
  <body>
248
+ <div class="container">
249
+ <header>
250
+ <div class="logo">فروشگاه آنلاین</div>
251
+ <div class="settings-menu">
252
+ <i class="fas fa-plus-square"></i>
253
+ <i class="fas fa-bars"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
254
  </div>
255
+ </header>
256
+
257
+ <section class="profile-section">
258
+ <img src="https://source.unsplash.com/random/300x300/?shop" alt="Profile Picture" class="profile-pic">
 
 
 
 
 
 
 
259
 
260
+ <div class="profile-info">
261
+ <div class="profile-stats">
262
+ <div class="stat-item">
263
+ <div class="stat-number">1,234</div>
264
+ <div class="stat-label">پست‌ها</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
265
  </div>
266
+ <div class="stat-item">
267
+ <div class="stat-number">12.3K</div>
268
+ <div class="stat-label">دنبال‌کنندگان</div>
 
 
269
  </div>
270
+ <div class="stat-item">
271
+ <div class="stat-number">456</div>
272
+ <div class="stat-label">دنبال‌شونده</div>
 
 
 
 
 
273
  </div>
274
  </div>
275
+
276
+ <div class="profile-name">فروشگاه مد و پوشاک</div>
277
+ <div class="profile-bio">ارائه دهنده بهترین محصولات مد و پوشاک با کیفیت عالی و قیمت مناسب</div>
278
+ <a href="#" class="profile-website">www.example-shop.com</a>
279
+ </div>
280
+ </section>
281
+
282
+ <section class="tabs">
283
+ <div class="tab active" data-tab="products">
284
+ <i class="fas fa-th"></i>
285
+ <div class="tab-label">محصولات</div>
286
+ </div>
287
+ <div class="tab" data-tab="videos">
288
+ <i class="fas fa-video"></i>
289
+ <div class="tab-label">ویدیوها</div>
290
+ </div>
291
+ <div class="tab" data-tab="stories">
292
+ <i class="fas fa-circle-play"></i>
293
+ <div class="tab-label">استوری‌ها</div>
294
+ </div>
295
+ </section>
296
+
297
+ <section class="content active" id="products">
298
+ <div class="item">
299
+ <img src="https://source.unsplash.com/random/300x300/?fashion" alt="Product">
300
+ <div class="item-overlay">
301
+ <i class="fas fa-heart"></i>
302
+ <i class="fas fa-shopping-cart"></i>
303
  </div>
304
  </div>
305
+ <div class="item">
306
+ <img src="https://source.unsplash.com/random/300x300/?clothes" alt="Product">
307
+ <div class="item-overlay">
308
+ <i class="fas fa-heart"></i>
309
+ <i class="fas fa-shopping-cart"></i>
 
 
 
310
  </div>
311
+ </div>
312
+ <div class="item">
313
+ <img src="https://source.unsplash.com/random/300x300/?shoes" alt="Product">
314
+ <div class="item-overlay">
315
+ <i class="fas fa-heart"></i>
316
+ <i class="fas fa-shopping-cart"></i>
317
  </div>
318
+ </div>
319
+ <div class="item">
320
+ <img src="https://source.unsplash.com/random/300x300/?accessories" alt="Product">
321
+ <div class="item-overlay">
322
+ <i class="fas fa-heart"></i>
323
+ <i class="fas fa-shopping-cart"></i>
324
  </div>
325
+ </div>
326
+ <div class="item">
327
+ <img src="https://source.unsplash.com/random/300x300/?bag" alt="Product">
328
+ <div class="item-overlay">
329
+ <i class="fas fa-heart"></i>
330
+ <i class="fas fa-shopping-cart"></i>
331
  </div>
332
+ </div>
333
+ <div class="item">
334
+ <img src="https://source.unsplash.com/random/300x300/?jewelry" alt="Product">
335
+ <div class="item-overlay">
336
+ <i class="fas fa-heart"></i>
337
+ <i class="fas fa-shopping-cart"></i>
338
  </div>
339
+ </div>
340
+ </section>
341
+
342
+ <section class="content" id="videos">
343
+ <div class="item">
344
+ <img src="https://source.unsplash.com/random/300x300/?video1" alt="Video">
345
+ <div class="item-overlay">
346
+ <i class="fas fa-play"></i>
347
  </div>
348
  </div>
349
+ <div class="item">
350
+ <img src="https://source.unsplash.com/random/300x300/?video2" alt="Video">
351
+ <div class="item-overlay">
352
+ <i class="fas fa-play"></i>
 
 
 
353
  </div>
354
+ </div>
355
+ <div class="item">
356
+ <img src="https://source.unsplash.com/random/300x300/?video3" alt="Video">
357
+ <div class="item-overlay">
358
+ <i class="fas fa-play"></i>
359
  </div>
360
+ </div>
361
+ </section>
362
+
363
+ <section class="content" id="stories">
364
+ <div class="item">
365
+ <img src="https://source.unsplash.com/random/300x300/?story1" alt="Story">
366
+ <div class="item-overlay">
367
+ <i class="fas fa-eye"></i>
368
  </div>
369
+ </div>
370
+ <div class="item">
371
+ <img src="https://source.unsplash.com/random/300x300/?story2" alt="Story">
372
+ <div class="item-overlay">
373
+ <i class="fas fa-eye"></i>
374
  </div>
375
+ </div>
376
+ <div class="item">
377
+ <img src="https://source.unsplash.com/random/300x300/?story3" alt="Story">
378
+ <div class="item-overlay">
379
+ <i class="fas fa-eye"></i>
380
  </div>
381
+ </div>
382
+ <div class="item">
383
+ <img src="https://source.unsplash.com/random/300x300/?story4" alt="Story">
384
+ <div class="item-overlay">
385
+ <i class="fas fa-eye"></i>
386
  </div>
387
  </div>
388
+ </section>
389
+ </div>
390
+
391
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link">Built with anycoder</a>
392
+
 
 
 
 
 
393
  <script>
394
+ document.addEventListener('DOMContentLoaded', function() {
395
+ const tabs = document.querySelectorAll('.tab');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
396
 
397
+ tabs.forEach(tab => {
398
+ tab.addEventListener('click', function() {
399
+ // Remove active class from all tabs and contents
400
+ document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
401
+ document.querySelectorAll('.content').forEach(c => c.classList.remove('active'));
402
+
403
+ // Add active class to clicked tab
404
+ this.classList.add('active');
405
+
406
+ // Show corresponding content
407
+ const tabId = this.getAttribute('data-tab');
408
+ document.getElementById(tabId).classList.add('active');
409
+ });
 
 
 
 
 
 
 
 
410
  });
411
  });
412
  </script>