Hugging Face's logo

Spaces:
12wqhh
/
https-huggingface-co-12wqhh
Running

App Files Community
12wqhh commited on
Commit
7a52173
·
verified ·
1 Parent(s): 3e06ce8

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +394 -1788
index.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>توتير - مشاركة اللحظات</title>
7
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
  <style>
9
  * {
@@ -16,1879 +16,485 @@
16
  body {
17
  background-color: #fafafa;
18
  color: #262626;
19
- }
20
-
21
- /* الصفحة الرئيسية */
22
- .main-page {
23
- max-width: 935px;
24
- margin: 0 auto;
25
- padding-top: 30px;
26
- }
27
-
28
- .header {
29
- position: fixed;
30
- top: 0;
31
- width: 100%;
32
- background-color: white;
33
- border-bottom: 1px solid #dbdbdb;
34
- padding: 10px 0;
35
- z-index: 100;
36
- }
37
-
38
- .header-container {
39
- max-width: 935px;
40
- margin: 0 auto;
41
  display: flex;
42
- justify-content: space-between;
43
  align-items: center;
44
- padding: 0 20px;
45
- }
46
-
47
- .header-logo {
48
- font-size: 24px;
49
- font-weight: 300;
50
- }
51
-
52
- .search-bar {
53
- position: relative;
54
- }
55
-
56
- .search-bar input {
57
- padding: 8px 10px 8px 30px;
58
- background-color: #efefef;
59
- border: none;
60
- border-radius: 8px;
61
- width: 215px;
62
- font-size: 14px;
63
- }
64
-
65
- .search-bar i {
66
- position: absolute;
67
- left: 10px;
68
- top: 50%;
69
- transform: translateY(-50%);
70
- color: #8e8e8e;
71
- font-size: 12px;
72
- }
73
-
74
- .nav-icons {
75
- display: flex;
76
- gap: 20px;
77
- }
78
-
79
- .nav-icons i {
80
- font-size: 22px;
81
- cursor: pointer;
82
  }
83
 
84
- .profile-pic {
85
- width: 24px;
86
- height: 24px;
87
- border-radius: 50%;
88
- object-fit: cover;
89
- }
90
-
91
- .content {
92
  display: flex;
93
- margin-top: 60px;
94
- }
95
-
96
- .posts {
97
  width: 100%;
98
- max-width: 614px;
 
99
  }
100
 
101
- .stories {
102
  background-color: white;
103
  border: 1px solid #dbdbdb;
104
  border-radius: 8px;
105
- padding: 16px;
106
- margin-bottom: 24px;
107
- display: flex;
108
- overflow-x: auto;
109
- scrollbar-width: none;
110
  }
111
 
112
- .stories::-webkit-scrollbar {
113
- display: none;
 
 
114
  }
115
 
116
- .story {
117
  display: flex;
118
  flex-direction: column;
119
- align-items: center;
120
- margin-right: 15px;
121
- cursor: pointer;
122
  }
123
 
124
- .story-avatar {
125
- width: 66px;
126
- height: 66px;
127
- border-radius: 50%;
128
- padding: 2px;
129
- background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
130
  }
131
 
132
- .story-avatar img {
133
  width: 100%;
134
- height: 100%;
135
- border-radius: 50%;
136
- border: 2px solid white;
137
- object-fit: cover;
138
- }
139
-
140
- .story-username {
141
- font-size: 12px;
142
- margin-top: 5px;
143
- max-width: 70px;
144
- overflow: hidden;
145
- text-overflow: ellipsis;
146
- white-space: nowrap;
147
- }
148
-
149
- .post {
150
- background-color: white;
151
  border: 1px solid #dbdbdb;
152
- border-radius: 8px;
153
- margin-bottom: 24px;
154
- }
155
-
156
- .post-header {
157
- display: flex;
158
- justify-content: space-between;
159
- align-items: center;
160
- padding: 14px 16px;
161
- }
162
-
163
- .post-user {
164
- display: flex;
165
- align-items: center;
166
- }
167
-
168
- .post-user img {
169
- width: 32px;
170
- height: 32px;
171
- border-radius: 50%;
172
- margin-left: 10px;
173
- object-fit: cover;
174
- }
175
-
176
- .post-user span {
177
- font-weight: bold;
178
  font-size: 14px;
 
179
  }
180
 
181
- .post-more {
182
- cursor: pointer;
183
- }
184
-
185
- .post-image {
186
- width: 100%;
187
- max-height: 767px;
188
- object-fit: cover;
189
- }
190
-
191
- .post-actions {
192
- display: flex;
193
- justify-content: space-between;
194
- padding: 8px 16px;
195
- }
196
-
197
- .post-actions-left {
198
- display: flex;
199
- gap: 16px;
200
- }
201
-
202
- .post-actions i {
203
- font-size: 24px;
204
- cursor: pointer;
205
  }
206
 
207
- .post-likes {
208
- padding: 0 16px;
209
- font-weight: bold;
210
- font-size: 14px;
211
- margin-bottom: 8px;
 
 
 
 
212
  }
213
 
214
- .post-caption {
215
- padding: 0 16px;
216
- font-size: 14px;
217
- margin-bottom: 8px;
 
218
  }
219
 
220
- .post-caption span {
 
 
 
 
221
  font-weight: bold;
222
- margin-left: 5px;
 
223
  }
224
 
225
- .post-comments {
226
- padding: 0 16px;
227
- color: #8e8e8e;
228
- font-size: 14px;
229
- margin-bottom: 8px;
230
- cursor: pointer;
231
  }
232
 
233
- .post-time {
234
- padding: 0 16px;
235
- color: #8e8e8e;
236
- font-size: 10px;
237
- text-transform: uppercase;
238
- margin-bottom: 8px;
239
  }
240
 
241
- .post-add-comment {
242
  display: flex;
243
- justify-content: space-between;
244
  align-items: center;
245
- padding: 16px;
246
- border-top: 1px solid #efefef;
247
- }
248
-
249
- .post-add-comment input {
250
- border: none;
251
- outline: none;
252
- width: 90%;
253
- font-size: 14px;
254
- }
255
-
256
- .post-add-comment button {
257
- background: none;
258
- border: none;
259
- color: #0095f6;
260
  font-weight: bold;
261
- font-size: 14px;
262
- cursor: pointer;
263
- opacity: 0.3;
264
  }
265
 
266
- .sidebar {
267
- width: 293px;
268
- margin-right: 28px;
269
- position: sticky;
270
- top: 90px;
271
- height: fit-content;
 
272
  }
273
 
274
- .user-profile {
275
  display: flex;
276
  align-items: center;
277
- margin-bottom: 24px;
278
- }
279
-
280
- .user-profile img {
281
- width: 56px;
282
- height: 56px;
283
- border-radius: 50%;
284
- margin-left: 16px;
285
- object-fit: cover;
286
  }
287
 
288
- .user-info span:first-child {
289
- font-weight: bold;
290
- font-size: 14px;
291
  }
292
 
293
- .user-info span:last-child {
294
- color: #8e8e8e;
295
  font-size: 14px;
 
296
  }
297
 
298
- .switch-btn {
299
- margin-right: auto;
300
  color: #0095f6;
301
  font-weight: bold;
302
- font-size: 12px;
303
- cursor: pointer;
304
- }
305
-
306
- .suggestions-header {
307
- display: flex;
308
- justify-content: space-between;
309
- margin-bottom: 16px;
310
- }
311
-
312
- .suggestions-header span:first-child {
313
- color: #8e8e8e;
314
- font-weight: bold;
315
- font-size: 14px;
316
  }
317
 
318
- .suggestions-header span:last-child {
319
- font-weight: bold;
320
  font-size: 12px;
321
- cursor: pointer;
322
- }
323
-
324
- .suggestion {
325
- display: flex;
326
- align-items: center;
327
- margin-bottom: 16px;
328
- }
329
-
330
- .suggestion img {
331
- width: 32px;
332
- height: 32px;
333
- border-radius: 50%;
334
- margin-left: 12px;
335
- object-fit: cover;
336
- }
337
-
338
- .suggestion-info span:first-child {
339
- font-weight: bold;
340
- font-size: 14px;
341
  }
342
 
343
- .suggestion-info span:last-child {
 
 
 
 
 
344
  color: #8e8e8e;
345
  font-size: 12px;
346
  }
347
 
348
- .follow-btn {
349
- margin-right: auto;
350
- color: #0095f6;
351
- font-weight: bold;
352
  font-size: 12px;
353
- cursor: pointer;
 
 
354
  }
355
 
356
- .footer {
357
- margin-top: 30px;
358
- color: #c7c7c7;
359
- font-size: 11px;
360
- line-height: 1.5;
361
  }
362
 
363
- .footer-links {
364
- display: flex;
365
- flex-wrap: wrap;
366
- margin-bottom: 16px;
 
 
367
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
368
 
369
- .footer-links a {
370
- color: #8e8e8e;
371
- text-decoration: none;
372
- margin-left: 8px;
373
- font-size: 11px;
374
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
375
 
376
- /* صفحة الريلز */
377
- .reels-page {
378
- display: none;
379
- width: 100%;
380
- background-color: black;
381
- color: white;
382
- height: 100vh;
383
- overflow: hidden;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
384
  }
385
 
386
- .reels-header {
387
- position: fixed;
388
- top: 0;
389
- width: 100%;
390
- display: flex;
391
- justify-content: space-between;
392
- padding: 15px;
393
- z-index: 100;
 
 
 
 
 
 
394
  }
395
 
396
- .reels-header i {
397
- font-size: 20px;
398
- cursor: pointer;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
399
  }
400
 
401
- .reels-container {
402
- display: flex;
403
- height: 100vh;
404
- padding-top: 50px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
405
  }
406
 
407
- .reels-sidebar {
408
- width: 70px;
409
- display: flex;
410
- flex-direction: column;
411
- align-items: center;
412
- padding-top: 20px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
413
  }
414
 
415
- .reel-sidebar-item {
416
- display: flex;
417
- flex-direction: column;
418
- align-items: center;
419
- margin-bottom: 20px;
420
- cursor: pointer;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
421
  }
422
 
423
- .reel-sidebar-item i {
424
- font-size: 24px;
425
- margin-bottom: 5px;
426
- }
 
427
 
428
- .reel-sidebar-item span {
429
- font-size: 12px;
430
- }
 
431
 
432
- .reels-content {
433
- flex: 1;
434
- display: flex;
435
- justify-content: center;
436
- align-items: center;
437
- }
438
-
439
- .reel-video {
440
- width: 300px;
441
- height: 500px;
442
- background-color: #333;
443
- border-radius: 10px;
444
- position: relative;
445
- overflow: hidden;
446
- }
447
-
448
- .reel-video video {
449
- width: 100%;
450
- height: 100%;
451
- object-fit: cover;
452
- }
453
-
454
- .reel-info {
455
- position: absolute;
456
- bottom: 20px;
457
- left: 10px;
458
- right: 10px;
459
- }
460
-
461
- .reel-user {
462
- display: flex;
463
- align-items: center;
464
- margin-bottom: 10px;
465
- }
466
-
467
- .reel-user img {
468
- width: 30px;
469
- height: 30px;
470
- border-radius: 50%;
471
- margin-left: 10px;
472
- object-fit: cover;
473
- }
474
-
475
- .reel-username {
476
- font-weight: bold;
477
- font-size: 14px;
478
- }
479
-
480
- .reel-follow {
481
- margin-right: auto;
482
- font-size: 12px;
483
- color: #0095f6;
484
- cursor: pointer;
485
- }
486
-
487
- .reel-music {
488
- display: flex;
489
- align-items: center;
490
- font-size: 12px;
491
- margin-bottom: 10px;
492
- }
493
-
494
- .reel-music i {
495
- font-size: 14px;
496
- margin-left: 5px;
497
- }
498
-
499
- .reel-caption {
500
- font-size: 13px;
501
- margin-bottom: 10px;
502
- }
503
-
504
- .reel-actions {
505
- position: absolute;
506
- right: 10px;
507
- bottom: 20px;
508
- display: flex;
509
- flex-direction: column;
510
- align-items: center;
511
- }
512
-
513
- .reel-action {
514
- display: flex;
515
- flex-direction: column;
516
- align-items: center;
517
- margin-bottom: 20px;
518
- }
519
-
520
- .reel-action i {
521
- font-size: 24px;
522
- margin-bottom: 5px;
523
- }
524
-
525
- .reel-action span {
526
- font-size: 12px;
527
- }
528
-
529
- /* صفحة إنشاء منشور جديد */
530
- .create-post-page {
531
- display: none;
532
- position: fixed;
533
- top: 0;
534
- left: 0;
535
- width: 100%;
536
- height: 100%;
537
- background-color: white;
538
- z-index: 1000;
539
- }
540
-
541
- .create-post-header {
542
- display: flex;
543
- justify-content: space-between;
544
- align-items: center;
545
- padding: 10px 15px;
546
- border-bottom: 1px solid #dbdbdb;
547
- }
548
-
549
- .create-post-header span {
550
- font-weight: bold;
551
- font-size: 16px;
552
- }
553
-
554
- .create-post-header button {
555
- background: none;
556
- border: none;
557
- color: #0095f6;
558
- font-weight: bold;
559
- font-size: 14px;
560
- cursor: pointer;
561
- }
562
-
563
- .create-post-content {
564
- display: flex;
565
- flex-direction: column;
566
- align-items: center;
567
- justify-content: center;
568
- height: calc(100% - 50px);
569
- }
570
-
571
- .create-post-icon {
572
- font-size: 50px;
573
- margin-bottom: 20px;
574
- }
575
-
576
- .create-post-text {
577
- font-size: 20px;
578
- margin-bottom: 20px;
579
- }
580
-
581
- .create-post-btn {
582
- background-color: #0095f6;
583
- color: white;
584
- border: none;
585
- border-radius: 4px;
586
- padding: 8px 16px;
587
- font-weight: bold;
588
- cursor: pointer;
589
- }
590
-
591
- .file-input {
592
- display: none;
593
- }
594
-
595
- /* صفحة تعديل الفيديو */
596
- .edit-video-page {
597
- display: none;
598
- position: fixed;
599
- top: 0;
600
- left: 0;
601
- width: 100%;
602
- height: 100%;
603
- background-color: white;
604
- z-index: 1000;
605
- }
606
-
607
- .edit-video-header {
608
- display: flex;
609
- justify-content: space-between;
610
- align-items: center;
611
- padding: 10px 15px;
612
- border-bottom: 1px solid #dbdbdb;
613
- }
614
-
615
- .edit-video-header span {
616
- font-weight: bold;
617
- font-size: 16px;
618
- }
619
-
620
- .edit-video-header button {
621
- background: none;
622
- border: none;
623
- color: #0095f6;
624
- font-weight: bold;
625
- font-size: 14px;
626
- cursor: pointer;
627
- }
628
-
629
- .edit-video-container {
630
- display: flex;
631
- height: calc(100% - 50px);
632
- }
633
-
634
- .video-preview-container {
635
- flex: 1;
636
- display: flex;
637
- justify-content: center;
638
- align-items: center;
639
- background-color: #000;
640
- }
641
-
642
- .video-preview {
643
- max-width: 100%;
644
- max-height: 100%;
645
- }
646
-
647
- .edit-tools {
648
- width: 300px;
649
- border-left: 1px solid #dbdbdb;
650
- padding: 20px;
651
- overflow-y: auto;
652
- }
653
-
654
- .edit-section {
655
- margin-bottom: 20px;
656
- }
657
-
658
- .edit-section-title {
659
- font-weight: bold;
660
- margin-bottom: 10px;
661
- display: block;
662
- }
663
-
664
- .filter-options {
665
- display: grid;
666
- grid-template-columns: repeat(3, 1fr);
667
- gap: 10px;
668
- }
669
-
670
- .filter-option {
671
- display: flex;
672
- flex-direction: column;
673
- align-items: center;
674
- cursor: pointer;
675
- }
676
-
677
- .filter-p preview {
678
- width: 60px;
679
- height: 60px;
680
- border-radius: 5px;
681
- margin-bottom: 5px;
682
- background-size: cover;
683
- }
684
-
685
- .filter-name {
686
- font-size: 12px;
687
- }
688
-
689
- .trim-container {
690
- position: relative;
691
- height: 50px;
692
- background-color: #efefef;
693
- border-radius: 5px;
694
- margin-bottom: 10px;
695
- }
696
-
697
- .trim-track {
698
- position: absolute;
699
- top: 0;
700
- left: 0;
701
- right: 0;
702
- bottom: 0;
703
- display: flex;
704
- align-items: center;
705
- padding: 0 10px;
706
- }
707
-
708
- .trim-handle {
709
- width: 4px;
710
- height: 100%;
711
- background-color: #0095f6;
712
- position: absolute;
713
- top: 0;
714
- cursor: ew-resize;
715
- }
716
-
717
- .trim-handle-left {
718
- left: 10px;
719
- }
720
-
721
- .trim-handle-right {
722
- right: 10px;
723
- }
724
-
725
- .trim-preview {
726
- height: 100%;
727
- background-color: #ccc;
728
- flex: 1;
729
- border-radius: 3px;
730
- overflow: hidden;
731
- }
732
-
733
- .trim-preview-frames {
734
- display: flex;
735
- height: 100%;
736
- }
737
-
738
- .trim-preview-frame {
739
- flex: 1;
740
- background-size: cover;
741
- background-position: center;
742
- }
743
-
744
- .audio-options {
745
- display: flex;
746
- flex-direction: column;
747
- gap: 10px;
748
- }
749
-
750
- .audio-option {
751
- display: flex;
752
- align-items: center;
753
- }
754
-
755
- .audio-option input[type="range"] {
756
- flex: 1;
757
- margin: 0 10px;
758
- }
759
-
760
- .audio-option span {
761
- width: 30px;
762
- text-align: center;
763
- }
764
-
765
- .effect-options {
766
- display: grid;
767
- grid-template-columns: repeat(3, 1fr);
768
- gap: 10px;
769
- }
770
-
771
- .effect-option {
772
- display: flex;
773
- flex-direction: column;
774
- align-items: center;
775
- cursor: pointer;
776
- }
777
-
778
- .effect-icon {
779
- width: 40px;
780
- height: 40px;
781
- border-radius: 50%;
782
- background-color: #efefef;
783
- display: flex;
784
- justify-content: center;
785
- align-items: center;
786
- margin-bottom: 5px;
787
- }
788
-
789
- .effect-name {
790
- font-size: 12px;
791
- }
792
-
793
- /* صفحة الملف الشخصي */
794
- .profile-page {
795
- display: none;
796
- max-width: 935px;
797
- margin: 0 auto;
798
- padding-top: 30px;
799
- }
800
-
801
- .profile-header {
802
- display: flex;
803
- padding: 30px 20px;
804
- }
805
-
806
- .profile-avatar {
807
- width: 150px;
808
- height: 150px;
809
- border-radius: 50%;
810
- object-fit: cover;
811
- margin-left: 50px;
812
- }
813
-
814
- .profile-info {
815
- flex: 1;
816
- }
817
-
818
- .profile-username {
819
- display: flex;
820
- align-items: center;
821
- margin-bottom: 20px;
822
- }
823
-
824
- .profile-username span {
825
- font-size: 28px;
826
- font-weight: 300;
827
- }
828
-
829
- .profile-edit-btn {
830
- background-color: #efefef;
831
- border: 1px solid #dbdbdb;
832
- border-radius: 4px;
833
- padding: 5px 9px;
834
- font-weight: bold;
835
- margin: 0 10px;
836
- cursor: pointer;
837
- }
838
-
839
- .profile-settings-btn {
840
- font-size: 22px;
841
- cursor: pointer;
842
- }
843
-
844
- .profile-stats {
845
- display: flex;
846
- margin-bottom: 20px;
847
- }
848
-
849
- .profile-stat {
850
- margin-left: 40px;
851
- }
852
-
853
- .profile-stat span:first-child {
854
- font-weight: bold;
855
- }
856
-
857
- .profile-name {
858
- font-weight: bold;
859
- margin-bottom: 5px;
860
- }
861
-
862
- .profile-bio {
863
- margin-bottom: 5px;
864
- }
865
-
866
- .profile-website {
867
- color: #00376b;
868
- text-decoration: none;
869
- }
870
-
871
- .profile-tabs {
872
- display: flex;
873
- justify-content: center;
874
- border-top: 1px solid #dbdbdb;
875
- }
876
-
877
- .profile-tab {
878
- display: flex;
879
- align-items: center;
880
- padding: 16px;
881
- cursor: pointer;
882
- }
883
-
884
- .profile-tab i {
885
- margin-left: 5px;
886
- }
887
-
888
- .profile-tab.active {
889
- border-top: 1px solid #262626;
890
- margin-top: -1px;
891
- }
892
-
893
- .profile-posts {
894
- display: grid;
895
- grid-template-columns: repeat(3, 1fr);
896
- gap: 3px;
897
- }
898
-
899
- .profile-post {
900
- aspect-ratio: 1/1;
901
- background-color: #efefef;
902
- position: relative;
903
- cursor: pointer;
904
- }
905
-
906
- .profile-post img {
907
- width: 100%;
908
- height: 100%;
909
- object-fit: cover;
910
- }
911
-
912
- .profile-post-overlay {
913
- position: absolute;
914
- top: 0;
915
- left: 0;
916
- right: 0;
917
- bottom: 0;
918
- background-color: rgba(0, 0, 0, 0.3);
919
- display: none;
920
- justify-content: center;
921
- align-items: center;
922
- color: white;
923
- }
924
-
925
- .profile-post:hover .profile-post-overlay {
926
- display: flex;
927
- }
928
-
929
- .profile-post-stat {
930
- display: flex;
931
- align-items: center;
932
- margin: 0 10px;
933
- }
934
-
935
- .profile-post-stat i {
936
- margin-left: 5px;
937
- }
938
-
939
- /* التجاوب مع الشاشات الصغيرة */
940
- @media (max-width: 935px) {
941
- .sidebar {
942
- display: none;
943
- }
944
-
945
- .posts {
946
- margin: 0 auto;
947
- }
948
- }
949
-
950
- @media (max-width: 614px) {
951
- .posts {
952
- width: 100%;
953
- }
954
-
955
- .edit-video-container {
956
- flex-direction: column;
957
- }
958
-
959
- .edit-tools {
960
- width: 100%;
961
- border-left: none;
962
- border-top: 1px solid #dbdbdb;
963
- }
964
- }
965
-
966
- /* تحسينات إضافية */
967
- .like-animation {
968
- animation: like 0.5s ease-in-out;
969
- }
970
-
971
- @keyframes like {
972
- 0% { transform: scale(1); }
973
- 50% { transform: scale(1.2); }
974
- 100% { transform: scale(1); }
975
- }
976
-
977
- .story-seen {
978
- background: #dbdbdb !important;
979
- }
980
-
981
- .story-seen img {
982
- opacity: 0.7;
983
- }
984
-
985
- .post-image-container {
986
- position: relative;
987
- }
988
-
989
- .double-tap-heart {
990
- position: absolute;
991
- top: 50%;
992
- left: 50%;
993
- transform: translate(-50%, -50%);
994
- font-size: 80px;
995
- color: white;
996
- opacity: 0;
997
- pointer-events: none;
998
- }
999
-
1000
- .show-heart {
1001
- animation: heart 1s ease-in-out;
1002
- }
1003
-
1004
- @keyframes heart {
1005
- 0% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
1006
- 15% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.2); }
1007
- 30% { transform: translate(-50%, -50%) scale(0.95); }
1008
- 45%, 80% { opacity: 0.9; transform: translate(-50%, -50%) scale(1); }
1009
- 100% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
1010
- }
1011
-
1012
- /* تحسينات للفيديو */
1013
- .video-controls {
1014
- position: absolute;
1015
- bottom: 0;
1016
- left: 0;
1017
- right: 0;
1018
- background: linear-gradient(transparent, rgba(0,0,0,0.5));
1019
- padding: 10px;
1020
- display: flex;
1021
- flex-direction: column;
1022
- }
1023
-
1024
- .video-progress {
1025
- width: 100%;
1026
- height: 3px;
1027
- background-color: rgba(255,255,255,0.3);
1028
- margin-bottom: 10px;
1029
- cursor: pointer;
1030
- }
1031
-
1032
- .video-progress-filled {
1033
- height: 100%;
1034
- background-color: #0095f6;
1035
- width: 0%;
1036
- }
1037
-
1038
- .video-controls-bottom {
1039
- display: flex;
1040
- justify-content: space-between;
1041
- align-items: center;
1042
- }
1043
-
1044
- .video-controls-left {
1045
- display: flex;
1046
- align-items: center;
1047
- }
1048
-
1049
- .video-controls-right {
1050
- display: flex;
1051
- align-items: center;
1052
- }
1053
-
1054
- .video-control-btn {
1055
- color: white;
1056
- background: none;
1057
- border: none;
1058
- font-size: 20px;
1059
- margin: 0 10px;
1060
- cursor: pointer;
1061
- }
1062
-
1063
- .video-time {
1064
- color: white;
1065
- font-size: 12px;
1066
- }
1067
-
1068
- /* تحسينات لتعديل الفيديو */
1069
- .edit-tool-btn {
1070
- background-color: #efefef;
1071
- border: none;
1072
- border-radius: 5px;
1073
- padding: 8px 12px;
1074
- margin-right: 10px;
1075
- cursor: pointer;
1076
- display: flex;
1077
- align-items: center;
1078
- }
1079
-
1080
- .edit-tool-btn i {
1081
- margin-left: 5px;
1082
- }
1083
-
1084
- .edit-tool-btn.active {
1085
- background-color: #0095f6;
1086
- color: white;
1087
- }
1088
-
1089
- .speed-options {
1090
- display: flex;
1091
- flex-wrap: wrap;
1092
- gap: 5px;
1093
- }
1094
-
1095
- .speed-option {
1096
- background-color: #efefef;
1097
- border-radius: 15px;
1098
- padding: 5px 10px;
1099
- font-size: 12px;
1100
- cursor: pointer;
1101
- }
1102
-
1103
- .speed-option.active {
1104
- background-color: #0095f6;
1105
- color: white;
1106
- }
1107
-
1108
- .text-editor {
1109
- display: none;
1110
- position: absolute;
1111
- top: 50%;
1112
- left: 50%;
1113
- transform: translate(-50%, -50%);
1114
- z-index: 10;
1115
- background-color: white;
1116
- padding: 15px;
1117
- border-radius: 8px;
1118
- box-shadow: 0 0 10px rgba(0,0,0,0.2);
1119
- }
1120
-
1121
- .text-editor input {
1122
- width: 100%;
1123
- padding: 8px;
1124
- margin-bottom: 10px;
1125
- border: 1px solid #dbdbdb;
1126
- border-radius: 4px;
1127
- }
1128
-
1129
- .text-editor-buttons {
1130
- display: flex;
1131
- justify-content: space-between;
1132
- }
1133
-
1134
- .text-editor-btn {
1135
- padding: 5px 10px;
1136
- border: none;
1137
- border-radius: 4px;
1138
- cursor: pointer;
1139
- }
1140
-
1141
- .text-editor-cancel {
1142
- background-color: #efefef;
1143
- }
1144
-
1145
- .text-editor-apply {
1146
- background-color: #0095f6;
1147
- color: white;
1148
- }
1149
-
1150
- .video-text {
1151
- position: absolute;
1152
- color: white;
1153
- font-size: 24px;
1154
- text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
1155
- cursor: move;
1156
- }
1157
-
1158
- /* صفحة المحادثات */
1159
- .messages-page {
1160
- display: none;
1161
- position: fixed;
1162
- top: 0;
1163
- left: 0;
1164
- width: 100%;
1165
- height: 100%;
1166
- background-color: white;
1167
- z-index: 1000;
1168
- }
1169
-
1170
- .messages-header {
1171
- display: flex;
1172
- justify-content: space-between;
1173
- align-items: center;
1174
- padding: 10px 15px;
1175
- border-bottom: 1px solid #dbdbdb;
1176
- }
1177
-
1178
- .messages-header span {
1179
- font-weight: bold;
1180
- font-size: 16px;
1181
- }
1182
-
1183
- .messages-header i {
1184
- font-size: 20px;
1185
- cursor: pointer;
1186
- }
1187
-
1188
- .messages-container {
1189
- height: calc(100% - 50px);
1190
- display: flex;
1191
- }
1192
-
1193
- .conversations-list {
1194
- width: 350px;
1195
- border-right: 1px solid #dbdbdb;
1196
- overflow-y: auto;
1197
- }
1198
-
1199
- .conversation {
1200
- display: flex;
1201
- align-items: center;
1202
- padding: 10px;
1203
- border-bottom: 1px solid #efefef;
1204
- cursor: pointer;
1205
- }
1206
-
1207
- .conversation:hover {
1208
- background-color: #fafafa;
1209
- }
1210
-
1211
- .conversation-avatar {
1212
- width: 50px;
1213
- height: 50px;
1214
- border-radius: 50%;
1215
- margin-left: 10px;
1216
- object-fit: cover;
1217
- }
1218
-
1219
- .conversation-info {
1220
- flex: 1;
1221
- }
1222
-
1223
- .conversation-username {
1224
- font-weight: bold;
1225
- font-size: 14px;
1226
- }
1227
-
1228
- .conversation-last-message {
1229
- font-size: 12px;
1230
- color: #8e8e8e;
1231
- margin-top: 3px;
1232
- }
1233
-
1234
- .conversation-time {
1235
- font-size: 10px;
1236
- color: #8e8e8e;
1237
- }
1238
-
1239
- .chat-container {
1240
- flex: 1;
1241
- display: flex;
1242
- flex-direction: column;
1243
- }
1244
-
1245
- .chat-header {
1246
- display: flex;
1247
- align-items: center;
1248
- padding: 10px;
1249
- border-bottom: 1px solid #dbdbdb;
1250
- }
1251
-
1252
- .chat-avatar {
1253
- width: 40px;
1254
- height: 40px;
1255
- border-radius: 50%;
1256
- margin-left: 10px;
1257
- object-fit: cover;
1258
- }
1259
-
1260
- .chat-username {
1261
- font-weight: bold;
1262
- flex: 1;
1263
- }
1264
-
1265
- .chat-messages {
1266
- flex: 1;
1267
- padding: 15px;
1268
- overflow-y: auto;
1269
- background-color: #fafafa;
1270
- }
1271
-
1272
- .message {
1273
- margin-bottom: 15px;
1274
- display: flex;
1275
- flex-direction: column;
1276
- }
1277
-
1278
- .message-sent {
1279
- align-items: flex-end;
1280
- }
1281
-
1282
- .message-received {
1283
- align-items: flex-start;
1284
- }
1285
-
1286
- .message-content {
1287
- max-width: 70%;
1288
- padding: 10px 15px;
1289
- border-radius: 18px;
1290
- font-size: 14px;
1291
- line-height: 1.4;
1292
- }
1293
-
1294
- .message-sent .message-content {
1295
- background-color: #0095f6;
1296
- color: white;
1297
- }
1298
-
1299
- .message-received .message-content {
1300
- background-color: #efefef;
1301
- color: #262626;
1302
- }
1303
-
1304
- .message-time {
1305
- font-size: 10px;
1306
- color: #8e8e8e;
1307
- margin-top: 5px;
1308
- }
1309
-
1310
- .chat-input-container {
1311
- display: flex;
1312
- align-items: center;
1313
- padding: 10px;
1314
- border-top: 1px solid #dbdbdb;
1315
- }
1316
-
1317
- .chat-input {
1318
- flex: 1;
1319
- border: none;
1320
- outline: none;
1321
- padding: 10px;
1322
- font-size: 14px;
1323
- }
1324
-
1325
- .chat-send-btn {
1326
- background: none;
1327
- border: none;
1328
- color: #0095f6;
1329
- font-weight: bold;
1330
- font-size: 14px;
1331
- cursor: pointer;
1332
- margin-right: 10px;
1333
- }
1334
-
1335
- /* صفحة القصص */
1336
- .story-viewer {
1337
- display: none;
1338
- position: fixed;
1339
- top: 0;
1340
- left: 0;
1341
- width: 100%;
1342
- height: 100%;
1343
- background-color: black;
1344
- z-index: 1000;
1345
- }
1346
-
1347
- .story-header {
1348
- position: absolute;
1349
- top: 0;
1350
- left: 0;
1351
- right: 0;
1352
- padding: 15px;
1353
- z-index: 10;
1354
- display: flex;
1355
- align-items: center;
1356
- }
1357
-
1358
- .story-progress-container {
1359
- position: absolute;
1360
- top: 0;
1361
- left: 0;
1362
- right: 0;
1363
- display: flex;
1364
- padding: 10px;
1365
- }
1366
-
1367
- .story-progress {
1368
- flex: 1;
1369
- height: 2px;
1370
- background-color: rgba(255,255,255,0.3);
1371
- margin: 0 2px;
1372
- overflow: hidden;
1373
- }
1374
-
1375
- .story-progress-filled {
1376
- height: 100%;
1377
- background-color: white;
1378
- width: 0%;
1379
- }
1380
-
1381
- .story-user {
1382
- display: flex;
1383
- align-items: center;
1384
- color: white;
1385
- flex: 1;
1386
- }
1387
-
1388
- .story-user-avatar {
1389
- width: 30px;
1390
- height: 30px;
1391
- border-radius: 50%;
1392
- margin-left: 10px;
1393
- object-fit: cover;
1394
- }
1395
-
1396
- .story-username {
1397
- font-weight: bold;
1398
- font-size: 14px;
1399
- }
1400
-
1401
- .story-time {
1402
- font-size: 12px;
1403
- margin-right: 10px;
1404
- }
1405
-
1406
- .story-close {
1407
- color: white;
1408
- font-size: 20px;
1409
- cursor: pointer;
1410
- }
1411
-
1412
- .story-content {
1413
- position: absolute;
1414
- top: 0;
1415
- left: 0;
1416
- right: 0;
1417
- bottom: 0;
1418
- display: flex;
1419
- justify-content: center;
1420
- align-items: center;
1421
- }
1422
-
1423
- .story-image {
1424
- max-width: 100%;
1425
- max-height: 100%;
1426
- }
1427
-
1428
- .story-video {
1429
- width: 100%;
1430
- height: 100%;
1431
- object-fit: contain;
1432
- }
1433
-
1434
- .story-footer {
1435
- position: absolute;
1436
- bottom: 20px;
1437
- left: 0;
1438
- right: 0;
1439
- display: flex;
1440
- flex-direction: column;
1441
- align-items: center;
1442
- z-index: 10;
1443
- }
1444
-
1445
- .story-reply-input {
1446
- width: 80%;
1447
- background-color: rgba(255,255,255,0.2);
1448
- border: none;
1449
- border-radius: 20px;
1450
- padding: 10px 15px;
1451
- color: white;
1452
- outline: none;
1453
- }
1454
-
1455
- .story-reply-input::placeholder {
1456
- color: rgba(255,255,255,0.7);
1457
- }
1458
-
1459
- .story-actions {
1460
- display: flex;
1461
- margin-top: 15px;
1462
- }
1463
-
1464
- .story-action {
1465
- color: white;
1466
- font-size: 24px;
1467
- margin: 0 15px;
1468
- cursor: pointer;
1469
- }
1470
-
1471
- /* صفحة إنشاء قصة */
1472
- .create-story-page {
1473
- display: none;
1474
- position: fixed;
1475
- top: 0;
1476
- left: 0;
1477
- width: 100%;
1478
- height: 100%;
1479
- background-color: white;
1480
- z-index: 1000;
1481
- }
1482
-
1483
- .create-story-header {
1484
- display: flex;
1485
- justify-content: space-between;
1486
- align-items: center;
1487
- padding: 10px 15px;
1488
- border-bottom: 1px solid #dbdbdb;
1489
- }
1490
-
1491
- .create-story-header span {
1492
- font-weight: bold;
1493
- font-size: 16px;
1494
- }
1495
-
1496
- .create-story-header i {
1497
- font-size: 20px;
1498
- cursor: pointer;
1499
- }
1500
-
1501
- .create-story-content {
1502
- height: calc(100% - 50px);
1503
- display: flex;
1504
- flex-direction: column;
1505
- align-items: center;
1506
- justify-content: center;
1507
- }
1508
-
1509
- .create-story-preview {
1510
- width: 100%;
1511
- max-height: 70%;
1512
- object-fit: contain;
1513
- margin-bottom: 20px;
1514
- }
1515
-
1516
- .create-story-options {
1517
- display: flex;
1518
- gap: 15px;
1519
- margin-bottom: 20px;
1520
- }
1521
-
1522
- .create-story-option {
1523
- display: flex;
1524
- flex-direction: column;
1525
- align-items: center;
1526
- cursor: pointer;
1527
- }
1528
-
1529
- .create-story-option i {
1530
- font-size: 24px;
1531
- margin-bottom: 5px;
1532
- }
1533
-
1534
- .create-story-btn {
1535
- background-color: #0095f6;
1536
- color: white;
1537
- border: none;
1538
- border-radius: 4px;
1539
- padding: 8px 16px;
1540
- font-weight: bold;
1541
- cursor: pointer;
1542
- }
1543
- </style>
1544
- </head>
1545
- <body>
1546
- <!-- الصفحة الرئيسية -->
1547
- <div class="main-page" id="mainPage">
1548
- <header class="header">
1549
- <div class="header-container">
1550
- <div class="header-logo">توتير</div>
1551
- <div class="search-bar">
1552
- <i class="fas fa-search"></i>
1553
- <input type="text" placeholder="بحث">
1554
- </div>
1555
- <div class="nav-icons">
1556
- <i class="fas fa-home active" id="homeBtn"></i>
1557
- <i class="fab fa-facebook-messenger" id="messagesBtn"></i>
1558
- <i class="fas fa-plus-square" id="createPostBtn"></i>
1559
- <i class="fas fa-film" id="reelsBtn"></i>
1560
- <i class="far fa-heart"></i>
1561
- <img src="https://randomuser.me/api/portraits/women/44.jpg" class="profile-pic" id="profileBtn">
1562
- </div>
1563
- </div>
1564
- </header>
1565
-
1566
- <div class="content">
1567
- <div class="posts">
1568
- <!-- القصص -->
1569
- <div class="stories">
1570
- <div class="story" id="myStory" onclick="showCreateStoryPage()">
1571
- <div class="story-avatar">
1572
- <img src="https://randomuser.me/api/portraits/women/44.jpg">
1573
- </div>
1574
- <div class="story-username">حسابك</div>
1575
- </div>
1576
- <div class="story" onclick="viewStory('ahmed')">
1577
- <div class="story-avatar">
1578
- <img src="https://randomuser.me/api/portraits/men/32.jpg">
1579
- </div>
1580
- <div class="story-username">أحمد</div>
1581
- </div>
1582
- <div class="story" onclick="viewStory('sara')">
1583
- <div class="story-avatar">
1584
- <img src="https://randomuser.me/api/portraits/women/12.jpg">
1585
- </div>
1586
- <div class="story-username">سارة</div>
1587
- </div>
1588
- <div class="story" onclick="viewStory('mohammed')">
1589
- <div class="story-avatar">
1590
- <img src="https://randomuser.me/api/portraits/men/75.jpg">
1591
- </div>
1592
- <div class="story-username">محمد</div>
1593
- </div>
1594
- <div class="story" onclick="viewStory('noor')">
1595
- <div class="story-avatar">
1596
- <img src="https://randomuser.me/api/portraits/women/33.jpg">
1597
- </div>
1598
- <div class="story-username">نور</div>
1599
- </div>
1600
- <div class="story" onclick="viewStory('khaled')">
1601
- <div class="story-avatar">
1602
- <img src="https://randomuser.me/api/portraits/men/55.jpg">
1603
- </div>
1604
- <div class="story-username">خالد</div>
1605
- </div>
1606
- <div class="story" onclick="viewStory('laila')">
1607
- <div class="story-avatar">
1608
- <img src="https://randomuser.me/api/portraits/women/22.jpg">
1609
- </div>
1610
- <div class="story-username">ليلى</div>
1611
- </div>
1612
- </div>
1613
-
1614
- <!-- المنشورات -->
1615
- <div class="post">
1616
- <div class="post-header">
1617
- <div class="post-user">
1618
- <img src="https://randomuser.me/api/portraits/men/32.jpg">
1619
- <span>أحمد</span>
1620
- </div>
1621
- <i class="fas fa-ellipsis-h post-more"></i>
1622
- </div>
1623
- <div class="post-image-container">
1624
- <video class="post-image" controls>
1625
- <source src="https://assets.mixkit.co/videos/preview/mixkit-man-walking-under-a-tunnel-3462-large.mp4" type="video/mp4">
1626
- </video>
1627
- <div class="double-tap-heart">
1628
- <i class="fas fa-heart"></i>
1629
- </div>
1630
- </div>
1631
- <div class="post-actions">
1632
- <div class="post-actions-left">
1633
- <i class="far fa-heart like-btn"></i>
1634
- <i class="far fa-comment"></i>
1635
- <i class="far fa-paper-plane"></i>
1636
- </div>
1637
- <i class="far fa-bookmark"></i>
1638
- </div>
1639
- <div class="post-likes">1,234 إعجاب</div>
1640
- <div class="post-caption">
1641
- <span>أحمد</span>
1642
- هذا الفيديو من رحلتي الأخيرة إلى الجبال. الطبيعة جميلة جدًا!
1643
- </div>
1644
- <div class="post-comments">عرض جميع التعليقات (45)</div>
1645
- <div class="post-time">منذ ساعتين</div>
1646
- <div class="post-add-comment">
1647
- <input type="text" placeholder="أضف تعليقًا...">
1648
- <button>نشر</button>
1649
- </div>
1650
- </div>
1651
-
1652
- <div class="post">
1653
- <div class="post-header">
1654
- <div class="post-user">
1655
- <img src="https://randomuser.me/api/portraits/women/12.jpg">
1656
- <span>سارة</span>
1657
- </div>
1658
- <i class="fas fa-ellipsis-h post-more"></i>
1659
- </div>
1660
- <div class="post-image-container">
1661
- <video class="post-image" controls>
1662
- <source src="https://assets.mixkit.co/videos/preview/mixkit-woman-dancing-under-neon-lights-1230-large.mp4" type="video/mp4">
1663
- </video>
1664
- <div class="double-tap-heart">
1665
- <i class="fas fa-heart"></i>
1666
- </div>
1667
- </div>
1668
- <div class="post-actions">
1669
- <div class="post-actions-left">
1670
- <i class="far fa-heart like-btn"></i>
1671
- <i class="far fa-comment"></i>
1672
- <i class="far fa-paper-plane"></i>
1673
- </div>
1674
- <i class="far fa-bookmark"></i>
1675
- </div>
1676
- <div class="post-likes">892 إعجاب</div>
1677
- <div class="post-caption">
1678
- <span>سارة</span>
1679
- ريلز من حفلتي الأخيرة مع الأصدقاء! 💃
1680
- </div>
1681
- <div class="post-comments">عرض جميع التعليقات (23)</div>
1682
- <div class="post-time">منذ 5 ساعات</div>
1683
- <div class="post-add-comment">
1684
- <input type="text" placeholder="أضف تعليقًا...">
1685
- <button>نشر</button>
1686
- </div>
1687
- </div>
1688
- </div>
1689
-
1690
- <!-- الشريط الجانبي -->
1691
- <div class="sidebar">
1692
- <div class="user-profile">
1693
- <img src="https://randomuser.me/api/portraits/women/44.jpg">
1694
- <div class="user-info">
1695
- <span>نورا</span>
1696
- <span>نورا أحمد</span>
1697
- </div>
1698
- <button class="switch-btn">تبديل</button>
1699
- </div>
1700
-
1701
- <div class="suggestions">
1702
- <div class="suggestions-header">
1703
- <span>اقتراحات لك</span>
1704
- <span>عرض الكل</span>
1705
- </div>
1706
-
1707
- <div class="suggestion">
1708
- <img src="https://randomuser.me/api/portraits/women/65.jpg">
1709
- <div class="suggestion-info">
1710
- <span>ريم</span>
1711
- <span>متابع من قبل أحمد</span>
1712
- </div>
1713
- <button class="follow-btn">متابعة</button>
1714
- </div>
1715
-
1716
- <div class="suggestion">
1717
- <img src="https://randomuser.me/api/portraits/men/22.jpg">
1718
- <div class="suggestion-info">
1719
- <span>يوسف</span>
1720
- <span>جديد على توتير</span>
1721
- </div>
1722
- <button class="follow-btn">متابعة</button>
1723
- </div>
1724
-
1725
- <div class="suggestion">
1726
- <img src="https://randomuser.me/api/portraits/women/18.jpg">
1727
- <div class="suggestion-info">
1728
- <span>هناء</span>
1729
- <span>متابع من قبل سارة</span>
1730
- </div>
1731
- <button class="follow-btn">متابعة</button>
1732
- </div>
1733
-
1734
- <div class="suggestion">
1735
- <img src="https://randomuser.me/api/portraits/men/45.jpg">
1736
- <div class="suggestion-info">
1737
- <span>علي</span>
1738
- <span>متابع من قبل محمد</span>
1739
- </div>
1740
- <button class="follow-btn">متابعة</button>
1741
- </div>
1742
- </div>
1743
-
1744
- <div class="footer">
1745
- <div class="footer-links">
1746
- <a href="#">معلومات</a>
1747
- <a href="#">مساعدة</a>
1748
- <a href="#">الصحافة</a>
1749
- <a href="#">وظائف</a>
1750
- <a href="#">الخصوصية</a>
1751
- <a href="#">الشروط</a>
1752
- <a href="#">المواقع</a>
1753
- <a href="#">الحسابات الأكثر تأثيراً</a>
1754
- <a href="#">هاشتاقات</a>
1755
- <a href="#">اللغة</a>
1756
- </div>
1757
- <span>© 2023 توتير من فيسبوك</span>
1758
- </div>
1759
- </div>
1760
- </div>
1761
- </div>
1762
-
1763
- <!-- صفحة الريلز -->
1764
- <div class="reels-page" id="reelsPage">
1765
- <div class="reels-header">
1766
- <i class="fas fa-arrow-left" id="reelsBackBtn"></i>
1767
- <span>الريلز</span>
1768
- <i class="fas fa-camera"></i>
1769
- </div>
1770
-
1771
- <div class="reels-container">
1772
- <div class="reels-sidebar">
1773
- <div class="reel-sidebar-item">
1774
- <i class="fas fa-heart"></i>
1775
- <span>2.1K</span>
1776
- </div>
1777
- <div class="reel-sidebar-item">
1778
- <i class="far fa-comment"></i>
1779
- <span>143</span>
1780
- </div>
1781
- <div class="reel-sidebar-item">
1782
- <i class="far fa-paper-plane"></i>
1783
- <span>مشاركة</span>
1784
- </div>
1785
- <div class="reel-sidebar-item">
1786
- <i class="fas fa-ellipsis-h"></i>
1787
- </div>
1788
- <div class="reel-sidebar-item">
1789
- <img src="https://randomuser.me/api/portraits/women/44.jpg" style="width: 24px; height: 24px; border-radius: 50%;">
1790
- </div>
1791
- </div>
1792
-
1793
- <div class="reels-content">
1794
- <div class="reel-video">
1795
- <video src="https://assets.mixkit.co/videos/preview/mixkit-woman-dancing-under-neon-lights-1230-large.mp4" autoplay loop></video>
1796
- <div class="reel-info">
1797
- <div class="reel-user">
1798
- <img src="https://randomuser.me/api/portraits/women/33.jpg">
1799
- <span class="reel-username">نور</span>
1800
- <span class="reel-follow">متابعة</span>
1801
- </div>
1802
- <div class="reel-music">
1803
- <i class="fas fa-music"></i>
1804
- <span>الصوت الأصلي - نور</span>
1805
- </div>
1806
- <div class="reel-caption">استمتع بيومي مع الأصدقاء 💃 #رقص #أصدقاء</div>
1807
- </div>
1808
- <div class="reel-actions">
1809
- <div class="reel-action">
1810
- <i class="fas fa-heart"></i>
1811
- <span>2.1K</span>
1812
- </div>
1813
- <div class="reel-action">
1814
- <i class="far fa-comment"></i>
1815
- <span>143</span>
1816
- </div>
1817
- <div class="reel-action">
1818
- <i class="far fa-paper-plane"></i>
1819
- <span>مشاركة</span>
1820
- </div>
1821
- </div>
1822
- </div>
1823
- </div>
1824
- </div>
1825
- </div>
1826
-
1827
- <!-- صفحة إنشاء منشور جديد -->
1828
- <div class="create-post-page" id="createPostPage">
1829
- <div class="create-post-header">
1830
- <i class="fas fa-arrow-left" id="createPostBackBtn"></i>
1831
- <span>إنشاء منشور جديد</span>
1832
- <button id="createPostNextBtn" disabled>التالي</button>
1833
- </div>
1834
-
1835
- <div class="create-post-content">
1836
- <i class="fas fa-cloud-upload-alt create-post-icon"></i>
1837
- <div class="create-post-text">اسحب الفيديوهات والصور إلى هنا</div>
1838
- <button class="create-post-btn" id="selectMediaBtn">اختر من الجهاز</button>
1839
- <input type="file" id="mediaInput" class="file-input" accept="image/*, video/*" multiple>
1840
- </div>
1841
- </div>
1842
-
1843
- <!-- صفحة تعديل ��لفيديو -->
1844
- <div class="edit-video-page" id="editVideoPage">
1845
- <div class="edit-video-header">
1846
- <i class="fas fa-arrow-left" id="editVideoBackBtn"></i>
1847
- <span>تعديل الفيديو</span>
1848
- <button id="editVideoNextBtn">مشاركة</button>
1849
- </div>
1850
-
1851
- <div class="edit-video-container">
1852
- <div class="video-preview-container">
1853
- <video id="videoPreview" class="video-preview" controls></video>
1854
- <div class="video-controls" id="videoControls">
1855
- <div class="video-progress" id="videoProgress">
1856
- <div class="video-progress-filled" id="videoProgressFilled"></div>
1857
- </div>
1858
- <div class="video-controls-bottom">
1859
- <div class="video-controls-left">
1860
- <button class="video-control-btn" id="videoPlayBtn"><i class="fas fa-play"></i></button>
1861
- <span class="video-time" id="videoTime">0:00 / 0:00</span>
1862
- </div>
1863
- <div class="video-controls-right">
1864
- <button class="video-control-btn" id="videoMuteBtn"><i class="fas fa-volume-up"></i></button>
1865
- <button class="video-control-btn" id="videoFullscreenBtn"><i class="fas fa-expand"></i></button>
1866
- </div>
1867
- </div>
1868
- </div>
1869
- </div>
1870
-
1871
- <div class="edit-tools">
1872
- <div class="edit-section">
1873
- <span class="edit-section-title">أدوات التعديل</span>
1874
- <div style="display: flex; margin-bottom: 15px;">
1875
- <button class="edit-tool-btn active" data-tool="trim"><i class="fas fa-cut"></i> قص</button>
1876
- <button class="edit-tool-btn" data-tool="filters"><i class="fas fa-sliders-h"></i> فلتر</button>
1877
- <button class="edit-tool-btn" data-tool="text"><i class="fas fa-font"></i> نص</button>
1878
- </div>
1879
- </div>
1880
-
1881
- <div class="edit-section" id="trimSection">
1882
- <span class="edit-section-title">قص الفيديو</span>
1883
- <div class="trim-container">
1884
- <div class="trim-track">
1885
- <div class="trim-handle trim-handle-left" id="trimHandleLeft"></div>
1886
- <div class="trim-preview">
1887
- <div class="trim-preview-frames" id="trimPreviewFrames"></div>
1888
- </div>
1889
- <div class="trim-handle trim-handle-right" id="trimHandleRight"></div>
1890
- </div>
1891
- </div>
1892
- <div style="display: flex; justify-content: space-between; font-size: 12px;">
1893
- <span id="trimStartTime">
1894
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>نظام التسجيل | توتير</title>
7
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
  <style>
9
  * {
 
16
  body {
17
  background-color: #fafafa;
18
  color: #262626;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  display: flex;
20
+ justify-content: center;
21
  align-items: center;
22
+ min-height: 100vh;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
23
  }
24
 
25
+ .auth-container {
 
 
 
 
 
 
 
26
  display: flex;
27
+ flex-direction: column;
28
+ align-items: center;
 
 
29
  width: 100%;
30
+ max-width: 350px;
31
+ margin: 0 auto;
32
  }
33
 
34
+ .auth-box {
35
  background-color: white;
36
  border: 1px solid #dbdbdb;
37
  border-radius: 8px;
38
+ padding: 20px;
39
+ width: 100%;
40
+ margin-bottom: 10px;
41
+ text-align: center;
 
42
  }
43
 
44
+ .logo {
45
+ font-size: 28px;
46
+ font-weight: 300;
47
+ margin: 20px 0;
48
  }
49
 
50
+ .auth-form {
51
  display: flex;
52
  flex-direction: column;
53
+ gap: 6px;
54
+ margin-bottom: 15px;
 
55
  }
56
 
57
+ .input-group {
58
+ position: relative;
 
 
 
 
59
  }
60
 
61
+ .input-group input {
62
  width: 100%;
63
+ padding: 10px;
64
+ background-color: #fafafa;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
65
  border: 1px solid #dbdbdb;
66
+ border-radius: 4px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
67
  font-size: 14px;
68
+ direction: ltr;
69
  }
70
 
71
+ .input-group input:focus {
72
+ border-color: #a8a8a8;
73
+ outline: none;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
74
  }
75
 
76
+ .input-group label {
77
+ position: absolute;
78
+ right: 10px;
79
+ top: 50%;
80
+ transform: translateY(-50%);
81
+ color: #8e8e8e;
82
+ font-size: 12px;
83
+ transition: all 0.2s;
84
+ cursor: text;
85
  }
86
 
87
+ .input-group input:focus + label,
88
+ .input-group input:not(:placeholder-shown) + label {
89
+ top: 5px;
90
+ transform: none;
91
+ font-size: 10px;
92
  }
93
 
94
+ .btn {
95
+ width: 100%;
96
+ padding: 8px;
97
+ border: none;
98
+ border-radius: 4px;
99
  font-weight: bold;
100
+ cursor: pointer;
101
+ margin-top: 10px;
102
  }
103
 
104
+ .btn-primary {
105
+ background-color: #0095f6;
106
+ color: white;
 
 
 
107
  }
108
 
109
+ .btn-primary:disabled {
110
+ background-color: rgba(0, 149, 246, 0.3);
111
+ cursor: default;
 
 
 
112
  }
113
 
114
+ .divider {
115
  display: flex;
 
116
  align-items: center;
117
+ margin: 15px 0;
118
+ color: #8e8e8e;
119
+ font-size: 13px;
 
 
 
 
 
 
 
 
 
 
 
 
120
  font-weight: bold;
 
 
 
121
  }
122
 
123
+ .divider::before,
124
+ .divider::after {
125
+ content: "";
126
+ flex: 1;
127
+ height: 1px;
128
+ background-color: #dbdbdb;
129
+ margin: 0 10px;
130
  }
131
 
132
+ .btn-google {
133
  display: flex;
134
  align-items: center;
135
+ justify-content: center;
136
+ gap: 8px;
137
+ background-color: white;
138
+ border: 1px solid #dbdbdb;
139
+ color: #262626;
 
 
 
 
140
  }
141
 
142
+ .btn-google img {
143
+ width: 16px;
144
+ height: 16px;
145
  }
146
 
147
+ .auth-footer {
148
+ text-align: center;
149
  font-size: 14px;
150
+ margin-top: 20px;
151
  }
152
 
153
+ .auth-footer a {
 
154
  color: #0095f6;
155
  font-weight: bold;
156
+ text-decoration: none;
 
 
 
 
 
 
 
 
 
 
 
 
 
157
  }
158
 
159
+ .error-message {
160
+ color: #ed4956;
161
  font-size: 12px;
162
+ margin-top: 5px;
163
+ display: none;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
164
  }
165
 
166
+ .password-toggle {
167
+ position: absolute;
168
+ left: 10px;
169
+ top: 50%;
170
+ transform: translateY(-50%);
171
+ cursor: pointer;
172
  color: #8e8e8e;
173
  font-size: 12px;
174
  }
175
 
176
+ .terms {
 
 
 
177
  font-size: 12px;
178
+ color: #8e8e8e;
179
+ margin: 15px 0;
180
+ line-height: 1.4;
181
  }
182
 
183
+ .terms a {
184
+ color: #262626;
185
+ font-weight: bold;
186
+ text-decoration: none;
 
187
  }
188
 
189
+ /* تحسينات للهواتف */
190
+ @media (max-width: 450px) {
191
+ .auth-box {
192
+ background-color: transparent;
193
+ border: none;
194
+ }
195
  }
196
+ </style>
197
+ </head>
198
+ <body>
199
+ <div class="auth-container">
200
+ <!-- صندوق تسجيل الدخول -->
201
+ <div class="auth-box" id="loginBox">
202
+ <div class="logo">توتير</div>
203
+ <form class="auth-form" id="loginForm">
204
+ <div class="input-group">
205
+ <input type="text" id="loginUsername" placeholder=" " required>
206
+ <label for="loginUsername">اسم المستخدم أو البريد الإلكتروني</label>
207
+ <div class="error-message" id="loginUsernameError"></div>
208
+ </div>
209
+ <div class="input-group">
210
+ <input type="password" id="loginPassword" placeholder=" " required>
211
+ <label for="loginPassword">كلمة المرور</label>
212
+ <span class="password-toggle" onclick="togglePassword('loginPassword', this)">
213
+ <i class="far fa-eye"></i>
214
+ </span>
215
+ <div class="error-message" id="loginPasswordError"></div>
216
+ </div>
217
+ <button type="submit" class="btn btn-primary" id="loginBtn">تسجيل الدخول</button>
218
+ </form>
219
+
220
+ <div class="divider">أو</div>
221
+
222
+ <button class="btn btn-google" onclick="signInWithGoogle()">
223
+ <img src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg" alt="Google">
224
+ تسجيل الدخول باستخدام جوجل
225
+ </button>
226
+
227
+ <div class="auth-footer">
228
+ <a href="#" id="forgotPasswordLink">نسيت كلمة المرور؟</a>
229
+ </div>
230
+ </div>
231
 
232
+ <!-- صندوق إنشاء حساب -->
233
+ <div class="auth-box" id="signupBox" style="display: none;">
234
+ <div class="logo">توتير</div>
235
+ <form class="auth-form" id="signupForm">
236
+ <div class="input-group">
237
+ <input type="email" id="signupEmail" placeholder=" " required>
238
+ <label for="signupEmail">البريد الإلكتروني</label>
239
+ <div class="error-message" id="signupEmailError"></div>
240
+ </div>
241
+ <div class="input-group">
242
+ <input type="text" id="signupUsername" placeholder=" " required>
243
+ <label for="signupUsername">اسم المستخدم</label>
244
+ <div class="error-message" id="signupUsernameError"></div>
245
+ </div>
246
+ <div class="input-group">
247
+ <input type="password" id="signupPassword" placeholder=" " required>
248
+ <label for="signupPassword">كلمة المرور</label>
249
+ <span class="password-toggle" onclick="togglePassword('signupPassword', this)">
250
+ <i class="far fa-eye"></i>
251
+ </span>
252
+ <div class="error-message" id="signupPasswordError"></div>
253
+ </div>
254
+ <div class="input-group">
255
+ <input type="password" id="signupConfirmPassword" placeholder=" " required>
256
+ <label for="signupConfirmPassword">تأكيد كلمة المرور</label>
257
+ <span class="password-toggle" onclick="togglePassword('signupConfirmPassword', this)">
258
+ <i class="far fa-eye"></i>
259
+ </span>
260
+ <div class="error-message" id="signupConfirmPasswordError"></div>
261
+ </div>
262
+
263
+ <div class="terms">
264
+ عند التسجيل، فإنك توافق على <a href="#">الشروط</a> و<a href="#">سياسة الخصوصية</a> الخاصة بنا
265
+ </div>
266
+
267
+ <button type="submit" class="btn btn-primary" id="signupBtn">إنشاء حساب</button>
268
+ </form>
269
+
270
+ <div class="divider">أو</div>
271
+
272
+ <button class="btn btn-google" onclick="signInWithGoogle()">
273
+ <img src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg" alt="Google">
274
+ التسجيل باستخدام جوجل
275
+ </button>
276
+ </div>
277
 
278
+ <!-- رابط التبديل بين تسجيل الدخول وإنشاء حساب -->
279
+ <div class="auth-box">
280
+ <div class="auth-footer">
281
+ <span id="toggleAuthText">ليس لديك حساب؟</span>
282
+ <a href="#" id="toggleAuthLink">إنشاء حساب</a>
283
+ </div>
284
+ </div>
285
+ </div>
286
+
287
+ <script>
288
+ // متغيرات حالة النظام
289
+ let isLogin = true;
290
+
291
+ // عناصر DOM
292
+ const loginBox = document.getElementById('loginBox');
293
+ const signupBox = document.getElementById('signupBox');
294
+ const toggleAuthText = document.getElementById('toggleAuthText');
295
+ const toggleAuthLink = document.getElementById('toggleAuthLink');
296
+ const loginForm = document.getElementById('loginForm');
297
+ const signupForm = document.getElementById('signupForm');
298
+
299
+ // تبديل بين تسجيل الدخول وإنشاء حساب
300
+ function toggleAuth() {
301
+ isLogin = !isLogin;
302
+
303
+ if (isLogin) {
304
+ loginBox.style.display = 'block';
305
+ signupBox.style.display = 'none';
306
+ toggleAuthText.textContent = 'ليس لديك حساب؟';
307
+ toggleAuthLink.textContent = 'إنشاء حساب';
308
+ } else {
309
+ loginBox.style.display = 'none';
310
+ signupBox.style.display = 'block';
311
+ toggleAuthText.textContent = 'لديك حساب بالفعل؟';
312
+ toggleAuthLink.textContent = 'تسجيل الدخول';
313
+ }
314
  }
315
 
316
+ // إظهار/إخفاء كلمة المرور
317
+ function togglePassword(inputId, toggleElement) {
318
+ const input = document.getElementById(inputId);
319
+ const icon = toggleElement.querySelector('i');
320
+
321
+ if (input.type === 'password') {
322
+ input.type = 'text';
323
+ icon.classList.remove('fa-eye');
324
+ icon.classList.add('fa-eye-slash');
325
+ } else {
326
+ input.type = 'password';
327
+ icon.classList.remove('fa-eye-slash');
328
+ icon.classList.add('fa-eye');
329
+ }
330
  }
331
 
332
+ // تسجيل الدخول باستخدام جوجل (وهمي)
333
+ function signInWithGoogle() {
334
+ // في الواقع، هنا سيتم استخدام Firebase Authentication أو أي خدمة أخرى
335
+ alert('جارٍ تحويلك إلى صفحة تسجيل الدخول باستخدام جوجل...');
336
+
337
+ // محاكاة تسجيل الدخول الناجح بعد تأخير
338
+ setTimeout(() => {
339
+ alert('تم تسجيل الدخول بنجاح باستخدام جوجل!');
340
+ // هنا يمكن توجيه المستخدم إلى الصفحة الرئيسية
341
+ window.location.href = 'home.html';
342
+ }, 1000);
343
+ }
344
+
345
+ // التحقق من صحة نموذج تسجيل الدخول
346
+ function validateLoginForm() {
347
+ let isValid = true;
348
+ const username = document.getElementById('loginUsername').value.trim();
349
+ const password = document.getElementById('loginPassword').value;
350
+
351
+ // إعادة تعيين رسائل الخطأ
352
+ document.getElementById('loginUsernameError').style.display = 'none';
353
+ document.getElementById('loginPasswordError').style.display = 'none';
354
+
355
+ // التحقق من اسم المستخدم
356
+ if (username === '') {
357
+ document.getElementById('loginUsernameError').textContent = 'يرجى إدخال اسم المستخدم أو البريد الإلكتروني';
358
+ document.getElementById('loginUsernameError').style.display = 'block';
359
+ isValid = false;
360
+ }
361
+
362
+ // التحقق من كلمة المرور
363
+ if (password === '') {
364
+ document.getElementById('loginPasswordError').textContent = 'يرجى إدخال كلمة المرور';
365
+ document.getElementById('loginPasswordError').style.display = 'block';
366
+ isValid = false;
367
+ } else if (password.length < 6) {
368
+ document.getElementById('loginPasswordError').textContent = 'يجب أن تحتوي كلمة المرور على 6 أحرف على الأقل';
369
+ document.getElementById('loginPasswordError').style.display = 'block';
370
+ isValid = false;
371
+ }
372
+
373
+ return isValid;
374
  }
375
 
376
+ // التحقق من صحة نموذج إنشاء حساب
377
+ function validateSignupForm() {
378
+ let isValid = true;
379
+ const email = document.getElementById('signupEmail').value.trim();
380
+ const username = document.getElementById('signupUsername').value.trim();
381
+ const password = document.getElementById('signupPassword').value;
382
+ const confirmPassword = document.getElementById('signupConfirmPassword').value;
383
+
384
+ // إعادة تعيين رسائل الخطأ
385
+ document.getElementById('signupEmailError').style.display = 'none';
386
+ document.getElementById('signupUsernameError').style.display = 'none';
387
+ document.getElementById('signupPasswordError').style.display = 'none';
388
+ document.getElementById('signupConfirmPasswordError').style.display = 'none';
389
+
390
+ // التحقق من البريد الإلكتروني
391
+ if (email === '') {
392
+ document.getElementById('signupEmailError').textContent = 'يرجى إدخال البريد الإلكتروني';
393
+ document.getElementById('signupEmailError').style.display = 'block';
394
+ isValid = false;
395
+ } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
396
+ document.getElementById('signupEmailError').textContent = 'يرجى إدخال بريد إلكتروني صالح';
397
+ document.getElementById('signupEmailError').style.display = 'block';
398
+ isValid = false;
399
+ }
400
+
401
+ // التحقق من اسم المستخدم
402
+ if (username === '') {
403
+ document.getElementById('signupUsernameError').textContent = 'يرجى إدخال اسم المستخدم';
404
+ document.getElementById('signupUsernameError').style.display = 'block';
405
+ isValid = false;
406
+ } else if (username.length < 3) {
407
+ document.getElementById('signupUsernameError').textContent = 'يجب أن يحتوي اسم المستخدم على 3 أحرف على الأقل';
408
+ document.getElementById('signupUsernameError').style.display = 'block';
409
+ isValid = false;
410
+ }
411
+
412
+ // التحقق من كلمة المرور
413
+ if (password === '') {
414
+ document.getElementById('signupPasswordError').textContent = 'يرجى إدخال كلمة المرور';
415
+ document.getElementById('signupPasswordError').style.display = 'block';
416
+ isValid = false;
417
+ } else if (password.length < 6) {
418
+ document.getElementById('signupPasswordError').textContent = 'يجب أن تحتوي كلمة المرور على 6 أحرف على الأقل';
419
+ document.getElementById('signupPasswordError').style.display = 'block';
420
+ isValid = false;
421
+ }
422
+
423
+ // التحقق من تطابق كلمتي المرور
424
+ if (confirmPassword === '') {
425
+ document.getElementById('signupConfirmPasswordError').textContent = 'يرجى تأكيد كلمة المرور';
426
+ document.getElementById('signupConfirmPasswordError').style.display = 'block';
427
+ isValid = false;
428
+ } else if (password !== confirmPassword) {
429
+ document.getElementById('signupConfirmPasswordError').textContent = 'كلمتا المرور غير متطابقتين';
430
+ document.getElementById('signupConfirmPasswordError').style.display = 'block';
431
+ isValid = false;
432
+ }
433
+
434
+ return isValid;
435
  }
436
 
437
+ // إرسال نموذج تسجيل الدخول
438
+ function submitLoginForm(event) {
439
+ event.preventDefault();
440
+
441
+ if (validateLoginForm()) {
442
+ // عرض رسالة تحميل
443
+ const loginBtn = document.getElementById('loginBtn');
444
+ const originalText = loginBtn.textContent;
445
+ loginBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> جاري تسجيل الدخول...';
446
+ loginBtn.disabled = true;
447
+
448
+ // محاكاة اتصال بالخادم
449
+ setTimeout(() => {
450
+ // هنا سيتم إرسال البيانات إلى الخادم في التطبيق الحقيقي
451
+ alert('تم تسجيل الدخول بنجاح!');
452
+ loginBtn.textContent = originalText;
453
+ loginBtn.disabled = false;
454
+
455
+ // توجيه المستخدم إلى الصفحة الرئيسية
456
+ window.location.href = 'home.html';
457
+ }, 1500);
458
+ }
459
  }
460
 
461
+ // إرسال نموذج إنشاء حساب
462
+ function submitSignupForm(event) {
463
+ event.preventDefault();
464
+
465
+ if (validateSignupForm()) {
466
+ // عرض رسالة تحميل
467
+ const signupBtn = document.getElementById('signupBtn');
468
+ const originalText = signupBtn.textContent;
469
+ signupBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> جاري إنشاء الحساب...';
470
+ signupBtn.disabled = true;
471
+
472
+ // محاكاة اتصال بالخادم
473
+ setTimeout(() => {
474
+ // هنا سيتم إرسال البيانات إلى الخادم في التطبيق الحقيقي
475
+ alert('تم إنشاء الحساب بنجاح! يرجى تسجيل الدخول الآن.');
476
+ signupBtn.textContent = originalText;
477
+ signupBtn.disabled = false;
478
+
479
+ // التبديل إلى نموذج تسجيل الدخول
480
+ toggleAuth();
481
+ }, 2000);
482
+ }
483
  }
484
 
485
+ // إضافة معالجي الأحداث
486
+ toggleAuthLink.addEventListener('click', function(e) {
487
+ e.preventDefault();
488
+ toggleAuth();
489
+ });
490
 
491
+ document.getElementById('forgotPasswordLink').addEventListener('click', function(e) {
492
+ e.preventDefault();
493
+ alert('سيتم إرسال رابط إعادة تعيين كلمة المرور إلى بريدك الإلكتروني المسجل.');
494
+ });
495
 
496
+ loginForm.addEventListener('submit', submitLoginForm);
497
+ signupForm.addEventListener('submit', submitSignupForm);
498
+ </script>
499
+ </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
500
  </html>