Hugging Face's logo

Spaces:
samirerty
/
anycoder-c221f92c
Running

App Files Community
samirerty commited on
Commit
4dc56dd
·
verified ·
1 Parent(s): 51f9566

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +165 -1182
index.html CHANGED
@@ -1,1188 +1,171 @@
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>View - فروشگاه محصولات دیجیتال</title>
7
- <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
8
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
9
- <style>
10
- :root {
11
- --primary: #6366f1;
12
- --secondary: #8b5cf6;
13
- --accent: #ec4899;
14
- --dark: #0f172a;
15
- --darker: #020617;
16
- --light: #f8fafc;
17
- --glass: rgba(255, 255, 255, 0.05);
18
- --glass-border: rgba(255, 255, 255, 0.1);
19
- --card-bg: rgba(255, 255, 255, 0.03);
20
- }
21
-
22
- * {
23
- margin: 0;
24
- padding: 0;
25
- box-sizing: border-box;
26
- font-family: 'Vazirmatn', sans-serif;
27
- }
28
-
29
- body {
30
- background: var(--darker);
31
- color: var(--light);
32
- overflow-x: hidden;
33
- min-height: 100vh;
34
- }
35
-
36
- /* Animated Background */
37
- .bg-gradient {
38
- position: fixed;
39
- top: 0;
40
- left: 0;
41
- width: 100%;
42
- height: 100%;
43
- z-index: -1;
44
- background:
45
- radial-gradient(ellipse at 20% 20%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
46
- radial-gradient(ellipse at 80% 80%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
47
- radial-gradient(ellipse at 50% 50%, rgba(236, 72, 153, 0.08) 0%, transparent 60%),
48
- linear-gradient(180deg, var(--darker) 0%, var(--dark) 100%);
49
- animation: gradientShift 15s ease infinite;
50
- }
51
-
52
- @keyframes gradientShift {
53
- 0%, 100% { opacity: 1; }
54
- 50% { opacity: 0.8; }
55
- }
56
-
57
- /* Floating Elements */
58
- .floating-elements {
59
- position: fixed;
60
- top: 0;
61
- left: 0;
62
- width: 100%;
63
- height: 100%;
64
- pointer-events: none;
65
- z-index: 0;
66
- overflow: hidden;
67
- }
68
-
69
- .floating-shape {
70
- position: absolute;
71
- border-radius: 50%;
72
- background: linear-gradient(135deg, var(--primary), var(--secondary));
73
- opacity: 0.1;
74
- animation: float 20s infinite ease-in-out;
75
- }
76
-
77
- .floating-shape:nth-child(1) { width: 300px; height: 300px; top: 10%; left: -5%; animation-delay: 0s; }
78
- .floating-shape:nth-child(2) { width: 200px; height: 200px; top: 60%; right: -5%; animation-delay: -5s; }
79
- .floating-shape:nth-child(3) { width: 150px; height: 150px; bottom: 20%; left: 20%; animation-delay: -10s; }
80
- .floating-shape:nth-child(4) { width: 100px; height: 100px; top: 30%; right: 30%; animation-delay: -15s; }
81
-
82
- @keyframes float {
83
- 0%, 100% { transform: translate(0, 0) rotate(0deg); }
84
- 25% { transform: translate(30px, -30px) rotate(90deg); }
85
- 50% { transform: translate(-20px, 20px) rotate(180deg); }
86
- 75% { transform: translate(20px, 30px) rotate(270deg); }
87
- }
88
-
89
- /* Header */
90
- header {
91
- position: fixed;
92
- top: 0;
93
- left: 0;
94
- right: 0;
95
- z-index: 1000;
96
- padding: 1rem 2rem;
97
- background: rgba(15, 23, 42, 0.8);
98
- backdrop-filter: blur(20px);
99
- border-bottom: 1px solid var(--glass-border);
100
- display: flex;
101
- justify-content: space-between;
102
- align-items: center;
103
- }
104
-
105
- .logo {
106
- font-size: 1.8rem;
107
- font-weight: 900;
108
- background: linear-gradient(135deg, var(--primary), var(--accent));
109
- -webkit-background-clip: text;
110
- -webkit-text-fill-color: transparent;
111
- background-clip: text;
112
- text-shadow: 0 0 30px rgba(99, 102, 241, 0.5);
113
- }
114
-
115
- .logo span {
116
- font-size: 0.9rem;
117
- opacity: 0.7;
118
- }
119
-
120
- .header-link {
121
- color: var(--light);
122
- text-decoration: none;
123
- font-weight: 500;
124
- transition: all 0.3s;
125
- display: flex;
126
- align-items: center;
127
- gap: 0.5rem;
128
- }
129
-
130
- .header-link:hover {
131
- color: var(--primary);
132
- }
133
-
134
- /* Main Content */
135
- main {
136
- padding-top: 80px;
137
- position: relative;
138
- z-index: 1;
139
- }
140
-
141
- /* Section Title */
142
- .section-title {
143
- text-align: center;
144
- margin-bottom: 3rem;
145
- position: relative;
146
- }
147
-
148
- .section-title h2 {
149
- font-size: 2.5rem;
150
- font-weight: 900;
151
- position: relative;
152
- display: inline-block;
153
- transform: perspective(500px) rotateX(5deg);
154
- }
155
-
156
- .section-title h2::after {
157
- content: '';
158
- position: absolute;
159
- bottom: -10px;
160
- left: 0;
161
- width: 100%;
162
- height: 4px;
163
- background: linear-gradient(90deg, var(--primary), var(--accent), var(--secondary));
164
- border-radius: 2px;
165
- transform: perspective(500px) rotateX(-5deg);
166
- box-shadow: 0 5px 20px rgba(99, 102, 241, 0.5);
167
- }
168
-
169
- section {
170
- padding: 4rem 2rem;
171
- max-width: 1400px;
172
- margin: 0 auto;
173
- }
174
-
175
- /* Products Section */
176
- .products-grid {
177
- display: grid;
178
- grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
179
- gap: 2rem;
180
- perspective: 1000px;
181
- }
182
-
183
- .product-card {
184
- background: var(--card-bg);
185
- border: 1px solid var(--glass-border);
186
- border-radius: 20px;
187
- padding: 1.5rem;
188
- transform-style: preserve-3d;
189
- transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
190
- position: relative;
191
- overflow: hidden;
192
- }
193
-
194
- .product-card::before {
195
- content: '';
196
- position: absolute;
197
- top: 0;
198
- left: 0;
199
- right: 0;
200
- bottom: 0;
201
- background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(236, 72, 153, 0.1));
202
- opacity: 0;
203
- transition: opacity 0.3s;
204
- }
205
-
206
- .product-card:hover {
207
- transform: translateY(-20px) rotateX(5deg) rotateY(-5deg);
208
- box-shadow:
209
- 0 30px 60px rgba(0, 0, 0, 0.4),
210
- 0 0 40px rgba(99, 102, 241, 0.2);
211
- }
212
-
213
- .product-card:hover::before {
214
- opacity: 1;
215
- }
216
-
217
- .product-image {
218
- width: 100%;
219
- height: 200px;
220
- border-radius: 15px;
221
- overflow: hidden;
222
- position: relative;
223
- transform: translateZ(20px);
224
- margin-bottom: 1rem;
225
- }
226
-
227
- .product-image img {
228
- width: 100%;
229
- height: 100%;
230
- object-fit: cover;
231
- transition: transform 0.5s;
232
- }
233
-
234
- .product-card:hover .product-image img {
235
- transform: scale(1.1);
236
- }
237
-
238
- .product-info {
239
- transform: translateZ(30px);
240
- text-align: center;
241
- }
242
-
243
- .product-name {
244
- font-size: 1.2rem;
245
- font-weight: 700;
246
- margin-bottom: 0.5rem;
247
- }
248
-
249
- .product-price {
250
- font-size: 1.5rem;
251
- font-weight: 900;
252
- color: var(--accent);
253
- margin-bottom: 1rem;
254
- text-shadow: 0 0 20px rgba(236, 72, 153, 0.5);
255
- }
256
-
257
- .btn-buy {
258
- background: linear-gradient(135deg, var(--primary), var(--secondary));
259
- border: none;
260
- padding: 0.8rem 2rem;
261
- border-radius: 50px;
262
- color: white;
263
- font-family: 'Vazirmatn', sans-serif;
264
- font-size: 1rem;
265
- font-weight: 700;
266
- cursor: pointer;
267
- transform: translateZ(20px);
268
- transition: all 0.3s;
269
- position: relative;
270
- overflow: hidden;
271
- }
272
-
273
- .btn-buy::before {
274
- content: '';
275
- position: absolute;
276
- top: 0;
277
- left: -100%;
278
- width: 100%;
279
- height: 100%;
280
- background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
281
- transition: left 0.5s;
282
- }
283
-
284
- .btn-buy:hover::before {
285
- left: 100%;
286
- }
287
-
288
- .btn-buy:hover {
289
- transform: translateZ(20px) scale(1.05);
290
- box-shadow: 0 10px 30px rgba(99, 102, 241, 0.5);
291
- }
292
-
293
- .btn-buy:active {
294
- transform: translateZ(20px) scale(0.95);
295
- }
296
-
297
- /* Videos Section */
298
- .videos-section {
299
- background: var(--glass);
300
- border-radius: 30px;
301
- padding: 3rem;
302
- border: 1px solid var(--glass-border);
303
- }
304
-
305
- .videos-grid {
306
- display: grid;
307
- grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
308
- gap: 2rem;
309
- perspective: 1000px;
310
- }
311
-
312
- .video-card {
313
- background: var(--card-bg);
314
- border: 1px solid var(--glass-border);
315
- border-radius: 20px;
316
- overflow: hidden;
317
- transform-style: preserve-3d;
318
- transition: all 0.5s;
319
- position: relative;
320
- }
321
-
322
- .video-card:nth-child(1) { transform: translateZ(0) rotate(-2deg); }
323
- .video-card:nth-child(2) { transform: translateZ(20px) rotate(1deg); }
324
- .video-card:nth-child(3) { transform: translateZ(40px) rotate(-1deg); margin-top: 20px; }
325
- .video-card:nth-child(4) { transform: translateZ(60px) rotate(2deg); margin-top: 40px; }
326
-
327
- .video-card:hover {
328
- transform: translateZ(80px) rotate(0deg) scale(1.02);
329
- box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
330
- }
331
-
332
- .video-thumbnail {
333
- position: relative;
334
- height: 200px;
335
- overflow: hidden;
336
- }
337
-
338
- .video-thumbnail img {
339
- width: 100%;
340
- height: 100%;
341
- object-fit: cover;
342
- transition: transform 0.5s;
343
- }
344
-
345
- .video-card:hover .video-thumbnail img {
346
- transform: scale(1.1);
347
- }
348
-
349
- .play-btn {
350
- position: absolute;
351
- top: 50%;
352
- left: 50%;
353
- transform: translate(-50%, -50%) translateZ(50px);
354
- width: 70px;
355
- height: 70px;
356
- background: linear-gradient(135deg, var(--accent), var(--primary));
357
- border-radius: 50%;
358
- display: flex;
359
- align-items: center;
360
- justify-content: center;
361
- cursor: pointer;
362
- transition: all 0.3s;
363
- box-shadow: 0 10px 30px rgba(236, 72, 153, 0.5);
364
- }
365
-
366
- .play-btn::before {
367
- content: '';
368
- position: absolute;
369
- width: 100%;
370
- height: 100%;
371
- border-radius: 50%;
372
- background: var(--accent);
373
- animation: pulse 2s infinite;
374
- z-index: -1;
375
- }
376
-
377
- .play-btn i {
378
- color: white;
379
- font-size: 1.5rem;
380
- margin-left: 5px;
381
- }
382
-
383
- .play-btn:hover {
384
- transform: translate(-50%, -50%) translateZ(50px) scale(1.1);
385
- }
386
-
387
- @keyframes pulse {
388
- 0% { transform: scale(1); opacity: 0.5; }
389
- 100% { transform: scale(1.5); opacity: 0; }
390
- }
391
-
392
- .video-views {
393
- position: absolute;
394
- bottom: 10px;
395
- left: 10px;
396
- background: rgba(0, 0, 0, 0.7);
397
- padding: 0.3rem 0.8rem;
398
- border-radius: 20px;
399
- font-size: 0.8rem;
400
- display: flex;
401
- align-items: center;
402
- gap: 0.5rem;
403
- }
404
-
405
- .video-views i {
406
- color: var(--accent);
407
- animation: eyePulse 2s infinite;
408
- }
409
-
410
- @keyframes eyePulse {
411
- 0%, 100% { transform: scale(1); }
412
- 50% { transform: scale(1.2); }
413
- }
414
-
415
- .video-info {
416
- padding: 1.5rem;
417
- transform: translateZ(20px);
418
- }
419
-
420
- .video-title {
421
- font-size: 1.1rem;
422
- font-weight: 700;
423
- margin-bottom: 0.5rem;
424
- }
425
-
426
- .video-desc {
427
- font-size: 0.9rem;
428
- opacity: 0.7;
429
- margin-bottom: 1rem;
430
- }
431
-
432
- .video-stats {
433
- display: flex;
434
- gap: 1.5rem;
435
- font-size: 0.9rem;
436
- }
437
-
438
- .stat-item {
439
- display: flex;
440
- align-items: center;
441
- gap: 0.5rem;
442
- }
443
-
444
- .stat-item i {
445
- transition: transform 0.3s;
446
- }
447
-
448
- .stat-item.like:hover i {
449
- animation: heartBeat 0.5s ease;
450
- }
451
-
452
- @keyframes heartBeat {
453
- 0%, 100% { transform: scale(1); }
454
- 25% { transform: scale(1.3); }
455
- 50% { transform: scale(0.9); }
456
- 75% { transform: scale(1.2); }
457
- }
458
-
459
- /* Comments Section */
460
- .comments-container {
461
- display: grid;
462
- grid-template-columns: 2fr 1fr;
463
- gap: 2rem;
464
- perspective: 1000px;
465
- }
466
-
467
- .main-comment {
468
- background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(236, 72, 153, 0.1));
469
- border: 1px solid var(--glass-border);
470
- border-radius: 25px;
471
- padding: 2rem;
472
- transform: translateZ(30px);
473
- transition: all 0.5s;
474
- backdrop-filter: blur(10px);
475
- }
476
-
477
- .main-comment:hover {
478
- transform: translateZ(50px) rotateX(2deg);
479
- box-shadow: 0 30px 60px rgba(99, 102, 241, 0.2);
480
- }
481
-
482
- .comment-header {
483
- display: flex;
484
- align-items: center;
485
- gap: 1rem;
486
- margin-bottom: 1rem;
487
- }
488
-
489
- .comment-avatar {
490
- width: 60px;
491
- height: 60px;
492
- border-radius: 50%;
493
- background: linear-gradient(135deg, var(--primary), var(--accent));
494
- display: flex;
495
- align-items: center;
496
- justify-content: center;
497
- font-weight: 700;
498
- font-size: 1.5rem;
499
- transform: translateZ(20px);
500
- }
501
-
502
- .comment-author {
503
- font-weight: 700;
504
- font-size: 1.1rem;
505
- }
506
-
507
- .comment-date {
508
- font-size: 0.8rem;
509
- opacity: 0.6;
510
- }
511
-
512
- .comment-text {
513
- line-height: 1.8;
514
- transform: translateZ(10px);
515
- }
516
-
517
- .side-comments {
518
- display: flex;
519
- flex-direction: column;
520
- gap: 1rem;
521
- }
522
-
523
- .side-comment {
524
- background: var(--card-bg);
525
- border: 1px solid var(--glass-border);
526
- border-radius: 15px;
527
- padding: 1rem;
528
- transform: translateZ(10px);
529
- transition: all 0.3s;
530
- }
531
-
532
- .side-comment:hover {
533
- transform: translateZ(30px) translateX(-10px);
534
- }
535
-
536
- .comment-form {
537
- margin-top: 3rem;
538
- background: var(--card-bg);
539
- border: 1px solid var(--glass-border);
540
- border-radius: 20px;
541
- padding: 2rem;
542
- transform: translateZ(20px);
543
- }
544
-
545
- .comment-form h3 {
546
- margin-bottom: 1rem;
547
- font-size: 1.3rem;
548
- }
549
-
550
- .comment-input {
551
- width: 100%;
552
- padding: 1rem;
553
- border-radius: 15px;
554
- border: 2px solid var(--glass-border);
555
- background: rgba(255, 255, 255, 0.05);
556
- color: var(--light);
557
- font-family: 'Vazirmatn', sans-serif;
558
- font-size: 1rem;
559
- transition: all 0.3s;
560
- transform: translateZ(10px);
561
- }
562
-
563
- .comment-input:focus {
564
- outline: none;
565
- border-color: var(--primary);
566
- box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
567
- }
568
-
569
- .btn-submit {
570
- background: linear-gradient(135deg, var(--accent), var(--primary));
571
- border: none;
572
- padding: 1rem 2rem;
573
- border-radius: 50px;
574
- color: white;
575
- font-family: 'Vazirmatn', sans-serif;
576
- font-weight: 700;
577
- cursor: pointer;
578
- margin-top: 1rem;
579
- transform: translateZ(20px);
580
- transition: all 0.3s;
581
- }
582
-
583
- .btn-submit:hover {
584
- transform: translateZ(20px) scale(1.05);
585
- box-shadow: 0 10px 30px rgba(236, 72, 153, 0.4);
586
- }
587
-
588
- .btn-submit:active {
589
- transform: translateZ(20px) scale(0.95);
590
- }
591
-
592
- /* FAQ Section */
593
- .faq-container {
594
- max-width: 800px;
595
- margin: 0 auto;
596
- }
597
-
598
- .faq-item {
599
- background: var(--card-bg);
600
- border: 1px solid var(--glass-border);
601
- border-radius: 20px;
602
- margin-bottom: 1rem;
603
- overflow: hidden;
604
- transform-style: preserve-3d;
605
- transition: all 0.3s;
606
- }
607
-
608
- .faq-item:hover {
609
- border-color: var(--primary);
610
- }
611
-
612
- .faq-question {
613
- padding: 1.5rem;
614
- cursor: pointer;
615
- display: flex;
616
- justify-content: space-between;
617
- align-items: center;
618
- font-weight: 600;
619
- font-size: 1.1rem;
620
- transform: translateZ(20px);
621
- transition: all 0.3s;
622
- }
623
-
624
- .faq-question i {
625
- transition: transform 0.3s;
626
- color: var(--primary);
627
- }
628
-
629
- .faq-item.active .faq-question i {
630
- transform: rotate(180deg);
631
- }
632
-
633
- .faq-answer {
634
- max-height: 0;
635
- overflow: hidden;
636
- transition: max-height 0.5s ease-out;
637
- transform: translateZ(10px);
638
- }
639
-
640
- .faq-item.active .faq-answer {
641
- max-height: 200px;
642
- }
643
-
644
- .faq-answer-content {
645
- padding: 0 1.5rem 1.5rem;
646
- line-height: 1.8;
647
- opacity: 0.8;
648
- }
649
-
650
- /* Contact Section */
651
- .contact-card {
652
- background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1), rgba(236, 72, 153, 0.1));
653
- border: 1px solid var(--glass-border);
654
- border-radius: 30px;
655
- padding: 3rem;
656
- transform-style: preserve-3d;
657
- transition: all 0.5s;
658
- }
659
-
660
- .contact-card:hover {
661
- transform: translateZ(50px);
662
- box-shadow: 0 50px 100px rgba(99, 102, 241, 0.2);
663
- }
664
-
665
- .contact-grid {
666
- display: grid;
667
- grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
668
- gap: 2rem;
669
- perspective: 1000px;
670
- }
671
-
672
- .contact-item {
673
- text-align: center;
674
- padding: 2rem;
675
- background: var(--card-bg);
676
- border-radius: 20px;
677
- border: 1px solid var(--glass-border);
678
- transform: translateZ(30px);
679
- transition: all 0.3s;
680
- }
681
-
682
- .contact-item:hover {
683
- transform: translateZ(50px);
684
- }
685
-
686
- .contact-item i {
687
- font-size: 2.5rem;
688
- margin-bottom: 1rem;
689
- background: linear-gradient(135deg, var(--primary), var(--accent));
690
- -webkit-background-clip: text;
691
- -webkit-text-fill-color: transparent;
692
- background-clip: text;
693
- }
694
-
695
- .contact-item h3 {
696
- font-size: 1.2rem;
697
- margin-bottom: 0.5rem;
698
- }
699
-
700
- .contact-item p {
701
- opacity: 0.8;
702
- font-size: 0.9rem;
703
- }
704
-
705
- .phone-number {
706
- font-size: 1.3rem;
707
- font-weight: 700;
708
- color: var(--light);
709
- cursor: pointer;
710
- transition: all 0.3s;
711
- display: inline-block;
712
- }
713
-
714
- .phone-number:hover {
715
- color: var(--accent);
716
- animation: shake 0.5s ease;
717
- }
718
-
719
- @keyframes shake {
720
- 0%, 100% { transform: translateX(0); }
721
- 25% { transform: translateX(-5px); }
722
- 75% { transform: translateX(5px); }
723
- }
724
-
725
- .instagram-link {
726
- display: inline-flex;
727
- align-items: center;
728
- gap: 0.5rem;
729
- margin-top: 2rem;
730
- padding: 1rem 2rem;
731
- background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
732
- border-radius: 50px;
733
- color: white;
734
- text-decoration: none;
735
- font-weight: 600;
736
- transform: translateZ(30px);
737
- transition: all 0.3s;
738
- }
739
-
740
- .instagram-link:hover {
741
- transform: translateZ(50px) rotate(360deg);
742
- box-shadow: 0 10px 30px rgba(225, 48, 108, 0.5);
743
- }
744
-
745
- .instagram-link i {
746
- font-size: 1.5rem;
747
- background: none;
748
- -webkit-text-fill-color: white;
749
- }
750
-
751
- /* Footer */
752
- footer {
753
- background: var(--glass);
754
- border-top: 1px solid var(--glass-border);
755
- padding: 3rem 2rem;
756
- text-align: center;
757
- margin-top: 4rem;
758
- position: relative;
759
- }
760
-
761
- .footer-separator {
762
- width: 100%;
763
- height: 3px;
764
- background: linear-gradient(90deg, transparent, var(--primary), var(--accent), var(--secondary), transparent);
765
- margin-bottom: 2rem;
766
- position: relative;
767
- transform: perspective(500px) rotateX(10deg);
768
- box-shadow: 0 5px 20px rgba(99, 102, 241, 0.5);
769
- }
770
-
771
- .footer-text {
772
- font-size: 1rem;
773
- margin-bottom: 1.5rem;
774
- opacity: 0.8;
775
- }
776
-
777
- .social-icons {
778
- display: flex;
779
- justify-content: center;
780
- gap: 1.5rem;
781
- }
782
-
783
- .social-icon {
784
- width: 50px;
785
- height: 50px;
786
- border-radius: 50%;
787
- background: var(--card-bg);
788
- border: 1px solid var(--glass-border);
789
- display: flex;
790
- align-items: center;
791
- justify-content: center;
792
- font-size: 1.2rem;
793
- color: var(--light);
794
- text-decoration: none;
795
- transition: all 0.3s;
796
- transform: translateZ(20px);
797
- }
798
-
799
- .social-icon:hover {
800
- transform: translateZ(30px) translateY(-10px);
801
- box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);
802
- }
803
-
804
- .social-icon:nth-child(1):hover { background: #1877f2; }
805
- .social-icon:nth-child(2):hover { background: #1da1f2; }
806
- .social-icon:nth-child(3):hover { background: #ea4c89; }
807
- .social-icon:nth-child(4):hover { background: #0a66c2; }
808
-
809
- /* Scroll Animations */
810
- .fade-in {
811
- opacity: 0;
812
- transform: translateY(50px) rotateX(10deg);
813
- transition: all 0.8s ease-out;
814
- }
815
-
816
- .fade-in.visible {
817
- opacity: 1;
818
- transform: translateY(0) rotateX(0);
819
- }
820
-
821
- /* Responsive Design */
822
- @media (max-width: 1024px) {
823
- .comments-container {
824
- grid-template-columns: 1fr;
825
- }
826
-
827
- .video-card:nth-child(3),
828
- .video-card:nth-child(4) {
829
- margin-top: 0;
830
- }
831
- }
832
-
833
- @media (max-width: 768px) {
834
- .section-title h2 {
835
- font-size: 1.8rem;
836
- }
837
-
838
- section {
839
- padding: 2rem 1rem;
840
- }
841
-
842
- .videos-section {
843
- padding: 1.5rem;
844
- }
845
-
846
- .videos-grid {
847
- grid-template-columns: 1fr;
848
- }
849
-
850
- .video-card,
851
- .video-card:nth-child(1),
852
- .video-card:nth-child(2),
853
- .video-card:nth-child(3),
854
- .video-card:nth-child(4) {
855
- transform: translateZ(0);
856
- margin-top: 0;
857
- }
858
-
859
- .product-card:hover {
860
- transform: translateY(-10px);
861
- }
862
-
863
- .contact-card {
864
- padding: 1.5rem;
865
- }
866
-
867
- header {
868
- padding: 1rem;
869
- }
870
-
871
- .logo {
872
- font-size: 1.4rem;
873
- }
874
- }
875
-
876
- @media (max-width: 480px) {
877
- .products-grid {
878
- grid-template-columns: 1fr;
879
- }
880
-
881
- .video-stats {
882
- flex-direction: column;
883
- gap: 0.5rem;
884
- }
885
-
886
- .contact-grid {
887
- grid-template-columns: 1fr;
888
- }
889
- }
890
- </style>
891
  </head>
892
  <body>
893
- <div class="bg-gradient"></div>
894
-
895
- <div class="floating-elements">
896
- <div class="floating-shape"></div>
897
- <div class="floating-shape"></div>
898
- <div class="floating-shape"></div>
899
- <div class="floating-shape"></div>
900
- </div>
901
-
902
- <header>
903
- <div class="logo">
904
- View <span>دیجیتال</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
905
  </div>
906
- <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="header-link">
907
- <i class="fas fa-code"></i>
908
- Built with anycoder
909
- </a>
910
- </header>
911
-
912
- <main>
913
- <!-- Products Section -->
914
- <section id="products">
915
- <div class="section-title fade-in">
916
- <h2>محصولات</h2>
917
- </div>
918
-
919
- <div class="products-grid">
920
- <div class="product-card fade-in" data-tilt>
921
- <div class="product-image">
922
- <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400" alt="هدفون">
923
- </div>
924
- <div class="product-info">
925
- <h3 class="product-name">هدفون بلوتوثی پرو</h3>
926
- <div class="product-price">۲,۵۰۰,۰۰۰ تومان</div>
927
- <button class="btn-buy">خرید</button>
928
- </div>
929
- </div>
930
-
931
- <div class="product-card fade-in" data-tilt>
932
- <div class="product-image">
933
- <img src="https://images.unsplash.com/photo-1546868871-7041f2a55e12?w=400" alt="ساعت هوشمند">
934
- </div>
935
- <div class="product-info">
936
- <h3 class="product-name">ساعت هوشمند اولترا</h3>
937
- <div class="product-price">۳,۲۰۰,۰۰۰ تومان</div>
938
- <button class="btn-buy">خرید</button>
939
- </div>
940
- </div>
941
-
942
- <div class="product-card fade-in" data-tilt>
943
- <div class="product-image">
944
- <img src="https://images.unsplash.com/photo-1592899677977-9c10ca588bbd?w=400" alt="گوشی موبایل">
945
- </div>
946
- <div class="product-info">
947
- <h3 class="product-name">گوشی موبایل فایو جی</h3>
948
- <div class="product-price">۱۵,۰۰۰,۰۰۰ تومان</div>
949
- <button class="btn-buy">خرید</button>
950
- </div>
951
- </div>
952
-
953
- <div class="product-card fade-in" data-tilt>
954
- <div class="product-image">
955
- <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=400" alt="ساعت">
956
- </div>
957
- <div class="product-info">
958
- <h3 class="product-name">ساعت کلاسیک</h3>
959
- <div class="product-price">۴,۵۰۰,۰۰۰ تومان</div>
960
- <button class="btn-buy">خرید</button>
961
- </div>
962
- </div>
963
- </div>
964
- </section>
965
-
966
- <!-- Videos Section -->
967
- <section id="videos">
968
- <div class="section-title fade-in">
969
- <h2>پربازدیدترین کلیپ‌ها</h2>
970
- </div>
971
-
972
- <div class="videos-section fade-in">
973
- <div class="videos-grid">
974
- <div class="video-card">
975
- <div class="video-thumbnail">
976
- <img src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=600" alt="ویدیو">
977
- <div class="play-btn">
978
- <i class="fas fa-play"></i>
979
- </div>
980
- <div class="video-views">
981
- <i class="fas fa-eye"></i>
982
- ۱۲۵,۴۳۰
983
- </div>
984
- </div>
985
- <div class="video-info">
986
- <h3 class="video-title">بستن اپ‌های گوشی خوبه؟</h3>
987
- <p class="video-desc">اپ‌های آفیون رو بندیم یا نبندیم؟ چرا؟</p>
988
- <div class="video-stats">
989
- <div class="stat-item like">
990
- <i class="fas fa-heart"></i>
991
- ۱۲,۳۴۵
992
- </div>
993
- <div class="stat-item">
994
- <i class="fas fa-comment"></i>
995
- ۱۰۹
996
- </div>
997
- </div>
998
- </div>
999
- </div>
1000
-
1001
- <div class="video-card">
1002
- <div class="video-thumbnail">
1003
- <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=600" alt="ویدیو">
1004
- <div class="play-btn">
1005
- <i class="fas fa-play"></i>
1006
- </div>
1007
- <div class="video-views">
1008
- <i class="fas fa-eye"></i>
1009
- ۸۷,۲۱۰
1010
- </div>
1011
- </div>
1012
- <div class="video-info">
1013
- <h3 class="video-title">امنیت در دنیای دیجیتال</h3>
1014
- <p class="video-desc">چگونه از اطلاعات خود محافظت کنیم؟</p>
1015
- <div class="video-stats">
1016
- <div class="stat-item like">
1017
- <i class="fas fa-heart"></i>
1018
- ۸,۷۶۵
1019
- </div>
1020
- <div class="stat-item">
1021
- <i class="fas fa-comment"></i>
1022
- ۲۴۳
1023
- </div>
1024
- </div>
1025
- </div>
1026
- </div>
1027
-
1028
- <div class="video-card">
1029
- <div class="video-thumbnail">
1030
- <img src="https://images.unsplash.com/photo-1531297484001-80022131f5a1?w=600" alt="ویدیو">
1031
- <div class="play-btn">
1032
- <i class="fas fa-play"></i>
1033
- </div>
1034
- <div class="video-views">
1035
- <i class="fas fa-eye"></i>
1036
- ۶۵,۸۷۰
1037
- </div>
1038
- </div>
1039
- <div class="video-info">
1040
- <h3 class="video-title">آینده هوش مصنوعی</h3>
1041
- <p class="video-desc">چه تغییراتی در انتظار ماست؟</p>
1042
- <div class="video-stats">
1043
- <div class="stat-item like">
1044
- <i class="fas fa-heart"></i>
1045
- ۵,۴۳۲
1046
- </div>
1047
- <div class="stat-item">
1048
- <i class="fas fa-comment"></i>
1049
- ۸۷
1050
- </div>
1051
- </div>
1052
- </div>
1053
- </div>
1054
-
1055
- <div class="video-card">
1056
- <div class="video-thumbnail">
1057
- <img src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?w=600" alt="ویدیو">
1058
- <div class="play-btn">
1059
- <i class="fas fa-play"></i>
1060
- </div>
1061
- <div class="video-views">
1062
- <i class="fas fa-eye"></i>
1063
- ۵۴,۳۲۱
1064
- </div>
1065
- </div>
1066
- <div class="video-info">
1067
- <h3 class="video-title">اینترنت اشیا چیست؟</h3>
1068
- <p class="video-desc">اتصال همه چیز به اینترنت</p>
1069
- <div class="video-stats">
1070
- <div class="stat-item like">
1071
- <i class="fas fa-heart"></i>
1072
- ۳,۲۱۰
1073
- </div>
1074
- <div class="stat-item">
1075
- <i class="fas fa-comment"></i>
1076
- ۵۶
1077
- </div>
1078
- </div>
1079
- </div>
1080
- </div>
1081
- </div>
1082
- </div>
1083
- </section>
1084
-
1085
- <!-- Comments Section -->
1086
- <section id="comments">
1087
- <div class="section-title fade-in">
1088
- <h2>نظرات شما</h2>
1089
- </div>
1090
-
1091
- <div class="comments-container fade-in">
1092
- <div class="main-comment">
1093
- <div class="comment-header">
1094
- <div class="comment-avatar">آ</div>
1095
- <div>
1096
- <div class="comment-author">علی خرمدل</div>
1097
- <div class="comment-date">۲۴ دی ۱۴۰۳ - ساعت ۱۴:۳۰</div>
1098
- </div>
1099
- </div>
1100
- <p class="comment-text">
1101
- مطالب‌تان به شدت مفید است. من همیشه منتظر ویدیوها و پست‌های جدیدتون هستم تا با دوستانم به اشتراک بذارم. واقعاً کیفیت محتوا عالیه و خیلی خوب توضیح میدید. ممنون از زحماتتون 🙏
1102
- </p>
1103
- </div>
1104
-
1105
- <div class="side-comments">
1106
- <div class="side-comment">
1107
- <div class="comment-header">
1108
- <div class="comment-avatar" style="width: 40px; height: 40px; font-size: 1rem;">س</div>
1109
- <div>
1110
- <div class="comment-author">سارا محمدی</div>
1111
- <div class="comment-date">۲۳ دی ۱۴۰۳</div>
1112
- </div>
1113
- </div>
1114
- <p class="comment-text" style="font-size: 0.9rem;">عالی بود 🙏</p>
1115
- </div>
1116
-
1117
- <div class="side-comment">
1118
- <div class="comment-header">
1119
- <div class="comment-avatar" style="width: 40px; height: 40px; font-size: 1rem;">م</div>
1120
- <div>
1121
- <div class="comment-author">محمد رضایی</div>
1122
- <div class="comment-date">۲۲ دی ۱۴۰۳</div>
1123
- </div>
1124
- </div>
1125
- <p class="comment-text" style="font-size: 0.9rem;">خیلی ممنون از محتوای فوق‌العاده‌تون 💪</p>
1126
- </div>
1127
- </div>
1128
- </div>
1129
-
1130
- <div class="comment-form fade-in">
1131
- <h3>ثبت نظر</h3>
1132
- <textarea class="comment-input" rows="4" placeholder="نظر خود را بنویسید..."></textarea>
1133
- <button class="btn-submit">ارسال نظر</button>
1134
- </div>
1135
- </section>
1136
-
1137
- <!-- FAQ Section -->
1138
- <section id="faq">
1139
- <div class="section-title fade-in">
1140
- <h2>سوالات متداول</h2>
1141
- </div>
1142
-
1143
- <div class="faq-container fade-in">
1144
- <div class="faq-item">
1145
- <div class="faq-question">
1146
- <span>چطور می‌توانم از فروشگاه خرید کنم؟</span>
1147
- <i class="fas fa-chevron-down"></i>
1148
- </div>
1149
- <div class="faq-answer">
1150
- <div class="faq-answer-content">
1151
- برای خرید از فروشگاه، ابتدا محصول مورد نظر خود را انتخاب کنید و سپس روی دکمه "خرید" کلیک کنید. پس از انتخاب روش پرداخت و تکمیل اطلاعات، سفارش شما ثبت و ارسال خواهد شد.
1152
- </div>
1153
- </div>
1154
- </div>
1155
-
1156
- <div class="faq-item">
1157
- <div class="faq-question">
1158
- <span>آیا می‌توانم با شما همکاری داشته باشم؟</span>
1159
- <i class="fas fa-chevron-down"></i>
1160
- </div>
1161
- <div class="faq-answer">
1162
- <div class="faq-answer-content">
1163
- بله! ما همیشه به دنبال همکاران جدید هستیم. می‌توانید از طریق بخش تماس با ما، درخواست همکاری خود را ارسال کنید و تیم ما در اسرع وقت با شما تماس خواهد گرفت.
1164
- </div>
1165
- </div>
1166
- </div>
1167
-
1168
- <div class="faq-item">
1169
- <div class="faq-question">
1170
- <span>نمی‌توانم توی وبسایت ثبت نام کنم.</span>
1171
- <i class="fas fa-chevron-down"></i>
1172
- </div>
1173
- <div class="faq-answer">
1174
- <div class="faq-answer-content">
1175
- اگر در ثبت‌نام مشکل دارید، لطفاً مطمئن شوید که اطلاعات را به درستی وارد کرده‌اید. همچنین می‌توانید از مرورگر دیگری استفاده کنید یا با پشتیبانی تماس بگیرید تا مشکل برطرف شود.
1176
- </div>
1177
- </div>
1178
- </div>
1179
- </div>
1180
- </section>
1181
-
1182
- <!-- Contact Section -->
1183
- <section id="contact">
1184
- <div class="section-title fade-in">
1185
- <h2>تماس با ما</h2>
1186
- </div>
1187
-
1188
- <div class
 
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>View - فروشگاه دیجیتال</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;700;900&display=swap" rel="stylesheet">
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
9
+ <style>
10
+ :root { --primary: #6366f1; --secondary: #8b5cf6; --accent: #ec4899; --dark: #0f172a; --darker: #020617; --light: #f8fafc; --glass: rgba(255,255,255,0.05); --glass-border: rgba(255,255,255,0.1); --card-bg: rgba(255,255,255,0.03); }
11
+ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Vazirmatn', sans-serif; }
12
+ body { background: var(--darker); color: var(--light); min-height: 100vh; }
13
+ .bg-gradient { position: fixed; inset: 0; z-index: -1; background: radial-gradient(ellipse at 20% 20%, rgba(99,102,241,0.15), transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(139,92,246,0.15), transparent 50%), linear-gradient(180deg, var(--darker), var(--dark)); }
14
+ .floating-elements { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
15
+ .floating-shape { position: absolute; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--secondary)); opacity: 0.1; animation: float 20s infinite ease-in-out; }
16
+ .floating-shape:nth-child(1) { width: 300px; height: 300px; top: 10%; left: -5%; }
17
+ .floating-shape:nth-child(2) { width: 200px; height: 200px; top: 60%; right: -5%; animation-delay: -5s; }
18
+ .floating-shape:nth-child(3) { width: 150px; height: 150px; bottom: 20%; left: 20%; animation-delay: -10s; }
19
+ @keyframes float { 0%,100% { transform: translate(0,0) rotate(0deg); } 25% { transform: translate(30px,-30px) rotate(90deg); } 50% { transform: translate(-20px,20px) rotate(180deg); } 75% { transform: translate(20px,30px) rotate(270deg); } }
20
+ header { position: fixed; top: 0; inset-x: 0; z-index: 1000; padding: 1rem 2rem; background: rgba(15,23,42,0.8); backdrop-filter: blur(20px); border-bottom: 1px solid var(--glass-border); display: flex; justify-content: space-between; align-items: center; }
21
+ .logo { font-size: 1.8rem; font-weight: 900; background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
22
+ .header-link { color: var(--light); text-decoration: none; font-weight: 500; transition: 0.3s; display: flex; align-items: center; gap: 0.5rem; }
23
+ .header-link:hover { color: var(--primary); }
24
+ main { padding-top: 80px; }
25
+ .section-title { text-align: center; margin-bottom: 3rem; }
26
+ .section-title h2 { font-size: 2.5rem; font-weight: 900; position: relative; display: inline-block; }
27
+ .section-title h2::after { content: ''; position: absolute; bottom: -10px; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--primary), var(--accent), var(--secondary)); border-radius: 2px; box-shadow: 0 5px 20px rgba(99,102,241,0.5); }
28
+ section { padding: 4rem 2rem; max-width: 1400px; margin: 0 auto; }
29
+ .products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; }
30
+ .product-card { background: var(--card-bg); border: 1px solid var(--glass-border); border-radius: 20px; padding: 1.5rem; transition: all 0.5s cubic-bezier(0.175,0.885,0.32,1.275); }
31
+ .product-card:hover { transform: translateY(-20px); box-shadow: 0 30px 60px rgba(0,0,0,0.4), 0 0 40px rgba(99,102,241,0.2); }
32
+ .product-image { width: 100%; height: 200px; border-radius: 15px; overflow: hidden; margin-bottom: 1rem; }
33
+ .product-image img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
34
+ .product-card:hover .product-image img { transform: scale(1.1); }
35
+ .product-info { text-align: center; }
36
+ .product-name { font-size: 1.2rem; font-weight: 700; margin-bottom: 0.5rem; }
37
+ .product-price { font-size: 1.5rem; font-weight: 900; color: var(--accent); margin-bottom: 1rem; text-shadow: 0 0 20px rgba(236,72,153,0.5); }
38
+ .btn-buy { background: linear-gradient(135deg, var(--primary), var(--secondary)); border: none; padding: 0.8rem 2rem; border-radius: 50px; color: white; font-weight: 700; cursor: pointer; transition: 0.3s; }
39
+ .btn-buy:hover { transform: scale(1.05); box-shadow: 0 10px 30px rgba(99,102,241,0.5); }
40
+ .videos-section { background: var(--glass); border-radius: 30px; padding: 3rem; border: 1px solid var(--glass-border); }
41
+ .videos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; }
42
+ .video-card { background: var(--card-bg); border: 1px solid var(--glass-border); border-radius: 20px; overflow: hidden; transition: all 0.5s; }
43
+ .video-card:hover { transform: translateY(-10px); box-shadow: 0 30px 60px rgba(0,0,0,0.4); }
44
+ .video-thumbnail { position: relative; height: 200px; overflow: hidden; }
45
+ .video-thumbnail img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
46
+ .video-card:hover .video-thumbnail img { transform: scale(1.1); }
47
+ .play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70px; height: 70px; background: linear-gradient(135deg, var(--accent), var(--primary)); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.3s; box-shadow: 0 10px 30px rgba(236,72,153,0.5); }
48
+ .play-btn::before { content: ''; position: absolute; width: 100%; height: 100%; border-radius: 50%; background: var(--accent); animation: pulse 2s infinite; z-index: -1; }
49
+ .play-btn i { color: white; font-size: 1.5rem; margin-left: 5px; }
50
+ .play-btn:hover { transform: translate(-50%, -50%) scale(1.1); }
51
+ @keyframes pulse { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.5); opacity: 0; } }
52
+ .video-views { position: absolute; bottom: 10px; left: 10px; background: rgba(0,0,0,0.7); padding: 0.3rem 0.8rem; border-radius: 20px; font-size: 0.8rem; display: flex; align-items: center; gap: 0.5rem; }
53
+ .video-info { padding: 1.5rem; }
54
+ .video-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.5rem; }
55
+ .video-desc { font-size: 0.9rem; opacity: 0.7; margin-bottom: 1rem; }
56
+ .video-stats { display: flex; gap: 1.5rem; font-size: 0.9rem; }
57
+ .stat-item { display: flex; align-items: center; gap: 0.5rem; }
58
+ .stat-item.like:hover i { animation: heartBeat 0.5s ease; }
59
+ @keyframes heartBeat { 0%,100% { transform: scale(1); } 25% { transform: scale(1.3); } 50% { transform: scale(0.9); } 75% { transform: scale(1.2); } }
60
+ .faq-container { max-width: 800px; margin: 0 auto; }
61
+ .faq-item { background: var(--card-bg); border: 1px solid var(--glass-border); border-radius: 20px; margin-bottom: 1rem; overflow: hidden; transition: 0.3s; }
62
+ .faq-item:hover { border-color: var(--primary); }
63
+ .faq-question { padding: 1.5rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 600; }
64
+ .faq-question i { transition: 0.3s; color: var(--primary); }
65
+ .faq-item.active .faq-question i { transform: rotate(180deg); }
66
+ .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.5s ease-out; }
67
+ .faq-item.active .faq-answer { max-height: 200px; }
68
+ .faq-answer-content { padding: 0 1.5rem 1.5rem; line-height: 1.8; opacity: 0.8; }
69
+ .contact-card { background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(139,92,246,0.1), rgba(236,72,153,0.1)); border: 1px solid var(--glass-border); border-radius: 30px; padding: 3rem; }
70
+ .contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; }
71
+ .contact-item { text-align: center; padding: 2rem; background: var(--card-bg); border-radius: 20px; border: 1px solid var(--glass-border); transition: 0.3s; }
72
+ .contact-item:hover { transform: translateY(-10px); }
73
+ .contact-item i { font-size: 2.5rem; margin-bottom: 1rem; background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
74
+ .contact-item h3 { font-size: 1.2rem; margin-bottom: 0.5rem; }
75
+ .contact-item p { opacity: 0.8; font-size: 0.9rem; }
76
+ .phone-number { font-size: 1.3rem; font-weight: 700; color: var(--light); cursor: pointer; transition: 0.3s; display: inline-block; }
77
+ .phone-number:hover { color: var(--accent); animation: shake 0.5s ease; }
78
+ @keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
79
+ .instagram-link { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 2rem; padding: 1rem 2rem; background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); border-radius: 50px; color: white; text-decoration: none; font-weight: 600; transition: 0.3s; }
80
+ .instagram-link:hover { transform: rotate(360deg); box-shadow: 0 10px 30px rgba(225,48,108,0.5); }
81
+ footer { background: var(--glass); border-top: 1px solid var(--glass-border); padding: 3rem 2rem; text-align: center; margin-top: 4rem; }
82
+ .footer-separator { width: 100%; height: 3px; background: linear-gradient(90deg, transparent, var(--primary), var(--accent), var(--secondary), transparent); margin-bottom: 2rem; box-shadow: 0 5px 20px rgba(99,102,241,0.5); }
83
+ .social-icons { display: flex; justify-content: center; gap: 1.5rem; }
84
+ .social-icon { width: 50px; height: 50px; border-radius: 50%; background: var(--card-bg); border: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--light); text-decoration: none; transition: 0.3s; }
85
+ .social-icon:hover { transform: translateY(-10px); box-shadow: 0 10px 30px rgba(99,102,241,0.3); }
86
+ .social-icon:nth-child(1):hover { background: #1877f2; }
87
+ .social-icon:nth-child(2):hover { background: #1da1f2; }
88
+ .social-icon:nth-child(3):hover { background: #ea4c89; }
89
+ .social-icon:nth-child(4):hover { background: #0a66c2; }
90
+ .fade-in { opacity: 0; transform: translateY(30px); transition: all 0.6s ease-out; }
91
+ .fade-in.visible { opacity: 1; transform: translateY(0); }
92
+ @media (max-width: 768px) { .section-title h2 { font-size: 1.8rem; } section { padding: 2rem 1rem; } .videos-section { padding: 1.5rem; } .videos-grid { grid-template-columns: 1fr; } header { padding: 1rem; } .logo { font-size: 1.4rem; } }
93
+ @media (max-width: 480px) { .products-grid { grid-template-columns: 1fr; } }
94
+ </style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
95
  </head>
96
  <body>
97
+ <div class="bg-gradient"></div>
98
+ <div class="floating-elements">
99
+ <div class="floating-shape"></div>
100
+ <div class="floating-shape"></div>
101
+ <div class="floating-shape"></div>
102
+ </div>
103
+ <header>
104
+ <div class="logo">View <span>دیجیتال</span></div>
105
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="header-link"><i class="fas fa-code"></i> Built with anycoder</a>
106
+ </header>
107
+ <main>
108
+ <section id="products">
109
+ <div class="section-title fade-in"><h2>محصولات</h2></div>
110
+ <div class="products-grid">
111
+ <div class="product-card fade-in">
112
+ <div class="product-image"><img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400" alt="هدفون"></div>
113
+ <div class="product-info"><h3 class="product-name">هدفون بلوتوثی پرو</h3><div class="product-price">۲,۵۰۰,۰۰۰ تومان</div><button class="btn-buy">خرید</button></div>
114
+ </div>
115
+ <div class="product-card fade-in">
116
+ <div class="product-image"><img src="https://images.unsplash.com/photo-1546868871-7041f2a55e12?w=400" alt="ساعت"></div>
117
+ <div class="product-info"><h3 class="product-name">ساعت هوشمند اولترا</h3><div class="product-price">۳,۲۰۰,۰۰۰ تومان</div><button class="btn-buy">خرید</button></div>
118
+ </div>
119
+ </div>
120
+ </section>
121
+ <section id="videos">
122
+ <div class="section-title fade-in"><h2>ویدیوها</h2></div>
123
+ <div class="videos-section fade-in">
124
+ <div class="videos-grid">
125
+ <div class="video-card">
126
+ <div class="video-thumbnail"><img src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=600" alt="ویدیو"><div class="play-btn"><i class="fas fa-play"></i></div><div class="video-views"><i class="fas fa-eye"></i> ۱۲۵,۴۳۰</div></div>
127
+ <div class="video-info"><h3 class="video-title">بستن اپ‌های گوشی خوبه؟</h3><p class="video-desc">اپ‌های آفیون رو بندیم یا نه؟</p><div class="video-stats"><div class="stat-item like"><i class="fas fa-heart"></i> ۱۲,۳۴۵</div><div class="stat-item"><i class="fas fa-comment"></i> ۱۰۹</div></div></div>
128
+ </div>
129
+ <div class="video-card">
130
+ <div class="video-thumbnail"><img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=600" alt="ویدیو"><div class="play-btn"><i class="fas fa-play"></i></div><div class="video-views"><i class="fas fa-eye"></i> ۸۷,۲۱۰</div></div>
131
+ <div class="video-info"><h3 class="video-title">امنیت دیجیتال</h3><p class="video-desc">چگونه از اطلاعات خود محافظت کنیم؟</p><div class="video-stats"><div class="stat-item like"><i class="fas fa-heart"></i> ۸,۷۶۵</div><div class="stat-item"><i class="fas fa-comment"></i> ۲۴۳</div></div></div>
132
+ </div>
133
  </div>
134
+ </div>
135
+ </section>
136
+ <section id="faq">
137
+ <div class="section-title fade-in"><h2>سوالات متداول</h2></div>
138
+ <div class="faq-container fade-in">
139
+ <div class="faq-item"><div class="faq-question"><span>چطور خرید کنم؟</span><i class="fas fa-chevron-down"></i></div><div class="faq-answer"><div class="faq-answer-content">محصول مورد نظر را انتخاب کنید و روی دکمه خرید کلیک کنید.</div></div></div>
140
+ <div class="faq-item"><div class="faq-question"><span>امکان همکاری هست؟</span><i class="fas fa-chevron-down"></i></div><div class="faq-answer"><div class="faq-answer-content">بله، از طریق بخش تماس درخواست خود را ارسال کنید.</div></div></div>
141
+ </div>
142
+ </section>
143
+ <section id="contact">
144
+ <div class="section-title fade-in"><h2>تماس با ما</h2></div>
145
+ <div class="contact-card fade-in">
146
+ <div class="contact-grid">
147
+ <div class="contact-item"><i class="fas fa-phone"></i><h3>تماس تلفنی</h3><p class="phone-number">۰۲۱-۱۲۳۴۵۶۷۸</p></div>
148
+ <div class="contact-item"><i class="fas fa-envelope"></i><h3>ایمیل</h3><p>info@view.ir</p></div>
149
+ <div class="contact-item"><i class="fas fa-map-marker-alt"></i><h3>آدرس</h3><p>تهران، میدان آزادی</p></div>
150
+ </div>
151
+ <div style="text-align: center;"><a href="#" class="instagram-link"><i class="fab fa-instagram"></i> ما را در اینستاگرام دنبال کنید</a></div>
152
+ </div>
153
+ </section>
154
+ </main>
155
+ <footer>
156
+ <div class="footer-separator"></div>
157
+ <p class="footer-text">© ۱۴۰۳ - تمامی حقوق محفوظ است</p>
158
+ <div class="social-icons">
159
+ <a href="#" class="social-icon"><i class="fab fa-facebook-f"></i></a>
160
+ <a href="#" class="social-icon"><i class="fab fa-twitter"></i></a>
161
+ <a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
162
+ <a href="#" class="social-icon"><i class="fab fa-linkedin-in"></i></a>
163
+ </div>
164
+ </footer>
165
+ <script>
166
+ document.querySelectorAll('.faq-question').forEach(q => q.addEventListener('click', () => q.parentElement.classList.toggle('active')));
167
+ const observer = new IntersectionObserver(e => e.forEach(el => el.isIntersecting && el.target.classList.add('visible')), { threshold: 0.1 });
168
+ document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
169
+ </script>
170
+ </body>
171
+ </html>