Add 1 files

index.html

@@ -16,6 +16,7 @@
             --bg-light: #fafafa;
             --error-color: #ed4956;
             --success-color: #4BB543;
+            --notification-badge: #ff3040;
         }
         
         * {
@@ -58,12 +59,30 @@
         .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 */
@@ -129,14 +148,14 @@
             text-decoration: none;
         }
         
-        .friend-request-item, .suggested-friend-item {
+        .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 {
+        .friend-avatar, .notification-avatar {
             width: 50px;
             height: 50px;
             border-radius: 50%;
@@ -144,22 +163,22 @@
             margin-left: 15px;
         }
         
-        .friend-info {
+        .friend-info, .notification-info {
             flex: 1;
         }
         
-        .friend-name {
+        .friend-name, .notification-text {
             font-weight: 600;
             font-size: 14px;
             margin-bottom: 3px;
         }
         
-        .friend-meta {
+        .friend-meta, .notification-time {
             color: var(--text-gray);
             font-size: 12px;
         }
         
-        .friend-actions {
+        .friend-actions, .notification-actions {
             display: flex;
             gap: 8px;
         }
@@ -363,15 +382,146 @@
             color: var(--primary-color);
         }
         
+        /* Notifications Modal */
+        .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 Section */
+        .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 for Instagram-like logo */
         @font-face {
             font-family: 'Billabong';
             src: url('https://fonts.cdnfonts.com/s/13949/Billabong.woff') format('woff');
         }
         
+        /* Push Notifications */
+        .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;
+        }
+        
         /* Responsive */
         @media (max-width: 450px) {
-            .friend-avatar, .message-avatar {
+            .friend-avatar, .message-avatar, .notification-avatar {
                 width: 45px;
                 height: 45px;
             }
@@ -380,6 +530,11 @@
                 padding: 5px 8px;
                 font-size: 11px;
             }
+            
+            .notifications-modal {
+                width: 300px;
+                right: 5px;
+            }
         }
     </style>
 </head>
@@ -388,7 +543,9 @@
     <div class="header">
         <div class="header-logo">إنستا</div>
         <div class="header-icons">
-            <i class="far fa-heart" id="notificationsBtn"></i>
+            <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>
@@ -400,6 +557,7 @@
             <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>
         
         <!-- Friend Requests Tab -->
@@ -437,14 +595,36 @@
                 <!-- سيتم ملؤها بالرسائل ديناميكيًا -->
             </div>
         </div>
+        
+        <!-- Search Tab -->
+        <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>
     
     <!-- Bottom Navigation -->
     <div class="bottom-nav">
         <i class="fas fa-home active"></i>
-        <i class="fas fa-search"></i>
+        <i class="fas fa-search" id="searchBtn"></i>
         <i class="far fa-plus-square"></i>
-        <i class="far fa-heart"></i>
+        <i class="far fa-heart" id="notificationsBtnMobile"></i>
         <i class="fas fa-user"></i>
     </div>
     
@@ -467,6 +647,24 @@
         </div>
     </div>
     
+    <!-- Notifications Modal -->
+    <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>
+    
+    <!-- Push Notification -->
+    <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 = {
@@ -610,7 +808,118 @@
                     ]
                 }
             ],
-            friends: []
+            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: "منذ شهر"
+                }
+            ]
         };
         
         // عناصر DOM
@@ -627,16 +936,42 @@
         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);
+            });
         }
         
         // إعداد مستمعي الأحداث
@@ -661,13 +996,10 @@
                 document.getElementById('messages-tab').classList.add('active');
             });
             
-            notificationsBtn.addEventListener('click', () => {
-                tabBtns.forEach(b => b.classList.remove('active'));
-                document.querySelector('.tab-btn[data-tab="friends"]').classList.add('active');
-                
-                tabContents.forEach(content => content.classList.remove('active'));
-                document.getElementById('friends-tab').classList.add('active');
-            });
+            notificationsBtn.addEventListener('click', toggleNotificationsModal);
+            notificationsBtnMobile.addEventListener('click', toggleNotificationsModal);
+            
+            notificationsClose.addEventListener('click', toggleNotificationsModal);
             
             chatBackBtn.addEventListener('click', closeChat);
             
@@ -696,6 +1028,46 @@
                 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');
+            });
         }
         
         // عرض طلبات الصداقة
@@ -780,6 +1152,127 @@
             });
         }
         
+        // عرض المنشورات
+        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);
@@ -797,11 +1290,20 @@
                 // إزالة الطلب من القائمة
                 appData.friendRequests.splice(requestIndex, 1);
                 
+                // إضافة إشعار
+                addNotification({
+                    type: "friend_accepted",
+                    user: acceptedUser,
+                    time: "الآن"
+                });
+                
                 // عرض تنبيه
                 showAlert('تم قبول طلب الصداقة بنجاح', 'success');
                 
                 // تحديث الواجهة
                 renderFriendRequests();
+                renderNotifications();
+                updateNotificationBadge();
             }
         }
         
@@ -822,6 +1324,13 @@
                 const friend = appData.suggestedFriends[friendIndex];
                 showAlert(`تم إرسال طلب صداقة إلى ${friend.name}`, 'success');
                 
+                // إضافة إشعار للمستخدم الآخر (محاكاة)
+                addNotification({
+                    type: "friend_request",
+                    user: appData.currentUser,
+                    time: "الآن"
+                });
+                
                 // في تطبيق حقيقي، سيتم إرسال الطلب إلى الخادم
                 setTimeout(() => {
                     removeSuggestion(userId);
@@ -835,6 +1344,11 @@
             if (friendIndex !== -1) {
                 appData.suggestedFriends.splice(friendIndex, 1);
                 renderSuggestedFriends();
+                
+                // إذا كانت صفحة البحث مفتوحة، قم بتحديثها أيضًا
+                if (peopleResults.style.display !== 'none') {
+                    renderPeopleSearchResults();
+                }
             }
         }
         
@@ -941,6 +1455,13 @@
                         
                         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';
@@ -953,6 +1474,7 @@
                         }
                         
                         renderMessages();
+                        updateNotificationBadge();
                     }, 2000);
                 }
             }
@@ -987,66 +1509,112 @@
             }
         }
         
-        // الحصول على الوقت الحالي بتنسيق مناسب
-        function getCurrentTime() {
-            const now = new Date();
-            const hours = now.getHours();
-            const minutes = now.getMinutes();
-            const ampm = hours >= 12 ? 'م' : 'ص';
-            const formattedHours = hours % 12 || 12;
-            return `${formattedHours}:${minutes < 10 ? '0' + minutes : minutes} ${ampm}`;
-        }
-        
-        // توليد رد عشوائي
-        function getRandomReply() {
-            const replies = [
-                "نعم، بالتأكيد!",
-                "سأرد عليك لاحقًا",
-                "شكرًا لك",
-                "أنا مشغول الآن، سأتحدث معك لاحقًا",
-                "حسنًا، فهمت",
-                "ممتاز!",
-                "هل يمكننا التحدث غدًا؟",
-                "أنا موافق على ذلك",
-                "هذا رائع!",
-                "لا أعتقد أن هذا ممكن"
-            ];
-            return replies[Math.floor(Math.random() * replies.length)];
-        }
-        
-        // عرض تنبيه
-        function showAlert(message, type) {
-            const alertDiv = document.createElement('div');
-            alertDiv.style.position = 'fixed';
-            alertDiv.style.top = '20px';
-            alertDiv.style.left = '50%';
-            alertDiv.style.transform = 'translateX(-50%)';
-            alertDiv.style.padding = '10px 20px';
-            alertDiv.style.borderRadius = '8px';
-            alertDiv.style.color = 'white';
-            alertDiv.style.fontWeight = '600';
-            alertDiv.style.zIndex = '1000';
-            alertDiv.style.boxShadow = '0 2px 10px rgba(0,0,0,0.2)';
-            alertDiv.style.animation = 'fadeIn 0.3s, fadeOut 0.3s 2.7s';
-            
-            if (type === 'success') {
-                alertDiv.style.backgroundColor = 'var(--success-color)';
-            } else if (type === 'error') {
-                alertDiv.style.backgroundColor = 'var(--error-color)';
+        // عرض منشور
+        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 {
-                alertDiv.style.backgroundColor = 'var(--primary-color)';
+                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);
             
-            alertDiv.textContent = message;
-            document.body.appendChild(alertDiv);
+            // عرض إشعار عاجل إذا لم تكن نافذة الإشعارات مفتوحة
+            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');
+            
+            // إخفاء الإشعار تلقائيًا بعد 5 ثواني
             setTimeout(() => {
-                document.body.removeChild(alertDiv);
-            }, 3000);
+                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);
+            }
         }
         
-        // تهيئة الصفحة عند التحميل
-        window.addEventListener('DOMContentLoaded', initPage);
-    </script>
-</body>
+        //
 </html>