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