Initial site release
Deploy GitHub Pages / deploy (push) Canceled after 0s

This commit is contained in:
2026-10-02 12:46:11 +03:00
commit 8fe818e647
23 changed files with 2854 additions and 0 deletions
+289
View File
@@ -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>