Upload 18 files

static/css/style.css

@@ -0,0 +1,278 @@
+:root {
+    --primary-color: #4CAF50;
+    --error-color: #f44336;
+    --success-color: #4CAF50;
+    --text-color: #333;
+    --background-color: #f5f5f5;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Arial', sans-serif;
+}
+
+body {
+    background-color: var(--background-color);
+    color: var(--text-color);
+    line-height: 1.6;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    /* padding: 20px; */
+}
+
+.auth-container {
+    max-width: 500px;
+    margin: 40px auto;
+    padding: 30px;
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+h2 {
+    text-align: center;
+    color: var(--text-color);
+    margin-bottom: 30px;
+}
+
+.form-group {
+    margin-bottom: 20px;
+}
+
+label {
+    display: block;
+    margin-bottom: 8px;
+    font-weight: bold;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="password"],
+select {
+    width: 100%;
+    padding: 12px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 16px;
+}
+
+input:focus,
+select:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 5px rgba(76, 175, 80, 0.2);
+}
+
+.submit-btn {
+    width: 100%;
+    padding: 12px;
+    background-color: var(--primary-color);
+    color: white;
+    border: none;
+    border-radius: 4px;
+    font-size: 16px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+.submit-btn:hover {
+    background-color: #45a049;
+}
+
+.auth-links {
+    text-align: center;
+    margin-top: 20px;
+}
+
+.auth-links a {
+    color: var(--primary-color);
+    text-decoration: none;
+}
+
+.auth-links a:hover {
+    text-decoration: underline;
+}
+
+.alert {
+    padding: 15px;
+    margin-bottom: 20px;
+    border-radius: 4px;
+    text-align: center;
+}
+
+.alert-error {
+    background-color: #ffebee;
+    color: var(--error-color);
+    border: 1px solid #ffcdd2;
+}
+
+.alert-success {
+    background-color: #e8f5e9;
+    color: var(--success-color);
+    border: 1px solid #c8e6c9;
+}
+
+.skill-input {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 10px;
+}
+
+.skill-input input {
+    flex: 1;
+}
+
+.add-skill,
+.remove-skill {
+    padding: 0 15px;
+    background-color: var(--primary-color);
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 18px;
+}
+
+.remove-skill {
+    background-color: var(--error-color);
+}
+
+#email-validation-message,
+#password-match-message {
+    display: block;
+    margin-top: 5px;
+    font-size: 14px;
+}
+
+.error {
+    color: var(--error-color);
+}
+
+.success {
+    color: var(--success-color);
+}
+
+/* Password strength meter */
+.strength-meter {
+    margin-top: 5px;
+    padding: 5px;
+    border-radius: 4px;
+    font-size: 14px;
+    text-align: center;
+}
+
+.weak {
+    background-color: #ffebee;
+    color: #d32f2f;
+}
+
+.medium {
+    background-color: #fff3e0;
+    color: #f57c00;
+}
+
+.strong {
+    background-color: #e8f5e9;
+    color: #388e3c;
+}
+
+.form-text {
+    display: block;
+    margin-top: 5px;
+    color: #666;
+    font-size: 14px;
+}
+
+/* RTL specific styles */
+body {
+    direction: rtl;
+}
+
+.skill-input {
+    flex-direction: row-reverse;
+}
+
+.auth-container {
+    text-align: right;
+}
+
+/* Dashboard styles */
+.dashboard-container {
+    max-width: 800px;
+    margin: 40px auto;
+    padding: 30px;
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.user-info {
+    margin: 30px 0;
+}
+
+.info-card {
+    background: #f8f9fa;
+    padding: 20px;
+    border-radius: 8px;
+    margin-top: 15px;
+}
+
+.info-card p {
+    margin: 10px 0;
+}
+
+.skills-list {
+    list-style: none;
+    padding: 0;
+    margin: 10px 0;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+.skills-list li {
+    background: var(--primary-color);
+    color: white;
+    padding: 5px 15px;
+    border-radius: 20px;
+    font-size: 14px;
+}
+
+.logout-btn {
+    display: inline-block;
+    padding: 10px 20px;
+    background-color: #dc3545;
+    color: white;
+    text-decoration: none;
+    border-radius: 4px;
+    transition: background-color 0.3s;
+}
+
+.logout-btn:hover {
+    background-color: #c82333;
+}
+
+.dashboard-container h2 {
+    color: var(--primary-color);
+    border-bottom: 2px solid #eee;
+    padding-bottom: 10px;
+}
+
+.dashboard-container h3 {
+    color: var(--text-color);
+    margin: 20px 0 10px;
+}
+
+.actions {
+    margin-top: 30px;
+    text-align: center;
+}
+
+
+
+

static/js/main.js

@@ -0,0 +1,149 @@
+// Email validation function
+function validateEmail(email) {
+    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return re.test(email);
+}
+
+// Password strength validation
+function checkPasswordStrength(password) {
+    let strength = 0;
+    
+    // Length check
+    if (password.length >= 8) strength += 1;
+    
+    // Contains number
+    if (/\d/.test(password)) strength += 1;
+    
+    // Contains lowercase
+    if (/[a-z]/.test(password)) strength += 1;
+    
+    // Contains uppercase
+    if (/[A-Z]/.test(password)) strength += 1;
+    
+    // Contains special character
+    if (/[^A-Za-z0-9]/.test(password)) strength += 1;
+    
+    return {
+        score: strength,
+        message: getStrengthMessage(strength)
+    };
+}
+
+function getStrengthMessage(strength) {
+    switch(strength) {
+        case 0:
+        case 1:
+            return 'ضعيف جداً';
+        case 2:
+            return 'ضعيف';
+        case 3:
+            return 'متوسط';
+        case 4:
+            return 'قوي';
+        case 5:
+            return 'قوي جداً';
+        default:
+            return '';
+    }
+}
+
+// Initialize all tooltips
+function initTooltips() {
+    const tooltips = document.querySelectorAll('[data-tooltip]');
+    tooltips.forEach(tooltip => {
+        tooltip.addEventListener('mouseover', showTooltip);
+        tooltip.addEventListener('mouseout', hideTooltip);
+    });
+}
+
+function showTooltip(e) {
+    const tooltip = document.createElement('div');
+    tooltip.className = 'tooltip';
+    tooltip.textContent = this.dataset.tooltip;
+    document.body.appendChild(tooltip);
+    
+    const rect = this.getBoundingClientRect();
+    tooltip.style.top = rect.bottom + 5 + 'px';
+    tooltip.style.left = rect.left + (rect.width - tooltip.offsetWidth) / 2 + 'px';
+}
+
+function hideTooltip() {
+    const tooltips = document.querySelectorAll('.tooltip');
+    tooltips.forEach(tooltip => tooltip.remove());
+}
+
+// Form validation
+document.addEventListener('DOMContentLoaded', function() {
+    const registerForm = document.getElementById('registerForm');
+    const loginForm = document.getElementById('loginForm');
+
+    if (registerForm) {
+        registerForm.addEventListener('submit', function(e) {
+            const password = document.getElementById('password').value;
+            const confirmPassword = document.getElementById('confirm_password').value;
+            const email = document.getElementById('email').value;
+            
+            if (!validateEmail(email)) {
+                e.preventDefault();
+                alert('الرجاء إدخال بريد إلكتروني صحيح');
+                return;
+            }
+            
+            if (password !== confirmPassword) {
+                e.preventDefault();
+                alert('كلمات المرور غير متطابقة');
+                return;
+            }
+            
+            const passwordStrength = checkPasswordStrength(password);
+            if (passwordStrength.score < 3) {
+                if (!confirm('كلمة المرور ضعيفة. هل تريد المتابعة؟')) {
+                    e.preventDefault();
+                    return;
+                }
+            }
+        });
+
+        // Real-time password strength indicator
+        const passwordInput = document.getElementById('password');
+        if (passwordInput) {
+            const strengthIndicator = document.createElement('div');
+            strengthIndicator.className = 'password-strength';
+            passwordInput.parentNode.appendChild(strengthIndicator);
+
+            passwordInput.addEventListener('input', function() {
+                const strength = checkPasswordStrength(this.value);
+                strengthIndicator.textContent = 'قوة كلمة المرور: ' + strength.message;
+                strengthIndicator.className = 'password-strength strength-' + strength.score;
+            });
+        }
+    }
+
+    // Initialize tooltips
+    initTooltips();
+});
+
+// Skills management
+document.addEventListener('DOMContentLoaded', function() {
+    const skillsContainer = document.getElementById('skills-container');
+    
+    if (skillsContainer) {
+        // Add new skill field
+        document.querySelector('.add-skill').addEventListener('click', function() {
+            const skillInput = document.createElement('div');
+            skillInput.className = 'skill-input';
+            skillInput.innerHTML = `
+                <input type="text" name="skill" class="skill-field">
+                <button type="button" class="remove-skill">-</button>
+            `;
+            skillsContainer.appendChild(skillInput);
+        });
+
+        // Remove skill field
+        skillsContainer.addEventListener('click', function(e) {
+            if (e.target.classList.contains('remove-skill')) {
+                e.target.parentElement.remove();
+            }
+        });
+    }
+});

templates/artical.html

@@ -0,0 +1,635 @@
+<!DOCTYPE html>
+<html lang="ar">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>مولد مقالات AI</title>
+    <style>
+        body {
+            font-family: 'Cairo', sans-serif;
+            margin: 20px;
+            padding: 0;
+            background-color: #f9f9f9;
+            direction: rtl;
+        }
+
+        h1 {
+            font-size: 28px;
+            color: #333;
+            text-align: center;
+            margin-bottom: 30px;
+        }
+
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+        }
+
+        input[type="text"] {
+            width: 100%;
+            padding: 12px;
+            font-size: 16px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            margin-bottom: 15px;
+            box-sizing: border-box;
+        }
+
+        .btn {
+            width: 100%;
+            padding: 12px;
+            font-size: 16px;
+            background-color: #007bff;
+            color: #fff;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            margin-bottom: 30px;
+        }
+
+        .article-box {
+    background-color: #fff;
+    border: 1px solid #e0e0e0;
+    border-radius: 12px;
+    padding: 20px;
+    margin-bottom: 20px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* ظل خفيف */
+    position: relative;
+    overflow: hidden;
+}
+
+   
+
+        .article-title {
+            font-size: 20px;
+            font-weight: bold;
+            color: #333;
+            margin: 0 0 10px 0;
+        }
+
+        .article-meta {
+            font-size: 14px;
+            color: #777;
+            margin: 0 0 10px 0;
+        }
+
+        /* النافذة المنبثقة (المودال) */
+        .article-content {
+            display: none;
+            position: fixed;
+            top: 100%;
+            left: 50%;
+            width: 100%;
+            max-width: 600px;
+            height: 100%;
+            transform: translateX(-50%);
+            background-color: #fff;
+            border: none;
+            border-radius: 10px;
+            /* padding: 20px; */
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+            z-index: 1000;
+            overflow-y: auto;
+            opacity: 0;
+            transition: opacity 0.3s ease-in-out, top 0.3s ease-in-out;
+            overflow-x: hidden;
+        }
+
+        .article-content.show {
+            top: 50%;
+            opacity: 1;
+            transform: translate(-50%, -50%);
+        }
+
+        .overlay {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5);
+            z-index: 999;
+            opacity: 0;
+            transition: opacity 0.3s ease-in-out;
+        }
+
+        .overlay.show {
+            opacity: 1;
+        }
+
+        .close-btn {
+    position: sticky;
+    top: 10px;
+    right: 10px;
+    font-size: 24px;
+    cursor: pointer;
+    color: #333;
+    background-color: #fff;
+    border: 2px solid #ccc;
+    border-radius: 50%; /* جعل الزر دائريًا */
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 20;
+    transition: all 0.3s ease; /* إضافة تأثير سلس */
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* إضافة ظل خفيف */
+}
+
+.close-btn:hover {
+    color: #fff;
+    background-color: #ff4d4d; /* لون أحمر عند التمرير */
+    border-color: #ff4d4d;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* زيادة الظل عند التمرير */
+}
+
+.close-btn:active {
+    transform: scale(0.9); /* تصغير الزر قليلاً عند النقر */
+}
+
+        .close-btn:hover {
+            color: #000;
+        }
+
+        .modal-header {
+    font-size: 20px;
+    font-weight: bold;
+    color: #333;
+    text-align: center;
+    width: 100%;
+    white-space: nowrap; /* منع النص من الانتقال إلى سطر جديد */
+    overflow: hidden; /* إخفاء النص الذي يتجاوز العرض */
+    text-overflow: ellipsis; /* إضافة ... إذا تجاوز النص العرض */
+    padding: 0 10px; /* إضافة بعض المساحة الداخلية */
+    box-sizing: border-box; /* التأكد من أن الحشو لا يزيد العرض */
+}
+
+        .article-body {
+            font-size: 16px;
+            color: #555;
+            line-height: 1.6;
+            padding: 20px;
+        }
+
+        .modal-footer {
+            font-size: 14px;
+            color: #777;
+            margin-top: 20px;
+            text-align: center;
+        }
+
+        .skeleton {
+            width: 100%;
+            height: 200px;
+            background: #f0f0f0;
+            animation: pulse 1.5s infinite ease-in-out;
+            border-radius: 5px;
+        }
+
+        @keyframes pulse {
+            0% {
+                background-color: #f0f0f0;
+            }
+            50% {
+                background-color: #e0e0e0;
+            }
+            100% {
+                background-color: #f0f0f0;
+            }
+        }
+
+        /* مربع البحث */
+        .search-box {
+            margin-bottom: 20px;
+        }
+
+        .search-box input {
+            width: 100%;
+            padding: 10px;
+            font-size: 16px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+        }
+
+        code{
+            color: #fff;
+            background-color: #000;
+            padding: 5px;
+            border-radius: 3px;
+        }
+
+.modal-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+    background-color: #f8f9fa;
+    border-top: 1px solid #e9ecef;
+    font-size: 14px;
+    color: #6c757d;
+}
+
+.user-info {
+    font-weight: bold;
+    color: #007bff;
+    width: 23%;
+}
+
+.date {
+    font-style: italic;
+    color: #6c757d;
+}
+
+.time {
+    font-weight: bold;
+    color: #28a745; /* لون مختلف للوقت */
+}
+
+code{
+            color: #fff;
+            background-color: #000;
+            padding: 5px;
+            border-radius: 3px;
+        }
+
+.modal-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+    background-color: #f8f9fa;
+    border-top: 1px solid #e9ecef;
+    font-size: 14px;
+    color: #6c757d;
+}
+
+.user-info {
+    font-weight: bold;
+    color: #007bff;
+}
+
+.date {
+    font-style: italic;
+    color: #6c757d;
+}
+
+.time {
+    font-weight: bold;
+    color: #28a745; /* لون مختلف للوقت */
+}
+
+code{
+            color: #fff;
+            background-color: #000;
+            padding: 5px;
+            border-radius: 3px;
+        }
+        .modal-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+    background-color: #f8f9fa;
+    border-top: 1px solid #e9ecef;
+    font-size: 14px;
+    color: #6c757d;
+}
+
+.user-info {
+    font-weight: bold;
+    color: #007bff;
+}
+
+.date {
+    font-style: italic;
+    color: #6c757d;
+}
+
+.time {
+    font-weight: bold;
+    color: #28a745; /* لون مختلف للوقت */
+    margin-right: 10px;
+}
+
+.user-photo {
+    margin-left: 10px; /* مسافة بين الصورة والعناصر الأخرى */
+}
+
+.photo_user {
+    width: 40px; /* حجم الصورة */
+    height: 40px;
+    border-radius: 50%; /* جعل الصورة دائرية */
+    object-fit: cover; /* تأكد من أن الصورة تملأ المساحة دون تشويه */
+    border: 2px solid #007bff; /* إطار حول الصورة */
+}
+
+.article-title {
+    font-size: 20px;
+    font-weight: bold;
+    color: #333;
+    margin: 0 0 10px 0;
+    position: sticky;
+    top: 0;
+    background-color: #fff;
+    padding: 10px 0;
+    z-index: 10;
+    border-bottom: 1px solid #ddd;
+}
+
+.close-btn {
+    /* position: sticky; */
+    /* top: 0;
+    right: 0; */
+    font-size: 30px;
+    cursor: pointer;
+    color: #333;
+    /* background: none;
+    border: none;
+    z-index: 20;
+    margin-left: auto; */
+    padding: 10px;
+    /* background-color: #fff; */
+
+}
+
+.controls{
+    position: sticky;
+    top: 0;
+    right: 0;
+    font-size: 30px;
+    cursor: pointer;
+    color: #333;
+    background: none;
+    border: none;
+    z-index: 20;
+    margin-left: auto;
+    padding: 5px 10px;
+    width: 100%;
+    background-color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: #007bff;
+}
+
+
+
+    </style>
+<!-- إضافة Prism CSS -->
+<link href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism.css" rel="stylesheet"/>
+
+<!-- إضافة Prism JS -->
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/prism.js"></script>
+
+    <script>
+        let overlay = null;
+// فتح النافذة
+function toggleContent(element) {
+    const content = element.querySelector('.article-content');
+
+    if (content.style.display === 'none' || content.style.display === '') {
+        content.style.display = 'block';
+        setTimeout(() => {
+            content.classList.add('show');
+        }, 10);
+    }
+}
+
+// إغلاق النافذة
+ // إغلاق المقالة عند الضغط على زر "إغلاق"
+ function closeContent(button) {
+        const content = button.closest('.article-content'); // الوصول إلى العنصر الأب (الـ article-content)
+        content.classList.remove('show'); // إزالة الفئة التي تعرض النافذة
+        setTimeout(() => {
+            content.style.display = 'none'; // إخفاء النافذة تمامًا بعد وقت قصير (500ms)
+        }, 500);
+    }
+    let isCreating = false; // متغير لتتبع حالة إنشاء المقالة
+
+// إنشاء المقالة
+async function createArticle() {
+    if (isCreating) {
+        // إذا كانت العملية جارية، عرض رسالة تذكير
+        const message = document.createElement('div');
+        message.id = 'creation-message';
+        message.textContent = 'انتظر لم ننتهي بعد';
+        message.style.color = 'red';
+        message.style.position = 'fixed';
+        message.style.top = '10px';
+        message.style.left = '50%';
+        message.style.transform = 'translateX(-50%)';
+        message.style.padding = '10px';
+        message.style.backgroundColor = 'white';
+        message.style.border = '1px solid red';
+        message.style.borderRadius = '5px';
+        message.style.zIndex = '1000';
+        document.body.appendChild(message);
+
+        // إخفاء الرسالة بعد 3 ثوانٍ
+        setTimeout(() => {
+            document.body.removeChild(message);
+        }, 3000);
+
+        return; // إيقاف التنفيذ إذا كانت العملية جارية
+    }
+
+    const title = document.getElementById('title').value; // جلب العنوان من الـ input
+    if (!title) {
+        alert('يرجى إدخال عنوان المقال.');
+        return;
+    }
+
+    isCreating = true; // تعيين حالة العملية إلى "جارية"
+    document.getElementById('loading-text').style.display = 'block'; // عرض النص "جاري التحميل"
+
+    const articleSection = document.getElementById('articles'); // الحصول على قسم المقالات
+    const loadingSkeleton = document.createElement('div'); // إنشاء عنصر جديد للتحميل
+    loadingSkeleton.classList.add('skeleton'); // إضافة الفئة التي تنشئ تأثير التحميل
+    articleSection.prepend(loadingSkeleton); // إضافة عنصر التحميل في البداية
+
+    try {
+        // إرسال طلب إلى السيرفر لإنشاء المقال
+        const response = await fetch('/create', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ title }) // إرسال العنوان فقط
+        });
+
+        if (!response.ok) {
+            throw new Error('حدث خطأ أثناء إنشاء المقال.');
+        }
+
+        const data = await response.json(); // تحويل الاستجابة إلى JSON
+
+        // إنشاء المقال الجديد وعرضه
+        const newArticle = document.createElement('div');
+        newArticle.classList.add('article-box');
+        newArticle.setAttribute("data-idUser" , `${data.id_user}`)
+        newArticle.setAttribute('onclick', 'toggleContent(this)');
+        newArticle.innerHTML = `
+            <h3 class="article-title">${data.title}</h3>
+            <p class="article-meta">By: ${data.user} - ${new Date(data.created_at).toLocaleString()}</p>
+            <div class="article-content">
+                <div class="controls">
+                    <button class="close-btn" onclick="closeContent(this)">×</button>
+                    <div class="modal-header">${data.title}</div>
+                </div>
+                <div class="article-body">${data.content}</div>
+                <div class="modal-footer">
+                    <img class="photo_user" src="${data.photo_user}" alt="User Photo">
+                    <span class="user-info">By: ${data.user}</span>
+                    <span class="date">${new Date(data.created_at).toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}</span>
+                    <span class="time">${new Date(data.created_at).toLocaleTimeString()}</span>
+                </div>
+            </div>
+        `;
+
+        // إزالة عنصر التحميل وعرض المقال الجديد
+        articleSection.removeChild(loadingSkeleton);
+        articleSection.prepend(newArticle); // إضافة المقال الجديد في أعلى القسم
+
+    } catch (error) {
+        console.error(error);
+        alert('حدث خطأ أثناء إنشاء المقال.');
+        articleSection.removeChild(loadingSkeleton); // إزالة عنصر التحميل في حال حدوث خطأ
+    } finally {
+        isCreating = false; // تعيين حالة العملية إلى "غير جارية"
+        document.getElementById('loading-text').style.display = 'none'; // إخفاء النص "جاري التحميل" عند الانتهاء
+    }
+}
+      
+
+        function searchArticles() {
+            const searchTerm = document.getElementById('search').value.toLowerCase();
+            const articles = document.querySelectorAll('.article-box');
+            articles.forEach(article => {
+                const title = article.querySelector('.article-title').textContent.toLowerCase();
+                if (title.includes(searchTerm)) {
+                    article.style.display = 'block';
+                } else {
+                    article.style.display = 'none';
+                }
+            });
+        }
+
+
+
+        document.addEventListener('DOMContentLoaded', () => {
+    // ربط الدالة بحدث النقر على زر "عرض مقالاتي"
+    const showMyArticlesButton = document.getElementById('showMyArticles');
+    if (showMyArticlesButton) {
+        showMyArticlesButton.addEventListener('click', async () => {
+            const currentUserId = await getCurrentUserId(); // جلب id المستخدم الحالي
+
+            if (currentUserId) {
+                console.log('ID المستخدم الحالي:', currentUserId);
+
+                // تصفية المقالات بناءً على id المستخدم
+                const articles = document.querySelectorAll('.article-box');
+                articles.forEach(article => {
+                    const articleUserId = article.getAttribute('data-iduser'); // جلب id المستخدم من المقالة
+                    if (articleUserId == currentUserId) {
+                        article.style.display = 'block'; // عرض المقالة إذا كانت للمستخدم الحالي
+                    } else {
+                        article.style.display = 'none'; // إخفاء المقالة إذا لم تكن للمستخدم الحالي
+                    }
+                });
+            } else {
+                console.log('لم يتم العثور على id المستخدم.');
+                alert('يجب تسجيل الدخول لعرض مقالاتك.');
+            }
+        });
+    } else {
+        console.error('الزر "عرض مقالاتي" غير موجود في الصفحة.');
+    }
+
+    // ربط الدالة بحدث النقر على زر "عرض كل المقالات"
+    const showAllArticlesButton = document.getElementById('showAllArticles');
+    if (showAllArticlesButton) {
+        showAllArticlesButton.addEventListener('click', () => {
+            // عرض جميع المقالات
+            const articles = document.querySelectorAll('.article-box');
+            articles.forEach(article => {
+                article.style.display = 'block'; // إظهار جميع المقالات
+            });
+        });
+    } else {
+        console.error('الزر "عرض كل المقالات" غير موجود في الصفحة.');
+    }
+});
+
+// دالة لجلب id المستخدم الحالي
+async function getCurrentUserId() {
+    try {
+        const response = await fetch('/current_user_id', {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        });
+
+        if (!response.ok) {
+            throw new Error('فشل في جلب بيانات المستخدم');
+        }
+
+        const data = await response.json(); // تحويل الاستجابة إلى JSON
+        return data.id; // إرجاع id المستخدم
+    } catch (error) {
+        console.error('حدث خطأ:', error);
+        return null; // إرجاع null في حالة حدوث خطأ
+    }
+}
+        
+    </script>
+</head>
+<body>
+
+    <div id="loading-text" style="text-align: center; margin-top: 20px; display: none;">
+        <p>جاري الإنشاء...</p>
+    </div>
+
+        
+        <div class="container">
+            <h1>مولد مقالات AI</h1>
+            
+            <!-- مربع البحث -->
+            <div class="search-box">
+                <input type="text" id="search" oninput="searchArticles()" placeholder="بحث عن مقال...">
+            </div>
+    
+            <input type="text" id="title" placeholder="أدخل عنوان المقال">
+            <button class="btn" onclick="createArticle()">أنشئ مقال</button>
+            <button id="showMyArticles">عرض مقالاتي</button>
+            <button id="showAllArticles">عرض كل المقالات</button>
+    
+            <div id="articles">
+                <!-- عرض المقالات الموجودة -->
+                {% for article in articles %}
+                <div class="article-box" data-idUser="{{ article.id_user }}" onclick="toggleContent(this)">
+                    <h3 class="article-title">{{ article.title }}</h3>
+                    <p class="article-meta">By: {{ article.user }} - {{ article.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</p>
+                    <div class="article-content">
+                    <div class="controls">
+                        <button class="close-btn" onclick="closeContent(this)">×</button>
+                        <div class="modal-header ">{{ article.title }}</div>
+                          </div>
+                        <div class="article-body">{{ article.content | safe }}</div>
+                        <div class="modal-footer">
+                            <img class="photo_user" src="{{ url_for('static', filename=article.photo_user) }}" alt="User Photo">
+                            <span class="user-info">By: {{ article.user }}</span>
+                            <span class="date">{{ article.created_at.strftime('%A, %Y-%m-%d') }}</span>
+                            <span class="time">{{ article.created_at.strftime('%H:%M') }}</span>
+                            <div class="user-photo">
+                            </div>                        </div>
+                    </div> <!-- إغلاق article-content -->
+                </div> <!-- إغلاق article-box -->
+                {% endfor %}
+            </div> <!-- إغلاق articles -->
+    
+
+</body>
+</html>

templates/base.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="ar" dir="rtl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}{% endblock %}</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+
+</head>
+<body>
+    <div class="container">
+        {% with messages = get_flashed_messages(with_categories=true) %}
+            {% if messages %}
+                {% for category, message in messages %}
+                    <div class="alert alert-{{ category }}">{{ message }}</div>
+                {% endfor %}
+            {% endif %}
+        {% endwith %}
+        
+        {% block content %}{% endblock %}
+    </div>
+
+    {% block scripts %}{% endblock %}
+</body>
+</html>

templates/create_post.html

@@ -0,0 +1,293 @@
+{% extends "base.html" %}
+
+{% block title %}إنشاء منشور{% endblock %}
+
+{% block content %}
+<div class="post-creation-container">
+    <!-- User Profile Section -->
+    <div class="user-profile">
+        <div class="profile-circle">
+            <img src="{{ url_for('static', filename='uploads/default-avatar.jpg') }}" alt="Profile Picture" class="profile-pic">
+        </div>
+        <span class="username">{{ current_user.username }}</span>
+    </div>
+
+    <!-- Post Creation Form -->
+    <form class="post-form" method="POST" enctype="multipart/form-data">
+        <div class="post-type-selector">
+            <button type="button" class="type-btn active" data-type="text">
+                <i class="fas fa-font"></i> نص
+            </button>
+            <button type="button" class="type-btn" data-type="media">
+                <i class="fas fa-image"></i> صورة/فيديو
+            </button>
+        </div>
+
+        <div class="text-post-section">
+            <textarea name="content" placeholder="بماذا تفكر؟" class="form-control"></textarea>
+            
+            <div class="background-colors">
+                <button type="button" class="color-btn active" data-color="#ffffff" style="background-color: #ffffff">
+                    <i class="fas fa-font"></i>
+                </button>
+                <button type="button" class="color-btn" data-color="#ffafcc" style="background-color: #ffafcc">
+                    <i class="fas fa-font"></i>
+                </button>
+                <button type="button" class="color-btn" data-color="#a2d2ff" style="background-color: #a2d2ff">
+                    <i class="fas fa-font"></i>
+                </button>
+                <button type="button" class="color-btn" data-color="#caffbf" style="background-color: #caffbf">
+                    <i class="fas fa-font"></i>
+                </button>
+                <button type="button" class="color-btn" data-color="#ffd6a5" style="background-color: #ffd6a5">
+                    <i class="fas fa-font"></i>
+                </button>
+            </div>
+            <input type="hidden" name="background_color" id="background_color" value="#ffffff">
+        </div>
+
+        <div class="media-post-section" style="display: none;">
+            <textarea name="media_content" placeholder="اكتب شيئاً عن هذه الصورة/الفيديو..." class="form-control"></textarea>
+            <div class="media-upload">
+                <input type="file" name="media" id="media-input" accept="image/*,video/*">
+                <label for="media-input" class="upload-label">
+                    <i class="fas fa-cloud-upload-alt"></i> اختر صورة أو فيديو
+                </label>
+                <div id="media-preview"></div>
+            </div>
+        </div>
+
+        <div class="form-actions">
+            <button type="submit" class="btn btn-primary">نشر</button>
+        </div>
+    </form>
+</div>
+
+<style>
+.post-creation-container {
+    max-width: 600px;
+    margin: 20px auto;
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    padding: 20px;
+}
+
+.user-profile {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.profile-circle {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    overflow: hidden;
+    margin-left: 10px;
+}
+
+.profile-circle img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.username {
+    font-weight: bold;
+    color: #1a1a1a;
+}
+
+.post-type-selector {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 15px;
+    border-bottom: 1px solid #ddd;
+    padding-bottom: 10px;
+}
+
+.type-btn {
+    flex: 1;
+    padding: 8px;
+    border: none;
+    background: none;
+    cursor: pointer;
+    border-radius: 4px;
+    color: #65676b;
+}
+
+.type-btn.active {
+    background-color: #e7f3ff;
+    color: #1877f2;
+}
+
+.form-control {
+    width: 100%;
+    padding: 12px;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    font-size: 16px;
+    margin-bottom: 15px;
+    box-sizing: border-box;
+}
+
+textarea.form-control {
+    min-height: 100px;
+    resize: vertical;
+    white-space: pre-wrap;
+    direction: rtl;
+}
+
+.background-colors {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 15px;
+    padding: 10px;
+    border-radius: 8px;
+    background: #f0f2f5;
+}
+
+.color-btn {
+    width: 40px;
+    height: 40px;
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #1a1a1a;
+}
+
+.color-btn.active {
+    border: 2px solid #1877f2;
+}
+
+.media-upload {
+    margin: 15px 0;
+}
+
+.upload-label {
+    display: inline-block;
+    padding: 10px 20px;
+    background: #f0f2f5;
+    border-radius: 8px;
+    cursor: pointer;
+    color: #1877f2;
+}
+
+.upload-label i {
+    margin-left: 8px;
+}
+
+#media-input {
+    display: none;
+}
+
+#media-preview {
+    margin-top: 15px;
+}
+
+#media-preview img,
+#media-preview video {
+    max-width: 100%;
+    border-radius: 8px;
+}
+
+.btn {
+    padding: 8px 20px;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    font-weight: bold;
+    font-size: 14px;
+}
+
+.btn-primary {
+    background: #1877f2;
+    color: white;
+}
+
+.form-actions {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 15px;
+}
+</style>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const form = document.querySelector('.post-form');
+    const typeButtons = document.querySelectorAll('.type-btn');
+    const textSection = document.querySelector('.text-post-section');
+    const mediaSection = document.querySelector('.media-post-section');
+    const colorButtons = document.querySelectorAll('.color-btn');
+    const backgroundColorInput = document.getElementById('background_color');
+    const mediaInput = document.getElementById('media-input');
+    const mediaPreview = document.getElementById('media-preview');
+    const contentTextarea = document.querySelector('textarea[name="content"]');
+
+    // Post Type Selection
+    typeButtons.forEach(btn => {
+        btn.addEventListener('click', () => {
+            typeButtons.forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+            
+            if (btn.dataset.type === 'text') {
+                textSection.style.display = 'block';
+                mediaSection.style.display = 'none';
+            } else {
+                textSection.style.display = 'none';
+                mediaSection.style.display = 'block';
+            }
+        });
+    });
+
+    // Background Color Selection
+    colorButtons.forEach(btn => {
+        btn.addEventListener('click', () => {
+            colorButtons.forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+            const color = btn.dataset.color;
+            backgroundColorInput.value = color;
+            contentTextarea.style.backgroundColor = color;
+        });
+    });
+
+    // Media Preview
+    mediaInput.addEventListener('change', function() {
+        const file = this.files[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                mediaPreview.innerHTML = '';
+                if (file.type.startsWith('image/')) {
+                    const img = document.createElement('img');
+                    img.src = e.target.result;
+                    mediaPreview.appendChild(img);
+                } else if (file.type.startsWith('video/')) {
+                    const video = document.createElement('video');
+                    video.src = e.target.result;
+                    video.controls = true;
+                    mediaPreview.appendChild(video);
+                }
+            };
+            reader.readAsDataURL(file);
+        }
+    });
+
+    // Form Submission
+    form.addEventListener('submit', function(e) {
+        const activeType = document.querySelector('.type-btn.active').dataset.type;
+        if (activeType === 'media') {
+            const mediaContent = document.querySelector('textarea[name="media_content"]').value;
+            document.querySelector('textarea[name="content"]').value = mediaContent;
+        }
+        
+        // Add line breaks for text content
+        const contentTextarea = document.querySelector('textarea[name="content"]');
+        contentTextarea.value = contentTextarea.value.replace(/\n/g, '\n');
+    });
+});
+</script>
+{% endblock %}

templates/create_post_iframe.html

@@ -0,0 +1,263 @@
+<!DOCTYPE html>
+<html lang="ar">
+<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.0.0-beta3/css/all.min.css">
+    <style>
+        body {
+            margin: 0;
+            padding: 20px;
+            font-family: 'Arial', sans-serif;
+            background-color: #fff;
+            direction: rtl;
+        }
+
+        .post-form {
+            max-width: 100%;
+        }
+
+        .user-info {
+            display: flex;
+            align-items: center;
+            margin-bottom: 20px;
+        }
+
+        .profile-circle {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            overflow: hidden;
+            margin-left: 10px;
+        }
+
+        .profile-circle img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+
+        .username {
+            font-weight: bold;
+            color: #1a1a1a;
+        }
+
+        .form-group {
+            margin-bottom: 15px;
+        }
+
+        input[type="text"],
+        textarea {
+            width: 100%;
+            padding: 12px;
+            border: 1px solid #ddd;
+            border-radius: 8px;
+            box-sizing: border-box;
+            font-size: 16px;
+            direction: rtl;
+        }
+
+        textarea {
+            min-height: 150px;
+            resize: vertical;
+        }
+
+        .media-upload {
+            display: flex;
+            gap: 10px;
+            margin-top: 20px;
+            padding: 15px;
+            border-top: 1px solid #ddd;
+        }
+
+        .upload-btn {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 8px 16px;
+            border: none;
+            border-radius: 20px;
+            background-color: #f0f2f5;
+            color: #1a1a1a;
+            cursor: pointer;
+            font-size: 14px;
+            transition: background-color 0.2s;
+        }
+
+        .upload-btn:hover {
+            background-color: #e4e6eb;
+        }
+
+        .submit-btn {
+            width: 100%;
+            padding: 12px;
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            border-radius: 8px;
+            font-size: 16px;
+            cursor: pointer;
+            transition: background-color 0.2s;
+            margin-top: 20px;
+        }
+
+        .submit-btn:hover {
+            background-color: #45a049;
+        }
+
+        .submit-btn:disabled {
+            background-color: #cccccc;
+            cursor: not-allowed;
+        }
+
+        #preview {
+            margin-top: 15px;
+            max-width: 100%;
+            border-radius: 8px;
+            display: none;
+        }
+
+        #preview img,
+        #preview video {
+            max-width: 100%;
+            border-radius: 8px;
+        }
+
+        .preview-container {
+            position: relative;
+            display: inline-block;
+            margin-top: 15px;
+            width: 100%;
+        }
+
+        .remove-preview {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            background: rgba(0, 0, 0, 0.5);
+            color: white;
+            border: none;
+            border-radius: 50%;
+            width: 30px;
+            height: 30px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+        }
+
+        .remove-preview:hover {
+            background: rgba(0, 0, 0, 0.7);
+        }
+
+        .media-preview {
+            width: 100%;
+            border-radius: 8px;
+            overflow: hidden;
+            background: #f0f2f5;
+            margin-top: 15px;
+            display: none;
+        }
+
+        .media-preview img {
+            width: 100%;
+            display: block;
+        }
+
+        .media-preview video {
+            width: 100%;
+            display: block;
+        }
+    </style>
+</head>
+<body>
+    <form class="post-form" method="POST" enctype="multipart/form-data">
+        <div class="user-info">
+            <div class="profile-circle">
+                <img src="{{ url_for('static', filename='uploads/default-avatar.jpg') }}" alt="صورة الملف الشخصي">
+            </div>
+            <span class="username">{{ current_user.username }}</span>
+        </div>
+
+        <div class="form-group">
+            <input type="text" name="title" placeholder="عنوان المنشور" required>
+        </div>
+
+        <div class="form-group">
+            <textarea name="content" placeholder="ماذا يدور في ذهنك؟" required></textarea>
+        </div>
+
+        <div class="media-preview" id="mediaPreview"></div>
+
+        <div class="media-upload">
+            <input type="file" id="imageInput" name="media" accept="image/*" style="display: none">
+            <button type="button" class="upload-btn" onclick="document.getElementById('imageInput').click()">
+                <i class="fas fa-image"></i>
+                صورة
+            </button>
+
+            <input type="file" id="videoInput" name="media" accept="video/*" style="display: none">
+            <button type="button" class="upload-btn" onclick="document.getElementById('videoInput').click()">
+                <i class="fas fa-video"></i>
+                فيديو
+            </button>
+        </div>
+
+        <button type="submit" class="submit-btn">نشر</button>
+    </form>
+
+    <script>
+        const imageInput = document.getElementById('imageInput');
+        const videoInput = document.getElementById('videoInput');
+        const mediaPreview = document.getElementById('mediaPreview');
+        let currentFile = null;
+
+        function showPreview(file, type) {
+            if (currentFile) {
+                URL.revokeObjectURL(currentFile);
+            }
+
+            const previewUrl = URL.createObjectURL(file);
+            currentFile = previewUrl;
+
+            mediaPreview.innerHTML = `
+                <div class="preview-container">
+                    ${type === 'image' 
+                        ? `<img src="${previewUrl}" alt="معاينة">`
+                        : `<video src="${previewUrl}" controls></video>`
+                    }
+                    <button type="button" class="remove-preview" onclick="removePreview()">×</button>
+                </div>
+            `;
+            mediaPreview.style.display = 'block';
+        }
+
+        function removePreview() {
+            if (currentFile) {
+                URL.revokeObjectURL(currentFile);
+                currentFile = null;
+            }
+            mediaPreview.innerHTML = '';
+            mediaPreview.style.display = 'none';
+            imageInput.value = '';
+            videoInput.value = '';
+        }
+
+        imageInput.addEventListener('change', (e) => {
+            if (e.target.files[0]) {
+                showPreview(e.target.files[0], 'image');
+                videoInput.value = '';
+            }
+        });
+
+        videoInput.addEventListener('change', (e) => {
+            if (e.target.files[0]) {
+                showPreview(e.target.files[0], 'video');
+                imageInput.value = '';
+            }
+        });
+    </script>
+</body>
+</html>

templates/dashboard.html

@@ -0,0 +1,2997 @@
+<!DOCTYPE html>
+<html lang="ar">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>لوحة التحكم</title>
+
+    <!-- استدعاء مكتبة Font Awesome -->
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
+    />
+    <!-- استدعاء مكتبة jQuery -->
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+
+    <style>
+      /* إعدادات عامة للجوال */
+      body {
+        margin: 0;
+        padding: 0;
+        font-family: "Arial", sans-serif;
+        background-color: #f0f2f5;
+      }
+
+      .top-bar {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        background-color: #4caf50;
+        padding: 15px;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        z-index: 100;
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+        height: 50px;
+        padding: 10px 20px;
+      }
+
+      /* الدائرة */
+      .profile-circle {
+        position: relative;
+        display: inline-block;
+        cursor: pointer;
+        width: 40px;
+        height: 40px;
+      }
+      .profile-circle img {
+        object-fit: cover;
+      }
+      #profileCircle img {
+        border-radius: 50%;
+      }
+
+      /* الدائرة */
+      .profile-circle {
+        position: relative;
+        display: inline-block;
+        cursor: pointer;
+
+        border-radius: 50%;
+        flex-shrink: 0;
+      }
+      .profile-circle img {
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+      }
+      #profileCircle {
+        margin-right: 27px;
+      }
+
+      /* القائمة المنسدلة */
+      .dropdown-menu {
+        display: none; /* إخفاء القائمة بشكل افتراضي */
+        position: absolute;
+        top: 48px;
+        right: -8px;
+        background-color: #fff;
+        border-radius: 8px;
+        box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2),
+          0 2px 4px 0 rgba(0, 0, 0, 0.1);
+        z-index: 1100;
+        min-width: 220px;
+        box-sizing: border-box;
+        overflow: hidden;
+        padding: 8px 0;
+      }
+
+      /* السهم الذي يشير إلى القائمة */
+      .dropdown-menu::before {
+        content: "";
+        position: absolute;
+        top: -8px;
+        right: 20px;
+        width: 16px;
+        height: 16px;
+        background: #fff;
+        transform: rotate(45deg);
+        box-shadow: -2px -2px 3px rgba(0, 0, 0, 0.08);
+      }
+
+      /* تصميم الروابط داخل القائمة */
+      .dropdown-menu a {
+        display: block;
+        padding: 12px 16px;
+        text-decoration: none;
+        color: #050505;
+        font-size: 15px;
+        text-align: right;
+        font-weight: 500;
+        transition: background-color 0.2s ease;
+      }
+
+      /* تأثير التمرير على الروابط */
+      .dropdown-menu a:hover {
+        background-color: #f2f2f2;
+      }
+
+      /* فاصل بين العناصر */
+      .dropdown-menu a:not(:last-child) {
+        border-bottom: 1px solid #e4e6eb;
+      }
+
+      /* نافذة عرض بيانات الحساب */
+      .fullscreen-container {
+        display: none; /* إخفاء النافذة بشكل افتراضي */
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.6); /* خلفية مظللة */
+        z-index: 1200;
+        padding: 50px;
+        background-color: #fff;
+      }
+
+      .content {
+        background: #fff;
+        padding: 20px;
+        border-radius: 8px;
+        max-width: 600px;
+        margin: auto;
+      }
+
+      .close-btn {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        font-size: 30px;
+        cursor: pointer;
+      }
+
+      .fullscreen-container h2 {
+        text-align: center;
+        margin-bottom: 20px;
+      }
+
+      .fullscreen-container p,
+      .fullscreen-container ul {
+        margin: 10px 0;
+        line-height: 1.6;
+      }
+    </style>
+  </head>
+
+  <body>
+
+  
+    <div class="top-bar">
+      <!-- زر إنشاء منشور جديد -->
+      <button class="create-post-btn" id="createPostBtn">
+        <i class="fas fa-plus"></i> إنشاء منشور
+      </button>
+      <button class="chat-button">💬</button>
+
+      <div id="notifications">
+        <button id="notification-btn">
+             <span id="notification-count">0</span>
+        </button>
+        <a href="#" style="text-decoration: none;">
+          <button id="artical-open-btn">AI</button>
+      </a>
+      
+      <!-- <a href="/videos" style="text-decoration: none;"> -->
+        <button class="video_page" >V</button>
+    <!-- </a> -->
+        <div id="notification-list">
+            <!-- الإشعارات ستظهر هنا -->
+        </div>
+    </div>
+    <button class="search-btn" id="openSearchModalBtn">بحث عن مستخدم</button>
+
+
+    
+   <!-- زر فتح نافذة الشات -->
+
+<!-- نافذة الشات -->
+<div class="chat-window" id="chatWindow" style="display: none;">
+    <div class="chat-header">المحادثات <button class="close-main-chat">Close</button></div>
+    <div id="chatList" class="chat-list">
+        <!-- قائمة المستخدمين سيتم تعبئتها ديناميكيًا هنا -->
+    </div>
+</div>
+
+
+    <!-- Container للـ iframe -->
+    <div id="artical-iframe-container">
+      <button id="artical-close-btn">إغلاق</button>
+      <iframe id="artical-iframe" src=""></iframe>
+  </div>
+
+      <!-- دائرة الملف الشخصي -->
+      <div class="profile-circle" id="profileCircle">
+        <img
+          src="{{ url_for('static', filename=current_user.profile_photo) }}"
+          alt="صورة الملف الشخصي"
+        />
+        <div class="dropdown-menu" id="dropdownMenu">
+          <a href="{{ url_for('profile') }}" id="profile-link">الملف الشخصي</a>
+          <a href="{{ url_for('logout') }}">تسجيل الخروج</a>
+        </div>
+      </div>
+    </div>
+
+
+      <!-- حاوية الملف الشخصي -->
+      <div id="profile-container">
+        <div id="profile-header">
+            <button id="close-profile-btn">✕</button>
+        </div>
+        <iframe id="profile-iframe"></iframe>
+    </div>
+<!-- موديل البحث -->
+<div class="modal-search" id="searchModal">
+  <div class="modal-search-content">
+      <span class="close-search-modal" id="closeSearchModalBtn">&times;</span>
+      <input type="text" class="search-input" id="searchInput" placeholder="ابحث عن مستخدم..." onkeyup="searchUsers()" />
+      <div class="search-results" id="searchResults"></div>
+  </div>
+</div>
+
+    <button id="closeChatFrame">إغلاق</button>
+    <iframe id="chatFrame" src="">
+  </iframe>
+  
+    <script>
+      document.addEventListener("DOMContentLoaded", function () {
+        const profileCircle = document.getElementById("profileCircle");
+        const dropdownMenu = document.getElementById("dropdownMenu");
+
+        // دالة لتبديل عرض القائمة المنسدلة
+        function toggleDropdown(e) {
+          e.stopPropagation(); // منع الحدث من الانتقال إلى العناصر الأخرى
+
+          // إذا كانت القائمة مخفية، فإظهارها
+          if (
+            dropdownMenu.style.display === "none" ||
+            dropdownMenu.style.display === ""
+          ) {
+            dropdownMenu.style.display = "block";
+          } else {
+            // إذا كانت القائمة ظاهرة، فإخفاؤها
+            dropdownMenu.style.display = "none";
+          }
+        }
+
+        // إضافة حدث عند النقر على دائرة الملف الشخصي
+        profileCircle.addEventListener("click", toggleDropdown);
+
+        // إغلاق القائمة عند النقر في أي مكان آخر
+        document.addEventListener("click", (e) => {
+          if (
+            !profileCircle.contains(e.target) &&
+            dropdownMenu.style.display === "block"
+          ) {
+            dropdownMenu.style.display = "none"; // إخفاء القائمة
+          }
+        });
+
+        // منع إغلاق القائمة عند النقر داخلها
+        dropdownMenu.addEventListener("click", (e) => {
+          e.stopPropagation(); // منع الحدث من الانتقال إلى العناصر الأخرى
+        });
+      });
+    </script>
+
+    <!-- إطار إنشاء المنشور -->
+    <div class="post-modal" id="postModal">
+      <div class="modal-overlay"></div>
+      <div class="modal-content">
+        <div class="modal-header">
+          <span class="close-modal">&times;</span>
+          <h3>إنشاء منشور جديد</h3>
+        </div>
+        <iframe src="{{ url_for('create_post') }}" frameborder="0"></iframe>
+      </div>
+    </div>
+
+    <!-- Comments Fixed Container -->
+    <div class="comments-overlay" id="commentsOverlay"></div>
+    <div class="comments-fixed-container" id="commentsFixedContainer">
+      <div class="comments-content">
+        <div class="comments-header">
+          <h3>التعليقات</h3>
+          <span class="close-comments">&times;</span>
+        </div>
+        <div class="comments-list-container">
+          <div class="comments-list"></div>
+        </div>
+        <div class="comment-input-container">
+          <textarea
+            class="comment-input"
+            placeholder="اكتب تعليقك ��نا..."
+            rows="1"
+          ></textarea>
+          <button class="send-comment-btn">
+            <i class="fas fa-paper-plane"></i>
+          </button>
+        </div>
+      </div>
+    </div>
+    
+    <div class="reply-overlay" id="replyOverlay"></div>
+    <div class="reply-fixed-container" id="replyFixedContainer">
+      <div class="reply-content">
+        <div class="reply-header">
+          <h3>الرد</h3>
+          <span class="close-reply">&times;</span>
+        </div>
+        <div class="reply-input-container">
+          <textarea
+            class="reply-input"
+            placeholder="اكتب ردك هنا..."
+            rows="1"
+          ></textarea>
+          <button class="send-reply-btn">
+            <i class="fas fa-paper-plane"></i>
+          </button>
+        </div>
+      </div>
+    </div>
+    
+
+    <style>
+      /* Comments Fixed Container Styles */
+    /* Comments Fixed Container Styles */
+.comments-overlay {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1999;
+}
+
+.comments-fixed-container {
+  display: none;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 80%;
+  background: white;
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+  z-index: 2000;
+  transform: translateY(100%);
+  transition: transform 0.3s ease-out;
+}
+
+.comments-fixed-container.active {
+  transform: translateY(0);
+}
+
+.comments-content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.comments-header {
+  padding: 16px;
+  border-bottom: 1px solid #ddd;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.comments-header h3 {
+  margin: 0;
+  text-align: center;
+  flex-grow: 1;
+}
+
+.close-comments {
+  font-size: 24px;
+  cursor: pointer;
+  color: #666;
+  padding: 8px;
+}
+
+.comments-list-container {
+  flex-grow: 1;
+  overflow-y: auto;
+  padding: 16px;
+}
+
+.comments-container {
+  flex-grow: 1;
+  overflow-y: auto;
+  padding: 16px;
+}
+
+.comment-input-container {
+  padding: 12px;
+  border-top: 1px solid #ddd;
+  background: white;
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+}
+
+.comment-input {
+  flex: 1;
+  padding: 12px;
+  border: 1px solid #ddd;
+  border-radius: 20px;
+  resize: none;
+  font-size: 14px;
+  direction: rtl;
+}
+
+.send-comment-btn {
+  background: #4caf50;
+  color: white;
+  border: none;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.send-comment-btn:hover {
+  background: #45a049;
+}
+
+.comments-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  direction: rtl;
+}
+
+.comment-item {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 12px;
+  align-items: flex-start;
+  padding: 0 8px;
+}
+
+.comment-user-avatar {
+  width: 45px;
+  height: 45px;
+  flex-shrink: 0;
+  margin-left: 8px;
+}
+
+.comment-user-avatar img {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.comment-bubble {
+  background: #f0f2f5;
+  border-radius: 18px;
+  padding: 8px 12px;
+  flex-grow: 1;
+}
+
+.comment-header {
+  margin-bottom: 4px;
+}
+
+.comment-username {
+  font-weight: 600;
+  color: #050505;
+  font-size: 13px;
+}
+
+.comment-content {
+  color: #050505;
+  font-size: 14px;
+  line-height: 1.4;
+  word-wrap: break-word;
+}
+
+.comment-time {
+  font-size: 11px;
+  color: #65676b;
+  margin-top: 4px;
+}
+
+.nested-comments {
+  margin-left: 20px;
+}
+
+.reply-input-container {
+  margin-top: 10px;
+}
+
+.reply-text {
+  width: 100%;
+  padding: 12px;
+  border: 1px solid #ddd;
+  border-radius: 20px;
+  resize: none;
+  font-size: 14px;
+  direction: rtl;
+}
+
+.send-reply-btn {
+  margin-top: 5px;
+  color: white;
+  background-color: blue;
+  border: none;
+  padding: 5px 10px;
+  cursor: pointer;
+}
+
+/* Reply Modal Styles */
+.reply-overlay {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 2001;
+}
+
+.reply-fixed-container {
+  display: none;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 30%;
+  background: white;
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+  z-index: 2002;
+  transform: translateY(100%);
+  transition: transform 0.3s ease-out;
+}
+
+.reply-fixed-container.active {
+  transform: translateY(0);
+}
+
+.reply-content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.reply-header {
+  padding: 16px;
+  border-bottom: 1px solid #ddd;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.reply-header h3 {
+  margin: 0;
+  text-align: center;
+  flex-grow: 1;
+}
+
+.close-reply {
+  font-size: 24px;
+  cursor: pointer;
+  color: #666;
+  padding: 8px;
+}
+
+.reply-input-container {
+  padding: 12px;
+  border-top: 1px solid #ddd;
+  background: white;
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+}
+
+.reply-input {
+  flex: 1;
+  padding: 12px;
+  border: 1px solid #ddd;
+  border-radius: 20px;
+  resize: none;
+  font-size: 14px;
+  direction: rtl;
+}
+
+.send-reply-btn {
+  background: #4caf50;
+  color: white;
+  border: none;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+
+}
+.reply-btn{
+  color: blue;
+    cursor: pointer;
+    margin-right: 82%;
+    transform: translate(0%, -18px);
+}
+
+.send-reply-btn:hover {
+  background: #45a049;
+}
+
+      /* أزرار جديدة */
+      .create-post-btn {
+        background-color: #fff;
+        color: #4caf50;
+        border: none;
+        padding: 8px 16px;
+        border-radius: 20px;
+        cursor: pointer;
+        font-size: 14px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      }
+
+      .create-post-btn:hover {
+        background-color: #f0f2f5;
+      }
+
+      /* نافذة المنشور */
+      .post-modal {
+        display: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 1000;
+      }
+
+      .modal-overlay {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.5);
+      }
+/* 
+      .modal-content {
+        position: relative;
+        width: 90%;
+        max-width: 700px;
+        height: 80%;
+        background: white;
+        margin: 50px auto;
+        border-radius: 8px;
+        overflow: hidden;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+      } */
+
+      .modal-header {
+        padding: 15px;
+        border-bottom: 1px solid #ddd;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .close-modal {
+        font-size: 24px;
+        cursor: pointer;
+        color: #666;
+      }
+
+      .modal-content iframe {
+        width: 100%;
+        height: calc(100% - 60px);
+        border: none;
+      }
+
+      .modal-header h3 {
+        margin: 0;
+        text-align: center;
+        flex-grow: 1;
+      }
+
+/* إعدادات عامة للـ iframe */
+#chatFrame {
+    position: fixed; /* يجعل الـ iframe في مكان ثابت فوق الصفحة */
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: white; /* يمكنك تعديل اللون أو وضع صورة خلفية */
+    border: none; /* إزالة الحدود حول الـ iframe */
+    z-index: 9999; /* تعيين z-index عالٍ لجعل الـ iframe يظهر فوق كل العناصر الأخرى */
+    display: none; /* إخفاء الـ iframe في البداية */
+}
+
+/* زر الإغلاق */
+#closeChatFrame {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background-color: red;
+    color: white;
+    padding: 10px;
+    border: none;
+    cursor: pointer;
+    z-index: 10000; /* يجب أن يكون الزر فوق الـ iframe */
+    font-size: 16px;
+    display: none;
+}
+
+#closeChatFrame:hover {
+    background-color: darkred;
+
+}
+      
+    </style>
+
+    <script>
+      // إضافة كود جافا سكريبت للنافذة المنبثقة
+      const createPostBtn = document.getElementById("createPostBtn");
+      const postModal = document.getElementById("postModal");
+      const closeModal = document.querySelector(".close-modal");
+      const modalOverlay = document.querySelector(".modal-overlay");
+
+      createPostBtn.addEventListener("click", () => {
+        postModal.style.display = "block";
+        document.body.style.overflow = "hidden"; // منع التمرير في الخلفية
+      });
+
+      function closePostModal() {
+        postModal.style.display = "none";
+        document.body.style.overflow = "auto"; // إعادة تمكين التمرير
+      }
+
+      closeModal.addEventListener("click", closePostModal);
+      modalOverlay.addEventListener("click", closePostModal);
+    </script>
+
+<!-- عرض المنشورات -->
+<div class="posts-container">
+  {% for post in posts %}
+  <div class="post-card">
+    <div class="post-header">
+      <div class="profile-circle">
+        <a href="{{ url_for('public_profile', user_email=post.user_email) }}" class="public-profile-link">
+          <img src="{{ url_for('static', filename=post_authors[post.user_email]) }}" alt="صورة الملف الشخصي" />
+      </a>
+    </div>
+    
+      <div class="user-info">
+        <span class="username">{{ post.user_email.split('@')[0] }}</span>
+        <span class="profession">{{ post.user_profession }}</span>
+        <span class="timestamp">{{ post.created_at|format_datetime }}</span>
+      </div>
+      {% if post.user_email == current_user.email %}
+      <div class="post-menu">
+        <i class="fas fa-ellipsis-v menu-dots"></i>
+      </div>
+      {% endif %}
+    </div>
+
+    <div
+      class="post-content"
+      {%
+      if
+      post.background_color
+      and
+      not
+      post.image_url
+      %}style="background-color: {{ post.background_color }}; border-radius: 8px; text-align: center; font-size: 24px;"
+      {%
+      endif
+      %}
+    >
+      {% if post.title %}
+      <h3 class="post-title">{{ post.title }}</h3>
+      {% endif %} {% if post.content %}
+      <div class="post-text-container">
+        <p
+          class="post-text collapsed"
+          {%
+          if
+          post.background_color
+          and
+          not
+          post.image_url
+          %}style="color: {% if post.background_color == '#ffffff' %}#1a1a1a{% else %}#000000{% endif %};"
+          {%
+          endif
+          %}
+        >
+          {{ post.content }}
+        </p>
+        <button class="see-more-btn">إظهار المزيد</button>
+      </div>
+      {% endif %} {% if post.image_url %}
+      <div class="post-media">
+        <img
+          src="{{ url_for('static', filename=post.image_url) }}"
+          alt="صورة المنشور"
+        />
+      </div>
+      {% endif %} {% if post.video_url %}
+      <div class="post-media video-container">
+        <video
+          src="{{ url_for('static', filename=post.video_url) }}"
+          controls
+        ></video>
+      </div>
+      {% endif %}
+    </div>
+
+    <div class="post-actions">
+      <button class="action-btn comment-btn" data-post-id="{{ post.id }}">
+        <i class="fas fa-comment"></i> تعليق
+      </button>
+      <button class="action-btn share-btn" data-post-id="{{ post.id }}">
+        <i class="fas fa-share"></i> مشاركة
+      </button>
+    </div>
+
+    <!-- قسم التعليقات -->
+    <div
+      class="comments-section"
+      data-post-id="{{ post.id }}"
+      style="display: none"
+    >
+      <div class="comment-input-container">
+        <textarea
+          class="comment-input"
+          placeholder="اكتب تعليقك هنا..."
+          rows="1"
+        ></textarea>
+        <button class="send-comment-btn">
+          <i class="fas fa-paper-plane"></i>
+        </button>
+      </div>
+      <div class="comments-list"></div>
+    </div>
+  </div>
+  {% endfor %}
+</div>
+
+
+
+<!-- Modal لعرض المنشور -->
+<div class="post-view-modal" id="postViewModal" style="{% if show_post_modal %}display: block;{% else %}display: none;{% endif %}">
+  <div class="modal-overlay"></div>
+  <div class="modal-content">
+    <div class="modal-header">
+      <span class="close-modal">&times;</span>
+      <h3>عرض المنشور</h3>
+    </div>
+    <div class="post-content">
+      {% if post %}
+        <div class="post-header">
+          <div class="profile-circle">
+        <a href="{{ url_for('public_profile', user_email=post.user_email) }}">
+            <img src="{{ url_for('static', filename=post_authors[post.user_email]) }}" alt="صورة الملف الشخصي" />
+        </a>
+    </div>
+          <div class="user-info">
+            <span class="username">{{ post.user_email.split('@')[0] }}</span>
+            <span class="profession">{{ post.user_profession }}</span>
+            <span class="timestamp">{{ post.created_at|format_datetime }}</span>
+          </div>
+          {% if post.user_email == current_user.email %}
+          <div class="post-menu">
+            <i class="fas fa-ellipsis-v menu-dots"></i>
+            <div class="menu-options" style="display: none;">
+              <div class="menu-option edit-post" data-post-id="{{ post.id }}">
+                <i class="fas fa-edit"></i> تعديل المنشور
+              </div>
+              <div class="menu-option delete-post" data-post-id="{{ post.id }}">
+                <i class="fas fa-trash"></i> حذف المنشور
+              </div>
+            </div>
+          </div>
+          {% endif %}
+        </div>
+
+        <div
+          class="post-content-box"
+          {% if post.background_color and not post.image_url %}
+          style="background-color: {{ post.background_color }}; border-radius: 8px; text-align: center; font-size: 24px;"
+          {% endif %}
+        >
+          <div class="post-text-container">
+            <p
+              class="post-text collapsed"
+              {% if post.background_color and not post.image_url %}
+              style="color: {% if post.background_color == '#ffffff' %}#1a1a1a{% else %}#000000{% endif %};"
+              {% endif %}
+            >
+              {{ post.content }}
+            </p>
+            <button class="see-more-btn">إظهار المزيد</button>
+          </div>
+        </div>
+
+        {% if post.image_url %}
+          <div class="post-media">
+            <img src="{{ url_for('static', filename=post.image_url) }}" alt="صورة المنشور">
+          </div>
+        {% endif %}
+
+        {% if post.video_url %}
+          <div class="post-media video-container">
+            <video src="{{ url_for('static', filename=post.video_url) }}" controls></video>
+          </div>
+        {% endif %}
+
+        <!-- أزرار الإجراءات -->
+        <div class="post-actions">
+          <button class="action-btn comment-btn" data-post-id="{{ post.id }}">
+            <i class="fas fa-comment"></i> تعليق
+          </button>
+          <button class="action-btn share-btn" data-post-id="{{ post.id }}">
+            <i class="fas fa-share"></i> مشاركة
+          </button>
+        </div>
+
+        <!-- قسم التعليقات -->
+        <div class="comments-section" data-post-id="{{ post.id }}" style="display: none">
+          <div class="comment-input-container">
+            <textarea class="comment-input" placeholder="اكتب تعليقك هنا..." rows="1"></textarea>
+            <button class="send-comment-btn">
+              <i class="fas fa-paper-plane"></i>
+            </button>
+          </div>
+          <div class="comments-list"></div>
+        </div>
+      {% endif %}
+    </div>
+  </div>
+</div>
+
+
+<!-- Modal لتعديل المنشور -->
+<div class="edit-modal" id="editModal" style="display: none;">
+  <div class="edit-modal-content">
+    <h3>تعديل المنشور</h3>
+    <textarea id="editContentInput" placeholder="أدخل محتوى المنشور" rows="5"></textarea>
+    <div class="edit-modal-buttons">
+      <button class="save-btn" id="saveEditBtn">حفظ</button>
+      <button class="cancel-btn" id="cancelEditBtn">إلغاء</button>
+    </div>
+  </div>
+</div>
+
+
+<!-- Modal لحذف المنشور -->
+<div class="delete-modal" id="deleteModal" style="display: none;">
+  <div class="delete-modal-content">
+    <h3>تأكيد الحذف</h3>
+    <p>هل أنت متأكد من حذف هذا المنشور؟</p>
+    <div class="delete-modal-buttons">
+      <button class="confirm-delete" id="confirmDeleteBtn">حذف</button>
+      <button class="cancel-delete" id="cancelDeleteBtn">إلغاء</button>
+    </div>
+  </div>
+</div>
+
+
+
+  <!-- حاوية الملف الشخصي العام -->
+  <div id="public-profile-container">
+    <div id="public-profile-header">
+        <button id="close-public-profile-btn">✕</button>
+    </div>
+    <iframe id="public-profile-iframe"></iframe>
+</div>
+
+
+    <style>
+      .posts-container {
+        max-width: 600px;
+        margin: 80px auto 20px;
+        padding: 0 15px;
+      }
+
+      .post-card {
+        background: #fff;
+        border-radius: 8px;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+        margin-bottom: 20px;
+      }
+
+      .post-header {
+        display: flex;
+        align-items: center;
+        padding: 12px;
+      }
+
+      .post-content {
+        padding: 12px;
+      }
+
+      .post-title {
+        margin: 0 0 8px 0;
+        font-size: 18px;
+        text-align: right;
+      }
+
+      .post-text-container {
+        position: relative;
+      }
+
+      .post-content-box {
+        background: #f8f9fa;
+        border-radius: 8px;
+        padding: 12px;
+        margin-bottom: 10px;
+      }
+
+      .post-text {
+        margin: 0;
+        color: #1a1a1a;
+        line-height: 1.6;
+        text-align: right;
+        word-wrap: break-word;
+        position: relative;
+        direction: rtl;
+        font-size: 16px;
+      }
+
+      .post-text p {
+        margin: 0;
+        padding: 8px 0;
+        line-height: inherit;
+        white-space: pre-wrap;
+      }
+
+      .post-text.collapsed {
+        display: -webkit-box;
+        -webkit-line-clamp: 4;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        max-height: calc(1.6em * 4); /* 4 lines maximum height */
+        position: relative;
+      }
+
+      .post-text.expanded {
+        display: block;
+        max-height: none;
+      }
+
+      .post-text p:first-child {
+        padding-top: 0;
+      }
+
+      .post-text p:last-child {
+        padding-bottom: 0;
+      }
+
+      .post-text p:empty {
+        min-height: 1.6em;
+        display: block;
+        margin: 4px 0;
+      }
+
+      .see-more-btn {
+        color: #1877f2;
+        cursor: pointer;
+        font-weight: 500;
+        margin-top: 8px;
+        display: none;
+        background: none;
+        border: none;
+        padding: 0;
+        text-align: right;
+        width: 100%;
+      }
+
+      .post-media {
+        margin-top: 10px;
+        border-radius: 8px;
+        overflow: hidden;
+      }
+
+      .post-media img {
+         /* width: 400px; */
+        /* height: 400px;  */
+        max-width: 100%;
+        display: block;
+        /* border-radius: 50%; */
+        object-fit: cover;
+        margin: 0 auto;
+      }
+
+      .video-container {
+        position: relative;
+        padding-bottom: 56.25%; /* 16:9 نسبة العرض للفيديو */
+        height: 0;
+        overflow: hidden;
+      }
+
+      .video-container video {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .post-actions {
+        display: flex;
+        justify-content: space-around;
+        padding: 8px;
+        border-top: 1px solid #ddd;
+      }
+
+      .action-btn {
+        background: none;
+        border: none;
+        padding: 8px;
+        color: #65676b;
+        cursor: pointer;
+        font-size: 14px;
+        display: flex;
+        align-items: center;
+        gap: 5px;
+      }
+
+      .action-btn:hover {
+        background: #f0f2f5;
+        border-radius: 4px;
+      }
+
+      .action-btn i {
+        font-size: 16px;
+      }
+
+      .user-info {
+        display: flex;
+        flex-direction: column;
+        margin-right: 10px;
+        margin-left: 10px;
+      }
+
+      .timestamp {
+        font-size: 12px;
+        color: #65676b;
+        margin-top: 2px;
+      }
+
+      .profession {
+        font-size: 12px;
+        color: #4caf50;
+        margin-top: 2px;
+      }
+
+      /* Post Menu Styles */
+      .post-menu {
+        position: relative;
+        margin-right: auto;
+        padding: 8px;
+      }
+
+      .menu-dots {
+        cursor: pointer;
+        color: #65676b;
+        padding: 8px;
+        border-radius: 50%;
+        width: 32px;
+        height: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .menu-dots:hover {
+        background-color: #f0f2f5;
+      }
+
+      .post-menu-modal {
+        display: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: rgba(0, 0, 0, 0.5);
+        z-index: 2000;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .menu-options {
+        background: white;
+        border-radius: 8px;
+        width: 90%;
+        max-width: 300px;
+        overflow: hidden;
+      }
+
+      .menu-option {
+        padding: 16px;
+        cursor: pointer;
+        color: #050505;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        transition: background-color 0.2s;
+        font-size: 16px;
+        justify-content: center;
+        border-bottom: 1px solid #eee;
+      }
+
+      .menu-option:last-child {
+        border-bottom: none;
+      }
+
+      .menu-option:hover {
+        background-color: #f0f2f5;
+      }
+
+      .menu-option i {
+        font-size: 18px;
+      }
+
+      .delete-post {
+        color: #dc3545;
+      }
+
+      .post-header {
+        position: relative;
+      }
+
+      .replies-toggle {
+        margin-top: 5px;
+        font-size: 14px;
+        display: flex;
+        align-items: center;
+      }
+
+      .replies-toggle i {
+        margin-right: 5px;
+      }
+
+      .nested-comments {
+        margin-left: 20px;
+        border-left: 1px solid #ddd;
+        padding-left: 10px;
+      }
+
+
+
+       /* Post View Modal Styles */
+  .post-view-modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1000;
+  }
+
+  .modal-overlay {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  .modal-content {
+    position: relative;
+    width: 90%;
+    max-width: 700px;
+    height: 80%;
+    background: white;
+    margin: 50px auto;
+    border-radius: 8px;
+    overflow-y: auto;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  }
+
+  .modal-header {
+    padding: 15px;
+    border-bottom: 1px solid #ddd;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .close-modal {
+    font-size: 24px;
+    cursor: pointer;
+    color: #666;
+  }
+
+  .post-content {
+    padding: 15px;
+  }
+
+
+
+  /* تنسيقات modal التعديل */
+  .edit-modal {
+    display: none; /* مخفي بشكل افتراضي */
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: white;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    z-index: 2000; /* أعلى من modal عرض المنشور */
+    width: 90%;
+    max-width: 500px;
+  }
+
+  .edit-modal-content {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+  }
+
+  .edit-modal textarea {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    resize: vertical;
+    min-height: 150px;
+    font-size: 16px;
+    direction: rtl;
+  }
+
+  .edit-modal-buttons {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+  }
+
+  .edit-modal-buttons button {
+    padding: 8px 16px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 14px;
+  }
+
+  .edit-modal-buttons .save-btn {
+    background-color: #4caf50;
+    color: white;
+  }
+
+  .edit-modal-buttons .cancel-btn {
+    background-color: #f44336;
+    color: white;
+  }
+
+/* Post Menu Styles */
+.post-menu {
+    position: relative;
+    margin-right: auto;
+    padding: 8px;
+}
+
+.menu-dots {
+    cursor: pointer;
+    color: #65676b;
+    padding: 8px;
+    border-radius: 50%;
+}
+
+.menu-dots:hover {
+    background-color: #f0f2f5;
+}
+
+.menu-options {
+    display: none;
+    position: absolute;
+    left: 0;
+    top: 100%;
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    z-index: 1000;
+    min-width: 150px;
+}
+
+.menu-option {
+    padding: 8px 16px;
+    cursor: pointer;
+    color: #050505;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.menu-option:hover {
+    background-color: #f0f2f5;
+}
+
+.menu-option i {
+    font-size: 16px;
+    width: 20px;
+}
+
+.delete-post {
+    color: #dc3545;
+}
+
+
+ /* تنسيقات modal الحذف */
+ .delete-modal {
+    display: none; /* مخفي بشكل افتراضي */
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: white;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    z-index: 2000; /* أعلى من modal عرض المنشور */
+    width: 90%;
+    max-width: 500px;
+  }
+
+  .delete-modal-content {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+  }
+
+  .delete-modal-buttons {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+  }
+
+  .delete-modal-buttons button {
+    padding: 8px 16px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 14px;
+  }
+
+  .delete-modal-buttons .confirm-delete {
+    background-color: #dc3545;
+    color: white;
+  }
+
+  .delete-modal-buttons .cancel-delete {
+    background-color: #f0f2f5;
+    color: #050505;
+  }
+
+  .modal-content{  
+    position: relative;
+    width: 100% !important;
+    max-width: 700px;
+    height: 100%;
+    background: white;
+    margin: 0px auto;
+    border-radius: 0px !important;
+    overflow-y: auto;
+    top: 0;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+
+
+  }
+
+
+
+    /* تصميم زر الإشعارات */
+    #notification-btn {
+            background-color: #0078ff;
+            color: white;
+            border: none;
+            padding: 10px 15px;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 16px;
+        }
+
+        /* تصميم العداد */
+        #notification-count {
+            background-color: red;
+            color: white;
+            border-radius: 50%;
+            padding: 2px 6px;
+            font-size: 12px;
+            margin-left: 5px;
+        }
+
+        /* تصميم قائمة الإشعارات */
+        #notification-list {
+            display: none;
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 100%;
+            background-color: white;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            padding: 10px;
+            width: 87%;
+            height: 100%;
+            overflow-y: auto;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        }
+        
+        .no-notifications{
+          text-align: center;
+        }
+
+        /* تصميم عنصر الإشعار */
+        .notification-item {
+            display: flex;
+            align-items: center;
+            padding: 10px;
+            border-bottom: 1px solid #ddd;
+        }
+
+        .notification-item img {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            margin-right: 10px;
+        }
+
+        .notification-item div {
+            flex: 1;
+        }
+
+        .notification-item strong {
+            font-size: 14px;
+        }
+
+        .notification-item p {
+            font-size: 12px;
+            margin: 5px 0;
+        }
+
+        .notification-item small {
+            font-size: 10px;
+            color: #666;
+        }
+  
+
+ /* تنسيق زر الشات */
+ /* .chat-button {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            background-color: #007bff;
+            color: white;
+            border: none;
+            border-radius: 50%;
+            width: 60px;
+            height: 60px;
+            font-size: 24px;
+            cursor: pointer;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        } */
+
+        /* تنسيق نافذة الشات */
+        .chat-window {
+          position: fixed;
+    right: 0;
+    left: 0;
+    height: 100%;
+    bottom: 0;
+    background-color: #fff;
+    border: 1px solid #ddd;
+    border-radius: 10px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    overflow-y: auto;
+    z-index: 1000;
+    display: none;
+        }
+
+        .chat-window .chat-header {
+            padding: 10px;
+            background-color: #007bff;
+            color: white;
+            font-size: 18px;
+            font-weight: bold;
+            text-align: center;
+            border-top-left-radius: 10px;
+            border-top-right-radius: 10px;
+        }
+
+        .chat-window .chat-item {
+            display: flex;
+            align-items: center;
+            padding: 10px;
+            border-bottom: 1px solid #ddd;
+            cursor: pointer;
+        }
+
+        .chat-window .chat-item img {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            margin-right: 10px;
+        }
+
+        .chat-window .chat-item:hover {
+            background-color: #f1f1f1;
+        }
+
+        .no-chats {
+            padding: 10px;
+            text-align: center;
+            color: #666;
+        }
+
+        .close-main-chat{
+          position: absolute;
+          right: 5px;
+        }
+
+
+
+/* الأسلوب العام للموديل */
+.modal-search {
+    display: none; /* الموديل مخفي بشكل افتراضي */
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0,0,0,0.4);
+}
+
+/* محتوى الموديل */
+.modal-search-content {
+    background-color: #fefefe;
+    margin: 15% auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 80%;
+    max-width: 500px;
+}
+
+/* زر إغلاق الموديل */
+.close-search-modal {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.close-search-modal:hover,
+.close-search-modal:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+/* تنسيق نتائج البحث */
+.search-results {
+    margin-top: 10px;
+}
+
+.search-result {
+    padding: 8px;
+    margin: 5px;
+    cursor: pointer;
+}
+
+.search-result:hover {
+    background-color: #f0f0f0;
+}
+
+.profile-img {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    margin-right: 10px;
+}
+
+.search-btn {
+    padding: 8px 12px;
+    background-color: #007BFF;
+    color: white;
+    border: none;
+    cursor: pointer;
+}
+
+.search-btn:hover {
+    background-color: #0056b3;
+}
+
+.search-input {
+    width: 100%;
+    padding: 10px;
+    margin: 10px 0;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+/* النمط الأساسي لـ profile-container */
+#profile-container {
+    display: none; /* مخفي في البداية */
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5); /* خلفية شفافة */
+    z-index: 1000;
+}
+
+/* محتوى iframe */
+#profile-iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+}
+
+/* رأس الحاوية مع زر الإغلاق */
+#profile-header {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: fit-content;
+    background-color: #f1f1f1;
+    padding: 10px;
+    box-sizing: border-box;
+    z-index: 1001;
+}
+
+#close-profile-btn {
+    background-color: transparent;
+    border: none;
+    font-size: 24px;
+    cursor: pointer;
+    float: left;
+}
+
+/* الأنيميشن */
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes slideIn {
+    from { transform: translateY(100%); }
+    to { transform: translateY(0); }
+}
+
+@keyframes fadeOut {
+    from { opacity: 1; }
+    to { opacity: 0; }
+}
+
+@keyframes slideOut {
+    from { transform: translateY(0); }
+    to { transform: translateY(100%); }
+}
+
+#profile-container.show {
+    display: block;
+    animation: fadeIn 0.5s, slideIn 0.5s;
+}
+
+#profile-container.hide {
+    animation: fadeOut 0.5s, slideOut 0.5s;
+}
+
+
+
+
+
+/* النمط الأساسي لـ public-profile-container */
+#public-profile-container {
+    display: none; /* مخفي في البداية */
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5); /* خلفية شفافة */
+    z-index: 1000;
+}
+
+/* محتوى iframe */
+#public-profile-iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+}
+
+/* رأس الحاوية مع زر الإغلاق */
+#public-profile-header {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: fit-content;
+    background-color: #f1f1f1;
+    padding: 10px;
+    box-sizing: border-box;
+    z-index: 1001;
+}
+
+#close-public-profile-btn {
+    background-color: transparent;
+    border: none;
+    font-size: 24px;
+    cursor: pointer;
+    float: left;
+}
+
+/* الأنيميشن */
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes slideIn {
+    from { transform: translateY(100%); }
+    to { transform: translateY(0); }
+}
+
+@keyframes fadeOut {
+    from { opacity: 1; }
+    to { opacity: 0; }
+}
+
+@keyframes slideOut {
+    from { transform: translateY(0); }
+    to { transform: translateY(100%); }
+}
+
+#public-profile-container.show {
+    display: block;
+    animation: fadeIn 0.5s, slideIn 0.5s;
+}
+
+#public-profile-container.hide {
+    animation: fadeOut 0.5s, slideOut 0.5s;
+}
+
+
+
+       /* الأنيميشن فتح المقالات*/
+       @keyframes articalFadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+        }
+
+        @keyframes articalSlideIn {
+            from { transform: translateY(100%); }
+            to { transform: translateY(0); }
+        }
+
+        @keyframes articalFadeOut {
+            from { opacity: 1; }
+            to { opacity: 0; }
+        }
+
+        @keyframes articalSlideOut {
+            from { transform: translateY(0); }
+            to { transform: translateY(100%); }
+        }
+
+        /* إعدادات iframe */
+        #artical-iframe-container {
+            display: none;
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: white;
+            box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.2);
+            z-index: 1000;
+        }
+
+        #artical-iframe-container.show {
+            display: block;
+            animation: articalFadeIn 0.5s, articalSlideIn 0.5s;
+        }
+
+        #artical-iframe-container.hide {
+            animation: articalFadeOut 0.5s, articalSlideOut 0.5s;
+        }
+
+        /* iframe */
+        #artical-iframe {
+            width: 100%;
+            height: 100%;
+            border: none;
+        }
+
+        /* زر الإغلاق */
+        #artical-close-btn {
+            position: absolute;
+            top: 10px;
+            left: 10px;
+            background: red;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            padding: 5px 10px;
+            cursor: pointer;
+        }
+
+    </style>
+
+    <script>
+      // Comments Functionality
+    // Comments Functionality
+$(document).ready(function () {
+  const commentsContainer = $("#commentsFixedContainer");
+  const commentsOverlay = $("#commentsOverlay");
+  const closeComments = $(".close-comments");
+  let currentPostId = null;
+
+  // Reply Modal Elements
+  const replyContainer = $("#replyFixedContainer");
+  const replyOverlay = $("#replyOverlay");
+  const closeReply = $(".close-reply");
+  let currentCommentId = null;
+
+  // تحميل التعليقات عند النقر على زر التعليق
+  $(".comment-btn").click(function () {
+    const postId = $(this).data("post-id");
+    currentPostId = postId;
+
+    // تحميل التعليقات
+    loadComments(postId);
+
+    // عرض الخلفية والحاوية
+    commentsOverlay.css("display", "block");
+    commentsContainer.css("display", "block");
+    document.body.style.overflow = "hidden"; // منع السكرول في الصفحة الرئيسية
+    setTimeout(() => {
+      commentsContainer.addClass("active");
+    }, 10);
+  });
+
+  // إغلاق التعليقات عند النقر خارج الحاوية
+  commentsOverlay.click(function () {
+    closeCommentsContainer();
+  });
+
+  // إغلاق حاوية التعليقات
+  closeComments.click(function () {
+    closeCommentsContainer();
+  });
+
+  // دالة إغلاق حاوية التعليقات
+  function closeCommentsContainer() {
+    commentsContainer.removeClass("active");
+    document.body.style.overflow = "auto"; // إعادة تفعيل السكرول في الصفحة الرئيسية
+    setTimeout(() => {
+      commentsContainer.css("display", "none");
+      commentsOverlay.css("display", "none");
+    }, 300);
+  }
+
+  // إرسال التعليق
+  $(".send-comment-btn").click(function () {
+    const input = commentsContainer.find(".comment-input");
+    const content = input.val().trim();
+
+    if (content && currentPostId) {
+      $.ajax({
+        url: "/add_comment",
+        method: "POST",
+        data: {
+          post_id: currentPostId,
+          content: content,
+          parent_id: null, // Root comment
+        },
+        success: function (response) {
+          if (response.success) {
+            input.val("");
+            loadComments(currentPostId);
+          }
+        },
+      });
+    }
+  });
+
+  // تحميل التعليقات
+  function loadComments(postId) {
+    $.get(`/get_comments/${postId}`, function (comments) {
+      const commentsList = commentsContainer.find(".comments-list");
+      commentsList.empty();
+
+      comments.forEach(function (comment) {
+        const commentHtml = generateCommentHtml(comment);
+        commentsList.append(commentHtml);
+      });
+    });
+  }
+
+  // دالة لتوليد HTML للتعليقات والردود
+  function generateCommentHtml(comment) {
+    const hasReplies = comment.replies && comment.replies.length > 0;
+    const repliesCount = hasReplies
+      ? `${comment.replies.length} رداً`
+      : "";
+
+    const repliesHtml = hasReplies
+      ? comment.replies
+          .map((reply) => generateReplyHtml(reply))
+          .join("")
+      : "";
+
+    return `
+      <div class="comment-item">
+          <div class="comment-user-avatar">
+              <img src="/static/${
+                comment.profile_photo
+              }" alt="${comment.username}">
+          </div>
+          <div class="comment-bubble">
+              <div class="comment-header">
+                  <span class="comment-username">${comment.username}</span>
+              </div>
+              <div class="comment-content">${comment.content}</div>
+              <div class="comment-time">${comment.created_at}</div>
+
+              <!-- عرض زر الردود المخفية إذا كان هناك ردود -->
+              ${
+                hasReplies
+                  ? `
+                  <div class="replies-toggle" data-comment-id="${comment.id}">
+                      <span class="replies-toggle-text" style="color: blue; cursor: pointer;">
+                          <i class="fas fa-chevron-down"></i> ${repliesCount}
+                      </span>
+                  </div>
+              `
+                  : ""
+              }
+
+              <!-- زر الرد -->
+              <button class="reply-btn" data-comment-id="${
+                comment.id
+              }" style="color: blue; cursor: pointer;">رد</button>
+
+              <!-- عرض الردود أسفل التعليق الرئيسي -->
+              <div class="replies-container" style="display: ${
+                hasReplies ? "none" : "none"
+              };">
+                  ${repliesHtml}
+              </div>
+          </div>
+      </div>
+  `;
+  }
+
+  // دالة لتوليد HTML للردود
+  function generateReplyHtml(reply) {
+    return `
+      <div class="comment-item nested-comment" style="    border-bottom: 1px solid;">
+          <div class="comment-user-avatar">
+              <img src="/static/${
+                reply.profile_photo
+              }" alt="${reply.username}">
+          </div>
+          <div class="comment-bubble">
+              <div class="comment-header">
+                  <span class="comment-username">${reply.username}</span>
+              </div>
+              <div class="comment-content">${reply.content}</div>
+              <div class="comment-time">${reply.created_at}</div>
+          </div>
+      </div>
+    `;
+  }
+
+  // إظهار حقل الرد عند النقر على زر الرد
+  $(document).on("click", ".reply-btn", function () {
+    currentCommentId = $(this).data("comment-id");
+    replyOverlay.css("display", "block");
+    replyContainer.css("display", "block");
+    setTimeout(() => {
+      replyContainer.addClass("active");
+    }, 10);
+  });
+
+  // إغلاق الرد عند النقر خارج الحاوية
+  replyOverlay.click(function () {
+    closeReplyContainer();
+  });
+
+  // إغلاق حاوية الرد
+  closeReply.click(function () {
+    closeReplyContainer();
+  });
+
+  // دالة إغلاق حاوية الرد
+  function closeReplyContainer() {
+    replyContainer.removeClass("active");
+    setTimeout(() => {
+      replyContainer.css("display", "none");
+      replyOverlay.css("display", "none");
+    }, 300);
+  }
+
+  // إرسال الرد على تعليق
+  $(".send-reply-btn").click(function () {
+    const input = replyContainer.find(".reply-input");
+    const content = input.val().trim();
+
+    if (content && currentPostId && currentCommentId) {
+      $.ajax({
+        url: "/add_comment",
+        method: "POST",
+        data: {
+          post_id: currentPostId,
+          content: content,
+          parent_id: currentCommentId, // Associate reply with parent
+        },
+        success: function (response) {
+          if (response.success) {
+            input.val("");
+            closeReplyContainer();
+            loadComments(currentPostId);
+          }
+        },
+      });
+    }
+  });
+
+  // إظهار أو إخفاء الردود عند النقر على زر "12 رداً" أو ما يعادله
+  $(document).on("click", ".replies-toggle-text", function () {
+    const toggle = $(this).closest(".replies-toggle");
+    const repliesContainer = toggle.siblings(".replies-container");
+    const icon = toggle.find("i");
+
+    if (repliesContainer.is(":visible")) {
+      repliesContainer.slideUp();
+      icon.removeClass("fa-chevron-up").addClass("fa-chevron-down");
+    } else {
+      repliesContainer.slideDown();
+      icon.removeClass("fa-chevron-down").addClass("fa-chevron-up");
+    }
+  });
+});
+
+
+      // تفعيل زر إظهار المزيد
+      document.addEventListener("DOMContentLoaded", function () {
+  // تحديد النصوص الطويلة وإضافة زر إظهار المزيد
+  document.querySelectorAll(".post-text").forEach(function ($text) {
+    const $btn = $text.nextElementSibling;
+
+    // التحقق من وجود العنصر التالي (زر إظهار المزيد)
+    if ($btn && $btn.classList.contains("see-more-btn")) {
+      // إضافة collapsed class مبدئياً
+      $text.classList.add("collapsed");
+
+      // حساب ارتفاع النص الكامل والنص المقتطع
+      const originalHeight = $text.scrollHeight;
+      const lineHeight = parseFloat(
+        window.getComputedStyle($text).lineHeight
+      );
+      const maxHeight = lineHeight * 4; // ارتفاع 4 أسطر
+
+      // إظهار الزر فقط إذا كان النص أطول من 4 أسطر
+      if (originalHeight > maxHeight) {
+        $btn.style.display = "block";
+        $btn.textContent = "إظهار المزيد";
+      } else {
+        $btn.style.display = "none";
+        $text.classList.remove("collapsed");
+      }
+    }
+  });
+
+        // تفعيل زر إظهار المزيد/أقل
+        document.querySelectorAll(".see-more-btn").forEach(function ($btn) {
+          $btn.addEventListener("click", function () {
+            const $text = this.previousElementSibling;
+
+            if ($text.classList.contains("collapsed")) {
+              $text.classList.remove("collapsed");
+              $text.classList.add("expanded");
+              this.textContent = "إظهار أقل";
+            } else {
+              $text.classList.remove("expanded");
+              $text.classList.add("collapsed");
+              this.textContent = "إظهار المزيد";
+            }
+          });
+        });
+
+        // تفعيل قائمة النقاط الثلاث للمنشورات
+        document.querySelectorAll(".menu-dots").forEach(function ($dots) {
+          $dots.addEventListener("click", function (e) {
+            e.stopPropagation();
+            const $menu = this.nextElementSibling;
+            $(".menu-options").not($menu).hide();
+            $menu.style.display =
+              $menu.style.display === "block" ? "none" : "block";
+          });
+        });
+
+        // إغلاق قوائم المنشورات عند النقر في أي مكان آخر
+        document.addEventListener("click", function () {
+          document.querySelectorAll(".menu-options").forEach(function ($menu) {
+            $menu.style.display = "none";
+          });
+        });
+
+        // منع إغلاق القائمة عند النقر داخلها
+        document.querySelectorAll(".menu-options").forEach(function ($menu) {
+          $menu.addEventListener("click", function (e) {
+            e.stopPropagation();
+          });
+        });
+
+       
+
+   
+
+
+// دالة لإغلاق modal
+  function closePostModal() {
+    const postModal = document.getElementById("postViewModal");
+  console.log("hi")
+    // إغلاق modal
+    postModal.style.display = "none";
+    document.body.style.overflow = "auto"; // إعادة تمكين التمرير
+  }
+
+  // إضافة أحداث لإغلاق modal
+  document.querySelector(".close-modal").addEventListener("click", closePostModal);
+  document.querySelector(".modal-overlay").addEventListener("click", closePostModal);
+
+
+
+
+
+
+
+
+   // تفعيل زر تعديل المنشور
+        document.querySelectorAll(".edit-post").forEach(function ($editBtn) {
+          $editBtn.addEventListener("click", function () {
+            const postId = this.dataset.postId;
+            const $postCard = this.closest(".post-card");
+            const $postText = postCard.querySelector(".post-text");
+            const currentContent = $postText.textContent.trim();
+
+            // إنشاء مربع حوار للتعديل
+            const newContent = prompt("تعديل المنشور:", currentContent);
+
+            if (newContent !== null && newContent !== currentContent) {
+              // إرسال طلب التعديل
+              fetch("/edit_post_content", {
+                method: "POST",
+                headers: {
+                  "Content-Type": "application/x-www-form-urlencoded",
+                },
+                body: `post_id=${postId}&new_content=${encodeURIComponent(
+                  newContent
+                )}`,
+              })
+                .then((response) => response.json())
+                .then((data) => {
+                  if (data.success) {
+                    location.reload();
+                  }
+                });
+            }
+          });
+        });
+
+ // تفعيل زر حذف المنشور
+document
+  .querySelectorAll(".delete-post")
+  .forEach(function ($deleteBtn) {
+    $deleteBtn.addEventListener("click", function () {
+      const postId = this.dataset.postId;
+
+      // عرض الموديل بدلاً من confirm
+      const deleteModal = document.getElementById("deleteModal");
+      deleteModal.style.display = "block"; // عرض الموديل
+
+      // حدث عند الضغط على زر الحذف
+      const confirmDeleteBtn = document.getElementById("confirmDeleteBtn");
+      confirmDeleteBtn.onclick = function () {
+        fetch("/delete_post", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/x-www-form-urlencoded",
+          },
+          body: `post_id=${postId}`,
+        })
+          .then((response) => response.json())
+          .then((data) => {
+            if (data.success) {
+              location.reload(); // إعادة تحميل الصفحة بعد الحذف
+            }
+          });
+        deleteModal.style.display = "none"; // إغلاق الموديل بعد الحذف
+      };
+
+      // حدث عند الضغط على زر الإلغاء
+      const cancelDeleteBtn = document.getElementById("cancelDeleteBtn");
+      cancelDeleteBtn.onclick = function () {
+        deleteModal.style.display = "none"; // إغلاق الموديل دون حذف
+      };
+    });
+  });
+
+      });
+
+  // تفعيل زر تعديل المنشور في modal
+document.addEventListener("DOMContentLoaded", function () {
+  const editPostBtn = document.querySelector("#postViewModal .edit-post");
+
+  if (editPostBtn) {
+    editPostBtn.addEventListener("click", function () {
+      const postId = this.dataset.postId;
+      const postText = document.querySelector("#postViewModal .post-text");
+      const editModal = document.getElementById("editModal");
+      const editContentInput = document.getElementById("editContentInput");
+
+      editModal.style.display = "block";
+      editContentInput.value = postText.textContent.trim();
+
+      // إضافة أحداث لإغلاق modal
+      const cancelEditBtn = document.getElementById("cancelEditBtn");
+      cancelEditBtn.addEventListener("click", function () {
+        editModal.style.display = "none";
+      });
+
+      // إضافة أحداث لحفظ التغييرات
+      const saveEditBtn = document.getElementById("saveEditBtn");
+      saveEditBtn.addEventListener("click", function () {
+        const newContent = editContentInput.value.trim();
+
+        if (newContent !== postText.textContent.trim()) {
+          fetch("/edit_post_content", {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/x-www-form-urlencoded",
+            },
+            body: `post_id=${postId}&new_content=${encodeURIComponent(newContent)}`,
+          })
+            .then((response) => response.json())
+            .then((data) => {
+              if (data.success) {
+                location.reload();
+              }
+            });
+        }
+
+        editModal.style.display = "none";
+      });
+    });
+  }
+});
+
+// إضافة حدث لإغلاق الموديل عند الضغط على الزر الذي يحمل الكلاس 'close-modal'
+document.querySelectorAll(".close-modal").forEach(function ($closeBtn) {
+  $closeBtn.addEventListener("click", function () {
+    // إخفاء الموديل عن طريق تعيين display: none
+    const postViewModal = document.getElementById("postViewModal");
+    postViewModal.style.display = "none";
+
+    // إزالة جزء الرابط الحالي (مثل post/6) دون إعادة تحميل الصفحة
+    const currentUrl = window.location.href; // الحصول على الرابط الحالي
+    const baseUrl = currentUrl.split("/post/")[0]; // إزالة جزء post/6 من الرابط
+    history.pushState(null, "", baseUrl); // تحديث الرابط في شريط العنوان
+  });
+});
+
+
+
+document.addEventListener("DOMContentLoaded", function () {
+  document.querySelectorAll(".share-btn").forEach(function (button) {
+    button.addEventListener("click", function () {
+      const postId = this.dataset.postId;
+      const shareUrl = `${window.location.origin}/post/${postId}`;
+
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(shareUrl).then(function () {
+          showPopup("تم نسخ الرابط");
+        }).catch(function (err) {
+          console.error("فشل نسخ الرابط: ", err);
+        });
+      } else {
+        const tempInput = document.createElement("input");
+        tempInput.value = shareUrl;
+        document.body.appendChild(tempInput);
+        tempInput.select();
+        try {
+          document.execCommand("copy");
+          showPopup("تم نسخ الرابط ");
+        } catch (err) {
+          console.error("فشل نسخ الرابط باستخدام الطريقة البديلة: ", err);
+        }
+        document.body.removeChild(tempInput);
+      }
+
+      function showPopup(message) {
+        const modal = document.createElement("div");
+        modal.style.position = "fixed";
+        modal.style.bottom = "20%";
+        modal.style.left = "50%";
+        modal.style.transform = "translateX(-50%)";
+        modal.style.backgroundColor = "#333";
+        modal.style.color = "#fff";
+        modal.style.padding = "15px 20px";
+        modal.style.borderRadius = "8px";
+        modal.style.boxShadow = "0 4px 6px rgba(0, 0, 0, 0.1)";
+        modal.style.opacity = "0";
+        modal.style.transition = "opacity 0.4s ease, bottom 0.4s ease";
+        modal.style.zIndex = "1000";
+        modal.textContent = message;
+
+        document.body.appendChild(modal);
+
+        setTimeout(() => {
+          modal.style.opacity = "1";
+          modal.style.bottom = "25%";
+        }, 10);
+
+        setTimeout(() => {
+          modal.style.opacity = "0";
+          modal.style.bottom = "20%";
+          setTimeout(() => {
+            modal.remove();
+          }, 400);
+        }, 3000);
+      }
+    });
+  });
+});
+
+document.addEventListener('DOMContentLoaded', function () {
+    const notificationBtn = document.getElementById('notification-btn');
+    const notificationCount = document.getElementById('notification-count');
+    const notificationList = document.getElementById('notification-list');
+
+    let eventSource; // تعريف متغير EventSource خارج الوظيفة
+
+    // تحميل عدد الرسائل غير المقروءة
+    function loadUnreadCount() {
+        fetch('/get_unread_count')
+            .then(response => response.json())
+            .then(data => {
+                notificationCount.textContent = data.unread_count; // تحديث العداد
+            })
+            .catch(error => console.error('Error loading unread count:', error));
+    }
+// تحميل الإشعارات
+function loadNotifications() {
+    fetch('/get_notifications')
+        .then(response => response.json())
+        .then(notifications => {
+            notificationList.innerHTML = ''; // تفريغ القائمة القديمة
+
+            // فلترة الإشعارات غير المقروءة فقط
+            const unreadNotifications = notifications.filter(notification =>
+                (notification.is_received && !notification.watched_by_receiver) ||
+                (!notification.is_received && !notification.watched_by_sender)
+            );
+
+            // إذا كانت القائمة فارغة
+            if (unreadNotifications.length === 0) {
+                notificationList.innerHTML = '<div class="no-notifications">لا توجد إشعارات جديدة</div>';
+            } else {
+                unreadNotifications.forEach(notification => {
+                    const item = document.createElement('div');
+                    item.className = 'notification-item';
+                    item.dataset.messageId = notification.id;
+
+                    const user = notification.is_received ? notification.sender_name : notification.receiver_name;
+                    const userPhoto = notification.is_received ? notification.sender_photo : notification.receiver_photo;
+                    const userEmail = notification.is_received ? notification.sender_email : notification.receiver_email;
+
+                    // تحديد المحتوى مع الإيموجي حسب نوع الملف
+                    let contentPreview = '';
+                    if (notification.file_type === 'image') {
+                        contentPreview = '🖼️ صورة';
+                    } else if (notification.file_type === 'video') {
+                        contentPreview = '🎥 فيديو';
+                    } else {
+                        contentPreview = notification.content; // النص العادي
+                    }
+
+                    item.innerHTML = `
+                        <img src="${userPhoto}" alt="${user}" class="sender-photo" data-user-email="${userEmail}">
+                        <div>
+                            <strong>${user}</strong>
+                            <p>${contentPreview}</p>
+                            <small>${notification.created_at}</small>
+                        </div>
+                    `;
+
+                    notificationList.appendChild(item);
+                });
+            }
+
+            // إضافة حدث النقر على الصور
+            document.querySelectorAll('.sender-photo').forEach(img => {
+                img.addEventListener('click', function (event) {
+                    event.stopPropagation(); // منع انتشار الحدث إلى العنصر الأب
+                    const userEmail = this.dataset.userEmail; // الحصول على البريد الإلكتروني للمستخدم
+
+                    if (userEmail) {
+                        // فتح الرابط داخل iframe
+                        const chatFrame = document.querySelector('#chatFrame');
+                        if (chatFrame) {
+                            chatFrame.src = `/messages/${userEmail}`; // تحميل الصفحة داخل iframe
+                            chatFrame.style.display = 'block'; // إظهار iframe
+                            const closeChatFrameButton = document.querySelector('#closeChatFrame');
+                            if (closeChatFrameButton) {
+                                closeChatFrameButton.style.display = 'block'; // إظهار زر الإغلاق
+                            }
+                            document.body.style.overflow = 'hidden'; // منع التمرير في الصفحة الرئيسية
+
+                            // تفعيل دالة join_chat
+                            fetch('/join_chat', {
+                                method: 'POST',
+                                headers: {
+                                    'Content-Type': 'application/json',
+                                },
+                                body: JSON.stringify({}),
+                            })
+                            .then(response => response.json())
+                            .then(data => {
+                                if (data.success) {
+                                    console.log('User joined the chat successfully');
+                                } else {
+                                    console.error('Failed to join the chat');
+                                }
+                            })
+                            .catch(error => console.error('Error joining chat:', error));
+                        } else {
+                            console.error('iframe not found');
+                        }
+                    } else {
+                        console.error('User email is undefined');
+                    }
+                });
+            });
+        })
+        .catch(error => console.error('Error loading notifications:', error));
+}
+
+// تحديث جميع الرسائل غير المقروءة إلى "مقروءة"
+function markAllAsRead() {
+    fetch('/mark_all_as_read', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            loadNotifications(); // إعادة تحميل الإشعارات بعد التحديث
+            loadUnreadCount(); // تحديث عدد الرسائل غير المقروءة
+        }
+    })
+    .catch(error => console.error('Error marking all as read:', error));
+}
+
+// عرض/إخفاء قائمة الإشعارات
+notificationBtn.addEventListener('click', function () {
+    // التحقق من حالة عرض القائمة
+    if (notificationList.style.display === 'none' || notificationList.style.display === '') {
+        notificationList.style.display = 'block'; // عرض قائمة الإشعارات
+
+        // تحميل الإشعارات عند الضغط الأول
+        loadNotifications(); // تحميل الإشعارات
+        markAllAsRead(); // تحديث جميع الرسائل غير المقروءة إلى "مقروءة"
+    } else {
+        notificationList.style.display = 'none'; // إخفاء قائمة الإشعارات
+    }
+});
+
+// عند النقر على إشعار
+notificationList.addEventListener('click', function (event) {
+    const notificationItem = event.target.closest('.notification-item');
+    if (notificationItem) {
+        const messageId = notificationItem.dataset.messageId;
+
+        // تحديث حالة الرسالة إلى "مقروءة"
+        fetch(`/mark_as_read/${messageId}`)
+            .then(() => {
+                // إعادة تحميل الإشعارات بعد تحديث حالة الرسالة
+                loadNotifications();
+                loadUnreadCount(); // تحديث عدد الرسائل غير المقروءة
+            })
+            .catch(error => console.error('Error marking message as read:', error));
+    }
+});
+
+
+    // الاستماع إلى التحديثات الفورية لعدد الرسائل غير المق��وءة
+    eventSource = new EventSource('/stream_unread_count');
+    eventSource.onmessage = function (event) {
+        // التحقق مما إذا كان المستخدم الحالي في صفحة messages.html
+        const isInChatPage = window.location.pathname.startsWith('/messages/');
+
+        // تحديث العداد فقط إذا لم يكن في صفحة messages.html
+        if (!isInChatPage) {
+            const data = JSON.parse(event.data);
+            notificationCount.textContent = data.unread_count; // تحديث العداد
+        }
+    };
+
+    // إغلاق EventSource عند مغادرة المستخدم للصفحة
+    window.addEventListener('beforeunload', function () {
+        if (eventSource) {
+            eventSource.close();
+        }
+    });
+
+    // تحميل عدد الرسائل غير المقروءة عند فتح الصفحة
+    loadUnreadCount();
+});
+
+
+// تحديد عناصر DOM
+const chatButton = document.querySelector('.chat-button');
+const chatWindow = document.querySelector('#chatWindow');
+let closeManiChat = document.querySelector(".close-main-chat")
+
+const chatList = document.querySelector('#chatList');
+const chatFrame = document.querySelector('#chatFrame'); // الإشارة إلى iframe
+const closeChatFrameButton = document.querySelector('#closeChatFrame'); // الزر لإغلاق الـ iframe
+
+// إظهار/إخفاء نافذة الشات عند الضغط على الزر
+chatButton.addEventListener('click', () => {
+
+    chatWindow.style.display = chatWindow.style.display === 'none' || chatWindow.style.display === '' ? 'block' : 'none';
+    if (chatWindow.style.display === 'block') {
+        loadChatList(); // تحميل قائمة الشات عند الفتح
+    }
+});
+function loadChatList() {
+    fetch('/getchat') // الاتصال بـ API الذي أنشأناه
+        .then(response => response.json())
+        .then(chats => {
+            console.log(chats);
+            chatList.innerHTML = ''; // تفريغ القائمة القديمة
+
+            if (chats.length === 0) {
+                chatList.innerHTML = '<div class="no-chats">لا توجد محادثات</div>';
+                return;
+            }
+
+            // إضافة العناصر إلى القائمة
+            chats.forEach(chat => {
+                const chatItem = document.createElement('div');
+                chatItem.className = 'chat-item';
+                chatItem.dataset.userEmail = chat.user_email;
+
+                // تحديد نص الرسالة بناءً على المحتوى
+                let lastMessageHtml = '';
+                let messagePrefix = chat.is_sender ? 'انت :' : ``;
+
+                if (chat.message_type === 'text') {
+                    lastMessageHtml = `<p>${messagePrefix} ${chat.last_message}</p>`;  // عرض النص
+                }
+                else if (chat.message_type === 'image') {
+                    lastMessageHtml = `<span class="emoji-image">🖼️</span>`;  // إيموجي صورة
+                }
+                else if (chat.message_type === 'video') {
+                    lastMessageHtml = `<span class="emoji-video">📹</span>`;  // إيموجي فيديو
+                }
+                else if (chat.message_type === 'audio') {
+                    lastMessageHtml = `<span class="emoji-audio">🎵</span>`;  // إيموجي صوت
+                }
+
+                // إضافة عدد الرسائل غير المقروءة إذا كان أكبر من 0
+                let unreadCountHtml = '';
+                if (chat.unread_count >= 2) {
+                    unreadCountHtml = `<span class="unread-count">${chat.unread_count}</span>`;
+                }
+
+                chatItem.innerHTML = `
+                    <img src="${chat.user_photo}" alt="${chat.user_name}">
+                    <div>
+                        <strong>${chat.user_name}</strong>
+                        <div>${lastMessageHtml}</div>  <!-- عرض المحتوى داخل div -->
+                        <small>${chat.last_updated}</small>
+                    </div>
+                    ${unreadCountHtml}  <!-- عرض عدد الرسائل غير المقروءة إذا كان أكبر من أو يساوي 2 -->
+                `;
+
+                // حدث النقر لفتح نافذة الشات داخل iframe
+                chatItem.addEventListener('click', () => {
+                    // تغيير مصدر iframe إلى صفحة الرسائل الخاصة بالمستخدم
+                    chatFrame.src = `/messages/${chatItem.dataset.userEmail}`;
+                    chatFrame.style.display = 'block'; // عرض الـ iframe
+                    chatWindow.style.display = 'none'; // إخفاء نافذة الشات
+                    const closeChatFrameButton = document.querySelector('#closeChatFrame');
+                    closeChatFrameButton.style.display = 'block'; // إظهار زر الإغلاق
+                    document.body.style.overflow = 'hidden'; // منع التمرير في الصفحة الرئيسية
+                });
+
+                chatList.appendChild(chatItem);
+            });
+        })
+        .catch(error => console.error('Error loading chat list:', error));
+}
+
+
+document.addEventListener('DOMContentLoaded', () => {
+    // الآن يمكن إضافة listeners بعد تحميل جميع العناصر
+    const closeChatFrameButton = document.querySelector('#closeChatFrame');
+    const chatFrame = document.querySelector('#chatFrame'); // الحصول على iframe
+
+    if (closeChatFrameButton && chatFrame) {
+        closeChatFrameButton.addEventListener('click', () => {
+            chatFrame.style.display = 'none'; // إخفاء الـ iframe
+            chatFrame.src = ''; // إزالة src من iframe
+            closeChatFrameButton.style.display = 'none'; // إخفاء زر الإغلاق
+            chatWindow.style.display = 'block'; // إعادة عرض نافذة الشات
+            document.body.style.overflow = 'auto'; // إعادة التمرير في الصفحة الرئيسية
+            loadChatList()
+            // تفعيل دالة leave_chat
+            fetch('/leave_chat', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({}),
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    console.log('User left the chat successfully');
+                } else {
+                    console.error('Failed to leave the chat');
+                }
+            })
+            .catch(error => console.error('Error leaving chat:', error));
+        });
+    }
+});
+
+
+
+    closeManiChat.addEventListener("click" , () =>{
+      chatWindow.style.display = 'none'; // إخفاء الـ iframe
+    })
+
+
+
+
+    // فتح الموديل عند الضغط على زر البحث
+const openModalBtn = document.getElementById('openSearchModalBtn');
+const closeModalBtn = document.getElementById('closeSearchModalBtn');
+const searchModal = document.getElementById('searchModal');
+
+// عند الضغط على زر "بحث عن مستخدم"، يتم فتح الموديل
+openModalBtn.onclick = function() {
+    searchModal.style.display = 'block';
+}
+
+// عند الضغط على "×" يتم إغلاق الموديل
+closeModalBtn.onclick = function() {
+    searchModal.style.display = 'none';
+}
+
+
+// وظيفة البحث التلقائي
+function searchUsers() {
+    const searchQuery = document.getElementById('searchInput').value;
+    if (searchQuery.length > 0) {
+        // إرسال استعلام AJAX إلى السيرفر
+        fetch(`/search_users?q=${searchQuery}`)
+            .then(response => response.json())
+            .then(data => {
+                // عرض النتائج
+                const resultsContainer = document.getElementById('searchResults');
+                resultsContainer.innerHTML = ''; // مسح النتائج القديمة
+                if (data.length > 0) {
+                    data.forEach(user => {
+                        const userDiv = document.createElement('div');
+                        userDiv.classList.add('search-result');
+                        userDiv.innerHTML = `
+                            <img src="static/${user.profile_photo}" alt="Profile Image" class="profile-img" />
+                            <span>${user.username}</span>
+                        `;
+                        // إزالة المسافات من اسم المستخدم
+                        const userEmail = user.username.replace(/\s+/g, '') + "@moltka.eg"; // إزالة المسافات
+
+                        // إضافة مستمع حدث على العنصر بأكمله لفتح الملف الشخصي داخل الـ iframe
+                        userDiv.addEventListener('click', function(event) {
+                            event.preventDefault(); // منع الانتقال إلى الصفحة الجديدة
+                            openPublicProfile(`/profile/${userEmail}`); // فتح الملف الشخصي داخل الـ iframe
+                        });
+
+                        resultsContainer.appendChild(userDiv);
+                    });
+                } else {
+                    resultsContainer.innerHTML = '<span>لا توجد نتائج</span>';
+                }
+            });
+    } else {
+        document.getElementById('searchResults').innerHTML = '';
+    }
+}
+
+// دالة لفتح الملف الشخصي داخل iframe
+function openProfile() {
+    var container = document.getElementById('profile-container');
+    var iframe = document.getElementById('profile-iframe');
+
+    if (container && iframe) {
+        // إظهار الحاوية
+        container.style.display = 'block';
+        container.classList.remove('hide'); // إزالة فئة الإخفاء
+        container.classList.add('show'); // إضافة فئة العرض
+
+        // تحميل صفحة الملف الشخصي داخل الـ iframe
+        iframe.src = "{{ url_for('profile') }}";
+
+        // منع التمرير في الصفحة الرئيسية
+        document.body.style.overflow = 'hidden';
+    }
+}
+
+// دالة لإغلاق الملف الشخصي
+function closeProfile() {
+    var container = document.getElementById('profile-container');
+    if (container) {
+        // إضافة كلاس hide لتشغيل أنيميشن الإغلاق
+        container.classList.remove('show'); // إزالة فئة العرض
+        container.classList.add('hide'); // إضافة فئة الإخفاء
+
+        // الانتظار حتى يكتمل الأنيميشن قبل إخفاء العنصر
+        setTimeout(function() {
+            container.style.display = 'none';
+
+            // إعادة التمرير في الصفحة الرئيسية
+            document.body.style.overflow = 'auto';
+        }, 300); // الانتظار لمدة 0.5 ثانية (مدة الأنيميشن)
+    }
+}
+
+// إضافة مستمع الحدث لزر الإغلاق
+var closeBtn = document.getElementById("close-profile-btn");
+if (closeBtn) {
+    closeBtn.addEventListener("click", function () {
+        console.log("تم النقر على زر الإغلاق");
+        closeProfile(); // استدعاء دالة الإغلاق
+    });
+}
+
+// إضافة مستمع حدث لرابط الملف الشخصي
+var profileLink = document.getElementById("profile-link");
+if (profileLink) {
+    profileLink.addEventListener('click', function(event) {
+        event.preventDefault(); // منع الانتقال إلى الصفحة الجديدة
+        openProfile(); // فتح الملف الشخصي داخل الـ iframe
+    });
+}
+
+
+// دالة لفتح الملف الشخصي العام داخل iframe
+function openPublicProfile(url) {
+    var container = document.getElementById('public-profile-container');
+    var iframe = document.getElementById('public-profile-iframe');
+
+    if (container && iframe) {
+        // إظهار الحاوية
+        container.style.display = 'block';
+        container.classList.remove('hide'); // إزالة فئة الإخفاء
+        container.classList.add('show'); // إضافة فئة العرض
+
+        // تحميل صفحة الملف الشخصي العام داخل الـ iframe
+        iframe.src = url;
+
+        // منع التمرير في الصفحة الرئيسية
+        document.body.style.overflow = 'hidden';
+    }
+}
+
+// دالة لإغلاق الملف الشخصي العام
+function closePublicProfile() {
+    var container = document.getElementById('public-profile-container');
+    if (container) {
+        // إضافة كلاس hide لتشغيل أنيميشن الإغلاق
+        container.classList.remove('show'); // إزالة فئة العرض
+        container.classList.add('hide'); // إضافة فئة الإخفاء
+
+        // الانتظار حتى يكتمل الأنيميشن قبل إخفاء العنصر
+        setTimeout(function() {
+            container.style.display = 'none';
+
+            // إعادة التمرير في الصفحة الرئيسية
+            document.body.style.overflow = 'auto';
+        }, 300); // الانتظار لمدة 0.5 ثانية (مدة الأنيميشن)
+    }
+}
+
+// إضافة مستمع الحدث لزر الإغلاق
+var closeBtn = document.getElementById("close-public-profile-btn");
+if (closeBtn) {
+    closeBtn.addEventListener("click", function () {
+        console.log("تم النقر على زر الإغلاق");
+        closePublicProfile(); // استدعاء دالة الإغلاق
+    });
+}
+
+// إضافة مستمع حدث للروابط التي تفتح داخل الـ iframe
+document.querySelectorAll('.public-profile-link').forEach(function(link) {
+    link.addEventListener('click', function(event) {
+        event.preventDefault(); // منع الانتقال إلى الصفحة الجديدة
+        var url = this.getAttribute('href'); // الحصول على الرابط
+        openPublicProfile(url); // فتح الرابط داخل الـ iframe
+    });
+});
+
+
+// جلب العناصر
+// العناصر
+const openBtnArtical = document.getElementById('artical-open-btn');
+const closeBtnArtical = document.getElementById('artical-close-btn');
+const iframeContainer = document.getElementById('artical-iframe-container');
+const iframe = document.getElementById('artical-iframe');
+const videoBtn = document.querySelector('.video_page'); // الزر الخاص بفتح الفيديو
+
+// فتح الـ iframe مع تحميل المقال
+openBtnArtical.addEventListener('click', (e) => {
+    e.preventDefault();
+    iframe.src = 'artical'; // تحميل الصفحة الخاصة بالمقال داخل الـ iframe
+    iframeContainer.style.display = 'block'; // إظهار iframe container
+    iframeContainer.classList.add('show');
+    iframeContainer.classList.remove('hide');
+});
+
+// فتح الـ iframe مع تحميل الفيديو
+videoBtn.addEventListener('click', (e) => {
+    e.preventDefault();
+    iframe.src = 'videos'; // تحميل الصفحة الخاصة بالفيديو داخل الـ iframe
+    iframeContainer.style.display = 'block'; // إظهار iframe container
+    iframeContainer.classList.add('show');
+    iframeContainer.classList.remove('hide');
+});
+
+// إغلاق الـ iframe
+closeBtnArtical.addEventListener('click', () => {
+    iframeContainer.classList.add('hide');
+    iframeContainer.classList.remove('show');
+    setTimeout(() => {
+        iframeContainer.style.display = 'none'; // إخفاء العنصر بعد الأنيميشن
+        iframe.src = ''; // إفراغ الـ iframe بعد الإغلاق
+    }, 300); // زمن الأنيميشن
+});
+
+
+
+    </script>
+  </body>
+</html>

templates/forgot_password.html

@@ -0,0 +1,16 @@
+        {% extends "base.html" %}
+
+{% block title %}نسيت كلمة السر{% endblock %}
+
+{% block content %}
+<div class="auth-container">
+    <h2>نسيت كلمة السر</h2>
+    <form id="forgotPasswordForm" method="POST" action="{{ url_for('forgot_password') }}">
+        <div class="form-group">
+            <label for="email">البريد الإلكتروني</label>
+            <input type="email" id="email" name="email" required>
+        </div>
+        <button type="submit" class="submit-btn">إرسال</button>
+    </form>
+</div>
+{% endblock %}

templates/login.html

@@ -0,0 +1,44 @@
+{% extends "base.html" %}
+
+{% block title %}تسجيل الدخول{% endblock %}
+
+{% block content %}
+<div class="auth-container">
+    <h2>تسجيل الدخول</h2>
+    <form id="loginForm" method="POST" action="{{ url_for('login') }}">
+        <div class="form-group">
+            <label for="username">اسم المستخدم</label>
+            <input type="text" id="username" name="username" required>
+            <small class="form-text">سيتم إضافة @moltka.eg تلقائياً</small>
+        </div>
+
+        <div class="form-group">
+            <label for="password">كلمة المرور</label>
+            <input type="password" id="password" name="password" required>
+        </div>
+
+        <button type="submit" class="submit-btn">تسجيل الدخول</button>
+    </form>
+
+    <div class="auth-links">
+        <p><a href="{{ url_for('forgot_password') }}">نسيت كلمة السر؟</a></p>
+        <p>ليس لديك حساب؟ <a href="{{ url_for('register') }}">إنشاء حساب جديد</a></p>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+$(document).ready(function() {
+    $('#loginForm').on('submit', function(e) {
+        const username = $('#username').val().trim();
+        const password = $('#password').val();
+
+        if (!username || !password) {
+            e.preventDefault();
+            alert('الرجاء ملء جميع الحقول المطلوبة');
+        }
+    });
+});
+</script>
+{% endblock %}

templates/messages.html

@@ -0,0 +1,639 @@
+{% extends "base.html" %}
+
+{% block title %}{{ user.username }} - الرسائل{% endblock %}
+
+{% block content %}
+
+<style>
+    /* تصميم الحاوية */
+.messages-container {
+    max-width: 600px;
+    margin: 20px auto;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 10px;
+    background-color: #f9f9f9;
+    font-family: Arial, sans-serif;
+}
+
+/* معلومات المستخدم */
+.user-info {
+    display: flex;
+    align-items: center;
+    margin-bottom: 15px;
+    padding: 10px;
+    background-color: #ffffff;
+    border-bottom: 1px solid #ddd;
+}
+
+.profile-photo {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    margin-right: 10px;
+}
+
+.username {
+    font-size: 18px;
+    font-weight: bold;
+}
+
+/* قائمة الرسائل */
+.messages-list {
+    display: flex;
+    flex-direction: column;
+    max-height: 400px;
+    overflow-y: auto;
+    padding: 10px;
+    background-color: #ffffff;
+    border-radius: 5px;
+    margin-bottom: 15px;
+}
+
+/* الرسائل */
+.message-item {
+    margin: 5px 0;
+    padding: 10px;
+    border-radius: 15px;
+    max-width: 75%;
+    word-wrap: break-word;
+    font-size: 14px;
+}
+
+/* الرسائل المرسلة */
+.message-item.sent {
+    background-color: #0078ff;
+    color: #ffffff;
+    align-self: flex-end;
+    text-align: right;
+}
+
+/* الرسائل المستلمة */
+.message-item.received {
+    background-color: #f1f0f0;
+    color: #000000;
+    align-self: flex-start;
+    text-align: left;
+}
+
+/* الطابع الزمني */
+.message-timestamp {
+    font-size: 10px;
+    color: #666;
+    margin-top: 5px;
+    display: block;
+}
+
+/* إدخال الرسائل */
+.message-input {
+    /* display: flex; */
+    align-items: center;
+    gap: 10px;
+}
+
+textarea#message-input {
+    width: 100%;
+    height: 50px;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    resize: none;
+    font-size: 14px;
+}
+
+button#send-message-btn {
+    background-color: #0078ff;
+    color: #ffffff;
+    border: none;
+    padding: 10px 15px;
+    border-radius: 5px;
+    font-size: 14px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+button#send-message-btn:hover {
+    background-color: #005bb5;
+}
+
+ .received .seen-status{
+    display: none;
+}
+img{
+    max-width: 100%;
+}
+
+video{
+    max-width: 100%;
+}
+
+.input-group{
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: center;
+    position: fixed;
+    bottom: 10px;
+    width: calc(100vw - 16.8px);
+}
+
+
+.file-upload-btn{
+    font-size: 25px;
+    margin-top: 5px;
+}
+
+/* دائرة التحميل */
+.loading-circle {
+    display: inline-block;
+    width: 40px;  /* زيادة الحجم ليكون أكثر وضوحًا */
+    height: 40px;
+    border: 4px solid #0078ff;  /* اللون الأزرق الزاهي */
+    border-top: 4px solid transparent;  /* الجزء العلوي شفاف لإعطاء التأثير الدوار */
+    border-radius: 50%;  /* جعلها دائرية */
+    animation: spin 0.8s linear infinite;  /* سرعة التدوير أصبحت أسرع (0.8 ثانية) */
+    margin: 10px auto;  /* ضبط المسافة بين الدائرة والرسائل */
+    box-shadow: 0px 0px 10px rgba(0, 120, 255, 0.5);  /* إضافة ظل خفيف لإعطاء تأثير العمق */
+}
+
+/* التأثير الذي يجعل الدائرة تدور */
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+
+
+/* تنسيق نافذة المعاينة المنبثقة */
+.modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.8);
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+
+.modal-content {
+    background: white;
+    padding: 20px;
+    border-radius: 10px;
+    text-align: center;
+    position: relative;
+    max-width: 90%;
+    max-height: 90%;
+    margin-left: auto;
+    top: 50%;
+    margin-right: auto;
+    transform: translate(0, -50%);
+}
+
+#closeModal {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background: red;
+    color: white;
+    border: none;
+    border-radius: 50%;
+    width: 30px;
+    height: 30px;
+    cursor: pointer;
+}
+
+.send-button {
+    background: #007bff;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+    margin-top: 10px;
+}
+
+.send-button:hover {
+    background: #0056b3;
+}
+
+#file-preview img,
+#file-preview video {
+    max-width: 100px;
+    max-height: 100px;
+    border-radius: 5px;
+    margin-top: 10px;
+}
+
+
+/* تنسيق دائرة التحميل */
+.loading-spinner {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 10px;
+    font-size: 14px;
+    color: #007bff;
+    background-color: #f1f1f1;
+    border-radius: 5px;
+    margin: 10px auto;
+    width: fit-content;
+}
+
+.loading-spinner::before {
+    content: "";
+    border: 3px solid #f3f3f3;
+    border-top: 3px solid #007bff;
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    animation: spin 1s linear infinite;
+    margin-right: 10px;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* تنسيق دائرة التحميل */
+.loading-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 10px;
+    background-color: #f1f1f1;
+    border-radius: 5px;
+    margin: 10px auto;
+    width: fit-content;
+}
+
+.loading-spinner {
+    font-size: 14px;
+    color: #007bff;
+    margin-bottom: 10px;
+}
+
+/* تنسيق شريط التقدم */
+.progress-bar {
+    width: 200px;
+    height: 10px;
+    background-color: #e0e0e0;
+    border-radius: 5px;
+    overflow: hidden;
+}
+
+.progress {
+    height: 100%;
+    background-color: #007bff;
+    width: 0%;
+    transition: width 0.3s ease;
+}
+</style>
+<div class="messages-container">
+    <!-- معلومات المستخدم -->
+    <div class="user-info">
+        <img src="{{ url_for('static', filename=user.profile_photo) }}" alt="صورة المستخدم" class="profile-photo">
+        <span class="username">{{ user.username }}</span>
+    </div>
+
+    <!-- قائمة الرسائل -->
+    <div class="messages-list" id="messages-list">
+        <div id="loading-container" style="display: none;">
+            <div class="loading-circle"></div>
+        </div>
+    </div>
+
+    <!-- إدخال الرسائل -->
+    <div class="message-input">
+        <form id="messageForm" enctype="multipart/form-data">
+            <div class="input-group">
+                <label for="file-input" class="file-upload-btn">
+                    📎
+                    <input type="file" id="file-input" name="file" accept="image/*, video/*" hidden>
+                </label>
+                <textarea id="message-input" placeholder="اكتب رسالتك هنا..."></textarea>
+               
+                <button type="submit" id="send-message-btn">ارسال</button>
+            </div>
+            <div id="file-preview"></div>
+        </form>
+    </div>
+</div>
+
+<!-- نافذة المعاينة المنبثقة -->
+<div id="previewModal" class="modal">
+    <div class="modal-content">
+        <button id="closeModal">&times;</button>
+        <div id="modalPreview"></div>
+        <button id="sendFromModal" class="send-button">إرسال</button>
+    </div>
+</div>
+
+<script>
+$(document).ready(async function () {
+    const messageList = $('#messages-list');
+    const receiverId = {{ user.id }};
+    let selectedFile = null;
+
+    // إرسال طلب لتحديث حالة المستخدم إلى "داخل المحادثة"
+    await fetch('/join_chat', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+    });
+
+    // تحديث جميع الرسائل إلى "مقروءة" عند فتح المحادثة
+    await fetch('/mark_all_as_seen', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ receiver_id: receiverId }),
+    });
+
+    // معالجة اختيار الملف
+    $('#file-input').change(function(e) {
+        const file = e.target.files[0];
+        if (file) {
+            selectedFile = file;
+            showFilePreview(file);
+        }
+    });
+
+    function showFilePreview(file) {
+        const preview = $('#file-preview');
+        preview.empty();
+
+        if (file.type.startsWith('image/')) {
+            preview.append(`<img src="${URL.createObjectURL(file)}" class="preview-image">`);
+        } else if (file.type.startsWith('video/')) {
+            preview.append(`
+                <video controls class="preview-video">
+                    <source src="${URL.createObjectURL(file)}" type="${file.type}">
+                </video>
+            `);
+        }
+
+        preview.append(`
+            <div class="file-info">
+                <span>${file.name}</span>
+                <button type="button" class="remove-file-btn">×</button>
+            </div>
+        `);
+
+        $('.remove-file-btn').click(() => {
+            selectedFile = null;
+            preview.empty();
+            $('#file-input').val('');
+        });
+    }
+    async function loadMessages() {
+    try {
+        const response = await fetch(`/get_messages/${receiverId}`);
+        const messages = await response.json();
+
+        if (!Array.isArray(messages)) {
+            console.error('الرد ليس مصفوفة:', messages);
+            return;
+        }
+
+        messageList.empty();
+        messages.forEach(message => {
+            const messageItem = $('<div>')
+                .addClass('message-item')
+                .attr('data-message-id', message.id);
+
+            // تحديد إذا كانت الرسالة مرسلة أو مستقبلة
+            if (message.sender_id === {{ current_user.id }}) {
+                messageItem.addClass('sent');
+
+                // إضافة حالة المشاهدة للمرسل
+                if (message.watched_by_receiver) {
+                    messageItem.append('<span class="seen-status">✓✓</span>');  // المستقبل شاهد الرسالة
+                } else {
+                    messageItem.append('<span class="seen-status">✓</span>');   // الرسالة مرسلة، ولكن المستقبل لم يشاهدها بعد
+                }
+            } else {
+                messageItem.addClass('received');
+                // لا تظهر أي علامة للمستقبل
+            }
+
+            const contentContainer = $('<div>').addClass('message-content');
+
+            // عرض الوسائط (صور أو فيديوهات) إذا كانت موجودة
+            if (message.file_url) {
+                if (message.file_type.startsWith('image/')) {
+                    // إذا كانت صورة
+                    contentContainer.append(`<img src="/${message.file_url}" class="message-media">`);
+                } else if (message.file_type.startsWith('video/')) {
+                    // إذا كان فيديو
+                    contentContainer.append(`
+                        <video controls class="message-media">
+                            <source src="/${message.file_url}" type="${message.file_type}">
+                        </video>
+                    `);
+                }
+            }
+
+            // إضافة النصوص إذا كانت موجودة
+            if (message.content) {
+                contentContainer.append(`<span>${message.content}</span>`);
+            }
+
+            // إضافة الطابع الزمني
+            const timestamp = $('<span>')
+                .addClass('message-timestamp')
+                .text(message.created_at);
+
+            // إضافة جميع العناصر إلى الرسالة
+            messageItem.append(contentContainer).append(timestamp);
+            messageList.append(messageItem);
+        });
+
+        // تمرير التمرير لأسفل لرؤية آخر الرسائل
+        messageList.scrollTop(messageList.prop('scrollHeight'));
+    } catch (error) {
+        console.error('حدث خطأ أثناء تحميل الرسائل:', error);
+    }
+}
+
+
+
+    // SSE لتحديث حالة المشاهدة
+    const updateEventSource = new EventSource(`/stream_message_updates/${receiverId}`);
+    updateEventSource.onmessage = function (event) {
+        const data = JSON.parse(event.data);
+        const messageId = data.message_id;
+        const isSender = data.sender_id === {{ current_user.id }};
+
+        // إذا كان المستخدم الحالي هو المرسل
+        if (isSender) {
+            const seenStatus = $(`.message-item[data-message-id="${messageId}"] .seen-status`);
+            if (data.watched_by_receiver) {
+                seenStatus.text('✓✓'); // المستقبل شاهد الرسالة
+            } else {
+                seenStatus.text('✓'); // الرسالة مرسلة، ولكن المستقبل لم يشاهدها بعد
+            }
+        }
+    };
+
+    updateEventSource.onerror = function () {
+        console.log('SSE error. Reconnecting...');
+        setTimeout(() => {
+            new EventSource(`/stream_message_updates/${receiverId}`);
+        }, 3000);
+    };
+
+    // SSE للرسائل الجديدة
+    const eventSource = new EventSource(`/stream_messages/${receiverId}`);
+    eventSource.onmessage = function (event) {
+        loadMessages();
+    };
+
+    // إرسال الرسالة
+
+
+// عند اختيار ملف
+
+// عند اختيار ملف
+$('#file-input').change(function(e) {
+    const file = e.target.files[0];
+    if (file) {
+        selectedFile = file;
+        showFilePreview(file); // عرض معاينة الملف
+    }
+});
+
+// عرض معاينة الملف في نافذة منبثقة
+function showFilePreview(file) {
+    const previewModal = $('#previewModal');
+    const modalPreview = $('#modalPreview');
+
+    // تنظيف المحتوى السابق
+    modalPreview.empty();
+
+    if (file.type.startsWith('image')) {
+        // عرض الصورة
+        const img = $('<img>').attr('src', URL.createObjectURL(file)).css({ maxWidth: '100%', maxHeight: '80vh' });
+        modalPreview.append(img);
+    } else if (file.type.startsWith('video')) {
+        // عرض الفيديو
+        const video = $('<video>').attr('src', URL.createObjectURL(file)).attr('controls', true).css({ maxWidth: '100%', maxHeight: '80vh' });
+        modalPreview.append(video);
+    }
+
+    // إظهار نافذة المعاينة
+    previewModal.show();
+}
+
+// إغلاق نافذة المعاينة
+$('#closeModal').click(function() {
+    $('#previewModal').hide();
+});
+
+// إرسال الملف من نافذة المعاينة
+$('#sendFromModal').click(function() {
+    $('#previewModal').hide();
+    $('#messageForm').submit();
+});
+
+// إرسال النموذج
+$('#messageForm').submit(async function(e) {
+    e.preventDefault();
+    const messageContent = $('#message-input').val().trim();
+    const formData = new FormData();
+    formData.append('content', messageContent);
+    formData.append('receiver_id', receiverId);
+
+    if (selectedFile) {
+        formData.append('file', selectedFile);
+
+        // إظهار دائرة التحميل وشريط التقدم في مكان الرسائل
+        $('#messages-list').append(`
+            <div class="loading-container">
+                <div class="loading-spinner">جاري التحميل...</div>
+                <div class="progress-bar">
+                    <div class="progress"></div>
+                </div>
+            </div>
+        `);
+    }
+
+    if (!messageContent && !selectedFile) return;
+
+    try {
+        const isReceiverActive = await fetch(`/is_user_active/${receiverId}`).then(res => res.json());
+
+        // استخدام XMLHttpRequest لتتبع تقدم الرفع
+        const xhr = new XMLHttpRequest();
+        xhr.open('POST', '/send_message', true);
+
+        // تحديث شريط التقدم أثناء الرفع
+        xhr.upload.onprogress = function(event) {
+            if (event.lengthComputable) {
+                const percentComplete = (event.loaded / event.total) * 100;
+                $('.progress').css('width', percentComplete + '%');
+            }
+        };
+
+        xhr.onload = function() {
+            if (xhr.status === 200) {
+                $('#message-input').val('');
+                $('#file-preview').empty();
+                selectedFile = null;
+                $('#file-input').val('');
+
+                if (isReceiverActive.active) {
+                    const messageId = JSON.parse(xhr.responseText).message_id;
+                    fetch(`/mark_message_as_seen/${messageId}`, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                    });
+                }
+
+                // إخفاء دائرة التحميل وشريط التقدم بعد اكتمال الإرسال
+                $('.loading-container').remove();
+                loadMessages();
+            } else {
+                console.error('حدث خطأ أثناء إرسال الرسالة:', xhr.statusText);
+                $('.loading-container').remove();
+            }
+        };
+
+        xhr.onerror = function() {
+            console.error('حدث خطأ أثناء إرسال الرسالة:', xhr.statusText);
+            $('.loading-container').remove();
+        };
+
+        xhr.send(formData);
+    } catch (error) {
+        console.error('حدث خطأ أثناء إرسال الرسالة:', error);
+        // إخفاء دائرة التحميل وشريط التقدم في حالة حدوث خطأ
+        $('.loading-container').remove();
+    }
+});
+
+
+    await loadMessages();
+});
+
+window.addEventListener('beforeunload', async function () {
+    await fetch('/leave_chat', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+    });
+
+    if (updateEventSource) updateEventSource.close();
+    if (eventSource) eventSource.close();
+});
+</script>
+
+
+{% endblock %}

templates/post_detail.html

@@ -0,0 +1,37 @@
+<div class="post-header">
+    <!-- صورة المستخدم الذي نشر المنشور -->
+    <div class="profile-circle">
+        <img src="{{ url_for('static', filename=current_user.profile_photo) }}" alt="الصورة الشخصية">
+    </div>
+    <div class="user-info">
+        <span class="username">{{ user.username }}</span>  <!-- اسم المستخدم -->
+        <span class="profession">{{ user.profession }}</span>  <!-- تخصص المستخدم -->
+        <span class="timestamp">{{ post.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</span>  <!-- وقت نشر المنشور -->
+    </div>
+</div>
+
+<!-- محتوى المنشور -->
+<div class="post-content">
+    <!-- <h2>{{ post.title }}</h2> -->
+    <p>{{ post.content }}</p>
+    {% if post.image_url %}
+        <img src="{{ url_for('static', filename=post.image_url) }}" alt="Post Image">  <!-- صورة المنشور -->
+    {% endif %}
+</div>
+
+<!-- رابط المشاركة -->
+<div class="share">
+    <label>شارك هذا المنشور:</label>
+    <input type="text" value="{{ url_for('view_post', post_id=post.id, _external=True) }}" readonly>
+    <button onclick="copyToClipboard()">نسخ الرابط</button>
+</div>
+
+<script>
+    function copyToClipboard() {
+        var copyText = document.querySelector('.share input');
+        copyText.select();
+        copyText.setSelectionRange(0, 99999);  // لنسخ النص في الأجهزة المحمولة
+        document.execCommand('copy');
+        alert('تم نسخ الرابط!');
+    }
+</script>

templates/profile.html

@@ -0,0 +1,1827 @@
+{% extends "base.html" %}
+
+{% block title %}{{ current_user.username }} - الملف الشخصي{% endblock %}
+
+{% block content %}
+<div class="profile-container">
+    <!-- قسم معلومات الملف الشخصي -->
+    <div class="profile-header">
+        <div class="cover-photo"></div>
+        <div class="profile-info">
+            <div class="profile-photo">
+                <img src="{{ url_for('static', filename=current_user.profile_photo) }}" alt="الصورة الشخصية">
+            </div>
+            <h1 class="profile-name">{{ current_user.username }}</h1>
+            <div class="profile-details">
+                <div class="detail-item">
+                    <i class="fas fa-envelope"></i>
+                    <span>{{ current_user.email }}</span>
+                </div>
+                <div class="detail-item">
+                    <i class="fas fa-briefcase"></i>
+                    <span>{{ current_user.profession }}</span>
+                </div>
+            </div>
+            <div class="skills-section">
+                <h3>المهارات</h3>
+                <div class="skills-list">
+                    {% for skill in current_user.skills|from_json %}
+                    <span class="skill-tag">{{ skill }}</span>
+                    {% endfor %}
+                </div>
+            </div>
+            <button id="editProfileBtn" class="edit-btn">
+                <i class="fas fa-edit"></i>
+                تعديل الملف الشخصي
+            </button>
+        </div>
+    </div>
+
+    <div class="filter-buttons">
+        <button id="filterAll" class="filter-btn active">الكل</button>
+        <button id="filterImages" class="filter-btn">الصور</button>
+        <button id="filterVideos" class="filter-btn">الفيديوهات</button>
+        <button id="filterText" class="filter-btn">النص</button>
+    </div>
+
+    <div id="noPostsMessage" style="display: none; text-align: center; margin-top: 20px; color: #666;">
+        لا توجد منشورات تطابق الفلتر المحدد.
+    </div>
+
+    <!-- نموذج تعديل الملف الشخصي -->
+    <div id="editProfileForm" class="edit-form" style="display: none;">
+        <h2>تعديل الملف الشخصي</h2>
+        <form id="profileForm" method="POST" action="{{ url_for('update_profile') }}" enctype="multipart/form-data">
+            <div class="form-group">
+                <label>الصورة الشخصية</label>
+                <div class="profile-photo-upload">
+                    <input type="file" id="avatar" name="avatar" accept="image/*" class="avatar-input">
+                    <label for="avatar" class="upload-btn">
+                        <i class="fas fa-camera"></i>
+                        تغيير الصورة
+                    </label>
+                    <button type="button" class="remove-photo-btn" id="removePhotoBtn">
+                        <i class="fas fa-times"></i>
+                        إزالة الصورة
+                    </button>
+                </div>
+            </div>
+            <div class="form-group">
+                <label for="username">اسم المستخدم</label>
+                <input type="text" id="username" name="username" value="{{ current_user.username }}" required>
+                <small class="form-text">@moltka.eg</small>
+                <span id="username-validation-message"></span>
+            </div>
+
+            <div class="form-group">
+                <label for="profession">المجال المهني</label>
+                <select id="profession" name="profession" required>
+                    <option value="">اختر المجال المهني</option>
+                    <option value="مطور ويب" {% if current_user.profession == "مطور ويب" %}selected{% endif %}>مطور ويب</option>
+                    <option value="مطور واجهة خلفية" {% if current_user.profession == "مطور واجهة خلفية" %}selected{% endif %}>مطور واجهة خلفية</option>
+                    <option value="برمجة" {% if current_user.profession == "برمجة" %}selected{% endif %}>برمجة</option>
+                    <option value="مطور ألعاب" {% if current_user.profession == "مطور ألعاب" %}selected{% endif %}>مطور ألعاب</option>
+                    <option value="مطور أندرويد" {% if current_user.profession == "مطور أندرويد" %}selected{% endif %}>مطور أندرويد</option>
+                    <option value="مطور iOS" {% if current_user.profession == "مطور iOS" %}selected{% endif %}>مطور iOS</option>
+                    <option value="مهندس" {% if current_user.profession == "مهندس" %}selected{% endif %}>مهندس</option>
+                    <option value="طبيب" {% if current_user.profession == "طبيب" %}selected{% endif %}>طبيب</option>
+                    <option value="علوم اجتماعية" {% if current_user.profession == "علوم اجتماعية" %}selected{% endif %}>علوم اجتماعية</option>
+                    <option value="معلم" {% if current_user.profession == "معلم" %}selected{% endif %}>معلم</option>
+                    <option value="محاسب" {% if current_user.profession == "محاسب" %}selected{% endif %}>محاسب</option>
+                    <option value="صحفي" {% if current_user.profession == "صحفي" %}selected{% endif %}>صحفي</option>
+                    <option value="محامي" {% if current_user.profession == "محامي" %}selected{% endif %}>محامي</option>
+                    <option value="مصمم جرافيكي" {% if current_user.profession == "مصمم جرافيكي" %}selected{% endif %}>مصمم جرافيكي</option>
+                    <option value="مصور" {% if current_user.profession == "مصور" %}selected{% endif %}>مصور</option>
+                    <option value="كاتب" {% if current_user.profession == "كاتب" %}selected{% endif %}>كاتب</option>
+                    <option value="مدرب رياضي" {% if current_user.profession == "مدرب رياضي" %}selected{% endif %}>مدرب رياضي</option>
+                    <option value="طاهي" {% if current_user.profession == "طاهي" %}selected{% endif %}>طاهي</option>
+                    <option value="ديني" {% if current_user.profession == "ديني" %}selected{% endif %}>ديني</option>
+                    <option value="شاعر" {% if current_user.profession == "شاعر" %}selected{% endif %}>شاعر</option>
+                    <option value="رسام" {% if current_user.profession == "رسام" %}selected{% endif %}>رسام</option>
+                    <option value="محلل مالي" {% if current_user.profession == "محلل مالي" %}selected{% endif %}>محلل مالي</option>
+                    <option value="فني صيانة" {% if current_user.profession == "فني صيانة" %}selected{% endif %}>فني صيانة</option>
+                    <option value="باحث" {% if current_user.profession == "باحث" %}selected{% endif %}>باحث</option>
+                    <option value="IT" {% if current_user.profession == "IT" %}selected{% endif %}>IT</option>
+                </select>
+            </div>
+
+            <div class="form-group">
+                <label>المهارات</label>
+                <div id="skills-container">
+                    {% for skill in current_user.skills|from_json %}
+                    <div class="skill-input">
+                        <input type="text" name="skill" class="skill-field" value="{{ skill }}">
+                        <button type="button" class="remove-skill">-</button>
+                    </div>
+                    {% endfor %}
+                    <div class="skill-input">
+                        <input type="text" name="skill" class="skill-field">
+                        <button type="button" class="add-skill">+</button>
+                    </div>
+                </div>
+                <input type="hidden" id="skills" name="skills">
+            </div>
+
+            <div class="form-actions">
+                <button type="submit" class="save-btn">حفظ التغييرات</button>
+                <button type="button" class="cancel-btn" id="cancelEdit">إلغاء</button>
+            </div>
+        </form>
+    </div>
+
+       <!-- قسم المنشورات -->
+       <div class="posts-section">
+        <h2>المنشورات</h2>
+        <div class="posts-container">
+            {% for post in posts %}
+            <div class="post-card">
+                <div class="post-header">
+                    <div class="profile-circle">
+                        <img src="{{ url_for('static', filename=current_user.profile_photo) }}" alt="صورة الملف الشخصي">
+                    </div>
+                    <div class="user-info">
+                        <span class="username">{{ current_user.username }}</span>
+                        <span class="profession">{{ post.user_profession }}</span>
+                        <span class="timestamp">{{ post.created_at|format_datetime }}</span>
+                    </div>
+                    <div class="post-menu">
+                        <i class="fas fa-ellipsis-v menu-dots"></i>
+                        <div class="menu-options">
+                            <div class="menu-option edit-post" data-post-id="{{ post.id }}">
+                                <i class="fas fa-edit"></i> تعديل المنشور
+                            </div>
+                            <div class="menu-option delete-post" data-post-id="{{ post.id }}">
+                                <i class="fas fa-trash"></i> حذف المنشور
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="post-content" {% if post.background_color and not post.image_url %}style="background-color: {{ post.background_color }}; border-radius: 8px; text-align: center; font-size: 24px;"{% endif %}>
+                    {% if post.title %}
+                    <h3 class="post-title">{{ post.title }}</h3>
+                    {% endif %}
+                    {% if post.content %}
+                    <div class="post-text-container">
+                        <div class="post-content-box">
+                            <div class="post-text collapsed" {% if post.background_color and not post.image_url %}style="color: {% if post.background_color == '#ffffff' %}#1a1a1a{% else %}#000000{% endif %};"{% endif %}>
+                                {% for line in post.content.split('\n') %}
+                                    {% if line.strip() %}
+                                    <p>{{ line }}</p>
+                                    {% else %}
+                                    <p>&nbsp;</p>
+                                    {% endif %}
+                                {% endfor %}
+                            </div>
+                            <button class="see-more-btn" style="display: none;">إظهار المزيد</button>
+                        </div>
+                    </div>
+                    {% endif %}
+                    {% if post.image_url %}
+                    <div class="post-media">
+                        <img src="{{ url_for('static', filename=post.image_url) }}" alt="صورة المنشور">
+                    </div>
+                    {% endif %}
+                    {% if post.video_url %}
+                    <div class="post-media video-container">
+                        <video src="{{ url_for('static', filename=post.video_url) }}" controls></video>
+                    </div>
+                    {% endif %}
+                </div>
+
+                <div class="post-actions">
+                    <button class="action-btn comment-btn" data-post-id="{{ post.id }}">
+                      <i class="fas fa-comment"></i> تعليق
+                    </button>
+                    <button class="action-btn share-btn" data-post-id="{{ post.id }}">
+                      <i class="fas fa-share"></i> مشاركة
+                    </button>
+                  </div>
+            </div>
+            {% endfor %}
+        </div>
+    </div>
+                
+
+
+<!-- Comments Fixed Container -->
+<div class="comments-overlay" id="commentsOverlay"></div>
+<div class="comments-fixed-container" id="commentsFixedContainer">
+  <div class="comments-content">
+    <div class="comments-header">
+      <h3>التعليقات</h3>
+      <span class="close-comments">&times;</span>
+    </div>
+    <div class="comments-list-container">
+      <div class="comments-list"></div>
+    </div>
+    <div class="comment-input-container">
+      <textarea
+        class="comment-input"
+        placeholder="اكتب تعليقك هنا..."
+        rows="1"
+      ></textarea>
+      <button class="send-comment-btn">
+        <i class="fas fa-paper-plane"></i>
+      </button>
+    </div>
+  </div>
+</div>
+
+<div class="reply-overlay" id="replyOverlay"></div>
+<div class="reply-fixed-container" id="replyFixedContainer">
+  <div class="reply-content">
+    <div class="reply-header">
+      <h3>الرد</h3>
+      <span class="close-reply">&times;</span>
+    </div>
+    <div class="reply-input-container">
+      <textarea
+        class="reply-input"
+        placeholder="اكتب ردك هنا..."
+        rows="1"
+      ></textarea>
+      <button class="send-reply-btn">
+        <i class="fas fa-paper-plane"></i>
+      </button>
+    </div>
+  </div>
+</div>
+
+
+<!-- زر العودة للصفحة الرئيسية -->
+<!-- <a href="{{ url_for('dashboard') }}" class="back-btn">
+    <i class="fas fa-arrow-left"></i>
+    العودة للرئيسية
+</a> -->
+
+<style>
+/* Comments Fixed Container Styles */
+.comments-overlay {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1999;
+}
+
+.comments-fixed-container {
+  display: none;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 80%;
+  background: white;
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+  z-index: 2000;
+  transform: translateY(100%);
+  transition: transform 0.3s ease-out;
+}
+
+.comments-fixed-container.active {
+  transform: translateY(0);
+}
+
+.comments-content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.comments-header {
+  padding: 16px;
+  border-bottom: 1px solid #ddd;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.comments-header h3 {
+  margin: 0;
+  text-align: center;
+  flex-grow: 1;
+}
+
+.close-comments {
+  font-size: 24px;
+  cursor: pointer;
+  color: #666;
+  padding: 8px;
+}
+
+.comments-list-container {
+  flex-grow: 1;
+  overflow-y: auto;
+  padding: 16px;
+}
+
+.comments-container {
+  flex-grow: 1;
+  overflow-y: auto;
+  padding: 16px;
+}
+
+.comment-input-container {
+  padding: 12px;
+  border-top: 1px solid #ddd;
+  background: white;
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+}
+
+.comment-input {
+  flex: 1;
+  padding: 12px;
+  border: 1px solid #ddd;
+  border-radius: 20px;
+  resize: none;
+  font-size: 14px;
+  direction: rtl;
+}
+
+.send-comment-btn {
+  background: #4caf50;
+  color: white;
+  border: none;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.send-comment-btn:hover {
+  background: #45a049;
+}
+
+.comments-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  direction: rtl;
+}
+
+.comment-item {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 12px;
+  align-items: flex-start;
+  padding: 0 8px;
+}
+
+.comment-user-avatar {
+  width: 45px;
+  height: 45px;
+  flex-shrink: 0;
+  margin-left: 8px;
+}
+
+.comment-user-avatar img {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.comment-bubble {
+  background: #f0f2f5;
+  border-radius: 18px;
+  padding: 8px 12px;
+  flex-grow: 1;
+}
+
+.comment-header {
+  margin-bottom: 4px;
+}
+
+.comment-username {
+  font-weight: 600;
+  color: #050505;
+  font-size: 13px;
+}
+
+.comment-content {
+  color: #050505;
+  font-size: 14px;
+  line-height: 1.4;
+  word-wrap: break-word;
+}
+
+.comment-time {
+  font-size: 11px;
+  color: #65676b;
+  margin-top: 4px;
+}
+
+.nested-comments {
+  margin-left: 20px;
+}
+
+.reply-input-container {
+  margin-top: 10px;
+}
+
+.reply-text {
+  width: 100%;
+  padding: 12px;
+  border: 1px solid #ddd;
+  border-radius: 20px;
+  resize: none;
+  font-size: 14px;
+  direction: rtl;
+}
+
+.send-reply-btn {
+  margin-top: 5px;
+  color: white;
+  background-color: blue;
+  border: none;
+  padding: 5px 10px;
+  cursor: pointer;
+}
+
+/* Reply Modal Styles */
+.reply-overlay {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 2001;
+}
+
+.reply-fixed-container {
+  display: none;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 30%;
+  background: white;
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+  z-index: 2002;
+  transform: translateY(100%);
+  transition: transform 0.3s ease-out;
+}
+
+.reply-fixed-container.active {
+  transform: translateY(0);
+}
+
+.reply-content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.reply-header {
+  padding: 16px;
+  border-bottom: 1px solid #ddd;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.reply-header h3 {
+  margin: 0;
+  text-align: center;
+  flex-grow: 1;
+}
+
+.close-reply {
+  font-size: 24px;
+  cursor: pointer;
+  color: #666;
+  padding: 8px;
+}
+
+.reply-input-container {
+  padding: 12px;
+  border-top: 1px solid #ddd;
+  background: white;
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+}
+
+.reply-input {
+  flex: 1;
+  padding: 12px;
+  border: 1px solid #ddd;
+  border-radius: 20px;
+  resize: none;
+  font-size: 14px;
+  direction: rtl;
+}
+
+.send-reply-btn {
+  background: #4caf50;
+  color: white;
+  border: none;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+
+}
+.reply-btn{
+  color: blue;
+    cursor: pointer;
+    margin-right: 82%;
+    transform: translate(0%, -18px);
+}
+
+.send-reply-btn:hover {
+  background: #45a049;
+}
+
+
+/* أنماط زر التعديل */
+
+
+.edit-btn {
+    background: #4CAF50;
+    color: white;
+    border: none;
+    padding: 8px 16px;
+    border-radius: 20px;
+    cursor: pointer;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin: 20px auto 0;
+}
+
+.edit-btn:hover {
+    background: #45a049;
+}
+
+/* Profile Photo Upload Styles */
+.profile-photo-upload {
+    display: flex;
+    gap: 10px;
+    justify-content: center;
+    margin-bottom: 20px;
+}
+
+.avatar-input {
+    display: none;
+}
+
+.upload-btn {
+    background: #4CAF50;
+    color: white;
+    padding: 8px 16px;
+    border-radius: 20px;
+    cursor: pointer;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.upload-btn:hover {
+    background: #45a049;
+}
+
+.remove-photo-btn {
+    background: #f44336;
+    color: white;
+    padding: 8px 16px;
+    border-radius: 20px;
+    border: none;
+    cursor: pointer;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.remove-photo-btn:hover {
+    background: #d32f2f;
+}
+
+/* أنماط نموذج التعديل */
+.edit-form {
+    background: white;
+    padding: 20px;
+    border-radius: 8px;
+    margin: 20px 0;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+}
+
+.edit-form h2 {
+    text-align: center;
+    margin-bottom: 20px;
+    color: #1a1a1a;
+}
+
+.form-group {
+    margin-bottom: 15px;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 5px;
+    color: #1a1a1a;
+}
+
+.form-group input,
+.form-group select {
+    width: 100%;
+    padding: 8px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 14px;
+}
+
+.skill-input {
+    display: flex;
+    gap: 8px;
+    margin-bottom: 8px;
+}
+
+.add-skill,
+.remove-skill {
+    background: #4CAF50;
+    color: white;
+    border: none;
+    width: 30px;
+    height: 30px;
+    border-radius: 15px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+}
+
+.remove-skill {
+    background: #f44336;
+}
+
+.form-actions {
+    display: flex;
+    gap: 10px;
+    justify-content: flex-end;
+    margin-top: 20px;
+}
+
+.save-btn,
+.cancel-btn {
+    padding: 8px 16px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 14px;
+}
+
+.save-btn {
+    background: #4CAF50;
+    color: white;
+}
+
+.cancel-btn {
+    background: #f44336;
+    color: white;
+}
+
+/* أنماط الصفحة الرئيسية */
+.back-btn {
+    position: fixed;
+    top: 20px;
+    left: 20px;
+    background: #fff;
+    color: #4CAF50;
+    border: none;
+    padding: 8px 16px;
+    border-radius: 20px;
+    cursor: pointer;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    z-index: 100;
+    text-decoration: none;
+}
+
+.back-btn:hover {
+    background-color: #f0f2f5;
+}
+
+.profile-container {
+    max-width: 600px;
+    margin: 0 auto;
+    /* padding: 0 15px; */
+}
+
+.profile-header {
+    background: #fff;
+    border-radius: 0 0 8px 8px;
+    margin-bottom: 20px;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+    overflow: hidden;
+    /* margin-top: 20px; */
+}
+
+.cover-photo {
+    height: 150px;
+    background-color: #4CAF50;
+    position: relative;
+}
+
+.profile-info {
+    padding: 0 20px 20px;
+    text-align: center;
+    position: relative;
+}
+
+.profile-photo {
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    border: 4px solid #fff;
+    margin: -60px auto 10px;
+    overflow: hidden;
+    position: relative;
+    background: #fff;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.profile-photo img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.profile-name {
+    font-size: 24px;
+    margin: 10px 0;
+    color: #1a1a1a;
+}
+
+.profile-details {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin: 15px 0;
+}
+
+.detail-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    color: #65676b;
+}
+
+.detail-item i {
+    color: #4CAF50;
+}
+
+.skills-section {
+    margin-top: 20px;
+    padding-top: 20px;
+    border-top: 1px solid #e4e6eb;
+}
+
+.skills-section h3 {
+    color: #1a1a1a;
+    margin-bottom: 15px;
+}
+
+.skills-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    justify-content: center;
+}
+
+.skill-tag {
+    background: #e4e6eb;
+    padding: 6px 12px;
+    border-radius: 16px;
+    font-size: 14px;
+    color: #050505;
+}
+
+/* أنماط المنشورات */
+.posts-section {
+    margin-top: 20px;
+}
+
+.posts-section h2 {
+    color: #1a1a1a;
+    margin-bottom: 15px;
+    text-align: center;
+}
+
+.posts-container {
+    margin-top: 20px;
+}
+
+.post-card {
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+    margin-bottom: 20px;
+}
+
+.post-header {
+    display: flex;
+    align-items: center;
+    padding: 12px;
+}
+
+.post-content {
+    padding: 12px;
+}
+
+.post-title {
+    margin: 0 0 8px 0;
+    font-size: 18px;
+    text-align: right;
+}
+
+.post-content-box {
+    border-radius: 8px;
+    padding: 12px;
+    margin-bottom: 10px;
+}
+
+.post-text {
+    margin: 0;
+    color: #1a1a1a;
+    line-height: 1.6;
+    text-align: right;
+    word-wrap: break-word;
+    position: relative;
+    direction: rtl;
+    font-size: 16px;
+}
+
+.post-text p {
+    margin: 0;
+    padding: 4px 0;
+    line-height: 1.6;
+}
+
+.post-text.collapsed {
+    display: -webkit-box;
+    -webkit-line-clamp: 4;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.post-text.expanded {
+    display: block;
+}
+
+.post-text.expanded p {
+    white-space: pre-wrap;
+    padding: 2px 0;
+}
+
+.post-text p:first-child {
+    padding-top: 0;
+}
+
+.post-text p:last-child {
+    padding-bottom: 0;
+}
+
+.post-text p:empty {
+    min-height: 1em;
+    display: block;
+}
+
+.see-more-btn {
+    color: #1877f2;
+    cursor: pointer;
+    font-weight: 500;
+    margin-top: 8px;
+    display: none;
+    background: none;
+    border: none;
+    padding: 0;
+    text-align: right;
+    width: 100%;
+}
+
+.post-text-container {
+    position: relative;
+}
+
+.post-media {
+    margin-top: 10px;
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.post-media img {
+        width: 400px;
+        height: 400px;
+        display: block;
+        object-fit: cover;
+        margin: 0 auto;
+}
+
+.video-container {
+    position: relative;
+    padding-bottom: 56.25%;
+    height: 0;
+    overflow: hidden;
+}
+
+.video-container video {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.post-actions {
+    display: flex;
+    justify-content: space-around;
+    padding: 8px;
+    border-top: 1px solid #ddd;
+}
+
+.action-btn {
+    background: none;
+    border: none;
+    padding: 8px;
+    color: #65676b;
+    cursor: pointer;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+.action-btn:hover {
+    background: #f0f2f5;
+    border-radius: 4px;
+}
+
+.action-btn i {
+    font-size: 16px;
+}
+
+.user-info {
+    display: flex;
+    flex-direction: column;
+    margin-right: 10px;
+}
+
+.timestamp {
+    font-size: 12px;
+    color: #65676b;
+    margin-top: 2px;
+}
+
+.profession {
+    font-size: 12px;
+    color: #4CAF50;
+    margin-top: 2px;
+}
+
+.profile-circle {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  overflow: hidden;
+}
+
+.profile-circle img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* Post Menu Styles */
+.post-menu {
+    position: relative;
+    margin-right: auto;
+    padding: 8px;
+}
+
+.menu-dots {
+    cursor: pointer;
+    color: #65676b;
+    padding: 8px;
+    border-radius: 50%;
+}
+
+.menu-dots:hover {
+    background-color: #f0f2f5;
+}
+
+.menu-options {
+    display: none;
+    position: absolute;
+    left: 0;
+    top: 100%;
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    z-index: 1000;
+    min-width: 150px;
+}
+
+.menu-option {
+    padding: 8px 16px;
+    cursor: pointer;
+    color: #050505;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.menu-option:hover {
+    background-color: #f0f2f5;
+}
+
+.menu-option i {
+    font-size: 16px;
+    width: 20px;
+}
+
+.delete-post {
+    color: #dc3545;
+}
+
+/* Edit Title Modal */
+.edit-modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.5);
+    z-index: 2000;
+}
+
+.edit-modal-content {
+    position: relative;
+    background: white;
+    padding: 20px;
+    border-radius: 8px;
+    width: 90%;
+    max-width: 500px;
+    margin: 50px auto;
+}
+
+.edit-modal textarea {
+    width: 100%;
+    padding: 12px;
+    margin: 10px 0;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 16px;
+    resize: vertical;
+    min-height: 120px;
+    text-align: right;
+    direction: rtl;
+    white-space: pre-wrap;
+    line-height: 1.6;
+}
+
+.edit-modal-buttons {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    margin-top: 20px;
+}
+
+.edit-modal-buttons button {
+    padding: 8px 16px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.edit-modal-buttons .save-btn {
+    background-color: #4CAF50;
+    color: white;
+}
+
+.edit-modal-buttons .cancel-btn {
+    background-color: #f0f2f5;
+    color: #050505;
+}
+
+/* Delete Confirmation Modal */
+.delete-modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.5);
+    z-index: 2000;
+}
+
+.delete-modal-content {
+    position: relative;
+    background: white;
+    padding: 20px;
+    border-radius: 8px;
+    width: 90%;
+    max-width: 500px;
+    margin: 50px auto;
+    text-align: center;
+}
+
+.delete-modal-buttons {
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+    margin-top: 20px;
+}
+
+.delete-modal-buttons button {
+    padding: 8px 16px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.delete-modal-buttons .confirm-delete {
+    background-color: #dc3545;
+    color: white;
+}
+
+.delete-modal-buttons .cancel-delete {
+    background-color: #f0f2f5;
+    color: #050505;
+}
+
+
+.replies-toggle {
+    margin-top: 5px;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+}
+
+.replies-toggle i {
+    margin-right: 5px;
+}
+
+.nested-comments {
+    margin-left: 20px;
+    border-left: 1px solid #ddd;
+    padding-left: 10px;
+}
+
+
+.filter-buttons {
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+    margin-bottom: 20px;
+}
+
+.filter-btn {
+    padding: 8px 16px;
+    border: none;
+    border-radius: 20px;
+    background-color: #f0f2f5;
+    color: #1a1a1a;
+    cursor: pointer;
+    font-size: 14px;
+}
+
+.filter-btn.active {
+    background-color: #4CAF50;
+    color: white;
+}
+
+</style>
+
+<!-- Edit Post Modal -->
+<div class="edit-modal" id="editModal">
+    <div class="edit-modal-content">
+        <h3>تعديل المنشور</h3>
+        <textarea id="editContentInput" placeholder="أدخل محتوى المنشور" rows="5"></textarea>
+        <div class="edit-modal-buttons">
+            <button class="save-btn" id="saveEditBtn">حفظ</button>
+            <button class="cancel-btn" id="cancelEditBtn">إلغاء</button>
+        </div>
+    </div>
+</div>
+
+<!-- Delete Confirmation Modal -->
+<div class="delete-modal" id="deleteModal">
+    <div class="delete-modal-content">
+        <h3>تأكيد الحذف</h3>
+        <p>هل أنت متأكد من حذف هذا المنشور؟</p>
+        <div class="delete-modal-buttons">
+            <button class="confirm-delete" id="confirmDeleteBtn">حذف</button>
+            <button class="cancel-delete" id="cancelDeleteBtn">إلغاء</button>
+        </div>
+    </div>
+</div>
+
+
+
+
+
+{% endblock %}
+
+{% block scripts %}
+<script>
+// Comments Functionality
+// Comments Functionality
+$(document).ready(function () {
+  const commentsContainer = $("#commentsFixedContainer");
+  const commentsOverlay = $("#commentsOverlay");
+  const closeComments = $(".close-comments");
+  let currentPostId = null;
+
+  // Reply Modal Elements
+  const replyContainer = $("#replyFixedContainer");
+  const replyOverlay = $("#replyOverlay");
+  const closeReply = $(".close-reply");
+  let currentCommentId = null;
+
+  // تحميل التعليقات عند النقر على زر التعليق
+  $(".comment-btn").click(function () {
+    const postId = $(this).data("post-id");
+    currentPostId = postId;
+
+    // تحميل التعليقات
+    loadComments(postId);
+
+    // عرض الخلفية والحاوية
+    commentsOverlay.css("display", "block");
+    commentsContainer.css("display", "block");
+    document.body.style.overflow = "hidden"; // منع السكرول في الصفحة الرئيسية
+    setTimeout(() => {
+      commentsContainer.addClass("active");
+    }, 10);
+  });
+
+  // إغلاق التعليقات عند النقر خارج الحاوية
+  commentsOverlay.click(function () {
+    closeCommentsContainer();
+  });
+
+  // إغلاق حاوية التعليقات
+  closeComments.click(function () {
+    closeCommentsContainer();
+  });
+
+  // دالة إغلاق حاوية التعليقات
+  function closeCommentsContainer() {
+    commentsContainer.removeClass("active");
+    document.body.style.overflow = "auto"; // إعادة تفعيل السكرول في الصفحة الرئيسية
+    setTimeout(() => {
+      commentsContainer.css("display", "none");
+      commentsOverlay.css("display", "none");
+    }, 300);
+  }
+
+  // إرسال التعليق
+  $(".send-comment-btn").click(function () {
+    const input = commentsContainer.find(".comment-input");
+    const content = input.val().trim();
+
+    if (content && currentPostId) {
+      $.ajax({
+        url: "/add_comment",
+        method: "POST",
+        data: {
+          post_id: currentPostId,
+          content: content,
+          parent_id: null, // Root comment
+        },
+        success: function (response) {
+          if (response.success) {
+            input.val("");
+            loadComments(currentPostId);
+          }
+        },
+      });
+    }
+  });
+
+  // تحميل التعليقات
+  function loadComments(postId) {
+    $.get(`/get_comments/${postId}`, function (comments) {
+      const commentsList = commentsContainer.find(".comments-list");
+      commentsList.empty();
+
+      comments.forEach(function (comment) {
+        const commentHtml = generateCommentHtml(comment);
+        commentsList.append(commentHtml);
+      });
+    });
+  }
+
+  // دالة لتوليد HTML للتعليقات والردود
+  function generateCommentHtml(comment) {
+    const hasReplies = comment.replies && comment.replies.length > 0;
+    const repliesCount = hasReplies
+      ? `${comment.replies.length} رداً`
+      : "";
+
+    const repliesHtml = hasReplies
+      ? comment.replies
+          .map((reply) => generateReplyHtml(reply))
+          .join("")
+      : "";
+
+    return `
+      <div class="comment-item">
+          <div class="comment-user-avatar">
+              <img src="/static/${
+                comment.profile_photo
+              }" alt="${comment.username}">
+          </div>
+          <div class="comment-bubble">
+              <div class="comment-header">
+                  <span class="comment-username">${comment.username}</span>
+              </div>
+              <div class="comment-content">${comment.content}</div>
+              <div class="comment-time">${comment.created_at}</div>
+
+              <!-- عرض زر الردود المخفية إذا كان هناك ردود -->
+              ${
+                hasReplies
+                  ? `
+                  <div class="replies-toggle" data-comment-id="${comment.id}">
+                      <span class="replies-toggle-text" style="color: blue; cursor: pointer;">
+                          <i class="fas fa-chevron-down"></i> ${repliesCount}
+                      </span>
+                  </div>
+              `
+                  : ""
+              }
+
+              <!-- زر الرد -->
+              <button class="reply-btn" data-comment-id="${
+                comment.id
+              }" style="color: blue; cursor: pointer;">رد</button>
+
+              <!-- عرض الردود أسفل التعليق الرئيسي -->
+              <div class="replies-container" style="display: ${
+                hasReplies ? "block" : "none"
+              };">
+                  ${repliesHtml}
+              </div>
+          </div>
+      </div>
+  `;
+  }
+
+  // دالة لتوليد HTML للردود
+  function generateReplyHtml(reply) {
+    return `
+      <div class="comment-item nested-comment">
+          <div class="comment-user-avatar">
+              <img src="/static/${
+                reply.profile_photo
+              }" alt="${reply.username}">
+          </div>
+          <div class="comment-bubble">
+              <div class="comment-header">
+                  <span class="comment-username">${reply.username}</span>
+              </div>
+              <div class="comment-content">${reply.content}</div>
+              <div class="comment-time">${reply.created_at}</div>
+          </div>
+      </div>
+    `;
+  }
+
+  // إظهار حقل الرد عند النقر على زر الرد
+  $(document).on("click", ".reply-btn", function () {
+    currentCommentId = $(this).data("comment-id");
+    replyOverlay.css("display", "block");
+    replyContainer.css("display", "block");
+    setTimeout(() => {
+      replyContainer.addClass("active");
+    }, 10);
+  });
+
+  // إغلاق الرد عند النقر خارج الحاوية
+  replyOverlay.click(function () {
+    closeReplyContainer();
+  });
+
+  // إغلاق حاوية الرد
+  closeReply.click(function () {
+    closeReplyContainer();
+  });
+
+  // دالة إغلاق حاوية الرد
+  function closeReplyContainer() {
+    replyContainer.removeClass("active");
+    setTimeout(() => {
+      replyContainer.css("display", "none");
+      replyOverlay.css("display", "none");
+    }, 300);
+  }
+
+  // إرسال الرد على تعليق
+  $(".send-reply-btn").click(function () {
+    const input = replyContainer.find(".reply-input");
+    const content = input.val().trim();
+
+    if (content && currentPostId && currentCommentId) {
+      $.ajax({
+        url: "/add_comment",
+        method: "POST",
+        data: {
+          post_id: currentPostId,
+          content: content,
+          parent_id: currentCommentId, // Associate reply with parent
+        },
+        success: function (response) {
+          if (response.success) {
+            input.val("");
+            closeReplyContainer();
+            loadComments(currentPostId);
+          }
+        },
+      });
+    }
+  });
+
+  // إظهار أو إخفاء الردود عند النقر على زر "12 رداً" أو ما يعادله
+  $(document).on("click", ".replies-toggle-text", function () {
+    const toggle = $(this).closest(".replies-toggle");
+    const repliesContainer = toggle.siblings(".replies-container");
+    const icon = toggle.find("i");
+
+    if (repliesContainer.is(":visible")) {
+      repliesContainer.slideUp();
+      icon.removeClass("fa-chevron-up").addClass("fa-chevron-down");
+    } else {
+      repliesContainer.slideDown();
+      icon.removeClass("fa-chevron-down").addClass("fa-chevron-up");
+    }
+  });
+});
+
+
+
+</script>
+
+<script>
+$(document).ready(function() {
+    // تبديل عرض نموذج التعديل
+    $('#editProfileBtn').click(function() {
+        $('#editProfileForm').slideDown();
+    });
+
+    $('#cancelEdit').click(function() {
+        $('#editProfileForm').slideUp();
+    });
+
+    // إدارة المهارات
+    $('.add-skill').click(function() {
+        const skillValue = $(this).siblings('.skill-field').val();
+        if (skillValue.trim() !== "") {
+            const skillInput = `
+                <div class="skill-input">
+                    <input type="text" name="skill" class="skill-field" value="${skillValue}">
+                    <button type="button" class="remove-skill">-</button>
+                </div>
+            `;
+            $(this).parent().before(skillInput);
+            $(this).siblings('.skill-field').val("");
+        }
+    });
+
+    $(document).on('click', '.remove-skill', function() {
+        $(this).parent().remove();
+    });
+
+    // تقديم النموذج
+    $('#profileForm').on('submit', function(e) {
+        const skills = [];
+        $('.skill-field').each(function() {
+            const skill = $(this).val().trim();
+            if (skill) {
+                skills.push(skill);
+            }
+        });
+        $('#skills').val(JSON.stringify(skills));
+    });
+
+    // التحقق من اسم المستخدم
+    $('#username').on('input', function() {
+        const username = $(this).val();
+        if (username && username !== '{{ current_user.username }}') {
+            $.get('/validate-username', { username: username }, function(data) {
+                if (data.exists) {
+                    $('#username-validation-message').text('اسم المستخدم مستخدم بالفعل').addClass('error').removeClass('success');
+                } else {
+                    $('#username-validation-message').text('اسم المستخدم متاح').addClass('success').removeClass('error');
+                }
+            });
+        } else {
+            $('#username-validation-message').text('');
+        }
+    });
+
+    // تفعيل قائمة النقاط الثلاث
+    $('.menu-dots').click(function(e) {
+        e.stopPropagation();
+        const menuOptions = $(this).siblings('.menu-options');
+        $('.menu-options').not(menuOptions).hide();
+        menuOptions.toggle();
+    });
+
+    // إغلاق القائمة عند النقر في أي مكان آخر
+    $(document).click(function() {
+        $('.menu-options').hide();
+    });
+
+    // منع إغلاق القائمة عند النقر داخلها
+    $('.menu-options').click(function(e) {
+        e.stopPropagation();
+    });
+
+    let currentPostId = null;
+
+    // تفعيل زر تعديل المنشور
+    $('.edit-post').click(function() {
+        currentPostId = $(this).data('post-id');
+        const $text = $(this).closest('.post-card').find('.post-text');
+        const paragraphs = [];
+        $text.find('p').each(function() {
+            const content = $(this).text();
+            if (content === '\u00A0') { // &nbsp;
+                paragraphs.push('');
+            } else {
+                paragraphs.push(content);
+            }
+        });
+        $('#editContentInput').val(paragraphs.join('\n'));
+        $('#editModal').show();
+    });
+
+    // إغلاق نافذة التعديل
+    $('#cancelEditBtn').click(function() {
+        $('#editModal').hide();
+    });
+
+    // حفظ التعديل
+    $('#saveEditBtn').click(function() {
+        const newContent = $('#editContentInput').val();
+        if (currentPostId && newContent.trim()) {
+            $.ajax({
+                url: '/edit_post_content',
+                method: 'POST',
+                data: {
+                    post_id: currentPostId,
+                    new_content: newContent
+                },
+                success: function(response) {
+                    if (response.success) {
+                        location.reload();
+                    }
+                }
+            });
+        }
+        $('#editModal').hide();
+    });
+
+    // تفعيل زر حذف المنشور
+    $('.delete-post').click(function() {
+        currentPostId = $(this).data('post-id');
+        $('#deleteModal').show();
+    });
+
+    // إغلاق نافذة تأكيد الحذف
+    $('#cancelDeleteBtn').click(function() {
+        $('#deleteModal').hide();
+    });
+
+    // تأكيد الحذف
+    $('#confirmDeleteBtn').click(function() {
+        if (currentPostId) {
+            $.ajax({
+                url: '/delete_post',
+                method: 'POST',
+                data: {
+                    post_id: currentPostId
+                },
+                success: function(response) {
+                    if (response.success) {
+                        location.reload();
+                    }
+                }
+            });
+        }
+        $('#deleteModal').hide();
+    });
+
+    // تفعيل زر إظهار المزيد
+    $('.post-text').each(function() {
+        const $text = $(this);
+        const $btn = $text.closest('.post-content-box').find('.see-more-btn');
+        
+        // Get the original content
+        const content = $text.html();
+        
+        // Calculate line height and text height
+        const lineHeight = parseInt(window.getComputedStyle($text[0]).lineHeight);
+        const textHeight = $text[0].scrollHeight;
+        const numLines = Math.floor(textHeight / lineHeight);
+        
+        // Show button only if text has more than 4 lines
+        if (numLines > 4) {
+            $btn.show();
+            $text.addClass('has-more');
+        }
+    });
+
+    $('.see-more-btn').click(function() {
+        const $btn = $(this);
+        const $text = $btn.closest('.post-content-box').find('.post-text');
+        
+        if ($text.hasClass('collapsed')) {
+            $text.removeClass('collapsed').addClass('expanded');
+            $btn.text('إظهار أقل');
+        } else {
+            $text.removeClass('expanded').addClass('collapsed');
+            $btn.text('إظهار المزيد');
+        }
+    });
+
+    // Profile Photo Upload Functionality
+    $('#avatar').change(function(e) {
+        if (this.files && this.files[0]) {
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                $('.profile-photo img').attr('src', e.target.result);
+            }
+            reader.readAsDataURL(this.files[0]);
+        }
+    });
+
+    // Remove Photo Functionality
+    $('#removePhotoBtn').click(function() {
+        $('.profile-photo img').attr('src', "{{ url_for('static', filename='uploads/default-avatar.jpg') }}");
+        $('#avatar').val('');
+        // Add a hidden input to signal photo removal
+        if (!$('#remove_photo').length) {
+            $('<input>').attr({
+                type: 'hidden',
+                id: 'remove_photo',
+                name: 'remove_photo',
+                value: 'true'
+            }).appendTo('#profileForm');
+        }
+    });
+});
+
+
+
+
+document.addEventListener("DOMContentLoaded", function () {
+  document.querySelectorAll(".share-btn").forEach(function (button) {
+    button.addEventListener("click", function () {
+      const postId = this.dataset.postId;
+      const shareUrl = `${window.location.origin}/post/${postId}`;
+
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(shareUrl).then(function () {
+          showPopup("تم نسخ الرابط");
+        }).catch(function (err) {
+          console.error("فشل نسخ الرابط: ", err);
+        });
+      } else {
+        const tempInput = document.createElement("input");
+        tempInput.value = shareUrl;
+        document.body.appendChild(tempInput);
+        tempInput.select();
+        try {
+          document.execCommand("copy");
+          showPopup("تم نسخ الرابط ");
+        } catch (err) {
+          console.error("فشل نسخ الرابط باستخدام الطريقة البديلة: ", err);
+        }
+        document.body.removeChild(tempInput);
+      }
+
+      function showPopup(message) {
+        const modal = document.createElement("div");
+        modal.style.position = "fixed";
+        modal.style.bottom = "20%";
+        modal.style.left = "50%";
+        modal.style.transform = "translateX(-50%)";
+        modal.style.backgroundColor = "#333";
+        modal.style.color = "#fff";
+        modal.style.padding = "15px 20px";
+        modal.style.borderRadius = "8px";
+        modal.style.boxShadow = "0 4px 6px rgba(0, 0, 0, 0.1)";
+        modal.style.opacity = "0";
+        modal.style.transition = "opacity 0.4s ease, bottom 0.4s ease";
+        modal.style.zIndex = "1000";
+        modal.textContent = message;
+
+        document.body.appendChild(modal);
+
+        setTimeout(() => {
+          modal.style.opacity = "1";
+          modal.style.bottom = "25%";
+        }, 10);
+
+        setTimeout(() => {
+          modal.style.opacity = "0";
+          modal.style.bottom = "20%";
+          setTimeout(() => {
+            modal.remove();
+          }, 400);
+        }, 3000);
+      }
+    });
+  });
+});
+
+
+
+$(document).ready(function () {
+    // تفعيل الفلترات
+    $('.filter-btn').click(function () {
+        // إزالة النشط من جميع الأزرار
+        $('.filter-btn').removeClass('active');
+        // إضافة النشط للزر المحدد
+        $(this).addClass('active');
+
+        const filterType = $(this).attr('id'); // الحصول على نوع الفلتر
+        let hasPosts = false; // متغير لتتبع وجود منشورات مطابقة
+
+        // إخفاء جميع المنشورات
+        $('.post-card').hide();
+
+        if (filterType === 'filterAll') {
+            // عرض جميع المنشورات
+            $('.post-card').show();
+            hasPosts = $('.post-card').length > 0; // تحقق إذا كان هناك منشورات
+        } else if (filterType === 'filterImages') {
+            // عرض المنشورات التي تحتوي على صور فقط
+            $('.post-card').each(function () {
+                if ($(this).find('.post-media img').length > 0) {
+                    $(this).show();
+                    hasPosts = true; // يوجد منشورات مطابقة
+                }
+            });
+        } else if (filterType === 'filterVideos') {
+            // عرض المنشورات التي تحتوي على فيديوهات فقط
+            $('.post-card').each(function () {
+                if ($(this).find('.post-media video').length > 0) {
+                    $(this).show();
+                    hasPosts = true; // يوجد منشورات مطابقة
+                }
+            });
+        } else if (filterType === 'filterText') {
+            // عرض المنشورات التي تحتوي على نص فقط
+            $('.post-card').each(function () {
+                if ($(this).find('.post-text').length > 0 && $(this).find('.post-media').length === 0) {
+                    $(this).show();
+                    hasPosts = true; // يوجد منشورات مطابقة
+                }
+            });
+        }
+
+        // إظهار أو إخفاء الرسالة بناءً على وجود منشورات مطابقة
+        if (hasPosts) {
+            $('#noPostsMessage').hide(); // إخفاء الرسالة إذا كانت هناك منشورات
+        } else {
+            $('#noPostsMessage').show(); // إظهار الرسالة إذا لم تكن هناك منشورات
+        }
+    });
+});
+
+// فكرة بحيث يظهر مشاركة عبر 
+
+
+
+
+</script>
+{% endblock %}

templates/public_profile.html

@@ -0,0 +1,1984 @@
+{% extends "base.html" %}
+
+{% block title %}{{ user.username }} - الملف الشخصي{% endblock %}
+
+{% block content %}
+<div class="profile-container">
+    <!-- قسم معلومات الملف الشخصي -->
+    <div class="profile-header">
+        <div class="cover-photo"></div>
+        <div class="profile-info">
+            <div class="profile-photo">
+                <img src="{{ url_for('static', filename=user.profile_photo) }}" alt="الصورة الشخصية">
+            </div>
+            <h1 class="profile-name">{{ user.username }}</h1>
+            <div class="profile-details">
+                <div class="detail-item">
+                    <i class="fas fa-envelope"></i>
+                    <span>{{ user.email }}</span>
+                </div>
+                <div class="detail-item">
+                    <i class="fas fa-briefcase"></i>
+                    <span>{{ user.profession }}</span>
+                </div>
+            </div>
+            <div class="skills-section">
+                <h3>المهارات</h3>
+                <div class="skills-list">
+                    {% for skill in user.skills|from_json %}
+                    <span class="skill-tag">{{ skill }}</span>
+                    {% endfor %}
+                </div>
+            </div>
+            <!-- <button id="editProfileBtn" class="edit-btn">
+                <i class="fas fa-edit"></i>
+                تعديل الملف الشخصي
+            </button> -->
+        </div>
+    </div>
+
+</button>
+<!-- زر المراسلة -->
+<a href="#" class="message-btn" onclick="openMessage()">
+    <i class="fas fa-envelope"></i>
+    مراسلة
+</a>
+
+<!-- الحاوية الأساسية للرسالة (بدون iframe مسبقًا) -->
+<div id="message-container" class="show" style="display: none;">
+    <div id="message-header">
+        <!-- <button id="close-btn">×</button> -->
+    </div>
+    <!-- سيتم إضافة iframe هنا ديناميكيًا -->
+</div>
+
+    <div class="filter-buttons">
+        <button id="filterAll" class="filter-btn active">الكل</button>
+        <button id="filterImages" class="filter-btn">الصور</button>
+        <button id="filterVideos" class="filter-btn">الفيديوهات</button>
+        <button id="filterText" class="filter-btn">النص</button>
+    </div>
+
+    <div id="noPostsMessage" style="display: none; text-align: center; margin-top: 20px; color: #666;">
+        لا توجد منشورات تطابق الفلتر المحدد.
+    </div>
+
+    <!-- نموذج تعديل الملف الشخصي -->
+    <div id="editProfileForm" class="edit-form" style="display: none;">
+        <h2>تعديل الملف الشخصي</h2>
+        <form id="profileForm" method="POST" action="{{ url_for('update_profile') }}" enctype="multipart/form-data">
+            <div class="form-group">
+                <label>الصورة الشخصية</label>
+                <div class="profile-photo-upload">
+                    <input type="file" id="avatar" name="avatar" accept="image/*" class="avatar-input">
+                    <label for="avatar" class="upload-btn">
+                        <i class="fas fa-camera"></i>
+                        تغيير الصورة
+                    </label>
+                    <button type="button" class="remove-photo-btn" id="removePhotoBtn">
+                        <i class="fas fa-times"></i>
+                        إزالة الصورة
+                    </button>
+                </div>
+            </div>
+            <div class="form-group">
+                <label for="username">اسم المستخدم</label>
+                <input type="text" id="username" name="username" value="{{ user.username }}" required>
+                <small class="form-text">@moltka.eg</small>
+                <span id="username-validation-message"></span>
+            </div>
+
+            <div class="form-group">
+                <label for="profession">المجال المهني</label>
+                <select id="profession" name="profession" required>
+                    <option value="">اختر المجال المهني</option>
+                    <option value="مطور ويب" {% if user.profession == "مطور ويب" %}selected{% endif %}>مطور ويب</option>
+                    <option value="مطور واجهة خلفية" {% if user.profession == "مطور واجهة خلفية" %}selected{% endif %}>مطور واجهة خلفية</option>
+                    <option value="برمجة" {% if user.profession == "برمجة" %}selected{% endif %}>برمجة</option>
+                    <option value="مطور ألعاب" {% if user.profession == "مطور ألعاب" %}selected{% endif %}>مطور ألعاب</option>
+                    <option value="مطور أندرويد" {% if user.profession == "مطور أندرويد" %}selected{% endif %}>مطور أندرويد</option>
+                    <option value="مطور iOS" {% if user.profession == "مطور iOS" %}selected{% endif %}>مطور iOS</option>
+                    <option value="مهندس" {% if user.profession == "مهندس" %}selected{% endif %}>مهندس</option>
+                    <option value="طبيب" {% if user.profession == "طبيب" %}selected{% endif %}>طبيب</option>
+                    <option value="علوم اجتماعية" {% if user.profession == "علوم اجتماعية" %}selected{% endif %}>علوم اجتماعية</option>
+                    <option value="معلم" {% if user.profession == "معلم" %}selected{% endif %}>معلم</option>
+                    <option value="محاسب" {% if user.profession == "محاسب" %}selected{% endif %}>محاسب</option>
+                    <option value="صحفي" {% if user.profession == "صحفي" %}selected{% endif %}>صحفي</option>
+                    <option value="محامي" {% if user.profession == "محامي" %}selected{% endif %}>محامي</option>
+                    <option value="مصمم جرافيكي" {% if user.profession == "مصمم جرافيكي" %}selected{% endif %}>مصمم جرافيكي</option>
+                    <option value="مصور" {% if user.profession == "مصور" %}selected{% endif %}>مصور</option>
+                    <option value="كاتب" {% if user.profession == "كاتب" %}selected{% endif %}>كاتب</option>
+                    <option value="مدرب رياضي" {% if user.profession == "مدرب رياضي" %}selected{% endif %}>مدرب رياضي</option>
+                    <option value="طاهي" {% if user.profession == "طاهي" %}selected{% endif %}>طاهي</option>
+                    <option value="ديني" {% if user.profession == "ديني" %}selected{% endif %}>ديني</option>
+                    <option value="شاعر" {% if user.profession == "شاعر" %}selected{% endif %}>شاعر</option>
+                    <option value="رسام" {% if user.profession == "رسام" %}selected{% endif %}>رسام</option>
+                    <option value="محلل مالي" {% if user.profession == "محلل مالي" %}selected{% endif %}>محلل مالي</option>
+                    <option value="فني صيانة" {% if user.profession == "فني صيانة" %}selected{% endif %}>فني صيانة</option>
+                    <option value="باحث" {% if user.profession == "باحث" %}selected{% endif %}>باحث</option>
+                    <option value="IT" {% if user.profession == "IT" %}selected{% endif %}>IT</option>
+                </select>
+            </div>
+
+            <div class="form-group">
+                <label>المهارات</label>
+                <div id="skills-container">
+                    {% for skill in user.skills|from_json %}
+                    <div class="skill-input">
+                        <input type="text" name="skill" class="skill-field" value="{{ skill }}">
+                        <button type="button" class="remove-skill">-</button>
+                    </div>
+                    {% endfor %}
+                    <div class="skill-input">
+                        <input type="text" name="skill" class="skill-field">
+                        <button type="button" class="add-skill">+</button>
+                    </div>
+                </div>
+                <input type="hidden" id="skills" name="skills">
+            </div>
+
+            <div class="form-actions">
+                <button type="submit" class="save-btn">حفظ التغييرات</button>
+                <button type="button" class="cancel-btn" id="cancelEdit">إلغاء</button>
+            </div>
+        </form>
+    </div>
+
+       <!-- قسم المنشورات -->
+       <div class="posts-section">
+        <h2>المنشورات</h2>
+        <div class="posts-container">
+            {% for post in posts %}
+            <div class="post-card">
+                <div class="post-header">
+                    <div class="profile-circle">
+                        <img src="{{ url_for('static', filename=user.profile_photo) }}" alt="صورة الملف الشخصي">
+                    </div>
+                    <div class="user-info">
+                        <span class="username">{{ user.username }}</span>
+                        <span class="profession">{{ post.user_profession }}</span>
+                        <span class="timestamp">{{ post.created_at|format_datetime }}</span>
+                    </div>
+                    <div class="post-menu">
+                        <!-- <i class="fas fa-ellipsis-v menu-dots"></i> -->
+                        <div class="menu-options">
+                            <div class="menu-option edit-post" data-post-id="{{ post.id }}">
+                                <i class="fas fa-edit"></i> تعديل المنشور
+                            </div>
+                            <div class="menu-option delete-post" data-post-id="{{ post.id }}">
+                                <i class="fas fa-trash"></i> حذف المنشور
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="post-content" {% if post.background_color and not post.image_url %}style="background-color: {{ post.background_color }}; border-radius: 8px; text-align: center; font-size: 24px;"{% endif %}>
+                    {% if post.title %}
+                    <h3 class="post-title">{{ post.title }}</h3>
+                    {% endif %}
+                    {% if post.content %}
+                    <div class="post-text-container">
+                        <div class="post-content-box">
+                            <div class="post-text collapsed" {% if post.background_color and not post.image_url %}style="color: {% if post.background_color == '#ffffff' %}#1a1a1a{% else %}#000000{% endif %};"{% endif %}>
+                                {% for line in post.content.split('\n') %}
+                                    {% if line.strip() %}
+                                    <p>{{ line }}</p>
+                                    {% else %}
+                                    <p>&nbsp;</p>
+                                    {% endif %}
+                                {% endfor %}
+                            </div>
+                            <button class="see-more-btn" style="display: none;">إظهار المزيد</button>
+                        </div>
+                    </div>
+                    {% endif %}
+                    {% if post.image_url %}
+                    <div class="post-media">
+                        <img src="{{ url_for('static', filename=post.image_url) }}" alt="صورة المنشور">
+                    </div>
+                    {% endif %}
+                    {% if post.video_url %}
+                    <div class="post-media video-container">
+                        <video src="{{ url_for('static', filename=post.video_url) }}" controls></video>
+                    </div>
+                    {% endif %}
+                </div>
+
+                <div class="post-actions">
+                    <button class="action-btn comment-btn" data-post-id="{{ post.id }}">
+                      <i class="fas fa-comment"></i> تعليق
+                    </button>
+                    <button class="action-btn share-btn" data-post-id="{{ post.id }}">
+                      <i class="fas fa-share"></i> مشاركة
+                    </button>
+                  </div>
+            </div>
+            {% endfor %}
+        </div>
+    </div>
+                
+
+
+<!-- Comments Fixed Container -->
+<div class="comments-overlay" id="commentsOverlay"></div>
+<div class="comments-fixed-container" id="commentsFixedContainer">
+  <div class="comments-content">
+    <div class="comments-header">
+      <h3>التعليقات</h3>
+      <span class="close-comments">&times;</span>
+    </div>
+    <div class="comments-list-container">
+      <div class="comments-list"></div>
+    </div>
+    <div class="comment-input-container">
+      <textarea
+        class="comment-input"
+        placeholder="اكتب تعليقك هنا..."
+        rows="1"
+      ></textarea>
+      <button class="send-comment-btn">
+        <i class="fas fa-paper-plane"></i>
+      </button>
+    </div>
+  </div>
+</div>
+
+<div class="reply-overlay" id="replyOverlay"></div>
+<div class="reply-fixed-container" id="replyFixedContainer">
+  <div class="reply-content">
+    <div class="reply-header">
+      <h3>الرد</h3>
+      <span class="close-reply">&times;</span>
+    </div>
+    <div class="reply-input-container">
+      <textarea
+        class="reply-input"
+        placeholder="اكتب ردك هنا..."
+        rows="1"
+      ></textarea>
+      <button class="send-reply-btn">
+        <i class="fas fa-paper-plane"></i>
+      </button>
+    </div>
+  </div>
+</div>
+
+<!-- زر العودة للصفحة الرئيسية -->
+<!-- <a href="{{ url_for('dashboard') }}" class="back-btn">
+    <i class="fas fa-arrow-left"></i>
+    العودة للرئيسية
+</a> -->
+
+<style>
+/* Comments Fixed Container Styles */
+.comments-overlay {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1999;
+}
+
+.comments-fixed-container {
+  display: none;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 80%;
+  background: white;
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+  z-index: 2000;
+  transform: translateY(100%);
+  transition: transform 0.3s ease-out;
+}
+
+.comments-fixed-container.active {
+  transform: translateY(0);
+}
+
+.comments-content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.comments-header {
+  padding: 16px;
+  border-bottom: 1px solid #ddd;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.comments-header h3 {
+  margin: 0;
+  text-align: center;
+  flex-grow: 1;
+}
+
+.close-comments {
+  font-size: 24px;
+  cursor: pointer;
+  color: #666;
+  padding: 8px;
+}
+
+.comments-list-container {
+  flex-grow: 1;
+  overflow-y: auto;
+  padding: 16px;
+}
+
+.comments-container {
+  flex-grow: 1;
+  overflow-y: auto;
+  padding: 16px;
+}
+
+.comment-input-container {
+  padding: 12px;
+  border-top: 1px solid #ddd;
+  background: white;
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+}
+
+.comment-input {
+  flex: 1;
+  padding: 12px;
+  border: 1px solid #ddd;
+  border-radius: 20px;
+  resize: none;
+  font-size: 14px;
+  direction: rtl;
+}
+
+.send-comment-btn {
+  background: #4caf50;
+  color: white;
+  border: none;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.send-comment-btn:hover {
+  background: #45a049;
+}
+
+.comments-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  direction: rtl;
+}
+
+.comment-item {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 12px;
+  align-items: flex-start;
+  padding: 0 8px;
+}
+
+.comment-user-avatar {
+  width: 45px;
+  height: 45px;
+  flex-shrink: 0;
+  margin-left: 8px;
+}
+
+.comment-user-avatar img {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.comment-bubble {
+  background: #f0f2f5;
+  border-radius: 18px;
+  padding: 8px 12px;
+  flex-grow: 1;
+}
+
+.comment-header {
+  margin-bottom: 4px;
+}
+
+.comment-username {
+  font-weight: 600;
+  color: #050505;
+  font-size: 13px;
+}
+
+.comment-content {
+  color: #050505;
+  font-size: 14px;
+  line-height: 1.4;
+  word-wrap: break-word;
+}
+
+.comment-time {
+  font-size: 11px;
+  color: #65676b;
+  margin-top: 4px;
+}
+
+.nested-comments {
+  margin-left: 20px;
+}
+
+.reply-input-container {
+  margin-top: 10px;
+}
+
+.reply-text {
+  width: 100%;
+  padding: 12px;
+  border: 1px solid #ddd;
+  border-radius: 20px;
+  resize: none;
+  font-size: 14px;
+  direction: rtl;
+}
+
+.send-reply-btn {
+  margin-top: 5px;
+  color: white;
+  background-color: blue;
+  border: none;
+  padding: 5px 10px;
+  cursor: pointer;
+}
+
+/* Reply Modal Styles */
+.reply-overlay {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 2001;
+}
+
+.reply-fixed-container {
+  display: none;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 30%;
+  background: white;
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+  z-index: 2002;
+  transform: translateY(100%);
+  transition: transform 0.3s ease-out;
+}
+
+.reply-fixed-container.active {
+  transform: translateY(0);
+}
+
+.reply-content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.reply-header {
+  padding: 16px;
+  border-bottom: 1px solid #ddd;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.reply-header h3 {
+  margin: 0;
+  text-align: center;
+  flex-grow: 1;
+}
+
+.close-reply {
+  font-size: 24px;
+  cursor: pointer;
+  color: #666;
+  padding: 8px;
+}
+
+.reply-input-container {
+  padding: 12px;
+  border-top: 1px solid #ddd;
+  background: white;
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+}
+
+.reply-input {
+  flex: 1;
+  padding: 12px;
+  border: 1px solid #ddd;
+  border-radius: 20px;
+  resize: none;
+  font-size: 14px;
+  direction: rtl;
+}
+
+.send-reply-btn {
+  background: #4caf50;
+  color: white;
+  border: none;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+
+}
+.reply-btn{
+  color: blue;
+    cursor: pointer;
+    margin-right: 82%;
+    transform: translate(0%, -18px);
+}
+
+.send-reply-btn:hover {
+  background: #45a049;
+}
+
+
+/* أنماط زر التعديل */
+
+
+.edit-btn {
+    background: #4CAF50;
+    color: white;
+    border: none;
+    padding: 8px 16px;
+    border-radius: 20px;
+    cursor: pointer;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin: 20px auto 0;
+}
+
+.edit-btn:hover {
+    background: #45a049;
+}
+
+/* Profile Photo Upload Styles */
+.profile-photo-upload {
+    display: flex;
+    gap: 10px;
+    justify-content: center;
+    margin-bottom: 20px;
+}
+
+.avatar-input {
+    display: none;
+}
+
+.upload-btn {
+    background: #4CAF50;
+    color: white;
+    padding: 8px 16px;
+    border-radius: 20px;
+    cursor: pointer;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.upload-btn:hover {
+    background: #45a049;
+}
+
+.remove-photo-btn {
+    background: #f44336;
+    color: white;
+    padding: 8px 16px;
+    border-radius: 20px;
+    border: none;
+    cursor: pointer;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.remove-photo-btn:hover {
+    background: #d32f2f;
+}
+
+/* أنماط نموذج التعديل */
+.edit-form {
+    background: white;
+    padding: 20px;
+    border-radius: 8px;
+    margin: 20px 0;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+}
+
+.edit-form h2 {
+    text-align: center;
+    margin-bottom: 20px;
+    color: #1a1a1a;
+}
+
+.form-group {
+    margin-bottom: 15px;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 5px;
+    color: #1a1a1a;
+}
+
+.form-group input,
+.form-group select {
+    width: 100%;
+    padding: 8px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 14px;
+}
+
+.skill-input {
+    display: flex;
+    gap: 8px;
+    margin-bottom: 8px;
+}
+
+.add-skill,
+.remove-skill {
+    background: #4CAF50;
+    color: white;
+    border: none;
+    width: 30px;
+    height: 30px;
+    border-radius: 15px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+}
+
+.remove-skill {
+    background: #f44336;
+}
+
+.form-actions {
+    display: flex;
+    gap: 10px;
+    justify-content: flex-end;
+    margin-top: 20px;
+}
+
+.save-btn,
+.cancel-btn {
+    padding: 8px 16px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 14px;
+}
+
+.save-btn {
+    background: #4CAF50;
+    color: white;
+}
+
+.cancel-btn {
+    background: #f44336;
+    color: white;
+}
+
+/* أنماط الصفحة الرئيسية */
+.back-btn {
+    position: fixed;
+    top: 20px;
+    left: 20px;
+    background: #fff;
+    color: #4CAF50;
+    border: none;
+    padding: 8px 16px;
+    border-radius: 20px;
+    cursor: pointer;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    z-index: 100;
+    text-decoration: none;
+}
+
+.back-btn:hover {
+    background-color: #f0f2f5;
+}
+
+.profile-container {
+    max-width: 600px;
+    margin: 0 auto;
+    /* padding: 0 15px; */
+}
+
+.profile-header {
+    background: #fff;
+    border-radius: 0 0 8px 8px;
+    margin-bottom: 20px;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+    overflow: hidden;
+    /* margin-top: 20px; */
+}
+
+.cover-photo {
+    height: 150px;
+    background-color: #4CAF50;
+    position: relative;
+}
+
+.profile-info {
+    padding: 0 20px 20px;
+    text-align: center;
+    position: relative;
+}
+
+.profile-photo {
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    border: 4px solid #fff;
+    margin: -60px auto 10px;
+    overflow: hidden;
+    position: relative;
+    background: #fff;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.profile-photo img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.profile-name {
+    font-size: 24px;
+    margin: 10px 0;
+    color: #1a1a1a;
+}
+
+.profile-details {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin: 15px 0;
+}
+
+.detail-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    color: #65676b;
+}
+
+.detail-item i {
+    color: #4CAF50;
+}
+
+.skills-section {
+    margin-top: 20px;
+    padding-top: 20px;
+    border-top: 1px solid #e4e6eb;
+}
+
+.skills-section h3 {
+    color: #1a1a1a;
+    margin-bottom: 15px;
+}
+
+.skills-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    justify-content: center;
+}
+
+.skill-tag {
+    background: #e4e6eb;
+    padding: 6px 12px;
+    border-radius: 16px;
+    font-size: 14px;
+    color: #050505;
+}
+
+/* أنماط المنشورات */
+.posts-section {
+    margin-top: 20px;
+}
+
+.posts-section h2 {
+    color: #1a1a1a;
+    margin-bottom: 15px;
+    text-align: center;
+}
+
+.posts-container {
+    margin-top: 20px;
+}
+
+.post-card {
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+    margin-bottom: 20px;
+}
+
+.post-header {
+    display: flex;
+    align-items: center;
+    padding: 12px;
+}
+
+.post-content {
+    padding: 12px;
+}
+
+.post-title {
+    margin: 0 0 8px 0;
+    font-size: 18px;
+    text-align: right;
+}
+
+.post-content-box {
+    border-radius: 8px;
+    padding: 12px;
+    margin-bottom: 10px;
+}
+
+.post-text {
+    margin: 0;
+    color: #1a1a1a;
+    line-height: 1.6;
+    text-align: right;
+    word-wrap: break-word;
+    position: relative;
+    direction: rtl;
+    font-size: 16px;
+}
+
+.post-text p {
+    margin: 0;
+    padding: 4px 0;
+    line-height: 1.6;
+}
+
+.post-text.collapsed {
+    display: -webkit-box;
+    -webkit-line-clamp: 4;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.post-text.expanded {
+    display: block;
+}
+
+.post-text.expanded p {
+    white-space: pre-wrap;
+    padding: 2px 0;
+}
+
+.post-text p:first-child {
+    padding-top: 0;
+}
+
+.post-text p:last-child {
+    padding-bottom: 0;
+}
+
+.post-text p:empty {
+    min-height: 1em;
+    display: block;
+}
+
+.see-more-btn {
+    color: #1877f2;
+    cursor: pointer;
+    font-weight: 500;
+    margin-top: 8px;
+    display: none;
+    background: none;
+    border: none;
+    padding: 0;
+    text-align: right;
+    width: 100%;
+}
+
+.post-text-container {
+    position: relative;
+}
+
+.post-media {
+    margin-top: 10px;
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.post-media img {
+        width: 400px;
+        height: 400px;
+        display: block;
+        object-fit: cover;
+        margin: 0 auto;
+}
+
+.video-container {
+    position: relative;
+    padding-bottom: 56.25%;
+    height: 0;
+    overflow: hidden;
+}
+
+.video-container video {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.post-actions {
+    display: flex;
+    justify-content: space-around;
+    padding: 8px;
+    border-top: 1px solid #ddd;
+}
+
+.action-btn {
+    background: none;
+    border: none;
+    padding: 8px;
+    color: #65676b;
+    cursor: pointer;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+.action-btn:hover {
+    background: #f0f2f5;
+    border-radius: 4px;
+}
+
+.action-btn i {
+    font-size: 16px;
+}
+
+.user-info {
+    display: flex;
+    flex-direction: column;
+    margin-right: 10px;
+}
+
+.timestamp {
+    font-size: 12px;
+    color: #65676b;
+    margin-top: 2px;
+}
+
+.profession {
+    font-size: 12px;
+    color: #4CAF50;
+    margin-top: 2px;
+}
+
+.profile-circle {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  overflow: hidden;
+}
+
+.profile-circle img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* Post Menu Styles */
+.post-menu {
+    position: relative;
+    margin-right: auto;
+    padding: 8px;
+
+}
+
+.menu-dots {
+    cursor: pointer;
+    color: #65676b;
+    padding: 8px;
+    border-radius: 50%;
+    
+}
+
+.menu-dots:hover {
+    background-color: #f0f2f5;
+}
+
+.menu-options {
+    display: none;
+    position: absolute;
+    left: 0;
+    top: 100%;
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    z-index: 1000;
+    min-width: 150px;
+}
+
+.menu-option {
+    padding: 8px 16px;
+    cursor: pointer;
+    color: #050505;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.menu-option:hover {
+    background-color: #f0f2f5;
+}
+
+.menu-option i {
+    font-size: 16px;
+    width: 20px;
+}
+
+.delete-post {
+    color: #dc3545;
+}
+
+/* Edit Title Modal */
+.edit-modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.5);
+    z-index: 2000;
+}
+
+.edit-modal-content {
+    position: relative;
+    background: white;
+    padding: 20px;
+    border-radius: 8px;
+    width: 90%;
+    max-width: 500px;
+    margin: 50px auto;
+}
+
+.edit-modal textarea {
+    width: 100%;
+    padding: 12px;
+    margin: 10px 0;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 16px;
+    resize: vertical;
+    min-height: 120px;
+    text-align: right;
+    direction: rtl;
+    white-space: pre-wrap;
+    line-height: 1.6;
+}
+
+.edit-modal-buttons {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    margin-top: 20px;
+}
+
+.edit-modal-buttons button {
+    padding: 8px 16px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.edit-modal-buttons .save-btn {
+    background-color: #4CAF50;
+    color: white;
+}
+
+.edit-modal-buttons .cancel-btn {
+    background-color: #f0f2f5;
+    color: #050505;
+}
+
+/* Delete Confirmation Modal */
+.delete-modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.5);
+    z-index: 2000;
+}
+
+.delete-modal-content {
+    position: relative;
+    background: white;
+    padding: 20px;
+    border-radius: 8px;
+    width: 90%;
+    max-width: 500px;
+    margin: 50px auto;
+    text-align: center;
+}
+
+.delete-modal-buttons {
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+    margin-top: 20px;
+}
+
+.delete-modal-buttons button {
+    padding: 8px 16px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.delete-modal-buttons .confirm-delete {
+    background-color: #dc3545;
+    color: white;
+}
+
+.delete-modal-buttons .cancel-delete {
+    background-color: #f0f2f5;
+    color: #050505;
+}
+
+
+.replies-toggle {
+    margin-top: 5px;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+}
+
+.replies-toggle i {
+    margin-right: 5px;
+}
+
+.nested-comments {
+    margin-left: 20px;
+    border-left: 1px solid #ddd;
+    padding-left: 10px;
+}
+
+
+.filter-buttons {
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+    margin-bottom: 20px;
+}
+
+.filter-btn {
+    padding: 8px 16px;
+    border: none;
+    border-radius: 20px;
+    background-color: #f0f2f5;
+    color: #1a1a1a;
+    cursor: pointer;
+    font-size: 14px;
+}
+
+.filter-btn.active {
+    background-color: #4CAF50;
+    color: white;
+}
+
+/* النمط الأساسي لـ iframe-container */
+#message-container {
+    display: none; /* مخفي في البداية */
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5); /* خلفية شفافة */
+    z-index: 1000;
+    animation: fadeIn 0.5s;
+}
+
+/* محتوى iframe */
+#message-iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+}
+
+/* رأس الحاوية مع زر الإغلاق */
+#message-header {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    background-color: #f1f1f1;
+    padding: 10px;
+    box-sizing: border-box;
+    z-index: 1001;
+}
+
+#close-btn {
+    background-color: transparent;
+    border: none;
+    font-size: 24px;
+    cursor: pointer;
+    float: left;
+}
+
+/* الأنيميشن */
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes slideIn {
+    from { transform: translateY(100%); }
+    to { transform: translateY(0); }
+}
+
+@keyframes fadeOut {
+    from { opacity: 1; }
+    to { opacity: 0; }
+}
+
+@keyframes slideOut {
+    from { transform: translateY(0); }
+    to { transform: translateY(100%); }
+}
+
+#message-container.show {
+    display: block;
+    animation: fadeIn 0.5s;
+}
+
+#message-container iframe {
+    animation: slideIn 0.5s;
+}
+
+#message-container.hide {
+    animation: fadeOut 0.5s, slideOut 0.5s;
+    opacity: 0;
+}
+</style>
+
+<!-- Edit Post Modal -->
+<div class="edit-modal" id="editModal">
+    <div class="edit-modal-content">
+        <h3>تعديل المنشور</h3>
+        <textarea id="editContentInput" placeholder="أدخل محتوى المنشور" rows="5"></textarea>
+        <div class="edit-modal-buttons">
+            <button class="save-btn" id="saveEditBtn">حفظ</button>
+            <button class="cancel-btn" id="cancelEditBtn">إلغاء</button>
+        </div>
+    </div>
+</div>
+
+<!-- Delete Confirmation Modal -->
+<div class="delete-modal" id="deleteModal">
+    <div class="delete-modal-content">
+        <h3>تأكيد الحذف</h3>
+        <p>هل أنت متأكد من حذف هذا المنشور؟</p>
+        <div class="delete-modal-buttons">
+            <button class="confirm-delete" id="confirmDeleteBtn">حذف</button>
+            <button class="cancel-delete" id="cancelDeleteBtn">إلغاء</button>
+        </div>
+    </div>
+</div>
+
+
+
+
+
+{% endblock %}
+
+{% block scripts %}
+<script>
+// Comments Functionality
+// Comments Functionality
+$(document).ready(function () {
+  const commentsContainer = $("#commentsFixedContainer");
+  const commentsOverlay = $("#commentsOverlay");
+  const closeComments = $(".close-comments");
+  let currentPostId = null;
+
+  // Reply Modal Elements
+  const replyContainer = $("#replyFixedContainer");
+  const replyOverlay = $("#replyOverlay");
+  const closeReply = $(".close-reply");
+  let currentCommentId = null;
+
+  // تحميل التعليقات عند النقر على زر التعليق
+  $(".comment-btn").click(function () {
+    const postId = $(this).data("post-id");
+    currentPostId = postId;
+
+    // تحميل التعليقات
+    loadComments(postId);
+
+    // عرض الخلفية والحاوية
+    commentsOverlay.css("display", "block");
+    commentsContainer.css("display", "block");
+    document.body.style.overflow = "hidden"; // منع السكرول في الصفحة الرئيسية
+    setTimeout(() => {
+      commentsContainer.addClass("active");
+    }, 10);
+  });
+
+  // إغلاق التعليقات عند النقر خارج الحاوية
+  commentsOverlay.click(function () {
+    closeCommentsContainer();
+  });
+
+  // إغلاق حاوية التعليقات
+  closeComments.click(function () {
+    closeCommentsContainer();
+  });
+
+  // دالة إغلاق حاوية التعليقات
+  function closeCommentsContainer() {
+    commentsContainer.removeClass("active");
+    document.body.style.overflow = "auto"; // إعادة تفعيل السكرول في الصفحة الرئيسية
+    setTimeout(() => {
+      commentsContainer.css("display", "none");
+      commentsOverlay.css("display", "none");
+    }, 300);
+  }
+
+  // إرسال التعليق
+  $(".send-comment-btn").click(function () {
+    const input = commentsContainer.find(".comment-input");
+    const content = input.val().trim();
+
+    if (content && currentPostId) {
+      $.ajax({
+        url: "/add_comment",
+        method: "POST",
+        data: {
+          post_id: currentPostId,
+          content: content,
+          parent_id: null, // Root comment
+        },
+        success: function (response) {
+          if (response.success) {
+            input.val("");
+            loadComments(currentPostId);
+          }
+        },
+      });
+    }
+  });
+
+  // تحميل التعليقات
+  function loadComments(postId) {
+    $.get(`/get_comments/${postId}`, function (comments) {
+      const commentsList = commentsContainer.find(".comments-list");
+      commentsList.empty();
+
+      comments.forEach(function (comment) {
+        const commentHtml = generateCommentHtml(comment);
+        commentsList.append(commentHtml);
+      });
+    });
+  }
+
+  // دالة لتوليد HTML للتعليقات والردود
+  function generateCommentHtml(comment) {
+    const hasReplies = comment.replies && comment.replies.length > 0;
+    const repliesCount = hasReplies
+      ? `${comment.replies.length} رداً`
+      : "";
+
+    const repliesHtml = hasReplies
+      ? comment.replies
+          .map((reply) => generateReplyHtml(reply))
+          .join("")
+      : "";
+
+    return `
+      <div class="comment-item">
+          <div class="comment-user-avatar">
+              <img src="/static/${
+                comment.profile_photo
+              }" alt="${comment.username}">
+          </div>
+          <div class="comment-bubble">
+              <div class="comment-header">
+                  <span class="comment-username">${comment.username}</span>
+              </div>
+              <div class="comment-content">${comment.content}</div>
+              <div class="comment-time">${comment.created_at}</div>
+
+              <!-- عرض زر الردود المخفية إذا كان هناك ردود -->
+              ${
+                hasReplies
+                  ? `
+                  <div class="replies-toggle" data-comment-id="${comment.id}">
+                      <span class="replies-toggle-text" style="color: blue; cursor: pointer;">
+                          <i class="fas fa-chevron-down"></i> ${repliesCount}
+                      </span>
+                  </div>
+              `
+                  : ""
+              }
+
+              <!-- زر الرد -->
+              <button class="reply-btn" data-comment-id="${
+                comment.id
+              }" style="color: blue; cursor: pointer;">رد</button>
+
+              <!-- عرض الردود أسفل التعليق الرئيسي -->
+              <div class="replies-container" style="display: ${
+                hasReplies ? "block" : "none"
+              };">
+                  ${repliesHtml}
+              </div>
+          </div>
+      </div>
+  `;
+  }
+
+  // دالة لتوليد HTML للردود
+  function generateReplyHtml(reply) {
+    return `
+      <div class="comment-item nested-comment">
+          <div class="comment-user-avatar">
+              <img src="/static/${
+                reply.profile_photo
+              }" alt="${reply.username}">
+          </div>
+          <div class="comment-bubble">
+              <div class="comment-header">
+                  <span class="comment-username">${reply.username}</span>
+              </div>
+              <div class="comment-content">${reply.content}</div>
+              <div class="comment-time">${reply.created_at}</div>
+          </div>
+      </div>
+    `;
+  }
+
+  // إظهار حقل الرد عند النقر على زر الرد
+  $(document).on("click", ".reply-btn", function () {
+    currentCommentId = $(this).data("comment-id");
+    replyOverlay.css("display", "block");
+    replyContainer.css("display", "block");
+    setTimeout(() => {
+      replyContainer.addClass("active");
+    }, 10);
+  });
+
+  // إغلاق الرد عند النقر خارج الحاوية
+  replyOverlay.click(function () {
+    closeReplyContainer();
+  });
+
+  // إغلاق حاوية الرد
+  closeReply.click(function () {
+    closeReplyContainer();
+  });
+
+  // دالة إغلاق حاوية الرد
+  function closeReplyContainer() {
+    replyContainer.removeClass("active");
+    setTimeout(() => {
+      replyContainer.css("display", "none");
+      replyOverlay.css("display", "none");
+    }, 300);
+  }
+
+  // إرسال الرد على تعليق
+  $(".send-reply-btn").click(function () {
+    const input = replyContainer.find(".reply-input");
+    const content = input.val().trim();
+
+    if (content && currentPostId && currentCommentId) {
+      $.ajax({
+        url: "/add_comment",
+        method: "POST",
+        data: {
+          post_id: currentPostId,
+          content: content,
+          parent_id: currentCommentId, // Associate reply with parent
+        },
+        success: function (response) {
+          if (response.success) {
+            input.val("");
+            closeReplyContainer();
+            loadComments(currentPostId);
+          }
+        },
+      });
+    }
+  });
+
+  // إظهار أو إخفاء الردود عند النقر على زر "12 رداً" أو ما يعادله
+  $(document).on("click", ".replies-toggle-text", function () {
+    const toggle = $(this).closest(".replies-toggle");
+    const repliesContainer = toggle.siblings(".replies-container");
+    const icon = toggle.find("i");
+
+    if (repliesContainer.is(":visible")) {
+      repliesContainer.slideUp();
+      icon.removeClass("fa-chevron-up").addClass("fa-chevron-down");
+    } else {
+      repliesContainer.slideDown();
+      icon.removeClass("fa-chevron-down").addClass("fa-chevron-up");
+    }
+  });
+});
+
+
+</script>
+
+<script>
+$(document).ready(function() {
+    // تبديل عرض نموذج التعديل
+    $('#editProfileBtn').click(function() {
+        $('#editProfileForm').slideDown();
+    });
+
+    $('#cancelEdit').click(function() {
+        $('#editProfileForm').slideUp();
+    });
+
+    // إدارة المهارات
+    $('.add-skill').click(function() {
+        const skillValue = $(this).siblings('.skill-field').val();
+        if (skillValue.trim() !== "") {
+            const skillInput = `
+                <div class="skill-input">
+                    <input type="text" name="skill" class="skill-field" value="${skillValue}">
+                    <button type="button" class="remove-skill">-</button>
+                </div>
+            `;
+            $(this).parent().before(skillInput);
+            $(this).siblings('.skill-field').val("");
+        }
+    });
+
+    $(document).on('click', '.remove-skill', function() {
+        $(this).parent().remove();
+    });
+
+    // تقديم النموذج
+    $('#profileForm').on('submit', function(e) {
+        const skills = [];
+        $('.skill-field').each(function() {
+            const skill = $(this).val().trim();
+            if (skill) {
+                skills.push(skill);
+            }
+        });
+        $('#skills').val(JSON.stringify(skills));
+    });
+
+    // التحقق من اسم المستخدم
+    $('#username').on('input', function() {
+        const username = $(this).val();
+        if (username && username !== '{{ user.username }}') {
+            $.get('/validate-username', { username: username }, function(data) {
+                if (data.exists) {
+                    $('#username-validation-message').text('اسم المستخدم مستخدم بالفعل').addClass('error').removeClass('success');
+                } else {
+                    $('#username-validation-message').text('اسم المستخدم متاح').addClass('success').removeClass('error');
+                }
+            });
+        } else {
+            $('#username-validation-message').text('');
+        }
+    });
+
+    // تفعيل قائمة النقاط الثلاث
+    $('.menu-dots').click(function(e) {
+        e.stopPropagation();
+        const menuOptions = $(this).siblings('.menu-options');
+        $('.menu-options').not(menuOptions).hide();
+        menuOptions.toggle();
+    });
+
+    // إغلاق القائمة عند النقر في أي مكان آخر
+    $(document).click(function() {
+        $('.menu-options').hide();
+    });
+
+    // منع إغلاق القائمة عند النقر داخلها
+    $('.menu-options').click(function(e) {
+        e.stopPropagation();
+    });
+
+    let currentPostId = null;
+
+    // تفعيل زر تعديل المنشور
+    $('.edit-post').click(function() {
+        currentPostId = $(this).data('post-id');
+        const $text = $(this).closest('.post-card').find('.post-text');
+        const paragraphs = [];
+        $text.find('p').each(function() {
+            const content = $(this).text();
+            if (content === '\u00A0') { // &nbsp;
+                paragraphs.push('');
+            } else {
+                paragraphs.push(content);
+            }
+        });
+        $('#editContentInput').val(paragraphs.join('\n'));
+        $('#editModal').show();
+    });
+
+    // إغلاق نافذة التعديل
+    $('#cancelEditBtn').click(function() {
+        $('#editModal').hide();
+    });
+
+    // حفظ التعديل
+    $('#saveEditBtn').click(function() {
+        const newContent = $('#editContentInput').val();
+        if (currentPostId && newContent.trim()) {
+            $.ajax({
+                url: '/edit_post_content',
+                method: 'POST',
+                data: {
+                    post_id: currentPostId,
+                    new_content: newContent
+                },
+                success: function(response) {
+                    if (response.success) {
+                        location.reload();
+                    }
+                }
+            });
+        }
+        $('#editModal').hide();
+    });
+
+    // تفعيل زر حذف المنشور
+    $('.delete-post').click(function() {
+        currentPostId = $(this).data('post-id');
+        $('#deleteModal').show();
+    });
+
+    // إغلاق نافذة تأكيد الحذف
+    $('#cancelDeleteBtn').click(function() {
+        $('#deleteModal').hide();
+    });
+
+    // تأكيد الحذف
+    $('#confirmDeleteBtn').click(function() {
+        if (currentPostId) {
+            $.ajax({
+                url: '/delete_post',
+                method: 'POST',
+                data: {
+                    post_id: currentPostId
+                },
+                success: function(response) {
+                    if (response.success) {
+                        location.reload();
+                    }
+                }
+            });
+        }
+        $('#deleteModal').hide();
+    });
+
+    // تفعيل زر إظهار المزيد
+    $('.post-text').each(function() {
+        const $text = $(this);
+        const $btn = $text.closest('.post-content-box').find('.see-more-btn');
+        
+        // Get the original content
+        const content = $text.html();
+        
+        // Calculate line height and text height
+        const lineHeight = parseInt(window.getComputedStyle($text[0]).lineHeight);
+        const textHeight = $text[0].scrollHeight;
+        const numLines = Math.floor(textHeight / lineHeight);
+        
+        // Show button only if text has more than 4 lines
+        if (numLines > 4) {
+            $btn.show();
+            $text.addClass('has-more');
+        }
+    });
+
+    $('.see-more-btn').click(function() {
+        const $btn = $(this);
+        const $text = $btn.closest('.post-content-box').find('.post-text');
+        
+        if ($text.hasClass('collapsed')) {
+            $text.removeClass('collapsed').addClass('expanded');
+            $btn.text('إظهار أقل');
+        } else {
+            $text.removeClass('expanded').addClass('collapsed');
+            $btn.text('إظهار المزيد');
+        }
+    });
+
+    // Profile Photo Upload Functionality
+    $('#avatar').change(function(e) {
+        if (this.files && this.files[0]) {
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                $('.profile-photo img').attr('src', e.target.result);
+            }
+            reader.readAsDataURL(this.files[0]);
+        }
+    });
+
+    // Remove Photo Functionality
+    $('#removePhotoBtn').click(function() {
+        $('.profile-photo img').attr('src', "{{ url_for('static', filename='uploads/default-avatar.jpg') }}");
+        $('#avatar').val('');
+        // Add a hidden input to signal photo removal
+        if (!$('#remove_photo').length) {
+            $('<input>').attr({
+                type: 'hidden',
+                id: 'remove_photo',
+                name: 'remove_photo',
+                value: 'true'
+            }).appendTo('#profileForm');
+        }
+    });
+});
+
+
+
+
+document.addEventListener("DOMContentLoaded", function () {
+  document.querySelectorAll(".share-btn").forEach(function (button) {
+    button.addEventListener("click", function () {
+      const postId = this.dataset.postId;
+      const shareUrl = `${window.location.origin}/post/${postId}`;
+
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(shareUrl).then(function () {
+          showPopup("تم نسخ الرابط");
+        }).catch(function (err) {
+          console.error("فشل نسخ الرابط: ", err);
+        });
+      } else {
+        const tempInput = document.createElement("input");
+        tempInput.value = shareUrl;
+        document.body.appendChild(tempInput);
+        tempInput.select();
+        try {
+          document.execCommand("copy");
+          showPopup("تم نسخ الرابط ");
+        } catch (err) {
+          console.error("فشل نسخ الرابط باستخدام الطريقة البديلة: ", err);
+        }
+        document.body.removeChild(tempInput);
+      }
+
+      function showPopup(message) {
+        const modal = document.createElement("div");
+        modal.style.position = "fixed";
+        modal.style.bottom = "20%";
+        modal.style.left = "50%";
+        modal.style.transform = "translateX(-50%)";
+        modal.style.backgroundColor = "#333";
+        modal.style.color = "#fff";
+        modal.style.padding = "15px 20px";
+        modal.style.borderRadius = "8px";
+        modal.style.boxShadow = "0 4px 6px rgba(0, 0, 0, 0.1)";
+        modal.style.opacity = "0";
+        modal.style.transition = "opacity 0.4s ease, bottom 0.4s ease";
+        modal.style.zIndex = "1000";
+        modal.textContent = message;
+
+        document.body.appendChild(modal);
+
+        setTimeout(() => {
+          modal.style.opacity = "1";
+          modal.style.bottom = "25%";
+        }, 10);
+
+        setTimeout(() => {
+          modal.style.opacity = "0";
+          modal.style.bottom = "20%";
+          setTimeout(() => {
+            modal.remove();
+          }, 400);
+        }, 3000);
+      }
+    });
+  });
+});
+
+
+
+$(document).ready(function () {
+    // تفعيل الفلترات
+    $('.filter-btn').click(function () {
+        // إزالة النشط من جميع الأزرار
+        $('.filter-btn').removeClass('active');
+        // إضافة النشط للزر المحدد
+        $(this).addClass('active');
+
+        const filterType = $(this).attr('id'); // الحصول على نوع الفلتر
+        let hasPosts = false; // متغير لتتبع وجود منشورات مطابقة
+
+        // إخفاء جميع المنشورات
+        $('.post-card').hide();
+
+        if (filterType === 'filterAll') {
+            // عرض جميع المنشورات
+            $('.post-card').show();
+            hasPosts = $('.post-card').length > 0; // تحقق إذا كان هناك منشورات
+        } else if (filterType === 'filterImages') {
+            // عرض المنشورات التي تحتوي على صور فقط
+            $('.post-card').each(function () {
+                if ($(this).find('.post-media img').length > 0) {
+                    $(this).show();
+                    hasPosts = true; // يوجد منشورات مطابقة
+                }
+            });
+        } else if (filterType === 'filterVideos') {
+            // عرض المنشورات التي تحتوي على فيديوهات فقط
+            $('.post-card').each(function () {
+                if ($(this).find('.post-media video').length > 0) {
+                    $(this).show();
+                    hasPosts = true; // يوجد منشورات مطابقة
+                }
+            });
+        } else if (filterType === 'filterText') {
+            // عرض المنشورات التي تحتوي على نص فقط
+            $('.post-card').each(function () {
+                if ($(this).find('.post-text').length > 0 && $(this).find('.post-media').length === 0) {
+                    $(this).show();
+                    hasPosts = true; // يوجد منشورات مطابقة
+                }
+            });
+        }
+
+        // إظهار أو إخفاء الرسالة بناءً على وجود منشورات مطابقة
+        if (hasPosts) {
+            $('#noPostsMessage').hide(); // إخفاء الرسالة إذا كانت هناك منشورات
+        } else {
+            $('#noPostsMessage').show(); // إظهار الرسالة إذا لم تكن هناك منشورات
+        }
+    });
+});
+
+// فكرة بحيث يظهر مشاركة عبر 
+
+
+// دالة لفتح الرسالة
+function openMessage() {
+    var container = document.getElementById('message-container');
+    if (container) {
+        // إظهار الحاوية
+        container.style.display = 'block';
+        container.classList.remove('hide'); // إزالة فئة الإخفاء
+        container.classList.add('show'); // إضافة فئة العرض
+
+        // تحقق مما إذا كان الـ iframe موجودًا بالفعل
+        var existingIframe = document.getElementById('message-iframe');
+        if (!existingIframe) {
+            // إنشاء iframe جديد إذا لم يكن موجودًا
+            var iframe = document.createElement('iframe');
+            iframe.id = 'message-iframe';
+            iframe.src = "{{ url_for('messages', user_email=user.email) }}"; // مسار الرسالة
+            container.appendChild(iframe); // إضافة iframe إلى الحاوية
+        }
+    }
+}
+
+// دالة لإغلاق الرسالة (حذف iframe نهائيًا وإعلام الخادم)
+function closeMessage() {
+    var container = document.getElementById('message-container');
+    if (container) {
+        // إضافة كلاس hide لتشغيل أنيميشن الإغلاق
+        container.classList.remove('show'); // إزالة فئة العرض
+        container.classList.add('hide'); // إضافة فئة الإخفاء
+
+        // الانتظار حتى يكتمل الأنيميشن قبل إخفاء العنصر
+        setTimeout(function() {
+            container.style.display = 'none';
+
+            // حذف الـ iframe نهائيًا
+            var iframe = document.getElementById('message-iframe');
+            if (iframe) {
+                iframe.remove(); // إزالة iframe من DOM
+            }
+
+            // إرسال طلب إلى الخادم لإعلامه بأن المستخدم قد غادر الدردشة
+            fetch('/leave_chat', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json' // نوع المحتوى
+                },
+                credentials: 'include' // لإرسال الكوكيز إذا لزم الأمر
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    console.log("تم إعلام الخادم بأن المستخدم قد غادر الدردشة.");
+                } else {
+                    console.error("فشل في إعلام الخادم.");
+                }
+            })
+            .catch(error => {
+                console.error("حدث خطأ أثناء إرسال الطلب:", error);
+            });
+        }, 500); // الانتظار لمدة 0.5 ثانية (مدة الأنيميشن)
+    }
+}
+
+// إضافة مستمع الحدث لزر الإغلاق
+var closeBtn = document.getElementById("close-btn");
+if (closeBtn) {
+    closeBtn.addEventListener("click", function () {
+        console.log("تم النقر على زر الإغلاق");
+        closeMessage(); // استدعاء دالة الإغلاق
+    });
+}
+</script>
+{% endblock %}

templates/register.html

@@ -0,0 +1,195 @@
+{% extends "base.html" %}
+
+{% block title %}إنشاء حساب{% endblock %}
+
+{% block content %}
+<div class="auth-container">
+    <h2>إنشاء حساب جديد</h2>
+    <form id="registerForm" method="POST" action="{{ url_for('register') }}">
+        <div class="form-group">
+            <label for="username">اسم المستخدم</label>
+            <input type="text" id="username" name="username" required>
+            <small class="form-text">سيتم إضافة @moltka.eg تلقائياً</small>
+            <span id="username-validation-message"></span>
+        </div>
+
+        <div class="form-group">
+            <label for="password">كلمة المرور</label>
+            <input type="password" id="password" name="password" required>
+            <div id="password-strength" class="strength-meter"></div>
+        </div>
+
+        <div class="form-group">
+            <label for="confirm_password">تأكيد كلمة المرور</label>
+            <input type="password" id="confirm_password" name="confirm_password" required>
+            <span id="password-match-message"></span>
+        </div>
+
+        <div class="form-group">
+            <label for="profession">المجال المهني</label>
+            <select id="profession" name="profession" required>
+                <option value="">اختر المجال المهني</option>
+                <option value="مطور ويب">مطور ويب</option>
+                <option value="مطور واجهة خلفية">مطور واجهة خلفية</option>
+                <option value="برمجة">برمجة</option>
+                <option value="مطور ألعاب">مطور ألعاب</option>
+                <option value="مطور أندرويد">مطور أندرويد</option>
+                <option value="مطور iOS">مطور iOS</option>
+                <option value="مهندس">مهندس</option>
+                <option value="طبيب">طبيب</option>
+                <option value="علوم اجتماعية">علوم اجتماعية</option>
+                <option value="معلم">معلم</option>
+                <option value="محاسب">محاسب</option>
+                <option value="صحفي">صحفي</option>
+                <option value="محامي">محامي</option>
+                <option value="مصمم جرافيكي">مصمم جرافيكي</option>
+                <option value="مصور">مصور</option>
+                <option value="كاتب">كاتب</option>
+                <option value="مدرب رياضي">مدرب رياضي</option>
+                <option value="طاهي">طاهي</option>
+                <option value="ديني">ديني</option>
+                <option value="شاعر">شاعر</option>
+                <option value="رسام">رسام</option>
+                <option value="محلل مالي">محلل مالي</option>
+                <option value="فني صيانة">فني صيانة</option>
+                <option value="باحث">باحث</option>
+                <option value="IT">IT</option>
+            </select>
+        </div>
+
+        <div class="form-group">
+            <label>المهارات</label>
+            <div id="skills-container">
+                <div class="skill-input">
+                    <input type="text" name="skill" class="skill-field">
+                    <button type="button" class="add-skill">+</button>
+                </div>
+            </div>
+            <input type="hidden" id="skills" name="skills">
+        </div>
+
+        <div class="form-group">
+            <label for="security_question">سؤال الأمان</label>
+            <select id="security_question" name="security_question" required>
+                <option value="">اختر سؤال الأمان</option>
+                <option value="ما اسم مدرستك الأولى؟">ما اسم مدرستك الأولى؟</option>
+                <option value="ما اسم حيوانك الأليف الأول؟">ما اسم حيوانك الأليف الأول؟</option>
+                <option value="ما هي مدينتك المفضلة؟">ما هي مدينتك المفضلة؟</option>
+                <option value="ما اسم أفضل صديق في طفولتك؟">ما اسم أفضل صديق في طفولتك؟</option>
+            </select>
+        </div>
+
+        <div class="form-group">
+            <label for="security_answer">إجابة سؤال الأمان</label>
+            <input type="text" id="security_answer" name="security_answer" required>
+        </div>
+
+        <button type="submit" class="submit-btn">إنشاء الحساب</button>
+    </form>
+    <div class="auth-links">
+        <p>لديك حساب بالفعل؟ <a href="{{ url_for('login') }}">تسجيل الدخول</a></p>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+$(document).ready(function() {
+    // Username validation
+    $('#username').on('input', function() {
+        const username = $(this).val();
+        if (username) {
+            $.get('/validate-username', { username: username }, function(data) {
+                if (data.exists) {
+                    $('#username-validation-message').text('اسم المستخدم مستخدم بالفعل').addClass('error').removeClass('success');
+                } else {
+                    $('#username-validation-message').text('اسم المستخدم متاح').addClass('success').removeClass('error');
+                }
+            });
+        }
+    });
+
+    // Password matching validation
+    $('#confirm_password').on('input', function() {
+        const password = $('#password').val();
+        const confirmPassword = $(this).val();
+        
+        if (password === confirmPassword) {
+            $('#password-match-message').text('كلمات المرور متطابقة').addClass('success').removeClass('error');
+        } else {
+            $('#password-match-message').text('كلمات المرور غير متطابقة').addClass('error').removeClass('success');
+        }
+    });
+
+    // Password strength
+    $('#password').on('input', function() {
+        const password = $(this).val();
+        let strength = 0;
+        
+        if (password.length >= 8) strength++;
+        if (/[A-Z]/.test(password)) strength++;
+        if (/[a-z]/.test(password)) strength++;
+        if (/[0-9]/.test(password)) strength++;
+        if (/[^A-Za-z0-9]/.test(password)) strength++;
+
+        const strengthMeter = $('#password-strength');
+        strengthMeter.removeClass('weak medium strong');
+        
+        if (strength <= 2) {
+            strengthMeter.text('ضعيف').addClass('weak');
+        } else if (strength <= 4) {
+            strengthMeter.text('متوسط').addClass('medium');
+        } else {
+            strengthMeter.text('قوي').addClass('strong');
+        }
+    });
+
+    // Skills management
+    $('.add-skill').click(function() {
+        const skillValue = $(this).siblings('.skill-field').val(); // Get the current skill value
+        if (skillValue.trim() !== "") {
+            const skillInput = `
+                <div class="skill-input">
+                    <input type="text" name="skill" class="skill-field" value="${skillValue}">
+                    <button type="button" class="remove-skill">-</button>
+                </div>
+            `;
+            $('#skills-container').append(skillInput);
+            $(this).siblings('.skill-field').val(""); // Clear the input field
+        }
+    });
+
+    $(document).on('click', '.remove-skill', function() {
+        $(this).parent().remove();
+    });
+
+    // Form submission
+    $('#registerForm').on('submit', function(e) {
+        const skills = [];
+        $('.skill-field').each(function() {
+            const skill = $(this).val().trim();
+            if (skill) {
+                skills.push(skill);
+            }
+        });
+        $('#skills').val(JSON.stringify(skills));
+
+        const password = $('#password').val();
+        const confirmPassword = $('#confirm_password').val();
+        
+        if (password !== confirmPassword) {
+            e.preventDefault();
+            alert('كلمات المرور غير متطابقة');
+            return;
+        }
+
+        const username = $('#username').val().trim();
+        if (!username) {
+            e.preventDefault();
+            alert('الرجاء إدخال اسم المستخدم');
+            return;
+        }
+    });
+});
+</script>
+{% endblock %}

templates/reset_password.html

@@ -0,0 +1,67 @@
+{% extends "base.html" %}
+
+{% block title %}إعادة تعيين كلمة السر{% endblock %}
+
+{% block content %}
+<div class="auth-container">
+    <h2>إعادة تعيين كلمة السر</h2>
+    <form id="resetPasswordForm" method="POST" action="{{ url_for('reset_password') }}">
+        <input type="hidden" name="email" value="{{ email }}">
+        <div class="form-group">
+            <label for="security_answer">إجابة سؤال الأمان</label>
+            <input type="text" id="security_answer" name="security_answer" required>
+            <span id="security-answer-message"></span>
+        </div>
+        <div class="form-group">
+            <label for="new_password">كلمة المرور الجديدة</label>
+            <input type="password" id="new_password" name="new_password" required>
+        </div>
+        <div class="form-group">
+            <label for="confirm_password">تأكيد كلمة المرور</label>
+            <input type="password" id="confirm_password" name="confirm_password" required>
+        </div>
+        <button type="submit" class="submit-btn" id="resetPasswordBtn" disabled>إعادة تعيين كلمة السر</button>
+    </form>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+$(document).ready(function() {
+    $('#security_answer').on('input', function() {
+        const email = '{{ email }}';
+        const security_answer = $(this).val();
+
+        $.ajax({
+            url: '/validate_security_answer',
+            type: 'POST',
+            contentType: 'application/json',
+            data: JSON.stringify({ email: email, security_answer: security_answer }),
+            success: function(data) {
+                const messageElement = $('#security-answer-message');
+                if (data.valid) {
+                    messageElement.text('صحيح').css('color', 'green');
+                    $('#resetPasswordBtn').prop('disabled', false);
+                } else {
+                    messageElement.text('خطأ').css('color', 'red');
+                    $('#resetPasswordBtn').prop('disabled', true);
+                }
+            },
+            error: function() {
+                $('#security-answer-message').text('حدث خطأ أثناء التحقق من إجابة سؤال الأمان').css('color', 'red');
+            }
+        });
+    });
+
+    $('#resetPasswordForm').on('submit', function(e) {
+        const new_password = $('#new_password').val();
+        const confirm_password = $('#confirm_password').val();
+
+        if (new_password !== confirm_password) {
+            e.preventDefault();
+            alert('كلمات المرور غير متطابقة');
+        }
+    });
+});
+</script>
+{% endblock %}

templates/videos.html

@@ -0,0 +1,1855 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Videos</title>
+    <!-- إضافة مكتبة FontAwesome -->
+    <link
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
+      rel="stylesheet"
+    />
+
+    <style>
+      /* Skeleton Loading */
+      .skeleton {
+        background-color: #ddd;
+        animation: pulse 1.5s infinite;
+      }
+
+      @keyframes pulse {
+        0% {
+          opacity: 1;
+        }
+        50% {
+          opacity: 0.5;
+        }
+        100% {
+          opacity: 1;
+        }
+      }
+
+      /* تنسيق الصفحة */
+      body {
+        font-family: Arial, sans-serif;
+        margin: 20px;
+      }
+
+      .upload-form {
+        margin-bottom: 30px;
+        padding: 15px;
+        border: 1px solid #ccc;
+        border-radius: 8px;
+        background-color: #f9f9f9;
+      }
+
+      .video-container {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 15px;
+      }
+
+      .video-card {
+        border: 1px solid #ccc;
+        border-radius: 8px;
+        padding: 10px;
+        width: 300px;
+        background-color: #fff;
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+        cursor: pointer;
+      }
+
+      .video-card img {
+        width: 100%;
+        /* border-radius: 8px; */
+      }
+
+      .video-card h4,
+      .video-card p {
+        margin: 5px 0;
+      }
+
+      .skeleton-card {
+        width: 300px;
+        height: 200px;
+        border-radius: 8px;
+        margin-bottom: 10px;
+      }
+
+      .empty-message {
+        font-size: 18px;
+        color: #555;
+        margin-top: 20px;
+      }
+
+      .uploader_image {
+        width: 30px !important;
+        border-radius: 50% !important;
+      }
+
+      /* النافذة المنبثقة (Modal) */
+      .modal {
+        display: none; /* مخفية بشكل افتراضي */
+        position: fixed; /* ثابتة في مكانها */
+        z-index: 1000; /* تكون فوق كل العناصر */
+        left: 0;
+        top: 0;
+        width: 100%; /* عرض كامل */
+        height: 100%; /* ارتفاع كامل */
+        background-color: rgba(0, 0, 0, 0.9); /* خلفية داكنة مع شفافية */
+        overflow: auto; /* تمكين التمرير إذا لزم الأمر */
+        animation: modalFadeIn 0.3s ease-out forwards; /* إضافة أنيميشن عند فتح المودال */
+      }
+
+      /* محتوى النافذة المنبثقة */
+      .modal-content {
+        background-color: #fff;
+        margin: 0%;
+        /* padding: 20px; */
+        width: 99.4%;
+        height: 100%;
+        text-align: center;
+        overflow: hidden;
+        /* border-radius: 10px; */
+      }
+
+      /* زر الإغلاق */
+      .close {
+        color: #aaa;
+        position: fixed;
+        bottom: 0;
+        right: 50%;
+        transform: translate(50%, 0);
+        overflow: hidden;
+        font-size: 24px;
+        font-weight: bold;
+        cursor: pointer;
+        background-color: brown;
+        padding: 5px;
+        height: 30px;
+        width: 30px;
+        border-radius: 50%;
+        text-align: center;
+        margin-bottom: 10px;
+        margin-top: 10px;
+      }
+
+      .close:hover,
+      .close:focus {
+        color: #000;
+        text-decoration: none;
+      }
+
+      /* الفيديو */
+      video {
+        width: 100%;
+        height: auto;
+        max-width: 100%;
+        max-height: 400px;
+        background-color: black;
+      }
+
+      /* معلومات الفيديو */
+      #videoInfo {
+        margin-top: 15px;
+        padding: 5px 20px;
+        text-align: left;
+      }
+
+      #videoTitle {
+        font-size: 20px; /* حجم خط مناسب للجوال */
+        margin-bottom: 10px;
+        color: #333;
+      }
+
+      #videoCategory,
+      #uploadTime {
+        font-size: 14px; /* حجم خط أصغر */
+        color: #666;
+        margin-bottom: 10px;
+      }
+
+      /* معلومات المُحمِّل */
+      #uploaderInfo {
+        display: flex;
+        justify-content: left;
+        margin-top: 15px;
+      }
+
+      #uploaderName {
+        font-size: 16px; /* حجم خط مناسب للجوال */
+        color: #333;
+        margin-left: 10px;
+      }
+
+      /* الأنيميشن لفتح المودال */
+      @keyframes modalFadeIn {
+        0% {
+          transform: scale(0.8);
+          opacity: 0;
+        }
+        100% {
+          transform: scale(1);
+          opacity: 1;
+        }
+      }
+
+      /* الأنيميشن لإغلاق المودال */
+      @keyframes modalFadeOut {
+        0% {
+          transform: scale(1);
+          opacity: 1;
+        }
+        100% {
+          transform: scale(0.8);
+          opacity: 0;
+        }
+      }
+
+      /* لتقليص المودال عند الإغلاق */
+      .modal.close-animation {
+        animation: modalFadeOut 0.3s ease-out forwards;
+      }
+
+      /* تنسيق الفيديوهات */
+      .video-card {
+        border: 1px solid #ccc;
+        padding: 15px;
+        margin: 10px;
+        border-radius: 5px;
+        width: 300px;
+        display: inline-block;
+        vertical-align: top;
+      }
+
+      .video-card img {
+        width: 100%;
+        border-radius: 5px;
+      }
+
+      .video-card h4 {
+        margin: 10px 0;
+      }
+
+      .video-card p {
+        margin: 5px 0;
+      }
+
+      .uploader_image {
+        border-radius: 50%;
+        width: 30px;
+        height: 30px;
+        margin-top: 10px;
+        margin-left: 10px;
+      }
+
+      /* تنسيق الأزرار */
+      .video-actions {
+        margin-top: 10px;
+      }
+
+      .video-actions button {
+        margin-right: 10px;
+        padding: 5px 10px;
+        background-color: #007bff;
+        color: white;
+        border: none;
+        border-radius: 5px;
+        cursor: pointer;
+      }
+
+      .video-actions button:hover {
+        background-color: #0056b3;
+      }
+
+      /* تنسيق الـ Modals */
+      .modal {
+        display: none;
+        position: fixed;
+        z-index: 1000;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.5);
+      }
+
+      .close-edit,
+      .close-delete {
+        float: right;
+        cursor: pointer;
+        font-size: 24px;
+      }
+
+      .close-edit:hover,
+      .close-delete:hover {
+        color: #000;
+      }
+
+      /* تنسيق عام لـ Modals */
+      .custom-modal {
+        display: none; /* يتم إخفاء الـ Modal بشكل افتراضي */
+        position: fixed;
+        z-index: 1000;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.6); /* خلفية شبه شفافة داكنة */
+        backdrop-filter: blur(5px); /* تأثير ضبابي */
+        overflow: auto;
+      }
+
+      /* تنسيق محتوى الـ Modal */
+      .custom-modal-content {
+        position: absolute;
+        top: 50%;
+        transform: translate(0, -50%);
+        background-color: #fff;
+        margin: 0%;
+        padding: 10px 0px;
+        /* border-radius: 12px; */
+        width: 100%;
+        max-width: 500px;
+        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+        /* animation: fadeIn 0.3s ease-in-out; */
+        height: fit-content;
+      }
+
+      .custom-modal-content-delete {
+        background-color: #fff;
+        margin: 0%;
+        padding: 25px;
+        /* border-radius: 12px; */
+        width: 90%;
+        max-width: 500px;
+        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+        animation: fadeInDelete 0.3s ease-in-out;
+      }
+
+      @keyframes fadeIn {
+        from {
+          opacity: 0;
+          /* transform: translateY(-20px); */
+        }
+        to {
+          opacity: 1;
+          /* transform: translateY(0); */
+        }
+      }
+
+      @keyframes fadeInDelete {
+        from {
+          opacity: 0;
+          transform: translateY(-20px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
+      /* تنسيق عنوان الـ Modal */
+      .modal-title {
+        font-size: 1.5rem;
+        color: #333;
+        margin-bottom: 20px;
+        text-align: center;
+      }
+
+      /* تنسيق حقل الإدخال */
+      .modal-input {
+        width: 80%;
+        padding: 10px 3px;
+        margin-bottom: 20px;
+        border: 1px solid #ddd;
+        border-radius: 8px;
+        font-size: 1rem;
+        outline: none;
+        transition: border-color 0.3s ease;
+      }
+
+      .modal-input:focus {
+        border-color: #007bff;
+      }
+
+      /* تنسيق الأزرار */
+      .modal-button {
+        padding: 10px 20px;
+        border: none;
+        border-radius: 8px;
+        font-size: 1rem;
+        cursor: pointer;
+        transition: background-color 0.3s ease, transform 0.2s ease;
+      }
+
+      .modal-button:hover {
+        transform: scale(1.05);
+      }
+
+      .modal-button:active {
+        transform: scale(0.95);
+      }
+
+      .modal-button-save {
+        background-color: #007bff;
+        color: #fff;
+        width: 80%;
+      }
+
+      .modal-button-save:hover {
+        background-color: #0056b3;
+      }
+
+      .modal-button-delete {
+        background-color: #ff4d4d;
+        color: #fff;
+      }
+
+      .modal-button-delete:hover {
+        background-color: #cc0000;
+      }
+
+      .modal-button-cancel {
+        background-color: #f1f1f1;
+        color: #333;
+      }
+
+      .modal-button-cancel:hover {
+        background-color: #ddd;
+      }
+
+      /* تنسيق زر الإغلاق */
+      .custom-close {
+        position: absolute;
+        top: 15px;
+        right: 15px;
+        font-size: 1.5rem;
+        color: #888;
+        cursor: pointer;
+        transition: color 0.3s ease;
+      }
+
+      .custom-close:hover {
+        color: #333;
+      }
+
+      /* تنسيق أزرار التأكيد والإلغاء */
+      .modal-buttons {
+        display: flex;
+        justify-content: space-between;
+        gap: 10px;
+        margin-top: 20px;
+      }
+
+      /* تأثير الظهور */
+      @keyframes fadeIn {
+        0% {
+          opacity: 0;
+          transform: scale(0.8);
+        }
+        100% {
+          opacity: 1;
+          transform: scale(1);
+        }
+      }
+
+      /* أسلوب المودال */
+      .modal-message {
+        display: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.5); /* خلفية مظللة */
+        justify-content: center;
+        align-items: center;
+        z-index: 1000;
+        animation: fadeIn 0.3s ease-in-out; /* تطبيق الأنيميشن عند الظهور */
+      }
+
+      /* محتوى المودال */
+      .modal-content-main {
+        background-color: white;
+        padding: 25px;
+        border-radius: 8px;
+        text-align: center;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        max-width: 400px;
+        width: 100%;
+      }
+
+      /* أيقونة النجاح */
+      .modal-icon {
+        font-size: 50px;
+        color: #4caf50;
+        margin-bottom: 15px;
+        animation: bounce 1s infinite; /* تأثير اهتزاز */
+      }
+
+      /* تأثير الاهتزاز */
+      @keyframes bounce {
+        0%,
+        100% {
+          transform: translateY(0);
+        }
+        50% {
+          transform: translateY(-10px);
+        }
+      }
+
+      /* إغلاق المودال */
+      .close-message {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        font-size: 25px;
+        cursor: pointer;
+        color: #888;
+        transition: color 0.3s ease;
+      }
+
+      /* تغيير اللون عند التمرير */
+      .close-message:hover {
+        color: #333;
+      }
+
+      /* رسالة النص */
+      #message-content {
+        font-size: 1.2rem;
+        margin-top: 10px;
+        color: #333;
+      }
+
+      /* إضافة الأنيميشن عند التفاعل مع الأزرار */
+      .modal-buttons {
+        display: flex;
+        justify-content: space-between;
+        gap: 10px;
+        margin-top: 20px;
+      }
+
+      /* تنسيق Modal قوائم التشغيل */
+      /* تنسيق Modal قوائم التشغيل */
+      #playlistModal {
+        display: none;
+        position: fixed;
+        z-index: 1000;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.5);
+      }
+
+      .modal-content-playlist {
+        background-color: #fff;
+        margin: 10% auto;
+        padding: 20px;
+        border-radius: 10px;
+        width: 80%;
+        max-width: 500px;
+      }
+
+      .close-playlist {
+        float: right;
+        font-size: 24px;
+        cursor: pointer;
+      }
+
+      .create-playlist {
+        margin-bottom: 20px;
+      }
+
+      .create-playlist input,
+      .create-playlist select {
+        width: 100%;
+        padding: 10px;
+        margin-bottom: 10px;
+        border: 1px solid #ddd;
+        border-radius: 5px;
+      }
+
+      .create-playlist button {
+        width: 100%;
+        padding: 10px;
+        background-color: #007bff;
+        color: #fff;
+        border: none;
+        border-radius: 5px;
+        cursor: pointer;
+      }
+
+      .existing-playlists ul {
+        list-style-type: none;
+        padding: 0;
+      }
+
+      .existing-playlists li {
+        margin-bottom: 10px;
+      }
+
+      .existing-playlists label {
+        display: flex;
+        align-items: center;
+      }
+
+      .existing-playlists input[type="checkbox"] {
+        margin-right: 10px;
+      }
+
+      #addToSelectedPlaylists {
+        width: 100%;
+        padding: 10px;
+        background-color: #28a745;
+        color: #fff;
+        border: none;
+        border-radius: 5px;
+        cursor: pointer;
+        margin-top: 20px;
+      }
+
+      .delete-playlist {
+        background-color: #ff4d4d;
+        color: white;
+        border: none;
+        padding: 5px 10px;
+        border-radius: 5px;
+        cursor: pointer;
+        margin-left: 10px;
+      }
+
+      .delete-playlist:hover {
+        background-color: #cc0000;
+      }
+
+
+
+        /* أنماط النماذج (Modals) */
+        .modal-unique {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.5);
+            justify-content: center;
+            align-items: center;
+            overflow: scroll;
+        }
+        .modal-content-unique {
+          position: absolute;
+        top: 50%;
+        transform: translate(0, -50%);
+        background-color: #fff;
+        margin: 0%;
+        padding: 10px 0px;
+        /* border-radius: 12px; */
+        width: 100%;
+        max-width: 500px;
+        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+        /* animation: fadeIn 0.3s ease-in-out; */
+        height: 100%;
+        /* overflow: hidden; */
+        }
+
+
+        
+        .close-unique {
+            /* position: absolute; */
+           
+         
+            font-size: 20px;
+            cursor: pointer;
+        }
+
+        /* أنماط قائمة التشغيل */
+        .playlist-item-unique {
+            padding: 10px;
+            border-bottom: 1px solid #ddd;
+            cursor: pointer;
+        }
+        .playlist-item-unique:hover {
+            background: #f1f1f1;
+        }
+
+     
+        .video-list-unique {
+            margin-top: 20px;
+        }
+        .video-item-unique {
+            display: flex;
+            align-items: center;
+            /* margin-bottom: 10px; */
+            background-color: #bdb8b8;        
+            cursor: pointer;
+        }
+        .video-item-unique img {
+            width: 120px;
+            height: 90px;
+            margin-right: 10px;
+        }
+
+
+        .video-item-unique.active {
+    background-color: #f0f0f0;  /* تغيير خلفية الفيديو النشط */
+    border: 2px solid #007bff;  /* إضافة حدود للفيديو النشط */
+}
+
+#videosModal{
+  /* overflow: hidden; */
+}
+
+#videosList{
+  overflow: scroll;
+}
+
+
+/* anmation loading vidoes to upload */
+
+:root {
+	--bg: hsl(90,90%,20%);
+	--fg: hsl(223,10%,10%);
+	font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320));
+}
+
+.wheel-and-hamster {
+	--dur: 1s;
+	position: relative;
+	width: 12em;
+	height: 12em;
+}
+.wheel,
+.hamster,
+.hamster div,
+.spoke {
+	position: absolute;
+}
+.wheel,
+.spoke {
+	border-radius: 50%;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+.wheel {
+	background: radial-gradient(100% 100% at center,hsla(0,0%,60%,0) 47.8%,hsl(0,0%,60%) 48%);
+	z-index: 2;
+}
+.hamster {
+	animation: hamster var(--dur) ease-in-out infinite;
+	top: 50%;
+	left: calc(50% - 3.5em);
+	width: 7em;
+	height: 3.75em;
+	transform: rotate(4deg) translate(-0.8em,1.85em);
+	transform-origin: 50% 0;
+	z-index: 1;
+}
+.hamster__head {
+	animation: hamsterHead var(--dur) ease-in-out infinite;
+	background: hsl(30,90%,55%);
+	border-radius: 70% 30% 0 100% / 40% 25% 25% 60%;
+	box-shadow:
+		0 -0.25em 0 hsl(30,90%,80%) inset,
+		0.75em -1.55em 0 hsl(30,90%,90%) inset;
+	top: 0;
+	left: -2em;
+	width: 2.75em;
+	height: 2.5em;
+	transform-origin: 100% 50%;
+}
+.hamster__ear {
+	animation: hamsterEar var(--dur) ease-in-out infinite;
+	background: hsl(0,90%,85%);
+	border-radius: 50%;
+	box-shadow: -0.25em 0 hsl(30,90%,55%) inset;
+	top: -0.25em;
+	right: -0.25em;
+	width: 0.75em;
+	height: 0.75em;
+	transform-origin: 50% 75%;
+}
+.hamster__eye {
+	animation: hamsterEye var(--dur) linear infinite;
+	background-color: hsl(0,0%,0%);
+	border-radius: 50%;
+	top: 0.375em;
+	left: 1.25em;
+	width: 0.5em;
+	height: 0.5em;
+}
+.hamster__nose {
+	background: hsl(0,90%,75%);
+	border-radius: 35% 65% 85% 15% / 70% 50% 50% 30%;
+	top: 0.75em;
+	left: 0;
+	width: 0.2em;
+	height: 0.25em;
+}
+.hamster__body {
+	animation: hamsterBody var(--dur) ease-in-out infinite;
+	background: hsl(30,90%,90%);
+	border-radius: 50% 30% 50% 30% / 15% 60% 40% 40%;
+	box-shadow:
+		0.1em 0.75em 0 hsl(30,90%,55%) inset,
+		0.15em -0.5em 0 hsl(30,90%,80%) inset;
+	top: 0.25em;
+	left: 2em;
+	width: 4.5em;
+	height: 3em;
+	transform-origin: 17% 50%;
+	transform-style: preserve-3d;
+}
+.hamster__limb--fr,
+.hamster__limb--fl {
+	clip-path: polygon(0 0,100% 0,70% 80%,60% 100%,0% 100%,40% 80%);
+	top: 2em;
+	left: 0.5em;
+	width: 1em;
+	height: 1.5em;
+	transform-origin: 50% 0;
+}
+.hamster__limb--fr {
+	animation: hamsterFRLimb var(--dur) linear infinite;
+	background: linear-gradient(hsl(30,90%,80%) 80%,hsl(0,90%,75%) 80%);
+	transform: rotate(15deg) translateZ(-1px);
+}
+.hamster__limb--fl {
+	animation: hamsterFLLimb var(--dur) linear infinite;
+	background: linear-gradient(hsl(30,90%,90%) 80%,hsl(0,90%,85%) 80%);
+	transform: rotate(15deg);
+}
+.hamster__limb--br,
+.hamster__limb--bl {
+	border-radius: 0.75em 0.75em 0 0;
+	clip-path: polygon(0 0,100% 0,100% 30%,70% 90%,70% 100%,30% 100%,40% 90%,0% 30%);
+	top: 1em;
+	left: 2.8em;
+	width: 1.5em;
+	height: 2.5em;
+	transform-origin: 50% 30%;
+}
+.hamster__limb--br {
+	animation: hamsterBRLimb var(--dur) linear infinite;
+	background: linear-gradient(hsl(30,90%,80%) 90%,hsl(0,90%,75%) 90%);
+	transform: rotate(-25deg) translateZ(-1px);
+}
+.hamster__limb--bl {
+	animation: hamsterBLLimb var(--dur) linear infinite;
+	background: linear-gradient(hsl(30,90%,90%) 90%,hsl(0,90%,85%) 90%);
+	transform: rotate(-25deg);
+}
+.hamster__tail {
+	animation: hamsterTail var(--dur) linear infinite;
+	background: hsl(0,90%,85%);
+	border-radius: 0.25em 50% 50% 0.25em;
+	box-shadow: 0 -0.2em 0 hsl(0,90%,75%) inset;
+	top: 1.5em;
+	right: -0.5em;
+	width: 1em;
+	height: 0.5em;
+	transform: rotate(30deg) translateZ(-1px);
+	transform-origin: 0.25em 0.25em;
+}
+.spoke {
+	animation: spoke var(--dur) linear infinite;
+	background:
+		radial-gradient(100% 100% at center,hsl(0,0%,60%) 4.8%,hsla(0,0%,60%,0) 5%),
+		linear-gradient(hsla(0,0%,55%,0) 46.9%,hsl(0,0%,65%) 47% 52.9%,hsla(0,0%,65%,0) 53%) 50% 50% / 99% 99% no-repeat;
+}
+
+/* Animations */
+@keyframes hamster {
+	from, to { transform: rotate(4deg) translate(-0.8em,1.85em); }
+	50% { transform: rotate(0) translate(-0.8em,1.85em); }
+}
+@keyframes hamsterHead {
+	from, 25%, 50%, 75%, to { transform: rotate(0); }
+	12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(8deg); }
+}
+@keyframes hamsterEye {
+	from, 90%, to { transform: scaleY(1); }
+	95% { transform: scaleY(0); }
+}
+@keyframes hamsterEar {
+	from, 25%, 50%, 75%, to { transform: rotate(0); }
+	12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(12deg); }
+}
+@keyframes hamsterBody {
+	from, 25%, 50%, 75%, to { transform: rotate(0); }
+	12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(-2deg); }
+}
+@keyframes hamsterFRLimb {
+	from, 25%, 50%, 75%, to { transform: rotate(50deg) translateZ(-1px); }
+	12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(-30deg) translateZ(-1px); }
+}
+@keyframes hamsterFLLimb {
+	from, 25%, 50%, 75%, to { transform: rotate(-30deg); }
+	12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(50deg); }
+}
+@keyframes hamsterBRLimb {
+	from, 25%, 50%, 75%, to { transform: rotate(-60deg) translateZ(-1px); }
+	12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(20deg) translateZ(-1px); }
+}
+@keyframes hamsterBLLimb {
+	from, 25%, 50%, 75%, to { transform: rotate(20deg); }
+	12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(-60deg); }
+}
+@keyframes hamsterTail {
+	from, 25%, 50%, 75%, to { transform: rotate(30deg) translateZ(-1px); }
+	12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(10deg) translateZ(-1px); }
+}
+@keyframes spoke {
+	from { transform: rotate(0); }
+	to { transform: rotate(-1turn); }
+}
+
+.main-anmi-loading{
+  background: var(--bg);
+    color: var(--fg);
+    font: 1em / 1.5 sans-serif;
+    height: 100vh;
+    display: grid;
+    place-items: center;
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    display: none;
+}
+
+    </style>
+  </head>
+  <body>
+    <div class="main-anmi-loading">
+
+    <div class="wheel-and-hamster" role="img" aria-label="Orange and tan hamster running in a metal wheel">
+      <div class="wheel"></div>
+      <div class="hamster">
+        <div class="hamster__body">
+          <div class="hamster__head">
+            <div class="hamster__ear"></div>
+            <div class="hamster__eye"></div>
+            <div class="hamster__nose"></div>
+          </div>
+          <div class="hamster__limb hamster__limb--fr"></div>
+          <div class="hamster__limb hamster__limb--fl"></div>
+          <div class="hamster__limb hamster__limb--br"></div>
+          <div class="hamster__limb hamster__limb--bl"></div>
+          <div class="hamster__tail"></div>
+        </div>
+      </div>
+      <div class="spoke"></div>
+    </div>
+
+      
+  </div>
+    <!-- Video Modal -->
+    <!-- Video Modal -->
+    <div id="videoModal" class="modal">
+      <div class="modal-content">
+        <span class="close">&times;</span>
+        <video autoplay id="videoPlayer" controls>
+          <source id="videoSource" type="video/mp4" />
+          Your browser does not support the video tag.
+        </video>
+        <div id="videoInfo">
+          <h3 id="videoTitle"></h3>
+          <p id="videoCategory"></p>
+          <p id="uploadTime"></p>
+          <div id="uploaderInfo">
+            <p>Uploaded by: <span id="uploaderName"></span></p>
+            <img
+              id="uploaderImage"
+              src=""
+              alt="Uploader Image"
+              class="uploader_image"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- نموذج رفع الفيديو -->
+    <div class="upload-form">
+<!-- حقل البحث -->
+<input type="text" id="searchInput" placeholder="ابحث عن الفيديوهات..." />
+<br>
+<br>
+
+<!-- زر لعرض قوائم التشغيل العامة -->
+<button id="showPlaylistsBtn">عرض القوائم العامة</button>
+
+<!-- زر لعرض قوائم التشغيل الخاصة بالمستخدم الحالي -->
+<!-- زر جديد لعرض قوائم التشغيل الخاصة بالمستخدم -->
+<button id="showUserPlaylistsBtn">عرض قوائم التشغيل الخاصة بي</button>
+
+<div class="loading_model" id="loading_upload_model" style="display: none;">
+  <div class="progress-circle" id="progress-circle">
+    <span id="progress-percentage">0%</span>
+  </div>
+</div>
+<h3>Upload a Video</h3>
+<form id="upload-form" action="/videos" method="POST" enctype="multipart/form-data">
+    <label for="title">Video Title:</label>
+    <input type="text" name="title" id="title" required />
+    <br /><br />
+    <label for="video">Select Video:</label>
+    <input type="file" name="video" id="video" required />
+    <br /><br />
+    <label for="thumbnail">Select Thumbnail (optional):</label>
+    <input type="file" name="thumbnail" id="thumbnail" />
+    <br /><br />
+    <button type="submit">Upload</button>
+</form>
+
+    <!-- عرض الفيديوهات -->
+    <p id="no-results-message" style="display: none;">لا توجد نتائج للبحث</p>
+    <div id="video-container" class="video-container">
+
+      <!-- Skeleton Loading -->
+      {% for _ in range(5) %}
+      <div class="skeleton skeleton-card"></div>
+      {% endfor %}
+    </div>
+
+    <!-- رسالة عند عدم وجود فيديوهات -->
+    <div id="empty-message" class="empty-message" style="display: none">
+      No videos found.
+    </div>
+
+    <!-- Modal لتعديل الفيديو -->
+    <div id="editModal" class="modal custom-modal">
+      <div class="modal-content custom-modal-content">
+        <span class="close-edit custom-close">&times;</span>
+        <h2 class="modal-title">تعديل عنوان الفيديو</h2>
+        <input
+          type="text"
+          id="editTitle"
+          class="modal-input"
+          placeholder="العنوان الجديد"
+        />
+        <button id="saveEdit" class="modal-button modal-button-save">
+          حفظ
+        </button>
+      </div>
+    </div>
+
+    <!-- Modal لتأكيد الحذف -->
+    <div id="deleteModal" class="custom-modal">
+      <div class="custom-modal-content-delete">
+        <span class="close-delete custom-close">&times;</span>
+        <h2 class="modal-title">هل أنت متأكد من حذف الفيديو؟</h2>
+        <div class="modal-buttons">
+          <button id="confirmDelete" class="modal-button modal-button-delete">
+            نعم، احذف
+          </button>
+          <button id="cancelDelete" class="modal-button modal-button-cancel">
+            إلغاء
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Modal Message -->
+    <!-- Modal Message -->
+    <div id="model-message-success" class="modal-message">
+      <div class="modal-content-main">
+        <span class="close-message">&times;</span>
+        <!-- أيقونة الصح مع الرسالة -->
+        <div class="modal-icon">
+          <i class="fas fa-check-circle success-icon"></i>
+        </div>
+        <p id="message-content"></p>
+      </div>
+    </div>
+
+    <!-- Modal لإضافة الفيديو إلى قائمة التشغيل -->
+    <div id="playlistModal" class="modal">
+        <div class="modal-content-playlist">
+            <span class="close-playlist">&times;</span>
+            <h2>إضافة إلى قائمة التشغيل</h2>
+    
+            <!-- إنشاء قائمة تشغيل جديدة -->
+            <div class="create-playlist">
+                <input type="text" id="newPlaylistName" placeholder="اسم قائمة التشغيل الجديدة" />
+                <select id="playlistVisibility">
+                    <option value="public">عامة</option>
+                    <option value="private">خاصة</option>
+                </select>
+                <button id="createPlaylist">إنشاء قائمة</button>
+            </div>
+    
+            <!-- قوائم التشغيل الحالية -->
+            <div class="existing-playlists">
+                <h3>قوائم التشغيل الحالية</h3>
+                <ul id="playlistList"></ul>
+            </div>
+        </div>
+    </div>
+
+
+
+    <!-- Modal لقوائم التشغيل -->
+    <div id="playlistsModal" class="modal-unique">
+      <div class="modal-content-unique">
+          <h2>Playlists</h2>
+          <button class="close-unique" onclick="closeModalUnique('playlistsModal')">&times;</button>
+
+          <!-- حقل البحث -->
+          <input 
+              type="text" 
+              id="searchPlaylistsInput" 
+              placeholder="ابحث عن قائمة تشغيل..." 
+              style="width: 100%; margin-bottom: 10px; padding: 8px; border: 1px solid #ccc; border-radius: 5px;">
+          <ul id="playlistsList"></ul>
+      </div>
+    </div>
+    
+<!-- Modal للفيديوهات -->
+<!-- نافذة الـ Modal الخاصة بالفيديوهات -->
+<div id="videosModal" class="modal-unique">
+  
+  <div class="modal-content-unique">
+
+      <div id="videoPlayerContainer">
+        <!-- محتوى الفيديو هنا -->
+         
+        <video id="videoPlayer2" class="video-player-unique" controls></video>
+        <button class="close-unique" onclick="closeModalUnique('videosModal')">&times;</button>
+
+        <div id="videoDetails" class="mt-3"></div>
+      </div>
+
+      <div id="videosList" class="video-list-unique"></div>
+  </div>
+</div>
+
+
+    <script>
+   document.addEventListener("DOMContentLoaded", function () {
+  // جلب الفيديوهات باستخدام AJAX بعد تحميل الصفحة
+  fetch("/get_videos")
+    .then((response) => response.json())
+    .then((data) => {
+      console.log("Fetched videos data:", data); // تحقق من البيانات هنا
+      const videoContainer = document.getElementById("video-container");
+      const emptyMessage = document.getElementById("empty-message");
+      const noResultsMessage = document.getElementById("no-results-message");
+
+      // إزالة السكلتون إذا كانت هناك فيديوهات
+      if (data.length > 0) {
+        videoContainer.innerHTML = ""; // مسح السكلتون
+        data.forEach((video) => {
+          console.log("Video data:", video); // تحقق من كل فيديو
+          const videoCard = document.createElement("div");
+          videoCard.classList.add("video-card");
+          videoCard.innerHTML = `
+            <img src="${video.thumbnail}" alt="Thumbnail">
+            <h4>${video.uploader_name}</h4>
+            <p><strong>Title:</strong> ${video.title}</p>
+            <p><strong>Category:</strong> ${video.category}</p>
+            <p>${video.upload_time}</p>
+            <img class="uploader_image" src="${video.uploader_image}" alt="User Image" width="50">
+
+            <!-- الأزرار -->
+            <div class="video-actions">
+                ${
+                  video.is_owner
+                    ? `
+                      <button class="edit-video" data-video-id="${video.id}">تعديل</button>
+                      <button class="delete-video" data-video-id="${video.id}">حذف</button>
+                    `
+                    : ""
+                }
+                <button class="add-to-playlist" data-video-id="${video.id}">إضافة إلى قائمة التشغيل</button>
+            </div>
+          `;
+          videoContainer.appendChild(videoCard);
+
+          // إضافة أحداث للأزرار
+          if (video.is_owner) {
+            const editButton = videoCard.querySelector(".edit-video");
+            const deleteButton = videoCard.querySelector(".delete-video");
+
+            editButton.addEventListener("click", function (e) {
+              e.stopPropagation(); // منع انتشار الحدث إلى الفيديو
+              openEditModal(video);
+            });
+
+            deleteButton.addEventListener("click", function (e) {
+              e.stopPropagation(); // منع انتشار الحدث إلى الفيديو
+              openDeleteModal(video);
+            });
+          }
+
+          const addToPlaylistButton = videoCard.querySelector(".add-to-playlist");
+          addToPlaylistButton.addEventListener("click", function (e) {
+            e.stopPropagation(); // منع انتشار الحدث إلى الفيديو
+            addToPlaylist(video); // فتح Modal قوائم التشغيل
+          });
+
+          // إضافة حدث عند النقر على الفيديو لفتح الـ Modal
+          videoCard.addEventListener("click", function () {
+            openModal(video);
+          });
+
+          // إضافة خصائص مميزة لكل فيديو
+          videoCard.dataset.title = video.title.toLowerCase(); // حفظ العنوان داخل الـ dataset
+          videoCard.dataset.category = video.category.toLowerCase(); // حفظ الفئة داخل الـ dataset
+        });
+
+        // إضافة حدث البحث على النص المدخل
+        const searchInput = document.getElementById("searchInput");
+        searchInput.addEventListener("input", function () {
+          const searchTerm = searchInput.value.trim().toLowerCase(); // النص المدخل
+          let resultsFound = false; // متغير لتتبع ما إذا كانت هناك نتائج أم لا
+
+          // إخفاء الفيديوهات التي لا تتطابق مع النص المدخل
+          const videoCards = videoContainer.querySelectorAll(".video-card");
+          videoCards.forEach((videoCard) => {
+            const title = videoCard.dataset.title; // الحصول على العنوان المخزن
+            const category = videoCard.dataset.category; // الحصول على الفئة المخزنة
+
+            // إذا كان هناك تطابق مع النص المدخل، إظهار الفيديو
+            if (title.includes(searchTerm) || category.includes(searchTerm)) {
+              videoCard.style.display = "block"; // إظهار الفيديو إذا كان متوافقًا مع البحث
+              resultsFound = true; // هناك نتائج
+            } else {
+              videoCard.style.display = "none"; // إخفاء الفيديو إذا لم يتوافق مع البحث
+            }
+          });
+
+          // إظهار أو إخفاء رسالة "لا توجد نتائج"
+          if (resultsFound) {
+            noResultsMessage.style.display = "none"; // إخفاء الرسالة إذا كانت هناك نتائج
+          } else {
+            noResultsMessage.style.display = "block"; // إظهار الرسالة إذا لم توجد نتائج
+          }
+        });
+      } else {
+        // إذا لم توجد فيديوهات، إظهار رسالة فارغة
+        setTimeout(() => {
+          videoContainer.innerHTML = ""; // مسح السكلتون
+          emptyMessage.style.display = "block"; // عرض الرسالة
+        }, 1000); // تأخير 1 ثانية
+      }
+    })
+    .catch((error) => {
+      console.error("Error fetching videos:", error);
+      const videoContainer = document.getElementById("video-container");
+      videoContainer.innerHTML = ""; // مسح السكلتون في حالة حدوث خطأ
+      const emptyMessage = document.getElementById("empty-message");
+      emptyMessage.textContent =
+        "Failed to load videos. Please try again later.";
+      emptyMessage.style.display = "block";
+    });
+});
+
+
+    // وظيفة البحث داخل قوائم التشغيل
+    document.getElementById('searchPlaylistsInput').addEventListener('input', function() {
+            const searchTerm = this.value.toLowerCase();
+            const items = document.querySelectorAll('.playlist-item-unique');
+            
+            items.forEach(item => {
+                const playlistName = item.textContent.toLowerCase();
+                if (playlistName.includes(searchTerm)) {
+                    item.style.display = 'list-item';
+                } else {
+                    item.style.display = 'none';
+                }
+            });
+        });
+
+      // دالة لفتح الـ Modal عند النقر على الفيديو
+      function openModal(video) {
+        const modal = document.getElementById("videoModal");
+        const videoPlayer = document.getElementById("videoPlayer");
+        const videoTitle = document.getElementById("videoTitle");
+        const videoCategory = document.getElementById("videoCategory");
+        const uploadTime = document.getElementById("uploadTime");
+        const uploaderName = document.getElementById("uploaderName");
+        const uploaderImage = document.getElementById("uploaderImage");
+        const videoSource = document.getElementById("videoSource");
+
+        // عرض الـ Modal مع أنيميشن
+        modal.style.display = "block";
+        modal.classList.remove("close-animation"); // إزالة التأثير عند الإغلاق
+
+        // تحديث البيانات فقط بعد عرض المودال
+        setTimeout(() => {
+          // تحديث مصدر الفيديو بشكل غير متزامن
+          videoSource.src = video.video_path;
+          videoPlayer.load(); // إعادة تحميل الفيديو (يبدأ التحميل)
+
+          // تحديث النصوص التفصيلية
+          videoTitle.textContent = video.title;
+          videoCategory.textContent = `Category: ${video.category}`;
+          uploadTime.textContent = `Uploaded on: ${video.upload_time}`;
+          uploaderName.textContent = video.uploader_name;
+          uploaderImage.src = video.uploader_image;
+        }, 50); // إضافة تأخير بسيط لكي يظهر المودال بسرعة قبل تحميل الفيديو
+      }
+
+      // غلق الـ Modal عند النقر على زر الإغلاق
+      document.querySelector(".close").addEventListener("click", function () {
+        const modal = document.getElementById("videoModal");
+        modal.classList.add("close-animation"); // إضافة التأثير عند الإغلاق
+
+        const videoSource = document.getElementById("videoSource");
+        const videoPlayer = document.getElementById("videoPlayer");
+
+        // إزالة مصدر الفيديو لعدم تحميله في الخلفية
+        videoSource.src = "";
+        videoPlayer.load(); // إيقاف تحميل الفيديو
+
+        // تأخير إخفاء المودال حتى تنتهي الأنيميشن
+        setTimeout(() => {
+          modal.style.display = "none";
+        }, 200); // تأخير يتناسب مع مدة الأنيميشن (0.3 ثانية)
+      });
+
+      function showMessage(message, isSuccess) {
+        const modal = document.getElementById("model-message-success");
+        const messageContent = document.getElementById("message-content");
+        const closeButton = document.querySelector(".close-message");
+        const successIcon = document.querySelector(".success-icon");
+
+        // تغيير محتوى الرسالة بناءً على النجاح أو الفشل
+        messageContent.textContent = message;
+
+        // تغيير الأيقونة بناءً على النجاح أو الفشل
+        if (isSuccess) {
+          successIcon.classList.remove("fa-times-circle");
+          successIcon.classList.add("fa-check-circle");
+          successIcon.style.color = "#4CAF50"; // الأخضر للنجاح
+        } else {
+          successIcon.classList.remove("fa-check-circle");
+          successIcon.classList.add("fa-times-circle");
+          successIcon.style.color = "#F44336"; // الأحمر للفشل
+        }
+
+        // إظهار المودال
+        modal.style.display = "flex";
+
+        // إغلاق المودال عند الضغط على زر الإغلاق
+        closeButton.onclick = function () {
+          modal.style.display = "none";
+        };
+
+        // إغلاق المودال بعد 3 ثواني
+        setTimeout(function () {
+          modal.style.display = "none";
+        }, 1000);
+      }
+
+      // دالة لفتح Modal التعديل
+      function openEditModal(video) {
+        const editModal = document.getElementById("editModal");
+        const editTitleInput = document.getElementById("editTitle");
+        editTitleInput.value = video.title; // تعبئة العنوان الحالي
+        editModal.style.display = "block";
+
+        // إغلاق Modal التعديل عند النقر على زر الإغلاق
+        const closeEditButton = document.querySelector(".close-edit");
+        closeEditButton.addEventListener("click", function () {
+          editModal.style.display = "none";
+        });
+
+        // حفظ التعديلات
+        const saveEditButton = document.getElementById("saveEdit");
+        saveEditButton.onclick = function () {
+          const newTitle = editTitleInput.value;
+          if (newTitle) {
+            fetch(`/edit_video/${video.id}`, {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+              },
+              body: JSON.stringify({ title: newTitle }),
+            })
+              .then((response) => response.json())
+              .then((data) => {
+                if (data.success) {
+                  showMessage("تم تعديل العنوان بنجاح", true); // عرض رسالة النجاح
+                  editModal.style.display = "none";
+                  location.reload(); // إعادة تحميل الصفحة لتحديث البيانات
+                } else {
+                  showMessage("حدث خطأ أثناء تعديل العنوان", false); // عرض رسالة الفشل
+                }
+              });
+          }
+        };
+      }
+
+      // دالة لفتح Modal الحذف
+      function openDeleteModal(video) {
+        const deleteModal = document.getElementById("deleteModal");
+        deleteModal.style.display = "block";
+
+        // إغلاق Modal الحذف عند النقر على زر الإغلاق
+        const closeDeleteButton = document.querySelector(".close-delete");
+        closeDeleteButton.addEventListener("click", function () {
+          deleteModal.style.display = "none";
+        });
+
+        // تأكيد الحذف
+        const confirmDeleteButton = document.getElementById("confirmDelete");
+        confirmDeleteButton.onclick = function () {
+          fetch(`/delete_video/${video.id}`, {
+            method: "DELETE",
+          })
+            .then((response) => response.json())
+            .then((data) => {
+              if (data.success) {
+                showMessage("تم الحذف بنجاح", true); // عرض رسالة النجاح
+                deleteModal.style.display = "none";
+                location.reload(); // إعادة تحميل الصفحة لتحديث البيانات
+              }
+            });
+        };
+
+        // إلغاء الحذف
+        const cancelDeleteButton = document.getElementById("cancelDelete");
+        cancelDeleteButton.onclick = function () {
+          deleteModal.style.display = "none";
+        };
+      }
+
+
+
+
+      // دالة لفتح Modal قوائم التشغيل
+// دالة لفتح Modal قوائم التشغيل
+function openPlaylistModal(video) {
+    const modal = document.getElementById("playlistModal");
+    modal.style.display = "block";
+
+    // إغلاق Modal عند النقر على زر الإغلاق
+    const closeButton = document.querySelector(".close-playlist");
+    closeButton.onclick = function () {
+        modal.style.display = "none";
+    };
+
+    // دالة لتحديث قوائم التشغيل في الواجهة
+    function updatePlaylists() {
+        fetch(`/get_playlists_with_video_status/${video.id}`)
+            .then((response) => response.json())
+            .then((data) => {
+                const playlistList = document.getElementById("playlistList");
+                playlistList.innerHTML = ""; // مسح القوائم القديمة
+
+                data.forEach((playlist) => {
+                    const listItem = document.createElement("li");
+                    listItem.innerHTML = `
+                        <label>
+                            <input type="checkbox" class="playlist-checkbox" 
+                                   data-playlist-id="${playlist.id}" 
+                                   ${playlist.video_exists ? "checked" : ""}>
+                            ${playlist.name} (${playlist.is_public ? "عامة" : "خاصة"})
+                        </label>
+                        <button class="delete-playlist" data-playlist-id="${playlist.id}">حذف</button>
+                    `;
+                    playlistList.appendChild(listItem);
+
+                    // إضافة حدث تغيير الـ Checkbox
+                    const checkbox = listItem.querySelector(".playlist-checkbox");
+                    checkbox.addEventListener("change", function (e) {
+                        const playlistId = checkbox.getAttribute("data-playlist-id");
+                        const isChecked = checkbox.checked;
+
+                        if (isChecked) {
+                            // إضافة الفيديو إلى القائمة
+                            fetch(`/add_video_to_playlist/${playlistId}/${video.id}`, {
+                                method: "POST",
+                            })
+                                .then((response) => response.json())
+                                .then((data) => {
+                                    if (data.success) {
+                                        console.log(`تمت إضافة الفيديو إلى القائمة ${playlistId}`);
+                                    }
+                                });
+                        } else {
+                            // إزالة الفيديو من القائمة
+                            fetch(`/remove_video_from_playlist/${playlistId}/${video.id}`, {
+                                method: "DELETE",
+                            })
+                                .then((response) => response.json())
+                                .then((data) => {
+                                    if (data.success) {
+                                        console.log(`تمت إزالة الفيديو من القائمة ${playlistId}`);
+                                    }
+                                });
+                        }
+                    });
+
+                    // إضافة حدث حذف قائمة التشغيل
+                    const deleteButton = listItem.querySelector(".delete-playlist");
+                    deleteButton.addEventListener("click", function (e) {
+                        e.stopPropagation(); // منع انتشار الحدث
+                        const playlistId = deleteButton.getAttribute("data-playlist-id");
+                        deletePlaylist(playlistId, video); // تمرير video كمعامل
+                    });
+                });
+            });
+    }
+
+    // تحديث قوائم التشغيل عند فتح الـ Modal
+    updatePlaylists();
+
+    // إنشاء قائمة تشغيل جديدة
+    const createPlaylistButton = document.getElementById("createPlaylist");
+    createPlaylistButton.onclick = function () {
+        const newPlaylistName = document.getElementById("newPlaylistName").value;
+        const isPublic = document.getElementById("playlistVisibility").value === "public";
+
+        if (newPlaylistName) {
+            fetch("/create_playlist", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify({
+                    name: newPlaylistName,
+                    is_public: isPublic,
+                }),
+            })
+                .then((response) => response.json())
+                .then((data) => {
+                    if (data.success) {
+                        updatePlaylists(); // تحديث قوائم التشغيل بعد الإنشاء
+                    }
+                });
+        }
+    };
+}
+
+// دالة لحذف قائمة التشغيل
+function deletePlaylist(playlistId, video) {
+    if (confirm("هل أنت متأكد من حذف هذه القائ��ة؟")) {
+        fetch(`/delete_playlist/${playlistId}`, {
+            method: "DELETE",
+        })
+            .then((response) => response.json())
+            .then((data) => {
+                if (data.success) {
+                    // alert("تم حذف القائمة بنجاح");
+                    openPlaylistModal(video); // إعادة تحميل قوائم التشغيل بعد الحذف
+                } else {
+                    alert("حدث خطأ أثناء حذف القائمة");
+                }
+            });
+    }
+}
+      // دالة لإضافة الفيديو إلى قائمة التشغيل
+      function addToPlaylist(video) {
+        openPlaylistModal(video); // فتح Modal قوائم التشغيل
+      }
+
+
+
+// وظيفة لفتح النماذج
+function openModalUnique(modalId) {
+    const modal = document.getElementById(modalId);
+    if (modal) {
+        modal.style.display = 'flex';
+        let videoPlayer2 =document.getElementById("videoPlayer2").style.display = "flex"
+
+    }
+}
+
+// وظيفة لإغلاق النماذج
+function closeModalUnique(modalId) {
+    const modal = document.getElementById(modalId);
+    if (modal) {
+        modal.style.display = 'none';
+        let videoPlayer2 = document.getElementById("videoPlayer2").load();;
+
+    }
+}
+// جلب قوائم التشغيل وعرضها
+document.getElementById('showPlaylistsBtn').addEventListener('click', async () => {
+    try {
+        const response = await fetch('/get_playlists');
+        if (!response.ok) {
+            throw new Error(`فشل تحميل قوائم التشغيل: ${response.statusText}`);
+        }
+
+        const playlists = await response.json();
+        const playlistsList = document.getElementById('playlistsList');
+        if (playlists.length === 0) {
+            playlistsList.innerHTML = '<li>No playlists available</li>';
+        } else {
+            playlistsList.innerHTML = playlists.map(playlist => `
+                <li class="playlist-item-unique" data-playlist-id="${playlist.id}">
+                    ${playlist.name}
+                </li>
+            `).join('');
+        }
+
+        openModalUnique('playlistsModal'); // فتح Modal قوائم التشغيل
+
+        // إضافة حدث النقر على عنصر قائمة التشغيل
+        document.querySelectorAll('.playlist-item-unique').forEach(item => {
+            item.addEventListener('click', async () => {
+                const playlistId = item.getAttribute('data-playlist-id');
+                try {
+                    const response = await fetch(`/get_playlist_videos/${playlistId}`);
+                    if (!response.ok) {
+                        throw new Error(`فشل تحميل الفيديوهات لقائمة التشغيل: ${response.statusText}`);
+                    }
+
+                    const videos = await response.json();
+                    const videosList = document.getElementById('videosList');
+                    if (videos.length === 0) {
+                        const videoPlayer2 = document.getElementById("videoPlayer2").style.display = "none"
+                        const videoDetails = document.getElementById("videoDetails")
+                        videoDetails.innerHTML = '<div>No videos available</div>';
+                    } else {
+                        let videoPlayer2 = document.getElementById('videoPlayer2')
+                        videoPlayer2.style.display = "flex"
+                        videosList.innerHTML = videos.map(video => `
+                            <div class="video-item-unique" data-video-id="${video.id}">
+                                <img src="${video.thumbnail_path}" alt="${video.title}">
+                                <div>
+                                    <h6>${video.title}</h6>
+                                    <small>${video.uploader_name}</small>
+                                    <!-- زر حذف الفيديو يظهر فقط إذا كان المستخدم هو المالك -->
+                                    ${video.is_owner ? `<button class="delete-video-btn" data-video-id="${video.id}" data-playlist-id="${playlistId}">حذف</button>` : ''}
+                                </div>
+                            </div>
+                        `).join('');
+                    }
+
+                    openModalUnique('videosModal'); // فتح الـ Modal الخاص بالفيديوهات
+                } catch (error) {
+                    console.error(error.message);
+                }
+            });
+        });
+    } catch (error) {
+        console.error(error.message);
+    }
+});
+
+
+
+// جلب قوائم التشغيل الخاصة بالمستخدم الحالي وعرضها
+document.getElementById('showUserPlaylistsBtn').addEventListener('click', async () => {
+    try {
+        const response = await fetch('/get_user_playlists');
+        if (!response.ok) {
+            throw new Error(`فشل تحميل قوائم التشغيل الخاصة بالمستخدم: ${response.statusText}`);
+        }
+
+        const userPlaylists = await response.json();
+        const playlistsList = document.getElementById('playlistsList');
+        if (userPlaylists.length === 0) {
+            playlistsList.innerHTML = '<li>لا توجد قوائم تشغيل خاصة بك</li>';
+        } else {
+            playlistsList.innerHTML = userPlaylists.map(playlist => `
+                <li class="playlist-item-unique" data-playlist-id="${playlist.id}">
+                    ${playlist.name}
+                </li>
+            `).join('');
+        }
+
+        openModalUnique('playlistsModal'); // فتح Modal قوائم التشغيل
+
+        // إضافة حدث النقر على عنصر قائمة التشغيل
+        document.querySelectorAll('.playlist-item-unique').forEach(item => {
+            item.addEventListener('click', async () => {
+                const playlistId = item.getAttribute('data-playlist-id');
+                try {
+                    const response = await fetch(`/get_playlist_videos/${playlistId}`);
+                    if (!response.ok) {
+                        throw new Error(`فشل تحميل الفيديوهات لقائمة التشغيل: ${response.statusText}`);
+                    }
+
+                    const videos = await response.json();
+                    const videosList = document.getElementById('videosList');
+                    if (videos.length === 0) {
+                        const videoPlayer2 = document.getElementById("videoPlayer2").style.display = "none"
+                        const videoDetails = document.getElementById("videoDetails")
+                        videoDetails.innerHTML = '<div>No videos available</div>';
+                    } else {
+                        let videoPlayer2 = document.getElementById('videoPlayer2')
+                        videoPlayer2.style.display = "flex"
+                        videosList.innerHTML = videos.map(video => `
+                            <div class="video-item-unique" data-video-id="${video.id}">
+                                <img src="${video.thumbnail_path}" alt="${video.title}">
+                                <div>
+                                    <h6>${video.title}</h6>
+                                    <small>${video.uploader_name}</small>
+                                    <!-- زر حذف الفيديو يظهر فقط إذا كان المستخدم هو المالك -->
+                                    ${video.is_owner ? `<button class="delete-video-btn" data-video-id="${video.id}" data-playlist-id="${playlistId}">حذف</button>` : ''}
+                                </div>
+                            </div>
+                        `).join('');
+                    }
+
+                    openModalUnique('videosModal'); // فتح الـ Modal الخاص بالفيديوهات
+          
+
+                 // إضافة حدث النقر على زر حذف الفيديو
+                 document.querySelectorAll('.delete-video-btn').forEach(deleteBtn => {
+    deleteBtn.addEventListener('click', async (e) => {
+        const videoId = deleteBtn.getAttribute('data-video-id');
+        const playlistId = deleteBtn.getAttribute('data-playlist-id');
+
+        try {
+            // إرسال طلب الحذف إلى الخادم
+            const response = await fetch('/delete_video_from_playlist', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    video_id: videoId,
+                    playlist_id: playlistId
+                })
+            });
+
+            if (!response.ok) {
+                throw new Error("فشل حذف الفيديو من قائمة التشغيل");
+            }
+
+            // تحديد قائمة الفيديوهات والفهرس الحالي
+            const videoItem = deleteBtn.closest('.video-item-unique');
+            const videos = Array.from(document.querySelectorAll('.video-item-unique')); // تحويل القائمة إلى مصفوفة
+            const currentVideoIndex = videos.findIndex(item => item.classList.contains('active')); // العثور على الفهرس الحالي
+
+            // حذف الفيديو من الواجهة
+            videoItem.remove();
+
+            showMessage("تم الحذف الفديو من قائمة التشغيل", true); // عرض رسالة النجاح
+
+            // تحديث قائمة الفيديوهات المتبقية
+            const remainingVideos = document.querySelectorAll('.video-item-unique');
+            const videoPlayer2 = document.getElementById('videoPlayer2');
+
+            if (remainingVideos.length === 0) {
+                // إذا لم يتبقَ أي فيديوهات
+                videoPlayer2.src = ''; // إيقاف الفيديو
+                videoPlayer2.style.display = "none"
+                let videoDetails = document.getElementById("videoDetails").innerHTML = "<div>No videos available</div>"
+            } else {
+                // إذا كانت هناك فيديوهات
+                if (currentVideoIndex > 0) {
+                    // تشغيل الفيديو السابق إذا كان موجودًا
+                    const previousVideoItem = videos[currentVideoIndex - 1];
+                    previousVideoItem.click();
+                } else if (currentVideoIndex === 0 && videos.length > 1) {
+                    // إذا كان الفيديو الأول قد تم حذفه وكان هناك فيديوهات أخرى
+                    const nextVideoItem = videos[1];
+                    nextVideoItem.click();
+                } else {
+                    // إذا لم يكن هناك فيديو نشط، تشغيل أول فيديو متبقٍ
+                    const firstRemainingVideo = remainingVideos[0];
+                    firstRemainingVideo.click();
+                }
+            }
+        } catch (error) {
+            console.error(error);
+            alert("حدث خطأ أثناء حذف الفيديو");
+        }
+    });
+});
+
+
+
+                    // تشغيل أول فيديو بعد تحميل الفيديوهات مباشرة
+                    setTimeout(() => {
+                        const firstVideoItem = document.querySelector('.video-item-unique');
+                        if (firstVideoItem) {
+                            firstVideoItem.click();  // نقوم بمحاكاة الضغط على أول فيديو
+                        }
+                    }, 100);  // تأخير بسيط لانتظار تحميل المحتويات
+
+                    let currentVideoIndex = 0;  // متغير لتتبع الفيديو الحالي
+
+                    // إضافة حدث النقر على عنصر الفيديو
+                    document.querySelectorAll('.video-item-unique').forEach((videoItem, index) => {
+                        videoItem.addEventListener('click', async () => {
+                            // إزالة الفئة active من جميع العناصر
+                            document.querySelectorAll('.video-item-unique').forEach(item => {
+                                item.classList.remove('active');
+                            });
+
+                            // إضافة الفئة active للفيديو الذي يتم النقر عليه
+                            videoItem.classList.add('active');
+
+                            const videoId = videoItem.getAttribute('data-video-id');
+                            try {
+                                const response = await fetch(`/get_video/${videoId}`);
+                                if (!response.ok) {
+                                    throw new Error(`فشل تحميل الفيديو: ${response.statusText}`);
+                                }
+
+                                const video = await response.json();
+                                const videoPlayer2 = document.getElementById('videoPlayer2');
+                                videoPlayer2.src = video.video_path;
+                                videoPlayer2.play();
+
+                                const videoDetails = document.getElementById('videoDetails');
+                                videoDetails.innerHTML = `
+                                    <h4>${video.title}</h4>
+                                    <p>Uploaded by: ${video.uploader_name}</p>
+                                    <p>Uploaded on: ${video.upload_time}</p>
+                                    <img src="static/${video.uploader_image}" alt="${video.uploader_name}" width="50">
+                                `;
+
+                                currentVideoIndex = index;  // تحديث الفهرس عند النقر على الفيديو
+                            } catch (error) {
+                                console.error("Error fetching video:", error);
+                                alert("حدث خطأ أثناء تحميل الفيديو.");
+                            }
+                        });
+                    });
+
+                    // إضافة حدث عند انتهاء الفيديو لتشغيل الفيديو التالي
+                    const videoPlayer2 = document.getElementById('videoPlayer2');
+                    videoPlayer2.addEventListener('ended', () => {
+                        if (currentVideoIndex < videos.length - 1) {
+                            const nextVideoItem = document.querySelectorAll('.video-item-unique')[currentVideoIndex + 1];
+                            nextVideoItem.click();  // نقوم بمحاكاة الضغط على الفيديو التالي
+                        }
+                    });
+
+                } catch (error) {
+                    console.error("Error fetching playlist videos:", error);
+                    alert("حدث خطأ أثناء تحميل الفيديوهات لقائمة التشغيل.");
+                }
+            });
+        });
+
+    } catch (error) {
+        console.error("Error fetching playlists:", error);
+        alert("حدث خطأ أثناء تحميل قوائم التشغيل.");
+    }
+});
+
+
+
+
+
+
+
+    const uploadForm = document.getElementById('upload-form');
+
+ 
+        uploadForm.addEventListener('submit', function (e) {
+            // e.preventDefault();  // منع الإرسال التلقائي للنموذج
+            let animation = document.querySelector(".main-anmi-loading").style.display = "grid"
+        })
+           
+
+
+    </script>
+  </body>
+</html>