233 lines
16 KiB
HTML
233 lines
16 KiB
HTML
<!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> |