كورس تعلم HTML -

</> كورس HTML الشامل
</>
مرحبًا بك في كورس HTML

اختر درسًا من القائمة على اليمين للبدء. كل درس يحتوي على شرح مبسّط بالعربية بالإضافة إلى مثال كود حقيقي مع معاينة حية للنتيجة.
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>&lt;/&gt; كورس HTML الشامل</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;900&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
<style>
  :root{
    --bg: #f7f3ea;
    --panel: #ffffff;
    --panel-2: #f1ebda;
    --line: #ddd2b6;
    --text: #241f18;
    --text-soft: #4d4636;
    --muted: #8a7f64;
    --orange: #d84a24;   /* لون HTML5 الرسمي - جذر الهوية البصرية */
    --orange-dim: #b23c1a;
    --orange-soft: rgba(216,74,36,.10);
    --teal: #0e8074;     /* لون ثانوي للسمات/الوسوم */
    --blue: #2a6ea6;
    --radius: 10px;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;height:100%;}
  body{
    background: var(--bg);
    color: var(--text);
    font-family: 'Tajawal', sans-serif;
    overflow:hidden;
  }
  ::selection{ background: var(--orange); color:#fff; }
  ::-webkit-scrollbar{ width:9px; height:9px; }
  ::-webkit-scrollbar-track{ background: transparent; }
  ::-webkit-scrollbar-thumb{ background: var(--line); border-radius:10px; }
  ::-webkit-scrollbar-thumb:hover{ background: var(--orange-dim); }

  .app{
    display:flex;
    height:100vh;
    width:100vw;
  }

  /* ============ الشريط الجانبي (يمين) ============ */
  .sidebar{
    width: 340px;
    min-width: 340px;
    background: var(--panel);
    border-left: 1px solid var(--line);
    display:flex;
    flex-direction:column;
    height:100vh;
  }
  .brand{
    padding: 22px 20px 16px;
    border-bottom: 1px solid var(--line);
  }
  .brand-tag{
    font-family:'JetBrains Mono', monospace;
    color: var(--orange);
    font-size: 12px;
    letter-spacing: .5px;
    display:block;
    margin-bottom:6px;
  }
  .brand h1{
    margin:0;
    font-size: 21px;
    font-weight: 900;
    color: var(--text);
  }
  .brand p{
    margin:6px 0 0;
    color: var(--muted);
    font-size: 12.5px;
    line-height:1.6;
  }
  .search-box{
    margin: 14px 20px;
    position:relative;
  }
  .search-box input{
    width:100%;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 9px 34px 9px 12px;
    color: var(--text);
    font-family:'Tajawal',sans-serif;
    font-size: 13.5px;
    outline:none;
  }
  .search-box input:focus{ border-color: var(--orange); }
  .search-box::before{
    content:'⌕';
    position:absolute;
    right:12px;
    top:50%;
    transform:translateY(-50%);
    color: var(--muted);
    font-size:15px;
  }

  .tree{
    flex:1;
    overflow-y:auto;
    padding: 6px 12px 24px;
  }
  .cat{
    margin-bottom: 4px;
  }
  .cat-head{
    display:flex;
    align-items:center;
    gap:8px;
    padding: 10px 10px;
    cursor:pointer;
    border-radius: 8px;
    user-select:none;
    color: var(--text);
    font-weight:700;
    font-size: 13.5px;
    transition: background .15s;
  }
  .cat-head:hover{ background: var(--panel-2); }
  .cat-head .caret{
    font-family:'JetBrains Mono',monospace;
    color: var(--orange);
    font-size: 11px;
    transition: transform .18s ease;
    width:12px;
    display:inline-block;
  }
  .cat.open .cat-head .caret{ transform: rotate(90deg); }
  .cat-head .count{
    margin-right:auto;
    color: var(--muted);
    font-family:'JetBrains Mono',monospace;
    font-size: 10.5px;
    background: var(--panel-2);
    border:1px solid var(--line);
    padding:1px 6px;
    border-radius: 20px;
  }
  .cat-list{
    display:none;
    padding: 2px 0 8px 0;
    position:relative;
    margin-right: 15px;
    border-right: 1px dashed var(--line);
  }
  .cat.open .cat-list{ display:block; }
  .lesson-item{
    display:flex;
    align-items:center;
    gap:8px;
    padding: 8px 12px 8px 10px;
    margin: 1px 0 1px 4px;
    border-radius: 7px;
    cursor:pointer;
    color: var(--muted);
    font-size: 13px;
    position:relative;
    transition: all .12s;
    line-height:1.4;
  }
  .lesson-item::before{
    content:'';
    width:14px;
    height:1px;
    background: var(--line);
    flex-shrink:0;
  }
  .lesson-item:hover{ color: var(--text); background: var(--panel-2); }
  .lesson-item.active{
    color: var(--orange-dim);
    background: linear-gradient(90deg, var(--orange-soft), transparent);
    border-right: 2px solid var(--orange);
    font-weight:700;
  }
  .lesson-item .tag-ico{
    font-family:'JetBrains Mono',monospace;
    font-size: 10.5px;
    color: var(--teal);
    flex-shrink:0;
  }
  .lesson-item.active .tag-ico{ color: var(--orange); }

  .sidebar-foot{
    padding: 12px 20px;
    border-top: 1px solid var(--line);
    font-size: 11px;
    color: var(--muted);
    font-family:'JetBrains Mono',monospace;
    display:flex;
    justify-content:space-between;
  }

  /* ============ منطقة المحتوى (يسار) ============ */
  .content{
    flex:1;
    height:100vh;
    overflow-y:auto;
    padding: 40px 56px 90px;
    scroll-behavior:smooth;
  }
  .content-inner{
    max-width: 820px;
    margin:0 auto;
  }
  .crumb{
    font-family:'JetBrains Mono',monospace;
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 14px;
    display:flex;
    gap:8px;
    align-items:center;
  }
  .crumb .dot{ color: var(--orange); }
  .lesson-title{
    font-size: 32px;
    font-weight:900;
    margin: 0 0 6px;
    color: var(--text);
    display:flex;
    align-items:center;
    gap:14px;
  }
  .lesson-title .num{
    font-family:'JetBrains Mono',monospace;
    color: var(--orange);
    font-size:16px;
    background: var(--panel-2);
    border:1px solid var(--line);
    padding:3px 10px;
    border-radius:20px;
  }
  .lesson-sub{
    color: var(--muted);
    font-size:14.5px;
    margin-bottom: 30px;
    line-height:1.7;
  }
  .lesson-body h3{
    font-size: 17px;
    color: var(--orange);
    margin: 30px 0 10px;
    font-weight:700;
    display:flex;
    align-items:center;
    gap:8px;
  }
  .lesson-body h3::before{
    content:'#';
    font-family:'JetBrains Mono',monospace;
    color: var(--teal);
  }
  .lesson-body p{
    line-height:1.95;
    font-size: 15px;
    color: var(--text-soft);
    margin: 0 0 14px;
  }
  .lesson-body ul, .lesson-body ol{
    line-height:1.95;
    font-size: 15px;
    color: var(--text-soft);
    padding-right: 22px;
    margin: 0 0 16px;
  }
  .lesson-body li{ margin-bottom:6px; }
  .lesson-body code.inline{
    font-family:'JetBrains Mono',monospace;
    background: var(--panel-2);
    border:1px solid var(--line);
    color: var(--teal);
    padding: 1px 7px;
    border-radius: 5px;
    font-size: 13px;
  }
  table.attr-table{
    width:100%;
    border-collapse: collapse;
    margin: 6px 0 20px;
    font-size: 13.5px;
    background: var(--panel);
    border:1px solid var(--line);
    border-radius: var(--radius);
    overflow:hidden;
  }
  table.attr-table th{
    background: var(--panel-2);
    color: var(--orange);
    text-align:right;
    padding: 9px 12px;
    font-family:'JetBrains Mono',monospace;
    font-size:12px;
    border-bottom:1px solid var(--line);
  }
  table.attr-table td{
    padding: 9px 12px;
    border-bottom:1px solid var(--line);
    color: var(--text-soft);
  }
  table.attr-table tr:last-child td{ border-bottom:none; }

  .note{
    background: var(--orange-soft);
    border: 1px solid rgba(216,74,36,.30);
    border-right: 3px solid var(--orange);
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13.5px;
    color: #8a3418;
    margin: 16px 0 22px;
    line-height:1.8;
  }
  .note b{ color: var(--orange); }

  /* كتلة الكود */
  .code-block{
    background: #fbf9f1;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin: 14px 0 20px;
    overflow:hidden;
  }
  .code-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 9px 14px;
    background: var(--panel-2);
    border-bottom: 1px solid var(--line);
  }
  .code-head .dots{ display:flex; gap:6px; }
  .code-head .dots span{ width:9px; height:9px; border-radius:50%; display:inline-block; }
  .code-head .dots span:nth-child(1){ background:#e5645c; }
  .code-head .dots span:nth-child(2){ background:#e8b13c; }
  .code-head .dots span:nth-child(3){ background:#5cb85c; }
  .code-head .label{
    font-family:'JetBrains Mono',monospace;
    font-size: 11px;
    color: var(--muted);
    direction:ltr;
  }
  .copy-btn{
    background:none;
    border:1px solid var(--line);
    color: var(--muted);
    font-family:'JetBrains Mono',monospace;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 6px;
    cursor:pointer;
    transition:.15s;
  }
  .copy-btn:hover{ border-color: var(--orange); color: var(--orange); }
  pre.code-pre{
    margin:0;
    padding: 16px 18px;
    overflow-x:auto;
    direction:ltr;
    text-align:left;
  }
  pre.code-pre code{
    font-family:'JetBrains Mono',monospace;
    font-size: 13px;
    line-height: 1.75;
    color: #2b2620;
    white-space:pre;
  }
  .tk-tag{ color:#c43e1c; }
  .tk-attr{ color:#1f6fa8; }
  .tk-val{ color:#4a7c2f; }
  .tk-com{ color:#948a70; font-style:italic; }
  .tk-txt{ color:#2b2620; }

  /* معاينة حية */
  .preview-wrap{
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow:hidden;
    margin: 4px 0 34px;
  }
  .preview-head{
    display:flex;
    align-items:center;
    gap:8px;
    padding: 9px 14px;
    background: var(--panel-2);
    border-bottom: 1px solid var(--line);
    font-family:'JetBrains Mono',monospace;
    font-size: 11px;
    color: var(--muted);
  }
  .preview-head .live-dot{
    width:7px; height:7px; border-radius:50%;
    background: var(--teal);
    box-shadow: 0 0 0 0 rgba(79,195,176,.6);
    animation: pulse 2s infinite;
  }
  @keyframes pulse{
    0%{ box-shadow: 0 0 0 0 rgba(79,195,176,.55); }
    70%{ box-shadow: 0 0 0 6px rgba(79,195,176,0); }
    100%{ box-shadow: 0 0 0 0 rgba(79,195,176,0); }
  }
  iframe.preview-frame{
    width:100%;
    border:none;
    display:block;
    background:#fff;
    height: 160px;
  }

  .nav-buttons{
    display:flex;
    justify-content:space-between;
    gap:14px;
    margin-top: 46px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
  }
  .nav-btn{
    flex:1;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px 18px;
    cursor:pointer;
    color: var(--text);
    text-align:right;
    transition:.15s;
  }
  .nav-btn:hover{ border-color: var(--orange); background: var(--panel-2); }
  .nav-btn .nlabel{
    display:block;
    font-family:'JetBrains Mono',monospace;
    font-size: 10.5px;
    color: var(--muted);
    margin-bottom:4px;
  }
  .nav-btn .ntitle{ font-weight:700; font-size:14px; }
  .nav-btn.disabled{ opacity:.3; pointer-events:none; }

  /* الشاشة الترحيبية داخل المحتوى */
  .welcome{
    height: calc(100vh - 130px);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
  }
  .welcome .big-tag{
    font-family:'JetBrains Mono',monospace;
    font-size: 70px;
    color: var(--orange);
    line-height:1;
    margin-bottom: 18px;
    opacity:.9;
  }
  .welcome h2{ font-size:26px; margin:0 0 10px; }
  .welcome p{ color:var(--muted); max-width:420px; line-height:1.9; font-size:14.5px; }

  @media (max-width: 900px){
    .app{ flex-direction:column; height:auto; }
    .sidebar{ width:100%; min-width:0; height:auto; max-height:46vh; border-left:none; border-bottom:1px solid var(--line); }
    .content{ height:auto; padding: 26px 18px 60px; }
    .lesson-title{ font-size:24px; }
  }
</style>
</head>
<body>

<div class="app">

  <!-- ============ الشريط الجانبي: شجرة الدروس (يمين) ============ -->
  <aside class="sidebar">
    <div class="brand">
      <span class="brand-tag">&lt;course lang="html"&gt;</span>
      <h1>كورس HTML الشامل</h1>
      <p>دليلك الكامل لتعلّم لغة HTML خطوة بخطوة، من الصفر حتى الاحتراف، مع أمثلة حية.</p>
    </div>
    <div class="search-box">
      <input type="text" id="searchInput" placeholder="ابحث عن درس...">
    </div>
    <nav class="tree" id="tree"></nav>
    <div class="sidebar-foot">
      <span id="lessonCountFoot">0 دروس</span>
      <span>&lt;/html&gt;</span>
    </div>
  </aside>

  <!-- ============ منطقة عرض الدرس (يسار) ============ -->
  <main class="content" id="content">
    <div class="content-inner" id="contentInner">
      <div class="welcome">
        <div class="big-tag">&lt;/&gt;</div>
        <h2>مرحبًا بك في كورس HTML</h2>
        <p>اختر درسًا من القائمة على اليمين للبدء. كل درس يحتوي على شرح مبسّط بالعربية بالإضافة إلى مثال كود حقيقي مع معاينة حية للنتيجة.</p>
      </div>
    </div>
  </main>

</div>

<script>
/* ==========================================================
   بيانات الكورس: كل فئة تحتوي على مجموعة دروس
   ========================================================== */
const COURSE = [
  {
    cat: "الأساسيات",
    lessons: [
      {
        id: "intro",
        title: "مقدمة إلى HTML",
        sub: "ما هي HTML، وما دورها في بناء صفحات الويب؟",
        body: `
          <p>HTML اختصار لـ <code class="inline">HyperText Markup Language</code>، وهي ليست لغة برمجة بل <b>لغة توصيف (Markup)</b> تُستخدم لبناء هيكل صفحات الويب. تخبر المتصفح بماهية كل جزء من المحتوى: هل هو عنوان، فقرة، صورة، رابط... إلخ.</p>
          <h3>لماذا نتعلم HTML؟</h3>
          <ul>
            <li>هي حجر الأساس لأي صفحة ويب على الإنترنت.</li>
            <li>تعمل جنبًا إلى جنب مع CSS (للتنسيق) و JavaScript (للتفاعل).</li>
            <li>سهلة التعلم، ولا تحتاج إلى تثبيت برامج معقدة، فقط محرر نصوص ومتصفح.</li>
          </ul>
          <h3>فكرة الوسوم (Tags)</h3>
          <p>يتكون HTML من <b>وسوم</b> موضوعة بين قوسين زاويين مثل <code class="inline">&lt;p&gt;</code>. معظم الوسوم تأتي في زوج: وسم فتح ووسم إغلاق يبدأ بشرطة مائلة، ويوضع المحتوى بينهما.</p>
          <div class="note"><b>ملاحظة:</b> بعض الوسوم لا تحتاج إغلاقًا لأنها لا تحتوي محتوى داخلي، مثل <code class="inline">&lt;br&gt;</code> و <code class="inline">&lt;img&gt;</code>، وتسمى Void Elements.</div>
        `,
        code: `<!-- هذا أول عنصر HTML نتعرف عليه -->
<p>هذه فقرة نصية بسيطة داخل وسم p</p>

<!-- وسم بدون إغلاق (Void Element) -->
<br>`,
        previewHeight: 90
      },
      {
        id: "structure",
        title: "هيكل صفحة HTML",
        sub: "الهيكل الأساسي الذي يجب أن يبدأ به كل ملف HTML",
        body: `
          <p>كل صفحة HTML تتبع هيكلًا ثابتًا يتكون من عدة أجزاء رئيسية موضحة أدناه:</p>
          <table class="attr-table">
            <tr><th>الوسم</th><th>الوظيفة</th></tr>
            <tr><td><code class="inline">&lt;!DOCTYPE html&gt;</code></td><td>يخبر المتصفح أن هذا مستند HTML5</td></tr>
            <tr><td><code class="inline">&lt;html&gt;</code></td><td>الوسم الجذري الذي يحتوي كل الصفحة</td></tr>
            <tr><td><code class="inline">&lt;head&gt;</code></td><td>معلومات غير مرئية: العنوان، الترميز، الروابط لملفات CSS...</td></tr>
            <tr><td><code class="inline">&lt;body&gt;</code></td><td>كل المحتوى المرئي للمستخدم</td></tr>
          </table>
          <h3>وسوم داخل head</h3>
          <ul>
            <li><code class="inline">&lt;title&gt;</code>: عنوان التبويب في المتصفح.</li>
            <li><code class="inline">&lt;meta charset="UTF-8"&gt;</code>: يحدد ترميز النصوص (ضروري للغة العربية).</li>
          </ul>
        `,
        code: `<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <title>عنوان الصفحة</title>
</head>
<body>
  <h1>مرحبًا بالعالم</h1>
  <p>هذا هيكل صفحة HTML الأساسي.</p>
</body>
</html>`,
        previewHeight: 110
      },
      {
        id: "tags-attrs",
        title: "الوسوم والعناصر والسمات",
        sub: "الفرق بين Tag و Element و Attribute",
        body: `
          <p>ثلاثة مصطلحات يجب التفريق بينها جيدًا:</p>
          <ul>
            <li><b>الوسم (Tag)</b>: مثل <code class="inline">&lt;a&gt;</code> أو <code class="inline">&lt;/a&gt;</code>، هو الرمز نفسه.</li>
            <li><b>العنصر (Element)</b>: وسم الفتح + المحتوى + وسم الإغلاق معًا.</li>
            <li><b>السمة (Attribute)</b>: معلومة إضافية توضع داخل وسم الفتح لتعديل سلوك العنصر، على شكل <code class="inline">name="value"</code>.</li>
          </ul>
          <div class="note"><b>ملاحظة:</b> يمكن لعنصر واحد أن يحمل عدة سمات في آنٍ واحد، مفصولة بمسافات.</div>
        `,
        code: `<!-- a هو الوسم، والرابط بأكمله هو العنصر -->
<!-- href و target هما سمتان (attributes) -->
<a href="https://example.com" target="_blank">
  زيارة الموقع
</a>`,
        previewHeight: 70
      },
      {
        id: "comments",
        title: "التعليقات في HTML",
        sub: "كتابة ملاحظات داخل الكود لا تظهر للمستخدم",
        body: `
          <p>التعليقات تساعدك على توثيق الكود أو تعطيل جزء منه مؤقتًا دون حذفه. المتصفح يتجاهلها تمامًا ولا يعرضها للمستخدم.</p>
          <div class="note"><b>نصيحة:</b> استخدم التعليقات لتوضيح أقسام الصفحة الكبيرة، مثل: <code class="inline">&lt;!-- بداية القائمة --&gt;</code>.</div>
        `,
        code: `<!-- هذا تعليق ولن يظهر في الصفحة -->
<p>هذا نص عادي سيظهر.</p>

<!--
  يمكن أن يمتد التعليق
  لعدة أسطر أيضًا
-->`,
        previewHeight: 60
      }
    ]
  },
  {
    cat: "النصوص والتنسيق",
    lessons: [
      {
        id: "headings",
        title: "العناوين Headings",
        sub: "من h1 إلى h6 لترتيب أهمية العناوين",
        body: `
          <p>توفر HTML ستة مستويات من العناوين، من <code class="inline">&lt;h1&gt;</code> (الأهم) إلى <code class="inline">&lt;h6&gt;</code> (الأقل أهمية).</p>
          <div class="note"><b>مهم لمحركات البحث (SEO):</b> يجب استخدام <code class="inline">&lt;h1&gt;</code> مرة واحدة فقط في الصفحة، وترتيب باقي العناوين بشكل منطقي دون تخطي مستويات.</div>
        `,
        code: `<h1>العنوان الرئيسي للصفحة</h1>
<h2>عنوان قسم فرعي</h2>
<h3>عنوان أصغر داخل القسم</h3>
<h4>مستوى رابع</h4>`,
        previewHeight: 170
      },
      {
        id: "paragraphs",
        title: "الفقرات والنصوص",
        sub: "وسوم p و br و hr للتعامل مع الكتلة النصية",
        body: `
          <p>وسم <code class="inline">&lt;p&gt;</code> يُستخدم لكتابة فقرة نصية، ويضيف المتصفح تلقائيًا مسافة قبلها وبعدها.</p>
          <ul>
            <li><code class="inline">&lt;br&gt;</code>: للانتقال إلى سطر جديد داخل نفس الفقرة.</li>
            <li><code class="inline">&lt;hr&gt;</code>: لرسم خط أفقي فاصل بين الأقسام.</li>
          </ul>
        `,
        code: `<p>هذا السطر الأول.<br>وهذا سطر جديد بعد br.</p>
<hr>
<p>فقرة أخرى بعد الخط الفاصل.</p>`,
        previewHeight: 130
      },
      {
        id: "text-formatting",
        title: "تنسيق النص",
        sub: "بارز، مائل، تحته خط، وأسطر أخرى للتنسيق الدلالي",
        body: `
          <p>توفر HTML وسومًا لتمييز النص، وبعضها يحمل معنى دلاليًا وليس مجرد شكل بصري:</p>
          <table class="attr-table">
            <tr><th>الوسم</th><th>الاستخدام</th></tr>
            <tr><td><code class="inline">&lt;strong&gt;</code></td><td>نص مهم جدًا (يظهر بارزًا)</td></tr>
            <tr><td><code class="inline">&lt;em&gt;</code></td><td>نص مع تأكيد بالنبرة (يظهر مائلًا)</td></tr>
            <tr><td><code class="inline">&lt;mark&gt;</code></td><td>نص مُظلَّل كأنه مُلوَّن بقلم فسفوري</td></tr>
            <tr><td><code class="inline">&lt;small&gt;</code></td><td>نص أصغر حجمًا (كالملاحظات)</td></tr>
            <tr><td><code class="inline">&lt;del&gt; / &lt;ins&gt;</code></td><td>نص محذوف / نص مُضاف</td></tr>
            <tr><td><code class="inline">&lt;sub&gt; / &lt;sup&gt;</code></td><td>نص منخفض / مرتفع (كالأرقام العلمية)</td></tr>
          </table>
        `,
        code: `<p><strong>تحذير مهم:</strong> اقرأ الشروط.</p>
<p>نتحدث عن <em>أفضل</em> الممارسات.</p>
<p>السعر <mark>مخفض اليوم فقط</mark>!</p>
<p>H<sub>2</sub>O هي صيغة الماء، و 5<sup>2</sup> = 25.</p>`,
        previewHeight: 150
      },
      {
        id: "lists",
        title: "القوائم المرتبة وغير المرتبة",
        sub: "ul و ol و li لعرض عناصر على شكل قائمة",
        body: `
          <p>هناك نوعان أساسيان من القوائم:</p>
          <ul>
            <li><code class="inline">&lt;ul&gt;</code>: قائمة غير مرتبة (نقاط)، تُستخدم عندما لا يهم الترتيب.</li>
            <li><code class="inline">&lt;ol&gt;</code>: قائمة مرتبة (أرقام)، تُستخدم عندما يهم الترتيب كخطوات.</li>
          </ul>
          <p>وكل عنصر داخل القائمة يوضع داخل وسم <code class="inline">&lt;li&gt;</code>. يمكن أيضًا تعشيش (nest) قائمة داخل أخرى.</p>
        `,
        code: `<h4>مكونات الطبق:</h4>
<ul>
  <li>طماطم</li>
  <li>بصل</li>
  <li>زيت زيتون</li>
</ul>

<h4>خطوات التحضير:</h4>
<ol>
  <li>قطّع الخضار</li>
  <li>اخلط المكونات</li>
  <li>قدّم الطبق</li>
</ol>`,
        previewHeight: 260
      },
      {
        id: "def-lists",
        title: "قوائم التعريف",
        sub: "dl و dt و dd لعرض مصطلحات وتعريفاتها",
        body: `
          <p>تُستخدم قائمة التعريف لعرض أزواج من (مصطلح ↔ شرح)، مثل قاموس مصغّر:</p>
          <ul>
            <li><code class="inline">&lt;dl&gt;</code>: الحاوية الرئيسية لقائمة التعريف.</li>
            <li><code class="inline">&lt;dt&gt;</code>: المصطلح (Definition Term).</li>
            <li><code class="inline">&lt;dd&gt;</code>: الوصف أو التعريف (Definition Description).</li>
          </ul>
        `,
        code: `<dl>
  <dt>HTML</dt>
  <dd>لغة توصيف لبناء هيكل صفحات الويب.</dd>

  <dt>CSS</dt>
  <dd>لغة تُستخدم لتنسيق مظهر الصفحة.</dd>
</dl>`,
        previewHeight: 130
      }
    ]
  },
  {
    cat: "الروابط والوسائط",
    lessons: [
      {
        id: "links",
        title: "الروابط (Links)",
        sub: "الانتقال بين الصفحات باستخدام وسم a",
        body: `
          <p>وسم <code class="inline">&lt;a&gt;</code> (Anchor) يُستخدم لإنشاء الروابط التشعبية. أهم سمة فيه هي <code class="inline">href</code> التي تحدد الوجهة.</p>
          <table class="attr-table">
            <tr><th>السمة</th><th>الوظيفة</th></tr>
            <tr><td><code class="inline">href</code></td><td>عنوان الوجهة (رابط خارجي، ملف، أو جزء من نفس الصفحة)</td></tr>
            <tr><td><code class="inline">target="_blank"</code></td><td>فتح الرابط في تبويب جديد</td></tr>
            <tr><td><code class="inline">title</code></td><td>نص توضيحي يظهر عند تمرير الفأرة</td></tr>
          </table>
        `,
        code: `<a href="https://example.com" target="_blank">
  موقع خارجي
</a>

<a href="#section2">انتقل إلى القسم الثاني</a>

<a href="mailto:test@mail.com">راسلنا بالبريد</a>`,
        previewHeight: 120
      },
      {
        id: "images",
        title: "الصور (Images)",
        sub: "عرض الصور باستخدام وسم img",
        body: `
          <p>وسم <code class="inline">&lt;img&gt;</code> هو من العناصر التي لا تحتاج إغلاقًا (Void Element). أهم سماته:</p>
          <table class="attr-table">
            <tr><th>السمة</th><th>الوظيفة</th></tr>
            <tr><td><code class="inline">src</code></td><td>مسار أو رابط الصورة (إجباري)</td></tr>
            <tr><td><code class="inline">alt</code></td><td>نص بديل يظهر عند تعذّر تحميل الصورة، ومهم جدًا لإمكانية الوصول</td></tr>
            <tr><td><code class="inline">width / height</code></td><td>تحديد الأبعاد بالبكسل</td></tr>
          </table>
          <div class="note"><b>مهم:</b> لا تنسَ سمة <code class="inline">alt</code> أبدًا، فهي ضرورية لقارئات الشاشة ومحركات البحث.</div>
        `,
        code: `<img
  src="https://picsum.photos/300/150"
  alt="صورة تجريبية عشوائية"
  width="300"
  height="150">`,
        previewHeight: 170
      },
      {
        id: "media",
        title: "الفيديو والصوت",
        sub: "تضمين ملفات الوسائط باستخدام video و audio",
        body: `
          <p>يوفر HTML5 وسومًا مخصصة لتضمين الوسائط مباشرة دون الحاجة لإضافات خارجية:</p>
          <ul>
            <li><code class="inline">&lt;video&gt;</code>: لتضمين مقاطع الفيديو، مع خاصية <code class="inline">controls</code> لإظهار أزرار التحكم.</li>
            <li><code class="inline">&lt;audio&gt;</code>: لتضمين المقاطع الصوتية بنفس الطريقة.</li>
            <li><code class="inline">&lt;source&gt;</code>: يستخدم داخلهما لتحديد أكثر من مصدر بصيغ مختلفة.</li>
          </ul>
        `,
        code: `<video controls width="280">
  <source src="movie.mp4" type="video/mp4">
  متصفحك لا يدعم عرض الفيديو.
</video>

<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  متصفحك لا يدعم تشغيل الصوت.
</audio>`,
        previewHeight: 100
      },
      {
        id: "iframe",
        title: "الإطار المضمّن iframe",
        sub: "عرض صفحة أو محتوى خارجي داخل صفحتك",
        body: `
          <p>وسم <code class="inline">&lt;iframe&gt;</code> يسمح بتضمين صفحة ويب أخرى بالكامل داخل صفحتك الحالية، ويُستخدم كثيرًا لتضمين خرائط Google أو فيديوهات YouTube.</p>
          <div class="note"><b>ملاحظة أمنية:</b> يُفضّل دائمًا استخدام سمة <code class="inline">sandbox</code> عند تضمين محتوى من مصدر غير موثوق به.</div>
        `,
        code: `<iframe
  src="https://example.com"
  width="100%"
  height="150"
  title="محتوى مضمّن">
</iframe>`,
        previewHeight: 170
      }
    ]
  },
  {
    cat: "الجداول والنماذج",
    lessons: [
      {
        id: "tables",
        title: "الجداول (Tables)",
        sub: "عرض البيانات في صفوف وأعمدة",
        body: `
          <p>تُبنى الجداول من مجموعة وسوم متداخلة:</p>
          <table class="attr-table">
            <tr><th>الوسم</th><th>الوظيفة</th></tr>
            <tr><td><code class="inline">&lt;table&gt;</code></td><td>الحاوية الرئيسية للجدول</td></tr>
            <tr><td><code class="inline">&lt;tr&gt;</code></td><td>صف (Table Row)</td></tr>
            <tr><td><code class="inline">&lt;th&gt;</code></td><td>خلية رأسية (عنوان عمود)، تظهر بارزة تلقائيًا</td></tr>
            <tr><td><code class="inline">&lt;td&gt;</code></td><td>خلية بيانات عادية</td></tr>
            <tr><td><code class="inline">&lt;thead&gt; / &lt;tbody&gt;</code></td><td>تقسيم منطقي لرأس الجدول وجسمه</td></tr>
          </table>
        `,
        code: `<table border="1">
  <thead>
    <tr>
      <th>الاسم</th>
      <th>العمر</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>سارة</td>
      <td>24</td>
    </tr>
    <tr>
      <td>خالد</td>
      <td>30</td>
    </tr>
  </tbody>
</table>`,
        previewHeight: 160
      },
      {
        id: "forms",
        title: "النماذج الأساسية (Forms)",
        sub: "جمع بيانات المستخدم عبر وسم form",
        body: `
          <p>النماذج هي الطريقة الأساسية لجمع مدخلات المستخدم (كنماذج تسجيل الدخول والتواصل). العناصر الأساسية:</p>
          <table class="attr-table">
            <tr><th>الوسم</th><th>الوظيفة</th></tr>
            <tr><td><code class="inline">&lt;form&gt;</code></td><td>الحاوية الرئيسية، تحدد وجهة الإرسال عبر <code class="inline">action</code> وطريقة الإرسال عبر <code class="inline">method</code></td></tr>
            <tr><td><code class="inline">&lt;label&gt;</code></td><td>وصف نصي مرتبط بحقل إدخال، يحسّن إمكانية الوصول</td></tr>
            <tr><td><code class="inline">&lt;input&gt;</code></td><td>حقل إدخال بأنواع متعددة</td></tr>
            <tr><td><code class="inline">&lt;button&gt;</code></td><td>زر (إرسال، إعادة تعيين، أو عادي)</td></tr>
          </table>
        `,
        code: `<form action="/submit" method="post">
  <label for="name">الاسم:</label>
  <input type="text" id="name" name="name" placeholder="اكتب اسمك">

  <label for="email">البريد الإلكتروني:</label>
  <input type="email" id="email" name="email">

  <button type="submit">إرسال</button>
</form>`,
        previewHeight: 190
      },
      {
        id: "input-types",
        title: "أنواع حقول الإدخال",
        sub: "تنوّع سمة type في وسم input",
        body: `
          <p>سمة <code class="inline">type</code> في وسم <code class="inline">input</code> تحدد شكل الحقل وسلوكه. من أشهر الأنواع:</p>
          <table class="attr-table">
            <tr><th>النوع</th><th>الوصف</th></tr>
            <tr><td><code class="inline">text</code></td><td>حقل نص عادي</td></tr>
            <tr><td><code class="inline">password</code></td><td>حقل كلمة مرور (يُخفي الأحرف)</td></tr>
            <tr><td><code class="inline">checkbox</code></td><td>مربع اختيار (متعدد الخيارات)</td></tr>
            <tr><td><code class="inline">radio</code></td><td>زر اختيار (خيار واحد من مجموعة)</td></tr>
            <tr><td><code class="inline">date</code></td><td>منتقي التاريخ</td></tr>
            <tr><td><code class="inline">range</code></td><td>شريط تمرير رقمي</td></tr>
            <tr><td><code class="inline">file</code></td><td>رفع ملف من الجهاز</td></tr>
          </table>
        `,
        code: `<input type="checkbox" id="agree"> <label for="agree">أوافق على الشروط</label><br>

<input type="radio" name="gender" id="m"> <label for="m">ذكر</label>
<input type="radio" name="gender" id="f"> <label for="f">أنثى</label><br><br>

<input type="date">
<input type="range" min="0" max="100">`,
        previewHeight: 130
      }
    ]
  },
  {
    cat: "العناصر الدلالية والتخطيط",
    lessons: [
      {
        id: "div-span",
        title: "Div و Span",
        sub: "عنصران عامّان لتجميع المحتوى",
        body: `
          <p>هما وسمان لا يحملان أي معنى دلالي بحد ذاتهما، ويُستخدمان غالبًا للتحكم بالتنسيق عبر CSS:</p>
          <ul>
            <li><code class="inline">&lt;div&gt;</code>: عنصر <b>كتلي (Block)</b> يأخذ سطرًا كاملاً، يُستخدم لتجميع أقسام كبيرة.</li>
            <li><code class="inline">&lt;span&gt;</code>: عنصر <b>سطري (Inline)</b> يأخذ حجم محتواه فقط، يُستخدم لتمييز جزء صغير داخل نص.</li>
          </ul>
        `,
        code: `<div style="background:#eee; padding:10px;">
  هذا قسم (div) يحتوي فقرة كاملة.
  <span style="color:red;">وهذه كلمات</span>
  مميّزة داخل نفس السطر باستخدام span.
</div>`,
        previewHeight: 90
      },
      {
        id: "semantic",
        title: "العناصر الدلالية Semantic HTML5",
        sub: "وسوم تصف معنى القسم لا شكله فقط",
        body: `
          <p>مع HTML5 ظهرت وسوم تحمل معنى واضحًا عن دور كل قسم في الصفحة، مما يحسّن قراءة الكود ومحركات البحث وإمكانية الوصول:</p>
          <table class="attr-table">
            <tr><th>الوسم</th><th>الاستخدام</th></tr>
            <tr><td><code class="inline">&lt;header&gt;</code></td><td>رأس الصفحة أو رأس قسم</td></tr>
            <tr><td><code class="inline">&lt;nav&gt;</code></td><td>قائمة روابط التنقل الرئيسية</td></tr>
            <tr><td><code class="inline">&lt;main&gt;</code></td><td>المحتوى الرئيسي الفريد للصفحة</td></tr>
            <tr><td><code class="inline">&lt;section&gt;</code></td><td>قسم مواضيعي مستقل</td></tr>
            <tr><td><code class="inline">&lt;article&gt;</code></td><td>محتوى مستقل بذاته (مقال، منشور)</td></tr>
            <tr><td><code class="inline">&lt;aside&gt;</code></td><td>محتوى جانبي غير أساسي</td></tr>
            <tr><td><code class="inline">&lt;footer&gt;</code></td><td>تذييل الصفحة أو القسم</td></tr>
          </table>
        `,
        code: `<header>
  <h1>اسم الموقع</h1>
  <nav>
    <a href="#">الرئيسية</a>
    <a href="#">المقالات</a>
  </nav>
</header>

<main>
  <article>
    <h2>عنوان المقال</h2>
    <p>محتوى المقال هنا...</p>
  </article>
</main>

<footer>جميع الحقوق محفوظة © 2026</footer>`,
        previewHeight: 220
      }
    ]
  },
  {
    cat: "مواضيع متقدمة",
    lessons: [
      {
        id: "meta-seo",
        title: "وسوم Meta و SEO",
        sub: "معلومات وصفية تساعد المتصفح ومحركات البحث",
        body: `
          <p>توضع وسوم <code class="inline">&lt;meta&gt;</code> داخل <code class="inline">&lt;head&gt;</code> ولا تظهر للمستخدم، لكنها مهمة جدًا:</p>
          <table class="attr-table">
            <tr><th>الوسم</th><th>الوظيفة</th></tr>
            <tr><td><code class="inline">charset="UTF-8"</code></td><td>ترميز يدعم جميع اللغات ومن ضمنها العربية</td></tr>
            <tr><td><code class="inline">name="viewport"</code></td><td>ضبط عرض الصفحة على الجوال</td></tr>
            <tr><td><code class="inline">name="description"</code></td><td>وصف الصفحة الذي يظهر في نتائج البحث</td></tr>
          </table>
        `,
        code: `<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="أفضل كورس لتعلم HTML بالعربية">
  <title>كورس HTML</title>
</head>`,
        previewHeight: 60
      },
      {
        id: "entities",
        title: "الرموز الخاصة Entities",
        sub: "كتابة رموز مثل < و > و المسافات الخاصة",
        body: `
          <p>بعض الرموز محجوزة في HTML (مثل <code class="inline">&lt;</code>) ولا يمكن كتابتها مباشرة داخل النص، لذلك نستخدم "كيانات" (Entities) تبدأ بـ <code class="inline">&amp;</code> وتنتهي بـ <code class="inline">;</code>.</p>
          <table class="attr-table">
            <tr><th>الرمز</th><th>الكيان</th></tr>
            <tr><td>&lt;</td><td><code class="inline">&amp;lt;</code></td></tr>
            <tr><td>&gt;</td><td><code class="inline">&amp;gt;</code></td></tr>
            <tr><td>&amp;</td><td><code class="inline">&amp;amp;</code></td></tr>
            <tr><td>مسافة غير قابلة للكسر</td><td><code class="inline">&amp;nbsp;</code></td></tr>
            <tr><td>©</td><td><code class="inline">&amp;copy;</code></td></tr>
          </table>
        `,
        code: `<p>لكتابة وسم كنص عادي: &lt;p&gt;فقرة&lt;/p&gt;</p>
<p>الشركة &amp; شركاؤها &copy; 2026</p>`,
        previewHeight: 90
      },
      {
        id: "data-attrs",
        title: "سمات البيانات data-*",
        sub: "تخزين بيانات مخصصة داخل عنصر HTML",
        body: `
          <p>تسمح لك HTML5 بإضافة سمات مخصصة بأي اسم يبدأ بـ <code class="inline">data-</code> لتخزين معلومات إضافية يمكن قراءتها لاحقًا عبر JavaScript، دون التأثير على شكل العنصر.</p>
        `,
        code: `<button data-user-id="42" data-role="admin">
  عرض الملف الشخصي
</button>

<script>
  const btn = document.querySelector('button');
  console.log(btn.dataset.userId); // 42
<\/script>`,
        previewHeight: 60
      },
      {
        id: "accessibility",
        title: "إمكانية الوصول Accessibility",
        sub: "كتابة HTML يمكن لجميع المستخدمين استخدامه",
        body: `
          <p>إمكانية الوصول (A11y) تعني بناء صفحات يمكن لأصحاب الإعاقات (كضعاف البصر) استخدامها بسهولة عبر قارئات الشاشة. من أهم الممارسات:</p>
          <ul>
            <li>استخدام العناصر الدلالية الصحيحة بدل الاعتماد الكامل على <code class="inline">div</code>.</li>
            <li>عدم نسيان سمة <code class="inline">alt</code> لكل صورة.</li>
            <li>ربط كل <code class="inline">input</code> بوسم <code class="inline">label</code> مطابق.</li>
            <li>استخدام سمات <code class="inline">aria-*</code> عند الحاجة لتوضيح دور عنصر لقارئ الشاشة.</li>
          </ul>
        `,
        code: `<button aria-label="إغلاق النافذة">✕</button>

<img src="chart.png" alt="رسم بياني يوضح ارتفاع المبيعات بنسبة 20%">

<label for="search">بحث:</label>
<input type="search" id="search">`,
        previewHeight: 100
      },
      {
        id: "best-practices",
        title: "أفضل الممارسات",
        sub: "خلاصة نصائح لكتابة كود HTML نظيف واحترافي",
        body: `
          <ul>
            <li>استخدم دائمًا <code class="inline">&lt;!DOCTYPE html&gt;</code> في بداية الملف.</li>
            <li>حافظ على تناسق المسافات البادئة (Indentation) لسهولة القراءة.</li>
            <li>اختر الوسم الدلالي المناسب بدل الإفراط في استخدام <code class="inline">div</code>.</li>
            <li>اكتب أسماء ملفات وصور واضحة، وتجنّب المسافات في المسارات.</li>
            <li>افصل دائمًا بين الهيكل (HTML) والتنسيق (CSS) والسلوك (JavaScript).</li>
            <li>تحقّق من صحة الكود عبر أدوات مثل W3C Markup Validator.</li>
          </ul>
          <div class="note"><b>تهانينا!</b> بإكمالك هذا الكورس تكون قد أتقنت أساسيات HTML بالكامل. الخطوة التالية المنطقية هي تعلّم CSS لتنسيق ما بنيته هنا.</div>
        `,
        code: `<!-- كود نظيف: مسافات بادئة متسقة، وسوم دلالية -->
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <title>مثال احترافي</title>
</head>
<body>
  <header><h1>عنوان الموقع</h1></header>
  <main>
    <p>محتوى نظيف ومرتب.</p>
  </main>
  <footer>© 2026</footer>
</body>
</html>`,
        previewHeight: 60
      }
    ]
  }
];

/* ==========================================================
   منطق بناء الشجرة والتنقل بين الدروس
   ========================================================== */
const tree = document.getElementById('tree');
const contentInner = document.getElementById('contentInner');
const searchInput = document.getElementById('searchInput');

// قائمة مسطّحة بكل الدروس بالترتيب (للتنقل التالي/السابق)
const FLAT = [];
COURSE.forEach(cat => cat.lessons.forEach(l => FLAT.push({ ...l, cat: cat.cat })));

document.getElementById('lessonCountFoot').textContent = FLAT.length + ' درس';

function escapeHtml(str){
  return str
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;');
}

// تلوين بسيط للأكواد (Syntax Highlighting خفيف)
function highlightCode(code){
  let out = escapeHtml(code);
  // التعليقات
  out = out.replace(/(&lt;!--[\s\S]*?--&gt;)/g, '<span class="tk-com">$1</span>');
  // الوسوم + السمات
  out = out.replace(/(&lt;\/?)([a-zA-Z0-9-]+)([^&]*?)(\/?&gt;)/g, function(full, open, tag, rest, close){
    let restColored = rest.replace(/([a-zA-Z-]+)(=)("[^"]*")/g, '<span class="tk-attr">$1</span>$2<span class="tk-val">$3</span>');
    return '<span class="tk-tag">' + open + tag + '</span>' + restColored + '<span class="tk-tag">' + close + '</span>';
  });
  return out;
}

function buildTree(filter){
  tree.innerHTML = '';
  const f = (filter || '').trim().toLowerCase();

  COURSE.forEach((cat, ci) => {
    const matchedLessons = cat.lessons.filter(l =>
      !f || l.title.toLowerCase().includes(f) || l.sub.toLowerCase().includes(f)
    );
    if (f && matchedLessons.length === 0) return;

    const catEl = document.createElement('div');
    catEl.className = 'cat' + (f ? ' open' : (ci === 0 ? ' open' : ''));
    catEl.dataset.cat = ci;

    const head = document.createElement('div');
    head.className = 'cat-head';
    head.innerHTML = `<span class="caret">&#9656;</span><span>${cat.cat}</span><span class="count">${matchedLessons.length}</span>`;
    head.addEventListener('click', () => catEl.classList.toggle('open'));

    const list = document.createElement('div');
    list.className = 'cat-list';

    matchedLessons.forEach(lesson => {
      const item = document.createElement('div');
      item.className = 'lesson-item';
      item.dataset.id = lesson.id;
      item.innerHTML = `<span class="tag-ico">&lt;/&gt;</span><span>${lesson.title}</span>`;
      item.addEventListener('click', () => selectLesson(lesson.id));
      list.appendChild(item);
    });

    catEl.appendChild(head);
    catEl.appendChild(list);
    tree.appendChild(catEl);
  });
}

function selectLesson(id){
  const idx = FLAT.findIndex(l => l.id === id);
  if (idx === -1) return;
  const lesson = FLAT[idx];

  document.querySelectorAll('.lesson-item').forEach(el => {
    el.classList.toggle('active', el.dataset.id === id);
  });

  const prev = FLAT[idx - 1];
  const next = FLAT[idx + 1];

  contentInner.innerHTML = `
    <div class="crumb">
      <span>${lesson.cat}</span><span class="dot">/</span><span>${lesson.title}</span>
    </div>
    <h2 class="lesson-title"><span class="num">${String(idx + 1).padStart(2,'0')}</span>${lesson.title}</h2>
    <p class="lesson-sub">${lesson.sub}</p>
    <div class="lesson-body">${lesson.body}</div>

    <div class="code-block">
      <div class="code-head">
        <div class="dots"><span></span><span></span><span></span></div>
        <span class="label">example.html</span>
        <button class="copy-btn" id="copyBtn">نسخ الكود</button>
      </div>
      <pre class="code-pre"><code>${highlightCode(lesson.code)}</code></pre>
    </div>

    <div class="preview-wrap">
      <div class="preview-head"><span class="live-dot"></span> معاينة حية للنتيجة</div>
      <iframe class="preview-frame" id="previewFrame" style="height:${lesson.previewHeight || 140}px"></iframe>
    </div>

    <div class="nav-buttons">
      <div class="nav-btn ${!next ? 'disabled' : ''}" id="nextBtn">
        <span class="nlabel">التالي</span>
        <span class="ntitle">${next ? next.title : '—'}</span>
      </div>
      <div class="nav-btn ${!prev ? 'disabled' : ''}" id="prevBtn">
        <span class="nlabel">السابق</span>
        <span class="ntitle">${prev ? prev.title : '—'}</span>
      </div>
    </div>
  `;

  // تعبئة الـ iframe عبر srcdoc (يتجنب مشاكل تهريب الاقتباسات)
  const frame = document.getElementById('previewFrame');
  const previewDoc = `<!DOCTYPE html><html dir="rtl" lang="ar"><head><meta charset="UTF-8">
    <style>
      body{ font-family: Tajawal, Arial, sans-serif; margin:14px; color:#222; font-size:14px; line-height:1.7; }
      table{ border-collapse:collapse; } td,th{ border:1px solid #ccc; padding:5px 10px; }
      a{ color:#e34f26; }
    </style></head><body>${lesson.code}</body></html>`;
  frame.srcdoc = previewDoc;

  document.getElementById('copyBtn').addEventListener('click', (e) => {
    navigator.clipboard.writeText(lesson.code).then(() => {
      e.target.textContent = 'تم النسخ ✓';
      setTimeout(() => e.target.textContent = 'نسخ الكود', 1500);
    });
  });

  if (next) document.getElementById('nextBtn').addEventListener('click', () => selectLesson(next.id));
  if (prev) document.getElementById('prevBtn').addEventListener('click', () => selectLesson(prev.id));

  document.getElementById('content').scrollTo({ top: 0, behavior: 'smooth' });

  // فتح الفئة الخاصة بالدرس المختار إن كانت مغلقة
  const activeItem = document.querySelector(`.lesson-item[data-id="${id}"]`);
  if (activeItem) {
    const catParent = activeItem.closest('.cat');
    if (catParent) catParent.classList.add('open');
  }
}

searchInput.addEventListener('input', (e) => buildTree(e.target.value));

buildTree('');
</script>
</body>
</html>