Initial site release

forgot-password.html

@@ -0,0 +1,34 @@
+<!doctype html>
+<html lang="ar" dir="rtl">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="referrer" content="strict-origin-when-cross-origin" />
+  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; connect-src 'none'; object-src 'none'; base-uri 'self'; form-action 'self'; frame-src 'none'; worker-src 'none'" />
+  <meta name="description" content="طلب رابط إعادة تعيين كلمة مرور حساب أنور بي آي." />
+  <title>استعادة كلمة المرور — أنور بي آي</title>
+  <style>
+    :root {
+      --bg: oklch(16% 0.03 225); --surface: oklch(22% 0.04 220); --fg: oklch(96% 0.015 210);
+      --muted: oklch(74% 0.03 215); --border: oklch(36% 0.05 215); --accent: oklch(78% 0.17 190);
+      --font-display: "SF Arabic", "Noto Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      --font-body: "SF Arabic", "Noto Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      --font-mono: ui-monospace, "SF Mono", Menlo, monospace; --container: 1180px; --gutter: 32px;
+    }
+    *,*::before,*::after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.7 var(--font-body)}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}h1{font-family:var(--font-display);text-wrap:balance}p{text-wrap:pretty}.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
+    .topnav{border-bottom:1px solid var(--border)}.nav-inner{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:24px}.logo{display:inline-flex;align-items:center;gap:10px;font-size:23px;font-weight:700}.nav-return{min-height:44px;display:inline-flex;align-items:center;color:var(--muted);border-bottom:1px solid transparent}.nav-return:hover{color:var(--fg);border-color:var(--fg)}
+    .reset{min-height:calc(100dvh - 142px);display:grid;place-items:center;padding:64px var(--gutter)}.reset-card{width:min(520px,100%);border:1px solid var(--border);background:var(--surface);padding:clamp(28px,6vw,54px)}.eyebrow{font:11px/1.5 var(--font-mono);color:var(--accent);margin:0 0 18px}.reset-card h1{font-size:clamp(38px,6vw,58px);line-height:1.12;margin:0}.lead{color:var(--muted);font-size:18px;margin:16px 0 30px}.field{display:grid;gap:8px}.field label{font-size:13px;color:var(--muted)}.input{width:100%;min-height:52px;border:1px solid var(--border);background:var(--bg);color:var(--fg);padding:13px 14px}.input:focus{outline:2px solid var(--accent);outline-offset:1px}.btn{width:100%;min-height:50px;margin-top:18px;border:1px solid var(--accent);background:var(--accent);color:var(--surface);font-weight:700;padding:12px 20px}.btn:hover{background:color-mix(in oklch,var(--accent) 86%,black)}.status{min-height:26px;margin:16px 0 0;color:var(--fg)}.back{min-height:44px;display:inline-flex;align-items:center;margin-top:18px;color:var(--muted);text-decoration:underline;text-underline-offset:4px}.back:hover{color:var(--fg)}.pagefoot{padding-block:26px;border-top:1px solid var(--border);color:var(--muted);text-align:center;font-size:13px}
+    @media(max-width:620px){:root{--gutter:18px}.nav-return{display:none}.reset{padding-block:40px;align-items:start}.reset-card{padding:26px 20px}}
+  </style>
+  <link rel="stylesheet" href="assets/anwarpi.css?v=5" />
+  <script src="assets/anwarpi.js?v=4" defer></script>
+</head>
+<body>
+  <header class="topnav" data-od-id="topnav"><div class="container nav-inner"><a class="logo" href="arabic-ai-learning-catalog.html" data-od-id="brand"><img class="logo-mark" src="assets/anwarpi-logo.jpg" alt="" width="1200" height="1352">أنور بي آي</a><a class="nav-return" href="login.html">العودة إلى تسجيل الدخول</a></div></header>
+  <main class="reset" data-od-id="password-reset"><section class="reset-card" data-od-id="reset-card"><p class="eyebrow">استعادة الحساب</p><h1 data-od-id="reset-title">أرسل رابطاً جديداً.</h1><p class="lead">أدخل بريد حسابك وسنجهّز طلب إعادة تعيين كلمة المرور.</p><form id="resetForm" novalidate data-od-id="reset-form"><div class="field"><label for="resetEmail">البريد الإلكتروني</label><input class="input" id="resetEmail" name="email" type="email" inputmode="email" autocomplete="email" dir="ltr" required /></div><button class="btn" type="submit" data-od-id="reset-submit">إرسال رابط الاستعادة</button><p class="status" id="resetStatus" role="status" aria-live="polite"></p></form><a class="back" href="login.html">تذكرت كلمة المرور؟ سجّل الدخول</a></section></main>
+  <footer class="pagefoot" data-od-id="footer"><div class="container">لن نكشف ما إذا كان البريد مسجلاً لحماية الحسابات.</div></footer>
+  <script>
+    (()=>{const form=document.getElementById('resetForm'),status=document.getElementById('resetStatus');form.addEventListener('submit',event=>{event.preventDefault();if(!form.checkValidity()){status.textContent='أدخل بريداً إلكترونياً صحيحاً.';form.reportValidity();return}status.textContent='إذا كان البريد مسجلاً، فسيصلك رابط الاستعادة بعد ربط خدمة البريد.';form.reset()})})();
+  </script>
+</body>
+</html>