From 2cacdfb9261e9d62248952aa51ab3599be5490d1 Mon Sep 17 00:00:00 2001
From: Ahmed <ahmedalkhair.sa@gmail.com>
Date: Sat, 3 Oct 2026 02:17:33 +0300
Subject: [PATCH] Add filterable article library

---
 arabic-ai-learning-catalog-v2.html |   2 +-
 articles.html                      | 233 +++++++++++++++++++++++++++++
 2 files changed, 234 insertions(+), 1 deletion(-)
 create mode 100644 articles.html

diff --git a/arabic-ai-learning-catalog-v2.html b/arabic-ai-learning-catalog-v2.html
index f10584b..9f7eb6d 100644
--- a/arabic-ai-learning-catalog-v2.html
+++ b/arabic-ai-learning-catalog-v2.html
@@ -212,7 +212,7 @@
     <div class="container topnav-inner">
       <a class="logo" href="#top" data-od-id="brand"><img class="logo-mark" src="assets/anwarpi-logo.jpg" alt="" width="1200" height="1352">أنور بي آي</a>
       <nav aria-label="التنقل الرئيسي">
-        <a href="#catalog">المكتبة</a>
+        <a href="articles.html" data-od-id="path-0-0-1-0">المكتبة</a>
         <a href="#topics">المسارات</a>
         <a href="#membership">العضوية</a>
       </nav>
diff --git a/articles.html b/articles.html
new file mode 100644
index 0000000..d514b42
--- /dev/null
+++ b/articles.html
@@ -0,0 +1,233 @@
+<!doctype html>
+<html lang="ar" dir="rtl">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="referrer" content="strict-origin-when-cross-origin" />
+  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; connect-src 'none'; object-src 'none'; base-uri 'self'; form-action 'self'; frame-src 'none'; worker-src 'none'" />
+  <meta name="description" content="جميع مقالات وأدلة أنور بي آي، مع تصفية حسب الفئة ونوع الوصول." />
+  <title>المكتبة — أنور بي آي</title>
+  <style>
+    :root {
+      --bg: oklch(16% 0.03 225);
+      --surface: oklch(22% 0.04 220);
+      --fg: oklch(96% 0.015 210);
+      --muted: oklch(74% 0.03 215);
+      --border: oklch(36% 0.05 215);
+      --accent: oklch(78% 0.17 190);
+      --accent-soft: color-mix(in oklch, var(--accent) 14%, transparent);
+      --fg-soft: color-mix(in oklch, var(--fg) 6%, transparent);
+      --font-display: "SF Arabic", "Noto Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      --font-body: "SF Arabic", "Noto Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
+      --container: 1180px;
+      --gutter: 32px;
+    }
+    *, *::before, *::after { box-sizing: border-box; }
+    html { -webkit-text-size-adjust: 100%; }
+    body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.7 var(--font-body); text-rendering: optimizeLegibility; }
+    a { color: inherit; text-decoration: none; }
+    button { color: inherit; font: inherit; cursor: pointer; }
+    h1, h2, h3 { margin: 0; font-family: var(--font-display); text-wrap: balance; }
+    p { text-wrap: pretty; }
+    :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
+    .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
+    .topnav { position: sticky; top: 0; z-index: 20; background: color-mix(in oklch, var(--bg) 92%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
+    .topnav-inner { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
+    .logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 23px; font-weight: 700; }
+    .logo-mark { width: 30px; height: 34px; object-fit: contain; border-radius: 4px; }
+    .topnav nav { display: flex; align-items: center; gap: 28px; }
+    .topnav nav a { min-height: 44px; display: inline-flex; align-items: center; color: var(--muted); border-bottom: 1px solid transparent; }
+    .topnav nav a:hover, .topnav nav a[aria-current="page"] { color: var(--fg); border-color: var(--accent); }
+    .nav-action { min-height: 44px; display: inline-flex; align-items: center; padding-inline: 16px; border: 1px solid var(--border); }
+    .nav-action:hover { border-color: var(--fg); background: var(--fg-soft); }
+    .hero { padding-block: clamp(64px, 9vw, 112px); border-bottom: 1px solid var(--border); }
+    .eyebrow { margin: 0 0 18px; color: var(--accent); font: 11px/1.5 var(--font-mono); letter-spacing: .06em; }
+    h1 { max-width: 10ch; font-size: clamp(48px, 7vw, 88px); line-height: 1.06; letter-spacing: -.025em; }
+    .lead { max-width: 56ch; margin: 24px 0 0; color: var(--muted); font-size: clamp(18px, 2vw, 22px); }
+    .library { padding-block: clamp(52px, 8vw, 88px); }
+    .filter-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 44px; padding-block: 22px; border-block: 1px solid var(--border); }
+    .filter-group { min-width: 0; }
+    .filter-label { display: block; margin-bottom: 10px; color: var(--muted); font: 11px/1.5 var(--font-mono); }
+    .filters { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; }
+    .filters::-webkit-scrollbar { display: none; }
+    .filter { flex: none; min-height: 44px; padding: 9px 15px; border: 1px solid var(--border); background: transparent; color: var(--muted); }
+    .filter:hover { color: var(--fg); border-color: var(--fg); }
+    .filter[aria-pressed="true"] { background: var(--fg); color: var(--surface); border-color: var(--fg); }
+    .results-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
+    h2 { font-size: clamp(30px, 4vw, 46px); line-height: 1.15; }
+    .count { color: var(--muted); font: 12px/1.5 var(--font-mono); }
+    .posts { border-top: 1px solid var(--fg); }
+    .post { display: grid; grid-template-columns: 138px minmax(0, 1fr) 130px; gap: 28px; align-items: start; padding-block: 28px; border-bottom: 1px solid var(--border); }
+    .post[hidden] { display: none; }
+    .post-meta { color: var(--muted); font: 12px/1.8 var(--font-mono); }
+    .post-meta span { display: block; }
+    .post h3 { font-size: clamp(22px, 2.5vw, 30px); line-height: 1.3; }
+    .post p { max-width: 62ch; margin: 9px 0 0; color: var(--muted); }
+    .access { justify-self: end; display: inline-flex; align-items: center; min-height: 34px; padding: 5px 11px; border: 1px solid var(--border); color: var(--muted); font: 11px/1.5 var(--font-mono); }
+    .access.free { border-color: var(--accent); color: var(--accent); }
+    .post-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 14px; font-weight: 700; border-bottom: 1px solid transparent; }
+    .post-link:hover { color: var(--accent); border-color: var(--accent); }
+    .soon { color: var(--muted); cursor: default; }
+    .empty { display: none; padding: 42px 0; color: var(--muted); }
+    .empty.show { display: block; }
+    .pagefoot { padding-block: 48px; border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; }
+    .footer-row { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
+    @media (max-width: 920px) {
+      :root { --gutter: 22px; }
+      .topnav-inner { flex-wrap: wrap; gap: 0 16px; padding-top: 10px; }
+      .logo, .nav-action { margin-bottom: 10px; }
+      .topnav nav { order: 3; flex: 0 0 calc(100% + (var(--gutter) * 2)); gap: 6px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overflow-x: auto; border-top: 1px solid var(--border); scrollbar-width: none; }
+      .topnav nav::-webkit-scrollbar { display: none; }
+      .topnav nav a { flex: none; min-height: 52px; padding-inline: 12px; white-space: nowrap; }
+      .filter-panel { grid-template-columns: 1fr; gap: 20px; }
+      .post { grid-template-columns: 112px minmax(0, 1fr); }
+      .access { justify-self: start; grid-column: 2; }
+    }
+    @media (max-width: 620px) {
+      :root { --gutter: 18px; }
+      .nav-action { padding-inline: 12px; }
+      h1 { font-size: clamp(42px, 13vw, 58px); }
+      .results-head { align-items: start; flex-direction: column; }
+      .post { grid-template-columns: 1fr; gap: 12px; }
+      .access { grid-column: 1; }
+      .post-link { width: 100%; border-top: 1px solid var(--border); padding-top: 12px; }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      * { scroll-behavior: auto !important; transition-duration: .01ms !important; }
+    }
+  </style>
+  <link rel="stylesheet" href="assets/anwarpi.css?v=5" />
+  <script src="assets/anwarpi.js?v=4" defer></script>
+</head>
+<body>
+  <header class="topnav" data-od-id="topnav">
+    <div class="container topnav-inner">
+      <a class="logo" href="arabic-ai-learning-catalog-v2.html" data-od-id="brand"><img class="logo-mark" src="assets/anwarpi-logo.jpg" alt="" width="1200" height="1352" />أنور بي آي</a>
+      <nav aria-label="التنقل الرئيسي">
+        <a href="articles.html" aria-current="page" data-od-id="nav-library">المكتبة</a>
+        <a href="arabic-ai-learning-catalog-v2.html#topics">المسارات</a>
+        <a href="subscription.html">العضوية</a>
+      </nav>
+      <a class="nav-action" href="login.html">تسجيل الدخول</a>
+    </div>
+  </header>
+
+  <main id="content">
+    <section class="hero" data-od-id="library-hero">
+      <div class="container">
+        <p class="eyebrow">مكتبة أنور بي آي</p>
+        <h1 data-od-id="library-title">كل الأدلة في مكان واحد.</h1>
+        <p class="lead">صفِّ المحتوى حسب الفئة ونوع الوصول، ثم افتح المقال المجاني أو معاينة محتوى العضوية.</p>
+      </div>
+    </section>
+
+    <section class="library" data-od-id="article-library">
+      <div class="container">
+        <div class="filter-panel" data-od-id="library-filters">
+          <div class="filter-group" role="group" aria-label="تصفية حسب الفئة">
+            <span class="filter-label">الفئة</span>
+            <div class="filters">
+              <button class="filter" type="button" data-filter-kind="topic" data-filter-value="all" aria-pressed="true">الكل</button>
+              <button class="filter" type="button" data-filter-kind="topic" data-filter-value="agents" aria-pressed="false">الوكلاء</button>
+              <button class="filter" type="button" data-filter-kind="topic" data-filter-value="models" aria-pressed="false">النماذج</button>
+              <button class="filter" type="button" data-filter-kind="topic" data-filter-value="automation" aria-pressed="false">الأتمتة</button>
+              <button class="filter" type="button" data-filter-kind="topic" data-filter-value="foundations" aria-pressed="false">الأساسيات</button>
+            </div>
+          </div>
+          <div class="filter-group" role="group" aria-label="تصفية حسب نوع الوصول">
+            <span class="filter-label">نوع الوصول</span>
+            <div class="filters">
+              <button class="filter" type="button" data-filter-kind="access" data-filter-value="all" aria-pressed="true">الكل</button>
+              <button class="filter" type="button" data-filter-kind="access" data-filter-value="free" aria-pressed="false">مجاني</button>
+              <button class="filter" type="button" data-filter-kind="access" data-filter-value="vip" aria-pressed="false">VIP</button>
+            </div>
+          </div>
+        </div>
+
+        <div class="results-head">
+          <h2 data-od-id="posts-heading">جميع المواد</h2>
+          <span class="count" id="resultCount" aria-live="polite">٦ مواد</span>
+        </div>
+
+        <div class="posts" id="postList">
+          <article class="post" data-topic="agents" data-access="vip" data-od-id="post-agent-loop">
+            <div class="post-meta"><span>الوكلاء</span><span>١٨ دقيقة</span></div>
+            <div><h3>البنية التي تمنع وكيلك من الدوران في حلقة</h3><p>حدود واضحة بين التخطيط والتنفيذ والتحقق، مع نموذج بسيط لسجل الحالة.</p><a class="post-link" href="post-locked.html">شاهد المعاينة ←</a></div>
+            <span class="access">VIP · معاينة</span>
+          </article>
+
+          <article class="post" data-topic="models" data-access="free" data-od-id="post-model-selection">
+            <div class="post-meta"><span>النماذج</span><span>١٢ دقيقة</span></div>
+            <div><h3>لا تبدأ باسم النموذج؛ ابدأ بطبيعة المهمة</h3><p>مصفوفة قرار عملية توازن بين الدقة، السياق، السرعة، والكلفة.</p><a class="post-link" href="article-agent-guide.html">ابدأ القراءة ←</a></div>
+            <span class="access free">مجاني · كامل</span>
+          </article>
+
+          <article class="post" data-topic="automation" data-access="vip" data-od-id="post-automation-observability">
+            <div class="post-meta"><span>الأتمتة</span><span>٢٤ دقيقة</span></div>
+            <div><h3>كيف تكتشف فشل سير العمل قبل المستخدم؟</h3><p>إشارات قليلة تكفي لمراقبة التكلفة، التأخير، ونقاط الانقطاع.</p><span class="post-link soon" aria-label="هذه المادة ستتوفر قريباً">قريباً</span></div>
+            <span class="access">VIP</span>
+          </article>
+
+          <article class="post" data-topic="foundations" data-access="free" data-od-id="post-prompt-context">
+            <div class="post-meta"><span>الأساسيات</span><span>٩ دقائق</span></div>
+            <div><h3>لماذا لا يصلح تحسين الصياغة بياناتك الرديئة؟</h3><p>افصل بين التعليمات، المعرفة، وذاكرة المحادثة لتحصل على نتيجة مستقرة.</p><span class="post-link soon" aria-label="هذه المادة ستتوفر قريباً">قريباً</span></div>
+            <span class="access free">مجاني</span>
+          </article>
+
+          <article class="post" data-topic="agents" data-access="vip" data-od-id="post-tool-safety">
+            <div class="post-meta"><span>الوكلاء</span><span>١٥ دقيقة</span></div>
+            <div><h3>قبل أن تمنح الوكيل صلاحية التنفيذ</h3><p>حدود الصلاحيات، التأكيد البشري، وسجل تدقيق يمكنك الرجوع إليه.</p><span class="post-link soon" aria-label="هذه المادة ستتوفر قريباً">قريباً</span></div>
+            <span class="access">VIP</span>
+          </article>
+
+          <article class="post" data-topic="models" data-access="vip" data-od-id="post-rag-evaluation">
+            <div class="post-meta"><span>النماذج</span><span>٤ أجزاء</span></div>
+            <div><h3>اختبر الاسترجاع والإجابة كلّاً على حدة</h3><p>منهج تقييم يفصل فشل المصدر عن فشل النموذج ويقودك إلى إصلاح صحيح.</p><span class="post-link soon" aria-label="هذه المادة ستتوفر قريباً">قريباً</span></div>
+            <span class="access">VIP</span>
+          </article>
+        </div>
+        <p class="empty" id="emptyState">لا توجد مواد تطابق هذين الفلترين.</p>
+      </div>
+    </section>
+  </main>
+
+  <footer class="pagefoot" data-od-id="footer">
+    <div class="container footer-row"><span>© أنور بي آي ٢٠٢٦ · تعلّم بوضوح</span><a href="privacy.html">الخصوصية</a></div>
+  </footer>
+
+  <script>
+    (() => {
+      const state = { topic: 'all', access: 'all' };
+      const buttons = [...document.querySelectorAll('[data-filter-kind]')];
+      const posts = [...document.querySelectorAll('.post')];
+      const count = document.getElementById('resultCount');
+      const empty = document.getElementById('emptyState');
+      const arabicCounts = ['٠', '١', '٢', '٣', '٤', '٥', '٦'];
+
+      function applyFilters() {
+        let visible = 0;
+        posts.forEach(post => {
+          const topicMatch = state.topic === 'all' || post.dataset.topic === state.topic;
+          const accessMatch = state.access === 'all' || post.dataset.access === state.access;
+          post.hidden = !(topicMatch && accessMatch);
+          if (!post.hidden) visible += 1;
+        });
+        count.textContent = `${arabicCounts[visible]} ${visible === 1 ? 'مادة' : 'مواد'}`;
+        empty.classList.toggle('show', visible === 0);
+      }
+
+      buttons.forEach(button => button.addEventListener('click', () => {
+        const kind = button.dataset.filterKind;
+        state[kind] = button.dataset.filterValue;
+        buttons.filter(item => item.dataset.filterKind === kind).forEach(item => {
+          item.setAttribute('aria-pressed', String(item === button));
+        });
+        applyFilters();
+      }));
+
+      applyFilters();
+    })();
+  </script>
+</body>
+</html>