🔥 حصريًا في المشاغب 🔥 | ثورة في صندوق الأكواد البرمجية: (نسخ فوري وتحميل مباشر وفتح ذكي للروابط)

[Dabor Tech]

​

🔥 حصرياً في صرح المشاغب | إطلاق ثورة في صندوق الأكواد البرمجية 🔥

​

🤛 نسخ فوري • تحميل مباشر • فتح ذكي للروابط 🤜

تحديث استثنائي وحصري لنظام تضمين واستعراض الأكواد البرمجية لتوفير أقصى درجات الراحة والاحترافية لكافة الأعضاء والزوار
تطوير جديد يجمع بين سهولة الاستخدام والسرعة والاحترافية في التعامل مع الأكواد البرمجية

بالمشاركة والتعاون مع أخي وشريكي Eng-Abu Elias

شعارنا الدائم 👈 المشاغب لديكم لا خوف عليكم — والهدف راحة المستخدم دائماً وأبداً

📌 نظرة عامة على التطوير الجديد

انطلاقًا من حرص إدارة منتديات المشاغب على مواكبة التطور التقني وتوفير تجربة استخدام أكثر سهولة واحترافية،
يسعدنا تقديم مجموعة من التحسينات الجديدة على نظام الأكواد البرمجية،
بهدف تسهيل مشاركة الأكواد والتعامل معها دون خطوات يدوية غير ضرورية.

يجمع التطوير بين أدوات النسخ المباشر، والتحميل بصيغة الملف المناسبة، والتعامل الذكي
مع الروابط داخل الأكواد العامة، إلى جانب تحسين تنسيق صندوق الكود وتوافقه مع مختلف الأجهزة.

والآن، لنلقِ نظرة على الميزات الجديدة مع أمثلة عملية توضح طريقة استخدامها.

---

🚀 أبرز الميزات الحصرية في نظام الأكواد الجديد

1. النسخ السريع المباشر (Copy Code)

• نسخ محتوى الكود بالكامل إلى الحافظة بضغطة واحدة، دون الحاجة إلى تحديد النص يدويًا.
• تثبيت أبعاد زر النسخ للمحافظة على ثبات الواجهة ومنع الإزاحة أو الاهتزاز البصري.
• إظهار إشعار تأكيد واضح عند نجاح عملية النسخ.

2. التحميل المباشر بصيغة الملف (Download Code)

• تنزيل الكود مباشرة إلى جهازك بالامتداد المناسب للغة المختارة، مثل .php و.js و.py و.html و.sql.
• الاستغناء عن نسخ الكود وإنشاء ملف جديد وحفظ المحتوى يدويًا.
• تسهيل حفظ الأكواد وتحريرها واستخدامها في بيئة التطوير المناسبة.

3. فتح الروابط بذكاء داخل الأكواد العامة (Code:)

أُضيفت آلية مخصصة للتعامل مع الروابط الموجودة داخل الأكواد العامة، وفقًا للحالات التالية:

• رابط واحد: يُفتح مباشرة في علامة تبويب جديدة عند الضغط على زر «فتح الرابط».
• روابط متعددة: تظهر قائمة تفاعلية تعرض الروابط المكتشفة، مع زر «فتح» مستقل بجانب كل رابط.
• عدم وجود روابط: يظهر تنبيه واضح يفيد بعدم العثور على روابط، دون التسبب في أخطاء بسبب غيابها.

تجعل هذه الميزة الوصول إلى الروابط والمصادر والمستودعات البرمجية أكثر سهولة، خصوصًا عند وجود عدة روابط داخل صندوق كود واحد.

4. محاذاة احترافية وتوافق مع مختلف الأجهزة

• تنظيم اسم اللغة وأزرار التحكم في شريط علوي واضح ومتوازن.
• تحسين توزيع العناصر والمحاذاة لتسهيل الوصول إلى أدوات الكود.
• مراعاة اختلاف أحجام الشاشات على أجهزة الكمبيوتر والمحمولة والأجهزة اللوحية والهواتف الذكية.

الهدف هو تقديم واجهة عملية ومريحة تحافظ على وضوح الكود وتسهّل الوصول إلى أدواته دون تشتيت المستخدم.

---

💻 شروحات ونماذج عملية للاستخدام

أولًا: نماذج الأكواد البرمجية المتخصصة — النسخ والتحميل

1. نموذج PHP — يتم تحميله بامتداد .php

<?php

// مرحباً بكم في صرح المشاغب التقني

function absbaGreeting($user) {
return "أهلاً بك يا " . $user . " في منتديات المشاغب!";
}

echo absbaGreeting("زائرنا الكريم");

?>

2. نموذج JavaScript — يتم تحميله بامتداد .js

// سكربت تجريبي لمنظومة المشاغب

const absbaSystem = {
platform: "منتديات المشاغب",
partnership: "Dabor Tech & Eng-Abu Elias",
motto: "المشاغب لديكم لا خوف عليكم",
userComfort: true
};

console.log("النظام يعمل بكفاءة قصوى:", absbaSystem);

3. نموذج Python — يتم تحميله بامتداد .py

# سكربت بايثون لإحصائيات المشاغب
def show_motto():
motto = "المشاغب لديكم لا خوف عليكم"
goal = "الهدف راحة المستخدم"
print(f"{motto} | {goal}")

show_motto()

جرّب الآن: استخدم زر النسخ لنسخ محتوى الكود، ثم زر التحميل للحصول عليه كملف برمجي بالامتداد المناسب.

---

ثانيًا: نماذج الأكواد العامة (Code:) — النسخ والتحميل وفتح الروابط

1. نموذج كود عام يحتوي على رابط واحد

يُستخدم هذا المثال لتجربة فتح رابط واحد مباشرة عند الضغط على زر «فتح الرابط».

رابط مستودع المشروع الرسمي:
https://absba.cc/

2. نموذج كود عام يحتوي على عدة روابط

يُستخدم هذا المثال لتجربة القائمة التفاعلية التي تعرض الروابط، مع زر مستقل لفتح كل رابط.

روابط منتديات المشاغب والمصادر المعتمدة:

https://absba.cc/
https://absba.cc/threads/47397/
https://absba.cc/members/13959/#recent-content

3. نموذج كود عام دون روابط

يُستخدم هذا المثال لاختبار سلوك الزر عند عدم وجود أي روابط داخل صندوق الكود.

كود عام لا يحتوي على أي رابط لاختبار السلوك الآمن للزر.

echo "تمت التجربة بنجاح تام";

ملاحظة: هذه الأمثلة مخصصة لتوضيح طريقة استخدام الصناديق واختبار ميزاتها، وتعتمد النتيجة الفعلية على عمل الأدوات المدمجة في المنتدى.

---

🌟 ختامًا.. التطوير مستمر

نسعى دائمًا إلى تقديم الأفضل لبيتنا الثاني منتديات المشاغب، من خلال تطوير الأدوات وتحسين التفاصيل التي تجعل تجربة الأعضاء أكثر سهولة وراحة.

هذه التحسينات جزء من اهتمامنا المستمر بتسهيل التعامل مع الأكواد البرمجية، سواء عند نسخها أو تحميلها أو الوصول إلى الروابط المرتبطة بها.

بالمشاركة والتعاون مع أخي وشريكي Eng-Abu Elias

❤️ المشاغب لديكم لا خوف عليكم | والهدف راحة المستخدم دائمًا وأبدًا ❤️
❤️ لسنا الوحيدون ولكننا المميزون | المفقود بس عنا موجود ❤️

مع خالص تحياتنا وتمنياتنا للجميع بتجربة ممتعة ومثمرة

 

[Dabor Tech]

<div id="absba-castle" dir="rtl" data-theme="dark">
  <style>
    #absba-castle {
      --bg: #0c111a;
      --card: #141c28;
      --card-hover: #192434;
      --text: #f4f6fb;
      --muted: #a5b0c0;
      --gold: #e9c66f;
      --gold-dark: #b58b37;
      --border: rgba(233,198,111,.2);
      --shadow: 0 12px 35px rgba(0,0,0,.16);
      box-sizing: border-box;
      isolation: isolate;
      position: relative;
      width: 100%;
      max-width: 1080px;
      margin: 24px auto;
      padding: 24px;
      overflow: hidden;
      color: var(--text);
      background:
        radial-gradient(ellipse at 50% 0%, rgba(198,157,66,.12), transparent 60%),
        var(--bg);
      border: 1px solid var(--border);
      border-radius: 22px;
      font-family: Tahoma, Arial, sans-serif;
      line-height: 1.9;
      transition: background .25s, color .25s;
    }

    #absba-castle *,
    #absba-castle *::before,
    #absba-castle *::after {
      box-sizing: border-box;
    }

    #absba-castle[data-theme="light"] {
      --bg: #f4f7fc;
      --card: #fff;
      --card-hover: #edf2f9;
      --text: #1b2738;
      --muted: #68768a;
      --gold: #987020;
      --gold-dark: #c3a052;
      --border: rgba(152,112,32,.22);
      --shadow: 0 12px 35px rgba(36,55,80,.07);
      background:
        radial-gradient(ellipse at 50% 0%, rgba(195,160,82,.13), transparent 60%),
        var(--bg);
    }

    #absba-castle .top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding-bottom: 20px;
      border-bottom: 1px solid var(--border);
    }

    #absba-castle .brand {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    #absba-castle .logo {
      display: grid;
      place-items: center;
      width: 48px;
      height: 48px;
      flex-shrink: 0;
      color: #171b22;
      background: linear-gradient(145deg,#f7df9c,#c29a43);
      border-radius: 14px;
    }

    #absba-castle .logo svg {
      width: 27px;
      height: 27px;
    }

    #absba-castle .brand-name {
      margin: 0;
      color: var(--text);
      font-size: 22px;
      font-weight: 800;
      line-height: 1.5;
    }

    #absba-castle .brand-caption {
      color: var(--muted);
      font-size: 12px;
    }

    #absba-castle .theme-button {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      flex-shrink: 0;
      color: var(--gold);
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 13px;
      cursor: pointer;
      transition: background .2s, transform .2s;
    }

    #absba-castle .theme-button:hover {
      background: var(--card-hover);
      transform: translateY(-2px);
    }

    #absba-castle .theme-button svg {
      width: 21px;
      height: 21px;
    }

    #absba-castle .hero {
      padding: 38px 10px 32px;
      text-align: center;
    }

    #absba-castle .eyebrow {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 6px 15px;
      color: var(--gold);
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 30px;
      font-size: 13px;
    }

    #absba-castle .eyebrow svg {
      width: 17px;
      height: 17px;
    }

    #absba-castle .hero-title {
      margin: 19px 0 0;
      color: var(--text);
      font-size: clamp(30px,5vw,46px);
      font-weight: 900;
      line-height: 1.5;
      letter-spacing: -.5px;
    }

    #absba-castle .hero-title span {
      color: var(--gold);
    }

    #absba-castle .gold-line {
      width: 76px;
      height: 3px;
      margin: 15px auto 18px;
      background: linear-gradient(90deg,transparent,var(--gold),transparent);
      border-radius: 10px;
    }

    #absba-castle .description {
      max-width: 560px;
      margin: 0 auto;
      color: var(--muted);
      font-size: 15px;
      line-height: 2;
    }

    #absba-castle .mottos {
      display: grid;
      grid-template-columns: repeat(2,minmax(0,1fr));
      gap: 14px;
    }

    #absba-castle .motto {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      min-width: 0;
      padding: 20px;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 16px;
      box-shadow: var(--shadow);
      transition: transform .2s,border-color .2s,background .2s;
    }

    #absba-castle .motto:hover {
      transform: translateY(-3px);
      background: var(--card-hover);
      border-color: var(--gold-dark);
    }

    #absba-castle .heart {
      flex-shrink: 0;
      font-size: 17px;
      line-height: 2;
    }

    #absba-castle .motto p {
      margin: 0;
      color: var(--text);
      font-size: 14px;
      font-weight: 700;
      line-height: 2;
      overflow-wrap: anywhere;
    }

    #absba-castle .footer {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 12px;
      margin-top: 25px;
      color: var(--muted);
      font-size: 12px;
      letter-spacing: .5px;
      text-align: center;
    }

    #absba-castle .footer::before,
    #absba-castle .footer::after {
      content: "";
      width: 30px;
      height: 1px;
      background: var(--border);
    }

    @media(max-width:650px) {
      #absba-castle {
        margin: 12px auto;
        padding: 16px;
        border-radius: 18px;
      }

      #absba-castle .brand-name {
        font-size: 20px;
      }

      #absba-castle .hero {
        padding: 30px 0 25px;
      }

      #absba-castle .mottos {
        grid-template-columns: 1fr;
        gap: 11px;
      }

      #absba-castle .motto {
        padding: 17px 15px;
      }
    }

    @media(prefers-reduced-motion:reduce) {
      #absba-castle *,
      #absba-castle *::before,
      #absba-castle *::after {
        transition: none !important;
      }
    }
  </style>

  <header class="top">
    <div class="brand">
      <div class="logo" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none"
             stroke="currentColor" stroke-width="1.7"
             stroke-linecap="round" stroke-linejoin="round">
          <path d="M12 22s8-4 8-11V5l-8-3-8 3v6c0 7 8 11 8 11z"/>
          <path d="m8 12 2.5 2.5L16 9"/>
        </svg>
      </div>
      <div>
        <h2 class="brand-name">المشاغب</h2>
        <div class="brand-caption">مجتمع المعرفة والإبداع</div>
      </div>
    </div>

    <button class="theme-button" type="button"
            aria-label="تبديل الوضع الداكن والفاتح"
            title="تبديل المظهر">
      <svg class="theme-icon" viewBox="0 0 24 24"
           fill="none" stroke="currentColor" stroke-width="1.8"
           stroke-linecap="round" stroke-linejoin="round"
           aria-hidden="true">
        <circle cx="12" cy="12" r="4"/>
        <path d="M12 2v2m0 16v2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M2 12h2m16 0h2M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42"/>
      </svg>
    </button>
  </header>

  <main>
    <section class="hero">
      <div class="eyebrow">
        <svg viewBox="0 0 24 24" fill="none"
             stroke="currentColor" stroke-width="1.7"
             stroke-linecap="round" stroke-linejoin="round"
             aria-hidden="true">
          <path d="m12 3 2.7 5.5 6.1.9-4.4 4.3 1 6.1-5.4-2.9-5.4 2.9 1-6.1-4.4-4.3 6.1-.9L12 3z"/>
        </svg>
        التميّز يبدأ من هنا
      </div>

      <h1 class="hero-title">قلعة <span>الحصريات</span></h1>

      <div class="gold-line"></div>

      <p class="description">
        وجهتك للمعرفة والبرامج والحلول المميزة،
        حيث يلتقي الشغف بالتقنية وتبقى راحة المستخدم أولويتنا.
      </p>
    </section>

    <section class="mottos" aria-label="رسالة المشاغب">
      <article class="motto">
        <span class="heart" aria-hidden="true">❤️</span>
        <p>المشاغب لديكم لا خوف عليكم | والهدف راحة المستخدم دائمًا وأبدًا</p>
      </article>

      <article class="motto">
        <span class="heart" aria-hidden="true">❤️</span>
        <p>لسنا الوحيدون ولكننا المميزون | المفقود بس عنا موجود</p>
      </article>
    </section>
  </main>

  <footer class="footer">
    ABSBA.CC · مجتمع المشاغب
  </footer>

  <script>
    (() => {
      const root = document.getElementById('absba-castle');
      if (!root || root.dataset.initialized) return;
      root.dataset.initialized = 'true';

      const button = root.querySelector('.theme-button');
      const icon = root.querySelector('.theme-icon');

      const sun = '<circle cx="12" cy="12" r="4"/>' +
        '<path d="M12 2v2m0 16v2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M2 12h2m16 0h2M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42"/>';

      const moon = '<path d="M20.9 13A9 9 0 0 1 11 3.1 9 9 0 1 0 20.9 13z"/>';

      button.addEventListener('click', () => {
        const light = root.dataset.theme !== 'light';
        root.dataset.theme = light ? 'light' : 'dark';
        icon.innerHTML = light ? moon : sun;
        button.setAttribute('aria-pressed', String(light));
      });
    })();
  </script>
</div>

 

[م/عامر]

ماشاء الله

ابداع وروعة وتطوير مميز

 

[فخم الطلة]

تميز وإبداع منقطع النظير

ما شاء الله لا قوة الا بالله

ألف شكر على مجهوداتكم المميزة وعملكم الذروب أحبتي Dabor Tech Eng-Abu Elias

 

[فزاع]

يعطيكم العافية

مبدعين دائما

في ميزان حسناتكم

 

[الداعية أبوعبدالله]

وعليكم السلام ورحمة الله وبركاته

بسم الله ما شاء الله , تطور مميز جدا لمنتديات المشاغب يستحق الثناء عليه , بالطبع لست فقيها بهذا المجال لألو بدلوي به واناقشه , ولكن ما أراه منك أخواني الاحبة

Dabor Tech Eng-Abu Elias

ليس بجديد عليكم ولكنكم المتميزون حقا بهذا المجال , وأسأل الله لكم مزيدا من التوفيق والنجاح ليسموا إسم منتديات المشاغب الى أعلى مداه من النجاح والتوفق

لله دركم وعلى الله أجركم

 

[Dabor Tech]

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>محتوى مميز ومحتوى رائج</title>
  <style>
    /* ==========================================================
       🎛️ 1. المتغيرات التصميمية (الوضع الداكن والوضع الفاتح)
       ========================================================== */
    :root {
      /* المقاسات والانحناءات */
      --radius: 10px;
      --radius-top: 10px;
      --border-w: 1px;
      --top-bar-peek: 12px;
      --btn-left-gap: 10px;
      --row-h: 24px;
      --top-bar-pad-y: 7px;
      --top-bar-pad-x: 1.2rem;
      --content-pad: 0.85rem 1rem;
      --row-divider-w: 1.5px;
      /* ألوان الإضاءة والخطوط الذهبية */
      --gold-rgb: 255, 215, 92;
      --line-rgb: 255, 215, 92;
      --line-deep-rgb: 190, 150, 40;
      --gold: rgb(var(--gold-rgb));
      --arrow-color: #ffd75c;
      --arrow-color-hover: #ffffff;
      /* ألوان الحدود المعتمدة للمنتدى (اللون الغامق الموحد) */
      --frame-border: rgb(86, 72, 0);
      --frame-border-hover: rgb(86, 72, 0);
      --border-gold: rgb(86, 72, 0);
      --row-border: rgb(86, 72, 0);
      /* ألوان الخلفيات والنصوص */
      --bg-body: #0a0f1a;
      --top-bar-bg: #1c222d;
      --top-bar-hover-bg: #232b38;
      --content-bg: #171e26;
      --text-main: #ffffff;
      --text-muted: #94a3b8;
      --link-color: #5193f6;
      --row-hover-bg: rgba(255, 215, 92, 0.05);
      /* الظلال والانتقال الحركي */
      --shadow-top-bar: 0 4px 12px rgba(0, 0, 0, 0.25);
      --shadow-content: 0 10px 28px rgba(0, 0, 0, 0.35);
      --ease: cubic-bezier(0.4, 0, 0.2, 1);
      --dur: 0.28s;
      --dur-collapse: 0.35s;
    }
    /* ☀️ متغيرات الوضع الفاتح */
    body.light-mode {
      --gold-rgb: 217, 119, 6;
      --line-rgb: 217, 119, 6;
      --line-deep-rgb: 180, 83, 9;
      --gold: #d97706;
      --arrow-color: #64748b;
      --arrow-color-hover: #d97706;
      --frame-border: #d1e6ff;
      --frame-border-hover: #d1e6ff;
      --border-gold: rgba(217, 119, 6, 0.30);
      --row-border: #d1e6ff;
      --bg-body: #ebf4ff;
      --top-bar-bg: #ebf1f8;
      --top-bar-hover-bg: #e1ebf6;
      --content-bg: #ffffff;
      --text-main: #141433;
      --text-muted: #64748b;
      --link-color: #3763d2;
      --row-hover-bg: #f8fafc;
      --shadow-top-bar: 0 2px 8px rgba(31, 51, 92, 0.08);
      --shadow-content: 0 0 10px rgba(0, 0, 0, 0.10);
    }
    /* ==========================================================
       📐 2. التنسيقات الأساسية وشريط المعاينة
       ========================================================== */
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, 'Segoe UI', 'Tahoma', sans-serif;
      background-color: var(--bg-body);
      color: var(--text-main);
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 100vh;
      padding: 2.5rem 1.5rem;
      transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
    }
    .preview-toolbar {
      display: flex;
      gap: 12px;
      margin-bottom: 2rem;
      align-items: center;
      background: var(--top-bar-bg);
      border: 1px solid var(--frame-border);
      padding: 8px 16px;
      border-radius: 30px;
      box-shadow: var(--shadow-top-bar);
    }
    .tool-btn {
      background: transparent;
      border: 1px solid var(--border-gold);
      color: var(--text-main);
      padding: 6px 14px;
      border-radius: 20px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 600;
      font-family: inherit;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s var(--ease);
    }
    .tool-btn:hover { background: rgba(var(--gold-rgb), 0.15); border-color: var(--gold); }
    .tool-btn.active { background: var(--gold); color: #000; border-color: var(--gold); }
    /* ==========================================================
       📦 3. حاوية الإطار وشريط العنوان
       ========================================================== */
    .stack {
      position: relative;
      width: 100%;
      max-width: 700px;
      margin-bottom: 2rem;
    }
    .top-bar {
      position: relative;
      z-index: 1;
      margin-bottom: calc(var(--top-bar-peek) * -1);
      background-color: var(--top-bar-bg);
      border-radius: var(--radius-top) var(--radius-top) 0 0;
      border: var(--border-w) solid var(--frame-border);
      border-bottom-color: transparent;
      box-shadow: var(--shadow-top-bar);
      padding: var(--top-bar-pad-y) var(--top-bar-pad-x)
               calc(var(--top-bar-pad-y) + var(--top-bar-peek));
      user-select: none;
      transition:
        border-color var(--dur) var(--ease),
        border-radius var(--dur-collapse) var(--ease),
        margin-bottom var(--dur-collapse) var(--ease),
        padding-bottom var(--dur-collapse) var(--ease),
        background-color var(--dur) var(--ease);
    }
    .top-bar:hover {
      border-color: var(--frame-border-hover);
      border-bottom-color: transparent;
      background-color: var(--top-bar-hover-bg);
    }
    .bar-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      height: var(--row-h);
    }
    /* ── العنوان كـ رابط تفاعلي ── */
    .title-wrapper {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 15px;
      font-weight: 700;
      line-height: 1;          /* ← إصلاح التوسيط */
      height: 100%;            /* ← إصلاح التوسيط */
      color: var(--text-main);
      white-space: nowrap;
      text-decoration: none;
      cursor: pointer;
      outline: none;
      -webkit-tap-highlight-color: transparent;
      transition: color 0.18s var(--ease);
    }
    .title-wrapper:hover,
    .title-wrapper:focus-visible {
      color: var(--link-color);
    }
    .title-wrapper:focus-visible .title-text {
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    .title-icon {
      font-size: 17px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      filter: drop-shadow(0 0 3px rgba(var(--gold-rgb), 0.5));
    }
    /* ── زر السهم ── */
    .toggle-btn {
      flex-shrink: 0;
      width: var(--row-h);
      height: var(--row-h);
      border: none;
      background: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      margin-left: calc(var(--btn-left-gap) - var(--top-bar-pad-x));
      cursor: pointer;
      outline: none;
      -webkit-tap-highlight-color: transparent;
    }
    .arrow {
      display: block;
      width: 0;
      height: 0;
      border-right: 6px solid transparent;
      border-left: 6px solid transparent;
      border-top: 8px solid var(--arrow-color);
      filter: drop-shadow(0 0 3px rgba(var(--gold-rgb), 0.55));
      transition:
        transform var(--dur-collapse) var(--ease),
        border-top-color 0.2s var(--ease),
        filter var(--dur) var(--ease);
    }
    .toggle-btn:hover .arrow {
      border-top-color: var(--arrow-color-hover);
      filter: brightness(1.15) drop-shadow(0 0 5px rgba(255, 215, 92, 0.85));
    }
    /* ==========================================================
       📄 4. بطاقة المحتوى والخط الذهبي المنحني المميز
       ========================================================== */
    .content {
      position: relative;
      z-index: 2;
      background-color: var(--content-bg);
      border-radius: var(--radius);
      border: var(--border-w) solid var(--frame-border);
      box-shadow: var(--shadow-content);
      padding: var(--content-pad);
      max-height: 800px;
      opacity: 1;
      transition:
        max-height var(--dur-collapse) var(--ease),
        padding var(--dur-collapse) var(--ease),
        border-width var(--dur-collapse) var(--ease),
        opacity 0.25s var(--ease),
        background-color var(--dur) var(--ease),
        border-color var(--dur) var(--ease);
    }
    /* 💠 الخط الذهبي المقوّس المتوهج بتقنية القناع المزدوج */
    .content::before {
      content: '';
      position: absolute;
      inset: -1px;
      border: 1px solid rgba(var(--line-rgb), 0.65);
      border-radius: calc(var(--radius) + 1px);
      box-shadow:
        0 0 6px rgba(var(--line-deep-rgb), 0.35),
        0 0 14px rgba(var(--line-deep-rgb), 0.15),
        inset 0 0 8px rgba(var(--line-rgb), 0.08);
      -webkit-mask-image:
        linear-gradient(to bottom, #000 0, #000 5px, rgba(0, 0, 0, 0.55) 13px, rgba(0, 0, 0, 0) 24px),
        linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 13%, #000 87%, rgba(0, 0, 0, 0) 100%);
      -webkit-mask-composite: source-in;
      mask-image:
        linear-gradient(to bottom, #000 0, #000 5px, rgba(0, 0, 0, 0.55) 13px, rgba(0, 0, 0, 0) 24px),
        linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 13%, #000 87%, rgba(0, 0, 0, 0) 100%);
      mask-composite: intersect;
      pointer-events: none;
      z-index: 1;
    }
    /* ==========================================================
       📕 5. حالة الإغلاق (الارتفاع 40px وتوحيد الحدود الأربعة)
       ========================================================== */
    .stack.collapsed .top-bar {
      border-radius: var(--radius-top);
      border-bottom-color: var(--frame-border);
      margin-bottom: 0;
      padding-bottom: var(--top-bar-pad-y);
    }
    .stack.collapsed .top-bar:hover {
      border-color: var(--frame-border-hover);
    }
    .stack.collapsed .content {
      max-height: 0;
      padding-top: 0;
      padding-bottom: 0;
      border-width: 0;
      opacity: 0;
      pointer-events: none;
    }
    .stack.collapsed .arrow {
      transform: rotate(-90deg);
    }
    /* ==========================================================
       📋 6. قائمة المواضيع وعناصر المنتدى
       ========================================================== */
    .thread-list {
      list-style: none;
      display: flex;
      flex-direction: column;
    }
    .thread-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 8px;
      border-bottom: var(--row-divider-w) solid var(--row-border);
      border-radius: 6px;
      cursor: pointer;
      user-select: none;
      transition: background-color 0.18s ease;
    }
    .thread-row:last-child { border-bottom: none; }
    .thread-row:hover { background-color: var(--row-hover-bg); }
    .avatar {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      flex-shrink: 0;
      background: linear-gradient(135deg, #1f2735, #141b25);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 14px;
      color: var(--gold);
      border: 1px solid var(--border-gold);
    }
    body.light-mode .avatar {
      background: linear-gradient(135deg, #e0edfd, #edf5fe);
      color: var(--link-color);
      border: 1px solid #bfdbfe;
    }
    .thread-info {
      flex: 1;
      min-width: 0;
    }
    .thread-title {
      font-size: 14px;
      font-weight: 600;
      line-height: 1.4;
      color: var(--text-main);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: block;
      transition: color 0.18s ease;
    }
    .thread-row:hover .thread-title { color: var(--link-color); }
    .thread-meta {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 4px;
    }
    .thread-meta span {
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .badge-featured {
      background: rgba(var(--gold-rgb), 0.15);
      color: var(--gold);
      border: 1px solid var(--border-gold);
      padding: 1px 6px;
      border-radius: 10px;
      font-size: 11px;
      font-weight: 600;
    }
    body.light-mode .badge-featured {
      background: rgba(150, 110, 22, 0.12);
      color: #966e16;
      border-color: rgba(150, 110, 22, 0.30);
    }
    .reply-count {
      margin-right: auto;
      font-size: 12px;
      font-weight: 600;
      color: var(--text-muted);
      background: rgba(255, 255, 255, 0.05);
      padding: 3px 8px;
      border-radius: 12px;
    }
    body.light-mode .reply-count {
      background: rgba(0, 0, 0, 0.05);
      color: #475569;
    }
    .note-box {
      max-width: 700px;
      width: 100%;
      background: rgba(var(--gold-rgb), 0.08);
      border: 1px solid var(--border-gold);
      border-radius: 10px;
      padding: 12px 16px;
      font-size: 13px;
      line-height: 1.7;
      color: var(--text-muted);
      text-align: right;
    }
    .note-box strong { color: var(--gold); }
  </style>
</head>
<body>
  <!-- شريط أدوات المعاينة -->
  <div class="preview-toolbar">
    <button type="button" class="tool-btn" id="modeBtn" aria-pressed="false">☀️ الوضع الفاتح</button>
    <button type="button" class="tool-btn" id="toggleStateBtn">🔽 إغلاق الإطار</button>
    <button type="button" class="tool-btn active" id="btnFeatured" aria-pressed="true">⭐ محتوى مميز</button>
    <button type="button" class="tool-btn" id="btnTrending" aria-pressed="false">🔥 محتوى رائج</button>
  </div>
  <!-- حاوية الإطار الرئيسي المطابق للمنتدى -->
  <div class="stack" id="stack">
    <!-- شريط الرأس / الزر -->
    <div class="top-bar">
      <div class="bar-inner">
        <!-- رابط العنوان الرئيسي -->
        <a class="title-wrapper"
           id="titleLink"
           href="#featured"
           title="اضغط للانتقال إلى القسم أو التبديل">
          <span class="title-icon" id="titleIcon">⭐</span>
          <span class="title-text" id="titleText">محتوى مميز</span>
        </a>
        <!-- زر السهم للفتح والإغلاق -->
        <button type="button"
                class="toggle-btn"
                id="toggleBtn"
                aria-expanded="true"
                aria-controls="contentPanel"
                aria-label="فتح أو إغلاق القائمة"
                title="اضغط للفتح والإغلاق">
          <span class="arrow" aria-hidden="true"></span>
        </button>
      </div>
    </div>
    <!-- بطاقة المحتوى مع الخط الذهبي المنحني -->
    <div class="content" id="contentPanel" role="region" aria-label="قائمة المواضيع">
      <ul class="thread-list" id="threadList"></ul>
    </div>
  </div>
  <div class="note-box">
    <strong>✨ تم التنظيف والاعتماد النهائي:</strong> كود خالٍ من أي تكرار أو أكواد زائدة، متوافق كلياً مع قوالب المنتدى وأنماطه. الارتفاع 40px عند الإغلاق، اللون الغامق ثابت عند وضع الماوس، والخط الذهبي المنحني يعمل بكامل جماليته.
  </div>
  <script>
    'use strict';
    const $ = id => document.getElementById(id);
    const stack          = $('stack');
    const toggleBtn      = $('toggleBtn');
    const toggleStateBtn = $('toggleStateBtn');
    const modeBtn        = $('modeBtn');
    const btnFeatured    = $('btnFeatured');
    const btnTrending    = $('btnTrending');
    const titleLink      = $('titleLink');
    const titleIcon      = $('titleIcon');
    const titleText      = $('titleText');
    const threadList     = $('threadList');
    const ESC_MAP = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
    const esc = v => String(v).replace(/[&<>"']/g, c => ESC_MAP[c]);
    const DATA = {
      featured: [
        { avatar: 'ي', title: '🏆 حصري | إسطوانه المشاغب لفك تشفير فايروسات الفديه',           user: 'اليوناني',       date: '1 يونيو 2026',  badge: '⭐ مميز', replies: '18 رد' },
        { avatar: 'D', title: '📦 جميع برامج شركة IObit | تفعيل بسيريال متجدد لجميع الإصدارات🔑', user: 'Dabor Tech',    date: '7 مايو 2026',   badge: '⭐ مميز', replies: '88 رد' },
        { avatar: 'D', title: 'إمتلك البرنامج مدى الحياة | 🎨 RealDraw PRO v5.2.4',              user: 'Dabor Tech',    date: '18 أبريل 2026', badge: '⭐ مميز', replies: '14 رد' }
      ],
      trending: [
        { avatar: 'م', title: 'وداعاً لرسائل التفعيل: تحميل NERD Download Manager أفضل بديل مجاني لـ IDM.', user: 'محمد الغنيمي',    date: '6 أغسطس 2026',  badge: '🔥 رائج', replies: '14 رد' },
        { avatar: 'd', title: 'عملاق التحميل من النت Internet Download Manager v.6.43.15 Silent & Retail',  user: 'djoudi',          date: '4 مارس 2026',   badge: '🔥 رائج', replies: '909 رد' },
        { avatar: 'ف', title: 'Test',                                                                        user: 'فخم الطلة',       date: '12 مايو 2026',  badge: '🔥 رائج', replies: '33 رد' },
        { avatar: 'Y', title: 'Internet Download Manager 6.42 Build 23 Multilingual مفعل مدى الحياة',       user: 'YASSINE BABLIL',  date: '1 أغسطس 2024',  badge: '🔥 رائج', replies: '3K رد' },
        { avatar: 'D', title: 'الأداة الأقوى لتفعيل عملاق التحميل Internet Download Manager [ متجدد ]',       user: 'Dabor Tech',      date: '10 ديسمبر 2025', badge: '🔥 رائج', replies: '832 رد' }
      ]
    };
    const TAB_META = {
      featured: { icon: '⭐', label: 'محتوى مميز', url: '#featured' },
      trending: { icon: '🔥', label: 'محتوى رائج', url: '#trending' }
    };
    function renderThreads(items) {
      threadList.innerHTML = items.map(it => `
        <li class="thread-row">
          <div class="avatar">${esc(it.avatar)}</div>
          <div class="thread-info">
            <span class="thread-title">${esc(it.title)}</span>
            <div class="thread-meta">
              <span>${esc(it.user)}</span>
              <span>• ${esc(it.date)}</span>
              <span class="badge-featured">${esc(it.badge)}</span>
            </div>
          </div>
          <div class="reply-count">${esc(it.replies)}</div>
        </li>`).join('');
    }
    let currentTab = 'featured';
    function switchTab(tabKey) {
      if (!TAB_META[tabKey]) return;
      currentTab = tabKey;
      const meta = TAB_META[tabKey];
      titleIcon.textContent = meta.icon;
      titleText.textContent = meta.label;
      titleLink.setAttribute('href', meta.url);
      const active  = tabKey === 'featured' ? btnFeatured : btnTrending;
      const inactive = tabKey === 'featured' ? btnTrending : btnFeatured;
      active.classList.add('active');
      inactive.classList.remove('active');
      active.setAttribute('aria-pressed', 'true');
      inactive.setAttribute('aria-pressed', 'false');
      renderThreads(DATA[tabKey]);
    }
    titleLink.addEventListener('click', (e) => {
      if (e.ctrlKey || e.metaKey || e.button === 1) return;
      e.preventDefault();
      const target = currentTab === 'featured' ? 'trending' : 'featured';
      switchTab(target);
    });
    function setCollapsed(collapsed) {
      stack.classList.toggle('collapsed', collapsed);
      toggleBtn.setAttribute('aria-expanded', String(!collapsed));
      toggleStateBtn.textContent = collapsed ? '🔼 فتح الإطار' : '🔽 إغلاق الإطار';
    }
    const toggleCollapse = () => setCollapsed(!stack.classList.contains('collapsed'));
    toggleBtn.addEventListener('click', toggleCollapse);
    toggleStateBtn.addEventListener('click', toggleCollapse);
    modeBtn.addEventListener('click', () => {
      const isLight = document.body.classList.toggle('light-mode');
      modeBtn.textContent = isLight ? '🌙 الوضع الداكن' : '☀️ الوضع الفاتح';
      modeBtn.setAttribute('aria-pressed', String(isLight));
    });
    btnFeatured.addEventListener('click', () => switchTab('featured'));
    btnTrending.addEventListener('click', () => switchTab('trending'));
    switchTab('featured');
  </script>
</body>
</html>

 

[Eng-Abu Elias]

تسلم ايدك ابو الرور شغل مرتب ومجهود تشكر عليه يا اخوي
ربي يعطيك الف عافية