| | <!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;
|
| |
|
| | 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 {
|
| |
|
| | |
| |
|
| | font-size: 30px;
|
| | cursor: pointer;
|
| | color: #333;
|
| | |
| | |
| | |
| |
|
| | padding: 10px;
|
| |
|
| |
|
| | }
|
| |
|
| | .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>
|
| |
|
| | <link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.css" rel="stylesheet"/>
|
| |
|
| |
|
| | <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/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');
|
| | content.classList.remove('show');
|
| | setTimeout(() => {
|
| | content.style.display = 'none';
|
| | }, 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);
|
| |
|
| |
|
| | setTimeout(() => {
|
| | document.body.removeChild(message);
|
| | }, 3000);
|
| |
|
| | return;
|
| | }
|
| |
|
| | const title = document.getElementById('title').value;
|
| | 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();
|
| |
|
| |
|
| | 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();
|
| |
|
| | if (currentUserId) {
|
| | console.log('ID المستخدم الحالي:', currentUserId);
|
| |
|
| |
|
| | const articles = document.querySelectorAll('.article-box');
|
| | articles.forEach(article => {
|
| | const articleUserId = article.getAttribute('data-iduser');
|
| | 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('الزر "عرض كل المقالات" غير موجود في الصفحة.');
|
| | }
|
| | });
|
| |
|
| |
|
| | 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();
|
| | return data.id;
|
| | } catch (error) {
|
| | console.error('حدث خطأ:', error);
|
| | return 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>
|
| | </div>
|
| | {% endfor %}
|
| | </div>
|
| |
|
| |
|
| | </body>
|
| | </html>
|
| |
|
