648 lines
48 KiB
JavaScript
648 lines
48 KiB
JavaScript
/**
|
|
* Documentation Engine for Intaleq Dashboard
|
|
* Commercial Enterprise Mapping Platform & Native SDKs (iOS Swift, Android Kotlin, Flutter Dart, Web JS/TS)
|
|
* Supports English & Arabic Localization
|
|
*/
|
|
|
|
const docs = {
|
|
init: () => {
|
|
console.log('📚 Intaleq Documentation Module Init');
|
|
docs.bindEvents();
|
|
|
|
// Initial render based on existing active links or default
|
|
const activeLink = document.querySelector('.docs-nav-link.active');
|
|
const section = activeLink ? activeLink.getAttribute('data-section') : 'getting-started';
|
|
docs.renderSection(section);
|
|
},
|
|
|
|
bindEvents: () => {
|
|
document.querySelectorAll('.docs-nav-link').forEach(link => {
|
|
link.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
const section = e.currentTarget.getAttribute('data-section');
|
|
docs.renderSection(section);
|
|
});
|
|
});
|
|
},
|
|
|
|
renderSection: (id) => {
|
|
const container = document.getElementById('docs-content');
|
|
if (!container) return;
|
|
|
|
// Synchronize active sidebar navigation link
|
|
document.querySelectorAll('.docs-nav-link').forEach(l => {
|
|
const sec = l.getAttribute('data-section');
|
|
if (sec === id) {
|
|
l.classList.add('active', 'bg-blue-500/10', 'text-blue-400');
|
|
l.classList.remove('text-slate-400');
|
|
} else {
|
|
l.classList.remove('active', 'bg-blue-500/10', 'text-blue-400');
|
|
l.classList.add('text-slate-400');
|
|
}
|
|
});
|
|
|
|
const lang = (window.i18n && window.i18n.currentLang) || 'en';
|
|
const isAr = lang === 'ar';
|
|
|
|
const content = {
|
|
'getting-started': `
|
|
<div class="space-y-12 animate-in fade-in slide-in-from-bottom-6 duration-700">
|
|
<div class="relative overflow-hidden rounded-[3rem] p-12 bg-gradient-to-br from-blue-600/20 via-blue-500/5 to-transparent border border-white/10 group">
|
|
<div class="absolute -top-24 -right-24 w-96 h-96 bg-blue-500/10 blur-[120px] rounded-full group-hover:bg-blue-500/20 transition-all duration-700"></div>
|
|
<div class="relative z-10">
|
|
<div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-blue-500/20 text-blue-300 text-xs font-bold mb-4 border border-blue-500/30">
|
|
<i data-lucide="sparkles" class="w-3.5 h-3.5"></i>
|
|
${isAr ? 'منصة الخرائط والذكاء المكاني للأعمال' : 'Enterprise Commercial Mapping Platform'}
|
|
</div>
|
|
<h3 class="text-4xl md:text-5xl font-black mb-6 text-gradient">${isAr ? 'ابدأ التكامل مع منصة انطلاق' : 'Launch in Minutes'}</h3>
|
|
<p class="text-slate-300 text-lg md:text-xl leading-relaxed max-w-3xl">
|
|
${isAr ? 'توفر منصة "انطلاق" حلول الخرائط المتطورة لتطبيقات النقل الذكي (Ride-Hailing)، شركات التوصيل واللوجستيات (Delivery & Logistics)، والتجارة الإلكترونية، مع توفير يصل إلى 85% مقارنة بخرائط جوجل.' : 'Intaleq provides cutting-edge mapping infrastructure for Ride-Hailing, Delivery & Logistics, and E-commerce applications across Jordan & the MENA region at 85% lower cost than Google Maps.'}
|
|
</p>
|
|
<div class="flex flex-wrap gap-4 mt-8">
|
|
<a href="javascript:void(0)" onclick="docs.renderSection('sdks-ios')" class="px-6 py-3 bg-slate-900 text-white rounded-2xl font-bold text-sm flex items-center gap-2 border border-white/10 hover:border-blue-500/50 hover:bg-slate-800 transition-all">
|
|
<i data-lucide="apple" class="w-4 h-4 text-slate-300"></i> iOS SDK (Swift)
|
|
</a>
|
|
<a href="javascript:void(0)" onclick="docs.renderSection('sdks-android')" class="px-6 py-3 bg-slate-900 text-white rounded-2xl font-bold text-sm flex items-center gap-2 border border-white/10 hover:border-emerald-500/50 hover:bg-slate-800 transition-all">
|
|
<i data-lucide="smartphone" class="w-4 h-4 text-emerald-400"></i> Android SDK (Kotlin)
|
|
</a>
|
|
<a href="javascript:void(0)" onclick="docs.renderSection('sdks-flutter')" class="px-6 py-3 bg-blue-600 text-white rounded-2xl font-bold text-sm flex items-center gap-2 hover:bg-blue-500 shadow-lg shadow-blue-500/25 transition-all">
|
|
<i data-lucide="layers" class="w-4 h-4 text-cyan-200"></i> Flutter SDK
|
|
</a>
|
|
<a href="javascript:void(0)" onclick="docs.renderSection('sdks-web')" class="px-6 py-3 bg-white text-slate-950 rounded-2xl font-bold text-sm flex items-center gap-2 hover:bg-slate-100 transition-all">
|
|
<i data-lucide="globe" class="w-4 h-4 text-amber-500"></i> Web JavaScript / TS
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<div class="glass p-8 rounded-[2rem] border-white/5 bg-gradient-to-b from-white/[0.02] to-transparent hover:border-blue-500/30 transition-all group">
|
|
<div class="w-14 h-14 rounded-2xl bg-blue-500/10 flex items-center justify-center text-blue-400 mb-6 font-black text-xl group-hover:scale-110 transition-transform">01</div>
|
|
<h4 class="font-black text-xl mb-3 text-white">${isAr ? 'مفتاح الـ API الآمن' : 'API Key Setup'}</h4>
|
|
<p class="text-slate-400 text-sm leading-relaxed">${isAr ? 'أنشئ مفتاح وصول محمي بضوابط النطاق (Domain Whitelist) لتطبيقاتك التجارية.' : 'Generate production API keys with IP/Domain restrictions to protect your usage.'}</p>
|
|
</div>
|
|
<div class="glass p-8 rounded-[2rem] border-white/5 bg-gradient-to-b from-white/[0.02] to-transparent hover:border-emerald-500/30 transition-all group">
|
|
<div class="w-14 h-14 rounded-2xl bg-emerald-500/10 flex items-center justify-center text-emerald-400 mb-6 font-black text-xl group-hover:scale-110 transition-transform">02</div>
|
|
<h4 class="font-black text-xl mb-3 text-white">${isAr ? 'خرائط مخصصة بهويتك' : 'Custom Map Styling'}</h4>
|
|
<p class="text-slate-400 text-sm leading-relaxed">${isAr ? 'اختر النمط الفاتح النظيف للتوصيل، أو النمط الداكن الفخم لتطبيقات النقل، مع مباني 3D.' : 'Choose between Light Delivery or Obsidian Dark ride-hailing styles with 3D buildings.'}</p>
|
|
</div>
|
|
<div class="glass p-8 rounded-[2rem] border-white/5 bg-gradient-to-b from-white/[0.02] to-transparent hover:border-violet-500/30 transition-all group">
|
|
<div class="w-14 h-14 rounded-2xl bg-violet-500/10 flex items-center justify-center text-violet-400 mb-6 font-black text-xl group-hover:scale-110 transition-transform">03</div>
|
|
<h4 class="font-black text-xl mb-3 text-white">${isAr ? 'توجيه وبحث فائق الدقة' : 'Smart Routing & Search'}</h4>
|
|
<p class="text-slate-400 text-sm leading-relaxed">${isAr ? 'احسب مسار وتكلفة الرحلة لحظياً مع مصفوفة مطابقة السائقين بأقرب الطلبات.' : 'Calculate route fares, accurate ETAs, and multi-driver dispatch matrices in milliseconds.'}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-6 pt-4">
|
|
<div class="flex items-center gap-4">
|
|
<div class="h-7 w-1.5 bg-blue-500 rounded-full"></div>
|
|
<h4 class="text-2xl font-black text-white">${isAr ? 'بيانات الوصول والمصادقة المباشرة' : 'Production Endpoints & Authentication'}</h4>
|
|
</div>
|
|
|
|
<div class="bg-slate-950 rounded-[2.5rem] p-8 border border-slate-800 relative group overflow-hidden shadow-2xl">
|
|
<div class="absolute top-0 right-0 p-6 opacity-40 group-hover:opacity-100 transition-opacity">
|
|
<span class="bg-blue-500/10 text-blue-400 px-3 py-1 rounded-full text-xs font-black uppercase tracking-widest border border-blue-500/20">Production Endpoint</span>
|
|
</div>
|
|
<code class="text-blue-400 font-mono text-xl block mb-6 select-all">https://map-saas.intaleqapp.com/api</code>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 text-slate-400 pt-4 border-t border-slate-900">
|
|
<div>
|
|
<p class="text-xs font-bold uppercase text-slate-500 tracking-widest mb-1">${isAr ? 'المصادقة عبر الـ Header (موصى به في Backend/Apps)' : 'Header Auth (Recommended)'}</p>
|
|
<code class="text-blue-300 font-mono font-bold text-sm bg-blue-500/10 px-2 py-1 rounded">x-api-key: in_9478b32836d19cff73db3063</code>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs font-bold uppercase text-slate-500 tracking-widest mb-1">${isAr ? 'المصادقة عبر الـ Query (للخرائط المباشرة)' : 'Query Parameter Auth'}</p>
|
|
<code class="text-emerald-300 font-mono font-bold text-sm bg-emerald-500/10 px-2 py-1 rounded">?key=in_9478b32836d19cff73db3063</code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`,
|
|
|
|
'sdks-ios': `
|
|
<div class="space-y-10 animate-in fade-in slide-in-from-bottom-6 duration-700">
|
|
<header class="flex items-center gap-5 p-8 rounded-[2.5rem] bg-gradient-to-r from-slate-900 via-slate-900/60 to-transparent border border-white/10">
|
|
<div class="w-16 h-16 rounded-2xl bg-white/10 flex items-center justify-center text-white text-3xl shadow-xl">
|
|
<i data-lucide="apple" class="w-9 h-9"></i>
|
|
</div>
|
|
<div>
|
|
<div class="flex items-center gap-3 mb-1">
|
|
<h3 class="text-3xl font-black text-white">iOS Native SDK</h3>
|
|
<span class="px-3 py-0.5 rounded-full bg-blue-500/20 text-blue-400 text-xs font-bold border border-blue-500/30">Swift 5.9+ / UIKit & SwiftUI</span>
|
|
</div>
|
|
<p class="text-slate-400 text-base">${isAr ? 'مكتبة آبل الأصلية لتطبيقات النقل والتوصيل (Ride-Hailing & Delivery Apps) بسرعة 60 إطاراً في الثانية.' : 'Native iOS SDK for ride-hailing, driver tracking, and delivery logistics apps on iPhone & iPad.'}</p>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Installation -->
|
|
<div class="space-y-4">
|
|
<h4 class="text-xl font-bold text-white flex items-center gap-2">
|
|
<i data-lucide="download" class="w-5 h-5 text-blue-400"></i> ${isAr ? '1. التثبيت (Installation)' : '1. Installation'}
|
|
</h4>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div class="bg-slate-950 p-6 rounded-2xl border border-slate-800">
|
|
<p class="text-xs font-bold text-slate-400 uppercase tracking-wider mb-2">Swift Package Manager (SPM)</p>
|
|
<code class="text-xs text-blue-300 font-mono select-all block bg-white/5 p-3 rounded-xl">
|
|
https://github.com/maplibre/maplibre-native-spm
|
|
</code>
|
|
</div>
|
|
<div class="bg-slate-950 p-6 rounded-2xl border border-slate-800">
|
|
<p class="text-xs font-bold text-slate-400 uppercase tracking-wider mb-2">CocoaPods (Podfile)</p>
|
|
<code class="text-xs text-emerald-300 font-mono select-all block bg-white/5 p-3 rounded-xl">
|
|
pod 'MapLibre', '~> 5.13.0'
|
|
</code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Swift Code Example -->
|
|
<div class="space-y-4">
|
|
<div class="flex items-center justify-between">
|
|
<h4 class="text-xl font-bold text-white flex items-center gap-2">
|
|
<i data-lucide="code" class="w-5 h-5 text-blue-400"></i> ${isAr ? '2. مثال كود Swift كامل لتطبيق توصيل/نقل' : '2. Swift Implementation (Delivery / Ride-Hailing)'}
|
|
</h4>
|
|
<span class="text-xs font-mono text-slate-500">DeliveryMapViewController.swift</span>
|
|
</div>
|
|
<pre class="bg-slate-950 p-8 rounded-[2rem] border border-slate-800 text-xs font-mono text-slate-300 leading-relaxed overflow-x-auto select-all">
|
|
<span class="text-purple-400">import</span> UIKit
|
|
<span class="text-purple-400">import</span> MapLibre
|
|
|
|
<span class="text-purple-400">class</span> <span class="text-yellow-300">DeliveryMapViewController</span>: <span class="text-blue-300">UIViewController</span>, <span class="text-blue-300">MLNMapViewDelegate</span> {
|
|
|
|
<span class="text-purple-400">var</span> mapView: <span class="text-blue-300">MLNMapView</span>!
|
|
<span class="text-purple-400">let</span> apiKey = <span class="text-emerald-300">"YOUR_INTALEQ_API_KEY"</span>
|
|
|
|
<span class="text-purple-400">override func</span> <span class="text-blue-400">viewDidLoad</span>() {
|
|
<span class="text-purple-400">super</span>.viewDidLoad()
|
|
|
|
<span class="text-slate-500">// 1. رابط نمط الخريطة التجاري من انطلاق</span>
|
|
<span class="text-purple-400">let</span> styleURL = <span class="text-blue-300">URL</span>(string: <span class="text-emerald-300">"https://map-saas.intaleqapp.com/tactical-style.json?key=\(apiKey)"</span>)!
|
|
|
|
<span class="text-slate-500">// 2. تهيئة الخريطة وتثبيت موقع البداية على عمان</span>
|
|
mapView = <span class="text-blue-300">MLNMapView</span>(frame: view.bounds, styleURL: styleURL)
|
|
mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
|
|
mapView.setCenter(<span class="text-blue-300">CLLocationCoordinate2D</span>(latitude: <span class="text-cyan-300">31.9539</span>, longitude: <span class="text-cyan-300">35.9106</span>), zoomLevel: <span class="text-cyan-300">14</span>, animated: <span class="text-purple-400">false</span>)
|
|
mapView.delegate = <span class="text-purple-400">self</span>
|
|
|
|
view.addSubview(mapView)
|
|
|
|
<span class="text-slate-500">// 3. إضافة علامة موقع السائق / العميل</span>
|
|
<span class="text-purple-400">let</span> pickupPoint = <span class="text-blue-300">MLNPointAnnotation</span>()
|
|
pickupPoint.coordinate = <span class="text-blue-300">CLLocationCoordinate2D</span>(latitude: <span class="text-cyan-300">31.9539</span>, longitude: <span class="text-cyan-300">35.9106</span>)
|
|
pickupPoint.title = <span class="text-emerald-300">"نقطة استلام الطلب"</span>
|
|
pickupPoint.subtitle = <span class="text-slate-400">"شارع مكة، عمان"</span>
|
|
mapView.addAnnotation(pickupPoint)
|
|
}
|
|
}</pre>
|
|
</div>
|
|
|
|
<!-- SwiftUI Example -->
|
|
<div class="space-y-4">
|
|
<h4 class="text-xl font-bold text-white flex items-center gap-2">
|
|
<i data-lucide="layout" class="w-5 h-5 text-blue-400"></i> ${isAr ? '3. تكامل SwiftUI' : '3. SwiftUI View Component'}
|
|
</h4>
|
|
<pre class="bg-slate-950 p-8 rounded-[2rem] border border-slate-800 text-xs font-mono text-slate-300 leading-relaxed overflow-x-auto select-all">
|
|
<span class="text-purple-400">import</span> SwiftUI
|
|
<span class="text-purple-400">import</span> MapLibre
|
|
|
|
<span class="text-purple-400">struct</span> <span class="text-yellow-300">IntaleqMapView</span>: <span class="text-blue-300">UIViewRepresentable</span> {
|
|
<span class="text-purple-400">func</span> makeUIView(context: Context) -> <span class="text-blue-300">MLNMapView</span> {
|
|
<span class="text-purple-400">let</span> url = <span class="text-blue-300">URL</span>(string: <span class="text-emerald-300">"https://map-saas.intaleqapp.com/tactical-style.json"</span>)!
|
|
<span class="text-purple-400">let</span> map = <span class="text-blue-300">MLNMapView</span>(frame: .zero, styleURL: url)
|
|
map.setCenter(<span class="text-blue-300">CLLocationCoordinate2D</span>(latitude: <span class="text-cyan-300">31.9539</span>, longitude: <span class="text-cyan-300">35.9106</span>), zoomLevel: <span class="text-cyan-300">13</span>, animated: <span class="text-purple-400">false</span>)
|
|
<span class="text-purple-400">return</span> map
|
|
}
|
|
|
|
<span class="text-purple-400">func</span> updateUIView(_ uiView: <span class="text-blue-300">MLNMapView</span>, context: Context) {}
|
|
}</pre>
|
|
</div>
|
|
</div>
|
|
`,
|
|
|
|
'sdks-android': `
|
|
<div class="space-y-10 animate-in fade-in slide-in-from-bottom-6 duration-700">
|
|
<header class="flex items-center gap-5 p-8 rounded-[2.5rem] bg-gradient-to-r from-emerald-950/40 via-slate-900 to-transparent border border-white/10">
|
|
<div class="w-16 h-16 rounded-2xl bg-emerald-500/10 flex items-center justify-center text-emerald-400 text-3xl shadow-xl">
|
|
<i data-lucide="smartphone" class="w-9 h-9"></i>
|
|
</div>
|
|
<div>
|
|
<div class="flex items-center gap-3 mb-1">
|
|
<h3 class="text-3xl font-black text-white">Android Native SDK</h3>
|
|
<span class="px-3 py-0.5 rounded-full bg-emerald-500/20 text-emerald-400 text-xs font-bold border border-emerald-500/30">Kotlin & Jetpack Compose</span>
|
|
</div>
|
|
<p class="text-slate-400 text-base">${isAr ? 'مكتبة أندرويد لتطبيقات الكباتن والسائقين وتتبع مسارات الشحنات بكفاءة وسرعة فائقة.' : 'High-performance Android SDK for driver apps, delivery fleets, and real-time asset tracking.'}</p>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Gradle Setup -->
|
|
<div class="space-y-4">
|
|
<h4 class="text-xl font-bold text-white flex items-center gap-2">
|
|
<i data-lucide="download" class="w-5 h-5 text-emerald-400"></i> ${isAr ? '1. إعداد Gradle (build.gradle.kts)' : '1. Gradle Dependency'}
|
|
</h4>
|
|
<pre class="bg-slate-950 p-6 rounded-2xl border border-slate-800 text-xs font-mono text-emerald-300 select-all">
|
|
dependencies {
|
|
implementation(<span class="text-amber-300">"org.maplibre.gl:android-sdk:11.5.1"</span>)
|
|
}</pre>
|
|
</div>
|
|
|
|
<!-- Kotlin Code Example -->
|
|
<div class="space-y-4">
|
|
<div class="flex items-center justify-between">
|
|
<h4 class="text-xl font-bold text-white flex items-center gap-2">
|
|
<i data-lucide="code" class="w-5 h-5 text-emerald-400"></i> ${isAr ? '2. كود Kotlin لتطبيق السائق / النقل الذكي' : '2. Kotlin Implementation (Driver App)'}
|
|
</h4>
|
|
<span class="text-xs font-mono text-slate-500">DriverMapActivity.kt</span>
|
|
</div>
|
|
<pre class="bg-slate-950 p-8 rounded-[2rem] border border-slate-800 text-xs font-mono text-slate-300 leading-relaxed overflow-x-auto select-all">
|
|
<span class="text-purple-400">package</span> com.intaleq.driver
|
|
|
|
<span class="text-purple-400">import</span> android.os.Bundle
|
|
<span class="text-purple-400">import</span> androidx.appcompat.app.AppCompatActivity
|
|
<span class="text-purple-400">import</span> org.maplibre.android.MapLibre
|
|
<span class="text-purple-400">import</span> org.maplibre.android.camera.CameraPosition
|
|
<span class="text-purple-400">import</span> org.maplibre.android.geometry.LatLng
|
|
<span class="text-purple-400">import</span> org.maplibre.android.maps.MapView
|
|
|
|
<span class="text-purple-400">class</span> <span class="text-yellow-300">DriverMapActivity</span> : <span class="text-blue-300">AppCompatActivity</span>() {
|
|
|
|
<span class="text-purple-400">private lateinit var</span> mapView: <span class="text-blue-300">MapView</span>
|
|
|
|
<span class="text-purple-400">override fun</span> <span class="text-blue-400">onCreate</span>(savedInstanceState: <span class="text-blue-300">Bundle</span>?) {
|
|
<span class="text-purple-400">super</span>.onCreate(savedInstanceState)
|
|
|
|
<span class="text-slate-500">// 1. تهيئة محرك الخريطة</span>
|
|
<span class="text-blue-300">MapLibre</span>.getInstance(<span class="text-purple-400">this</span>)
|
|
|
|
setContentView(R.layout.activity_driver_map)
|
|
mapView = findViewById(R.id.mapView)
|
|
mapView.onCreate(savedInstanceState)
|
|
|
|
<span class="text-slate-500">// 2. تحميل نمط انطلاق التجاري</span>
|
|
<span class="text-purple-400">val</span> styleUrl = <span class="text-emerald-300">"https://map-saas.intaleqapp.com/tactical-style.json"</span>
|
|
|
|
mapView.getMapAsync { map ->
|
|
map.setStyle(styleUrl) { style ->
|
|
<span class="text-slate-500">// 3. تعيين موقع السائق وزاوية الرؤية 3D</span>
|
|
map.cameraPosition = <span class="text-blue-300">CameraPosition</span>.Builder()
|
|
.target(<span class="text-blue-300">LatLng</span>(<span class="text-cyan-300">31.9539</span>, <span class="text-cyan-300">35.9106</span>))
|
|
.zoom(<span class="text-cyan-300">14.0</span>)
|
|
.tilt(<span class="text-cyan-300">45.0</span>)
|
|
.build()
|
|
}
|
|
}
|
|
}
|
|
|
|
<span class="text-purple-400">override fun</span> <span class="text-blue-400">onResume</span>() { <span class="text-purple-400">super</span>.onResume(); mapView.onResume() }
|
|
<span class="text-purple-400">override fun</span> <span class="text-blue-400">onPause</span>() { <span class="text-purple-400">super</span>.onPause(); mapView.onPause() }
|
|
<span class="text-purple-400">override fun</span> <span class="text-blue-400">onDestroy</span>() { <span class="text-purple-400">super</span>.onDestroy(); mapView.onDestroy() }
|
|
}</pre>
|
|
</div>
|
|
</div>
|
|
`,
|
|
|
|
'sdks-flutter': `
|
|
<div class="space-y-10 animate-in fade-in slide-in-from-bottom-6 duration-700">
|
|
<header class="flex items-center gap-5 p-8 rounded-[2.5rem] bg-gradient-to-r from-cyan-950/40 via-slate-900 to-transparent border border-white/10">
|
|
<div class="w-16 h-16 rounded-2xl bg-cyan-500/10 flex items-center justify-center text-cyan-400 text-3xl shadow-xl">
|
|
<i data-lucide="layers" class="w-9 h-9"></i>
|
|
</div>
|
|
<div>
|
|
<div class="flex items-center gap-3 mb-1">
|
|
<h3 class="text-3xl font-black text-white">Flutter SDK</h3>
|
|
<span class="px-3 py-0.5 rounded-full bg-cyan-500/20 text-cyan-400 text-xs font-bold border border-cyan-500/30">Dart 3.5+ / iOS & Android</span>
|
|
</div>
|
|
<p class="text-slate-400 text-base">${isAr ? 'حزمة فلاتر الرسمية الموحدة لتطوير تطبيقات النقل والتوصيل الميداني على كلا النظامين بكود واحد.' : 'Official Flutter package for cross-platform commercial dispatch and ride-hailing apps.'}</p>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Pubspec Dependency -->
|
|
<div class="space-y-4">
|
|
<h4 class="text-xl font-bold text-white flex items-center gap-2">
|
|
<i data-lucide="download" class="w-5 h-5 text-cyan-400"></i> ${isAr ? '1. التثبيت (pubspec.yaml)' : '1. Pubspec Installation'}
|
|
</h4>
|
|
<pre class="bg-slate-950 p-6 rounded-2xl border border-slate-800 text-xs font-mono text-cyan-300 select-all">
|
|
dependencies:
|
|
intaleq_maps: ^1.0.0</pre>
|
|
</div>
|
|
|
|
<!-- Flutter Dart Code -->
|
|
<div class="space-y-4">
|
|
<div class="flex items-center justify-between">
|
|
<h4 class="text-xl font-bold text-white flex items-center gap-2">
|
|
<i data-lucide="code" class="w-5 h-5 text-cyan-400"></i> ${isAr ? '2. كود Flutter (Dart) لتطبيق التوصيل' : '2. Flutter Dart Widget'}
|
|
</h4>
|
|
<span class="text-xs font-mono text-slate-500">ride_tracking_page.dart</span>
|
|
</div>
|
|
<pre class="bg-slate-950 p-8 rounded-[2rem] border border-slate-800 text-xs font-mono text-slate-300 leading-relaxed overflow-x-auto select-all">
|
|
<span class="text-purple-400">import</span> <span class="text-emerald-300">'package:flutter/material.dart'</span>;
|
|
<span class="text-purple-400">import</span> <span class="text-emerald-300">'package:intaleq_maps/intaleq_maps.dart'</span>;
|
|
|
|
<span class="text-purple-400">class</span> <span class="text-yellow-300">RideTrackingPage</span> <span class="text-purple-400">extends</span> <span class="text-blue-300">StatelessWidget</span> {
|
|
<span class="text-purple-400">const</span> <span class="text-yellow-300">RideTrackingPage</span>({<span class="text-purple-400">super</span>.key});
|
|
|
|
<span class="text-purple-400">@override</span>
|
|
<span class="text-blue-300">Widget</span> build(<span class="text-blue-300">BuildContext</span> context) {
|
|
<span class="text-purple-400">return</span> <span class="text-blue-300">Scaffold</span>(
|
|
body: <span class="text-blue-300">IntaleqMap</span>(
|
|
apiKey: <span class="text-emerald-300">'YOUR_INTALEQ_KEY'</span>,
|
|
styleString: <span class="text-emerald-300">'https://map-saas.intaleqapp.com/tactical-style.json'</span>,
|
|
initialCameraPosition: <span class="text-purple-400">const</span> <span class="text-blue-300">CameraPosition</span>(
|
|
target: <span class="text-blue-300">LatLng</span>(<span class="text-cyan-300">31.9539</span>, <span class="text-cyan-300">35.9106</span>),
|
|
zoom: <span class="text-cyan-300">14.0</span>,
|
|
tilt: <span class="text-cyan-300">40.0</span>,
|
|
),
|
|
myLocationEnabled: <span class="text-purple-400">true</span>,
|
|
myLocationTrackingMode: <span class="text-blue-300">MyLocationTrackingMode</span>.Tracking,
|
|
onMapCreated: (controller) {
|
|
<span class="text-slate-500">// الخريطة جاهزة لعرض خط المسار وحركة السائق</span>
|
|
},
|
|
),
|
|
);
|
|
}
|
|
}</pre>
|
|
</div>
|
|
</div>
|
|
`,
|
|
|
|
'sdks-web': `
|
|
<div class="space-y-10 animate-in fade-in slide-in-from-bottom-6 duration-700">
|
|
<header class="flex items-center gap-5 p-8 rounded-[2.5rem] bg-gradient-to-r from-amber-950/40 via-slate-900 to-transparent border border-white/10">
|
|
<div class="w-16 h-16 rounded-2xl bg-amber-500/10 flex items-center justify-center text-amber-400 text-3xl shadow-xl">
|
|
<i data-lucide="globe" class="w-9 h-9"></i>
|
|
</div>
|
|
<div>
|
|
<div class="flex items-center gap-3 mb-1">
|
|
<h3 class="text-3xl font-black text-white">JavaScript / TypeScript SDK</h3>
|
|
<span class="px-3 py-0.5 rounded-full bg-amber-500/20 text-amber-400 text-xs font-bold border border-amber-500/30">Web & React / Vue / Angular</span>
|
|
</div>
|
|
<p class="text-slate-400 text-base">${isAr ? 'مكتبة الويب للوحات تحكم الإدارة (Dispatch Portals) وتتبع الأساطيل المباشر.' : 'Web mapping SDK for fleet dispatch dashboards and customer web tracking.'}</p>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- NPM Install -->
|
|
<div class="space-y-4">
|
|
<h4 class="text-xl font-bold text-white flex items-center gap-2">
|
|
<i data-lucide="download" class="w-5 h-5 text-amber-400"></i> ${isAr ? '1. التثبيت عبر NPM' : '1. NPM Package'}
|
|
</h4>
|
|
<pre class="bg-slate-950 p-6 rounded-2xl border border-slate-800 text-xs font-mono text-amber-300 select-all">
|
|
npm install maplibre-gl @mapbox/mapbox-gl-rtl-text</pre>
|
|
</div>
|
|
|
|
<!-- Web Code Example -->
|
|
<div class="space-y-4">
|
|
<div class="flex items-center justify-between">
|
|
<h4 class="text-xl font-bold text-white flex items-center gap-2">
|
|
<i data-lucide="code" class="w-5 h-5 text-amber-400"></i> ${isAr ? '2. كود التكامل (JavaScript / TypeScript)' : '2. JavaScript / TypeScript Implementation'}
|
|
</h4>
|
|
<span class="text-xs font-mono text-slate-500">dispatch_map.ts</span>
|
|
</div>
|
|
<pre class="bg-slate-950 p-8 rounded-[2rem] border border-slate-800 text-xs font-mono text-slate-300 leading-relaxed overflow-x-auto select-all">
|
|
<span class="text-purple-400">import</span> maplibregl <span class="text-purple-400">from</span> <span class="text-emerald-300">'maplibre-gl'</span>;
|
|
<span class="text-purple-400">import</span> <span class="text-emerald-300">'maplibre-gl/dist/maplibre-gl.css'</span>;
|
|
|
|
<span class="text-slate-500">// 1. تفعيل محرك الخطوط العربية (RTL Plugin)</span>
|
|
maplibregl.setRTLTextPlugin(
|
|
<span class="text-emerald-300">'https://map-saas.intaleqapp.com/rtl-plugin.js'</span>,
|
|
<span class="text-purple-400">null</span>,
|
|
<span class="text-purple-400">true</span>
|
|
);
|
|
|
|
<span class="text-slate-500">// 2. تهيئة خريطة لوحة التحكم</span>
|
|
<span class="text-purple-400">const</span> map = <span class="text-purple-400">new</span> maplibregl.<span class="text-blue-300">Map</span>({
|
|
container: <span class="text-emerald-300">'map'</span>,
|
|
style: <span class="text-emerald-300">'https://map-saas.intaleqapp.com/tactical-style.json'</span>,
|
|
center: [<span class="text-cyan-300">35.9106</span>, <span class="text-cyan-300">31.9539</span>],
|
|
zoom: <span class="text-cyan-300">12.5</span>,
|
|
pitch: <span class="text-cyan-300">45</span>
|
|
});
|
|
|
|
<span class="text-slate-500">// 3. إضافة سائق على الخريطة</span>
|
|
<span class="text-purple-400">new</span> maplibregl.<span class="text-blue-300">Marker</span>({ color: <span class="text-emerald-300">'#0071E3'</span> })
|
|
.setLngLat([<span class="text-cyan-300">35.9106</span>, <span class="text-cyan-300">31.9539</span>])
|
|
.setPopup(<span class="text-purple-400">new</span> maplibregl.<span class="text-blue-300">Popup</span>().setHTML(<span class="text-emerald-300">'<h4>كابتن سيرو: أحمد (متاح للطلب)</h4>'</span>))
|
|
.addTo(map);</pre>
|
|
</div>
|
|
</div>
|
|
`,
|
|
|
|
'tiles-api': `
|
|
<div class="space-y-12 animate-in fade-in slide-in-from-bottom-6 duration-700">
|
|
<header class="flex flex-col md:flex-row md:items-end justify-between gap-6">
|
|
<div>
|
|
<h3 class="text-4xl md:text-5xl font-black mb-4 text-gradient">${isAr ? 'خدمة خرائط الـ Vector Tiles' : 'Map Vector Tiles API'}</h3>
|
|
<p class="text-slate-400 text-lg max-w-2xl">${isAr ? 'خرائط متجهة تفاعلية فائقة السرعة تدعم العرض ثلاثي الأبعاد والتحكم في طبقات الطرق والمباني وأسماء الأحياء باللغة العربية.' : 'High-performance interactive vector tiles with native 3D buildings, Arabic typography, and commercial POIs.'}</p>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="endpoint-card glass rounded-[3rem] border-white/5 overflow-hidden shadow-2xl bg-gradient-to-b from-white/[0.03] to-transparent">
|
|
<div class="p-6 bg-white/[0.04] border-b border-white/5 flex items-center justify-between">
|
|
<div class="flex items-center gap-4">
|
|
<div class="px-3.5 py-1.5 bg-emerald-500 text-white text-xs font-black rounded-xl uppercase tracking-wider">GET</div>
|
|
<code class="text-base font-bold text-slate-100 font-mono">/v1/maps/style.json</code>
|
|
</div>
|
|
</div>
|
|
<div class="p-8">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
<div class="space-y-6">
|
|
<h5 class="text-xs font-black uppercase tracking-wider text-blue-400">${isAr ? 'المعاملات المدعومة (Parameters)' : 'Query Parameters'}</h5>
|
|
<div class="space-y-3">
|
|
<div class="flex items-center justify-between p-3.5 bg-white/5 rounded-xl border border-white/5">
|
|
<code class="text-blue-300 font-bold">theme</code>
|
|
<span class="text-xs font-mono text-slate-400">obsidian (داكن) | light (فاتح للتوصيل)</span>
|
|
</div>
|
|
<div class="flex items-center justify-between p-3.5 bg-white/5 rounded-xl border border-white/5">
|
|
<code class="text-blue-300 font-bold">key</code>
|
|
<span class="text-xs font-mono text-rose-400 font-bold">مفتاح API الخاص بك (مطلوب)</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-slate-950 rounded-2xl p-6 border border-slate-800">
|
|
<h5 class="text-xs font-black uppercase tracking-wider text-slate-500 mb-4">${isAr ? 'رابط النمط المباشر (Direct Style URL)' : 'Direct Style URL'}</h5>
|
|
<code class="text-xs text-blue-400 break-all select-all font-mono leading-relaxed block bg-white/5 p-4 rounded-xl">
|
|
https://map-saas.intaleqapp.com/tactical-style.json?key=YOUR_API_KEY
|
|
</code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`,
|
|
|
|
'geocoding-api': `
|
|
<div class="space-y-12 animate-in fade-in slide-in-from-bottom-6 duration-700">
|
|
<header>
|
|
<h3 class="text-4xl md:text-5xl font-black mb-4 text-gradient">${isAr ? 'خدمة البحث المكاني وعناوين التوصيل (Geocoding API)' : 'Geocoding & Places API'}</h3>
|
|
<p class="text-slate-400 text-lg max-w-2xl">${isAr ? 'محرك البحث الذكي لتحديد نقاط استلام وتوصيل الطلبات، والمطاعم، والمتاجر، والأحياء بدقة فائقة في الأردن وسوريا.' : 'Intelligent location search and reverse geocoding tailored for delivery pickups and street address resolution.'}</p>
|
|
</header>
|
|
|
|
<!-- Forward Search -->
|
|
<div class="endpoint-card glass rounded-[3rem] border-white/5 overflow-hidden shadow-2xl mb-8">
|
|
<div class="p-6 bg-blue-500/5 border-b border-white/5 flex items-center justify-between">
|
|
<div class="flex items-center gap-4">
|
|
<div class="px-3.5 py-1.5 bg-blue-600 text-white text-xs font-black rounded-xl uppercase tracking-wider">GET</div>
|
|
<code class="text-base font-bold text-slate-200">/v1/geocoding/search</code>
|
|
</div>
|
|
<span class="text-xs text-slate-400 font-bold">${isAr ? 'البحث عن الأماكن والعناوين' : 'Forward Place Search'}</span>
|
|
</div>
|
|
<div class="p-8">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
<div class="space-y-4">
|
|
<h5 class="text-xs font-black uppercase tracking-wider text-blue-400">${isAr ? 'معاملات الطلب (Query Params)' : 'Request Parameters'}</h5>
|
|
<div class="space-y-2 text-xs">
|
|
<div class="flex justify-between p-2.5 bg-white/5 rounded-lg border border-white/5"><code>q</code><span>نص البحث (مثال: "مطعم القدس شارع الجامعة")</span></div>
|
|
<div class="flex justify-between p-2.5 bg-white/5 rounded-lg border border-white/5"><code>lat, lng</code><span>إحداثيات العميل لترتيب الأقرب أولاً</span></div>
|
|
<div class="flex justify-between p-2.5 bg-white/5 rounded-lg border border-white/5"><code>limit</code><span>عدد النتائج المطلوبة (افتراضي: 5)</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-slate-950 rounded-2xl p-6 border border-slate-800">
|
|
<h5 class="text-xs font-black uppercase tracking-wider text-emerald-400 mb-3">${isAr ? 'مخرجات الـ JSON التجارية' : 'Commercial JSON Response'}</h5>
|
|
<pre class="text-[11px] font-mono text-emerald-300 leading-relaxed overflow-y-auto max-h-60 select-all">
|
|
{
|
|
"status": "success",
|
|
"query": "مطعم القدس شارع الجامعة",
|
|
"results": [
|
|
{
|
|
"id": "poi_98231",
|
|
"name": "مطعم القدس",
|
|
"name_en": "Al Quds Restaurant",
|
|
"category": "restaurant",
|
|
"formatted_address": "شارع الجامعة الأردنية، الجبيهة، عمان",
|
|
"location": {
|
|
"lat": 32.01542,
|
|
"lng": 35.86981
|
|
},
|
|
"neighborhood": "الجبيهة",
|
|
"city": "عمان",
|
|
"confidence": 0.98
|
|
}
|
|
]
|
|
}</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Reverse Geocoding -->
|
|
<div class="endpoint-card glass rounded-[3rem] border-white/5 overflow-hidden shadow-2xl">
|
|
<div class="p-6 bg-emerald-500/5 border-b border-white/5 flex items-center justify-between">
|
|
<div class="flex items-center gap-4">
|
|
<div class="px-3.5 py-1.5 bg-emerald-600 text-white text-xs font-black rounded-xl uppercase tracking-wider">GET</div>
|
|
<code class="text-base font-bold text-slate-200">/v1/geocoding/reverse</code>
|
|
</div>
|
|
<span class="text-xs text-slate-400 font-bold">${isAr ? 'تحويل موقع السائق إلى عنوان وفاتورة' : 'Reverse Coordinate to Address'}</span>
|
|
</div>
|
|
<div class="p-8">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
<div class="space-y-4">
|
|
<h5 class="text-xs font-black uppercase tracking-wider text-emerald-400">${isAr ? 'معاملات الطلب' : 'Request Parameters'}</h5>
|
|
<div class="space-y-2 text-xs">
|
|
<div class="flex justify-between p-2.5 bg-white/5 rounded-lg border border-white/5"><code>lat</code><span>خط العرض لموقع السائق/المركبة</span></div>
|
|
<div class="flex justify-between p-2.5 bg-white/5 rounded-lg border border-white/5"><code>lng</code><span>خط الطول لموقع السائق/المركبة</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-slate-950 rounded-2xl p-6 border border-slate-800">
|
|
<h5 class="text-xs font-black uppercase tracking-wider text-emerald-400 mb-3">${isAr ? 'مخرجات العنوان التلقائي' : 'Resolved Address Response'}</h5>
|
|
<pre class="text-[11px] font-mono text-emerald-300 leading-relaxed overflow-y-auto max-h-60 select-all">
|
|
{
|
|
"status": "success",
|
|
"formatted_address": "شارع مكة، أم أذينة، عمان",
|
|
"street": "شارع مكة",
|
|
"neighborhood": "أم أذينة",
|
|
"city": "عمان",
|
|
"location": {
|
|
"lat": 31.9821,
|
|
"lng": 35.8574
|
|
}
|
|
}</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`,
|
|
|
|
'routing-api': `
|
|
<div class="space-y-12 animate-in fade-in slide-in-from-bottom-6 duration-700">
|
|
<header>
|
|
<h3 class="text-4xl md:text-5xl font-black mb-4 text-gradient">${isAr ? 'محرك التوجيه وحساب الأجرة والملاحة (Routing API)' : 'Routing & Navigation API'}</h3>
|
|
<p class="text-slate-400 text-lg max-w-2xl">${isAr ? 'حساب أسرع المسارات، تقدير وقت الوصول الحقيقي (ETA)، حساب مسافة الرحلة بدقة لحساب الأجرة، والتوجيه خطوة بخطوة.' : 'Turn-by-turn navigation engine with traffic-aware duration, distance metrics for fare calculation, and route polylines.'}</p>
|
|
</header>
|
|
|
|
<div class="endpoint-card glass rounded-[3rem] border-white/5 overflow-hidden shadow-2xl">
|
|
<div class="p-6 bg-violet-500/5 border-b border-white/5 flex items-center justify-between">
|
|
<div class="flex items-center gap-4">
|
|
<div class="px-3.5 py-1.5 bg-violet-600 text-white text-xs font-black rounded-xl uppercase tracking-wider">GET / POST</div>
|
|
<code class="text-base font-bold text-slate-200">/v1/routing/route</code>
|
|
</div>
|
|
<span class="text-xs text-slate-400 font-bold">${isAr ? 'حساب المسار وتوجيه السائق' : 'Route Navigation'}</span>
|
|
</div>
|
|
<div class="p-8">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
<div class="space-y-4">
|
|
<h5 class="text-xs font-black uppercase tracking-wider text-violet-400">${isAr ? 'معاملات طلب الرحلة (Params)' : 'Parameters'}</h5>
|
|
<div class="p-5 bg-slate-900/50 rounded-2xl border border-white/5 text-xs text-slate-300 space-y-3">
|
|
<div class="flex justify-between border-b border-white/5 pb-2"><span>start</span><code class="text-violet-300 font-mono">35.9106,31.9539</code></div>
|
|
<div class="flex justify-between border-b border-white/5 pb-2"><span>end</span><code class="text-violet-300 font-mono">36.0380,32.1351</code></div>
|
|
<div class="flex justify-between border-b border-white/5 pb-2"><span>profile</span><span class="text-slate-400">car (سيارة) | delivery (دراجة توصيل)</span></div>
|
|
<div class="flex justify-between"><span>traffic</span><span class="text-emerald-400 font-bold">true (حساب الازدحام المروري)</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-slate-950 rounded-2xl p-6 border border-slate-800">
|
|
<h5 class="text-xs font-black uppercase tracking-wider text-violet-400 mb-3">${isAr ? 'المخرجات التجارية لحساب الأجرة والمسار' : 'Commercial Response (Fare & ETA)'}</h5>
|
|
<pre class="text-[11px] font-mono text-violet-300 leading-relaxed overflow-y-auto max-h-72 select-all">
|
|
{
|
|
"status": "success",
|
|
"route": {
|
|
"distance_meters": 8450,
|
|
"distance_km": 8.45,
|
|
"duration_seconds": 780,
|
|
"duration_minutes": 13.0,
|
|
"traffic_delay_seconds": 120,
|
|
"estimated_fare_jod": 2.53,
|
|
"geometry": "_cvbE_th{Ev@iJpHtDLEJKz@^XJn@...",
|
|
"steps": [
|
|
{
|
|
"instruction": "انطلق باتجاه الشمال على شارع وصفي التل",
|
|
"instruction_en": "Head north on Wasfi Al-Tal St",
|
|
"distance_meters": 1200,
|
|
"duration_seconds": 110
|
|
},
|
|
{
|
|
"instruction": "اتجه يميناً عند دوار الواحة نحو شارع المدينة المنورة",
|
|
"instruction_en": "Turn right at Al-Waha Circle onto Al-Madina St",
|
|
"distance_meters": 3400,
|
|
"duration_seconds": 310
|
|
},
|
|
{
|
|
"instruction": "لقد وصلت إلى وجهتك على اليمين",
|
|
"instruction_en": "You have arrived at your destination on the right",
|
|
"distance_meters": 0,
|
|
"duration_seconds": 0
|
|
}
|
|
]
|
|
}
|
|
}</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`
|
|
};
|
|
|
|
// Fallback for generic 'sdks'
|
|
content['sdks'] = content['sdks-flutter'];
|
|
|
|
container.innerHTML = content[id] || '<div class="h-64 flex items-center justify-center italic text-slate-500">Documentation section coming soon...</div>';
|
|
|
|
// Re-initialize lucide icons
|
|
if (window.lucide) lucide.createIcons();
|
|
}
|
|
};
|
|
|
|
// Global initializer
|
|
window.docs = docs;
|