This commit is contained in:
@@ -0,0 +1,144 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user