565 lines
36 KiB
HTML
565 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>
|
||
<meta name="description" content="منظومة الخرائط السيادية والتنقل الذكي للشرق الأوسط — بديل وطني مستقل لـ Google Maps و Mapbox بتوفير $0.30 لكل رحلة وتضاريس 3D واقعية">
|
||
<!-- Tailwind CSS & Lucide Icons -->
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||
<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&display=swap" rel="stylesheet">
|
||
|
||
<style>
|
||
* { box-sizing: border-box; }
|
||
body {
|
||
background-color: #060a12;
|
||
color: #f8fafc;
|
||
font-family: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, sans-serif;
|
||
overflow-x: hidden;
|
||
}
|
||
.hero-glow {
|
||
background: radial-gradient(circle 600px at 50% 10%, rgba(0, 113, 227, 0.22), transparent 70%),
|
||
radial-gradient(circle 400px at 80% 30%, rgba(99, 102, 241, 0.15), transparent 70%);
|
||
}
|
||
.glass-card {
|
||
background: rgba(15, 23, 42, 0.7);
|
||
backdrop-filter: blur(16px);
|
||
-webkit-backdrop-filter: blur(16px);
|
||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||
}
|
||
.glass-card:hover {
|
||
border-color: rgba(0, 113, 227, 0.4);
|
||
box-shadow: 0 10px 30px -10px rgba(0, 113, 227, 0.3);
|
||
}
|
||
.code-font {
|
||
font-family: 'JetBrains Mono', 'Fira Code', monospace;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="min-h-screen">
|
||
|
||
<!-- TOP SOVEREIGN NAVIGATION BAR -->
|
||
<header class="sticky top-0 z-50 bg-[#090e1a]/90 backdrop-blur-md border-b border-white/10 px-6 py-3 flex items-center justify-between">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-9 h-9 rounded-xl bg-gradient-to-tr from-blue-600 to-indigo-600 flex items-center justify-center shadow-lg shadow-blue-500/30">
|
||
<i data-lucide="zap" class="w-5 h-5 text-white"></i>
|
||
</div>
|
||
<div>
|
||
<div class="font-extrabold text-sm text-white tracking-tight flex items-center gap-2">
|
||
<span>خرائط سيرو المكانية والذكاء التكتيكي</span>
|
||
<span class="text-[10px] bg-orange-500/20 text-orange-400 border border-orange-500/40 px-2 py-0.5 rounded font-bold">Mapbox Alternative</span>
|
||
</div>
|
||
<div class="text-[11px] text-slate-400">Siro Spatial & Tactical Intelligence Platform v3.5</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Quick Navigation Links -->
|
||
<nav class="hidden md:flex items-center gap-2 bg-white/5 p-1 rounded-xl border border-white/10 text-xs">
|
||
<a href="/#landing" class="px-3 py-1.5 rounded-lg bg-blue-600 text-white font-bold transition">Landing Page 🚀</a>
|
||
<a href="/#terrain3d" class="px-3 py-1.5 rounded-lg hover:bg-white/10 text-slate-300 font-medium transition">التضاريس 3D 🏔️</a>
|
||
<a href="/#map" class="px-3 py-1.5 rounded-lg hover:bg-white/10 text-slate-300 font-medium transition">الملاحة الشاملة 🗺️</a>
|
||
<a href="/#tactical" class="px-3 py-1.5 rounded-lg hover:bg-white/10 text-slate-300 font-medium transition">المنظومة التكتيكية 🎖️</a>
|
||
<a href="/#tourism" class="px-3 py-1.5 rounded-lg hover:bg-white/10 text-slate-300 font-medium transition">السياحة والتراث 🏛️</a>
|
||
<a href="/#compare" class="px-3 py-1.5 rounded-lg hover:bg-white/10 text-slate-300 font-medium transition">مقارنة الأسعار ⚖️</a>
|
||
</nav>
|
||
|
||
<!-- Cloud Status Badge -->
|
||
<div class="flex items-center gap-2 bg-emerald-500/10 border border-emerald-500/30 text-emerald-400 px-3 py-1.5 rounded-lg text-xs font-bold">
|
||
<span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
|
||
<span>السحابة السيادية متصلة 100%</span>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- 1. HERO SECTION (Mapbox Grade Cinematic Dark Canvas) -->
|
||
<section class="relative px-6 pt-16 pb-20 hero-glow border-b border-white/10 text-center">
|
||
<div class="max-w-5xl mx-auto">
|
||
|
||
<div class="inline-flex items-center gap-2 bg-blue-500/10 border border-blue-500/30 text-blue-400 px-4 py-1.5 rounded-full text-xs font-bold mb-6 shadow-lg shadow-blue-500/10">
|
||
<i data-lucide="shield-check" class="w-4 h-4"></i>
|
||
<span>بنية جغرافية وطنية مستقلة للمملكة الأردنية والشرق الأوسط</span>
|
||
<span class="bg-white/10 px-2 py-0.5 rounded text-[10px]">Zero Cloud Lock-in</span>
|
||
</div>
|
||
|
||
<h1 class="text-3xl sm:text-5xl md:text-6xl font-black tracking-tight text-white leading-tight mb-6">
|
||
الجيل القادم من الخرائط الرقمية والملاحة ثلاثية الأبعاد باستقلالية وطنية مطلقة
|
||
</h1>
|
||
|
||
<p class="text-base sm:text-lg text-slate-300 max-w-3xl mx-auto mb-10 leading-relaxed">
|
||
محرك متجهات مكاني عالي الأداء معتمد على مسارات الأردن الدقيقة، محاكاة التضاريس والظلال بزمن حقيقي، ملاحة تكتيكية وتجارية بدون إنترنت، وتوفير جذري يتجاوز <strong class="text-blue-400 font-extrabold">0.30$ لكل رحلة</strong> مقارنة باحتكار العمالقة.
|
||
</p>
|
||
|
||
<!-- Primary Action Buttons -->
|
||
<div class="flex flex-wrap items-center justify-center gap-4 mb-14">
|
||
<a href="/#terrain3d" class="flex items-center gap-2 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white font-extrabold px-6 py-3.5 rounded-xl shadow-xl shadow-blue-500/30 text-sm transition">
|
||
<i data-lucide="play" class="w-4 h-4 fill-white"></i>
|
||
<span>تشغيل استوديو التضاريس ثلاثية الأبعاد (3D Live)</span>
|
||
</a>
|
||
|
||
<a href="/#map" class="flex items-center gap-2 bg-white/10 hover:bg-white/15 border border-white/15 text-white font-bold px-6 py-3.5 rounded-xl text-sm transition">
|
||
<i data-lucide="map" class="w-4 h-4"></i>
|
||
<span>فتح الخريطة والملاحة الشاملة</span>
|
||
</a>
|
||
|
||
<a href="/#tactical" class="flex items-center gap-2 bg-orange-600/20 hover:bg-orange-600/30 border border-orange-500/40 text-orange-400 font-bold px-6 py-3.5 rounded-xl text-sm transition">
|
||
<i data-lucide="shield" class="w-4 h-4"></i>
|
||
<span>المنظومة التكتيكية السيادية (MGRS)</span>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Quick Stats Metrics -->
|
||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 max-w-4xl mx-auto bg-slate-900/80 border border-white/10 rounded-2xl p-5 backdrop-blur-md">
|
||
<div class="text-center">
|
||
<div class="text-2xl sm:text-3xl font-black text-blue-400">0.30$</div>
|
||
<div class="text-xs text-slate-400 font-semibold mt-1">وفر تكلفة الخريطة لكل رحلة</div>
|
||
</div>
|
||
<div class="text-center">
|
||
<div class="text-2xl sm:text-3xl font-black text-emerald-400">100%</div>
|
||
<div class="text-xs text-slate-400 font-semibold mt-1">استقلالية سيادية بدون إنترنت</div>
|
||
</div>
|
||
<div class="text-center">
|
||
<div class="text-2xl sm:text-3xl font-black text-orange-400">< 25ms</div>
|
||
<div class="text-xs text-slate-400 font-semibold mt-1">سرعة استجابة مربعات Martin MVT</div>
|
||
</div>
|
||
<div class="text-center">
|
||
<div class="text-2xl sm:text-3xl font-black text-purple-400">0.00$</div>
|
||
<div class="text-xs text-slate-400 font-semibold mt-1">ضرائب استدعاء API لشركات أجنبية</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 2. INTERACTIVE PRODUCT SHOWCASE (Signature Mapbox Tab Switcher) -->
|
||
<section class="max-w-6xl mx-auto px-6 py-16">
|
||
<div class="text-center mb-10">
|
||
<div class="text-xs font-bold text-blue-400 tracking-wider uppercase mb-2">ركائز المنظومة الجغرافية المتقدمة</div>
|
||
<h2 class="text-2xl sm:text-4xl font-extrabold text-white">منصة متكاملة تلبي أعتى متطلبات الملاحة، الدفاع، والتضاريس</h2>
|
||
</div>
|
||
|
||
<!-- Tab Selector -->
|
||
<div class="flex justify-center gap-2 flex-wrap mb-8">
|
||
<button onclick="switchTab('terrain')" id="btn-tab-terrain" class="tab-btn flex items-center gap-2 px-5 py-2.5 rounded-xl font-bold text-sm bg-blue-600/20 border border-blue-500 text-white shadow-lg shadow-blue-500/20 transition">
|
||
<i data-lucide="mountain" class="w-4 h-4"></i>
|
||
<span>التضاريس 3D ومحاكي الظلال</span>
|
||
</button>
|
||
<button onclick="switchTab('nav')" id="btn-tab-nav" class="tab-btn flex items-center gap-2 px-5 py-2.5 rounded-xl font-medium text-sm bg-white/5 border border-white/10 text-slate-400 hover:text-white transition">
|
||
<i data-lucide="navigation" class="w-4 h-4"></i>
|
||
<span>الملاحة وإدارة الأساطيل</span>
|
||
</button>
|
||
<button onclick="switchTab('tactical')" id="btn-tab-tactical" class="tab-btn flex items-center gap-2 px-5 py-2.5 rounded-xl font-medium text-sm bg-white/5 border border-white/10 text-slate-400 hover:text-white transition">
|
||
<i data-lucide="shield" class="w-4 h-4"></i>
|
||
<span>الاستطلاع والذكاء التكتيكي</span>
|
||
</button>
|
||
<button onclick="switchTab('tourism')" id="btn-tab-tourism" class="tab-btn flex items-center gap-2 px-5 py-2.5 rounded-xl font-medium text-sm bg-white/5 border border-white/10 text-slate-400 hover:text-white transition">
|
||
<i data-lucide="compass" class="w-4 h-4"></i>
|
||
<span>السياحة والتراث ومسار الأردن</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Tab Content Container -->
|
||
<div class="glass-card rounded-3xl p-8 sm:p-10">
|
||
|
||
<!-- Terrain Tab Panel -->
|
||
<div id="panel-terrain" class="tab-panel grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
|
||
<div>
|
||
<div class="inline-flex items-center gap-2 bg-amber-500/20 border border-amber-500/40 text-amber-400 px-3 py-1 rounded-md text-xs font-bold mb-4">
|
||
<i data-lucide="sun" class="w-3.5 h-3.5"></i>
|
||
<span>محرك Terrarium DEM & حساب الظلال الفلكية</span>
|
||
</div>
|
||
<h3 class="text-2xl font-extrabold text-white mb-3">تضاريس ثلاثية الأبعاد حية، خطوط كنتور، ومحاكاة مسار الشمس</h3>
|
||
<p class="text-slate-400 text-sm mb-6 leading-relaxed">
|
||
يعتمد المحرك على بطاقات الرسوميات (GPU Mesh Displacement) لتحويل مناسيب الارتفاعات الرقمية إلى نماذج جبلية حقيقية، مع حساب زاوية السمت والارتفاع الشمسي لإسقاط الظلال الفيزيائية من الفجر حتى الغروب.
|
||
</p>
|
||
<ul class="space-y-2.5 text-sm text-slate-300 mb-6">
|
||
<li class="flex items-center gap-2"><i data-lucide="check-circle-2" class="w-4 h-4 text-blue-400"></i> تظليل جبلي واقعي (Hillshade 315° NW) لوادي رم والبتراء والبحر الميت.</li>
|
||
<li class="flex items-center gap-2"><i data-lucide="check-circle-2" class="w-4 h-4 text-blue-400"></i> خطوط كنتور طبوغرافية رئيسية وفرعية كل 10 و 50 متر.</li>
|
||
<li class="flex items-center gap-2"><i data-lucide="check-circle-2" class="w-4 h-4 text-blue-400"></i> دوران سينمائي نشط 360° مع إمالة الكاميرا 60° داخل الموبايل والويب.</li>
|
||
</ul>
|
||
<a href="/#terrain3d" class="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-500 text-white font-bold px-5 py-2.5 rounded-xl text-sm transition">
|
||
<span>فتح استوديو التضاريس 3D مباشرة</span>
|
||
<i data-lucide="arrow-left" class="w-4 h-4"></i>
|
||
</a>
|
||
</div>
|
||
<div class="bg-slate-950/80 border border-white/10 rounded-2xl p-5">
|
||
<div class="text-xs font-bold text-slate-500 mb-3 tracking-wider">LIVE VIEWPORTS — JORDAN SCENIC SITES</div>
|
||
<div class="grid grid-cols-2 gap-3">
|
||
<div class="bg-white/5 p-3 rounded-xl border border-white/5">
|
||
<div class="font-bold text-sm text-white">🏜️ وادي رم وجبل أم الدامي</div>
|
||
<div class="text-xs text-slate-400">ارتفاع 1,854م | صخور جرانيتية</div>
|
||
</div>
|
||
<div class="bg-white/5 p-3 rounded-xl border border-white/5">
|
||
<div class="font-bold text-sm text-white">🌊 البحر الميت ووادي الموجب</div>
|
||
<div class="text-xs text-slate-400">أخفض نقطة بالعالم (-430م)</div>
|
||
</div>
|
||
<div class="bg-white/5 p-3 rounded-xl border border-white/5">
|
||
<div class="font-bold text-sm text-white">🏛️ السيق والخزنة بالبتراء</div>
|
||
<div class="text-xs text-slate-400">خوانق صخرية عمودية ضيقة</div>
|
||
</div>
|
||
<div class="bg-white/5 p-3 rounded-xl border border-white/5">
|
||
<div class="font-bold text-sm text-white">🏙️ تلال عمان السبعة</div>
|
||
<div class="text-xs text-slate-400">مجسمات المباني ثلاثية الأبعاد</div>
|
||
</div>
|
||
</div>
|
||
<div class="mt-4 p-3 bg-blue-500/10 border border-blue-500/20 rounded-xl text-xs text-blue-300">
|
||
⚡ معادلة الظلال الفلكية المدمجة: <code class="font-mono text-white font-bold" dir="ltr">L = H / tan(α)</code> — لحساب أطوال الظلال وزوايا حجب الرؤية لحظياً.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Navigation Tab Panel (Hidden by Default) -->
|
||
<div id="panel-nav" class="tab-panel hidden grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
|
||
<div>
|
||
<div class="inline-flex items-center gap-2 bg-emerald-500/20 border border-emerald-500/40 text-emerald-400 px-3 py-1 rounded-md text-xs font-bold mb-4">
|
||
<i data-lucide="navigation" class="w-3.5 h-3.5"></i>
|
||
<span>محرك التوجيه فائق السرعة GraphHopper & Valhalla</span>
|
||
</div>
|
||
<h3 class="text-2xl font-extrabold text-white mb-3">توجيه ملاحي ذكي، تخطيط أساطيل، ودعم كامل بدون اتصال</h3>
|
||
<p class="text-slate-400 text-sm mb-6 leading-relaxed">
|
||
بنية تحتية مصممة لتحمل ملايين الرحلات اليومية بتكلفة خادم ثابتة. يدعم التوجيه الصوتي خطوة بخطوة (Turn-by-Turn)، تجنب الازدحامات، وإعادة التوجيه الفوري دون أي استدعاءات سحابية خارجية.
|
||
</p>
|
||
<ul class="space-y-2.5 text-sm text-slate-300 mb-6">
|
||
<li class="flex items-center gap-2"><i data-lucide="check-circle-2" class="w-4 h-4 text-emerald-400"></i> ملاحة مدمجة في شاشة عائمة (Picture-in-Picture) فوق التطبيقات.</li>
|
||
<li class="flex items-center gap-2"><i data-lucide="check-circle-2" class="w-4 h-4 text-emerald-400"></i> حزم خرائط أوفلاين حقيقية (SQLite Road Graph) تعمل بدون نت نهائياً.</li>
|
||
<li class="flex items-center gap-2"><i data-lucide="check-circle-2" class="w-4 h-4 text-emerald-400"></i> تطبيع العنونة العربية وتجاوز أخطاء التهجئة والهمزات.</li>
|
||
</ul>
|
||
<a href="/#map" class="inline-flex items-center gap-2 bg-emerald-600 hover:bg-emerald-500 text-white font-bold px-5 py-2.5 rounded-xl text-sm transition">
|
||
<span>فتح خريطة الملاحة الشاملة</span>
|
||
<i data-lucide="arrow-left" class="w-4 h-4"></i>
|
||
</a>
|
||
</div>
|
||
<div class="bg-slate-950/80 border border-white/10 rounded-2xl p-5 space-y-4">
|
||
<div class="text-xs font-bold text-slate-500 tracking-wider">FLEET ENGINE TELEMETRY METRICS</div>
|
||
<div class="bg-white/5 p-3 rounded-xl">
|
||
<div class="flex justify-between text-xs mb-1">
|
||
<span class="text-slate-400">متوسط زمن حساب المسار</span>
|
||
<span class="text-emerald-400 font-bold">4.2 ميلي ثانية</span>
|
||
</div>
|
||
<div class="w-full bg-white/10 h-1.5 rounded-full overflow-hidden">
|
||
<div class="bg-emerald-400 h-full w-[95%]"></div>
|
||
</div>
|
||
</div>
|
||
<div class="bg-white/5 p-3 rounded-xl">
|
||
<div class="flex justify-between text-xs mb-1">
|
||
<span class="text-slate-400">حجم حزمة أوفلاين لطرق الأردن كاملة</span>
|
||
<span class="text-blue-400 font-bold">~114 ميغابايت</span>
|
||
</div>
|
||
<div class="w-full bg-white/10 h-1.5 rounded-full overflow-hidden">
|
||
<div class="bg-blue-400 h-full w-[70%]"></div>
|
||
</div>
|
||
</div>
|
||
<div class="bg-white/5 p-3 rounded-xl">
|
||
<div class="flex justify-between text-xs mb-1">
|
||
<span class="text-slate-400">دقة مطابقة الموقع بالطريق (Map Matching)</span>
|
||
<span class="text-orange-400 font-bold">99.8%</span>
|
||
</div>
|
||
<div class="w-full bg-white/10 h-1.5 rounded-full overflow-hidden">
|
||
<div class="bg-orange-400 h-full w-[99%]"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tactical Tab Panel (Hidden by Default) -->
|
||
<div id="panel-tactical" class="tab-panel hidden grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
|
||
<div>
|
||
<div class="inline-flex items-center gap-2 bg-orange-500/20 border border-orange-500/40 text-orange-400 px-3 py-1 rounded-md text-xs font-bold mb-4">
|
||
<i data-lucide="shield" class="w-3.5 h-3.5"></i>
|
||
<span>معايير أمنية عسكرية & شبكة MGRS</span>
|
||
</div>
|
||
<h3 class="text-2xl font-extrabold text-white mb-3">منظومة القيادة والسيطرة والاستطلاع المعزول كلياً</h3>
|
||
<p class="text-slate-400 text-sm mb-6 leading-relaxed">
|
||
منظومة عملياتية مخصصة للجهات الدفاعية والأمنية والمركز الجغرافي الملكي، توفر تتبع القوات الصديقة (BFT)، حساب خط النظر والمدى البصري (Viewshed & LOS)، والتقاطع العكسي بالميل (Mils).
|
||
</p>
|
||
<ul class="space-y-2.5 text-sm text-slate-300 mb-6">
|
||
<li class="flex items-center gap-2"><i data-lucide="check-circle-2" class="w-4 h-4 text-orange-400"></i> حساب مناطق هبوط المروحيات (HLZ) وميادين الألغام.</li>
|
||
<li class="flex items-center gap-2"><i data-lucide="check-circle-2" class="w-4 h-4 text-orange-400"></i> محدد المدى البصري بمستشعر الكاميرا ومقاييس التسارع.</li>
|
||
<li class="flex items-center gap-2"><i data-lucide="check-circle-2" class="w-4 h-4 text-orange-400"></i> عزل تام (Zero Telemetry Leakage) وحماية في بيئات GNSS-Denied.</li>
|
||
</ul>
|
||
<a href="/#tactical" class="inline-flex items-center gap-2 bg-orange-600 hover:bg-orange-500 text-white font-bold px-5 py-2.5 rounded-xl text-sm transition">
|
||
<span>دخول غرفة العمليات التكتيكية</span>
|
||
<i data-lucide="arrow-left" class="w-4 h-4"></i>
|
||
</a>
|
||
</div>
|
||
<div class="bg-slate-950/80 border border-orange-500/30 rounded-2xl p-5 space-y-3">
|
||
<div class="text-xs font-bold text-orange-400 tracking-wider">SOVEREIGN BATTLEFIELD PROTOCOLS</div>
|
||
<div class="p-3 bg-orange-500/10 border border-orange-500/20 rounded-xl">
|
||
<div class="font-bold text-xs text-orange-300">MGRS Precision Grid</div>
|
||
<div class="text-xs text-slate-400">دقة إحداثيات 1 متر مربع (10 أرقام) متوافقة مع الناتو وقيادة الأركان.</div>
|
||
</div>
|
||
<div class="p-3 bg-orange-500/10 border border-orange-500/20 rounded-xl">
|
||
<div class="font-bold text-xs text-orange-300">Dead Reckoning & PDR</div>
|
||
<div class="text-xs text-slate-400">حساب الخطى والموقع عند انقطاع الـ GPS عبر الحساسات الداخلية.</div>
|
||
</div>
|
||
<div class="p-3 bg-orange-500/10 border border-orange-500/20 rounded-xl">
|
||
<div class="font-bold text-xs text-orange-300">Air-Gapped Local Deployment</div>
|
||
<div class="text-xs text-slate-400">خوادم محلية معزولة خلف جدار ناري وطني 100% دون خوادم سحابية أجنبية.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tourism Tab Panel (Hidden by Default) -->
|
||
<div id="panel-tourism" class="tab-panel hidden grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
|
||
<div>
|
||
<div class="inline-flex items-center gap-2 bg-purple-500/20 border border-purple-500/40 text-purple-400 px-3 py-1 rounded-md text-xs font-bold mb-4">
|
||
<i data-lucide="compass" class="w-3.5 h-3.5"></i>
|
||
<span>السياحة البيئية والتراثية ومسار الأردن</span>
|
||
</div>
|
||
<h3 class="text-2xl font-extrabold text-white mb-3">استكشاف المواقع الأثرية ومسارات الهايكنج وتوثيق التراث</h3>
|
||
<p class="text-slate-400 text-sm mb-6 leading-relaxed">
|
||
تغطية شاملة لمسار الأردن (Jordan Trail 650km)، المحميات الطبيعية في ضانا والموجب وعجلون، معالم البتراء وجرش وأم قيس، مع ملفات ارتفاعات مقطعية وتوثيق تشاركي للمواقع.
|
||
</p>
|
||
<ul class="space-y-2.5 text-sm text-slate-300 mb-6">
|
||
<li class="flex items-center gap-2"><i data-lucide="check-circle-2" class="w-4 h-4 text-purple-400"></i> بروفايل الارتفاع اللحظي ومعدل انحدار المسارات للمشاة.</li>
|
||
<li class="flex items-center gap-2"><i data-lucide="check-circle-2" class="w-4 h-4 text-purple-400"></i> توثيق المعالم الأثرية ثلاثية الأبعاد ونقاط التخييم والمياه.</li>
|
||
<li class="flex items-center gap-2"><i data-lucide="check-circle-2" class="w-4 h-4 text-purple-400"></i> عرض نظيف خالي من أي نوافذ تعيق الرؤية الخرائطية.</li>
|
||
</ul>
|
||
<a href="/#tourism" class="inline-flex items-center gap-2 bg-purple-600 hover:bg-purple-500 text-white font-bold px-5 py-2.5 rounded-xl text-sm transition">
|
||
<span>فتح خريطة التراث والسياحة</span>
|
||
<i data-lucide="arrow-left" class="w-4 h-4"></i>
|
||
</a>
|
||
</div>
|
||
<div class="bg-slate-950/80 border border-white/10 rounded-2xl p-5">
|
||
<div class="text-xs font-bold text-slate-500 mb-3 tracking-wider">JORDAN TRAIL & HERITAGE HIGHLIGHTS</div>
|
||
<div class="grid grid-cols-2 gap-3">
|
||
<div class="bg-white/5 p-3 rounded-xl">
|
||
<div class="font-bold text-xs text-white">🥾 مسار ضانا إلى البتراء</div>
|
||
<div class="text-[11px] text-slate-400">صُنف من أفضل 15 مسار عالمياً</div>
|
||
</div>
|
||
<div class="bg-white/5 p-3 rounded-xl">
|
||
<div class="font-bold text-xs text-white">🏰 قلعة عجلون والربض</div>
|
||
<div class="text-[11px] text-slate-400">غابات البلوط وإطلالة جبال عجلون</div>
|
||
</div>
|
||
<div class="bg-white/5 p-3 rounded-xl">
|
||
<div class="font-bold text-xs text-white">🏜️ قيعان رم الصحراوية</div>
|
||
<div class="text-[11px] text-slate-400">مسارات المشي والسيارات 4x4</div>
|
||
</div>
|
||
<div class="bg-white/5 p-3 rounded-xl">
|
||
<div class="font-bold text-xs text-white">💧 كانيون وادي بن حماد</div>
|
||
<div class="text-[11px] text-slate-400">مياه كبريتية جارية وشلالات</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 3. VENTURE CAPITAL & UNIT ECONOMICS CALCULATOR ($0.30/TRIP SAVINGS) -->
|
||
<section class="border-y border-white/10 bg-slate-950/60 py-16 px-6">
|
||
<div class="max-w-5xl mx-auto">
|
||
|
||
<div class="text-center mb-10">
|
||
<div class="text-xs font-bold text-emerald-400 tracking-wider uppercase mb-2">اقتصاديات استثمارية وحماية هوامش الربح</div>
|
||
<h2 class="text-2xl sm:text-4xl font-extrabold text-white mb-3">كيف تحمي منصات النقل والخدمات اللوجستية أرباحها مع سيرو؟</h2>
|
||
<p class="text-slate-400 text-sm max-w-2xl mx-auto">
|
||
تفرض جوجل وماب بوكس ضريبة متزايدة لكل استدعاء ملاحي، مما يستنزف ما بين 0.25$ إلى 0.40$ من ربحية كل طلب. سيرو تحول التكلفة المتغيرة إلى بنية تحتية وطنية ثابتة.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="glass-card rounded-3xl p-8 grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
|
||
<!-- Interactive Range Slider -->
|
||
<div>
|
||
<div class="flex justify-between items-center mb-2">
|
||
<span class="text-sm font-bold text-slate-300">حجم الرحلات / الطلبات اليومية للمنظومة:</span>
|
||
<span id="rides-display" class="text-lg font-black text-blue-400">100,000 رحلة/يوم</span>
|
||
</div>
|
||
<input
|
||
type="range"
|
||
id="rides-slider"
|
||
min="10000"
|
||
max="500000"
|
||
step="5000"
|
||
value="100000"
|
||
oninput="calculateRoi(this.value)"
|
||
class="w-full accent-blue-500 h-2 bg-slate-800 rounded-lg cursor-pointer mb-6"
|
||
>
|
||
|
||
<div class="space-y-2.5 text-xs">
|
||
<div class="flex justify-between p-2.5 bg-white/5 rounded-lg">
|
||
<span class="text-slate-400">إجمالي الرحلات الشهرية:</span>
|
||
<span id="monthly-rides" class="font-bold text-white">3,000,000 رحلة</span>
|
||
</div>
|
||
<div class="flex justify-between p-2.5 bg-white/5 rounded-lg">
|
||
<span class="text-slate-400">استدعاءات الـ API الشهرية (7 استدعاء/رحلة):</span>
|
||
<span id="monthly-calls" class="font-bold text-white">21,000,000 استدعاء</span>
|
||
</div>
|
||
<div class="flex justify-between p-2.5 bg-red-500/10 border border-red-500/20 rounded-lg text-red-400">
|
||
<span>فاتورة جوجل السنوية المتوقعة:</span>
|
||
<span id="google-bill" class="font-bold font-mono">$1,260,000 / سنة</span>
|
||
</div>
|
||
<div class="flex justify-between p-2.5 bg-emerald-500/10 border border-emerald-500/20 rounded-lg text-emerald-400">
|
||
<span>تكلفة خوادم سيرو السنوية الثابتة:</span>
|
||
<span class="font-bold font-mono">$14,400 / سنة</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Net Savings Highlight Box -->
|
||
<div class="bg-gradient-to-br from-blue-600/20 to-indigo-600/30 border border-blue-500/40 rounded-2xl p-8 text-center shadow-2xl shadow-blue-500/20">
|
||
<div class="text-xs font-bold text-blue-300 uppercase tracking-wider mb-2">صافي الوفر السنوي المباشر المضاف للربحية</div>
|
||
<div id="annual-savings" class="text-4xl sm:text-5xl font-black text-white mb-2 tracking-tight">$1,245,600</div>
|
||
<div id="unit-savings" class="text-sm font-bold text-emerald-400 mb-4">توفير ما يعادل ~ 0.35$ في كل رحلة تطلبها المركبة</div>
|
||
<p class="text-xs text-slate-300 leading-relaxed mb-6">
|
||
هذا الوفر يضاعف الهامش الإجمالي (Gross Margin) لمنصات التوصيل والنقل الذكي بنسبة تتراوح بين 30% إلى 55% فورياً.
|
||
</p>
|
||
<a href="/#compare" class="inline-block bg-white hover:bg-slate-100 text-slate-900 font-extrabold px-6 py-2.5 rounded-xl text-xs shadow-lg transition">
|
||
استعراض جدول مقارنة الأسعار مع العمالقة بالتفصيل
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 4. DEVELOPER SDK & API PLAYGROUND -->
|
||
<section class="max-w-5xl mx-auto px-6 py-16">
|
||
<div class="text-center mb-8">
|
||
<div class="text-xs font-bold text-blue-400 tracking-wider uppercase mb-2">تكامل المطورين | DEVELOPER FIRST</div>
|
||
<h2 class="text-2xl sm:text-3xl font-extrabold text-white">مكتبات برمجية جاهزة للويب، الموبايل، والأنظمة الخلفية</h2>
|
||
</div>
|
||
|
||
<div class="glass-card rounded-2xl overflow-hidden shadow-2xl">
|
||
<!-- Code Tab Bar -->
|
||
<div class="flex items-center justify-between bg-white/5 px-4 py-2.5 border-b border-white/10">
|
||
<div class="flex gap-2">
|
||
<button onclick="switchCode('flutter')" id="code-btn-flutter" class="px-3 py-1 rounded-lg text-xs font-bold bg-blue-600 text-white">Flutter SDK</button>
|
||
<button onclick="switchCode('web')" id="code-btn-web" class="px-3 py-1 rounded-lg text-xs font-medium text-slate-400 hover:text-white">MapLibre JS</button>
|
||
<button onclick="switchCode('rest')" id="code-btn-rest" class="px-3 py-1 rounded-lg text-xs font-medium text-slate-400 hover:text-white">REST cURL</button>
|
||
</div>
|
||
<div class="text-[11px] text-slate-400 code-font">API: https://tiles.intaleqapp.com</div>
|
||
</div>
|
||
|
||
<!-- Code Box -->
|
||
<div class="p-6 bg-[#020408] code-font text-xs text-slate-200 overflow-x-auto leading-relaxed" dir="ltr">
|
||
|
||
<pre id="code-flutter"><code>// Siro Flutter SDK: Initialize Map & Enable 3D Terrain & Sun Shadow
|
||
import 'package:intaleq_map_sdk/intaleq_map_sdk.dart';
|
||
|
||
final controller = IntaleqMapController();
|
||
|
||
IntaleqMapWidget(
|
||
styleUri: 'https://tiles.intaleqapp.com/styles/style-3d-terrain.json',
|
||
initialCenter: LatLng(31.9539, 35.9106), // Amman Citadel
|
||
initialZoom: 14.5,
|
||
initialTilt: 60.0,
|
||
enableTerrain: true,
|
||
onMapCreated: (ctrl) {
|
||
// Start Cinematic Orbit
|
||
ctrl.orbitStep(speedTier: 1);
|
||
|
||
// Simulate Daylight Shadow from 06:00 to 18:00
|
||
ctrl.updateSunSimulation(hour: 16.5, azimuth: 245.0, elevation: 22.0);
|
||
},
|
||
);</code></pre>
|
||
|
||
<pre id="code-web" class="hidden"><code>// MapLibre WebGL: Native GPU-Accelerated 3D Terrain & Contours
|
||
import maplibregl from 'maplibre-gl';
|
||
|
||
const map = new maplibregl.Map({
|
||
container: 'map-container',
|
||
style: 'https://tiles.intaleqapp.com/styles/style-3d-terrain.json',
|
||
center: [35.4444, 30.3285], // Petra Siq & Treasury
|
||
zoom: 15.2,
|
||
pitch: 65,
|
||
bearing: -20,
|
||
maxPitch: 85
|
||
});
|
||
|
||
map.on('load', () => {
|
||
// Activate Native 3D DEM Terrain
|
||
map.setTerrain({ source: 'jordan-dem', exaggeration: 1.5 });
|
||
});</code></pre>
|
||
|
||
<pre id="code-rest" class="hidden"><code># Calculate Turn-by-Turn Route via Sovereign API
|
||
curl -X POST "https://tiles.intaleqapp.com/api/v1/routing/calculate" \
|
||
-H "Authorization: Bearer SIRO_SOVEREIGN_KEY_PROD" \
|
||
-H "Content-Type: application/json" \
|
||
-d '{
|
||
"coordinates": [
|
||
{"lat": 31.9539, "lng": 35.9106},
|
||
{"lat": 31.9700, "lng": 35.8500}
|
||
],
|
||
"vehicle": "car",
|
||
"elevation": true
|
||
}'</code></pre>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FOOTER -->
|
||
<footer class="border-t border-white/10 bg-[#04070e] py-10 px-6 text-center text-xs text-slate-400">
|
||
<div class="max-w-4xl mx-auto space-y-4">
|
||
<div class="flex justify-center gap-4 flex-wrap text-slate-300">
|
||
<a href="/#portal" class="hover:text-white">البوابة التعريفية</a>
|
||
<span>•</span>
|
||
<a href="/#terrain3d" class="hover:text-white">الخريطة ثلاثية الأبعاد</a>
|
||
<span>•</span>
|
||
<a href="/#map" class="hover:text-white">الملاحة الشاملة</a>
|
||
<span>•</span>
|
||
<a href="/#tactical" class="hover:text-white">المنظومة التكتيكية</a>
|
||
<span>•</span>
|
||
<a href="/#tourism" class="hover:text-white">الخريطة السياحية</a>
|
||
<span>•</span>
|
||
<a href="/#compare" class="hover:text-white">مقارنة التكاليف</a>
|
||
</div>
|
||
<div>© 2026 Siro Spatial Systems & Intaleq Platform. All Sovereign Rights Reserved.</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- SCRIPT FOR TABS & CALCULATOR -->
|
||
<script>
|
||
lucide.createIcons();
|
||
|
||
function switchTab(tabId) {
|
||
document.querySelectorAll('.tab-panel').forEach(el => el.classList.add('hidden'));
|
||
document.querySelectorAll('.tab-btn').forEach(btn => {
|
||
btn.classList.remove('bg-blue-600/20', 'border-blue-500', 'text-white', 'shadow-lg', 'shadow-blue-500/20');
|
||
btn.classList.add('bg-white/5', 'border-white/10', 'text-slate-400');
|
||
});
|
||
|
||
document.getElementById('panel-' + tabId).classList.remove('hidden');
|
||
const activeBtn = document.getElementById('btn-tab-' + tabId);
|
||
activeBtn.classList.remove('bg-white/5', 'border-white/10', 'text-slate-400');
|
||
activeBtn.classList.add('bg-blue-600/20', 'border-blue-500', 'text-white', 'shadow-lg', 'shadow-blue-500/20');
|
||
}
|
||
|
||
function switchCode(lang) {
|
||
document.querySelectorAll('#code-flutter, #code-web, #code-rest').forEach(el => el.classList.add('hidden'));
|
||
document.querySelectorAll('#code-btn-flutter, #code-btn-web, #code-btn-rest').forEach(btn => {
|
||
btn.classList.remove('bg-blue-600', 'text-white');
|
||
btn.classList.add('text-slate-400');
|
||
});
|
||
|
||
document.getElementById('code-' + lang).classList.remove('hidden');
|
||
const btn = document.getElementById('code-btn-' + lang);
|
||
btn.classList.remove('text-slate-400');
|
||
btn.classList.add('bg-blue-600', 'text-white');
|
||
}
|
||
|
||
function calculateRoi(ridesPerDay) {
|
||
const rides = Number(ridesPerDay);
|
||
document.getElementById('rides-display').innerText = rides.toLocaleString() + ' رحلة/يوم';
|
||
const monthlyRides = rides * 30;
|
||
document.getElementById('monthly-rides').innerText = monthlyRides.toLocaleString() + ' رحلة';
|
||
const monthlyCalls = monthlyRides * 7;
|
||
document.getElementById('monthly-calls').innerText = monthlyCalls.toLocaleString() + ' استدعاء';
|
||
|
||
const googleMonthly = (monthlyCalls / 1000) * 5.0;
|
||
const googleAnnual = googleMonthly * 12;
|
||
document.getElementById('google-bill').innerText = '$' + Math.round(googleAnnual).toLocaleString() + ' / سنة';
|
||
|
||
const siroAnnual = 1200 * 12;
|
||
const netSavings = Math.max(0, googleAnnual - siroAnnual);
|
||
document.getElementById('annual-savings').innerText = '$' + Math.round(netSavings).toLocaleString();
|
||
|
||
const unit = ((googleMonthly - 1200) / monthlyRides).toFixed(2);
|
||
document.getElementById('unit-savings').innerText = 'توفير ما يعادل ~ ' + unit + '$ في كل رحلة تطلبها المركبة';
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|