| | <!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> |
