Hamza/Siro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
1103f6ffcf8ea2af0a660c648f208bb0a04c4027
Siro/siromove.com/tutorial/index.html
T

575 lines
24 KiB
HTML
Raw Blame History

<!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>
Reference in New Issue View Git Blame Copy Permalink