رسوم بيانية تحليلية احترافية لإحصائيات الملف الشخصي

كود جيفري

كود جيفري

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

مثال على الكود​

رسوم بيانية لإحصائيات الملف الشخصي بالشكل الأساسي والتأثير الزجاجي


رسوم بيانية لإحصائيات الملف الشخصي بتأثير النيون الاحترافي


شرح تركيب الكود​

تنبيه مهم: يجب أن تكون تسمية حقول البيانات الشخصية للأعضاء كما هي هنا دون أي تعديل:

JavaScript:
var data = {
                        points: extractStat("نقاط:"),
                        repPositiveGot: extractStat("التقييمات الإيجابية المحصل عليها:"),
                        repNegativeGot: extractStat("التقييمات السلبية المحصل عليها:"),
                        thanksGot: extractStat("عدد المرات التي تلقى فيها العضو كلمات الشكر:"),
                        repPositiveGiven: extractStat("التقييمات الإيجابية الممنوحة:"),
                        repNegativeGiven: extractStat("التقييمات السلبية الممنوحة:"),
                        thanksGiven: extractStat("عدد المرات التي قام فيها العضو بالشكر:"),
                        topics: extractStat("عدد المواضيع"),
                        posts: extractStat("المساهمات:"),
                        friends: extractStat("عدد الأصدقاء:"),
                        pms: extractStat("رسائل خاصة:"),
                        attachments: extractStat("المرفقات:"),
                        joinDate: extractFullText("سجّل في:"),
                        lastVisit: extractFullText("اخر زيارة:"),
                        topicsLink: extractLink("جميع المواضيع التي شارك فيها العضو"),
                        postsLink: extractLink("جميع مساهمات العضو")
                    };

إضافة كود JavaScript
توجه إلى لوحة الإدارة ← عناصر إضافية ← إدارة أكواد Javascript، وأنشئ كودًا جديدًا بالخيارات التالية:
العنوان: يمكنك تسميته "رسوم بيانية تحليلية لإحصائيات الملف الشخصي"
أضف الكود إلى: جميع الصفحات
ثم اختر أحد الأكواد التالية والصقه بالكامل:

الشكل الأول: بدون تأثير
JavaScript:
$(function() {
    if (window.location.pathname.includes('/u') && window.location.pathname.includes('stats')) {

        setTimeout(function() {

            var chartJsScript = document.createElement('script');
            chartJsScript.src = 'https://cdn.jsdelivr.net/npm/chart.js';
            document.head.appendChild(chartJsScript);

            chartJsScript.onload = function() {
                var statsContainer = $('.cp-inner .block-content').first();
                if (statsContainer.length === 0) return;

                function extractStat(label) {
                    var element = statsContainer.find(`dt:contains("${label}")`).next('dd');
                    return parseFloat(element.text()) || 0;
                }

                function extractFullText(label) {
                    var element = statsContainer.find(`dt:contains("${label}")`).next('dd');
                    return element.text().trim() || '-';
                }

                function extractLink(text) {
                    var element = statsContainer.find(`a:contains("${text}")`);
                    return element.attr('href') || '#';
                }

                var data = {
                    points: extractStat("نقاط:"),
                    repPositiveGot: extractStat("التقييمات الإيجابية المحصل عليها:"),
                    repNegativeGot: extractStat("التقييمات السلبية المحصل عليها:"),
                    thanksGot: extractStat("عدد المرات التي تلقى فيها العضو كلمات الشكر:"),
                    repPositiveGiven: extractStat("التقييمات الإيجابية الممنوحة:"),
                    repNegativeGiven: extractStat("التقييمات السلبية الممنوحة:"),
                    thanksGiven: extractStat("عدد المرات التي قام فيها العضو بالشكر:"),
                    topics: extractStat("عدد المواضيع"),
                    posts: extractStat("المساهمات:"),
                    friends: extractStat("عدد الأصدقاء:"),
                    pms: extractStat("رسائل خاصة:"),
                    attachments: extractStat("المرفقات:"),
                    joinDate: extractFullText("سجّل في:"),
                    lastVisit: extractFullText("اخر زيارة:"),
                    topicsLink: extractLink("جميع المواضيع التي شارك فيها العضو"),
                    postsLink: extractLink("جميع مساهمات العضو")
                };
                data.replies = data.posts - data.topics;
                if (data.replies < 0) data.replies = 0;

                var dashboardHTML = `
                    <div id="pro-dashboard">
                        <div class="kpi-grid"></div>
                        <div class="charts-grid"></div>
                        <div class="radar-container"></div>
                        <div class="info-footer"></div>
                    </div>
                `;

                var styles = `
                    <style>
                        @keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
                        #pro-dashboard { font-family: 'Cairo', sans-serif; animation: fadeIn 0.6s ease-out; }
                        .pro-card { background: linear-gradient(145deg, #2a2a3e, #1e1e2d); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); padding: 20px; transition: all 0.3s ease; }
                        .pro-card:hover { transform: translateY(-5px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); }
                        .card-header { font-size: 16px; font-weight: bold; margin-bottom: 15px; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 10px; display: flex; align-items: center; }
                        .card-header .material-icons { margin-left: 8px; font-size: 20px; color: #8899a6; }
                        .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; margin-bottom: 20px; }
                        .kpi-card { text-align: center; padding: 20px; position: relative; }
                        .kpi-value { font-size: 32px; font-weight: bold; color: #55aaff; line-height: 1.1; margin-bottom: 5px; }
                        .kpi-label { font-size: 13px; color: #8899a6; }
                        .kpi-icon-link { position: absolute; bottom: 10px; left: 10px; color: #8899a6; background-color: rgba(255, 255, 255, 0.08); border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: all 0.2s ease; }
                        .kpi-icon-link:hover { color: #fff; background-color: #55aaff; transform: scale(1.1); }
                        .kpi-icon-link .material-icons { font-size: 20px; }
                        .charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
                        .radar-container { margin-bottom: 20px; }
                        .info-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; background: rgba(0,0,0,0.15); padding: 20px; border-radius: 8px; }
                        .info-item { display: flex; justify-content: space-between; font-size: 13px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
                        .info-label { color: #ccc; }
                        .info-value { color: #8899a6; }
                        @media (max-width: 980px) { .charts-grid { grid-template-columns: 1fr; } }
                    </style>
                `;
                
                statsContainer.empty().css({'padding': '20px', 'background': '#161625'}).html(styles + dashboardHTML);
                
                var kpiContainer = $('#pro-dashboard .kpi-grid');
                kpiContainer.append(`<div class="kpi-card pro-card"><div class="kpi-value">${data.topics}</div><div class="kpi-label">المواضيع</div><a href="${data.topicsLink}" class="kpi-icon-link" title="عرض المواضيع"><i class="material-icons">search</i></a></div>`);
                kpiContainer.append(`<div class="kpi-card pro-card"><div class="kpi-value">${data.posts}</div><div class="kpi-label">المساهمات</div><a href="${data.postsLink}" class="kpi-icon-link" title="عرض المساهمات"><i class="material-icons">search</i></a></div>`);
                kpiContainer.append(`<div class="kpi-card pro-card"><div class="kpi-value">${data.friends}</div><div class="kpi-label">الأصدقاء</div></div>`);
                kpiContainer.append(`<div class="kpi-card pro-card"><div class="kpi-value">${data.points}</div><div class="kpi-label">النقاط</div></div>`);

                var chartsContainer = $('#pro-dashboard .charts-grid');
                chartsContainer.append('<div class="pro-card"><div class="card-header"><i class="material-icons">pie_chart</i>تحليل المساهمات</div><canvas id="contentChart" height="250"></canvas></div>');
                new Chart(document.getElementById('contentChart'), { type: 'doughnut', data: { labels: ['مواضيع جديدة', 'ردود'], datasets: [{ data: [data.topics, data.replies], backgroundColor: ['#2980b9', '#27ae60'], borderWidth: 0 }] }, options: { responsive: true, plugins: { legend: { labels: { color: '#ccc' } } } } });

                chartsContainer.append('<div class="pro-card"><div class="card-header"><i class="material-icons">bar_chart</i>السمعة المكتسبة</div><canvas id="reputationChart" height="250"></canvas></div>');
                new Chart(document.getElementById('reputationChart'), { type: 'bar', data: { labels: ['تقييم إيجابي', 'شكر', 'تقييم سلبي'], datasets: [{ data: [data.repPositiveGot, data.thanksGot, data.repNegativeGot], backgroundColor: ['#27ae60', '#f39c12', '#c0392b'] }] }, options: { responsive: true, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, ticks: { color: '#ccc' } }, x: { ticks: { color: '#ccc' } } } } });

                if (data.repPositiveGiven || data.thanksGiven || data.repNegativeGiven) {
                    $('#pro-dashboard .radar-container').append('<div class="pro-card"><div class="card-header"><i class="material-icons">track_changes</i>مقارنة التفاعل</div><canvas id="interactionChart" height="300"></canvas></div>');
                    new Chart(document.getElementById('interactionChart'), { type: 'radar', data: { labels: ['تقييمات إيجابية', 'مرات الشكر', 'تقييمات سلبية'], datasets: [ { label: 'ما حصل عليه', data: [data.repPositiveGot, data.thanksGot, data.repNegativeGot], backgroundColor: 'rgba(41, 128, 185, 0.3)', borderColor: '#2980b9', pointBackgroundColor: '#2980b9' }, { label: 'ما قدمه', data: [data.repPositiveGiven, data.thanksGiven, data.repNegativeGiven], backgroundColor: 'rgba(39, 174, 96, 0.3)', borderColor: '#27ae60', pointBackgroundColor: '#27ae60' } ] }, options: { responsive: true, scales: { r: { angleLines: { color: 'rgba(255,255,255,0.1)' }, grid: { color: 'rgba(255,255,255,0.1)' }, pointLabels: { color: '#ccc', font: { size: 13 } }, ticks: { backdropColor: '#1a1a29', color: '#888' } } }, plugins: { legend: { labels: { color: '#ccc' } } } } });
                }
                
                var infoContainer = $('#pro-dashboard .info-footer');
                infoContainer.html(`
                    <div class="info-item"><span class="info-label">تاريخ&nbsp;التسجيل</span><span class="info-value">${data.joinDate}</span></div>
                    <div class="info-item"><span class="info-label">آخر&nbsp;زيارة</span><span class="info-value">${data.lastVisit}</span></div>
                    <div class="info-item"><span class="info-label">رسائل&nbsp;خاصة</span><span class="info-value">${data.pms}</span></div>
                    <div class="info-item"><span class="info-label">المرفقات</span><span class="info-value">${data.attachments}</span></div>
                `);
            };

        }, 650);

    }
});

الشكل الثاني: تأثير زجاجي
JavaScript:
$(function() {
        if (window.location.pathname.includes('/u') && window.location.pathname.includes('stats')) {
        setTimeout(function() {
            var chartJsScript = document.createElement('script');
            chartJsScript.src = 'https://cdn.jsdelivr.net/npm/chart.js';
            document.head.appendChild(chartJsScript);

            chartJsScript.onload = function() {
                var statsContainer = $('.cp-inner .block-content').first();
                if (statsContainer.length === 0) return;

                function extractStat(label) {
                    var element = statsContainer.find(`dt:contains("${label}")`).next('dd');
                    return parseFloat(element.text()) || 0;
                }

                function extractFullText(label) {
                    var element = statsContainer.find(`dt:contains("${label}")`).next('dd');
                    return element.text().trim() || '-';
                }

                function extractLink(text) {
                    var element = statsContainer.find(`a:contains("${text}")`);
                    return element.attr('href') || '#';
                }

                var data = {
                    points: extractStat("نقاط:"),
                    repPositiveGot: extractStat("التقييمات الإيجابية المحصل عليها:"),
                    repNegativeGot: extractStat("التقييمات السلبية المحصل عليها:"),
                    thanksGot: extractStat("عدد المرات التي تلقى فيها العضو كلمات الشكر:"),
                    repPositiveGiven: extractStat("التقييمات الإيجابية الممنوحة:"),
                    repNegativeGiven: extractStat("التقييمات السلبية الممنوحة:"),
                    thanksGiven: extractStat("عدد المرات التي قام فيها العضو بالشكر:"),
                    topics: extractStat("عدد المواضيع"),
                    posts: extractStat("المساهمات:"),
                    friends: extractStat("عدد الأصدقاء:"),
                    pms: extractStat("رسائل خاصة:"),
                    attachments: extractStat("المرفقات:"),
                    joinDate: extractFullText("سجّل في:"),
                    lastVisit: extractFullText("اخر زيارة:"),
                    topicsLink: extractLink("جميع المواضيع التي شارك فيها العضو"),
                    postsLink: extractLink("جميع مساهمات العضو")
                };
                data.replies = data.posts - data.topics;
                if (data.replies < 0) data.replies = 0;

                var dashboardHTML = `
                    <div id="pro-dashboard">
                        <div class="kpi-grid"></div>
                        <div class="charts-grid"></div>
                        <div class="radar-container"></div>
                        <div class="info-footer"></div>
                    </div>
                `;

                var styles = `
                    <style>
                        @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
                        #pro-dashboard { font-family: 'Cairo', sans-serif; animation: fadeIn 0.8s ease-out; }
                        
                        .pro-card {
                            background: rgba(30, 30, 45, 0.45);
                            backdrop-filter: blur(12px);
                            -webkit-backdrop-filter: blur(12px);
                            border-radius: 16px;
                            border: 1px solid rgba(255, 255, 255, 0.15);
                            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
                            padding: 25px;
                            transition: all 0.3s ease;
                            position: relative;
                            overflow: hidden;
                        }

                        .pro-card::before {
                            content: '';
                            position: absolute;
                            top: 0;
                            left: -150%;
                            width: 70%;
                            height: 100%;
                            background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);
                            transform: skewX(-25deg);
                            transition: left 0.7s ease-in-out;
                        }

                        .pro-card:hover::before {
                            left: 150%;
                        }
                        
                        .card-header {
                            font-size: 16px;
                            font-weight: bold;
                            margin-bottom: 20px;
                            color: #E0E0E0;
                            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
                            padding-bottom: 15px;
                            display: flex;
                            align-items: center;
                        }
                        .card-header .material-icons { margin-left: 10px; font-size: 22px; color: #00bcd4; }
                        
                        .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; margin-bottom: 20px; }
                        .kpi-card { text-align: center; }
                        .kpi-value { font-size: 36px; font-weight: 700; color: #FFFFFF; line-height: 1.1; margin-bottom: 8px; text-shadow: 0 0 10px rgba(0, 188, 212, 0.5); }
                        .kpi-label { font-size: 14px; color: #B0B0B0; }
                        .kpi-icon-link { position: absolute; bottom: 15px; left: 15px; color: #B0B0B0; background-color: rgba(0, 0, 0, 0.2); border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: all 0.3s ease; }
                        .kpi-icon-link:hover { color: #fff; background-color: #00bcd4; transform: scale(1.1); }
                        .kpi-icon-link .material-icons { font-size: 20px; }
                        
                        .charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
                        .radar-container { margin-bottom: 20px; }

                        .info-footer { background: transparent; padding: 0; border-radius: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
                        .info-item { display: flex; justify-content: space-between; font-size: 14px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
                        .info-label { color: #E0E0E0; }
                        .info-value { color: #B0B0B0; }
                        
                        @media (max-width: 980px) { .charts-grid { grid-template-columns: 1fr; } }
                    </style>
                `;
                
                statsContainer.empty().css({
                    'padding': '25px',
                    'background': 'linear-gradient(135deg, #1f2233 0%, #3d2f44 100%)'
                }).html(styles + dashboardHTML);
                
                var kpiContainer = $('#pro-dashboard .kpi-grid');
                kpiContainer.append(`<div class="kpi-card pro-card"><div class="kpi-value">${data.topics}</div><div class="kpi-label">المواضيع</div><a href="${data.topicsLink}" class="kpi-icon-link" title="عرض المواضيع"><i class="material-icons">search</i></a></div>`);
                kpiContainer.append(`<div class="kpi-card pro-card"><div class="kpi-value">${data.posts}</div><div class="kpi-label">المساهمات</div><a href="${data.postsLink}" class="kpi-icon-link" title="عرض المساهمات"><i class="material-icons">search</i></a></div>`);
                kpiContainer.append(`<div class="kpi-card pro-card"><div class="kpi-value">${data.friends}</div><div class="kpi-label">الأصدقاء</div></div>`);
                kpiContainer.append(`<div class="kpi-card pro-card"><div class="kpi-value">${data.points}</div><div class="kpi-label">النقاط</div></div>`);

                var chartsContainer = $('#pro-dashboard .charts-grid');
                chartsContainer.append('<div class="pro-card"><div class="card-header"><i class="material-icons">pie_chart</i>تحليل المساهمات</div><canvas id="contentChart" height="250"></canvas></div>');
                new Chart(document.getElementById('contentChart'), { type: 'doughnut', data: { labels: ['مواضيع جديدة', 'ردود'], datasets: [{ data: [data.topics, data.replies], backgroundColor: ['#00bcd4', '#4CAF50'], borderWidth: 0 }] }, options: { responsive: true, plugins: { legend: { labels: { color: '#B0B0B0' } } } } });

                chartsContainer.append('<div class="pro-card"><div class="card-header"><i class="material-icons">bar_chart</i>السمعة المكتسبة</div><canvas id="reputationChart" height="250"></canvas></div>');
                new Chart(document.getElementById('reputationChart'), { type: 'bar', data: { labels: ['تقييم إيجابي', 'شكر', 'تقييم سلبي'], datasets: [{ data: [data.repPositiveGot, data.thanksGot, data.repNegativeGot], backgroundColor: ['#4CAF50', '#FFC107', '#F44336'] }] }, options: { responsive: true, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, ticks: { color: '#B0B0B0' }, grid: { color: 'rgba(255,255,255,0.1)' } }, x: { ticks: { color: '#B0B0B0' }, grid: { color: 'rgba(255,255,255,0.1)' } } } } });

                if (data.repPositiveGiven || data.thanksGiven || data.repNegativeGiven) {
                    $('#pro-dashboard .radar-container').append('<div class="pro-card"><div class="card-header"><i class="material-icons">track_changes</i>مقارنة التفاعل</div><canvas id="interactionChart" height="300"></canvas></div>');
                    new Chart(document.getElementById('interactionChart'), { type: 'radar', data: { labels: ['تقييمات إيجابية', 'مرات الشكر', 'تقييمات سلبية'], datasets: [ { label: 'ما حصل عليه', data: [data.repPositiveGot, data.thanksGot, data.repNegativeGot], backgroundColor: 'rgba(0, 188, 212, 0.3)', borderColor: '#00bcd4', pointBackgroundColor: '#00bcd4' }, { label: 'ما قدمه', data: [data.repPositiveGiven, data.thanksGiven, data.repNegativeGiven], backgroundColor: 'rgba(76, 175, 80, 0.3)', borderColor: '#4CAF50', pointBackgroundColor: '#4CAF50' } ] }, options: { responsive: true, scales: { r: { angleLines: { color: 'rgba(255,255,255,0.15)' }, grid: { color: 'rgba(255,255,255,0.15)' }, pointLabels: { color: '#E0E0E0', font: { size: 13 } }, ticks: { backdropColor: 'rgba(30, 30, 45, 0.45)', color: '#B0B0B0' } } }, plugins: { legend: { labels: { color: '#E0E0E0' } } } } });
                }
                
                var infoContainer = $('#pro-dashboard .info-footer');
                infoContainer.html(`
                    <div class="info-item"><span class="info-label">تاريخ&nbsp;التسجيل</span><span class="info-value">${data.joinDate}</span></div>
                    <div class="info-item"><span class="info-label">آخر&nbsp;زيارة</span><span class="info-value">${data.lastVisit}</span></div>
                    <div class="info-item"><span class="info-label">رسائل&nbsp;خاصة</span><span class="info-value">${data.pms}</span></div>
                    <div class="info-item"><span class="info-label">المرفقات</span><span class="info-value">${data.attachments}</span></div>
                `);
            };
        }, 650);
        }
    });

الشكل الثالث: تأثير نيون
JavaScript:
$(function() {
        if (window.location.pathname.includes('/u') && window.location.pathname.includes('stats')) {
                 setTimeout(function() {   
          var fontLink = document.createElement('link');
            fontLink.href = 'https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap';
            fontLink.rel = 'stylesheet';
            document.head.appendChild(fontLink);

            var chartJsScript = document.createElement('script');
            chartJsScript.src = 'https://cdn.jsdelivr.net/npm/chart.js';
            document.head.appendChild(chartJsScript);

            chartJsScript.onload = function() {
                var statsContainer = $('.cp-inner .block-content').first();
                if (statsContainer.length === 0) return;

                function extractStat(label) {
                    var element = statsContainer.find(`dt:contains("${label}")`).next('dd');
                    return parseFloat(element.text()) || 0;
                }

                function extractFullText(label) {
                    var element = statsContainer.find(`dt:contains("${label}")`).next('dd');
                    return element.text().trim() || '-';
                }

                function extractLink(text) {
                    var element = statsContainer.find(`a:contains("${text}")`);
                    return element.attr('href') || '#';
                }

                var data = {
                    points: extractStat("نقاط:"),
                    repPositiveGot: extractStat("التقييمات الإيجابية المحصل عليها:"),
                    repNegativeGot: extractStat("التقييمات السلبية المحصل عليها:"),
                    thanksGot: extractStat("عدد المرات التي تلقى فيها العضو كلمات الشكر:"),
                    repPositiveGiven: extractStat("التقييمات الإيجابية الممنوحة:"),
                    repNegativeGiven: extractStat("التقييمات السلبية الممنوحة:"),
                    thanksGiven: extractStat("عدد المرات التي قام فيها العضو بالشكر:"),
                    topics: extractStat("عدد المواضيع"),
                    posts: extractStat("المساهمات:"),
                    friends: extractStat("عدد الأصدقاء:"),
                    pms: extractStat("رسائل خاصة:"),
                    attachments: extractStat("المرفقات:"),
                    joinDate: extractFullText("سجّل في:"),
                    lastVisit: extractFullText("اخر زيارة:"),
                    topicsLink: extractLink("جميع المواضيع التي شارك فيها العضو"),
                    postsLink: extractLink("جميع مساهمات العضو")
                };
                data.replies = data.posts - data.topics;
                if (data.replies < 0) data.replies = 0;

                var dashboardHTML = `
                    <div id="pro-dashboard">
                        <div class="kpi-grid"></div>
                        <div class="charts-grid"></div>
                        <div class="radar-container"></div>
                        <div class="info-footer"></div>
                    </div>
                `;

                var styles = `
                    <style>
                        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
                        @keyframes pulseGlow {
                            0%, 100% { box-shadow: 0 0 15px -5px rgba(0, 231, 255, 0.4), inset 0 0 10px -5px rgba(0, 231, 255, 0.3); }
                            50% { box-shadow: 0 0 25px 0px rgba(0, 231, 255, 0.6), inset 0 0 15px 0px rgba(0, 231, 255, 0.5); }
                        }

                        #pro-dashboard { font-family: 'Share Tech Mono', 'Cairo', monospace; animation: fadeIn 1s ease-in; color: #EAEAEA; }
                        
                        .pro-card {
                            background: rgba(0, 25, 35, 0.5);
                            backdrop-filter: blur(2px);
                            -webkit-backdrop-filter: blur(2px);
                            clip-path: polygon(0 20px, 20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
                            padding: 25px;
                            position: relative;
                            border: 1px solid rgba(0, 231, 255, 0.2);
                            animation: pulseGlow 6s infinite ease-in-out;
                            transition: all 0.3s ease;
                        }
                        .pro-card:hover {
                            background: rgba(0, 35, 45, 0.7);
                        }

                        .pro-card::before, .pro-card::after {
                            content: '';
                            position: absolute;
                            width: 25px;
                            height: 25px;
                            border-style: solid;
                            border-color: #00e7ff;
                            transition: all 0.3s ease;
                        }
                        .pro-card::before { top: -2px; left: -2px; border-width: 2px 0 0 2px; }
                        .pro-card::after { bottom: -2px; right: -2px; border-width: 0 2px 2px 0; }
                        .pro-card:hover::before { width: 50px; height: 50px; }
                        .pro-card:hover::after { width: 50px; height: 50px; }

                        .card-header { font-size: 16px; margin-bottom: 20px; color: #00e7ff; text-transform: uppercase; letter-spacing: 1px; display: flex; align-items: center; justify-content: flex-start; }
                        .card-header .material-icons { margin-right: 10px; margin-left: 0; font-size: 20px; }
                        
                        .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; margin-bottom: 20px; }
                        .kpi-card { text-align: center; }
                        .kpi-value { font-size: 36px; font-weight: 700; color: #FFFFFF; margin-bottom: 8px; text-shadow: 0 0 12px #00e7ff; }
                        .kpi-label { font-size: 14px; color: #8aA7B1; text-transform: uppercase; }
                        .kpi-icon-link { position: absolute; top: 10px; left: 10px; color: #8aA7B1; border: 1px solid #8aA7B1; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: all 0.3s ease; }
                        .kpi-icon-link:hover { color: #fff; background-color: #00e7ff; border-color: #00e7ff; box-shadow: 0 0 15px #00e7ff; }
                        .kpi-icon-link .material-icons { font-size: 18px; }
                        
                        .charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
                        .radar-container { margin-bottom: 20px; }

                        .info-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding-top: 15px; }
                        .info-item { display: flex; justify-content: space-between; font-size: 14px; padding: 10px; background: rgba(0,0,0,0.2); }
                        .info-label { color: #8aA7B1; }
                        .info-value { color: #EAEAEA; }
                        
                        @media (max-width: 980px) { .charts-grid { grid-template-columns: 1fr; } }
                    </style>
                `;
                
                statsContainer.empty().css({
                    'padding': '25px',
                    'background': '#010409'
                }).html(styles + dashboardHTML);
                
                var kpiContainer = $('#pro-dashboard .kpi-grid');
                kpiContainer.append(`<div class="kpi-card pro-card"><div class="kpi-value">${data.topics}</div><div class="kpi-label">المواضيع</div><a href="${data.topicsLink}" class="kpi-icon-link" title="عرض المواضيع"><i class="material-icons">search</i></a></div>`);
                kpiContainer.append(`<div class="kpi-card pro-card"><div class="kpi-value">${data.posts}</div><div class="kpi-label">المساهمات</div><a href="${data.postsLink}" class="kpi-icon-link" title="عرض المساهمات"><i class="material-icons">search</i></a></div>`);
                kpiContainer.append(`<div class="kpi-card pro-card"><div class="kpi-value">${data.friends}</div><div class="kpi-label">الأصدقاء</div></div>`);
                kpiContainer.append(`<div class="kpi-card pro-card"><div class="kpi-value">${data.points}</div><div class="kpi-label">النقاط</div></div>`);

                var chartsContainer = $('#pro-dashboard .charts-grid');
                chartsContainer.append(`<div class="pro-card"><div class="card-header"><i class="material-icons">pie_chart</i>تحليلات المساهمات</div><canvas id="contentChart" height="250"></canvas></div>`);
                new Chart(document.getElementById('contentChart'), { type: 'doughnut', data: { labels: ['مواضيع جديدة', 'ردود'], datasets: [{ data: [data.topics, data.replies], backgroundColor: ['#00e7ff', '#084f74'], borderColor: '#010409', borderWidth: 2 }] }, options: { responsive: true, plugins: { legend: { labels: { color: '#8aA7B1', font: { family: "'Share Tech Mono', 'Cairo', monospace" } } } } } });

                chartsContainer.append(`<div class="pro-card"><div class="card-header"><i class="material-icons">bar_chart</i>السمعة المكتسبة</div><canvas id="reputationChart" height="250"></canvas></div>`);
                new Chart(document.getElementById('reputationChart'), { type: 'bar', data: { labels: ['إيجابي', 'شكر', 'سلبي'], datasets: [{ data: [data.repPositiveGot, data.thanksGot, data.repNegativeGot], backgroundColor: ['#00e7ff', '#fbc02d', '#d92964'] }] }, options: { responsive: true, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, ticks: { color: '#8aA7B1', font: { family: "'Share Tech Mono', 'Cairo', monospace" } }, grid: { color: 'rgba(0, 231, 255, 0.1)' } }, x: { ticks: { color: '#8aA7B1', font: { family: "'Share Tech Mono', 'Cairo', monospace" } }, grid: { display: false } } } } });

                if (data.repPositiveGiven || data.thanksGiven || data.repNegativeGiven) {
                    $('#pro-dashboard .radar-container').append('<div class="pro-card"><div class="card-header"><i class="material-icons">track_changes</i>مقارنة&nbsp;التفاعل</div><canvas id="interactionChart" height="300"></canvas></div>');
                    new Chart(document.getElementById('interactionChart'), { type: 'radar', data: { labels: ['تقييم إيجابي', 'مرات الشكر', 'تقييم سلبي'], datasets: [ { label: 'ما حصل عليه', data: [data.repPositiveGot, data.thanksGot, data.repNegativeGot], backgroundColor: 'rgba(0, 231, 255, 0.4)', borderColor: '#00e7ff', pointBackgroundColor: '#00e7ff' }, { label: 'ما قدمه', data: [data.repPositiveGiven, data.thanksGiven, data.repNegativeGiven], backgroundColor: 'rgba(217, 41, 100, 0.4)', borderColor: '#d92964', pointBackgroundColor: '#d92964' } ] }, options: { responsive: true, scales: { r: { angleLines: { color: 'rgba(255, 255, 255, 0.2)' }, grid: { color: 'rgba(255, 255, 255, 0.2)' }, pointLabels: { color: '#EAEAEA', font: { size: 12, family: "'Share Tech Mono', 'Cairo', monospace" } }, ticks: { backdropColor: 'rgba(0,0,0,0.5)', color: '#8aA7B1' } } }, plugins: { legend: { labels: { color: '#EAEAEA', font: { family: "'Share Tech Mono', 'Cairo', monospace" } } } } } });
                }
                
                var infoContainer = $('#pro-dashboard .info-footer');
                infoContainer.html(`
                    <div class="info-item"><span class="info-label">تاريخ&nbsp;التسجيل</span><span class="info-value">${data.joinDate}</span></div>
                    <div class="info-item"><span class="info-label">آخر&nbsp;زيارة</span><span class="info-value">${data.lastVisit}</span></div>
                    <div class="info-item"><span class="info-label">رسائل&nbsp;خاصة</span><span class="info-value">${data.pms}</span></div>
                    <div class="info-item"><span class="info-label">المرفقات</span><span class="info-value">${data.attachments}</span></div>
                `);
            };
        }, 650);
        }
    });

ثم اضغط على زر قدم.

إضافة تمنح الملف الشخصي طابعًا احترافيًا وتحفز الأعضاء على زيادة تفاعلهم لرؤية أرقامهم تنمو. مع الشكر للعضو كونان2000 على ملاحظاته في تحسين الكود.

صاحب الكود: Lufy
 
يجب تسجيل الدخول أو التسجيل كي تتمكن من الرد هنا.

رأيك جزء من المعرفة.

أضف تجربتك أو سؤالك، فالنقاش يكمل الفكرة.

في هذا الموضوع

صاحب النقاش

كود جيفري
كود جيفريعضو جديد

معرفة تكبر بالنقاش

وجدت معلومة مفيدة؟ أضف تجربتك أو سؤالك ليساعد النقاش أعضاء آخرين.

أكمل رحلتك

كود يخفي أي جزء من المساهمة عن الزواركود الروابط أو الزيارات الأخيرة في المنتدىتمييز المساهمات حسب الجهاز (الهواتف والكمبيوترات)
عودة
أعلى