| <!DOCTYPE html> |
| <html lang="ar" dir="rtl"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>إنستا | الشبكة الاجتماعية</title> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| :root { |
| --primary-color: #0095f6; |
| --primary-light: #b3dffd; |
| --text-dark: #262626; |
| --text-gray: #8e8e8e; |
| --border-color: #dbdbdb; |
| --bg-white: #ffffff; |
| --bg-light: #fafafa; |
| --error-color: #ed4956; |
| --success-color: #4BB543; |
| --notification-badge: #ff3040; |
| } |
| |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; |
| -webkit-tap-highlight-color: transparent; |
| } |
| |
| body { |
| background-color: var(--bg-light); |
| color: var(--text-dark); |
| padding-bottom: 60px; |
| } |
| |
| |
| .header { |
| position: fixed; |
| top: 0; |
| left: 0; |
| right: 0; |
| height: 54px; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding: 0 16px; |
| background-color: var(--bg-white); |
| border-bottom: 1px solid var(--border-color); |
| z-index: 100; |
| } |
| |
| .header-logo { |
| font-family: 'Billabong', cursive; |
| font-size: 24px; |
| font-weight: 600; |
| margin-top: 5px; |
| } |
| |
| .header-icons { |
| display: flex; |
| gap: 20px; |
| position: relative; |
| } |
| |
| .header-icons i { |
| font-size: 24px; |
| cursor: pointer; |
| color: var(--text-dark); |
| position: relative; |
| } |
| |
| .notification-badge { |
| position: absolute; |
| top: -5px; |
| right: -5px; |
| background-color: var(--notification-badge); |
| color: white; |
| border-radius: 50%; |
| width: 18px; |
| height: 18px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 10px; |
| font-weight: bold; |
| } |
| |
| |
| .main-content { |
| margin-top: 54px; |
| } |
| |
| |
| .tabs-navigation { |
| display: flex; |
| background-color: var(--bg-white); |
| border-bottom: 1px solid var(--border-color); |
| } |
| |
| .tab-btn { |
| flex: 1; |
| text-align: center; |
| padding: 15px 0; |
| font-weight: 600; |
| cursor: pointer; |
| position: relative; |
| color: var(--text-gray); |
| } |
| |
| .tab-btn.active { |
| color: var(--text-dark); |
| } |
| |
| .tab-btn.active::after { |
| content: ''; |
| position: absolute; |
| bottom: 0; |
| left: 0; |
| right: 0; |
| height: 2px; |
| background-color: var(--text-dark); |
| } |
| |
| |
| .tab-content { |
| display: none; |
| padding: 15px; |
| } |
| |
| .tab-content.active { |
| display: block; |
| } |
| |
| |
| .section-title { |
| font-size: 16px; |
| font-weight: 600; |
| margin-bottom: 15px; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| } |
| |
| .section-title a { |
| color: var(--text-gray); |
| font-size: 14px; |
| font-weight: normal; |
| text-decoration: none; |
| } |
| |
| .friend-request-item, .suggested-friend-item, .notification-item { |
| display: flex; |
| align-items: center; |
| padding: 10px 0; |
| border-bottom: 1px solid var(--border-color); |
| } |
| |
| .friend-avatar, .notification-avatar { |
| width: 50px; |
| height: 50px; |
| border-radius: 50%; |
| object-fit: cover; |
| margin-left: 15px; |
| } |
| |
| .friend-info, .notification-info { |
| flex: 1; |
| } |
| |
| .friend-name, .notification-text { |
| font-weight: 600; |
| font-size: 14px; |
| margin-bottom: 3px; |
| } |
| |
| .friend-meta, .notification-time { |
| color: var(--text-gray); |
| font-size: 12px; |
| } |
| |
| .friend-actions, .notification-actions { |
| display: flex; |
| gap: 8px; |
| } |
| |
| .btn { |
| padding: 7px 12px; |
| border-radius: 8px; |
| font-size: 12px; |
| font-weight: 600; |
| cursor: pointer; |
| border: none; |
| } |
| |
| .btn-primary { |
| background-color: var(--primary-color); |
| color: white; |
| } |
| |
| .btn-outline { |
| background-color: transparent; |
| border: 1px solid var(--border-color); |
| color: var(--text-dark); |
| } |
| |
| .btn-danger { |
| background-color: var(--error-color); |
| color: white; |
| } |
| |
| |
| .message-item { |
| display: flex; |
| align-items: center; |
| padding: 12px 0; |
| border-bottom: 1px solid var(--border-color); |
| cursor: pointer; |
| } |
| |
| .message-avatar { |
| width: 60px; |
| height: 60px; |
| border-radius: 50%; |
| object-fit: cover; |
| margin-left: 10px; |
| } |
| |
| .message-content { |
| flex: 1; |
| } |
| |
| .message-header { |
| display: flex; |
| justify-content: space-between; |
| margin-bottom: 5px; |
| } |
| |
| .message-sender { |
| font-weight: 600; |
| font-size: 14px; |
| } |
| |
| .message-time { |
| color: var(--text-gray); |
| font-size: 12px; |
| } |
| |
| .message-preview { |
| display: flex; |
| align-items: center; |
| } |
| |
| .message-text { |
| font-size: 13px; |
| color: var(--text-gray); |
| max-width: 80%; |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
| |
| .message-unread { |
| background-color: var(--primary-color); |
| width: 8px; |
| height: 8px; |
| border-radius: 50%; |
| margin-right: 5px; |
| } |
| |
| |
| .chat-modal { |
| position: fixed; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background-color: rgba(0, 0, 0, 0.8); |
| z-index: 200; |
| display: none; |
| flex-direction: column; |
| } |
| |
| .chat-header { |
| background-color: var(--bg-white); |
| padding: 15px; |
| display: flex; |
| align-items: center; |
| border-bottom: 1px solid var(--border-color); |
| } |
| |
| .chat-back-btn { |
| margin-left: 10px; |
| font-size: 20px; |
| cursor: pointer; |
| } |
| |
| .chat-title { |
| flex: 1; |
| font-weight: 600; |
| text-align: center; |
| } |
| |
| .chat-body { |
| flex: 1; |
| background-color: var(--bg-white); |
| padding: 15px; |
| overflow-y: auto; |
| } |
| |
| .message-bubble { |
| max-width: 70%; |
| padding: 10px 15px; |
| border-radius: 18px; |
| margin-bottom: 10px; |
| font-size: 14px; |
| position: relative; |
| } |
| |
| .message-in { |
| background-color: var(--bg-light); |
| margin-right: auto; |
| border-bottom-right-radius: 0; |
| } |
| |
| .message-out { |
| background-color: var(--primary-light); |
| margin-left: auto; |
| border-bottom-left-radius: 0; |
| } |
| |
| .message-time { |
| font-size: 10px; |
| color: var(--text-gray); |
| margin-top: 5px; |
| text-align: right; |
| } |
| |
| .chat-footer { |
| background-color: var(--bg-white); |
| padding: 15px; |
| border-top: 1px solid var(--border-color); |
| display: flex; |
| align-items: center; |
| } |
| |
| .message-input { |
| flex: 1; |
| padding: 12px 15px; |
| border-radius: 22px; |
| border: 1px solid var(--border-color); |
| font-size: 14px; |
| background-color: var(--bg-light); |
| } |
| |
| .send-btn { |
| margin-right: 10px; |
| font-size: 20px; |
| color: var(--primary-color); |
| cursor: pointer; |
| } |
| |
| |
| .bottom-nav { |
| position: fixed; |
| bottom: 0; |
| left: 0; |
| right: 0; |
| background-color: var(--bg-white); |
| display: flex; |
| justify-content: space-around; |
| padding: 12px 0; |
| border-top: 1px solid var(--border-color); |
| } |
| |
| .bottom-nav i { |
| font-size: 24px; |
| cursor: pointer; |
| color: var(--text-dark); |
| } |
| |
| .bottom-nav i.active { |
| color: var(--primary-color); |
| } |
| |
| |
| .notifications-modal { |
| position: fixed; |
| top: 54px; |
| right: 10px; |
| width: 350px; |
| max-height: 500px; |
| overflow-y: auto; |
| background-color: var(--bg-white); |
| border-radius: 10px; |
| box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); |
| z-index: 150; |
| display: none; |
| } |
| |
| .notifications-header { |
| padding: 15px; |
| border-bottom: 1px solid var(--border-color); |
| font-weight: 600; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| } |
| |
| .notifications-close { |
| cursor: pointer; |
| } |
| |
| .notifications-list { |
| padding: 0; |
| } |
| |
| .notification-item { |
| padding: 12px 15px; |
| cursor: pointer; |
| } |
| |
| .notification-item.unread { |
| background-color: rgba(0, 149, 246, 0.05); |
| } |
| |
| .notification-item:hover { |
| background-color: var(--bg-light); |
| } |
| |
| |
| .search-container { |
| padding: 15px; |
| } |
| |
| .search-input { |
| width: 100%; |
| padding: 12px 15px; |
| border-radius: 8px; |
| border: 1px solid var(--border-color); |
| font-size: 14px; |
| margin-bottom: 15px; |
| background-color: var(--bg-light); |
| } |
| |
| .search-tabs { |
| display: flex; |
| border-bottom: 1px solid var(--border-color); |
| margin-bottom: 15px; |
| } |
| |
| .search-tab { |
| padding: 10px 15px; |
| cursor: pointer; |
| font-weight: 600; |
| color: var(--text-gray); |
| } |
| |
| .search-tab.active { |
| color: var(--text-dark); |
| border-bottom: 2px solid var(--text-dark); |
| } |
| |
| .posts-grid { |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| gap: 2px; |
| } |
| |
| .post-thumbnail { |
| width: 100%; |
| aspect-ratio: 1/1; |
| object-fit: cover; |
| cursor: pointer; |
| } |
| |
| |
| @font-face { |
| font-family: 'Billabong'; |
| src: url('https://fonts.cdnfonts.com/s/13949/Billabong.woff') format('woff'); |
| } |
| |
| |
| .push-notification { |
| position: fixed; |
| top: 20px; |
| left: 50%; |
| transform: translateX(-50%); |
| background-color: var(--bg-white); |
| padding: 12px 20px; |
| border-radius: 8px; |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); |
| z-index: 300; |
| display: flex; |
| align-items: center; |
| opacity: 0; |
| transition: opacity 0.3s, top 0.3s; |
| } |
| |
| .push-notification.show { |
| opacity: 1; |
| top: 30px; |
| } |
| |
| .push-notification-avatar { |
| width: 40px; |
| height: 40px; |
| border-radius: 50%; |
| object-fit: cover; |
| margin-left: 10px; |
| } |
| |
| .push-notification-text { |
| flex: 1; |
| font-size: 14px; |
| } |
| |
| .push-notification-close { |
| color: var(--text-gray); |
| cursor: pointer; |
| } |
| |
| |
| @media (max-width: 450px) { |
| .friend-avatar, .message-avatar, .notification-avatar { |
| width: 45px; |
| height: 45px; |
| } |
| |
| .btn { |
| padding: 5px 8px; |
| font-size: 11px; |
| } |
| |
| .notifications-modal { |
| width: 300px; |
| right: 5px; |
| } |
| } |
| </style> |
| </head> |
| <body> |
| |
| <div class="header"> |
| <div class="header-logo">إنستا</div> |
| <div class="header-icons"> |
| <i class="far fa-heart" id="notificationsBtn"> |
| <span class="notification-badge" id="notificationBadge" style="display: none;">0</span> |
| </i> |
| <i class="far fa-paper-plane" id="messagesBtn"></i> |
| </div> |
| </div> |
| |
| |
| <div class="main-content"> |
| |
| <div class="tabs-navigation"> |
| <div class="tab-btn active" data-tab="friends">طلبات الصداقة</div> |
| <div class="tab-btn" data-tab="suggestions">اقتراحات</div> |
| <div class="tab-btn" data-tab="messages">المراسلة</div> |
| <div class="tab-btn" data-tab="search">بحث</div> |
| </div> |
| |
| |
| <div class="tab-content active" id="friends-tab"> |
| <div class="section-title"> |
| <span>طلبات الصداقة</span> |
| <a href="#" id="seeAllRequests">عرض الكل</a> |
| </div> |
| |
| <div id="friendRequestsList"> |
| |
| </div> |
| </div> |
| |
| |
| <div class="tab-content" id="suggestions-tab"> |
| <div class="section-title"> |
| <span>أشخاص قد تعرفهم</span> |
| <a href="#" id="refreshSuggestions">تحديث</a> |
| </div> |
| |
| <div id="suggestionsList"> |
| |
| </div> |
| </div> |
| |
| |
| <div class="tab-content" id="messages-tab"> |
| <div class="section-title"> |
| <span>المراسلة</span> |
| <a href="#" id="newMessageBtn">رسالة جديدة</a> |
| </div> |
| |
| <div id="messagesList"> |
| |
| </div> |
| </div> |
| |
| |
| <div class="tab-content" id="search-tab"> |
| <div class="search-container"> |
| <input type="text" class="search-input" placeholder="ابحث عن أشخاص أو منشورات..." id="searchInput"> |
| |
| <div class="search-tabs"> |
| <div class="search-tab active" data-search-tab="posts">منشورات</div> |
| <div class="search-tab" data-search-tab="people">أشخاص</div> |
| </div> |
| |
| <div id="searchResults"> |
| <div class="posts-grid" id="postsGrid"> |
| |
| </div> |
| |
| <div id="peopleResults" style="display: none;"> |
| |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bottom-nav"> |
| <i class="fas fa-home active"></i> |
| <i class="fas fa-search" id="searchBtn"></i> |
| <i class="far fa-plus-square"></i> |
| <i class="far fa-heart" id="notificationsBtnMobile"></i> |
| <i class="fas fa-user"></i> |
| </div> |
| |
| |
| <div class="chat-modal" id="chatModal"> |
| <div class="chat-header"> |
| <div class="chat-back-btn" id="chatBackBtn"> |
| <i class="fas fa-arrow-left"></i> |
| </div> |
| <div class="chat-title" id="chatTitle">محادثة</div> |
| </div> |
| <div class="chat-body" id="chatBody"> |
| |
| </div> |
| <div class="chat-footer"> |
| <input type="text" class="message-input" id="messageInput" placeholder="اكتب رسالة..."> |
| <div class="send-btn" id="sendMessageBtn"> |
| <i class="far fa-paper-plane"></i> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="notifications-modal" id="notificationsModal"> |
| <div class="notifications-header"> |
| <span>الإشعارات</span> |
| <i class="fas fa-times notifications-close" id="notificationsClose"></i> |
| </div> |
| <div class="notifications-list" id="notificationsList"> |
| |
| </div> |
| </div> |
| |
| |
| <div class="push-notification" id="pushNotification"> |
| <img src="" class="push-notification-avatar" id="pushNotificationAvatar"> |
| <div class="push-notification-text" id="pushNotificationText"></div> |
| <i class="fas fa-times push-notification-close" id="pushNotificationClose"></i> |
| </div> |
| |
| <script> |
| |
| const appData = { |
| currentUser: { |
| id: 1, |
| name: "سارة أحمد", |
| username: "@sara_ahmed", |
| avatar: "https://randomuser.me/api/portraits/women/44.jpg" |
| }, |
| friendRequests: [ |
| { |
| id: 2, |
| name: "أحمد محمد", |
| username: "@ahmed_mohamed", |
| avatar: "https://randomuser.me/api/portraits/men/32.jpg", |
| mutualFriends: 4, |
| date: "منذ ساعتين" |
| }, |
| { |
| id: 3, |
| name: "ليلى خالد", |
| username: "@laila_khalid", |
| avatar: "https://randomuser.me/api/portraits/women/63.jpg", |
| mutualFriends: 2, |
| date: "منذ يوم" |
| }, |
| { |
| id: 4, |
| name: "محمد علي", |
| username: "@mohamed_ali", |
| avatar: "https://randomuser.me/api/portraits/men/45.jpg", |
| mutualFriends: 7, |
| date: "منذ 3 أيام" |
| } |
| ], |
| suggestedFriends: [ |
| { |
| id: 5, |
| name: "نورا سعيد", |
| username: "@nora_saeed", |
| avatar: "https://randomuser.me/api/portraits/women/22.jpg", |
| mutualFriends: 3 |
| }, |
| { |
| id: 6, |
| name: "خالد عمر", |
| username: "@khaled_omar", |
| avatar: "https://randomuser.me/api/portraits/men/12.jpg", |
| mutualFriends: 5 |
| }, |
| { |
| id: 7, |
| name: "هناء وليد", |
| username: "@hanna_waleed", |
| avatar: "https://randomuser.me/api/portraits/women/33.jpg", |
| mutualFriends: 1 |
| }, |
| { |
| id: 8, |
| name: "ياسر ناصر", |
| username: "@yasser_nasser", |
| avatar: "https://randomuser.me/api/portraits/men/67.jpg", |
| mutualFriends: 2 |
| } |
| ], |
| messages: [ |
| { |
| id: 2, |
| user: { |
| id: 2, |
| name: "أحمد محمد", |
| username: "@ahmed_mohamed", |
| avatar: "https://randomuser.me/api/portraits/men/32.jpg" |
| }, |
| lastMessage: "مرحبًا، كيف حالك؟", |
| time: "10:30 ص", |
| unread: true, |
| chat: [ |
| { |
| id: 1, |
| sender: 2, |
| text: "مرحبًا سارة!", |
| time: "10:20 ص" |
| }, |
| { |
| id: 2, |
| sender: 2, |
| text: "كيف حالك؟", |
| time: "10:21 ص" |
| }, |
| { |
| id: 3, |
| sender: 1, |
| text: "أهلاً أحمد، أنا بخير الحمد لله", |
| time: "10:25 ص" |
| }, |
| { |
| id: 4, |
| sender: 2, |
| text: "هل أنتِ متاحة للقاء غدًا؟", |
| time: "10:30 ص" |
| } |
| ] |
| }, |
| { |
| id: 3, |
| user: { |
| id: 3, |
| name: "ليلى خالد", |
| username: "@laila_khalid", |
| avatar: "https://randomuser.me/api/portraits/women/63.jpg" |
| }, |
| lastMessage: "شكرًا لكِ!", |
| time: "أمس", |
| unread: false, |
| chat: [ |
| { |
| id: 1, |
| sender: 3, |
| text: "مرحبًا سارة، شكرًا على المساعدة", |
| time: "9:00 م" |
| }, |
| { |
| id: 2, |
| sender: 1, |
| text: "لا شكر على واجب ليلى", |
| time: "9:05 م" |
| }, |
| { |
| id: 3, |
| sender: 3, |
| text: "حقًا ساعدتيني كثيرًا", |
| time: "9:10 م" |
| }, |
| { |
| id: 4, |
| sender: 3, |
| text: "شكرًا لكِ!", |
| time: "9:12 م" |
| } |
| ] |
| } |
| ], |
| friends: [], |
| notifications: [ |
| { |
| id: 1, |
| type: "like", |
| user: { |
| id: 2, |
| name: "أحمد محمد", |
| avatar: "https://randomuser.me/api/portraits/men/32.jpg" |
| }, |
| post: { |
| id: 101, |
| thumbnail: "https://picsum.photos/id/101/300/300" |
| }, |
| time: "منذ دقائق", |
| read: false |
| }, |
| { |
| id: 2, |
| type: "comment", |
| user: { |
| id: 3, |
| name: "ليلى خالد", |
| avatar: "https://randomuser.me/api/portraits/women/63.jpg" |
| }, |
| post: { |
| id: 102, |
| thumbnail: "https://picsum.photos/id/102/300/300" |
| }, |
| text: "هذه الصورة رائعة!", |
| time: "منذ ساعة", |
| read: false |
| }, |
| { |
| id: 3, |
| type: "friend_request", |
| user: { |
| id: 4, |
| name: "محمد علي", |
| avatar: "https://randomuser.me/api/portraits/men/45.jpg" |
| }, |
| time: "منذ يوم", |
| read: true |
| }, |
| { |
| id: 4, |
| type: "follow", |
| user: { |
| id: 5, |
| name: "نورا سعيد", |
| avatar: "https://randomuser.me/api/portraits/women/22.jpg" |
| }, |
| time: "منذ يومين", |
| read: true |
| } |
| ], |
| posts: [ |
| { |
| id: 101, |
| image: "https://picsum.photos/id/101/800/800", |
| thumbnail: "https://picsum.photos/id/101/300/300", |
| likes: 124, |
| comments: 23, |
| caption: "يوم جميل في الطبيعة 🌿", |
| time: "منذ 3 ساعات" |
| }, |
| { |
| id: 102, |
| image: "https://picsum.photos/id/102/800/800", |
| thumbnail: "https://picsum.photos/id/102/300/300", |
| likes: 89, |
| comments: 12, |
| caption: "وجبة غداء لذيذة 🍽️", |
| time: "منذ يوم" |
| }, |
| { |
| id: 103, |
| image: "https://picsum.photos/id/103/800/800", |
| thumbnail: "https://picsum.photos/id/103/300/300", |
| likes: 215, |
| comments: 45, |
| caption: "رحلتي إلى الجبل ⛰️", |
| time: "منذ 3 أيام" |
| }, |
| { |
| id: 104, |
| image: "https://picsum.photos/id/104/800/800", |
| thumbnail: "https://picsum.photos/id/104/300/300", |
| likes: 56, |
| comments: 8, |
| caption: "قراءة كتاب جديد 📖", |
| time: "منذ أسبوع" |
| }, |
| { |
| id: 105, |
| image: "https://picsum.photos/id/105/800/800", |
| thumbnail: "https://picsum.photos/id/105/300/300", |
| likes: 312, |
| comments: 67, |
| caption: "حفل موسيقي رائع 🎵", |
| time: "منذ أسبوعين" |
| }, |
| { |
| id: 106, |
| image: "https://picsum.photos/id/106/800/800", |
| thumbnail: "https://picsum.photos/id/106/300/300", |
| likes: 78, |
| comments: 15, |
| caption: "وقت ممتع مع الأصدقاء 👫", |
| time: "منذ شهر" |
| } |
| ] |
| }; |
| |
| |
| const tabBtns = document.querySelectorAll('.tab-btn'); |
| const tabContents = document.querySelectorAll('.tab-content'); |
| const friendRequestsList = document.getElementById('friendRequestsList'); |
| const suggestionsList = document.getElementById('suggestionsList'); |
| const messagesList = document.getElementById('messagesList'); |
| const chatModal = document.getElementById('chatModal'); |
| const chatBody = document.getElementById('chatBody'); |
| const messageInput = document.getElementById('messageInput'); |
| const sendMessageBtn = document.getElementById('sendMessageBtn'); |
| const chatBackBtn = document.getElementById('chatBackBtn'); |
| const chatTitle = document.getElementById('chatTitle'); |
| const messagesBtn = document.getElementById('messagesBtn'); |
| const notificationsBtn = document.getElementById('notificationsBtn'); |
| const notificationsBtnMobile = document.getElementById('notificationsBtnMobile'); |
| const seeAllRequests = document.getElementById('seeAllRequests'); |
| const refreshSuggestions = document.getElementById('refreshSuggestions'); |
| const newMessageBtn = document.getElementById('newMessageBtn'); |
| const searchBtn = document.getElementById('searchBtn'); |
| const searchInput = document.getElementById('searchInput'); |
| const searchTabs = document.querySelectorAll('.search-tab'); |
| const postsGrid = document.getElementById('postsGrid'); |
| const peopleResults = document.getElementById('peopleResults'); |
| const notificationsModal = document.getElementById('notificationsModal'); |
| const notificationsList = document.getElementById('notificationsList'); |
| const notificationsClose = document.getElementById('notificationsClose'); |
| const notificationBadge = document.getElementById('notificationBadge'); |
| const pushNotification = document.getElementById('pushNotification'); |
| const pushNotificationAvatar = document.getElementById('pushNotificationAvatar'); |
| const pushNotificationText = document.getElementById('pushNotificationText'); |
| const pushNotificationClose = document.getElementById('pushNotificationClose'); |
| |
| |
| function initPage() { |
| renderFriendRequests(); |
| renderSuggestedFriends(); |
| renderMessages(); |
| renderPosts(); |
| renderNotifications(); |
| setupEventListeners(); |
| updateNotificationBadge(); |
| |
| |
| window.addEventListener('blur', () => { |
| setTimeout(() => { |
| if (document.hidden) { |
| showRandomPushNotification(); |
| } |
| }, 3000); |
| }); |
| } |
| |
| |
| function setupEventListeners() { |
| |
| tabBtns.forEach(btn => { |
| btn.addEventListener('click', () => { |
| tabBtns.forEach(b => b.classList.remove('active')); |
| btn.classList.add('active'); |
| |
| tabContents.forEach(content => content.classList.remove('active')); |
| document.getElementById(`${btn.dataset.tab}-tab`).classList.add('active'); |
| }); |
| }); |
| |
| |
| messagesBtn.addEventListener('click', () => { |
| tabBtns.forEach(b => b.classList.remove('active')); |
| document.querySelector('.tab-btn[data-tab="messages"]').classList.add('active'); |
| |
| tabContents.forEach(content => content.classList.remove('active')); |
| document.getElementById('messages-tab').classList.add('active'); |
| }); |
| |
| notificationsBtn.addEventListener('click', toggleNotificationsModal); |
| notificationsBtnMobile.addEventListener('click', toggleNotificationsModal); |
| |
| notificationsClose.addEventListener('click', toggleNotificationsModal); |
| |
| chatBackBtn.addEventListener('click', closeChat); |
| |
| |
| sendMessageBtn.addEventListener('click', sendMessage); |
| messageInput.addEventListener('keypress', (e) => { |
| if (e.key === 'Enter') { |
| sendMessage(); |
| } |
| }); |
| |
| |
| seeAllRequests.addEventListener('click', (e) => { |
| e.preventDefault(); |
| alert('عرض جميع طلبات الصداقة'); |
| }); |
| |
| |
| refreshSuggestions.addEventListener('click', (e) => { |
| e.preventDefault(); |
| refreshFriendSuggestions(); |
| }); |
| |
| |
| newMessageBtn.addEventListener('click', (e) => { |
| e.preventDefault(); |
| startNewMessage(); |
| }); |
| |
| |
| searchBtn.addEventListener('click', () => { |
| tabBtns.forEach(b => b.classList.remove('active')); |
| document.querySelector('.tab-btn[data-tab="search"]').classList.add('active'); |
| |
| tabContents.forEach(content => content.classList.remove('active')); |
| document.getElementById('search-tab').classList.add('active'); |
| }); |
| |
| |
| searchTabs.forEach(tab => { |
| tab.addEventListener('click', () => { |
| searchTabs.forEach(t => t.classList.remove('active')); |
| tab.classList.add('active'); |
| |
| if (tab.dataset.searchTab === 'posts') { |
| postsGrid.style.display = 'grid'; |
| peopleResults.style.display = 'none'; |
| } else { |
| postsGrid.style.display = 'none'; |
| peopleResults.style.display = 'block'; |
| renderPeopleSearchResults(); |
| } |
| }); |
| }); |
| |
| |
| searchInput.addEventListener('input', (e) => { |
| const query = e.target.value.trim(); |
| if (query.length > 0) { |
| |
| console.log('بحث عن:', query); |
| } |
| }); |
| |
| |
| pushNotificationClose.addEventListener('click', () => { |
| pushNotification.classList.remove('show'); |
| }); |
| } |
| |
| |
| function renderFriendRequests() { |
| friendRequestsList.innerHTML = ''; |
| |
| if (appData.friendRequests.length === 0) { |
| friendRequestsList.innerHTML = '<p style="text-align: center; color: var(--text-gray); padding: 20px;">لا توجد طلبات صداقة جديدة</p>'; |
| return; |
| } |
| |
| appData.friendRequests.forEach(request => { |
| const requestElement = document.createElement('div'); |
| requestElement.className = 'friend-request-item'; |
| requestElement.innerHTML = ` |
| <img src="${request.avatar}" class="friend-avatar" alt="${request.name}"> |
| <div class="friend-info"> |
| <div class="friend-name">${request.name}</div> |
| <div class="friend-meta">${request.mutualFriends} أصدقاء مشتركين • ${request.date}</div> |
| </div> |
| <div class="friend-actions"> |
| <button class="btn btn-primary" onclick="acceptFriendRequest(${request.id})">قبول</button> |
| <button class="btn btn-outline" onclick="declineFriendRequest(${request.id})">حذف</button> |
| </div> |
| `; |
| |
| friendRequestsList.appendChild(requestElement); |
| }); |
| } |
| |
| |
| function renderSuggestedFriends() { |
| suggestionsList.innerHTML = ''; |
| |
| appData.suggestedFriends.forEach(friend => { |
| const friendElement = document.createElement('div'); |
| friendElement.className = 'suggested-friend-item'; |
| friendElement.innerHTML = ` |
| <img src="${friend.avatar}" class="friend-avatar" alt="${friend.name}"> |
| <div class="friend-info"> |
| <div class="friend-name">${friend.name}</div> |
| <div class="friend-meta">${friend.mutualFriends} أصدقاء مشتركين</div> |
| </div> |
| <div class="friend-actions"> |
| <button class="btn btn-primary" onclick="sendFriendRequest(${friend.id})">إرسال طلب</button> |
| <button class="btn btn-outline" onclick="removeSuggestion(${friend.id})">إزالة</button> |
| </div> |
| `; |
| |
| suggestionsList.appendChild(friendElement); |
| }); |
| } |
| |
| |
| function renderMessages() { |
| messagesList.innerHTML = ''; |
| |
| if (appData.messages.length === 0) { |
| messagesList.innerHTML = '<p style="text-align: center; color: var(--text-gray); padding: 20px;">لا توجد رسائل</p>'; |
| return; |
| } |
| |
| appData.messages.forEach(message => { |
| const messageElement = document.createElement('div'); |
| messageElement.className = 'message-item'; |
| messageElement.innerHTML = ` |
| <img src="${message.user.avatar}" class="message-avatar" alt="${message.user.name}"> |
| <div class="message-content"> |
| <div class="message-header"> |
| <div class="message-sender">${message.user.name}</div> |
| <div class="message-time">${message.time}</div> |
| </div> |
| <div class="message-preview"> |
| ${message.unread ? '<div class="message-unread"></div>' : ''} |
| <div class="message-text">${message.lastMessage}</div> |
| </div> |
| </div> |
| `; |
| |
| messageElement.addEventListener('click', () => openChat(message.user.id)); |
| messagesList.appendChild(messageElement); |
| }); |
| } |
| |
| |
| function renderPosts() { |
| postsGrid.innerHTML = ''; |
| |
| appData.posts.forEach(post => { |
| const postElement = document.createElement('div'); |
| postElement.innerHTML = ` |
| <img src="${post.thumbnail}" class="post-thumbnail" alt="منشور ${post.id}"> |
| `; |
| |
| postElement.addEventListener('click', () => viewPost(post.id)); |
| postsGrid.appendChild(postElement); |
| }); |
| } |
| |
| |
| function renderPeopleSearchResults() { |
| peopleResults.innerHTML = ''; |
| |
| |
| appData.suggestedFriends.forEach(friend => { |
| const friendElement = document.createElement('div'); |
| friendElement.className = 'suggested-friend-item'; |
| friendElement.innerHTML = ` |
| <img src="${friend.avatar}" class="friend-avatar" alt="${friend.name}"> |
| <div class="friend-info"> |
| <div class="friend-name">${friend.name}</div> |
| <div class="friend-meta">${friend.mutualFriends} أصدقاء مشتركين</div> |
| </div> |
| <div class="friend-actions"> |
| <button class="btn btn-primary" onclick="sendFriendRequest(${friend.id})">إرسال طلب</button> |
| </div> |
| `; |
| |
| peopleResults.appendChild(friendElement); |
| }); |
| } |
| |
| |
| function renderNotifications() { |
| notificationsList.innerHTML = ''; |
| |
| if (appData.notifications.length === 0) { |
| notificationsList.innerHTML = '<p style="text-align: center; color: var(--text-gray); padding: 20px;">لا توجد إشعارات جديدة</p>'; |
| return; |
| } |
| |
| appData.notifications.forEach(notification => { |
| const notificationElement = document.createElement('div'); |
| notificationElement.className = `notification-item ${notification.read ? '' : 'unread'}`; |
| |
| let notificationContent = ''; |
| |
| if (notification.type === "like") { |
| notificationContent = ` |
| <img src="${notification.user.avatar}" class="notification-avatar" alt="${notification.user.name}"> |
| <div class="notification-info"> |
| <div class="notification-text"> |
| <span>${notification.user.name}</span> أعجب بمنشورك |
| </div> |
| <div class="notification-time">${notification.time}</div> |
| </div> |
| <img src="${notification.post.thumbnail}" class="notification-avatar" alt="منشور"> |
| `; |
| } else if (notification.type === "comment") { |
| notificationContent = ` |
| <img src="${notification.user.avatar}" class="notification-avatar" alt="${notification.user.name}"> |
| <div class="notification-info"> |
| <div class="notification-text"> |
| <span>${notification.user.name}</span> علق على منشورك: ${notification.text} |
| </div> |
| <div class="notification-time">${notification.time}</div> |
| </div> |
| <img src="${notification.post.thumbnail}" class="notification-avatar" alt="منشور"> |
| `; |
| } else if (notification.type === "friend_request") { |
| notificationContent = ` |
| <img src="${notification.user.avatar}" class="notification-avatar" alt="${notification.user.name}"> |
| <div class="notification-info"> |
| <div class="notification-text"> |
| <span>${notification.user.name}</span> أرسل لك طلب صداقة |
| </div> |
| <div class="notification-time">${notification.time}</div> |
| </div> |
| <div class="notification-actions"> |
| <button class="btn btn-primary" onclick="acceptFriendRequest(${notification.user.id})">قبول</button> |
| <button class="btn btn-outline" onclick="declineFriendRequest(${notification.user.id})">حذف</button> |
| </div> |
| `; |
| } else if (notification.type === "follow") { |
| notificationContent = ` |
| <img src="${notification.user.avatar}" class="notification-avatar" alt="${notification.user.name}"> |
| <div class="notification-info"> |
| <div class="notification-text"> |
| <span>${notification.user.name}</span> بدأ متابعتك |
| </div> |
| <div class="notification-time">${notification.time}</div> |
| </div> |
| <div class="notification-actions"> |
| <button class="btn btn-outline">متابعة</button> |
| </div> |
| `; |
| } |
| |
| notificationElement.innerHTML = notificationContent; |
| notificationElement.addEventListener('click', () => markNotificationAsRead(notification.id)); |
| notificationsList.appendChild(notificationElement); |
| }); |
| } |
| |
| |
| function updateNotificationBadge() { |
| const unreadCount = appData.notifications.filter(n => !n.read).length; |
| if (unreadCount > 0) { |
| notificationBadge.style.display = 'flex'; |
| notificationBadge.textContent = unreadCount; |
| } else { |
| notificationBadge.style.display = 'none'; |
| } |
| } |
| |
| |
| function acceptFriendRequest(userId) { |
| const requestIndex = appData.friendRequests.findIndex(req => req.id === userId); |
| if (requestIndex !== -1) { |
| const acceptedUser = appData.friendRequests[requestIndex]; |
| |
| |
| appData.friends.push({ |
| id: acceptedUser.id, |
| name: acceptedUser.name, |
| username: acceptedUser.username, |
| avatar: acceptedUser.avatar |
| }); |
| |
| |
| appData.friendRequests.splice(requestIndex, 1); |
| |
| |
| addNotification({ |
| type: "friend_accepted", |
| user: acceptedUser, |
| time: "الآن" |
| }); |
| |
| |
| showAlert('تم قبول طلب الصداقة بنجاح', 'success'); |
| |
| |
| renderFriendRequests(); |
| renderNotifications(); |
| updateNotificationBadge(); |
| } |
| } |
| |
| |
| function declineFriendRequest(userId) { |
| const requestIndex = appData.friendRequests.findIndex(req => req.id === userId); |
| if (requestIndex !== -1) { |
| appData.friendRequests.splice(requestIndex, 1); |
| showAlert('تم حذف طلب الصداقة', 'info'); |
| renderFriendRequests(); |
| } |
| } |
| |
| |
| function sendFriendRequest(userId) { |
| const friendIndex = appData.suggestedFriends.findIndex(f => f.id === userId); |
| if (friendIndex !== -1) { |
| const friend = appData.suggestedFriends[friendIndex]; |
| showAlert(`تم إرسال طلب صداقة إلى ${friend.name}`, 'success'); |
| |
| |
| addNotification({ |
| type: "friend_request", |
| user: appData.currentUser, |
| time: "الآن" |
| }); |
| |
| |
| setTimeout(() => { |
| removeSuggestion(userId); |
| }, 1000); |
| } |
| } |
| |
| |
| function removeSuggestion(userId) { |
| const friendIndex = appData.suggestedFriends.findIndex(f => f.id === userId); |
| if (friendIndex !== -1) { |
| appData.suggestedFriends.splice(friendIndex, 1); |
| renderSuggestedFriends(); |
| |
| |
| if (peopleResults.style.display !== 'none') { |
| renderPeopleSearchResults(); |
| } |
| } |
| } |
| |
| |
| function refreshFriendSuggestions() { |
| |
| showAlert('تم تحديث اقتراحات الأصدقاء', 'info'); |
| } |
| |
| |
| function openChat(userId) { |
| const message = appData.messages.find(m => m.user.id === userId); |
| if (message) { |
| |
| message.unread = false; |
| |
| |
| chatTitle.textContent = message.user.name; |
| chatBody.innerHTML = ''; |
| |
| message.chat.forEach(msg => { |
| const messageClass = msg.sender === appData.currentUser.id ? 'message-out' : 'message-in'; |
| const messageElement = document.createElement('div'); |
| messageElement.className = `message-bubble ${messageClass}`; |
| messageElement.innerHTML = ` |
| <div>${msg.text}</div> |
| <div class="message-time">${msg.time}</div> |
| `; |
| chatBody.appendChild(messageElement); |
| }); |
| |
| |
| chatBody.scrollTop = chatBody.scrollHeight; |
| |
| |
| chatModal.style.display = 'flex'; |
| document.body.style.overflow = 'hidden'; |
| |
| |
| sendMessageBtn.dataset.userId = userId; |
| } |
| } |
| |
| |
| function closeChat() { |
| chatModal.style.display = 'none'; |
| document.body.style.overflow = 'auto'; |
| |
| |
| renderMessages(); |
| } |
| |
| |
| function sendMessage() { |
| const text = messageInput.value.trim(); |
| if (text && sendMessageBtn.dataset.userId) { |
| const userId = parseInt(sendMessageBtn.dataset.userId); |
| const message = appData.messages.find(m => m.user.id === userId); |
| |
| if (message) { |
| |
| const newMessage = { |
| id: message.chat.length + 1, |
| sender: appData.currentUser.id, |
| text: text, |
| time: getCurrentTime() |
| }; |
| |
| |
| message.chat.push(newMessage); |
| |
| |
| message.lastMessage = text; |
| message.time = 'الآن'; |
| message.unread = false; |
| |
| |
| const messageElement = document.createElement('div'); |
| messageElement.className = 'message-bubble message-out'; |
| messageElement.innerHTML = ` |
| <div>${text}</div> |
| <div class="message-time">${newMessage.time}</div> |
| `; |
| chatBody.appendChild(messageElement); |
| |
| |
| messageInput.value = ''; |
| |
| |
| chatBody.scrollTop = chatBody.scrollHeight; |
| |
| |
| |
| setTimeout(() => { |
| const replyMessage = { |
| id: message.chat.length + 1, |
| sender: userId, |
| text: getRandomReply(), |
| time: getCurrentTime() |
| }; |
| |
| message.chat.push(replyMessage); |
| message.lastMessage = replyMessage.text; |
| |
| if (!chatModal.style.display || chatModal.style.display === 'none') { |
| message.unread = true; |
| |
| |
| addNotification({ |
| type: "message", |
| user: message.user, |
| time: "الآن" |
| }); |
| } else { |
| const replyElement = document.createElement('div'); |
| replyElement.className = 'message-bubble message-in'; |
| replyElement.innerHTML = ` |
| <div>${replyMessage.text}</div> |
| <div class="message-time">${replyMessage.time}</div> |
| `; |
| chatBody.appendChild(replyElement); |
| chatBody.scrollTop = chatBody.scrollHeight; |
| } |
| |
| renderMessages(); |
| updateNotificationBadge(); |
| }, 2000); |
| } |
| } |
| } |
| |
| |
| function startNewMessage() { |
| |
| const randomFriend = appData.suggestedFriends[Math.floor(Math.random() * appData.suggestedFriends.length)]; |
| |
| if (randomFriend) { |
| |
| const newChat = { |
| id: randomFriend.id, |
| user: { |
| id: randomFriend.id, |
| name: randomFriend.name, |
| username: randomFriend.username, |
| avatar: randomFriend.avatar |
| }, |
| lastMessage: "بدأت محادثة جديدة", |
| time: "الآن", |
| unread: false, |
| chat: [] |
| }; |
| |
| appData.messages.unshift(newChat); |
| renderMessages(); |
| openChat(randomFriend.id); |
| } else { |
| showAlert('لا يوجد أصدقاء متاحين لبدء محادثة جديدة', 'error'); |
| } |
| } |
| |
| |
| function viewPost(postId) { |
| const post = appData.posts.find(p => p.id === postId); |
| if (post) { |
| alert(`عرض المنشور ${postId}: ${post.caption}\nالإعجابات: ${post.likes} | التعليقات: ${post.comments}`); |
| } |
| } |
| |
| |
| function toggleNotificationsModal() { |
| if (notificationsModal.style.display === 'block') { |
| notificationsModal.style.display = 'none'; |
| } else { |
| notificationsModal.style.display = 'block'; |
| |
| |
| appData.notifications.forEach(notification => { |
| notification.read = true; |
| }); |
| |
| updateNotificationBadge(); |
| renderNotifications(); |
| } |
| } |
| |
| |
| function markNotificationAsRead(notificationId) { |
| const notification = appData.notifications.find(n => n.id === notificationId); |
| if (notification && !notification.read) { |
| notification.read = true; |
| updateNotificationBadge(); |
| renderNotifications(); |
| } |
| } |
| |
| |
| function addNotification(notificationData) { |
| const newNotification = { |
| id: appData.notifications.length + 1, |
| read: false, |
| ...notificationData |
| }; |
| |
| appData.notifications.unshift(newNotification); |
| |
| |
| if (notificationsModal.style.display !== 'block') { |
| showPushNotification(newNotification); |
| } |
| |
| updateNotificationBadge(); |
| } |
| |
| |
| function showPushNotification(notification) { |
| pushNotificationAvatar.src = notification.user.avatar; |
| |
| let notificationText = ''; |
| if (notification.type === "like") { |
| notificationText = `${notification.user.name} أعجب بمنشورك`; |
| } else if (notification.type === "comment") { |
| notificationText = `${notification.user.name} علق على منشورك`; |
| } else if (notification.type === "friend_request") { |
| notificationText = `${notification.user.name} أرسل لك طلب صداقة`; |
| } else if (notification.type === "friend_accepted") { |
| notificationText = `${notification.user.name} قبل طلب صداقتك`; |
| } else if (notification.type === "message") { |
| notificationText = `${notification.user.name} أرسل لك رسالة`; |
| } else if (notification.type === "follow") { |
| notificationText = `${notification.user.name} بدأ متابعتك`; |
| } |
| |
| pushNotificationText.textContent = notificationText; |
| pushNotification.classList.add('show'); |
| |
| |
| setTimeout(() => { |
| pushNotification.classList.remove('show'); |
| }, 5000); |
| } |
| |
| |
| function showRandomPushNotification() { |
| const types = ["like", "comment", "friend_request", "message", "follow"]; |
| const randomType = types[Math.floor(Math.random() * types.length)]; |
| const randomUser = appData.suggestedFriends[Math.floor(Math.random() * appData.suggestedFriends.length)]; |
| |
| if (randomUser) { |
| const notification = { |
| id: appData.notifications.length + 1, |
| type: randomType, |
| user: randomUser, |
| time: "الآن", |
| read: false |
| }; |
| |
| if (randomType === "like" || randomType === "comment") { |
| notification.post = { |
| id: Math.floor(Math.random() * 1000), |
| thumbnail: `https://picsum.photos/id/${Math.floor(Math.random() * 1000)}/300/300` |
| }; |
| } |
| |
| addNotification(notification); |
| } |
| } |
| |
| |
| </html> |
