Hugging Face's logo

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

App Files Community
12wqhh commited on
Commit
b900899
·
verified ·
1 Parent(s): 6f36cd2

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1693 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Https Huggingface Co 12wqhh
3
- emoji: 📉
4
- colorFrom: purple
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: https-huggingface-co-12wqhh
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1693 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ar" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>توتير - مشاركة اللحظات</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ * {
10
+ margin: 0;
11
+ padding: 0;
12
+ box-sizing: border-box;
13
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
14
+ }
15
+
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-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
+ </style>
1158
+ </head>
1159
+ <body>
1160
+ <!-- الصفحة الرئيسية -->
1161
+ <div class="main-page" id="mainPage">
1162
+ <header class="header">
1163
+ <div class="header-container">
1164
+ <div class="header-logo">توتير</div>
1165
+ <div class="search-bar">
1166
+ <i class="fas fa-search"></i>
1167
+ <input type="text" placeholder="بحث">
1168
+ </div>
1169
+ <div class="nav-icons">
1170
+ <i class="fas fa-home active" id="homeBtn"></i>
1171
+ <i class="fab fa-facebook-messenger"></i>
1172
+ <i class="fas fa-plus-square" id="createPostBtn"></i>
1173
+ <i class="fas fa-film" id="reelsBtn"></i>
1174
+ <i class="far fa-heart"></i>
1175
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" class="profile-pic" id="profileBtn">
1176
+ </div>
1177
+ </div>
1178
+ </header>
1179
+
1180
+ <div class="content">
1181
+ <div class="posts">
1182
+ <!-- القصص -->
1183
+ <div class="stories">
1184
+ <div class="story">
1185
+ <div class="story-avatar">
1186
+ <img src="https://randomuser.me/api/portraits/women/44.jpg">
1187
+ </div>
1188
+ <div class="story-username">حسابك</div>
1189
+ </div>
1190
+ <div class="story">
1191
+ <div class="story-avatar">
1192
+ <img src="https://randomuser.me/api/portraits/men/32.jpg">
1193
+ </div>
1194
+ <div class="story-username">أحمد</div>
1195
+ </div>
1196
+ <div class="story">
1197
+ <div class="story-avatar">
1198
+ <img src="https://randomuser.me/api/portraits/women/12.jpg">
1199
+ </div>
1200
+ <div class="story-username">سارة</div>
1201
+ </div>
1202
+ <div class="story">
1203
+ <div class="story-avatar">
1204
+ <img src="https://randomuser.me/api/portraits/men/75.jpg">
1205
+ </div>
1206
+ <div class="story-username">محمد</div>
1207
+ </div>
1208
+ <div class="story">
1209
+ <div class="story-avatar">
1210
+ <img src="https://randomuser.me/api/portraits/women/33.jpg">
1211
+ </div>
1212
+ <div class="story-username">نور</div>
1213
+ </div>
1214
+ <div class="story">
1215
+ <div class="story-avatar">
1216
+ <img src="https://randomuser.me/api/portraits/men/55.jpg">
1217
+ </div>
1218
+ <div class="story-username">خالد</div>
1219
+ </div>
1220
+ <div class="story">
1221
+ <div class="story-avatar">
1222
+ <img src="https://randomuser.me/api/portraits/women/22.jpg">
1223
+ </div>
1224
+ <div class="story-username">ليلى</div>
1225
+ </div>
1226
+ </div>
1227
+
1228
+ <!-- المنشورات -->
1229
+ <div class="post">
1230
+ <div class="post-header">
1231
+ <div class="post-user">
1232
+ <img src="https://randomuser.me/api/portraits/men/32.jpg">
1233
+ <span>أحمد</span>
1234
+ </div>
1235
+ <i class="fas fa-ellipsis-h post-more"></i>
1236
+ </div>
1237
+ <div class="post-image-container">
1238
+ <video class="post-image" controls>
1239
+ <source src="https://assets.mixkit.co/videos/preview/mixkit-man-walking-under-a-tunnel-3462-large.mp4" type="video/mp4">
1240
+ </video>
1241
+ <div class="double-tap-heart">
1242
+ <i class="fas fa-heart"></i>
1243
+ </div>
1244
+ </div>
1245
+ <div class="post-actions">
1246
+ <div class="post-actions-left">
1247
+ <i class="far fa-heart like-btn"></i>
1248
+ <i class="far fa-comment"></i>
1249
+ <i class="far fa-paper-plane"></i>
1250
+ </div>
1251
+ <i class="far fa-bookmark"></i>
1252
+ </div>
1253
+ <div class="post-likes">1,234 إعجاب</div>
1254
+ <div class="post-caption">
1255
+ <span>أحمد</span>
1256
+ هذا الفيديو من رحلتي الأخيرة إلى الجبال. الطبيعة جميلة جدًا!
1257
+ </div>
1258
+ <div class="post-comments">عرض جميع التعليقات (45)</div>
1259
+ <div class="post-time">منذ ساعتين</div>
1260
+ <div class="post-add-comment">
1261
+ <input type="text" placeholder="أضف تعليقًا...">
1262
+ <button>نشر</button>
1263
+ </div>
1264
+ </div>
1265
+
1266
+ <div class="post">
1267
+ <div class="post-header">
1268
+ <div class="post-user">
1269
+ <img src="https://randomuser.me/api/portraits/women/12.jpg">
1270
+ <span>سارة</span>
1271
+ </div>
1272
+ <i class="fas fa-ellipsis-h post-more"></i>
1273
+ </div>
1274
+ <div class="post-image-container">
1275
+ <video class="post-image" controls>
1276
+ <source src="https://assets.mixkit.co/videos/preview/mixkit-woman-dancing-under-neon-lights-1230-large.mp4" type="video/mp4">
1277
+ </video>
1278
+ <div class="double-tap-heart">
1279
+ <i class="fas fa-heart"></i>
1280
+ </div>
1281
+ </div>
1282
+ <div class="post-actions">
1283
+ <div class="post-actions-left">
1284
+ <i class="far fa-heart like-btn"></i>
1285
+ <i class="far fa-comment"></i>
1286
+ <i class="far fa-paper-plane"></i>
1287
+ </div>
1288
+ <i class="far fa-bookmark"></i>
1289
+ </div>
1290
+ <div class="post-likes">892 إعجاب</div>
1291
+ <div class="post-caption">
1292
+ <span>سارة</span>
1293
+ ريلز من حفلتي الأخيرة مع الأصدقاء! 💃
1294
+ </div>
1295
+ <div class="post-comments">عرض جميع التعليقات (23)</div>
1296
+ <div class="post-time">منذ 5 ساعات</div>
1297
+ <div class="post-add-comment">
1298
+ <input type="text" placeholder="أضف تعليقًا...">
1299
+ <button>نشر</button>
1300
+ </div>
1301
+ </div>
1302
+ </div>
1303
+
1304
+ <!-- الشريط الجانبي -->
1305
+ <div class="sidebar">
1306
+ <div class="user-profile">
1307
+ <img src="https://randomuser.me/api/portraits/women/44.jpg">
1308
+ <div class="user-info">
1309
+ <span>نورا</span>
1310
+ <span>نورا أحمد</span>
1311
+ </div>
1312
+ <button class="switch-btn">تبديل</button>
1313
+ </div>
1314
+
1315
+ <div class="suggestions">
1316
+ <div class="suggestions-header">
1317
+ <span>اقتراحات لك</span>
1318
+ <span>عرض الكل</span>
1319
+ </div>
1320
+
1321
+ <div class="suggestion">
1322
+ <img src="https://randomuser.me/api/portraits/women/65.jpg">
1323
+ <div class="suggestion-info">
1324
+ <span>ريم</span>
1325
+ <span>متابع من قبل أحمد</span>
1326
+ </div>
1327
+ <button class="follow-btn">متابعة</button>
1328
+ </div>
1329
+
1330
+ <div class="suggestion">
1331
+ <img src="https://randomuser.me/api/portraits/men/22.jpg">
1332
+ <div class="suggestion-info">
1333
+ <span>يوسف</span>
1334
+ <span>جديد على توتير</span>
1335
+ </div>
1336
+ <button class="follow-btn">متابعة</button>
1337
+ </div>
1338
+
1339
+ <div class="suggestion">
1340
+ <img src="https://randomuser.me/api/portraits/women/18.jpg">
1341
+ <div class="suggestion-info">
1342
+ <span>هناء</span>
1343
+ <span>متابع من قبل سارة</span>
1344
+ </div>
1345
+ <button class="follow-btn">متابعة</button>
1346
+ </div>
1347
+
1348
+ <div class="suggestion">
1349
+ <img src="https://randomuser.me/api/portraits/men/45.jpg">
1350
+ <div class="suggestion-info">
1351
+ <span>علي</span>
1352
+ <span>متابع من قبل محمد</span>
1353
+ </div>
1354
+ <button class="follow-btn">متابعة</button>
1355
+ </div>
1356
+ </div>
1357
+
1358
+ <div class="footer">
1359
+ <div class="footer-links">
1360
+ <a href="#">معلومات</a>
1361
+ <a href="#">مساعدة</a>
1362
+ <a href="#">الصحافة</a>
1363
+ <a href="#">وظائف</a>
1364
+ <a href="#">الخصوصية</a>
1365
+ <a href="#">الشروط</a>
1366
+ <a href="#">المواقع</a>
1367
+ <a href="#">الحسابات الأكثر تأثيراً</a>
1368
+ <a href="#">هاشتاقات</a>
1369
+ <a href="#">اللغة</a>
1370
+ </div>
1371
+ <span>© 2023 توتير من فيسبوك</span>
1372
+ </div>
1373
+ </div>
1374
+ </div>
1375
+ </div>
1376
+
1377
+ <!-- صفحة الريلز -->
1378
+ <div class="reels-page" id="reelsPage">
1379
+ <div class="reels-header">
1380
+ <i class="fas fa-arrow-left" id="reelsBackBtn"></i>
1381
+ <span>الريلز</span>
1382
+ <i class="fas fa-camera"></i>
1383
+ </div>
1384
+
1385
+ <div class="reels-container">
1386
+ <div class="reels-sidebar">
1387
+ <div class="reel-sidebar-item">
1388
+ <i class="fas fa-heart"></i>
1389
+ <span>2.1K</span>
1390
+ </div>
1391
+ <div class="reel-sidebar-item">
1392
+ <i class="far fa-comment"></i>
1393
+ <span>143</span>
1394
+ </div>
1395
+ <div class="reel-sidebar-item">
1396
+ <i class="far fa-paper-plane"></i>
1397
+ <span>مشاركة</span>
1398
+ </div>
1399
+ <div class="reel-sidebar-item">
1400
+ <i class="fas fa-ellipsis-h"></i>
1401
+ </div>
1402
+ <div class="reel-sidebar-item">
1403
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" style="width: 24px; height: 24px; border-radius: 50%;">
1404
+ </div>
1405
+ </div>
1406
+
1407
+ <div class="reels-content">
1408
+ <div class="reel-video">
1409
+ <video src="https://assets.mixkit.co/videos/preview/mixkit-woman-dancing-under-neon-lights-1230-large.mp4" autoplay loop></video>
1410
+ <div class="reel-info">
1411
+ <div class="reel-user">
1412
+ <img src="https://randomuser.me/api/portraits/women/33.jpg">
1413
+ <span class="reel-username">نور</span>
1414
+ <span class="reel-follow">متابعة</span>
1415
+ </div>
1416
+ <div class="reel-music">
1417
+ <i class="fas fa-music"></i>
1418
+ <span>الصوت الأصلي - نور</span>
1419
+ </div>
1420
+ <div class="reel-caption">استمتع بيومي مع الأصدقاء 💃 #رقص #أصدقاء</div>
1421
+ </div>
1422
+ <div class="reel-actions">
1423
+ <div class="reel-action">
1424
+ <i class="fas fa-heart"></i>
1425
+ <span>2.1K</span>
1426
+ </div>
1427
+ <div class="reel-action">
1428
+ <i class="far fa-comment"></i>
1429
+ <span>143</span>
1430
+ </div>
1431
+ <div class="reel-action">
1432
+ <i class="far fa-paper-plane"></i>
1433
+ <span>مشاركة</span>
1434
+ </div>
1435
+ </div>
1436
+ </div>
1437
+ </div>
1438
+ </div>
1439
+ </div>
1440
+
1441
+ <!-- صفحة إنشاء منشور جديد -->
1442
+ <div class="create-post-page" id="createPostPage">
1443
+ <div class="create-post-header">
1444
+ <i class="fas fa-arrow-left" id="createPostBackBtn"></i>
1445
+ <span>إنشاء منشور جديد</span>
1446
+ <button id="createPostNextBtn" disabled>التالي</button>
1447
+ </div>
1448
+
1449
+ <div class="create-post-content">
1450
+ <i class="fas fa-cloud-upload-alt create-post-icon"></i>
1451
+ <div class="create-post-text">اسحب الفيديوهات والصور إلى هنا</div>
1452
+ <button class="create-post-btn" id="selectMediaBtn">اختر من الجهاز</button>
1453
+ <input type="file" id="mediaInput" class="file-input" accept="image/*, video/*" multiple>
1454
+ </div>
1455
+ </div>
1456
+
1457
+ <!-- صفحة تعديل الفيديو -->
1458
+ <div class="edit-video-page" id="editVideoPage">
1459
+ <div class="edit-video-header">
1460
+ <i class="fas fa-arrow-left" id="editVideoBackBtn"></i>
1461
+ <span>تعديل الفيديو</span>
1462
+ <button id="editVideoNextBtn">مشاركة</button>
1463
+ </div>
1464
+
1465
+ <div class="edit-video-container">
1466
+ <div class="video-preview-container">
1467
+ <video id="videoPreview" class="video-preview" controls></video>
1468
+ <div class="video-controls" id="videoControls">
1469
+ <div class="video-progress" id="videoProgress">
1470
+ <div class="video-progress-filled" id="videoProgressFilled"></div>
1471
+ </div>
1472
+ <div class="video-controls-bottom">
1473
+ <div class="video-controls-left">
1474
+ <button class="video-control-btn" id="videoPlayBtn"><i class="fas fa-play"></i></button>
1475
+ <span class="video-time" id="videoTime">0:00 / 0:00</span>
1476
+ </div>
1477
+ <div class="video-controls-right">
1478
+ <button class="video-control-btn" id="videoMuteBtn"><i class="fas fa-volume-up"></i></button>
1479
+ <button class="video-control-btn" id="videoFullscreenBtn"><i class="fas fa-expand"></i></button>
1480
+ </div>
1481
+ </div>
1482
+ </div>
1483
+ </div>
1484
+
1485
+ <div class="edit-tools">
1486
+ <div class="edit-section">
1487
+ <span class="edit-section-title">أدوات التعديل</span>
1488
+ <div style="display: flex; margin-bottom: 15px;">
1489
+ <button class="edit-tool-btn active" data-tool="trim"><i class="fas fa-cut"></i> قص</button>
1490
+ <button class="edit-tool-btn" data-tool="filters"><i class="fas fa-sliders-h"></i> فلتر</button>
1491
+ <button class="edit-tool-btn" data-tool="text"><i class="fas fa-font"></i> نص</button>
1492
+ </div>
1493
+ </div>
1494
+
1495
+ <div class="edit-section" id="trimSection">
1496
+ <span class="edit-section-title">قص الفيديو</span>
1497
+ <div class="trim-container">
1498
+ <div class="trim-track">
1499
+ <div class="trim-handle trim-handle-left" id="trimHandleLeft"></div>
1500
+ <div class="trim-preview">
1501
+ <div class="trim-preview-frames" id="trimPreviewFrames"></div>
1502
+ </div>
1503
+ <div class="trim-handle trim-handle-right" id="trimHandleRight"></div>
1504
+ </div>
1505
+ </div>
1506
+ <div style="display: flex; justify-content: space-between; font-size: 12px;">
1507
+ <span id="trimStartTime">0:00</span>
1508
+ <span id="trimEndTime">0:00</span>
1509
+ </div>
1510
+ </div>
1511
+
1512
+ <div class="edit-section" id="filtersSection" style="display: none;">
1513
+ <span class="edit-section-title">الفلاتر</span>
1514
+ <div class="filter-options">
1515
+ <div class="filter-option" data-filter="normal">
1516
+ <div class="filter-preview" style="background-image: url('https://source.unsplash.com/random/100x100')"></div>
1517
+ <span class="filter-name">عادي</span>
1518
+ </div>
1519
+ <div class="filter-option" data-filter="clarendon">
1520
+ <div class="filter-preview" style="background-image: url('https://source.unsplash.com/random/100x100'); filter: contrast(1.2) saturate(1.35) brightness(1.1)"></div>
1521
+ <span class="filter-name">كلارندون</span>
1522
+ </div>
1523
+ <div class="filter-option" data-filter="gingham">
1524
+ <div class="filter-preview" style="background-image: url('https://source.unsplash.com/random/100x100'); filter: brightness(1.05) hue-rotate(350deg)"></div>
1525
+ <span class="filter-name">جينجهام</span>
1526
+ </div>
1527
+ <div class="filter-option" data-filter="moon">
1528
+ <div class="filter-preview" style="background-image: url('https://source.unsplash.com/random/100x100'); filter: grayscale(1) contrast(1.1) brightness(1.1)"></div>
1529
+ <span class="filter-name">قمر</span>
1530
+ </div>
1531
+ <div class="filter-option" data-filter="lark">
1532
+ <div class="filter-preview" style="background-image: url('https://source.unsplash.com/random/100x100'); filter: contrast(0.9) brightness(1.1) saturate(1.1)"></div>
1533
+ <span class="filter-name">لارك</span>
1534
+ </div>
1535
+ <div class="filter-option" data-filter="reyes">
1536
+ <div class="filter-preview" style="background-image: url('https://source.unsplash.com/random/100x100'); filter: contrast(0.85) brightness(1.1) saturate(0.9)"></div>
1537
+ <span class="filter-name">رييس</span>
1538
+ </div>
1539
+ </div>
1540
+ </div>
1541
+
1542
+ <div class="edit-section" id="audioSection">
1543
+ <span class="edit-section-title">الصوت</span>
1544
+ <div class="audio-options">
1545
+ <div class="audio-option">
1546
+ <i class="fas fa-volume-up"></i>
1547
+ <input type="range" id="videoVolume" min="0" max="1" step="0.1" value="1">
1548
+ <span id="volumeValue">100%</span>
1549
+ </div>
1550
+ </div>
1551
+ </div>
1552
+
1553
+ <div class="edit-section" id="speedSection">
1554
+ <span class="edit-section-title">سرعة التشغيل</span>
1555
+ <div class="speed-options">
1556
+ <div class="speed-option" data-speed="0.5">0.5x</div>
1557
+ <div class="speed-option" data-speed="0.75">0.75x</div>
1558
+ <div class="speed-option active" data-speed="1">عادي</div>
1559
+ <div class="speed-option" data-speed="1.5">1.5x</div>
1560
+ <div class="speed-option" data-speed="2">2x</div>
1561
+ </div>
1562
+ </div>
1563
+
1564
+ <div class="edit-section" id="effectsSection">
1565
+ <span class="edit-section-title">إضافات</span>
1566
+ <div class="effect-options">
1567
+ <div class="effect-option" data-effect="text">
1568
+ <div class="effect-icon">
1569
+ <i class="fas fa-font"></i>
1570
+ </div>
1571
+ <span class="effect-name">نص</span>
1572
+ </div>
1573
+ <div class="effect-option" data-effect="stickers">
1574
+ <div class="effect-icon">
1575
+ <i class="fas fa-sticky-note"></i>
1576
+ </div>
1577
+ <span class="effect-name">ملصقات</span>
1578
+ </div>
1579
+ <div class="effect-option" data-effect="draw">
1580
+ <div class="effect-icon">
1581
+ <i class="fas fa-pencil-alt"></i>
1582
+ </div>
1583
+ <span class="effect-name">رسم</span>
1584
+ </div>
1585
+ </div>
1586
+ </div>
1587
+
1588
+ <div class="text-editor" id="textEditor">
1589
+ <input type="text" id="textInput" placeholder="اكتب النص هنا">
1590
+ <div class="text-editor-buttons">
1591
+ <button class="text-editor-btn text-editor-cancel" id="textCancelBtn">إلغاء</button>
1592
+ <button class="text-editor-btn text-editor-apply" id="textApplyBtn">تطبيق</button>
1593
+ </div>
1594
+ </div>
1595
+ </div>
1596
+ </div>
1597
+ </div>
1598
+
1599
+ <!-- صفحة الملف الشخصي -->
1600
+ <div class="profile-page" id="profilePage">
1601
+ <header class="header">
1602
+ <div class="header-container">
1603
+ <i class="fas fa-arrow-left" id="profileBackBtn"></i>
1604
+ <div style="display: flex; align-items: center;">
1605
+ <span style="font-weight: bold; margin-left: 10px;">نورا</span>
1606
+ <i class="fas fa-chevron-down" style="font-size: 14px;"></i>
1607
+ </div>
1608
+ <i class="fas fa-bars"></i>
1609
+ </div>
1610
+ </header>
1611
+
1612
+ <div class="profile-header">
1613
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" class="profile-avatar">
1614
+ <div class="profile-info">
1615
+ <div class="profile-username">
1616
+ <span>nora_ahmed</span>
1617
+ <button class="profile-edit-btn">تعديل الملف</button>
1618
+ <i class="fas fa-cog profile-settings-btn"></i>
1619
+ </div>
1620
+
1621
+ <div class="profile-stats">
1622
+ <div class="profile-stat">
1623
+ <span>120</span>
1624
+ <div>منشورات</div>
1625
+ </div>
1626
+ <div class="profile-stat">
1627
+ <span>1.2K</span>
1628
+ <div>متابعون</div>
1629
+ </div>
1630
+ <div class="profile-stat">
1631
+ <span>543</span>
1632
+ <div>يتبع</div>
1633
+ </div>
1634
+ </div>
1635
+
1636
+ <div class="profile-name">نورا أحمد</div>
1637
+ <div class="profile-bio">مصممة جرافيك | مصورة فوتوغرافية</div>
1638
+ <a href="#" class="profile-website">www.nora-design.com</a>
1639
+ </div>
1640
+ </div>
1641
+
1642
+ <div class="profile-tabs">
1643
+ <div class="profile-tab active">
1644
+ <i class="fas fa-th"></i>
1645
+ <span>منشورات</span>
1646
+ </div>
1647
+ <div class="profile-tab">
1648
+ <i class="fas fa-tv"></i>
1649
+ <span>الريلز</span>
1650
+ </div>
1651
+ <div class="profile-tab">
1652
+ <i class="fas fa-bookmark"></i>
1653
+ <span>محفوظات</span>
1654
+ </div>
1655
+ <div class="profile-tab">
1656
+ <i class="fas fa-user-tag"></i>
1657
+ <span>وسوم</span>
1658
+ </div>
1659
+ </div>
1660
+
1661
+ <div class="profile-posts">
1662
+ <div class="profile-post">
1663
+ <video>
1664
+ <source src="https://assets.mixkit.co/videos/preview/mixkit-woman-dancing-under-neon-lights-1230-large.mp4" type="video/mp4">
1665
+ </video>
1666
+ <div class="profile-post-overlay">
1667
+ <div class="profile-post-stat">
1668
+ <i class="fas fa-heart"></i>
1669
+ <span>124</span>
1670
+ </div>
1671
+ <div class="profile-post-stat">
1672
+ <i class="far fa-comment"></i>
1673
+ <span>23</span>
1674
+ </div>
1675
+ </div>
1676
+ </div>
1677
+ <div class="profile-post">
1678
+ <img src="https://source.unsplash.com/random/300x300?nature">
1679
+ <div class="profile-post-overlay">
1680
+ <div class="profile-post-stat">
1681
+ <i class="fas fa-heart"></i>
1682
+ <span>89</span>
1683
+ </div>
1684
+ <div class="profile-post-stat">
1685
+ <i class="far fa-comment"></i>
1686
+ <span>12</span>
1687
+ </div>
1688
+ </div>
1689
+ </div>
1690
+ <div class="profile-post">
1691
+ <video>
1692
+ <source src="https://assets.mixkit.co
1693
+ </html>