| <!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"
|
| />
|
|
|
| <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>
|
|
|
|
|
| <button class="video_page" >V</button>
|
|
|
| <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>
|
|
|
|
|
|
|
| <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">×</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">×</span>
|
| <h3>إنشاء منشور جديد</h3>
|
| </div>
|
| <iframe src="{{ url_for('create_post') }}" frameborder="0"></iframe>
|
| </div>
|
| </div>
|
|
|
|
|
| <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">×</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">×</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-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-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-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;
|
| }
|
|
|
|
|
| #chatFrame {
|
| position: fixed;
|
| top: 0;
|
| left: 0;
|
| width: 100%;
|
| height: 100%;
|
| background-color: white;
|
| border: none;
|
| z-index: 9999;
|
| display: none;
|
| }
|
|
|
|
|
| #closeChatFrame {
|
| position: absolute;
|
| top: 10px;
|
| right: 10px;
|
| background-color: red;
|
| color: white;
|
| padding: 10px;
|
| border: none;
|
| cursor: pointer;
|
| z-index: 10000;
|
| 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>
|
|
|
|
|
|
|
|
|
| <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">×</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>
|
|
|
|
|
|
|
| <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>
|
|
|
|
|
|
|
| <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);
|
| 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 {
|
|
|
|
|
| max-width: 100%;
|
| 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;
|
| margin-left: 10px;
|
| }
|
|
|
| .timestamp {
|
| font-size: 12px;
|
| color: #65676b;
|
| margin-top: 2px;
|
| }
|
|
|
| .profession {
|
| font-size: 12px;
|
| color: #4caf50;
|
| margin-top: 2px;
|
| }
|
|
|
|
|
| .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 {
|
| 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;
|
| }
|
|
|
|
|
|
|
|
|
| .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;
|
| 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 {
|
| 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;
|
| }
|
|
|
|
|
|
|
| .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;
|
| 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-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 {
|
| display: none;
|
| position: fixed;
|
| top: 0;
|
| left: 0;
|
| width: 100%;
|
| height: 100%;
|
| background-color: rgba(0, 0, 0, 0.5);
|
| z-index: 1000;
|
| }
|
|
|
|
|
| #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 {
|
| display: none;
|
| position: fixed;
|
| top: 0;
|
| left: 0;
|
| width: 100%;
|
| height: 100%;
|
| background-color: rgba(0, 0, 0, 0.5);
|
| z-index: 1000;
|
| }
|
|
|
|
|
| #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%); }
|
| }
|
|
|
|
|
| #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;
|
| }
|
|
|
|
|
| #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>
|
|
|
|
|
| $(document).ready(function () {
|
| const commentsContainer = $("#commentsFixedContainer");
|
| const commentsOverlay = $("#commentsOverlay");
|
| const closeComments = $(".close-comments");
|
| let currentPostId = null;
|
|
|
|
|
| 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,
|
| },
|
| 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);
|
| });
|
| });
|
| }
|
|
|
|
|
| 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>
|
| `;
|
| }
|
|
|
|
|
| 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,
|
| },
|
| success: function (response) {
|
| if (response.success) {
|
| input.val("");
|
| closeReplyContainer();
|
| loadComments(currentPostId);
|
| }
|
| },
|
| });
|
| }
|
| });
|
|
|
|
|
| $(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")) {
|
|
|
| $text.classList.add("collapsed");
|
|
|
|
|
| const originalHeight = $text.scrollHeight;
|
| const lineHeight = parseFloat(
|
| window.getComputedStyle($text).lineHeight
|
| );
|
| const maxHeight = lineHeight * 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();
|
| });
|
| });
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| function closePostModal() {
|
| const postModal = document.getElementById("postViewModal");
|
| console.log("hi")
|
|
|
| postModal.style.display = "none";
|
| document.body.style.overflow = "auto";
|
| }
|
|
|
|
|
| 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;
|
|
|
|
|
| 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";
|
| };
|
| });
|
| });
|
|
|
| });
|
|
|
|
|
| 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();
|
|
|
|
|
| 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";
|
| });
|
| });
|
| }
|
| });
|
|
|
|
|
| document.querySelectorAll(".close-modal").forEach(function ($closeBtn) {
|
| $closeBtn.addEventListener("click", function () {
|
|
|
| const postViewModal = document.getElementById("postViewModal");
|
| postViewModal.style.display = "none";
|
|
|
|
|
| const currentUrl = window.location.href;
|
| const baseUrl = currentUrl.split("/post/")[0];
|
| 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;
|
|
|
|
|
| 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) {
|
|
|
| const chatFrame = document.querySelector('#chatFrame');
|
| if (chatFrame) {
|
| chatFrame.src = `/messages/${userEmail}`;
|
| chatFrame.style.display = 'block';
|
| const closeChatFrameButton = document.querySelector('#closeChatFrame');
|
| if (closeChatFrameButton) {
|
| closeChatFrameButton.style.display = 'block';
|
| }
|
| document.body.style.overflow = 'hidden';
|
|
|
|
|
| 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) {
|
|
|
| const isInChatPage = window.location.pathname.startsWith('/messages/');
|
|
|
|
|
| if (!isInChatPage) {
|
| const data = JSON.parse(event.data);
|
| notificationCount.textContent = data.unread_count;
|
| }
|
| };
|
|
|
|
|
| window.addEventListener('beforeunload', function () {
|
| if (eventSource) {
|
| eventSource.close();
|
| }
|
| });
|
|
|
|
|
| loadUnreadCount();
|
| });
|
|
|
|
|
|
|
| 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');
|
| const closeChatFrameButton = document.querySelector('#closeChatFrame');
|
|
|
|
|
| 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')
|
| .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>`;
|
| }
|
|
|
|
|
| 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 -->
|
| `;
|
|
|
|
|
| chatItem.addEventListener('click', () => {
|
|
|
| chatFrame.src = `/messages/${chatItem.dataset.userEmail}`;
|
| chatFrame.style.display = 'block';
|
| 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', () => {
|
|
|
| const closeChatFrameButton = document.querySelector('#closeChatFrame');
|
| const chatFrame = document.querySelector('#chatFrame');
|
|
|
| if (closeChatFrameButton && chatFrame) {
|
| closeChatFrameButton.addEventListener('click', () => {
|
| chatFrame.style.display = 'none';
|
| chatFrame.src = '';
|
| closeChatFrameButton.style.display = 'none';
|
| chatWindow.style.display = 'block';
|
| document.body.style.overflow = 'auto';
|
| loadChatList()
|
|
|
| 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';
|
| })
|
|
|
|
|
|
|
|
|
|
|
| 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) {
|
|
|
| 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";
|
|
|
|
|
| userDiv.addEventListener('click', function(event) {
|
| event.preventDefault();
|
| openPublicProfile(`/profile/${userEmail}`);
|
| });
|
|
|
| resultsContainer.appendChild(userDiv);
|
| });
|
| } else {
|
| resultsContainer.innerHTML = '<span>لا توجد نتائج</span>';
|
| }
|
| });
|
| } else {
|
| document.getElementById('searchResults').innerHTML = '';
|
| }
|
| }
|
|
|
|
|
| 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.src = "{{ url_for('profile') }}";
|
|
|
|
|
| document.body.style.overflow = 'hidden';
|
| }
|
| }
|
|
|
|
|
| function closeProfile() {
|
| var container = document.getElementById('profile-container');
|
| if (container) {
|
|
|
| container.classList.remove('show');
|
| container.classList.add('hide');
|
|
|
|
|
| setTimeout(function() {
|
| container.style.display = 'none';
|
|
|
|
|
| document.body.style.overflow = 'auto';
|
| }, 300);
|
| }
|
| }
|
|
|
|
|
| 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();
|
| });
|
| }
|
|
|
|
|
|
|
| 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.src = url;
|
|
|
|
|
| document.body.style.overflow = 'hidden';
|
| }
|
| }
|
|
|
|
|
| function closePublicProfile() {
|
| var container = document.getElementById('public-profile-container');
|
| if (container) {
|
|
|
| container.classList.remove('show');
|
| container.classList.add('hide');
|
|
|
|
|
| setTimeout(function() {
|
| container.style.display = 'none';
|
|
|
|
|
| document.body.style.overflow = 'auto';
|
| }, 300);
|
| }
|
| }
|
|
|
|
|
| var closeBtn = document.getElementById("close-public-profile-btn");
|
| if (closeBtn) {
|
| closeBtn.addEventListener("click", function () {
|
| console.log("تم النقر على زر الإغلاق");
|
| closePublicProfile();
|
| });
|
| }
|
|
|
|
|
| document.querySelectorAll('.public-profile-link').forEach(function(link) {
|
| link.addEventListener('click', function(event) {
|
| event.preventDefault();
|
| var url = this.getAttribute('href');
|
| openPublicProfile(url);
|
| });
|
| });
|
|
|
|
|
|
|
|
|
| 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');
|
|
|
|
|
| openBtnArtical.addEventListener('click', (e) => {
|
| e.preventDefault();
|
| iframe.src = 'artical';
|
| iframeContainer.style.display = 'block';
|
| iframeContainer.classList.add('show');
|
| iframeContainer.classList.remove('hide');
|
| });
|
|
|
|
|
| videoBtn.addEventListener('click', (e) => {
|
| e.preventDefault();
|
| iframe.src = 'videos';
|
| iframeContainer.style.display = 'block';
|
| iframeContainer.classList.add('show');
|
| iframeContainer.classList.remove('hide');
|
| });
|
|
|
|
|
| closeBtnArtical.addEventListener('click', () => {
|
| iframeContainer.classList.add('hide');
|
| iframeContainer.classList.remove('show');
|
| setTimeout(() => {
|
| iframeContainer.style.display = 'none';
|
| iframe.src = '';
|
| }, 300);
|
| });
|
|
|
|
|
|
|
| </script>
|
| </body>
|
| </html>
|
|
|
