rsync -avz /Users/waffer/MLKH/views/ root@31.97.159.26:/root/MLKH/views/
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<div style="width:270px;min-height:110px;border-radius:12px;background:#fff;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;font-family:'Cairo',Tahoma,sans-serif;padding:16px 18px;">
  <!-- السطر الأول: لوجو فقط -->
  <div style="display:flex;align-items:center;gap:8px;margin-bottom:7px;">
    <img src="https://payda.ma/logo.png" alt="شعار الموقع" style="height:44px;width:auto;max-width:160px;border-radius:10px;object-fit:contain;display:block;" onerror="this.style.display='none'">
  </div>
  <!-- السطر الثاني: النجوم الديناميكية بناءً على التقييم -->
  <div style="display:flex;align-items:center;gap:3px;margin-bottom:7px;">
    
      
        <span class="fa fa-star" style="font-size:2.1rem;color:#e3e6ea;"></span>
      
    
      
        <span class="fa fa-star" style="font-size:2.1rem;color:#e3e6ea;"></span>
      
    
      
        <span class="fa fa-star" style="font-size:2.1rem;color:#e3e6ea;"></span>
      
    
      
        <span class="fa fa-star" style="font-size:2.1rem;color:#e3e6ea;"></span>
      
    
      
        <span class="fa fa-star" style="font-size:2.1rem;color:#e3e6ea;"></span>
      
    
  </div>
  <!-- السطر الثالث: معدل التقييم وعدد التقييمات بالأسود مع تنسيق الأرقام غليظة والنص رقيق -->
  <div style="font-size:1.15rem;color:#111;font-weight:400;">
    <span style="font-weight:400;">المعدل:</span>
    <span style="font-weight:700;"> 0.0 </span>
    <span style="font-weight:400;"> | تقييمات: </span>
    <span style="font-weight:700;"> 0 </span>
  </div>
</div>