جدول عرض مواصفات الموبايل في قوالب بلوجر

<style>

/* ——— القاعدة العامة ——— */

:root{

  --bg:#ffffff; --card:#fff; --ink:#222; --muted:#666;

  --line:#eee; --line-strong:#ddd;

  --brand1:#4f46e5; --brand2:#06b6d4;

}

.mobile-specs{max-width:900px;margin:20px auto;padding:8px;font-family:'Cairo',sans-serif;direction:rtl;color:var(--ink);}

.ms-header{

  display:flex;gap:16px;align-items:center;padding:16px;border:1px solid var(--line-strong);

  border-radius:16px;background:linear-gradient(135deg,#fafafa,#fff);box-shadow:0 4px 10px rgba(0,0,0,.05);

  transition:transform .3s,box-shadow .3s

}

.ms-header:hover{transform:translateY(-3px);box-shadow:0 6px 16px rgba(0,0,0,.1)}

.ms-cover{width:72px;height:72px;border-radius:14px;overflow:hidden;flex-shrink:0;border:1px solid var(--line-strong);background:#f3f3f3}

.ms-cover img{width:100%;height:100%;object-fit:cover}

.ms-title{display:flex;flex-direction:column;gap:4px}

.ms-title h12{    font-size: 17px;

    color: var(--title-color);

    line-height: 1.3em;

    margin: 26px 1px 26px;

    padding: 10px;

    background: #ffe6e6;

    border-radius: 4px;margin:0;font-size:22px}

.ms-title small{color:var(--muted)}

.ms-badges{margin-inline-start:auto;display:flex;gap:8px;flex-wrap:wrap}

.ms-chip{

  display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);

  padding:6px 10px;border-radius:999px;font-size:12px;box-shadow:0 2px 6px rgba(0,0,0,.04)

}

.ms-chip svg{width:16px;height:16px}

/* ——— شبكة البطاقات ——— */

.ms-grid{margin-top:14px;display:grid;grid-template-columns:1fr;gap:12px}

@media(min-width:680px){.ms-grid{grid-template-columns:1fr 1fr}}

.ms-row{

  display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);

  border-radius:14px;padding:12px 16px;transition:all .3s ease;opacity:0;transform:translateY(16px)

}

.ms-row.visible{opacity:1;transform:translateY(0)}

.ms-row:hover{box-shadow:0 4px 12px rgba(0,0,0,.08);transform:translateY(-2px)}

.ms-ico{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;

  background:linear-gradient(135deg,#f3f3f3,#eaeaea);transition:background .3s,color .3s;flex-shrink:0}

.ms-row:hover .ms-ico{background:linear-gradient(135deg,var(--brand1),var(--brand2));color:#fff}

.ms-text{flex:1;min-width:0}

.ms-title-sm{font-weight:700;font-size:14px}

.ms-hint{color:var(--muted);font-size:12px;margin-top:2px;word-break:break-word}

/* ——— أشرطة النسبة ——— */

.ms-prog{margin-top:8px;height:8px;background:#eee;border-radius:999px;overflow:hidden}

.ms-prog>span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand1),var(--brand2));animation:fill 1.8s forwards}

@keyframes fill{from{width:0}to{width:var(--to)}}

/* ——— جدول مُركّز (اختياري أسفل) ——— */

.ms-table{margin-top:14px;border:1px solid var(--line);border-radius:14px;overflow:hidden}

.ms-table table{width:100%;border-collapse:collapse}

.ms-table th,.ms-table td{padding:10px 12px;border-bottom:1px solid var(--line);font-size:13px}

.ms-table th{background:#fafafa;text-align:start}

.ms-table tr:last-child td{border-bottom:none}

/* احترام تقليل الحركة */

@media (prefers-reduced-motion:reduce){

  .ms-row,.ms-header{transition:none}

  .ms-row{opacity:1;transform:none}

  .ms-prog>span{animation:none;width:var(--to)}

}

</style>

<script>

/* ظهور الصفوف عند التمرير + ملء الأشرطة */

(function(){

  const container = document.getElementById('mobileSpecs');

  if(!container) return;

  // مراقبة الصفوف

  const rows = container.querySelectorAll('.ms-row');

  const obs = new IntersectionObserver((entries)=>{

    entries.forEach(e=>{

      if(e.isIntersecting){ e.target.classList.add('visible'); }

    });

  },{threshold:.2});

  rows.forEach(r=>obs.observe(r));

  // مزامنة الجدول المختصر مع بطاقات المواصفات (اختياري)

  const map = [

    ['[data-display]','[data-display-table]'],

    ['[data-chip]','[data-chip-table]'],

    ['[data-ram]','[data-ram-table]'],

    ['[data-storage]','[data-storage-table]'],

    ['[data-battery]','[data-battery-table]'],

    ['[data-rear]','[data-rear-table]'],

    ['[data-front]','[data-front-table]'],

    ['[data-net]','[data-net-table]'],

    ['[data-io]','[data-io-table]'],

    ['[data-sensors]','[data-sensors-table]'],

    ['[data-os]','[data-os-table]'],

    ['[data-dur]','[data-dur-table]'],

    ['[data-audio]','[data-audio-table]'],

    ['[data-dim]','[data-dim-table]'],

    ['[data-colors]','[data-colors-table]'],

  ];

  map.forEach(([a,b])=>{

    const A = container.querySelector(a), B = container.querySelector(b);

    if(A && B) B.textContent = A.textContent;

  });

  // تحديث الشارات العلوية إن أردت برمجياً

  // container.querySelector('[data-performance]').textContent = '91';

  // container.querySelector('[data-stb]').textContent = '89';

})();

</script>

<!-- ============ End Mobile Specs ============ -->

<div class="mobile-specs" id="mobileSpecs">

  <!-- ——— رأس الجهاز ——— -->

  <div class="ms-header">

    <div class="ms-cover">

      <!-- ضع صورة الجهاز -->

      <img src="https://i.imgur.com/4l26MKs.jpeg" alt="هاتف">

    </div>

    <div class="ms-title">

      <h12 data-model>ExampleBrand X Pro 5G</h12>

      <small data-subtitle>Snapdragon 8 Gen 3 • 4nm</small>

    </div>

    <div class="ms-badges">

      <div class="ms-chip" title="الأداء العام">

        <!-- bolt -->

        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M13 2L3 14h7l-1 8 10-12h-7l1-8z" stroke-linejoin="round"/></svg>

        <span><b data-performance>91</b>/100</span>

      </div>

      <div class="ms-chip" title="نسبة الشاشة للجسم">

        <!-- screen -->

        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><rect x="4" y="4" width="16" height="14" rx="2"/><path d="M9 21h6"/></svg>

        <span><b data-stb>89</b>%</span>

      </div>

    </div>

  </div>

  <!-- ——— بطاقات المواصفات ——— -->

  <div class="ms-grid">

    <!-- الشاشة -->

    <div class="ms-row">

      <div class="ms-ico">

        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><rect x="4" y="4" width="16" height="12" rx="2"/><path d="M8 20h8"/></svg>

      </div>

      <div class="ms-text">

        <div class="ms-title-sm">الشاشة</div>

        <div class="ms-hint" data-display>6.7" AMOLED • 1440×3200 • 120Hz • HDR10+</div>

        <div class="ms-prog" title="نسبة الشاشة للجسم">

          <span style="--to:89%"></span>

        </div>

      </div>

    </div>

    <!-- المعالج / CPU -->

    <div class="ms-row">

      <div class="ms-ico">

        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M9 3v2M15 3v2M9 19v2M15 19v2M3 9h2M3 15h2M19 9h2M19 15h2"/><rect x="7" y="7" width="10" height="10" rx="2"/></svg>

      </div>

      <div class="ms-text">

        <div class="ms-title-sm">المعالج</div>

        <div class="ms-hint" data-chip>Snapdragon 8 Gen 3 • 8 أنوية • حتى 3.2GHz • 4nm</div>

      </div>

    </div>

    <!-- RAM -->

    <div class="ms-row">

      <div class="ms-ico">

        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><rect x="3" y="7" width="18" height="10" rx="2"/><path d="M7 7v10M12 7v10M17 7v10"/></svg>

      </div>

      <div class="ms-text">

        <div class="ms-title-sm">الذاكرة العشوائية (RAM)</div>

        <div class="ms-hint" data-ram>12GB • LPDDR5X</div>

      </div>

    </div>

    <!-- التخزين -->

    <div class="ms-row">

      <div class="ms-ico">

        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="8" cy="12" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="16" cy="12" r="1"/></svg>

      </div>

      <div class="ms-text">

        <div class="ms-title-sm">التخزين الداخلي</div>

        <div class="ms-hint" data-storage>256GB • UFS 4.0</div>

      </div>

    </div>

    <!-- البطارية والشحن -->

    <div class="ms-row">

      <div class="ms-ico">

        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><rect x="2" y="7" width="18" height="10" rx="2"/><path d="M22 10v4"/></svg>

      </div>

      <div class="ms-text">

        <div class="ms-title-sm">البطارية والشحن</div>

        <div class="ms-hint" data-battery>5000 mAh • شحن 80W • Li-Po</div>

        <div class="ms-prog" title="صحة/عُمر البطارية التقريبي">

          <span style="--to:92%"></span>

        </div>

      </div>

    </div>

    <!-- الكاميرا الخلفية -->

    <div class="ms-row">

      <div class="ms-ico">

        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M9 7l2-2h2l2 2h2a3 3 0 013 3v6a3 3 0 01-3 3H7a3 3 0 01-3-3V10a3 3 0 013-3h2z"/><circle cx="12" cy="13" r="3.5"/></svg>

      </div>

      <div class="ms-text">

        <div class="ms-title-sm">الكاميرا الخلفية</div>

        <div class="ms-hint" data-rear>50MP (OIS) + 12MP Ultra-Wide + 10MP Tele (3x) • 8K@24 / 4K@60</div>

        <div class="ms-prog" title="تقييم الكاميرا التقريبي">

          <span style="--to:88%"></span>

        </div>

      </div>

    </div>

    <!-- الكاميرا الأمامية -->

    <div class="ms-row">

      <div class="ms-ico">

        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3.2"/></svg>

      </div>

      <div class="ms-text">

        <div class="ms-title-sm">الكاميرا الأمامية</div>

        <div class="ms-hint" data-front>16MP • 4K@30</div>

      </div>

    </div>

    <!-- الشبكات والاتصال -->

    <div class="ms-row">

      <div class="ms-ico">

        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M2 8a16 16 0 0120 0M5 11a11 11 0 0114 0M8 14a6 6 0 018 0"/><circle cx="12" cy="18" r="1.5"/></svg>

      </div>

      <div class="ms-text">

        <div class="ms-title-sm">الشبكات والاتصال</div>

        <div class="ms-hint" data-net>5G SA/NSA • Wi-Fi 6E • NFC • GPS مزدوج</div>

      </div>

    </div>

    <!-- Bluetooth / USB -->

    <div class="ms-row">

      <div class="ms-ico">

        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M7 7l10 10-5 5V2l5 5L7 17" stroke-linecap="round" stroke-linejoin="round"/></svg>

      </div>

      <div class="ms-text">

        <div class="ms-title-sm">Bluetooth / USB</div>

        <div class="ms-hint" data-io>Bluetooth 5.3 • USB-C 3.2 • OTG</div>

      </div>

    </div>

    <!-- المستشعرات -->

    <div class="ms-row">

      <div class="ms-ico">

        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M12 2v20M2 12h20"/><circle cx="12" cy="12" r="6"/></svg>

      </div>

      <div class="ms-text">

        <div class="ms-title-sm">المستشعرات</div>

        <div class="ms-hint" data-sensors>بصمة مدمجة بالشاشة • مستشعر تقارب • تسارع • جيروسكوب • بوصلة</div>

      </div>

    </div>

    <!-- النظام -->

    <div class="ms-row">

      <div class="ms-ico">

        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a15 15 0 010 18M12 3a15 15 0 000 18"/></svg>

      </div>

      <div class="ms-text">

        <div class="ms-title-sm">النظام</div>

        <div class="ms-hint" data-os>Android 15 • واجهة Clean UI • تحديثات أمان شهرية</div>

      </div>

    </div>

    <!-- المقاومة والمتانة -->

    <div class="ms-row">

      <div class="ms-ico">

        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M12 3c4 5 7 8 7 11.5A7 7 0 015 14.5C5 11 8 8 12 3z"/></svg>

      </div>

      <div class="ms-text">

        <div class="ms-title-sm">المقاومة والمتانة</div>

        <div class="ms-hint" data-dur>IP68 • Gorilla Glass Victus 2 • إطار ألمنيوم</div>

      </div>

    </div>

    <!-- الصوت -->

    <div class="ms-row">

      <div class="ms-ico">

        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M4 9v6h4l5 4V5L8 9H4z"/><path d="M16 9a3 3 0 010 6M18 7a5 5 0 010 10"/></svg>

      </div>

      <div class="ms-text">

        <div class="ms-title-sm">الصوت</div>

        <div class="ms-hint" data-audio>سماعات ستيريو • بدون منفذ 3.5مم • دعم Dolby Atmos</div>

      </div>

    </div>

    <!-- الأبعاد والوزن -->

    <div class="ms-row">

      <div class="ms-ico">

        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M3 6h18M3 12h18M3 18h18"/></svg>

      </div>

      <div class="ms-text">

        <div class="ms-title-sm">الأبعاد والوزن</div>

        <div class="ms-hint" data-dim>162.5 × 75.8 × 8.4 مم • 199 غرام</div>

      </div>

    </div>

    <!-- الألوان المتوفرة -->

    <div class="ms-row">

      <div class="ms-ico">

        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="7" cy="12" r="4"/><circle cx="17" cy="12" r="4"/></svg>

      </div>

      <div class="ms-text">

        <div class="ms-title-sm">الألوان</div>

        <div class="ms-hint" data-colors>أسود فلكي • أزرق محيطي • فضي</div>

      </div>

    </div>

  </div>

  <!-- ——— جدول مُركّز (قابل للنسخ السريع) ——— -->

  <div class="ms-table" aria-label="ملخص المواصفات">

    <table>

      <tbody>

        <tr><th>الشاشة</th><td data-display-table>6.7" AMOLED • 1440×3200 • 120Hz • HDR10+</td></tr>

        <tr><th>المعالج</th><td data-chip-table>Snapdragon 8 Gen 3 • 8C • 3.2GHz • 4nm</td></tr>

        <tr><th>RAM</th><td data-ram-table>12GB • LPDDR5X</td></tr>

        <tr><th>التخزين</th><td data-storage-table>256GB • UFS 4.0</td></tr>

        <tr><th>البطارية</th><td data-battery-table>5000 mAh • 80W</td></tr>

        <tr><th>الكاميرات الخلفية</th><td data-rear-table>50+12+10MP • 8K/4K</td></tr>

        <tr><th>الأمامية</th><td data-front-table>16MP • 4K</td></tr>

        <tr><th>الاتصال</th><td data-net-table>5G • Wi-Fi 6E • NFC • GPS</td></tr>

        <tr><th>Bluetooth/USB</th><td data-io-table>BT 5.3 • USB-C 3.2</td></tr>

        <tr><th>المستشعرات</th><td data-sensors-table>بصمة بالشاشة • جيروسكوب • بوصلة…</td></tr>

        <tr><th>النظام</th><td data-os-table>Android 15 • Clean UI</td></tr>

        <tr><th>المتانة</th><td data-dur-table>IP68 • Victus 2</td></tr>

        <tr><th>الصوت</th><td data-audio-table>ستيريو • Dolby Atmos</td></tr>

        <tr><th>الأبعاد/الوزن</th><td data-dim-table>162.5×75.8×8.4 مم • 199غ</td></tr>

        <tr><th>الألوان</th><td data-colors-table>أسود • أزرق • فضي</td></tr>

      </tbody>

    </table>

  </div>

</div>