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

290 lines
27 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="ar" dir="rtl">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="referrer" content="strict-origin-when-cross-origin" />
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; connect-src 'none'; object-src 'none'; base-uri 'self'; form-action 'self'; frame-src 'none'; worker-src 'none'" />
<meta name="description" content="تهيئة أعضاء أنور بي آي الجدد واختيار مسار التعلّم الأول بعد الاشتراك في وصول 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>