Initial site release

index.html

@@ -0,0 +1,80 @@
+<!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}
+    a{color:inherit;text-decoration:none} button{font:inherit;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)}
+    .hero{padding-block:clamp(64px,9vw,120px);border-bottom:1px solid var(--border)}
+    .crumb{font:12px/1.5 var(--font-mono);color:var(--accent);margin:0 0 20px}
+    .hero h1{font-size:clamp(44px,6.5vw,84px);line-height:1.08;letter-spacing:-.025em;max-width:14ch;margin:0}
+    .hero .lead{font-size:clamp(18px,1.8vw,22px);line-height:1.7;color:var(--muted);max-width:56ch;margin:26px 0 0}
+    .screens{padding-block:80px;border-bottom:1px solid var(--border)}
+    .screen-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--fg)}
+    .screen-card{display:flex;flex-direction:column;min-height:420px;padding:30px 0;border-bottom:1px solid var(--border)}
+    .screen-card + .screen-card{margin-inline-start:32px}
+    .screen-index{font:12px/1.5 var(--font-mono);color:var(--accent)}
+    .screen-card h2{font-size:30px;margin:22px 0 10px;max-width:14ch}
+    .screen-card p{color:var(--muted);margin:0 0 20px;flex:1}
+    .screen-features{list-style:none;margin:0 0 28px;padding:0}
+    .screen-features li{min-height:34px;display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);border-bottom:1px solid var(--border)}
+    .screen-features li::before{content:"";width:7px;height:7px;background:var(--accent);transform:rotate(45deg);flex:none}
+    .btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center;padding:11px 22px;border:1px solid var(--border);font-weight:700}
+    .btn:hover{border-color:var(--fg);background:var(--fg-soft)}
+    .btn .arrow{margin-inline-start:10px}
+    .how{padding-block:80px}
+    .how h2{font-size:clamp(34px,4.5vw,52px);margin:0 0 34px}
+    .how ol{counter-reset:h;padding:0;margin:0;border-top:1px solid var(--fg)}
+    .how li{counter-increment:h;display:grid;grid-template-columns:64px 1fr;gap:20px;padding:22px 0;border-bottom:1px solid var(--border)}
+    .how li::before{content:"٠" counter(h,arabic-indic);font-family:var(--font-display);font-size:32px;color:var(--accent);line-height:1.2}
+    .how li div{align-self:center}
+    .pagefoot{padding-block:54px;color:var(--muted)}
+    .footer-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:28px;border-top:1px solid var(--border);font-size:13px}
+    @media(max-width:920px){:root{--gutter:22px}.nav-links{display:none}.screen-grid{grid-template-columns:1fr}.screen-card{min-height:0}.screen-card + .screen-card{margin-inline-start:0}}
+    @media(max-width:620px){:root{--gutter:18px}.hero h1{font-size:48px}.screens,.how{padding-block:56px}.footer-grid{grid-template-columns:1fr;gap:28px}}
+    @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>
+  <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></header>
+  <main>
+    <section class="hero" data-od-id="hero"><div class="container">
+      <p class="crumb">نماذج تجربة · مسار العضوية</p>
+      <h1 data-od-id="hero-title">كيف يرى المستخدم المحتوى قبل وبعد الاشتراك</h1>
+      <p class="lead">ثلاث شاشات مترابطة: الزائر يرى معاينة مجانية وقفل الوصول للمتقدم، والمشترك يرى الدليل كاملاً بملفات العمل، ثم يدير حسابه من الإعدادات — بما فيها كلمة المرور وإلغاء الاشتراك.</p>
+    </div></section>
+    <section class="screens" data-od-id="screens"><div class="container"><div class="screen-grid">
+      <article class="screen-card" data-od-id="screen-locked"><span class="screen-index">٠١ · زائر غير مشترك</span><h2>الدليل المقفل</h2><p>الزائر المسجَّل فقط يقرأ المقدمة والقسم الأول، ثم تصلك نقطة القفل: ما المتبقي بالضبط، وسعر واحد واضح، وزر اشتراك واحد.</p><ul class="screen-features"><li>معاينة مجانية محدودة</li><li>قائمة الأقسام المقفلة بأيقونات</li><li>بطاقة اشتراك عند نقطة القفل</li></ul><a class="btn" href="post-locked.html">افتح النموذج<span class="arrow" aria-hidden="true">←</span></a></article>
+      <article class="screen-card" data-od-id="screen-unlocked"><span class="screen-index">٠٢ · مشترك فعّال</span><h2>الدليل المفتوح</h2><p>نفس الدليل كما يراه المشترك: كل الأقسام مكشوفة، شريط تقدّم في المسار، وملفات العمل قابلة للتنزيل بضغطة واحدة.</p><ul class="screen-features"><li>وصول كامل بلا حواف قفل</li><li>تقدّمك في مسار الوكلاء</li><li>تنزيل قالب الحالة وقائمة الفحص</li></ul><a class="btn" href="post-unlocked.html">افتح النموذج<span class="arrow" aria-hidden="true">←</span></a></article>
+      <article class="screen-card" data-od-id="screen-settings"><span class="screen-index">٠٣ · إدارة الحساب</span><h2>الإعدادات والعضوية</h2><p>أربع أقسام تعمل فعلاً: الملف الشخصي، تغيير كلمة المرور بتحقق فوري، تفضيلات الرسائل، وإلغاء الاشتراك مع تأكيد واضح.</p><ul class="screen-features"><li>تغيير كلمة المرور بشروط ظاهرة</li><li>تبديل التفضيلات وحفظها</li><li>إلغاء يؤجل التجديد ولا يقطع الوصول فوراً</li></ul><a class="btn" href="account-settings.html">افتح النموذج<span class="arrow" aria-hidden="true">←</span></a></article>
+    </div></div></section>
+    <section class="how" data-od-id="how-to-explore"><div class="container">
+      <h2>جرّب المسار كاملاً</h2>
+      <ol>
+        <li><div>افتح <a href="post-locked.html" style="text-decoration:underline;text-underline-offset:4px;font-weight:700">الدليل المقفل</a> كزائر — لاحظ أن الفهرس الجانبي يُظهر الأقسام المقفلة بدل إخفائها، فيعرف الزائر ماذا يفوّت بالضبط.</div></li>
+        <li><div>افتح <a href="post-unlocked.html" style="text-decoration:underline;text-underline-offset:4px;font-weight:700">الدليل المفتوح</a> كعضو — نفس المادة بلا نقطة قفل، مع بطاقة تقدّم وملفات تنزيل تعمل.</div></li>
+        <li><div>من <a href="account-settings.html" style="text-decoration:underline;text-underline-offset:4px;font-weight:700">الإعدادات</a> جرّب كلمة المرور ببيانات خاطئة ثم صحيحة، ثم الإلغاء: تأكيد واضح، حالة العضوية تتغير، وزر إعادة الاشتراك يظهر.</div></li>
+      </ol>
+    </div></section>
+  </main>
+  <footer class="pagefoot" data-od-id="footer"><div class="container"><div class="footer-bottom"><span>© أنور بي آي ٢٠٢٦</span><span>نموذج تجربة — البيانات لا تُرسل لأي خادم</span></div></div></footer>
+</body>
+</html>