docs: restructure documentation, add digital legacy report, and secure contracts
This commit is contained in:
Hamza-Ayed
@@ -1,898 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ar" dir="rtl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>مولد ومطبع عقد شراكة Siro القانوني المطور - سوريا</title>
|
||||
<!-- Google Fonts: Amiri & Inter for highly clean and modern tech-corporate document rendering -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400&family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<!-- Tailwind CSS -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'Amiri', 'sans-serif'],
|
||||
serif: ['Inter', 'Amiri', 'serif'],
|
||||
},
|
||||
colors: {
|
||||
legal: {
|
||||
800: '#1e293b',
|
||||
900: '#0f172a',
|
||||
gold: '#c5a880',
|
||||
goldHover: '#b3956d'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
background-color: #f8fafc;
|
||||
}
|
||||
|
||||
/* Mockup standard sheet configuration */
|
||||
.paper-sheet {
|
||||
background: #ffffff;
|
||||
box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05), 0 2px 10px -4px rgba(0, 0, 0, 0.05);
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* Dynamic interaction fields highlighting */
|
||||
.highlight-field {
|
||||
border-bottom: 1.5px dashed #c5a880;
|
||||
color: #0f172a;
|
||||
font-weight: 700;
|
||||
padding: 0 4px;
|
||||
transition: all 0.2s ease;
|
||||
background-color: rgba(197, 168, 128, 0.06);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.highlight-field:empty::before {
|
||||
content: ".......................................................";
|
||||
color: #94a3b8;
|
||||
font-weight: 300;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
/* Advanced Print configuration targeting exactly 3 compact pages */
|
||||
@media print {
|
||||
body {
|
||||
background: #ffffff !important;
|
||||
color: #000000 !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
.no-print {
|
||||
display: none !important;
|
||||
}
|
||||
.print-page {
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
height: auto !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
.contract-container {
|
||||
border: none !important;
|
||||
padding: 10mm 10mm !important;
|
||||
}
|
||||
.page-break {
|
||||
page-break-after: always;
|
||||
break-after: page;
|
||||
margin-top: 20px;
|
||||
height: 0;
|
||||
}
|
||||
@page {
|
||||
size: A4;
|
||||
margin: 12mm 12mm;
|
||||
}
|
||||
.table-header-print {
|
||||
background-color: #f8fafc !important;
|
||||
-webkit-print-color-adjust: exact;
|
||||
print-color-adjust: exact;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-sans text-slate-800 antialiased min-h-screen flex flex-col">
|
||||
|
||||
<!-- Top Navbar (hidden on print) -->
|
||||
<header class="bg-legal-900 text-white py-3.5 px-6 shadow-md border-b border-legal-gold/20 no-print sticky top-0 z-50">
|
||||
<div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="bg-gradient-to-tr from-legal-gold to-amber-500 p-2 rounded-xl">
|
||||
<svg class="w-6 h-6 text-legal-900" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-lg font-bold tracking-wide flex items-center gap-2"><span class="text-legal-gold font-extrabold">Siro</span></h1>
|
||||
<p class="text-[10px] text-slate-400">توليد وطباعة العقد القانوني للجمهورية العربية السورية</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<button onclick="window.print();" class="bg-legal-gold hover:bg-legal-goldHover text-legal-900 px-5 py-2 rounded-lg font-bold shadow-lg shadow-legal-gold/20 flex items-center gap-2 transition-all duration-200 transform active:scale-95 text-sm">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"></path>
|
||||
</svg>
|
||||
طباعة العقد (حفظ PDF)
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Content Layout -->
|
||||
<div class="flex-1 max-w-7xl w-full mx-auto p-4 md:p-6 grid grid-cols-1 lg:grid-cols-12 gap-6 items-start">
|
||||
|
||||
<!-- Controls Sidebar Panel (hidden on print) -->
|
||||
<aside class="lg:col-span-4 bg-white p-5 rounded-xl shadow-sm border border-slate-200 no-print space-y-5">
|
||||
<div class="border-b border-slate-100 pb-3">
|
||||
<h2 class="text-base font-bold text-legal-900 flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-legal-gold" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2.5 2.5 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
|
||||
</svg>
|
||||
لوحة التحكم الذكية بالعقد
|
||||
</h2>
|
||||
<p class="text-[11px] text-slate-500 mt-0.5">يمكنك إضافة وتعديل بيانات الأطراف وحصصهم لتحديث العقد فورياً.</p>
|
||||
</div>
|
||||
|
||||
<!-- Inputs Sections -->
|
||||
<div class="space-y-4">
|
||||
|
||||
<div class="bg-slate-50 p-3 rounded-lg space-y-2.5 border border-slate-100">
|
||||
<h3 class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">التواريخ والمعلومات الأساسية</h3>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
<label class="block text-[11px] text-slate-600 font-semibold mb-1">تاريخ تحرير العقد</label>
|
||||
<input type="text" id="input-date" value="14/06/2026م" placeholder="مثال: 14/06/2026م" class="w-full text-xs px-2.5 py-1.5 bg-white border border-slate-200 rounded focus:outline-none focus:border-legal-gold">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-[11px] text-slate-600 font-semibold mb-1">قيمة رأس المال</label>
|
||||
<input type="number" id="input-capital" value="200000" placeholder="مثال: 200000" class="w-full text-xs px-2.5 py-1.5 bg-white border border-slate-200 rounded focus:outline-none focus:border-legal-gold">
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
<label class="block text-[11px] text-slate-600 font-semibold mb-1">المبلغ كتابة</label>
|
||||
<input type="text" id="input-capital-words" value="مائتا ألف دولار أمريكي" placeholder="مثال: مائتا ألف دولار أمريكي" class="w-full text-xs px-2.5 py-1.5 bg-white border border-slate-200 rounded focus:outline-none focus:border-legal-gold">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-[11px] text-slate-600 font-semibold mb-1">رمز العملة (اختصار)</label>
|
||||
<input type="text" id="input-currency" value="USD" placeholder="مثال: USD" class="w-full text-xs px-2.5 py-1.5 bg-white border border-slate-200 rounded focus:outline-none focus:border-legal-gold">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Founders Section -->
|
||||
<div class="bg-slate-50 p-3 rounded-lg border border-slate-100 space-y-3">
|
||||
<div class="flex justify-between items-center">
|
||||
<h3 class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">الطرف الأول (المؤسسون - بحد أقصى 3)</h3>
|
||||
<button id="btn-add-founder" onclick="addFounder()" class="text-[11px] font-bold text-legal-gold hover:text-legal-goldHover flex items-center gap-0.5">
|
||||
+ إضافة مؤسس
|
||||
</button>
|
||||
</div>
|
||||
<div id="founders-container" class="space-y-3">
|
||||
<!-- Dynamic Founders Form Fields -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Investors Section -->
|
||||
<div class="bg-slate-50 p-3 rounded-lg border border-slate-100 space-y-3">
|
||||
<div class="flex justify-between items-center">
|
||||
<h3 class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">الطرف الثاني (الشركاء المستثمرون - بحد أقصى 3)</h3>
|
||||
<button id="btn-add-partner" onclick="addPartner()" class="text-[11px] font-bold text-legal-gold hover:text-legal-goldHover flex items-center gap-0.5">
|
||||
+ إضافة شريك
|
||||
</button>
|
||||
</div>
|
||||
<div id="partners-container" class="space-y-3">
|
||||
<!-- Dynamic Partners Form Fields -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Validation & Status Indicator -->
|
||||
<div class="bg-slate-50 p-3 rounded-lg space-y-2 border border-slate-100">
|
||||
<div class="flex justify-between items-center">
|
||||
<h3 class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">مجموع الحصص %</h3>
|
||||
<span id="share-indicator" class="text-[10px] font-bold px-1.5 py-0.5 rounded-full bg-red-100 text-red-600">
|
||||
المجموع: <span id="share-sum">0</span>%
|
||||
</span>
|
||||
</div>
|
||||
<div id="share-validation-msg" class="text-[11px] p-2 rounded bg-red-50 text-red-700 font-medium leading-relaxed">
|
||||
⚠️ مجموع الحصص يجب أن يكون 100% لتصحيح صياغة العقد.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Guidelines / Best Practices for print -->
|
||||
<div class="p-3.5 rounded-lg border border-legal-gold/20 bg-legal-900 text-white space-y-1.5">
|
||||
<h4 class="text-xs font-bold text-legal-gold flex items-center gap-1">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
دليل حفظ مستند PDF مثالي:
|
||||
</h4>
|
||||
<ul class="text-[11px] text-slate-300 space-y-1 list-disc list-inside">
|
||||
<li>تأكد من تفعيل خيار <b class="text-legal-gold">رسومات الخلفية</b> في خيارات الطباعة بالمتصفح.</li>
|
||||
<li>ألغِ خيار <b class="text-legal-gold">الرؤوس والتذييلات</b> لإلغاء روابط المواقع.</li>
|
||||
<li>استخدم خيار "حفظ بتنسيق PDF" لإنتاج ملف جاهز فوري.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Document Sheet Area -->
|
||||
<main class="lg:col-span-8 flex flex-col items-center">
|
||||
|
||||
<div class="w-full max-w-[210mm] paper-sheet print-page rounded-xl border border-slate-200 overflow-hidden mb-6 transition-all duration-300">
|
||||
|
||||
<!-- Inner formal border (Configured to use clean modern font-serif mapping to Inter) -->
|
||||
<div class="contract-container p-6 md:p-10 lg:p-12 text-slate-900 font-serif text-justify text-[13.5px] leading-relaxed" id="contract-document">
|
||||
|
||||
<!-- Official Header & Siro Logo -->
|
||||
<div class="flex flex-col items-center text-center border-b-2 border-slate-800 pb-4 mb-6">
|
||||
|
||||
<!-- Official Premium Siro Logo -->
|
||||
<div class="mb-3">
|
||||
<img src="logo.png" class="h-14 mx-auto" alt="Siro Logo">
|
||||
</div>
|
||||
<h1 class="text-base md:text-lg font-bold text-slate-950 font-sans tracking-wide">عقد شراكة واستثمار تجاري لتشغيل تطبيق "Siro"</h1>
|
||||
<p class="text-sm font-bold text-slate-800 font-sans">في الجمهورية العربية السورية</p>
|
||||
|
||||
<div class="w-full flex justify-between items-center text-[10px] font-sans text-slate-500 mt-2.5 px-2">
|
||||
<span><strong>الرقم المرجعي:</strong> SIRO-INV-SY-2026-001</span>
|
||||
<span><strong>تاريخ التحرير:</strong> <span id="sync-contract-date" class="font-bold text-slate-900">14/06/2026م</span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Intro Block -->
|
||||
<div class="space-y-5">
|
||||
<p class="leading-normal">
|
||||
تم تحرير هذا العقد وتوثيقه في اليوم الموافق
|
||||
<span id="sync-text-date" class="highlight-field">14/06/2026م</span> ميلادي، بين كلٍّ من:
|
||||
</p>
|
||||
|
||||
<!-- Parties Info -->
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<h3 class="font-sans font-bold text-slate-950 border-r-3 border-legal-gold pr-2 text-[13px]">الطرف الأول (المؤسسون – الشريك الإداري والتقني):</h3>
|
||||
<div id="doc-founders-list" class="pr-3 mt-1 space-y-1.5">
|
||||
<!-- Dynamic Founders List -->
|
||||
</div>
|
||||
<p class="text-[11px] text-slate-500 italic pr-3 mt-0.5 font-sans">
|
||||
(ويُشار إليهما مجتمعَيْن بـ <strong>"الطرف الأول"</strong> أو <strong>"الشركاء المؤسسون"</strong>).
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="font-sans font-bold text-slate-950 border-r-3 border-legal-gold pr-2 text-[13px]">الطرف الثاني (الشركاء المستثمرون):</h3>
|
||||
<div id="doc-partners-list" class="pr-3 mt-1 space-y-1.5">
|
||||
<!-- Dynamic Partners List -->
|
||||
</div>
|
||||
<p class="text-[11px] text-slate-500 italic pr-3 mt-0.5 font-sans">
|
||||
(ويُشار إليهم مجتمعين بـ <strong>"الطرف الثاني"</strong> أو <strong>"الشركاء المستثمرون"</strong>).
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Preamble -->
|
||||
<div>
|
||||
<h3 class="font-sans font-extrabold text-slate-950 text-[14px] mb-1">التمهيد</h3>
|
||||
<div class="space-y-2">
|
||||
<p>
|
||||
<strong>حيث إن</strong> الطرف الأول يمتلك ويُدير منظومة برمجية ومنصة تقنية متطورة للنقل الذكي وتسهيل التنقل الحضري وتوصيل الركاب تحمل اسم <strong>"Siro"</strong> ومصممة وفق أحدث المعايير الهندسية والبرمجية العالمية؛
|
||||
</p>
|
||||
<p>
|
||||
<strong>وحيث إن</strong> الطرف الثاني (الشركاء المستثمرون) يرغبون في تقديم تمويل استثماري لتغطية تكاليف إطلاق التطبيق وتشغيله وتسويقه داخل السوق السورية مقابل حصة من صافي الأرباح التشغيلية؛
|
||||
</p>
|
||||
<p>
|
||||
<strong>وحيث إن</strong> إرادة الأطراف قد التقت على تأسيس شراكة تجارية واستثمارية مشتركة قائمة على الشفافية والالتزام المتبادل؛
|
||||
</p>
|
||||
<p class="font-bold border-r-2 border-slate-400 pr-2">
|
||||
فقد اتفق الأطراف — بعد إقرارهم بكامل أهليتهم القانونية للتعاقد — على ما يلي:
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Articles and clauses flow -->
|
||||
<div class="space-y-4 pt-2">
|
||||
|
||||
<div>
|
||||
<h4 class="font-sans font-bold text-slate-950 text-[13px] mb-0.5">المادة الأولى: نطاق التمهيد</h4>
|
||||
<p>يُعدّ التمهيد المذكور أعلاه جزءاً لا يتجزأ من هذا العقد، ويُقرأ ويُفسَّر ضمن سياقه.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="font-sans font-bold text-slate-950 text-[13px] mb-0.5">المادة الثانية: موضوع العقد والنطاق الجغرافي</h4>
|
||||
<ol class="list-decimal list-inside space-y-1">
|
||||
<li>موضوع هذا العقد هو تنظيم العلاقة التجارية والاستثمارية بين الأطراف لتشغيل واستغلال تطبيق <strong>"Siro"</strong> تجارياً وخدمياً وتسويقياً.</li>
|
||||
<li>يقتصر النطاق الجغرافي لهذا العقد حصراً على أراضي <strong>الجمهورية العربية السورية</strong>. ولا يشمل هذا العقد أي سوق أو دولة أخرى يعمل فيها التطبيق أو قد يتوسع إليها مستقبلاً.</li>
|
||||
<li>لا يجوز توسيع النطاق الجغرافي لهذا العقد إلا بموجب ملحق تعديلي خطّي موقّع من جميع الأطراف.</li>
|
||||
<li><strong>حق الأولوية في التوسع الدولي:</strong> في حال رغبة الطرف الأول في توسيع النطاق الجغرافي للمشروع وتشغيل تطبيق Siro في أي دولة أو سوق خارج الجمهورية العربية السورية، يلتزم الطرف الأول بعرض هذه الفرصة الاستثمارية الجديدة على الطرف الثاني خطياً قبل عرضها على أي طرف ثالث. ويكون للطرف الثاني حق الأولوية (Right of First Refusal) في الاستثمار والمشاركة في السوق الجديد بذات الشروط أو بشروط يتم التوافق عليها، على أن يبدي الطرف الثاني رغبته خطياً خلال مدة لا تتجاوز <strong>أسبوعاً واحداً (7 أيام)</strong> من تاريخ استلام العرض المكتوب، وفي حال انقضاء هذه المدة دون رد أو في حال اعتذاره خطياً، يحق للطرف الأول التعاقد مع مستثمرين آخرين بحرية تامة ودون أي التزام تجاه الطرف الثاني.</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="font-sans font-bold text-slate-950 text-[13px] mb-0.5">المادة الثالثة: رأس المال الاستثماري وآلية الدفع</h4>
|
||||
<ol class="list-decimal list-inside space-y-1">
|
||||
<li>يلتزم الطرف الثاني بتقديم رأس مال استثماري إجمالي قدره <strong class="sync-capital-words-span">مائتا ألف دولار أمريكي</strong> (<strong class="sync-capital-number-span">200,000</strong> <strong class="sync-currency-span">USD</strong>) لتمويل عمليات إطلاق المشروع وتشغيله في سوريا.</li>
|
||||
<li>يُسدَّد رأس المال الاستثماري على دفعات مجدولة ومرنة يتم التوافق عليها ودياً بين الأطراف بما يتماشى مع خطة العمل والاحتياجات التشغيلية للمشروع.</li>
|
||||
<li>تُودع جميع المبالغ والدفعات الاستثمارية في الحساب المصرفي التجاري للشركة في المملكة الأردنية الهاشمية، وذلك بعد إتمام تأسيس وتسجيل الشركة رسمياً وفتح حسابها التجاري في الأردن، لضمان وتسهيل انسياب وحركة الأموال التشغيلية والاستثمارية دخولاً وخروجاً.</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<!-- Page Break for elegant Print Layout -->
|
||||
<div class="page-break no-print my-4 border-t-2 border-dashed border-slate-200"></div>
|
||||
|
||||
<div>
|
||||
<h4 class="font-sans font-bold text-slate-950 text-[13px] mb-0.5">المادة الرابعة: التزامات الأطراف</h4>
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<h5 class="font-bold text-slate-900 text-[12.5px]">أولاً: التزامات الطرف الأول (الشركاء المؤسسون)</h5>
|
||||
<ol class="list-decimal list-inside space-y-1 pr-3 mt-1">
|
||||
<li>يتحمل الطرف الأول المسؤولية الكاملة والحصرية عن الجوانب التقنية والفنية والتشغيلية والإدارية للتطبيق، بما يشمل — دون حصر — التطوير البرمجي، وإدارة الخوادم، والصيانة الدورية، وإصلاح الأعطال الفنية، وإدارة فريق العمل التقني.</li>
|
||||
<li>إصدار التحديثات والتطويرات المستمرة لتطبيقَيْ الراكب والسائق بما يتلاءم مع متطلبات السوق السورية ويضمن تنافسية المنتج.</li>
|
||||
<li>تقديم تقرير أداء تشغيلي ومالي للطرف الثاني بشكل <strong>شهري</strong> يتضمن: عدد الرحلات المنفذة، عدد السائقين والركاب النشطين، الإيرادات الإجمالية، المصروفات التشغيلية، وصافي الأرباح.</li>
|
||||
<li>ضمان استمرارية الخدمة وتوفّر التطبيق لمستخدميه بنسبة لا تقل عن <strong>95%</strong> من أيام التشغيل الشهري (باستثناء حالات القوة القاهرة والصيانة المجدولة).</li>
|
||||
<li>الالتحاق والالتزام بالعمل الفني والتقني المستمر والدؤوب على تحديث وتطوير وصيانة نظام وتطبيقات Siro بانتظام، لضمان استقرار الخدمة وتشغيلها بكفاءة عالية وتلبية احتياجات السوق السورية.</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h5 class="font-bold text-slate-900 text-[12.5px]">ثانياً: التزامات الطرف الثاني (الشركاء المستثمرون)</h5>
|
||||
<ol class="list-decimal list-inside space-y-1 pr-3 mt-1">
|
||||
<li>الالتحاق بسداد كامل رأس المال الاستثماري المتفق عليه وقدره (<span class="sync-capital-words-span">مائتا ألف دولار أمريكي</span>) وفق جدول الدفعات المحدد في المادة الثالثة.</li>
|
||||
<li>المساهمة الفعّالة بخبراتهم اللوجستية والعلاقاتية لتسهيل العمل التجاري داخل السوق السورية ودعم عمليات التسجيل والتوسع الميداني.</li>
|
||||
<li class="font-semibold text-slate-950 bg-slate-50 p-1.5 rounded border-r-2 border-slate-300">
|
||||
التعهد بمنح الطرف الأول الصلاحية الكاملة والمستقلة في اتخاذ القرارات الفنية والهندسية والبرمجية الخاصة بالتطبيق لضمان سير العمل واستقراره التشغيلي والتقني دون إعاقة؛
|
||||
</li>
|
||||
<li>التعاون الكامل مع الطرف الأول في توفير أي متطلبات إدارية أو تنظيمية أو حكومية تلزم لتشغيل المشروع داخل سوريا.</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="font-sans font-bold text-slate-950 text-[13px] mb-0.5">المادة الخامسة: نسب الشراكة وتوزيع الأرباح</h4>
|
||||
<ol class="list-decimal list-inside space-y-2">
|
||||
<li>يتم توزيع <strong>صافي الأرباح التشغيلية</strong> الناتجة عن تشغيل التطبيق في سوريا — بعد خصم كافة المصاريف التشغيلية والإدارية، وتكاليف الخوادم والبنية التحتية، والضرائب والرسوم الحكومية، وأجور فريق الدعم الفني والميداني — وفق النسب التالية:</li>
|
||||
</ol>
|
||||
|
||||
<!-- Table Block Inside Paper -->
|
||||
<div class="my-3 overflow-x-auto">
|
||||
<table class="w-full border-collapse border border-slate-800 text-center text-xs font-sans">
|
||||
<thead>
|
||||
<tr class="table-header-print bg-slate-50 text-slate-900 font-bold border-b border-slate-800">
|
||||
<th class="border border-slate-800 p-2 text-right pr-4">الشريك</th>
|
||||
<th class="border border-slate-800 p-2">الصفة التعاقدية</th>
|
||||
<th class="border border-slate-800 p-2 w-1/4">الحصة من صافي الأرباح</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="doc-shares-table-body">
|
||||
<!-- Dynamic Share Table Rows -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<ol class="list-decimal list-inside space-y-1" start="2">
|
||||
<li>تُوزَّع الأرباح بصفة <strong>ربع سنوية</strong> (كل ثلاثة أشهر ميلادية) بناءً على القوائم المالية المعتمدة والمدقّقة لعمليات التطبيق في سوريا.</li>
|
||||
<li>لا تُوزَّع الأرباح إلا بعد تخصيص <strong>احتياطي تشغيلي</strong> بنسبة لا تقل عن <strong>10%</strong> من صافي الأرباح لتغطية الطوارئ والنفقات المستقبلية، ويتم الاتفاق بين الشركاء على آلية التصرف في هذا الاحتياطي.</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="font-sans font-bold text-slate-950 text-[13px] mb-0.5">المادة السادسة: فسخ العقد وتصفية الشراكة</h4>
|
||||
<ol class="list-decimal list-inside space-y-1">
|
||||
<li class="font-semibold text-slate-950">
|
||||
في حال فسخ هذا العقد أو تصفية المشروع لأي سبب كان قبل استرداد الطرف الثاني لكامل رأس ماله الاستثماري، يكون للطرف الثاني الأولوية المطلقة في الحصول على المبالغ المتبقية والغير مصروفة من رأس ماله الفعلي (بعد خصم كافة النفقات التشغيلية والرواتب والمصاريف الإعلانية المنقضية والمثبتة محاسبياً) من أي عوائد تشغيلية متراكمة أو أصول ملموسة قابلة للتسييل مرتبطة بنشاط المشروع في سوريا حصراً، دون أن يحق له مطالبة الشركاء شخصياً بأي مبالغ تم صرفها وتسييرها في النفقات المذكورة.
|
||||
</li>
|
||||
<li>يتم تصفية جميع الحقوق والالتزامات المالية العالقة بين الأطراف عند الفسخ أو التصفية بما يتوافق مع القواعد القانونية والتجارية السائدة، وبما يضمن عدم الإضرار بأي طرف.</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="font-sans font-bold text-slate-950 text-[13px] mb-0.5">المادة السابعة: الملكية الفكرية والعلامة التجارية</h4>
|
||||
<ol class="list-decimal list-inside space-y-1">
|
||||
<li id="ip-ownership-clause" class="bg-amber-100/40 p-2.5 rounded border-r-4 border-legal-gold leading-relaxed font-semibold text-slate-950">
|
||||
<!-- Dynamic IP Ownership Clause -->
|
||||
</li>
|
||||
<li>لا يُنشئ هذا العقد ولا يمنح الطرف الثاني (الشركاء المستثمرون) أو أي شريك آخر أي حق من حقوق الملكية الفكرية أو الصناعية أو الأدبية على الكود المصدري أو التطبيق أو العلامة التجارية، لا كلياً ولا جزئياً، سواء أثناء سريان العقد أو بعد انتهائه.</li>
|
||||
<li>يقتصر حق الطرف الثاني على <strong>الحصص المالية من صافي الأرباح التشغيلية</strong> الناتجة عن تشغيل التطبيق في النطاق الجغرافي المحدد في هذا العقد حصراً.</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<!-- Page Break for elegant Print Layout -->
|
||||
<div class="page-break no-print my-4 border-t-2 border-dashed border-slate-200"></div>
|
||||
|
||||
<div>
|
||||
<h4 class="font-sans font-bold text-slate-950 text-[13px] mb-0.5">المادة الثامنة: الإدارة واتخاذ القرارات</h4>
|
||||
<ol class="list-decimal list-inside space-y-1">
|
||||
<li>يتولى الطرف الأول (الشركاء المؤسسون) <strong>الإدارة التقنية والفنية والتشغيلية الكاملة</strong> للتطبيق، ويملكون حصرياً صلاحية اتخاذ جميع القرارات البرمجية والهندسية والفنية دون الرجوع للطرف الثاني.</li>
|
||||
<li>تُتّخذ <strong>القرارات الاستراتيجية والتجارية الكبرى</strong> — كالتوسع الجغرافي، أو تغيير نموذج التسعير، أو الدخول في شراكات تجارية مع أطراف ثالثة — بالتشاور والإجماع بين الشركاء.</li>
|
||||
<li>في حال عدم التوافق على قرار تجاري أو استراتيجي، يُعرض الأمر على <strong>محكّم تجاري مستقل</strong> يُتّفق عليه بين الأطراف لإصدار رأي استشاري ملزم.</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="font-sans font-bold text-slate-950 text-[13px] mb-0.5">المادة التاسعة: السرية وعدم الإفشاء</h4>
|
||||
<ol class="list-decimal list-inside space-y-1">
|
||||
<li>يلتزم جميع الأطراف بالحفاظ التام على سرية كافة المعلومات التقنية والمالية والتجارية والتسويقية المتعلقة بالمشروع، وعدم إفشائها أو تسريبها أو إتاحتها لأي طرف ثالث بأي وسيلة كانت.</li>
|
||||
<li>يسري التزام السرية أثناء فترة العقد و<strong>لمدة سنتين (2) ميلاديتين</strong> بعد انتهائه أو فسخه لأي سبب كان.</li>
|
||||
<li>يُستثنى من حكم السرية: المعلومات التي تصبح متاحة للعموم بشكل مشروع دون خطأ من الطرف المُفشي، أو المعلومات المطلوبة بموجب أمر قضائي أو تنظيمي واجب النفاذ.</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="font-sans font-bold text-slate-950 text-[13px] mb-0.5">المادة العاشرة: عدم المنافسة — المشروطة بنشاط الشركة</h4>
|
||||
<ol class="list-decimal list-inside space-y-1">
|
||||
<li>يتعهد جميع الشركاء — طوال فترة سريان هذا العقد وما دام المشروع نشطاً وفعالاً تشغيلياً وتجارياً — بعدم القيام بأي مما يلي:
|
||||
<ul class="list-disc list-inside pr-3 mt-1 space-y-0.5">
|
||||
<li>تأسيس أو المشاركة أو الاستثمار في أي شركة أو تطبيق أو منصة تقدم خدمات النقل الذكي أو توصيل الركاب داخل الجمهورية العربية السورية.</li>
|
||||
<li>تقديم خدمات استشارية تقنية أو تجارية لأي منافس مباشر لتطبيق "Siro" في السوق السورية.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><strong>يُشترط لسريان بند عدم المنافسة</strong> أن يكون مشروع تطبيق "Siro" في سوريا <strong>نشطاً ومستمراً في تقديم خدماته</strong> فعلياً وبشكل دوري يمكن إثباته.</li>
|
||||
<li>في حال توقّف المشروع عن العمل التشغيلي في سوريا لمدة تتجاوز <strong>تسعين (90) يوماً متتالياً</strong> — لأي سبب كان باستثناء القوة القاهرة — يُعتبر بند عدم المنافسة **ملغى ولاغياً تلقائياً** بحق جميع الأطراف، ويحق لأي شريك ممارسة أي نشاط تجاري مشابه بحرية تامة ودون قيد أو شرط.</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="font-sans font-bold text-slate-950 text-[13px] mb-0.5">المادة الحادية عشرة: مدة العقد وتجديده</h4>
|
||||
<ol class="list-decimal list-inside space-y-1">
|
||||
<li>يسري هذا العقد اعتباراً من تاريخ توقيعه ويمتد لمدة **سنتين (2) ميلاديتين** قابلة للتجديد لفترات مماثلة بموافقة الأطراف.</li>
|
||||
<li>يُجدَّد العقد تلقائياً لفترات مماثلة ما لم يُخطر أحد الأطراف الآخرين خطياً برغبته في عدم التجديد قبل **تسعين (90) يوماً** من تاريخ انتهاء المدة الساري.</li>
|
||||
<li>في حال عدم التجديد، تُصفّى الحقوق والالتزامات المالية القائمة بين الأطراف وفق أحكام هذا العقد.</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="font-sans font-bold text-slate-950 text-[13px] mb-0.5">المادة الثانية عشرة: الانسحاب والتخارج</h4>
|
||||
<ol class="list-decimal list-inside space-y-1">
|
||||
<li>يحق للطرف الثاني (الشركاء المستثمرون) الانسحاب من هذه الشراكة بموجب إشعار خطي مسبق بمدة لا تقل عن **مائة وعشرين (120) يوماً**.</li>
|
||||
<li><strong>في حال رغبة الطرف الثاني في الانسحاب:</strong>
|
||||
<ul class="list-disc list-inside pr-3 mt-1 space-y-0.5">
|
||||
<li class="font-semibold text-slate-950">
|
||||
يحق له المطالبة بالجزء غير المسترد (المتبقي والغير مصروف محاسبياً) من رأس ماله الاستثماري الفعلي فقط من العوائد التشغيلية المتراكمة، دون أن يحق له بأي حال من الأحوال المطالبة أو استرجاع أي مبالغ تم صرفها كرواتب، أو نفقات تشغيلية، أو إعلانية، أو أجور للمنصة، وذلك وفق خطة سداد مجدولة يُتّفق عليها بين الأطراف لا تتجاوز **اثني عشر (12) شهراً** من تاريخ الانسحاب الفعلي.
|
||||
</li>
|
||||
<li>تنقضي حصته في الأرباح المستقبلية اعتباراً من تاريخ نفاذ الانسحاب.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="font-bold bg-slate-50 p-2.5 rounded border-r-3 border-slate-400 leading-relaxed">
|
||||
<strong>ثالثاً: ضمان الاستمرارية والالتزام التشغيلي للطرف الأول وحالات العجز القاهر:</strong> نظراً لأن الجانب التشغيلي والتقني يمثّل عماد وجوهر هذا العقد، يلتزم الطرف الأول بالالتزام التام بتقديم خدماته التشغيلية والبرمجية طوال مدة سريان هذا العقد ولا يملك أحد حق الانسحاب الفردي الاختياري الذي يعطل المنصة. وفي حال طرأ ظرف طبي أو صحي أو عجز قاهر كلي يثبت رسمياً يمنع أحد المؤسسين من الاستمرار، يلتزم الطرف المتأثر بضمان نقل سلس وفوري وخالٍ من العيوب لكافة مهامه الفنية والتشغيلية ورموز لوحات التحكم وقواعد البيانات إلى الطرف الآخر لضمان بقاء التطبيق فعالاً ومحمياً، وتتم تسوية حقوقه ودياً دون المساس بكيان وتدفق المشروع واستثمار الطرف الثاني.
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="font-sans font-bold text-slate-950 text-[13px] mb-0.5">المادة الثالثة عشرة: الضمانات والمسؤولية وعقد بذل العناية</h4>
|
||||
<ol class="list-decimal list-inside space-y-1">
|
||||
<li>يُقرّ الطرف الأول بأن التطبيق خالٍ من أي رهن أو حجز أو حق للغير يمنع تشغيله واستثماره تجارياً وفق هذا العقد.</li>
|
||||
<li>يُقرّ الطرف الثاني بأن مصادر التمويل المستخدمة في الاستثمار مشروعة وقانونية وغير مرتبطة بأي نشاط محظور قانوناً.</li>
|
||||
<li class="bg-amber-50/50 p-2.5 rounded border-r-3 border-legal-gold">
|
||||
<strong>بند بذل العناية وحماية المسؤولية من الخسائر (سوء الطالع):</strong> يُقر ويوافق الشركاء صراحةً على أن طبيعة التزام الطرف الأول تجاه تشغيل وتطوير التطبيق هي **التزام ببذل عناية مهنية فائقة ودؤوبة وليس التزاماً بتحقيق نتيجة أو ضمان ربح**. يلتزم الطرف الأول ببذل أقصى جهوده الفنية والتقنية والإدارية بناءً على خطة العمل والتجارب التشغيلية السابقة المدروسة، دون أي تعهد أو ضمانة صريحة أو ضمنية بتحقيق عوائد مالية أو أرباح محددة، أو تجنيب المشروع الخسائر التشغيلية.
|
||||
</li>
|
||||
<li class="bg-amber-50/50 p-2.5 rounded border-r-3 border-legal-gold">
|
||||
بناءً على البند السابق، لا يتحمل الطرف الأول أي مسؤولية شخصية أو تضامنية عن الخسائر التشغيلية أو التجارية أو المالية الطبيعية التي قد تصيب المشروع في السوق السورية نتيجة لظروف السوق، أو المنافسة التجارية، أو تقلبات البيئة الاستثمارية والظروف العامة (سوء الطالع)، وتُغطى هذه الخسائر — إن وُجدت — من رأس مال المشروع أو عوائده التشغيلية، شريطة خلو تصرفات الطرف الأول من أي غش، أو تقصير متعمد، أو إهمال جسيم يثبت قضائياً بحق الطرف الأول.
|
||||
</li>
|
||||
<li>يلتزم الطرف الأول ببذل العناية المهنية اللازمة لحماية بيانات المستخدمين والسائقين، والامتثال لأفضل ممارسات أمن المعلومات.</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="font-sans font-bold text-slate-950 text-[13px] mb-0.5">المادة الرابعة عشرة: القوة القاهرة</h4>
|
||||
<p>لا يُعدّ أي طرف مُخِلاً بالتزاماته بموجب هذا العقد إذا حال دون تنفيذها ظرف من ظروف القوة القاهرة، وتشمل — دون حصر: الحروب، الكوارث الطبيعية، الأوبئة، القرارات الحكومية القاهرة، العقوبات الدولية، أو انقطاع شبكة الإنترنت الكامل في الدولة.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="font-sans font-bold text-slate-950 text-[13px] mb-0.5">المادة الخامسة عشرة: تعديل العقد</h4>
|
||||
<p>لا يجوز تعديل أو تغيير أي بند من بنود هذا العقد إلا بموجب **ملحق تعديلي خطّي** موقَّع من جميع الأطراف ومؤرَّخ، ويُعتبر أي تعديل شفهي أو ضمني باطلاً ولا يُعتدّ به.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="font-sans font-bold text-slate-950 text-[13px] mb-0.5">المادة السادسة عشرة: القانون الواجب التطبيق وفض النزاعات</h4>
|
||||
<ol class="list-decimal list-inside space-y-1">
|
||||
<li>يخضع هذا العقد وتفسيره وتنفيذه للقوانين التجارية المعمول بها.</li>
|
||||
<li>في حال نشوء أي خلاف أو نزاع بين الأطراف بشأن تفسير أو تنفيذ أي بند من بنود هذا العقد، يتم حله وفق الترتيب التالي:
|
||||
<ul class="list-disc list-inside pr-3 mt-1 space-y-0.5">
|
||||
<li><strong>أولاً:</strong> التسوية الودية المباشرة بين الأطراف خلال مدة لا تتجاوز <strong>ثلاثين (30) يوماً</strong> من تاريخ الإخطار بالنزاع.</li>
|
||||
<li><strong>ثانياً:</strong> اللجوء إلى <strong>التحكيم التجاري</strong> أمام محكّم أو هيئة تحكيمية مستقلة يتفق عليها الأطراف، ويكون حكم التحكيم نهائياً وملزماً.</li>
|
||||
<li><strong>ثالثاً:</strong> في حال تعذّر التحكيم، يُرفع النزاع أمام المحكمة المختصة.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="font-sans font-bold text-slate-950 text-[13px] mb-0.5">المادة السابعة عشرة: أحكام ختامية</h4>
|
||||
<ol class="list-decimal list-inside space-y-1">
|
||||
<li>يمثّل هذا العقد كامل الاتفاق بين الأطراف فيما يتعلق بموضوعه، ويُلغي أي اتفاقات شفهية أو مكتوبة سابقة بين الأطراف بشأن نفس الموضوع.</li>
|
||||
<li>في حال بطلان أي بند من بنود هذا العقد أو عدم قابليته للتنفيذ، تظل البنود الأخرى صحيحة ونافذة ومُلزِمة.</li>
|
||||
<li>حُرّر هذا العقد من نسخ أصلية متطابقة بيد كل طرف نسخة للعمل بموجبها عند اللزوم.</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Formal Signatures Page with styling -->
|
||||
<div class="mt-8 space-y-6">
|
||||
<h3 class="font-sans font-extrabold text-slate-950 text-[14px] border-b border-slate-800 pb-1.5">توقيعات أطراف العقد والشهود</h3>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full border-collapse border border-slate-800 text-center text-xs font-sans">
|
||||
<thead>
|
||||
<tr class="table-header-print bg-slate-50 text-slate-900 font-bold border-b border-slate-800">
|
||||
<th class="border border-slate-800 p-2">الصفة التعاقدية</th>
|
||||
<th class="border border-slate-800 p-2 text-right pr-4">الاسم الكامل</th>
|
||||
<th class="border border-slate-800 p-2 w-1/4">التوقيع</th>
|
||||
<th class="border border-slate-800 p-2 w-1/5">التاريخ</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="doc-signatures-table-body">
|
||||
<!-- Dynamic Signatures Rows -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Witnesses Section -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 pt-2 text-xs font-sans">
|
||||
<div class="border border-slate-300 p-3 rounded-lg space-y-1.5">
|
||||
<span class="font-bold text-slate-900">شاهد أول (اختياري):</span>
|
||||
<div class="text-slate-500 text-[11px]">الاسم: _____________________________________</div>
|
||||
<div class="text-slate-500 text-[11px]">التوقيع: ___________________________________</div>
|
||||
</div>
|
||||
<div class="border border-slate-300 p-3 rounded-lg space-y-1.5">
|
||||
<span class="font-bold text-slate-900">شاهد ثانٍ (اختياري):</span>
|
||||
<div class="text-slate-500 text-[11px]">الاسم: _____________________________________</div>
|
||||
<div class="text-slate-500 text-[11px]">التوقيع: ___________________________________</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dynamic Appendix Sections -->
|
||||
<div id="doc-appendices-container" class="space-y-6">
|
||||
<!-- Dynamic Partner Passports -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Script handling dynamic actions and lists -->
|
||||
<script>
|
||||
// Configuration
|
||||
const country = "سوريا";
|
||||
|
||||
let founders = [
|
||||
{ name: '', nationality: 'أردني', id: '', share: 0 }
|
||||
];
|
||||
|
||||
let partners = [
|
||||
{ name: '', nationality: 'أردني', id: '', share: 0, passportDataUrl: '' }
|
||||
];
|
||||
|
||||
// Init UI inputs on DOM load
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
renderSidebar();
|
||||
syncContract();
|
||||
});
|
||||
|
||||
function renderSidebar() {
|
||||
// Render Founders in Sidebar
|
||||
const foundersContainer = document.getElementById('founders-container');
|
||||
foundersContainer.innerHTML = '';
|
||||
|
||||
founders.forEach((founder, index) => {
|
||||
const div = document.createElement('div');
|
||||
div.className = "bg-white p-3 rounded border border-slate-200 space-y-2 relative shadow-sm";
|
||||
div.innerHTML = `
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-[10px] font-bold text-slate-400">مؤسس #${index + 1}</span>
|
||||
${founders.length > 1 ? `
|
||||
<button onclick="removeFounder(${index})" class="text-[10px] text-red-500 hover:text-red-700 font-bold">
|
||||
حذف
|
||||
</button>
|
||||
` : ''}
|
||||
</div>
|
||||
<div class="space-y-1.5">
|
||||
<input type="text" placeholder="الاسم الكامل" value="${founder.name}" oninput="updateFounderField(${index}, 'name', this.value)" class="w-full text-xs px-2 py-1 bg-white border border-slate-200 rounded">
|
||||
<div class="grid grid-cols-2 gap-1.5">
|
||||
<input type="text" placeholder="الجنسية (مثال: أردني)" value="${founder.nationality}" oninput="updateFounderField(${index}, 'nationality', this.value)" class="w-full text-xs px-2 py-1 bg-white border border-slate-200 rounded">
|
||||
<input type="number" placeholder="الأرباح %" value="${founder.share || ''}" oninput="updateFounderField(${index}, 'share', this.value)" class="w-full text-xs px-2 py-1 bg-white border border-slate-200 rounded">
|
||||
</div>
|
||||
<input type="text" placeholder="الرقم الوطني وجواز السفر" value="${founder.id}" oninput="updateFounderField(${index}, 'id', this.value)" class="w-full text-xs px-2 py-1 bg-white border border-slate-200 rounded">
|
||||
</div>
|
||||
`;
|
||||
foundersContainer.appendChild(div);
|
||||
});
|
||||
|
||||
// Render Partners in Sidebar
|
||||
const partnersContainer = document.getElementById('partners-container');
|
||||
partnersContainer.innerHTML = '';
|
||||
|
||||
partners.forEach((partner, index) => {
|
||||
const div = document.createElement('div');
|
||||
div.className = "bg-white p-3 rounded border border-slate-200 space-y-2 relative shadow-sm";
|
||||
div.innerHTML = `
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-[10px] font-bold text-slate-400">شريك مستثمر #${index + 1}</span>
|
||||
${partners.length > 1 ? `
|
||||
<button onclick="removePartner(${index})" class="text-[10px] text-red-500 hover:text-red-700 font-bold">
|
||||
حذف
|
||||
</button>
|
||||
` : ''}
|
||||
</div>
|
||||
<div class="space-y-1.5">
|
||||
<input type="text" placeholder="الاسم الكامل" value="${partner.name}" oninput="updatePartnerField(${index}, 'name', this.value)" class="w-full text-xs px-2 py-1 bg-white border border-slate-200 rounded">
|
||||
<div class="grid grid-cols-2 gap-1.5">
|
||||
<input type="text" placeholder="الجنسية (مثال: أردني)" value="${partner.nationality}" oninput="updatePartnerField(${index}, 'nationality', this.value)" class="w-full text-xs px-2 py-1 bg-white border border-slate-200 rounded">
|
||||
<input type="number" placeholder="الأرباح %" value="${partner.share || ''}" oninput="updatePartnerField(${index}, 'share', this.value)" class="w-full text-xs px-2 py-1 bg-white border border-slate-200 rounded">
|
||||
</div>
|
||||
<input type="text" placeholder="الرقم الوطني وجواز السفر" value="${partner.id}" oninput="updatePartnerField(${index}, 'id', this.value)" class="w-full text-xs px-2 py-1 bg-white border border-slate-200 rounded">
|
||||
<div class="flex flex-col">
|
||||
<label class="text-[9px] text-slate-400 mb-0.5">تحميل صورة جواز السفر</label>
|
||||
<input type="file" accept="image/*" onchange="uploadPartnerPassport(${index}, this)" class="w-full text-[10px] bg-slate-50 border border-slate-200 rounded p-0.5">
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
partnersContainer.appendChild(div);
|
||||
});
|
||||
|
||||
// Update add buttons state
|
||||
document.getElementById('btn-add-founder').style.display = founders.length >= 3 ? 'none' : 'block';
|
||||
document.getElementById('btn-add-partner').style.display = partners.length >= 3 ? 'none' : 'block';
|
||||
}
|
||||
|
||||
// Founders state management
|
||||
function addFounder() {
|
||||
if (founders.length < 3) {
|
||||
founders.push({ name: '', nationality: 'أردني', id: '', share: 0 });
|
||||
renderSidebar();
|
||||
syncContract();
|
||||
}
|
||||
}
|
||||
function removeFounder(index) {
|
||||
founders.splice(index, 1);
|
||||
renderSidebar();
|
||||
syncContract();
|
||||
}
|
||||
function updateFounderField(index, field, value) {
|
||||
founders[index][field] = field === 'share' ? (parseFloat(value) || 0) : value;
|
||||
syncContract();
|
||||
}
|
||||
|
||||
// Partners state management
|
||||
function addPartner() {
|
||||
if (partners.length < 3) {
|
||||
partners.push({ name: '', nationality: 'أردني', id: '', share: 0, passportDataUrl: '' });
|
||||
renderSidebar();
|
||||
syncContract();
|
||||
}
|
||||
}
|
||||
function removePartner(index) {
|
||||
partners.splice(index, 1);
|
||||
renderSidebar();
|
||||
syncContract();
|
||||
}
|
||||
function updatePartnerField(index, field, value) {
|
||||
partners[index][field] = field === 'share' ? (parseFloat(value) || 0) : value;
|
||||
syncContract();
|
||||
}
|
||||
function uploadPartnerPassport(index, fileInput) {
|
||||
const file = fileInput.files[0];
|
||||
if (file) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = function(evt) {
|
||||
partners[index].passportDataUrl = evt.target.result;
|
||||
syncContract();
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
} else {
|
||||
partners[index].passportDataUrl = '';
|
||||
syncContract();
|
||||
}
|
||||
}
|
||||
|
||||
// Global Sync logic
|
||||
function syncContract() {
|
||||
// 1. Sync Date and Capital
|
||||
const inputDateVal = document.getElementById('input-date').value || '....................';
|
||||
const inputCapitalVal = parseFloat(document.getElementById('input-capital').value) || 0;
|
||||
const inputCapitalWordsVal = document.getElementById('input-capital-words').value || '....................';
|
||||
const inputCurrencyVal = document.getElementById('input-currency').value || 'USD';
|
||||
|
||||
document.getElementById('sync-contract-date').textContent = inputDateVal;
|
||||
document.getElementById('sync-text-date').textContent = inputDateVal;
|
||||
|
||||
document.querySelectorAll('.sync-capital-words-span').forEach(el => el.textContent = inputCapitalWordsVal);
|
||||
document.querySelectorAll('.sync-capital-number-span').forEach(el => el.textContent = inputCapitalVal.toLocaleString());
|
||||
document.querySelectorAll('.sync-currency-span').forEach(el => el.textContent = inputCurrencyVal);
|
||||
|
||||
// 2. Render Founders list in document
|
||||
const docFoundersList = document.getElementById('doc-founders-list');
|
||||
docFoundersList.innerHTML = '';
|
||||
founders.forEach((founder, idx) => {
|
||||
const nameStr = founder.name ? `السيد/ <strong>${founder.name}</strong>` : 'السيد/ <strong>.......................................................</strong>';
|
||||
const natStr = founder.nationality ? `${founder.nationality} الجنسية` : '.................... الجنسية';
|
||||
const idStr = founder.id ? `الرقم الوطني/جواز السفر <span class="highlight-field">${founder.id}</span>` : 'الرقم الوطني/جواز السفر <span class="highlight-field">.......................................................</span>';
|
||||
|
||||
const p = document.createElement('p');
|
||||
p.innerHTML = `${idx + 1}. ${nameStr}، ${natStr}، يحمل ${idStr}، ويُشار إليه بـ <strong>"الشريك المؤسس ${getArabicOrdinal(idx + 1)}"</strong>.`;
|
||||
docFoundersList.appendChild(p);
|
||||
});
|
||||
|
||||
// 3. Render Partners list in document
|
||||
const docPartnersList = document.getElementById('doc-partners-list');
|
||||
docPartnersList.innerHTML = '';
|
||||
partners.forEach((partner, idx) => {
|
||||
const nameStr = partner.name ? `السيد/ <strong>${partner.name}</strong>` : 'السيد/ <strong>.......................................................</strong>';
|
||||
const natStr = partner.nationality ? `${partner.nationality} الجنسية` : '.................... الجنسية';
|
||||
const idStr = partner.id ? `الرقم الوطني / رقم الهوية <span class="highlight-field">${partner.id}</span>` : 'الرقم الوطني / رقم الهوية <span class="highlight-field">.......................................................</span>';
|
||||
|
||||
const p = document.createElement('p');
|
||||
p.innerHTML = `${idx + 1}. ${nameStr}، ${natStr}، يحمل ${idStr}، ويُشار إليه بـ <strong>"الشريك المستثمر ${getArabicOrdinal(idx + 1)}"</strong> أو <strong>"الطرف الثاني"</strong>.`;
|
||||
docPartnersList.appendChild(p);
|
||||
});
|
||||
|
||||
// 4. Render share tables and check sum
|
||||
const tableBody = document.getElementById('doc-shares-table-body');
|
||||
tableBody.innerHTML = '';
|
||||
let totalShare = 0;
|
||||
|
||||
founders.forEach((founder, idx) => {
|
||||
totalShare += founder.share;
|
||||
const tr = document.createElement('tr');
|
||||
tr.className = "border-b border-slate-800";
|
||||
tr.innerHTML = `
|
||||
<td class="border border-slate-800 p-2 text-right pr-4 font-bold">${founder.name || '.......................................................'}</td>
|
||||
<td class="border border-slate-800 p-2 text-slate-600">الشريك المؤسس ${getArabicOrdinal(idx + 1)}</td>
|
||||
<td class="border border-slate-800 p-2 font-bold"><span class="text-slate-950 text-sm">${founder.share}</span>%</td>
|
||||
`;
|
||||
tableBody.appendChild(tr);
|
||||
});
|
||||
|
||||
partners.forEach((partner, idx) => {
|
||||
totalShare += partner.share;
|
||||
const tr = document.createElement('tr');
|
||||
tr.className = "border-b border-slate-800";
|
||||
tr.innerHTML = `
|
||||
<td class="border border-slate-800 p-2 text-right pr-4 font-bold">${partner.name || '.......................................................'}</td>
|
||||
<td class="border border-slate-800 p-2 text-slate-600">الشريك المستثمر ${getArabicOrdinal(idx + 1)} (الطرف الثاني)</td>
|
||||
<td class="border border-slate-800 p-2 font-bold"><span class="text-slate-950 text-sm">${partner.share}</span>%</td>
|
||||
`;
|
||||
tableBody.appendChild(tr);
|
||||
});
|
||||
|
||||
// 5. Update validation message
|
||||
document.getElementById('share-sum').textContent = totalShare;
|
||||
const indicator = document.getElementById('share-indicator');
|
||||
const validationMsg = document.getElementById('share-validation-msg');
|
||||
if (totalShare === 100) {
|
||||
indicator.className = "text-[10px] font-bold px-2 py-0.5 rounded-full bg-emerald-100 text-emerald-700";
|
||||
validationMsg.className = "text-[11px] p-2 rounded bg-emerald-50 text-emerald-800 border border-emerald-200 font-semibold leading-relaxed";
|
||||
validationMsg.innerHTML = "✅ مجموع النسب متوازن (100%). المستند آمن وجاهز تماماً للطباعة كـ PDF.";
|
||||
} else {
|
||||
indicator.className = "text-[10px] font-bold px-2 py-0.5 rounded-full bg-red-100 text-red-600";
|
||||
validationMsg.className = "text-[11px] p-2 rounded bg-red-50 text-red-700 border border-red-200 font-medium leading-relaxed";
|
||||
validationMsg.innerHTML = `⚠️ مجموع الحصص الحالي هو <b>${totalShare}%</b>. يرجى تعديل الأرقام ليكون الإجمالي 100% لمطابقة شروط العقد الأساسية.`;
|
||||
}
|
||||
|
||||
// 6. Dynamic IP Ownership Clause (First founder solely owns IP, list exclusions)
|
||||
const firstFounderName = founders[0] && founders[0].name ? founders[0].name : '.......................................................';
|
||||
let exclusions = [];
|
||||
founders.forEach((f, idx) => {
|
||||
if (idx > 0 && f.name) exclusions.push(`الشريك المؤسس ${f.name}`);
|
||||
});
|
||||
partners.forEach(p => {
|
||||
if (p.name) exclusions.push(`المستثمر ${p.name}`);
|
||||
});
|
||||
const exclusionsStr = exclusions.length > 0 ? ` (بما فيهم ${exclusions.join(' و ')})` : '';
|
||||
|
||||
const ipClause = document.getElementById('ip-ownership-clause');
|
||||
ipClause.innerHTML = `
|
||||
يُقرّ ويتفق جميع الأطراف صراحةً على أن الكود المصدري (Source Code) والبرمجي لتطبيق "Siro" بجميع إصداراته (الراكب، السائق، لوحة الإدارة)، وكافة التصاميم والبنية الهندسية وقواعد البيانات والخوارزميات والعلامة التجارية والاسم التجاري والشعار، هي ملكية خاصة وحصرية ومطلقة وأبدية وتؤول بالكامل وتحديداً للسيد <span class="text-slate-950 font-extrabold border-b-2 border-legal-gold/70 pb-0.5">${firstFounderName} بمفرده وبشكل أبدّي</span> دون غيره، ولا يحق لأي طرف آخر${exclusionsStr} منازعته عليها أو الادعاء بأي حقوق عليها تحت أي ظرف كان.
|
||||
`;
|
||||
|
||||
// 7. Render Signatures
|
||||
const sigTableBody = document.getElementById('doc-signatures-table-body');
|
||||
sigTableBody.innerHTML = '';
|
||||
|
||||
founders.forEach((founder, idx) => {
|
||||
const tr = document.createElement('tr');
|
||||
tr.className = "border-b border-slate-800";
|
||||
tr.innerHTML = `
|
||||
<td class="border border-slate-800 p-2.5 text-slate-700 font-medium">الشريك المؤسس ${getArabicOrdinal(idx + 1)}</td>
|
||||
<td class="border border-slate-800 p-2.5 text-right pr-4 font-bold">${founder.name || '.......................................................'}</td>
|
||||
<td class="border border-slate-800 p-2.5 text-slate-400">.......................</td>
|
||||
<td class="border border-slate-800 p-2.5 font-bold sync-text-table-date">${inputDateVal}</td>
|
||||
`;
|
||||
sigTableBody.appendChild(tr);
|
||||
});
|
||||
|
||||
partners.forEach((partner, idx) => {
|
||||
const tr = document.createElement('tr');
|
||||
tr.className = "border-b border-slate-800";
|
||||
tr.innerHTML = `
|
||||
<td class="border border-slate-800 p-2.5 text-slate-700 font-medium">الشريك المستثمر ${getArabicOrdinal(idx + 1)}</td>
|
||||
<td class="border border-slate-800 p-2.5 text-right pr-4 font-bold">${partner.name || '.......................................................'}</td>
|
||||
<td class="border border-slate-800 p-2.5 text-slate-400">.......................</td>
|
||||
<td class="border border-slate-800 p-2.5 font-bold sync-text-table-date">${inputDateVal}</td>
|
||||
`;
|
||||
sigTableBody.appendChild(tr);
|
||||
});
|
||||
|
||||
// 8. Render Appendices for Passports
|
||||
const appendicesContainer = document.getElementById('doc-appendices-container');
|
||||
appendicesContainer.innerHTML = '';
|
||||
|
||||
partners.forEach((partner, idx) => {
|
||||
const pName = partner.name || `الشريك المستثمر ${getArabicOrdinal(idx + 1)}`;
|
||||
const div = document.createElement('div');
|
||||
div.className = "page-break no-print my-6 border-t-2 border-dashed border-slate-300 pt-6";
|
||||
div.innerHTML = `
|
||||
<div class="space-y-4">
|
||||
<h3 class="font-sans font-extrabold text-slate-950 text-[14px] border-b border-slate-800 pb-1.5">المرفقات: صورة جواز سفر الشريك المستثمر (${pName})</h3>
|
||||
<div class="flex flex-col items-center justify-center p-6 border border-dashed border-slate-300 rounded-lg bg-slate-50/50">
|
||||
${partner.passportDataUrl ? `
|
||||
<img class="max-h-[140mm] max-w-full rounded shadow-sm border border-slate-200" src="${partner.passportDataUrl}" alt="جواز سفر ${pName}">
|
||||
` : `
|
||||
<div class="text-center py-10 text-slate-400 text-xs font-sans">
|
||||
<svg class="w-12 h-12 mx-auto mb-2 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
</svg>
|
||||
<span>لم يتم إرفاق صورة جواز السفر للشريك (${pName}) بعد. استخدم خيار التحميل في لوحة التحكم لإرفاق الصورة.</span>
|
||||
</div>
|
||||
`}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
appendicesContainer.appendChild(div);
|
||||
});
|
||||
}
|
||||
|
||||
// Helper to get Arabic Ordinals
|
||||
function getArabicOrdinal(num) {
|
||||
const ordinals = ["", "الأول", "الثاني", "الثالث", "الرابع", "الخامس"];
|
||||
return ordinals[num] || `${num}`;
|
||||
}
|
||||
|
||||
// Sync inputs from date & capital changes
|
||||
document.getElementById('input-date').addEventListener('input', syncContract);
|
||||
document.getElementById('input-capital').addEventListener('input', (e) => {
|
||||
const num = parseInt(e.target.value) || 0;
|
||||
// Auto mapping simple numbers to words
|
||||
const mapper = {
|
||||
100000: "مائة ألف",
|
||||
150000: "مائة وخمسون ألف",
|
||||
180000: "مائة وثمانون ألف",
|
||||
200000: "مائتا ألف",
|
||||
250000: "مائتان وخمسون ألف",
|
||||
300000: "ثلاثمائة ألف",
|
||||
400000: "أربعمائة ألف",
|
||||
500000: "خمسمائة ألف"
|
||||
};
|
||||
const currencyLabel = document.getElementById('input-currency').value === 'USD' ? 'دولار أمريكي' : '';
|
||||
if (mapper[num]) {
|
||||
document.getElementById('input-capital-words').value = mapper[num] + (currencyLabel ? ' ' + currencyLabel : '');
|
||||
}
|
||||
syncContract();
|
||||
});
|
||||
document.getElementById('input-capital-words').addEventListener('input', syncContract);
|
||||
document.getElementById('input-currency').addEventListener('input', syncContract);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,898 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ar" dir="rtl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>مولد ومطبع عقد شراكة Siro القانوني المطور - مصر</title>
|
||||
<!-- Google Fonts: Amiri & Inter for highly clean and modern tech-corporate document rendering -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400&family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<!-- Tailwind CSS -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'Amiri', 'sans-serif'],
|
||||
serif: ['Inter', 'Amiri', 'serif'],
|
||||
},
|
||||
colors: {
|
||||
legal: {
|
||||
800: '#1e293b',
|
||||
900: '#0f172a',
|
||||
gold: '#c5a880',
|
||||
goldHover: '#b3956d'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
background-color: #f8fafc;
|
||||
}
|
||||
|
||||
/* Mockup standard sheet configuration */
|
||||
.paper-sheet {
|
||||
background: #ffffff;
|
||||
box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05), 0 2px 10px -4px rgba(0, 0, 0, 0.05);
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* Dynamic interaction fields highlighting */
|
||||
.highlight-field {
|
||||
border-bottom: 1.5px dashed #c5a880;
|
||||
color: #0f172a;
|
||||
font-weight: 700;
|
||||
padding: 0 4px;
|
||||
transition: all 0.2s ease;
|
||||
background-color: rgba(197, 168, 128, 0.06);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.highlight-field:empty::before {
|
||||
content: ".......................................................";
|
||||
color: #94a3b8;
|
||||
font-weight: 300;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
/* Advanced Print configuration targeting exactly 3 compact pages */
|
||||
@media print {
|
||||
body {
|
||||
background: #ffffff !important;
|
||||
color: #000000 !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
.no-print {
|
||||
display: none !important;
|
||||
}
|
||||
.print-page {
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
height: auto !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
.contract-container {
|
||||
border: none !important;
|
||||
padding: 10mm 10mm !important;
|
||||
}
|
||||
.page-break {
|
||||
page-break-after: always;
|
||||
break-after: page;
|
||||
margin-top: 20px;
|
||||
height: 0;
|
||||
}
|
||||
@page {
|
||||
size: A4;
|
||||
margin: 12mm 12mm;
|
||||
}
|
||||
.table-header-print {
|
||||
background-color: #f8fafc !important;
|
||||
-webkit-print-color-adjust: exact;
|
||||
print-color-adjust: exact;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-sans text-slate-800 antialiased min-h-screen flex flex-col">
|
||||
|
||||
<!-- Top Navbar (hidden on print) -->
|
||||
<header class="bg-legal-900 text-white py-3.5 px-6 shadow-md border-b border-legal-gold/20 no-print sticky top-0 z-50">
|
||||
<div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="bg-gradient-to-tr from-legal-gold to-amber-500 p-2 rounded-xl">
|
||||
<svg class="w-6 h-6 text-legal-900" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-lg font-bold tracking-wide flex items-center gap-2"><span class="text-legal-gold font-extrabold">Siro</span></h1>
|
||||
<p class="text-[10px] text-slate-400">توليد وطباعة العقد القانوني لجمهورية مصر العربية</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<button onclick="window.print();" class="bg-legal-gold hover:bg-legal-goldHover text-legal-900 px-5 py-2 rounded-lg font-bold shadow-lg shadow-legal-gold/20 flex items-center gap-2 transition-all duration-200 transform active:scale-95 text-sm">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"></path>
|
||||
</svg>
|
||||
طباعة العقد (حفظ PDF)
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Content Layout -->
|
||||
<div class="flex-1 max-w-7xl w-full mx-auto p-4 md:p-6 grid grid-cols-1 lg:grid-cols-12 gap-6 items-start">
|
||||
|
||||
<!-- Controls Sidebar Panel (hidden on print) -->
|
||||
<aside class="lg:col-span-4 bg-white p-5 rounded-xl shadow-sm border border-slate-200 no-print space-y-5">
|
||||
<div class="border-b border-slate-100 pb-3">
|
||||
<h2 class="text-base font-bold text-legal-900 flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-legal-gold" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2.5 2.5 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
|
||||
</svg>
|
||||
لوحة التحكم الذكية بالعقد
|
||||
</h2>
|
||||
<p class="text-[11px] text-slate-500 mt-0.5">يمكنك إضافة وتعديل بيانات الأطراف وحصصهم لتحديث العقد فورياً.</p>
|
||||
</div>
|
||||
|
||||
<!-- Inputs Sections -->
|
||||
<div class="space-y-4">
|
||||
|
||||
<div class="bg-slate-50 p-3 rounded-lg space-y-2.5 border border-slate-100">
|
||||
<h3 class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">التواريخ والمعلومات الأساسية</h3>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
<label class="block text-[11px] text-slate-600 font-semibold mb-1">تاريخ تحرير العقد</label>
|
||||
<input type="text" id="input-date" value="14/06/2026م" placeholder="مثال: 14/06/2026م" class="w-full text-xs px-2.5 py-1.5 bg-white border border-slate-200 rounded focus:outline-none focus:border-legal-gold">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-[11px] text-slate-600 font-semibold mb-1">قيمة رأس المال</label>
|
||||
<input type="number" id="input-capital" value="300000" placeholder="مثال: 300000" class="w-full text-xs px-2.5 py-1.5 bg-white border border-slate-200 rounded focus:outline-none focus:border-legal-gold">
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
<label class="block text-[11px] text-slate-600 font-semibold mb-1">المبلغ كتابة</label>
|
||||
<input type="text" id="input-capital-words" value="ثلاثمائة ألف دولار أمريكي" placeholder="مثال: ثلاثمائة ألف دولار أمريكي" class="w-full text-xs px-2.5 py-1.5 bg-white border border-slate-200 rounded focus:outline-none focus:border-legal-gold">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-[11px] text-slate-600 font-semibold mb-1">رمز العملة (اختصار)</label>
|
||||
<input type="text" id="input-currency" value="USD" placeholder="مثال: USD" class="w-full text-xs px-2.5 py-1.5 bg-white border border-slate-200 rounded focus:outline-none focus:border-legal-gold">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Founders Section -->
|
||||
<div class="bg-slate-50 p-3 rounded-lg border border-slate-100 space-y-3">
|
||||
<div class="flex justify-between items-center">
|
||||
<h3 class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">الطرف الأول (المؤسسون - بحد أقصى 3)</h3>
|
||||
<button id="btn-add-founder" onclick="addFounder()" class="text-[11px] font-bold text-legal-gold hover:text-legal-goldHover flex items-center gap-0.5">
|
||||
+ إضافة مؤسس
|
||||
</button>
|
||||
</div>
|
||||
<div id="founders-container" class="space-y-3">
|
||||
<!-- Dynamic Founders Form Fields -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Investors Section -->
|
||||
<div class="bg-slate-50 p-3 rounded-lg border border-slate-100 space-y-3">
|
||||
<div class="flex justify-between items-center">
|
||||
<h3 class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">الطرف الثاني (الشركاء المستثمرون - بحد أقصى 3)</h3>
|
||||
<button id="btn-add-partner" onclick="addPartner()" class="text-[11px] font-bold text-legal-gold hover:text-legal-goldHover flex items-center gap-0.5">
|
||||
+ إضافة شريك
|
||||
</button>
|
||||
</div>
|
||||
<div id="partners-container" class="space-y-3">
|
||||
<!-- Dynamic Partners Form Fields -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Validation & Status Indicator -->
|
||||
<div class="bg-slate-50 p-3 rounded-lg space-y-2 border border-slate-100">
|
||||
<div class="flex justify-between items-center">
|
||||
<h3 class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">مجموع الحصص %</h3>
|
||||
<span id="share-indicator" class="text-[10px] font-bold px-1.5 py-0.5 rounded-full bg-red-100 text-red-600">
|
||||
المجموع: <span id="share-sum">0</span>%
|
||||
</span>
|
||||
</div>
|
||||
<div id="share-validation-msg" class="text-[11px] p-2 rounded bg-red-50 text-red-700 font-medium leading-relaxed">
|
||||
⚠️ مجموع الحصص يجب أن يكون 100% لتصحيح صياغة العقد.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Guidelines / Best Practices for print -->
|
||||
<div class="p-3.5 rounded-lg border border-legal-gold/20 bg-legal-900 text-white space-y-1.5">
|
||||
<h4 class="text-xs font-bold text-legal-gold flex items-center gap-1">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
دليل حفظ مستند PDF مثالي:
|
||||
</h4>
|
||||
<ul class="text-[11px] text-slate-300 space-y-1 list-disc list-inside">
|
||||
<li>تأكد من تفعيل خيار <b class="text-legal-gold">رسومات الخلفية</b> في خيارات الطباعة بالمتصفح.</li>
|
||||
<li>ألغِ خيار <b class="text-legal-gold">الرؤوس والتذييلات</b> لإلغاء روابط المواقع.</li>
|
||||
<li>استخدم خيار "حفظ بتنسيق PDF" لإنتاج ملف جاهز فوري.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Document Sheet Area -->
|
||||
<main class="lg:col-span-8 flex flex-col items-center">
|
||||
|
||||
<div class="w-full max-w-[210mm] paper-sheet print-page rounded-xl border border-slate-200 overflow-hidden mb-6 transition-all duration-300">
|
||||
|
||||
<!-- Inner formal border (Configured to use clean modern font-serif mapping to Inter) -->
|
||||
<div class="contract-container p-6 md:p-10 lg:p-12 text-slate-900 font-serif text-justify text-[13.5px] leading-relaxed" id="contract-document">
|
||||
|
||||
<!-- Official Header & Siro Logo -->
|
||||
<div class="flex flex-col items-center text-center border-b-2 border-slate-800 pb-4 mb-6">
|
||||
|
||||
<!-- Official Premium Siro Logo -->
|
||||
<div class="mb-3">
|
||||
<img src="logo.png" class="h-14 mx-auto" alt="Siro Logo">
|
||||
</div>
|
||||
<h1 class="text-base md:text-lg font-bold text-slate-950 font-sans tracking-wide">عقد شراكة واستثمار تجاري لتشغيل تطبيق "Siro"</h1>
|
||||
<p class="text-sm font-bold text-slate-800 font-sans">في جمهورية مصر العربية</p>
|
||||
|
||||
<div class="w-full flex justify-between items-center text-[10px] font-sans text-slate-500 mt-2.5 px-2">
|
||||
<span><strong>الرقم المرجعي:</strong> SIRO-INV-EG-2026-001</span>
|
||||
<span><strong>تاريخ التحرير:</strong> <span id="sync-contract-date" class="font-bold text-slate-900">14/06/2026م</span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Intro Block -->
|
||||
<div class="space-y-5">
|
||||
<p class="leading-normal">
|
||||
تم تحرير هذا العقد وتوثيقه في اليوم الموافق
|
||||
<span id="sync-text-date" class="highlight-field">14/06/2026م</span> ميلادي، بين كلٍّ من:
|
||||
</p>
|
||||
|
||||
<!-- Parties Info -->
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<h3 class="font-sans font-bold text-slate-950 border-r-3 border-legal-gold pr-2 text-[13px]">الطرف الأول (المؤسسون – الشريك الإداري والتقني):</h3>
|
||||
<div id="doc-founders-list" class="pr-3 mt-1 space-y-1.5">
|
||||
<!-- Dynamic Founders List -->
|
||||
</div>
|
||||
<p class="text-[11px] text-slate-500 italic pr-3 mt-0.5 font-sans">
|
||||
(ويُشار إليهما مجتمعَيْن بـ <strong>"الطرف الأول"</strong> أو <strong>"الشركاء المؤسسون"</strong>).
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="font-sans font-bold text-slate-950 border-r-3 border-legal-gold pr-2 text-[13px]">الطرف الثاني (الشركاء المستثمرون):</h3>
|
||||
<div id="doc-partners-list" class="pr-3 mt-1 space-y-1.5">
|
||||
<!-- Dynamic Partners List -->
|
||||
</div>
|
||||
<p class="text-[11px] text-slate-500 italic pr-3 mt-0.5 font-sans">
|
||||
(ويُشار إليهم مجتمعين بـ <strong>"الطرف الثاني"</strong> أو <strong>"الشركاء المستثمرون"</strong>).
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Preamble -->
|
||||
<div>
|
||||
<h3 class="font-sans font-extrabold text-slate-950 text-[14px] mb-1">التمهيد</h3>
|
||||
<div class="space-y-2">
|
||||
<p>
|
||||
<strong>حيث إن</strong> الطرف الأول يمتلك ويُدير منظومة برمجية ومنصة تقنية متطورة للنقل الذكي وتسهيل التنقل الحضري وتوصيل الركاب تحمل اسم <strong>"Siro"</strong> ومصممة وفق أحدث المعايير الهندسية والبرمجية العالمية؛
|
||||
</p>
|
||||
<p>
|
||||
<strong>وحيث إن</strong> الطرف الثاني (الشركاء المستثمرون) يرغبون في تقديم تمويل استثماري لتغطية تكاليف إطلاق التطبيق وتشغيله وتسويقه داخل السوق المصرية مقابل حصة من صافي الأرباح التشغيلية؛
|
||||
</p>
|
||||
<p>
|
||||
<strong>وحيث إن</strong> إرادة الأطراف قد التقت على تأسيس شراكة تجارية واستثمارية مشتركة قائمة على الشفافية والالتزام المتبادل؛
|
||||
</p>
|
||||
<p class="font-bold border-r-2 border-slate-400 pr-2">
|
||||
فقد اتفق الأطراف — بعد إقرارهم بكامل أهليتهم القانونية للتعاقد — على ما يلي:
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Articles and clauses flow -->
|
||||
<div class="space-y-4 pt-2">
|
||||
|
||||
<div>
|
||||
<h4 class="font-sans font-bold text-slate-950 text-[13px] mb-0.5">المادة الأولى: نطاق التمهيد</h4>
|
||||
<p>يُعدّ التمهيد المذكور أعلاه جزءاً لا يتجزأ من هذا العقد، ويُقرأ ويُفسَّر ضمن سياقه.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="font-sans font-bold text-slate-950 text-[13px] mb-0.5">المادة الثانية: موضوع العقد والنطاق الجغرافي</h4>
|
||||
<ol class="list-decimal list-inside space-y-1">
|
||||
<li>موضوع هذا العقد هو تنظيم العلاقة التجارية والاستثمارية بين الأطراف لتشغيل واستغلال تطبيق <strong>"Siro"</strong> تجارياً وخدمياً وتسويقياً.</li>
|
||||
<li>يقتصر النطاق الجغرافي لهذا العقد حصراً على أراضي <strong>جمهورية مصر العربية</strong>. ولا يشمل هذا العقد أي سوق أو دولة أخرى يعمل فيها التطبيق أو قد يتوسع إليها مستقبلاً.</li>
|
||||
<li>لا يجوز توسيع النطاق الجغرافي لهذا العقد إلا بموجب ملحق تعديلي خطّي موقّع من جميع الأطراف.</li>
|
||||
<li><strong>حق الأولوية في التوسع الدولي:</strong> في حال رغبة الطرف الأول في توسيع النطاق الجغرافي للمشروع وتشغيل تطبيق Siro في أي دولة أو سوق خارج جمهورية مصر العربية، يلتزم الطرف الأول بعرض هذه الفرصة الاستثمارية الجديدة على الطرف الثاني خطياً قبل عرضها على أي طرف ثالث. ويكون للطرف الثاني حق الأولوية (Right of First Refusal) في الاستثمار والمشاركة في السوق الجديد بذات الشروط أو بشروط يتم التوافق عليها، على أن يبدي الطرف الثاني رغبته خطياً خلال مدة لا تتجاوز <strong>أسبوعاً واحداً (7 أيام)</strong> من تاريخ استلام العرض المكتوب، وفي حال انقضاء هذه المدة دون رد أو في حال اعتذاره خطياً، يحق للطرف الأول التعاقد مع مستثمرين آخرين بحرية تامة ودون أي التزام تجاه الطرف الثاني.</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="font-sans font-bold text-slate-950 text-[13px] mb-0.5">المادة الثالثة: رأس المال الاستثماري وآلية الدفع</h4>
|
||||
<ol class="list-decimal list-inside space-y-1">
|
||||
<li>يلتزم الطرف الثاني بتقديم رأس مال استثماري إجمالي قدره <strong class="sync-capital-words-span">ثلاثمائة ألف دولار أمريكي</strong> (<strong class="sync-capital-number-span">300,000</strong> <strong class="sync-currency-span">USD</strong>) لتمويل عمليات إطلاق المشروع وتشغيله في مصر.</li>
|
||||
<li>يُسدَّد رأس المال الاستثماري على دفعات مجدولة ومرنة يتم التوافق عليها ودياً بين الأطراف بما يتماشى مع خطة العمل والاحتياجات التشغيلية للمشروع.</li>
|
||||
<li>تُودع جميع المبالغ والدفعات الاستثمارية في الحساب المصرفي التجاري للشركة في المملكة الأردنية الهاشمية، وذلك بعد إتمام تأسيس وتسجيل الشركة رسمياً وفتح حسابها التجاري في الأردن، لضمان وتسهيل انسياب وحركة الأموال التشغيلية والاستثمارية دخولاً وخروجاً.</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<!-- Page Break for elegant Print Layout -->
|
||||
<div class="page-break no-print my-4 border-t-2 border-dashed border-slate-200"></div>
|
||||
|
||||
<div>
|
||||
<h4 class="font-sans font-bold text-slate-950 text-[13px] mb-0.5">المادة الرابعة: التزامات الأطراف</h4>
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<h5 class="font-bold text-slate-900 text-[12.5px]">أولاً: التزامات الطرف الأول (الشركاء المؤسسون)</h5>
|
||||
<ol class="list-decimal list-inside space-y-1 pr-3 mt-1">
|
||||
<li>يتحمل الطرف الأول المسؤولية الكاملة والحصرية عن الجوانب التقنية والفنية والتشغيلية والإدارية للتطبيق، بما يشمل — دون حصر — التطوير البرمجي، وإدارة الخوادم، والصيانة الدورية، وإصلاح الأعطال الفنية، وإدارة فريق العمل التقني.</li>
|
||||
<li>إصدار التحديثات والتطويرات المستمرة لتطبيقَيْ الراكب والسائق بما يتلاءم مع متطلبات السوق المصرية ويضمن تنافسية المنتج.</li>
|
||||
<li>تقديم تقرير أداء تشغيلي ومالي للطرف الثاني بشكل <strong>شهري</strong> يتضمن: عدد الرحلات المنفذة، عدد السائقين والركاب النشطين، الإيرادات الإجمالية، المصروفات التشغيلية، وصافي الأرباح.</li>
|
||||
<li>ضمان استمرارية الخدمة وتوفّر التطبيق لمستخدميه بنسبة لا تقل عن <strong>95%</strong> من أيام التشغيل الشهري (باستثناء حالات القوة القاهرة والصيانة المجدولة).</li>
|
||||
<li>الالتحاق والالتزام بالعمل الفني والتقني المستمر والدؤوب على تحديث وتطوير وصيانة نظام وتطبيقات Siro بانتظام، لضمان استقرار الخدمة وتشغيلها بكفاءة عالية وتلبية احتياجات السوق المصرية.</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h5 class="font-bold text-slate-900 text-[12.5px]">ثانياً: التزامات الطرف الثاني (الشركاء المستثمرون)</h5>
|
||||
<ol class="list-decimal list-inside space-y-1 pr-3 mt-1">
|
||||
<li>الالتحاق بسداد كامل رأس المال الاستثماري المتفق عليه وقدره (<span class="sync-capital-words-span">ثلاثمائة ألف دولار أمريكي</span>) وفق جدول الدفعات المحدد في المادة الثالثة.</li>
|
||||
<li>المساهمة الفعّالة بخبراتهم اللوجستية والعلاقاتية لتسهيل العمل التجاري داخل السوق المصرية ودعم عمليات التسجيل والتوسع الميداني.</li>
|
||||
<li class="font-semibold text-slate-950 bg-slate-50 p-1.5 rounded border-r-2 border-slate-300">
|
||||
التعهد بمنح الطرف الأول الصلاحية الكاملة والمستقلة في اتخاذ القرارات الفنية والهندسية والبرمجية الخاصة بالتطبيق لضمان سير العمل واستقراره التشغيلي والتقني دون إعاقة؛
|
||||
</li>
|
||||
<li>التعاون الكامل مع الطرف الأول في توفير أي متطلبات إدارية أو تنظيمية أو حكومية تلزم لتشغيل المشروع داخل مصر.</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="font-sans font-bold text-slate-950 text-[13px] mb-0.5">المادة الخامسة: نسب الشراكة وتوزيع الأرباح</h4>
|
||||
<ol class="list-decimal list-inside space-y-2">
|
||||
<li>يتم توزيع <strong>صافي الأرباح التشغيلية</strong> الناتجة عن تشغيل التطبيق في مصر — بعد خصم كافة المصاريف التشغيلية والإدارية، وتكاليف الخوادم والبنية التحتية، والضرائب والرسوم الحكومية، وأجور فريق الدعم الفني والميداني — وفق النسب التالية:</li>
|
||||
</ol>
|
||||
|
||||
<!-- Table Block Inside Paper -->
|
||||
<div class="my-3 overflow-x-auto">
|
||||
<table class="w-full border-collapse border border-slate-800 text-center text-xs font-sans">
|
||||
<thead>
|
||||
<tr class="table-header-print bg-slate-50 text-slate-900 font-bold border-b border-slate-800">
|
||||
<th class="border border-slate-800 p-2 text-right pr-4">الشريك</th>
|
||||
<th class="border border-slate-800 p-2">الصفة التعاقدية</th>
|
||||
<th class="border border-slate-800 p-2 w-1/4">الحصة من صافي الأرباح</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="doc-shares-table-body">
|
||||
<!-- Dynamic Share Table Rows -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<ol class="list-decimal list-inside space-y-1" start="2">
|
||||
<li>تُوزَّع الأرباح بصفة <strong>ربع سنوية</strong> (كل ثلاثة أشهر ميلادية) بناءً على القوائم المالية المعتمدة والمدقّقة لعمليات التطبيق في مصر.</li>
|
||||
<li>لا تُوزَّع الأرباح إلا بعد تخصيص <strong>احتياطي تشغيلي</strong> بنسبة لا تقل عن <strong>10%</strong> من صافي الأرباح لتغطية الطوارئ والنفقات المستقبلية، ويتم الاتفاق بين الشركاء على آلية التصرف في هذا الاحتياطي.</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="font-sans font-bold text-slate-950 text-[13px] mb-0.5">المادة السادسة: فسخ العقد وتصفية الشراكة</h4>
|
||||
<ol class="list-decimal list-inside space-y-1">
|
||||
<li class="font-semibold text-slate-950">
|
||||
في حال فسخ هذا العقد أو تصفية المشروع لأي سبب كان قبل استرداد الطرف الثاني لكامل رأس ماله الاستثماري، يكون للطرف الثاني الأولوية المطلقة في الحصول على المبالغ المتبقية والغير مصروفة من رأس ماله الفعلي (بعد خصم كافة النفقات التشغيلية والرواتب والمصاريف الإعلانية المنقضية والمثبتة محاسبياً) من أي عوائد تشغيلية متراكمة أو أصول ملموسة قابلة للتسييل مرتبطة بنشاط المشروع في مصر حصراً، دون أن يحق له مطالبة الشركاء شخصياً بأي مبالغ تم صرفها وتسييرها في النفقات المذكورة.
|
||||
</li>
|
||||
<li>يتم تصفية جميع الحقوق والالتزامات المالية العالقة بين الأطراف عند الفسخ أو التصفية بما يتوافق مع القواعد القانونية والتجارية السائدة، وبما يضمن عدم الإضرار بأي طرف.</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="font-sans font-bold text-slate-950 text-[13px] mb-0.5">المادة السابعة: الملكية الفكرية والعلامة التجارية</h4>
|
||||
<ol class="list-decimal list-inside space-y-1">
|
||||
<li id="ip-ownership-clause" class="bg-amber-100/40 p-2.5 rounded border-r-4 border-legal-gold leading-relaxed font-semibold text-slate-950">
|
||||
<!-- Dynamic IP Ownership Clause -->
|
||||
</li>
|
||||
<li>لا يُنشئ هذا العقد ولا يمنح الطرف الثاني (الشركاء المستثمرون) أو أي شريك آخر أي حق من حقوق الملكية الفكرية أو الصناعية أو الأدبية على الكود المصدري أو التطبيق أو العلامة التجارية، لا كلياً ولا جزئياً، سواء أثناء سريان العقد أو بعد انتهائه.</li>
|
||||
<li>يقتصر حق الطرف الثاني على <strong>الحصص المالية من صافي الأرباح التشغيلية</strong> الناتجة عن تشغيل التطبيق في النطاق الجغرافي المحدد في هذا العقد حصراً.</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<!-- Page Break for elegant Print Layout -->
|
||||
<div class="page-break no-print my-4 border-t-2 border-dashed border-slate-200"></div>
|
||||
|
||||
<div>
|
||||
<h4 class="font-sans font-bold text-slate-950 text-[13px] mb-0.5">المادة الثامنة: الإدارة واتخاذ القرارات</h4>
|
||||
<ol class="list-decimal list-inside space-y-1">
|
||||
<li>يتولى الطرف الأول (الشركاء المؤسسون) <strong>الإدارة التقنية والفنية والتشغيلية الكاملة</strong> للتطبيق، ويملكان حصرياً صلاحية اتخاذ جميع القرارات البرمجية والهندسية والفنية دون الرجوع للطرف الثاني.</li>
|
||||
<li>تُتّخذ <strong>القرارات الاستراتيجية والتجارية الكبرى</strong> — كالتوسع الجغرافي، أو تغيير نموذج التسعير، أو الدخول في شراكات تجارية مع أطراف ثالثة — بالتشاور والإجماع بين الشركاء.</li>
|
||||
<li>في حال عدم التوافق على قرار تجاري أو استراتيجي، يُعرض الأمر على <strong>محكّم تجاري مستقل</strong> يُتّفق عليه بين الأطراف لإصدار رأي استشاري ملزم.</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="font-sans font-bold text-slate-950 text-[13px] mb-0.5">المادة التاسعة: السرية وعدم الإفشاء</h4>
|
||||
<ol class="list-decimal list-inside space-y-1">
|
||||
<li>يلتزم جميع الأطراف بالحفاظ التام على سرية كافة المعلومات التقنية والمالية والتجارية والتسويقية المتعلقة بالمشروع، وعدم إفشائها أو تسريبها أو إتاحتها لأي طرف ثالث بأي وسيلة كانت.</li>
|
||||
<li>يسري التزام السرية أثناء فترة العقد و<strong>لمدة سنتين (2) ميلاديتين</strong> بعد انتهائه أو فسخه لأي سبب كان.</li>
|
||||
<li>يُستثنى من حكم السرية: المعلومات التي تصبح متاحة للعموم بشكل مشروع دون خطأ من الطرف المُفشي، أو المعلومات المطلوبة بموجب أمر قضائي أو تنظيمي واجب النفاذ.</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="font-sans font-bold text-slate-950 text-[13px] mb-0.5">المادة العاشرة: عدم المنافسة — المشروطة بنشاط الشركة</h4>
|
||||
<ol class="list-decimal list-inside space-y-1">
|
||||
<li>يتعهد جميع الشركاء — طوال فترة سريان هذا العقد وما دام المشروع نشطاً وفعالاً تشغيلياً وتجارياً — بعدم القيام بأي مما يلي:
|
||||
<ul class="list-disc list-inside pr-3 mt-1 space-y-0.5">
|
||||
<li>تأسيس أو المشاركة أو الاستثمار في أي شركة أو تطبيق أو منصة تقدم خدمات النقل الذكي أو توصيل الركاب داخل جمهورية مصر العربية.</li>
|
||||
<li>تقديم خدمات استشارية تقنية أو تجارية لأي منافس مباشر لتطبيق "Siro" في السوق المصرية.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><strong>يُشترط لسريان بند عدم المنافسة</strong> أن يكون مشروع تطبيق "Siro" في مصر <strong>نشطاً ومستمراً في تقديم خدماته</strong> فعلياً وبشكل دوري يمكن إثباته.</li>
|
||||
<li>في حال توقّف المشروع عن العمل التشغيلي في مصر لمدة تتجاوز <strong>تسعين (90) يوماً متتالياً</strong> — لأي سبب كان باستثناء القوة القاهرة — يُعتبر بند عدم المنافسة **ملغى ولاغياً تلقائياً** بحق جميع الأطراف، ويحق لأي شريك ممارسة أي نشاط تجاري مشابه بحرية تامة ودون قيد أو شرط.</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="font-sans font-bold text-slate-950 text-[13px] mb-0.5">المادة الحادية عشرة: مدة العقد وتجديده</h4>
|
||||
<ol class="list-decimal list-inside space-y-1">
|
||||
<li>يسري هذا العقد اعتباراً من تاريخ توقيعه ويمتد لمدة **سنتين (2) ميلاديتين** قابلة للتجديد لفترات مماثلة بموافقة الأطراف.</li>
|
||||
<li>يُجدَّد العقد تلقائياً لفترات مماثلة ما لم يُخطر أحد الأطراف الآخرين خطياً برغبته في عدم التجديد قبل **تسعين (90) يوماً** من تاريخ انتهاء المدة الساري.</li>
|
||||
<li>في حال عدم التجديد, تُصفّى الحقوق والالتزامات المالية القائمة بين الأطراف وفق أحكام هذا العقد.</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="font-sans font-bold text-slate-950 text-[13px] mb-0.5">المادة الثانية عشرة: الانسحاب والتخارج</h4>
|
||||
<ol class="list-decimal list-inside space-y-1">
|
||||
<li>يحق للطرف الثاني (الشركاء المستثمرون) الانسحاب من هذه الشراكة بموجب إشعار خطي مسبق بمدة لا تقل عن **مائة وعشرين (120) يوماً**.</li>
|
||||
<li><strong>في حال رغبة الطرف الثاني في الانسحاب:</strong>
|
||||
<ul class="list-disc list-inside pr-3 mt-1 space-y-0.5">
|
||||
<li class="font-semibold text-slate-950">
|
||||
يحق له المطالبة بالجزء غير المسترد (المتبقي والغير مصروف محاسبياً) من رأس ماله الاستثماري الفعلي فقط من العوائد التشغيلية المتراكمة، دون أن يحق له بأي حال من الأحوال المطالبة أو استرجاع أي مبالغ تم صرفها كرواتب، أو نفقات تشغيلية، أو إعلانية، أو أجور للمنصة، وذلك وفق خطة سداد مجدولة يُتّفق عليها بين الأطراف لا تتجاوز **اثني عشر (12) شهراً** من تاريخ الانسحاب الفعلي.
|
||||
</li>
|
||||
<li>تنقضي حصته في الأرباح المستقبلية اعتباراً من تاريخ نفاذ الانسحاب.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="font-bold bg-slate-50 p-2.5 rounded border-r-3 border-slate-400 leading-relaxed">
|
||||
<strong>ثالثاً: ضمان الاستمرارية والالتزام التشغيلي للطرف الأول وحالات العجز القاهر:</strong> نظراً لأن الجانب التشغيلي والتقني يمثّل عماد وجوهر هذا العقد، يلتزم الطرف الأول بالالتزام التام بتقديم خدماته التشغيلية والبرمجية طوال مدة سريان هذا العقد ولا يملك أحد حق الانسحاب الفردي الاختياري الذي يعطل المنصة. وفي حال طرأ ظرف طبي أو صحي أو عجز قاهر كلي يثبت رسمياً يمنع أحد المؤسسين من الاستمرار، يلتزم الطرف المتأثر بضمان نقل سلس وفوري وخالٍ من العيوب لكافة مهامه الفنية والتشغيلية ورموز لوحات التحكم وقواعد البيانات إلى الطرف الآخر لضمان بقاء التطبيق فعالاً ومحمياً، وتتم تسوية حقوقه ودياً دون المساس بكيان وتدفق المشروع واستثمار الطرف الثاني.
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="font-sans font-bold text-slate-950 text-[13px] mb-0.5">المادة الثالثة عشرة: الضمانات والمسؤولية وعقد بذل العناية</h4>
|
||||
<ol class="list-decimal list-inside space-y-1">
|
||||
<li>يُقرّ الطرف الأول بأن التطبيق خالٍ من أي رهن أو حجز أو حق للغير يمنع تشغيله واستثماره تجارياً وفق هذا العقد.</li>
|
||||
<li>يُقرّ الطرف الثاني بأن مصادر التمويل المستخدمة في الاستثمار مشروعة وقانونية وغير مرتبطة بأي نشاط محظور قانوناً.</li>
|
||||
<li class="bg-amber-50/50 p-2.5 rounded border-r-3 border-legal-gold">
|
||||
<strong>بند بذل العناية وحماية المسؤولية من الخسائر (سوء الطالع):</strong> يُقر ويوافق الشركاء صراحةً على أن طبيعة التزام الطرف الأول تجاه تشغيل وتطوير التطبيق هي **التزام ببذل عناية مهنية فائقة ودؤوبة وليس التزاماً بتحقيق نتيجة أو ضمان ربح**. يلتزم الطرف الأول ببذل أقصى جهوده الفنية والتقنية والإدارية بناءً على خطة العمل والتجارب التشغيلية السابقة المدروسة، دون أي تعهد أو ضمانة صريحة أو ضمنية بتحقيق عوائد مالية أو أرباح محددة، أو تجنيب المشروع الخسائر التشغيلية.
|
||||
</li>
|
||||
<li class="bg-amber-50/50 p-2.5 rounded border-r-3 border-legal-gold">
|
||||
بناءً على البند السابق، لا يتحمل الطرف الأول أي مسؤولية شخصية أو تضامنية عن الخسائر التشغيلية أو التجارية أو المالية الطبيعية التي قد تصيب المشروع في السوق المصرية نتيجة لظروف السوق، أو المنافسة التجارية، أو تقلبات البيئة الاستثمارية والظروف العامة (سوء الطالع)، وتُغطى هذه الخسائر — إن وُجدت — من رأس مال المشروع أو عوائده التشغيلية، شريطة خلو تصرفات الطرف الأول من أي غش، أو تقصير متعمد، أو إهمال جسيم يثبت قضائياً بحق الطرف الأول.
|
||||
</li>
|
||||
<li>يلتزم الطرف الأول ببذل العناية المهنية اللازمة لحماية بيانات المستخدمين والسائقين، والامتثال لأفضل ممارسات أمن المعلومات.</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="font-sans font-bold text-slate-950 text-[13px] mb-0.5">المادة الرابعة عشرة: القوة القاهرة</h4>
|
||||
<p>لا يُعدّ أي طرف مُخِلاً بالتزاماته بموجب هذا العقد إذا حال دون تنفيذها ظرف من ظروف القوة القاهرة، وتشمل — دون حصر: الحروب، الكوارث الطبيعية، الأوبئة، القرارات الحكومية القاهرة، العقوبات الدولية، أو انقطاع شبكة الإنترنت الكامل في الدولة.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="font-sans font-bold text-slate-950 text-[13px] mb-0.5">المادة الخامسة عشرة: تعديل العقد</h4>
|
||||
<p>لا يجوز تعديل أو تغيير أي بند من بنود هذا العقد إلا بموجب **ملحق تعديلي خطّي** موقَّع من جميع الأطراف ومؤرَّخ، ويُعتبر أي تعديل شفهي أو ضمني باطلاً ولا يُعتدّ به.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="font-sans font-bold text-slate-950 text-[13px] mb-0.5">المادة السادسة عشرة: القانون الواجب التطبيق وفض النزاعات</h4>
|
||||
<ol class="list-decimal list-inside space-y-1">
|
||||
<li>يخضع هذا العقد وتفسيره وتنفيذه للقوانين التجارية المعمول بها.</li>
|
||||
<li>في حال نشوء أي خلاف أو نزاع بين الأطراف بشأن تفسير أو تنفيذ أي بند من بنود هذا العقد، يتم حله وفق الترتيب التالي:
|
||||
<ul class="list-disc list-inside pr-3 mt-1 space-y-0.5">
|
||||
<li><strong>أولاً:</strong> التسوية الودية المباشرة بين الأطراف خلال مدة لا تتجاوز <strong>ثلاثين (30) يوماً</strong> من تاريخ الإخطار بالنزاع.</li>
|
||||
<li><strong>ثانياً:</strong> اللجوء إلى <strong>التحكيم التجاري</strong> أمام محكّم أو هيئة تحكيمية مستقلة يتفق عليها الأطراف، ويكون حكم التحكيم نهائياً وملزماً.</li>
|
||||
<li><strong>ثالثاً:</strong> في حال تعذّر التحكيم، يُرفع النزاع أمام المحكمة المختصة.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="font-sans font-bold text-slate-950 text-[13px] mb-0.5">المادة السابعة عشرة: أحكام ختامية</h4>
|
||||
<ol class="list-decimal list-inside space-y-1">
|
||||
<li>يمثّل هذا العقد كامل الاتفاق بين الأطراف فيما يتعلق بموضوعه، ويُلغي أي اتفاقات شفهية أو مكتوبة سابقة بين الأطراف بشأن نفس الموضوع.</li>
|
||||
<li>في حال بطلان أي بند من بنود هذا العقد أو عدم قابليته للتنفيذ، تظل البنود الأخرى صحيحة ونافذة ومُلزِمة.</li>
|
||||
<li>حُرّر هذا العقد من نسخ أصلية متطابقة بيد كل طرف نسخة للعمل بموجبها عند اللزوم.</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Formal Signatures Page with styling -->
|
||||
<div class="mt-8 space-y-6">
|
||||
<h3 class="font-sans font-extrabold text-slate-950 text-[14px] border-b border-slate-800 pb-1.5">توقيعات أطراف العقد والشهود</h3>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full border-collapse border border-slate-800 text-center text-xs font-sans">
|
||||
<thead>
|
||||
<tr class="table-header-print bg-slate-50 text-slate-900 font-bold border-b border-slate-800">
|
||||
<th class="border border-slate-800 p-2">الصفة التعاقدية</th>
|
||||
<th class="border border-slate-800 p-2 text-right pr-4">الاسم الكامل</th>
|
||||
<th class="border border-slate-800 p-2 w-1/4">التوقيع</th>
|
||||
<th class="border border-slate-800 p-2 w-1/5">التاريخ</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="doc-signatures-table-body">
|
||||
<!-- Dynamic Signatures Rows -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Witnesses Section -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 pt-2 text-xs font-sans">
|
||||
<div class="border border-slate-300 p-3 rounded-lg space-y-1.5">
|
||||
<span class="font-bold text-slate-900">شاهد أول (اختياري):</span>
|
||||
<div class="text-slate-500 text-[11px]">الاسم: _____________________________________</div>
|
||||
<div class="text-slate-500 text-[11px]">التوقيع: ___________________________________</div>
|
||||
</div>
|
||||
<div class="border border-slate-300 p-3 rounded-lg space-y-1.5">
|
||||
<span class="font-bold text-slate-900">شاهد ثانٍ (اختياري):</span>
|
||||
<div class="text-slate-500 text-[11px]">الاسم: _____________________________________</div>
|
||||
<div class="text-slate-500 text-[11px]">التوقيع: ___________________________________</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dynamic Appendix Sections -->
|
||||
<div id="doc-appendices-container" class="space-y-6">
|
||||
<!-- Dynamic Partner Passports -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Script handling dynamic actions and lists -->
|
||||
<script>
|
||||
// Configuration
|
||||
const country = "مصر";
|
||||
|
||||
let founders = [
|
||||
{ name: '', nationality: 'أردني', id: '', share: 0 }
|
||||
];
|
||||
|
||||
let partners = [
|
||||
{ name: '', nationality: 'أردني', id: '', share: 0, passportDataUrl: '' }
|
||||
];
|
||||
|
||||
// Init UI inputs on DOM load
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
renderSidebar();
|
||||
syncContract();
|
||||
});
|
||||
|
||||
function renderSidebar() {
|
||||
// Render Founders in Sidebar
|
||||
const foundersContainer = document.getElementById('founders-container');
|
||||
foundersContainer.innerHTML = '';
|
||||
|
||||
founders.forEach((founder, index) => {
|
||||
const div = document.createElement('div');
|
||||
div.className = "bg-white p-3 rounded border border-slate-200 space-y-2 relative shadow-sm";
|
||||
div.innerHTML = `
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-[10px] font-bold text-slate-400">مؤسس #${index + 1}</span>
|
||||
${founders.length > 1 ? `
|
||||
<button onclick="removeFounder(${index})" class="text-[10px] text-red-500 hover:text-red-700 font-bold">
|
||||
حذف
|
||||
</button>
|
||||
` : ''}
|
||||
</div>
|
||||
<div class="space-y-1.5">
|
||||
<input type="text" placeholder="الاسم الكامل" value="${founder.name}" oninput="updateFounderField(${index}, 'name', this.value)" class="w-full text-xs px-2 py-1 bg-white border border-slate-200 rounded">
|
||||
<div class="grid grid-cols-2 gap-1.5">
|
||||
<input type="text" placeholder="الجنسية (مثال: أردني)" value="${founder.nationality}" oninput="updateFounderField(${index}, 'nationality', this.value)" class="w-full text-xs px-2 py-1 bg-white border border-slate-200 rounded">
|
||||
<input type="number" placeholder="الأرباح %" value="${founder.share || ''}" oninput="updateFounderField(${index}, 'share', this.value)" class="w-full text-xs px-2 py-1 bg-white border border-slate-200 rounded">
|
||||
</div>
|
||||
<input type="text" placeholder="الرقم الوطني وجواز السفر" value="${founder.id}" oninput="updateFounderField(${index}, 'id', this.value)" class="w-full text-xs px-2 py-1 bg-white border border-slate-200 rounded">
|
||||
</div>
|
||||
`;
|
||||
foundersContainer.appendChild(div);
|
||||
});
|
||||
|
||||
// Render Partners in Sidebar
|
||||
const partnersContainer = document.getElementById('partners-container');
|
||||
partnersContainer.innerHTML = '';
|
||||
|
||||
partners.forEach((partner, index) => {
|
||||
const div = document.createElement('div');
|
||||
div.className = "bg-white p-3 rounded border border-slate-200 space-y-2 relative shadow-sm";
|
||||
div.innerHTML = `
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-[10px] font-bold text-slate-400">شريك مستثمر #${index + 1}</span>
|
||||
${partners.length > 1 ? `
|
||||
<button onclick="removePartner(${index})" class="text-[10px] text-red-500 hover:text-red-700 font-bold">
|
||||
حذف
|
||||
</button>
|
||||
` : ''}
|
||||
</div>
|
||||
<div class="space-y-1.5">
|
||||
<input type="text" placeholder="الاسم الكامل" value="${partner.name}" oninput="updatePartnerField(${index}, 'name', this.value)" class="w-full text-xs px-2 py-1 bg-white border border-slate-200 rounded">
|
||||
<div class="grid grid-cols-2 gap-1.5">
|
||||
<input type="text" placeholder="الجنسية (مثال: أردني)" value="${partner.nationality}" oninput="updatePartnerField(${index}, 'nationality', this.value)" class="w-full text-xs px-2 py-1 bg-white border border-slate-200 rounded">
|
||||
<input type="number" placeholder="الأرباح %" value="${partner.share || ''}" oninput="updatePartnerField(${index}, 'share', this.value)" class="w-full text-xs px-2 py-1 bg-white border border-slate-200 rounded">
|
||||
</div>
|
||||
<input type="text" placeholder="الرقم الوطني وجواز السفر" value="${partner.id}" oninput="updatePartnerField(${index}, 'id', this.value)" class="w-full text-xs px-2 py-1 bg-white border border-slate-200 rounded">
|
||||
<div class="flex flex-col">
|
||||
<label class="text-[9px] text-slate-400 mb-0.5">تحميل صورة جواز السفر</label>
|
||||
<input type="file" accept="image/*" onchange="uploadPartnerPassport(${index}, this)" class="w-full text-[10px] bg-slate-50 border border-slate-200 rounded p-0.5">
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
partnersContainer.appendChild(div);
|
||||
});
|
||||
|
||||
// Update add buttons state
|
||||
document.getElementById('btn-add-founder').style.display = founders.length >= 3 ? 'none' : 'block';
|
||||
document.getElementById('btn-add-partner').style.display = partners.length >= 3 ? 'none' : 'block';
|
||||
}
|
||||
|
||||
// Founders state management
|
||||
function addFounder() {
|
||||
if (founders.length < 3) {
|
||||
founders.push({ name: '', nationality: 'أردني', id: '', share: 0 });
|
||||
renderSidebar();
|
||||
syncContract();
|
||||
}
|
||||
}
|
||||
function removeFounder(index) {
|
||||
founders.splice(index, 1);
|
||||
renderSidebar();
|
||||
syncContract();
|
||||
}
|
||||
function updateFounderField(index, field, value) {
|
||||
founders[index][field] = field === 'share' ? (parseFloat(value) || 0) : value;
|
||||
syncContract();
|
||||
}
|
||||
|
||||
// Partners state management
|
||||
function addPartner() {
|
||||
if (partners.length < 3) {
|
||||
partners.push({ name: '', nationality: 'أردني', id: '', share: 0, passportDataUrl: '' });
|
||||
renderSidebar();
|
||||
syncContract();
|
||||
}
|
||||
}
|
||||
function removePartner(index) {
|
||||
partners.splice(index, 1);
|
||||
renderSidebar();
|
||||
syncContract();
|
||||
}
|
||||
function updatePartnerField(index, field, value) {
|
||||
partners[index][field] = field === 'share' ? (parseFloat(value) || 0) : value;
|
||||
syncContract();
|
||||
}
|
||||
function uploadPartnerPassport(index, fileInput) {
|
||||
const file = fileInput.files[0];
|
||||
if (file) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = function(evt) {
|
||||
partners[index].passportDataUrl = evt.target.result;
|
||||
syncContract();
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
} else {
|
||||
partners[index].passportDataUrl = '';
|
||||
syncContract();
|
||||
}
|
||||
}
|
||||
|
||||
// Global Sync logic
|
||||
function syncContract() {
|
||||
// 1. Sync Date and Capital
|
||||
const inputDateVal = document.getElementById('input-date').value || '....................';
|
||||
const inputCapitalVal = parseFloat(document.getElementById('input-capital').value) || 0;
|
||||
const inputCapitalWordsVal = document.getElementById('input-capital-words').value || '....................';
|
||||
const inputCurrencyVal = document.getElementById('input-currency').value || 'USD';
|
||||
|
||||
document.getElementById('sync-contract-date').textContent = inputDateVal;
|
||||
document.getElementById('sync-text-date').textContent = inputDateVal;
|
||||
|
||||
document.querySelectorAll('.sync-capital-words-span').forEach(el => el.textContent = inputCapitalWordsVal);
|
||||
document.querySelectorAll('.sync-capital-number-span').forEach(el => el.textContent = inputCapitalVal.toLocaleString());
|
||||
document.querySelectorAll('.sync-currency-span').forEach(el => el.textContent = inputCurrencyVal);
|
||||
|
||||
// 2. Render Founders list in document
|
||||
const docFoundersList = document.getElementById('doc-founders-list');
|
||||
docFoundersList.innerHTML = '';
|
||||
founders.forEach((founder, idx) => {
|
||||
const nameStr = founder.name ? `السيد/ <strong>${founder.name}</strong>` : 'السيد/ <strong>.......................................................</strong>';
|
||||
const natStr = founder.nationality ? `${founder.nationality} الجنسية` : '.................... الجنسية';
|
||||
const idStr = founder.id ? `الرقم الوطني/جواز السفر <span class="highlight-field">${founder.id}</span>` : 'الرقم الوطني/جواز السفر <span class="highlight-field">.......................................................</span>';
|
||||
|
||||
const p = document.createElement('p');
|
||||
p.innerHTML = `${idx + 1}. ${nameStr}، ${natStr}، يحمل ${idStr}، ويُشار إليه بـ <strong>"الشريك المؤسس ${getArabicOrdinal(idx + 1)}"</strong>.`;
|
||||
docFoundersList.appendChild(p);
|
||||
});
|
||||
|
||||
// 3. Render Partners list in document
|
||||
const docPartnersList = document.getElementById('doc-partners-list');
|
||||
docPartnersList.innerHTML = '';
|
||||
partners.forEach((partner, idx) => {
|
||||
const nameStr = partner.name ? `السيد/ <strong>${partner.name}</strong>` : 'السيد/ <strong>.......................................................</strong>';
|
||||
const natStr = partner.nationality ? `${partner.nationality} الجنسية` : '.................... الجنسية';
|
||||
const idStr = partner.id ? `الرقم الوطني / رقم الهوية <span class="highlight-field">${partner.id}</span>` : 'الرقم الوطني / رقم الهوية <span class="highlight-field">.......................................................</span>';
|
||||
|
||||
const p = document.createElement('p');
|
||||
p.innerHTML = `${idx + 1}. ${nameStr}، ${natStr}، يحمل ${idStr}، ويُشار إليه بـ <strong>"الشريك المستثمر ${getArabicOrdinal(idx + 1)}"</strong> أو <strong>"الطرف الثاني"</strong>.`;
|
||||
docPartnersList.appendChild(p);
|
||||
});
|
||||
|
||||
// 4. Render share tables and check sum
|
||||
const tableBody = document.getElementById('doc-shares-table-body');
|
||||
tableBody.innerHTML = '';
|
||||
let totalShare = 0;
|
||||
|
||||
founders.forEach((founder, idx) => {
|
||||
totalShare += founder.share;
|
||||
const tr = document.createElement('tr');
|
||||
tr.className = "border-b border-slate-800";
|
||||
tr.innerHTML = `
|
||||
<td class="border border-slate-800 p-2 text-right pr-4 font-bold">${founder.name || '.......................................................'}</td>
|
||||
<td class="border border-slate-800 p-2 text-slate-600">الشريك المؤسس ${getArabicOrdinal(idx + 1)}</td>
|
||||
<td class="border border-slate-800 p-2 font-bold"><span class="text-slate-950 text-sm">${founder.share}</span>%</td>
|
||||
`;
|
||||
tableBody.appendChild(tr);
|
||||
});
|
||||
|
||||
partners.forEach((partner, idx) => {
|
||||
totalShare += partner.share;
|
||||
const tr = document.createElement('tr');
|
||||
tr.className = "border-b border-slate-800";
|
||||
tr.innerHTML = `
|
||||
<td class="border border-slate-800 p-2 text-right pr-4 font-bold">${partner.name || '.......................................................'}</td>
|
||||
<td class="border border-slate-800 p-2 text-slate-600">الشريك المستثمر ${getArabicOrdinal(idx + 1)} (الطرف الثاني)</td>
|
||||
<td class="border border-slate-800 p-2 font-bold"><span class="text-slate-950 text-sm">${partner.share}</span>%</td>
|
||||
`;
|
||||
tableBody.appendChild(tr);
|
||||
});
|
||||
|
||||
// 5. Update validation message
|
||||
document.getElementById('share-sum').textContent = totalShare;
|
||||
const indicator = document.getElementById('share-indicator');
|
||||
const validationMsg = document.getElementById('share-validation-msg');
|
||||
if (totalShare === 100) {
|
||||
indicator.className = "text-[10px] font-bold px-2 py-0.5 rounded-full bg-emerald-100 text-emerald-700";
|
||||
validationMsg.className = "text-[11px] p-2 rounded bg-emerald-50 text-emerald-800 border border-emerald-200 font-semibold leading-relaxed";
|
||||
validationMsg.innerHTML = "✅ مجموع النسب متوازن (100%). المستند آمن وجاهز تماماً للطباعة كـ PDF.";
|
||||
} else {
|
||||
indicator.className = "text-[10px] font-bold px-2 py-0.5 rounded-full bg-red-100 text-red-600";
|
||||
validationMsg.className = "text-[11px] p-2 rounded bg-red-50 text-red-700 border border-red-200 font-medium leading-relaxed";
|
||||
validationMsg.innerHTML = `⚠️ مجموع الحصص الحالي هو <b>${totalShare}%</b>. يرجى تعديل الأرقام ليكون الإجمالي 100% لمطابقة شروط العقد الأساسية.`;
|
||||
}
|
||||
|
||||
// 6. Dynamic IP Ownership Clause (First founder solely owns IP, list exclusions)
|
||||
const firstFounderName = founders[0] && founders[0].name ? founders[0].name : '.......................................................';
|
||||
let exclusions = [];
|
||||
founders.forEach((f, idx) => {
|
||||
if (idx > 0 && f.name) exclusions.push(`الشريك المؤسس ${f.name}`);
|
||||
});
|
||||
partners.forEach(p => {
|
||||
if (p.name) exclusions.push(`المستثمر ${p.name}`);
|
||||
});
|
||||
const exclusionsStr = exclusions.length > 0 ? ` (بما فيهم ${exclusions.join(' و ')})` : '';
|
||||
|
||||
const ipClause = document.getElementById('ip-ownership-clause');
|
||||
ipClause.innerHTML = `
|
||||
يُقرّ ويتفق جميع الأطراف صراحةً على أن الكود المصدري (Source Code) والبرمجي لتطبيق "Siro" بجميع إصداراته (الراكب، السائق، لوحة الإدارة)، وكافة التصاميم والبنية الهندسية وقواعد البيانات والخوارزميات والعلامة التجارية والاسم التجاري والشعار، هي ملكية خاصة وحصرية ومطلقة وأبدية وتؤول بالكامل وتحديداً للسيد <span class="text-slate-950 font-extrabold border-b-2 border-legal-gold/70 pb-0.5">${firstFounderName} بمفرده وبشكل أبدّي</span> دون غيره، ولا يحق لأي طرف آخر${exclusionsStr} منازعته عليها أو الادعاء بأي حقوق عليها تحت أي ظرف كان.
|
||||
`;
|
||||
|
||||
// 7. Render Signatures
|
||||
const sigTableBody = document.getElementById('doc-signatures-table-body');
|
||||
sigTableBody.innerHTML = '';
|
||||
|
||||
founders.forEach((founder, idx) => {
|
||||
const tr = document.createElement('tr');
|
||||
tr.className = "border-b border-slate-800";
|
||||
tr.innerHTML = `
|
||||
<td class="border border-slate-800 p-2.5 text-slate-700 font-medium">الشريك المؤسس ${getArabicOrdinal(idx + 1)}</td>
|
||||
<td class="border border-slate-800 p-2.5 text-right pr-4 font-bold">${founder.name || '.......................................................'}</td>
|
||||
<td class="border border-slate-800 p-2.5 text-slate-400">.......................</td>
|
||||
<td class="border border-slate-800 p-2.5 font-bold sync-text-table-date">${inputDateVal}</td>
|
||||
`;
|
||||
sigTableBody.appendChild(tr);
|
||||
});
|
||||
|
||||
partners.forEach((partner, idx) => {
|
||||
const tr = document.createElement('tr');
|
||||
tr.className = "border-b border-slate-800";
|
||||
tr.innerHTML = `
|
||||
<td class="border border-slate-800 p-2.5 text-slate-700 font-medium">الشريك المستثمر ${getArabicOrdinal(idx + 1)}</td>
|
||||
<td class="border border-slate-800 p-2.5 text-right pr-4 font-bold">${partner.name || '.......................................................'}</td>
|
||||
<td class="border border-slate-800 p-2.5 text-slate-400">.......................</td>
|
||||
<td class="border border-slate-800 p-2.5 font-bold sync-text-table-date">${inputDateVal}</td>
|
||||
`;
|
||||
sigTableBody.appendChild(tr);
|
||||
});
|
||||
|
||||
// 8. Render Appendices for Passports
|
||||
const appendicesContainer = document.getElementById('doc-appendices-container');
|
||||
appendicesContainer.innerHTML = '';
|
||||
|
||||
partners.forEach((partner, idx) => {
|
||||
const pName = partner.name || `الشريك المستثمر ${getArabicOrdinal(idx + 1)}`;
|
||||
const div = document.createElement('div');
|
||||
div.className = "page-break no-print my-6 border-t-2 border-dashed border-slate-300 pt-6";
|
||||
div.innerHTML = `
|
||||
<div class="space-y-4">
|
||||
<h3 class="font-sans font-extrabold text-slate-950 text-[14px] border-b border-slate-800 pb-1.5">المرفقات: صورة جواز سفر الشريك المستثمر (${pName})</h3>
|
||||
<div class="flex flex-col items-center justify-center p-6 border border-dashed border-slate-300 rounded-lg bg-slate-50/50">
|
||||
${partner.passportDataUrl ? `
|
||||
<img class="max-h-[140mm] max-w-full rounded shadow-sm border border-slate-200" src="${partner.passportDataUrl}" alt="جواز سفر ${pName}">
|
||||
` : `
|
||||
<div class="text-center py-10 text-slate-400 text-xs font-sans">
|
||||
<svg class="w-12 h-12 mx-auto mb-2 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
</svg>
|
||||
<span>لم يتم إرفاق صورة جواز السفر للشريك (${pName}) بعد. استخدم خيار التحميل في لوحة التحكم لإرفاق الصورة.</span>
|
||||
</div>
|
||||
`}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
appendicesContainer.appendChild(div);
|
||||
});
|
||||
}
|
||||
|
||||
// Helper to get Arabic Ordinals
|
||||
function getArabicOrdinal(num) {
|
||||
const ordinals = ["", "الأول", "الثاني", "الثالث", "الرابع", "الخامس"];
|
||||
return ordinals[num] || `${num}`;
|
||||
}
|
||||
|
||||
// Sync inputs from date & capital changes
|
||||
document.getElementById('input-date').addEventListener('input', syncContract);
|
||||
document.getElementById('input-capital').addEventListener('input', (e) => {
|
||||
const num = parseInt(e.target.value) || 0;
|
||||
// Auto mapping simple numbers to words
|
||||
const mapper = {
|
||||
100000: "مائة ألف",
|
||||
150000: "مائة وخمسون ألف",
|
||||
180000: "مائة وثمانون ألف",
|
||||
200000: "مائتا ألف",
|
||||
250000: "مائتان وخمسون ألف",
|
||||
300000: "ثلاثمائة ألف",
|
||||
400000: "أربعمائة ألف",
|
||||
500000: "خمسمائة ألف"
|
||||
};
|
||||
const currencyLabel = document.getElementById('input-currency').value === 'USD' ? 'دولار أمريكي' : '';
|
||||
if (mapper[num]) {
|
||||
document.getElementById('input-capital-words').value = mapper[num] + (currencyLabel ? ' ' + currencyLabel : '');
|
||||
}
|
||||
syncContract();
|
||||
});
|
||||
document.getElementById('input-capital-words').addEventListener('input', syncContract);
|
||||
document.getElementById('input-currency').addEventListener('input', syncContract);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,534 @@
|
||||
<meta charset="utf-8">
|
||||
<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;
|
||||
}
|
||||
}
|
||||
:root[data-theme="dark"]{
|
||||
--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;
|
||||
}
|
||||
:root[data-theme="light"]{
|
||||
--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;
|
||||
}
|
||||
|
||||
html{ scroll-behavior:smooth; }
|
||||
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
|
||||
|
||||
.page{
|
||||
background:var(--bg); color:var(--ink);
|
||||
font-family:var(--sans); font-size:16px; line-height:1.85;
|
||||
min-height:100%;
|
||||
}
|
||||
.page *{ box-sizing:border-box; }
|
||||
.wrap{ max-width:840px; margin:0 auto; padding:0 22px; }
|
||||
.page h1,.page h2,.page h3,.page h4{ margin:0; color:var(--ink); text-wrap:balance; line-height:1.35; }
|
||||
.page p{ margin:0; }
|
||||
.page a{ color:var(--brand); }
|
||||
.page a:focus-visible, .page summary:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:4px; }
|
||||
code{
|
||||
direction:ltr; unicode-bidi:isolate; font-family:var(--mono); font-size:.82em;
|
||||
background:var(--surface2); border:1px solid var(--line); border-radius:5px; padding:.08em .4em;
|
||||
}
|
||||
.num{ font-variant-numeric:tabular-nums; }
|
||||
|
||||
/* ===== Hero ===== */
|
||||
.hero{ padding:64px 0 36px; border-bottom:1px solid var(--line); }
|
||||
.hero .kicker{
|
||||
display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.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:.8rem; color:var(--faint); }
|
||||
|
||||
.stats{ display:grid; grid-template-columns:repeat(6,1fr); gap:0; margin-top:30px;
|
||||
border:1px solid var(--line); border-radius:14px; background:var(--surface); overflow:hidden; }
|
||||
.stat{ padding:14px 10px; text-align:center; border-inline-start:1px solid var(--line); }
|
||||
.stat:first-child{ border-inline-start:none; }
|
||||
.stat b{ display:block; font-size:1.35rem; font-weight:800; color:var(--brand-ink); font-variant-numeric:tabular-nums; }
|
||||
.stat span{ font-size:.72rem; color:var(--muted); line-height:1.4; display:block; margin-top:2px; }
|
||||
@media (max-width:700px){
|
||||
.stats{ grid-template-columns:repeat(3,1fr); }
|
||||
.stat:nth-child(4){ border-inline-start:none; }
|
||||
.stat:nth-child(-n+3){ border-bottom:1px solid var(--line); }
|
||||
}
|
||||
|
||||
/* ===== Sticky TOC ===== */
|
||||
.tocbar{
|
||||
position:sticky; top:0; z-index:10; background:var(--bg);
|
||||
border-bottom:1px solid var(--line); padding:10px 0;
|
||||
}
|
||||
.tocbar .row{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:2px; }
|
||||
.tocbar .row::-webkit-scrollbar{ display:none; }
|
||||
.tocbar a{
|
||||
flex:none; text-decoration:none; font-size:.8rem; font-weight:700; color:var(--muted);
|
||||
border:1px solid var(--line); background:var(--surface); border-radius:99px; padding:5px 13px;
|
||||
white-space:nowrap;
|
||||
}
|
||||
.tocbar a b{ color:var(--brand); font-weight:800; margin-inline-end:4px; font-variant-numeric:tabular-nums; }
|
||||
.tocbar a:hover{ border-color:var(--brand); color:var(--ink); }
|
||||
|
||||
/* ===== Sections ===== */
|
||||
section{ padding:46px 0 8px; }
|
||||
.sec-head{ margin-bottom:20px; }
|
||||
.sec-head .eyebrow{
|
||||
font-size:.75rem; font-weight:800; color:var(--brand); letter-spacing:.08em;
|
||||
font-variant-numeric:tabular-nums;
|
||||
}
|
||||
.sec-head h2{ font-size:1.45rem; font-weight:800; margin-top:4px; }
|
||||
.sec-head .thesis{ margin-top:8px; color:var(--muted); font-size:.95rem; max-width:66ch; }
|
||||
|
||||
.subhead{
|
||||
font-size:.82rem; font-weight:800; color:var(--faint); letter-spacing:.03em;
|
||||
margin:26px 0 10px; display:flex; align-items:center; gap:10px;
|
||||
}
|
||||
.subhead::after{ content:""; flex:1; height:1px; background:var(--line); }
|
||||
|
||||
/* compact feature rows */
|
||||
.rows{ border:1px solid var(--line); border-radius:14px; background:var(--surface); overflow:hidden; }
|
||||
.row-item{ padding:13px 18px; border-top:1px solid var(--line); }
|
||||
.row-item:first-child{ border-top:none; }
|
||||
.row-item h4{ font-size:.95rem; font-weight:800; display:inline; }
|
||||
.row-item p{ display:inline; color:var(--muted); font-size:.9rem; }
|
||||
.row-item h4::after{ content:" — "; color:var(--faint); font-weight:400; }
|
||||
.row-item .why{ display:block; margin-top:3px; font-size:.83rem; color:var(--brand-ink); }
|
||||
|
||||
/* alerts */
|
||||
.alert{ border-radius:12px; padding:14px 18px; margin:16px 0; font-size:.9rem; border:1px solid; }
|
||||
.alert p{ color:var(--ink); }
|
||||
.alert .tag{ display:inline-block; font-size:.72rem; font-weight:800; border-radius:6px; padding:1px 9px; margin-bottom:6px; }
|
||||
.alert.crit{ background:var(--red-soft); border-color:color-mix(in srgb, var(--red) 35%, transparent); }
|
||||
.alert.crit .tag{ background:var(--red); color:var(--bg); }
|
||||
.alert.warn{ background:var(--amber-soft); border-color:color-mix(in srgb, var(--amber) 35%, transparent); }
|
||||
.alert.warn .tag{ background:var(--amber); color:var(--bg); }
|
||||
.alert.good{ background:var(--good-soft); border-color:color-mix(in srgb, var(--good) 35%, transparent); }
|
||||
.alert.good .tag{ background:var(--good); color:var(--bg); }
|
||||
|
||||
/* ===== Ride flow timeline ===== */
|
||||
.flow{ position:relative; padding-inline-start:26px; margin-top:8px; }
|
||||
.flow::before{ content:""; position:absolute; inset-inline-start:8px; top:8px; bottom:8px; width:2px;
|
||||
background:linear-gradient(var(--brand), var(--line2)); border-radius:2px; }
|
||||
.step{ position:relative; padding:0 0 26px; }
|
||||
.step::before{
|
||||
content:""; position:absolute; inset-inline-start:-24px; top:7px; width:12px; height:12px;
|
||||
border-radius:50%; background:var(--bg); border:3px solid var(--brand);
|
||||
}
|
||||
.step h4{ font-size:1rem; font-weight:800; }
|
||||
.step h4 .t{ font-size:.72rem; font-weight:700; color:var(--brand-ink); background:var(--brand-soft);
|
||||
border-radius:99px; padding:2px 10px; margin-inline-start:8px; vertical-align:2px; white-space:nowrap; }
|
||||
.step p{ color:var(--muted); font-size:.9rem; margin-top:4px; max-width:62ch; }
|
||||
|
||||
/* ===== two-col mini grid ===== */
|
||||
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
|
||||
@media (max-width:640px){ .duo{ grid-template-columns:1fr; } }
|
||||
.panel{ border:1px solid var(--line); border-radius:14px; background:var(--surface); padding:16px 18px; }
|
||||
.panel h4{ font-size:.95rem; font-weight:800; margin-bottom:6px; }
|
||||
.panel p, .panel li{ color:var(--muted); font-size:.88rem; }
|
||||
.panel ul{ margin:6px 0 0; padding-inline-start:18px; display:flex; flex-direction:column; gap:5px; }
|
||||
.panel.can h4{ color:var(--good); }
|
||||
.panel.cannot h4{ color:var(--red); }
|
||||
|
||||
/* ===== tutorial modules ===== */
|
||||
.mods{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
|
||||
@media (max-width:640px){ .mods{ grid-template-columns:1fr; } }
|
||||
.mod{ border:1px solid var(--line); border-radius:14px; background:var(--surface); padding:16px 18px; position:relative; }
|
||||
.mod .shots{ position:absolute; top:14px; inset-inline-end:16px; font-size:.7rem; font-weight:800;
|
||||
color:var(--brand-ink); background:var(--brand-soft); border-radius:99px; padding:2px 10px; font-variant-numeric:tabular-nums; }
|
||||
.mod h4{ font-size:.95rem; font-weight:800; padding-inline-end:70px; }
|
||||
.mod ol{ margin:8px 0 0; padding-inline-start:18px; color:var(--muted); font-size:.85rem; display:flex; flex-direction:column; gap:4px; }
|
||||
.mod .note{ margin-top:8px; font-size:.8rem; color:var(--brand-ink); }
|
||||
|
||||
/* transit actors */
|
||||
.actors{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:14px 0 4px; }
|
||||
@media (max-width:760px){ .actors{ grid-template-columns:1fr 1fr; } }
|
||||
.actor{ border:1px solid var(--line); border-radius:12px; background:var(--surface); padding:12px 14px; text-align:center; }
|
||||
.actor .ic{ font-size:1.4rem; }
|
||||
.actor b{ display:block; font-size:.85rem; margin-top:4px; }
|
||||
.actor span{ font-size:.74rem; color:var(--muted); display:block; line-height:1.5; }
|
||||
|
||||
footer.end{ margin-top:56px; border-top:1px solid var(--line); padding:22px 0 60px;
|
||||
font-size:.8rem; color:var(--faint); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }
|
||||
</style>
|
||||
|
||||
<div class="page" dir="rtl" lang="ar">
|
||||
|
||||
<header class="hero"><div class="wrap">
|
||||
<span class="kicker">التقرير الشامل — نسخة محدّثة تشمل مواصلاتي وسير الرحلة والتوتوريال</span>
|
||||
<h1>سيرو — الإرث الرقمي لمنظومة التنقّل المتكاملة</h1>
|
||||
<p class="lede">
|
||||
جرد كامل لكل ما بُني في منصة Siro ولماذا بُني: تطبيقات الراكب والسائق والإدارة وخدمة العملاء،
|
||||
البنية الخلفية ومحرك التسعير، الخرائط والتتبع الحي، نظام «مواصلاتي» لباصات الجامعات،
|
||||
البوتات والذكاء الاصطناعي، والمنظومة المالية — مع سير الرحلة خطوة بخطوة وخطة التوتوريال الكاملة.
|
||||
</p>
|
||||
<p class="meta">أُعدّ بفحص مباشر للكود المصدري — كل رقم ومسار ملف تمّ التحقق منه فعلياً · آخر تحديث 2026-07-14</p>
|
||||
<div class="stats">
|
||||
<div class="stat"><b>4</b><span>تطبيقات موبايل</span></div>
|
||||
<div class="stat"><b>9</b><span>فئات مركبات</span></div>
|
||||
<div class="stat"><b>3</b><span>دول تشغيل</span></div>
|
||||
<div class="stat"><b>13+</b><span>لغة مدعومة</span></div>
|
||||
<div class="stat"><b>10+</b><span>طرق دفع محلية</span></div>
|
||||
<div class="stat"><b>2</b><span>خطا أعمال: مشاوير + مواصلاتي</span></div>
|
||||
</div>
|
||||
</div></header>
|
||||
|
||||
<nav class="tocbar" aria-label="فهرس التقرير"><div class="wrap"><div class="row">
|
||||
<a href="#overview"><b>00</b>نظرة عامة</a>
|
||||
<a href="#rideflow"><b>01</b>سير الرحلة</a>
|
||||
<a href="#rider"><b>02</b>الراكب</a>
|
||||
<a href="#driver"><b>03</b>السائق</a>
|
||||
<a href="#ops"><b>04</b>الإدارة والدعم</a>
|
||||
<a href="#backend"><b>05</b>البنية والتسعير</a>
|
||||
<a href="#maps"><b>06</b>الخرائط</a>
|
||||
<a href="#transit"><b>07</b>مواصلاتي</a>
|
||||
<a href="#bots"><b>08</b>البوتات</a>
|
||||
<a href="#finance"><b>09</b>المالية والاستثمار</a>
|
||||
<a href="#legacy"><b>10</b>القيمة</a>
|
||||
<a href="#risks"><b>11</b>المخاطر</a>
|
||||
<a href="#tutorial"><b>12</b>التوتوريال</a>
|
||||
</div></div></nav>
|
||||
|
||||
<main class="wrap">
|
||||
|
||||
<!-- 00 -->
|
||||
<section id="overview">
|
||||
<div class="sec-head">
|
||||
<span class="eyebrow">00</span>
|
||||
<h2>نظرة عامة: منصة واحدة، تسعة أنظمة متكاملة</h2>
|
||||
<p class="thesis">سيرو ليست «تطبيق طلب سيارة» — هي منظومة من 4 تطبيقات Flutter، وباك اند PHP/Node ضخم، وخوادم Socket خاصة للتتبع الحي، ومحرك تسعير بالذكاء الاصطناعي، ونظام نقل جماعي للجامعات، وبنية مالية متعددة الدول — كلها مبنية داخلياً وتعمل في الأردن ومصر وسوريا.</p>
|
||||
</div>
|
||||
<div class="rows">
|
||||
<div class="row-item"><h4>🚕 أربعة تطبيقات Flutter</h4><p>الراكب (226 ملف)، السائق (275 ملف — الأكبر)، الإدارة (131)، خدمة العملاء (66) — تشترك بنفس الباك اند.</p></div>
|
||||
<div class="row-item"><h4>🗄️ باك اند PHP مقسّم بأمان مركزي</h4><p>كل وحدة (مصادقة، رحلات، تسعير، تأمين…) تمر إجبارياً عبر طبقة JWT + تشفير + تحديد معدل طلبات واحدة.</p></div>
|
||||
<div class="row-item"><h4>📍 خوادم Socket خاصة للموقع</h4><p>خادم سائق وخادم راكب منفصلان — تتبع لحظي دون الاعتماد على Google Maps، بتوفير تكلفة ضخم.</p></div>
|
||||
<div class="row-item"><h4>🤖 محرك تسعير ذكي</h4><p>بوت يقرأ أسعار المنافسين من تطبيقاتهم، محرك يفكّك معادلاتهم، وكرون جوبز تُبقي سيرو أرخص بـ 6.5% آلياً.</p></div>
|
||||
<div class="row-item"><h4>🚌 مواصلاتي</h4><p>نظام نقل جماعي للجامعات والمؤسسات (SaaS مجاني) بقاعدة بيانات معزولة ولوحة تحكم ويب مستقلة — القسم 07.</p></div>
|
||||
<div class="row-item"><h4>💳 محفظة ودفع متعدد الدول</h4><p>خدمة منفصلة (268 ملف) تربط MTN وSyriatel Cash وShamCash وCliq وPayMob وeCash.</p></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 01 RIDE FLOW -->
|
||||
<section id="rideflow">
|
||||
<div class="sec-head">
|
||||
<span class="eyebrow">01</span>
|
||||
<h2>سير الرحلة — من فتح التطبيق حتى التقييم</h2>
|
||||
<p class="thesis">الدورة الكاملة كما تعمل فعلياً في الكود: كل خطوة لها شاشة وحالة (State) وقناة تواصل حي. هذه الدورة نفسها هي أساس التوتوريال في القسم 12.</p>
|
||||
</div>
|
||||
<div class="flow">
|
||||
<div class="step"><h4>الدخول والتحقق <span class="t">أقل من دقيقة</span></h4><p>رقم الهاتف + رمز OTP (واتساب/SMS حسب الدولة) — لا بريد إلكتروني إجباري ولا بطاقة. الجلسة تُربط ببصمة الجهاز فلا يعمل الرمز المسروق على جهاز آخر.</p></div>
|
||||
<div class="step"><h4>تحديد الوجهة والسعر <span class="t">فوري</span></h4><p>بحث عن المكان، اختيار فئة من 9 فئات، والسعر يُحسب بالكامل على الخادم ويُختم برمز موقّت صالح 7 دقائق — لا يمكن التلاعب به بين شاشة العرض والتأكيد.</p></div>
|
||||
<div class="step"><h4>البحث عن كابتن <span class="t">حتى 90 ثانية</span></h4><p>مطابقة «أقرب سائق» عبر Redis الجغرافي. إذا لم يقبل أحد خلال 90 ثانية يقترح «المفاوض الذكي» رفع السعر ~5% بدل إلغاء الطلب.</p></div>
|
||||
<div class="step"><h4>قبول الكابتن والتوجه إليك <span class="t">تتبع حي</span></h4><p>بطاقة الكابتن (اسم، تقييم، سيارة، لوحة) ومسار أصفر يتحرك لحظياً عبر WebSocket، مع إشعار FCM وLive Activity على iOS.</p></div>
|
||||
<div class="step"><h4>الوصول والانتظار <span class="t">مهلة 5 دقائق</span></h4><p>إشعار «الكابتن وصل» ويبدأ عداد انتظار. الإلغاء قبل القبول مجاني دائماً؛ بعد الوصول قد تُطبَّق رسوم.</p></div>
|
||||
<div class="step"><h4>الرحلة الجارية <span class="t">مسار أزرق + SOS</span></h4><p>عداد حي، كشف انحراف عن المسار (50م)، تنبيه تجاوز سرعة 100كم/س، زر طوارئ يعمل بهزّ الهاتف، ومشاركة الرحلة مع الأهل برابط حي.</p></div>
|
||||
<div class="step"><h4>التسوية والدفع <span class="t">من الخادم</span></h4><p>السعر النهائي يُعاد حسابه من المسافة والزمن الفعليين بسقوف أمان (≤1.6× المعروض)، ثم الدفع: كاش، محفظة، PayMob، MTN، Syriatel، Cliq.</p></div>
|
||||
<div class="step"><h4>التقييم والإكرامية <span class="t">اختياري</span></h4><p>تقييم الكابتن بالنجوم مع إكرامية اختيارية، وتُحفظ الرحلة في السجل مع الفاتورة.</p></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 02 RIDER -->
|
||||
<section id="rider">
|
||||
<div class="sec-head">
|
||||
<span class="eyebrow">02</span>
|
||||
<h2>تطبيق الراكب</h2>
|
||||
<p class="thesis">واجهة المستخدم النهائي — أعمق بكثير من «اطلب وادفع»، وفيها ميزات ثقة وسلامة نادرة حتى عند منافسين أكبر.</p>
|
||||
</div>
|
||||
|
||||
<div class="subhead">الحجز والتسعير</div>
|
||||
<div class="rows">
|
||||
<div class="row-item"><h4>9 فئات ركوب</h4><p>اقتصادية (Balash/Awfar)، Comfort، كهربائية، Lady نسائية، Van عائلية، VIP/مشوار (اختيار سائق بالاسم لموعد لاحق)، توصيل، ورايح-جاي بين المدن (+23 كم).</p><span class="why">كل فئة تفتح شريحة سوق مختلفة — من الطالب حتى العائلة والراكبات.</span></div>
|
||||
<div class="row-item"><h4>شارة مقارنة أسعار</h4><p>«أنت توفّر X% مقارنة بكريم/أوبر/يلا-جو» بالاسم صراحة على شاشة الطلب.</p></div>
|
||||
<div class="row-item"><h4>المفاوض الذكي</h4><p>اقتراح آلي لرفع السعر عند عدم توفر كابتن — يقلل الطلبات الفاشلة.</p></div>
|
||||
</div>
|
||||
|
||||
<div class="subhead">الدفع والولاء</div>
|
||||
<div class="rows">
|
||||
<div class="row-item"><h4>Siro Prime</h4><p>اشتراك ~4$ شهرياً: بلا تسعير ذروة، أولوية مطابقة، شارة تزيد قبول السائقين — إيراد شهري متكرر.</p></div>
|
||||
<div class="row-item"><h4>مكافآت شحن المحفظة</h4><p>«ادفع 20 خذ 21» — يشجع الرصيد المسبق ويقلل الكاش.</p></div>
|
||||
<div class="row-item"><h4>تنبيه الرصيد السالب</h4><p>بانر دائم + قراءة صوتية عند وجود دين من رحلة كاش سابقة — تحصيل استباقي.</p></div>
|
||||
<div class="row-item"><h4>إحالة ثنائية</h4><p>دعوة أصدقاء كركاب أو سائقين عبر واتساب، والمكافأة تُفتح بعد رحلتين فعليتين.</p></div>
|
||||
</div>
|
||||
|
||||
<div class="subhead">السلامة والثقة</div>
|
||||
<div class="rows">
|
||||
<div class="row-item"><h4>زر الطوارئ SOS</h4><p>واتساب فوري لجهة طوارئ مع الموقع الحي واسم السائق واللوحة — ويتفعّل بهزّ الهاتف 5 مرات.</p></div>
|
||||
<div class="row-item"><h4>مراقبة حية لطرف ثالث</h4><p>رابط يتيح لولي الأمر متابعة الموقع والسرعة دون تثبيت التطبيق — تمايز حقيقي لشريحة الطالبات.</p></div>
|
||||
<div class="row-item"><h4>مكالمات WebRTC داخلية</h4><p>اتصال راكب↔سائق دون كشف الأرقام، ببنية ذاتية بدل Agora المدفوعة.</p></div>
|
||||
<div class="row-item"><h4>تسجيل صوتي للرحلة + تنبيه سرعة</h4><p>دليل عند النزاع، وتنبيه فوري عند تجاوز 100 كم/س.</p></div>
|
||||
<div class="row-item"><h4>حماية تقنية</h4><p>بصمة جهاز، كشف Root/Jailbreak، تثبيت SSL ضد اعتراض البيانات.</p></div>
|
||||
</div>
|
||||
|
||||
<div class="subhead">تجربة مصممة للمنطقة</div>
|
||||
<div class="rows">
|
||||
<div class="row-item"><h4>13+ لغة بثلاث لهجات عربية</h4><p>مصري/أردني/سوري بملفات منفصلة + RTL كامل — جاهزية توسع حقيقية.</p></div>
|
||||
<div class="row-item"><h4>خرائط دون اتصال + كشف نوعية الجهاز</h4><p>تحميل مسبق للبلاطات، وتخفيف الرسوميات آلياً على الأجهزة الاقتصادية.</p></div>
|
||||
<div class="row-item"><h4>قراءة صوتية TTS</h4><p>وصف الرحلات والتنبيهات صوتياً — يشمل ضعاف البصر، سوق مهمَل من المنافسين.</p></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 03 DRIVER -->
|
||||
<section id="driver">
|
||||
<div class="sec-head">
|
||||
<span class="eyebrow">03</span>
|
||||
<h2>تطبيق السائق</h2>
|
||||
<p class="thesis">أكبر تطبيق في المنظومة (275 ملف) — محرك تشغيل الأسطول: مكافحة احتيال، نظام تدرّج بخصومات عمولة فعلية، وذكاء تشغيلي يوجّه السائق للربح.</p>
|
||||
</div>
|
||||
|
||||
<div class="alert good"><span class="tag">✅ مؤكد في الكود</span>
|
||||
<p>ميزة «أرباحك أعلى بـ X مقارنة بالتطبيقات الأخرى» موجودة ومفعّلة: <code>driver_earnings_badge.dart</code> يعرض شارة خضراء على شاشة قبول الطلب مبنية على حقل <code>driver_earnings_extra</code> من الخادم.</p>
|
||||
</div>
|
||||
|
||||
<div class="rows">
|
||||
<div class="row-item"><h4>تدرّج بخصم عمولة حقيقي</h4><p>برونزي ← فضي (−1%) ← ذهبي (−2%) ← ماسي (−5% + أولوية) — ولاء بمكافأة مالية ملموسة.</p></div>
|
||||
<div class="row-item"><h4>سلسلة رحلات بلا إلغاء</h4><p>5 رحلات متتالية = عمولة 0% لبقية اليوم؛ أي إلغاء يصفّر السلسلة.</p></div>
|
||||
<div class="row-item"><h4>خارطة طلب تنبؤية</h4><p>أين سيرتفع الطلب خلال الساعة القادمة، من بيانات الرحلات التاريخية.</p></div>
|
||||
<div class="row-item"><h4>حد 12 ساعة قيادة + حظر بعد 3 إلغاءات</h4><p>راحة إجبارية 6 ساعات، وحماية موثوقية السوق من الإلغاء المتكرر.</p></div>
|
||||
<div class="row-item"><h4>تحقق مسافة قبل إنهاء الرحلة</h4><p>مقارنة إزاحة GPS الفعلية بالمتوقعة — يمنع تزوير إتمام الرحلات.</p></div>
|
||||
<div class="row-item"><h4>توثيق بالذكاء الاصطناعي</h4><p>Gemini يقرأ الهوية والرخصة، ومطابقة وجه (سيلفي↔هوية) قبل قبول التسجيل، وكشف «الرحلة الذاتية» بمقارنة بصمتي الجهازين.</p></div>
|
||||
<div class="row-item"><h4>Android Auto / CarPlay</h4><p>جسر ملاحة مخصص لشاشة السيارة — تجربة مكافئة لأوبر/كريم.</p></div>
|
||||
<div class="row-item"><h4>سحب أرباح متعدد القنوات</h4><p>PayMob، MTN، Cliq، eCash، حساب بنكي، وحتى SMS في سوريا.</p></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 04 OPS -->
|
||||
<section id="ops">
|
||||
<div class="sec-head">
|
||||
<span class="eyebrow">04</span>
|
||||
<h2>الإدارة وخدمة العملاء</h2>
|
||||
<p class="thesis">لوحة تشغيل داخلية حقيقية بطبقتين (قديمة + V2 تحليلية)، وتطبيق دعم ميداني سريع — مع فجوات تشغيلية يجب قولها بصراحة.</p>
|
||||
</div>
|
||||
<div class="rows">
|
||||
<div class="row-item"><h4>مركز عمليات حي (V2)</h4><p>رحلات نشطة، سائقون متصلون، إيراد اليوم مقابل الأمس، شكاوى — يتحدث كل دقيقتين.</p></div>
|
||||
<div class="row-item"><h4>محرر تسعير «كازان»</h4><p>عمولة كل دولة، سعر الكيلومتر لكل فئة، وتسعير الدقيقة حسب الوقت — أهم رافعة إيراد في المنصة.</p></div>
|
||||
<div class="row-item"><h4>مساعد تسجيل بالذكاء الاصطناعي</h4><p>Gemini + Claude Haiku يقرآن الوثائق المصرية ويكشفان الانتهاء وعدم تطابق الأسماء آلياً.</p></div>
|
||||
<div class="row-item"><h4>بطاقة جودة السائق + سجل تدقيق</h4><p>قرارات حظر مبنية على بيانات، وكل إجراء موظف حساس مسجّل بالاسم والوقت.</p></div>
|
||||
<div class="row-item"><h4>دعم ميداني سريع</h4><p>بحث برقم هاتف/رحلة، تفعيل سائقين، وقوالب واتساب عربية جاهزة — بدون CRM مكلف.</p></div>
|
||||
</div>
|
||||
<div class="alert warn"><span class="tag">فجوات تشغيلية</span>
|
||||
<p>شاشة عرض الشكوى في تطبيق خدمة العملاء ما زالت فارغة (stub) رغم جاهزية قاعدة البيانات لسير تحقيق كامل · لا توجد أداة استرجاع مبلغ (Refund) في كامل النظام · لا يوجد تتبع SLA أو تصعيد للشكاوى الحرجة.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 05 BACKEND -->
|
||||
<section id="backend">
|
||||
<div class="sec-head">
|
||||
<span class="eyebrow">05</span>
|
||||
<h2>البنية الخلفية ومحرك التسعير</h2>
|
||||
<p class="thesis">قلب المنصة: كل طلب يمر عبر طبقة أمان مركزية قبل أي منطق عمل، ومحرك رحلات (202 ملف) يتخذ قرارات تجارية آلياً.</p>
|
||||
</div>
|
||||
<div class="rows">
|
||||
<div class="row-item"><h4>JWT مربوط ببصمة الجهاز</h4><p>الرمز المسروق لا يعمل على جهاز آخر.</p></div>
|
||||
<div class="row-item"><h4>تشفير AES-256 للبيانات الحساسة</h4><p>أسماء، هواتف، هويات، لوحات — مشفّرة حتى لو تسربت القاعدة.</p></div>
|
||||
<div class="row-item"><h4>Rate Limiting مخصص لكل نوع طلب</h4><p>حدود أشد للشكاوى لأن كل شكوى تستدعي Gemini + واتساب.</p></div>
|
||||
<div class="row-item"><h4>رمز سعر موقّع (7 دقائق)</h4><p>يغلق ثغرة التلاعب بالسعر بين العرض والتأكيد.</p></div>
|
||||
<div class="row-item"><h4>تسوية أجرة آمنة</h4><p>إعادة حساب من الخادم بسقوف (≤1.6× السعر، ≤1.5× المسافة) قبل التحويل للمحفظة.</p></div>
|
||||
<div class="row-item"><h4>مطابقة الوجهة (Destination Matching)</h4><p>سائق متجه للبيت يأخذ أولوية الطلبات القريبة من وجهته، والراكب يخصم 14%.</p></div>
|
||||
<div class="row-item"><h4>تسعير ديناميكي متكامل</h4><p>ذروة حسب العرض/الطلب لكل قطعة جغرافية، مطابقة ذروة المنافسين، مضاعفات رمضان/الأعياد، وخصم مسافات طويلة.</p></div>
|
||||
</div>
|
||||
<div class="alert good"><span class="tag">وثيقة موجودة فعلاً</span>
|
||||
<p>يوجد تدقيق أمني داخلي بأسلوب اختبار اختراق يصنّف النتائج من حرج لمنخفض — نقاط قوة موثقة (لا SQL Injection، AES-256) مقابل بنود مفتوحة (Rate limiting معطّل بأماكن، ملفات اختبار في الإنتاج، تشفير CBC بـ IV ثابت). راجع <code>docs/08_security</code>.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 06 MAPS -->
|
||||
<section id="maps">
|
||||
<div class="sec-head">
|
||||
<span class="eyebrow">06</span>
|
||||
<h2>الخرائط والموقع الجغرافي</h2>
|
||||
<p class="thesis">القرار الأهم: لا اعتماد على Google Maps للتتبع الحي أو المطابقة — خادما WebSocket خاصان وفهرسة Redis جغرافية، بتحكم كامل وتوفير ضخم.</p>
|
||||
</div>
|
||||
<div class="rows">
|
||||
<div class="row-item"><h4>تتبع حي مُفلتر ومُجمّع</h4><p>موقع السائق كل 1–3 ثوانٍ، يُرسل فقط عند تحرك حقيقي (10م)، يُجمَّع ويُكتب لـ Redis كل نصف ثانية دفعة واحدة ثم يُدفع للراكب.</p></div>
|
||||
<div class="row-item"><h4>أقرب سائق عبر GEORADIUS</h4><p>بحث نصف قطر على آلاف السائقين لحظياً، مرتب بالتقييم — لا توجد خدمة جاهزة تقدم هذا.</p></div>
|
||||
<div class="row-item"><h4>استعلام مخصص لكل فئة</h4><p>Balash يختار أقدم السيارات فعلياً، وElectric يفلتر وقود «كهربائي» — منطق عمل مستحيل بخدمة عامة.</p></div>
|
||||
<div class="row-item"><h4>خرائط حرارية + تتبع أسطول حي</h4><p>«رؤية إلهية» لفريق العمليات دون شراء أداة BI.</p></div>
|
||||
<div class="row-item"><h4>تجزئة جغرافية (Geo-Sharding)</h4><p>كل نطاق إحداثيات يمكن ربطه بخادم مختلف — توسع مدينة-بمدينة دون إعادة هندسة.</p></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 07 TRANSIT -->
|
||||
<section id="transit">
|
||||
<div class="sec-head">
|
||||
<span class="eyebrow">07</span>
|
||||
<h2>مواصلاتي — النقل الجماعي للجامعات والمؤسسات</h2>
|
||||
<p class="thesis">خط الأعمال الثاني: رقمنة أساطيل الجامعات والمدارس والشركات مجاناً (SaaS)، مقابل استحواذ سيرو على المستخدمين وتحويلهم لركاب مدفوعين — بعزل تقني كامل عن نظام المشاوير (قاعدة <code>siro_transit</code> مستقلة + سوكيتات خاصة).</p>
|
||||
</div>
|
||||
|
||||
<div class="actors">
|
||||
<div class="actor"><span class="ic">🏛️</span><b>فريق سيرو</b><span>ينشئ المؤسسة، يضيف مشرفيها، ويعتمد الخطوط المرسومة قبل ظهورها للطلاب</span></div>
|
||||
<div class="actor"><span class="ic">🧑💼</span><b>مشرف المؤسسة</b><span>لوحة ويب: باصات، سائقون، رسم الخطوط والمحطات، الجداول، ورفع كشف الطلاب CSV</span></div>
|
||||
<div class="actor"><span class="ic">🚌</span><b>سائق الباص</b><span>تطبيق السائق بوضع Bus Mode مبسّط: زر ابدأ/أنهِ فقط، والمحطات تمرّ آلياً بالـ Geofencing</span></div>
|
||||
<div class="actor"><span class="ic">🎓</span><b>الطالب</b><span>تفعيل فوري بالرقم الجامعي، تتبع حي للباص، وإشعارات اقتراب ذكية</span></div>
|
||||
</div>
|
||||
|
||||
<div class="subhead">كيف تسير رحلة الباص</div>
|
||||
<div class="flow">
|
||||
<div class="step"><h4>الإعداد <span class="t">مرة واحدة</span></h4><p>المشرف يرسم المسار على خريطة تفاعلية ويحدد المحطات بمحيط جغرافي (150م افتراضياً)، والخط يبقى «مسودة» حتى يعتمده فريق سيرو، ثم تُحدد أوقات الانطلاق وأيام العمل.</p></div>
|
||||
<div class="step"><h4>بدء الرحلة <span class="t">زر واحد</span></h4><p>السائق يضغط «ابدأ الرحلة» ويبدأ بث موقعه عبر السوكيت كل عدة ثوانٍ — مع إشعار انطلاق للمشتركين.</p></div>
|
||||
<div class="step"><h4>المرور بالمحطات <span class="t">آلي بالكامل</span></h4><p>دخول الباص محيط أي محطة يحدّث شريط التقدم تلقائياً دون تدخل السائق، ويُرسل «الباص يبعد محطة واحدة عنك» للطلاب التاليين. زر «تأخير» متاح عند الزحام.</p></div>
|
||||
<div class="step"><h4>التتبع الحي للطالب <span class="t">Socket</span></h4><p>الطالب يرى الباص يتحرك على المسار لحظياً — ولا يُسمح له بالانضمام لغرفة البث إلا بعضوية نشطة في المؤسسة المالكة للخط.</p></div>
|
||||
<div class="step"><h4>نقطة التحويل الربحية <span class="t">جوهر النموذج</span></h4><p>إذا فات الطالبَ الباصُ يظهر زر بارز: «فاتك الباص؟ اطلب سيارة الآن» — يحوّله لرحلة مدفوعة عادية من سيرو. هذا هو العائد الأساسي لخط الأعمال كله.</p></div>
|
||||
</div>
|
||||
|
||||
<div class="duo" style="margin-top:14px;">
|
||||
<div class="panel"><h4>ضوابط أمنية مبنية</h4><ul>
|
||||
<li>حماية IDOR: لا يستطيع سائق إنهاء رحلة سائق آخر.</li>
|
||||
<li>تشفير أرقام الهواتف والأرقام الجامعية في القاعدة.</li>
|
||||
<li>Rate Limiting على OTP وتسجيل الدخول.</li>
|
||||
<li>تفعيل الطالب فوري بمطابقة الكشف — دون OTP إضافي لتوفير التكلفة.</li>
|
||||
</ul></div>
|
||||
<div class="panel"><h4>نمطان تشغيليان</h4><ul>
|
||||
<li><b>أسطول المؤسسة:</b> الجامعة تملك باصاتها وسائقيها.</li>
|
||||
<li><b>الناقل المتعاقد:</b> شركة نقل طرف ثالث تشغّل خطوط مؤسسة بلا أسطول، بنفس برمجيات التتبع.</li>
|
||||
<li>سائق الباص منفصل تماماً عن كابتن المشاوير ولا يتلقى طلبات عادية.</li>
|
||||
</ul></div>
|
||||
</div>
|
||||
|
||||
<div class="alert warn"><span class="tag">فجوات معروفة قيد المعالجة</span>
|
||||
<p>المراجعة الفنية الكاملة في <code>docs/05_transit_mawasalati</code> توثّق بنوداً مفتوحة: نواقص في ربط السائق، واعتماد الخطوط، وحالات IDOR إضافية — يجب إغلاقها قبل أول إطلاق جامعي واسع.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 08 BOTS -->
|
||||
<section id="bots">
|
||||
<div class="sec-head">
|
||||
<span class="eyebrow">08</span>
|
||||
<h2>البوتات والذكاء الاصطناعي التسويقي</h2>
|
||||
<p class="thesis">منظومة مغلقة: بوت يسحب أسعار المنافسين من تطبيقاتهم ← محرك يفكّك معادلاتهم ← إعادة تسعير آلية ← بوتات سوشيال تصنع «نقاشات» لصالح سيرو. ميزة تنافسية حقيقية، بمخاطر قانونية وسمعية واضحة.</p>
|
||||
</div>
|
||||
<div class="rows">
|
||||
<div class="row-item"><h4>بوت أندرويد يقرأ تطبيقات المنافسين</h4><p>Accessibility Service يفتح كريم/أوبر/يلا-جو/TaxiF/زاكن فعلياً، يدخل نقطتين، ويقرأ السعر من الشاشة.</p></div>
|
||||
<div class="row-item"><h4>فك معادلة تسعير المنافس</h4><p>انحدار إحصائي يشتق (أساس + لكل كم + لكل دقيقة) ويكشف حتى الحد الأدنى الخفي للأجرة.</p></div>
|
||||
<div class="row-item"><h4>إعادة تسعير آلية −6.5%</h4><p>كرون جوب يُبقي سيرو أرخص تلقائياً، مع «وضع الظل»: العروض المؤقتة للمنافس تُقابل بكود خصم بدل حرق السعر الأساسي (سقف تغيير 3% وتهدئة 3 أيام).</p></div>
|
||||
<div class="row-item"><h4>بوتات سوشيال بلهجات محلية</h4><p>حسابات مُدارة بتدوير IP، تعليقات Gemini بلهجة كل بلد، و«دراما حوار» مفتعلة (تشكيك ثم رد داعم) بتأخير عشوائي.</p></div>
|
||||
</div>
|
||||
<div class="alert crit"><span class="tag">⚠️ خطر قانوني وسمعي</span>
|
||||
<p>سحب الأسعار آلياً يخالف غالباً شروط استخدام تطبيقات المنافسين، والحسابات المنسّقة الوهمية تُصنَّف «تلاعباً منسّقاً غير أصيل» يخالف سياسات المنصات صراحة — خطر حظر جماعي وضرر سمعي إذا انكشف. قرار يجب اتخاذه بوعي كامل بالمخاطرة، لا بالعائد فقط.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 09 FINANCE -->
|
||||
<section id="finance">
|
||||
<div class="sec-head">
|
||||
<span class="eyebrow">09</span>
|
||||
<h2>نبيه، المحفظة، والاستثمار</h2>
|
||||
<p class="thesis">تصحيح مهم: «نبيه» ليست منصة استثمار — لا فوائد ولا حصص في الكود. هي مزوّد أتمتة خارجي عبر واتساب. الاستثمار الحقيقي في وثائق المستثمرين، مع نقطة تحتاج انتباهاً فورياً.</p>
|
||||
</div>
|
||||
<div class="rows">
|
||||
<div class="row-item"><h4>نبيه فعلياً</h4><p>أتمتة واتساب بالذكاء الاصطناعي: تسجيل سائقين بالمحادثة، استفسارات أرباح، فحص شكاوى بـ Gemini، وتحقق بصري من إيصالات الدفع.</p></div>
|
||||
<div class="row-item"><h4>محفظة سيرو</h4><p>خدمة منفصلة (268 ملف): MTN، Syriatel Cash، ShamCash، Cliq، PayMob، eCash — مع تحويل فعلي بين محافظ السائقين برسوم للشركة.</p></div>
|
||||
<div class="row-item"><h4>طلب تمويل موثّق</h4><p>200,000$ مقابل 22% (تقييم ضمني ~909K$) بأربع طبقات إيراد: عمولة، Prime، إعلانات جغرافية، وترخيص خرائط سيرو كبديل أرخص من Google Maps.</p></div>
|
||||
<div class="row-item"><h4>عقد سوريا المنفصل</h4><p>اتفاقية حصة أرباح 180,000$ لسوريا فقط — سرديتان تمويليتان تحتاجان توحيداً قبل أي عرض رسمي.</p></div>
|
||||
</div>
|
||||
<div class="alert crit"><span class="tag">⚠️ تسريب بيانات — إجراء فوري</span>
|
||||
<p><code>siromove.com/contract.html</code> على النطاق العام يحتوي نص العقد الاستثماري كاملاً مع <b>أرقام هوية/جواز حقيقية</b> لمؤسسَين ومستثمر — متاح لأي زائر. يجب إزالته من الوصول العام أو حمايته بمصادقة فوراً.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 10 LEGACY -->
|
||||
<section id="legacy">
|
||||
<div class="sec-head">
|
||||
<span class="eyebrow">10</span>
|
||||
<h2>الإرث الرقمي: القيمة الفكرية والمادية</h2>
|
||||
<p class="thesis">لو حلّ نموذج ذكاء اصطناعي محل الفريق، هل كان يبني هذا من الصفر؟ جزء كبير من الكود: نعم. الجزء الأكثر قيمة: لا — وهذا ما يحدد قيمة المشروع.</p>
|
||||
</div>
|
||||
<div class="duo">
|
||||
<div class="panel can"><h4>✅ ما يُنتجه الذكاء الاصطناعي بسرعة</h4><ul>
|
||||
<li>شاشات Flutter القياسية والتكاملات الجاهزة (PayMob، Gemini، Firebase).</li>
|
||||
<li>منطق CRUD الإداري والأمان القياسي (JWT، تشفير، Rate Limiting).</li>
|
||||
<li>نمط Socket + Redis Geo كتصميم هندسي معروف بالصناعة.</li>
|
||||
</ul></div>
|
||||
<div class="panel cannot"><h4>❌ ما لا يُخترع بمجرد Prompt</h4><ul>
|
||||
<li><b>معادلات تسعير المنافسين الفعلية</b> — أشهر من بيانات سوق حقيقية.</li>
|
||||
<li><b>القيم المضبوطة تشغيلياً</b> (12 ساعة، 3 إلغاءات، 90 ثانية) — نتاج حوادث وتجربة موثقة.</li>
|
||||
<li><b>العلاقات المحلية</b>: ترخيص سوريا (قانون 16/2021)، اتفاقيات MTN وSyriatel وCliq، وتوزيع APK خارج المتجر بسبب العقوبات.</li>
|
||||
<li><b>القاعدة الفعلية</b>: 1,447 سائقاً و2,891 راكباً في 45 يوماً بميزانية محدودة — أصل شبكي لا يُشترى.</li>
|
||||
</ul></div>
|
||||
</div>
|
||||
<div class="alert good" style="margin-top:14px;"><span class="tag">الخلاصة</span>
|
||||
<p>هذا المشروع مثال حي على الفرق بين «الكود» و«الشركة»: الذكاء الاصطناعي يسرّع كتابة الكود فعلاً، لكنه لا يعوّض الوقت الفعلي والمخاطرة الفعلية والعلاقات الفعلية — وهذه، لا الكود، هي القيمة غير القابلة للنسخ. القيمة المادية الموثقة داخلياً: تقييم ضمني ~909 ألف دولار.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 11 RISKS -->
|
||||
<section id="risks">
|
||||
<div class="sec-head">
|
||||
<span class="eyebrow">11</span>
|
||||
<h2>المخاطر والفجوات المجمّعة</h2>
|
||||
<p class="thesis">كل ما يحتاج قراراً أو إجراءً، من الأشد إلحاحاً للأقل.</p>
|
||||
</div>
|
||||
<div class="alert crit"><span class="tag">حرج — الآن</span><p>أرقام هوية حقيقية منشورة بلا حماية على <code>siromove.com/contract.html</code> — القسم 09.</p></div>
|
||||
<div class="alert warn"><span class="tag">قانوني وسمعي</span><p>بوتات سحب الأسعار والتلاعب المنسّق بالسوشيال — القسم 08.</p></div>
|
||||
<div class="alert warn"><span class="tag">حوكمة تمويل</span><p>سرديتان تمويليتان متضاربتان (180K$ سوريا مقابل 200K$/22% عامة) تحتاجان توحيداً.</p></div>
|
||||
<div class="alert warn"><span class="tag">تشغيلي</span><p>لا أداة عرض/حل شكوى فعلية، لا Refund، لا SLA — القسم 04. وفجوات مواصلاتي المفتوحة — القسم 07.</p></div>
|
||||
<div class="alert warn"><span class="tag">أمني</span><p>بنود التدقيق الأمني غير المغلقة: Rate limiting معطّل بأماكن، ملفات اختبار في الإنتاج، تشفير CBC بـ IV ثابت.</p></div>
|
||||
</section>
|
||||
|
||||
<!-- 12 TUTORIAL -->
|
||||
<section id="tutorial">
|
||||
<div class="sec-head">
|
||||
<span class="eyebrow">12</span>
|
||||
<h2>خطة التوتوريال داخل الموقع — «كيف تستخدم سيرو»</h2>
|
||||
<p class="thesis">صفحة <code>siromove.com/tutorial</code> بسبع وحدات تشرح كل عملية خطوة بخطوة بلقطات شاشة حقيقية داخل إطار هاتف. المطلوب تصويره: <b class="num">34 لقطة</b> في جلسة واحدة (~ساعتين) على بيئة تجريبية. الخطة التفصيلية بأسماء الشاشات في الكود: <code>docs/02_journeys_and_tutorials/TUTORIAL_PLAN_AR.md</code>.</p>
|
||||
</div>
|
||||
<div class="mods">
|
||||
<div class="mod"><span class="shots">5 لقطات</span><h4>1 · التسجيل</h4>
|
||||
<ol><li>شاشة البداية بالشعار</li><li>شرائح التعريف</li><li>رقم الهاتف واختيار الدولة</li><li>رمز التحقق OTP</li><li>إكمال الاسم والبدء</li></ol>
|
||||
<p class="note">الرسالة: رقم هاتف فقط — أقل من دقيقة حتى الخريطة.</p></div>
|
||||
<div class="mod"><span class="shots">6 لقطات</span><h4>2 · طلب الرحلة</h4>
|
||||
<ol><li>الخريطة والسيارات القريبة</li><li>البحث عن الوجهة</li><li>دبوس الانطلاق</li><li>الفئات التسع مع شارة التوفير</li><li>كود الخصم</li><li>تأكيد الطلب بالسعر النهائي</li></ol>
|
||||
<p class="note">الرسالة: السعر نهائي ومحسوب من الخادم — لا مفاجآت.</p></div>
|
||||
<div class="mod"><span class="shots">4 لقطات</span><h4>3 · الانتظار والمطابقة</h4>
|
||||
<ol><li>نافذة البحث مع المؤقّت</li><li>اقتراح المفاوض الذكي (بعد 90 ثانية)</li><li>بطاقة الكابتن</li><li>الكابتن في الطريق مع المسار</li></ol></div>
|
||||
<div class="mod"><span class="shots">5 لقطات</span><h4>4 · أثناء الرحلة والسلامة</h4>
|
||||
<ol><li>إشعار «الكابتن وصل» ومهلة 5 دقائق</li><li>المسار الأزرق والعداد</li><li>مشاركة الرحلة مع الأهل</li><li>زر SOS وهزّ الهاتف</li><li>المكالمة داخل التطبيق</li></ol></div>
|
||||
<div class="mod"><span class="shots">3 لقطات</span><h4>5 · الإلغاء</h4>
|
||||
<ol><li>مكان زر الإلغاء</li><li>اختيار السبب</li><li>التأكيد وسياسة الرسوم</li></ol>
|
||||
<p class="note">قبل قبول الكابتن: مجاني دائماً. بعد وصوله: قد تُطبَّق رسوم.</p></div>
|
||||
<div class="mod"><span class="shots">6 لقطات</span><h4>6 · الدفع والتقييم</h4>
|
||||
<ol><li>الفاتورة النهائية</li><li>قائمة طرق الدفع</li><li>تأكيد الكاش</li><li>المحفظة والشحن بمكافأة</li><li>التقييم والإكرامية</li><li>سجل الرحلات</li></ol></div>
|
||||
<div class="mod"><span class="shots">5 لقطات</span><h4>7 · مواصلاتي للطلاب</h4>
|
||||
<ol><li>اختيار الجامعة</li><li>تفعيل الرقم الجامعي</li><li>الخطوط والجداول</li><li>التتبع الحي للباص</li><li>زر «فاتك الباص؟ اطلب سيارة»</li></ol></div>
|
||||
<div class="mod"><span class="shots">التنفيذ</span><h4>خطوات الإطلاق</h4>
|
||||
<ol><li>بناء الصفحة بتبويبات RTL بنفس هوية هذا التقرير</li><li>صور Placeholder بأسماء الملفات النهائية حتى تجهز اللقطات</li><li>جلسة تصوير واحدة للـ 34 لقطة بترتيب الوحدات</li><li>لاحقاً: فيديوهات 30–60 ثانية + Coach Marks داخل التطبيق</li></ol></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="end">
|
||||
<span>أُعدّ بفحص مباشر لكود المشروع — لا تخمين ولا محتوى عام.</span>
|
||||
<span class="num">آخر تحديث 2026-07-14 · Siro Digital Legacy Report</span>
|
||||
</footer>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
@@ -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.")
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user