Hugging Face's logo

Spaces:
samirerty
/
anycoder-ca4f61d4
Running

App Files Community
samirerty commited on
Commit
2a58158
·
verified ·
1 Parent(s): 5a1b106

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1079 -648
index.html CHANGED
@@ -1,863 +1,1294 @@
1
  <!DOCTYPE html>
2
  <html lang="fa" dir="rtl">
3
-
4
  <head>
5
  <meta charset="UTF-8">
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
7
- <title>دیجی‌شاپ | تجربه خرید مدرن</title>
8
- <meta name="description" content="فروشگاه اینترنتی مدرن با بهترین محصولات">
9
-
10
- <!-- Fonts -->
11
- <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
12
- <!-- Icons -->
13
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
14
-
15
  <style>
16
- /* --- CSS Variables & Reset --- */
17
  :root {
18
- --bg-body: #121212;
19
- --bg-surface: #1e1e1e;
20
- --bg-surface-2: #2c2c2c;
21
- --bg-input: #252525;
22
- --primary: #ff9800;
23
- --primary-gradient: linear-gradient(135deg, #ff9800, #f57c00);
24
- --text-main: #ffffff;
25
- --text-muted: #a0a0a0;
26
- --danger: #ef5350;
27
- --success: #66bb6a;
28
  --border: #333333;
29
- --shadow-sm: 0 2px 4px rgba(0,0,0,0.2);
30
- --shadow-md: 0 4px 12px rgba(0,0,0,0.3);
31
- --shadow-lg: 0 8px 24px rgba(0,0,0,0.4);
32
- --radius-sm: 8px;
33
- --radius-md: 12px;
34
- --radius-lg: 20px;
35
- --header-h: 64px;
36
- --nav-h: 70px;
37
- --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
38
  }
39
 
40
  * {
41
- box-sizing: border-box;
42
  margin: 0;
43
  padding: 0;
44
- -webkit-tap-highlight-color: transparent;
45
- outline: none;
46
  }
47
 
48
  body {
49
  font-family: 'Vazirmatn', sans-serif;
50
- background-color: var(--bg-body);
51
- color: var(--text-main);
52
- line-height: 1.6;
53
- overflow-x: hidden;
54
- padding-top: var(--header-h);
55
- padding-bottom: calc(var(--nav-h) + 20px);
56
  min-height: 100vh;
 
57
  }
58
 
59
- /* --- Utilities --- */
60
- .hidden { display: none !important; }
61
- .flex { display: flex; }
62
- .flex-col { flex-direction: column; }
63
- .items-center { align-items: center; }
64
- .justify-between { justify-content: space-between; }
65
- .justify-center { justify-content: center; }
66
- .gap-1 { gap: 0.5rem; }
67
- .gap-2 { gap: 1rem; }
68
- .w-full { width: 100%; }
69
- .text-center { text-align: center; }
70
- .text-primary { color: var(--primary); }
71
- .text-danger { color: var(--danger); }
72
- .text-success { color: var(--success); }
73
- .text-muted { color: var(--text-muted); }
74
- .font-bold { font-weight: 700; }
75
- .font-light { font-weight: 300; }
76
- .cursor-pointer { cursor: pointer; }
77
- .relative { position: relative; }
78
- .absolute { position: absolute; }
79
-
80
- /* --- Scrollbar --- */
81
- ::-webkit-scrollbar { width: 6px; height: 6px; }
82
- ::-webkit-scrollbar-track { background: transparent; }
83
- ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
84
- ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
85
-
86
- /* --- Header --- */
87
- header {
88
  position: fixed;
89
- top: 0; left: 0; right: 0;
90
- height: var(--header-h);
91
- background: rgba(18, 18, 18, 0.85);
92
- backdrop-filter: blur(12px);
93
- -webkit-backdrop-filter: blur(12px);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
94
  border-bottom: 1px solid var(--border);
95
- z-index: 1000;
96
- padding: 0 16px;
 
 
 
 
97
  display: flex;
98
- align-items: center;
99
  justify-content: space-between;
 
100
  }
101
 
102
- .brand {
103
  font-size: 1.5rem;
104
- font-weight: 900;
105
- background: var(--primary-gradient);
106
  -webkit-background-clip: text;
107
  -webkit-text-fill-color: transparent;
108
- text-decoration: none;
109
- letter-spacing: -0.5px;
110
  }
111
 
112
- .search-wrapper {
113
- flex: 1;
114
- max-width: 600px;
115
- margin: 0 15px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
116
  position: relative;
 
 
 
 
117
  }
118
 
119
- .search-input {
120
- width: 100%;
121
- background: var(--bg-input);
122
- border: 1px solid transparent;
123
- border-radius: var(--radius-lg);
124
- padding: 10px 40px 10px 15px;
125
- color: var(--text-main);
126
- font-family: inherit;
127
- font-size: 0.95rem;
128
- transition: var(--transition);
129
  }
130
 
131
- .search-input:focus {
132
- background: var(--bg-surface);
133
- border-color: var(--primary);
134
- box-shadow: 0 0 0 2px rgba(255, 152, 0, 0.2);
 
 
135
  }
136
 
137
- .search-icon {
138
- position: absolute;
139
- right: 15px;
140
- top: 50%;
141
- transform: translateY(-50%);
142
- color: var(--text-muted);
143
- pointer-events: none;
144
  }
145
 
146
- .search-history {
147
- position: absolute;
148
- top: 110%;
149
- right: 0;
 
 
 
 
 
 
 
 
 
 
 
150
  width: 100%;
151
- background: var(--bg-surface);
152
- border: 1px solid var(--border);
153
- border-radius: var(--radius-md);
154
- box-shadow: var(--shadow-lg);
155
- z-index: 1001;
156
- max-height: 250px;
157
- overflow-y: auto;
158
- animation: slideDown 0.2s ease-out;
159
  }
160
 
161
- .history-item {
162
- padding: 12px 15px;
163
- border-bottom: 1px solid var(--border);
 
 
 
 
 
164
  display: flex;
165
  align-items: center;
166
- gap: 10px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
167
  font-size: 0.9rem;
168
- transition: 0.2s;
169
  }
170
 
171
- .history-item:hover { background: rgba(255,255,255,0.05); }
172
- .history-item:last-child { border-bottom: none; }
 
 
 
 
 
173
 
174
- .profile-trigger {
175
- width: 40px;
176
- height: 40px;
177
- border-radius: 50%;
178
- border: 2px solid var(--border);
179
- padding: 2px;
180
- cursor: pointer;
181
- transition: var(--transition);
182
- overflow: hidden;
183
  }
184
 
185
- .profile-trigger:hover { border-color: var(--primary); }
186
- .profile-trigger img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
 
 
 
 
187
 
188
- .user-dropdown {
189
- position: absolute;
190
- top: 55px;
191
- left: 0;
192
- width: 220px;
193
- background: var(--bg-surface);
194
- border: 1px solid var(--border);
195
- border-radius: var(--radius-md);
196
- box-shadow: var(--shadow-lg);
197
- padding: 8px 0;
198
- z-index: 1001;
199
- display: none;
200
- animation: fadeIn 0.2s;
201
  }
202
 
203
- .user-dropdown.active { display: block; }
 
 
204
 
205
- .dropdown-item {
206
- padding: 12px 16px;
 
 
 
 
 
 
 
 
 
 
207
  display: flex;
208
- align-items: center;
209
- gap: 12px;
210
- color: var(--text-main);
211
- text-decoration: none;
212
- transition: 0.2s;
213
- font-size: 0.9rem;
214
  }
215
 
216
- .dropdown-item:hover { background: rgba(255,255,255,0.05); color: var(--primary); }
217
- .dropdown-item i { width: 20px; text-align: center; }
 
 
 
218
 
219
- /* --- Main Layout --- */
220
- main {
221
- max-width: 1400px;
222
- margin: 0 auto;
223
- padding: 20px 16px;
 
 
 
 
224
  }
225
 
226
- /* --- Stories --- */
227
- .stories-scroll {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
228
  display: flex;
229
- gap: 15px;
230
  overflow-x: auto;
231
- padding: 5px 0 20px;
232
- margin-bottom: 10px;
233
- scrollbar-width: none; /* Firefox */
 
 
 
234
  }
235
- .stories-scroll::-webkit-scrollbar { display: none; }
236
 
237
- .story-circle {
 
 
 
 
 
238
  flex-shrink: 0;
 
 
 
239
  width: 72px;
240
  height: 72px;
241
  border-radius: 50%;
242
- background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
243
  padding: 3px;
244
- cursor: pointer;
245
- position: relative;
246
- transition: transform 0.2s;
247
  }
248
 
249
- .story-circle:hover { transform: scale(1.05); }
 
 
250
 
251
- .story-img {
252
  width: 100%;
253
  height: 100%;
254
  border-radius: 50%;
255
- border: 3px solid var(--bg-body);
 
 
 
 
 
 
 
 
 
256
  object-fit: cover;
257
  }
258
 
259
- .story-name {
260
- position: absolute;
261
- bottom: -22px;
262
- left: 50%;
263
- transform: translateX(-50%);
264
- font-size: 0.7rem;
 
265
  white-space: nowrap;
266
- color: var(--text-muted);
267
  }
268
 
269
- /* --- Chips --- */
270
- .chips-wrapper {
 
 
 
 
 
271
  display: flex;
272
- gap: 10px;
273
- overflow-x: auto;
274
- padding-bottom: 10px;
275
- margin-bottom: 20px;
276
- scrollbar-width: none;
 
 
277
  }
278
- .chips-wrapper::-webkit-scrollbar { display: none; }
279
 
280
- .chip {
281
- background: var(--bg-surface);
282
- border: 1px solid var(--border);
283
- padding: 8px 20px;
284
- border-radius: 50px;
285
- font-size: 0.9rem;
286
- white-space: nowrap;
 
 
287
  cursor: pointer;
288
- transition: var(--transition);
289
- color: var(--text-muted);
 
 
 
 
 
290
  }
291
 
292
- .chip:hover { border-color: var(--text-muted); color: var(--text-main); }
293
- .chip.active {
294
- background: var(--primary);
295
- color: #000;
296
- border-color: var(--primary);
297
- font-weight: 700;
298
- box-shadow: 0 4px 10px rgba(255, 152, 0, 0.3);
299
  }
300
 
301
- /* --- Product Grid --- */
302
- .product-grid {
303
- display: grid;
304
- grid-template-columns: repeat(2, 1fr);
305
- gap: 16px;
 
 
 
 
 
306
  }
307
 
308
- @media (min-width: 600px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
309
- @media (min-width: 900px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }
310
- @media (min-width: 1200px) { .product-grid { grid-template-columns: repeat(5, 1fr); } }
311
 
312
- .product-card {
313
- background: var(--bg-surface);
314
- border-radius: var(--radius-md);
315
- overflow: hidden;
316
- transition: var(--transition);
317
- border: 1px solid transparent;
318
- position: relative;
319
- display: flex;
320
- flex-direction: column;
321
  }
322
 
323
- .product-card:hover {
324
- transform: translateY(-5px);
325
- border-color: var(--border);
326
- box-shadow: var(--shadow-md);
327
  }
328
 
329
- .product-img-box {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
330
  position: relative;
331
- padding-top: 100%; /* 1:1 Aspect Ratio */
332
- background: #252525;
333
  overflow: hidden;
 
 
334
  }
335
 
336
- .product-img {
337
- position: absolute;
338
- top: 0; left: 0; width: 100%; height: 100%;
339
  object-fit: cover;
340
- transition: transform 0.5s;
341
  }
342
 
343
- .product-card:hover .product-img { transform: scale(1.1); }
 
 
344
 
345
- .discount-badge {
346
  position: absolute;
347
- top: 8px; right: 8px;
348
- background: var(--danger);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
349
  color: white;
 
 
 
 
 
 
 
 
 
 
 
 
350
  font-size: 0.7rem;
351
- padding: 2px 6px;
352
- border-radius: 4px;
353
- font-weight: bold;
354
- z-index: 2;
355
  }
356
 
357
- .fav-btn {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
358
  position: absolute;
359
- bottom: 8px; left: 8px;
360
- width: 32px; height: 32px;
361
- background: rgba(0,0,0,0.6);
362
- backdrop-filter: blur(4px);
 
 
 
363
  border-radius: 50%;
364
- display: flex; align-items: center; justify-content: center;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
365
  color: white;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
366
  cursor: pointer;
367
- z-index: 2;
368
- transition: 0.2s;
369
- border: none;
370
  }
371
 
372
- .fav-btn.active { color: var(--danger); background: rgba(255,255,255,0.9); }
373
- .fav-btn:hover { transform: scale(1.1); }
 
 
 
374
 
375
- .product-info { padding: 12px; flex: 1; display: flex; flex-direction: column; }
376
-
377
- .product-title {
378
- font-size: 0.9rem;
379
- margin-bottom: 6px;
380
- line-height: 1.4;
381
- display: -webkit-box;
382
- -webkit-line-clamp: 2;
383
- -webkit-box-orient: vertical;
384
  overflow: hidden;
385
  }
386
 
387
- .rating-stars { color: #ffc107; font-size: 0.75rem; margin-bottom: 8px; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
388
 
389
- .price-row {
390
- margin-top: auto;
 
391
  display: flex;
392
- align-items: baseline;
393
  justify-content: space-between;
394
  }
395
 
396
- .price { font-weight: 700; font-size: 1rem; }
397
- .currency { font-size: 0.7rem; color: var(--text-muted); margin-right: 2px; }
398
- .old-price { font-size: 0.75rem; text-decoration: line-through; color: var(--text-muted); margin-left: 5px; }
 
399
 
400
- .add-btn {
401
- width: 100%;
402
- background: var(--bg-surface-2);
403
- color: var(--text-main);
 
404
  border: none;
405
- padding: 10px;
406
- margin-top: 10px;
407
- border-radius: var(--radius-sm);
408
  cursor: pointer;
409
- font-family: inherit;
410
- font-weight: 600;
411
- transition: 0.2s;
412
  display: flex;
413
  align-items: center;
414
  justify-content: center;
415
- gap: 8px;
416
  }
417
 
418
- .add-btn:hover { background: var(--primary); color: #000; }
 
 
 
419
 
420
- /* --- Video Section --- */
421
- .video-card {
422
- background: var(--bg-surface);
423
- border-radius: var(--radius-md);
424
- overflow: hidden;
425
- margin-bottom: 15px;
426
- cursor: pointer;
427
- transition: var(--transition);
428
  }
429
- .video-card:hover { transform: scale(1.02); }
430
 
431
- .video-thumb-wrapper { position: relative; padding-top: 56.25%; background: #000; }
432
- .video-thumb { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.8; }
433
- .play-btn {
434
- position: absolute; top: 50%; left: 50%;
435
- transform: translate(-50%, -50%);
436
- width: 50px; height: 50px;
437
- background: rgba(0,0,0,0.6);
438
- border-radius: 50%;
439
- display: flex; align-items: center; justify-content: center;
440
- color: white; font-size: 1.2rem;
441
- backdrop-filter: blur(4px);
442
  }
443
 
444
- .video-meta { padding: 12px; }
445
- .video-title { font-weight: 700; margin-bottom: 5px; }
446
- .video-stats { font-size: 0.8rem; color: var(--text-muted); display: flex; gap: 10px; }
 
 
 
 
 
447
 
448
- /* --- Bottom Nav --- */
449
- .bottom-nav {
450
- position: fixed;
451
- bottom: 0; left: 0; right: 0;
452
- height: var(--nav-h);
453
- background: rgba(30, 30, 30, 0.95);
454
- backdrop-filter: blur(10px);
455
- border-top: 1px solid var(--border);
456
  display: flex;
457
- justify-content: space-around;
458
  align-items: center;
459
- z-index: 1000;
460
- padding-bottom: env(safe-area-inset-bottom);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
461
  }
462
 
463
- .nav-item {
 
 
 
 
464
  display: flex;
465
- flex-direction: column;
466
  align-items: center;
467
  justify-content: center;
468
- color: var(--text-muted);
469
- text-decoration: none;
470
- font-size: 0.7rem;
471
- gap: 4px;
472
- width: 20%;
473
- height: 100%;
474
- transition: 0.2s;
475
- position: relative;
476
  }
477
 
478
- .nav-item i { font-size: 1.3rem; transition: 0.2s; }
479
- .nav-item.active { color: var(--primary); }
480
- .nav-item.active i { transform: translateY(-2px); }
481
-
482
- .nav-badge {
483
- position: absolute;
484
- top: 12px; right: 25%;
485
- background: var(--danger);
486
- color: white;
487
- font-size: 0.6rem;
488
- min-width: 16px; height: 16px;
489
- border-radius: 8px;
490
- display: flex; align-items: center; justify-content: center;
491
- border: 2px solid var(--bg-surface);
492
  }
493
 
494
- /* --- Modals --- */
495
- .modal-overlay {
496
  position: fixed;
497
  inset: 0;
498
- background: rgba(0,0,0,0.8);
499
- z-index: 2000;
500
- display: flex; align-items: center; justify-content: center;
501
- opacity: 0; pointer-events: none;
502
- transition: opacity 0.3s;
503
- backdrop-filter: blur(5px);
 
 
 
 
 
 
 
504
  }
505
 
506
- .modal-overlay.open { opacity: 1; pointer-events: all; }
 
 
 
 
507
 
508
- .modal-content {
509
- background: var(--bg-surface);
510
- width: 90%; max-width: 500px;
511
- border-radius: var(--radius-lg);
512
- padding: 24px;
513
  position: relative;
514
- transform: translateY(20px);
515
- transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
 
 
516
  max-height: 90vh;
517
- overflow-y: auto;
518
- box-shadow: var(--shadow-lg);
 
 
 
519
  }
520
 
521
- .modal-overlay.open .modal-content { transform: translateY(0); }
 
 
522
 
523
- .close-modal {
524
- position: absolute; top: 15px; left: 15px;
525
- background: none; border: none;
526
- color: var(--text-muted); font-size: 1.5rem;
527
- cursor: pointer; transition: 0.2s;
528
  }
529
- .close-modal:hover { color: var(--danger); }
530
 
531
- /* --- Forms & Inputs --- */
532
- .form-group { margin-bottom: 16px; }
533
- .form-label { display: block; margin-bottom: 8px; color: var(--text-muted); font-size: 0.9rem; }
534
- .form-input {
535
- width: 100%;
536
- background: var(--bg-input);
537
- border: 1px solid var(--border);
538
- padding: 12px;
539
- border-radius: var(--radius-sm);
540
- color: var(--text-main);
541
- font-family: inherit;
542
- transition: 0.2s;
543
  }
544
- .form-input:focus { border-color: var(--primary); }
545
 
546
- .btn-primary {
547
  width: 100%;
548
- background: var(--primary-gradient);
549
- color: #000;
 
 
 
 
 
 
 
 
 
 
 
550
  border: none;
551
- padding: 14px;
552
- border-radius: var(--radius-sm);
553
- font-weight: 700;
554
  cursor: pointer;
555
- font-family: inherit;
556
- transition: 0.2s;
557
- font-size: 1rem;
 
558
  }
559
- .btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
560
- .btn-primary:active { transform: translateY(1px); }
561
 
562
- .btn-outline {
563
- background: transparent;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
564
  border: 1px solid var(--border);
565
- color: var(--text-main);
566
- padding: 10px 20px;
567
- border-radius: var(--radius-sm);
568
  cursor: pointer;
569
- font-family: inherit;
570
- transition: 0.2s;
 
 
 
571
  }
572
- .btn-outline:hover { border-color: var(--text-muted); background: rgba(255,255,255,0.05); }
573
 
574
- /* --- Toast --- */
575
- .toast-container {
 
 
 
 
 
 
 
 
 
 
 
 
576
  position: fixed;
577
- bottom: 90px;
578
- left: 50%;
579
- transform: translateX(-50%) translateY(20px);
580
- z-index: 3000;
581
  display: flex;
582
- flex-direction: column;
583
- gap: 10px;
584
- width: 90%;
585
- max-width: 350px;
586
- pointer-events: none;
587
  }
588
 
589
- .toast {
590
- background: rgba(40, 40, 40, 0.95);
591
- backdrop-filter: blur(8px);
592
- color: white;
593
- padding: 12px 20px;
594
- border-radius: 50px;
595
- box-shadow: var(--shadow-lg);
596
- display: flex; align-items: center; gap: 10px;
597
- font-size: 0.9rem;
598
- border: 1px solid var(--border);
599
- animation: slideUpFade 0.3s forwards;
600
- pointer-events: auto;
601
  }
602
 
603
- .toast.success i { color: var(--success); }
604
- .toast.error i { color: var(--danger); }
 
 
 
 
 
605
 
606
- /* --- Animations --- */
607
- @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
608
- @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
609
- @keyframes slideUpFade { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
 
 
610
 
611
- /* --- Profile Avatar --- */
612
- .avatar-upload {
613
- width: 100px; height: 100px;
614
- border-radius: 50%;
615
- border: 3px solid var(--border);
 
 
 
616
  overflow: hidden;
617
- position: relative;
618
- margin: 0 auto 15px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
619
  cursor: pointer;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
620
  }
621
- .avatar-upload img { width: 100%; height: 100%; object-fit: cover; }
622
- .avatar-overlay {
623
- position: absolute; inset: 0;
624
- background: rgba(0,0,0,0.5);
625
- display: flex; align-items: center; justify-content: center;
626
- opacity: 0; transition: 0.2s;
 
 
 
 
 
 
 
627
  }
628
- .avatar-upload:hover .avatar-overlay { opacity: 1; }
629
 
 
 
 
 
 
 
 
 
 
 
 
 
630
  </style>
631
  </head>
632
-
633
  <body>
 
 
 
 
 
 
634
 
635
  <!-- Header -->
636
- <header>
637
- <a href="#" class="brand" onclick="app.router('home')">دیجی‌شاپ</a>
638
-
639
- <div class="search-wrapper">
640
- <i class="fas fa-search search-icon"></i>
641
- <input type="text" class="search-input" placeholder="جستجو در هزاران محصول..." id="searchInput">
642
- <div class="search-history hidden" id="searchHistory"></div>
643
- </div>
644
-
645
- <div class="relative">
646
- <div class="profile-trigger" onclick="app.toggleUserMenu()">
647
- <img src="https://placehold.co/100x100/333/fff?text=User" id="headerAvatar" alt="User">
648
- </div>
649
- <div class="user-dropdown" id="userMenu">
650
- <div class="dropdown-item" onclick="app.router('profile')"><i class="fas fa-user"></i> پروفایل</div>
651
- <div class="dropdown-item" onclick="app.router('orders')"><i class="fas fa-box"></i> سفارش‌ها</div>
652
- <div class="dropdown-item" onclick="app.router('wishlist')"><i class="fas fa-heart"></i> علاقه‌مندی‌ها</div>
653
- <div class="dropdown-item" onclick="app.openModal('settingsModal')"><i class="fas fa-cog"></i> تنظیمات</div>
654
- <div class="dropdown-item" style="color: var(--danger);" onclick="app.logout()"><i class="fas fa-sign-out-alt"></i> خروج</div>
 
 
 
 
 
 
 
 
 
 
 
655
  </div>
656
  </div>
657
  </header>
658
 
659
  <!-- Main Content -->
660
- <main id="mainContainer">
661
-
662
- <!-- HOME PAGE -->
663
- <section id="page-home" class="page-section">
664
- <div class="stories-scroll" id="storiesContainer"></div>
665
-
666
- <h3 class="font-bold text-lg mb-4 flex items-center gap-2">
667
- <i class="fas fa-fire text-danger"></i> پیشنهادات شگفت‌انگیز
668
- </h3>
669
- <div class="product-grid" id="featuredProducts"></div>
670
- </section>
671
-
672
- <!-- SHOP PAGE -->
673
- <section id="page-shop" class="page-section hidden">
674
- <div class="chips-wrapper" id="categoryChips">
675
- <div class="chip active" data-cat="all">همه</div>
676
- <div class="chip" data-cat="mobile">موبایل</div>
677
- <div class="chip" data-cat="laptop">لپ‌تا��</div>
678
- <div class="chip" data-cat="headphone">هدفون</div>
679
- <div class="chip" data-cat="watch">ساعت</div>
680
- <div class="chip" data-cat="camera">دوربین</div>
681
- </div>
682
- <div class="product-grid" id="shopProducts"></div>
683
- </section>
684
-
685
- <!-- VIDEOS PAGE -->
686
- <section id="page-videos" class="page-section hidden">
687
- <h3 class="font-bold text-lg mb-4">بررسی و آموزش</h3>
688
- <div id="videosContainer"></div>
689
- </section>
690
-
691
- <!-- CART PAGE -->
692
- <section id="page-cart" class="page-section hidden">
693
- <h3 class="font-bold text-lg mb-4">سبد خرید شما</h3>
694
- <div id="cartItems" class="flex flex-col gap-2 mb-4"></div>
695
-
696
- <div class="bg-surface p-4 rounded-lg border border-border mt-4" style="background: var(--bg-surface); border-radius: var(--radius-md); border: 1px solid var(--border);">
697
- <div class="flex justify-between mb-2">
698
- <span class="text-muted">جمع کل:</span>
699
- <span class="font-bold" id="cartTotal">0 تومان</span>
700
  </div>
701
- <button class="btn-primary" onclick="app.openModal('paymentModal')">نهایی کردن خرید</button>
702
- </div>
703
- </section>
704
-
705
- <!-- PROFILE PAGE -->
706
- <section id="page-profile" class="page-section hidden">
707
- <div class="flex flex-col items-center text-center mb-6">
708
- <div class="avatar-upload" onclick="document.getElementById('avatarInput').click()">
709
- <img src="" id="profileAvatarDisplay">
710
- <div class="avatar-overlay"><i class="fas fa-camera"></i></div>
711
- <input type="file" id="avatarInput" hidden accept="image/*" onchange="app.handleAvatarUpload(this)">
712
  </div>
713
- <h2 class="font-bold text-xl" id="profileName">کاربر مهمان</h2>
714
- <p class="text-muted text-sm" id="profileBio">بدون بیوگرافی</p>
715
- <button class="btn-outline mt-3" onclick="app.openModal('editProfileModal')">ویرایش اطلاعات</button>
716
  </div>
717
-
718
- <div class="flex flex-col gap-2">
719
- <div class="dropdown-item justify-between" onclick="app.router('orders')">
720
- <span><i class="fas fa-box text-primary"></i> سفارش‌های من</span>
721
- <i class="fas fa-chevron-left text-xs"></i>
722
- </div>
723
- <div class="dropdown-item justify-between" onclick="app.router('wishlist')">
724
- <span><i class="fas fa-heart text-danger"></i> لیست علاقه‌مندی‌ها</span>
725
- <i class="fas fa-chevron-left text-xs"></i>
 
 
 
 
 
 
 
 
 
 
726
  </div>
727
- <div class="dropdown-item justify-between" onclick="app.openModal('settingsModal')">
728
- <span><i class="fas fa-moon text-info"></i> تنظیمات برنامه</span>
729
- <i class="fas fa-chevron-left text-xs"></i>
 
 
730
  </div>
731
  </div>
732
-
733
- <div class="text-center mt-8">
734
- <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-xs text-muted hover:text-primary transition">Built with anycoder</a>
735
- </div>
736
  </section>
737
 
738
- </main>
739
-
740
- <!-- Bottom Navigation -->
741
- <nav class="bottom-nav">
742
- <a href="#" class="nav-item active" onclick="app.router('home')" data-target="home">
743
- <i class="fas fa-home"></i>
744
- <span>خانه</span>
745
- </a>
746
- <a href="#" class="nav-item" onclick="app.router('shop')" data-target="shop">
747
- <i class="fas fa-store"></i>
748
- <span>فروشگاه</span>
749
- </a>
750
- <a href="#" class="nav-item" onclick="app.router('videos')" data-target="videos">
751
- <i class="fas fa-video"></i>
752
- <span>ویدیوها</span>
753
- </a>
754
- <a href="#" class="nav-item" onclick="app.router('cart')" data-target="cart">
755
- <i class="fas fa-shopping-cart"></i>
756
- <span>سبد</span>
757
- <div class="nav-badge hidden" id="cartBadge">0</div>
758
- </a>
759
- <a href="#" class="nav-item" onclick="app.router('profile')" data-target="profile">
760
- <i class="fas fa-user"></i>
761
- <span>پروفایل</span>
762
- </a>
763
- </nav>
764
-
765
- <!-- Toast Container -->
766
- <div class="toast-container" id="toastContainer"></div>
767
-
768
- <!-- Modals -->
769
-
770
- <!-- Auth Modal -->
771
- <div class="modal-overlay" id="authModal">
772
- <div class="modal-content text-center">
773
- <button class="close-modal" onclick="app.closeModal('authModal')">&times;</button>
774
- <h2 class="font-bold text-2xl mb-2">خوش آمدید</h2>
775
- <p class="text-muted mb-6">برای ادامه وارد شوید</p>
776
- <div class="form-group">
777
- <input type="tel" class="form-input text-center" placeholder="شماره موبایل">
778
- </div>
779
- <div class="form-group">
780
- <input type="password" class="form-input text-center" placeholder="رمز عبور">
781
  </div>
782
- <button class="btn-primary" onclick="app.login()">ورود به حساب</button>
783
- </div>
784
- </div>
785
 
786
- <!-- Payment Modal -->
787
- <div class="modal-overlay" id="paymentModal">
788
- <div class="modal-content text-center">
789
- <button class="close-modal" onclick="app.closeModal('paymentModal')">&times;</button>
790
- <div id="payStep1">
791
- <i class="fas fa-credit-card text-primary" style="font-size: 3rem; margin-bottom: 15px;"></i>
792
- <h3 class="font-bold mb-2">تایید پرداخت</h3>
793
- <p class="text-muted mb-4">مبلغ قابل پرداخت: <span class="font-bold text-primary" id="payAmountDisplay"></span></p>
794
- <button class="btn-primary" onclick="app.processPayment()">پرداخت امن</button>
795
- </div>
796
- <div id="payStep2" class="hidden">
797
- <i class="fas fa-circle-notch fa-spin text-primary" style="font-size: 3rem; margin-bottom: 15px;"></i>
798
- <p>در حال اتصال به درگاه بانک...</p>
799
- </div>
800
- <div id="payStep3" class="hidden">
801
- <i class="fas fa-check-circle text-success" style="font-size: 3rem; margin-bottom: 15px;"></i>
802
- <h3 class="font-bold mb-2">پرداخت موفق!</h3>
803
- <p class="text-muted mb-4">سفارش شما با موفقیت ثبت شد.</p>
804
- <button class="btn-primary" onclick="app.closeModal('paymentModal'); app.router('home'); app.clearCart();">بازگشت به خانه</button>
 
 
 
 
 
 
 
 
 
 
 
805
  </div>
806
  </div>
807
- </div>
808
 
809
- <!-- Edit Profile Modal -->
810
- <div class="modal-overlay" id="editProfileModal">
811
- <div class="modal-content">
812
- <button class="close-modal" onclick="app.closeModal('editProfileModal')">&times;</button>
813
- <h3 class="font-bold mb-4">ویرایش پروفایل</h3>
814
- <div class="form-group">
815
- <label class="form-label">نام نمایشی</label>
816
- <input type="text" id="editNameInput" class="form-input">
817
  </div>
818
- <div class="form-group">
819
- <label class="form-label">بیوگرافی</label>
820
- <textarea id="editBioInput" class="form-input" rows="3"></textarea>
821
- </div>
822
- <button class="btn-primary" onclick="app.saveProfile()">ذخیره تغییرات</button>
823
  </div>
824
- </div>
825
 
826
- <!-- Settings Modal -->
827
- <div class="modal-overlay" id="settingsModal">
828
- <div class="modal-content">
829
- <button class="close-modal" onclick="app.closeModal('settingsModal')">&times;</button>
830
- <h3 class="font-bold mb-4">تنظیمات</h3>
831
- <div class="flex justify-between items-center mb-4">
832
- <span>حالت شب</span>
833
- <i class="fas fa-toggle-on text-primary text-2xl"></i>
834
- </div>
835
- <div class="flex justify-between items-center mb-4">
836
- <span>اعلان‌ها</span>
837
- <i class="fas fa-toggle-on text-primary text-2xl"></i>
838
  </div>
839
  </div>
840
- </div>
841
 
842
- <script>
843
- // --- Data & State Management ---
844
- const Store = {
845
- user: JSON.parse(localStorage.getItem('ds_user')) || null,
846
- cart: JSON.parse(localStorage.getItem('ds_cart')) || [],
847
- wishlist: JSON.parse(localStorage.getItem('ds_wishlist')) || [],
848
- searchHistory: JSON.parse(localStorage.getItem('ds_search')) || [],
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
849
 
850
- products: [
851
- { id: 1, title: "آیفون 13 پرو مکس", price: 55000000, oldPrice: 60000000, img: "https://images.unsplash.com/photo-1632661674596-df8be070a5c5?auto=format&fit=crop&w=400&q=80", cat: "mobile", rating: 4.8 },
852
- { id: 2, title: "مک بوک پرو M2", price: 85000000, oldPrice: 90000000, img: "https://images.unsplash.com/photo-1517336714731-489689fd1ca4?auto=format&fit=crop&w=400&q=80", cat: "laptop", rating: 4.9 },
853
- { id: 3, title: "هدفون سونی WH-1000XM5", price: 12000000, oldPrice: 14000000, img: "https://images.unsplash.com/photo-1618366712010-f4ae9c647dcb?auto=format&fit=crop&w=400&q=80", cat: "headphone", rating: 4.7 },
854
- { id: 4, title: "اپل واچ اولترا", price: 35000000, oldPrice: 38000000, img: "https://images.unsplash.com/photo-1664478546384-d57ffe74a771?auto=format&fit=crop&w=400&q=80", cat: "watch", rating: 4.6 },
855
- { id: 5, title: "سامسونگ S23 Ultra", price: 48000000, oldPrice: 52000000, img: "https://images.unsplash.com/photo-1610945415295-d9bbf067e59c?auto=format&fit=crop&w=400&q=80", cat: "mobile", rating: 4.5 },
856
- { id: 6, title: "ایرپاد پرو 2", price: 9500000, oldPrice: 11000000, img: "https://images.unsplash.com/photo-1603351154351-5cf99bc75423?auto=format&fit=crop&w=400&q=80", cat: "headphone", rating: 4.8 },
857
- { id: 7, title: "لپ تاپ ایسوس ROG", price: 70000000, oldPrice: 75000000, img: "https://images.unsplash.com/photo-1593640408182-31c70c8268f5?auto=format&fit=crop&w=400&q=80", cat: "laptop", rating: 4.7 },
858
- { id: 8, title: "ساعت هوشمند شیائومی", price: 2500000, oldPrice: 3000000, img: "https://images.unsplash.com/photo-1579586337278-3befd40fd17a?auto=format&fit=crop&w=400&q=80", cat: "watch", rating: 4.2 },
859
- ],
860
- videos: [
861
- { id: 1, title: "بررسی کامل آیفون 15", views: "12K", likes: "800", img: "https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?auto=format&fit=crop&w=600&q=80" },
862
- { id: 2, title: "آموزش فتوشاپ 2024", views: "5K", likes: "300", img: "https://images.unsplash.com/photo-1542744173-8e7e53415bb0?auto=format&fit=crop&w=600&q=80" },
863
- { id: 3, title: "آنباکس کنسول PS5", views: "25K", likes: "1.5K", img: "https://images.unsplash.com/photo-1606144042614-b2417e99c4e3?auto=format&fit=crop&w=600&q=80
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
 
 
 
11
  <style>
 
12
  :root {
13
+ --bg-primary: #0f0f0f;
14
+ --bg-secondary: #1a1a1a;
15
+ --bg-card: #242424;
16
+ --accent: #e8b4b8;
17
+ --accent-hover: #d49a9f;
18
+ --text-primary: #f5f5f5;
19
+ --text-secondary: #a0a0a0;
 
 
 
20
  --border: #333333;
21
+ --gradient-start: #e8b4b8;
22
+ --gradient-end: #a88b8e;
 
 
 
 
 
 
 
23
  }
24
 
25
  * {
 
26
  margin: 0;
27
  padding: 0;
28
+ box-sizing: border-box;
 
29
  }
30
 
31
  body {
32
  font-family: 'Vazirmatn', sans-serif;
33
+ background: var(--bg-primary);
34
+ color: var(--text-primary);
 
 
 
 
35
  min-height: 100vh;
36
+ overflow-x: hidden;
37
  }
38
 
39
+ /* Animated Background */
40
+ .bg-pattern {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
41
  position: fixed;
42
+ top: 0;
43
+ left: 0;
44
+ width: 100%;
45
+ height: 100%;
46
+ pointer-events: none;
47
+ z-index: 0;
48
+ opacity: 0.4;
49
+ }
50
+
51
+ .bg-orb {
52
+ position: absolute;
53
+ border-radius: 50%;
54
+ filter: blur(80px);
55
+ animation: float 20s ease-in-out infinite;
56
+ }
57
+
58
+ .bg-orb-1 {
59
+ width: 400px;
60
+ height: 400px;
61
+ background: linear-gradient(135deg, var(--accent) 0%, transparent 70%);
62
+ top: -100px;
63
+ right: -100px;
64
+ animation-delay: 0s;
65
+ }
66
+
67
+ .bg-orb-2 {
68
+ width: 300px;
69
+ height: 300px;
70
+ background: linear-gradient(135deg, #8b7a7d 0%, transparent 70%);
71
+ bottom: 20%;
72
+ left: -50px;
73
+ animation-delay: -7s;
74
+ }
75
+
76
+ .bg-orb-3 {
77
+ width: 250px;
78
+ height: 250px;
79
+ background: linear-gradient(135deg, #6b5a5d 0%, transparent 70%);
80
+ top: 50%;
81
+ right: 10%;
82
+ animation-delay: -14s;
83
+ }
84
+
85
+ @keyframes float {
86
+ 0%, 100% { transform: translate(0, 0) scale(1); }
87
+ 33% { transform: translate(30px, -30px) scale(1.1); }
88
+ 66% { transform: translate(-20px, 20px) scale(0.9); }
89
+ }
90
+
91
+ /* Header */
92
+ .header {
93
+ position: fixed;
94
+ top: 0;
95
+ left: 0;
96
+ right: 0;
97
+ z-index: 100;
98
+ background: rgba(15, 15, 15, 0.8);
99
+ backdrop-filter: blur(20px);
100
  border-bottom: 1px solid var(--border);
101
+ padding: 1rem 1.5rem;
102
+ }
103
+
104
+ .header-content {
105
+ max-width: 1200px;
106
+ margin: 0 auto;
107
  display: flex;
 
108
  justify-content: space-between;
109
+ align-items: center;
110
  }
111
 
112
+ .logo {
113
  font-size: 1.5rem;
114
+ font-weight: 800;
115
+ background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
116
  -webkit-background-clip: text;
117
  -webkit-text-fill-color: transparent;
118
+ background-clip: text;
 
119
  }
120
 
121
+ .header-actions {
122
+ display: flex;
123
+ gap: 0.75rem;
124
+ }
125
+
126
+ .icon-btn {
127
+ width: 44px;
128
+ height: 44px;
129
+ border-radius: 12px;
130
+ background: var(--bg-card);
131
+ border: 1px solid var(--border);
132
+ color: var(--text-primary);
133
+ display: flex;
134
+ align-items: center;
135
+ justify-content: center;
136
+ cursor: pointer;
137
+ transition: all 0.3s ease;
138
+ }
139
+
140
+ .icon-btn:hover {
141
+ background: var(--accent);
142
+ color: var(--bg-primary);
143
+ transform: translateY(-2px);
144
+ }
145
+
146
+ /* Main Content */
147
+ .main-content {
148
  position: relative;
149
+ z-index: 1;
150
+ padding-top: 80px;
151
+ max-width: 1200px;
152
+ margin: 0 auto;
153
  }
154
 
155
+ /* Profile Section */
156
+ .profile-section {
157
+ padding: 2rem 1.5rem;
158
+ display: flex;
159
+ flex-direction: column;
160
+ align-items: center;
161
+ gap: 1.5rem;
 
 
 
162
  }
163
 
164
+ @media (min-width: 768px) {
165
+ .profile-section {
166
+ flex-direction: row;
167
+ align-items: flex-start;
168
+ gap: 3rem;
169
+ }
170
  }
171
 
172
+ .profile-image-container {
173
+ position: relative;
174
+ flex-shrink: 0;
 
 
 
 
175
  }
176
 
177
+ .profile-image {
178
+ width: 120px;
179
+ height: 120px;
180
+ border-radius: 50%;
181
+ background: linear-gradient(135deg, var(--accent), var(--gradient-end));
182
+ padding: 4px;
183
+ animation: pulse-ring 3s ease-in-out infinite;
184
+ }
185
+
186
+ @keyframes pulse-ring {
187
+ 0%, 100% { box-shadow: 0 0 0 0 rgba(232, 180, 184, 0.4); }
188
+ 50% { box-shadow: 0 0 0 15px rgba(232, 180, 184, 0); }
189
+ }
190
+
191
+ .profile-image img {
192
  width: 100%;
193
+ height: 100%;
194
+ border-radius: 50%;
195
+ object-fit: cover;
196
+ background: var(--bg-secondary);
 
 
 
 
197
  }
198
 
199
+ .profile-badge {
200
+ position: absolute;
201
+ bottom: 5px;
202
+ right: 5px;
203
+ width: 28px;
204
+ height: 28px;
205
+ background: var(--accent);
206
+ border-radius: 50%;
207
  display: flex;
208
  align-items: center;
209
+ justify-content: center;
210
+ border: 3px solid var(--bg-primary);
211
+ }
212
+
213
+ .profile-info {
214
+ flex: 1;
215
+ text-align: center;
216
+ }
217
+
218
+ @media (min-width: 768px) {
219
+ .profile-info {
220
+ text-align: right;
221
+ }
222
+ }
223
+
224
+ .profile-name {
225
+ font-size: 1.25rem;
226
+ font-weight: 700;
227
+ margin-bottom: 0.25rem;
228
+ }
229
+
230
+ .profile-username {
231
+ color: var(--text-secondary);
232
  font-size: 0.9rem;
233
+ margin-bottom: 1rem;
234
  }
235
 
236
+ .profile-bio {
237
+ color: var(--text-secondary);
238
+ font-size: 0.875rem;
239
+ line-height: 1.6;
240
+ margin-bottom: 1rem;
241
+ max-width: 400px;
242
+ }
243
 
244
+ @media (min-width: 768px) {
245
+ .profile-bio {
246
+ margin-left: auto;
247
+ margin-right: 0;
248
+ }
 
 
 
 
249
  }
250
 
251
+ .profile-stats {
252
+ display: flex;
253
+ justify-content: center;
254
+ gap: 2.5rem;
255
+ margin-bottom: 1.5rem;
256
+ }
257
 
258
+ @media (min-width: 768px) {
259
+ .profile-stats {
260
+ justify-content: flex-start;
261
+ }
 
 
 
 
 
 
 
 
 
262
  }
263
 
264
+ .stat-item {
265
+ text-align: center;
266
+ }
267
 
268
+ .stat-number {
269
+ font-size: 1.25rem;
270
+ font-weight: 700;
271
+ display: block;
272
+ }
273
+
274
+ .stat-label {
275
+ font-size: 0.8rem;
276
+ color: var(--text-secondary);
277
+ }
278
+
279
+ .profile-actions {
280
  display: flex;
281
+ gap: 0.75rem;
282
+ justify-content: center;
283
+ flex-wrap: wrap;
 
 
 
284
  }
285
 
286
+ @media (min-width: 768px) {
287
+ .profile-actions {
288
+ justify-content: flex-start;
289
+ }
290
+ }
291
 
292
+ .btn {
293
+ padding: 0.625rem 1.5rem;
294
+ border-radius: 10px;
295
+ font-size: 0.875rem;
296
+ font-weight: 600;
297
+ cursor: pointer;
298
+ transition: all 0.3s ease;
299
+ border: none;
300
+ font-family: inherit;
301
  }
302
 
303
+ .btn-primary {
304
+ background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
305
+ color: var(--bg-primary);
306
+ }
307
+
308
+ .btn-primary:hover {
309
+ transform: translateY(-2px);
310
+ box-shadow: 0 8px 25px rgba(232, 180, 184, 0.3);
311
+ }
312
+
313
+ .btn-secondary {
314
+ background: var(--bg-card);
315
+ color: var(--text-primary);
316
+ border: 1px solid var(--border);
317
+ }
318
+
319
+ .btn-secondary:hover {
320
+ background: var(--bg-secondary);
321
+ border-color: var(--accent);
322
+ }
323
+
324
+ /* Stories Highlights */
325
+ .stories-section {
326
+ padding: 1.5rem;
327
+ border-bottom: 1px solid var(--border);
328
+ }
329
+
330
+ .stories-container {
331
  display: flex;
332
+ gap: 1.25rem;
333
  overflow-x: auto;
334
+ padding: 0.5rem 0;
335
+ scrollbar-width: none;
336
+ }
337
+
338
+ .stories-container::-webkit-scrollbar {
339
+ display: none;
340
  }
 
341
 
342
+ .story-item {
343
+ display: flex;
344
+ flex-direction: column;
345
+ align-items: center;
346
+ gap: 0.5rem;
347
+ cursor: pointer;
348
  flex-shrink: 0;
349
+ }
350
+
351
+ .story-ring {
352
  width: 72px;
353
  height: 72px;
354
  border-radius: 50%;
355
+ background: linear-gradient(135deg, var(--accent), #c4a3a6);
356
  padding: 3px;
357
+ transition: transform 0.3s ease;
 
 
358
  }
359
 
360
+ .story-item:hover .story-ring {
361
+ transform: scale(1.1);
362
+ }
363
 
364
+ .story-content {
365
  width: 100%;
366
  height: 100%;
367
  border-radius: 50%;
368
+ background: var(--bg-card);
369
+ display: flex;
370
+ align-items: center;
371
+ justify-content: center;
372
+ overflow: hidden;
373
+ }
374
+
375
+ .story-content img {
376
+ width: 100%;
377
+ height: 100%;
378
  object-fit: cover;
379
  }
380
 
381
+ .story-title {
382
+ font-size: 0.75rem;
383
+ color: var(--text-secondary);
384
+ max-width: 70px;
385
+ text-align: center;
386
+ overflow: hidden;
387
+ text-overflow: ellipsis;
388
  white-space: nowrap;
 
389
  }
390
 
391
+ .story-add {
392
+ border: 2px dashed var(--border);
393
+ background: transparent;
394
+ }
395
+
396
+ /* Tabs Navigation */
397
+ .tabs-nav {
398
  display: flex;
399
+ justify-content: center;
400
+ border-bottom: 1px solid var(--border);
401
+ position: sticky;
402
+ top: 80px;
403
+ background: rgba(15, 15, 15, 0.95);
404
+ backdrop-filter: blur(20px);
405
+ z-index: 50;
406
  }
 
407
 
408
+ .tab-btn {
409
+ flex: 1;
410
+ max-width: 200px;
411
+ padding: 1rem;
412
+ background: transparent;
413
+ border: none;
414
+ color: var(--text-secondary);
415
+ font-size: 0.875rem;
416
+ font-weight: 600;
417
  cursor: pointer;
418
+ position: relative;
419
+ font-family: inherit;
420
+ transition: color 0.3s ease;
421
+ display: flex;
422
+ align-items: center;
423
+ justify-content: center;
424
+ gap: 0.5rem;
425
  }
426
 
427
+ .tab-btn.active {
428
+ color: var(--text-primary);
 
 
 
 
 
429
  }
430
 
431
+ .tab-btn::after {
432
+ content: '';
433
+ position: absolute;
434
+ bottom: 0;
435
+ left: 50%;
436
+ transform: translateX(-50%) scaleX(0);
437
+ width: 80%;
438
+ height: 2px;
439
+ background: var(--accent);
440
+ transition: transform 0.3s ease;
441
  }
442
 
443
+ .tab-btn.active::after {
444
+ transform: translateX(-50%) scaleX(1);
445
+ }
446
 
447
+ .tab-btn:hover {
448
+ color: var(--text-primary);
 
 
 
 
 
 
 
449
  }
450
 
451
+ /* Tab Content */
452
+ .tab-content {
453
+ display: none;
454
+ animation: fadeIn 0.5s ease;
455
  }
456
 
457
+ .tab-content.active {
458
+ display: block;
459
+ }
460
+
461
+ @keyframes fadeIn {
462
+ from { opacity: 0; transform: translateY(10px); }
463
+ to { opacity: 1; transform: translateY(0); }
464
+ }
465
+
466
+ /* Products Grid */
467
+ .products-grid {
468
+ display: grid;
469
+ grid-template-columns: repeat(3, 1fr);
470
+ gap: 3px;
471
+ padding: 3px;
472
+ }
473
+
474
+ .product-item {
475
+ aspect-ratio: 1;
476
  position: relative;
 
 
477
  overflow: hidden;
478
+ cursor: pointer;
479
+ background: var(--bg-card);
480
  }
481
 
482
+ .product-item img {
483
+ width: 100%;
484
+ height: 100%;
485
  object-fit: cover;
486
+ transition: transform 0.5s ease;
487
  }
488
 
489
+ .product-item:hover img {
490
+ transform: scale(1.1);
491
+ }
492
 
493
+ .product-overlay {
494
  position: absolute;
495
+ inset: 0;
496
+ background: rgba(0, 0, 0, 0.5);
497
+ display: flex;
498
+ align-items: center;
499
+ justify-content: center;
500
+ gap: 1.5rem;
501
+ opacity: 0;
502
+ transition: opacity 0.3s ease;
503
+ }
504
+
505
+ .product-item:hover .product-overlay {
506
+ opacity: 1;
507
+ }
508
+
509
+ .overlay-stat {
510
+ display: flex;
511
+ align-items: center;
512
+ gap: 0.5rem;
513
  color: white;
514
+ font-weight: 600;
515
+ font-size: 0.9rem;
516
+ }
517
+
518
+ .product-badge {
519
+ position: absolute;
520
+ top: 10px;
521
+ right: 10px;
522
+ background: var(--accent);
523
+ color: var(--bg-primary);
524
+ padding: 0.25rem 0.75rem;
525
+ border-radius: 20px;
526
  font-size: 0.7rem;
527
+ font-weight: 700;
 
 
 
528
  }
529
 
530
+ /* Videos Grid */
531
+ .videos-grid {
532
+ display: grid;
533
+ grid-template-columns: repeat(3, 1fr);
534
+ gap: 3px;
535
+ padding: 3px;
536
+ }
537
+
538
+ .video-item {
539
+ aspect-ratio: 9/16;
540
+ position: relative;
541
+ overflow: hidden;
542
+ cursor: pointer;
543
+ background: var(--bg-card);
544
+ }
545
+
546
+ .video-item img {
547
+ width: 100%;
548
+ height: 100%;
549
+ object-fit: cover;
550
+ transition: transform 0.5s ease;
551
+ }
552
+
553
+ .video-item:hover img {
554
+ transform: scale(1.05);
555
+ }
556
+
557
+ .video-play-icon {
558
  position: absolute;
559
+ top: 50%;
560
+ left: 50%;
561
+ transform: translate(-50%, -50%);
562
+ width: 50px;
563
+ height: 50px;
564
+ background: rgba(255, 255, 255, 0.2);
565
+ backdrop-filter: blur(10px);
566
  border-radius: 50%;
567
+ display: flex;
568
+ align-items: center;
569
+ justify-content: center;
570
+ transition: all 0.3s ease;
571
+ }
572
+
573
+ .video-item:hover .video-play-icon {
574
+ background: rgba(255, 255, 255, 0.3);
575
+ transform: translate(-50%, -50%) scale(1.1);
576
+ }
577
+
578
+ .video-stats {
579
+ position: absolute;
580
+ bottom: 10px;
581
+ right: 10px;
582
+ display: flex;
583
+ align-items: center;
584
+ gap: 0.25rem;
585
  color: white;
586
+ font-size: 0.8rem;
587
+ font-weight: 600;
588
+ }
589
+
590
+ /* Stories Page */
591
+ .stories-page {
592
+ padding: 1.5rem;
593
+ }
594
+
595
+ .stories-grid {
596
+ display: grid;
597
+ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
598
+ gap: 1rem;
599
+ }
600
+
601
+ .story-card {
602
+ background: var(--bg-card);
603
+ border-radius: 16px;
604
+ overflow: hidden;
605
  cursor: pointer;
606
+ transition: all 0.3s ease;
607
+ border: 1px solid var(--border);
 
608
  }
609
 
610
+ .story-card:hover {
611
+ transform: translateY(-5px);
612
+ border-color: var(--accent);
613
+ box-shadow: 0 15px 40px rgba(232, 180, 184, 0.1);
614
+ }
615
 
616
+ .story-card-image {
617
+ aspect-ratio: 9/16;
 
 
 
 
 
 
 
618
  overflow: hidden;
619
  }
620
 
621
+ .story-card-image img {
622
+ width: 100%;
623
+ height: 100%;
624
+ object-fit: cover;
625
+ transition: transform 0.5s ease;
626
+ }
627
+
628
+ .story-card:hover .story-card-image img {
629
+ transform: scale(1.1);
630
+ }
631
+
632
+ .story-card-info {
633
+ padding: 0.75rem;
634
+ }
635
+
636
+ .story-card-title {
637
+ font-size: 0.85rem;
638
+ font-weight: 600;
639
+ margin-bottom: 0.25rem;
640
+ }
641
+
642
+ .story-card-views {
643
+ font-size: 0.75rem;
644
+ color: var(--text-secondary);
645
+ }
646
+
647
+ /* Settings Menu */
648
+ .settings-menu {
649
+ position: fixed;
650
+ top: 0;
651
+ right: -100%;
652
+ width: 100%;
653
+ max-width: 320px;
654
+ height: 100%;
655
+ background: var(--bg-secondary);
656
+ z-index: 200;
657
+ transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
658
+ border-left: 1px solid var(--border);
659
+ overflow-y: auto;
660
+ }
661
+
662
+ .settings-menu.open {
663
+ right: 0;
664
+ }
665
+
666
+ .settings-overlay {
667
+ position: fixed;
668
+ inset: 0;
669
+ background: rgba(0, 0, 0, 0.5);
670
+ z-index: 150;
671
+ opacity: 0;
672
+ visibility: hidden;
673
+ transition: all 0.3s ease;
674
+ }
675
+
676
+ .settings-overlay.open {
677
+ opacity: 1;
678
+ visibility: visible;
679
+ }
680
 
681
+ .settings-header {
682
+ padding: 1.5rem;
683
+ border-bottom: 1px solid var(--border);
684
  display: flex;
685
+ align-items: center;
686
  justify-content: space-between;
687
  }
688
 
689
+ .settings-title {
690
+ font-size: 1.25rem;
691
+ font-weight: 700;
692
+ }
693
 
694
+ .settings-close {
695
+ width: 36px;
696
+ height: 36px;
697
+ border-radius: 50%;
698
+ background: var(--bg-card);
699
  border: none;
700
+ color: var(--text-primary);
 
 
701
  cursor: pointer;
 
 
 
702
  display: flex;
703
  align-items: center;
704
  justify-content: center;
705
+ transition: all 0.3s ease;
706
  }
707
 
708
+ .settings-close:hover {
709
+ background: var(--accent);
710
+ color: var(--bg-primary);
711
+ }
712
 
713
+ .settings-content {
714
+ padding: 1rem;
 
 
 
 
 
 
715
  }
 
716
 
717
+ .settings-section {
718
+ margin-bottom: 1.5rem;
 
 
 
 
 
 
 
 
 
719
  }
720
 
721
+ .settings-section-title {
722
+ font-size: 0.75rem;
723
+ color: var(--text-secondary);
724
+ text-transform: uppercase;
725
+ letter-spacing: 0.1em;
726
+ margin-bottom: 0.75rem;
727
+ padding: 0 0.5rem;
728
+ }
729
 
730
+ .settings-item {
 
 
 
 
 
 
 
731
  display: flex;
 
732
  align-items: center;
733
+ gap: 1rem;
734
+ padding: 1rem;
735
+ border-radius: 12px;
736
+ cursor: pointer;
737
+ transition: all 0.3s ease;
738
+ background: transparent;
739
+ border: none;
740
+ width: 100%;
741
+ text-align: right;
742
+ color: var(--text-primary);
743
+ font-family: inherit;
744
+ font-size: 0.95rem;
745
+ }
746
+
747
+ .settings-item:hover {
748
+ background: var(--bg-card);
749
  }
750
 
751
+ .settings-item-icon {
752
+ width: 40px;
753
+ height: 40px;
754
+ border-radius: 10px;
755
+ background: var(--bg-card);
756
  display: flex;
 
757
  align-items: center;
758
  justify-content: center;
759
+ color: var(--accent);
 
 
 
 
 
 
 
760
  }
761
 
762
+ .settings-item:hover .settings-item-icon {
763
+ background: var(--accent);
764
+ color: var(--bg-primary);
 
 
 
 
 
 
 
 
 
 
 
765
  }
766
 
767
+ /* Product Modal */
768
+ .product-modal {
769
  position: fixed;
770
  inset: 0;
771
+ z-index: 300;
772
+ display: flex;
773
+ align-items: center;
774
+ justify-content: center;
775
+ padding: 1rem;
776
+ opacity: 0;
777
+ visibility: hidden;
778
+ transition: all 0.3s ease;
779
+ }
780
+
781
+ .product-modal.open {
782
+ opacity: 1;
783
+ visibility: visible;
784
  }
785
 
786
+ .product-modal-overlay {
787
+ position: absolute;
788
+ inset: 0;
789
+ background: rgba(0, 0, 0, 0.8);
790
+ }
791
 
792
+ .product-modal-content {
 
 
 
 
793
  position: relative;
794
+ background: var(--bg-secondary);
795
+ border-radius: 20px;
796
+ max-width: 900px;
797
+ width: 100%;
798
  max-height: 90vh;
799
+ overflow: hidden;
800
+ display: flex;
801
+ flex-direction: column;
802
+ transform: scale(0.9);
803
+ transition: transform 0.3s ease;
804
  }
805
 
806
+ .product-modal.open .product-modal-content {
807
+ transform: scale(1);
808
+ }
809
 
810
+ @media (min-width: 768px) {
811
+ .product-modal-content {
812
+ flex-direction: row;
813
+ }
 
814
  }
 
815
 
816
+ .product-modal-image {
817
+ flex: 1;
818
+ aspect-ratio: 1;
819
+ background: var(--bg-card);
820
+ position: relative;
 
 
 
 
 
 
 
821
  }
 
822
 
823
+ .product-modal-image img {
824
  width: 100%;
825
+ height: 100%;
826
+ object-fit: cover;
827
+ }
828
+
829
+ .product-modal-close {
830
+ position: absolute;
831
+ top: 1rem;
832
+ left: 1rem;
833
+ width: 40px;
834
+ height: 40px;
835
+ border-radius: 50%;
836
+ background: rgba(0, 0, 0, 0.5);
837
+ backdrop-filter: blur(10px);
838
  border: none;
839
+ color: white;
 
 
840
  cursor: pointer;
841
+ display: flex;
842
+ align-items: center;
843
+ justify-content: center;
844
+ transition: all 0.3s ease;
845
  }
 
 
846
 
847
+ .product-modal-close:hover {
848
+ background: var(--accent);
849
+ }
850
+
851
+ .product-modal-details {
852
+ flex: 1;
853
+ padding: 1.5rem;
854
+ overflow-y: auto;
855
+ }
856
+
857
+ .product-modal-title {
858
+ font-size: 1.25rem;
859
+ font-weight: 700;
860
+ margin-bottom: 0.5rem;
861
+ }
862
+
863
+ .product-modal-price {
864
+ font-size: 1.5rem;
865
+ font-weight: 800;
866
+ color: var(--accent);
867
+ margin-bottom: 1rem;
868
+ }
869
+
870
+ .product-modal-description {
871
+ color: var(--text-secondary);
872
+ font-size: 0.9rem;
873
+ line-height: 1.7;
874
+ margin-bottom: 1.5rem;
875
+ }
876
+
877
+ .product-modal-actions {
878
+ display: flex;
879
+ gap: 0.75rem;
880
+ }
881
+
882
+ .quantity-selector {
883
+ display: flex;
884
+ align-items: center;
885
+ gap: 0.75rem;
886
+ margin-bottom: 1rem;
887
+ }
888
+
889
+ .quantity-btn {
890
+ width: 36px;
891
+ height: 36px;
892
+ border-radius: 8px;
893
+ background: var(--bg-card);
894
  border: 1px solid var(--border);
895
+ color: var(--text-primary);
 
 
896
  cursor: pointer;
897
+ display: flex;
898
+ align-items: center;
899
+ justify-content: center;
900
+ font-size: 1.25rem;
901
+ transition: all 0.3s ease;
902
  }
 
903
 
904
+ .quantity-btn:hover {
905
+ background: var(--accent);
906
+ color: var(--bg-primary);
907
+ }
908
+
909
+ .quantity-value {
910
+ font-size: 1.125rem;
911
+ font-weight: 600;
912
+ min-width: 30px;
913
+ text-align: center;
914
+ }
915
+
916
+ /* Story Viewer */
917
+ .story-viewer {
918
  position: fixed;
919
+ inset: 0;
920
+ z-index: 400;
921
+ background: black;
 
922
  display: flex;
923
+ align-items: center;
924
+ justify-content: center;
925
+ opacity: 0;
926
+ visibility: hidden;
927
+ transition: all 0.3s ease;
928
  }
929
 
930
+ .story-viewer.open {
931
+ opacity: 1;
932
+ visibility: visible;
 
 
 
 
 
 
 
 
 
933
  }
934
 
935
+ .story-viewer-content {
936
+ position: relative;
937
+ width: 100%;
938
+ max-width: 400px;
939
+ height: 100%;
940
+ max-height: 700px;
941
+ }
942
 
943
+ .story-viewer-image {
944
+ width: 100%;
945
+ height: 100%;
946
+ object-fit: cover;
947
+ border-radius: 20px;
948
+ }
949
 
950
+ .story-progress {
951
+ position: absolute;
952
+ top: 1rem;
953
+ left: 1rem;
954
+ right: 1rem;
955
+ height: 3px;
956
+ background: rgba(255, 255, 255, 0.3);
957
+ border-radius: 3px;
958
  overflow: hidden;
959
+ }
960
+
961
+ .story-progress-bar {
962
+ height: 100%;
963
+ background: white;
964
+ width: 0%;
965
+ transition: width 0.1s linear;
966
+ }
967
+
968
+ .story-viewer-close {
969
+ position: absolute;
970
+ top: 2rem;
971
+ left: 1rem;
972
+ width: 36px;
973
+ height: 36px;
974
+ border-radius: 50%;
975
+ background: rgba(0, 0, 0, 0.3);
976
+ border: none;
977
+ color: white;
978
  cursor: pointer;
979
+ display: flex;
980
+ align-items: center;
981
+ justify-content: center;
982
+ }
983
+
984
+ .story-viewer-info {
985
+ position: absolute;
986
+ bottom: 2rem;
987
+ left: 1rem;
988
+ right: 1rem;
989
+ color: white;
990
+ }
991
+
992
+ .story-viewer-title {
993
+ font-size: 1.125rem;
994
+ font-weight: 700;
995
+ margin-bottom: 0.25rem;
996
+ }
997
+
998
+ .story-viewer-time {
999
+ font-size: 0.8rem;
1000
+ opacity: 0.7;
1001
+ }
1002
+
1003
+ /* Animations */
1004
+ .fade-in {
1005
+ animation: fadeIn 0.6s ease forwards;
1006
+ }
1007
+
1008
+ .slide-up {
1009
+ animation: slideUp 0.6s ease forwards;
1010
+ }
1011
+
1012
+ @keyframes slideUp {
1013
+ from { opacity: 0; transform: translateY(30px); }
1014
+ to { opacity: 1; transform: translateY(0); }
1015
+ }
1016
+
1017
+ .stagger-1 { animation-delay: 0.1s; }
1018
+ .stagger-2 { animation-delay: 0.2s; }
1019
+ .stagger-3 { animation-delay: 0.3s; }
1020
+ .stagger-4 { animation-delay: 0.4s; }
1021
+ .stagger-5 { animation-delay: 0.5s; }
1022
+
1023
+ /* Footer */
1024
+ .footer {
1025
+ text-align: center;
1026
+ padding: 2rem;
1027
+ color: var(--text-secondary);
1028
+ font-size: 0.8rem;
1029
+ }
1030
+
1031
+ .footer a {
1032
+ color: var(--accent);
1033
+ text-decoration: none;
1034
  }
1035
+
1036
+ /* Reduced Motion */
1037
+ @media (prefers-reduced-motion: reduce) {
1038
+ *, *::before, *::after {
1039
+ animation-duration: 0.01ms !important;
1040
+ animation-iteration-count: 1 !important;
1041
+ transition-duration: 0.01ms !important;
1042
+ }
1043
+ }
1044
+
1045
+ /* Custom Scrollbar */
1046
+ ::-webkit-scrollbar {
1047
+ width: 8px;
1048
  }
 
1049
 
1050
+ ::-webkit-scrollbar-track {
1051
+ background: var(--bg-primary);
1052
+ }
1053
+
1054
+ ::-webkit-scrollbar-thumb {
1055
+ background: var(--border);
1056
+ border-radius: 4px;
1057
+ }
1058
+
1059
+ ::-webkit-scrollbar-thumb:hover {
1060
+ background: var(--accent);
1061
+ }
1062
  </style>
1063
  </head>
 
1064
  <body>
1065
+ <!-- Background Pattern -->
1066
+ <div class="bg-pattern">
1067
+ <div class="bg-orb bg-orb-1"></div>
1068
+ <div class="bg-orb bg-orb-2"></div>
1069
+ <div class="bg-orb bg-orb-3"></div>
1070
+ </div>
1071
 
1072
  <!-- Header -->
1073
+ <header class="header">
1074
+ <div class="header-content">
1075
+ <div class="logo">فروشگاه من</div>
1076
+ <div class="header-actions">
1077
+ <button class="icon-btn" aria-label="جستجو">
1078
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
1079
+ <circle cx="11" cy="11" r="8"></circle>
1080
+ <path d="m21 21-4.3-4.3"></path>
1081
+ </svg>
1082
+ </button>
1083
+ <button class="icon-btn" aria-label="سبد خرید">
1084
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
1085
+ <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path>
1086
+ <line x1="3" y1="6" x2="21" y2="6"></line>
1087
+ <path d="M16 10a4 4 0 0 1-8 0"></path>
1088
+ </svg>
1089
+ </button>
1090
+ <button class="icon-btn" id="settingsBtn" aria-label="تنظیمات">
1091
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
1092
+ <line x1="4" y1="21" x2="4" y2="14"></line>
1093
+ <line x1="4" y1="10" x2="4" y2="3"></line>
1094
+ <line x1="12" y1="21" x2="12" y2="12"></line>
1095
+ <line x1="12" y1="8" x2="12" y2="3"></line>
1096
+ <line x1="20" y1="21" x2="20" y2="16"></line>
1097
+ <line x1="20" y1="12" x2="20" y2="3"></line>
1098
+ <line x1="1" y1="14" x2="7" y2="14"></line>
1099
+ <line x1="9" y1="8" x2="15" y2="8"></line>
1100
+ <line x1="17" y1="16" x2="23" y2="16"></line>
1101
+ </svg>
1102
+ </button>
1103
  </div>
1104
  </div>
1105
  </header>
1106
 
1107
  <!-- Main Content -->
1108
+ <main class="main-content">
1109
+ <!-- Profile Section -->
1110
+ <section class="profile-section">
1111
+ <div class="profile-image-container fade-in">
1112
+ <div class="profile-image">
1113
+ <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=200&h=200&fit=crop&crop=face" alt="تصویر پروفایل">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1114
  </div>
1115
+ <div class="profile-badge">
1116
+ <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
1117
+ <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
1118
+ </svg>
 
 
 
 
 
 
 
1119
  </div>
 
 
 
1120
  </div>
1121
+
1122
+ <div class="profile-info">
1123
+ <h1 class="profile-name slide-up stagger-1">سارا احمدی</h1>
1124
+ <p class="profile-username slide-up stagger-2">@sara.ahmadi.shop</p>
1125
+ <p class="profile-bio slide-up stagger-3">فروشگاه آنلاین پوشاک و اکسسوری | ارسال به سراسر کشور | ضمانت اصالت کالا | پشتیبانی ۲۴ ساعته</p>
1126
+
1127
+ <div class="profile-stats slide-up stagger-4">
1128
+ <div class="stat-item">
1129
+ <span class="stat-number" data-count="156">0</span>
1130
+ <span class="stat-label">محصول</span>
1131
+ </div>
1132
+ <div class="stat-item">
1133
+ <span class="stat-number" data-count="12400">0</span>
1134
+ <span class="stat-label">دنبال‌کننده</span>
1135
+ </div>
1136
+ <div class="stat-item">
1137
+ <span class="stat-number" data-count="89">0</span>
1138
+ <span class="stat-label">دنبال‌شونده</span>
1139
+ </div>
1140
  </div>
1141
+
1142
+ <div class="profile-actions slide-up stagger-5">
1143
+ <button class="btn btn-primary">دنبال کردن</button>
1144
+ <button class="btn btn-secondary">پیام</button>
1145
+ <button class="btn btn-secondary">اشتراک‌گذاری</button>
1146
  </div>
1147
  </div>
 
 
 
 
1148
  </section>
1149
 
1150
+ <!-- Stories Highlights -->
1151
+ <section class="stories-section">
1152
+ <div class="stories-container" id="storiesContainer">
1153
+ <!-- Stories will be rendered here -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1154
  </div>
1155
+ </section>
 
 
1156
 
1157
+ <!-- Tabs Navigation -->
1158
+ <nav class="tabs-nav">
1159
+ <button class="tab-btn active" data-tab="products">
1160
+ <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
1161
+ <rect x="3" y="3" width="7" height="7"></rect>
1162
+ <rect x="14" y="3" width="7" height="7"></rect>
1163
+ <rect x="14" y="14" width="7" height="7"></rect>
1164
+ <rect x="3" y="14" width="7" height="7"></rect>
1165
+ </svg>
1166
+ محصولات
1167
+ </button>
1168
+ <button class="tab-btn" data-tab="videos">
1169
+ <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
1170
+ <polygon points="5 3 19 12 5 21 5 3"></polygon>
1171
+ </svg>
1172
+ ویدیوها
1173
+ </button>
1174
+ <button class="tab-btn" data-tab="stories">
1175
+ <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
1176
+ <circle cx="12" cy="12" r="10"></circle>
1177
+ <polygon points="10 8 16 12 10 16 10 8"></polygon>
1178
+ </svg>
1179
+ استوری‌ها
1180
+ </button>
1181
+ </nav>
1182
+
1183
+ <!-- Products Tab -->
1184
+ <div class="tab-content active" id="products-tab">
1185
+ <div class="products-grid" id="productsGrid">
1186
+ <!-- Products will be rendered here -->
1187
  </div>
1188
  </div>
 
1189
 
1190
+ <!-- Videos Tab -->
1191
+ <div class="tab-content" id="videos-tab">
1192
+ <div class="videos-grid" id="videosGrid">
1193
+ <!-- Videos will be rendered here -->
 
 
 
 
1194
  </div>
 
 
 
 
 
1195
  </div>
 
1196
 
1197
+ <!-- Stories Tab -->
1198
+ <div class="tab-content" id="stories-tab">
1199
+ <div class="stories-page">
1200
+ <div class="stories-grid" id="storiesGrid">
1201
+ <!-- Stories will be rendered here -->
1202
+ </div>
 
 
 
 
 
 
1203
  </div>
1204
  </div>
 
1205
 
1206
+ <!-- Footer -->
1207
+ <footer class="footer">
1208
+ <p>Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a></p>
1209
+ </footer>
1210
+ </main>
1211
+
1212
+ <!-- Settings Menu -->
1213
+ <div class="settings-overlay" id="settingsOverlay"></div>
1214
+ <aside class="settings-menu" id="settingsMenu">
1215
+ <div class="settings-header">
1216
+ <h2 class="settings-title">تنظیمات</h2>
1217
+ <button class="settings-close" id="settingsClose" aria-label="بستن">
1218
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
1219
+ <line x1="18" y1="6" x2="6" y2="18"></line>
1220
+ <line x1="6" y1="6" x2="18" y2="18"></line>
1221
+ </svg>
1222
+ </button>
1223
+ </div>
1224
+ <div class="settings-content">
1225
+ <div class="settings-section">
1226
+ <h3 class="settings-section-title">حساب کاربری</h3>
1227
+ <button class="settings-item">
1228
+ <div class="settings-item-icon">
1229
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
1230
+ <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
1231
+ <circle cx="12" cy="7" r="4"></circle>
1232
+ </svg>
1233
+ </div>
1234
+ ویرایش پروفایل
1235
+ </button>
1236
+ <button class="settings-item">
1237
+ <div class="settings-item-icon">
1238
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
1239
+ <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
1240
+ <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
1241
+ </svg>
1242
+ </div>
1243
+ امنیت و رمز عبور
1244
+ </button>
1245
+ <button class="settings-item">
1246
+ <div class="settings-item-icon">
1247
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
1248
+ <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
1249
+ <polyline points="22,6 12,13 2,6"></polyline>
1250
+ </svg>
1251
+ </div>
1252
+ ایمیل و تماس
1253
+ </button>
1254
+ </div>
1255
 
1256
+ <div class="settings-section">
1257
+ <h3 class="settings-section-title">فروشگاه</h3>
1258
+ <button class="settings-item">
1259
+ <div class="settings-item-icon">
1260
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
1261
+ <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path>
1262
+ <line x1="3" y1="6" x2="21" y2="6"></line>
1263
+ <path d="M16 10a4 4 0 0 1-8 0"></path>
1264
+ </svg>
1265
+ </div>
1266
+ مدیریت محصولات
1267
+ </button>
1268
+ <button class="settings-item">
1269
+ <div class="settings-item-icon">
1270
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
1271
+ <line x1="12" y1="1" x2="12" y2="23"></line>
1272
+ <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
1273
+ </svg>
1274
+ </div>
1275
+ قیمت‌گذاری
1276
+ </button>
1277
+ <button class="settings-item">
1278
+ <div class="settings-item-icon">
1279
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
1280
+ <rect x="1" y="3" width="15" height="13"></rect>
1281
+ <polygon points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon>
1282
+ <circle cx="5.5" cy="18.5" r="2.5"></circle>
1283
+ <circle cx="18.5" cy="18.5" r="2.5"></circle>
1284
+ </svg>
1285
+ </div>
1286
+ روش‌های ارسال
1287
+ </button>
1288
+ <button class="settings-item">
1289
+ <div class="settings-item-icon">
1290
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
1291
+ <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
1292
+ <polyline points="14 2 14 8 20 8"></polyline>
1293
+ <line x1="16" y1="13" x2="8" y2="13"></line>
1294
+ <line x1="16" y1="17" x2="8" y2