تُعد هذه الإضافة نقلة نوعية في واجهات المنتديات الحديثة، إذ تضيف لوحة تحكم أنيقة تظهر أعلى الأقسام مخصصة للأعضاء المسجلين فقط، ما يمنح تجربة استخدام أكثر تفاعلاً واحترافية. تعتمد الإضافة على تصميم Flat Design عصري بألوان متدرجة ومريحة للعين، مع استخدام خط Cairo العربي ليمنح الواجهة طابعًا حديثًا ومتناسقًا مع المحتوى العربي.
تم تطوير الكود ليكون خفيفًا وسريع الأداء دون أي تأثير ملحوظ على سرعة تصفح المنتدى، مع تركيز واضح على تحسين تجربة العضو من حيث الوصول السريع للمعلومات الأساسية، والمتابعة الفورية لنشاطه داخل المنتدى، في واجهة جذابة وعملية في آنٍ واحد.
تم تطوير الكود ليكون خفيفًا وسريع الأداء دون أي تأثير ملحوظ على سرعة تصفح المنتدى، مع تركيز واضح على تحسين تجربة العضو من حيث الوصول السريع للمعلومات الأساسية، والمتابعة الفورية لنشاطه داخل المنتدى، في واجهة جذابة وعملية في آنٍ واحد.
معاينة الكود
تركيب الكود
لوحة الإدارة > عناصر إضافية > HTML و JAVASCRIPT - إدارة أكواد Javascript، وانشئ كود جديد وعينه في جميع الصفحات.
كود من انشاء Luffy
المصدر: منتدى الدعم
JavaScript:
$(document).ready(function() {
if (_userdata["session_logged_in"] == 1) {
var googleFont = '<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap" rel="stylesheet">';
$('head').append(googleFont);
var cssStyles = `
<style>
:root {
--primary-color: #0079C1;
--accent-color: #FFC107;
--text-dark: #2d3436;
--text-gray: #636e72;
--bg-gradient: linear-gradient(to left, #ffffff, #f8fbfe);
--card-shadow: 0 5px 15px rgba(0,0,0,0.05);
--online-color: #2ecc71;
}
.compact-dash-card {
font-family: 'Cairo', sans-serif;
background: var(--bg-gradient);
border-radius: 12px;
margin-bottom: 20px;
position: relative;
overflow: hidden;
direction: rtl;
box-shadow: var(--card-shadow);
border-right: 6px solid var(--primary-color);
border-left: 6px solid var(--accent-color);
animation: fadeSlideDown 0.6s ease-out;
}
.dash-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px 25px;
gap: 20px;
}
.user-side {
display: flex;
align-items: center;
gap: 18px;
flex: 1.5;
}
.avatar-container {
position: relative;
display: inline-block;
}
.u-avatar img {
width: 75px;
height: 75px;
border-radius: 18px;
object-fit: cover;
border: 3px solid #fff;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
transition: transform 0.3s;
display: block;
}
.u-avatar img:hover { transform: scale(1.05); }
.status-badge {
position: absolute;
bottom: -2px;
right: -2px;
width: 18px;
height: 18px;
background-color: var(--online-color);
border: 3px solid #fff;
border-radius: 50%;
z-index: 2;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
animation: pulse-green 2s infinite;
}
.u-info h2 {
font-size: 20px;
font-weight: 800;
color: var(--text-dark);
margin: 0 0 5px 0;
display: flex;
align-items: center;
}
.u-info h2 i {
color: #f39c12;
margin-left: 8px;
font-size: 22px;
}
.u-info h2 span { color: var(--primary-color); }
.u-bio {
font-size: 13px;
color: var(--text-gray);
margin-bottom: 12px;
line-height: 1.6;
font-weight: 600;
}
.dash-btns { display: flex; gap: 10px; }
.d-btn {
padding: 6px 16px;
border-radius: 8px;
font-size: 12px;
font-weight: 700;
text-decoration: none !important;
display: inline-flex;
align-items: center;
gap: 6px;
transition: all 0.2s;
}
.btn-main {
background: var(--primary-color);
color: #fff;
box-shadow: 0 3px 8px rgba(0, 121, 193, 0.25);
}
.btn-main:hover { background: #0064a0; transform: translateY(-2px); }
.btn-sub {
background: #fff;
color: var(--text-dark);
border: 1px solid #dfe6e9;
}
.btn-sub:hover { border-color: var(--primary-color); transform: translateY(-2px); }
.stats-side {
display: flex;
gap: 12px;
}
.s-box {
background: #fff;
border: 1px solid #edf2f7;
border-radius: 10px;
padding: 8px 15px;
min-width: 80px;
text-align: center;
transition: all 0.3s;
}
.s-box:hover {
transform: translateY(-3px);
border-color: var(--primary-color);
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.s-icon { font-size: 22px; margin-bottom: 2px; display: block; }
.s-num { display: block; font-size: 18px; font-weight: 800; color: #2d3436; }
.s-lbl { font-size: 11px; color: #b2bec3; font-weight: 700; }
@media (max-width: 850px) {
.dash-inner { flex-direction: column; text-align: center; padding: 20px; }
.user-side { flex-direction: column; width: 100%; margin-bottom: 15px; }
.u-info h2 { justify-content: center; }
.dash-btns { justify-content: center; }
.stats-side { width: 100%; justify-content: center; gap: 10px; flex-wrap: wrap; }
.s-box { flex: 1; min-width: 90px; }
.compact-dash-card {
border-right: none; border-left: none;
border-top: 4px solid var(--primary-color);
border-bottom: 4px solid var(--accent-color);
}
}
@keyframes fadeSlideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse-green {
0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7); }
70% { box-shadow: 0 0 0 6px rgba(46, 204, 113, 0); }
100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}
</style>
`;
$('head').append(cssStyles);
var date = new Date();
var hour = date.getHours();
var timeInfo = (hour < 12)
? { msg: "صباح الخير", ico: "wb_sunny" }
: { msg: "مساء الخير", ico: "nights_stay" };
var ud = {
n: _userdata["username"],
a: _userdata["avatar"],
posts: _userdata["user_posts"],
pts: _userdata["user_points"],
rep: _userdata["point_reputation"],
pm: _userdata["user_nb_privmsg"]
};
var htmlCode = `
<div class="compact-dash-card">
<div class="dash-inner">
<div class="user-side">
<div class="avatar-container">
<div class="u-avatar">${ud.a}</div>
<div class="status-badge" title="متصل الآن"></div>
</div>
<div class="u-info">
<h2><i class="material-icons">${timeInfo.ico}</i> ${timeInfo.msg}، <span>${ud.n}</span></h2>
<p class="u-bio">أهلاً بك مجدداً، نتمنى لك تصفحاً ممتعاً ووقتاً سعيداً!</p>
<div class="dash-btns">
<a href="/profile?mode=editprofile" class="d-btn btn-sub">
<i class="material-icons">settings</i> تعديل البيانات
</a>
<a href="/privmsg?folder=inbox" class="d-btn btn-main">
<i class="material-icons">mail</i> الرسائل (${ud.pm})
</a>
</div>
</div>
</div>
<div class="stats-side">
<div class="s-box">
<i class="material-icons s-icon" style="color: #3498db;">forum</i>
<span class="s-num">${ud.posts}</span>
<span class="s-lbl">مساهمة</span>
</div>
<div class="s-box">
<i class="material-icons s-icon" style="color: #f1c40f;">stars</i>
<span class="s-num">${ud.pts}</span>
<span class="s-lbl">نقطة</span>
</div>
<div class="s-box">
<i class="material-icons s-icon" style="color: #e74c3c;">favorite</i>
<span class="s-num">${ud.rep}</span>
<span class="s-lbl">سمعة</span>
</div>
</div>
</div>
</div>
`;
$('.main-inner').prepend(htmlCode);
}
});كود من انشاء Luffy
المصدر: منتدى الدعم