360 lines
27 KiB
JavaScript
360 lines
27 KiB
JavaScript
/**
|
|
* Documentation Engine for Intaleq Dashboard
|
|
* Comprehensive API Reference (EN/AR)
|
|
* Updated with Premium Visuals & High-Performance Examples
|
|
*/
|
|
|
|
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);
|
|
|
|
// Active state management
|
|
document.querySelectorAll('.docs-nav-link').forEach(l => l.classList.remove('active', 'bg-blue-500/10', 'text-blue-400'));
|
|
e.currentTarget.classList.add('active', 'bg-blue-500/10', 'text-blue-400');
|
|
});
|
|
});
|
|
},
|
|
|
|
renderSection: (id) => {
|
|
const container = document.getElementById('docs-content');
|
|
if (!container) return;
|
|
|
|
const lang = 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">
|
|
<h3 class="text-5xl font-black mb-6 text-gradient">${isAr ? 'انطلق في ثوانٍ' : 'Launch in Seconds'}</h3>
|
|
<p class="text-slate-300 text-xl leading-relaxed max-w-2xl">
|
|
${isAr ? 'مرحباً بك في مستقبل الخرائط في المنطقة. توفر لك منصة "انطلاق" واجهات برمجية ذكية، خرائط Vector فائقة الدقة، ومباني ثلاثية الأبعاد متكاملة.' : 'Welcome to the future of regional mapping. Intaleq provides high-fidelity vector tiles, intelligent geocoding, and native 3D building support for Jordan & Syria.'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
<div class="glass p-10 rounded-[2.5rem] border-white/5 bg-gradient-to-b from-white/[0.02] to-transparent hover:border-blue-500/30 transition-all group">
|
|
<div class="w-16 h-16 rounded-2xl bg-blue-500/10 flex items-center justify-center text-blue-400 mb-8 font-black text-2xl group-hover:scale-110 transition-transform">01</div>
|
|
<h4 class="font-black text-2xl mb-4">${isAr ? 'مفتاح الوصول' : 'Access Key'}</h4>
|
|
<p class="text-slate-400 leading-relaxed">${isAr ? 'قم بإنشاء مفتاح API من لوحة التحكم لتفعيل طلباتك.' : 'Generate your secure API key from the dashboard to authenticate requests.'}</p>
|
|
</div>
|
|
<div class="glass p-10 rounded-[2.5rem] border-white/5 bg-gradient-to-b from-white/[0.02] to-transparent hover:border-emerald-500/30 transition-all group">
|
|
<div class="w-16 h-16 rounded-2xl bg-emerald-500/10 flex items-center justify-center text-emerald-400 mb-8 font-black text-2xl group-hover:scale-110 transition-transform">02</div>
|
|
<h4 class="font-black text-2xl mb-4">${isAr ? 'تكامل الخريطة' : 'Map Integration'}</h4>
|
|
<p class="text-slate-400 leading-relaxed">${isAr ? 'اختر النمط (Obsidian أو Light) وادمج الخريطة في تطبيقك.' : 'Select a theme and integrate the vector tiles using our GL styles.'}</p>
|
|
</div>
|
|
<div class="glass p-10 rounded-[2.5rem] border-white/5 bg-gradient-to-b from-white/[0.02] to-transparent hover:border-violet-500/30 transition-all group">
|
|
<div class="w-16 h-16 rounded-2xl bg-violet-500/10 flex items-center justify-center text-violet-400 mb-8 font-black text-2xl group-hover:scale-110 transition-transform">03</div>
|
|
<h4 class="font-black text-2xl mb-4">${isAr ? 'بيانات ذكية' : 'Smart Data'}</h4>
|
|
<p class="text-slate-400 leading-relaxed">${isAr ? 'استخدم خدمات البحث والتوجيه لإضافة ذكاء مكاني لتطبيقك.' : 'Leverage Geocoding and Routing APIs for advanced spatial intelligence.'}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-8 pt-6">
|
|
<div class="flex items-center gap-4">
|
|
<div class="h-8 w-1.5 bg-blue-500 rounded-full"></div>
|
|
<h4 class="text-3xl font-black">${isAr ? 'بيانات الوصول والمصادقة' : 'Domain & Authentication'}</h4>
|
|
</div>
|
|
|
|
<div class="bg-slate-950 rounded-[3rem] p-10 border border-slate-800 relative group overflow-hidden shadow-2xl">
|
|
<div class="absolute top-0 right-0 p-6 opacity-20 group-hover:opacity-100 transition-opacity">
|
|
<span class="bg-blue-500/10 text-blue-400 px-4 py-1.5 rounded-full text-xs font-black uppercase tracking-widest">Production URL</span>
|
|
</div>
|
|
<code class="text-blue-400 font-mono text-2xl block mb-6 select-all">https://map-saas.intaleq.com/api</code>
|
|
<div class="flex flex-col md:flex-row gap-8 text-slate-400">
|
|
<div class="flex-1 space-y-2">
|
|
<p class="text-sm font-bold uppercase text-slate-500 tracking-widest italic">${isAr ? 'طريقة المصادقة' : 'Auth Method'}</p>
|
|
<p class="text-lg">${isAr ? 'يتم إرسال المفتاح عبر الـ HTTP Header التالي:' : 'Pass your API key in the following HTTP header:'}</p>
|
|
<code class="text-blue-300 font-mono font-black text-xl">x-api-key</code>
|
|
</div>
|
|
<div class="flex-1 space-y-2 border-slate-800 md:border-l md:pl-8">
|
|
<p class="text-sm font-bold uppercase text-slate-500 tracking-widest italic">${isAr ? 'نطاق الوصول' : 'Allowed Origins'}</p>
|
|
<p class="text-lg">${isAr ? 'تأكد من إضافة النطاق الخاص بك في إعدادات المفتاح.' : 'Ensure your request origin is listed in the key restrictions.'}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-8 pt-6">
|
|
<div class="flex items-center gap-4">
|
|
<div class="h-8 w-1.5 bg-emerald-500 rounded-full"></div>
|
|
<h4 class="text-3xl font-black">${isAr ? 'حدود الاستخدام (RPM)' : 'Rate Limiting (RPM)'}</h4>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
|
|
<div class="glass p-6 rounded-3xl border-white/5 text-center">
|
|
<p class="text-[10px] font-black uppercase text-slate-500 mb-1">Free</p>
|
|
<p class="text-2xl font-black text-white">5 <span class="text-[10px] text-slate-500">RPM</span></p>
|
|
</div>
|
|
<div class="glass p-6 rounded-3xl border-emerald-500/20 text-center bg-emerald-500/5">
|
|
<p class="text-[10px] font-black uppercase text-emerald-500 mb-1">Starter</p>
|
|
<p class="text-2xl font-black text-white">100 <span class="text-[10px] text-slate-500">RPM</span></p>
|
|
</div>
|
|
<div class="glass p-6 rounded-3xl border-blue-500/20 text-center bg-blue-500/5">
|
|
<p class="text-[10px] font-black uppercase text-blue-500 mb-1">Pro</p>
|
|
<p class="text-2xl font-black text-white">500 <span class="text-[10px] text-slate-500">RPM</span></p>
|
|
</div>
|
|
<div class="glass p-6 rounded-3xl border-violet-500/20 text-center bg-violet-500/5">
|
|
<p class="text-[10px] font-black uppercase text-violet-500 mb-1">Enterprise</p>
|
|
<p class="text-2xl font-black text-white">5000 <span class="text-[10px] text-slate-500">RPM</span></p>
|
|
</div>
|
|
</div>
|
|
</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-5xl font-black mb-4 text-gradient">${isAr ? 'خرائط الـ Vector' : 'Vector Tiles API'}</h3>
|
|
<p class="text-slate-400 text-xl max-w-xl">${isAr ? 'خرائط تفاعلية فائقة السرعة تدعم العرض ثلاثي الأبعاد والتحكم الكامل في الخصائص.' : 'High-performance interactive maps with native 3D buildings and custom GL styles.'}</p>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<span class="px-4 py-2 bg-emerald-500/10 text-emerald-400 rounded-2xl text-xs font-black uppercase tracking-widest border border-emerald-500/20">Active</span>
|
|
<span class="px-4 py-2 bg-blue-500/10 text-blue-400 rounded-2xl text-xs font-black uppercase tracking-widest border border-blue-500/20">V1.2</span>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="endpoint-card glass rounded-[3.5rem] border-white/5 overflow-hidden shadow-2xl bg-gradient-to-b from-white/[0.03] to-transparent">
|
|
<div class="p-8 bg-white/[0.04] border-b border-white/5 flex items-center justify-between">
|
|
<div class="flex items-center gap-6">
|
|
<div class="px-4 py-2 bg-emerald-500 text-white text-sm font-black rounded-xl shadow-lg shadow-emerald-500/20 uppercase tracking-tighter">GET</div>
|
|
<code class="text-lg font-bold text-slate-100 font-mono">/v1/maps/style.json</code>
|
|
</div>
|
|
<div class="hidden md:flex items-center gap-2 text-slate-500 text-xs font-bold italic">
|
|
<i data-lucide="clock" class="w-3.5 h-3.5"></i> 20-40ms response
|
|
</div>
|
|
</div>
|
|
<div class="p-12">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
|
<div class="space-y-8">
|
|
<div>
|
|
<h5 class="text-[10px] font-black uppercase tracking-[0.2em] text-blue-400 mb-6">${isAr ? 'المعاملات المدعومة' : 'Query Parameters'}</h5>
|
|
<div class="space-y-4">
|
|
<div class="flex items-center justify-between p-4 bg-white/5 rounded-2xl border border-white/5 group hover:border-blue-500/20 transition-all">
|
|
<div>
|
|
<code class="text-blue-300 font-bold">theme</code>
|
|
<p class="text-[10px] text-slate-500 italic mt-1">${isAr ? 'نمط الخريطة (light أو obsidian)' : 'Map visual theme (light | obsidian)'}</p>
|
|
</div>
|
|
<span class="text-[10px] font-mono text-slate-600 uppercase">Optional</span>
|
|
</div>
|
|
<div class="flex items-center justify-between p-4 bg-white/5 rounded-2xl border border-white/5 group hover:border-blue-500/20 transition-all">
|
|
<div>
|
|
<code class="text-blue-300 font-bold">3d</code>
|
|
<p class="text-[10px] text-slate-500 italic mt-1">${isAr ? 'تفعيل/إلغاء المباني ثلاثية الأبعاد' : 'Enable/Disable 3D buildings'}</p>
|
|
</div>
|
|
<span class="text-[10px] font-mono text-slate-600 uppercase">Boolean</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-6 bg-slate-900/40 rounded-3xl border border-white/5 italic text-slate-500 text-sm leading-relaxed relative">
|
|
<i data-lucide="info" class="absolute -top-3 -right-3 w-8 h-8 text-blue-500/20"></i>
|
|
${isAr ? 'ملاحظة: يتم استهلاك رصيد الخرائط بناءً على عدد الـ (Tile Requests) التي يتم طلبها أثناء التنقل في الخريطة.' : 'Note: Quota is consumed per tile request. High-density 3D areas may consume more resources.'}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-6">
|
|
<div class="bg-slate-950 rounded-[2.5rem] p-8 border border-slate-800 shadow-inner group">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<span class="text-[10px] font-black uppercase text-blue-400 tracking-widest flex items-center gap-2">
|
|
<i data-lucide="code-2" class="w-3 h-3"></i> JavaScript (MapLibre)
|
|
</span>
|
|
</div>
|
|
<pre class="text-[11px] font-mono text-slate-300 leading-relaxed overflow-x-auto whitespace-pre">
|
|
const map = new maplibregl.Map({
|
|
container: 'map-id',
|
|
style: 'https://map-saas.intaleq.com/api/v1/maps/style.json?theme=obsidian',
|
|
transformRequest: (url) => {
|
|
return {
|
|
url: url,
|
|
headers: { 'x-api-key': 'YOUR_KEY_HERE' }
|
|
}
|
|
}
|
|
});</pre>
|
|
</div>
|
|
</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-5xl font-black mb-4 text-gradient">${isAr ? 'البحث المكاني (Geocoding)' : 'Geocoding API'}</h3>
|
|
<p class="text-slate-400 text-xl max-w-2xl">${isAr ? 'حوّل العناوين إلى إحداثيات أو العكس بدقة غير مسبوقة في الأردن وسوريا.' : 'Transform addresses into coordinates or reverse resolve locations with extreme accuracy in the Levant region.'}</p>
|
|
</header>
|
|
|
|
<div class="grid grid-cols-1 gap-10">
|
|
<!-- Forward Search -->
|
|
<div class="endpoint-card glass rounded-[3.5rem] border-white/5 overflow-hidden shadow-2xl">
|
|
<div class="p-8 bg-blue-500/5 border-b border-white/5 flex items-center justify-between">
|
|
<div class="flex items-center gap-4">
|
|
<div class="px-4 py-2 bg-blue-600 text-white text-xs font-black rounded-xl shadow-lg shadow-blue-500/20 uppercase tracking-widest">SEARCH</div>
|
|
<code class="text-base font-bold text-slate-200">/v1/geocoding/search</code>
|
|
</div>
|
|
</div>
|
|
<div class="p-12">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
|
<div class="space-y-8">
|
|
<table class="w-full text-left">
|
|
<thead class="text-[10px] items-center text-slate-500 font-black uppercase tracking-[0.2em]">
|
|
<tr class="border-b border-white/5">
|
|
<th class="pb-4">${isAr ? 'البارامتر' : 'Key'}</th>
|
|
<th class="pb-4 text-right">${isAr ? 'الوصف' : 'Description'}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="text-sm">
|
|
<tr class="border-b border-white/[0.02]">
|
|
<td class="py-5 font-bold text-blue-400 font-mono text-base">q</td>
|
|
<td class="py-5 text-right text-slate-400 italic">${isAr ? 'نص البحث (مثلاً: "عمان، الجبيهة")' : 'Query string (e.g., "Amman, Jordan")'}</td>
|
|
</tr>
|
|
<tr class="border-b border-white/[0.02]">
|
|
<td class="py-5 font-bold text-blue-400 font-mono text-base">limit</td>
|
|
<td class="py-5 text-right text-slate-400 italic">${isAr ? 'عدد النتائج (الافتراضي: 5)' : 'Max results limit'}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="bg-blue-500/5 rounded-[2rem] p-8 border border-blue-500/10">
|
|
<div class="flex items-center gap-4 mb-4">
|
|
<i data-lucide="terminal" class="w-5 h-5 text-blue-400"></i>
|
|
<span class="text-xs font-black uppercase text-blue-400 tracking-widest">cURL Fast Access</span>
|
|
</div>
|
|
<code class="text-xs font-mono text-slate-300 block select-all leading-loose">
|
|
curl "https://map-saas.intaleq.com/api/v1/geocoding/search?q=Amman" \\<br>
|
|
-H "x-api-key: YOUR_SECURE_KEY"
|
|
</code>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-slate-950 rounded-[3rem] p-8 border border-slate-800 shadow-inner">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<span class="text-[10px] font-black uppercase text-emerald-400 tracking-widest flex items-center gap-2">
|
|
<i data-lucide="layers" class="w-3 h-3"></i> Response Structure
|
|
</span>
|
|
<span class="text-[10px] font-mono text-slate-600">application/json</span>
|
|
</div>
|
|
<pre class="text-[11px] font-mono text-emerald-300/80 leading-relaxed overflow-y-auto h-64 scrollbar-hide">
|
|
[
|
|
{
|
|
"name": "Amman",
|
|
"name_ar": "عمان",
|
|
"lat": 31.9539,
|
|
"lng": 35.9106,
|
|
"district": "Capital",
|
|
"country": "Jordan",
|
|
"type": "city",
|
|
"boundingbox": [31.81, 32.07, 35.72, 36.14]
|
|
}
|
|
]</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`,
|
|
'routing-api': `
|
|
<div class="space-y-12 animate-in fade-in slide-in-from-bottom-6 duration-700">
|
|
<header class="relative p-12 overflow-hidden rounded-[3.5rem] bg-slate-900 border border-white/5 md:flex md:items-center md:justify-between shadow-2xl">
|
|
<div class="absolute -top-24 -left-24 w-64 h-64 bg-violet-600/10 blur-[100px] rounded-full"></div>
|
|
<div class="relative z-10">
|
|
<h3 class="text-5xl font-black mb-4 text-gradient">${isAr ? 'محرك التوجيه (Routing)' : 'Routing Engine'}</h3>
|
|
<p class="text-slate-400 text-xl max-w-xl">${isAr ? 'حساب أسرع المسارات مع تحليلات لحظية لحركة المرور في مراكز المدن.' : 'Fast pathfinding with traffic-aware duration metrics for urban environments.'}</p>
|
|
</div>
|
|
<div class="relative z-10 mt-6 md:mt-0">
|
|
<div class="w-32 h-32 rounded-full border-4 border-violet-500/20 flex items-center justify-center animate-pulse">
|
|
<i data-lucide="navigation" class="w-12 h-12 text-violet-400"></i>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="endpoint-card glass rounded-[3.5rem] border-white/5 overflow-hidden shadow-2xl">
|
|
<div class="p-8 bg-violet-500/5 border-b border-white/5 flex items-center justify-between">
|
|
<div class="flex items-center gap-4">
|
|
<div class="px-4 py-2 bg-violet-600 text-white text-xs font-black rounded-xl shadow-lg shadow-violet-500/20 uppercase tracking-widest">ROUTE</div>
|
|
<code class="text-base font-bold text-slate-200">/v1/routing/route</code>
|
|
</div>
|
|
</div>
|
|
<div class="p-12">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
|
<div class="space-y-10">
|
|
<div>
|
|
<h5 class="text-[10px] font-black uppercase tracking-[0.2em] text-violet-400 mb-8">${isAr ? 'إحداثيات المسار' : 'Waypoints & Logic'}</h5>
|
|
<div class="grid grid-cols-2 gap-6">
|
|
<div class="bg-indigo-950/20 p-6 rounded-[2rem] border border-white/5">
|
|
<code class="text-violet-300 font-bold block mb-1">start</code>
|
|
<p class="text-[10px] text-slate-500 italic">"35.91,31.95" (lng,lat)</p>
|
|
</div>
|
|
<div class="bg-indigo-950/20 p-6 rounded-[2rem] border border-white/5">
|
|
<code class="text-violet-300 font-bold block mb-1">end</code>
|
|
<p class="text-[10px] text-slate-500 italic">"35.85,31.82" (lng,lat)</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<div class="flex items-center justify-between p-5 bg-white/5 rounded-2xl border border-white/5">
|
|
<code class="text-blue-300 font-bold">profile</code>
|
|
<span class="text-xs text-slate-400 font-bold italic">car | bike | foot</span>
|
|
</div>
|
|
<div class="flex items-center justify-between p-5 bg-white/5 rounded-2xl border border-white/5">
|
|
<code class="text-blue-300 font-bold">alternatives</code>
|
|
<span class="text-xs text-slate-600 font-black uppercase">Boolean</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-slate-950 rounded-[3rem] p-10 border border-slate-800 shadow-inner group">
|
|
<div class="flex justify-between items-center mb-8">
|
|
<span class="text-[10px] font-black uppercase text-violet-400 tracking-widest flex items-center gap-2">
|
|
<i data-lucide="activity" class="w-3.5 h-3.5"></i> Traffic Analytics JSON
|
|
</span>
|
|
</div>
|
|
<pre class="text-[11px] font-mono text-violet-300/80 leading-loose overflow-x-auto h-56">
|
|
{
|
|
"distance": 8420.5,
|
|
"duration": 940,
|
|
"traffic_duration": 1120,
|
|
"geometry": "encoded_polyline_here",
|
|
"steps": [
|
|
{ "instruction": "Turn right...", "distance": 200 }
|
|
]
|
|
}</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`
|
|
};
|
|
|
|
container.innerHTML = content[id] || '<div class="h-64 flex items-center justify-center italic text-slate-600">Documentation section coming soon...</div>';
|
|
|
|
// Re-initialize icons
|
|
if (window.lucide) lucide.createIcons();
|
|
}
|
|
};
|
|
|
|
// Global initializer
|
|
window.docs = docs;
|