This commit is contained in:
@@ -0,0 +1,47 @@
|
||||
name: Deploy GitHub Pages
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [main]
|
||||
workflow_dispatch:
|
||||
|
||||
permissions:
|
||||
contents: read
|
||||
pages: write
|
||||
id-token: write
|
||||
|
||||
concurrency:
|
||||
group: pages
|
||||
cancel-in-progress: true
|
||||
|
||||
jobs:
|
||||
deploy:
|
||||
environment:
|
||||
name: github-pages
|
||||
url: ${{ steps.deployment.outputs.page_url }}
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Check out repository
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Validate site
|
||||
run: python3 scripts/check_site.py
|
||||
|
||||
- name: Prepare static site
|
||||
run: |
|
||||
mkdir -p _site
|
||||
cp ./*.html _site/
|
||||
cp -R assets _site/assets
|
||||
touch _site/.nojekyll
|
||||
|
||||
- name: Configure Pages
|
||||
uses: actions/configure-pages@v5
|
||||
|
||||
- name: Upload Pages artifact
|
||||
uses: actions/upload-pages-artifact@v3
|
||||
with:
|
||||
path: _site
|
||||
|
||||
- name: Deploy
|
||||
id: deployment
|
||||
uses: actions/deploy-pages@v4
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
# OpenDesign working data
|
||||
.od-skills/
|
||||
.file-versions/
|
||||
*.artifact.json
|
||||
|
||||
# Generated previews
|
||||
preview*.png
|
||||
*-preview.png
|
||||
screenshot-*.png
|
||||
|
||||
# Local OS/editor files
|
||||
.DS_Store
|
||||
.vscode/
|
||||
.idea/
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
@@ -0,0 +1,20 @@
|
||||
# أنور بي آي
|
||||
|
||||
موقع عربي ثابت لتعلّم الذكاء الاصطناعي، جاهز للنشر على GitHub Pages.
|
||||
|
||||
## النشر
|
||||
|
||||
1. أنشئ مستودع GitHub وارفع هذا المجلد إلى فرع `main`.
|
||||
2. افتح **Settings → Pages** في المستودع.
|
||||
3. اختر **GitHub Actions** ضمن **Build and deployment → Source**.
|
||||
4. سيعمل مسار `Deploy GitHub Pages` تلقائياً عند كل دفع إلى `main`.
|
||||
|
||||
يمكن تشغيل فحص الموقع محلياً قبل الدفع:
|
||||
|
||||
```bash
|
||||
python3 scripts/check_site.py
|
||||
```
|
||||
|
||||
## حدود النسخة الحالية
|
||||
|
||||
الموقع واجهة ثابتة فقط. تسجيل الدخول، استعادة كلمة المرور، الدفع، العضوية، وحماية محتوى VIP محاكاة داخل المتصفح وليست حماية إنتاجية. لا تستخدمه لجمع بيانات حقيقية قبل إضافة مصادقة وتفويض ودفع من جهة الخادم.
|
||||
@@ -0,0 +1,305 @@
|
||||
<!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{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}
|
||||
.page-head{padding-block:clamp(48px,7vw,84px) 0}
|
||||
.crumb{font:12px/1.5 var(--font-mono);color:var(--accent);margin:0 0 18px}
|
||||
.page-head h1{font-size:clamp(42px,6vw,72px);line-height:1.1;letter-spacing:-.02em;margin:0}
|
||||
.page-head .sub{color:var(--muted);margin:16px 0 0;max-width:52ch}
|
||||
.settings-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(40px,7vw,90px);align-items:start;padding-block:56px 90px}
|
||||
.settings-nav{position:sticky;top:100px;border-top:1px solid var(--fg)}
|
||||
.settings-nav button{width:100%;min-height:52px;display:flex;justify-content:space-between;align-items:center;gap:12px;background:transparent;border:0;border-bottom:1px solid var(--border);color:var(--muted);font-size:16px;text-align:right;padding:0 4px}
|
||||
.settings-nav button:hover{color:var(--fg)}
|
||||
.settings-nav button[aria-selected="true"]{color:var(--fg);font-weight:700}
|
||||
.settings-nav button[aria-selected="true"]::after{content:"";width:8px;height:8px;background:var(--accent);transform:rotate(45deg)}
|
||||
.panel{display:none}
|
||||
.panel.active{display:block}
|
||||
.panel h2{font-size:clamp(30px,3.4vw,42px);line-height:1.2;margin:0 0 10px}
|
||||
.panel .panel-sub{color:var(--muted);max-width:56ch;margin:0 0 34px}
|
||||
.form-grid{display:grid;gap:24px;max-width:560px}
|
||||
.field{display:grid;gap:7px}
|
||||
.field label{font-size:13px;color:var(--muted)}
|
||||
.field .hint{font-size:12px;color:var(--muted)}
|
||||
.input{width:100%;border:1px solid var(--border);background:var(--surface);color:var(--fg);padding:13px 14px;min-height:48px}
|
||||
.input:hover{border-color:var(--muted)}
|
||||
.input:focus{outline:2px solid var(--accent);outline-offset:1px}
|
||||
.input[disabled]{background:var(--fg-soft);color:var(--muted);cursor:not-allowed}
|
||||
.input.invalid{border-color:var(--accent)}
|
||||
.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)}
|
||||
.btn-secondary{border-color:var(--border);background:transparent;color:var(--fg)}.btn-secondary:hover{border-color:var(--fg);background:var(--fg-soft)}
|
||||
.status{font-size:14px;min-height:24px;display:flex;align-items:center;gap:8px}
|
||||
.status.ok{color:var(--accent);font-weight:700}
|
||||
.status.err{color:var(--accent)}
|
||||
.pw-rules{list-style:none;padding:0;margin:4px 0 0;display:grid;gap:4px}
|
||||
.pw-rules li{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}
|
||||
.pw-rules li::before{content:"";width:7px;height:7px;border:1px solid var(--muted);transform:rotate(45deg);flex:none}
|
||||
.pw-rules li.ok{color:var(--fg)}
|
||||
.pw-rules li.ok::before{background:var(--accent);border-color:var(--accent)}
|
||||
.prefs{border-top:1px solid var(--fg);max-width:640px}
|
||||
.pref-row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0;border-bottom:1px solid var(--border)}
|
||||
.pref-row strong{display:block;font-size:17px}
|
||||
.pref-row p{margin:4px 0 0;color:var(--muted);font-size:14px;max-width:44ch}
|
||||
.switch{position:relative;width:52px;min-height:32px;flex:none}
|
||||
.switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
|
||||
.switch .track{position:absolute;inset:0;border:1px solid var(--muted);background:var(--surface);pointer-events:none;transition:background .15s,border-color .15s}
|
||||
.switch input:checked + .track{background:var(--accent);border-color:var(--accent)}
|
||||
.switch .track::after{content:"";position:absolute;top:4px;inset-inline-start:4px;width:22px;height:22px;background:var(--fg);transition:transform .15s}
|
||||
.switch input:checked + .track::after{transform:translateX(-20px);background:var(--surface)}
|
||||
.switch input:focus-visible + .track{outline:3px solid color-mix(in oklch,var(--accent) 55%,transparent);outline-offset:3px}
|
||||
.membership-card{border:1px solid var(--fg);padding:clamp(24px,4vw,38px);max-width:640px}
|
||||
.membership-head{display:flex;justify-content:space-between;align-items:start;gap:18px;padding-bottom:22px;border-bottom:1px solid var(--border)}
|
||||
.membership-head h3{font-size:28px;margin:0}
|
||||
.state-chip{font:11px/1.5 var(--font-mono);padding:6px 12px;border:1px solid var(--accent);color:var(--accent);white-space:nowrap}
|
||||
.state-chip.cancelled{border-color:var(--muted);color:var(--muted)}
|
||||
.plan-details{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 32px;padding-block:24px}
|
||||
.plan-details dt{font:12px/1.6 var(--font-mono);color:var(--muted)}
|
||||
.plan-details dd{margin:4px 0 0;font-size:16px}
|
||||
.price-tag{font-family:var(--font-display);font-size:44px;line-height:1}
|
||||
.price-tag small{display:block;font:11px/1.5 var(--font-mono);color:var(--muted);margin-top:6px}
|
||||
.membership-actions{display:flex;gap:14px;flex-wrap:wrap;padding-top:22px;border-top:1px solid var(--border)}
|
||||
.cancel-zone{margin-top:34px;max-width:640px;border-top:1px solid var(--border);padding-top:24px}
|
||||
.cancel-zone h3{font-size:22px;margin:0 0 6px}
|
||||
.cancel-zone p{color:var(--muted);font-size:14px;margin:0 0 16px;max-width:52ch}
|
||||
.billing{margin-top:34px;max-width:640px;border-top:1px solid var(--border);padding-top:24px}
|
||||
.billing h3{font-size:22px;margin:0 0 6px}
|
||||
.billing-sub{color:var(--muted);font-size:14px;margin:0 0 18px;max-width:52ch}
|
||||
.billing-table{border:1px solid var(--border)}
|
||||
.billing-row{display:grid;grid-template-columns:1.1fr 1.5fr .7fr .8fr auto;gap:12px;align-items:center;padding:13px 18px;border-bottom:1px solid var(--border);font-size:14px}
|
||||
.billing-row:last-child{border-bottom:0}
|
||||
.billing-row.head{font:11px/1.6 var(--font-mono);color:var(--muted);letter-spacing:.04em;padding:10px 18px}
|
||||
.billing-row .amt,.billing-row .bdate{font-family:var(--font-mono);white-space:nowrap}
|
||||
.billing-row .desc{color:var(--fg)}
|
||||
.chip{display:inline-block;padding:2px 10px;border:1px solid var(--border);font:11px/1.9 var(--font-mono);color:var(--muted);white-space:nowrap}
|
||||
.chip.paid{color:var(--fg);border-color:var(--fg)}
|
||||
.chip.upcoming{color:var(--accent);border-color:var(--accent)}
|
||||
.chip.voided{color:var(--muted);border-color:var(--border);text-decoration:line-through}
|
||||
.inv-link{font:12px/1.6 var(--font-mono);color:var(--fg);text-decoration:underline;text-underline-offset:3px}
|
||||
.inv-link:hover{color:var(--accent)}
|
||||
.inv-link:disabled{color:var(--muted);text-decoration:none;cursor:default}
|
||||
.inv-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
|
||||
.text-danger{background:transparent;border:0;color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:4px;min-height:44px;padding:0 4px}
|
||||
.text-danger:hover{color:color-mix(in oklch,var(--accent) 80%,black)}
|
||||
.dialog{position:fixed;inset:0;z-index:60;visibility:hidden;pointer-events:none}.dialog.open{visibility:visible;pointer-events:auto}
|
||||
.dialog-scrim{position:absolute;inset:0;border:0;background:color-mix(in oklch,var(--fg) 58%,transparent);opacity:0;transition:opacity .2s}
|
||||
.dialog.open .dialog-scrim{opacity:1}
|
||||
.dialog-panel{position:absolute;inset-inline:0;top:50%;transform:translateY(calc(-50% + 12px));margin-inline:auto;width:min(560px,92vw);background:var(--bg);border:1px solid var(--fg);padding:clamp(26px,4vw,40px);opacity:0;transition:opacity .2s,transform .2s}
|
||||
.dialog.open .dialog-panel{opacity:1;transform:translateY(-50%)}
|
||||
.dialog-panel h2{font-size:30px;margin:0 0 12px}
|
||||
.dialog-panel p{color:var(--muted);margin:0 0 14px}
|
||||
.dialog-panel .keep-note{border-inline-start:2px solid var(--border);padding-inline-start:14px}
|
||||
.dialog-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
|
||||
.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}.settings-layout{grid-template-columns:1fr}.settings-nav{position:static;display:grid;grid-template-columns:1fr 1fr;border-top:0;margin-bottom:10px}.settings-nav button{border:1px solid var(--border)}.footer-grid{grid-template-columns:1fr 1fr}}
|
||||
@media(max-width:620px){:root{--gutter:18px}.nav-account .name-label{display:none}.page-head h1{font-size:44px}.settings-layout{padding-block:40px 60px}.footer-grid{grid-template-columns:1fr;gap:28px}.plan-details{grid-template-columns:1fr}.dialog-actions{flex-direction:column}.dialog-actions .btn{width:100%}.billing-row{grid-template-columns:1fr 1fr;row-gap:2px}.billing-row.head{display:none}.billing-row .bdate{grid-column:1}.billing-row .desc{grid-column:1 / -1;color:var(--muted)}}
|
||||
@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>
|
||||
<p class="demo-strip" data-od-id="demo-strip">نموذج تجريبي: <b>مشترك فعّال</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="page-head" data-od-id="settings-header"><div class="container">
|
||||
<p class="crumb">حسابك في أنور بي آي</p>
|
||||
<h1 data-od-id="settings-title">إعدادات الحساب</h1>
|
||||
<p class="sub"><bdi>ahmed@example.com</bdi> · عضو منذ مارس ٢٠٢٥</p>
|
||||
</div></section>
|
||||
<section class="container settings-layout" data-od-id="settings-layout">
|
||||
<nav class="settings-nav" role="tablist" aria-label="أقسام الإعدادات" data-od-id="settings-nav">
|
||||
<button role="tab" id="tab-profile" aria-selected="true" aria-controls="panel-profile" data-tab="profile">الملف الشخصي</button>
|
||||
<button role="tab" id="tab-password" aria-selected="false" aria-controls="panel-password" data-tab="password">كلمة المرور</button>
|
||||
<button role="tab" id="tab-prefs" aria-selected="false" aria-controls="panel-prefs" data-tab="prefs">التفضيلات</button>
|
||||
<button role="tab" id="tab-membership" aria-selected="false" aria-controls="panel-membership" data-tab="membership">العضوية والفوترة</button>
|
||||
</nav>
|
||||
|
||||
<div class="panels">
|
||||
<section class="panel active" id="panel-profile" role="tabpanel" aria-labelledby="tab-profile" data-od-id="panel-profile">
|
||||
<h2>الملف الشخصي</h2>
|
||||
<p class="panel-sub">الاسم كما يظهر في تعليقاتك وقوائم الحفظ. البريد الإلكتروني هو معرّف الدخول ولا يتغير من هنا.</p>
|
||||
<form class="form-grid" id="profileForm" novalidate>
|
||||
<div class="field"><label for="fullName">الاسم الكامل</label><input class="input" id="fullName" name="fullName" value="أحمد عنابتاوي" autocomplete="name" required /></div>
|
||||
<div class="field"><label for="email">البريد الإلكتروني</label><input class="input" id="email" value="ahmed@example.com" disabled /><span class="hint">لتغيير البريد تواصل معنا على <bdi>hello@anwarpi.ai</bdi></span></div>
|
||||
<button class="btn btn-primary" type="submit" data-od-id="save-profile">حفظ التغييرات</button>
|
||||
<p class="status" id="profileStatus" role="status"></p>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section class="panel" id="panel-password" role="tabpanel" aria-labelledby="tab-password" data-od-id="panel-password">
|
||||
<h2>تغيير كلمة المرور</h2>
|
||||
<p class="panel-sub">بعد التغيير تبقى جلستك الحالية مفتوحة، وتُطلب كلمة المرور الجديدة عند الدخول من جهاز آخر.</p>
|
||||
<form class="form-grid" id="passwordForm" novalidate>
|
||||
<div class="field"><label for="currentPw">كلمة المرور الحالية</label><input class="input" id="currentPw" type="password" name="currentPw" autocomplete="current-password" required /></div>
|
||||
<div class="field"><label for="newPw">كلمة المرور الجديدة</label><input class="input" id="newPw" type="password" name="newPw" autocomplete="new-password" required minlength="8" aria-describedby="pwRules" /></div>
|
||||
<ul class="pw-rules" id="pwRules">
|
||||
<li data-rule="len">٨ أحرف على الأقل</li>
|
||||
<li data-rule="num">تحتوي رقماً واحداً على الأقل</li>
|
||||
<li data-rule="diff">تختلف عن كلمة المرور الحالية</li>
|
||||
</ul>
|
||||
<div class="field"><label for="confirmPw">تأكيد كلمة المرور</label><input class="input" id="confirmPw" type="password" name="confirmPw" autocomplete="new-password" required /></div>
|
||||
<button class="btn btn-primary" type="submit" data-od-id="save-password">تحديث كلمة المرور</button>
|
||||
<p class="status" id="passwordStatus" role="status" aria-live="polite"></p>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section class="panel" id="panel-prefs" role="tabpanel" aria-labelledby="tab-prefs" data-od-id="panel-prefs">
|
||||
<h2>التفضيلات</h2>
|
||||
<p class="panel-sub">رسائل أنور بي آي قليلة ومقصودة. يمكنك إيقاف أي نوع منها من دون التأثير على عضويتك.</p>
|
||||
<div class="prefs">
|
||||
<div class="pref-row"><div><strong>الرسالة الأسبوعية</strong><p>خلاصة ما نُشر من أدلة ومقالات، كل يوم أحد.</p></div><label class="switch"><input type="checkbox" id="prefWeekly" aria-label="تفعيل الرسالة الأسبوعية" checked /><span class="track"></span></label></div>
|
||||
<div class="pref-row"><div><strong>إشعارات التعليقات</strong><p>رسالة عند ردّ أحد الأعضاء على تعليقك.</p></div><label class="switch"><input type="checkbox" id="prefReplies" aria-label="تفعيل إشعارات التعليقات" checked /><span class="track"></span></label></div>
|
||||
<div class="pref-row"><div><strong>تحديثات الأدلة المحفوظة</strong><p>إشعار عندما يُحدَّث دليل حفظته للعودة إليه.</p></div><label class="switch"><input type="checkbox" id="prefUpdates" aria-label="تفعيل تحديثات الأدلة المحفوظة" /><span class="track"></span></label></div>
|
||||
</div>
|
||||
<button class="btn btn-primary" type="button" id="savePrefs" style="margin-top:28px" data-od-id="save-prefs">حفظ التفضيلات</button>
|
||||
<p class="status" id="prefsStatus" role="status"></p>
|
||||
</section>
|
||||
|
||||
<section class="panel" id="panel-membership" role="tabpanel" aria-labelledby="tab-membership" data-od-id="panel-membership">
|
||||
<h2>العضوية والفوترة</h2>
|
||||
<p class="panel-sub">خطتك، موعد التجديد، وطريقة الدفع. الإلغاء يوقف التجديد التالي ويحفظ وصولك حتى نهاية الفترة المدفوعة.</p>
|
||||
<article class="membership-card" data-od-id="membership-card">
|
||||
<div class="membership-head">
|
||||
<div><h3 id="planName">عضوية فردية</h3><span class="hint" style="font:11px/1.6 var(--font-mono);color:var(--muted)">بدأت في ١ أكتوبر ٢٠٢٦</span></div>
|
||||
<span class="state-chip" id="planState">نشطة</span>
|
||||
</div>
|
||||
<div class="plan-details">
|
||||
<div><span class="price-tag">٤٩ ر.س<small>شهرياً</small></span></div>
|
||||
<dl style="margin:0"><dt id="renewLabel">التجديد القادم</dt><dd id="renewDate">١ نوفمبر ٢٠٢٦</dd></dl>
|
||||
<dl style="margin:0"><dt>طريقة الدفع</dt><dd id="payMethod"><bdi dir="ltr">Visa •••• 4242</bdi></dd></dl>
|
||||
<dl style="margin:0"><dt>الوصول بعد الإلغاء</dt><dd>حتى نهاية الفترة المدفوعة</dd></dl>
|
||||
</div>
|
||||
<div class="membership-actions" id="membershipActions">
|
||||
<button class="btn btn-secondary" type="button" id="updateCard">تحديث طريقة الدفع</button>
|
||||
<a class="btn btn-secondary" href="subscription.html" id="resubLink" hidden>إعادة الاشتراك</a>
|
||||
</div>
|
||||
</article>
|
||||
<div class="cancel-zone" id="cancelZone" data-od-id="cancel-zone">
|
||||
<h3>إلغاء الاشتراك</h3>
|
||||
<p>لن يُجدَّد اشتراكك في ١ نوفمبر ٢٠٢٦. تبقى عضويتك مفتوحة حتى ذلك التاريخ، ويبقى حسابك المجاني ومقالاتك المحفوظة بعدها.</p>
|
||||
<button class="text-danger" type="button" id="cancelOpen" data-od-id="cancel-open">إلغاء الاشتراك</button>
|
||||
</div>
|
||||
<div class="billing" data-od-id="billing-history">
|
||||
<h3>سجل الفواتير</h3>
|
||||
<p class="billing-sub">كل دفعة تُصدر فاتورة ضريبية فور اكتمالها وترسل إلى بريدك المسجّل. الفواتير متاحة للتنزيل في أي وقت.</p>
|
||||
<div class="billing-table" role="table" aria-label="سجل الفواتير">
|
||||
<div class="billing-row head" role="row">
|
||||
<span role="columnheader">التاريخ</span><span role="columnheader">الوصف</span><span role="columnheader">المبلغ</span><span role="columnheader">الحالة</span><span role="columnheader">الفاتورة</span>
|
||||
</div>
|
||||
<div class="billing-row" role="row" id="renewRow">
|
||||
<span class="bdate" role="cell">١ نوفمبر ٢٠٢٦</span>
|
||||
<span class="desc" role="cell">تجديد شهري — عضوية فردية</span>
|
||||
<span class="amt" role="cell">٤٩ ر.س</span>
|
||||
<span role="cell"><span class="chip upcoming" id="renewChip">قادمة</span></span>
|
||||
<span role="cell"><span class="hint" style="font:11px/1.6 var(--font-mono);color:var(--muted)">—</span></span>
|
||||
</div>
|
||||
<div class="billing-row" role="row">
|
||||
<span class="bdate" role="cell">١ أكتوبر ٢٠٢٦</span>
|
||||
<span class="desc" role="cell">عضوية فردية · أول اشتراك</span>
|
||||
<span class="amt" role="cell">٤٩ ر.س</span>
|
||||
<span role="cell"><span class="chip paid">مدفوعة</span></span>
|
||||
<span role="cell"><button class="inv-link" type="button" data-inv>تنزيل PDF</button></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<div class="dialog" id="cancelDialog" aria-hidden="true" data-od-id="cancel-dialog">
|
||||
<button class="dialog-scrim" type="button" aria-label="إغلاق" data-dialog-close></button>
|
||||
<div class="dialog-panel" role="dialog" aria-modal="true" aria-labelledby="cancelTitle">
|
||||
<p class="crumb">قبل أن تغادر</p>
|
||||
<h2 id="cancelTitle">أنت متأكد من الإلغاء؟</h2>
|
||||
<p>ستفقد بعد ١ نوفمبر ٢٠٢٦: كل الأدلة الحصرية، مسارات الفيديو، وملفات العمل القابلة للتنزيل.</p>
|
||||
<p class="keep-note">يمكنك الإلغاء الآن والعودة متى شئت — يبقى حسابك المجاني ومقالاتك المحفوظة كما هي.</p>
|
||||
<div class="dialog-actions">
|
||||
<button class="btn btn-primary" type="button" id="stayMember" data-dialog-close>البقاء عضواً</button>
|
||||
<button class="btn btn-secondary" type="button" id="confirmCancel">تأكيد الإلغاء</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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="post-unlocked.html">دليل الأعضاء</a></div><div class="footer-col"><strong>الحساب</strong><a href="post-locked.html">شاشة الزائر</a><a href="subscription.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="subscription.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)});
|
||||
|
||||
// Tabs
|
||||
const tabs=document.querySelectorAll('[data-tab]');
|
||||
function setTab(name){tabs.forEach(t=>{const on=t.dataset.tab===name;t.setAttribute('aria-selected',String(on));document.getElementById('panel-'+t.dataset.tab).classList.toggle('active',on)});}
|
||||
tabs.forEach(t=>t.addEventListener('click',()=>setTab(t.dataset.tab)));
|
||||
|
||||
// Profile
|
||||
const profileForm=document.getElementById('profileForm'),profileStatus=document.getElementById('profileStatus');
|
||||
profileForm.addEventListener('submit',e=>{e.preventDefault();const name=profileForm.elements.fullName.value.trim();if(name.length<3){profileStatus.className='status err';profileStatus.textContent='أدخل اسماً من ٣ أحرف على الأقل.';return}profileStatus.className='status ok';profileStatus.textContent='تم حفظ الاسم ✓';});
|
||||
|
||||
// Password rules + submit
|
||||
const pwForm=document.getElementById('passwordForm'),pwStatus=document.getElementById('passwordStatus');
|
||||
const rules={len:()=>pwForm.elements.newPw.value.length>=8,num:()=>/\d/.test(pwForm.elements.newPw.value),diff:()=>pwForm.elements.newPw.value.length>0&&pwForm.elements.newPw.value!==pwForm.elements.currentPw.value};
|
||||
const newPw=pwForm.elements.newPw;
|
||||
newPw.addEventListener('input',()=>{document.querySelectorAll('#pwRules li').forEach(li=>{li.classList.toggle('ok',rules[li.dataset.rule]())});newPw.classList.remove('invalid');pwStatus.textContent='';});
|
||||
pwForm.addEventListener('submit',e=>{e.preventDefault();const c=pwForm.elements.currentPw.value,n=pwForm.elements.newPw.value,f=pwForm.elements.confirmPw.value;
|
||||
if(!c){pwStatus.className='status err';pwStatus.textContent='أدخل كلمة المرور الحالية.';return}
|
||||
if(!(rules.len()&&rules.num())){pwStatus.className='status err';pwStatus.textContent='كلمة المرور الجديدة لا تحقق الشروط أعلاه.';newPw.classList.add('invalid');return}
|
||||
if(n===c){pwStatus.className='status err';pwStatus.textContent='كلمة المرور الجديدة تطابق الحالية.';newPw.classList.add('invalid');return}
|
||||
if(n!==f){pwStatus.className='status err';pwStatus.textContent='التأكيد لا يطابق كلمة المرور الجديدة.';return}
|
||||
pwStatus.className='status ok';pwStatus.textContent='تم تحديث كلمة المرور ✓';pwForm.reset();document.querySelectorAll('#pwRules li').forEach(li=>li.classList.remove('ok'));});
|
||||
|
||||
// Prefs
|
||||
document.getElementById('savePrefs').addEventListener('click',()=>{const s=document.getElementById('prefsStatus');s.className='status ok';s.textContent='تم حفظ التفضيلات ✓';});
|
||||
|
||||
// Membership / cancel flow
|
||||
const dialog=document.getElementById('cancelDialog'),openBtn=document.getElementById('cancelOpen');
|
||||
function setDialog(open){dialog.classList.toggle('open',open);dialog.setAttribute('aria-hidden',String(!open));document.body.classList.toggle('locked',open);(open?dialog.querySelector('#stayMember'):openBtn).focus();}
|
||||
openBtn.addEventListener('click',()=>setDialog(true));
|
||||
document.querySelectorAll('[data-dialog-close]').forEach(el=>el.addEventListener('click',()=>setDialog(false)));
|
||||
document.addEventListener('keydown',e=>{if(e.key==='Escape'&&dialog.classList.contains('open'))setDialog(false)});
|
||||
document.getElementById('confirmCancel').addEventListener('click',()=>{
|
||||
setDialog(false);
|
||||
const chip=document.getElementById('planState');chip.textContent='ملغاة · الوصول حتى ١ نوفمبر ٢٠٢٦';chip.classList.add('cancelled');
|
||||
document.getElementById('renewLabel').textContent='نهاية الفترة المدفوعة';
|
||||
document.getElementById('updateCard').hidden=true;
|
||||
document.getElementById('resubLink').hidden=false;
|
||||
const zone=document.getElementById('cancelZone');zone.querySelector('p').textContent='اشتراكك ملغى ولن يُجدَّد. تعود العضوية فوراً عند إعادة الاشتراك.';
|
||||
const renewRow=document.getElementById('renewRow');if(renewRow){renewRow.querySelector('.desc').textContent='تجديد شهري — عضوية فردية · لم يُحصَّل';const rc=document.getElementById('renewChip');rc.textContent='ملغاة';rc.classList.remove('upcoming');rc.classList.add('voided');}
|
||||
openBtn.hidden=true;
|
||||
});
|
||||
document.querySelectorAll('[data-inv]').forEach(b=>b.addEventListener('click',function(){const t=this.textContent;this.textContent='لا يوجد ملف في المعاينة';this.disabled=true;setTimeout(()=>{this.textContent=t;this.disabled=false},1600)}));
|
||||
document.getElementById('updateCard').addEventListener('click',function(){this.textContent='معاينة فقط — لا بوابة دفع';setTimeout(()=>{this.textContent='تحديث طريقة الدفع'},1600)});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,465 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,529 @@
|
||||
<!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); }
|
||||
.nav-tools { display: flex; align-items: center; gap: 8px; }
|
||||
.menu-trigger { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--fg); background: var(--fg); color: var(--surface); }
|
||||
.menu-trigger:hover { background: var(--accent); border-color: var(--accent); color: var(--surface); }
|
||||
.menu-trigger svg { width: 20px; height: 20px; }
|
||||
.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; transition: opacity .2s ease; }
|
||||
.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; align-items: center; justify-content: space-between; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
|
||||
.menu-links { display: grid; margin-top: 34px; }
|
||||
.menu-links a { min-height: 70px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); font-family: var(--font-display); font-size: clamp(27px, 4vw, 38px); }
|
||||
.menu-links a:hover { color: var(--accent); }
|
||||
.menu-foot { margin-top: auto; padding-top: 24px; color: var(--muted); }
|
||||
|
||||
.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; }
|
||||
.deck-slide-link { min-height: 44px; display: inline-flex; align-items: center; font-weight: 700; border-bottom: 1px solid var(--fg); }
|
||||
.deck-slide-link:hover { color: var(--accent); border-color: var(--accent); }
|
||||
.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); }
|
||||
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--gap-xl); padding-bottom: var(--gap-xl); }
|
||||
.footer-brand p { max-width: 34ch; margin: 14px 0 0; }
|
||||
.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; text-underline-offset: 4px; }
|
||||
.footer-bottom { padding-top: 22px; border-top: 1px solid var(--border); 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; }
|
||||
.footer-grid { grid-template-columns: 1fr 1fr; }
|
||||
.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; }
|
||||
.nav-action { display: none; }
|
||||
.footer-grid { grid-template-columns: 1fr; gap: 28px; }
|
||||
}
|
||||
@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>
|
||||
<div class="nav-tools">
|
||||
<a class="nav-action" href="login.html" data-od-id="login-link">تسجيل الدخول</a>
|
||||
<button class="menu-trigger" id="menuTrigger" aria-label="فتح القائمة" aria-expanded="false" aria-controls="siteMenu" data-od-id="menu-button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"/></svg></button>
|
||||
</div>
|
||||
</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><a class="deck-slide-link" href="post-locked.html">شاهد المعاينة ←</a></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><a class="deck-slide-link" href="article-agent-guide.html">ابدأ القراءة ←</a></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><a class="deck-slide-link" href="subscription.html">شاهد للأعضاء ←</a></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>
|
||||
<a class="btn btn-primary" href="subscription.html" data-od-id="membership-cta">شاهد الأسعار والمزايا</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="pagefoot" data-od-id="footer">
|
||||
<div class="container">
|
||||
<div class="footer-grid">
|
||||
<div class="footer-brand"><a class="logo" href="#top"><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="#catalog">المكتبة</a><a href="#topics">المسارات</a><a href="article-agent-guide.html">أحدث المقالات</a></div>
|
||||
<div class="footer-col"><strong>العضوية</strong><a href="subscription.html">الأسعار والمزايا</a><a href="login.html">تسجيل الدخول</a><a href="subscription.html#faq">الأسئلة الشائعة</a></div>
|
||||
<div class="footer-col"><strong>أنور بي آي</strong><a href="#top">عن المنصة</a><a href="mailto:hello@anwarpi.ai">تواصل معنا</a><a href="privacy.html">الخصوصية</a></div>
|
||||
</div>
|
||||
<div class="row-between footer-bottom"><span>© أنور بي آي 2026 · تعلّم بوضوح</span><span class="meta">العربية أولاً · خصوصيتك محفوظة</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="#top"><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" aria-label="قائمة الموقع"><a href="#catalog">المكتبة <span>←</span></a><a href="#topics">مسارات التعلّم <span>←</span></a><a href="article-agent-guide.html">مقال الأسبوع <span>←</span></a><a href="subscription.html">العضوية والأسعار <span>←</span></a></nav>
|
||||
<div class="menu-foot"><a class="btn btn-secondary" href="login.html">تسجيل الدخول</a><p>محتوى عربي عملي، بلا ضجيج.</p></div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<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 menu = document.getElementById('siteMenu');
|
||||
const menuTrigger = document.getElementById('menuTrigger');
|
||||
const menuClose = [...document.querySelectorAll('[data-menu-close]')];
|
||||
function setMenu(open) {
|
||||
menu.classList.toggle('open', open);
|
||||
menu.setAttribute('aria-hidden', String(!open));
|
||||
menuTrigger.setAttribute('aria-expanded', String(open));
|
||||
document.body.classList.toggle('modal-open', open);
|
||||
if (open) menu.querySelector('.menu-head [data-menu-close]').focus();
|
||||
else menuTrigger.focus();
|
||||
}
|
||||
menuTrigger.addEventListener('click', () => setMenu(true));
|
||||
menuClose.forEach(button => button.addEventListener('click', () => setMenu(false)));
|
||||
menu.querySelectorAll('a').forEach(link => link.addEventListener('click', () => setMenu(false)));
|
||||
|
||||
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') return;
|
||||
if (menu.classList.contains('open')) setMenu(false);
|
||||
else if (modal.classList.contains('open')) closeDialog();
|
||||
});
|
||||
document.getElementById('modalAction').addEventListener('click', closeDialog);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script type="application/json" id="speaker-notes">
|
||||
[]
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,78 @@
|
||||
<!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-login,.icon-btn{min-height:44px;border:1px solid var(--border);background:transparent;color:var(--fg);display:inline-grid;place-items:center}.nav-login{padding-inline:16px}.nav-login:hover,.icon-btn:hover{border-color:var(--fg);background:var(--fg-soft)}.icon-btn{width:46px}.menu-trigger{background:var(--fg);color:var(--surface);border-color:var(--fg)}.menu-trigger:hover{background:var(--accent);color:var(--surface);border-color:var(--accent)}
|
||||
.article-head{padding-block:clamp(58px,9vw,110px);border-bottom:1px solid var(--border)}.crumb{font:12px/1.5 var(--font-mono);color:var(--accent);margin:0 0 20px}.access-chip{display:inline-flex;align-items:center;min-height:34px;padding:6px 14px;border:1px solid var(--accent);color:var(--accent);font:12px/1.5 var(--font-mono);margin-bottom:22px}.article-head h1{font-size:clamp(48px,7.4vw,94px);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)}
|
||||
.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:72px 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:24px;margin-bottom:8px}.steps{counter-reset:step;list-style:none;padding:0}.steps li{counter-increment:step;display:grid;grid-template-columns:52px 1fr;gap:18px;padding:22px 0;border-top:1px solid var(--border)}.steps li::before{content:counter(step,decimal-leading-zero);font:14px/1.7 var(--font-mono);color:var(--accent)}
|
||||
.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:block;padding:11px 0;border-bottom:1px solid var(--border);color:var(--muted)}.toc a:hover{color:var(--fg)}.member-note{margin-top:28px;padding:22px;background:var(--fg);color:var(--surface)}.member-note p{color:color-mix(in oklch,var(--surface) 72%,transparent);font-size:14px}.btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center;padding:11px 20px;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);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)}
|
||||
.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-empty{color:var(--muted);padding:28px 0;border-bottom:1px solid var(--border)}.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;border-radius:0}.textarea{min-height:130px;resize:vertical}.input:focus,.textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}.form-status{min-height:24px;color:var(--accent);font-weight:700}
|
||||
.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:grid;margin-top:34px}.menu-links a{min-height:70px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);font-family:var(--font-display);font-size:clamp(27px,4vw,38px)}.menu-links a:hover{color:var(--accent)}.menu-foot{margin-top:auto;color:var(--muted)}
|
||||
@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-login{display:none}.article-head h1{font-size:48px}.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>
|
||||
<header class="topnav" data-od-id="topnav"><div class="container nav-inner"><a class="logo" href="arabic-ai-learning-catalog.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-login" href="login.html">تسجيل الدخول</a><button class="icon-btn menu-trigger" 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="access-chip" data-od-id="access-status">مقال مجاني · متاح بالكامل</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="btn btn-secondary" 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="memory">٤. الذاكرة ليست صندوقاً واحداً</h2>
|
||||
<p>احتفظ بحالة المهمة الحالية منفصلة عن المعرفة طويلة المدى. لا ترسل تاريخ المحادثة كله في كل مرة. استخرج فقط ما يحتاجه القرار التالي، واحتفظ بالمصادر بجوار الحقائق.</p>
|
||||
<h2 id="checklist">قائمة الفحص قبل التشغيل</h2>
|
||||
<ul><li>هل توجد نتيجة نهائية قابلة للتحقق؟</li><li>هل لكل أداة مدخلات وصلاحيات محددة؟</li><li>هل يستطيع الوكيل التوقف عند الفشل؟</li><li>هل العمليات الحساسة تحتاج موافقة؟</li><li>هل يمكنك إعادة تشغيل المهمة من السجل؟</li></ul>
|
||||
<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="#memory">هندسة الذاكرة</a><a href="#checklist">قائمة الفحص</a><div class="member-note"><strong>تريد النسخة العملية؟</strong><p>تشمل العضوية قالب حالة الوكيل وقائمة اختبار قابلة للتنزيل.</p><a class="btn btn-primary" href="subscription.html">شاهد مزايا العضوية</a></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"><p class="comment-empty" id="commentEmpty">كن أول من يضيف تعليقاً على هذا الدليل.</p></div><form class="comment-form" id="commentForm" novalidate data-od-id="comment-form"><div class="field"><label for="commentName">الاسم</label><input class="input" id="commentName" name="name" autocomplete="name" required /></div><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><div class="form-status" id="commentStatus" role="status"></div></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-model"><span>النماذج · ٨ دقائق</span><h3>ابدأ بالمهمة، لا باسم النموذج</h3><a href="arabic-ai-learning-catalog.html#catalog">اكتشف المقال ←</a></article><article class="related-card" data-od-id="related-rag"><span>الاسترجاع · ١٤ دقيقة</span><h3>اختبر المصدر قبل أن تلوم الإجابة</h3><a href="arabic-ai-learning-catalog.html#catalog">اكتشف المقال ←</a></article><article class="related-card" data-od-id="related-safety"><span>السلامة · قائمة فحص</span><h3>قبل أن تمنح الوكيل زر التنفيذ</h3><a href="subscription.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="arabic-ai-learning-catalog.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="arabic-ai-learning-catalog.html#topics">المسارات</a></div><div class="footer-col"><strong>العضوية</strong><a href="subscription.html">الأسعار والمزايا</a><a href="login.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="arabic-ai-learning-catalog.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="article-agent-guide.html">مقال الأسبوع <span>←</span></a><a href="subscription.html">العضوية والأسعار <span>←</span></a></nav><div class="menu-foot"><a class="btn btn-secondary" href="login.html">تسجيل الدخول</a></div></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?'تم الحفظ ✓':'احفظ للعودة لاحقاً'});
|
||||
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 name=form.elements.name.value.trim(),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=name;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);document.getElementById('commentEmpty')?.remove();list.append(item);form.reset();status.textContent='تمت إضافة تعليقك في هذه المعاينة.'});})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
@@ -0,0 +1,194 @@
|
||||
/* ============================================================
|
||||
AnwarPi — shared motion & brand layer
|
||||
Loaded after each page's inline styles; tokens stay in-page.
|
||||
============================================================ */
|
||||
|
||||
/* ---- Shared palette: cool light on deep blue-black ---- */
|
||||
: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);
|
||||
}
|
||||
|
||||
/* ---- Shared responsive safeguards ---- */
|
||||
html, body { max-width: 100%; overflow-x: clip; }
|
||||
img, svg, video { height: auto; }
|
||||
main, section, .container, .grid, [class*="grid"], [class*="layout"] { min-width: 0; }
|
||||
code, pre, bdi { overflow-wrap: anywhere; }
|
||||
pre, table { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
|
||||
:focus-visible { outline-color: var(--accent); }
|
||||
|
||||
@media (pointer: coarse) {
|
||||
a, button, input, select, textarea, summary, .btn, .icon-btn { min-height: 44px; }
|
||||
}
|
||||
|
||||
@media (max-width: 920px) {
|
||||
:root { --gutter: 22px; }
|
||||
.container { width: 100%; }
|
||||
|
||||
/* Keep primary navigation visible on phones and tablets. */
|
||||
.topnav .nav-inner,
|
||||
.topnav .topnav-inner {
|
||||
flex-wrap: wrap;
|
||||
gap: 0 16px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.topnav .logo,
|
||||
.topnav .nav-tools { margin-bottom: 10px; }
|
||||
.topnav .logo { min-height: 50px; }
|
||||
input, select, textarea { min-height: 48px; font-size: 16px; }
|
||||
.footer-col a { min-height: 44px; display: flex; align-items: center; }
|
||||
.section-head { gap: 20px; }
|
||||
.demo-strip { padding-inline: var(--gutter); }
|
||||
.table-wrap, .billing-table { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
|
||||
.topnav .nav-links,
|
||||
.topnav .topnav-inner > nav {
|
||||
display: flex;
|
||||
order: 3;
|
||||
flex: 0 0 calc(100% + (var(--gutter) * 2));
|
||||
gap: 8px;
|
||||
margin-inline: calc(var(--gutter) * -1);
|
||||
padding-inline: var(--gutter);
|
||||
overflow-x: auto;
|
||||
overscroll-behavior-inline: contain;
|
||||
scrollbar-width: none;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
.topnav .nav-links::-webkit-scrollbar,
|
||||
.topnav .topnav-inner > nav::-webkit-scrollbar { display: none; }
|
||||
.topnav .nav-links a,
|
||||
.topnav .topnav-inner > nav a {
|
||||
flex: none;
|
||||
min-height: 52px;
|
||||
padding-inline: 12px;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
}
|
||||
.topnav a[aria-current="page"] {
|
||||
position: relative;
|
||||
color: var(--fg);
|
||||
font-weight: 700;
|
||||
}
|
||||
.topnav a[aria-current="page"]::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset-inline: 12px;
|
||||
bottom: 5px;
|
||||
height: 3px;
|
||||
border-radius: 999px;
|
||||
background: var(--accent);
|
||||
}
|
||||
.topnav .nav-links + .nav-tools .menu-trigger,
|
||||
.topnav .topnav-inner > nav + .nav-tools .menu-trigger { display: none; }
|
||||
|
||||
.menu-drawer { width: min(520px, 92vw); }
|
||||
.dialog-card, .modal-card { max-width: calc(100vw - 36px); max-height: calc(100dvh - 36px); overflow-y: auto; }
|
||||
}
|
||||
|
||||
@media (max-width: 620px) {
|
||||
:root { --gutter: 18px; }
|
||||
body { line-height: 1.7; }
|
||||
h1 { font-size: clamp(38px, 11vw, 50px) !important; overflow-wrap: normal; word-break: normal; }
|
||||
h2 { overflow-wrap: normal; word-break: normal; }
|
||||
.topnav .logo { font-size: 20px; }
|
||||
.topnav .nav-return { display: inline-flex !important; min-height: 44px; align-items: center; font-size: 13px; padding-inline: 4px; }
|
||||
.topnav .nav-inner,
|
||||
.topnav .topnav-inner { gap: 0 10px; }
|
||||
.topnav .nav-links,
|
||||
.topnav .topnav-inner > nav { gap: 4px; }
|
||||
.topnav .nav-links a,
|
||||
.topnav .topnav-inner > nav a { padding-inline: 10px; }
|
||||
.hero-cta, .dialog-actions, .form-actions { align-items: stretch; gap: 12px; }
|
||||
.hero-cta .btn, .dialog-actions .btn, .form-actions .btn { width: 100%; }
|
||||
.pagefoot { padding-block: 40px; }
|
||||
.footer-bottom { gap: 12px; }
|
||||
.card, .membership-card, .paywall, .plan, .team-contact { padding-inline: 20px; }
|
||||
.dialog-card, .modal-card, .dialog-panel, .modal-panel { max-width: calc(100vw - 28px); }
|
||||
}
|
||||
|
||||
/* ---- Brand mark: real logo image replaces the geometric span ---- */
|
||||
img.logo-mark {
|
||||
width: 30px;
|
||||
height: 34px;
|
||||
object-fit: contain;
|
||||
transform: none;
|
||||
background: none;
|
||||
border-radius: 4px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
/* ---- Text selection on dark canvas ---- */
|
||||
::selection { background: color-mix(in oklch, var(--accent) 28%, transparent); }
|
||||
|
||||
/* ---- Button hover: light-sweep + lift (AnwarPi "light" motif) ---- */
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.btn, .btn-primary, .btn-secondary, .btn-ghost, .icon-btn {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
|
||||
}
|
||||
.btn::after, .btn-primary::after, .btn-secondary::after, .btn-ghost::after, .icon-btn::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset-block: 0;
|
||||
inset-inline-start: -45%;
|
||||
width: 34%;
|
||||
background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.45) 50%, transparent 100%);
|
||||
transform: skewX(-18deg);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.btn:hover::after, .btn-primary:hover::after, .btn-secondary:hover::after,
|
||||
.btn-ghost:hover::after, .icon-btn:hover::after {
|
||||
animation: anw-sweep 0.85s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.btn:hover, .btn-primary:hover, .btn-secondary:hover, .btn-ghost:hover, .icon-btn:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.btn-primary:hover, .btn:hover {
|
||||
box-shadow: 0 8px 28px color-mix(in oklch, var(--accent) 30%, transparent);
|
||||
}
|
||||
.btn:active, .btn-primary:active, .btn-secondary:active, .btn-ghost:active, .icon-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@keyframes anw-sweep {
|
||||
0% { opacity: 1; inset-inline-start: -45%; }
|
||||
100% { opacity: 1; inset-inline-start: 118%; }
|
||||
}
|
||||
|
||||
/* ---- Scroll reveal (driven by anwarpi.js) ---- */
|
||||
[data-anw] {
|
||||
transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
.anw-anim [data-anw]:not(.anw-in) {
|
||||
opacity: 0;
|
||||
transform: translateY(18px);
|
||||
}
|
||||
|
||||
/* ---- WebGL canvas sits behind everything, above the root background ---- */
|
||||
#anwarpi-bg {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.9s ease;
|
||||
}
|
||||
|
||||
/* ---- Hero brand mark: the beam logo, black field dissolved into the canvas ---- */
|
||||
.hero-logo {
|
||||
display: block;
|
||||
width: 68px;
|
||||
height: auto;
|
||||
border-radius: 6px;
|
||||
mix-blend-mode: screen; /* drops the jpg's black field — only the beams glow */
|
||||
margin-block-end: 26px;
|
||||
}
|
||||
|
||||
/* ---- Dark-theme correction: scrims must dim with black, not --fg (now white) ---- */
|
||||
.dialog-scrim, .menu-scrim, .modal { background: rgba(5, 5, 5, 0.68); }
|
||||
@@ -0,0 +1,215 @@
|
||||
/* AnwarPi — WebGL light-beam background + scroll reveal.
|
||||
Loads deferred on every page; no-ops gracefully if WebGL is unavailable. */
|
||||
(function () {
|
||||
"use strict";
|
||||
var reduced = false;
|
||||
try { reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; } catch (e) {}
|
||||
var staticMode = false;
|
||||
try { staticMode = new URLSearchParams(location.search).has("static"); } catch (e) {}
|
||||
|
||||
/* ================= WebGL beam field ================= */
|
||||
function initWebGL() {
|
||||
var canvas = document.createElement("canvas");
|
||||
canvas.id = "anwarpi-bg";
|
||||
canvas.setAttribute("aria-hidden", "true");
|
||||
var first = document.body.firstChild;
|
||||
if (first) document.body.insertBefore(canvas, first);
|
||||
else document.body.appendChild(canvas);
|
||||
|
||||
var gl = canvas.getContext("webgl", { antialias: false, alpha: false, depth: false, stencil: false })
|
||||
|| canvas.getContext("experimental-webgl");
|
||||
if (!gl) { canvas.parentNode.removeChild(canvas); return; }
|
||||
|
||||
var vertSrc = "attribute vec2 p;void main(){gl_Position=vec4(p,0.0,1.0);}";
|
||||
var fragSrc = [
|
||||
"precision highp float;",
|
||||
"uniform float uTime;",
|
||||
"uniform vec2 uRes;",
|
||||
"uniform vec2 uMouse;",
|
||||
"float hash(float n){return fract(sin(n*127.1)*43758.5453);}",
|
||||
"void main(){",
|
||||
" vec2 uv = gl_FragCoord.xy / uRes;", /* y: 0 bottom -> 1 top */
|
||||
" float t = uTime * 0.06;",
|
||||
" float v = 0.0;",
|
||||
/* vertical light beams — the AnwarPi "A" ray motif */
|
||||
" for(int i = 0; i < 7; i++){",
|
||||
" float fi = float(i);",
|
||||
" float x = 0.08 + 0.84 * hash(fi + 1.0) + 0.05 * sin(t * 0.7 + fi * 2.4);",
|
||||
" x += (uMouse.x - x) * 0.16;",
|
||||
" float w = 0.016 + 0.05 * hash(fi + 7.0);",
|
||||
" float beam = exp(-pow((uv.x - x) / w, 2.0));",
|
||||
" float flick = 0.55 + 0.45 * sin(t * 1.1 + fi * 1.7);",
|
||||
" flick *= 1.0 + 0.55 * exp(-pow((uv.x - uMouse.x) / 0.24, 2.0));",
|
||||
" float fade = smoothstep(1.0, 0.12, uv.y);", /* brighter toward the bottom, like the mark */
|
||||
" v += beam * flick * fade * (0.10 + 0.17 * hash(fi + 13.0));",
|
||||
" }",
|
||||
/* cursor halo — the light follows the visitor */
|
||||
" v += 0.11 * exp(-length((uv - uMouse) * vec2(1.0, 0.9)) * 4.5);",
|
||||
/* broad floor glow + soft vignette */
|
||||
" v += 0.15 * exp(-uv.y * 2.4);",
|
||||
" v *= smoothstep(1.3, 0.55, uv.y);",
|
||||
" v = clamp(v, 0.0, 1.0);",
|
||||
/* deep blue-black base, aligned with the shared --bg token */
|
||||
" vec3 base = vec3(0.0005, 0.0618, 0.0896);",
|
||||
" gl_FragColor = vec4(base + vec3(v), 1.0);",
|
||||
"}"
|
||||
].join("\n");
|
||||
|
||||
function compile(type, src) {
|
||||
var s = gl.createShader(type);
|
||||
gl.shaderSource(s, src);
|
||||
gl.compileShader(s);
|
||||
if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) { gl.deleteShader(s); return null; }
|
||||
return s;
|
||||
}
|
||||
var vs = compile(gl.VERTEX_SHADER, vertSrc);
|
||||
var fs = compile(gl.FRAGMENT_SHADER, fragSrc);
|
||||
if (!vs || !fs) { canvas.parentNode.removeChild(canvas); return; }
|
||||
var prog = gl.createProgram();
|
||||
gl.attachShader(prog, vs); gl.attachShader(prog, fs); gl.linkProgram(prog);
|
||||
if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) { canvas.parentNode.removeChild(canvas); return; }
|
||||
gl.useProgram(prog);
|
||||
|
||||
var buf = gl.createBuffer();
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, buf);
|
||||
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
|
||||
var loc = gl.getAttribLocation(prog, "p");
|
||||
gl.enableVertexAttribArray(loc);
|
||||
gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);
|
||||
var uTime = gl.getUniformLocation(prog, "uTime");
|
||||
var uRes = gl.getUniformLocation(prog, "uRes");
|
||||
var uMouse = gl.getUniformLocation(prog, "uMouse");
|
||||
|
||||
/* ---- pointer reaction: beams lean toward the cursor, halo follows ---- */
|
||||
var mouseTX = 0.5, mouseTY = 0.55, mouseX = 0.5, mouseY = 0.55;
|
||||
if (!reduced && !staticMode) {
|
||||
window.addEventListener("pointermove", function (e) {
|
||||
if (e.pointerType === "touch") return;
|
||||
mouseTX = e.clientX / window.innerWidth;
|
||||
mouseTY = 1 - e.clientY / window.innerHeight;
|
||||
}, { passive: true });
|
||||
document.addEventListener("pointerleave", function () {
|
||||
mouseTX = 0.5; mouseTY = 0.55;
|
||||
});
|
||||
}
|
||||
gl.uniform2f(uMouse, mouseX, mouseY);
|
||||
|
||||
var DPR_CAP = 1.5;
|
||||
function resize() {
|
||||
var dpr = Math.min(window.devicePixelRatio || 1, DPR_CAP);
|
||||
var w = Math.max(1, Math.floor(window.innerWidth * dpr));
|
||||
var h = Math.max(1, Math.floor(window.innerHeight * dpr));
|
||||
if (canvas.width !== w || canvas.height !== h) {
|
||||
canvas.width = w; canvas.height = h;
|
||||
gl.viewport(0, 0, w, h);
|
||||
}
|
||||
gl.uniform2f(uRes, canvas.width, canvas.height);
|
||||
}
|
||||
|
||||
var start = (window.performance && performance.now()) || 0;
|
||||
function draw(now) {
|
||||
mouseX += (mouseTX - mouseX) * 0.07;
|
||||
mouseY += (mouseTY - mouseY) * 0.07;
|
||||
gl.uniform1f(uTime, (now - start) / 1000);
|
||||
gl.uniform2f(uMouse, mouseX, mouseY);
|
||||
gl.drawArrays(gl.TRIANGLES, 0, 3);
|
||||
}
|
||||
|
||||
resize();
|
||||
draw(start); /* paint one frame synchronously so screenshots capture the field */
|
||||
|
||||
/* ---- article reading mode: fade the field down once past the header ---- */
|
||||
if (document.body.hasAttribute("data-anw-dim")) {
|
||||
var first = document.querySelector("main") && document.querySelector("main").firstElementChild;
|
||||
var dimFrom = first ? first.offsetHeight : 420;
|
||||
var onScroll = function () {
|
||||
canvas.style.opacity = (window.scrollY || 0) > dimFrom ? "0.22" : "1";
|
||||
};
|
||||
window.addEventListener("scroll", onScroll, { passive: true });
|
||||
onScroll();
|
||||
}
|
||||
|
||||
if (reduced || staticMode) {
|
||||
window.addEventListener("resize", function () { resize(); draw(start); });
|
||||
return;
|
||||
}
|
||||
var running = true;
|
||||
function loop(now) {
|
||||
if (running) { draw(now); }
|
||||
window.requestAnimationFrame(loop);
|
||||
}
|
||||
window.requestAnimationFrame(loop);
|
||||
document.addEventListener("visibilitychange", function () {
|
||||
running = !document.hidden;
|
||||
if (running) start = (window.performance && performance.now()) - 0; /* keep phase simple */
|
||||
});
|
||||
}
|
||||
|
||||
/* ================= Scroll reveal ================= */
|
||||
function initReveal() {
|
||||
if (reduced || staticMode) return;
|
||||
var vh = window.innerHeight || 800;
|
||||
var candidates = document.querySelectorAll(
|
||||
"main section > .container > *, main > .container > *, main .container > .grid > *, main .grid > *"
|
||||
);
|
||||
var seen = {};
|
||||
var targets = [];
|
||||
for (var i = 0; i < candidates.length; i++) {
|
||||
var el = candidates[i];
|
||||
if (seen[el.anwId]) continue;
|
||||
if (el.closest(".menu-panel, .modal, dialog")) continue;
|
||||
var r = el.getBoundingClientRect();
|
||||
if (r.top < vh * 0.92) continue; /* above the fold: show instantly, never hide */
|
||||
el.anwId = "anw" + i;
|
||||
seen[el.anwId] = 1;
|
||||
el.setAttribute("data-anw", "");
|
||||
el.style.transitionDelay = ((i % 3) * 70) + "ms";
|
||||
targets.push(el);
|
||||
}
|
||||
if (!targets.length) return;
|
||||
document.documentElement.classList.add("anw-anim");
|
||||
/* Force reveal after a safety window so nothing can stay hidden */
|
||||
window.setTimeout(function () {
|
||||
targets.forEach(function (el) { el.classList.add("anw-in"); });
|
||||
}, 3000);
|
||||
if (!("IntersectionObserver" in window)) return;
|
||||
var io = new IntersectionObserver(function (entries) {
|
||||
entries.forEach(function (entry) {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add("anw-in");
|
||||
io.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.1, rootMargin: "0px 0px -8% 0px" });
|
||||
targets.forEach(function (el) { io.observe(el); });
|
||||
}
|
||||
|
||||
/* ================= Current page in mobile navigation ================= */
|
||||
function initActiveNav() {
|
||||
var topnav = document.querySelector(".topnav");
|
||||
if (!topnav) return;
|
||||
|
||||
var page = (location.pathname.split("/").pop() || "index.html").toLowerCase();
|
||||
var selector = {
|
||||
"index.html": ".logo",
|
||||
"arabic-ai-learning-catalog.html": "nav a[href^='#catalog']",
|
||||
"arabic-ai-learning-catalog-v2.html": "nav a[href^='#catalog']",
|
||||
"article-agent-guide.html": "nav a[href='article-agent-guide.html']",
|
||||
"post-locked.html": "nav a[href='article-agent-guide.html']",
|
||||
"post-unlocked.html": "nav a[href='article-agent-guide.html']",
|
||||
"subscription.html": "nav a[href='#exclusive-guides']",
|
||||
"vip-onboarding.html": "nav a[href='subscription.html']",
|
||||
"account-settings.html": ".nav-account",
|
||||
"login.html": ".logo",
|
||||
"forgot-password.html": ".logo",
|
||||
"privacy.html": "nav a[href='privacy.html']"
|
||||
}[page];
|
||||
|
||||
var active = selector && topnav.querySelector(selector);
|
||||
if (active) active.setAttribute("aria-current", "page");
|
||||
}
|
||||
|
||||
function boot() { initActiveNav(); initWebGL(); initReveal(); }
|
||||
if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", boot);
|
||||
else boot();
|
||||
})();
|
||||
@@ -0,0 +1,25 @@
|
||||
# أنور بي آي (AnwarPi) — Brand specification
|
||||
|
||||
```css
|
||||
:root {
|
||||
--bg: oklch(16% 0.03 225); /* deep blue-black canvas */
|
||||
--surface: oklch(22% 0.04 220); /* raised blue-black cards */
|
||||
--fg: oklch(96% 0.015 210); /* cool white, matching the beam highlight */
|
||||
--muted: oklch(74% 0.03 215); /* readable cool gray-blue */
|
||||
--border: oklch(36% 0.05 215); /* visible blue-gray hairlines */
|
||||
--accent: oklch(78% 0.17 190); /* vivid cyan-teal action color */
|
||||
--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;
|
||||
}
|
||||
```
|
||||
|
||||
- The logo remains the anchor: a black field and silver-white beams, now placed in a cool blue-black environment rather than an all-gray page.
|
||||
- The mark (`assets/anwarpi-logo.jpg`) is a light-ray "A": bright near-white at its base fading to dim gray at the apex — mirrored by the WebGL background (rising beams, brighter toward the bottom).
|
||||
- Dark-first layouts: cool-white text on blue-black, clearly separated surfaces, and visible blue-gray rules.
|
||||
- The single accent is cyan-teal: primary controls gain an unmistakable action color while white remains reserved for content and the logo beams.
|
||||
- Inverted panels (demo strips, membership block) flip to `--fg` background with `--surface` text; scrims dim with black, never white.
|
||||
- Latin technical terms and numerics are directionally isolated with `bdi`.
|
||||
- Motion layer is shared: `assets/anwarpi.css` + `assets/anwarpi.js` (WebGL beam field, IntersectionObserver reveals, light-sweep hovers). Both respect `prefers-reduced-motion`; append `?static` to disable animation for captures.
|
||||
|
||||
أنور بي آي هو نظام داكن واضح: خلفية زرقاء سوداء، وأشعة فضية من الشعار، ولمسة سماوية تركوازية توجه العين نحو الأفعال المهمة دون ضوضاء.
|
||||
@@ -0,0 +1,34 @@
|
||||
<!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);
|
||||
--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)}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}h1{font-family:var(--font-display);text-wrap:balance}p{text-wrap:pretty}.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
|
||||
.topnav{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-size:23px;font-weight:700}.nav-return{min-height:44px;display:inline-flex;align-items:center;color:var(--muted);border-bottom:1px solid transparent}.nav-return:hover{color:var(--fg);border-color:var(--fg)}
|
||||
.reset{min-height:calc(100dvh - 142px);display:grid;place-items:center;padding:64px var(--gutter)}.reset-card{width:min(520px,100%);border:1px solid var(--border);background:var(--surface);padding:clamp(28px,6vw,54px)}.eyebrow{font:11px/1.5 var(--font-mono);color:var(--accent);margin:0 0 18px}.reset-card h1{font-size:clamp(38px,6vw,58px);line-height:1.12;margin:0}.lead{color:var(--muted);font-size:18px;margin:16px 0 30px}.field{display:grid;gap:8px}.field label{font-size:13px;color:var(--muted)}.input{width:100%;min-height:52px;border:1px solid var(--border);background:var(--bg);color:var(--fg);padding:13px 14px}.input:focus{outline:2px solid var(--accent);outline-offset:1px}.btn{width:100%;min-height:50px;margin-top:18px;border:1px solid var(--accent);background:var(--accent);color:var(--surface);font-weight:700;padding:12px 20px}.btn:hover{background:color-mix(in oklch,var(--accent) 86%,black)}.status{min-height:26px;margin:16px 0 0;color:var(--fg)}.back{min-height:44px;display:inline-flex;align-items:center;margin-top:18px;color:var(--muted);text-decoration:underline;text-underline-offset:4px}.back:hover{color:var(--fg)}.pagefoot{padding-block:26px;border-top:1px solid var(--border);color:var(--muted);text-align:center;font-size:13px}
|
||||
@media(max-width:620px){:root{--gutter:18px}.nav-return{display:none}.reset{padding-block:40px;align-items:start}.reset-card{padding:26px 20px}}
|
||||
</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 nav-inner"><a class="logo" href="arabic-ai-learning-catalog.html" data-od-id="brand"><img class="logo-mark" src="assets/anwarpi-logo.jpg" alt="" width="1200" height="1352">أنور بي آي</a><a class="nav-return" href="login.html">العودة إلى تسجيل الدخول</a></div></header>
|
||||
<main class="reset" data-od-id="password-reset"><section class="reset-card" data-od-id="reset-card"><p class="eyebrow">استعادة الحساب</p><h1 data-od-id="reset-title">أرسل رابطاً جديداً.</h1><p class="lead">أدخل بريد حسابك وسنجهّز طلب إعادة تعيين كلمة المرور.</p><form id="resetForm" novalidate data-od-id="reset-form"><div class="field"><label for="resetEmail">البريد الإلكتروني</label><input class="input" id="resetEmail" name="email" type="email" inputmode="email" autocomplete="email" dir="ltr" required /></div><button class="btn" type="submit" data-od-id="reset-submit">إرسال رابط الاستعادة</button><p class="status" id="resetStatus" role="status" aria-live="polite"></p></form><a class="back" href="login.html">تذكرت كلمة المرور؟ سجّل الدخول</a></section></main>
|
||||
<footer class="pagefoot" data-od-id="footer"><div class="container">لن نكشف ما إذا كان البريد مسجلاً لحماية الحسابات.</div></footer>
|
||||
<script>
|
||||
(()=>{const form=document.getElementById('resetForm'),status=document.getElementById('resetStatus');form.addEventListener('submit',event=>{event.preventDefault();if(!form.checkValidity()){status.textContent='أدخل بريداً إلكترونياً صحيحاً.';form.reportValidity();return}status.textContent='إذا كان البريد مسجلاً، فسيصلك رابط الاستعادة بعد ربط خدمة البريد.';form.reset()})})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+80
@@ -0,0 +1,80 @@
|
||||
<!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}
|
||||
a{color:inherit;text-decoration:none} button{font:inherit;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)}
|
||||
.hero{padding-block:clamp(64px,9vw,120px);border-bottom:1px solid var(--border)}
|
||||
.crumb{font:12px/1.5 var(--font-mono);color:var(--accent);margin:0 0 20px}
|
||||
.hero h1{font-size:clamp(44px,6.5vw,84px);line-height:1.08;letter-spacing:-.025em;max-width:14ch;margin:0}
|
||||
.hero .lead{font-size:clamp(18px,1.8vw,22px);line-height:1.7;color:var(--muted);max-width:56ch;margin:26px 0 0}
|
||||
.screens{padding-block:80px;border-bottom:1px solid var(--border)}
|
||||
.screen-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--fg)}
|
||||
.screen-card{display:flex;flex-direction:column;min-height:420px;padding:30px 0;border-bottom:1px solid var(--border)}
|
||||
.screen-card + .screen-card{margin-inline-start:32px}
|
||||
.screen-index{font:12px/1.5 var(--font-mono);color:var(--accent)}
|
||||
.screen-card h2{font-size:30px;margin:22px 0 10px;max-width:14ch}
|
||||
.screen-card p{color:var(--muted);margin:0 0 20px;flex:1}
|
||||
.screen-features{list-style:none;margin:0 0 28px;padding:0}
|
||||
.screen-features li{min-height:34px;display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);border-bottom:1px solid var(--border)}
|
||||
.screen-features li::before{content:"";width:7px;height:7px;background:var(--accent);transform:rotate(45deg);flex:none}
|
||||
.btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center;padding:11px 22px;border:1px solid var(--border);font-weight:700}
|
||||
.btn:hover{border-color:var(--fg);background:var(--fg-soft)}
|
||||
.btn .arrow{margin-inline-start:10px}
|
||||
.how{padding-block:80px}
|
||||
.how h2{font-size:clamp(34px,4.5vw,52px);margin:0 0 34px}
|
||||
.how ol{counter-reset:h;padding:0;margin:0;border-top:1px solid var(--fg)}
|
||||
.how li{counter-increment:h;display:grid;grid-template-columns:64px 1fr;gap:20px;padding:22px 0;border-bottom:1px solid var(--border)}
|
||||
.how li::before{content:"٠" counter(h,arabic-indic);font-family:var(--font-display);font-size:32px;color:var(--accent);line-height:1.2}
|
||||
.how li div{align-self:center}
|
||||
.pagefoot{padding-block:54px;color:var(--muted)}
|
||||
.footer-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:28px;border-top:1px solid var(--border);font-size:13px}
|
||||
@media(max-width:920px){:root{--gutter:22px}.nav-links{display:none}.screen-grid{grid-template-columns:1fr}.screen-card{min-height:0}.screen-card + .screen-card{margin-inline-start:0}}
|
||||
@media(max-width:620px){:root{--gutter:18px}.hero h1{font-size:48px}.screens,.how{padding-block:56px}.footer-grid{grid-template-columns:1fr;gap:28px}}
|
||||
@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 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></header>
|
||||
<main>
|
||||
<section class="hero" data-od-id="hero"><div class="container">
|
||||
<p class="crumb">نماذج تجربة · مسار العضوية</p>
|
||||
<h1 data-od-id="hero-title">كيف يرى المستخدم المحتوى قبل وبعد الاشتراك</h1>
|
||||
<p class="lead">ثلاث شاشات مترابطة: الزائر يرى معاينة مجانية وقفل الوصول للمتقدم، والمشترك يرى الدليل كاملاً بملفات العمل، ثم يدير حسابه من الإعدادات — بما فيها كلمة المرور وإلغاء الاشتراك.</p>
|
||||
</div></section>
|
||||
<section class="screens" data-od-id="screens"><div class="container"><div class="screen-grid">
|
||||
<article class="screen-card" data-od-id="screen-locked"><span class="screen-index">٠١ · زائر غير مشترك</span><h2>الدليل المقفل</h2><p>الزائر المسجَّل فقط يقرأ المقدمة والقسم الأول، ثم تصلك نقطة القفل: ما المتبقي بالضبط، وسعر واحد واضح، وزر اشتراك واحد.</p><ul class="screen-features"><li>معاينة مجانية محدودة</li><li>قائمة الأقسام المقفلة بأيقونات</li><li>بطاقة اشتراك عند نقطة القفل</li></ul><a class="btn" href="post-locked.html">افتح النموذج<span class="arrow" aria-hidden="true">←</span></a></article>
|
||||
<article class="screen-card" data-od-id="screen-unlocked"><span class="screen-index">٠٢ · مشترك فعّال</span><h2>الدليل المفتوح</h2><p>نفس الدليل كما يراه المشترك: كل الأقسام مكشوفة، شريط تقدّم في المسار، وملفات العمل قابلة للتنزيل بضغطة واحدة.</p><ul class="screen-features"><li>وصول كامل بلا حواف قفل</li><li>تقدّمك في مسار الوكلاء</li><li>تنزيل قالب الحالة وقائمة الفحص</li></ul><a class="btn" href="post-unlocked.html">افتح النموذج<span class="arrow" aria-hidden="true">←</span></a></article>
|
||||
<article class="screen-card" data-od-id="screen-settings"><span class="screen-index">٠٣ · إدارة الحساب</span><h2>الإعدادات والعضوية</h2><p>أربع أقسام تعمل فعلاً: الملف الشخصي، تغيير كلمة المرور بتحقق فوري، تفضيلات الرسائل، وإلغاء الاشتراك مع تأكيد واضح.</p><ul class="screen-features"><li>تغيير كلمة المرور بشروط ظاهرة</li><li>تبديل التفضيلات وحفظها</li><li>إلغاء يؤجل التجديد ولا يقطع الوصول فوراً</li></ul><a class="btn" href="account-settings.html">افتح النموذج<span class="arrow" aria-hidden="true">←</span></a></article>
|
||||
</div></div></section>
|
||||
<section class="how" data-od-id="how-to-explore"><div class="container">
|
||||
<h2>جرّب المسار كاملاً</h2>
|
||||
<ol>
|
||||
<li><div>افتح <a href="post-locked.html" style="text-decoration:underline;text-underline-offset:4px;font-weight:700">الدليل المقفل</a> كزائر — لاحظ أن الفهرس الجانبي يُظهر الأقسام المقفلة بدل إخفائها، فيعرف الزائر ماذا يفوّت بالضبط.</div></li>
|
||||
<li><div>افتح <a href="post-unlocked.html" style="text-decoration:underline;text-underline-offset:4px;font-weight:700">الدليل المفتوح</a> كعضو — نفس المادة بلا نقطة قفل، مع بطاقة تقدّم وملفات تنزيل تعمل.</div></li>
|
||||
<li><div>من <a href="account-settings.html" style="text-decoration:underline;text-underline-offset:4px;font-weight:700">الإعدادات</a> جرّب كلمة المرور ببيانات خاطئة ثم صحيحة، ثم الإلغاء: تأكيد واضح، حالة العضوية تتغير، وزر إعادة الاشتراك يظهر.</div></li>
|
||||
</ol>
|
||||
</div></section>
|
||||
</main>
|
||||
<footer class="pagefoot" data-od-id="footer"><div class="container"><div class="footer-bottom"><span>© أنور بي آي ٢٠٢٦</span><span>نموذج تجربة — البيانات لا تُرسل لأي خادم</span></div></div></footer>
|
||||
</body>
|
||||
</html>
|
||||
+36
@@ -0,0 +1,36 @@
|
||||
<!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{-webkit-text-size-adjust:100%}body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.7 var(--font-body);text-rendering:optimizeLegibility}body.locked{overflow:hidden}a{color:inherit;text-decoration:none}button,input{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{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-return{min-height:44px;display:inline-flex;align-items:center;color:var(--muted);border-bottom:1px solid transparent}.nav-return:hover{color:var(--fg);border-color:var(--fg)}.icon-btn{width:46px;height:46px;display:grid;place-items:center;border:1px solid var(--fg);background:var(--fg);color:var(--surface)}.icon-btn:hover{background:var(--accent);border-color:var(--accent);color:var(--surface)}.nav-tools{display:flex;align-items:center;gap:14px}
|
||||
.auth{min-height:calc(100vh - 70px);display:grid;grid-template-columns:1fr 1fr}.auth-story{padding:clamp(54px,8vw,104px) max(var(--gutter),calc((100vw - var(--container))/2 + var(--gutter)));padding-inline-end:clamp(48px,8vw,100px);background:var(--fg);color:var(--surface);display:flex;flex-direction:column;justify-content:space-between}.eyebrow{font:11px/1.5 var(--font-mono);letter-spacing:.05em;color:var(--accent);margin:0 0 20px}.auth-story .eyebrow{color:var(--surface);opacity:.68}.auth-story h1{font-size:clamp(46px,6vw,82px);line-height:1.08;letter-spacing:-.025em;max-width:9ch;margin:0}.auth-story>div>p{color:color-mix(in oklch,var(--surface) 68%,transparent);font-size:19px;max-width:40ch}.story-list{list-style:none;margin:54px 0 0;padding:0;border-top:1px solid color-mix(in oklch,var(--surface) 24%,transparent)}.story-list li{padding:15px 0;border-bottom:1px solid color-mix(in oklch,var(--surface) 15%,transparent);display:flex;justify-content:space-between;gap:20px}.story-mark{font:12px/1.5 var(--font-mono);opacity:.58}.story-foot{font-size:13px;color:color-mix(in oklch,var(--surface) 58%,transparent)}
|
||||
.auth-form-wrap{padding:clamp(54px,8vw,104px) max(var(--gutter),calc((100vw - var(--container))/2 + var(--gutter)));padding-inline-start:clamp(48px,8vw,100px);display:flex;align-items:center}.auth-form{width:min(440px,100%)}.auth-form h2{font-size:clamp(38px,4vw,54px);line-height:1.15;margin:0}.lead{color:var(--muted);font-size:18px;margin:12px 0 34px}.field{display:grid;gap:7px;margin-top:18px}.field label{font-size:13px;color:var(--muted)}.input-wrap{position:relative}.input{width:100%;min-height:52px;border:1px solid var(--border);background:var(--surface);color:var(--fg);padding:13px 14px;border-radius:0}.input:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}.password-toggle{position:absolute;inset-inline-end:6px;top:6px;min-width:70px;height:40px;border:0;background:transparent;color:var(--muted)}.password-toggle:hover{color:var(--fg);background:var(--fg-soft)}.form-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:18px 0 24px;font-size:13px}.check{display:flex;align-items:center;gap:8px}.form-row a{text-decoration:underline;text-underline-offset:3px}.form-row a:hover{color:var(--accent)}.btn{min-height:50px;width:100%;display:inline-flex;align-items:center;justify-content:center;padding:12px 20px;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);color:var(--surface)}.divider{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:12px;margin:26px 0}.divider::before,.divider::after{content:"";height:1px;background:var(--border);flex:1}.magic{min-height:50px;width:100%;border:1px solid var(--border);background:transparent;color:var(--fg);font-weight:700}.magic:hover{background:var(--fg);color:var(--surface);border-color:var(--fg)}.signup{text-align:center;color:var(--muted);font-size:14px;margin-top:24px}.signup a{color:var(--fg);font-weight:700;text-decoration:underline;text-underline-offset:3px}.status{min-height:25px;color:var(--accent);font-weight:700;margin-top:14px}.fine{font-size:12px;color:var(--muted);margin-top:28px}
|
||||
.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:grid;margin-top:34px}.menu-links a{min-height:70px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);font-family:var(--font-display);font-size:clamp(27px,4vw,38px)}.menu-links a:hover{color:var(--accent)}.menu-foot{margin-top:auto;color:var(--muted)}
|
||||
@media(max-width:920px){:root{--gutter:22px}.auth{grid-template-columns:1fr}.auth-story{min-height:440px;padding:64px var(--gutter)}.auth-form-wrap{padding:64px var(--gutter);justify-content:center}.story-foot{margin-top:54px}}
|
||||
@media(max-width:620px){:root{--gutter:18px}.nav-return{display:none}.auth-story{min-height:auto}.auth-story h1{font-size:46px}.auth-form-wrap{padding-block:50px}.form-row{align-items:flex-start;flex-direction:column}}
|
||||
@media(prefers-reduced-motion:reduce){*{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 nav-inner"><a class="logo" href="arabic-ai-learning-catalog.html"><img class="logo-mark" src="assets/anwarpi-logo.jpg" alt="" width="1200" height="1352">أنور بي آي</a><div class="nav-tools"><a class="nav-return" href="arabic-ai-learning-catalog.html">العودة إلى المكتبة</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 class="auth">
|
||||
<section class="auth-story" data-od-id="login-story"><div><p class="eyebrow">مساحتك في أنور بي آي</p><h1 data-od-id="login-story-title">أكمل من حيث توقفت.</h1><p>احفظ أدلتك، تابع مسارات الفيديو، وارجع إلى ملاحظاتك من أي جهاز.</p><ul class="story-list"><li><span>المقالات المحفوظة</span><span class="story-mark">مرتبّة</span></li><li><span>تقدّم المسارات</span><span class="story-mark">متزامن</span></li><li><span>ملفات العضوية</span><span class="story-mark">جاهزة</span></li></ul></div><p class="story-foot">العربية أولاً · خصوصيتك محفوظة</p></section>
|
||||
<section class="auth-form-wrap" data-od-id="login-form-section"><form class="auth-form" id="loginForm" novalidate data-od-id="login-form"><p class="eyebrow">أهلاً بعودتك</p><h2 data-od-id="login-title">تسجيل الدخول</h2><p class="lead">استخدم بريدك وكلمة المرور للوصول إلى حسابك.</p><div class="field"><label for="email">البريد الإلكتروني</label><input class="input" id="email" name="email" type="email" inputmode="email" autocomplete="email" placeholder="name@example.com" dir="ltr" required /></div><div class="field"><label for="password">كلمة المرور</label><div class="input-wrap"><input class="input" id="password" name="password" type="password" autocomplete="current-password" minlength="8" required /><button class="password-toggle" id="passwordToggle" type="button" aria-controls="password">إظهار</button></div></div><div class="form-row"><label class="check"><input type="checkbox" name="remember" /> تذكّرني</label><a href="forgot-password.html">نسيت كلمة المرور؟</a></div><button class="btn btn-primary" type="submit">ادخل إلى حسابك</button><div class="status" id="loginStatus" role="status"></div><div class="divider">أو</div><button class="magic" id="magicLink" type="button">أرسل رابط دخول إلى بريدي</button><p class="signup">ليس لديك حساب؟ <a href="subscription.html">اكتشف العضوية</a></p><p class="fine">بالمتابعة، أنت توافق على شروط الاستخدام و<a href="privacy.html">سياسة الخصوصية</a>.</p></form></section>
|
||||
</main>
|
||||
<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="arabic-ai-learning-catalog.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="article-agent-guide.html">مقال الأسبوع <span>←</span></a><a href="subscription.html">العضوية والأسعار <span>←</span></a></nav><div class="menu-foot"><p>محتوى عربي عملي، بلا ضجيج.</p></div></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 password=document.getElementById('password'),toggle=document.getElementById('passwordToggle'),status=document.getElementById('loginStatus'),form=document.getElementById('loginForm');toggle.addEventListener('click',()=>{const show=password.type==='password';password.type=show?'text':'password';toggle.textContent=show?'إخفاء':'إظهار'});form.addEventListener('submit',e=>{e.preventDefault();if(!form.checkValidity()){status.textContent='تحقق من البريد الإلكتروني وكلمة المرور.';form.reportValidity();return}status.textContent='تم التحقق من النموذج. ربط الحساب بالخادم هو الخطوة التالية.'});document.getElementById('magicLink').addEventListener('click',()=>{const email=form.elements.email.value.trim();if(!email||!form.elements.email.checkValidity()){status.textContent='أدخل بريداً إلكترونياً صحيحاً أولاً.';form.elements.email.focus();return}status.textContent='رابط الدخول جاهز للإرسال بعد ربط خدمة البريد.'});})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,140 @@
|
||||
<!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-login,.icon-btn{min-height:44px;border:1px solid var(--border);background:transparent;color:var(--fg);display:inline-grid;place-items:center}.nav-login{padding-inline:16px}.nav-login:hover,.icon-btn:hover{border-color:var(--fg);background:var(--fg-soft)}.icon-btn{width:46px}
|
||||
.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}
|
||||
.lock-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--fg);padding:6px 14px;font:12px/1.5 var(--font-mono);color:var(--fg);margin-bottom:22px}
|
||||
.lock-chip svg{width:14px;height:14px}
|
||||
.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)}
|
||||
.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 p{margin:0 0 26px}
|
||||
.lede{font-family:var(--font-display);font-size:28px;line-height:1.6}
|
||||
.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}
|
||||
.free-tag{font:11px/1.5 var(--font-mono);color:var(--muted);letter-spacing:.05em;margin-bottom:6px;display:block}
|
||||
.lock-cut{position:relative}
|
||||
.lock-cut::after{content:"";position:absolute;inset-inline:0;bottom:0;height:120px;background:linear-gradient(to bottom,transparent,var(--bg) 88%);pointer-events:none}
|
||||
.lock-cut .cut-p{margin-bottom:0}
|
||||
.paywall{margin-top:-30px;position:relative;border:1px solid var(--fg);background:var(--surface);padding:clamp(28px,4vw,44px);z-index:2}
|
||||
.paywall .crumb{margin-bottom:12px}
|
||||
.paywall h2{font-size:clamp(30px,3.6vw,44px);line-height:1.18;margin:0 0 14px;max-width:16ch}
|
||||
.paywall p{color:var(--muted);max-width:56ch;margin:0 0 24px}
|
||||
.locked-in{border-top:1px solid var(--fg);margin:0 0 26px}
|
||||
.locked-in li{display:flex;align-items:center;gap:12px;min-height:52px;border-bottom:1px solid var(--border);color:var(--muted);font-size:16px}
|
||||
.locked-in svg{width:14px;height:14px;flex:none}
|
||||
.locked-in .num{margin-inline-start:auto;font:12px/1.5 var(--font-mono)}
|
||||
.paywall-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
|
||||
.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)}
|
||||
.btn-secondary{border-color:var(--border);background:transparent;color:var(--fg)}
|
||||
.btn-secondary:hover{border-color:var(--fg);background:var(--fg-soft)}
|
||||
.text-link{font-weight:700;color:var(--fg);text-decoration:underline;text-underline-offset:4px;min-height:44px;display:inline-flex;align-items:center}
|
||||
.text-link:hover{color:var(--accent)}
|
||||
.price-line{font:12px/1.6 var(--font-mono);color:var(--muted);margin-top:18px}
|
||||
.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,.toc .toc-locked{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)}
|
||||
.toc .toc-locked{color:color-mix(in oklch,var(--muted) 60%,transparent)}
|
||||
.toc .toc-locked svg{width:12px;height:12px;flex:none}
|
||||
.member-note{margin-top:28px;border:1px solid var(--fg);padding:22px}
|
||||
.member-note strong{font-family:var(--font-display);font-size:20px;display:block;margin-bottom:8px}
|
||||
.member-note p{color:var(--muted);font-size:14px;margin:0 0 16px}
|
||||
.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}.article-body{font-size:18px}}
|
||||
@media(max-width:620px){:root{--gutter:18px}.nav-login{display:none}.article-head h1{font-size:46px}.article-layout{padding-block:56px}.footer-grid{grid-template-columns:1fr;gap:28px}.paywall-actions{flex-direction:column;align-items:stretch}.paywall-actions .btn{width:100%}}
|
||||
@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-unlocked.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-login" href="login.html">تسجيل الدخول</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="lock-chip" data-od-id="access-status"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><rect x="3" y="7" width="10" height="7" /><path d="M5 7V5a3 3 0 0 1 6 0v2"/></svg>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><span>المتاح مجاناً: المقدمة والقسم الأول</span></div>
|
||||
</div></section>
|
||||
<section class="container article-layout" data-od-id="article-content">
|
||||
<article class="article-body">
|
||||
<p class="free-tag">معاينة مجانية</p>
|
||||
<p class="lede">الوكيل الذي يدور في حلقة لا ينقصه ذكاء؛ ينقصه شرط توقف. هنا نبني الحلقة بحيث يستطيع الوكيل أن يقول «انتهيت» — أو «أحتاجك».</p>
|
||||
<p>أغلب الوكلاء يفشل بطريقة واحدة: يعيدون تخطيط المهمة نفسها إلى ما لا نهاية. السبب دائماً بنية الحلقة: التخطيط والتنفيذ والتحقق مدموجة في تعليمة واحدة، فلا يملك الوكيل مرجعاً مستقلاً يخبره أن النتيجة تحققت فعلاً.</p>
|
||||
<h2 id="goal">١. اكتب نتيجة يمكن فحصها</h2>
|
||||
<p>ابدأ بما يجب أن يكون صحيحاً عند النهاية. «ابحث عن أفضل خيار» هدف ضبابي. أما «أنشئ قائمة من ثلاثة خيارات، مع المصدر والسعر وتاريخ التحقق» فيمكن اختباره بشرط واحد واضح.</p>
|
||||
<div class="note"><strong>قاعدة أنور بي آي</strong>إذا لم تستطع كتابة اختبار بسيط للنتيجة، فلن يعرف الوكيل متى يتوقف.</div>
|
||||
<div class="lock-cut" data-od-id="lock-cut">
|
||||
<p class="cut-p">من هنا تبدأ الأجزاء العملية: بنية الحلقة خطوة بخطوة، قالب حالة الوكيل جاهز النسخ، وقائمة الفحص التي تمرّر عليها قبل كل تشغيل — وهي المحتوى الذي تفرّق بين وكيل يعمل مرة ووكيل يعتمد عليه فريقك.</p>
|
||||
</div>
|
||||
<div class="paywall" data-od-id="paywall" aria-labelledby="paywall-title">
|
||||
<p class="crumb">الجزء المتبقي · للأعضاء فقط</p>
|
||||
<h2 id="paywall-title">أكملت الجزء المجاني من هذا الدليل</h2>
|
||||
<p>بقية الدليل غير موجودة في صفحة المعاينة، وتُفتح فقط بعد تسجيل الدخول بعضوية فعّالة. اشتراك واحد يفتح الأدلة الحصرية ومسارات الفيديو وملفات العمل.</p>
|
||||
<ul class="locked-in">
|
||||
<li><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><rect x="3" y="7" width="10" height="7"/><path d="M5 7V5a3 3 0 0 1 6 0v2"/></svg>٢. استخدم حلقة قصيرة وواضحة<span class="num">٤ دقائق</span></li>
|
||||
<li><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><rect x="3" y="7" width="10" height="7"/><path d="M5 7V5a3 3 0 0 1 6 0v2"/></svg>٣. اجعل الأدوات ضيقة الصلاحية<span class="num">٣ دقائق</span></li>
|
||||
<li><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><rect x="3" y="7" width="10" height="7"/><path d="M5 7V5a3 3 0 0 1 6 0v2"/></svg>قالب حالة الوكيل + قائمة الفحص<span class="num">ملفات</span></li>
|
||||
<li><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><rect x="3" y="7" width="10" height="7"/><path d="M5 7V5a3 3 0 0 1 6 0v2"/></svg>فيديو تطبيقي: تشغيل الحلقة معاً<span class="num">١٢ دقيقة</span></li>
|
||||
</ul>
|
||||
<div class="paywall-actions">
|
||||
<a class="btn btn-primary" href="subscription.html" data-od-id="subscribe-cta">اشترك لفتح الدليل</a>
|
||||
<a class="text-link" href="login.html" data-od-id="login-cta">لدي اشتراك؟ سجّل الدخول</a>
|
||||
</div>
|
||||
<p class="price-line">٤٩ ر.س شهرياً · إلغاء فوري في أي وقت · الدفع غير مربوط في هذه المعاينة</p>
|
||||
</div>
|
||||
</article>
|
||||
<aside class="toc" aria-label="فهرس الدليل" data-od-id="article-toc">
|
||||
<strong>داخل هذا الدليل</strong>
|
||||
<a href="#goal">نتيجة قابلة للفحص</a>
|
||||
<span class="toc-locked"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><rect x="3" y="7" width="10" height="7"/><path d="M5 7V5a3 3 0 0 1 6 0v2"/></svg>حلقة الوكيل</span>
|
||||
<span class="toc-locked"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><rect x="3" y="7" width="10" height="7"/><path d="M5 7V5a3 3 0 0 1 6 0v2"/></svg>صلاحيات الأدوات</span>
|
||||
<span class="toc-locked"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><rect x="3" y="7" width="10" height="7"/><path d="M5 7V5a3 3 0 0 1 6 0v2"/></svg>قالب الحالة والفحص</span>
|
||||
<div class="member-note"><strong>ملفات الأعضاء</strong><p>قالب حالة الوكيل وقائمة الفحص قبل التشغيل متاحان للتنزيل داخل العضوية.</p><a class="btn btn-primary" href="subscription.html">شاهد مزايا العضوية</a></div>
|
||||
</aside>
|
||||
</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="subscription.html">الأسعار والمزايا</a><a href="login.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="article-agent-guide.html">مقال الأسبوع <span>←</span></a><a href="subscription.html">العضوية والأسعار <span>←</span></a><a href="login.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)})();})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,42 @@
|
||||
<!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);
|
||||
--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: 980px; --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.85 var(--font-body)}a{color:inherit;text-decoration:none}h1,h2{font-family:var(--font-display);text-wrap:balance}p{text-wrap:pretty}.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-size:23px;font-weight:700}.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)}
|
||||
.hero{padding-block:clamp(58px,9vw,110px);border-bottom:1px solid var(--border)}.eyebrow{font:12px/1.5 var(--font-mono);color:var(--accent);margin:0 0 18px}.hero h1{font-size:clamp(44px,7vw,78px);line-height:1.08;margin:0;max-width:12ch}.lead{font-size:19px;color:var(--muted);max-width:58ch;margin:24px 0 0}.notice{margin-top:28px;border:1px solid var(--accent);padding:18px 20px;color:var(--fg);max-width:64ch}
|
||||
.policy{padding-block:72px 90px}.policy section{padding-block:30px;border-top:1px solid var(--border)}.policy h2{font-size:clamp(28px,4vw,40px);margin:0 0 12px}.policy p,.policy li{color:var(--muted)}.policy ul{margin:0;padding-inline-start:24px}.policy a{color:var(--fg);text-decoration:underline;text-underline-offset:4px}.pagefoot{padding-block:46px;border-top:1px solid var(--border);color:var(--muted)}.footer-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
|
||||
@media(max-width:920px){:root{--gutter:22px}.nav-links{display:flex}}
|
||||
@media(max-width:620px){:root{--gutter:18px}.hero{padding-block:48px}.policy{padding-block:48px 64px}.notice{padding:16px}}
|
||||
</style>
|
||||
<link rel="stylesheet" href="assets/anwarpi.css?v=5" />
|
||||
<script src="assets/anwarpi.js?v=4" defer></script>
|
||||
</head>
|
||||
<body data-anw-dim>
|
||||
<header class="topnav" data-od-id="topnav"><div class="container nav-inner"><a class="logo" href="index.html" data-od-id="brand"><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="subscription.html">العضوية</a><a href="privacy.html">الخصوصية</a></nav></div></header>
|
||||
<main>
|
||||
<section class="hero" data-od-id="privacy-hero"><div class="container"><p class="eyebrow">الخصوصية · مسودة ما قبل الإطلاق</p><h1 data-od-id="privacy-title">بياناتك ليست مادة للمحتوى.</h1><p class="lead">توضح هذه المسودة الحد الأدنى المقترح لجمع البيانات واستخدامها داخل أنور بي آي.</p><p class="notice" role="note">هذه سياسة تجريبية للواجهة وليست نصاً قانونياً نهائياً. يجب مراجعتها واعتمادها قبل نشر الموقع.</p></div></section>
|
||||
<div class="container policy" data-od-id="privacy-content">
|
||||
<section data-od-id="privacy-data"><h2>ما الذي نجمعه؟</h2><p>عند تشغيل الحسابات فعلياً قد نحتاج إلى الاسم والبريد الإلكتروني، وبيانات العضوية والفوترة التي يوفرها مزوّد الدفع. لا ينبغي تخزين بيانات البطاقة كاملة داخل المنصة.</p></section>
|
||||
<section data-od-id="privacy-use"><h2>كيف تُستخدم البيانات؟</h2><ul><li>تسجيل الدخول وحفظ التقدّم والتفضيلات.</li><li>إدارة العضوية وإرسال الرسائل التي اختارها المستخدم.</li><li>حماية المنصة وتشخيص الأعطال وتحسين تجربة القراءة.</li></ul></section>
|
||||
<section data-od-id="privacy-sharing"><h2>المشاركة والاحتفاظ</h2><p>لا تُباع البيانات الشخصية. قبل الإطلاق يجب تسمية مزوّدي الاستضافة والبريد والدفع والتحليلات، وتحديد مدة الاحتفاظ بكل نوع من البيانات بوضوح.</p></section>
|
||||
<section data-od-id="privacy-rights"><h2>حقوقك</h2><p>يمكنك طلب نسخة من بياناتك أو تصحيحها أو حذفها بعد تفعيل الحسابات. أرسل طلبك إلى <a href="mailto:hello@anwarpi.ai">hello@anwarpi.ai</a>.</p></section>
|
||||
<section data-od-id="privacy-updates"><h2>التحديثات</h2><p>يجب إضافة تاريخ السريان وملخص أي تغيير جوهري عند اعتماد النسخة القانونية النهائية.</p></section>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="pagefoot" data-od-id="footer"><div class="container footer-bottom"><span>© أنور بي آي ٢٠٢٦</span><a href="mailto:hello@anwarpi.ai">تواصل معنا</a></div></footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,97 @@
|
||||
#!/usr/bin/env python3
|
||||
"""Fail when the static site contains broken or non-portable local references."""
|
||||
|
||||
from html.parser import HTMLParser
|
||||
from pathlib import Path
|
||||
from urllib.parse import unquote, urlsplit
|
||||
|
||||
ROOT = Path(__file__).resolve().parents[1]
|
||||
SKIP_PREFIXES = ("#", "data:", "mailto:", "tel:", "javascript:")
|
||||
|
||||
|
||||
class PageParser(HTMLParser):
|
||||
def __init__(self):
|
||||
super().__init__()
|
||||
self.references = []
|
||||
self.ids = set()
|
||||
self.has_viewport = False
|
||||
self.has_csp = False
|
||||
|
||||
def handle_starttag(self, tag, attrs):
|
||||
values = dict(attrs)
|
||||
element_id = values.get("id")
|
||||
if element_id:
|
||||
self.ids.add(element_id)
|
||||
if tag == "meta" and values.get("name", "").lower() == "viewport":
|
||||
self.has_viewport = True
|
||||
if tag == "meta" and values.get("http-equiv", "").lower() == "content-security-policy":
|
||||
self.has_csp = True
|
||||
for attribute in ("href", "src", "action"):
|
||||
value = values.get(attribute)
|
||||
if value:
|
||||
self.references.append((tag, attribute, value))
|
||||
|
||||
|
||||
def parse_page(path):
|
||||
parser = PageParser()
|
||||
parser.feed(path.read_text(encoding="utf-8"))
|
||||
return parser
|
||||
|
||||
|
||||
def main():
|
||||
pages = sorted(ROOT.glob("*.html"))
|
||||
parsed = {page.resolve(): parse_page(page) for page in pages}
|
||||
errors = []
|
||||
|
||||
if not (ROOT / "index.html").is_file():
|
||||
errors.append("missing GitHub Pages entry point: index.html")
|
||||
|
||||
for page in pages:
|
||||
parser = parsed[page.resolve()]
|
||||
if not parser.has_viewport:
|
||||
errors.append(f"{page.name}: missing viewport metadata")
|
||||
if not parser.has_csp:
|
||||
errors.append(f"{page.name}: missing Content Security Policy")
|
||||
|
||||
for tag, attribute, raw_value in parser.references:
|
||||
value = raw_value.strip()
|
||||
if not value or value.startswith(SKIP_PREFIXES):
|
||||
continue
|
||||
|
||||
url = urlsplit(value)
|
||||
if url.scheme or url.netloc:
|
||||
errors.append(f"{page.name}: remote dependency in {attribute}: {value}")
|
||||
continue
|
||||
if url.path.startswith("/"):
|
||||
errors.append(f"{page.name}: root-absolute path breaks project Pages: {value}")
|
||||
continue
|
||||
|
||||
target = (page.parent / unquote(url.path or page.name)).resolve()
|
||||
try:
|
||||
target.relative_to(ROOT)
|
||||
except ValueError:
|
||||
errors.append(f"{page.name}: reference leaves repository: {value}")
|
||||
continue
|
||||
if not target.exists():
|
||||
errors.append(f"{page.name}: missing {tag} {attribute} target: {value}")
|
||||
continue
|
||||
|
||||
if url.fragment and target.suffix.lower() == ".html":
|
||||
target_parser = parsed.get(target)
|
||||
if target_parser is None:
|
||||
target_parser = parse_page(target)
|
||||
parsed[target] = target_parser
|
||||
if unquote(url.fragment) not in target_parser.ids:
|
||||
errors.append(f"{page.name}: missing anchor target: {value}")
|
||||
|
||||
if errors:
|
||||
print("Site validation failed:")
|
||||
for error in errors:
|
||||
print(f"- {error}")
|
||||
raise SystemExit(1)
|
||||
|
||||
print(f"Site validation passed: {len(pages)} HTML pages checked.")
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
main()
|
||||
@@ -0,0 +1,48 @@
|
||||
# تدقيق الأمان النهائي قبل الإطلاق
|
||||
|
||||
## القرار
|
||||
|
||||
**صالح للنشر العام كنموذج واجهة ثابتة فقط. غير صالح بعد كنظام حسابات أو عضوية إنتاجي.**
|
||||
|
||||
الصفحات الحالية لا تتصل بخادم، ولا تنفّذ تسجيل دخول أو تغيير كلمة مرور أو دفع أو إلغاء اشتراك فعلي. رسائل النجاح في هذه الشاشات هي محاكاة داخل المتصفح، وهذا واضح في نصوص المعاينة الحالية.
|
||||
|
||||
## ما تم فحصه
|
||||
|
||||
- 11 صفحة HTML وملفا CSS/JavaScript مشتركان.
|
||||
- الأسرار والمفاتيح وبيانات الاعتماد المضمّنة.
|
||||
- مسارات XSS الشائعة: `innerHTML` و`eval` و`document.write` وروابط `javascript:`.
|
||||
- الروابط والأصول المحلية ومحاولات الخروج من مجلد المشروع.
|
||||
- عناوين URL والاعتماديات البعيدة.
|
||||
- صحة JavaScript المضمّن والمشترك.
|
||||
- نماذج تسجيل الدخول، استعادة كلمة المرور، إعدادات الحساب، والتعليقات.
|
||||
|
||||
## الإصلاحات المنفذة
|
||||
|
||||
أضيف إلى الصفحات الـ11:
|
||||
|
||||
1. سياسة إحالة `strict-origin-when-cross-origin`.
|
||||
2. سياسة محتوى CSP تمنع الاتصالات الخارجية والإطارات والكائنات والإضافات، وتقصر الصور والخطوط والملفات على أصل الموقع.
|
||||
3. تقييد وجهة النماذج إلى أصل الموقع فقط.
|
||||
|
||||
## نتائج التحقق
|
||||
|
||||
- لا أسرار أو مفاتيح API مكتشفة.
|
||||
- لا روابط أو صور أو سكربتات بعيدة.
|
||||
- لا استخدام لمسارات JavaScript الخطرة التي جرى فحصها.
|
||||
- جميع الروابط والأصول المحلية موجودة ولا تخرج من المشروع.
|
||||
- 11 سكربتاً مضمّناً وملف JavaScript مشترك اجتازوا فحص الصياغة.
|
||||
- جميع الصفحات الـ11 تحتوي CSP وسياسة إحالة، مرة واحدة لكل صفحة.
|
||||
|
||||
## المتبقي قبل إطلاق حسابات حقيقية
|
||||
|
||||
1. بناء مصادقة وجلسات على الخادم باستخدام Cookies آمنة (`Secure` و`HttpOnly` و`SameSite`) وعدم تخزين رموز الدخول في `localStorage`.
|
||||
2. تنفيذ التفويض على الخادم لكل محتوى حصري؛ إخفاء المحتوى في الواجهة وحده لا يحميه.
|
||||
3. إضافة CSRF وتحديد المعدل لتسجيل الدخول واستعادة كلمة المرور، مع رسائل لا تكشف وجود الحساب.
|
||||
4. نقل JavaScript وCSS المضمّنين إلى ملفات محلية ثم إزالة `'unsafe-inline'` من CSP، وإرسال CSP وبقية ترويسات الأمان كـ HTTP headers من منصة الاستضافة.
|
||||
5. اعتماد سياسة الخصوصية قانونياً وربط الدفع والبريد عبر مزودين موثوقين قبل جمع أي بيانات حقيقية.
|
||||
|
||||
## إعدادات المستودع المقترحة
|
||||
|
||||
- إبقاء المستودع خاصاً حتى إزالة أي محتوى تجريبي غير مخصص للعامة.
|
||||
- تفعيل GitHub secret scanning وpush protection و2FA للحسابات التي تملك صلاحية النشر.
|
||||
- حماية فرع الإنتاج وطلب مراجعة قبل الدمج.
|
||||
@@ -0,0 +1,52 @@
|
||||
<!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.7 var(--font-body);text-rendering:optimizeLegibility}body.locked{overflow:hidden}a{color:inherit;text-decoration:none}button{font:inherit;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-login{min-height:44px;display:inline-flex;align-items:center;padding-inline:16px;border:1px solid var(--border)}.nav-login:hover{border-color:var(--fg);background:var(--fg-soft)}.icon-btn{width:46px;height:46px;display:grid;place-items:center;border:1px solid var(--fg);background:var(--fg);color:var(--surface)}.icon-btn:hover{background:var(--accent);border-color:var(--accent);color:var(--surface)}
|
||||
.hero{padding-block:clamp(72px,11vw,140px);border-bottom:1px solid var(--border)}.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(48px,9vw,110px);align-items:end}.eyebrow{font:11px/1.5 var(--font-mono);letter-spacing:.05em;color:var(--accent);margin:0 0 20px}.hero .eyebrow{display:block;margin-bottom:34px}.hero h1{font-size:clamp(52px,8vw,102px);line-height:1.08;letter-spacing:-.03em;max-width:10ch;margin:0}.lead{font-size:clamp(19px,2vw,24px);line-height:1.7;color:var(--muted);max-width:52ch;margin:26px 0 0}.hero-note{border-top:1px solid var(--fg);padding-top:24px}.hero-note strong{font-family:var(--font-display);font-size:28px;display:block}.hero-note p{color:var(--muted);margin:8px 0 0}
|
||||
.benefits{padding-block:90px;border-bottom:1px solid var(--border)}.section-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:50px}.section-head h2{font-size:clamp(38px,5vw,60px);line-height:1.15;margin:0;max-width:13ch}.section-head p{color:var(--muted);max-width:46ch}.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--fg)}.benefit{padding:30px 0;border-bottom:1px solid var(--border)}.benefit+.benefit{margin-inline-start:32px}.benefit-index{font:12px/1.5 var(--font-mono);color:var(--accent)}.benefit h3{font-size:28px;margin:26px 0 10px}.benefit p{color:var(--muted);margin:0}
|
||||
.guide-samples{padding-block:90px;background:var(--surface);border-bottom:1px solid var(--border)}.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.guide-card{display:flex;flex-direction:column;min-height:440px;border:1px solid var(--border);background:var(--bg)}.guide-cover{min-height:174px;padding:26px;display:flex;flex-direction:column;justify-content:space-between;background:var(--fg);color:var(--surface)}.guide-cover-light{background:var(--surface);color:var(--fg);border-bottom:1px solid var(--fg)}.guide-cover span:first-child{font:11px/1.5 var(--font-mono);letter-spacing:.04em}.guide-cover strong{font-family:var(--font-display);font-size:clamp(28px,3vw,40px);line-height:1.1;max-width:9ch}.guide-body{padding:26px;display:flex;flex:1;flex-direction:column}.guide-meta{display:flex;justify-content:space-between;gap:16px;color:var(--muted);font:12px/1.5 var(--font-mono)}.guide-body h3{font-size:25px;margin:24px 0 10px}.guide-body p{color:var(--muted);margin:0}.guide-output{margin:22px 0 0;padding:18px 0;border-block:1px solid var(--border)}.guide-output strong{display:block;font-size:13px;margin-bottom:6px}.guide-output span{color:var(--muted);font-size:14px}.guide-link{min-height:44px;display:flex;align-items:end;justify-content:space-between;margin-top:auto;padding-top:22px;font-weight:700}.guide-link:hover{color:var(--accent)}
|
||||
.outcomes{padding-block:90px;border-bottom:1px solid var(--border)}.outcome-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(48px,9vw,110px);align-items:start}.outcome-grid h2{font-size:clamp(40px,5vw,64px);line-height:1.12;margin:0}.outcome-list{border-top:1px solid var(--fg)}.outcome-card{display:grid;grid-template-columns:72px 1fr;gap:22px;padding:28px 0;border-bottom:1px solid var(--border)}.outcome-card .benefit-index{padding-top:7px}.outcome-card h3{font-size:27px;margin:0 0 8px}.outcome-card p{color:var(--muted);margin:0}.team-contact{margin-top:34px;padding:30px;border:1px solid var(--fg);display:flex;align-items:center;justify-content:space-between;gap:28px}.team-contact h3{font-size:26px;margin:0 0 6px}.team-contact p{color:var(--muted);margin:0;max-width:48ch}.team-contact .btn{flex:0 0 auto}
|
||||
.pricing{padding-block:90px;background:var(--fg);color:var(--surface)}.pricing-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(48px,9vw,110px);align-items:start}.pricing h2{font-size:clamp(40px,6vw,70px);line-height:1.08;margin:0}.pricing .lead{color:color-mix(in oklch,var(--surface) 70%,transparent)}.plan{background:var(--surface);color:var(--fg);padding:clamp(30px,5vw,54px)}.plan-head{display:flex;justify-content:space-between;align-items:start;gap:20px;padding-bottom:26px;border-bottom:1px solid var(--border)}.plan h3{font-size:32px;margin:0}.price{font-family:var(--font-display);font-size:58px;line-height:1;text-align:left}.price small{display:block;font:11px/1.5 var(--font-mono);color:var(--muted);margin-top:8px}.trial-label{display:inline-block;font:11px/1.5 var(--font-mono);color:var(--accent);margin-top:10px}.plan-list{list-style:none;margin:24px 0;padding:0}.plan-list li{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--border)}.btn{min-height:50px;display:inline-flex;align-items:center;justify-content:center;padding:12px 20px;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);color:var(--surface)}.plan .btn{width:100%}.plan-fine{font-size:12px;color:var(--muted);text-align:center;margin:12px 0 0}
|
||||
.compare{padding-block:90px;border-bottom:1px solid var(--border)}.compare h2,.faq h2{font-size:clamp(38px,5vw,58px);margin:0 0 40px}.table-wrap{overflow-x:auto}.table{width:100%;border-collapse:collapse;min-width:620px}.table th,.table td{padding:16px 14px;border-bottom:1px solid var(--border);text-align:right}.table th{font:12px/1.5 var(--font-mono);color:var(--muted)}.table td:not(:first-child),.table th:not(:first-child){text-align:center}.member-col{border-inline:1px solid var(--accent)}
|
||||
.faq{padding-block:90px}.faq-wrap{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(46px,8vw,100px)}.faq-list{border-top:1px solid var(--fg)}.faq-item{border-bottom:1px solid var(--border)}.faq-button{width:100%;min-height:68px;border:0;background:transparent;color:var(--fg);display:flex;justify-content:space-between;align-items:center;gap:20px;text-align:right;font-weight:700}.faq-button:hover{color:var(--accent)}.faq-answer{display:none;color:var(--muted);padding:0 0 22px;max-width:64ch}.faq-item.open .faq-answer{display:block}.faq-item.open .faq-button span:last-child{transform:rotate(45deg)}
|
||||
.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,.dialog{position:fixed;inset:0;z-index:60;visibility:hidden;pointer-events:none}.menu-panel.open,.dialog.open{visibility:visible;pointer-events:auto}.menu-scrim,.dialog-scrim{position:absolute;inset:0;border:0;background:color-mix(in oklch,var(--fg) 58%,transparent);opacity:0}.menu-panel.open .menu-scrim,.dialog.open .dialog-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:grid;margin-top:34px}.menu-links a{min-height:70px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);font-family:var(--font-display);font-size:clamp(27px,4vw,38px)}.menu-links a:hover{color:var(--accent)}.menu-foot{margin-top:auto;color:var(--muted)}.dialog-panel{position:relative;width:min(560px,calc(100% - 36px));margin:10vh auto 0;background:var(--surface);padding:clamp(30px,5vw,54px);border:1px solid var(--fg)}.dialog-panel h2{font-size:42px;margin:12px 0}.dialog-panel p{color:var(--muted)}.dialog-close{position:absolute;inset-inline-end:18px;top:18px;background:transparent;color:var(--fg);border-color:var(--border)}.dialog-actions{display:flex;gap:10px;margin-top:28px}.dialog-actions .btn{flex:1}.btn-secondary{background:transparent;color:var(--fg);border-color:var(--border)}.btn-secondary:hover{background:var(--fg);color:var(--surface);border-color:var(--fg)}
|
||||
@media(max-width:920px){:root{--gutter:22px}.nav-links{display:none}.hero-grid,.pricing-grid,.faq-wrap,.outcome-grid{grid-template-columns:1fr}.benefit-grid,.guide-grid{grid-template-columns:1fr}.benefit+.benefit{margin-inline-start:0}.guide-card{min-height:0}.footer-grid{grid-template-columns:1fr 1fr}.section-head{align-items:start;flex-direction:column}.hero-note{max-width:520px}}
|
||||
@media(max-width:620px){:root{--gutter:18px}.nav-login{display:none}.hero h1{font-size:50px}.benefits,.guide-samples,.outcomes,.pricing,.compare,.faq{padding-block:60px}.footer-grid{grid-template-columns:1fr;gap:28px}.plan-head,.team-contact{flex-direction:column;align-items:stretch}.team-contact .btn{width:100%}.outcome-card{grid-template-columns:48px 1fr}.price{text-align:right}.dialog-actions{flex-direction:column}}
|
||||
@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 nav-inner"><a class="logo" href="arabic-ai-learning-catalog.html"><img class="logo-mark" src="assets/anwarpi-logo.jpg" alt="" width="1200" height="1352">أنور بي آي</a><nav class="nav-links"><a href="arabic-ai-learning-catalog.html#catalog">المكتبة</a><a href="article-agent-guide.html">المقالات</a><a href="#exclusive-guides">الأدلة الحصرية</a><a href="#team-contact">تواصل مباشر</a></nav><div class="nav-tools"><a class="nav-login" href="login.html">تسجيل الدخول</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="hero" data-od-id="subscription-hero"><div class="container hero-grid"><div><img class="hero-logo" src="assets/anwarpi-logo.jpg" alt="شعار أنور بي آي" width="1200" height="1352" data-od-id="hero-logo"><p class="eyebrow">عضوية أنور بي آي · للجادّين في البناء</p><h1 data-od-id="subscription-title">تعلّم أقل. طبّق أكثر.</h1><p class="lead">أدلة معمّقة، مسارات فيديو، وملفات عمل تختصر الطريق من الفكرة إلى مشروع يمكنك اختباره.</p></div><div class="hero-note"><strong>لا دورات متراكمة.</strong><p>كل مادة تنتهي بخطوة عملية، وقرار واضح، وملف يمكنك استخدامه في مشروعك.</p></div></div></section>
|
||||
<section class="benefits" id="benefits" data-od-id="membership-benefits"><div class="container"><div class="section-head"><div><p class="eyebrow">محتوى حصري بمستوى متقدم</p><h2>تعلّم مهارات ترفع قيمتك في السوق.</h2></div><p>أدلة عالية المستوى لا تكتفي بشرح الأدوات؛ تساعدك على بناء خبرة عملية تظهر في عملك، مسارك المهني، أو مشروعك التجاري.</p></div><div class="benefit-grid"><article class="benefit" data-od-id="benefit-guides"><span class="benefit-index">01</span><h3>أدلة حصرية عميقة</h3><p>تفكيك عملي للأنظمة الوكيلة، الاسترجاع، الأتمتة، وتشغيل النماذج حتى تفهم كيف تُبنى الحلول فعلاً.</p></article><article class="benefit" data-od-id="benefit-video"><span class="benefit-index">02</span><h3>مهارات تصنع فرقاً</h3><p>مسارات مركّزة تنقلك من مستخدم للأداة إلى شخص قادر على تصميم حلول ذكاء اصطناعي ذات قيمة.</p></article><article class="benefit" data-od-id="benefit-files"><span class="benefit-index">03</span><h3>تنفيذ يصلح للعمل</h3><p>قوالب وملفات عملية تساعدك على تحويل المعرفة إلى مشروع، إنجاز مهني، أو فرصة نمو في أعمالك.</p></article></div></div></section>
|
||||
<section class="guide-samples" id="exclusive-guides" data-od-id="exclusive-guide-samples"><div class="container"><div class="section-head"><div><p class="eyebrow">نماذج من مكتبة الأعضاء</p><h2>أدلة حقيقية تبدأ من المشكلة وتنتهي بملف عملي.</h2></div><p>هذه مواد موجودة في كتالوج أنور بي آي؛ كل نموذج يوضح ما ستتعلمه وما ستخرج به قبل الاشتراك.</p></div><div class="guide-grid">
|
||||
<article class="guide-card" data-od-id="exclusive-guide-agent"><div class="guide-cover"><span>دليل عملي · حصري</span><strong>تشريح وكيل ناجح</strong></div><div class="guide-body"><div class="guide-meta"><span>الوكلاء</span><span class="num">١٨ دقيقة</span></div><h3>امنع وكيلك من الدوران في حلقة</h3><p>افصل التخطيط والتنفيذ والتحقق، وحدد متى يتوقف الوكيل ومتى يطلب تدخلاً بشرياً.</p><div class="guide-output"><strong>الملف المرفق</strong><span>قالب حالة الوكيل + قائمة فحص قبل التشغيل</span></div><a class="guide-link" href="article-agent-guide.html"><span>اقرأ نموذجاً كاملاً</span><span aria-hidden="true">←</span></a></div></article>
|
||||
<article class="guide-card" data-od-id="exclusive-guide-automation"><div class="guide-cover guide-cover-light"><span>فيديو تطبيقي · حصري</span><strong>راقب قبل أن تؤتمت</strong></div><div class="guide-body"><div class="guide-meta"><span>الأتمتة</span><span class="num">٢٤ دقيقة</span></div><h3>اكتشف فشل سير العمل قبل المستخدم</h3><p>راقب التكلفة، زمن الاستجابة، ونقاط الانقطاع بإشارات قليلة يمكن لفريقك فهمها والتصرف بناءً عليها.</p><div class="guide-output"><strong>الملف المرفق</strong><span>قائمة مراقبة لسير العمل + نموذج سجل الأخطاء</span></div><a class="guide-link" href="arabic-ai-learning-catalog.html#catalog"><span>شاهد تفاصيل الدليل</span><span aria-hidden="true">←</span></a></div></article>
|
||||
<article class="guide-card" data-od-id="exclusive-guide-rag"><div class="guide-cover"><span>سلسلة فيديو · حصري</span><strong>قياس <bdi dir="ltr">RAG</bdi> بصدق</strong></div><div class="guide-body"><div class="guide-meta"><span>النماذج</span><span class="num">٤ أجزاء</span></div><h3>افصل فشل الاسترجاع عن فشل الإجابة</h3><p>ابنِ مجموعة اختبار صغيرة، راجع جودة المصادر، ثم قِس الإجابة من دون خلط المشكلتين.</p><div class="guide-output"><strong>الملف المرفق</strong><span>ورقة تقييم للاسترجاع والإجابة خطوة بخطوة</span></div><a class="guide-link" href="arabic-ai-learning-catalog.html#catalog"><span>استكشف السلسلة</span><span aria-hidden="true">←</span></a></div></article>
|
||||
</div></div></section>
|
||||
<section class="outcomes" data-od-id="career-business-outcomes"><div class="container outcome-grid"><div><p class="eyebrow">من المعرفة إلى التأثير</p><h2>كن الشخص الذي يعرف كيف يحوّل الذكاء الاصطناعي إلى نتيجة.</h2><p class="lead">ابنِ مهارات مطلوبة، قرارات أفضل، ومشاريع يمكن عرضها أو تشغيلها—سواء كنت تطوّر مسارك أو تنمّي أعمالك.</p></div><div class="outcome-list"><article class="outcome-card" data-od-id="outcome-career"><span class="benefit-index">01</span><div><h3>لمسارك المهني</h3><p>تعلّم كيف تصمم الوكلاء والأتمتة وتشرح قراراتك التقنية، ثم حوّل ذلك إلى أعمال قوية ترفع مستوى ملفك المهني.</p></div></article><article class="outcome-card" data-od-id="outcome-business"><span class="benefit-index">02</span><div><h3>لنمو أعمالك</h3><p>اكتشف أين يضيف الذكاء الاصطناعي قيمة حقيقية، وكيف تختبر الفكرة بسرعة قبل أن تهدر الوقت أو الميزانية.</p></div></article><article class="team-contact" id="team-contact" data-od-id="anwar-team-contact"><div><h3>اسأل فريق أنور عنبتاوي مباشرة</h3><p>لديك سؤال عن دليل، تطبيق، مسار مهني، أو فكرة عمل؟ أرسل ما تحتاجه وسيرد عليك الفريق مباشرة.</p></div><a class="btn btn-primary" href="mailto:hello@anwarpi.ai?subject=%D8%B3%D8%A4%D8%A7%D9%84%20%D9%84%D9%81%D8%B1%D9%8A%D9%82%20%D8%A3%D9%86%D9%88%D8%B1%20%D8%B9%D9%86%D8%A8%D8%AA%D8%A7%D9%88%D9%8A" data-od-id="contact-team-cta">تواصل مع الفريق</a></article></div></div></section>
|
||||
<section class="pricing" data-od-id="pricing"><div class="container pricing-grid"><div><p class="eyebrow">سعر واحد · وصول كامل</p><h2>ابدأ بعضوية أنور بي آي.</h2><p class="lead">ألغِ في أي وقت. يبقى حسابك المجاني ومقالاتك المحفوظة بعد الإلغاء.</p></div><article class="plan" data-od-id="membership-plan"><div class="plan-head"><div><h3>عضوية فردية</h3><span class="trial-label">سعر تجريبي للمعاينة</span></div><div class="price num">٤٩ ر.س<small>شهرياً</small></div></div><ul class="plan-list"><li><span>كل الأدلة الحصرية</span><strong>متاح</strong></li><li><span>مسارات الفيديو</span><strong>متاح</strong></li><li><span>ملفات العمل والتنزيلات</span><strong>متاح</strong></li><li><span>تحديثات المحتوى</span><strong>مستمرة</strong></li></ul><button class="btn btn-primary" id="subscribeButton" type="button" data-od-id="subscribe-cta">ابدأ العضوية</button><p class="plan-fine">القيمة المعروضة مؤقتة للمعاينة وتحتاج اعتماداً قبل الإطلاق.</p></article></div></section>
|
||||
<section class="compare" data-od-id="plan-comparison"><div class="container"><p class="eyebrow">قارن الوصول</p><h2>المجاني يعرّفك. العضوية تساعدك على البناء.</h2><div class="table-wrap"><table class="table"><thead><tr><th>المحتوى</th><th>حساب مجاني</th><th class="member-col">عضوية أنور بي آي</th></tr></thead><tbody><tr><td>المقالات التمهيدية</td><td>كاملة</td><td class="member-col">كاملة</td></tr><tr><td>الأدلة المتقدمة</td><td>معاينة</td><td class="member-col">كاملة</td></tr><tr><td>مسارات الفيديو</td><td>المقدمة</td><td class="member-col">كل الأجزاء</td></tr><tr><td>ملفات العمل</td><td>—</td><td class="member-col">قابلة للتنزيل</td></tr><tr><td>حفظ التقدّم</td><td>متاح</td><td class="member-col">متاح</td></tr></tbody></table></div></div></section>
|
||||
<section class="faq" id="faq" data-od-id="faq"><div class="container faq-wrap"><div><p class="eyebrow">قبل أن تبدأ</p><h2>أسئلة شائعة</h2><p class="lead">إجابات مباشرة عن الوصول، الإلغاء، وطريقة تقديم المحتوى.</p></div><div class="faq-list"><article class="faq-item open"><button class="faq-button" type="button" aria-expanded="true"><span>هل أستطيع الإلغاء في أي وقت؟</span><span>+</span></button><div class="faq-answer">نعم. يتوقف التجديد التالي، ويستمر وصولك حتى نهاية الفترة المدفوعة.</div></article><article class="faq-item"><button class="faq-button" type="button" aria-expanded="false"><span>هل المحتوى مناسب للمبتدئ؟</span><span>+</span></button><div class="faq-answer">توضح كل مادة مستواها ومتطلباتها. ابدأ بمسار الأساسيات ثم انتقل إلى الوكلاء والأتمتة.</div></article><article class="faq-item"><button class="faq-button" type="button" aria-expanded="false"><span>هل توجد شهادة إكمال؟</span><span>+</span></button><div class="faq-answer">لا حالياً. تركيز أنور بي آي على التطبيق والملفات العملية، لا على شهادات الحضور.</div></article><article class="faq-item"><button class="faq-button" type="button" aria-expanded="false"><span>هل يمكنني استخدام الملفات في عملي؟</span><span>+</span></button><div class="faq-answer">نعم للاستخدام الشخصي والمهني داخل مشاريعك. إعادة بيع الملفات أو نشرها كما هي غير مشمول.</div></article></div></div></section>
|
||||
</main>
|
||||
<footer class="pagefoot" data-od-id="footer"><div class="container"><div class="footer-grid"><div><a class="logo" href="arabic-ai-learning-catalog.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="login.html">تسجيل الدخول</a><a href="#faq">الأسئلة الشائعة</a></div><div class="footer-col"><strong>تواصل مباشرة</strong><a href="mailto:hello@anwarpi.ai?subject=%D8%B3%D8%A4%D8%A7%D9%84%20%D9%84%D9%81%D8%B1%D9%8A%D9%82%20%D8%A3%D9%86%D9%88%D8%B1%20%D8%B9%D9%86%D8%A8%D8%AA%D8%A7%D9%88%D9%8A">فريق أنور عنبتاوي</a><a href="mailto:hello@anwarpi.ai">hello@anwarpi.ai</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"><div class="menu-head"><a class="logo" href="arabic-ai-learning-catalog.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="article-agent-guide.html">مقال الأسبوع <span>←</span></a><a href="#exclusive-guides">الأدلة الحصرية <span>←</span></a><a href="#team-contact">تواصل مع الفريق <span>←</span></a></nav><div class="menu-foot"><a class="btn btn-primary" href="login.html">تسجيل الدخول</a></div></div></aside>
|
||||
<div class="dialog" id="subscribeDialog" aria-hidden="true" data-od-id="subscription-dialog"><button class="dialog-scrim" type="button" aria-label="إغلاق" data-dialog-close></button><div class="dialog-panel" role="dialog" aria-modal="true" aria-labelledby="dialogTitle"><button class="icon-btn dialog-close" type="button" aria-label="إغلاق" data-dialog-close>×</button><p class="eyebrow">بعد تفعيل العضوية</p><h2 id="dialogTitle">جهّز مسارك الأول</h2><p>الدفع الفعلي غير مربوط في هذه المعاينة. افتح تجربة العضو الجديد بعد نجاح الاشتراك.</p><div class="dialog-actions"><a class="btn btn-primary" href="vip-onboarding.html">ابدأ تهيئة العضوية</a><button class="btn btn-secondary" type="button" data-dialog-close>ليس الآن</button></div></div></div>
|
||||
<script>
|
||||
(()=>{const menu=document.getElementById('siteMenu'),trigger=document.getElementById('menuTrigger'),dialog=document.getElementById('subscribeDialog');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()}function setDialog(open){dialog.classList.toggle('open',open);dialog.setAttribute('aria-hidden',String(!open));document.body.classList.toggle('locked',open);(open?dialog.querySelector('.dialog-panel [data-dialog-close]'):document.getElementById('subscribeButton')).focus()}trigger.addEventListener('click',()=>setMenu(true));document.querySelectorAll('[data-menu-close]').forEach(el=>el.addEventListener('click',()=>setMenu(false)));document.getElementById('subscribeButton').addEventListener('click',()=>setDialog(true));document.querySelectorAll('[data-dialog-close]').forEach(el=>el.addEventListener('click',()=>setDialog(false)));document.querySelectorAll('.faq-button').forEach(button=>button.addEventListener('click',()=>{const item=button.closest('.faq-item'),open=!item.classList.contains('open');item.classList.toggle('open',open);button.setAttribute('aria-expanded',String(open))}));document.addEventListener('keydown',e=>{if(e.key!=='Escape')return;if(dialog.classList.contains('open'))setDialog(false);else if(menu.classList.contains('open'))setMenu(false)});})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,289 @@
|
||||
<!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="تهيئة أعضاء أنور بي آي الجدد واختيار مسار التعلّم الأول بعد الاشتراك في وصول VIP." />
|
||||
<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.75 var(--font-body);text-rendering:optimizeLegibility}
|
||||
body.locked{overflow:hidden}
|
||||
a{color:inherit;text-decoration:none}
|
||||
button,input{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}
|
||||
.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;padding-inline:16px;border:1px solid var(--border);font-weight:700}
|
||||
.nav-account:hover{border-color:var(--fg);background:var(--fg-soft)}
|
||||
.icon-btn{width:46px;height:46px;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)}
|
||||
.member-strip{background:var(--fg);color:var(--surface);font:11px/1.6 var(--font-mono);letter-spacing:.04em;padding:8px var(--gutter);text-align:center}
|
||||
.onboarding-head{padding-block:clamp(48px,7vw,82px) 42px;border-bottom:1px solid var(--border)}
|
||||
.eyebrow{font:11px/1.5 var(--font-mono);letter-spacing:.05em;color:var(--accent);margin:0 0 18px}
|
||||
.onboarding-head h1{font-size:clamp(42px,6vw,72px);line-height:1.1;letter-spacing:-.02em;margin:0;max-width:13ch}
|
||||
.lead{font-size:clamp(18px,2vw,22px);color:var(--muted);max-width:58ch;margin:18px 0 0}
|
||||
.progress-wrap{margin-top:34px;max-width:720px}
|
||||
.progress-copy{display:flex;justify-content:space-between;gap:16px;color:var(--muted);font:12px/1.5 var(--font-mono);margin-bottom:10px}
|
||||
.progress-track{height:4px;background:var(--border);overflow:hidden}
|
||||
.progress-bar{height:100%;width:25%;background:var(--accent);transition:width .22s ease}
|
||||
.onboarding-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:clamp(42px,7vw,90px);align-items:start;padding-block:50px 90px}
|
||||
.step-nav{position:sticky;top:100px;border-top:1px solid var(--fg)}
|
||||
.step-nav button{width:100%;min-height:58px;display:grid;grid-template-columns:34px 1fr;align-items:center;gap:12px;padding:0 4px;border:0;border-bottom:1px solid var(--border);background:transparent;color:var(--muted);text-align:right}
|
||||
.step-nav button[aria-current="step"]{color:var(--fg);font-weight:700}
|
||||
.step-nav button:disabled{cursor:default}
|
||||
.step-num{font:12px/1 var(--font-mono)}
|
||||
.step-nav button[aria-current="step"] .step-num{color:var(--accent)}
|
||||
.step-nav button.done{color:var(--fg)}
|
||||
.step-panel{display:none;max-width:720px}
|
||||
.step-panel.active{display:block}
|
||||
.step-panel h2{font-size:clamp(32px,4vw,48px);line-height:1.2;margin:0 0 12px}
|
||||
.step-intro{color:var(--muted);max-width:58ch;margin:0 0 32px}
|
||||
.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
|
||||
.choice{position:relative;display:block}
|
||||
.choice input{position:absolute;opacity:0;pointer-events:none}
|
||||
.choice-body{min-height:150px;display:flex;flex-direction:column;padding:22px;border:1px solid var(--border);background:color-mix(in oklch,var(--surface) 90%,transparent);transition:border-color .15s,background .15s,transform .15s}
|
||||
.choice-body:hover{border-color:var(--fg);transform:translateY(-1px)}
|
||||
.choice input:checked + .choice-body{border-color:var(--fg);background:var(--fg-soft)}
|
||||
.choice input:focus-visible + .choice-body{outline:3px solid color-mix(in oklch,var(--accent) 55%,transparent);outline-offset:3px}
|
||||
.choice-title{font-size:19px;font-weight:700}
|
||||
.choice-copy{color:var(--muted);font-size:14px;margin-top:8px}
|
||||
.choice-mark{width:18px;height:18px;border:1px solid var(--muted);margin-top:auto;align-self:flex-end;display:grid;place-items:center}
|
||||
.choice input:checked + .choice-body .choice-mark{background:var(--fg);border-color:var(--fg)}
|
||||
.choice input:checked + .choice-body .choice-mark::after{content:"";width:6px;height:10px;border:solid var(--surface);border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
|
||||
.notice-card{border-block:1px solid var(--fg);padding-block:8px}
|
||||
.notice-row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 0;border-bottom:1px solid var(--border)}
|
||||
.notice-row:last-child{border-bottom:0}
|
||||
.notice-row strong{display:block;font-size:18px}
|
||||
.notice-row p{color:var(--muted);font-size:14px;margin:4px 0 0;max-width:48ch}
|
||||
.switch{position:relative;width:52px;min-height:32px;flex:none}
|
||||
.switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
|
||||
.track{position:absolute;inset:0;border:1px solid var(--muted);background:var(--surface);pointer-events:none}
|
||||
.track::after{content:"";position:absolute;top:4px;inset-inline-start:4px;width:22px;height:22px;background:var(--fg);transition:transform .15s}
|
||||
.switch input:checked + .track{background:var(--fg);border-color:var(--fg)}
|
||||
.switch input:checked + .track::after{transform:translateX(-20px);background:var(--surface)}
|
||||
.switch input:focus-visible + .track{outline:3px solid color-mix(in oklch,var(--accent) 55%,transparent);outline-offset:3px}
|
||||
.summary{border-top:1px solid var(--fg)}
|
||||
.summary-row{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:18px 0;border-bottom:1px solid var(--border)}
|
||||
.summary-row dt{color:var(--muted);font:12px/1.7 var(--font-mono)}
|
||||
.summary-row dd{margin:0;font-weight:700}
|
||||
.start-card{margin-top:28px;padding:26px;border:1px solid var(--fg);background:var(--surface)}
|
||||
.start-card h3{font-size:26px;margin:0 0 8px}
|
||||
.start-card p{color:var(--muted);margin:0 0 22px;max-width:52ch}
|
||||
.actions{display:flex;align-items:center;gap:12px;margin-top:34px}
|
||||
.btn{min-height:50px;display:inline-flex;align-items:center;justify-content:center;padding:12px 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);color:var(--surface)}
|
||||
.btn-secondary{background:transparent;color:var(--fg);border-color:var(--border)}
|
||||
.btn-secondary:hover{border-color:var(--fg);background:var(--fg-soft)}
|
||||
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
|
||||
.status{min-height:26px;color:var(--muted);font-size:14px;margin:14px 0 0}
|
||||
.pagefoot{padding-block:48px;border-top:1px solid var(--border);color:var(--muted)}
|
||||
.footer-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;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(--bg) 72%,transparent)}
|
||||
.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;margin-top:24px}
|
||||
.menu-links a{min-height:60px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);font-size:18px}
|
||||
.menu-links a:hover{color:var(--fg);background:var(--fg-soft)}
|
||||
@media(max-width:920px){
|
||||
:root{--gutter:22px}
|
||||
.onboarding-layout{grid-template-columns:1fr;padding-block:34px 70px}
|
||||
.step-nav{position:static;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow-x:auto;border-top:0;padding-bottom:4px}
|
||||
.step-nav button{min-width:150px;border:1px solid var(--border);padding-inline:14px}
|
||||
.choice-grid{grid-template-columns:1fr 1fr}
|
||||
}
|
||||
@media(max-width:620px){
|
||||
:root{--gutter:18px}
|
||||
.member-strip{text-align:right}
|
||||
.onboarding-head{padding-block:42px 32px}
|
||||
.onboarding-head h1{font-size:44px}
|
||||
.choice-grid{grid-template-columns:1fr}
|
||||
.choice-body{min-height:132px}
|
||||
.notice-row{align-items:flex-start}
|
||||
.summary-row{grid-template-columns:1fr;gap:4px}
|
||||
.actions{align-items:stretch;flex-direction:column-reverse}
|
||||
.actions .btn{width:100%}
|
||||
.start-card{padding:22px}
|
||||
.footer-bottom{flex-direction:column}
|
||||
}
|
||||
@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>
|
||||
<p class="member-strip" data-od-id="member-status">تم تفعيل وصول VIP — لنستثمر أول خمس دقائق في إعداد مسارك.</p>
|
||||
<header class="topnav" data-od-id="topnav">
|
||||
<div class="container nav-inner">
|
||||
<a class="logo" href="arabic-ai-learning-catalog.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">حسابي</a><button class="icon-btn" id="menuTrigger" type="button" aria-label="فتح القائمة" aria-expanded="false" aria-controls="siteMenu" data-od-id="menu-button">☰</button></div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="onboarding-head" data-od-id="onboarding-hero">
|
||||
<div class="container">
|
||||
<p class="eyebrow">عضو VIP جديد · إعداد سريع</p>
|
||||
<h1 data-od-id="onboarding-title">مرحباً بك. لنبدأ بما يخدم هدفك.</h1>
|
||||
<p class="lead">أجب عن سؤالين وحدد رسائلك المفضلة. سنقترح نقطة بداية واضحة بدلاً من تركك أمام مكتبة كبيرة.</p>
|
||||
<div class="progress-wrap" aria-label="تقدم الإعداد">
|
||||
<div class="progress-copy"><span id="progressLabel">الخطوة ١ من ٤</span><span id="progressPercent">٢٥٪</span></div>
|
||||
<div class="progress-track"><div class="progress-bar" id="progressBar"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container onboarding-layout" data-od-id="onboarding-flow">
|
||||
<nav class="step-nav" aria-label="خطوات إعداد العضوية" data-od-id="onboarding-steps">
|
||||
<button type="button" aria-current="step" disabled data-step-link="0"><span class="step-num">٠١</span><span>هدفك الآن</span></button>
|
||||
<button type="button" disabled data-step-link="1"><span class="step-num">٠٢</span><span>مستواك العملي</span></button>
|
||||
<button type="button" disabled data-step-link="2"><span class="step-num">٠٣</span><span>رسائلك</span></button>
|
||||
<button type="button" disabled data-step-link="3"><span class="step-num">٠٤</span><span>ابدأ مسارك</span></button>
|
||||
</nav>
|
||||
|
||||
<form id="onboardingForm" novalidate>
|
||||
<section class="step-panel active" data-step="0" data-od-id="step-goal">
|
||||
<h2>ما النتيجة التي تريدها أولاً؟</h2>
|
||||
<p class="step-intro">اختر هدفاً واحداً الآن. يمكنك تغييره لاحقاً من إعدادات الحساب.</p>
|
||||
<div class="choice-grid">
|
||||
<label class="choice"><input type="radio" name="goal" value="بناء مشروع ذكاء اصطناعي" required /><span class="choice-body"><span class="choice-title">بناء مشروع ذكاء اصطناعي</span><span class="choice-copy">حوّل فكرة إلى نموذج يعمل ويمكن اختباره مع مستخدمين.</span><span class="choice-mark" aria-hidden="true"></span></span></label>
|
||||
<label class="choice"><input type="radio" name="goal" value="تطوير مساري المهني" /><span class="choice-body"><span class="choice-title">تطوير مساري المهني</span><span class="choice-copy">ابنِ خبرة عملية ومشروعات تشرح قيمتك بوضوح.</span><span class="choice-mark" aria-hidden="true"></span></span></label>
|
||||
<label class="choice"><input type="radio" name="goal" value="أتمتة العمل" /><span class="choice-body"><span class="choice-title">أتمتة العمل</span><span class="choice-copy">حدد مهمة متكررة وابنِ لها سير عمل يمكن مراقبته.</span><span class="choice-mark" aria-hidden="true"></span></span></label>
|
||||
<label class="choice"><input type="radio" name="goal" value="فهم الوكلاء بعمق" /><span class="choice-body"><span class="choice-title">فهم الوكلاء بعمق</span><span class="choice-copy">صمم التخطيط والتنفيذ والتحقق وحدود التوقف بأمان.</span><span class="choice-mark" aria-hidden="true"></span></span></label>
|
||||
</div>
|
||||
<p class="status" id="goalStatus" role="status" aria-live="polite"></p>
|
||||
<div class="actions"><button class="btn btn-primary" type="button" data-next>تابع إلى مستواك</button></div>
|
||||
</section>
|
||||
|
||||
<section class="step-panel" data-step="1" data-od-id="step-level">
|
||||
<h2>ما مستوى خبرتك العملي؟</h2>
|
||||
<p class="step-intro">لا نختبرك. الإجابة تضبط ترتيب المواد وكمية الشرح في اقتراح البداية.</p>
|
||||
<div class="choice-grid">
|
||||
<label class="choice"><input type="radio" name="level" value="أبدأ من الأساسيات" required /><span class="choice-body"><span class="choice-title">أبدأ من الأساسيات</span><span class="choice-copy">استخدمت أدوات الذكاء الاصطناعي، لكنني لم أبنِ مشروعاً بعد.</span><span class="choice-mark" aria-hidden="true"></span></span></label>
|
||||
<label class="choice"><input type="radio" name="level" value="بنيت تجارب بسيطة" /><span class="choice-body"><span class="choice-title">بنيت تجارب بسيطة</span><span class="choice-copy">جرّبت واجهات API أو أتمتة أو تطبيقاً صغيراً.</span><span class="choice-mark" aria-hidden="true"></span></span></label>
|
||||
<label class="choice"><input type="radio" name="level" value="أعمل على أنظمة فعلية" /><span class="choice-body"><span class="choice-title">أعمل على أنظمة فعلية</span><span class="choice-copy">أحتاج أنماطاً أعمق للقياس والموثوقية والتشغيل.</span><span class="choice-mark" aria-hidden="true"></span></span></label>
|
||||
</div>
|
||||
<p class="status" id="levelStatus" role="status" aria-live="polite"></p>
|
||||
<div class="actions"><button class="btn btn-secondary" type="button" data-back>رجوع</button><button class="btn btn-primary" type="button" data-next>تابع إلى الرسائل</button></div>
|
||||
</section>
|
||||
|
||||
<section class="step-panel" data-step="2" data-od-id="step-notifications">
|
||||
<h2>اختر ما يستحق الوصول إلى بريدك.</h2>
|
||||
<p class="step-intro">كل الخيارات قابلة للتغيير. لا يؤثر إيقافها على وصولك إلى محتوى VIP.</p>
|
||||
<div class="notice-card">
|
||||
<div class="notice-row"><div><strong>خلاصة الأحد</strong><p>أفضل ما نُشر هذا الأسبوع مع نقطة تطبيق واحدة.</p></div><label class="switch"><input type="checkbox" name="weekly" checked aria-label="تفعيل خلاصة الأحد" /><span class="track"></span></label></div>
|
||||
<div class="notice-row"><div><strong>تحديثات المسار</strong><p>رسالة عندما نضيف جزءاً جديداً إلى المسار الذي تتبعه.</p></div><label class="switch"><input type="checkbox" name="trackUpdates" checked aria-label="تفعيل تحديثات المسار" /><span class="track"></span></label></div>
|
||||
<div class="notice-row"><div><strong>الردود على تعليقاتك</strong><p>تنبيه فقط عندما يرد عضو أو فريق أنور على سؤالك.</p></div><label class="switch"><input type="checkbox" name="replies" checked aria-label="تفعيل إشعارات الردود" /><span class="track"></span></label></div>
|
||||
</div>
|
||||
<div class="actions"><button class="btn btn-secondary" type="button" data-back>رجوع</button><button class="btn btn-primary" type="button" data-next>اعرض نقطة البداية</button></div>
|
||||
</section>
|
||||
|
||||
<section class="step-panel" data-step="3" data-od-id="step-start">
|
||||
<h2>مسارك جاهز.</h2>
|
||||
<p class="step-intro">ابدأ بمادة واحدة، طبّق ملفها العملي، ثم عد إلى المكتبة. لا حاجة لفتح كل شيء اليوم.</p>
|
||||
<dl class="summary">
|
||||
<div class="summary-row"><dt>هدفك</dt><dd id="summaryGoal">—</dd></div>
|
||||
<div class="summary-row"><dt>مستواك</dt><dd id="summaryLevel">—</dd></div>
|
||||
<div class="summary-row"><dt>الرسائل</dt><dd id="summaryNotices">—</dd></div>
|
||||
</dl>
|
||||
<article class="start-card" data-od-id="recommended-first-guide">
|
||||
<p class="eyebrow">نقطة البداية المقترحة</p>
|
||||
<h3 id="recommendationTitle">تشريح وكيل ناجح</h3>
|
||||
<p id="recommendationCopy">ابدأ بفصل التخطيط عن التنفيذ والتحقق، ثم استخدم قالب حالة الوكيل في مشروع صغير.</p>
|
||||
<a class="btn btn-primary" href="post-unlocked.html" id="startGuide" data-od-id="start-first-guide">ابدأ الدليل الأول</a>
|
||||
</article>
|
||||
<div class="actions"><button class="btn btn-secondary" type="button" data-back>تعديل الاختيارات</button><a class="btn btn-secondary" href="arabic-ai-learning-catalog.html#catalog">اذهب إلى المكتبة</a></div>
|
||||
</section>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="pagefoot" data-od-id="footer"><div class="container footer-bottom"><span>© أنور بي آي ٢٠٢٦</span><span>يمكنك تعديل هدفك ورسائلك لاحقاً من إعدادات الحساب.</span></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="arabic-ai-learning-catalog.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 form=document.getElementById('onboardingForm');
|
||||
const panels=[...document.querySelectorAll('.step-panel')];
|
||||
const steps=[...document.querySelectorAll('[data-step-link]')];
|
||||
const bar=document.getElementById('progressBar');
|
||||
const label=document.getElementById('progressLabel');
|
||||
const percent=document.getElementById('progressPercent');
|
||||
let current=0;
|
||||
const labels=['الخطوة ١ من ٤','الخطوة ٢ من ٤','الخطوة ٣ من ٤','الخطوة ٤ من ٤'];
|
||||
const percentages=['٢٥٪','٥٠٪','٧٥٪','١٠٠٪'];
|
||||
|
||||
function selected(name){const field=form.elements[name];return field&&field.value?field.value:''}
|
||||
function save(){try{localStorage.setItem('anwarpi:vip-onboarding',JSON.stringify({step:current,goal:selected('goal'),level:selected('level'),weekly:form.elements.weekly.checked,trackUpdates:form.elements.trackUpdates.checked,replies:form.elements.replies.checked}))}catch(_){} }
|
||||
function recommendation(goal){
|
||||
if(goal==='أتمتة العمل')return['راقب قبل أن تؤتمت','ابدأ بتحديد إشارات النجاح والفشل قبل بناء سير العمل، ثم استخدم قائمة المراقبة في أول تجربة.','arabic-ai-learning-catalog.html#catalog'];
|
||||
if(goal==='بناء مشروع ذكاء اصطناعي')return['من الفكرة إلى نموذج قابل للاختبار','اختر مشكلة واحدة ومستخدمًا واحدًا، ثم حوّل الفرضية إلى نموذج صغير يمكن اختباره هذا الأسبوع.','arabic-ai-learning-catalog.html#catalog'];
|
||||
if(goal==='تطوير مساري المهني')return['تشريح وكيل ناجح','ابنِ نموذجاً صغيراً يوضح التخطيط والتنفيذ والتحقق، ثم وثّق قراراتك كدراسة حالة.','post-unlocked.html'];
|
||||
return['تشريح وكيل ناجح','ابدأ بفصل التخطيط عن التنفيذ والتحقق، ثم استخدم قالب حالة الوكيل في مشروع صغير.','post-unlocked.html'];
|
||||
}
|
||||
function renderSummary(){
|
||||
document.getElementById('summaryGoal').textContent=selected('goal')||'—';
|
||||
document.getElementById('summaryLevel').textContent=selected('level')||'—';
|
||||
const notices=[];if(form.elements.weekly.checked)notices.push('خلاصة الأحد');if(form.elements.trackUpdates.checked)notices.push('تحديثات المسار');if(form.elements.replies.checked)notices.push('الردود');
|
||||
document.getElementById('summaryNotices').textContent=notices.length?notices.join('، '):'لا رسائل بريدية';
|
||||
const rec=recommendation(selected('goal'));document.getElementById('recommendationTitle').textContent=rec[0];document.getElementById('recommendationCopy').textContent=rec[1];document.getElementById('startGuide').href=rec[2];
|
||||
}
|
||||
function show(index){
|
||||
current=Math.max(0,Math.min(panels.length-1,index));
|
||||
panels.forEach((panel,i)=>panel.classList.toggle('active',i===current));
|
||||
steps.forEach((step,i)=>{step.toggleAttribute('aria-current',i===current);step.classList.toggle('done',i<current)});
|
||||
bar.style.width=((current+1)*25)+'%';label.textContent=labels[current];percent.textContent=percentages[current];
|
||||
if(current===3)renderSummary();save();
|
||||
document.querySelector('.onboarding-head').focus?.({preventScroll:true});
|
||||
}
|
||||
function validate(){
|
||||
if(current===0&&!selected('goal')){document.getElementById('goalStatus').textContent='اختر هدفاً واحداً للمتابعة.';form.elements.goal[0].focus();return false}
|
||||
if(current===1&&!selected('level')){document.getElementById('levelStatus').textContent='اختر مستوى واحداً للمتابعة.';form.elements.level[0].focus();return false}
|
||||
return true;
|
||||
}
|
||||
document.querySelectorAll('[data-next]').forEach(button=>button.addEventListener('click',()=>{if(validate())show(current+1)}));
|
||||
document.querySelectorAll('[data-back]').forEach(button=>button.addEventListener('click',()=>show(current-1)));
|
||||
form.addEventListener('change',event=>{if(event.target.name==='goal')document.getElementById('goalStatus').textContent='';if(event.target.name==='level')document.getElementById('levelStatus').textContent='';save()});
|
||||
try{const state=JSON.parse(localStorage.getItem('anwarpi:vip-onboarding')||'null');if(state){['goal','level'].forEach(name=>{const input=form.querySelector('[name="'+name+'"][value="'+CSS.escape(state[name]||'')+'"]');if(input)input.checked=true});['weekly','trackUpdates','replies'].forEach(name=>{if(typeof state[name]==='boolean')form.elements[name].checked=state[name]});current=Math.max(0,Math.min(3,Number(state.step)||0))}}catch(_){}
|
||||
show(current);
|
||||
|
||||
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(element=>element.addEventListener('click',()=>setMenu(false)));document.addEventListener('keydown',event=>{if(event.key==='Escape'&&menu.classList.contains('open'))setMenu(false)});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user