Files
ahmed 8fe818e647
Deploy GitHub Pages / deploy (push) Canceled after 0s
Initial site release
2026-10-02 12:46:11 +03:00

145 lines
23 KiB
HTML
Raw Permalink 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; --container: 1180px; --gutter: 32px;
}
*,*::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:16px/1.75 var(--font-body);text-rendering:optimizeLegibility} body.locked{overflow:hidden}
a{color:inherit;text-decoration:none} button,input,textarea{font:inherit} button{cursor:pointer} h1,h2,h3{font-family:var(--font-display);text-wrap:balance} p{text-wrap:pretty} :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)}
.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)} .nav-inner{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.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)} .nav-links{display:flex;align-items:center;gap:28px}.nav-links a{min-height:44px;display:inline-flex;align-items:center;color:var(--muted)}.nav-links a:hover{color:var(--fg)}
.nav-tools{display:flex;align-items:center;gap:8px}
.nav-account{min-height:44px;display:inline-flex;align-items:center;gap:10px;padding-inline:16px;border:1px solid var(--fg);background:var(--fg);color:var(--surface);font-weight:700}.nav-account:hover{background:var(--accent);border-color:var(--accent)}
.nav-account .avatar{width:22px;height:22px;background:var(--surface);color:var(--fg);display:grid;place-items:center;font:12px/1 var(--font-mono);font-weight:700}
.icon-btn{min-height:44px;width:46px;border:1px solid var(--border);background:transparent;color:var(--fg);display:inline-grid;place-items:center}.icon-btn:hover{border-color:var(--fg);background:var(--fg-soft)}
.demo-strip{background:var(--fg);color:var(--surface);font:11px/1.6 var(--font-mono);letter-spacing:.04em;padding:8px 0;text-align:center}
.demo-strip b{color:var(--surface);font-weight:700}
.article-head{padding-block:clamp(58px,9vw,100px);border-bottom:1px solid var(--border)}
.crumb{font:12px/1.5 var(--font-mono);color:var(--accent);margin:0 0 20px}
.open-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--accent);color:var(--accent);padding:6px 14px;font:12px/1.5 var(--font-mono);margin-bottom:22px}
.article-head h1{font-size:clamp(46px,7vw,88px);line-height:1.06;letter-spacing:-.025em;max-width:12ch;margin:0}
.dek{font-size:clamp(19px,2vw,24px);line-height:1.7;color:var(--muted);max-width:58ch;margin:28px 0 0}
.article-meta{display:flex;align-items:center;flex-wrap:wrap;gap:14px 24px;margin-top:34px;padding-top:20px;border-top:1px solid var(--border);font:12px/1.5 var(--font-mono);color:var(--muted)}
.save-btn{min-height:40px;padding:6px 14px;border:1px solid var(--border);background:transparent;color:var(--fg);font:12px/1.5 var(--font-mono)}.save-btn:hover{border-color:var(--fg);background:var(--fg-soft)}.save-btn[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}
.article-layout{display:grid;grid-template-columns:minmax(0,740px) 240px;gap:clamp(48px,8vw,100px);align-items:start;padding-block:80px}
.article-body{font-size:19px;line-height:2}
.article-body h2{font-size:clamp(32px,4vw,48px);line-height:1.2;margin:64px 0 20px}
.article-body h3{font-size:27px;margin:42px 0 14px}
.article-body p{margin:0 0 26px}
.article-body ul{padding-inline-start:24px}.article-body li{margin-block:10px}
.lede{font-family:var(--font-display);font-size:28px;line-height:1.6}
.code{direction:ltr;text-align:left;background:var(--fg);color:var(--surface);padding:26px;overflow:auto;font:14px/1.8 var(--font-mono);margin:34px 0}
.note{border-block:1px solid var(--fg);padding:28px 0;margin:42px 0}
.note strong{display:block;font-family:var(--font-display);font-size:22px;margin-bottom:8px}
.steps{counter-reset:step;list-style:none;padding:0}.steps li{counter-increment:step;display:grid;grid-template-columns:56px 1fr;gap:18px;padding:22px 0;border-bottom:1px solid var(--border)}.steps li::before{content:"٠" counter(step,arabic-indic);font-family:var(--font-display);font-size:34px;color:var(--accent);line-height:1}
.steps strong{display:block;font-size:20px;margin-bottom:6px}.steps p{margin:0;color:var(--muted)}
.toc{position:sticky;top:100px;border-top:1px solid var(--fg);padding-top:18px}
.toc strong{font-family:var(--font-display);font-size:20px}
.toc a{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--border);color:var(--muted)}.toc a:hover{color:var(--fg)}
.progress-card{margin-top:28px;padding:22px;background:var(--fg);color:var(--surface)}
.progress-card strong{font-size:18px;display:block;margin-bottom:12px}
.progress-track{height:6px;background:color-mix(in oklch,var(--surface) 25%,transparent);margin-bottom:8px}
.progress-bar{height:100%;background:var(--accent);width:40%}
.progress-card .p-label{font:11px/1.6 var(--font-mono);color:color-mix(in oklch,var(--surface) 72%,transparent)}
.files-card{margin-top:18px;border:1px solid var(--fg);padding:22px}
.files-card strong{font-family:var(--font-display);font-size:20px;display:block;margin-bottom:12px}
.file-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.file-row:last-of-type{border-bottom:0}
.file-row span{font-size:14px}
.dl-btn{min-height:38px;padding:4px 12px;border:1px solid var(--border);background:transparent;color:var(--accent);font:12px/1.5 var(--font-mono);font-weight:700}.dl-btn:hover{border-color:var(--accent);background:var(--accent-soft)}
.comments{padding-block:80px;border-top:1px solid var(--border)}.comments-wrap{max-width:740px}.comments h2{font-size:clamp(36px,5vw,54px);margin:0}
.comment-list{display:grid}.comment{padding:24px 0;border-bottom:1px solid var(--border)}.comment-head{display:flex;justify-content:space-between;gap:16px}.comment p{margin:8px 0 0}
.comment-form{display:grid;gap:18px;margin-top:36px}.field{display:grid;gap:7px}.field label{font-size:13px;color:var(--muted)}
.input,.textarea{width:100%;border:1px solid var(--border);background:var(--surface);color:var(--fg);padding:13px 14px}.textarea{min-height:130px;resize:vertical}
.btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center;padding:11px 22px;border:1px solid transparent;font-weight:700}
.btn-primary{background:var(--accent);color:var(--surface);border-color:var(--accent)}.btn-primary:hover{background:color-mix(in oklch,var(--accent) 86%,black)}
.status{font-size:14px;color:var(--muted);min-height:22px}
.related{padding-block:80px;border-top:1px solid var(--border)}.related-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--fg)}.related-card{padding:24px 0;border-bottom:1px solid var(--border)}.related-card+.related-card{margin-inline-start:28px}.related-card span{font:12px/1.5 var(--font-mono);color:var(--muted)}.related-card h3{font-size:24px;margin:12px 0}.related-card a{font-weight:700}.related-card a:hover{color:var(--accent)}
.pagefoot{padding-block:54px;border-top:1px solid var(--border);color:var(--muted)}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:44px}
.footer-col strong{display:block;color:var(--fg);margin-bottom:12px}
.footer-col a{display:block;min-height:36px}.footer-col a:hover{color:var(--fg);text-decoration:underline}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:28px;margin-top:38px;border-top:1px solid var(--border);font-size:13px}
.menu-panel{position:fixed;inset:0;z-index:60;visibility:hidden;pointer-events:none}.menu-panel.open{visibility:visible;pointer-events:auto}.menu-scrim{position:absolute;inset:0;border:0;background:color-mix(in oklch,var(--fg) 55%,transparent);opacity:0}.menu-panel.open .menu-scrim{opacity:1}.menu-drawer{position:absolute;inset-block:0;inset-inline-start:0;width:min(520px,92vw);padding:28px clamp(24px,5vw,54px);background:var(--bg);border-inline-end:1px solid var(--fg);transform:translateX(105%);transition:transform .25s ease;display:flex;flex-direction:column}.menu-panel.open .menu-drawer{transform:translateX(0)}.menu-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:24px;border-bottom:1px solid var(--border)}.menu-links{display:flex;flex-direction:column}.menu-links a{display:flex;justify-content:space-between;align-items:center;min-height:58px;border-bottom:1px solid var(--border);font-size:18px}
@media(max-width:920px){:root{--gutter:22px}.nav-links{display:none}.article-layout{grid-template-columns:1fr}.toc{position:static;order:0;margin-top:24px}.footer-grid{grid-template-columns:1fr 1fr}.related-grid{grid-template-columns:1fr}.related-card+.related-card{margin-inline-start:0}.article-body{font-size:18px}}
@media(max-width:620px){:root{--gutter:18px}.nav-account .name-label{display:none}.article-head h1{font-size:46px}.article-layout,.comments,.related{padding-block:56px}.footer-grid{grid-template-columns:1fr;gap:28px}.article-meta{align-items:flex-start;flex-direction:column}.steps li{grid-template-columns:38px 1fr}}
@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 data-anw-dim>
<p class="demo-strip" data-od-id="demo-strip">نموذج تجريبي: <b>مشترك فعّال</b> — الدليل كامل وملفات العمل قابلة للتنزيل. <b>قارن مع: post-locked.html</b></p>
<header class="topnav" data-od-id="topnav"><div class="container nav-inner"><a class="logo" href="index.html"><img class="logo-mark" src="assets/anwarpi-logo.jpg" alt="" width="1200" height="1352">أنور بي آي</a><nav class="nav-links" aria-label="التنقل الرئيسي"><a href="arabic-ai-learning-catalog.html#catalog">المكتبة</a><a href="article-agent-guide.html">المقالات</a><a href="subscription.html">العضوية</a></nav><div class="nav-tools"><a class="nav-account" href="account-settings.html" data-od-id="account-chip"><span class="avatar" aria-hidden="true">أ</span><span class="name-label">حسابي</span></a><button class="icon-btn" id="menuTrigger" aria-label="فتح القائمة" aria-expanded="false" aria-controls="siteMenu" data-od-id="menu-button">☰</button></div></div></header>
<main>
<section class="article-head" data-od-id="article-header"><div class="container">
<span class="open-chip" data-od-id="access-status">VIP · وصول كامل</span>
<p class="crumb">الوكلاء · دليل عملي</p>
<h1 data-od-id="article-title">امنع وكيلك من الدوران في حلقة</h1>
<p class="dek">افصل التخطيط والتنفيذ والتحقق، وحدد متى يتوقف الوكيل ومتى يطلب تدخلاً بشرياً — مع قالب حالة وقائمة فحص جاهزة للتشغيل.</p>
<div class="article-meta"><span>فريق تحرير أنور بي آي</span><span class="num">قراءة ١٨ دقيقة</span><span>محدّد: أكتوبر ٢٠٢٦</span><button class="save-btn" id="saveArticle" type="button" aria-pressed="false" data-od-id="save-article">احفظ للعودة لاحقاً</button></div>
</div></section>
<section class="container article-layout" data-od-id="article-content">
<article class="article-body">
<p class="lede">الوكيل الذي يدور في حلقة لا ينقصه ذكاء؛ ينقصه شرط توقف. هنا نبني الحلقة بحيث يستطيع الوكيل أن يقول «انتهيت» — أو «أحتاجك».</p>
<p>أغلب الوكلاء يفشل بطريقة واحدة: يعيدون تخطيط المهمة نفسها إلى ما لا نهاية. السبب دائماً بنية الحلقة: التخطيط والتنفيذ والتحقق مدموجة في تعليمة واحدة، فلا يملك الوكيل مرجعاً مستقلاً يخبره أن النتيجة تحققت فعلاً.</p>
<h2 id="goal">١. اكتب نتيجة يمكن فحصها</h2>
<p>ابدأ بما يجب أن يكون صحيحاً عند النهاية. «ابحث عن أفضل خيار» هدف ضبابي. أما «أنشئ قائمة من ثلاثة خيارات، مع المصدر والسعر وتاريخ التحقق» فيمكن اختباره بشرط واحد واضح.</p>
<div class="note"><strong>قاعدة أنور بي آي</strong>إذا لم تستطع كتابة اختبار بسيط للنتيجة، فلن يعرف الوكيل متى يتوقف.</div>
<h2 id="loop">٢. استخدم حلقة قصيرة وواضحة</h2>
<ol class="steps"><li><div><strong>خطّط</strong><p>حوّل الهدف إلى خطوة واحدة تالية، لا إلى خطة ضخمة لا تتغير.</p></div></li><li><div><strong>نفّذ</strong><p>استدعِ أداة واحدة بمدخلات محددة وسجّل ما حدث فعلاً.</p></div></li><li><div><strong>تحقق</strong><p>قارن الناتج بشرط النجاح، ثم توقف أو عدّل الخطوة التالية.</p></div></li></ol>
<pre class="code" aria-label="مثال برمجي"><code>while not done:
step = planner.next(goal, state)
result = tools.run(step)
state.record(result)
done = verifier.check(goal, state)</code></pre>
<h2 id="tools">٣. اجعل الأدوات ضيقة الصلاحية</h2>
<p>لا تمنح الوكيل أداة «نفّذ أي أمر». قدّم وظائف محددة مثل قراءة ملف، إنشاء مسودة، أو إرسال عنصر بعد موافقة. كلما ضاقت الأداة أصبح اختبارها ومراجعتها أسهل.</p>
<ul><li>تحقق من المدخلات قبل التنفيذ.</li><li>اطلب موافقة بشرية قبل الإرسال أو الحذف أو الدفع.</li><li>احتفظ بسجل واضح للطلب والنتيجة.</li></ul>
<h2 id="template">٤. ملفات العمل</h2>
<p>قالب الحالة يحفظ الهدف والخطوة الأخيرة وشرط النجاح في مكان واحد، وقائمة الفحص تُمرَّر قبل كل تشغيل. انسخهما إلى مشروعك وعدّل الحقول الثلاثة فقط: الهدف، الشرط، وصلاحيات الأدوات.</p>
<div class="note"><strong>الخلاصة</strong>ابدأ بحلقة صغيرة واختبار واحد. أضف الذاكرة والتخطيط المتقدم فقط عندما يثبت القياس أنك تحتاجهما.</div>
</article>
<aside class="toc" aria-label="فهرس الدليل" data-od-id="article-toc">
<strong>داخل هذا الدليل</strong>
<a href="#goal">نتيجة قابلة للفحص</a>
<a href="#loop">حلقة الوكيل</a>
<a href="#tools">صلاحيات الأدوات</a>
<a href="#template">ملفات العمل</a>
<div class="progress-card" data-od-id="progress-card"><strong>تقدّمك في المسار</strong><div class="progress-track" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" aria-label="تقدم المسار"><div class="progress-bar"></div></div><span class="p-label">قرأت ٢ من ٥ أدلة مسار الوكلاء</span></div>
<div class="files-card" data-od-id="files-card"><strong>ملفات العمل</strong>
<div class="file-row"><span>قالب حالة الوكيل <bdi dir="ltr">.md</bdi></span><button class="dl-btn" type="button" data-dl>تنزيل</button></div>
<div class="file-row"><span>قائمة الفحص قبل التشغيل</span><button class="dl-btn" type="button" data-dl>تنزيل</button></div>
<div class="file-row"><span>سجل الأخطاء <bdi dir="ltr">.csv</bdi></span><button class="dl-btn" type="button" data-dl>تنزيل</button></div>
</div>
</aside>
</section>
<section class="comments" data-od-id="comments"><div class="container comments-wrap"><p class="crumb">نقاش الأعضاء · هادئ ومفيد</p><h2 data-od-id="comments-title">التعليقات</h2><div class="comment-list" id="commentList"><article class="comment"><div class="comment-head"><strong>سارة ع.</strong><span class="crumb">قبل يومين</span></div><p>طبّقت قائمة الفحص على وكيل الفواتير لدينا — المشكلة كانت فعلاً غياب شرط توقف واضح.</p></article></div><form class="comment-form" id="commentForm" novalidate data-od-id="comment-form"><div class="field"><label for="commentBody">تعليقك</label><textarea class="textarea" id="commentBody" name="comment" required minlength="8"></textarea></div><button class="btn btn-primary" type="submit">أضف التعليق</button><p class="status" id="commentStatus" role="status"></p></form></div></section>
<section class="related" data-od-id="related-articles"><div class="container"><p class="crumb">اقرأ بعد ذلك · ضمن عضويتك</p><div class="related-grid"><article class="related-card" data-od-id="related-monitor"><span>الأتمتة · ٢٤ دقيقة</span><h3>اكتشف فشل سير العمل قبل المستخدم</h3><a href="post-unlocked.html" aria-label="افتح الدليل التالي (نموذج نفس الشاشة)">افتح الدليل ←</a></article><article class="related-card" data-od-id="related-rag"><span>النماذج · ٤ أجزاء</span><h3>افصل فشل الاسترجاع عن فشل الإجابة</h3><a href="post-unlocked.html" aria-label="افتح الدليل التالي (نموذج نفس الشاشة)">افتح الدليل ←</a></article><article class="related-card" data-od-id="related-settings"><span>حسابك</span><h3>إعدادات الحساب والعضوية</h3><a href="account-settings.html">إدارة الحساب ←</a></article></div></div></section>
</main>
<footer class="pagefoot" data-od-id="footer"><div class="container"><div class="footer-grid"><div><a class="logo" href="index.html"><img class="logo-mark" src="assets/anwarpi-logo.jpg" alt="" width="1200" height="1352">أنور بي آي</a><p>محتوى عربي عملي لتعلّم الذكاء الاصطناعي والوكلاء.</p></div><div class="footer-col"><strong>استكشف</strong><a href="arabic-ai-learning-catalog.html#catalog">المكتبة</a><a href="article-agent-guide.html">مقال الأسبوع</a></div><div class="footer-col"><strong>الحساب</strong><a href="account-settings.html">الإعدادات والعضوية</a><a href="post-locked.html">شاشة الزائر غير المشترك</a></div><div class="footer-col"><strong>تواصل</strong><a href="mailto:hello@anwarpi.ai">hello@anwarpi.ai</a><a href="privacy.html">الخصوصية</a></div></div><div class="footer-bottom"><span>© أنور بي آي ٢٠٢٦</span><span>نموذج تجربة — الشاشة: دليل مفتوح للمشترك</span></div></div></footer>
<aside class="menu-panel" id="siteMenu" aria-hidden="true" data-od-id="site-menu"><button class="menu-scrim" type="button" aria-label="إغلاق القائمة" data-menu-close></button><div class="menu-drawer" role="dialog" aria-modal="true" aria-label="قائمة أنور بي آي"><div class="menu-head"><a class="logo" href="index.html"><img class="logo-mark" src="assets/anwarpi-logo.jpg" alt="" width="1200" height="1352">أنور بي آي</a><button class="icon-btn" type="button" aria-label="إغلاق القائمة" data-menu-close>×</button></div><nav class="menu-links"><a href="arabic-ai-learning-catalog.html#catalog">المكتبة <span>←</span></a><a href="post-unlocked.html">دليل الأعضاء <span>←</span></a><a href="account-settings.html">حسابي <span>←</span></a></nav></div></aside>
<script>
(()=>{
const menu=document.getElementById('siteMenu'),trigger=document.getElementById('menuTrigger');function setMenu(open){menu.classList.toggle('open',open);menu.setAttribute('aria-hidden',String(!open));trigger.setAttribute('aria-expanded',String(open));document.body.classList.toggle('locked',open);(open?menu.querySelector('.menu-head [data-menu-close]'):trigger).focus()}trigger.addEventListener('click',()=>setMenu(true));document.querySelectorAll('[data-menu-close]').forEach(el=>el.addEventListener('click',()=>setMenu(false)));document.addEventListener('keydown',e=>{if(e.key==='Escape'&&menu.classList.contains('open'))setMenu(false)});
const save=document.getElementById('saveArticle');save.addEventListener('click',()=>{const active=save.getAttribute('aria-pressed')!=='true';save.setAttribute('aria-pressed',String(active));save.textContent=active?'تم الحفظ ✓':'احفظ للعودة لاحقاً'});
document.querySelectorAll('[data-dl]').forEach(b=>b.addEventListener('click',()=>{b.textContent='تم التنزيل ✓';setTimeout(()=>{b.textContent='تنزيل'},1600)}));
const form=document.getElementById('commentForm'),status=document.getElementById('commentStatus'),list=document.getElementById('commentList');form.addEventListener('submit',e=>{e.preventDefault();if(!form.checkValidity()){status.textContent='اكتب تعليقاً من ٨ أحرف على الأقل.';form.reportValidity();return}const text=form.elements.comment.value.trim(),item=document.createElement('article');item.className='comment';const head=document.createElement('div');head.className='comment-head';const strong=document.createElement('strong');strong.textContent='أنت';const time=document.createElement('span');time.textContent='الآن';time.className='crumb';const p=document.createElement('p');p.textContent=text;head.append(strong,time);item.append(head,p);list.append(item);form.reset();status.textContent='نُشر تعليقك.'});
})();
</script>
</body>
</html>