Hugging Face's logo

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

App Files Community
12wqhh commited on
Commit
7e9a85f
·
verified ·
1 Parent(s): 5a8a569

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +810 -557
index.html CHANGED
@@ -3,37 +3,56 @@
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
- /* Header Styles */
22
  .header {
 
 
 
 
 
23
  display: flex;
24
  justify-content: space-between;
25
  align-items: center;
26
- padding: 10px 15px;
27
- border-bottom: 1px solid #dbdbdb;
28
- background-color: white;
29
- position: sticky;
30
- top: 0;
31
- z-index: 10;
32
  }
33
 
34
  .header-logo {
 
35
  font-size: 24px;
36
- font-weight: 300;
 
37
  }
38
 
39
  .header-icons {
@@ -44,410 +63,322 @@
44
  .header-icons i {
45
  font-size: 24px;
46
  cursor: pointer;
 
47
  }
48
 
49
- /* Profile Section */
50
- .profile-container {
51
- padding: 20px 15px;
52
- background-color: white;
53
- margin-bottom: 20px;
54
- border-bottom: 1px solid #dbdbdb;
55
  }
56
 
57
- .profile-header {
 
58
  display: flex;
59
- align-items: center;
60
- margin-bottom: 20px;
61
  }
62
 
63
- .profile-avatar {
64
- width: 80px;
65
- height: 80px;
66
- border-radius: 50%;
67
- object-fit: cover;
68
- margin-left: 20px;
69
- border: 2px solid #f8f8f8;
70
  cursor: pointer;
71
  position: relative;
 
72
  }
73
 
74
- .profile-avatar-edit {
 
 
 
 
 
75
  position: absolute;
76
  bottom: 0;
 
77
  right: 0;
78
- background-color: #0095f6;
79
- color: white;
80
- width: 25px;
81
- height: 25px;
82
- border-radius: 50%;
83
- display: flex;
84
- align-items: center;
85
- justify-content: center;
86
- font-size: 12px;
87
- border: 2px solid white;
88
- }
89
-
90
- .profile-stats {
91
- display: flex;
92
- flex-grow: 1;
93
- justify-content: space-around;
94
  }
95
 
96
- .stat-item {
97
- display: flex;
98
- flex-direction: column;
99
- align-items: center;
100
- }
101
-
102
- .stat-number {
103
- font-weight: bold;
104
- font-size: 18px;
105
  }
106
 
107
- .stat-label {
108
- font-size: 14px;
109
- color: #8e8e8e;
110
  }
111
 
112
- .profile-info {
 
 
 
113
  margin-bottom: 15px;
114
- }
115
-
116
- .profile-name {
117
- font-weight: bold;
118
- margin-bottom: 5px;
119
  display: flex;
 
120
  align-items: center;
121
  }
122
 
123
- .profile-username {
124
- color: #8e8e8e;
125
- margin-bottom: 10px;
126
- }
127
-
128
- .profile-bio {
129
- margin-bottom: 10px;
130
- line-height: 1.4;
131
- }
132
-
133
- .profile-website {
134
- color: #00376b;
135
  text-decoration: none;
136
- font-weight: bold;
137
- }
138
-
139
- .edit-profile-btn {
140
- width: 100%;
141
- padding: 8px;
142
- background-color: white;
143
- border: 1px solid #dbdbdb;
144
- border-radius: 4px;
145
- font-weight: bold;
146
- cursor: pointer;
147
- margin-top: 10px;
148
  }
149
 
150
- /* Stories Section */
151
- .stories {
152
  display: flex;
153
- gap: 15px;
154
- padding: 15px 10px;
155
- margin-bottom: 20px;
156
- overflow-x: auto;
157
- background-color: white;
158
- border-bottom: 1px solid #dbdbdb;
159
- }
160
-
161
- .story {
162
- display: flex;
163
- flex-direction: column;
164
  align-items: center;
165
- gap: 5px;
166
- cursor: pointer;
167
  }
168
 
169
- .story-avatar {
170
- width: 70px;
171
- height: 70px;
172
  border-radius: 50%;
173
- padding: 2px;
174
- background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
175
  }
176
 
177
- .story-avatar img {
178
- width: 100%;
179
- height: 100%;
180
- border-radius: 50%;
181
- border: 2px solid white;
182
- object-fit: cover;
183
  }
184
 
185
- .story-add {
186
- width: 70px;
187
- height: 70px;
188
- border-radius: 50%;
189
- background-color: #f8f8f8;
190
- display: flex;
191
- align-items: center;
192
- justify-content: center;
193
- color: #0095f6;
194
- font-size: 24px;
195
  }
196
 
197
- .story-username {
 
198
  font-size: 12px;
199
- max-width: 70px;
200
- overflow: hidden;
201
- text-overflow: ellipsis;
202
- white-space: nowrap;
203
  }
204
 
205
- /* Tabs Section */
206
- .profile-tabs {
207
  display: flex;
208
- justify-content: space-around;
209
- background-color: white;
210
- border-top: 1px solid #dbdbdb;
211
- border-bottom: 1px solid #dbdbdb;
212
  }
213
 
214
- .tab {
215
- padding: 15px 0;
216
- text-align: center;
217
- flex: 1;
 
218
  cursor: pointer;
219
- position: relative;
220
- }
221
-
222
- .tab.active {
223
- font-weight: bold;
224
  }
225
 
226
- .tab.active::after {
227
- content: '';
228
- position: absolute;
229
- bottom: 0;
230
- left: 0;
231
- right: 0;
232
- height: 1px;
233
- background-color: #262626;
234
  }
235
 
236
- .tab i {
237
- font-size: 20px;
 
 
238
  }
239
 
240
- /* Posts Grid */
241
- .posts-grid {
242
- display: grid;
243
- grid-template-columns: repeat(3, 1fr);
244
- gap: 2px;
245
- margin-bottom: 50px;
246
  }
247
 
248
- .post-thumbnail {
249
- aspect-ratio: 1/1;
250
- position: relative;
 
 
 
251
  cursor: pointer;
252
  }
253
 
254
- .post-thumbnail img {
255
- width: 100%;
256
- height: 100%;
 
257
  object-fit: cover;
 
258
  }
259
 
260
- .post-thumbnail-overlay {
261
- position: absolute;
262
- top: 0;
263
- left: 0;
264
- right: 0;
265
- bottom: 0;
266
- background-color: rgba(0, 0, 0, 0.3);
267
- display: none;
268
- align-items: center;
269
- justify-content: center;
270
- color: white;
271
- gap: 20px;
272
  }
273
 
274
- .post-thumbnail:hover .post-thumbnail-overlay {
275
  display: flex;
 
 
276
  }
277
 
278
- .post-thumbnail-stat {
 
 
 
 
 
 
 
 
 
 
279
  display: flex;
280
  align-items: center;
281
- gap: 5px;
282
  }
283
 
284
- /* Bottom Navigation */
285
- .bottom-nav {
286
- position: fixed;
287
- bottom: 0;
288
- left: 0;
289
- right: 0;
290
- background-color: white;
291
- display: flex;
292
- justify-content: space-around;
293
- padding: 10px 0;
294
- border-top: 1px solid #dbdbdb;
295
  }
296
 
297
- .bottom-nav i {
298
- font-size: 24px;
299
- cursor: pointer;
 
 
 
300
  }
301
 
302
- /* Edit Profile Modal */
303
- .modal {
304
- display: none;
305
  position: fixed;
306
  top: 0;
307
  left: 0;
308
  right: 0;
309
  bottom: 0;
310
  background-color: rgba(0, 0, 0, 0.8);
311
- z-index: 100;
312
- justify-content: center;
313
- align-items: center;
314
- }
315
-
316
- .modal-content {
317
- background-color: white;
318
- border-radius: 12px;
319
- width: 90%;
320
- max-width: 400px;
321
- max-height: 80vh;
322
- overflow-y: auto;
323
  }
324
 
325
- .modal-header {
 
326
  padding: 15px;
327
- border-bottom: 1px solid #dbdbdb;
328
  display: flex;
329
- justify-content: space-between;
330
  align-items: center;
331
- position: relative;
332
- }
333
-
334
- .modal-title {
335
- font-weight: bold;
336
- position: absolute;
337
- left: 0;
338
- right: 0;
339
- text-align: center;
340
  }
341
 
342
- .modal-close, .modal-save {
 
 
343
  cursor: pointer;
344
- z-index: 1;
345
  }
346
 
347
- .modal-close {
348
- color: #262626;
349
- }
350
-
351
- .modal-save {
352
- color: #0095f6;
353
  }
354
 
355
- .modal-body {
356
- padding: 20px;
 
 
 
357
  }
358
 
359
- .edit-form-group {
360
- margin-bottom: 15px;
 
 
 
 
 
361
  }
362
 
363
- .edit-form-group label {
364
- display: block;
365
- margin-bottom: 5px;
366
- font-size: 14px;
367
- color: #262626;
368
- font-weight: bold;
369
  }
370
 
371
- .edit-form-group input, .edit-form-group textarea {
372
- width: 100%;
373
- padding: 8px;
374
- border: 1px solid #dbdbdb;
375
- border-radius: 4px;
376
- font-size: 14px;
377
  }
378
 
379
- .edit-form-group textarea {
380
- resize: vertical;
381
- min-height: 80px;
 
 
382
  }
383
 
384
- .avatar-edit-container {
 
 
 
385
  display: flex;
386
- flex-direction: column;
387
  align-items: center;
388
- margin-bottom: 20px;
389
  }
390
 
391
- .avatar-preview {
392
- width: 100px;
393
- height: 100px;
394
- border-radius: 50%;
395
- object-fit: cover;
396
- margin-bottom: 10px;
 
397
  }
398
 
399
- .change-avatar-btn {
400
- color: #0095f6;
401
- font-weight: bold;
 
402
  cursor: pointer;
403
  }
404
 
405
- /* Create Story Modal */
406
- .story-modal-content {
407
- background-color: white;
408
- border-radius: 12px;
409
- width: 90%;
410
- max-width: 400px;
411
- overflow: hidden;
 
 
 
 
412
  }
413
 
414
- .story-modal-preview {
415
- width: 100%;
416
- max-height: 70vh;
417
- object-fit: contain;
418
- background-color: black;
419
  }
420
 
421
- .story-modal-footer {
422
- display: flex;
423
- justify-content: center;
424
- padding: 15px;
425
  }
426
 
427
- .story-post-btn {
428
- background-color: #0095f6;
429
- color: white;
430
- border: none;
431
- padding: 8px 20px;
432
- border-radius: 4px;
433
- font-weight: bold;
434
- cursor: pointer;
435
  }
436
 
437
  /* Responsive */
438
  @media (max-width: 450px) {
439
- .profile-avatar {
440
- width: 70px;
441
- height: 70px;
442
- margin-left: 10px;
443
  }
444
 
445
- .stat-number {
446
- font-size: 16px;
447
- }
448
-
449
- .stat-label {
450
- font-size: 12px;
451
  }
452
  }
453
  </style>
@@ -455,345 +386,667 @@
455
  <body>
456
  <!-- Header -->
457
  <div class="header">
458
- <div class="header-logo">توتير</div>
459
  <div class="header-icons">
460
- <i class="far fa-heart"></i>
461
- <i class="far fa-paper-plane"></i>
462
  </div>
463
  </div>
464
 
465
- <!-- Profile Section -->
466
- <div class="profile-container">
467
- <div class="profile-header">
468
- <div class="profile-avatar" onclick="showEditAvatarModal()">
469
- <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" id="profileAvatarImg">
470
- <div class="profile-avatar-edit">
471
- <i class="fas fa-camera"></i>
472
- </div>
473
- </div>
474
-
475
- <div class="profile-stats">
476
- <div class="stat-item">
477
- <div class="stat-number" id="postsCount">24</div>
478
- <div class="stat-label">منشورات</div>
479
- </div>
480
- <div class="stat-item">
481
- <div class="stat-number" id="followersCount">1.2K</div>
482
- <div class="stat-label">متابعون</div>
483
- </div>
484
- <div class="stat-item">
485
- <div class="stat-number" id="followingCount">340</div>
486
- <div class="stat-label">متابَعون</div>
487
- </div>
488
- </div>
489
  </div>
490
 
491
- <div class="profile-info">
492
- <div class="profile-name">
493
- <span id="profileName">سارة أحمد</span>
 
 
494
  </div>
495
- <div class="profile-username" id="profileUsername">@sara_ahmed</div>
496
- <div class="profile-bio" id="profileBio">
497
- مصممة جرافيك | محبة للسفر والتصوير | أعيش في دبي
498
- 🌍✈️📷
499
  </div>
500
- <a href="#" class="profile-website" id="profileWebsite">www.sara-portfolio.com</a>
501
  </div>
502
 
503
- <button class="edit-profile-btn" onclick="showEditProfileModal()">تعديل الملف الشخصي</button>
504
- </div>
505
-
506
- <!-- Stories Section -->
507
- <div class="stories">
508
- <div class="story" onclick="showCreateStoryModal()">
509
- <div class="story-add">
510
- <i class="fas fa-plus"></i>
511
- </div>
512
- <div class="story-username">قصتك</div>
513
- </div>
514
- <div class="story">
515
- <div class="story-avatar">
516
- <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User">
517
  </div>
518
- <div class="story-username">user1</div>
519
- </div>
520
- <div class="story">
521
- <div class="story-avatar">
522
- <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User">
523
  </div>
524
- <div class="story-username">user2</div>
525
  </div>
526
- <div class="story">
527
- <div class="story-avatar">
528
- <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User">
 
 
 
529
  </div>
530
- <div class="story-username">user3</div>
531
- </div>
532
- <div class="story">
533
- <div class="story-avatar">
534
- <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User">
535
  </div>
536
- <div class="story-username">user4</div>
537
- </div>
538
- </div>
539
-
540
- <!-- Tabs Section -->
541
- <div class="profile-tabs">
542
- <div class="tab active">
543
- <i class="fas fa-table-cells-large"></i>
544
- </div>
545
- <div class="tab">
546
- <i class="fas fa-tag"></i>
547
  </div>
548
  </div>
549
 
550
- <!-- Posts Grid -->
551
- <div class="posts-grid" id="postsGrid">
552
- <!-- سيتم ملء هذا القسم بالمنشورات ديناميكيًا -->
553
- </div>
554
-
555
  <!-- Bottom Navigation -->
556
  <div class="bottom-nav">
557
- <i class="fas fa-home"></i>
558
  <i class="fas fa-search"></i>
559
  <i class="far fa-plus-square"></i>
560
  <i class="far fa-heart"></i>
561
  <i class="fas fa-user"></i>
562
  </div>
563
 
564
- <!-- Edit Profile Modal -->
565
- <div class="modal" id="editProfileModal">
566
- <div class="modal-content">
567
- <div class="modal-header">
568
- <div class="modal-close" onclick="hideEditProfileModal()">
569
- <i class="fas fa-times"></i>
570
- </div>
571
- <div class="modal-title">تعديل الملف الشخصي</div>
572
- <div class="modal-save" onclick="saveProfileChanges()">حفظ</div>
573
- </div>
574
- <div class="modal-body">
575
- <div class="avatar-edit-container">
576
- <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="avatar-preview" id="avatarPreview">
577
- <div class="change-avatar-btn" onclick="changeProfilePicture()">تغيير الصورة الشخصية</div>
578
- <input type="file" id="avatarUpload" accept="image/*" style="display: none;">
579
- </div>
580
-
581
- <div class="edit-form-group">
582
- <label for="editName">الاسم</label>
583
- <input type="text" id="editName" value="سارة أحمد">
584
- </div>
585
-
586
- <div class="edit-form-group">
587
- <label for="editUsername">اسم المستخدم</label>
588
- <input type="text" id="editUsername" value="@sara_ahmed">
589
- </div>
590
-
591
- <div class="edit-form-group">
592
- <label for="editBio">البايو</label>
593
- <textarea id="editBio">مصممة جرافيك | محبة للسفر والتصوير | أعيش في دبي
594
- 🌍✈️📷</textarea>
595
- </div>
596
-
597
- <div class="edit-form-group">
598
- <label for="editWebsite">الموقع الإلكتروني</label>
599
- <input type="text" id="editWebsite" value="www.sara-portfolio.com">
600
- </div>
601
  </div>
 
602
  </div>
603
- </div>
604
-
605
- <!-- Create Story Modal -->
606
- <div class="modal" id="createStoryModal">
607
- <div class="modal-content story-modal-content">
608
- <div class="modal-header">
609
- <div class="modal-close" onclick="hideCreateStoryModal()">
610
- <i class="fas fa-times"></i>
611
- </div>
612
- <div class="modal-title">إنشاء قصة جديدة</div>
613
- </div>
614
-
615
- <img src="" alt="Story Preview" class="story-modal-preview" id="storyPreview">
616
-
617
- <div class="story-modal-footer">
618
- <button class="story-post-btn" onclick="postStory()">نشر القصة</button>
619
  </div>
620
-
621
- <input type="file" id="storyUpload" accept="image/*,video/*" style="display: none;">
622
  </div>
623
  </div>
624
 
625
  <script>
626
- // بيانات المستخدم
627
- const userProfile = {
628
- name: "سارة أحمد",
629
- username: "@sara_ahmed",
630
- bio: "مصممة جرافيك | محبة للسفر والتصوير | أعيش في دبي\n🌍✈️📷",
631
- website: "www.sara-portfolio.com",
632
- avatar: "https://randomuser.me/api/portraits/women/44.jpg",
633
- postsCount: 24,
634
- followersCount: "1.2K",
635
- followingCount: 340,
636
- posts: [
637
- { id: 1, image: "https://source.unsplash.com/random/600x600?design", likes: 124, comments: 12 },
638
- { id: 2, image: "https://source.unsplash.com/random/600x600?dubai", likes: 89, comments: 5 },
639
- { id: 3, image: "https://source.unsplash.com/random/600x600?travel", likes: 156, comments: 23 },
640
- { id: 4, image: "https://source.unsplash.com/random/600x600?photography", likes: 201, comments: 18 },
641
- { id: 5, image: "https://source.unsplash.com/random/600x600?art", likes: 76, comments: 7 },
642
- { id: 6, image: "https://source.unsplash.com/random/600x600?nature", likes: 312, comments: 42 },
643
- { id: 7, image: "https://source.unsplash.com/random/600x600?beach", likes: 178, comments: 15 },
644
- { id: 8, image: "https://source.unsplash.com/random/600x600?architecture", likes: 92, comments: 9 },
645
- { id: 9, image: "https://source.unsplash.com/random/600x600?food", likes: 145, comments: 21 }
646
- ]
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
647
  };
648
 
649
  // عناصر DOM
650
- const editProfileModal = document.getElementById('editProfileModal');
651
- const createStoryModal = document.getElementById('createStoryModal');
652
- const postsGrid = document.getElementById('postsGrid');
653
- const avatarUpload = document.getElementById('avatarUpload');
654
- const storyUpload = document.getElementById('storyUpload');
 
 
 
 
 
 
 
 
 
 
 
655
 
656
  // تهيئة الصفحة
657
- function initProfilePage() {
658
- // عرض بيانات المستخدم
659
- document.getElementById('profileName').textContent = userProfile.name;
660
- document.getElementById('profileUsername').textContent = userProfile.username;
661
- document.getElementById('profileBio').textContent = userProfile.bio;
662
- document.getElementById('profileWebsite').textContent = userProfile.website;
663
- document.getElementById('profileAvatarImg').src = userProfile.avatar;
664
- document.getElementById('postsCount').textContent = userProfile.postsCount;
665
- document.getElementById('followersCount').textContent = userProfile.followersCount;
666
- document.getElementById('followingCount').textContent = userProfile.followingCount;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
667
 
668
- // عرض المنشورات
669
- renderPosts();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
670
  }
671
 
672
- // عرض المنشورات في الشبكة
673
- function renderPosts() {
674
- postsGrid.innerHTML = '';
675
 
676
- userProfile.posts.forEach(post => {
677
- const postElement = document.createElement('div');
678
- postElement.className = 'post-thumbnail';
679
- postElement.innerHTML = `
680
- <img src="${post.image}" alt="Post ${post.id}">
681
- <div class="post-thumbnail-overlay">
682
- <div class="post-thumbnail-stat">
683
- <i class="fas fa-heart"></i>
684
- <span>${post.likes}</span>
685
- </div>
686
- <div class="post-thumbnail-stat">
687
- <i class="fas fa-comment"></i>
688
- <span>${post.comments}</span>
689
- </div>
 
 
 
690
  </div>
691
  `;
692
 
693
- postsGrid.appendChild(postElement);
694
  });
695
  }
696
 
697
- // عرض نافذة تعديل الملف الشخصي
698
- function showEditProfileModal() {
699
- // تعبئة البيانات الحالية في النموذج
700
- document.getElementById('editName').value = userProfile.name;
701
- document.getElementById('editUsername').value = userProfile.username;
702
- document.getElementById('editBio').value = userProfile.bio;
703
- document.getElementById('editWebsite').value = userProfile.website;
704
- document.getElementById('avatarPreview').src = userProfile.avatar;
705
 
706
- editProfileModal.style.display = 'flex';
707
- }
708
-
709
- // إخفاء نافذة تعديل الملف الشخصي
710
- function hideEditProfileModal() {
711
- editProfileModal.style.display = 'none';
 
 
 
 
 
 
 
 
 
 
 
712
  }
713
 
714
- // حفظ التعديلات على الملف الشخصي
715
- function saveProfileChanges() {
716
- userProfile.name = document.getElementById('editName').value;
717
- userProfile.username = document.getElementById('editUsername').value;
718
- userProfile.bio = document.getElementById('editBio').value;
719
- userProfile.website = document.getElementById('editWebsite').value;
720
 
721
- // تحديث واجهة المستخدم بالبيانات الجديدة
722
- document.getElementById('profileName').textContent = userProfile.name;
723
- document.getElementById('profileUsername').textContent = userProfile.username;
724
- document.getElementById('profileBio').textContent = userProfile.bio;
725
- document.getElementById('profileWebsite').textContent = userProfile.website;
726
 
727
- hideEditProfileModal();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
728
  }
729
 
730
- // تغيير الصورة الشخصية
731
- function changeProfilePicture() {
732
- avatarUpload.click();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
733
  }
734
 
735
- // عرض نافذة تعديل الصورة الشخصية مباشرة
736
- function showEditAvatarModal() {
737
- showEditProfileModal();
738
- changeProfilePicture();
 
 
 
 
739
  }
740
 
741
- // عرض نافذة إنشاء قصة
742
- function showCreateStoryModal() {
743
- createStoryModal.style.display = 'flex';
744
- storyUpload.click();
 
 
 
 
 
 
 
 
745
  }
746
 
747
- // إخفاء نافذة إنشاء قصة
748
- function hideCreateStoryModal() {
749
- createStoryModal.style.display = 'none';
 
 
 
 
750
  }
751
 
752
- // نشر القصة
753
- function postStory() {
754
- alert('تم نشر قصتك بنجاح!');
755
- hideCreateStoryModal();
756
  }
757
 
758
- // معالجة اختيار صورة جديدة للصورة الشخصية
759
- avatarUpload.addEventListener('change', function(e) {
760
- if (this.files && this.files[0]) {
761
- const reader = new FileReader();
 
 
762
 
763
- reader.onload = function(event) {
764
- // تحديث الصورة في نافذة التعديل
765
- document.getElementById('avatarPreview').src = event.target.result;
766
-
767
- // تحديث الصورة في الملف الشخصي
768
- userProfile.avatar = event.target.result;
769
- document.getElementById('profileAvatarImg').src = event.target.result;
770
- };
 
 
 
 
 
 
 
 
 
771
 
772
- reader.readAsDataURL(this.files[0]);
 
 
 
 
 
773
  }
774
- });
775
 
776
- // معالجة اختيار صورة/فيديو للقصة
777
- storyUpload.addEventListener('change', function(e) {
778
- if (this.files && this.files[0]) {
779
- const file = this.files[0];
780
- const reader = new FileReader();
 
 
 
 
 
 
 
 
 
 
781
 
782
- reader.onload = function(event) {
783
- document.getElementById('storyPreview').src = event.target.result;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
784
  };
785
 
786
- if (file.type.includes('image')) {
787
- reader.readAsDataURL(file);
788
- } else if (file.type.includes('video')) {
789
- // يمكنك هنا معالجة ملفات الفيديو إذا أردت
790
- alert('تم اختيار فيديو للقصة');
791
- }
792
  }
793
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
794
 
795
  // تهيئة الصفحة عند التحميل
796
- window.addEventListener('DOMContentLoaded', initProfilePage);
797
  </script>
798
  </body>
799
  </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
+ :root {
10
+ --primary-color: #0095f6;
11
+ --primary-light: #b3dffd;
12
+ --text-dark: #262626;
13
+ --text-gray: #8e8e8e;
14
+ --border-color: #dbdbdb;
15
+ --bg-white: #ffffff;
16
+ --bg-light: #fafafa;
17
+ --error-color: #ed4956;
18
+ --success-color: #4BB543;
19
+ }
20
+
21
  * {
22
  margin: 0;
23
  padding: 0;
24
  box-sizing: border-box;
25
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
26
+ -webkit-tap-highlight-color: transparent;
27
  }
28
 
29
  body {
30
+ background-color: var(--bg-light);
31
+ color: var(--text-dark);
32
+ padding-bottom: 60px;
33
  }
34
 
35
+ /* Header */
36
  .header {
37
+ position: fixed;
38
+ top: 0;
39
+ left: 0;
40
+ right: 0;
41
+ height: 54px;
42
  display: flex;
43
  justify-content: space-between;
44
  align-items: center;
45
+ padding: 0 16px;
46
+ background-color: var(--bg-white);
47
+ border-bottom: 1px solid var(--border-color);
48
+ z-index: 100;
 
 
49
  }
50
 
51
  .header-logo {
52
+ font-family: 'Billabong', cursive;
53
  font-size: 24px;
54
+ font-weight: 600;
55
+ margin-top: 5px;
56
  }
57
 
58
  .header-icons {
 
63
  .header-icons i {
64
  font-size: 24px;
65
  cursor: pointer;
66
+ color: var(--text-dark);
67
  }
68
 
69
+ /* Main Content */
70
+ .main-content {
71
+ margin-top: 54px;
 
 
 
72
  }
73
 
74
+ /* Tabs Navigation */
75
+ .tabs-navigation {
76
  display: flex;
77
+ background-color: var(--bg-white);
78
+ border-bottom: 1px solid var(--border-color);
79
  }
80
 
81
+ .tab-btn {
82
+ flex: 1;
83
+ text-align: center;
84
+ padding: 15px 0;
85
+ font-weight: 600;
 
 
86
  cursor: pointer;
87
  position: relative;
88
+ color: var(--text-gray);
89
  }
90
 
91
+ .tab-btn.active {
92
+ color: var(--text-dark);
93
+ }
94
+
95
+ .tab-btn.active::after {
96
+ content: '';
97
  position: absolute;
98
  bottom: 0;
99
+ left: 0;
100
  right: 0;
101
+ height: 2px;
102
+ background-color: var(--text-dark);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
103
  }
104
 
105
+ /* Tab Content */
106
+ .tab-content {
107
+ display: none;
108
+ padding: 15px;
 
 
 
 
 
109
  }
110
 
111
+ .tab-content.active {
112
+ display: block;
 
113
  }
114
 
115
+ /* Friend Requests Section */
116
+ .section-title {
117
+ font-size: 16px;
118
+ font-weight: 600;
119
  margin-bottom: 15px;
 
 
 
 
 
120
  display: flex;
121
+ justify-content: space-between;
122
  align-items: center;
123
  }
124
 
125
+ .section-title a {
126
+ color: var(--text-gray);
127
+ font-size: 14px;
128
+ font-weight: normal;
 
 
 
 
 
 
 
 
129
  text-decoration: none;
 
 
 
 
 
 
 
 
 
 
 
 
130
  }
131
 
132
+ .friend-request-item, .suggested-friend-item {
 
133
  display: flex;
 
 
 
 
 
 
 
 
 
 
 
134
  align-items: center;
135
+ padding: 10px 0;
136
+ border-bottom: 1px solid var(--border-color);
137
  }
138
 
139
+ .friend-avatar {
140
+ width: 50px;
141
+ height: 50px;
142
  border-radius: 50%;
143
+ object-fit: cover;
144
+ margin-left: 15px;
145
  }
146
 
147
+ .friend-info {
148
+ flex: 1;
 
 
 
 
149
  }
150
 
151
+ .friend-name {
152
+ font-weight: 600;
153
+ font-size: 14px;
154
+ margin-bottom: 3px;
 
 
 
 
 
 
155
  }
156
 
157
+ .friend-meta {
158
+ color: var(--text-gray);
159
  font-size: 12px;
 
 
 
 
160
  }
161
 
162
+ .friend-actions {
 
163
  display: flex;
164
+ gap: 8px;
 
 
 
165
  }
166
 
167
+ .btn {
168
+ padding: 7px 12px;
169
+ border-radius: 8px;
170
+ font-size: 12px;
171
+ font-weight: 600;
172
  cursor: pointer;
173
+ border: none;
 
 
 
 
174
  }
175
 
176
+ .btn-primary {
177
+ background-color: var(--primary-color);
178
+ color: white;
 
 
 
 
 
179
  }
180
 
181
+ .btn-outline {
182
+ background-color: transparent;
183
+ border: 1px solid var(--border-color);
184
+ color: var(--text-dark);
185
  }
186
 
187
+ .btn-danger {
188
+ background-color: var(--error-color);
189
+ color: white;
 
 
 
190
  }
191
 
192
+ /* Messages Section */
193
+ .message-item {
194
+ display: flex;
195
+ align-items: center;
196
+ padding: 12px 0;
197
+ border-bottom: 1px solid var(--border-color);
198
  cursor: pointer;
199
  }
200
 
201
+ .message-avatar {
202
+ width: 60px;
203
+ height: 60px;
204
+ border-radius: 50%;
205
  object-fit: cover;
206
+ margin-left: 10px;
207
  }
208
 
209
+ .message-content {
210
+ flex: 1;
 
 
 
 
 
 
 
 
 
 
211
  }
212
 
213
+ .message-header {
214
  display: flex;
215
+ justify-content: space-between;
216
+ margin-bottom: 5px;
217
  }
218
 
219
+ .message-sender {
220
+ font-weight: 600;
221
+ font-size: 14px;
222
+ }
223
+
224
+ .message-time {
225
+ color: var(--text-gray);
226
+ font-size: 12px;
227
+ }
228
+
229
+ .message-preview {
230
  display: flex;
231
  align-items: center;
 
232
  }
233
 
234
+ .message-text {
235
+ font-size: 13px;
236
+ color: var(--text-gray);
237
+ max-width: 80%;
238
+ white-space: nowrap;
239
+ overflow: hidden;
240
+ text-overflow: ellipsis;
 
 
 
 
241
  }
242
 
243
+ .message-unread {
244
+ background-color: var(--primary-color);
245
+ width: 8px;
246
+ height: 8px;
247
+ border-radius: 50%;
248
+ margin-right: 5px;
249
  }
250
 
251
+ /* Chat Modal */
252
+ .chat-modal {
 
253
  position: fixed;
254
  top: 0;
255
  left: 0;
256
  right: 0;
257
  bottom: 0;
258
  background-color: rgba(0, 0, 0, 0.8);
259
+ z-index: 200;
260
+ display: none;
261
+ flex-direction: column;
 
 
 
 
 
 
 
 
 
262
  }
263
 
264
+ .chat-header {
265
+ background-color: var(--bg-white);
266
  padding: 15px;
 
267
  display: flex;
 
268
  align-items: center;
269
+ border-bottom: 1px solid var(--border-color);
 
 
 
 
 
 
 
 
270
  }
271
 
272
+ .chat-back-btn {
273
+ margin-left: 10px;
274
+ font-size: 20px;
275
  cursor: pointer;
 
276
  }
277
 
278
+ .chat-title {
279
+ flex: 1;
280
+ font-weight: 600;
281
+ text-align: center;
 
 
282
  }
283
 
284
+ .chat-body {
285
+ flex: 1;
286
+ background-color: var(--bg-white);
287
+ padding: 15px;
288
+ overflow-y: auto;
289
  }
290
 
291
+ .message-bubble {
292
+ max-width: 70%;
293
+ padding: 10px 15px;
294
+ border-radius: 18px;
295
+ margin-bottom: 10px;
296
+ font-size: 14px;
297
+ position: relative;
298
  }
299
 
300
+ .message-in {
301
+ background-color: var(--bg-light);
302
+ margin-right: auto;
303
+ border-bottom-right-radius: 0;
 
 
304
  }
305
 
306
+ .message-out {
307
+ background-color: var(--primary-light);
308
+ margin-left: auto;
309
+ border-bottom-left-radius: 0;
 
 
310
  }
311
 
312
+ .message-time {
313
+ font-size: 10px;
314
+ color: var(--text-gray);
315
+ margin-top: 5px;
316
+ text-align: right;
317
  }
318
 
319
+ .chat-footer {
320
+ background-color: var(--bg-white);
321
+ padding: 15px;
322
+ border-top: 1px solid var(--border-color);
323
  display: flex;
 
324
  align-items: center;
 
325
  }
326
 
327
+ .message-input {
328
+ flex: 1;
329
+ padding: 12px 15px;
330
+ border-radius: 22px;
331
+ border: 1px solid var(--border-color);
332
+ font-size: 14px;
333
+ background-color: var(--bg-light);
334
  }
335
 
336
+ .send-btn {
337
+ margin-right: 10px;
338
+ font-size: 20px;
339
+ color: var(--primary-color);
340
  cursor: pointer;
341
  }
342
 
343
+ /* Bottom Navigation */
344
+ .bottom-nav {
345
+ position: fixed;
346
+ bottom: 0;
347
+ left: 0;
348
+ right: 0;
349
+ background-color: var(--bg-white);
350
+ display: flex;
351
+ justify-content: space-around;
352
+ padding: 12px 0;
353
+ border-top: 1px solid var(--border-color);
354
  }
355
 
356
+ .bottom-nav i {
357
+ font-size: 24px;
358
+ cursor: pointer;
359
+ color: var(--text-dark);
 
360
  }
361
 
362
+ .bottom-nav i.active {
363
+ color: var(--primary-color);
 
 
364
  }
365
 
366
+ /* Font for Instagram-like logo */
367
+ @font-face {
368
+ font-family: 'Billabong';
369
+ src: url('https://fonts.cdnfonts.com/s/13949/Billabong.woff') format('woff');
 
 
 
 
370
  }
371
 
372
  /* Responsive */
373
  @media (max-width: 450px) {
374
+ .friend-avatar, .message-avatar {
375
+ width: 45px;
376
+ height: 45px;
 
377
  }
378
 
379
+ .btn {
380
+ padding: 5px 8px;
381
+ font-size: 11px;
 
 
 
382
  }
383
  }
384
  </style>
 
386
  <body>
387
  <!-- Header -->
388
  <div class="header">
389
+ <div class="header-logo">إنستا</div>
390
  <div class="header-icons">
391
+ <i class="far fa-heart" id="notificationsBtn"></i>
392
+ <i class="far fa-paper-plane" id="messagesBtn"></i>
393
  </div>
394
  </div>
395
 
396
+ <!-- Main Content -->
397
+ <div class="main-content">
398
+ <!-- Tabs Navigation -->
399
+ <div class="tabs-navigation">
400
+ <div class="tab-btn active" data-tab="friends">طلبات الصداقة</div>
401
+ <div class="tab-btn" data-tab="suggestions">اقتراحات</div>
402
+ <div class="tab-btn" data-tab="messages">المراسلة</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
403
  </div>
404
 
405
+ <!-- Friend Requests Tab -->
406
+ <div class="tab-content active" id="friends-tab">
407
+ <div class="section-title">
408
+ <span>طلبات الصداقة</span>
409
+ <a href="#" id="seeAllRequests">عرض الكل</a>
410
  </div>
411
+
412
+ <div id="friendRequestsList">
413
+ <!-- سيتم ملؤها بالطلبات ديناميكيًا -->
 
414
  </div>
 
415
  </div>
416
 
417
+ <!-- Suggestions Tab -->
418
+ <div class="tab-content" id="suggestions-tab">
419
+ <div class="section-title">
420
+ <span>أشخاص قد تعرفهم</span>
421
+ <a href="#" id="refreshSuggestions">تحديث</a>
 
 
 
 
 
 
 
 
 
422
  </div>
423
+
424
+ <div id="suggestionsList">
425
+ <!-- سيتم ملؤها بالاقتراحات ديناميكيًا -->
 
 
426
  </div>
 
427
  </div>
428
+
429
+ <!-- Messages Tab -->
430
+ <div class="tab-content" id="messages-tab">
431
+ <div class="section-title">
432
+ <span>المراسلة</span>
433
+ <a href="#" id="newMessageBtn">رسالة جديدة</a>
434
  </div>
435
+
436
+ <div id="messagesList">
437
+ <!-- سيتم ملؤها بالرسائل ديناميكيًا -->
 
 
438
  </div>
 
 
 
 
 
 
 
 
 
 
 
439
  </div>
440
  </div>
441
 
 
 
 
 
 
442
  <!-- Bottom Navigation -->
443
  <div class="bottom-nav">
444
+ <i class="fas fa-home active"></i>
445
  <i class="fas fa-search"></i>
446
  <i class="far fa-plus-square"></i>
447
  <i class="far fa-heart"></i>
448
  <i class="fas fa-user"></i>
449
  </div>
450
 
451
+ <!-- Chat Modal -->
452
+ <div class="chat-modal" id="chatModal">
453
+ <div class="chat-header">
454
+ <div class="chat-back-btn" id="chatBackBtn">
455
+ <i class="fas fa-arrow-left"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
456
  </div>
457
+ <div class="chat-title" id="chatTitle">محادثة</div>
458
  </div>
459
+ <div class="chat-body" id="chatBody">
460
+ <!-- سيتم ملؤها بالرسائل ديناميكيًا -->
461
+ </div>
462
+ <div class="chat-footer">
463
+ <input type="text" class="message-input" id="messageInput" placeholder="اكتب رسالة...">
464
+ <div class="send-btn" id="sendMessageBtn">
465
+ <i class="far fa-paper-plane"></i>
 
 
 
 
 
 
 
 
 
466
  </div>
 
 
467
  </div>
468
  </div>
469
 
470
  <script>
471
+ // بيانات التطبيق
472
+ const appData = {
473
+ currentUser: {
474
+ id: 1,
475
+ name: "سارة أحمد",
476
+ username: "@sara_ahmed",
477
+ avatar: "https://randomuser.me/api/portraits/women/44.jpg"
478
+ },
479
+ friendRequests: [
480
+ {
481
+ id: 2,
482
+ name: "أحمد محمد",
483
+ username: "@ahmed_mohamed",
484
+ avatar: "https://randomuser.me/api/portraits/men/32.jpg",
485
+ mutualFriends: 4,
486
+ date: "منذ ساعتين"
487
+ },
488
+ {
489
+ id: 3,
490
+ name: "ليلى خالد",
491
+ username: "@laila_khalid",
492
+ avatar: "https://randomuser.me/api/portraits/women/63.jpg",
493
+ mutualFriends: 2,
494
+ date: "منذ يوم"
495
+ },
496
+ {
497
+ id: 4,
498
+ name: "محمد علي",
499
+ username: "@mohamed_ali",
500
+ avatar: "https://randomuser.me/api/portraits/men/45.jpg",
501
+ mutualFriends: 7,
502
+ date: "منذ 3 أيام"
503
+ }
504
+ ],
505
+ suggestedFriends: [
506
+ {
507
+ id: 5,
508
+ name: "نورا سعيد",
509
+ username: "@nora_saeed",
510
+ avatar: "https://randomuser.me/api/portraits/women/22.jpg",
511
+ mutualFriends: 3
512
+ },
513
+ {
514
+ id: 6,
515
+ name: "خالد عمر",
516
+ username: "@khaled_omar",
517
+ avatar: "https://randomuser.me/api/portraits/men/12.jpg",
518
+ mutualFriends: 5
519
+ },
520
+ {
521
+ id: 7,
522
+ name: "هناء وليد",
523
+ username: "@hanna_waleed",
524
+ avatar: "https://randomuser.me/api/portraits/women/33.jpg",
525
+ mutualFriends: 1
526
+ },
527
+ {
528
+ id: 8,
529
+ name: "ياسر ناصر",
530
+ username: "@yasser_nasser",
531
+ avatar: "https://randomuser.me/api/portraits/men/67.jpg",
532
+ mutualFriends: 2
533
+ }
534
+ ],
535
+ messages: [
536
+ {
537
+ id: 2,
538
+ user: {
539
+ id: 2,
540
+ name: "أحمد محمد",
541
+ username: "@ahmed_mohamed",
542
+ avatar: "https://randomuser.me/api/portraits/men/32.jpg"
543
+ },
544
+ lastMessage: "مرحبًا، كيف حالك؟",
545
+ time: "10:30 ص",
546
+ unread: true,
547
+ chat: [
548
+ {
549
+ id: 1,
550
+ sender: 2,
551
+ text: "مرحبًا سارة!",
552
+ time: "10:20 ص"
553
+ },
554
+ {
555
+ id: 2,
556
+ sender: 2,
557
+ text: "كيف حالك؟",
558
+ time: "10:21 ص"
559
+ },
560
+ {
561
+ id: 3,
562
+ sender: 1,
563
+ text: "أهلاً أحمد، أنا بخير الحمد لله",
564
+ time: "10:25 ص"
565
+ },
566
+ {
567
+ id: 4,
568
+ sender: 2,
569
+ text: "هل أنتِ متاحة للقاء غدًا؟",
570
+ time: "10:30 ص"
571
+ }
572
+ ]
573
+ },
574
+ {
575
+ id: 3,
576
+ user: {
577
+ id: 3,
578
+ name: "ليلى خالد",
579
+ username: "@laila_khalid",
580
+ avatar: "https://randomuser.me/api/portraits/women/63.jpg"
581
+ },
582
+ lastMessage: "شكرًا لكِ!",
583
+ time: "أمس",
584
+ unread: false,
585
+ chat: [
586
+ {
587
+ id: 1,
588
+ sender: 3,
589
+ text: "مرحبًا سارة، شكرًا على المساعدة",
590
+ time: "9:00 م"
591
+ },
592
+ {
593
+ id: 2,
594
+ sender: 1,
595
+ text: "لا شكر على واجب ليلى",
596
+ time: "9:05 م"
597
+ },
598
+ {
599
+ id: 3,
600
+ sender: 3,
601
+ text: "حقًا ساعدتيني كثيرًا",
602
+ time: "9:10 م"
603
+ },
604
+ {
605
+ id: 4,
606
+ sender: 3,
607
+ text: "شكرًا لكِ!",
608
+ time: "9:12 م"
609
+ }
610
+ ]
611
+ }
612
+ ],
613
+ friends: []
614
  };
615
 
616
  // عناصر DOM
617
+ const tabBtns = document.querySelectorAll('.tab-btn');
618
+ const tabContents = document.querySelectorAll('.tab-content');
619
+ const friendRequestsList = document.getElementById('friendRequestsList');
620
+ const suggestionsList = document.getElementById('suggestionsList');
621
+ const messagesList = document.getElementById('messagesList');
622
+ const chatModal = document.getElementById('chatModal');
623
+ const chatBody = document.getElementById('chatBody');
624
+ const messageInput = document.getElementById('messageInput');
625
+ const sendMessageBtn = document.getElementById('sendMessageBtn');
626
+ const chatBackBtn = document.getElementById('chatBackBtn');
627
+ const chatTitle = document.getElementById('chatTitle');
628
+ const messagesBtn = document.getElementById('messagesBtn');
629
+ const notificationsBtn = document.getElementById('notificationsBtn');
630
+ const seeAllRequests = document.getElementById('seeAllRequests');
631
+ const refreshSuggestions = document.getElementById('refreshSuggestions');
632
+ const newMessageBtn = document.getElementById('newMessageBtn');
633
 
634
  // تهيئة الصفحة
635
+ function initPage() {
636
+ renderFriendRequests();
637
+ renderSuggestedFriends();
638
+ renderMessages();
639
+ setupEventListeners();
640
+ }
641
+
642
+ // إعداد مستمعي الأحداث
643
+ function setupEventListeners() {
644
+ // تبديل التبويبات
645
+ tabBtns.forEach(btn => {
646
+ btn.addEventListener('click', () => {
647
+ tabBtns.forEach(b => b.classList.remove('active'));
648
+ btn.classList.add('active');
649
+
650
+ tabContents.forEach(content => content.classList.remove('active'));
651
+ document.getElementById(`${btn.dataset.tab}-tab`).classList.add('active');
652
+ });
653
+ });
654
+
655
+ // فتح وإغلاق الدردشة
656
+ messagesBtn.addEventListener('click', () => {
657
+ tabBtns.forEach(b => b.classList.remove('active'));
658
+ document.querySelector('.tab-btn[data-tab="messages"]').classList.add('active');
659
+
660
+ tabContents.forEach(content => content.classList.remove('active'));
661
+ document.getElementById('messages-tab').classList.add('active');
662
+ });
663
+
664
+ notificationsBtn.addEventListener('click', () => {
665
+ tabBtns.forEach(b => b.classList.remove('active'));
666
+ document.querySelector('.tab-btn[data-tab="friends"]').classList.add('active');
667
+
668
+ tabContents.forEach(content => content.classList.remove('active'));
669
+ document.getElementById('friends-tab').classList.add('active');
670
+ });
671
+
672
+ chatBackBtn.addEventListener('click', closeChat);
673
+
674
+ // إرسال رسالة
675
+ sendMessageBtn.addEventListener('click', sendMessage);
676
+ messageInput.addEventListener('keypress', (e) => {
677
+ if (e.key === 'Enter') {
678
+ sendMessage();
679
+ }
680
+ });
681
 
682
+ // عرض كل الطلبات
683
+ seeAllRequests.addEventListener('click', (e) => {
684
+ e.preventDefault();
685
+ alert('عرض جميع طلبات الصداقة');
686
+ });
687
+
688
+ // تحديث الاقتراحات
689
+ refreshSuggestions.addEventListener('click', (e) => {
690
+ e.preventDefault();
691
+ refreshFriendSuggestions();
692
+ });
693
+
694
+ // رسالة جديدة
695
+ newMessageBtn.addEventListener('click', (e) => {
696
+ e.preventDefault();
697
+ startNewMessage();
698
+ });
699
  }
700
 
701
+ // عرض طلبات الصداقة
702
+ function renderFriendRequests() {
703
+ friendRequestsList.innerHTML = '';
704
 
705
+ if (appData.friendRequests.length === 0) {
706
+ friendRequestsList.innerHTML = '<p style="text-align: center; color: var(--text-gray); padding: 20px;">لا توجد طلبات صداقة جديدة</p>';
707
+ return;
708
+ }
709
+
710
+ appData.friendRequests.forEach(request => {
711
+ const requestElement = document.createElement('div');
712
+ requestElement.className = 'friend-request-item';
713
+ requestElement.innerHTML = `
714
+ <img src="${request.avatar}" class="friend-avatar" alt="${request.name}">
715
+ <div class="friend-info">
716
+ <div class="friend-name">${request.name}</div>
717
+ <div class="friend-meta">${request.mutualFriends} أصدقاء مشتركين • ${request.date}</div>
718
+ </div>
719
+ <div class="friend-actions">
720
+ <button class="btn btn-primary" onclick="acceptFriendRequest(${request.id})">قبول</button>
721
+ <button class="btn btn-outline" onclick="declineFriendRequest(${request.id})">حذف</button>
722
  </div>
723
  `;
724
 
725
+ friendRequestsList.appendChild(requestElement);
726
  });
727
  }
728
 
729
+ // عرض اقتراحات الأصدقاء
730
+ function renderSuggestedFriends() {
731
+ suggestionsList.innerHTML = '';
 
 
 
 
 
732
 
733
+ appData.suggestedFriends.forEach(friend => {
734
+ const friendElement = document.createElement('div');
735
+ friendElement.className = 'suggested-friend-item';
736
+ friendElement.innerHTML = `
737
+ <img src="${friend.avatar}" class="friend-avatar" alt="${friend.name}">
738
+ <div class="friend-info">
739
+ <div class="friend-name">${friend.name}</div>
740
+ <div class="friend-meta">${friend.mutualFriends} أصدقاء مشتركين</div>
741
+ </div>
742
+ <div class="friend-actions">
743
+ <button class="btn btn-primary" onclick="sendFriendRequest(${friend.id})">إرسال طلب</button>
744
+ <button class="btn btn-outline" onclick="removeSuggestion(${friend.id})">إزالة</button>
745
+ </div>
746
+ `;
747
+
748
+ suggestionsList.appendChild(friendElement);
749
+ });
750
  }
751
 
752
+ // عرض الرسائل
753
+ function renderMessages() {
754
+ messagesList.innerHTML = '';
 
 
 
755
 
756
+ if (appData.messages.length === 0) {
757
+ messagesList.innerHTML = '<p style="text-align: center; color: var(--text-gray); padding: 20px;">لا توجد رسائل</p>';
758
+ return;
759
+ }
 
760
 
761
+ appData.messages.forEach(message => {
762
+ const messageElement = document.createElement('div');
763
+ messageElement.className = 'message-item';
764
+ messageElement.innerHTML = `
765
+ <img src="${message.user.avatar}" class="message-avatar" alt="${message.user.name}">
766
+ <div class="message-content">
767
+ <div class="message-header">
768
+ <div class="message-sender">${message.user.name}</div>
769
+ <div class="message-time">${message.time}</div>
770
+ </div>
771
+ <div class="message-preview">
772
+ ${message.unread ? '<div class="message-unread"></div>' : ''}
773
+ <div class="message-text">${message.lastMessage}</div>
774
+ </div>
775
+ </div>
776
+ `;
777
+
778
+ messageElement.addEventListener('click', () => openChat(message.user.id));
779
+ messagesList.appendChild(messageElement);
780
+ });
781
  }
782
 
783
+ // قبول طلب صداقة
784
+ function acceptFriendRequest(userId) {
785
+ const requestIndex = appData.friendRequests.findIndex(req => req.id === userId);
786
+ if (requestIndex !== -1) {
787
+ const acceptedUser = appData.friendRequests[requestIndex];
788
+
789
+ // نقل المستخدم إلى قائمة الأصدقاء
790
+ appData.friends.push({
791
+ id: acceptedUser.id,
792
+ name: acceptedUser.name,
793
+ username: acceptedUser.username,
794
+ avatar: acceptedUser.avatar
795
+ });
796
+
797
+ // إزالة الطلب من القائمة
798
+ appData.friendRequests.splice(requestIndex, 1);
799
+
800
+ // عرض تنبيه
801
+ showAlert('تم قبول طلب الصداقة بنجاح', 'success');
802
+
803
+ // تحديث الواجهة
804
+ renderFriendRequests();
805
+ }
806
  }
807
 
808
+ // رفض طلب صداقة
809
+ function declineFriendRequest(userId) {
810
+ const requestIndex = appData.friendRequests.findIndex(req => req.id === userId);
811
+ if (requestIndex !== -1) {
812
+ appData.friendRequests.splice(requestIndex, 1);
813
+ showAlert('تم حذف طلب الصداقة', 'info');
814
+ renderFriendRequests();
815
+ }
816
  }
817
 
818
+ // إرسال طلب صداقة
819
+ function sendFriendRequest(userId) {
820
+ const friendIndex = appData.suggestedFriends.findIndex(f => f.id === userId);
821
+ if (friendIndex !== -1) {
822
+ const friend = appData.suggestedFriends[friendIndex];
823
+ showAlert(`تم إرسال طلب صداقة إلى ${friend.name}`, 'success');
824
+
825
+ // في تطبيق حقيقي، سيتم إرسال الطلب إلى الخادم
826
+ setTimeout(() => {
827
+ removeSuggestion(userId);
828
+ }, 1000);
829
+ }
830
  }
831
 
832
+ // إزالة اقتراح
833
+ function removeSuggestion(userId) {
834
+ const friendIndex = appData.suggestedFriends.findIndex(f => f.id === userId);
835
+ if (friendIndex !== -1) {
836
+ appData.suggestedFriends.splice(friendIndex, 1);
837
+ renderSuggestedFriends();
838
+ }
839
  }
840
 
841
+ // تحديث اقتراحات الأصدقاء
842
+ function refreshFriendSuggestions() {
843
+ // في تطبيق حقيقي، سيتم جلب بيانات جديدة من الخادم
844
+ showAlert('تم تحديث اقتراحات الأصدقاء', 'info');
845
  }
846
 
847
+ // فتح الدردشة
848
+ function openChat(userId) {
849
+ const message = appData.messages.find(m => m.user.id === userId);
850
+ if (message) {
851
+ // تحديث حالة الرسائل كمقروءة
852
+ message.unread = false;
853
 
854
+ // عرض الدردشة
855
+ chatTitle.textContent = message.user.name;
856
+ chatBody.innerHTML = '';
857
+
858
+ message.chat.forEach(msg => {
859
+ const messageClass = msg.sender === appData.currentUser.id ? 'message-out' : 'message-in';
860
+ const messageElement = document.createElement('div');
861
+ messageElement.className = `message-bubble ${messageClass}`;
862
+ messageElement.innerHTML = `
863
+ <div>${msg.text}</div>
864
+ <div class="message-time">${msg.time}</div>
865
+ `;
866
+ chatBody.appendChild(messageElement);
867
+ });
868
+
869
+ // التمرير إلى الأسفل
870
+ chatBody.scrollTop = chatBody.scrollHeight;
871
 
872
+ // فتح نافذة الدردشة
873
+ chatModal.style.display = 'flex';
874
+ document.body.style.overflow = 'hidden';
875
+
876
+ // حفظ معرف المستخدم في زر الإرسال
877
+ sendMessageBtn.dataset.userId = userId;
878
  }
879
+ }
880
 
881
+ // إغلاق الدردشة
882
+ function closeChat() {
883
+ chatModal.style.display = 'none';
884
+ document.body.style.overflow = 'auto';
885
+
886
+ // تحديث قائمة الرسائل
887
+ renderMessages();
888
+ }
889
+
890
+ // إرسال رسالة
891
+ function sendMessage() {
892
+ const text = messageInput.value.trim();
893
+ if (text && sendMessageBtn.dataset.userId) {
894
+ const userId = parseInt(sendMessageBtn.dataset.userId);
895
+ const message = appData.messages.find(m => m.user.id === userId);
896
 
897
+ if (message) {
898
+ // إنشاء رسالة جديدة
899
+ const newMessage = {
900
+ id: message.chat.length + 1,
901
+ sender: appData.currentUser.id,
902
+ text: text,
903
+ time: getCurrentTime()
904
+ };
905
+
906
+ // إضافة الرسالة إلى المحادثة
907
+ message.chat.push(newMessage);
908
+
909
+ // تحديث آخر رسالة
910
+ message.lastMessage = text;
911
+ message.time = 'الآن';
912
+ message.unread = false;
913
+
914
+ // عرض الرسالة في الدردشة
915
+ const messageElement = document.createElement('div');
916
+ messageElement.className = 'message-bubble message-out';
917
+ messageElement.innerHTML = `
918
+ <div>${text}</div>
919
+ <div class="message-time">${newMessage.time}</div>
920
+ `;
921
+ chatBody.appendChild(messageElement);
922
+
923
+ // مسح حقل الإدخال
924
+ messageInput.value = '';
925
+
926
+ // التمرير إلى الأسفل
927
+ chatBody.scrollTop = chatBody.scrollHeight;
928
+
929
+ // في تطبيق حقيقي، سيتم إرسال الرسالة إلى الخادم
930
+ // هنا سنقوم بمحاكاة الرد بعد ثانيتين
931
+ setTimeout(() => {
932
+ const replyMessage = {
933
+ id: message.chat.length + 1,
934
+ sender: userId,
935
+ text: getRandomReply(),
936
+ time: getCurrentTime()
937
+ };
938
+
939
+ message.chat.push(replyMessage);
940
+ message.lastMessage = replyMessage.text;
941
+
942
+ if (!chatModal.style.display || chatModal.style.display === 'none') {
943
+ message.unread = true;
944
+ } else {
945
+ const replyElement = document.createElement('div');
946
+ replyElement.className = 'message-bubble message-in';
947
+ replyElement.innerHTML = `
948
+ <div>${replyMessage.text}</div>
949
+ <div class="message-time">${replyMessage.time}</div>
950
+ `;
951
+ chatBody.appendChild(replyElement);
952
+ chatBody.scrollTop = chatBody.scrollHeight;
953
+ }
954
+
955
+ renderMessages();
956
+ }, 2000);
957
+ }
958
+ }
959
+ }
960
+
961
+ // بدء رسالة جديدة
962
+ function startNewMessage() {
963
+ // في تطبيق حقيقي، سيكون هناك واجهة لاختيار المستلم
964
+ const randomFriend = appData.suggestedFriends[Math.floor(Math.random() * appData.suggestedFriends.length)];
965
+
966
+ if (randomFriend) {
967
+ // إنشاء محادثة جديدة
968
+ const newChat = {
969
+ id: randomFriend.id,
970
+ user: {
971
+ id: randomFriend.id,
972
+ name: randomFriend.name,
973
+ username: randomFriend.username,
974
+ avatar: randomFriend.avatar
975
+ },
976
+ lastMessage: "بدأت محادثة جديدة",
977
+ time: "الآن",
978
+ unread: false,
979
+ chat: []
980
  };
981
 
982
+ appData.messages.unshift(newChat);
983
+ renderMessages();
984
+ openChat(randomFriend.id);
985
+ } else {
986
+ showAlert('لا يوجد أصدقاء متاحين لبدء محادثة جديدة', 'error');
 
987
  }
988
+ }
989
+
990
+ // الحصول على الوقت الحالي بتنسيق مناسب
991
+ function getCurrentTime() {
992
+ const now = new Date();
993
+ const hours = now.getHours();
994
+ const minutes = now.getMinutes();
995
+ const ampm = hours >= 12 ? 'م' : 'ص';
996
+ const formattedHours = hours % 12 || 12;
997
+ return `${formattedHours}:${minutes < 10 ? '0' + minutes : minutes} ${ampm}`;
998
+ }
999
+
1000
+ // توليد رد عشوائي
1001
+ function getRandomReply() {
1002
+ const replies = [
1003
+ "نعم، بالتأكيد!",
1004
+ "سأرد عليك لاحقًا",
1005
+ "شكرًا لك",
1006
+ "أنا مشغول الآن، سأتحدث معك لاحقًا",
1007
+ "حسنًا، فهمت",
1008
+ "ممتاز!",
1009
+ "هل يمكننا التحدث غدًا؟",
1010
+ "أنا موافق على ذلك",
1011
+ "هذا رائع!",
1012
+ "لا أعتقد أن هذا ممكن"
1013
+ ];
1014
+ return replies[Math.floor(Math.random() * replies.length)];
1015
+ }
1016
+
1017
+ // عرض تنبيه
1018
+ function showAlert(message, type) {
1019
+ const alertDiv = document.createElement('div');
1020
+ alertDiv.style.position = 'fixed';
1021
+ alertDiv.style.top = '20px';
1022
+ alertDiv.style.left = '50%';
1023
+ alertDiv.style.transform = 'translateX(-50%)';
1024
+ alertDiv.style.padding = '10px 20px';
1025
+ alertDiv.style.borderRadius = '8px';
1026
+ alertDiv.style.color = 'white';
1027
+ alertDiv.style.fontWeight = '600';
1028
+ alertDiv.style.zIndex = '1000';
1029
+ alertDiv.style.boxShadow = '0 2px 10px rgba(0,0,0,0.2)';
1030
+ alertDiv.style.animation = 'fadeIn 0.3s, fadeOut 0.3s 2.7s';
1031
+
1032
+ if (type === 'success') {
1033
+ alertDiv.style.backgroundColor = 'var(--success-color)';
1034
+ } else if (type === 'error') {
1035
+ alertDiv.style.backgroundColor = 'var(--error-color)';
1036
+ } else {
1037
+ alertDiv.style.backgroundColor = 'var(--primary-color)';
1038
+ }
1039
+
1040
+ alertDiv.textContent = message;
1041
+ document.body.appendChild(alertDiv);
1042
+
1043
+ setTimeout(() => {
1044
+ document.body.removeChild(alertDiv);
1045
+ }, 3000);
1046
+ }
1047
 
1048
  // تهيئة الصفحة عند التحميل
1049
+ window.addEventListener('DOMContentLoaded', initPage);
1050
  </script>
1051
  </body>
1052
  </html>