إضافة نظام تقييم للمشاركات في لمدونة بلوجر

<style>
    .rating-container {
        background: #f9f9f9;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
        margin-top: 20px;
        text-align: center;
    }

    .rating-title {
        font-size: 1.5em;
        margin-bottom: 10px;
        color: #333;
        font-weight: bold;
    }

    .rating {
        display: flex;
        direction: rtl; /* عرض النجوم من اليمين لليسار */
        justify-content: center;
        gap: 10px;
    }

    .rating input {
        display: none; /* إخفاء عناصر الإدخال */
    }

    .rating label {
        font-size: 2.5em;
        cursor: pointer;
        transition: color 0.3s;
        color: #ddd;
    }

    .rating input:checked ~ label,
    .rating input:hover ~ label {
        color: #ffcc00;
    }

    .rating input:checked ~ label:hover,
    .rating input:hover ~ label:hover {
        color: #ffc107;
    }

    .rank {
        font-size: 1.2em;
        font-weight: bold;
        margin-top: 10px;
        color: #555;
    }
</style>

<div class="rating-container">

    <p class="rating-title">قيم هذه المشاركة:</p>

    <div class="rating">

        <input type="radio" name="star" id="star5"><label for="star5">⭐️</label>

        <input type="radio" name="star" id="star4"><label for="star4">⭐️</label>

        <input type="radio" name="star" id="star3"><label for="star3">⭐️</label>

        <input type="radio" name="star" id="star2"><label for="star2">⭐️</label>

        <input type="radio" name="star" id="star1"><label for="star1">⭐️</label>

    </div>

    <p class="rank">التقييم: غير محدد</p>

</div>

<meta content="post-&lt;data:post.id/&gt;" itemprop="identifier"></meta>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // استرجاع معرف المشاركة الحالي
        const postIDMeta = document.querySelector('meta[itemprop="identifier"]');
        if (!postIDMeta) return;
        const postID = postIDMeta.content;

        // استرجاع التقييم المحفوظ إن وجد
        const savedRating = localStorage.getItem(`post-rating-${postID}`);
        if (savedRating) {
            document.getElementById(`star${savedRating}`).checked = true;
            updateRankText(savedRating);
        }

        // إضافة الاستماع لتغيرات التقييم
        document.querySelectorAll('.rating input').forEach((input) => {
            input.addEventListener('change', function() {
                let ratingValue = document.querySelector('.rating input:checked').id.replace('star', '');
                
                // حفظ التقييم في التخزين المحلي
                localStorage.setItem(`post-rating-${postID}`, ratingValue);
                
                // تحديث النص للرتبة
                updateRankText(ratingValue);
            });
        });

        // دالة لتحديث النص الخاص بالرتبة
        function updateRankText(ratingValue) {
            let rankText = '';
            switch (ratingValue) {
                case '5':
                    rankText = 'ممتاز';
                    break;
                case '4':
                    rankText = 'جيد جداً';
                    break;
                case '3':
                    rankText = 'جيد';
                    break;
                case '2':
                    rankText = 'مقبول';
                    break;
                case '1':
                    rankText = 'ضعيف';
                    break;
            }
            document.querySelectorAll('.rank').forEach((rankElement) => {
                rankElement.textContent = `التقييم: ${rankText}`;
            });
        }
    });
</script>