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

306 lines
33 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="إعدادات حساب أنور بي آي: الملف الشخصي، كلمة المرور، التفضيلات، وإدارة العضوية والإلغاء." />
<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>