Files
maps-saas/apps/web/public/siro-presentation.html
T

755 lines
36 KiB
HTML

<!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>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;600;700;800;900&display=swap" rel="stylesheet">
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Plus Jakarta Sans", "IBM Plex Sans Arabic", system-ui, sans-serif;
letter-spacing: -0.015em;
}
body {
background-color: #f8fafc;
color: #0f172a;
line-height: 1.6;
overflow-x: hidden;
}
/* Top Bar */
header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid #e2e8f0;
padding: 10px 24px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.brand-group {
display: flex;
align-items: center;
gap: 12px;
}
.brand-logo {
width: 38px;
height: 38px;
border-radius: 10px;
background: linear-gradient(135deg, #0071e3, #4f46e5);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
font-size: 1.2rem;
box-shadow: 0 4px 12px rgba(0, 113, 227, 0.25);
}
.brand-title {
font-size: 1.05rem;
font-weight: 800;
color: #0f172a;
}
.badge-sovereign {
background: #ecfdf5;
color: #059669;
border: 1px solid #a7f3d0;
padding: 2px 8px;
border-radius: 999px;
font-size: 10px;
font-weight: 800;
margin-right: 6px;
}
/* Presentation Stage */
.deck-container {
max-width: 1200px;
margin: 70px auto 40px auto;
padding: 0 20px;
min-height: calc(100vh - 140px);
display: flex;
flex-direction: column;
justify-content: center;
}
/* Slide Card */
.slide {
display: none;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 28px;
box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.02);
padding: 40px 36px;
animation: fadeInSlide 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.slide.active {
display: block;
}
@keyframes fadeInSlide {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* Typography & Utilities */
.slide-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 14px;
border-radius: 999px;
font-size: 0.8rem;
font-weight: 800;
margin-bottom: 14px;
}
.badge-blue { background: #eff6ff; color: #0071e3; border: 1px solid #bfdbfe; }
.badge-green { background: #f0fdf4; color: #059669; border: 1px solid #bbf7d0; }
.badge-purple { background: #faf5ff; color: #7c3aed; border: 1px solid #e9d5ff; }
.badge-red { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
h1 {
font-size: 2.2rem;
font-weight: 900;
color: #0f172a;
line-height: 1.25;
margin-bottom: 12px;
letter-spacing: -0.025em;
}
h2 {
font-size: 1.85rem;
font-weight: 900;
color: #0f172a;
line-height: 1.3;
margin-bottom: 10px;
letter-spacing: -0.02em;
}
h3 {
font-size: 1.12rem;
font-weight: 800;
color: #0f172a;
margin-bottom: 8px;
}
p.lead {
font-size: 1.02rem;
color: #475569;
line-height: 1.8;
margin-bottom: 22px;
}
.text-blue { color: #0071e3; }
.text-green { color: #059669; }
.text-purple { color: #7c3aed; }
/* Layout Grids */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
/* Feature Subcard */
.feature-card {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 20px;
padding: 22px;
transition: all 0.2s ease;
}
.feature-card:hover {
border-color: #0071e3;
transform: translateY(-2px);
box-shadow: 0 10px 25px -5px rgba(0, 113, 227, 0.08);
}
.feature-icon {
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
font-size: 1.2rem;
}
/* Comparison Table */
.comp-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border: 1px solid #e2e8f0;
border-radius: 16px;
overflow: hidden;
margin-top: 14px;
font-size: 0.86rem;
}
.comp-table th {
background: #0f172a;
color: #ffffff;
padding: 12px 16px;
font-weight: 800;
text-align: right;
}
.comp-table td {
padding: 12px 16px;
border-bottom: 1px solid #e2e8f0;
color: #334155;
background: #ffffff;
line-height: 1.6;
}
.comp-table tr:last-child td {
border-bottom: none;
}
/* Bottom Navigation Bar */
.nav-bar {
margin-top: 20px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 20px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 20px;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
}
.nav-btn {
background: #ffffff;
border: 1px solid #cbd5e1;
color: #0f172a;
padding: 8px 20px;
border-radius: 12px;
font-weight: 700;
font-size: 0.85rem;
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
transition: all 0.15s ease;
}
.nav-btn:hover:not(:disabled) {
border-color: #0071e3;
color: #0071e3;
background: #eff6ff;
}
.nav-btn.primary {
background: #0071e3;
color: #ffffff;
border-color: #0071e3;
box-shadow: 0 4px 12px rgba(0, 113, 227, 0.25);
}
.nav-btn.primary:hover:not(:disabled) {
background: #005bb5;
}
.nav-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.dots-strip {
display: flex;
gap: 5px;
}
.dot {
width: 7px;
height: 7px;
border-radius: 999px;
background: #cbd5e1;
cursor: pointer;
transition: all 0.2s ease;
}
.dot.active {
width: 22px;
background: #0071e3;
}
/* Interactive Sliders */
.slider-box {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 16px;
padding: 16px 20px;
}
.slider-label {
display: flex;
justify-content: space-between;
font-size: 0.82rem;
font-weight: 800;
color: #0f172a;
margin-bottom: 8px;
}
input[type=range] {
width: 100%;
accent-color: #0071e3;
cursor: pointer;
}
.grand-stat {
background: linear-gradient(135deg, #0071e3, #4f46e5);
color: #ffffff;
border-radius: 20px;
padding: 24px 28px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-top: 20px;
}
</style>
</head>
<body>
<!-- Fixed Executive Header -->
<header>
<div class="brand-group">
<div class="brand-logo">S</div>
<div>
<div style="display: flex; align-items: center; gap: 6px;">
<span class="brand-title">شركة سيرو لتكنولوجيا النقل | منصة انطلق مابس</span>
<span class="badge-sovereign">🇯🇴 سيادة أردنية 100%</span>
</div>
<div style="font-size: 0.72rem; color: #64748b; font-weight: 600;">
التقرير الاستراتيجي الشامل لعطوفة مدير عام المركز الجغرافي الملكي والقيادة العامة | إعداد: المقدم م. حمزة الغويري
</div>
</div>
</div>
<div style="display: flex; align-items: center; gap: 10px;">
<span id="slideCounter" style="font-size: 0.82rem; font-weight: 800; color: #0071e3; background: #eff6ff; padding: 4px 12px; border-radius: 999px;">
الشريحة 1 من 12
</span>
<button onclick="window.print()" class="nav-btn" style="padding: 6px 12px; font-size: 0.78rem;">
🖨️ طباعة التقرير
</button>
</div>
</header>
<!-- Deck Stage -->
<div class="deck-container">
<!-- SLIDE 1: COVER & SOVEREIGN MANDATE -->
<div class="slide active" id="slide-1">
<span class="slide-badge badge-blue">الوثيقة الاستراتيجية الرسمية 2026</span>
<h1>منظومة السيادة المكانية والذكاء التكتيكي والتنقل الذكي</h1>
<p class="lead">
تقرير تفصيلي شامل لعطوفة مدير عام المركز الجغرافي الملكي والقيادة العامة، يوضح خطة استعادة السيادة الرقمية على الخرائط الأردنية، وقف نزيف العملات الصعبة، وتكامل محرك <strong>انطلق مابس</strong> مع <strong>تطبيق سيرو (Siro)</strong> للنقل الوطني.
</p>
<div class="grid-3">
<div class="feature-card">
<div class="feature-icon" style="background: #eff6ff; color: #0071e3;">🛡️</div>
<h3>1. السيادة وتوطين البيانات</h3>
<p style="font-size: 0.86rem; color: #64748b;">حظر خروج بيانات تحركات المواطنين والأرتال العسكرية لخوادم أجنبية، مع تشغيل معزول 100% (Air-Gapped).</p>
</div>
<div class="feature-card">
<div class="feature-icon" style="background: #ecfdf5; color: #059669;">💰</div>
<h3>2. وقف النزيف المالي (80%)</h3>
<p style="font-size: 0.86rem; color: #64748b;">خفض كلفة الخرائط على قطاع النقل من $5 إلى $1.25 لكل 1000 طلب API، وتوفير ملايين الدنانير سنوياً.</p>
</div>
<div class="feature-card">
<div class="feature-icon" style="background: #faf5ff; color: #7c3aed;">🚗</div>
<h3>3. الذراع التشغيلي (سيرو)</h3>
<p style="font-size: 0.86rem; color: #64748b;">تطبيق النقل الوطني Siro بعمولة عادلة (12%)، ومصدر التحديث الذاتي التلقائي لشوارع المملكة.</p>
</div>
</div>
</div>
<!-- SLIDE 2: FOUNDER IDENTITY & REAL-WORLD FLEET OPERATIONS -->
<div class="slide" id="slide-2">
<span class="slide-badge badge-blue">الهوية والخبرة الميدانية</span>
<h2>من نحن؟ هندسة برمجية مدفوعة بـ 20 سنة قيادة و3 سنوات تشغيل أساطيل</h2>
<p class="lead">
المشروع لم يولد كبحث نظري، بل كحل جذري لمعاناة حقيقية في إدارة وبرمجة أساطيل النقل الذكي على الأرض:
</p>
<div class="grid-2">
<div class="feature-card" style="border-right: 4px solid #0071e3;">
<h3 style="color: #0071e3;">🎖️ القيادة والانضباط العملياتي (مقدم متقاعد)</h3>
<p style="font-size: 0.88rem; color: #475569; line-height: 1.8;">
خبرة 20 سنة في العمليات الميدانية والسيطرة العسكرية، مما أتاح تأهيل وتصميم معمارية الخريطة لتلبي أعلى متطلبات الاستخبارات الجغرافية (C4ISR)، والرماية التكتيكية، والمناعة ضد التشويش الإلكتروني.
</p>
</div>
<div class="feature-card" style="border-right: 4px solid #059669;">
<h3 style="color: #059669;">💻 تأسيس وتشغيل وبرمجة تطبيقات النقل (3 سنوات)</h3>
<p style="font-size: 0.88rem; color: #475569; line-height: 1.8;">
مؤسس ومبرمج ومشغل مباشر لشركات نقل ذكي حية في أسواق صعبة (مصر وسوريا). أدرنا مئات آلاف الرحلات، واختبرنا الخريطة تحت أقصى ضغوط التتبع الحي للسائقين والبحث المكاني.
</p>
</div>
</div>
</div>
<!-- SLIDE 3: TERRAIN ANALYSIS & OPERATIONAL EVALUATION -->
<div class="slide" id="slide-3">
<span class="slide-badge badge-blue">الاستخبارات الجغرافية التكتيكية</span>
<h2>دراسة وتقييم الأرض التعبوية (Military Terrain Analysis & OCOKA)</h2>
<p class="lead">
محرك رقمي آلي يفكك جغرافية ميدان المعركة ويحول الارتفاعات الرقمية إلى قرارات عملياتية فورية:
</p>
<div class="grid-3">
<div class="feature-card">
<h4 style="color: #0071e3; margin-bottom: 6px;">1. الرصد وميادين الرمي</h4>
<p style="font-size: 0.84rem; color: #64748b;">حساب خطوط الرؤية الدقيقة، كشف الأرض الميتة المحجوبة، وتحديد قطاعات الرماية المكشوفة للأسلحة المباشرة والمنحنية.</p>
</div>
<div class="feature-card">
<h4 style="color: #059669; margin-bottom: 6px;">2. الوقاية والتستر والموانع</h4>
<p style="font-size: 0.84rem; color: #64748b;">تحديد السواتر التضاريسية الطبيعية ضد نيران العدو، وحصر الموانع الطبيعية (الأودية السحيقة والانحدارات الشديدة).</p>
</div>
<div class="feature-card">
<h4 style="color: #7c3aed; margin-bottom: 6px;">3. الأرض الحيوية والمسالك</h4>
<p style="font-size: 0.84rem; color: #64748b;">استخراج القمم الحاكمة والتلال الاستراتيجية آلياً، وتحديد مسالك الاقتراب (Avenues of Approach) لتقدم الآليات والدروع.</p>
</div>
</div>
</div>
<!-- SLIDE 4: FORCE STRUCTURE & TASK ORGANIZATION -->
<div class="slide" id="slide-4">
<span class="slide-badge badge-purple">القيادة والسيطرة الميدانية</span>
<h2>دراسة التنظيم، الرموز، والتشكيلات التكتيكية (Task Organization & Symbols)</h2>
<p class="lead">
إسقاط هيكل القوات وتوزيع الأسلحة على الخريطة وفق المعايير العسكرية القياسية (MIL-STD-2525):
</p>
<div class="grid-3">
<div class="feature-card">
<h4 style="color: #0071e3; margin-bottom: 6px;">1. الرموز التكتيكية القياسية</h4>
<p style="font-size: 0.84rem; color: #64748b;">مكتبة رموز مدمجة لكافة صنوف الأسلحة (مشاة، دروع، مدفعية، دفاع جوي، رادار، مهابط طائرات، حقول ألغام).</p>
</div>
<div class="feature-card">
<h4 style="color: #059669; margin-bottom: 6px;">2. توزيع وتشكيل القوات</h4>
<p style="font-size: 0.84rem; color: #64748b;">رسم مواقع الكتائب والسرايا والمفارز، وتحديد خطوط الانطلاق، ومناطق الحشد، ونقاط الملاحظة الأمامية.</p>
</div>
<div class="feature-card">
<h4 style="color: #dc2626; margin-bottom: 6px;">3. أقواس وتداخل النيران</h4>
<p style="font-size: 0.84rem; color: #64748b;">رسم مدى تغطية الأسلحة والمدافع والرشاشات وحساب مناطق التداخل الناري لضمان السيطرة المحكمة على القاطع.</p>
</div>
</div>
</div>
<!-- SLIDE 5: THE CORE DIFFERENCE (TERRAIN VS ORGANIZATION) -->
<div class="slide" id="slide-5">
<span class="slide-badge badge-green">المقارنة العسكرية المفاهيمية</span>
<h2>ما الفرق الجوهري بين "دراسة الأرض" و"دراسة التنظيم"؟</h2>
<p class="lead">
دمج دراسة الأرض مع دراسة التنظيم على نفس الشاشة هو ما يحول الخريطة إلى منظومة C4ISR متكاملة:
</p>
<table class="comp-table">
<thead>
<tr>
<th style="width: 25%;">وجه المقارنة</th>
<th style="width: 37.5%; background: #0071e3;">دراسة الأرض (Terrain Analysis)</th>
<th style="width: 37.5%; background: #7c3aed;">دراسة التنظيم (Organization Analysis)</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>التركيز والهدف</strong></td>
<td>دراسة <strong>البيئة الطبيعية والجغرافيا</strong> وتأثير التضاريس والارتفاعات على الحركة والرؤية.</td>
<td>دراسة <strong>القوات والأسلحة والتشكيلات</strong> وتوزيع القدرات القتالية واللوجستية.</td>
</tr>
<tr>
<td><strong>السؤال الذي تجيب عليه</strong></td>
<td><strong>أين وكيف</strong> تؤثر الأرض في ميدان المعركة؟ (أين المانع؟ أين الأرض الميتة؟ أين القمة؟)</td>
<td><strong>مَن وبأي سلاح</strong> ينفذ المهمة؟ (ما حجم القوة؟ ما نوع السلاح؟ ما مدى تغطيته؟)</td>
</tr>
<tr>
<td><strong>المخرجات في النظام</strong></td>
<td>نماذج الارتفاع الرقمي (DEM)، خطوط الرؤية (LOS)، المنحدرات، الرصد 360°، ومهابط المروحيات.</td>
<td>الرموز العسكرية، مواقع التشكيلات، أقواس الرمي، خطوط الإمداد، وتوزيع نيران المدفعية.</td>
</tr>
<tr>
<td><strong>التكامل في المنظومة</strong></td>
<td colspan="2" style="background: #f0fdf4; color: #166534; font-weight: 700; text-align: center;">
المنظومة تدمج الاثنين معاً: تسقط تنظيم القوات على التضاريس الحقيقية لتحدد فورياً هل موقع الكتيبة آمن تضاريسياً وهل ميادين رميها مكشوفة!
</td>
</tr>
</tbody>
</table>
</div>
<!-- SLIDE 6: ISOCHRONES & 360 VIEWSHED DETECTION -->
<div class="slide" id="slide-6">
<span class="slide-badge badge-blue">الاستجابة والمسح الراداري</span>
<h2>زمن الاستجابة (Isochrone) والكشف البصري والراداري 360°</h2>
<p class="lead">
أدوات حسابية مكانية لدعم غرف العمليات، الدفاع المدني، وحرس الحدود:
</p>
<div class="grid-2">
<div class="feature-card">
<h3 style="color: #0071e3;">⏱️ 1. مضلعات زمن الاستجابة (Isochrone Reachability)</h3>
<p style="font-size: 0.88rem; color: #475569; line-height: 1.8;">
حساب النطاق الجغرافي الحقيقي الذي تستطيع دوريات الرد السريع، سيارات الإسعاف، والإطفاء الوصول إليه في <strong>(5، 10، و 15 دقيقة)</strong> مع مراعاة شبكة الشوارع الحقيقية، لخدمة توزيع مراكز الدفاع المدني والأمن العام.
</p>
</div>
<div class="feature-card">
<h3 style="color: #059669;">📡 2. كشف الرؤية الرادارية بزاوية 360° (Radial Viewshed)</h3>
<p style="font-size: 0.88rem; color: #475569; line-height: 1.8;">
مسح دائري كامل 360 درجة من قمة أي برج مراقبة أو موقع رادار لحساب المساحات المكشوفة بدقة وتحديد الثغرات والأودية المحجوبة عن الرؤية التي قد يتسلل منها المهربون أو الخصوم.
</p>
</div>
</div>
</div>
<!-- SLIDE 7: ESRI COMPATIBILITY & INGESTION BRIDGE -->
<div class="slide" id="slide-7">
<span class="slide-badge badge-blue">التوافق الكامل مع المركز الجغرافي</span>
<h2>التوافق المطلق مع برمجيات إزري (Esri Ingestion Bridge)</h2>
<p class="lead">
محركنا ليس بديلاً يلغي عملكم، بل هو <strong>المحرك الأسرع لتشغيل بياناتكم الحالية</strong> بدون رخص سنوية مكلفة:
</p>
<div class="grid-3">
<div class="feature-card">
<div class="feature-icon" style="background: #eff6ff; color: #0071e3;">📁</div>
<h3>1. استيراد Shapefiles & FileGDB</h3>
<p style="font-size: 0.84rem; color: #64748b;">سحب طبقات الـ GIS التابعة للمركز الجغرافي وحقنها في ثوانٍ لتعمل كطبقات متجهات 3D بـ 60 FPS.</p>
</div>
<div class="feature-card">
<div class="feature-icon" style="background: #f0fdf4; color: #059669;">🛰️</div>
<h3>2. الصور الجوية (GeoTIFF)</h3>
<p style="font-size: 0.84rem; color: #64748b;">استيعاب التصوير الجوي الخاص بالقوات المسلحة والمركز وتحويله لطبقة أقمار صناعية محلية معزولة.</p>
</div>
<div class="feature-card">
<div class="feature-icon" style="background: #faf5ff; color: #7c3aed;">⛰️</div>
<h3>3. خطوط الكنتور ونماذج DEM</h3>
<p style="font-size: 0.84rem; color: #64748b;">دمج شبكة الارتفاعات الرقمية للمركز لرسم مقاطع التضاريس اللحظية وتحليل الرماية بدقة المتر.</p>
</div>
</div>
</div>
<!-- SLIDE 8: FULL-STACK SDKS & DEVELOPER ECOSYSTEM -->
<div class="slide" id="slide-8">
<span class="slide-badge badge-blue">حزم التطوير والترسانة البرمجية</span>
<h2>حزم SDKs متكاملة ومتوافقة كبديل مباشر (Drop-in Replacement)</h2>
<p class="lead">
تستطيع أي جهة حكومية أو شركة نقل التحول لمنظومتنا بتغيير سطرين فقط دون إعادة برمجة التطبيق:
</p>
<div class="grid-4">
<div class="feature-card">
<h4 style="color: #0071e3; margin-bottom: 6px;">حزمة Flutter SDK</h4>
<p style="font-size: 0.82rem; color: #64748b;">موحدة لتطبيقات أندرويد وآيفون، مع إدارة التخزين المؤقت المحلي.</p>
</div>
<div class="feature-card">
<h4 style="color: #4f46e5; margin-bottom: 6px;">حزمة Swift (iOS)</h4>
<p style="font-size: 0.82rem; color: #64748b;">مخصصة لأجهزة iPhone و iPad الميدانية بأعلى استجابة رسومية.</p>
</div>
<div class="feature-card">
<h4 style="color: #059669; margin-bottom: 6px;">حزمة Kotlin (Android)</h4>
<p style="font-size: 0.82rem; color: #64748b;">للأجهزة اللوحية العسكرية وتطبيقات الكباتن لتعمل بدون خدمات جوجل.</p>
</div>
<div class="feature-card">
<h4 style="color: #d97706; margin-bottom: 6px;">حزمة Web (JS/TS)</h4>
<p style="font-size: 0.82rem; color: #64748b;">محرك متجهات GPU عبر WebGL لعرض الخرائط على شاشات العمليات.</p>
</div>
</div>
</div>
<!-- SLIDE 9: ECO-ROUTING & STEEP INCLINE SAFETY -->
<div class="slide" id="slide-9">
<span class="slide-badge badge-green">السلامة العامة واقتصاديات الوقود</span>
<h2>المسار الاقتصادي الموفر للوقود وتنبيهات المنحدرات الجبلية</h2>
<p class="lead">
دمج نماذج الارتفاعات الرقمية لحماية الأرواح، تقليل الحوادث، وتوفير استهلاك المحروقات:
</p>
<div class="grid-2">
<div class="feature-card">
<h3 style="color: #059669;">🌿 1. خوارزمية المسار الاقتصادي (Eco-Routing)</h3>
<p style="font-size: 0.88rem; color: #475569; line-height: 1.8;">
المسار الأقصر مسافة ليس بالضرورة الأرخص! المحرك يقارن بين المسار الأقصر والمسار الأقل استهلاكاً للوقود بتفادي المرتفعات الشديدة والازدحامات، مما يوفر حتى <strong>18% من استهلاك الوقود</strong> على أساطيل النقل والشاحنات.
</p>
</div>
<div class="feature-card">
<h3 style="color: #ea580c;">⚠️ 2. تنبيهات المنحدرات الجبلية الخطرة</h3>
<p style="font-size: 0.88rem; color: #475569; line-height: 1.8;">
تنبيه السائقين وناقلات الدبابات والشاحنات بالصعود الحاد (+9%) والمنحدرات الخطرة (-9%) لاستخدام الغيار العكسي قبل 500 متر لحماية الأرواح ومنع احتراق المكابح في المنعطفات الجبلية.
</p>
</div>
</div>
</div>
<!-- SLIDE 10: STEALTH PROPRIETARY VISUAL NAVIGATION -->
<div class="slide" id="slide-10">
<span class="slide-badge badge-blue">المناعة التكتيكية والتشويش الإلكتروني</span>
<h2>الملاحة البصرية الذكية وتحديد الموقع عند انقطاع الـ GPS والإنترنت</h2>
<p class="lead">
حل حصري ذكي ومحمي يوفر استمرارية العمليات الميدانية في حال تعرض المنطقة للتشويش الإلكتروني:
</p>
<div class="feature-card" style="background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%); border-color: #bfdbfe; padding: 26px;">
<h3 style="color: #0071e3; margin-bottom: 10px;">🎯 المعالجة المكانية الذاتية (Proprietary Edge Spatial Vision)</h3>
<p style="font-size: 0.94rem; color: #334155; line-height: 1.85;">
في حال انقطاع أو تزييف إشارات الـ GPS، يوجه الضابط كاميرا التابلت نحو معالم بصرية محيطة؛ ويقوم <strong>المحرك الحسابي المدمج داخل المعالج المحلي</strong> بإجراء معالجة رياضية ذكية لحظية بالاعتماد على الحساسات الداخلية لاستخراج إحداثيات الموقع الدقيق فورياً وإسقاطه على الخريطة بدون الحاجة لأي اتصال خارجي أو كشف سرية الموقع!
</p>
</div>
</div>
<!-- SLIDE 11: SIRO MOBILITY PLATFORM & DUAL REVENUE -->
<div class="slide" id="slide-11">
<span class="slide-badge badge-purple">النموذج الاستثماري والتشغيل</span>
<h2>تكامل تطبيق النقل الوطني سيرو (Siro) مع عوائد الخرائط (B2B SaaS)</h2>
<p class="lead">
تطبيق سيرو يمثل الذراع التشغيلي ومصدر التحديث الذاتي للشوارع، والخرائط تمثل البنية التحتية المستدامة:
</p>
<div class="grid-2">
<div class="slider-box">
<div class="slider-label">
<span>إجمالي رحلات وتوصيلات المملكة يومياً:</span>
<span style="color: #0071e3;" id="dailyTripsVal">200,000 طلب/يوم</span>
</div>
<input type="range" min="50000" max="350000" step="25000" value="200000" id="dailyTripsInput" oninput="updateFinancials()">
</div>
<div class="slider-box">
<div class="slider-label">
<span>حصة تطبيق سيرو (Siro) من السوق:</span>
<span style="color: #059669;" id="marketShareVal">15% (15,000 رحلة/يوم)</span>
</div>
<input type="range" min="5" max="40" step="5" value="15" id="marketShareInput" oninput="updateFinancials()">
</div>
</div>
<div class="grand-stat">
<div>
<div style="font-size: 0.86rem; color: #e0e7ff;">إجمالي الإيرادات السنوية المشتركة (Gross ARR):</div>
<div style="font-size: 2rem; font-weight: 900;" id="totalGrossRev">1,821,800 دينار أردني</div>
</div>
<div>
<div style="font-size: 0.86rem; color: #86efac; font-weight: 800;">صافي الأرباح السنوية التقديرية (~85%):</div>
<div style="font-size: 2.2rem; font-weight: 900; color: #86efac;" id="netProfitRev">~1,548,530 د.أ / سنوياً</div>
</div>
</div>
</div>
<!-- SLIDE 12: ACTION ROADMAP & 30-DAY POC -->
<div class="slide" id="slide-12">
<span class="slide-badge badge-green">بروتوكول التحرك الفوري والشراكة</span>
<h2>خطة الشراكة المشتركة مع المركز الجغرافي الملكي 🇯🇴</h2>
<p class="lead">
مسار تنفيذي من 3 مراحل لتحويل المنظومة إلى بنية تحتية وطنية إلزامية:
</p>
<div class="grid-3" style="margin-bottom: 24px;">
<div class="feature-card" style="border-top: 4px solid #0071e3;">
<h3 style="color: #0071e3;">المرحلة 1: تجربة 30 يوماً (POC)</h3>
<p style="font-size: 0.84rem; color: #64748b;">تثبيت المنظومة داخل خوادم المركز دون أي التزام مالي، واختبار استيراد ملفاتكم والرماية والملاحة المعزولة.</p>
</div>
<div class="feature-card" style="border-top: 4px solid #4f46e5;">
<h3 style="color: #4f46e5;">المرحلة 2: المذكرة الاستراتيجية</h3>
<p style="font-size: 0.84rem; color: #64748b;">صياغة مذكرة تنفيذية مشتركة بتوقيع عطوفة مدير المركز ترفع لعطوفة رئيس هيئة الأركان المشتركة ومجلس الوزراء.</p>
</div>
<div class="feature-card" style="border-top: 4px solid #059669;">
<h3 style="color: #059669;">المرحلة 3: التبني والتشغيل</h3>
<p style="font-size: 0.84rem; color: #64748b;">إلزام التطبيقات بالخريطة الوطنية، وتشغيل تطبيق سيرو (Siro) كمصدر تحديث ذاتي مستمر للشوارع.</p>
</div>
</div>
<div style="text-align: center; background: #f8fafc; padding: 20px; border-radius: 16px; border: 1px solid #e2e8f0;">
<strong style="color: #0f172a; display: block; margin-bottom: 10px;">المنظومة جاهزة للاستعراض الحي والتنصيب الميداني الفوري</strong>
<a href="/#tactical" style="display: inline-block; background: linear-gradient(135deg, #0071e3, #4f46e5); color: #fff; text-decoration: none; padding: 10px 28px; border-radius: 12px; font-weight: 800; font-size: 0.88rem;">
فتح شاشة القيادة والسيطرة التكتيكية
</a>
</div>
</div>
<!-- Slide Navigation Bar -->
<div class="nav-bar">
<button class="nav-btn" id="prevBtn" onclick="changeSlide(-1)">
➔ الشريحة السابقة
</button>
<div class="dots-strip" id="dotsContainer">
<!-- Generated Dots -->
</div>
<button class="nav-btn primary" id="nextBtn" onclick="changeSlide(1)">
الشريحة التالية ⬅
</button>
</div>
</div>
<script>
let currentSlide = 0;
const totalSlides = 12;
function initDots() {
const container = document.getElementById('dotsContainer');
container.innerHTML = '';
for (let i = 0; i < totalSlides; i++) {
const dot = document.createElement('div');
dot.className = 'dot' + (i === currentSlide ? ' active' : '');
dot.onclick = () => goToSlide(i);
container.appendChild(dot);
}
}
function showSlide(index) {
if (index < 0 || index >= totalSlides) return;
currentSlide = index;
for (let i = 1; i <= totalSlides; i++) {
const slide = document.getElementById(`slide-${i}`);
if (slide) slide.classList.toggle('active', i === currentSlide + 1);
}
document.getElementById('slideCounter').innerText = `الشريحة ${currentSlide + 1} من ${totalSlides}`;
document.getElementById('prevBtn').disabled = currentSlide === 0;
document.getElementById('nextBtn').disabled = currentSlide === totalSlides - 1;
initDots();
window.scrollTo({ top: 0, behavior: 'smooth' });
}
function changeSlide(direction) {
showSlide(currentSlide + direction);
}
function goToSlide(index) {
showSlide(index);
}
// Financial Simulator Logic
function updateFinancials() {
const dailyTrips = Number(document.getElementById('dailyTripsInput').value);
const marketShare = Number(document.getElementById('marketShareInput').value);
document.getElementById('dailyTripsVal').innerText = `${dailyTrips.toLocaleString()} طلب/يوم`;
const siroDaily = Math.round(dailyTrips * 0.5 * (marketShare / 100));
document.getElementById('marketShareVal').innerText = `${marketShare}% (${siroDaily.toLocaleString()} رحلة/يوم)`;
const monthlyTrips = dailyTrips * 30;
const monthlyApiCalls = monthlyTrips * 7;
const ourMapMonthlyRev = (monthlyApiCalls / 1000) * 1.25;
const ourMapAnnualJod = Math.round(ourMapMonthlyRev * 0.709 * 12);
const siroMonthlyRides = siroDaily * 30;
const siroAnnualJod = Math.round(siroMonthlyRides * 0.30 * 12);
const totalAnnualJod = ourMapAnnualJod + siroAnnualJod;
const netProfit = Math.round(totalAnnualJod * 0.85);
document.getElementById('totalGrossRev').innerText = `${totalAnnualJod.toLocaleString()} دينار أردني`;
document.getElementById('netProfitRev').innerText = `~${netProfit.toLocaleString()} د.أ / سنوياً`;
}
// Keyboard Arrow Controls (RTL: Left is next, Right is prev)
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowLeft') changeSlide(1);
if (e.key === 'ArrowRight') changeSlide(-1);
});
// Initialize
initDots();
</script>
</body>
</html>