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
+305
View File
@@ -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>