كود النسر اللماسي للاعظاء والرتب التسلسليه

[العراقي الطائي]

تقدرتطوره وتجيب صوره الاعظاء وتقدر تجيب نقاط الاعظاء
وغيرها وتقدر ايظا تعدل عليه ليظهر في بيانات الاعظاء
كود اكثر من رائع يضعلك رتبه للعظو حسب نقاطه ومشاركاته
كود الجافا

/* RAZAN DIWAN - FIXED V3 - يظهر 100% */
$(function(){
  if(!$('#razan-heroes').length){
    console.log('ما لقيت DIV #razan-heroes - حطيته تلقائي');
    $('body').prepend('<div id="razan-heroes"></div>');
  }

  var css = `
  #razan-heroes{display:block!important;width:98%!important;max-width:1400px;margin:24px auto!important;direction:rtl;font-family:Tajawal,sans-serif;border-radius:22px;overflow:hidden;position:relative;border:2px solid rgba(255,183,3,.35);background:#001219;z-index:1}
  #razan-heroes::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,18,25,.85),rgba(10,20,69,.85)),url('https://images.unsplash.com/photo-1505228395891-9a51e7e86bf6?w=1920&q=80') center/cover;z-index:0}
 .razan-heroes-head{position:relative;z-index:2;text-align:center;padding:24px;border-bottom:2px solid #ffb703;background:rgba(0,0,0,.3)}
 .razan-heroes-title{font-size:22px;font-weight:900;color:#fff;margin:0}.razan-heroes-title span{color:#ffb703}
 .razan-heroes-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(6,1fr);gap:12px;padding:20px}
 .razan-hero-card{background:linear-gradient(160deg,rgba(0,18,25,.9),rgba(10,20,69,.8));border:1px solid rgba(255,183,3,.3);border-radius:14px;padding:14px;text-align:center;min-height:180px}
 .razan-hero-avatar{width:70px;height:70px;border-radius:50%;border:2px solid #ffb703;margin-bottom:8px}
 .razan-hero-name a{color:#fff!important;font-weight:800;text-decoration:none!important;font-size:13px}
 .razan-hero-rank{margin:6px 0;padding:3px 8px;border-radius:99px;background:rgba(255,183,3,.15);border:1px solid #ffb703;color:#ffb703;font-size:10px;display:inline-block}
 .razan-awards-guide{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:12px;background:rgba(0,0,0,.4);border-top:1px solid rgba(255,183,3,.2)}
 .razan-guide-item{display:flex;align-items:center;gap:5px;background:rgba(255,255,255,.05);padding:4px 10px;border-radius:99px;color:#fff;font-size:11px}
  @media(max-width:900px){.razan-heroes-grid{grid-template-columns:repeat(3,1fr)}}
  @media(max-width:500px){.razan-heroes-grid{grid-template-columns:repeat(2,1fr)}}
  `;
  if(!$('#razan-heroes-style').length){
    $('head').append('<style id="razan-heroes-style">'+css+'</style>');
  }

  var awards=[
    {min:0,max:200,title:"نجم لامع",icon:"https://i.servimg.com/u/f65/20/63/77/31/1410.gif"},
    {min:200,max:1000,title:"بريق الماس",icon:"https://i.servimg.com/u/f65/20/63/77/31/2211.gif"},
    {min:1000,max:3000,title:"تاج الإبداع",icon:"https://i.servimg.com/u/f65/20/63/77/31/1310.gif"},
    {min:3000,max:8000,title:"سمو الأمير",icon:"https://i.servimg.com/u/f65/20/63/77/31/410.gif"},
    {min:8000,max:999999,title:"السلطان",icon:"https://i.servimg.com/u/f65/20/63/77/31/310.gif"}
  ];

  function renderGuide(){
    var g='<div class="razan-awards-guide">';
    awards.forEach(function(a){ g+='<div class="razan-guide-item"><img src="'+a.icon+'" width="16"> '+a.title+'</div>'; });
    g+='</div>';
    return g;
  }

  function showBox(users){
    var html='<div class="razan-heroes-head"><h2 class="razan-heroes-title">عمالقة <span>جزيرة رازان</span></h2><div style="color:rgba(255,255,255,.6);font-size:12px">يحدث تلقائيا</div></div>';
    html+='<div class="razan-heroes-grid" id="razan-load-area">';

    if(!users ||!users.length){
      html+='<div style="grid-column:1/-1;text-align:center;padding:20px;color:#ffb703">لا يوجد اعضاء - جاري جلب من المنتدى...</div>';
    }else{
      users.forEach(function(u){
        html+='<div class="razan-hero-card"><img src="'+(u.avatar||'https://i.servimg.com/u/f65/20/63/77/31/a_aa10.png')+'" class="razan-hero-avatar"><div class="razan-hero-name"><a href="'+u.link+'">'+u.name+'</a></div><div class="razan-hero-rank">'+u.rank+'</div><div style="margin-top:6px"><img src="'+u.icon+'" width="20"></div></div>';
      });
    }
    html+='</div>'+renderGuide();
    $('#razan-heroes').html(html).show().css('display','block');
  }

  // يظهر فورا حتى قبل الجلب
  showBox([]);

  console.log('يبدأ جلب من /memberlist...');

  // جلب من memberlist بدل viewonline - يشتغل بدون تسجيل
  $.get('/memberlist', function(data){
    var users=[];
    $(data).find('a[href^="/u"]').each(function(){
      var name=$(this).text().trim();
      var link=$(this).attr('href');
      if(name && link && link.match(/\/u\d+$/) && users.length<6){
        if(users.findIndex(function(x){return x.name==name})==-1){
          users.push({name:name, link:link, avatar:'https://i.servimg.com/u/f65/20/63/77/31/a_aa10.png', rank:'عضو', icon:awards[0].icon});
        }
      }
    });

    console.log('لقى اعضاء:', users.length);

    if(users.length==0){
      // fallback - اعضاء وهميين للتجربة
      users=[
        {name:'رازان', link:'/u1', avatar:'https://i.servimg.com/u/f65/20/63/77/31/a_aa10.png', rank:'السلطان', icon:awards[4].icon},
        {name:'اسد بابل', link:'/u2', avatar:'https://i.servimg.com/u/f65/20/63/77/31/a_aa10.png', rank:'فارس', icon:awards[2].icon}
      ];
    }

    showBox(users);

    // جلب الصور الحقيقية
    users.forEach(function(user, idx){
      $.get(user.link, function(p){
        var img=$(p).find('img[src*="avatar"]').first().attr('src');
        if(img) $('.razan-hero-card').eq(idx).find('.razan-hero-avatar').attr('src', img);
      });
    });

  }).fail(function(){
    console.log('فشل الجلب - يعرض تجريبي');
    showBox([
      {name:'رازان', link:'#', avatar:'https://i.servimg.com/u/f65/20/63/77/31/a_aa10.png', rank:'السلطان', icon:awards[4].icon},
      {name:'بطل الجزيرة', link:'#', avatar:'https://i.servimg.com/u/f65/20/63/77/31/a_aa10.png', rank:'نجم لامع', icon:awards[0].icon}
    ]);
  });
});

كود الهتمل لاظهاره على الرئيسيه
<div id="razan-heroes"></div>
الكود رائع جدا وصممت منه العديد من الاشكال
تقدر تشوفه ايضا ضمن بيانات منتديات بنوته نيت https://3eon.banouta.net/ بالبيانات في شكل اخر
الكود هوه عباره عن توزيع رتب للاعظاء على الرئيسيه والبيانات حسب نشاطهم