افضل تصميم للصفحة خاصة بمنتدى طقس

تمام عصام · منذ 10 ساعة

اريد اضافة منتدى طقس في موقعي الكود الخلفي جاهز لكن الواجهة ليست جاهزة لان لغاية الان لم اجد تصميم مناسب للكود التالي

<?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">&times;</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>

تم التعديل في منذ 10 ساعة بواسطة تمام عصام

Chihab Hedidi · منذ 10 ساعة

إختيار التصميم المناسب يعتمد بشكل أكبر على الثيم الخاص بالموقع يجب أن يكون ملائم للألوان التي هناك، و بالبحث عن تصميم جاهز ربما لن تجد ما يناسبك لذا أفضل شيء هو إنشاء تصميم خاص بك، يمكنك إستلهام الافكار من التصاميم السابقة و بعدها تصميم الواجهة بإستخدام موقع Figma،

كما أن مجال الأخبار تقريبا لديه نفس الواجهات التي تظهر درجات الحرارة مع إختلاف طفيف في الألوان مثل الصورة:

image.png.c7dfeeb0bebd3017ff2d3d8e65b2c187.png

لذا حاول جعله بهذه الطريقة مع التغيير في الألوان التي تناسب موقعك.

تمام عصام · منذ 10 ساعة

بتاريخ 1 دقيقة مضت قال Chihab Hedidi:

إختيار التصميم المناسب يعتمد بشكل أكبر على الثيم الخاص بالموقع يجب أن يكون ملائم للألوان التي هناك، و بالبحث عن تصميم جاهز ربما لن تجد ما يناسبك لذا أفضل شيء هو إنشاء تصميم خاص بك، يمكنك إستلهام الافكار من التصاميم السابقة و بعدها تصميم الواجهة بإستخدام موقع Figma،

كما أن مجال الأخبار تقريبا لديه نفس الواجهات التي تظهر درجات الحرارة مع إختلاف طفيف في الألوان مثل الصورة:

لذا حاول جعله بهذه الطريقة مع التغيير في الألوان التي تناسب موقعك.

انت لم ترى الكود الكود هو منتدى طقس لمشاركة حالة الطقس و تحليلات المستخدمين

Chihab Hedidi · منذ 10 ساعة

بتاريخ 1 دقيقة مضت قال تمام عصام:

انت لم ترى الكود الكود هو منتدى طقس لمشاركة حالة الطقس و تحليلات المستخدمين

إطلعت على موقعك من قبل على منصة حسوب io و هو شغال، لكن تحتاج إلى إنقاص عدد المعلومات التي في الصفحة و لا تحتاج إلى وضع التفاصيل الخاصة بكل الأيام القادمة، و إنما فقط إعتمد على البساطة مثل الصورة التي أرسلت، بحيث تكون معلومات أكثر فقط على اليوم الحالي، و في حالة شخص ما أراد معلومات أكثر على الأيام القادمة يمكنه الضغط على اليوم ليتم عرض هذه التفاصيل.

افضل تصميم للصفحة خاصة بمنتدى طقس

السؤال

تمام عصام

رابط هذا التعليق

شارك على الشبكات الإجتماعية

3 أجوبة على هذا السؤال

Recommended Posts

Chihab Hedidi

رابط هذا التعليق

شارك على الشبكات الإجتماعية

تمام عصام

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Chihab Hedidi

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية