docs: restructure documentation, add digital legacy report, and secure contracts

siromove.com/tutorial/generate.py

@@ -0,0 +1,253 @@
+import json
+
+units = [
+    {
+        "id": 1,
+        "title": "التسجيل وإنشاء الحساب",
+        "desc": "التسجيل يحتاج رقم هاتف فقط — لا بريد إلكتروني إجباري ولا بطاقة دفع. أقل من دقيقة من التحميل حتى أول شاشة خريطة.",
+        "steps": [
+            {"title": "تحميل التطبيق وفتحه", "desc": "شاشة البداية بشعار Siro", "img": "tutorial/registration/01_splash_screen.png"},
+            {"title": "شاشات التعريف", "desc": "شريحة الـ Onboarding الأولى", "img": "tutorial/registration/02_onboarding.png"},
+            {"title": "إدخال رقم الهاتف", "desc": "حقل الهاتف مع اختيار الدولة", "img": "tutorial/registration/03_phone_number.png"},
+            {"title": "رمز التحقق OTP", "desc": "شاشة إدخال الرمز (يصل واتساب/SMS)", "img": "tutorial/registration/04_otp.png"},
+            {"title": "إكمال البيانات", "desc": "الاسم + البريد (اختياري) ثم «ابدأ»", "img": "tutorial/registration/05_complete_profile.png"}
+        ]
+    },
+    {
+        "id": 2,
+        "title": "طلب الرحلة",
+        "desc": "السعر المعروض نهائي ومحسوب من الخادم — لا مفاجآت عند الدفع (ما لم تتغير الوجهة أو يزد الانتظار).",
+        "steps": [
+            {"title": "الخريطة الرئيسية", "desc": "الخريطة مع السيارات القريبة تتحرك", "img": "tutorial/booking/01_map_main.png"},
+            {"title": "تحديد الوجهة", "desc": "شريط البحث + النتائج", "img": "tutorial/booking/02_search_destination.png"},
+            {"title": "تأكيد نقطة الانطلاق", "desc": "دبوس الانطلاق قابل للسحب", "img": "tutorial/booking/03_pickup_pin.png"},
+            {"title": "اختيار فئة السيارة", "desc": "قائمة الفئات التسع مع السعر وشارة التوفير", "img": "tutorial/booking/04_select_car_type.png"},
+            {"title": "كود الخصم", "desc": "حقل البرومو مطبّق على السعر", "img": "tutorial/booking/05_promo_code.png"},
+            {"title": "تأكيد الطلب", "desc": "زر «اطلب الآن» مع السعر النهائي", "img": "tutorial/booking/06_confirm_order.png"}
+        ]
+    },
+    {
+        "id": 3,
+        "title": "الانتظار والمطابقة",
+        "desc": "متوسط زمن المطابقة أقل من 90 ثانية. إذا لم يقبل أحد، النظام يقترح تعديلاً بسيطاً على السعر بدل إلغاء طلبك.",
+        "steps": [
+            {"title": "البحث عن كابتن", "desc": "نافذة البحث مع المؤقّت", "img": "tutorial/matching/01_searching_captain.png"},
+            {"title": "اقتراح المفاوض الذكي", "desc": "حوار رفع السعر بعد 90 ثانية", "img": "tutorial/matching/02_smart_negotiator.png"},
+            {"title": "قبول الكابتن", "desc": "بطاقة الكابتن: الاسم، الصورة، التقييم، اللوحة", "img": "tutorial/matching/03_captain_card.png"},
+            {"title": "الكابتن في الطريق", "desc": "الخريطة مع المسار الأصفر والوقت المتوقع", "img": "tutorial/matching/04_captain_on_way.png"}
+        ]
+    },
+    {
+        "id": 4,
+        "title": "أثناء الرحلة والسلامة",
+        "desc": "تتبع حي للرحلة مع خيارات أمان متقدمة واتصال آمن بالكابتن.",
+        "steps": [
+            {"title": "وصول الكابتن", "desc": "إشعار «الكابتن وصل» ومهلة انتظار 5 دقائق", "img": "tutorial/ride/01_captain_arrived.png"},
+            {"title": "بدء الرحلة", "desc": "المسار الأزرق + العداد الحي", "img": "tutorial/ride/02_ride_started.png"},
+            {"title": "مشاركة الرحلة", "desc": "رابط متابعة لطرف ثالث (للأهل)", "img": "tutorial/ride/03_share_ride.png"},
+            {"title": "زر الطوارئ SOS", "desc": "زر الطوارئ (وهزّ الهاتف 5 مرات)", "img": "tutorial/ride/04_sos_button.png"},
+            {"title": "الاتصال بالكابتن", "desc": "شاشة المكالمة داخل التطبيق", "img": "tutorial/ride/05_in_app_call.png"}
+        ]
+    },
+    {
+        "id": 5,
+        "title": "الإلغاء",
+        "desc": "الإلغاء قبل القبول مجاني، وبعد الوصول قد تُطبّق رسوم. السائق يواجه إيقافاً بعد 3 إلغاءات.",
+        "steps": [
+            {"title": "زر الإلغاء", "desc": "مكان الزر أثناء البحث/الانتظار", "img": "tutorial/cancel/01_cancel_button.png"},
+            {"title": "اختيار السبب", "desc": "قائمة أسباب الإلغاء", "img": "tutorial/cancel/02_cancel_reason.png"},
+            {"title": "تأكيد الإلغاء", "desc": "رسالة التأكيد + سياسة الرسوم", "img": "tutorial/cancel/03_cancel_confirm.png"}
+        ]
+    },
+    {
+        "id": 6,
+        "title": "الدفع والتقييم",
+        "desc": "دفع مرن مع نقاط مكافأة للمحفظة، وتقييم يعزز جودة الخدمة.",
+        "steps": [
+            {"title": "نهاية الرحلة", "desc": "شاشة الفاتورة النهائية", "img": "tutorial/payment/01_ride_finished.png"},
+            {"title": "طرق الدفع", "desc": "كاش/محفظة/بطاقة ووسائل الدفع المحلية", "img": "tutorial/payment/02_payment_methods.png"},
+            {"title": "الدفع كاش", "desc": "حوار تأكيد الكاش", "img": "tutorial/payment/03_cash_confirm.png"},
+            {"title": "الدفع بالمحفظة", "desc": "الخصم من الرصيد وعروض الشحن", "img": "tutorial/payment/04_wallet_pay.png"},
+            {"title": "تقييم الكابتن", "desc": "النجوم + الإكرامية", "img": "tutorial/payment/05_rate_captain.png"},
+            {"title": "سجل الرحلات", "desc": "قائمة الرحلات السابقة والفواتير", "img": "tutorial/payment/06_ride_history.png"}
+        ]
+    },
+    {
+        "id": 7,
+        "title": "مواصلاتي — للطلاب",
+        "desc": "خدمة تتبع باصات الجامعات مجاناً مع إمكانية تحويل الطالب لرحلة مدفوعة إذا فاته الباص.",
+        "steps": [
+            {"title": "اختيار الجامعة", "desc": "تبويب مواصلاتي واختيار الجامعة", "img": "tutorial/transit/01_select_university.png"},
+            {"title": "تفعيل العضوية", "desc": "إدخال الرقم الجامعي للتفعيل الفوري", "img": "tutorial/transit/02_activate_student_id.png"},
+            {"title": "استعراض الخطوط", "desc": "قائمة الخطوط المعتمدة وجداولها", "img": "tutorial/transit/03_transit_lines.png"},
+            {"title": "التتبع الحي", "desc": "الباص يتحرك على المسار والمحطات", "img": "tutorial/transit/04_live_tracking.png"},
+            {"title": "فاتك الباص؟", "desc": "الزر البارز لطلب سيارة بديلة", "img": "tutorial/transit/05_missed_bus.png"}
+        ]
+    }
+]
+
+html_template = """<!DOCTYPE html>
+<html lang="ar" dir="rtl">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>كيف تستخدم سيرو — التوتوريال الشامل</title>
+<style>
+:root{
+  --bg:#F6F7F5; --surface:#FFFFFF; --surface2:#EEF1EE;
+  --ink:#1A241F; --muted:#5B6862; --faint:#8B968F;
+  --line:#E1E5E1; --line2:#D2D8D3;
+  --brand:#0E7A5F; --brand-ink:#0A5945; --brand-soft:#E4F0EB;
+  --amber:#9A6B12; --amber-soft:#F6EDDA;
+  --red:#B3362B; --red-soft:#F7E5E2;
+  --good:#2E7D4F; --good-soft:#E4F1E8;
+  --sans:"SF Arabic","Segoe UI",system-ui,-apple-system,"Noto Sans Arabic",Tahoma,sans-serif;
+  --mono:ui-monospace,"SF Mono",Consolas,monospace;
+}
+@media (prefers-color-scheme: dark){
+  :root{
+    --bg:#0F1512; --surface:#161E19; --surface2:#1C2620;
+    --ink:#E8EDEA; --muted:#9BA8A1; --faint:#6E7B74;
+    --line:#26302B; --line2:#32403A;
+    --brand:#3FBF97; --brand-ink:#8FE0C5; --brand-soft:#15342A;
+    --amber:#E0AE55; --amber-soft:#33290F;
+    --red:#E07065; --red-soft:#361A16;
+    --good:#57C287; --good-soft:#14301F;
+  }
+}
+body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.85; }
+* { box-sizing: border-box; }
+.wrap { max-width: 1060px; margin: 0 auto; padding: 0 22px; }
+h1, h2, h3, h4 { margin: 0; color: var(--ink); line-height: 1.35; text-wrap: balance; }
+p { margin: 0; }
+.hero { padding: 64px 0 36px; border-bottom: 1px solid var(--line); }
+.hero .kicker {
+  display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em;
+  color: var(--brand-ink); background: var(--brand-soft); border-radius: 99px; padding: 4px 14px;
+  margin-bottom: 18px;
+}
+.hero h1 { font-size: clamp(1.7rem, 4.5vw, 2.5rem); font-weight: 800; }
+.hero .lede { margin-top: 14px; font-size: 1.05rem; color: var(--muted); max-width: 60ch; }
+.hero .meta { margin-top: 16px; font-size: 0.8rem; color: var(--faint); }
+
+.tabs {
+  display: flex; gap: 8px; overflow-x: auto; padding: 20px 0 10px;
+  margin-top: 10px; scrollbar-width: none;
+}
+.tabs::-webkit-scrollbar { display: none; }
+.tab-btn {
+  background: var(--surface); border: 1px solid var(--line); color: var(--muted);
+  font-family: var(--sans); font-size: 0.95rem; font-weight: 700; padding: 10px 20px;
+  border-radius: 99px; cursor: pointer; white-space: nowrap; transition: all 0.2s;
+}
+.tab-btn:hover { border-color: var(--brand); color: var(--ink); }
+.tab-btn.active { background: var(--brand-soft); color: var(--brand-ink); border-color: var(--brand-ink); font-weight: 800; }
+
+.tab-content { display: none; animation: fadeIn 0.3s ease; padding: 30px 0 80px; }
+.tab-content.active { display: block; }
+@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+
+.sec-head { margin-bottom: 40px; text-align: center; }
+.sec-head h2 { font-size: 1.8rem; font-weight: 800; margin-bottom: 12px; }
+.sec-head .thesis { color: var(--muted); font-size: 1.1rem; max-width: 66ch; margin: 0 auto; }
+
+.steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; margin-top: 20px; }
+.step-card {
+  display: flex; flex-direction: column; gap: 20px; align-items: center;
+  background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 30px 20px;
+}
+.step-info { text-align: center; }
+.step-num {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 32px; height: 32px; background: var(--brand); color: #fff;
+  border-radius: 50%; font-size: 1rem; font-weight: 800; margin-bottom: 12px; font-variant-numeric: tabular-nums;
+}
+.step-info h4 { font-size: 1.1rem; font-weight: 800; margin-bottom: 6px; }
+.step-info p { font-size: 0.9rem; color: var(--muted); }
+
+.phone-frame {
+  width: 260px; height: 540px; border: 12px solid #1a1a1a; border-radius: 36px;
+  overflow: hidden; position: relative; box-shadow: 0 10px 25px rgba(0,0,0,0.05); background: #f1f3f2;
+}
+.phone-notch {
+  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
+  width: 110px; height: 26px; background: #1a1a1a;
+  border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; z-index: 2;
+}
+.phone-screen {
+  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
+  text-align: center; padding: 20px; color: var(--faint); font-family: var(--mono);
+  font-size: 0.75rem; word-break: break-all; background-color: var(--surface2);
+}
+</style>
+</head>
+<body>
+  <header class="hero"><div class="wrap">
+    <span class="kicker">خطة التوتوريال — 34 لقطة</span>
+    <h1>كيف تستخدم سيرو</h1>
+    <p class="lede">صفحات شرح تفاعلية تشرح للمستخدم الجديد كل عملية خطوة بخطوة، مدعومة بلقطات شاشة حقيقية من التطبيق.</p>
+    <p class="meta">تم بناء هذه الصفحة حسب التقرير الشامل — في انتظار إدراج اللقطات النهائية</p>
+  </div></header>
+
+  <div class="wrap">
+    <div class="tabs">
+      {tabs_html}
+    </div>
+    
+    <div class="tab-contents">
+      {contents_html}
+    </div>
+  </div>
+
+  <script>
+    function showTab(id) {
+      document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
+      document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
+      document.getElementById('btn-' + id).classList.add('active');
+      document.getElementById('tab-' + id).classList.add('active');
+    }
+  </script>
+</body>
+</html>
+"""
+
+tabs_html = ""
+contents_html = ""
+
+for unit in units:
+    active_class = " active" if unit["id"] == 1 else ""
+    tabs_html += f'<button id="btn-{unit["id"]}" class="tab-btn{active_class}" onclick="showTab({unit["id"]})">{unit["id"]}. {unit["title"]}</button>\n      '
+    
+    steps_html = ""
+    for i, step in enumerate(unit["steps"]):
+        steps_html += f"""
+        <div class="step-card">
+          <div class="step-info">
+            <span class="step-num">{i+1}</span>
+            <h4>{step['title']}</h4>
+            <p>{step['desc']}</p>
+          </div>
+          <div class="phone-frame">
+            <div class="phone-notch"></div>
+            <div class="phone-screen">{step['img']}</div>
+          </div>
+        </div>"""
+    
+    contents_html += f"""
+      <div id="tab-{unit['id']}" class="tab-content{active_class}">
+        <div class="sec-head">
+          <h2>الوحدة {unit['id']}: {unit['title']}</h2>
+          <p class="thesis">{unit['desc']}</p>
+        </div>
+        <div class="steps-grid">
+          {steps_html}
+        </div>
+      </div>
+"""
+
+final_html = html_template.replace('{tabs_html}', tabs_html).replace('{contents_html}', contents_html)
+
+with open("/Users/hamzaaleghwairyeen/development/App/Siro/siromove.com/tutorial/index.html", "w", encoding="utf-8") as f:
+    f.write(final_html)
+
+print("Generated HTML successfully.")

siromove.com/tutorial/index.html

@@ -0,0 +1,574 @@
+<!DOCTYPE html>
+<html lang="ar" dir="rtl">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>كيف تستخدم سيرو — التوتوريال الشامل</title>
+<style>
+:root{
+  --bg:#F6F7F5; --surface:#FFFFFF; --surface2:#EEF1EE;
+  --ink:#1A241F; --muted:#5B6862; --faint:#8B968F;
+  --line:#E1E5E1; --line2:#D2D8D3;
+  --brand:#0E7A5F; --brand-ink:#0A5945; --brand-soft:#E4F0EB;
+  --amber:#9A6B12; --amber-soft:#F6EDDA;
+  --red:#B3362B; --red-soft:#F7E5E2;
+  --good:#2E7D4F; --good-soft:#E4F1E8;
+  --sans:"SF Arabic","Segoe UI",system-ui,-apple-system,"Noto Sans Arabic",Tahoma,sans-serif;
+  --mono:ui-monospace,"SF Mono",Consolas,monospace;
+}
+@media (prefers-color-scheme: dark){
+  :root{
+    --bg:#0F1512; --surface:#161E19; --surface2:#1C2620;
+    --ink:#E8EDEA; --muted:#9BA8A1; --faint:#6E7B74;
+    --line:#26302B; --line2:#32403A;
+    --brand:#3FBF97; --brand-ink:#8FE0C5; --brand-soft:#15342A;
+    --amber:#E0AE55; --amber-soft:#33290F;
+    --red:#E07065; --red-soft:#361A16;
+    --good:#57C287; --good-soft:#14301F;
+  }
+}
+body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.85; }
+* { box-sizing: border-box; }
+.wrap { max-width: 1060px; margin: 0 auto; padding: 0 22px; }
+h1, h2, h3, h4 { margin: 0; color: var(--ink); line-height: 1.35; text-wrap: balance; }
+p { margin: 0; }
+.hero { padding: 64px 0 36px; border-bottom: 1px solid var(--line); }
+.hero .kicker {
+  display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em;
+  color: var(--brand-ink); background: var(--brand-soft); border-radius: 99px; padding: 4px 14px;
+  margin-bottom: 18px;
+}
+.hero h1 { font-size: clamp(1.7rem, 4.5vw, 2.5rem); font-weight: 800; }
+.hero .lede { margin-top: 14px; font-size: 1.05rem; color: var(--muted); max-width: 60ch; }
+.hero .meta { margin-top: 16px; font-size: 0.8rem; color: var(--faint); }
+
+.tabs {
+  display: flex; gap: 8px; overflow-x: auto; padding: 20px 0 10px;
+  margin-top: 10px; scrollbar-width: none;
+}
+.tabs::-webkit-scrollbar { display: none; }
+.tab-btn {
+  background: var(--surface); border: 1px solid var(--line); color: var(--muted);
+  font-family: var(--sans); font-size: 0.95rem; font-weight: 700; padding: 10px 20px;
+  border-radius: 99px; cursor: pointer; white-space: nowrap; transition: all 0.2s;
+}
+.tab-btn:hover { border-color: var(--brand); color: var(--ink); }
+.tab-btn.active { background: var(--brand-soft); color: var(--brand-ink); border-color: var(--brand-ink); font-weight: 800; }
+
+.tab-content { display: none; animation: fadeIn 0.3s ease; padding: 30px 0 80px; }
+.tab-content.active { display: block; }
+@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+
+.sec-head { margin-bottom: 40px; text-align: center; }
+.sec-head h2 { font-size: 1.8rem; font-weight: 800; margin-bottom: 12px; }
+.sec-head .thesis { color: var(--muted); font-size: 1.1rem; max-width: 66ch; margin: 0 auto; }
+
+.steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; margin-top: 20px; }
+.step-card {
+  display: flex; flex-direction: column; gap: 20px; align-items: center;
+  background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 30px 20px;
+}
+.step-info { text-align: center; }
+.step-num {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 32px; height: 32px; background: var(--brand); color: #fff;
+  border-radius: 50%; font-size: 1rem; font-weight: 800; margin-bottom: 12px; font-variant-numeric: tabular-nums;
+}
+.step-info h4 { font-size: 1.1rem; font-weight: 800; margin-bottom: 6px; }
+.step-info p { font-size: 0.9rem; color: var(--muted); }
+
+.phone-frame {
+  width: 260px; height: 540px; border: 12px solid #1a1a1a; border-radius: 36px;
+  overflow: hidden; position: relative; box-shadow: 0 10px 25px rgba(0,0,0,0.05); background: #f1f3f2;
+}
+.phone-notch {
+  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
+  width: 110px; height: 26px; background: #1a1a1a;
+  border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; z-index: 2;
+}
+.phone-screen {
+  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
+  text-align: center; padding: 20px; color: var(--faint); font-family: var(--mono);
+  font-size: 0.75rem; word-break: break-all; background-color: var(--surface2);
+}
+</style>
+</head>
+<body>
+  <header class="hero"><div class="wrap">
+    <span class="kicker">خطة التوتوريال — 34 لقطة</span>
+    <h1>كيف تستخدم سيرو</h1>
+    <p class="lede">صفحات شرح تفاعلية تشرح للمستخدم الجديد كل عملية خطوة بخطوة، مدعومة بلقطات شاشة حقيقية من التطبيق.</p>
+    <p class="meta">تم بناء هذه الصفحة حسب التقرير الشامل — في انتظار إدراج اللقطات النهائية</p>
+  </div></header>
+
+  <div class="wrap">
+    <div class="tabs">
+      <button id="btn-1" class="tab-btn active" onclick="showTab(1)">1. التسجيل وإنشاء الحساب</button>
+      <button id="btn-2" class="tab-btn" onclick="showTab(2)">2. طلب الرحلة</button>
+      <button id="btn-3" class="tab-btn" onclick="showTab(3)">3. الانتظار والمطابقة</button>
+      <button id="btn-4" class="tab-btn" onclick="showTab(4)">4. أثناء الرحلة والسلامة</button>
+      <button id="btn-5" class="tab-btn" onclick="showTab(5)">5. الإلغاء</button>
+      <button id="btn-6" class="tab-btn" onclick="showTab(6)">6. الدفع والتقييم</button>
+      <button id="btn-7" class="tab-btn" onclick="showTab(7)">7. مواصلاتي — للطلاب</button>
+      
+    </div>
+    
+    <div class="tab-contents">
+      
+      <div id="tab-1" class="tab-content active">
+        <div class="sec-head">
+          <h2>الوحدة 1: التسجيل وإنشاء الحساب</h2>
+          <p class="thesis">التسجيل يحتاج رقم هاتف فقط — لا بريد إلكتروني إجباري ولا بطاقة دفع. أقل من دقيقة من التحميل حتى أول شاشة خريطة.</p>
+        </div>
+        <div class="steps-grid">
+          
+        <div class="step-card">
+          <div class="step-info">
+            <span class="step-num">1</span>
+            <h4>تحميل التطبيق وفتحه</h4>
+            <p>شاشة البداية بشعار Siro</p>
+          </div>
+          <div class="phone-frame">
+            <div class="phone-notch"></div>
+            <div class="phone-screen">tutorial/registration/01_splash_screen.png</div>
+          </div>
+        </div>
+        <div class="step-card">
+          <div class="step-info">
+            <span class="step-num">2</span>
+            <h4>شاشات التعريف</h4>
+            <p>شريحة الـ Onboarding الأولى</p>
+          </div>
+          <div class="phone-frame">
+            <div class="phone-notch"></div>
+            <div class="phone-screen">tutorial/registration/02_onboarding.png</div>
+          </div>
+        </div>
+        <div class="step-card">
+          <div class="step-info">
+            <span class="step-num">3</span>
+            <h4>إدخال رقم الهاتف</h4>
+            <p>حقل الهاتف مع اختيار الدولة</p>
+          </div>
+          <div class="phone-frame">
+            <div class="phone-notch"></div>
+            <div class="phone-screen">tutorial/registration/03_phone_number.png</div>
+          </div>
+        </div>
+        <div class="step-card">
+          <div class="step-info">
+            <span class="step-num">4</span>
+            <h4>رمز التحقق OTP</h4>
+            <p>شاشة إدخال الرمز (يصل واتساب/SMS)</p>
+          </div>
+          <div class="phone-frame">
+            <div class="phone-notch"></div>
+            <div class="phone-screen">tutorial/registration/04_otp.png</div>
+          </div>
+        </div>
+        <div class="step-card">
+          <div class="step-info">
+            <span class="step-num">5</span>
+            <h4>إكمال البيانات</h4>
+            <p>الاسم + البريد (اختياري) ثم «ابدأ»</p>
+          </div>
+          <div class="phone-frame">
+            <div class="phone-notch"></div>
+            <div class="phone-screen">tutorial/registration/05_complete_profile.png</div>
+          </div>
+        </div>
+        </div>
+      </div>
+
+      <div id="tab-2" class="tab-content">
+        <div class="sec-head">
+          <h2>الوحدة 2: طلب الرحلة</h2>
+          <p class="thesis">السعر المعروض نهائي ومحسوب من الخادم — لا مفاجآت عند الدفع (ما لم تتغير الوجهة أو يزد الانتظار).</p>
+        </div>
+        <div class="steps-grid">
+          
+        <div class="step-card">
+          <div class="step-info">
+            <span class="step-num">1</span>
+            <h4>الخريطة الرئيسية</h4>
+            <p>الخريطة مع السيارات القريبة تتحرك</p>
+          </div>
+          <div class="phone-frame">
+            <div class="phone-notch"></div>
+            <div class="phone-screen">tutorial/booking/01_map_main.png</div>
+          </div>
+        </div>
+        <div class="step-card">
+          <div class="step-info">
+            <span class="step-num">2</span>
+            <h4>تحديد الوجهة</h4>
+            <p>شريط البحث + النتائج</p>
+          </div>
+          <div class="phone-frame">
+            <div class="phone-notch"></div>
+            <div class="phone-screen">tutorial/booking/02_search_destination.png</div>
+          </div>
+        </div>
+        <div class="step-card">
+          <div class="step-info">
+            <span class="step-num">3</span>
+            <h4>تأكيد نقطة الانطلاق</h4>
+            <p>دبوس الانطلاق قابل للسحب</p>
+          </div>
+          <div class="phone-frame">
+            <div class="phone-notch"></div>
+            <div class="phone-screen">tutorial/booking/03_pickup_pin.png</div>
+          </div>
+        </div>
+        <div class="step-card">
+          <div class="step-info">
+            <span class="step-num">4</span>
+            <h4>اختيار فئة السيارة</h4>
+            <p>قائمة الفئات التسع مع السعر وشارة التوفير</p>
+          </div>
+          <div class="phone-frame">
+            <div class="phone-notch"></div>
+            <div class="phone-screen">tutorial/booking/04_select_car_type.png</div>
+          </div>
+        </div>
+        <div class="step-card">
+          <div class="step-info">
+            <span class="step-num">5</span>
+            <h4>كود الخصم</h4>
+            <p>حقل البرومو مطبّق على السعر</p>
+          </div>
+          <div class="phone-frame">
+            <div class="phone-notch"></div>
+            <div class="phone-screen">tutorial/booking/05_promo_code.png</div>
+          </div>
+        </div>
+        <div class="step-card">
+          <div class="step-info">
+            <span class="step-num">6</span>
+            <h4>تأكيد الطلب</h4>
+            <p>زر «اطلب الآن» مع السعر النهائي</p>
+          </div>
+          <div class="phone-frame">
+            <div class="phone-notch"></div>
+            <div class="phone-screen">tutorial/booking/06_confirm_order.png</div>
+          </div>
+        </div>
+        </div>
+      </div>
+
+      <div id="tab-3" class="tab-content">
+        <div class="sec-head">
+          <h2>الوحدة 3: الانتظار والمطابقة</h2>
+          <p class="thesis">متوسط زمن المطابقة أقل من 90 ثانية. إذا لم يقبل أحد، النظام يقترح تعديلاً بسيطاً على السعر بدل إلغاء طلبك.</p>
+        </div>
+        <div class="steps-grid">
+          
+        <div class="step-card">
+          <div class="step-info">
+            <span class="step-num">1</span>
+            <h4>البحث عن كابتن</h4>
+            <p>نافذة البحث مع المؤقّت</p>
+          </div>
+          <div class="phone-frame">
+            <div class="phone-notch"></div>
+            <div class="phone-screen">tutorial/matching/01_searching_captain.png</div>
+          </div>
+        </div>
+        <div class="step-card">
+          <div class="step-info">
+            <span class="step-num">2</span>
+            <h4>اقتراح المفاوض الذكي</h4>
+            <p>حوار رفع السعر بعد 90 ثانية</p>
+          </div>
+          <div class="phone-frame">
+            <div class="phone-notch"></div>
+            <div class="phone-screen">tutorial/matching/02_smart_negotiator.png</div>
+          </div>
+        </div>
+        <div class="step-card">
+          <div class="step-info">
+            <span class="step-num">3</span>
+            <h4>قبول الكابتن</h4>
+            <p>بطاقة الكابتن: الاسم، الصورة، التقييم، اللوحة</p>
+          </div>
+          <div class="phone-frame">
+            <div class="phone-notch"></div>
+            <div class="phone-screen">tutorial/matching/03_captain_card.png</div>
+          </div>
+        </div>
+        <div class="step-card">
+          <div class="step-info">
+            <span class="step-num">4</span>
+            <h4>الكابتن في الطريق</h4>
+            <p>الخريطة مع المسار الأصفر والوقت المتوقع</p>
+          </div>
+          <div class="phone-frame">
+            <div class="phone-notch"></div>
+            <div class="phone-screen">tutorial/matching/04_captain_on_way.png</div>
+          </div>
+        </div>
+        </div>
+      </div>
+
+      <div id="tab-4" class="tab-content">
+        <div class="sec-head">
+          <h2>الوحدة 4: أثناء الرحلة والسلامة</h2>
+          <p class="thesis">تتبع حي للرحلة مع خيارات أمان متقدمة واتصال آمن بالكابتن.</p>
+        </div>
+        <div class="steps-grid">
+          
+        <div class="step-card">
+          <div class="step-info">
+            <span class="step-num">1</span>
+            <h4>وصول الكابتن</h4>
+            <p>إشعار «الكابتن وصل» ومهلة انتظار 5 دقائق</p>
+          </div>
+          <div class="phone-frame">
+            <div class="phone-notch"></div>
+            <div class="phone-screen">tutorial/ride/01_captain_arrived.png</div>
+          </div>
+        </div>
+        <div class="step-card">
+          <div class="step-info">
+            <span class="step-num">2</span>
+            <h4>بدء الرحلة</h4>
+            <p>المسار الأزرق + العداد الحي</p>
+          </div>
+          <div class="phone-frame">
+            <div class="phone-notch"></div>
+            <div class="phone-screen">tutorial/ride/02_ride_started.png</div>
+          </div>
+        </div>
+        <div class="step-card">
+          <div class="step-info">
+            <span class="step-num">3</span>
+            <h4>مشاركة الرحلة</h4>
+            <p>رابط متابعة لطرف ثالث (للأهل)</p>
+          </div>
+          <div class="phone-frame">
+            <div class="phone-notch"></div>
+            <div class="phone-screen">tutorial/ride/03_share_ride.png</div>
+          </div>
+        </div>
+        <div class="step-card">
+          <div class="step-info">
+            <span class="step-num">4</span>
+            <h4>زر الطوارئ SOS</h4>
+            <p>زر الطوارئ (وهزّ الهاتف 5 مرات)</p>
+          </div>
+          <div class="phone-frame">
+            <div class="phone-notch"></div>
+            <div class="phone-screen">tutorial/ride/04_sos_button.png</div>
+          </div>
+        </div>
+        <div class="step-card">
+          <div class="step-info">
+            <span class="step-num">5</span>
+            <h4>الاتصال بالكابتن</h4>
+            <p>شاشة المكالمة داخل التطبيق</p>
+          </div>
+          <div class="phone-frame">
+            <div class="phone-notch"></div>
+            <div class="phone-screen">tutorial/ride/05_in_app_call.png</div>
+          </div>
+        </div>
+        </div>
+      </div>
+
+      <div id="tab-5" class="tab-content">
+        <div class="sec-head">
+          <h2>الوحدة 5: الإلغاء</h2>
+          <p class="thesis">الإلغاء قبل القبول مجاني، وبعد الوصول قد تُطبّق رسوم. السائق يواجه إيقافاً بعد 3 إلغاءات.</p>
+        </div>
+        <div class="steps-grid">
+          
+        <div class="step-card">
+          <div class="step-info">
+            <span class="step-num">1</span>
+            <h4>زر الإلغاء</h4>
+            <p>مكان الزر أثناء البحث/الانتظار</p>
+          </div>
+          <div class="phone-frame">
+            <div class="phone-notch"></div>
+            <div class="phone-screen">tutorial/cancel/01_cancel_button.png</div>
+          </div>
+        </div>
+        <div class="step-card">
+          <div class="step-info">
+            <span class="step-num">2</span>
+            <h4>اختيار السبب</h4>
+            <p>قائمة أسباب الإلغاء</p>
+          </div>
+          <div class="phone-frame">
+            <div class="phone-notch"></div>
+            <div class="phone-screen">tutorial/cancel/02_cancel_reason.png</div>
+          </div>
+        </div>
+        <div class="step-card">
+          <div class="step-info">
+            <span class="step-num">3</span>
+            <h4>تأكيد الإلغاء</h4>
+            <p>رسالة التأكيد + سياسة الرسوم</p>
+          </div>
+          <div class="phone-frame">
+            <div class="phone-notch"></div>
+            <div class="phone-screen">tutorial/cancel/03_cancel_confirm.png</div>
+          </div>
+        </div>
+        </div>
+      </div>
+
+      <div id="tab-6" class="tab-content">
+        <div class="sec-head">
+          <h2>الوحدة 6: الدفع والتقييم</h2>
+          <p class="thesis">دفع مرن مع نقاط مكافأة للمحفظة، وتقييم يعزز جودة الخدمة.</p>
+        </div>
+        <div class="steps-grid">
+          
+        <div class="step-card">
+          <div class="step-info">
+            <span class="step-num">1</span>
+            <h4>نهاية الرحلة</h4>
+            <p>شاشة الفاتورة النهائية</p>
+          </div>
+          <div class="phone-frame">
+            <div class="phone-notch"></div>
+            <div class="phone-screen">tutorial/payment/01_ride_finished.png</div>
+          </div>
+        </div>
+        <div class="step-card">
+          <div class="step-info">
+            <span class="step-num">2</span>
+            <h4>طرق الدفع</h4>
+            <p>كاش/محفظة/بطاقة ووسائل الدفع المحلية</p>
+          </div>
+          <div class="phone-frame">
+            <div class="phone-notch"></div>
+            <div class="phone-screen">tutorial/payment/02_payment_methods.png</div>
+          </div>
+        </div>
+        <div class="step-card">
+          <div class="step-info">
+            <span class="step-num">3</span>
+            <h4>الدفع كاش</h4>
+            <p>حوار تأكيد الكاش</p>
+          </div>
+          <div class="phone-frame">
+            <div class="phone-notch"></div>
+            <div class="phone-screen">tutorial/payment/03_cash_confirm.png</div>
+          </div>
+        </div>
+        <div class="step-card">
+          <div class="step-info">
+            <span class="step-num">4</span>
+            <h4>الدفع بالمحفظة</h4>
+            <p>الخصم من الرصيد وعروض الشحن</p>
+          </div>
+          <div class="phone-frame">
+            <div class="phone-notch"></div>
+            <div class="phone-screen">tutorial/payment/04_wallet_pay.png</div>
+          </div>
+        </div>
+        <div class="step-card">
+          <div class="step-info">
+            <span class="step-num">5</span>
+            <h4>تقييم الكابتن</h4>
+            <p>النجوم + الإكرامية</p>
+          </div>
+          <div class="phone-frame">
+            <div class="phone-notch"></div>
+            <div class="phone-screen">tutorial/payment/05_rate_captain.png</div>
+          </div>
+        </div>
+        <div class="step-card">
+          <div class="step-info">
+            <span class="step-num">6</span>
+            <h4>سجل الرحلات</h4>
+            <p>قائمة الرحلات السابقة والفواتير</p>
+          </div>
+          <div class="phone-frame">
+            <div class="phone-notch"></div>
+            <div class="phone-screen">tutorial/payment/06_ride_history.png</div>
+          </div>
+        </div>
+        </div>
+      </div>
+
+      <div id="tab-7" class="tab-content">
+        <div class="sec-head">
+          <h2>الوحدة 7: مواصلاتي — للطلاب</h2>
+          <p class="thesis">خدمة تتبع باصات الجامعات مجاناً مع إمكانية تحويل الطالب لرحلة مدفوعة إذا فاته الباص.</p>
+        </div>
+        <div class="steps-grid">
+          
+        <div class="step-card">
+          <div class="step-info">
+            <span class="step-num">1</span>
+            <h4>اختيار الجامعة</h4>
+            <p>تبويب مواصلاتي واختيار الجامعة</p>
+          </div>
+          <div class="phone-frame">
+            <div class="phone-notch"></div>
+            <div class="phone-screen">tutorial/transit/01_select_university.png</div>
+          </div>
+        </div>
+        <div class="step-card">
+          <div class="step-info">
+            <span class="step-num">2</span>
+            <h4>تفعيل العضوية</h4>
+            <p>إدخال الرقم الجامعي للتفعيل الفوري</p>
+          </div>
+          <div class="phone-frame">
+            <div class="phone-notch"></div>
+            <div class="phone-screen">tutorial/transit/02_activate_student_id.png</div>
+          </div>
+        </div>
+        <div class="step-card">
+          <div class="step-info">
+            <span class="step-num">3</span>
+            <h4>استعراض الخطوط</h4>
+            <p>قائمة الخطوط المعتمدة وجداولها</p>
+          </div>
+          <div class="phone-frame">
+            <div class="phone-notch"></div>
+            <div class="phone-screen">tutorial/transit/03_transit_lines.png</div>
+          </div>
+        </div>
+        <div class="step-card">
+          <div class="step-info">
+            <span class="step-num">4</span>
+            <h4>التتبع الحي</h4>
+            <p>الباص يتحرك على المسار والمحطات</p>
+          </div>
+          <div class="phone-frame">
+            <div class="phone-notch"></div>
+            <div class="phone-screen">tutorial/transit/04_live_tracking.png</div>
+          </div>
+        </div>
+        <div class="step-card">
+          <div class="step-info">
+            <span class="step-num">5</span>
+            <h4>فاتك الباص؟</h4>
+            <p>الزر البارز لطلب سيارة بديلة</p>
+          </div>
+          <div class="phone-frame">
+            <div class="phone-notch"></div>
+            <div class="phone-screen">tutorial/transit/05_missed_bus.png</div>
+          </div>
+        </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+
+  <script>
+    function showTab(id) {
+      document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
+      document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
+      document.getElementById('btn-' + id).classList.add('active');
+      document.getElementById('tab-' + id).classList.add('active');
+    }
+  </script>
+</body>
+</html>