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

تمام عصام · 16 يوليو

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

<?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>

تم التعديل في 16 يوليو بواسطة تمام عصام

Chihab Hedidi · 16 يوليو

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

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

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

Chihab Hedidi · 16 يوليو

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

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

image.png.c7dfeeb0bebd3017ff2d3d8e65b2c187.png

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

تمام عصام · 16 يوليو

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

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

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

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

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

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

السؤال

تمام عصام

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

Recommended Posts

Chihab Hedidi

Chihab Hedidi

تمام عصام

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية