Files
anwar-pi-website/arabic-ai-learning-catalog-v2.html
T
ahmed 8fe818e647
Deploy GitHub Pages / deploy (push) Canceled after 0s
Initial site release
2026-10-02 12:46:11 +03:00

466 lines
32 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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(12% 0 0);
--surface: oklch(16% 0 0);
--fg: oklch(94% 0 0);
--muted: oklch(65% 0 0);
--border: oklch(26% 0 0);
--accent: oklch(96% 0 0);
--accent-soft: color-mix(in oklch, var(--accent) 12%, 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;
--fs-h1: clamp(46px, 6.3vw, 82px);
--fs-h2: clamp(32px, 4vw, 52px);
--fs-h3: 22px;
--fs-lead: 19px;
--fs-body: 16px;
--fs-meta: 12px;
--gap-xs: 8px;
--gap-sm: 12px;
--gap-md: 20px;
--gap-lg: 32px;
--gap-xl: 56px;
--gap-2xl: 96px;
--container: 1180px;
--gutter: 32px;
--radius: 2px;
--radius-lg: 2px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--bg);
color: var(--fg);
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.65;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
body.modal-open { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
:focus-visible { outline: 3px solid color-mix(in oklch, var(--accent) 55%, transparent); outline-offset: 3px; }
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(64px, 9vw, var(--gap-2xl)); }
.section + .section { border-top: 1px solid var(--border); }
.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--gap-md); }
.row { display: flex; align-items: center; gap: var(--gap-md); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-lg); }
.grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--gap-xl); align-items: start; }
.h1, h1 { font-family: var(--font-display); font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -0.025em; margin: 0; }
.h2, h2 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -0.018em; margin: 0; }
.h3, h3 { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.35; margin: 0; }
.lead { font-size: var(--fs-lead); line-height: 1.7; color: var(--muted); max-width: 54ch; margin: 0; }
.eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--accent); margin: 0 0 var(--gap-md); }
.meta { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--muted); }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.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: var(--gap-lg); }
.logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 23px; font-weight: 700; }
.logo-mark { width: 12px; height: 12px; background: var(--fg); transform: rotate(45deg); }
.logo:hover { opacity: .72; }
.topnav nav { display: flex; align-items: center; gap: var(--gap-lg); }
.topnav nav a { min-height: 44px; display: inline-flex; align-items: center; color: var(--muted); font-size: 14px; border-bottom: 1px solid transparent; }
.topnav nav a:hover { color: var(--fg); border-color: var(--fg); }
.nav-action { min-height: 44px; display: inline-flex; align-items: center; padding-inline: 16px; border: 1px solid var(--border); background: transparent; color: var(--fg); }
.nav-action:hover { border-color: var(--fg); background: var(--fg-soft); }
.btn { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 11px 20px; border-radius: var(--radius); border: 1px solid transparent; font-weight: 700; transition: transform .12s ease, background .16s ease, border-color .16s ease; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--surface); border-color: var(--accent); }
.btn-primary:hover { background: color-mix(in oklch, var(--accent) 86%, black); color: var(--surface); }
.btn-secondary { background: transparent; color: var(--fg); border-color: var(--border); }
.btn-secondary:hover { background: var(--fg); color: var(--surface); border-color: var(--fg); }
.btn-ghost { background: transparent; color: var(--fg); border-color: transparent; padding-inline: 8px; }
.btn-ghost:hover { border-color: var(--fg); }
.hero { padding-block: clamp(56px, 8vw, 112px); overflow: hidden; }
.hero-split { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(42px, 7vw, 96px); align-items: center; }
.hero-copy h1 { max-width: 9ch; }
.hero-copy .lead { margin-top: 24px; }
.hero-cta { display: flex; gap: var(--gap-sm); flex-wrap: wrap; margin-top: 32px; }
.trust-line { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; }
.deck { position: relative; min-height: 510px; }
.deck-frame { position: relative; min-height: 470px; border: 1px solid var(--fg); background: var(--surface); overflow: hidden; }
.deck-slide { position: absolute; inset: 0; padding: clamp(28px, 4vw, 52px); display: none; grid-template-rows: auto 1fr auto; }
.deck-slide.active { display: grid; }
.deck-slide::after { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; width: 100%; height: 4px; background: var(--fg); }
.deck-slide-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.deck-slide-kicker { font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: .05em; }
.deck-slide-index { font-family: var(--font-display); font-size: 30px; }
.deck-slide-body { align-self: center; }
.deck-slide-body h2 { font-size: clamp(38px, 5vw, 66px); max-width: 9ch; }
.deck-slide-body p { color: var(--muted); max-width: 38ch; margin: 18px 0 0; }
.deck-slide-foot { display: flex; align-items: end; justify-content: space-between; gap: 20px; border-top: 1px solid var(--border); padding-top: 18px; }
.deck-slide-format { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.play { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--fg); border-radius: 50%; }
.deck-controls { min-height: 44px; display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.deck-dots { display: flex; gap: 8px; }
.deck-dot { width: 34px; height: 4px; border: 0; padding: 0; background: var(--border); }
.deck-dot.active { background: var(--fg); }
.deck-arrows { display: flex; gap: 8px; direction: ltr; }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--border); background: transparent; color: var(--fg); }
.icon-btn:hover { border-color: var(--fg); background: var(--fg-soft); }
.topic-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--border); }
.topic { min-height: 132px; padding: 24px; border-inline-start: 1px solid var(--border); display: flex; flex-direction: column; justify-content: space-between; }
.topic:first-child { border-inline-start: 0; }
.topic strong { font-family: var(--font-display); font-size: 22px; }
.topic span { color: var(--muted); font-size: 13px; }
.topic:hover { background: var(--fg-soft); }
.section-head { margin-bottom: 42px; align-items: end; }
.section-head > div { max-width: 54ch; }
.filterbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; }
.filter { min-height: 44px; padding: 9px 16px; border: 1px solid var(--border); background: transparent; color: var(--muted); }
.filter:hover { color: var(--fg); border-color: var(--fg); }
.filter.active { background: var(--fg); color: var(--surface); border-color: var(--fg); }
.catalog { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 28px; border-top: 1px solid var(--fg); }
.catalog-card { padding-block: 28px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; min-height: 330px; }
.catalog-card[hidden] { display: none; }
.cover { min-height: 142px; padding: 20px; margin-bottom: 22px; background: var(--fg); color: var(--surface); display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.cover::before { content: ""; position: absolute; width: 120px; height: 120px; border: 1px solid color-mix(in oklch, var(--surface) 28%, transparent); border-radius: 50%; inset-inline-end: -28px; top: -35px; }
.cover-light { background: var(--border); color: var(--fg); }
.cover-lined { background: repeating-linear-gradient(0deg, var(--surface), var(--surface) 23px, var(--border) 24px); color: var(--fg); border: 1px solid var(--border); }
.cover-label { position: relative; font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; }
.cover-title { position: relative; font-family: var(--font-display); font-size: 27px; line-height: 1.2; max-width: 11ch; }
.card-meta { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: var(--muted); font-size: 12px; margin-bottom: 12px; }
.catalog-card h3 { font-size: 24px; }
.catalog-card p { color: var(--muted); margin: 9px 0 20px; font-size: 14px; }
.card-link { margin-top: auto; min-height: 44px; display: inline-flex; align-items: center; justify-content: space-between; border: 0; border-top: 1px solid var(--border); background: transparent; color: var(--fg); padding: 14px 0 0; font-weight: 700; text-align: start; }
.card-link:hover { border-color: var(--fg); }
.card-link span:last-child { direction: ltr; }
.empty { display: none; padding: 40px 0; color: var(--muted); }
.empty.show { display: block; }
.membership { background: var(--fg); color: var(--surface); }
.membership .eyebrow { color: var(--surface); opacity: .7; }
.membership .lead { color: color-mix(in oklch, var(--surface) 70%, transparent); }
.membership-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: var(--gap-xl); align-items: end; }
.membership-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid color-mix(in oklch, var(--surface) 25%, transparent); }
.membership-list li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid color-mix(in oklch, var(--surface) 15%, transparent); }
.membership .btn-primary { background: var(--surface); color: var(--fg); border-color: var(--surface); margin-top: 24px; width: 100%; }
.membership .btn-primary:hover { background: var(--border); color: var(--fg); }
.pagefoot { padding-block: var(--gap-xl); color: var(--muted); font-size: 13px; border-top: 1px solid var(--border); }
.pagefoot .row-between { flex-wrap: wrap; }
.modal { position: fixed; inset: 0; z-index: 50; display: none; place-items: center; padding: 24px; background: color-mix(in oklch, var(--fg) 62%, transparent); }
.modal.open { display: grid; }
.modal-panel { width: min(620px, 100%); max-height: min(680px, 90vh); overflow: auto; background: var(--surface); color: var(--fg); border: 1px solid var(--fg); padding: clamp(26px, 5vw, 52px); }
.modal-close { float: left; margin: -14px -14px 20px 0; }
.modal-panel h2 { clear: both; font-size: clamp(32px, 5vw, 50px); }
.modal-panel p { color: var(--muted); }
.modal-outline { margin: 28px 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.modal-outline li { padding: 13px 0; border-bottom: 1px solid var(--border); }
@media (max-width: 920px) {
:root { --gutter: 22px; }
.hero-split, .grid-3, .grid-2-1, .membership-grid { grid-template-columns: 1fr; }
.topnav nav { display: none; }
.hero-copy h1 { max-width: 11ch; }
.deck { min-height: 440px; }
.deck-frame { min-height: 400px; }
.topic-grid { grid-template-columns: repeat(2, 1fr); }
.topic:nth-child(3) { border-inline-start: 0; border-top: 1px solid var(--border); }
.topic:nth-child(4) { border-top: 1px solid var(--border); }
.catalog { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
:root { --gutter: 18px; }
.nav-action { padding-inline: 12px; }
.hero { padding-top: 42px; }
.deck-slide { padding: 26px; }
.deck-slide-body h2 { font-size: 38px; }
.deck-slide-foot { align-items: start; flex-direction: column; }
.topic-grid, .catalog { grid-template-columns: 1fr; }
.topic { min-height: 104px; border-inline-start: 0; border-top: 1px solid var(--border); }
.topic:first-child { border-top: 0; }
.section-head { align-items: start; flex-direction: column; }
.catalog-card { min-height: auto; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { 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="#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="#topics">المسارات</a>
<a href="#membership">العضوية</a>
</nav>
<button class="nav-action" data-open-membership>تسجيل الدخول</button>
</div>
</header>
<main id="content">
<section class="section hero" id="top" data-od-id="hero">
<div class="container hero-split">
<div class="hero-copy">
<p class="eyebrow">مكتبة عربية عملية · <bdi dir="ltr">AI + AGENTS</bdi></p>
<h1 data-od-id="hero-title">افهم الذكاء الاصطناعي. ثم ابنِ به.</h1>
<p class="lead">أدلة واضحة، دروس فيديو، ومسارات متدرجة تساعدك على الانتقال من الفكرة إلى وكيل يعمل.</p>
<div class="hero-cta">
<a class="btn btn-primary" href="#catalog" data-od-id="hero-primary-cta">استكشف المكتبة</a>
<a class="btn btn-ghost" href="#membership">شاهد محتوى العضوية ←</a>
</div>
<p class="trust-line">بالعربية أولاً · أمثلة قابلة للتطبيق · تحديثات مرتبطة بما يتغير فعلاً</p>
</div>
<div class="deck" data-od-id="featured-deck" aria-label="مختارات مميزة">
<div class="deck-frame" aria-live="polite">
<article class="deck-slide active" data-slide="0">
<div class="deck-slide-top"><span class="deck-slide-kicker">دليل حصري · المستوى المتوسط</span><span class="deck-slide-index num">01</span></div>
<div class="deck-slide-body"><h2>ابنِ وكيلك الأول دون فوضى</h2><p>خريطة عملية لتقسيم المهام، اختيار الأدوات، وضبط ذاكرة الوكيل قبل كتابة الكود.</p></div>
<div class="deck-slide-foot"><span class="deck-slide-format"><span class="play" aria-hidden="true">▶</span>فيديو · 28 دقيقة</span><span class="meta"><bdi dir="ltr">AGENTIC AI</bdi></span></div>
</article>
<article class="deck-slide" data-slide="1">
<div class="deck-slide-top"><span class="deck-slide-kicker">مقال تطبيقي · للمبتدئين</span><span class="deck-slide-index num">02</span></div>
<div class="deck-slide-body"><h2>كيف تختار نموذجاً لمهمتك؟</h2><p>مقارنة منهجية حسب الجودة، التكلفة، السرعة، والخصوصية — من دون ضجيج تسويقي.</p></div>
<div class="deck-slide-foot"><span class="deck-slide-format">قراءة · 12 دقيقة</span><span class="meta">النماذج</span></div>
</article>
<article class="deck-slide" data-slide="2">
<div class="deck-slide-top"><span class="deck-slide-kicker">مسار متقدم · للأعضاء</span><span class="deck-slide-index num">03</span></div>
<div class="deck-slide-body"><h2>من <bdi dir="ltr">RAG</bdi> إلى إجابة موثوقة</h2><p>صمّم الاسترجاع، اختبر المصادر، وافهم أين تنهار الإجابة قبل أن تصل إلى المستخدم.</p></div>
<div class="deck-slide-foot"><span class="deck-slide-format"><span class="play" aria-hidden="true">▶</span>سلسلة · 4 أجزاء</span><span class="meta"><bdi dir="ltr">RAG</bdi></span></div>
</article>
</div>
<div class="deck-controls">
<div class="deck-dots" aria-label="اختيار الشريحة">
<button class="deck-dot active" data-dot="0" aria-label="الشريحة الأولى"></button>
<button class="deck-dot" data-dot="1" aria-label="الشريحة الثانية"></button>
<button class="deck-dot" data-dot="2" aria-label="الشريحة الثالثة"></button>
</div>
<div class="deck-arrows">
<button class="icon-btn" id="prevSlide" aria-label="الشريحة السابقة">←</button>
<button class="icon-btn" id="nextSlide" aria-label="الشريحة التالية">→</button>
</div>
</div>
</div>
</div>
</section>
<section class="section" id="topics" data-od-id="learning-paths">
<div class="container">
<div class="row-between section-head">
<div><p class="eyebrow">ابدأ من اهتمامك</p><h2 data-od-id="topics-title">أربعة مسارات. هدف واحد: فهم قابل للاستخدام.</h2></div>
<p class="lead">تصفح المحتوى حسب ما تريد بناءه، لا حسب المصطلحات التي تحفظها.</p>
</div>
<div class="topic-grid">
<a class="topic" href="#catalog" data-topic-link="agents" data-od-id="topic-agents"><strong>الوكلاء</strong><span>تخطيط · أدوات · ذاكرة</span></a>
<a class="topic" href="#catalog" data-topic-link="models" data-od-id="topic-models"><strong>النماذج</strong><span>اختيار · تقييم · تشغيل</span></a>
<a class="topic" href="#catalog" data-topic-link="automation" data-od-id="topic-automation"><strong>الأتمتة</strong><span>سير عمل · ربط · مراقبة</span></a>
<a class="topic" href="#catalog" data-topic-link="foundations" data-od-id="topic-foundations"><strong>الأساسيات</strong><span>مفاهيم · تطبيق · أمان</span></a>
</div>
</div>
</section>
<section class="section" id="catalog" data-od-id="catalog">
<div class="container">
<div class="row-between section-head">
<div><p class="eyebrow">مختارات المحررين</p><h2 data-od-id="catalog-title">دليل تقرؤه اليوم، وتستخدمه غداً.</h2></div>
<span class="meta">محتوى عربي · نص وفيديو</span>
</div>
<div class="filterbar" role="group" aria-label="تصفية المحتوى" data-od-id="catalog-filters">
<button class="filter active" data-filter="all" aria-pressed="true">الكل</button>
<button class="filter" data-filter="agents" aria-pressed="false">الوكلاء</button>
<button class="filter" data-filter="models" aria-pressed="false">النماذج</button>
<button class="filter" data-filter="automation" aria-pressed="false">الأتمتة</button>
<button class="filter" data-filter="foundations" aria-pressed="false">الأساسيات</button>
</div>
<div class="catalog" id="catalogGrid">
<article class="catalog-card" data-topic="agents" data-od-id="guide-agent-architecture">
<div class="cover"><span class="cover-label">دليل عملي · حصري</span><span class="cover-title">تشريح وكيل ناجح</span></div>
<div class="card-meta"><span>الوكلاء</span><span class="num">18 دقيقة</span></div>
<h3>البنية التي تمنع وكيلك من الدوران في حلقة</h3>
<p>حدود واضحة بين التخطيط، التنفيذ، والتحقق مع نموذج بسيط لسجلّ الحالة.</p>
<a class="card-link" href="post-locked.html"><span>شاهد المعاينة</span><span>←</span></a>
</article>
<article class="catalog-card" data-topic="models" data-od-id="guide-model-selection">
<div class="cover cover-light"><span class="cover-label">مقال · مجاني</span><span class="cover-title">خريطة اختيار النموذج</span></div>
<div class="card-meta"><span>النماذج</span><span class="num">12 دقيقة</span></div>
<h3>لا تبدأ باسم النموذج؛ ابدأ بطبيعة المهمة</h3>
<p>مصفوفة قرار عملية توازن بين الدقة، السياق، السرعة، والكلفة.</p>
<a class="card-link" href="article-agent-guide.html"><span>ابدأ القراءة</span><span>←</span></a>
</article>
<article class="catalog-card" data-topic="automation" data-od-id="guide-automation-observability">
<div class="cover cover-lined"><span class="cover-label">فيديو · حصري</span><span class="cover-title">راقب قبل أن تؤتمت</span></div>
<div class="card-meta"><span>الأتمتة</span><span class="num">24 دقيقة</span></div>
<h3>كيف تكتشف فشل سير العمل قبل المستخدم؟</h3>
<p>إشارات قليلة تكفي لمراقبة التكلفة، التأخير، ونقاط الانقطاع.</p>
<button class="card-link" data-preview="كيف تكتشف فشل سير العمل قبل المستخدم؟" data-kind="فيديو حصري"><span>شاهد المقدمة</span><span>←</span></button>
</article>
<article class="catalog-card" data-topic="foundations" data-od-id="guide-prompt-context">
<div class="cover cover-lined"><span class="cover-label">شرح · مجاني</span><span class="cover-title">السياق قبل البرومبت</span></div>
<div class="card-meta"><span>الأساسيات</span><span class="num">9 دقائق</span></div>
<h3>لماذا لا يصلح تحسين الصياغة بياناتك الرديئة؟</h3>
<p>افصل بين التعليمات، المعرفة، وذاكرة المحادثة لتحصل على نتيجة مستقرة.</p>
<button class="card-link" data-preview="لماذا لا يصلح تحسين الصياغة بياناتك الرديئة؟" data-kind="شرح مجاني"><span>ابدأ القراءة</span><span>←</span></button>
</article>
<article class="catalog-card" data-topic="agents" data-od-id="guide-tool-safety">
<div class="cover cover-light"><span class="cover-label">قائمة فحص · حصري</span><span class="cover-title">أدوات بلا مفاجآت</span></div>
<div class="card-meta"><span>الوكلاء</span><span class="num">15 دقيقة</span></div>
<h3>قبل أن تمنح الوكيل صلاحية التنفيذ</h3>
<p>حدود الصلاحيات، التأكيد البشري، وسجل تدقيق يمكنك الرجوع إليه.</p>
<button class="card-link" data-preview="قبل أن تمنح الوكيل صلاحية التنفيذ" data-kind="قائمة فحص حصرية"><span>عرض التفاصيل</span><span>←</span></button>
</article>
<article class="catalog-card" data-topic="models" data-od-id="guide-rag-evaluation">
<div class="cover"><span class="cover-label">سلسلة فيديو · حصري</span><span class="cover-title">قياس RAG بصدق</span></div>
<div class="card-meta"><span>النماذج</span><span class="num">4 أجزاء</span></div>
<h3>اختبر الاسترجاع والإجابة كلّاً على حدة</h3>
<p>منهج تقييم يفصل فشل المصدر عن فشل النموذج ويقودك إلى إصلاح صحيح.</p>
<button class="card-link" data-preview="اختبر الاسترجاع والإجابة كلّاً على حدة" data-kind="سلسلة حصرية"><span>شاهد المقدمة</span><span>←</span></button>
</article>
</div>
<p class="empty" id="emptyState">لا توجد مواد في هذا المسار حالياً.</p>
</div>
</section>
<section class="section membership" id="membership" data-od-id="membership">
<div class="container membership-grid">
<div>
<p class="eyebrow">عضوية أنور بي آي</p>
<h2 data-od-id="membership-title">المحتوى الذي يحترم وقتك يبقى معك.</h2>
<p class="lead" style="margin-top:20px;">وصول إلى الأدلة المتقدمة، مسارات الفيديو، والملفات العملية عند إضافتها.</p>
</div>
<div>
<ul class="membership-list" aria-label="مزايا العضوية">
<li><span>الأدلة الحصرية</span><span>كاملة</span></li>
<li><span>مسارات الفيديو</span><span>متدرجة</span></li>
<li><span>ملفات العمل</span><span>قابلة للتنزيل</span></li>
</ul>
<button class="btn btn-primary" data-open-membership data-od-id="membership-cta">انضم إلى قائمة الانتظار</button>
</div>
</div>
</section>
</main>
<footer class="pagefoot" data-od-id="footer">
<div class="container row-between"><span>© أنور بي آي 2026 · تعلّم بوضوح</span><span class="meta">العربية أولاً · خصوصيتك محفوظة</span></div>
</footer>
<div class="modal" id="previewModal" role="dialog" aria-modal="true" aria-labelledby="modalTitle" aria-hidden="true" data-od-id="preview-dialog">
<div class="modal-panel">
<button class="icon-btn modal-close" id="closeModal" aria-label="إغلاق">×</button>
<p class="eyebrow" id="modalKind">معاينة المحتوى</p>
<h2 id="modalTitle">عنوان المحتوى</h2>
<p>معاينة موجزة لبنية المادة قبل البدء. سيظهر المحتوى الكامل أو صفحة الدفع عند ربط نظام النشر.</p>
<ul class="modal-outline"><li>الفكرة الأساسية والنتيجة المتوقعة</li><li>خطوات عملية مرتبة</li><li>أخطاء شائعة وكيف تتجنبها</li></ul>
<button class="btn btn-primary" id="modalAction">أكمل إلى المحتوى</button>
</div>
</div>
<script>
(() => {
const slides = [...document.querySelectorAll('.deck-slide')];
const dots = [...document.querySelectorAll('.deck-dot')];
let activeSlide = Number(localStorage.getItem('midad-slide') || 0) % slides.length;
let timer;
function showSlide(index) {
activeSlide = (index + slides.length) % slides.length;
slides.forEach((slide, i) => slide.classList.toggle('active', i === activeSlide));
dots.forEach((dot, i) => {
dot.classList.toggle('active', i === activeSlide);
dot.setAttribute('aria-current', i === activeSlide ? 'true' : 'false');
});
localStorage.setItem('midad-slide', String(activeSlide));
}
function restartDeck() {
clearInterval(timer);
if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) timer = setInterval(() => showSlide(activeSlide + 1), 6500);
}
document.getElementById('prevSlide').addEventListener('click', () => { showSlide(activeSlide - 1); restartDeck(); });
document.getElementById('nextSlide').addEventListener('click', () => { showSlide(activeSlide + 1); restartDeck(); });
dots.forEach(dot => dot.addEventListener('click', () => { showSlide(Number(dot.dataset.dot)); restartDeck(); }));
showSlide(activeSlide);
restartDeck();
const filters = [...document.querySelectorAll('.filter')];
const cards = [...document.querySelectorAll('.catalog-card')];
const empty = document.getElementById('emptyState');
function filterCatalog(topic) {
let visible = 0;
filters.forEach(button => {
const selected = button.dataset.filter === topic;
button.classList.toggle('active', selected);
button.setAttribute('aria-pressed', String(selected));
});
cards.forEach(card => {
const show = topic === 'all' || card.dataset.topic === topic;
card.hidden = !show;
if (show) visible += 1;
});
empty.classList.toggle('show', visible === 0);
}
filters.forEach(button => button.addEventListener('click', () => filterCatalog(button.dataset.filter)));
document.querySelectorAll('[data-topic-link]').forEach(link => link.addEventListener('click', () => filterCatalog(link.dataset.topicLink)));
const modal = document.getElementById('previewModal');
const modalTitle = document.getElementById('modalTitle');
const modalKind = document.getElementById('modalKind');
const closeModal = document.getElementById('closeModal');
let returnFocus;
function openDialog(trigger, title, kind) {
returnFocus = trigger;
modalTitle.textContent = title;
modalKind.textContent = kind;
modal.classList.add('open');
modal.setAttribute('aria-hidden', 'false');
document.body.classList.add('modal-open');
closeModal.focus();
}
function closeDialog() {
modal.classList.remove('open');
modal.setAttribute('aria-hidden', 'true');
document.body.classList.remove('modal-open');
if (returnFocus) returnFocus.focus();
}
document.querySelectorAll('[data-preview]').forEach(button => button.addEventListener('click', () => openDialog(button, button.dataset.preview, button.dataset.kind)));
document.querySelectorAll('[data-open-membership]').forEach(button => button.addEventListener('click', () => openDialog(button, 'انضم إلى قائمة انتظار أنور بي آي', 'العضوية المبكرة')));
closeModal.addEventListener('click', closeDialog);
modal.addEventListener('click', event => { if (event.target === modal) closeDialog(); });
document.addEventListener('keydown', event => { if (event.key === 'Escape' && modal.classList.contains('open')) closeDialog(); });
document.getElementById('modalAction').addEventListener('click', closeDialog);
})();
</script>
<script type="application/json" id="speaker-notes">
[]
</script>
</body>
</html>