Milad56902857 commited on
Commit
4643e5c
·
verified ·
1 Parent(s): f4acae9

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +993 -1293
index.html CHANGED
@@ -1,1308 +1,1008 @@
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">
7
- <title>پنل کاربری مدرن لوازم خانگی</title>
8
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
- <style>
10
- * {
11
- margin: 0;
12
- padding: 0;
13
- box-sizing: border-box;
14
- }
15
-
16
- :root {
17
- --primary: #6366f1;
18
- --primary-dark: #4f46e5;
19
- --secondary: #10b981;
20
- --danger: #ef4444;
21
- --warning: #f59e0b;
22
- --dark: #1f2937;
23
- --gray: #6b7280;
24
- --light: #f3f4f6;
25
- --white: #ffffff;
26
- --shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
27
- --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
28
- --gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
29
- }
30
-
31
- body {
32
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
33
- background: var(--gradient);
34
- min-height: 100vh;
35
- direction: rtl;
36
- position: relative;
37
- }
38
-
39
- body.loading::before {
40
- content: '';
41
- position: fixed;
42
- top: 0;
43
- left: 0;
44
- right: 0;
45
- bottom: 0;
46
- background: rgba(255, 255, 255, 0.8);
47
- z-index: 9999;
48
- display: flex;
49
- align-items: center;
50
- justify-content: center;
51
- }
52
-
53
- body.loading::after {
54
- content: '';
55
- position: fixed;
56
- top: 50%;
57
- left: 50%;
58
- transform: translate(-50%, -50%);
59
- width: 50px;
60
- height: 50px;
61
- border: 4px solid var(--light);
62
- border-top-color: var(--primary);
63
- border-radius: 50%;
64
- animation: spin 1s linear infinite;
65
- z-index: 10000;
66
- }
67
-
68
- .container {
69
- max-width: 1400px;
70
- margin: 0 auto;
71
- padding: 20px;
72
- }
73
-
74
- /* Header */
75
- .header {
76
- background: var(--white);
77
- border-radius: 20px;
78
- padding: 25px 35px;
79
- margin-bottom: 30px;
80
- box-shadow: var(--shadow-lg);
81
- display: flex;
82
- justify-content: space-between;
83
- align-items: center;
84
- flex-wrap: wrap;
85
- gap: 20px;
86
- animation: slideDown 0.5s ease;
87
- position: relative;
88
- overflow: hidden;
89
- }
90
-
91
- .header::before {
92
- content: '';
93
- position: absolute;
94
- top: 0;
95
- left: -100%;
96
- width: 100%;
97
- height: 100%;
98
- background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
99
- animation: shimmer 3s infinite;
100
- }
101
-
102
- .logo {
103
- display: flex;
104
- align-items: center;
105
- gap: 15px;
106
- font-size: 26px;
107
- font-weight: bold;
108
- color: var(--primary);
109
- position: relative;
110
- z-index: 1;
111
- }
112
-
113
- .logo i {
114
- font-size: 35px;
115
- animation: float 3s ease-in-out infinite;
116
- }
117
-
118
- .user-info {
119
- display: flex;
120
- align-items: center;
121
- gap: 25px;
122
- position: relative;
123
- z-index: 1;
124
- }
125
-
126
- .search-box {
127
- position: relative;
128
- display: flex;
129
- align-items: center;
130
- }
131
-
132
- .search-box input {
133
- padding: 10px 40px 10px 15px;
134
- border: 2px solid var(--light);
135
- border-radius: 25px;
136
- width: 300px;
137
- transition: all 0.3s;
138
- font-size: 14px;
139
- }
140
-
141
- .search-box input:focus {
142
- outline: none;
143
- border-color: var(--primary);
144
- width: 350px;
145
- box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
146
- }
147
-
148
- .search-box i {
149
- position: absolute;
150
- left: 15px;
151
- color: var(--gray);
152
- }
153
-
154
- .notification-badge {
155
- position: relative;
156
- cursor: pointer;
157
- font-size: 24px;
158
- color: var(--gray);
159
- transition: all 0.3s;
160
- padding: 10px;
161
- border-radius: 50%;
162
- }
163
-
164
- .notification-badge:hover {
165
- color: var(--primary);
166
- background: var(--light);
167
- transform: scale(1.1);
168
- }
169
-
170
- .notification-badge .badge {
171
- position: absolute;
172
- top: 5px;
173
- left: 5px;
174
- background: var(--danger);
175
- color: white;
176
- border-radius: 50%;
177
- width: 20px;
178
- height: 20px;
179
- display: flex;
180
- align-items: center;
181
- justify-content: center;
182
- font-size: 11px;
183
- font-weight: bold;
184
- animation: pulse 2s infinite;
185
- }
186
-
187
- .user-avatar {
188
- width: 50px;
189
- height: 50px;
190
- border-radius: 50%;
191
- background: linear-gradient(135deg, var(--primary), var(--secondary));
192
- display: flex;
193
- align-items: center;
194
- justify-content: center;
195
- color: white;
196
- font-weight: bold;
197
- cursor: pointer;
198
- transition: all 0.3s;
199
- position: relative;
200
- }
201
-
202
- .user-avatar:hover {
203
- transform: scale(1.1) rotate(5deg);
204
- box-shadow: 0 5px 15px rgba(99, 102, 241, 0.4);
205
- }
206
-
207
- /* Main Layout */
208
- .main-layout {
209
- display: grid;
210
- grid-template-columns: 280px 1fr;
211
- gap: 30px;
212
- animation: fadeIn 0.8s ease;
213
- }
214
-
215
- /* Sidebar */
216
- .sidebar {
217
- background: var(--white);
218
- border-radius: 20px;
219
- padding: 30px 20px;
220
- box-shadow: var(--shadow-lg);
221
- height: fit-content;
222
- position: sticky;
223
- top: 20px;
224
- transition: all 0.3s;
225
- }
226
-
227
- .sidebar.collapsed {
228
- width: 70px;
229
- padding: 30px 10px;
230
- }
231
-
232
- .menu-item {
233
- display: flex;
234
- align-items: center;
235
- gap: 15px;
236
- padding: 15px 20px;
237
- margin-bottom: 10px;
238
- border-radius: 12px;
239
- cursor: pointer;
240
- transition: all 0.3s;
241
- color: var(--dark);
242
- font-weight: 500;
243
- position: relative;
244
- overflow: hidden;
245
- }
246
-
247
- .menu-item::before {
248
- content: '';
249
- position: absolute;
250
- top: 0;
251
- right: -100%;
252
- width: 100%;
253
- height: 100%;
254
- background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.1), transparent);
255
- transition: right 0.5s;
256
- }
257
-
258
- .menu-item:hover::before {
259
- right: 0;
260
- }
261
-
262
- .menu-item:hover {
263
- background: var(--light);
264
- transform: translateX(-5px);
265
- }
266
-
267
- .menu-item.active {
268
- background: linear-gradient(135deg, var(--primary), var(--primary-dark));
269
- color: white;
270
- box-shadow: 0 5px 15px rgba(99, 102, 241, 0.3);
271
- }
272
-
273
- .menu-item i {
274
- width: 24px;
275
- text-align: center;
276
- font-size: 18px;
277
- }
278
-
279
- .menu-item span {
280
- transition: opacity 0.3s;
281
- }
282
-
283
- .sidebar.collapsed .menu-item span {
284
- opacity: 0;
285
- width: 0;
286
- }
287
-
288
- /* Content Area */
289
- .content {
290
- background: var(--white);
291
- border-radius: 20px;
292
- padding: 35px;
293
- box-shadow: var(--shadow-lg);
294
- min-height: 600px;
295
- position: relative;
296
- overflow: hidden;
297
- }
298
-
299
- .content-header {
300
- display: flex;
301
- justify-content: space-between;
302
- align-items: center;
303
- margin-bottom: 30px;
304
- padding-bottom: 20px;
305
- border-bottom: 2px solid var(--light);
306
- }
307
-
308
- .content-title {
309
- font-size: 28px;
310
- color: var(--dark);
311
- display: flex;
312
- align-items: center;
313
- gap: 15px;
314
- }
315
-
316
- .content-title i {
317
- color: var(--primary);
318
- }
319
-
320
- .content-actions {
321
- display: flex;
322
- gap: 10px;
323
- }
324
-
325
- .content-section {
326
- display: none;
327
- animation: fadeInUp 0.5s ease;
328
- min-height: 400px;
329
- }
330
-
331
- .content-section.active {
332
- display: block;
333
- }
334
-
335
- /* Dashboard Cards */
336
- .stats-grid {
337
- display: grid;
338
- grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
339
- gap: 25px;
340
- margin-bottom: 40px;
341
- }
342
-
343
- .stat-card {
344
- background: linear-gradient(135deg, var(--primary), var(--primary-dark));
345
- border-radius: 20px;
346
- padding: 30px;
347
- color: white;
348
- position: relative;
349
- overflow: hidden;
350
- transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
351
- cursor: pointer;
352
- }
353
-
354
- .stat-card:hover {
355
- transform: translateY(-10px) scale(1.02);
356
- box-shadow: 0 20px 40px rgba(99, 102, 241, 0.4);
357
- }
358
-
359
- .stat-card::before {
360
- content: '';
361
- position: absolute;
362
- top: -50%;
363
- right: -50%;
364
- width: 200%;
365
- height: 200%;
366
- background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
367
- animation: pulse 3s ease-in-out infinite;
368
- }
369
-
370
- .stat-card.green {
371
- background: linear-gradient(135deg, var(--secondary), #059669);
372
- }
373
-
374
- .stat-card.orange {
375
- background: linear-gradient(135deg, var(--warning), #d97706);
376
- }
377
-
378
- .stat-card.red {
379
- background: linear-gradient(135deg, var(--danger), #dc2626);
380
- }
381
-
382
- .stat-value {
383
- font-size: 42px;
384
- font-weight: bold;
385
- margin-bottom: 8px;
386
- animation: countUp 1s ease-out;
387
- }
388
-
389
- .stat-label {
390
- font-size: 15px;
391
- opacity: 0.95;
392
- }
393
-
394
- .stat-icon {
395
- position: absolute;
396
- left: 25px;
397
- top: 50%;
398
- transform: translateY(-50%);
399
- font-size: 60px;
400
- opacity: 0.2;
401
- animation: float 3s ease-in-out infinite;
402
- }
403
-
404
- /* Products Grid */
405
- .products-toolbar {
406
- display: flex;
407
- justify-content: space-between;
408
- align-items: center;
409
- margin-bottom: 25px;
410
- flex-wrap: wrap;
411
- gap: 15px;
412
- }
413
-
414
- .filter-group {
415
- display: flex;
416
- gap: 10px;
417
- align-items: center;
418
- }
419
-
420
- .filter-group select {
421
- padding: 10px 15px;
422
- border: 2px solid var(--light);
423
- border-radius: 10px;
424
- font-size: 14px;
425
- cursor: pointer;
426
- transition: all 0.3s;
427
- }
428
-
429
- .filter-group select:focus {
430
- outline: none;
431
- border-color: var(--primary);
432
- }
433
-
434
- .products-grid {
435
- display: grid;
436
- grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
437
- gap: 25px;
438
- margin-top: 30px;
439
- }
440
-
441
- .product-card {
442
- background: var(--light);
443
- border-radius: 20px;
444
- overflow: hidden;
445
- transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
446
- cursor: pointer;
447
- position: relative;
448
- }
449
-
450
- .product-card:hover {
451
- transform: translateY(-15px) scale(1.02);
452
- box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
453
- }
454
-
455
- .product-badge {
456
- position: absolute;
457
- top: 15px;
458
- right: 15px;
459
- background: var(--danger);
460
- color: white;
461
- padding: 5px 12px;
462
- border-radius: 20px;
463
- font-size: 12px;
464
- font-weight: bold;
465
- z-index: 1;
466
- }
467
-
468
- .product-image {
469
- width: 100%;
470
- height: 220px;
471
- background: linear-gradient(135deg, #667eea, #764ba2);
472
- display: flex;
473
- align-items: center;
474
- justify-content: center;
475
- font-size: 70px;
476
- color: white;
477
- position: relative;
478
- overflow: hidden;
479
- }
480
-
481
- .product-image::after {
482
- content: '';
483
- position: absolute;
484
- top: -50%;
485
- left: -50%;
486
- width: 200%;
487
- height: 200%;
488
- background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
489
- animation: pulse 4s ease-in-out infinite;
490
- }
491
-
492
- .product-info {
493
- padding: 25px;
494
- }
495
-
496
- .product-name {
497
- font-size: 18px;
498
- font-weight: bold;
499
- color: var(--dark);
500
- margin-bottom: 10px;
501
- display: -webkit-box;
502
- -webkit-line-clamp: 2;
503
- -webkit-box-orient: vertical;
504
- overflow: hidden;
505
- }
506
-
507
- .product-price {
508
- font-size: 26px;
509
- color: var(--primary);
510
- font-weight: bold;
511
- margin-bottom: 20px;
512
- }
513
-
514
- .product-rating {
515
- display: flex;
516
- align-items: center;
517
- gap: 8px;
518
- margin-bottom: 15px;
519
- }
520
-
521
- .product-rating i {
522
- color: #fbbf24;
523
- font-size: 14px;
524
- }
525
-
526
- .product-actions {
527
- display: flex;
528
- gap: 10px;
529
- }
530
-
531
- .btn {
532
- padding: 12px 24px;
533
- border: none;
534
- border-radius: 12px;
535
- cursor: pointer;
536
- font-weight: 600;
537
- transition: all 0.3s;
538
- font-size: 14px;
539
- display: inline-flex;
540
- align-items: center;
541
- gap: 8px;
542
- position: relative;
543
- overflow: hidden;
544
- }
545
-
546
- .btn::before {
547
- content: '';
548
- position: absolute;
549
- top: 50%;
550
- left: 50%;
551
- width: 0;
552
- height: 0;
553
- border-radius: 50%;
554
- background: rgba(255, 255, 255, 0.3);
555
- transform: translate(-50%, -50%);
556
- transition: width 0.6s, height 0.6s;
557
- }
558
-
559
- .btn:active::before {
560
- width: 300px;
561
- height: 300px;
562
- }
563
-
564
- .btn-primary {
565
- background: linear-gradient(135deg, var(--primary), var(--primary-dark));
566
- color: white;
567
- flex: 1;
568
- }
569
-
570
- .btn-primary:hover {
571
- transform: translateY(-2px);
572
- box-shadow: 0 10px 20px rgba(99, 102, 241, 0.3);
573
- }
574
-
575
- .btn-secondary {
576
- background: var(--gray);
577
- color: white;
578
- padding: 12px;
579
- }
580
-
581
- .btn-secondary:hover {
582
- background: var(--dark);
583
- transform: scale(1.1);
584
- }
585
-
586
- .btn-secondary.active i {
587
- color: var(--danger);
588
- }
589
-
590
- /* Orders Table */
591
- .orders-table {
592
- width: 100%;
593
- border-collapse: collapse;
594
- margin-top: 20px;
595
- background: var(--white);
596
- border-radius: 15px;
597
- overflow: hidden;
598
- box-shadow: var(--shadow);
599
- }
600
-
601
- .orders-table thead {
602
- background: linear-gradient(135deg, var(--primary), var(--primary-dark));
603
- color: white;
604
- }
605
-
606
- .orders-table th {
607
- padding: 20px;
608
- text-align: right;
609
- font-weight: 600;
610
- font-size: 14px;
611
- text-transform: uppercase;
612
- letter-spacing: 0.5px;
613
- }
614
-
615
- .orders-table td {
616
- padding: 20px;
617
- border-bottom: 1px solid var(--light);
618
- font-size: 14px;
619
- }
620
-
621
- .orders-table tbody tr {
622
- transition: all 0.3s;
623
- cursor: pointer;
624
- }
625
-
626
- .orders-table tbody tr:hover {
627
- background: #f9fafb;
628
- transform: scale(1.01);
629
- box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
630
- }
631
-
632
- .status-badge {
633
- display: inline-block;
634
- padding: 8px 16px;
635
- border-radius: 20px;
636
- font-size: 12px;
637
- font-weight: 600;
638
- text-transform: uppercase;
639
- letter-spacing: 0.5px;
640
- }
641
-
642
- .status-pending {
643
- background: linear-gradient(135deg, #fef3c7, #fde68a);
644
- color: #92400e;
645
- }
646
-
647
- .status-processing {
648
- background: linear-gradient(135deg, #dbeafe, #bfdbfe);
649
- color: #1e40af;
650
- }
651
-
652
- .status-completed {
653
- background: linear-gradient(135deg, #d1fae5, #a7f3d0);
654
- color: #065f46;
655
- }
656
-
657
- .status-cancelled {
658
- background: linear-gradient(135deg, #fee2e2, #fecaca);
659
- color: #991b1b;
660
- }
661
-
662
- /* Service Requests */
663
- .service-card {
664
- background: var(--light);
665
- border-radius: 15px;
666
- padding: 25px;
667
- margin-bottom: 20px;
668
- display: flex;
669
- justify-content: space-between;
670
- align-items: center;
671
- transition: all 0.3s;
672
- cursor: pointer;
673
- position: relative;
674
- overflow: hidden;
675
- }
676
-
677
- .service-card::before {
678
- content: '';
679
- position: absolute;
680
- top: 0;
681
- right: -100%;
682
- width: 100%;
683
- height: 100%;
684
- background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.05), transparent);
685
- transition: right 0.5s;
686
- }
687
-
688
- .service-card:hover::before {
689
- right: 0;
690
- }
691
-
692
- .service-card:hover {
693
- transform: translateX(-10px);
694
- box-shadow: var(--shadow-lg);
695
- }
696
-
697
- .service-info {
698
- flex: 1;
699
- }
700
-
701
- .service-title {
702
- font-size: 18px;
703
- font-weight: bold;
704
- color: var(--dark);
705
- margin-bottom: 8px;
706
- }
707
-
708
- .service-date {
709
- color: var(--gray);
710
- font-size: 14px;
711
- }
712
-
713
- .service-status {
714
- display: inline-block;
715
- padding: 10px 20px;
716
- border-radius: 10px;
717
- font-size: 14px;
718
- font-weight: 600;
719
- }
720
-
721
- /* Forms */
722
- .form-container {
723
- background: var(--light);
724
- border-radius: 20px;
725
- padding: 35px;
726
- margin-top: 30px;
727
- }
728
-
729
- .form-group {
730
- margin-bottom: 25px;
731
- }
732
-
733
- .form-label {
734
- display: block;
735
- margin-bottom: 10px;
736
- font-weight: 600;
737
- color: var(--dark);
738
- font-size: 14px;
739
- }
740
-
741
- .form-control {
742
- width: 100%;
743
- padding: 15px 20px;
744
- border: 2px solid #e5e7eb;
745
- border-radius: 12px;
746
- font-size: 14px;
747
- transition: all 0.3s;
748
- background: white;
749
- }
750
-
751
- .form-control:focus {
752
- outline: none;
753
- border-color: var(--primary);
754
- box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
755
- transform: translateY(-2px);
756
- }
757
-
758
- textarea.form-control {
759
- resize: vertical;
760
- min-height: 140px;
761
- }
762
-
763
- /* Pagination */
764
- .pagination {
765
- display: flex;
766
- justify-content: center;
767
- align-items: center;
768
- gap: 10px;
769
- margin-top: 40px;
770
- }
771
-
772
- .pagination button {
773
- padding: 10px 15px;
774
- border: 2px solid var(--light);
775
- background: white;
776
- border-radius: 10px;
777
- cursor: pointer;
778
- transition: all 0.3s;
779
- font-weight: 500;
780
- }
781
-
782
- .pagination button:hover {
783
- border-color: var(--primary);
784
- color: var(--primary);
785
- transform: translateY(-2px);
786
- }
787
-
788
- .pagination button.active {
789
- background: var(--primary);
790
- color: white;
791
- border-color: var(--primary);
792
- }
793
-
794
- .pagination button:disabled {
795
- opacity: 0.5;
796
- cursor: not-allowed;
797
- }
798
-
799
- /* Modal */
800
- .modal {
801
- display: none;
802
- position: fixed;
803
- top: 0;
804
- left: 0;
805
- right: 0;
806
- bottom: 0;
807
- background: rgba(0, 0, 0, 0.5);
808
- z-index: 1000;
809
- animation: fadeIn 0.3s;
810
- }
811
-
812
- .modal.active {
813
- display: flex;
814
- align-items: center;
815
- justify-content: center;
816
- }
817
-
818
- .modal-content {
819
- background: white;
820
- border-radius: 20px;
821
- padding: 40px;
822
- max-width: 600px;
823
- width: 90%;
824
- max-height: 90vh;
825
- overflow-y: auto;
826
- animation: slideUp 0.3s;
827
- position: relative;
828
- }
829
-
830
- .modal-header {
831
- display: flex;
832
- justify-content: space-between;
833
- align-items: center;
834
- margin-bottom: 30px;
835
- }
836
-
837
- .modal-title {
838
- font-size: 24px;
839
- font-weight: bold;
840
- color: var(--dark);
841
- }
842
-
843
- .modal-close {
844
- background: none;
845
- border: none;
846
- font-size: 28px;
847
- color: var(--gray);
848
- cursor: pointer;
849
- transition: all 0.3s;
850
- }
851
-
852
- .modal-close:hover {
853
- color: var(--danger);
854
- transform: rotate(90deg);
855
- }
856
-
857
- /* Toast Notification */
858
- .toast-container {
859
- position: fixed;
860
- top: 20px;
861
- left: 50%;
862
- transform: translateX(-50%);
863
- z-index: 2000;
864
- display: flex;
865
- flex-direction: column;
866
- gap: 10px;
867
- }
868
-
869
- .toast {
870
- background: white;
871
- padding: 20px 30px;
872
- border-radius: 12px;
873
- box-shadow: var(--shadow-lg);
874
- display: flex;
875
- align-items: center;
876
- gap: 15px;
877
- min-width: 300px;
878
- animation: slideDown 0.3s;
879
- position: relative;
880
- overflow: hidden;
881
- }
882
-
883
- .toast::before {
884
- content: '';
885
- position: absolute;
886
- left: 0;
887
- top: 0;
888
- height: 100%;
889
- width: 4px;
890
- }
891
-
892
- .toast.success::before {
893
- background: var(--secondary);
894
- }
895
-
896
- .toast.error::before {
897
- background: var(--danger);
898
- }
899
-
900
- .toast.warning::before {
901
- background: var(--warning);
902
- }
903
-
904
- .toast.info::before {
905
- background: var(--primary);
906
- }
907
-
908
- .toast i {
909
- font-size: 24px;
910
- }
911
-
912
- .toast.success i {
913
- color: var(--secondary);
914
- }
915
-
916
- .toast.error i {
917
- color: var(--danger);
918
- }
919
-
920
- .toast.warning i {
921
- color: var(--warning);
922
- }
923
-
924
- .toast.info i {
925
- color: var(--primary);
926
- }
927
-
928
- .toast-message {
929
- flex: 1;
930
- font-size: 14px;
931
- color: var(--dark);
932
- }
933
-
934
- .toast-close {
935
- background: none;
936
- border: none;
937
- color: var(--gray);
938
- cursor: pointer;
939
- font-size: 20px;
940
- transition: color 0.3s;
941
- }
942
-
943
- .toast-close:hover {
944
- color: var(--dark);
945
- }
946
-
947
- /* Settings */
948
- .settings-tabs {
949
- display: flex;
950
- gap: 10px;
951
- margin-bottom: 30px;
952
- border-bottom: 2px solid var(--light);
953
- }
954
-
955
- .settings-tab {
956
- padding: 15px 25px;
957
- background: none;
958
- border: none;
959
- border-bottom: 3px solid transparent;
960
- cursor: pointer;
961
- font-weight: 600;
962
- color: var(--gray);
963
- transition: all 0.3s;
964
- }
965
-
966
- .settings-tab:hover {
967
- color: var(--primary);
968
- }
969
-
970
- .settings-tab.active {
971
- color: var(--primary);
972
- border-bottom-color: var(--primary);
973
- }
974
-
975
- .settings-content {
976
- display: none;
977
- animation: fadeIn 0.5s;
978
- }
979
-
980
- .settings-content.active {
981
- display: block;
982
- }
983
-
984
- /* Animations */
985
- @keyframes slideDown {
986
- from {
987
- opacity: 0;
988
- transform: translateY(-30px);
989
- }
990
- to {
991
- opacity: 1;
992
- transform: translateY(0);
993
- }
994
- }
995
-
996
- @keyframes slideUp {
997
- from {
998
- opacity: 0;
999
- transform: translateY(30px);
1000
- }
1001
- to {
1002
- opacity: 1;
1003
- transform: translateY(0);
1004
- }
1005
- }
1006
-
1007
- @keyframes fadeIn {
1008
- from {
1009
- opacity: 0;
1010
- }
1011
- to {
1012
- opacity: 1;
1013
- }
1014
- }
1015
-
1016
- @keyframes fadeInUp {
1017
- from {
1018
- opacity: 0;
1019
- transform: translateY(30px);
1020
- }
1021
- to {
1022
- opacity: 1;
1023
- transform: translateY(0);
1024
- }
1025
- }
1026
-
1027
- @keyframes pulse {
1028
- 0%, 100% {
1029
- transform: scale(1);
1030
- }
1031
- 50% {
1032
- transform: scale(1.1);
1033
- }
1034
- }
1035
-
1036
- @keyframes spin {
1037
- to {
1038
- transform: rotate(360deg);
1039
- }
1040
- }
1041
-
1042
- @keyframes float {
1043
- 0%, 100% {
1044
- transform: translateY(0);
1045
- }
1046
- 50% {
1047
- transform: translateY(-10px);
1048
- }
1049
- }
1050
-
1051
- @keyframes shimmer {
1052
- 0% {
1053
- left: -100%;
1054
- }
1055
- 100% {
1056
- left: 100%;
1057
- }
1058
- }
1059
-
1060
- @keyframes countUp {
1061
- from {
1062
- opacity: 0;
1063
- transform: scale(0.5);
1064
- }
1065
- to {
1066
- opacity: 1;
1067
- transform: scale(1);
1068
- }
1069
- }
1070
-
1071
- /* Responsive Design */
1072
- @media (max-width: 768px) {
1073
- .main-layout {
1074
- grid-template-columns: 1fr;
1075
- }
1076
-
1077
- .sidebar {
1078
- position: fixed;
1079
- top: 0;
1080
- right: -280px;
1081
- width: 280px;
1082
- height: 100vh;
1083
- z-index: 999;
1084
- border-radius: 0;
1085
- transition: right 0.3s;
1086
- }
1087
-
1088
- .sidebar.mobile-open {
1089
- right: 0;
1090
- }
1091
-
1092
- .stats-grid {
1093
- grid-template-columns: 1fr;
1094
- }
1095
-
1096
- .products-grid {
1097
- grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
1098
- }
1099
-
1100
- .search-box input {
1101
- width: 200px;
1102
- }
1103
-
1104
- .search-box input:focus {
1105
- width: 220px;
1106
- }
1107
-
1108
- .header {
1109
- flex-direction: column;
1110
- text-align: center;
1111
- }
1112
-
1113
- .service-card {
1114
- flex-direction: column;
1115
- align-items: flex-start;
1116
- gap: 15px;
1117
- }
1118
-
1119
- .modal-content {
1120
- padding: 25px;
1121
- }
1122
-
1123
- .orders-table {
1124
- font-size: 12px;
1125
- }
1126
-
1127
- .orders-table th,
1128
- .orders-table td {
1129
- padding: 10px;
1130
- }
1131
- }
1132
-
1133
- /* Mobile Menu Toggle */
1134
- .menu-toggle {
1135
- display: none;
1136
- background: var(--primary);
1137
- color: white;
1138
- border: none;
1139
- padding: 12px 15px;
1140
- border-radius: 12px;
1141
- cursor: pointer;
1142
- font-size: 20px;
1143
- transition: all 0.3s;
1144
- }
1145
-
1146
- .menu-toggle:hover {
1147
- background: var(--primary-dark);
1148
- transform: scale(1.05);
1149
- }
1150
-
1151
- @media (max-width: 768px) {
1152
- .menu-toggle {
1153
- display: block;
1154
- }
1155
- }
1156
-
1157
- /* Overlay for mobile menu */
1158
- .overlay {
1159
- display: none;
1160
- position: fixed;
1161
- top: 0;
1162
- left: 0;
1163
- right: 0;
1164
- bottom: 0;
1165
- background: rgba(0, 0, 0, 0.5);
1166
- z-index: 998;
1167
- }
1168
-
1169
- .overlay.active {
1170
- display: block;
1171
- }
1172
- </style>
1173
  </head>
1174
-
1175
  <body>
1176
- <div class="container">
1177
- <!-- Header -->
1178
- <header class="header">
1179
- <div class="logo">
1180
- <i class="fas fa-home"></i>
1181
- <span>لوازم خانگی مدرن</span>
1182
- </div>
1183
- <div class="search-box">
1184
- <input type="text" placeholder="جستجوی محصولات..." id="globalSearch">
1185
- <i class="fas fa-search"></i>
1186
- </div>
1187
- <div class="user-info">
1188
- <div class="notification-badge" onclick="showNotifications()">
1189
- <i class="far fa-bell"></i>
1190
- <span class="badge" id="notificationCount">3</span>
1191
- </div>
1192
- <div class="user-avatar" onclick="showProfile()">
1193
- <i class="fas fa-user"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1194
  </div>
1195
- <button class="menu-toggle" onclick="toggleMobileMenu()">
1196
- <i class="fas fa-bars"></i>
1197
- </button>
1198
- </div>
1199
- <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank"
1200
- style="position: absolute; bottom: 10px; left: 20px; color: inherit; text-decoration: none; opacity: 0.5; font-size: 11px;">
1201
- Built with anycoder
1202
- </a>
1203
  </header>
1204
 
1205
- <!-- Main Layout -->
1206
- <div class="main-layout">
1207
- <!-- Sidebar -->
1208
- <aside class="sidebar" id="sidebar">
1209
- <div class="menu-item active" data-section="dashboard" onclick="navigateTo('dashboard')">
1210
- <i class="fas fa-tachometer-alt"></i>
1211
- <span>داشبورد</span>
1212
  </div>
1213
- <div class="menu-item" data-section="products" onclick="navigateTo('products')">
1214
- <i class="fas fa-shopping-bag"></i>
1215
- <span>محصولات</span>
1216
  </div>
1217
- <div class="menu-item" data-section="orders" onclick="navigateTo('orders')">
1218
- <i class="fas fa-receipt"></i>
1219
- <span>سفارشات</span>
1220
  </div>
1221
- <div class="menu-item" data-section="services" onclick="navigateTo('services')">
1222
- <i class="fas fa-tools"></i>
1223
- <span>خدمات</span>
1224
  </div>
1225
- <div class="menu-item" data-section="support" onclick="navigateTo('support')">
1226
- <i class="fas fa-headset"></i>
1227
- <span>پشتیبانی</span>
1228
  </div>
1229
- <div class="menu-item" data-section="settings" onclick="navigateTo('settings')">
1230
- <i class="fas fa-cog"></i>
1231
- <span>تنظیمات</span>
1232
  </div>
1233
- <div class="menu-item" onclick="logout()">
1234
- <i class="fas fa-sign-out-alt"></i>
1235
- <span>خروج</span>
1236
  </div>
1237
- </aside>
1238
-
1239
- <!-- Content Area -->
1240
- <main class="content">
1241
- <!-- Dynamic Content will be loaded here -->
1242
- <div id="dynamicContent"></div>
1243
- </main>
1244
- </div>
1245
- </div>
1246
-
1247
- <!-- Overlay for mobile menu -->
1248
- <div class="overlay" id="overlay" onclick="closeMobileMenu()"></div>
1249
-
1250
- <!-- Toast Container -->
1251
- <div class="toast-container" id="toastContainer"></div>
1252
-
1253
- <!-- Modal Container -->
1254
- <div class="modal" id="modal">
1255
- <div class="modal-content">
1256
- <div class="modal-header">
1257
- <h3 class="modal-title" id="modalTitle">عنوان</h3>
1258
- <button class="modal-close" onclick="closeModal()">
1259
- <i class="fas fa-times"></i>
1260
- </button>
1261
- </div>
1262
- <div id="modalBody">
1263
- <!-- Modal content will be loaded here -->
1264
- </div>
1265
- </div>
1266
- </div>
1267
-
1268
- <script>
1269
- // State Management
1270
- const state = {
1271
- currentSection: 'dashboard',
1272
- user: {
1273
- name: 'علی رضایی',
1274
- email: 'ali.rezaei@example.com',
1275
- phone: '09123456789',
1276
- avatar: null
1277
- },
1278
- stats: {
1279
- activeOrders: 12,
1280
- purchasedProducts: 48,
1281
- activeServices: 3,
1282
- totalPurchase: 2450000
1283
- },
1284
- products: [],
1285
- orders: [],
1286
- services: [],
1287
- tickets: [],
1288
- cart: [],
1289
- wishlist: [],
1290
- notifications: [
1291
- { id: 1, title: 'سفارش شما ارسال شد', message: 'سفارش #12346 به آدرس شما ارسال گردید', time: '۲ ساعت پیش', read: false },
1292
- { id: 2, title: 'تخفیف ویژه', message: 'تا 30% تخفیف روی محصولات برقی', time: '۵ ساعت پیش', read: false },
1293
- { id: 3, title: 'خدمات شما انجام شد', message: 'درخواست سرویس ماشین لباسشویی انجام شد', time: '۱ روز پیش', read: false }
1294
- ],
1295
- currentPage: {
1296
- products: 1,
1297
- orders: 1
1298
- },
1299
- filters: {
1300
- category: 'all',
1301
- priceRange: 'all',
1302
- sortBy: 'newest'
1303
- }
1304
- };
1305
-
1306
- // Mock Data Generator
1307
- function generateMockData() {
1308
- // Products
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+
8
+ <!-- Font Awesome for icons -->
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+
11
+ <style>
12
+ * {
13
+ margin: 0;
14
+ padding: 0;
15
+ box-sizing: border-box;
16
+ }
17
+
18
+ :root {
19
+ --primary-color: #6366f1;
20
+ --secondary-color: #8b5cf6;
21
+ --accent-color: #ec4899;
22
+ --dark-bg: #0f172a;
23
+ --light-bg: #1e293b;
24
+ --card-bg: #334155;
25
+ --text-primary: #f1f5f9;
26
+ --text-secondary: #94a3b8;
27
+ --success: #10b981;
28
+ --warning: #f59e0b;
29
+ --danger: #ef4444;
30
+ --gradient: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
31
+ --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.3);
32
+ --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.4);
33
+ }
34
+
35
+ body {
36
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
37
+ background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
38
+ color: var(--text-primary);
39
+ min-height: 100vh;
40
+ overflow-x: hidden;
41
+ }
42
+
43
+ /* Animated Background */
44
+ .bg-animation {
45
+ position: fixed;
46
+ width: 100%;
47
+ height: 100%;
48
+ top: 0;
49
+ left: 0;
50
+ z-index: -1;
51
+ opacity: 0.1;
52
+ background-image:
53
+ radial-gradient(circle at 20% 50%, var(--primary-color) 0%, transparent 50%),
54
+ radial-gradient(circle at 80% 80%, var(--secondary-color) 0%, transparent 50%),
55
+ radial-gradient(circle at 40% 20%, var(--accent-color) 0%, transparent 50%);
56
+ animation: bgMove 20s ease infinite;
57
+ }
58
+
59
+ @keyframes bgMove {
60
+ 0%, 100% { transform: translate(0, 0) rotate(0deg); }
61
+ 33% { transform: translate(-20px, -20px) rotate(120deg); }
62
+ 66% { transform: translate(20px, -10px) rotate(240deg); }
63
+ }
64
+
65
+ /* Header */
66
+ header {
67
+ background: rgba(15, 23, 42, 0.9);
68
+ backdrop-filter: blur(10px);
69
+ border-bottom: 1px solid rgba(148, 163, 184, 0.1);
70
+ padding: 1rem 2rem;
71
+ position: sticky;
72
+ top: 0;
73
+ z-index: 1000;
74
+ box-shadow: var(--shadow-lg);
75
+ }
76
+
77
+ .header-content {
78
+ max-width: 1400px;
79
+ margin: 0 auto;
80
+ display: flex;
81
+ justify-content: space-between;
82
+ align-items: center;
83
+ }
84
+
85
+ .logo {
86
+ display: flex;
87
+ align-items: center;
88
+ gap: 1rem;
89
+ font-size: 1.5rem;
90
+ font-weight: bold;
91
+ background: var(--gradient);
92
+ -webkit-background-clip: text;
93
+ -webkit-text-fill-color: transparent;
94
+ }
95
+
96
+ .logo i {
97
+ font-size: 2rem;
98
+ -webkit-text-fill-color: var(--primary-color);
99
+ }
100
+
101
+ .header-actions {
102
+ display: flex;
103
+ gap: 1.5rem;
104
+ align-items: center;
105
+ }
106
+
107
+ .search-box {
108
+ position: relative;
109
+ display: flex;
110
+ align-items: center;
111
+ }
112
+
113
+ .search-box input {
114
+ background: var(--light-bg);
115
+ border: 1px solid rgba(148, 163, 184, 0.2);
116
+ border-radius: 50px;
117
+ padding: 0.5rem 2.5rem 0.5rem 1rem;
118
+ color: var(--text-primary);
119
+ width: 250px;
120
+ transition: all 0.3s ease;
121
+ }
122
+
123
+ .search-box input:focus {
124
+ outline: none;
125
+ border-color: var(--primary-color);
126
+ width: 300px;
127
+ box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
128
+ }
129
+
130
+ .search-box i {
131
+ position: absolute;
132
+ left: 1rem;
133
+ color: var(--text-secondary);
134
+ }
135
+
136
+ .notification-icon {
137
+ position: relative;
138
+ cursor: pointer;
139
+ padding: 0.5rem;
140
+ border-radius: 50%;
141
+ transition: all 0.3s ease;
142
+ }
143
+
144
+ .notification-icon:hover {
145
+ background: var(--light-bg);
146
+ transform: scale(1.1);
147
+ }
148
+
149
+ .notification-badge {
150
+ position: absolute;
151
+ top: 0;
152
+ right: 0;
153
+ background: var(--danger);
154
+ color: white;
155
+ font-size: 0.7rem;
156
+ padding: 0.1rem 0.3rem;
157
+ border-radius: 50px;
158
+ }
159
+
160
+ .user-menu {
161
+ display: flex;
162
+ align-items: center;
163
+ gap: 1rem;
164
+ cursor: pointer;
165
+ padding: 0.5rem 1rem;
166
+ border-radius: 50px;
167
+ transition: all 0.3s ease;
168
+ }
169
+
170
+ .user-menu:hover {
171
+ background: var(--light-bg);
172
+ }
173
+
174
+ .user-avatar {
175
+ width: 40px;
176
+ height: 40px;
177
+ border-radius: 50%;
178
+ background: var(--gradient);
179
+ display: flex;
180
+ align-items: center;
181
+ justify-content: center;
182
+ font-weight: bold;
183
+ }
184
+
185
+ /* Sidebar */
186
+ .sidebar {
187
+ position: fixed;
188
+ right: 0;
189
+ top: 80px;
190
+ bottom: 0;
191
+ width: 280px;
192
+ background: rgba(30, 41, 59, 0.9);
193
+ backdrop-filter: blur(10px);
194
+ border-left: 1px solid rgba(148, 163, 184, 0.1);
195
+ padding: 2rem 1rem;
196
+ overflow-y: auto;
197
+ transition: transform 0.3s ease;
198
+ z-index: 999;
199
+ }
200
+
201
+ .sidebar-item {
202
+ display: flex;
203
+ align-items: center;
204
+ gap: 1rem;
205
+ padding: 1rem;
206
+ margin-bottom: 0.5rem;
207
+ border-radius: 12px;
208
+ cursor: pointer;
209
+ transition: all 0.3s ease;
210
+ position: relative;
211
+ overflow: hidden;
212
+ }
213
+
214
+ .sidebar-item::before {
215
+ content: '';
216
+ position: absolute;
217
+ top: 0;
218
+ right: -100%;
219
+ width: 100%;
220
+ height: 100%;
221
+ background: var(--gradient);
222
+ transition: right 0.3s ease;
223
+ opacity: 0.1;
224
+ }
225
+
226
+ .sidebar-item:hover::before,
227
+ .sidebar-item.active::before {
228
+ right: 0;
229
+ }
230
+
231
+ .sidebar-item:hover,
232
+ .sidebar-item.active {
233
+ transform: translateX(-5px);
234
+ background: rgba(99, 102, 241, 0.1);
235
+ }
236
+
237
+ .sidebar-item i {
238
+ font-size: 1.2rem;
239
+ width: 24px;
240
+ text-align: center;
241
+ }
242
+
243
+ .sidebar-item.active i {
244
+ color: var(--primary-color);
245
+ }
246
+
247
+ /* Main Content */
248
+ .main-content {
249
+ margin-right: 280px;
250
+ padding: 2rem;
251
+ min-height: calc(100vh - 80px);
252
+ }
253
+
254
+ .content-section {
255
+ display: none;
256
+ animation: fadeInUp 0.5s ease;
257
+ }
258
+
259
+ .content-section.active {
260
+ display: block;
261
+ }
262
+
263
+ @keyframes fadeInUp {
264
+ from {
265
+ opacity: 0;
266
+ transform: translateY(20px);
267
+ }
268
+ to {
269
+ opacity: 1;
270
+ transform: translateY(0);
271
+ }
272
+ }
273
+
274
+ /* Dashboard Cards */
275
+ .dashboard-grid {
276
+ display: grid;
277
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
278
+ gap: 1.5rem;
279
+ margin-bottom: 2rem;
280
+ }
281
+
282
+ .stat-card {
283
+ background: linear-gradient(135deg, var(--card-bg), rgba(51, 65, 85, 0.5));
284
+ border: 1px solid rgba(148, 163, 184, 0.1);
285
+ border-radius: 16px;
286
+ padding: 1.5rem;
287
+ position: relative;
288
+ overflow: hidden;
289
+ transition: all 0.3s ease;
290
+ }
291
+
292
+ .stat-card::after {
293
+ content: '';
294
+ position: absolute;
295
+ top: -50%;
296
+ right: -50%;
297
+ width: 200%;
298
+ height: 200%;
299
+ background: radial-gradient(circle, var(--primary-color), transparent);
300
+ opacity: 0;
301
+ transition: opacity 0.3s ease;
302
+ }
303
+
304
+ .stat-card:hover {
305
+ transform: translateY(-5px);
306
+ box-shadow: var(--shadow-xl);
307
+ }
308
+
309
+ .stat-card:hover::after {
310
+ opacity: 0.05;
311
+ }
312
+
313
+ .stat-icon {
314
+ width: 50px;
315
+ height: 50px;
316
+ border-radius: 12px;
317
+ display: flex;
318
+ align-items: center;
319
+ justify-content: center;
320
+ font-size: 1.5rem;
321
+ margin-bottom: 1rem;
322
+ }
323
+
324
+ .stat-value {
325
+ font-size: 2rem;
326
+ font-weight: bold;
327
+ margin-bottom: 0.5rem;
328
+ }
329
+
330
+ .stat-label {
331
+ color: var(--text-secondary);
332
+ font-size: 0.9rem;
333
+ }
334
+
335
+ /* Product Grid */
336
+ .product-grid {
337
+ display: grid;
338
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
339
+ gap: 1.5rem;
340
+ margin-top: 2rem;
341
+ }
342
+
343
+ .product-card {
344
+ background: var(--card-bg);
345
+ border-radius: 16px;
346
+ overflow: hidden;
347
+ transition: all 0.3s ease;
348
+ cursor: pointer;
349
+ position: relative;
350
+ }
351
+
352
+ .product-card:hover {
353
+ transform: translateY(-10px) scale(1.02);
354
+ box-shadow: var(--shadow-xl);
355
+ }
356
+
357
+ .product-image {
358
+ width: 100%;
359
+ height: 200px;
360
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
361
+ display: flex;
362
+ align-items: center;
363
+ justify-content: center;
364
+ font-size: 3rem;
365
+ position: relative;
366
+ overflow: hidden;
367
+ }
368
+
369
+ .product-badge {
370
+ position: absolute;
371
+ top: 1rem;
372
+ left: 1rem;
373
+ background: var(--danger);
374
+ color: white;
375
+ padding: 0.3rem 0.8rem;
376
+ border-radius: 50px;
377
+ font-size: 0.8rem;
378
+ }
379
+
380
+ .product-info {
381
+ padding: 1.5rem;
382
+ }
383
+
384
+ .product-title {
385
+ font-size: 1.1rem;
386
+ margin-bottom: 0.5rem;
387
+ }
388
+
389
+ .product-price {
390
+ font-size: 1.5rem;
391
+ font-weight: bold;
392
+ color: var(--primary-color);
393
+ margin-bottom: 1rem;
394
+ }
395
+
396
+ .product-actions {
397
+ display: flex;
398
+ gap: 0.5rem;
399
+ }
400
+
401
+ .btn {
402
+ padding: 0.6rem 1.2rem;
403
+ border: none;
404
+ border-radius: 8px;
405
+ cursor: pointer;
406
+ font-size: 0.9rem;
407
+ transition: all 0.3s ease;
408
+ display: inline-flex;
409
+ align-items: center;
410
+ gap: 0.5rem;
411
+ }
412
+
413
+ .btn-primary {
414
+ background: var(--gradient);
415
+ color: white;
416
+ }
417
+
418
+ .btn-primary:hover {
419
+ transform: scale(1.05);
420
+ box-shadow: 0 5px 20px rgba(99, 102, 241, 0.4);
421
+ }
422
+
423
+ .btn-secondary {
424
+ background: var(--light-bg);
425
+ color: var(--text-primary);
426
+ }
427
+
428
+ .btn-secondary:hover {
429
+ background: var(--card-bg);
430
+ }
431
+
432
+ /* Order Table */
433
+ .table-container {
434
+ background: var(--card-bg);
435
+ border-radius: 16px;
436
+ padding: 1.5rem;
437
+ overflow-x: auto;
438
+ }
439
+
440
+ table {
441
+ width: 100%;
442
+ border-collapse: collapse;
443
+ }
444
+
445
+ th {
446
+ text-align: right;
447
+ padding: 1rem;
448
+ border-bottom: 2px solid rgba(148, 163, 184, 0.1);
449
+ color: var(--text-secondary);
450
+ font-weight: 500;
451
+ }
452
+
453
+ td {
454
+ padding: 1rem;
455
+ border-bottom: 1px solid rgba(148, 163, 184, 0.05);
456
+ }
457
+
458
+ tr:hover {
459
+ background: rgba(99, 102, 241, 0.05);
460
+ }
461
+
462
+ .status-badge {
463
+ padding: 0.3rem 0.8rem;
464
+ border-radius: 50px;
465
+ font-size: 0.85rem;
466
+ display: inline-block;
467
+ }
468
+
469
+ .status-pending {
470
+ background: rgba(245, 158, 11, 0.2);
471
+ color: var(--warning);
472
+ }
473
+
474
+ .status-processing {
475
+ background: rgba(99, 102, 241, 0.2);
476
+ color: var(--primary-color);
477
+ }
478
+
479
+ .status-delivered {
480
+ background: rgba(16, 185, 129, 0.2);
481
+ color: var(--success);
482
+ }
483
+
484
+ /* Floating Action Button */
485
+ .fab {
486
+ position: fixed;
487
+ bottom: 2rem;
488
+ left: 2rem;
489
+ width: 60px;
490
+ height: 60px;
491
+ border-radius: 50%;
492
+ background: var(--gradient);
493
+ color: white;
494
+ border: none;
495
+ cursor: pointer;
496
+ display: flex;
497
+ align-items: center;
498
+ justify-content: center;
499
+ font-size: 1.5rem;
500
+ box-shadow: var(--shadow-xl);
501
+ transition: all 0.3s ease;
502
+ z-index: 1000;
503
+ }
504
+
505
+ .fab:hover {
506
+ transform: scale(1.1) rotate(90deg);
507
+ }
508
+
509
+ /* Cart Sidebar */
510
+ .cart-sidebar {
511
+ position: fixed;
512
+ left: -400px;
513
+ top: 80px;
514
+ bottom: 0;
515
+ width: 400px;
516
+ background: rgba(30, 41, 59, 0.95);
517
+ backdrop-filter: blur(10px);
518
+ border-right: 1px solid rgba(148, 163, 184, 0.1);
519
+ padding: 2rem;
520
+ transition: left 0.3s ease;
521
+ z-index: 998;
522
+ overflow-y: auto;
523
+ }
524
+
525
+ .cart-sidebar.open {
526
+ left: 0;
527
+ }
528
+
529
+ .cart-item {
530
+ display: flex;
531
+ gap: 1rem;
532
+ padding: 1rem;
533
+ background: var(--card-bg);
534
+ border-radius: 12px;
535
+ margin-bottom: 1rem;
536
+ animation: slideIn 0.3s ease;
537
+ }
538
+
539
+ @keyframes slideIn {
540
+ from {
541
+ opacity: 0;
542
+ transform: translateX(-20px);
543
+ }
544
+ to {
545
+ opacity: 1;
546
+ transform: translateX(0);
547
+ }
548
+ }
549
+
550
+ /* Loading Spinner */
551
+ .spinner {
552
+ width: 40px;
553
+ height: 40px;
554
+ border: 4px solid rgba(99, 102, 241, 0.2);
555
+ border-top-color: var(--primary-color);
556
+ border-radius: 50%;
557
+ animation: spin 1s linear infinite;
558
+ margin: 2rem auto;
559
+ }
560
+
561
+ @keyframes spin {
562
+ to { transform: rotate(360deg); }
563
+ }
564
+
565
+ /* Toast Notification */
566
+ .toast {
567
+ position: fixed;
568
+ top: 100px;
569
+ left: 50%;
570
+ transform: translateX(-50%) translateY(-100px);
571
+ background: var(--card-bg);
572
+ padding: 1rem 2rem;
573
+ border-radius: 12px;
574
+ box-shadow: var(--shadow-xl);
575
+ display: flex;
576
+ align-items: center;
577
+ gap: 1rem;
578
+ opacity: 0;
579
+ transition: all 0.3s ease;
580
+ z-index: 2000;
581
+ }
582
+
583
+ .toast.show {
584
+ transform: translateX(-50%) translateY(0);
585
+ opacity: 1;
586
+ }
587
+
588
+ .toast.success {
589
+ border-right: 4px solid var(--success);
590
+ }
591
+
592
+ .toast.error {
593
+ border-right: 4px solid var(--danger);
594
+ }
595
+
596
+ .toast.info {
597
+ border-right: 4px solid var(--primary-color);
598
+ }
599
+
600
+ /* Mobile Responsive */
601
+ .mobile-menu-toggle {
602
+ display: none;
603
+ background: none;
604
+ border: none;
605
+ color: var(--text-primary);
606
+ font-size: 1.5rem;
607
+ cursor: pointer;
608
+ }
609
+
610
+ @media (max-width: 1024px) {
611
+ .sidebar {
612
+ transform: translateX(100%);
613
+ }
614
+
615
+ .sidebar.open {
616
+ transform: translateX(0);
617
+ }
618
+
619
+ .main-content {
620
+ margin-right: 0;
621
+ }
622
+
623
+ .mobile-menu-toggle {
624
+ display: block;
625
+ }
626
+
627
+ .search-box input {
628
+ width: 150px;
629
+ }
630
+
631
+ .search-box input:focus {
632
+ width: 200px;
633
+ }
634
+ }
635
+
636
+ @media (max-width: 640px) {
637
+ .header-content {
638
+ padding: 0 1rem;
639
+ }
640
+
641
+ .cart-sidebar {
642
+ width: 100%;
643
+ left: -100%;
644
+ }
645
+
646
+ .dashboard-grid {
647
+ grid-template-columns: 1fr;
648
+ }
649
+
650
+ .product-grid {
651
+ grid-template-columns: 1fr;
652
+ }
653
+
654
+ .table-container {
655
+ padding: 1rem;
656
+ }
657
+
658
+ th, td {
659
+ padding: 0.5rem;
660
+ font-size: 0.9rem;
661
+ }
662
+ }
663
+
664
+ /* Special Effects */
665
+ .glow {
666
+ animation: glow 2s ease-in-out infinite alternate;
667
+ }
668
+
669
+ @keyframes glow {
670
+ from {
671
+ box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
672
+ }
673
+ to {
674
+ box-shadow: 0 0 20px rgba(99, 102, 241, 0.8), 0 0 30px rgba(139, 92, 246, 0.5);
675
+ }
676
+ }
677
+
678
+ .pulse {
679
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
680
+ }
681
+
682
+ @keyframes pulse {
683
+ 0%, 100% {
684
+ opacity: 1;
685
+ }
686
+ 50% {
687
+ opacity: 0.5;
688
+ }
689
+ }
690
+ </style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
691
  </head>
 
692
  <body>
693
+ <div class="bg-animation"></div>
694
+
695
+ <header>
696
+ <div class="header-content">
697
+ <div style="display: flex; align-items: center; gap: 1rem;">
698
+ <button class="mobile-menu-toggle" onclick="toggleSidebar()">
699
+ <i class="fas fa-bars"></i>
700
+ </button>
701
+ <div class="logo">
702
+ <i class="fas fa-home"></i>
703
+ <span>لوازم خانگی مدرن</span>
704
+ </div>
705
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" style="color: var(--text-secondary); text-decoration: none; font-size: 0.9rem;">
706
+ Built with anycoder
707
+ </a>
708
+ </div>
709
+
710
+ <div class="header-actions">
711
+ <div class="search-box">
712
+ <input type="text" placeholder="جستجو محصولات..." id="searchInput">
713
+ <i class="fas fa-search"></i>
714
+ </div>
715
+
716
+ <div class="notification-icon" onclick="showNotifications()">
717
+ <i class="fas fa-bell"></i>
718
+ <span class="notification-badge">3</span>
719
+ </div>
720
+
721
+ <div class="user-menu" onclick="toggleUserMenu()">
722
+ <div class="user-avatar">ع</div>
723
+ <span>علی احمدی</span>
724
+ <i class="fas fa-chevron-down"></i>
725
+ </div>
726
+ </div>
727
  </div>
 
 
 
 
 
 
 
 
728
  </header>
729
 
730
+ <aside class="sidebar" id="sidebar">
731
+ <div class="sidebar-item active" onclick="navigateTo('dashboard')">
732
+ <i class="fas fa-tachometer-alt"></i>
733
+ <span>داشبورد</span>
 
 
 
734
  </div>
735
+ <div class="sidebar-item" onclick="navigateTo('products')">
736
+ <i class="fas fa-shopping-bag"></i>
737
+ <span>محصولات</span>
738
  </div>
739
+ <div class="sidebar-item" onclick="navigateTo('orders')">
740
+ <i class="fas fa-receipt"></i>
741
+ <span>سفارشات</span>
742
  </div>
743
+ <div class="sidebar-item" onclick="navigateTo('wishlist')">
744
+ <i class="fas fa-heart"></i>
745
+ <span>علاقه‌مندی‌ها</span>
746
  </div>
747
+ <div class="sidebar-item" onclick="navigateTo('profile')">
748
+ <i class="fas fa-user"></i>
749
+ <span>پروفایل</span>
750
  </div>
751
+ <div class="sidebar-item" onclick="navigateTo('support')">
752
+ <i class="fas fa-headset"></i>
753
+ <span>پشتیبانی</span>
754
  </div>
755
+ <div class="sidebar-item" onclick="navigateTo('settings')">
756
+ <i class="fas fa-cog"></i>
757
+ <span>تنظیمات</span>
758
  </div>
759
+ </aside>
760
+
761
+ <main class="main-content">
762
+ <!-- Dashboard Section -->
763
+ <section id="dashboard" class="content-section active">
764
+ <h1 style="margin-bottom: 2rem; font-size: 2rem;">به پنل کاربری خود خوش آمدید!</h1>
765
+
766
+ <div class="dashboard-grid">
767
+ <div class="stat-card glow">
768
+ <div class="stat-icon" style="background: rgba(99, 102, 241, 0.2); color: var(--primary-color);">
769
+ <i class="fas fa-shopping-cart"></i>
770
+ </div>
771
+ <div class="stat-value">12</div>
772
+ <div class="stat-label">سفارش فعال</div>
773
+ </div>
774
+
775
+ <div class="stat-card">
776
+ <div class="stat-icon" style="background: rgba(16, 185, 129, 0.2); color: var(--success);">
777
+ <i class="fas fa-check-circle"></i>
778
+ </div>
779
+ <div class="stat-value">48</div>
780
+ <div class="stat-label">سفارش تحویل شده</div>
781
+ </div>
782
+
783
+ <div class="stat-card">
784
+ <div class="stat-icon" style="background: rgba(236, 72, 153, 0.2); color: var(--accent-color);">
785
+ <i class="fas fa-heart"></i>
786
+ </div>
787
+ <div class="stat-value">24</div>
788
+ <div class="stat-label">محصول مورد علاقه</div>
789
+ </div>
790
+
791
+ <div class="stat-card">
792
+ <div class="stat-icon" style="background: rgba(245, 158, 11, 0.2); color: var(--warning);">
793
+ <i class="fas fa-coins"></i>
794
+ </div>
795
+ <div class="stat-value">850,000</div>
796
+ <div class="stat-label">تومان اعتبار</div>
797
+ </div>
798
+ </div>
799
+
800
+ <h2 style="margin: 2rem 0 1rem;">پیشنهادات ویژه برای شما</h2>
801
+ <div class="product-grid">
802
+ <div class="product-card" onclick="addToCart('یخچال دو درب', 8500000)">
803
+ <div class="product-image">
804
+ <i class="fas fa-snowflake"></i>
805
+ <span class="product-badge">%20 تخفیف</span>
806
+ </div>
807
+ <div class="product-info">
808
+ <h3 class="product-title">یخچال دو درب مدرن</h3>
809
+ <div class="product-price">۸,۵۰۰,۰۰۰ تومان</div>
810
+ <div class="product-actions">
811
+ <button class="btn btn-primary">
812
+ <i class="fas fa-cart-plus"></i>
813
+ افزودن به سبد
814
+ </button>
815
+ <button class="btn btn-secondary">
816
+ <i class="fas fa-heart"></i>
817
+ </button>
818
+ </div>
819
+ </div>
820
+ </div>
821
+
822
+ <div class="product-card" onclick="addToCart('ماشین لباسشویی', 6500000)">
823
+ <div class="product-image" style="background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));">
824
+ <i class="fas fa-tshirt"></i>
825
+ </div>
826
+ <div class="product-info">
827
+ <h3 class="product-title">ماشین لباسشویی هوشمند</h3>
828
+ <div class="product-price">۶,۵۰۰,۰۰۰ تومان</div>
829
+ <div class="product-actions">
830
+ <button class="btn btn-primary">
831
+ <i class="fas fa-cart-plus"></i>
832
+ افزودن به سبد
833
+ </button>
834
+ <button class="btn btn-secondary">
835
+ <i class="fas fa-heart"></i>
836
+ </button>
837
+ </div>
838
+ </div>
839
+ </div>
840
+
841
+ <div class="product-card" onclick="addToCart('ظرفشویی', 4500000)">
842
+ <div class="product-image" style="background: linear-gradient(135deg, var(--accent-color), var(--warning));">
843
+ <i class="fas fa-utensils"></i>
844
+ </div>
845
+ <div class="product-info">
846
+ <h3 class="product-title">ماشین ظرفشویی</h3>
847
+ <div class="product-price">۴,۵۰۰,۰۰۰ تومان</div>
848
+ <div class="product-actions">
849
+ <button class="btn btn-primary">
850
+ <i class="fas fa-cart-plus"></i>
851
+ افزودن به سبد
852
+ </button>
853
+ <button class="btn btn-secondary">
854
+ <i class="fas fa-heart"></i>
855
+ </button>
856
+ </div>
857
+ </div>
858
+ </div>
859
+ </div>
860
+ </section>
861
+
862
+ <!-- Products Section -->
863
+ <section id="products" class="content-section">
864
+ <h1 style="margin-bottom: 2rem;">همه محصولات</h1>
865
+
866
+ <div style="display: flex; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap;">
867
+ <button class="btn btn-primary" onclick="filterProducts('all')">همه</button>
868
+ <button class="btn btn-secondary" onclick="filterProducts('fridge')">یخچال</button>
869
+ <button class="btn btn-secondary" onclick="filterProducts('washer')">لباسشویی</button>
870
+ <button class="btn btn-secondary" onclick="filterProducts('dishwasher')">ظرفشویی</button>
871
+ <button class="btn btn-secondary" onclick="filterProducts('oven')">فر و اجاق گاز</button>
872
+ </div>
873
+
874
+ <div class="product-grid" id="productsGrid">
875
+ <!-- Products will be loaded here -->
876
+ </div>
877
+ </section>
878
+
879
+ <!-- Orders Section -->
880
+ <section id="orders" class="content-section">
881
+ <h1 style="margin-bottom: 2rem;">سفارشات من</h1>
882
+
883
+ <div class="table-container">
884
+ <table>
885
+ <thead>
886
+ <tr>
887
+ <th>شماره سفارش</th>
888
+ <th>تاریخ</th>
889
+ <th>محصولات</th>
890
+ <th>مبلغ کل</th>
891
+ <th>وضعیت</th>
892
+ <th>عملیات</th>
893
+ </tr>
894
+ </thead>
895
+ <tbody id="ordersTable">
896
+ <tr>
897
+ <td>#12345</td>
898
+ <td>۱۴۰۲/۱۰/۱۵</td>
899
+ <td>یخچال دو درب</td>
900
+ <td>۸,۵۰۰,۰۰۰ تومان</td>
901
+ <td><span class="status-badge status-delivered">تحویل داده شده</span></td>
902
+ <td>
903
+ <button class="btn btn-primary" onclick="viewOrderDetails('12345')">مشاهده</button>
904
+ </td>
905
+ </tr>
906
+ <tr>
907
+ <td>#12346</td>
908
+ <td>۱۴۰۲/۱۰/۱۸</td>
909
+ <td>ماشین لباسشویی</td>
910
+ <td>۶,۵۰۰,۰۰۰ تومان</td>
911
+ <td><span class="status-badge status-processing">در حال پردازش</span></td>
912
+ <td>
913
+ <button class="btn btn-primary" onclick="viewOrderDetails('12346')">مشاهده</button>
914
+ </td>
915
+ </tr>
916
+ <tr>
917
+ <td>#12347</td>
918
+ <td>۱۴۰۲/۱۰/۲۰</td>
919
+ <td>ظرفشویی + مایکروویو</td>
920
+ <td>۷,۲۰۰,۰۰۰ تومان</td>
921
+ <td><span class="status-badge status-pending">در انتظار پرداخت</span></td>
922
+ <td>
923
+ <button class="btn btn-primary" onclick="viewOrderDetails('12347')">مشاهده</button>
924
+ </td>
925
+ </tr>
926
+ </tbody>
927
+ </table>
928
+ </div>
929
+ </section>
930
+
931
+ <!-- Wishlist Section -->
932
+ <section id="wishlist" class="content-section">
933
+ <h1 style="margin-bottom: 2rem;">علاقه‌مندی‌های من</h1>
934
+ <div class="product-grid" id="wishlistGrid">
935
+ <!-- Wishlist items will be loaded here -->
936
+ </div>
937
+ </section>
938
+
939
+ <!-- Profile Section -->
940
+ <section id="profile" class="content-section">
941
+ <h1 style="margin-bottom: 2rem;">پروفایل کاربری</h1>
942
+
943
+ <div style="display: grid; grid-template-columns: 1fr 2fr; gap: 2rem;">
944
+ <div class="stat-card" style="text-align: center;">
945
+ <div class="user-avatar" style="width: 100px; height: 100px; font-size: 2rem; margin: 0 auto 1rem;">ع</div>
946
+ <h3>علی احمدی</h3>
947
+ <p style="color: var(--text-secondary); margin-top: 0.5rem;">ali.ahmadi@example.com</p>
948
+ <button class="btn btn-primary" style="margin-top: 1rem;">تغییر تصویر</button>
949
+ </div>
950
+
951
+ <div class="stat-card">
952
+ <h3 style="margin-bottom: 1.5rem;">اطلاعات شخصی</h3>
953
+ <div style="display: grid; gap: 1rem;">
954
+ <div>
955
+ <label style="display: block; margin-bottom: 0.5rem; color: var(--text-secondary);">نام کامل</label>
956
+ <input type="text" value="علی احمدی" style="width: 100%; padding: 0.8rem; background: var(--light-bg); border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 8px; color: var(--text-primary);">
957
+ </div>
958
+ <div>
959
+ <label style="display: block; margin-bottom: 0.5rem; color: var(--text-secondary);">شماره تماس</label>
960
+ <input type="tel" value="۰۹۱۲۳۴۵۶۷۸۹" style="width: 100%; padding: 0.8rem; background: var(--light-bg); border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 8px; color: var(--text-primary);">
961
+ </div>
962
+ <div>
963
+ <label style="display: block; margin-bottom: 0.5rem; color: var(--text-secondary);">آدرس</label>
964
+ <textarea style="width: 100%; padding: 0.8rem; background: var(--light-bg); border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 8px; color: var(--text-primary); min-height: 100px;">تهران، خیابان ولیعصر، پلاک ۱۲۳</textarea>
965
+ </div>
966
+ <button class="btn btn-primary" onclick="updateProfile()">ذخیره تغییرات</button>
967
+ </div>
968
+ </div>
969
+ </div>
970
+ </section>
971
+
972
+ <!-- Support Section -->
973
+ <section id="support" class="content-section">
974
+ <h1 style="margin-bottom: 2rem;">پشتیبانی</h1>
975
+
976
+ <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem;">
977
+ <div class="stat-card">
978
+ <div class="stat-icon" style="background: rgba(99, 102, 241, 0.2); color: var(--primary-color);">
979
+ <i class="fas fa-phone"></i>
980
+ </div>
981
+ <h3 style="margin: 1rem 0;">تماس تلفنی</h3>
982
+ <p style="color: var(--text-secondary); margin-bottom: 1rem;">۰۲۱-۸۸۰۰۰۰۰۰</p>
983
+ <p style="font-size: 0.9rem; color: var(--text-secondary);">شنبه تا چهارشنبه: ۹ الی ۱۸</p>
984
+ </div>
985
+
986
+ <div class="stat-card">
987
+ <div class="stat-icon" style="background: rgba(16, 185, 129, 0.2); color: var(--success);">
988
+ <i class="fas fa-comments"></i>
989
+ </div>
990
+ <h3 style="margin: 1rem 0;">چت آنلاین</h3>
991
+ <p style="color: var(--text-secondary); margin-bottom: 1rem;">۲۴ ساعته پاسخگوی شما هستیم</p>
992
+ <button class="btn btn-primary">شروع چت</button>
993
+ </div>
994
+
995
+ <div class="stat-card">
996
+ <div class="stat-icon" style="background: rgba(236, 72, 153, 0.2); color: var(--accent-color);">
997
+ <i class="fas fa-envelope"></i>
998
+ </div>
999
+ <h3 style="margin: 1rem 0;">ایمیل</h3>
1000
+ <p style="color: var(--text-secondary); margin-bottom: 1rem;">support@modernhome.com</p>
1001
+ <p style="font-size: 0.9rem; color: var(--text-secondary);">ظرف ۲۴ ساعت پاسخ داده می‌شود</p>
1002
+ </div>
1003
+ </div>
1004
+
1005
+ <div style="margin-top: 2rem;">
1006
+ <h2 style="margin-bottom: 1rem;">ارسال تیکت جدید</h2>
1007
+ <div class="stat-card">
1008
+ <div style