اريد اضافة منتدى طقس في موقعي الكود الخلفي جاهز لكن الواجهة ليست جاهزة لان لغاية الان لم اجد تصميم مناسب للكود التالي
<?php
// public/post.php
require_once '';
require_once '';
$post_id = $_GET['id'];
$stmt = $conn->prepare("SELECT posts.*, users.username, users.profile_image, (SELECT COUNT(*) FROM likes WHERE likes.post_id = posts.id) as like_count FROM posts JOIN users ON posts.user_id = users.id WHERE posts.id = :id");
$stmt->bindParam(':id', $post_id);
$stmt->execute();
$post = $stmt->fetch(PDO::FETCH_ASSOC);
$stmt = $conn->prepare("SELECT comments.*, users.username FROM comments JOIN users ON comments.user_id = users.id WHERE post_id = :post_id ORDER BY parent_id ASC, created_at DESC");
$stmt->bindParam(':post_id', $post_id);
$stmt->execute();
$comments = $stmt->fetchAll(PDO::FETCH_ASSOC);
$stmt = $conn->prepare("SELECT COUNT(*) FROM likes WHERE post_id = :post_id AND user_id = :user_id");
$stmt->bindParam(':post_id', $post_id);
$stmt->bindParam(':user_id', $_SESSION['user_id']);
$stmt->execute();
$hasLiked = $stmt->fetchColumn();
date_default_timezone_set('Asia/Damascus');
if ($_SERVER["REQUEST_METHOD"] == "POST" && isLoggedIn()) {
if (isset($_POST['comment'])) {
$comment = base64_encode($_POST['comment']);
$user_id = $_SESSION['user_id'];
$parent_id = isset($_POST['parent_id']) ? $_POST['parent_id'] : null;
$stmt = $conn->prepare("INSERT INTO comments (post_id, user_id, comment, parent_id) VALUES (:post_id, :user_id, :comment, :parent_id)");
$stmt->bindParam(':post_id', $post_id);
$stmt->bindParam(':user_id', $user_id);
$stmt->bindParam(':comment', $comment);
$stmt->bindParam(':parent_id', $parent_id);
if ($stmt->execute()) {
echo json_encode(['success' => true]);
exit();
} else {
echo json_encode(['success' => false]);
exit();
}
} elseif (isset($_POST['like'])) {
if (!$hasLiked) {
$user_id = $_SESSION['user_id'];
$stmt = $conn->prepare("INSERT INTO likes (post_id, user_id) VALUES (:post_id, :user_id)");
$stmt->bindParam(':post_id', $post_id);
$stmt->bindParam(':user_id', $user_id);
if ($stmt->execute()) {
echo json_encode(['success' => true]);
exit();
} else {
echo json_encode(['success' => false]);
exit();
}
} else {
echo json_encode(['success' => false, 'message' => 'لقد قمت بالإعجاب بالفعل.']);
exit();
}
}
}
function renderComments($comments, $parent_id = null) {
$html = '';
foreach ($comments as $comment) {
if ($comment['parent_id'] == $parent_id) {
$html .= '<div class="comment">';
$html .= '<div class="user-info"><img src="user.jpg" alt="User Image"><p>بواسطة ' . htmlspecialchars($comment['username']) . ' في ' . date("Y-m-d H:i:s", strtotime($comment['created_at'])) . '</p></div>';
$html .= '<p>' . htmlspecialchars(base64_decode($comment['comment'])) . '</p>';
$html .= '<button class="btn reply-button" data-comment-id="' . $comment['id'] . '">رد</button>';
$html .= '<div class="replies">';
$html .= renderComments($comments, $comment['id']);
$html .= '</div>';
$html .= '<div class="reply-form"></div>';
$html .= '</div>';
}
}
return $html;
}
?>
<!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="styles.css">
<style>
body {
background-color: #f2f2f2;
color: #333;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
width: 100%;
max-width: 1200px;
margin: 20px auto;
display: flex;
flex-direction: column;
align-items: center;
}
.post {
background-color: #fff;
padding: 20px;
margin: 0 auto 20px auto;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 800px;
box-sizing: border-box;
}
.post h2 {
color: #333;
margin-top: 0;
}
.post p {
color: #555;
line-height: 1.6;
}
.user-info {
display: flex;
align-items: center;
margin-top: 10px;
}
.user-info img {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 10px;
}
.user-info p {
margin: 0;
color: #666;
font-size: 14px;
}
.post { background-color: #fff; /* لون خلفية المنشور */ padding: 20px; margin: 0 -20px; /* تعديل هنا لجعل المنشور يمتد للحافات */ border: 1px solid #ddd; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); width: calc(100% + 40px); /* إضافة الهامشين لتعويض الحواف */ max-width: 800px; /* تعيين عرض أقصى للمنشور */ box-sizing: border-box; }
.like-form .btn,
.add-comment-btn,
.btn {
background-color: #007bff;
color: #fff;
border: none;
padding: 8px 16px;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.3s ease;
}
.like-form .btn:hover,
.add-comment-btn:hover,
.btn:hover {
background-color: #0056b3;
}
.comments-popup {
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;
}
.comments-popup.active {
display: flex;
}
.content {
background-color: #fff;
padding: 20px;
border-radius: 8px;
width: 80%;
max-width: 600px;
position: relative;
}
.close {
position: absolute;
top: 10px;
right: 10px;
font-size: 24px;
cursor: pointer;
color: #333;
border: none;
background-color: transparent;
}
.close:hover {
color: #0056b3;
}
.comments {
margin-top: 20px;
}
.comment {
background-color: #f9f9f9;
border-radius: 4px;
padding: 10px;
margin-bottom: 10px;
position: relative;
}
.comment p {
margin: 0;
color: #555;
font-size: 14px;
}
.comment .user-info p {
color: #666;
font-size: 14px;
}
.comment .more-options .options-menu {
right: -20px;
min-width: 120px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
z-index: 1;
}
.comment .more-options .options-menu.active {
display: block;
}
.comment .more-options .options-menu button {
background-color: transparent;
border: none;
padding: 10px;
cursor: pointer;
text-align: left;
width: 100%;
font-size: 14px;
color: #333;
}
.comment .more-options .options-menu button:hover {
background-color: #f0f0f0;
}
.replies {
margin-top: 10px;
}
.reply-form {
display: none;
margin-top: 10px;
}
.reply-form.active {
display: flex;
}
.reply-form textarea {
width: calc(100% - 80px);
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
.reply-form .btn {
background-color: #007bff;
color: #fff;
border: none;
padding: 8px 16px;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.3s ease;
}
.reply-form .btn:hover {
background-color: #0056b3;
}
.error {
color: red;
font-size: 14px;
margin-top: 10px;
}
.more-options {
position: relative;
display: inline-block;
}
.more-options .btn {
background-color: transparent;
border: none;
cursor: pointer;
padding: 8px;
}
.more-options .options-menu {
display: none;
position: absolute;
top: 100%;
right: 0;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
z-index: 1;
}
.more-options .options-menu.active {
display: block;
}
.more-options .options-menu button {
background-color: transparent;
border: none;
padding: 10px;
cursor: pointer;
text-align: left;
width: 100%;
font-size: 14px;
color: #333;
}
.more-options .options-menu button:hover {
background-color: #f0f0f0;
}
@media screen and (max-width: 768px) {
.container {
padding: 10px;
}
.post {
padding: 15px;
margin-bottom: 15px;
}
.content {
width: 100%;
padding: 15px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="post">
<h2><?php echo htmlspecialchars(base64_decode($post['title'])); ?></h2>
<p><?php echo htmlspecialchars(base64_decode($post['content'])); ?></p>
<?php if ($post['image']): ?>
<img src="data:image/jpeg;base64,<?php echo base64_encode($post['image']); ?>" alt="Post Image" class="post-image">
<?php endif; ?>
<div class="user-info">
<?php if ($post['profile_image']): ?>
<img src="data:image/jpeg;base64,<?php echo base64_encode($post['profile_image']); ?>" alt="User Image">
<?php endif; ?>
<p>بواسطة <?php echo htmlspecialchars($post['username']); ?> في <?php echo date("Y-m-d H:i:s", strtotime($post['created_at'])); ?><?php if ($post['updated_at']): ?> (معدل)<?php endif; ?></p>
</div>
<p>إعجابات: <span id="like-count"><?php echo $post['like_count']; ?></span></p>
</div>
<?php if (isLoggedIn()): ?>
<div class="like-form">
<button class="btn" id="like-button" <?php if ($hasLiked) echo 'disabled'; ?>>إعجاب</button>
</div>
<?php endif; ?>
<button class="btn add-comment-btn" id="show-comments-btn">عرض التعليقات</button>
<div class="comments-popup" id="comments-popup">
<div class="content">
<button class="close" id="close-comments-btn">×</button>
<h3>التعليقات</h3>
<div class="comments" id="comments-section">
<?php echo renderComments($comments); ?>
</div>
<?php if (isLoggedIn()): ?>
<div class="add-comment-form" id="add-comment-form">
<div class="form-group">
<textarea id="comment-text" placeholder="أضف تعليقك هنا..." required></textarea>
</div>
<button class="btn" id="comment-button">إرسال</button>
</div>
<button class="btn add-comment-btn" id="toggle-comment-form">إضافة تعليق</button>
<?php else: ?>
<p>يجب أن <a href="login.php">تسجل الدخول</a> لتتمكن من إضافة تعليق.</p>
<?php endif; ?>
<p class="error" id="error-message"><?php if (isset($error)) echo $error; ?></p>
</div>
</div>
</div>
<script>
document.getElementById('like-button').addEventListener('click', function() {
var xhr = new XMLHttpRequest();
xhr.open("POST", "post.php?id=<?php echo $post_id; ?>", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var response = JSON.parse(xhr.responseText);
if (response.success) {
var likeCount = document.getElementById('like-count');
likeCount.textContent = parseInt(likeCount.textContent) + 1;
document.getElementById('like-button').disabled = true;
} else {
document.getElementById('error-message').textContent = response.message || "حدث خطأ ما. حاول مرة أخرى.";
}
}
};
xhr.send("like=true");
});
document.getElementById('comment-button').addEventListener('click', function() {
var commentText = document.getElementById('comment-text').value;
if (commentText.trim() === '') return;
var xhr = new XMLHttpRequest();
xhr.open("POST", "post.php?id=<?php echo $post_id; ?>", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var response = JSON.parse(xhr.responseText);
if (response.success) {
var commentsSection = document.getElementById('comments-section');
var newComment = document.createElement('div');
newComment.classList.add('comment');
newComment.innerHTML = '<p>' + commentText + '</p><div class="user-info"><p>بواسطة <?php echo htmlspecialchars($_SESSION['username']); ?> في الآن</p></div>';
commentsSection.insertBefore(newComment, commentsSection.firstChild);
document.getElementById('comment-text').value = '';
} else {
document.getElementById('error-message').textContent = response.message || "حدث خطأ ما. حاول مرة أخرى.";
}
}
};
xhr.send("comment=" + encodeURIComponent(commentText));
});
document.getElementById('toggle-comment-form').addEventListener('click', function() {
var form = document.getElementById('add-comment-form');
form.classList.toggle('active');
});
document.getElementById('show-comments-btn').addEventListener('click', function() {
document.getElementById('comments-popup').style.display = 'flex';
});
document.getElementById('close-comments-btn').addEventListener('click', function() {
document.getElementById('comments-popup').style.display = 'none';
});
document.querySelectorAll('.reply-button').forEach(function(button) {
button.addEventListener('click', function() {
var commentId = this.getAttribute('data-comment-id');
var replyForm = document.createElement('div');
replyForm.classList.add('reply-form');
replyForm.innerHTML = `
<textarea class="reply-text" required></textarea>
<button class="btn submit-reply" data-comment-id="${commentId}">إرسال</button>
`;
this.parentElement.appendChild(replyForm);
replyForm.style.display = 'flex';
replyForm.querySelector('.submit-reply').addEventListener('click', function() {
var replyText = replyForm.querySelector('.reply-text').value;
if (replyText.trim() === '') return;
var xhr = new XMLHttpRequest();
xhr.open("POST", "post.php?id=<?php echo $post_id; ?>", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var response = JSON.parse(xhr.responseText);
if (response.success) {
var repliesSection = button.nextElementSibling;
var newReply = document.createElement('div');
newReply.classList.add('comment');
newReply.innerHTML = '<p>' + replyText + '</p><div class="user-info"><p>بواسطة <?php echo htmlspecialchars($_SESSION['username']); ?> في الآن</p></div>';
repliesSection.insertBefore(newReply, repliesSection.firstChild);
replyForm.style.display = 'none';
} else {
document.getElementById('error-message').textContent = response.message || "حدث خطأ ما. حاول مرة أخرى.";
}
}
};
xhr.send("comment=" + encodeURIComponent(replyText) + "&parent_id=" + commentId);
});
});
});
document.querySelectorAll('.more-options').forEach(function(button) {
button.addEventListener('click', function() {
var optionsMenu = this.querySelector('.options-menu');
optionsMenu.classList.toggle('active');
});
});
document.addEventListener('click', function(event) {
if (!event.target.closest('.more-options')) {
document.querySelectorAll('.options-menu.active').forEach(function(menu) {
menu.classList.remove('active');
});
}
});
</script>
</body>
</html>
