طلب تحويل كود للنسخة awesome

   <style>
      .retsjter1 {
    text-align: center;
    border: solid 4px #7e7c7c;
}
.reyhtsjt1 {
    text-align: center;
    font-size: 16px;
    background: #91ceff;
    font-weight: bold;
}


.retsjhg {
    text-align: right;
    border: solid 3px;
    padding: 10px;
    margin-left: 40px;
    margin-right: 0;
    width: 330px;
}
.retsjtrert {
    text-align: center;
    border: solid 3px #585757;
    padding: 10px;
    margin-left: 40px;
    margin-right: 0;
    width: 150px;
}
.retsjt2 {
    width: fit-content;
    background: #ffffff;
    padding: 2px;
    position: relative;
    top: 11px;
    left: -7px;
}
.retsjt3 {
    width: fit-content;
    background: #fff;
    padding: 2px;
    position: relative;
    top: 11px;
    left: -7px;
}
.retsup {
    text-align: center;
    border: solid 3px #585757;
    padding: 10px;
    margin-left: 40px;
    margin-right: 0;
    width: 330px;
}
.retsjt4 {
    width: fit-content;
    background: #fff;
    padding: 2px;
    position: relative;
    top: 11px;
    left: -7px;
}


/* إظهار العنصر على الشاشات الواسعة */
@media (min-width: 1024px) {
    .retsjter1-laptop {
        display: block; /* أو أي قيمة مناسبة أخرى، مثل flex */
    }
    
    .retsjter1-mobili {
        display: none;
    }
}

/* إخفاء العنصر على الشاشات الضيقة */
@media (max-width: 1023px) {
    .retsjter1-laptop {
        display: none;
    }
    
    .retsjter1-mobili {
        display: block; /* أو أي قيمة مناسبة أخرى */
    }
}



    </style>    <script>
    $(document).ready(function() {
    // تحميل المحتوى من صفحة latest
    $.get("/latest", function(data) {
        var memberList = $(data).find('.block-topics-lastpost:first');
        $('.retsup').append(memberList);

        console.log('تم نقل الأعضاء إلى .retsup');

        // لكل عنصر في memberList، احصل على معلومات العضو
        $('.retsup').find('a[href^="/u"]').each(function() {
            var memberLink = $(this).attr('href');
            var lastPost = $(this).closest('.block-topics-lastpost');
            var rankDiv = $('<div class="retshm"></div>').appendTo(lastPost);

            // تحميل الرتبة
            rankDiv.load(memberLink + ' .mod-login-rank img', function(response, status) {
                if (status === "success") {
                    console.log('تم تحميل صورة الرتبة بنجاح');
                } else {
                    console.error('خطأ في تحميل صورة الرتبة من ' + memberLink);
                }
            });
        });
    });
});

 // لكل عنصر في memberList، احصل على معلومات العضو
$(document).ready(function(){
        $.get("/memberlist?mode=posts&order=DESC&submit=Ok&username", function(data){
          var memberList = $(data).find('.member-details:first');
            memberList.appendTo('.retsjhg');
        });
});
 // لكل عنصر في memberList، احصل على معلومات العضو
$(document).ready(function(){
        $.get("/memberlist?mode=posts&order=DESC&submit=Ok&username", function(data){
          var memberList = $(data).find('.member-block .avatar-medium img:first');
            memberList.appendTo('.retsjtre');
        });
});

 // لكل عنصر في memberList، احصل على معلومات العضو
$(document).ready(function(){
        $.get("/latest", function(data){
          var memberList = $(data).find('.block-topics .block-topics-category:first');
            memberList.appendTo('.retsjtrert');
        });
});
      
    </script>
<div class="retsjter1-laptop">
     
   <div class="retsjter1">
      
      <div class="reyhtsjt1">
           تكريم العضو  
      </div>
      <table border="1">
          <tbody> </tbody> <tbody></tbody>
         <tr style="">
            
            <td>
               
               <div class="retsjt11">
                  <div class="retsjt1">
                     الصورة الرمزية
                  </div>
                  <div class="retsjtre">
                       
                  </div>
               </div>
               
            </td>
            
            <td>
               <div class="retsjt22">
                  <div class="retsjt2">
                     بروفايل
                  </div>
                  <div class="retsjhg">
                       
                  </div>
               </div>
               
            </td>
            
            <td>
               
               <div class="retsj33">
                  <div class="retsjt3">
                     معلومات
                  </div>
                  <div class="retsup">
                       
                  </div>
               </div>
               
            </td>
            
            <td>
               
               <div class="retsjt44">
                  <div class="retsjt4">
                     القسم
                  </div>
                  <div class="retsjtrert">
                       
                  </div>
               </div>
               
            </td>
            
         </tr><tbody></tbody><tbody></tbody>
      </table><br />
   </div>
     
</div>
    
<div class="retsjter1-mobili">
     
   <div class="retsjter1">
      
      <div class="reyhtsjt1">
           تكريم العضو  
      </div>
      <div class="retsjt11">
         <div class="retsjt1">
            الصورة الرمزية
         </div>
         <div class="retsjtre">
              
         </div>
      </div><br />
      <div class="retsjt22">
         <div class="retsjt2">
            بروفايل
         </div>
         <div class="retsjhg">
              
         </div>
      </div><br />
      <div class="retsj33">
         <div class="retsjt3">
            معلومات
         </div>
         <div class="retsup">
              
         </div>
      </div><br />
      <div class="retsjt44">
         <div class="retsjt4">
            القسم
         </div>
         <div class="retsjtrert">
              
         </div>
      </div><br />
   </div>
     
</div>
  

  <style>
.retsjtre a.gensmall, .retsjtre {
    font-size: 0;
}

.retsjtre .retshm img {
    width: auto !important;
}
.retsjtre img {
    width: 0;
}
.retsjhg a.gensmall, .retsjhg a{
    font-size: 0;
}

.retsjhg .retshm img {
    width: auto !important;
}
.retsjhg img {
    width: 0;
}
      .retsjter1 {
    text-align: center;
    border: solid 4px #7e7c7c;
}
.reyhtsjt1 {
    text-align: center;
    font-size: 16px;
    background: #91ceff;
    font-weight: bold;
}


.retsjhg {
    text-align: right;
    border: solid 3px;
    padding: 10px;
    margin-left: 40px;
    margin-right: 0;
    width: 330px;
}
.retsjtrert {
    text-align: center;
    border: solid 3px #585757;
    padding: 10px;
    margin-left: 40px;
    margin-right: 0;
    width: 150px;
}
.retsjt2 {
    width: fit-content;
    background: #ffffff;
    padding: 2px;
    position: relative;
    top: 11px;
    left: -7px;
}
.retsjt3 {
    width: fit-content;
    background: #fff;
    padding: 2px;
    position: relative;
    top: 11px;
    left: -7px;
}
.retsup {
    text-align: center;
    border: solid 3px #585757;
    padding: 10px;
    margin-left: 40px;
    margin-right: 0;
    width: 330px;
}
.retsjt4 {
    width: fit-content;
    background: #fff;
    padding: 2px;
    position: relative;
    top: 11px;
    left: -7px;
}


/* إظهار العنصر على الشاشات الواسعة */
@media (min-width: 1024px) {
    .retsjter1-laptop {
        display: block; /* أو أي قيمة مناسبة أخرى، مثل flex */
    }
   
    .retsjter1-mobili {
        display: none;
    }
}

/* إخفاء العنصر على الشاشات الضيقة */
@media (max-width: 1023px) {
    .retsjter1-laptop {
        display: none;
    }
   
    .retsjter1-mobili {
        display: block; /* أو أي قيمة مناسبة أخرى */
    }
}
    </style>    <script>
$(document).ready(function() {
    function loadMembers(targetClass, profileSelector) {
        $.get("/latest", function(data) {
            var memberList = $(data).find('.block-topics-lastpost:first');
            $(targetClass).append(memberList);

            console.log(`تم نقل الأعضاء إلى ${targetClass}`);

            // لكل عنصر في memberList، احصل على معلومات العضو
            $(targetClass).find('a[href^="/u"]').each(function() {
                var memberLink = $(this).attr('href');
                var lastPost = $(this).closest('.block-topics-lastpost');
                var rankDiv = $('<div class="retshm"></div>').appendTo(lastPost);

                // تحميل الرتبة
                rankDiv.load(memberLink + profileSelector, function(response, status) {
                    if (status === "success") {
                        console.log('تم تحميل صورة الرتبة بنجاح');
                    } else {
                        console.error('خطأ في تحميل صورة الرتبة من ' + memberLink);
                    }
                });
            });
        });
    }

    // استدعاء الدالة مع المعلمات المناسبة
    loadMembers('.retsup', ' .mod-login-rank img');
    loadMembers('.retsjhg', ' #profile-tab-field-profil');  // تأكد من أن هذا العنصر موجود
    loadMembers('.retsjtre', ' .box-body .mod-login-avatar img');
});


 // لكل عنصر في memberList، احصل على معلومات العضو
$(document).ready(function(){
        $.get("/latest", function(data){
          var memberList = $(data).find('.block-topics .block-topics-category:first');
            memberList.appendTo('.retsjtrert');
        });
});

 </script> 
<div class="retsjter1-laptop">
            
   <div class="retsjter1">
             
      <div class="reyhtsjt1">
               تكريم اخر العضو  مشارك   
      </div>
           
      <table border="1">
             <tbody> </tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody>
         <tr style="">
                   
            <td>
                      
               <div class="retsjt11">
                       
                  <div class="retsjt1">
                         الصورة الرمزية   
                  </div>
                       
                  <div class="retsjtre">
                              
                  </div>
                       
               </div>
                      
            </td>
                   
            <td>
                    
               <div class="retsjt22">
                       
                  <div class="retsjt2">
                         بروفايل   
                  </div>
                       
                  <div class="retsjhg">
                              
                  </div>
                       
               </div>
                      
            </td>
                   
            <td>
                      
               <div class="retsj33">
                       
                  <div class="retsjt3">
                         معلومات   
                  </div>
                       
                  <div class="retsup">
                              
                  </div>
                       
               </div>
                      
            </td>
                   
            <td>
                      
               <div class="retsjt44">
                       
                  <div class="retsjt4">
                         القسم   
                  </div>
                       
                  <div class="retsjtrert">
                              
                  </div>
                       
               </div>
                      
            </td>
                   
         </tr><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody>   
      </table><br />   
   </div>
            
</div>
   
<div class="retsjter1-mobili">
            
   <div class="retsjter1">
             
      <div class="reyhtsjt1">
               تكريم العضو     
      </div>
           
      <div class="retsjt11">
              
         <div class="retsjt1">
                الصورة الرمزية   
         </div>
              
         <div class="retsjtre">
                     
         </div>
              
      </div><br />   
      <div class="retsjt22">
              
         <div class="retsjt2">
                بروفايل   
         </div>
              
         <div class="retsjhg">
                     
         </div>
              
      </div><br />   
      <div class="retsj33">
              
         <div class="retsjt3">
                معلومات   
         </div>
              
         <div class="retsup">
                     
         </div>
              
      </div><br />   
      <div class="retsjt44">
              
         <div class="retsjt4">
                القسم   
         </div>
              
         <div class="retsjtrert">
                     
         </div>
              
      </div><br />   
   </div>
            
</div>