1143 lines
102 KiB
HTML
1143 lines
102 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="منظومة خرائط وطنية تكتيكية مستقلة 100% بدون إنترنت — للقيادة العامة للقوات المسلحة الأردنية والمركز الجغرافي الملكي">
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<script>
|
||
tailwind.config = {
|
||
theme: { extend: {
|
||
fontFamily: { sans: ['-apple-system','BlinkMacSystemFont','"SF Pro Display"','"SF Pro Text"','"SF Arabic"','Segoe UI','Tahoma','Arial','sans-serif'] },
|
||
colors: { ink:'#060A12', ink2:'#0A1120', opsblue:'#1E90FF', opsblue2:'#00B4D8', opscyan:'#00D4FF', gold:'#FFB800', danger:'#FF4444' },
|
||
}}
|
||
}
|
||
</script>
|
||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||
<style>
|
||
:root{ --opsblue:#1E90FF; --opsblue2:#00B4D8; --opscyan:#00D4FF; --gold:#FFB800; --danger:#FF4444; }
|
||
*{ -webkit-tap-highlight-color:transparent; }
|
||
html{ scroll-behavior:smooth; scroll-padding-top:120px; }
|
||
body{ background:#060A12; color:#E8F4FD; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","SF Arabic","Segoe UI",Tahoma,Arial,sans-serif; overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
|
||
h1,h2,h3,.font-head{ font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","SF Arabic","Segoe UI",Tahoma,Arial,sans-serif; letter-spacing:-.01em; }
|
||
::selection{ background:#1E90FF; color:#020810; }
|
||
::-webkit-scrollbar{ width:10px; } ::-webkit-scrollbar-track{ background:#060A12; }
|
||
::-webkit-scrollbar-thumb{ background:linear-gradient(#1E90FF,#00B4D8); border-radius:8px; }
|
||
|
||
/* خلفيات العمليات - شبكة MGRS زرقاء عملياتية */
|
||
.mgrs-bg{
|
||
background-image:
|
||
linear-gradient(rgba(30,144,255,.06) 1px, transparent 1px),
|
||
linear-gradient(90deg, rgba(30,144,255,.06) 1px, transparent 1px),
|
||
linear-gradient(rgba(30,144,255,.03) 1px, transparent 1px),
|
||
linear-gradient(90deg, rgba(30,144,255,.03) 1px, transparent 1px);
|
||
background-size:120px 120px,120px 120px,24px 24px,24px 24px;
|
||
mask-image:radial-gradient(ellipse 90% 80% at 50% 20%, black 30%, transparent 100%);
|
||
}
|
||
.glass{ background:linear-gradient(160deg, rgba(10,18,30,.92), rgba(6,10,18,.96)); border:1px solid rgba(30,144,255,.2); backdrop-filter:blur(16px); }
|
||
.glass-glow:hover{ border-color:rgba(0,180,216,.55); box-shadow:0 0 0 1px rgba(0,180,216,.2), 0 20px 70px -20px rgba(0,180,216,.3); }
|
||
.corner{ position:relative; }
|
||
.corner::before,.corner::after{ content:''; position:absolute; width:22px; height:22px; border-color:var(--opsblue2); opacity:.9; }
|
||
.corner::before{ top:-1px; right:-1px; border-top:2px solid; border-right:2px solid; border-top-right-radius:6px; }
|
||
.corner::after{ bottom:-1px; left:-1px; border-bottom:2px solid; border-left:2px solid; border-bottom-left-radius:6px; }
|
||
|
||
/* رادار دوّار أزرق عملياتي */
|
||
@keyframes sweep{ to{ transform:rotate(360deg);} }
|
||
.radar-disc{ background:radial-gradient(circle, rgba(0,180,216,.18) 0%, rgba(30,144,255,.08) 45%, transparent 70%); }
|
||
.radar-sweep{ background:conic-gradient(from 0deg, rgba(0,212,255,.6), rgba(0,180,216,.15) 75deg, transparent 95deg); animation:sweep 4.5s linear infinite; }
|
||
@keyframes ping{ 0%{ transform:scale(.4); opacity:1;} 100%{ transform:scale(2.6); opacity:0;} }
|
||
.blip{ animation:ping 2.2s ease-out infinite; }
|
||
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.3} }
|
||
.blink{ animation:blink 1.4s infinite; }
|
||
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(50%);} }
|
||
.marquee-track{ animation:marquee 28s linear infinite; }
|
||
@keyframes floaty{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }
|
||
|
||
/* مكدس الطبقات - ممركز وشفاف */
|
||
.stack-stage{ perspective:1500px; display:grid; place-items:center; }
|
||
.stack-3d{ transform-style:preserve-3d; transform:rotateX(54deg) rotateZ(0deg); transition:transform .25s ease-out; margin:auto; }
|
||
.layer-plane{ transform-style:preserve-3d; background:rgba(12,18,28,.48); backdrop-filter:blur(2px); transition:transform .5s cubic-bezier(.2,.8,.2,1), opacity .4s, box-shadow .4s, border-color .4s; box-shadow:0 28px 60px -35px rgba(0,0,0,.9); }
|
||
.layer-plane canvas{ opacity:.96; }
|
||
.layer-plane.active{ border-color:rgba(0,180,216,.85)!important; box-shadow:0 0 0 1px rgba(0,180,216,.35), 0 0 50px -10px rgba(0,180,216,.4); }
|
||
.layer-plane.dim{ opacity:.18!important; filter:saturate(.3); }
|
||
.stack-shadow{ position:absolute; left:50%; top:50%; width:min(440px,80%); height:75px; transform:translate(-50%,140px); background:radial-gradient(closest-side, rgba(0,0,0,.6), transparent); filter:blur(8px); pointer-events:none; }
|
||
|
||
input[type=range]{ -webkit-appearance:none; appearance:none; height:6px; border-radius:99px; background:linear-gradient(90deg,#1E90FF var(--fill,50%), #0E1A2E var(--fill,50%)); outline:none; }
|
||
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:#060A12; border:2px solid #1E90FF; box-shadow:0 0 18px rgba(30,144,255,.8); cursor:pointer; }
|
||
input[type=range]::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background:#060A12; border:2px solid #1E90FF; box-shadow:0 0 18px rgba(30,144,255,.8); cursor:pointer; }
|
||
|
||
.btn-sov{ background:linear-gradient(135deg,#1E90FF,#00B4D8); color:#020810; box-shadow:0 12px 48px -12px rgba(30,144,255,.6); transition:.25s; }
|
||
.btn-sov:hover{ transform:translateY(-2px); box-shadow:0 20px 60px -12px rgba(30,144,255,.75); filter:brightness(1.05); }
|
||
.btn-ghost{ border:1px solid rgba(30,144,255,.35); transition:.25s; }
|
||
.btn-ghost:hover{ border-color:rgba(0,180,216,.7); background:rgba(0,180,216,.08); transform:translateY(-2px); }
|
||
|
||
.engine-card{ cursor:pointer; transition:transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s; }
|
||
.engine-card:hover{ transform:translateY(-6px); }
|
||
.num-ltr{ direction:ltr; unicode-bidi:embed; font-variant-numeric:tabular-nums; }
|
||
dialog::backdrop{ background:rgba(2,5,10,.88); backdrop-filter:blur(8px); }
|
||
.tick{ font-variant-numeric:tabular-nums; }
|
||
.gold-text{ background:linear-gradient(135deg,#FFD97A,#FFB800 55%,#CC9200); -webkit-background-clip:text; background-clip:text; color:transparent; }
|
||
.ops-text{ background:linear-gradient(135deg,#A0D8FF,#1E90FF 50%,#00D4FF); -webkit-background-clip:text; background-clip:text; color:transparent; }
|
||
/* السينما الحركية: ظهور/اختفاء مزدوج الاتجاه مع عمق وضبابية */
|
||
.reveal{ --rd:1; opacity:0; transform:translateY(calc(var(--rd)*36px)) scale(.985); filter:blur(3px); transition:opacity .7s ease, transform .9s cubic-bezier(.2,.75,.25,1), filter .7s ease; will-change:transform,opacity,filter; }
|
||
.reveal.in{ opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
|
||
.reveal.in.engine-card:hover{ transform:translateY(-7px); filter:blur(0); }
|
||
[data-plx]{ will-change:transform; }
|
||
/* طبقات جوّية + خطوط فحص + تعتيم أطراف */
|
||
#scanlines,#vignette,#speedlines{ position:fixed; inset:0; pointer-events:none; z-index:52; }
|
||
#scanlines{ background:repeating-linear-gradient(0deg, rgba(0,4,10,.16) 0 1px, transparent 1px 3px); mix-blend-mode:multiply; z-index:55; }
|
||
#vignette{ background:radial-gradient(ellipse at 50% 42%, transparent 52%, rgba(0,0,0,.6) 100%); z-index:53; }
|
||
#speedlines{ z-index:52; opacity:0; transition:opacity .28s; }
|
||
#speedlines.on{ opacity:.55; }
|
||
#speedlines b{ position:absolute; height:2px; width:130px; border-radius:2px; background:linear-gradient(270deg, transparent, #00B4D8); box-shadow:0 0 12px #00B4D8; animation:speedfly .38s linear infinite; }
|
||
@keyframes speedfly{ from{ transform:translateX(-26vw); opacity:0;} 8%{ opacity:1;} to{ transform:translateX(8vw); opacity:0;} }
|
||
/* خلل احترازي عند التحويم */
|
||
.glitch:hover{ animation:glitch .28s steps(2) infinite; }
|
||
@keyframes glitch{ 0%{ transform:translate(2px,-2px) skewX(2deg);} 50%{ transform:translate(-2px,1px) skewX(-2deg);} 100%{ transform:translate(1px,-1px);} }
|
||
/* لمعان يمسح البطاقات */
|
||
.sheen{ position:relative; overflow:hidden; }
|
||
.sheen::after{ content:''; position:absolute; inset:0; background:linear-gradient(105deg, transparent 42%, rgba(0,212,255,.16) 50%, transparent 58%); transform:translateX(-130%); transition:transform .8s ease; pointer-events:none; }
|
||
.sheen:hover::after{ transform:translateX(130%); }
|
||
/* ختم كشف */
|
||
@keyframes stampin{ from{ transform:scale(1.7); opacity:0; filter:blur(8px);} 60%{ transform:scale(.95);} to{ transform:scale(1); opacity:1; filter:blur(0);} }
|
||
.stamp{ animation:stampin .7s cubic-bezier(.2,1.4,.4,1) both; }
|
||
/* نبض تماس */
|
||
@keyframes alertpulse{ 0%,100%{ opacity:.35;} 50%{ opacity:1;} }
|
||
.alert-pulse{ animation:alertpulse 1.1s infinite; }
|
||
/* شريط تقدم القراءة */
|
||
#progress{ position:fixed; top:0; right:0; height:3px; width:0; z-index:60; background:linear-gradient(90deg,#1E90FF,#00B4D8); }
|
||
@keyframes sovpulse{ 0%,100%{ box-shadow:0 12px 48px -12px rgba(30,144,255,.5);} 50%{ box-shadow:0 12px 52px -8px rgba(30,144,255,.75);} }
|
||
.btn-sov{ animation:sovpulse 3s ease-in-out infinite; }
|
||
/* سجل العمليات الحي */
|
||
#opsFeed{ mask-image:linear-gradient(to bottom, transparent, black 18%, black 82%, transparent); }
|
||
#opsFeed li{ animation:feedin .5s ease; }
|
||
@keyframes feedin{ from{ opacity:0; transform:translateY(-8px);} to{ opacity:1; transform:none;} }
|
||
/* تبويبات الترسانة */
|
||
.fchip{ border:1px solid rgba(30,144,255,.35); transition:.25s; }
|
||
.fchip:hover{ border-color:rgba(0,180,216,.7); }
|
||
.fchip.on{ background:#1E90FF; border-color:#1E90FF; color:#020810; }
|
||
.engine-card.hide{ display:none; }
|
||
.engine-card{ animation:feedin .45s ease; }
|
||
/* أسئلة شائعة */
|
||
details.faq{ transition:border-color .3s; }
|
||
details.faq[open]{ border-color:rgba(0,180,216,.5); }
|
||
details.faq summary{ cursor:pointer; list-style:none; }
|
||
details.faq summary::-webkit-details-marker{ display:none; }
|
||
details.faq summary .pm{ transition:transform .3s; }
|
||
details.faq[open] summary .pm{ transform:rotate(45deg); }
|
||
/* أعمدة الجدوى */
|
||
#forBar,#sovBar{ transition:width .8s cubic-bezier(.2,.8,.2,1); }
|
||
/* حوار المحرك */
|
||
#edGaugeWrap{ position:relative; }
|
||
#edLiveVal{ position:absolute; top:10px; right:12px; text-align:right; }
|
||
/* دخول البطل */
|
||
@keyframes risein{ from{ opacity:0; transform:translateY(26px);} to{ opacity:1; transform:none;} }
|
||
@media (prefers-reduced-motion: reduce){ *{ animation:none!important; transition:none!important; } .reveal{opacity:1;transform:none} }
|
||
</style>
|
||
</head>
|
||
<body class="antialiased">
|
||
<div id="progress" aria-hidden="true"></div>
|
||
<div id="vignette" aria-hidden="true"></div>
|
||
<div id="scanlines" aria-hidden="true"></div>
|
||
<div id="speedlines" aria-hidden="true"></div>
|
||
|
||
<!-- خلفية ثابتة -->
|
||
<div class="fixed inset-0 -z-10 pointer-events-none">
|
||
<div class="absolute inset-0 mgrs-bg"></div>
|
||
<div class="absolute -top-40 left-1/2 -translate-x-1/2 w-[900px] h-[500px] rounded-full opacity-25" style="background:radial-gradient(closest-side, rgba(30,144,255,.35), transparent)"></div>
|
||
<div class="absolute top-[38%] -right-52 w-[600px] h-[600px] rounded-full opacity-20 radar-disc"></div>
|
||
<div class="absolute bottom-0 -left-52 w-[600px] h-[600px] rounded-full opacity-15" style="background:radial-gradient(closest-side, rgba(255,184,0,.4), transparent)"></div>
|
||
</div>
|
||
|
||
<!-- شريط الحالة المصغر -->
|
||
<div class="bg-[#060A12]/90 border-b border-[#1E90FF]/15 text-[12px]">
|
||
<div class="max-w-7xl mx-auto px-4 h-9 flex items-center justify-between gap-3">
|
||
<div class="flex items-center gap-4 text-slate-300">
|
||
<span class="flex items-center gap-1.5"><span class="w-2 h-2 rounded-full bg-[#00B4D8] shadow-[0_0_10px_#00B4D8] blink"></span> جاهزية عملياتية 100%</span>
|
||
<span class="hidden sm:inline text-slate-500">|</span>
|
||
<span class="hidden sm:inline">المسار: <b class="num-ltr text-slate-100">OFFLINE</b> معزول كلياً</span>
|
||
<span class="hidden md:inline text-slate-500">|</span>
|
||
<span class="hidden md:inline">السيادة: <b class="text-[#FFB800]">وطنية كاملة</b></span>
|
||
</div>
|
||
<span class="num-ltr text-[11px] tracking-[.2em] text-slate-500">JO · SOVEREIGN TAC-MAP · v5.0</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- شريط القيادة العلوي -->
|
||
<header class="sticky top-0 z-50 bg-[#060A12]/85 backdrop-blur-xl border-b border-[#1E90FF]/15">
|
||
<nav class="max-w-7xl mx-auto px-4 h-[68px] flex items-center justify-between gap-4">
|
||
<a href="#top" class="flex items-center gap-3">
|
||
<span class="relative w-11 h-11 rounded-xl grid place-items-center border border-[#00B4D8]/40 bg-[#0A1120] overflow-hidden">
|
||
<span class="absolute inset-0 radar-disc"></span>
|
||
<span class="absolute inset-1 rounded-lg overflow-hidden"><span class="absolute inset-0 radar-sweep origin-center"></span></span>
|
||
<i data-lucide="crosshair" class="w-5 h-5 text-[#00B4D8] relative"></i>
|
||
</span>
|
||
<span>
|
||
<span class="block font-head font-900 font-black text-lg leading-none">رَصْــد <span class="text-[#00B4D8]">|</span> <span class="text-sm font-bold text-slate-300">المنظومة السيادية</span></span>
|
||
<span class="block num-ltr text-[10px] tracking-[.3em] text-slate-500 mt-1">RASD · TACTICAL COMMAND</span>
|
||
</span>
|
||
</a>
|
||
<div class="hidden lg:flex items-center gap-6 text-[13.5px] font-semibold text-slate-300">
|
||
<a href="#arsenal" class="hover:text-[#00B4D8] transition">الترسانة التكتيكية</a>
|
||
<a href="#layers" class="hover:text-[#00B4D8] transition">تفكيك الطبقات</a>
|
||
<a href="#security" class="hover:text-[#00B4D8] transition">التحصين الأمني</a>
|
||
<a href="#sim" class="hover:text-[#00B4D8] transition">المحاكاة الحية</a>
|
||
<a href="#roi" class="hover:text-[#00B4D8] transition">الجدوى والوفر السيادي</a>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<a href="#sim" class="btn-sov hidden sm:inline-flex items-center gap-2 rounded-md px-4 py-2.5 text-[13px] font-bold">
|
||
<i data-lucide="activity" class="w-4 h-4"></i> المحاكاة الحية
|
||
</a>
|
||
<button id="menuBtn" class="lg:hidden w-10 h-10 grid place-items-center rounded-md border border-[#1E90FF]/25"><i data-lucide="menu" class="w-5 h-5"></i></button>
|
||
</div>
|
||
</nav>
|
||
<div id="mobileNav" class="lg:hidden hidden border-t border-[#1E90FF]/10 px-4 py-3 flex flex-col gap-1 text-sm font-semibold text-slate-200 bg-[#060A12]/95">
|
||
<a href="#arsenal" class="py-2.5 border-b border-white/5">الترسانة التكتيكية</a>
|
||
<a href="#layers" class="py-2.5 border-b border-white/5">تفكيك الطبقات</a>
|
||
<a href="#security" class="py-2.5 border-b border-white/5">التحصين الأمني</a>
|
||
<a href="#sim" class="py-2.5 border-b border-white/5">المحاكاة الحية</a>
|
||
<a href="#roi" class="py-2.5">الجدوى والوفر السيادي</a>
|
||
</div>
|
||
</header>
|
||
|
||
<main id="top">
|
||
|
||
<!-- ============ HERO ============ -->
|
||
<section class="relative overflow-hidden">
|
||
<div class="max-w-7xl mx-auto px-4 pt-10 pb-14 lg:pt-16 lg:pb-20 grid lg:grid-cols-[1.05fr_.95fr] gap-10 items-center">
|
||
<div data-plx=".09" class="relative">
|
||
<div class="reveal inline-flex items-center gap-2 rounded-full border border-[#FFB800]/40 bg-[#FFB800]/10 px-4 py-1.5 text-[12.5px] font-bold text-[#FFD97A]">
|
||
<i data-lucide="shield-alert" class="w-4 h-4"></i>
|
||
وثيقة الاستعراض الميداني — قيادة العمليات والسيطرة المشتركة
|
||
<span class="num-ltr text-[10px] tracking-widest opacity-70">RESTRICTED · CMD</span>
|
||
</div>
|
||
<h1 class="reveal font-black text-[34px] sm:text-5xl lg:text-[58px] leading-[1.25] mt-5">
|
||
السيادة المكانية المطلقة..
|
||
<br><span class="ops-text">منظومة الاستطلاع والتوجيه التكتيكي</span>
|
||
<br><span class="text-white">المستقلة <span class="gold-text">100% بدون إنترنت.</span></span>
|
||
</h1>
|
||
<p class="reveal text-slate-300/90 text-[15.5px] lg:text-lg leading-9 mt-5 max-w-2xl">
|
||
منظومة خرائط وطنية متكاملة صُممت لتحرير القرار العسكري والميداني من الارتهان للأنظمة الأجنبية،
|
||
مدعومة بمحركات مدفعية، وخطوط رؤية حية، وتتبع مشفّر للقوات الصديقة —
|
||
في بيئات التشويش الإلكتروني وحجب إشارات الأقمار الصناعية.
|
||
</p>
|
||
<div class="reveal flex flex-wrap gap-3 mt-7">
|
||
<a href="#sim" class="btn-sov inline-flex items-center gap-2 rounded-md px-7 py-3.5 font-black text-[15px]">
|
||
<i data-lucide="play" class="w-5 h-5"></i> جرّب المحاكاة الحية
|
||
<span class="num-ltr text-[10px] font-bold opacity-70">LIVE DEMO</span>
|
||
</a>
|
||
<a href="#layers" class="btn-ghost inline-flex items-center gap-2 rounded-md px-6 py-3.5 font-bold text-[15px] text-slate-100">
|
||
<i data-lucide="layers" class="w-5 h-5 text-[#00B4D8]"></i> فكّك الطبقات تحتك
|
||
</a>
|
||
</div>
|
||
<!-- عدّادات القوة -->
|
||
<div class="reveal grid grid-cols-2 xl:grid-cols-4 gap-3 mt-8">
|
||
<div class="glass corner rounded-lg p-4">
|
||
<div class="num-ltr font-black text-3xl text-[#00B4D8]"><span data-count="0" data-suffix="%">0%</span></div>
|
||
<div class="text-[12.5px] font-bold mt-1">اتصال بالإنترنت</div>
|
||
<div class="text-[11.5px] text-slate-400 leading-5 mt-1">عمليات مستمرة في أقسى ظروف التعتيم الإلكتروني</div>
|
||
</div>
|
||
<div class="glass corner rounded-lg p-4">
|
||
<div class="num-ltr font-black text-3xl text-[#1E90FF]"><span data-count="120000" data-suffix="+">0</span></div>
|
||
<div class="text-[12.5px] font-bold mt-1">معلم محلي بالعربية</div>
|
||
<div class="text-[11.5px] text-slate-400 leading-5 mt-1">أضخم قاعدة إحداثيات جغرافية وتضاريسية</div>
|
||
</div>
|
||
<div class="glass corner rounded-lg p-4">
|
||
<div class="num-ltr font-black text-3xl text-[#FFB800]"><span data-count="100" data-suffix="%">0%</span></div>
|
||
<div class="text-[12.5px] font-bold mt-1">استقلال بيانات</div>
|
||
<div class="text-[11.5px] text-slate-400 leading-5 mt-1">سيادة رقمية وطنية كاملة داخل الحدود</div>
|
||
</div>
|
||
<div class="glass corner rounded-lg p-4">
|
||
<div class="num-ltr font-black text-3xl text-[#1E90FF]"><span data-count="90" data-suffix="%">0%</span></div>
|
||
<div class="text-[12.5px] font-bold mt-1">وفر مالي سيادي</div>
|
||
<div class="text-[11.5px] text-slate-400 leading-5 mt-1">استرداد كلفة الاستهلاك التجاري وحماية الأمن القومي</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- شاشة التحكم المركزية -->
|
||
<div class="reveal relative">
|
||
<div class="glass corner rounded-2xl overflow-hidden">
|
||
<div class="flex items-center justify-between px-4 py-3 border-b border-[#1E90FF]/15 bg-black/30">
|
||
<span class="flex items-center gap-2 text-[12px] font-bold text-[#00B4D8]"><span class="w-2 h-2 rounded-full bg-[#00B4D8] blink"></span> <span class="num-ltr tracking-widest">RASD / LIVE TAC-MAP</span></span>
|
||
<span class="flex items-center gap-2">
|
||
<span id="heroClock" class="num-ltr text-[11px] text-slate-400 tick">T+ 00:00:00</span>
|
||
<span class="flex gap-1.5"><span class="w-2.5 h-2.5 rounded-full bg-[#FF4444]"></span><span class="w-2.5 h-2.5 rounded-full bg-[#FFB800]"></span><span class="w-2.5 h-2.5 rounded-full bg-[#00B4D8]"></span></span>
|
||
</span>
|
||
</div>
|
||
<div class="relative">
|
||
<canvas id="heroMap" class="w-full h-[380px] sm:h-[440px] block cursor-crosshair" aria-label="خريطة عملياتية حية: تضاريس وخط رؤية ومواقع القوات"></canvas>
|
||
<div class="absolute top-3 right-3 glass rounded-md px-3 py-2 text-[11px] leading-5">
|
||
<div class="text-slate-400">الإحداثيات الحية <span class="num-ltr text-slate-500">MGRS·DEMO</span></div>
|
||
<div id="heroCoords" class="num-ltr font-bold text-[#00B4D8] tick">36R XV 00000 00000</div>
|
||
<div id="heroFire" class="num-ltr text-[#FFB800] tick">AZ 000.0° · EL +00.0° · RNG 0.00km</div>
|
||
<div id="heroAlert" class="num-ltr text-[#FF4444] font-bold text-[11px] alert-pulse mt-0.5" style="opacity:.35">NO CONTACT — HOLDING</div>
|
||
</div>
|
||
<div class="absolute top-3 left-3 w-20 h-20 rounded-full border border-[#00B4D8]/40 overflow-hidden radar-disc">
|
||
<div class="absolute inset-0 radar-sweep"></div>
|
||
<div class="absolute inset-2 rounded-full border border-[#00B4D8]/30"></div>
|
||
<div class="absolute inset-5 rounded-full border border-[#00B4D8]/30"></div>
|
||
<span class="blip absolute top-5 right-6 w-1.5 h-1.5 rounded-full bg-[#00B4D8]"></span>
|
||
<span class="blip absolute bottom-6 left-6 w-1.5 h-1.5 rounded-full bg-[#FFB800]" style="animation-delay:.8s"></span>
|
||
</div>
|
||
<div class="absolute bottom-3 right-3 left-3 flex flex-wrap items-center justify-between gap-2">
|
||
<div class="flex items-center gap-1.5" role="group" aria-label="نمط العرض العملياتي">
|
||
<span class="hidden md:inline text-[11px] text-slate-400 font-bold ml-1">نمط العرض:</span>
|
||
<button data-hview="3d" title="نموذج الارتفاعات والوديان — أساس كل الحسابات" class="hv px-3 py-1.5 rounded-md text-[11.5px] font-bold bg-[#00B4D8] text-[#020810]">التضاريس · الأساس</button>
|
||
<button data-hview="los" title="إظهار خط الرؤية بين الراصد والهدف وكشف الحجب" class="hv px-3 py-1.5 rounded-md text-[11.5px] font-bold glass text-slate-200">خط الرؤية · كشف الحجب</button>
|
||
<button data-hview="bft" title="مواقع القوات الصديقة المزامنة عبر شبكة مغلقة" class="hv px-3 py-1.5 rounded-md text-[11.5px] font-bold glass text-slate-200">القوات الصديقة · المواقع</button>
|
||
</div>
|
||
<button id="heroPause" class="glass rounded-md px-3 py-1.5 text-[11.5px] font-bold inline-flex items-center gap-1.5"><i data-lucide="pause" class="w-3.5 h-3.5"></i> إيقاف</button>
|
||
</div>
|
||
</div>
|
||
<div class="flex flex-wrap items-center justify-center gap-x-5 gap-y-1.5 px-4 py-2.5 border-t border-[#1E90FF]/15 text-[11.5px] text-slate-300 bg-black/30">
|
||
<span class="inline-flex items-center gap-1.5"><span class="w-3 h-3 rounded-[3px] border border-[#00B4D8] bg-[#00B4D8]/25"></span> قوة صديقة (BFT: موقع الوحدة المزامن)</span>
|
||
<span class="inline-flex items-center gap-1.5"><span class="w-3 h-3 rounded-[3px] border border-[#FFB800] bg-[#FFB800]/25"></span> مرصد / نقطة حاكمة</span>
|
||
<span class="inline-flex items-center gap-1.5"><span class="inline-block w-7 border-t-2 border-dashed border-[#00B4D8]"></span> خط الرؤية راصد ← هدف</span>
|
||
</div>
|
||
<div class="grid grid-cols-3 divide-x divide-x-reverse divide-[#1E90FF]/10 border-t border-[#1E90FF]/15 text-center text-[11.5px]">
|
||
<div class="py-2.5"><div class="text-slate-400">المدفعية — الجاهزية</div><div id="hudGuns" class="num-ltr font-black text-[#FFB800] tick">6 × READY</div></div>
|
||
<div class="py-2.5"><div class="text-slate-400">القوات الصديقة — الارتباط</div><div id="hudBft" class="num-ltr font-black text-[#00B4D8] tick">12 UNIT · LINKED</div></div>
|
||
<div class="py-2.5"><div class="text-slate-400">إشارة الأقمار — الحالة</div><div class="num-ltr font-black text-[#FF4444]">GPS DENIED · <span class="text-[#1E90FF]">HOLDING</span></div></div>
|
||
</div>
|
||
</div>
|
||
<p class="text-center text-[11.5px] text-slate-500 mt-3">حرّك المؤشر فوق الخريطة لتغيير زوايا الرماية والإحداثيات لحظياً — محاكاة اصطناعية لأغراض العرض</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- شريط الثقة المتحرك -->
|
||
<div class="border-y border-[#1E90FF]/15 bg-black/40 overflow-hidden" dir="ltr">
|
||
<div class="marquee-track flex whitespace-nowrap py-3 gap-10 w-max" id="ticker"></div>
|
||
</div>
|
||
<!-- نبض المنظومة: سجل عمليات حي -->
|
||
<div class="border-b border-[#1E90FF]/10 bg-[#060A12]/80">
|
||
<div class="max-w-7xl mx-auto px-4 py-4 grid md:grid-cols-[220px_1fr] gap-4 items-center">
|
||
<div class="flex items-center gap-2.5">
|
||
<span class="relative flex w-3 h-3"><span class="blip absolute inline-flex w-full h-full rounded-full bg-[#1E90FF]"></span><span class="relative inline-flex w-3 h-3 rounded-full bg-[#1E90FF]"></span></span>
|
||
<div><b class="block text-[13.5px]">نبض المنظومة — سجل حي</b><span class="num-ltr block text-[10px] tracking-[.25em] text-slate-500">LIVE OPS LOG · OFFLINE</span></div>
|
||
</div>
|
||
<ul id="opsFeed" class="h-[86px] overflow-hidden space-y-1.5 text-[12.5px]" aria-live="off"></ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ تفكيك الطبقات ============ -->
|
||
<section id="layers" class="max-w-7xl mx-auto px-4 py-16 lg:py-24">
|
||
<div class="reveal flex flex-wrap items-end justify-between gap-4">
|
||
<div>
|
||
<div class="flex items-center gap-2 text-[#00B4D8] text-[13px] font-bold"><i data-lucide="layers" class="w-4 h-4"></i> Interactive 3D Layer Stack</div>
|
||
<h2 class="font-black text-3xl lg:text-[42px] leading-snug mt-2">فكّك الخريطة.. <span class="ops-text">طبقة فوق طبقة</span></h2>
|
||
<p class="text-slate-400 mt-2 max-w-2xl">حرّك الفأرة فوق المجسّم أو اسحب شريط التحكم — أو مرّر الصفحة لتشاهد تفكك الطبقات الطبوغرافية لحظياً.</p>
|
||
</div>
|
||
<span class="num-ltr text-slate-600 tracking-[.25em] text-xs">01 / GEOSPATIAL LAYERS</span>
|
||
</div>
|
||
|
||
<div class="grid lg:grid-cols-[340px_1fr] gap-6 mt-8">
|
||
<div class="flex flex-col gap-2.5" id="layerList" data-plx=".06"></div>
|
||
<div class="glass corner rounded-2xl p-4 sm:p-6">
|
||
<div id="stackStage" class="stack-stage relative h-[440px] sm:h-[500px] rounded-xl overflow-hidden bg-[#060A12] border border-[#1E90FF]/10 cursor-grab">
|
||
<div class="absolute inset-0 mgrs-bg opacity-70"></div>
|
||
<div class="stack-shadow"></div>
|
||
<div id="stack3d" class="stack-3d relative w-[300px] h-[300px] sm:w-[340px] sm:h-[340px]"></div>
|
||
<div class="absolute bottom-3 right-3 glass rounded-md px-3 py-1.5 text-[11.5px]"><span class="text-slate-400">زاوية العرض:</span> <span id="tiltRead" class="num-ltr text-[#00B4D8] tick">54° / 0°</span></div>
|
||
<div class="absolute top-3 left-3 glass rounded-md px-3 py-1.5 text-[11.5px] num-ltr text-slate-300 tick" id="peelRead">PEEL 60%</div>
|
||
</div>
|
||
<div class="mt-4">
|
||
<div class="flex items-center justify-between text-[13px] font-bold"><span>تفكيك الطبقات الطبوغرافية</span><output id="spreadOut" class="num-ltr text-[#00B4D8]">60%</output></div>
|
||
<input id="spread" type="range" min="0" max="100" value="60" class="w-full mt-2" aria-label="تفكيك الطبقات">
|
||
<div class="flex justify-between text-[11.5px] text-slate-500 mt-1"><span>خريطة موحّدة</span><span>طبقات منفصلة (Scroll-Driven Peeling)</span></div>
|
||
<p id="layerDesc" class="text-[13.5px] text-slate-300 leading-7 mt-3 min-h-[52px]"></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ الترسانة ============ -->
|
||
<section id="arsenal" class="border-y border-[#1E90FF]/10 bg-[#0A1120]/60">
|
||
<div class="max-w-7xl mx-auto px-4 py-16 lg:py-24">
|
||
<div class="reveal flex flex-wrap items-end justify-between gap-4">
|
||
<div>
|
||
<div class="flex items-center gap-2 text-[#00B4D8] text-[13px] font-bold"><i data-lucide="swords" class="w-4 h-4"></i> Tactical Engines Grid</div>
|
||
<h2 class="font-black text-3xl lg:text-[42px] leading-snug mt-2">الترسانة الميدانية: <span class="gold-text">سبعة محركات قتالية</span></h2>
|
||
<p class="text-slate-400 mt-2 max-w-2xl">انقر أي بطاقة لفتح القياسات الحية ومخطط القياس المصغّر (Telemetry Gauge).</p>
|
||
</div>
|
||
<span class="num-ltr text-slate-600 tracking-[.25em] text-xs">02 / TACTICAL CAPABILITIES</span>
|
||
</div>
|
||
<div class="flex flex-wrap gap-2 mt-6" role="group" aria-label="تصفية المحركات حسب الصنف">
|
||
<button class="fchip on rounded-full px-4 py-1.5 text-[12.5px] font-bold" data-f="all">الكل · 7 محركات</button>
|
||
<button class="fchip rounded-full px-4 py-1.5 text-[12.5px] font-bold" data-f="recon">استطلاع ورصد</button>
|
||
<button class="fchip rounded-full px-4 py-1.5 text-[12.5px] font-bold" data-f="cmd">قيادة وتموضع</button>
|
||
<button class="fchip rounded-full px-4 py-1.5 text-[12.5px] font-bold" data-f="fire">نيران وإسناد</button>
|
||
<button class="fchip rounded-full px-4 py-1.5 text-[12.5px] font-bold" data-f="eng">هندسة ميدان</button>
|
||
</div>
|
||
<div id="engineGrid" class="grid sm:grid-cols-2 xl:grid-cols-4 gap-4 mt-5" data-plx=".05"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ التحصين الأمني ============ -->
|
||
<section id="security" class="max-w-7xl mx-auto px-4 py-16 lg:py-24">
|
||
<div class="reveal flex flex-wrap items-end justify-between gap-4">
|
||
<div>
|
||
<div class="flex items-center gap-2 text-[#00B4D8] text-[13px] font-bold"><i data-lucide="shield-check" class="w-4 h-4"></i> Zero-Trust Defense-in-Depth</div>
|
||
<h2 class="font-black text-3xl lg:text-[42px] leading-snug mt-2">التحصين الأمني: <span class="ops-text">السيادة هي المعمارية</span></h2>
|
||
<p class="text-slate-400 mt-2 max-w-2xl">معمارية ثنائية المسار معتمدة: فصل كامل بين المعلومة العسكرية والقيمة التجارية.</p>
|
||
</div>
|
||
<span class="num-ltr text-slate-600 tracking-[.25em] text-xs">03 / SECURITY ARCHITECTURE</span>
|
||
</div>
|
||
|
||
<div class="grid lg:grid-cols-2 gap-4 mt-8">
|
||
<div class="reveal glass corner rounded-2xl p-6 relative overflow-hidden">
|
||
<div class="absolute top-0 right-0 left-0 h-1 bg-gradient-to-l from-[#FF4444] via-[#FFB800] to-[#00B4D8]"></div>
|
||
<div class="flex items-center gap-3">
|
||
<span class="w-12 h-12 rounded-xl grid place-items-center bg-[#FF4444]/15 border border-[#FF4444]/40"><i data-lucide="lock" class="w-6 h-6 text-[#FF4444]"></i></span>
|
||
<div><h3 class="font-black text-xl">المسار العسكري <span class="num-ltr text-[11px] text-slate-400 tracking-widest">AIR-GAPPED INTRANET</span></h3>
|
||
<p class="text-[13px] text-slate-400">شبكة مغلقة تماماً داخل المقرات السيادية</p></div>
|
||
</div>
|
||
<ul class="mt-5 space-y-3 text-[14px]">
|
||
<li class="flex gap-2.5"><i data-lucide="check-circle-2" class="w-5 h-5 text-[#FF4444] shrink-0"></i> خوادم داخل المقرات السيادية — لا عبور للحدود الرقمية إطلاقاً</li>
|
||
<li class="flex gap-2.5"><i data-lucide="check-circle-2" class="w-5 h-5 text-[#FF4444] shrink-0"></i> تشفير عتادي كامل للبيانات والأقراص والمفاتيح</li>
|
||
<li class="flex gap-2.5"><i data-lucide="check-circle-2" class="w-5 h-5 text-[#FF4444] shrink-0"></i> عمل ميداني كامل في بيئات GPS-Denied والتشويش الإلكتروني</li>
|
||
</ul>
|
||
<div class="num-ltr mt-5 rounded-lg bg-black/50 border border-[#FF4444]/25 p-3 text-[11px] text-slate-400 tick">STATUS: <span class="text-[#FF4444] font-bold">● ISOLATED</span> · NODES 0-EXTERNAL · KEYS IN HSM</div>
|
||
</div>
|
||
<div class="reveal glass corner rounded-2xl p-6 relative overflow-hidden">
|
||
<div class="absolute top-0 right-0 left-0 h-1 bg-gradient-to-l from-[#00B4D8] via-[#1E90FF] to-[#FFB800]"></div>
|
||
<div class="flex items-center gap-3">
|
||
<span class="w-12 h-12 rounded-xl grid place-items-center bg-[#00B4D8]/10 border border-[#00B4D8]/40"><i data-lucide="building-2" class="w-6 h-6 text-[#00B4D8]"></i></span>
|
||
<div><h3 class="font-black text-xl">المسار التجاري والمدني <span class="num-ltr text-[11px] text-slate-400 tracking-widest">CIVIL GATEWAY</span></h3>
|
||
<p class="text-[13px] text-slate-400">بوابة آمنة تدرّ عوائد دون تعريض أي معلومة عسكرية</p></div>
|
||
</div>
|
||
<ul class="mt-5 space-y-3 text-[14px]">
|
||
<li class="flex gap-2.5"><i data-lucide="check-circle-2" class="w-5 h-5 text-[#00B4D8] shrink-0"></i> تغذية قطاعات النقل واللوجستيات ببيانات مدنية منقّحة فقط</li>
|
||
<li class="flex gap-2.5"><i data-lucide="check-circle-2" class="w-5 h-5 text-[#00B4D8] shrink-0"></i> فصل صارم على مستوى الشبكة والصلاحيات وقواعد البيانات</li>
|
||
<li class="flex gap-2.5"><i data-lucide="check-circle-2" class="w-5 h-5 text-[#00B4D8] shrink-0"></i> تحويل المنصة من مركز تكلفة إلى أصل سيادي مدرّ للدخل</li>
|
||
</ul>
|
||
<div class="num-ltr mt-5 rounded-lg bg-black/50 border border-[#00B4D8]/25 p-3 text-[11px] text-slate-400 tick">LEDGER: <span class="text-[#00B4D8] font-bold">▲ REVENUE FLOW</span> · CIVIL DATA ONLY · AUDITED</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid sm:grid-cols-2 lg:grid-cols-5 gap-3 mt-4" id="defGrid"></div>
|
||
<p class="text-[11.5px] text-slate-500 mt-4">الضوابط المعروضة متطلبات تصميم معماري؛ إثبات الفاعلية والاعتماد يخضع للتقييم الأمني والفني المشترك مع الجهات المختصة.</p>
|
||
</section>
|
||
|
||
<!-- ============ لماذا التملك السيادي ============ -->
|
||
<section id="compare" class="border-y border-[#1E90FF]/10 bg-[#0A1120]/50">
|
||
<div class="max-w-7xl mx-auto px-4 py-16 lg:py-20">
|
||
<div class="reveal flex flex-wrap items-end justify-between gap-4">
|
||
<div>
|
||
<div class="flex items-center gap-2 text-[#00B4D8] text-[13px] font-bold"><i data-lucide="scale" class="w-4 h-4"></i> قرار القيادة بالأرقام</div>
|
||
<h2 class="font-bold text-3xl lg:text-[40px] leading-snug mt-2">ارتهان مستمر.. <span class="ops-text">أم تملّك دائم؟</span></h2>
|
||
</div>
|
||
<span class="num-ltr text-slate-600 tracking-[.25em] text-xs">ODDS / NATIONAL VS FOREIGN</span>
|
||
</div>
|
||
<div class="reveal glass corner rounded-2xl overflow-hidden mt-8">
|
||
<div class="grid grid-cols-[1.2fr_1fr_1fr] text-[13px] font-bold">
|
||
<div class="px-4 py-3 text-slate-400">معيار القرار</div>
|
||
<div class="px-4 py-3 text-center bg-[#00B4D8]/10 text-[#00B4D8]">المنظومة الوطنية</div>
|
||
<div class="px-4 py-3 text-center text-slate-400">الخرائط الأجنبية</div>
|
||
</div>
|
||
<div id="cmpRows" class="text-[13.5px]"></div>
|
||
</div>
|
||
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-3 mt-4" id="guaGrid"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ المحاكاة الحية ============ -->
|
||
<section id="sim" class="border-y border-[#1E90FF]/10 bg-[#060A12]">
|
||
<div class="max-w-7xl mx-auto px-4 py-16 lg:py-24 grid lg:grid-cols-[1fr_380px] gap-6 items-stretch">
|
||
<div>
|
||
<div class="reveal flex items-center gap-2 text-[#00B4D8] text-[13px] font-bold"><i data-lucide="activity" class="w-4 h-4"></i> Live LOS Simulation</div>
|
||
<h2 class="reveal font-black text-3xl lg:text-[42px] mt-2">المحاكاة الحية: <span class="ops-text">انقر.. واكشف النقاط الميتة</span></h2>
|
||
<p class="reveal text-slate-400 mt-2">النقرة الأولى تضع الراصد (أخضر)، والثانية تضع الهدف (ذهبي). يحسب المحرك خط الرؤية فوق نموذج الارتفاع الاصطناعي لحظياً.</p>
|
||
<div class="reveal glass corner rounded-2xl overflow-hidden mt-6">
|
||
<div class="flex flex-wrap items-center justify-between gap-2 px-4 py-3 border-b border-[#1E90FF]/15 text-[12px]">
|
||
<span class="num-ltr tracking-widest text-[#00B4D8] font-bold">● LOS ENGINE · SYNTHETIC DEM</span>
|
||
<span class="flex gap-2">
|
||
<button id="simDemo" class="btn-ghost rounded-md px-3 py-1.5 font-bold inline-flex items-center gap-1.5"><i data-lucide="dices" class="w-3.5 h-3.5"></i> سيناريو عشوائي</button>
|
||
<button id="simClear" class="btn-ghost rounded-md px-3 py-1.5 font-bold inline-flex items-center gap-1.5"><i data-lucide="eraser" class="w-3.5 h-3.5"></i> مسح</button>
|
||
</span>
|
||
</div>
|
||
<canvas id="simMap" class="w-full h-[380px] sm:h-[440px] block cursor-crosshair"></canvas>
|
||
<div class="grid sm:grid-cols-4 divide-x divide-x-reverse divide-[#1E90FF]/10 border-t border-[#1E90FF]/15 text-center">
|
||
<div class="py-3"><div class="text-[11px] text-slate-400">الحالة</div><div id="simVerdict" class="font-black text-lg text-slate-200">بانتظار النقر</div></div>
|
||
<div class="py-3"><div class="text-[11px] text-slate-400">المسافة</div><div id="simDist" class="num-ltr font-black text-[#1E90FF] tick">— km</div></div>
|
||
<div class="py-3"><div class="text-[11px] text-slate-400">زاوية السمت</div><div id="simAz" class="num-ltr font-black text-[#FFB800] tick">— °</div></div>
|
||
<div class="py-3"><div class="text-[11px] text-slate-400">الحجب التضاريسي</div><div id="simBlock" class="num-ltr font-black text-[#00B4D8] tick">— %</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<aside class="flex flex-col gap-4">
|
||
<div class="reveal glass corner rounded-2xl p-5">
|
||
<h3 class="font-black flex items-center gap-2"><i data-lucide="radar" class="w-5 h-5 text-[#00B4D8]"></i> برج المراقبة 360°</h3>
|
||
<canvas id="viewshed" class="w-full h-[220px] mt-3 rounded-lg border border-[#1E90FF]/15 bg-black/40"></canvas>
|
||
<div class="flex justify-between text-[12px] mt-2"><span class="text-slate-400">التغطية البصرية</span><b id="viewPct" class="num-ltr text-[#00B4D8]">68.4%</b></div>
|
||
<div class="h-2 rounded-full bg-white/10 mt-1 overflow-hidden"><div id="viewBar" class="h-full w-2/3 rounded-full" style="background:linear-gradient(90deg,#1E90FF,#00B4D8)"></div></div>
|
||
</div>
|
||
<div class="reveal glass corner rounded-2xl p-5">
|
||
<h3 class="font-black flex items-center gap-2"><i data-lucide="flame" class="w-5 h-5 text-[#FFB800]"></i> حل المدفعية الفوري</h3>
|
||
<div class="num-ltr mt-3 space-y-2 text-[13px] tick" id="artyBox">
|
||
<div class="flex justify-between border-b border-white/5 pb-2"><span class="text-slate-400">CHARGE</span><b class="text-[#FFB800]">4 · GREEN BAG</b></div>
|
||
<div class="flex justify-between border-b border-white/5 pb-2"><span class="text-slate-400">ELEVATION</span><b id="artyEl">312.6 mil</b></div>
|
||
<div class="flex justify-between border-b border-white/5 pb-2"><span class="text-slate-400">TOF</span><b id="artyTof">24.8 s</b></div>
|
||
<div class="flex justify-between"><span class="text-slate-400">IMPACT CEP</span><b id="artyCep">±18 m (DEM)</b></div>
|
||
</div>
|
||
<p class="text-[11px] text-slate-500 mt-3 leading-5">قيم توضيحية مولّدة من نموذج اصطناعي — لا تُستخدم كحلول رماية تشغيلية.</p>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ الجدوى السيادية: حاسبة الكلفة الحقيقية ============ -->
|
||
<section id="roi" class="max-w-7xl mx-auto px-4 py-16 lg:py-24">
|
||
<div class="reveal flex flex-wrap items-end justify-between gap-4">
|
||
<div>
|
||
<div class="flex items-center gap-2 text-[#FFB800] text-[13px] font-bold"><i data-lucide="calculator" class="w-4 h-4"></i> الحاسبة السيادية: تكلفة الطلبات الفعلية</div>
|
||
<h2 class="font-black text-3xl lg:text-[42px] mt-2">من فاتورة طلبات أجنبية.. <span class="gold-text">إلى بنية وطنية بثلث الكلفة</span></h2>
|
||
<p class="text-slate-400 mt-2 max-w-2xl">حاسبة مبنية على أرقام واقعية: جوجل مابز 7$ لكل 1000 طلب · المنظومة الوطنية 2$ لكل 1000 طلب · 60 ألف مركبة في الأردن.</p>
|
||
</div>
|
||
<span class="num-ltr text-slate-600 tracking-[.25em] text-xs">04 / SOVEREIGN ROI</span>
|
||
</div>
|
||
<div class="grid lg:grid-cols-[1fr_380px] gap-4 mt-8">
|
||
<div class="reveal glass corner rounded-2xl p-6 space-y-6">
|
||
<div class="glass rounded-lg p-4 border border-[#1E90FF]/10 bg-[#00B4D8]/5">
|
||
<div class="flex items-center justify-between"><span class="font-bold text-[#00B4D8]">المفترضات الأساسية</span><span class="num-ltr text-[11px] text-slate-500">قابلة للتعديل أدناه</span></div>
|
||
<div class="grid sm:grid-cols-4 gap-3 mt-3 text-[12px]">
|
||
<div><span class="text-slate-400 block">سعر الطلب الأجنبي</span><b class="num-ltr text-[#FF4444]">$7 / 1,000 طلب</b></div>
|
||
<div><span class="text-slate-400 block">سعر الطلب الوطني</span><b class="num-ltr text-[#00B4D8]">$2 / 1,000 طلب</b></div>
|
||
<div><span class="text-slate-400 block">مركبات نشطة في الأردن</span><b class="num-ltr text-[#FFB800]">60,000 مركبة</b></div>
|
||
<div><span class="text-slate-400 block">متوسط طلبات/يوم/مركبة</span><b class="num-ltr text-slate-100"><span id="reqOut">80</span> طلب</b></div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="flex justify-between text-[14px] font-bold"><span>متوسط طلبات الخرائط / يوم / مركبة</span><output id="reqOut2" class="num-ltr text-[#00B4D8]">80</output></div>
|
||
<input id="reqIn" type="range" min="20" max="200" step="5" value="80" class="w-full mt-2">
|
||
<div class="flex justify-between text-[11px] text-slate-500 mt-1"><span>استخدام خفيف (توصيل بسيط)</span><span>استخدام كثيف (مسار + بحث + توجيه)</span></div>
|
||
</div>
|
||
<div>
|
||
<div class="flex justify-between text-[14px] font-bold"><span>فترة المقارنة</span><output id="yOut" class="num-ltr text-[#00B4D8]">5 سنوات</output></div>
|
||
<input id="yIn" type="range" min="1" max="10" value="5" class="w-full mt-2">
|
||
</div>
|
||
<div class="grid sm:grid-cols-2 gap-3">
|
||
<label class="glass rounded-lg p-3 block"><span class="text-[12px] text-slate-400">التأسيس السيادي لمرة واحدة ($)</span><input id="capIn" type="number" value="3500000" min="0" max="100000000" step="100000" class="num-ltr mt-1 w-full bg-black/40 border border-[#1E90FF]/20 rounded-md px-3 py-2 font-black text-slate-100"></label>
|
||
<label class="glass rounded-lg p-3 block"><span class="text-[12px] text-slate-400">التشغيل والصيانة سنوياً ($)</span><input id="opIn" type="number" value="800000" min="0" max="100000000" step="50000" class="num-ltr mt-1 w-full bg-black/40 border border-[#1E90FF]/20 rounded-md px-3 py-2 font-black text-slate-100"></label>
|
||
</div>
|
||
<p class="text-[11.5px] text-slate-500">النموذج بالدولار الأمريكي — عدد المركبات ثابت 60,000 — الأسعار: Google Maps Platform $7/1k، البنية الوطنية $2/1k — لا ضرائب أو خصم زمني.</p>
|
||
</div>
|
||
<div class="reveal rounded-2xl p-6 border border-[#FFB800]/40 relative overflow-hidden" style="background:linear-gradient(160deg, rgba(255,184,0,.14), rgba(13,12,9,.92))">
|
||
<div class="text-[13px] text-[#FFD97A] font-bold" id="saveLabel">صافي الوفر التراكمي خلال 5 سنوات</div>
|
||
<div id="saveVal" class="num-ltr font-black text-4xl mt-1 text-white tick">$43,800,000</div>
|
||
<div id="savePct" class="inline-block mt-2 text-[12.5px] font-black rounded-full px-3 py-1 bg-[#FFB800] text-[#020810]">78% خفض في تكلفة الطلبات</div>
|
||
<div class="mt-5 space-y-3 text-[13px]">
|
||
<div><div class="flex justify-between mb-1"><span class="text-slate-300">كلفة الطلبات الأجنبية (5 سنوات)</span><b id="forVal" class="num-ltr text-[#FF4444]">$61,320,000</b></div><div class="h-2.5 rounded-full bg-white/10 overflow-hidden"><div id="forBar" class="h-full rounded-full bg-[#FF4444]" style="width:100%"></div></div>
|
||
<div><div class="flex justify-between mb-1"><span class="text-slate-300">كلفة الطلبات الوطنية + تأسيس + تشغيل</span><b id="sovVal" class="num-ltr text-[#00B4D8]">$17,520,000</b></div><div class="h-2.5 rounded-full bg-white/10 overflow-hidden"><div id="sovBar" class="h-full rounded-full" style="width:28.6%;background:linear-gradient(90deg,#1E90FF,#00B4D8)"></div></div></div>
|
||
</div>
|
||
<div class="grid grid-cols-2 gap-2 mt-4 text-[11.5px]">
|
||
<div class="glass rounded-lg p-2.5 text-center"><div class="text-slate-400">تكلفة طلب/سنة (أجنبي)</div><b id="annFor" class="num-ltr block text-[#FF4444]">$12.26M</b></div>
|
||
<div class="glass rounded-lg p-2.5 text-center"><div class="text-slate-400">تكلفة طلب/سنة (وطني)</div><b id="annSov" class="num-ltr block text-[#00B4D8]">$3.50M</b></div>
|
||
</div>
|
||
<a href="#sim" class="btn-sov block w-full mt-6 rounded-md py-3 font-black text-center">جرّب المحاكاة الحية بهذا السيناريو</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ الأسئلة الحاسمة ============ -->
|
||
<section id="faq" class="max-w-4xl mx-auto px-4 pb-16 lg:pb-24">
|
||
<div class="reveal text-center">
|
||
<div class="inline-flex items-center gap-2 text-[#00B4D8] text-[13px] font-bold"><i data-lucide="message-circle-question" class="w-4 h-4"></i> أسئلة القيادة الحاسمة</div>
|
||
<h2 class="font-bold text-3xl lg:text-[38px] mt-2">كل سؤال مشروع.. <span class="ops-text">له جواب ميداني</span></h2>
|
||
</div>
|
||
<div class="space-y-3 mt-8" id="faqList"></div>
|
||
</section>
|
||
|
||
<!-- ============ الختام ============ -->
|
||
<section class="border-t border-[#1E90FF]/10 bg-[#060A12] relative overflow-hidden">
|
||
<div class="absolute inset-0 mgrs-bg opacity-60"></div>
|
||
<div class="relative max-w-4xl mx-auto px-4 pt-16 lg:pt-24 pb-10 text-center">
|
||
<div class="reveal grid sm:grid-cols-3 gap-3 max-w-3xl mx-auto mb-12 text-right">
|
||
<div class="glass rounded-xl p-4"><span class="num-ltr text-[11px] font-bold text-[#00B4D8] tracking-widest">STEP 01</span><b class="block mt-1">محاكاة حية بغرفة العمليات</b><p class="text-[12px] text-slate-400 mt-1 leading-6">عرض عملي على تضاريس اصطناعية وقياس مباشر للقدرات.</p></div>
|
||
<div class="glass rounded-xl p-4"><span class="num-ltr text-[11px] font-bold text-[#00B4D8] tracking-widest">STEP 02</span><b class="block mt-1">تقييم فني مشترك</b><p class="text-[12px] text-slate-400 mt-1 leading-6">لجنة من المركز الجغرافي الملكي تختبر كل محرك ميدانياً.</p></div>
|
||
<div class="glass rounded-xl p-4"><span class="num-ltr text-[11px] font-bold text-[#00B4D8] tracking-widest">STEP 03</span><b class="block mt-1">نشر تجريبي معزول</b><p class="text-[12px] text-slate-400 mt-1 leading-6">تشغيل محدود داخل شبكة مغلقة قبل الاعتماد الكامل.</p></div>
|
||
</div>
|
||
<span class="reveal inline-grid place-items-center w-16 h-16 rounded-2xl border border-[#00B4D8]/40 bg-[#0A1120] relative overflow-hidden mx-auto" style="animation:floaty 5s ease-in-out infinite">
|
||
<span class="absolute inset-0 radar-sweep opacity-60"></span><i data-lucide="medal" class="w-8 h-8 text-[#FFB800] relative"></i>
|
||
</span>
|
||
<div class="reveal text-[#00B4D8] text-[13px] font-bold mt-5 tracking-wide">الجاهزية تبدأ بالتقييم — Command Sign-off</div>
|
||
<h2 class="reveal font-black text-3xl lg:text-5xl mt-3">الأرض أرضنا. <span class="gold-text">والمعلومة سيادتنا.</span></h2>
|
||
<p class="reveal text-slate-300 mt-4 leading-8">مقدَّم إلى القيادة العامة للقوات المسلحة الأردنية — الجيش العربي<br>والمركز الجغرافي الملكي الأردني</p>
|
||
<div class="reveal mt-8 inline-flex items-center gap-4 glass rounded-xl px-6 py-4">
|
||
<span class="w-12 h-12 rounded-full grid place-items-center font-black text-lg text-[#020810]" style="background:linear-gradient(135deg,#FFB800,#FFD97A)">ح</span>
|
||
<span class="text-right"><b class="block">المقدم المتقاعد حمزة عايد الغويري</b><span class="text-[12.5px] text-slate-400">المؤسس والمهندس المعماري للأنظمة التكتيكية المتقدمة</span></span>
|
||
</div>
|
||
</div>
|
||
<footer class="relative border-t border-[#1E90FF]/10">
|
||
<div class="max-w-7xl mx-auto px-4 py-5 flex flex-wrap items-center justify-between gap-2 text-[12px] text-slate-500">
|
||
<span>رَصْد · منظومة الخرائط التكتيكية والسيادية الأردنية — عرض تعريفي مستقل</span>
|
||
<span class="num-ltr tracking-[.25em]">DESIGNED FOR SOVEREIGNTY · BUILT FOR JORDAN</span>
|
||
</div>
|
||
</footer>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- نافذة المحرك -->
|
||
<dialog id="engineDlg" class="bg-transparent p-4 w-[min(660px,94vw)]">
|
||
<div class="rounded-2xl p-6 sm:p-7 border border-[#00B4D8]/30 bg-[#060A12]">
|
||
<div class="flex items-start justify-between gap-3">
|
||
<div class="flex items-center gap-3.5">
|
||
<span id="edIcon" class="w-14 h-14 rounded-2xl grid place-items-center border border-[#00B4D8]/50 bg-black/50 text-[#00B4D8] shrink-0"></span>
|
||
<div>
|
||
<div class="flex items-center gap-2 flex-wrap"><span id="edNum" class="num-ltr text-[10px] font-bold tracking-[.22em] text-[#1E90FF]"></span><span id="edCat" class="text-[10.5px] font-bold rounded-full px-2.5 py-0.5 bg-[#00B4D8]/15 text-[#00B4D8] border border-[#00B4D8]/30"></span></div>
|
||
<h3 id="edTitle" style="color:#F0F8FF" class="font-bold text-[22px] leading-9 mt-1"></h3>
|
||
<div id="edEn" class="num-ltr text-[11px] tracking-[.18em] text-[#8DB8D8]"></div>
|
||
</div>
|
||
</div>
|
||
<button data-close class="w-9 h-9 grid place-items-center rounded-md border border-white/15 hover:border-[#00B4D8] shrink-0 text-slate-300" aria-label="إغلاق"><i data-lucide="x" class="w-4 h-4"></i></button>
|
||
</div>
|
||
<div class="h-px my-5 bg-gradient-to-l from-transparent via-[#00B4D8]/40 to-transparent"></div>
|
||
<div class="grid sm:grid-cols-5 gap-3">
|
||
<div class="sm:col-span-3 rounded-xl border border-[#1E90FF]/25 bg-black/30 p-4"><div class="text-[12.5px] font-bold text-[#00B4D8] flex items-center gap-1.5"><i data-lucide="target" class="w-4 h-4"></i> ماذا يفعل؟</div><p id="edDesc" class="text-[13.5px] leading-8 mt-1.5" style="color:#E8F4FD"></p></div>
|
||
<div class="sm:col-span-2 rounded-xl border border-[#FFB800]/30 bg-[#FFB800]/5 p-4"><div class="text-[12.5px] font-bold text-[#00B4D8] flex items-center gap-1.5"><i data-lucide="package-check" class="w-4 h-4"></i> ماذا تستلم القيادة؟</div><p id="edOut" class="text-[13px] leading-7 mt-1.5" style="color:#E8F4FD"></p></div>
|
||
</div>
|
||
<div class="mt-4 rounded-xl overflow-hidden border border-[#1E90FF]/20 bg-black/50">
|
||
<div class="flex items-center justify-between px-4 py-2.5 border-b border-white/5">
|
||
<span class="text-[12.5px] font-bold text-[#00B4D8] flex items-center gap-1.5"><span class="w-2 h-2 rounded-full bg-[#1E90FF] blink"></span> الإشارة الحية للمحرك — محاكاة محلية</span>
|
||
<span id="edLiveTag" class="num-ltr text-[10px] tracking-[.2em] text-slate-500">LIVE · LOCAL</span>
|
||
</div>
|
||
<div id="edGaugeWrap"><canvas id="edGauge" class="w-full h-[170px] block"></canvas>
|
||
<div id="edLiveVal"><div class="text-[11px] text-slate-400">القراءة المرجعية</div><div id="edValBig" class="num-ltr font-bold text-[22px]" style="color:#F0F8FF">—</div><div id="edValSub" class="text-[11px] text-[#1E90FF]"></div></div>
|
||
</div>
|
||
</div>
|
||
<div class="grid grid-cols-2 sm:grid-cols-4 gap-2 mt-3 text-center text-[11.5px]">
|
||
<div class="rounded-lg bg-black/40 border border-white/10 py-2.5 px-1"><div class="text-slate-400 mb-0.5">متى يُستخدم</div><b id="edUseBox" class="block text-[11.5px] leading-5" style="color:#E8F4FD"></b></div>
|
||
<div class="rounded-lg bg-black/40 border border-white/10 py-2.5 px-1"><div class="text-slate-400 mb-0.5">مصدر البيانات</div><b id="edSrcBox" class="block text-[11.5px] leading-5" style="color:#E8F4FD"></b></div>
|
||
<div class="rounded-lg bg-black/40 border border-white/10 py-2.5 px-1"><div class="text-slate-400 mb-0.5">بيئة التشغيل</div><b class="num-ltr block text-[11.5px]" style="color:#E8F4FD">OFFLINE · معزول</b></div>
|
||
<div class="rounded-lg bg-black/40 border border-white/10 py-2.5 px-1"><div class="text-slate-400 mb-0.5">الحالة</div><b class="block text-[11.5px] text-[#1E90FF]">جاهز للتجربة</b></div>
|
||
</div>
|
||
<p class="text-[11px] text-slate-500 mt-3 leading-5">معاينة واجهة ببيانات اصطناعية لأغراض العرض — لا تنتج حلول رماية أو توجيهاً ميدانياً.</p>
|
||
<div class="bg-[#00B4D8]/15 rounded-lg p-3 text-[12.5px] text-[#00B4D8] font-bold text-center">المنظومة جاهزة للاستعراض الحي — بلا مواعيد، بلا انتظار.</div>
|
||
</div>
|
||
</dialog>
|
||
|
||
<script>
|
||
'use strict';
|
||
lucide.createIcons();
|
||
const $=s=>document.querySelector(s), $$=s=>[...document.querySelectorAll(s)];
|
||
const reduced=matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||
|
||
/* شريط متحرك */
|
||
$('#ticker').innerHTML=[...Array(2)].map(()=>`
|
||
<span class="flex gap-10 text-[12px] font-bold text-slate-400">
|
||
<span><b class="text-[#00B4D8] num-ltr">OFFLINE-FIRST</b> · عمل كامل بدون إنترنت</span><span class="text-slate-700">///</span>
|
||
<span><b class="text-[#FFB800]">سيادة وطنية</b> · خوادم داخل الحدود</span><span class="text-slate-700">///</span>
|
||
<span><b class="text-[#1E90FF] num-ltr">BFT TRACKING</b> · تتبع مشفّر للقوات الصديقة</span><span class="text-slate-700">///</span>
|
||
<span><b class="text-[#00B4D8] num-ltr">LOS · VIEWSHED · ARTILLERY · HLZ</b> · محركات ميدانية</span><span class="text-slate-700">///</span>
|
||
<span><b class="text-[#FF4444] num-ltr">GPS-DENIED READY</b> · صمود تحت التشويش</span><span class="text-slate-700">///</span>
|
||
</span>`).join('');
|
||
|
||
/* قائمة الجوال */
|
||
$('#menuBtn').onclick=()=>$('#mobileNav').classList.toggle('hidden');
|
||
$$('#mobileNav a').forEach(a=>a.onclick=()=>$('#mobileNav').classList.add('hidden'));
|
||
|
||
/* السينما الحركية: ظهور واختفاء مزدوج الاتجاه + عمق + خطوط السرعة */
|
||
let lastScrollY=scrollY,scrollVel=0,slHide=0;
|
||
function triggerSpeed(d){const sl=$('#speedlines');if(!sl)return;sl.classList.add('on');slHide=performance.now()+d;}
|
||
(function(){const sl=$('#speedlines');if(!sl)return;for(let i=0;i<9;i++){const b=document.createElement('b');b.style.top=(6+Math.random()*88)+'%';b.style.left='0';b.style.animationDelay=(Math.random()*.45)+'s';b.style.animationDuration=(.28+Math.random()*.4)+'s';sl.appendChild(b);}})();
|
||
const io=new IntersectionObserver(es=>es.forEach(e=>{const el=e.target;
|
||
const r=e.boundingClientRect,dir=e.isIntersecting?(r.top+r.height/2>innerHeight/2?1:-1):(scrollVel>=0?1:-1);
|
||
el.style.setProperty('--rd',dir);
|
||
el.classList.toggle('in',e.isIntersecting);
|
||
}),{threshold:.1,rootMargin:'0px 0px -4% 0px'});
|
||
$$('.reveal').forEach(el=>io.observe(el));
|
||
function doPlx(){$$('[data-plx]').forEach(el=>{const r=el.parentElement.getBoundingClientRect();
|
||
const off=(r.top+r.height/2-innerHeight/2)*(parseFloat(el.dataset.plx)||0);
|
||
el.style.transform=`translate3d(0,${off.toFixed(1)}px,0)`;});}
|
||
addEventListener('scroll',()=>{const y=scrollY;scrollVel=y-lastScrollY;lastScrollY=y;
|
||
if(Math.abs(scrollVel)>34)triggerSpeed(360);
|
||
requestAnimationFrame(doPlx);},{passive:true});
|
||
|
||
/* عدّادات */
|
||
const cio=new IntersectionObserver(es=>es.forEach(e=>{
|
||
if(!e.isIntersecting)return; cio.unobserve(e.target);
|
||
const el=e.target, target=+el.dataset.count, suf=el.dataset.suffix||'';
|
||
const t0=performance.now(), dur=1600;
|
||
(function tick(t){ const p=Math.min(1,(t-t0)/dur), v=Math.round(target*(1-Math.pow(1-p,3)));
|
||
el.textContent=v.toLocaleString('en-US')+suf; if(p<1&&!reduced)requestAnimationFrame(tick); })(t0);
|
||
}),{threshold:.5});
|
||
$$('[data-count]').forEach(el=>cio.observe(el));
|
||
|
||
/* دالة الارتفاع الاصطناعي */
|
||
function elev(x,y){return 1.0*Math.exp(-((x+.35)**2*2.8+(y+.18)**2*5))+.65*Math.exp(-((x-.5)**2*6+(y-.32)**2*4))+.09*Math.sin(12*x+3*y)*Math.cos(9*y-3*x)+.065*Math.sin(24*x+6*y);}
|
||
function fitCanvas(c){const r=c.getBoundingClientRect(),d=Math.min(devicePixelRatio||1,2);c.width=Math.max(2,Math.round(r.width*d));c.height=Math.max(2,Math.round(r.height*d));const x=c.getContext('2d');x.setTransform(d,0,0,d,0,0);return{x,W:r.width,H:r.height};}
|
||
|
||
/* ===== HERO MAP ===== */
|
||
const heroC=$('#heroMap'); let HX={x:0,y:0}, heroMode='3d', heroPlay=!reduced, phase=0, lastT=0, heroVis=true, heroAlert=false, heroScan=9, overStack=false;
|
||
function heroResize(){HX=fitCanvas(heroC);drawHero();}
|
||
function hproj(x,y,W,H){return [W*.5+(x-y)*W*.30, H*.56+(x+y)*H*.20-elev(x,y)*H*.30];}
|
||
function drawHero(){
|
||
if(!HX.W)return;
|
||
const c=heroC.getContext('2d'),Wd=HX.W,Ht=HX.H,dpr=Math.min(devicePixelRatio||1,2);
|
||
c.save();c.setTransform(dpr,0,0,dpr,0,0);
|
||
c.clearRect(0,0,Wd,Ht);
|
||
c.strokeStyle='rgba(30,144,255,.18)';c.lineWidth=1;
|
||
for(let i=0;i<Wd;i+=42){c.beginPath();c.moveTo(i,0);c.lineTo(i,Ht);c.stroke();}
|
||
for(let i=0;i<Ht;i+=42){c.beginPath();c.moveTo(0,i);c.lineTo(Wd,i);c.stroke();}
|
||
// شبكة التضاريس
|
||
c.lineWidth=.7;
|
||
for(let yy=-1.1;yy<1.13;yy+=.05){c.beginPath();for(let xx=-1.1;xx<=1.12;xx+=.03){const p=hproj(xx,yy,Wd,Ht);xx<=-1.09?c.moveTo(...p):c.lineTo(...p);}
|
||
c.strokeStyle=heroMode==='los'?'rgba(0,180,216,.42)':'rgba(30,144,255,.38)';c.stroke();}
|
||
// مسار إمداد
|
||
c.setLineDash([5,6]);c.strokeStyle='rgba(255,184,0,.75)';c.lineWidth=1.5;c.beginPath();
|
||
for(let i=0;i<=80;i++){const xx=-.9+i/44, p=hproj(xx,.26+Math.sin(xx*3+phase*.4)*.27,Wd,Ht);i?c.lineTo(...p):c.moveTo(...p);}c.stroke();c.setLineDash([]);
|
||
// رادار عملياتي
|
||
const cc=hproj(.1,.05,Wd,Ht), R=Wd*.20;
|
||
c.save();c.translate(cc[0],cc[1]);c.scale(1,.5);
|
||
[.35,.7,1].forEach(f=>{c.beginPath();c.arc(0,0,R*f,0,7);c.strokeStyle='rgba(0,180,216,.3)';c.stroke();});
|
||
c.rotate(phase*.5);const g=c.createConicGradient(0,0,0);g.addColorStop(0,'rgba(0,180,216,.4)');g.addColorStop(.2,'transparent');g.addColorStop(1,'transparent');
|
||
c.fillStyle=g;c.beginPath();c.moveTo(0,0);c.arc(0,0,R,0,7);c.fill();c.restore();
|
||
// قطاع استطلاع محيط بالراصد
|
||
const obsP=hproj(-.5,-.3,Wd,Ht),sR=Wd*.17;
|
||
c.save();c.translate(obsP[0],obsP[1]);c.scale(1,.55);
|
||
for(let i=0;i<3;i++){const ring=sR*((phase*.55+i/3)%1);c.strokeStyle='rgba(0,180,216,'+(0.4*(1-ring/sR)).toFixed(2)+')';c.lineWidth=1;c.beginPath();c.arc(0,0,ring,0,7);c.stroke();}
|
||
const a0=phase*.9%(Math.PI*2);const gg=c.createConicGradient(a0,0,0);gg.addColorStop(0,'rgba(30,144,255,.4)');gg.addColorStop(.10,'transparent');
|
||
c.fillStyle=gg;c.beginPath();c.moveTo(0,0);c.arc(0,0,sR,a0,a0+2.2);c.fill();c.restore();
|
||
// طائرات استطلاع متحركة بآثارها
|
||
[[0,0],[1.5,.5]].forEach(([sp,phz])=>{
|
||
const t=(((phase*.8*sp)%2)+phz)%2-1,dx=t*.88,dy=Math.sin(t*4+phase*.7)*.26-.12;
|
||
c.save();c.globalAlpha=.45;c.setLineDash([3,4]);c.strokeStyle='#00D4FF';
|
||
c.beginPath();for(let i=0;i<9;i++){const tt=t-i*.045;if(tt<-1)break;const px=tt*.88,py=Math.sin(tt*4+phase*.7)*.26-.12,pp=hproj(px,py,Wd,Ht);i?c.lineTo(...pp):c.moveTo(...pp);}c.stroke();c.restore();
|
||
const q=hproj(dx,dy,Wd,Ht);
|
||
c.save();c.translate(q[0],q[1]);c.rotate(Math.PI/4);c.strokeStyle='#00D4FF';c.lineWidth=2;
|
||
c.beginPath();c.moveTo(7,0);c.lineTo(-3,6);c.lineTo(1,0);c.lineTo(-3,-6);c.closePath();c.stroke();c.restore();
|
||
});
|
||
// تتبع القوات الصديقة — وحدات تتحرك على مساراتها
|
||
const showAll=heroMode==='bft';
|
||
const BFT=[[-.57,-.12,'S1','#00B4D8',0],[-.2,.5,'D4','#00B4D8',1],[.22,.18,'S2','#00B4D8',.5],[.5,-.55,'OP','#FFB800',.3],[-.28,-.5,'E5','#00B4D8',.8]];
|
||
BFT.forEach(([bx,by,lb,col,phz],i)=>{
|
||
if(!showAll&&i!==0&&i!==3)return;
|
||
const tt=phase*.5*(showAll?2:1)+phz*3;
|
||
const ux=bx+Math.sin(tt*1.7+i*2)*.05,uy=by+Math.cos(tt*1.3+i)*.05;
|
||
c.save();c.globalAlpha=.5;c.setLineDash([2,4]);c.strokeStyle=col+'66';c.lineWidth=1;
|
||
c.beginPath();for(let k=0;k<10;k++){const t2=tt-k*.08;const qx=bx+Math.sin(t2*1.7+i*2)*.05,qy=by+Math.cos(t2*1.3+i)*.05,pp=hproj(qx,qy,Wd,Ht);k?c.lineTo(...pp):c.moveTo(...pp);}c.stroke();c.restore();
|
||
const p=hproj(ux,uy,Wd,Ht);
|
||
c.fillStyle='rgba(6,20,28,.9)';c.strokeStyle=col;c.lineWidth=1.4;
|
||
c.fillRect(p[0]-7,p[1]-6,13,11);c.strokeRect(p[0]-7,p[1]-6,13,11);
|
||
c.beginPath();c.moveTo(p[0]-5,p[1]+4);c.lineTo(p[0]+5,p[1]-4);c.stroke();
|
||
c.beginPath();c.arc(p[0],p[1],11+(Math.sin(phase*2+i)+1)*3,0,7);c.strokeStyle=col+'55';c.stroke();
|
||
c.fillStyle=col;c.font='9px monospace';c.fillText(lb,p[0]+12,p[1]-8);
|
||
if(showAll){const pr=((phase*2+i*.7)%1)*16;c.strokeStyle='rgba(0,212,255,.5)';c.lineWidth=1;c.beginPath();c.arc(p[0],p[1],pr,0,7);c.stroke();}
|
||
});
|
||
// خط الرؤية — خطوط متدفقة تتحول للأحمر عند الحجب
|
||
const mx=Math.max(-1,Math.min(1,(heroMouse.x/Wd)*2-1)), my=Math.max(-1,Math.min(1,(heroMouse.y/Ht)*2-1));
|
||
const oN=[-.5,-.3],tN=[mx,my];
|
||
if(heroMode!=='bft'){
|
||
const blk=Math.max(0,losBlocked(oN,tN)), vis=blk<=.005;
|
||
const o=hproj(...oN,Wd,Ht), t=hproj(...tN,Wd,Ht);
|
||
c.save();c.strokeStyle=vis?'rgba(0,180,216,.9)':'rgba(255,68,68,.95)';
|
||
c.lineWidth=vis?1.6:2.6;c.setLineDash(vis?[6,6]:[10,6,3,6]);
|
||
c.lineDashOffset=-phase*34;c.shadowColor=vis?'#00B4D8':'#FF4444';c.shadowBlur=vis?8:16;
|
||
c.beginPath();c.moveTo(...o);c.lineTo(...t);c.stroke();c.restore();
|
||
if(!vis){const hx=hproj(oN[0]+(tN[0]-oN[0])*.5,oN[1]+(tN[1]-oN[1])*.5,Wd,Ht);
|
||
c.save();c.strokeStyle='#FF4444';c.lineWidth=3;c.shadowColor='#FF4444';c.shadowBlur=10;
|
||
c.beginPath();c.moveTo(hx[0]-7,hx[1]-7);c.lineTo(hx[0]+7,hx[1]+7);c.moveTo(hx[0]+7,hx[1]-7);c.lineTo(hx[0]-7,hx[1]+7);c.stroke();c.restore();}
|
||
c.fillStyle='#00B4D8';c.beginPath();c.arc(...o,5+(phase%1)*2,0,7);c.fill();
|
||
c.fillStyle='#FFB800';c.beginPath();c.arc(...t,4+((phase*2)%1)*2,0,7);c.fill();
|
||
}
|
||
// تماس — نبضة تحذير حمراء
|
||
if(heroAlert){
|
||
const age=phase-heroAlert.t,pr=(age*1.6)%1;
|
||
const lp=hproj(heroAlert.x,heroAlert.y,Wd,Ht);
|
||
c.save();c.translate(lp[0],lp[1]);c.scale(1,.6);
|
||
c.strokeStyle='rgba(255,68,68,'+(0.9*(1-pr)).toFixed(2)+')';c.lineWidth=2.5;c.beginPath();c.arc(0,0,10+pr*30,0,7);c.stroke();c.restore();
|
||
c.save();c.strokeStyle='#FF4444';c.lineWidth=2.5;c.shadowColor='#FF4444';c.shadowBlur=12;
|
||
c.strokeRect(lp[0]-6,lp[1]-6,12,12);
|
||
c.beginPath();c.moveTo(lp[0]-4,lp[1]+4);c.lineTo(lp[0]+4,lp[1]-4);c.stroke();c.restore();
|
||
const co=hproj(-.5,-.3,Wd,Ht);
|
||
c.save();c.setLineDash([3,5]);c.strokeStyle='rgba(255,68,68,.6)';c.lineWidth=1.2;c.beginPath();c.moveTo(...co);c.lineTo(...lp);c.stroke();c.restore();
|
||
}
|
||
c.restore();
|
||
// قراءات
|
||
const gx=Math.round((mx*50000+31200)), gy=Math.round(((1-my)*50000+14100));
|
||
$('#heroCoords').textContent=`36R XV ${String(gx).padStart(5,'0')} ${String(gy).padStart(5,'0')}`;
|
||
const az=((Math.atan2(mx+.5,my+.5)*180/Math.PI)+360)%360, el=8+3*Math.sin(phase);
|
||
$('#heroFire').textContent=`AZ ${az.toFixed(1)}° · EL +${el.toFixed(1)}° · RNG ${(2.4+Math.sin(phase*.7)).toFixed(2)}km`;
|
||
}
|
||
let heroMouse={x:200,y:150};
|
||
heroC.addEventListener('pointermove',e=>{const r=heroC.getBoundingClientRect();heroMouse={x:e.clientX-r.left,y:e.clientY-r.top};});
|
||
$$('.hv').forEach(b=>b.onclick=()=>{heroMode=b.dataset.hview;$$('.hv').forEach(x=>{const on=x===b;x.className='hv px-3 py-1.5 rounded-md text-[11.5px] font-bold '+(on?'bg-[#00B4D8] text-[#020810]':'glass text-slate-200');});drawHero();});
|
||
$('#heroPause').onclick=e=>{heroPlay=!heroPlay;e.currentTarget.innerHTML=heroPlay?'<i data-lucide="pause" class="w-3.5 h-3.5"></i> إيقاف':'<i data-lucide="play" class="w-3.5 h-3.5"></i> تشغيل';lucide.createIcons();};
|
||
new IntersectionObserver(es=>heroVis=es[0].isIntersecting).observe(heroC);
|
||
function heroLoop(t){const dt=Math.min(.07,(t-lastT)/1000||0);lastT=t;
|
||
if(heroPlay&&!document.hidden&&heroVis){phase+=dt;
|
||
if(!heroAlert||phase-heroAlert.t>heroScan){heroAlert={x:.12+Math.random()*.55,y:-.5+Math.random()*.65,t:phase};heroScan=5.5+Math.random()*4;}
|
||
drawHero();
|
||
$('#heroClock').textContent='T+ '+new Date(Math.floor(phase)*1000).toISOString().slice(11,19);
|
||
const al=$('#heroAlert');
|
||
if(al){const a=phase-heroAlert.t<heroScan-1.2;al.textContent=a?'⚠ تماس ! CONTACT':'NO CONTACT — HOLDING';al.style.opacity=a?1:.35;}}
|
||
if(slHide&&performance.now()>slHide){const sl=$('#speedlines');if(sl)sl.classList.remove('on');}
|
||
if(!overStack)swayStack();
|
||
requestAnimationFrame(heroLoop);}
|
||
new ResizeObserver(heroResize).observe(heroC);heroResize();requestAnimationFrame(heroLoop);
|
||
|
||
/* ===== مكدس الطبقات ===== */
|
||
const LAYERS=[
|
||
{t:'التضاريس والارتفاعات الرقمية',en:'DEM / HILLSHADE MESH',d:'نموذج الارتفاع الخام: الأساس الذي تُبنى عليه كل حسابات الرؤية والرماية والعبور.',c:'#1E90FF',icon:'mountain'},
|
||
{t:'خطوط الكنتور الطبوغرافية العسكرية',en:'TACTICAL CONTOURS',d:'خطوط متساوية الارتفاع بفواصل عسكرية تكشف التكوين التضاريسي والممرات الحاكمة.',c:'#00B4D8',icon:'spline'},
|
||
{t:'شبكة الطرق والممرات غير المعبدة',en:'OFF-ROAD TACTICAL VECTORS',d:'محاور التقدم والمناورة والطرق الترابية البديلة خارج الشبكة المدنية المعروفة.',c:'#FFB800',icon:'route'},
|
||
{t:'شبكة الإحداثيات والتربيع العسكري',en:'MGRS GRID',d:'مرجع الإسناد المكاني الموحد لتبادل الإحداثيات بين الوحدات بدقة وسرية.',c:'#00B4D8',icon:'grid-3x3'},
|
||
{t:'طبقة العمليات وتتبع القوات الصديقة',en:'BFT / MIL-STD-2525',d:'رموز العمليات القياسية ومواقع القوات الصديقة المزامنة عبر شبكات مغلقة.',c:'#00D4FF',icon:'radar'},
|
||
];
|
||
let spread=60, selLayer=0, tilt={x:54,z:0};
|
||
$('#layerList').innerHTML=LAYERS.map((l,i)=>`
|
||
<button data-layer="${i}" class="lrow text-right glass rounded-xl p-3.5 flex items-center gap-3 border transition hover:-translate-y-0.5">
|
||
<span class="num-ltr text-[11px] font-black w-8 h-8 grid place-items-center rounded-lg border" style="color:${l.c};border-color:${l.c}55;background:${l.c}14">0${i+1}</span>
|
||
<span class="flex-1"><b class="block text-[13.5px]">${l.t}</b><span class="num-ltr block text-[10px] tracking-widest text-slate-500">${l.en}</span></span>
|
||
<i data-lucide="${l.icon}" class="w-5 h-5" style="color:${l.c}"></i>
|
||
</button>`).join('');
|
||
$('#stack3d').innerHTML=LAYERS.map((l,i)=>`
|
||
<div class="layer-plane absolute inset-0 rounded-xl overflow-hidden border" data-plane="${i}" style="border-color:${l.c}55">
|
||
<canvas class="w-full h-full block" width="340" height="340"></canvas>
|
||
<span class="absolute bottom-2 right-2 num-ltr text-[10px] tracking-widest px-2 py-0.5 rounded bg-black/60 border" style="color:${l.c};border-color:${l.c}44">0${i+1} / ${l.en.split(' /')[0]}</span>
|
||
</div>`).join('');
|
||
lucide.createIcons();
|
||
function paintLayer(cv,i){
|
||
const c=cv.getContext('2d'),S=340;c.clearRect(0,0,S,S);
|
||
c.fillStyle='rgba(21,19,14,.42)';c.fillRect(0,0,S,S);
|
||
const col=LAYERS[i].c;
|
||
if(i===0||i===1){for(let j=0;j<22;j++){c.beginPath();for(let k=0;k<=60;k++){const x=k/60*S,y=20+j*14+Math.sin(k*.25+j*.5)*16+Math.sin(k*.5)*6;k?c.lineTo(x,y):c.moveTo(x,y);}c.strokeStyle=col+(i===0?'55':'AA');c.lineWidth=i===0?1:1.3;c.stroke();}
|
||
if(i===1){c.fillStyle=col;c.font='bold 10px monospace';for(let j=0;j<8;j++)c.fillText((100+j*20)+'m',12,40+j*36);}}
|
||
if(i===2){c.strokeStyle=col;c.lineWidth=3;for(let j=0;j<4;j++){c.globalAlpha=.85;c.beginPath();for(let k=0;k<=40;k++){const x=k/40*S,y=50+j*75+Math.sin(k*.3+j)*30;k?c.lineTo(x,y):c.moveTo(x,y);}c.stroke();}
|
||
c.globalAlpha=.3;c.lineWidth=1;for(let j=0;j<6;j++){c.beginPath();c.moveTo(0,j*60);c.lineTo(S,j*60+40);c.stroke();}c.globalAlpha=1;}
|
||
if(i===3){c.strokeStyle=col+'66';c.lineWidth=1;for(let x=0;x<S;x+=34){c.beginPath();c.moveTo(x,0);c.lineTo(x,S);c.stroke();c.beginPath();c.moveTo(0,x);c.lineTo(S,x);c.stroke();}
|
||
c.strokeStyle=col;c.lineWidth=2;c.strokeRect(20,20,S-40,S-40);c.fillStyle=col;c.font='bold 13px monospace';c.fillText('MGRS · DEMO GRID',40,S-30);}
|
||
if(i===4){[[80,80,'INF'],[210,150,'ARM'],[90,230,'OBS']].forEach(([x,y,lb],k)=>{c.strokeStyle=col;c.lineWidth=2;c.strokeRect(x,y,52,34);
|
||
c.beginPath();c.moveTo(x,y);c.lineTo(x+52,y+34);c.moveTo(x+52,y);c.lineTo(x,y+34);c.stroke();
|
||
c.beginPath();c.arc(x+26,y+17,44,0,7);c.strokeStyle=col+'55';c.stroke();c.fillStyle='#fff';c.font='bold 10px monospace';c.fillText(lb,x+8,y+21);});
|
||
c.setLineDash([6,6]);c.strokeStyle='#FFB800';c.beginPath();c.moveTo(106,114);c.lineTo(236,167);c.lineTo(116,247);c.stroke();c.setLineDash([]);}
|
||
}
|
||
$$('#stack3d canvas').forEach((cv,i)=>paintLayer(cv,i));
|
||
function renderStack(){
|
||
$$('#stack3d .layer-plane').forEach((p,i)=>{
|
||
const off=(i-2)*spread*.85;
|
||
p.style.transform=`translateZ(${off}px)`;
|
||
p.style.opacity=(i===selLayer||spread>8)?(i===selLayer?1:.88):.4;
|
||
p.classList.toggle('active',i===selLayer);
|
||
});
|
||
$('#stack3d').style.transform=`rotateX(${tilt.x}deg) rotateZ(${tilt.z}deg)`;
|
||
$('#spreadOut').textContent=spread+'%';$('#peelRead').textContent='PEEL '+spread+'%';
|
||
$('#tiltRead').textContent=`${tilt.x.toFixed(0)}° / ${tilt.z.toFixed(0)}°`;
|
||
$('#layerDesc').textContent=LAYERS[selLayer].d;
|
||
$$('#layerList .lrow').forEach((b,i)=>{b.style.borderColor=i===selLayer?LAYERS[i].c:'transparent';b.style.background=i===selLayer?'rgba(0,180,216,.06)':'';});
|
||
const sp=$('#spread');sp.value=spread;sp.style.setProperty('--fill',spread+'%');
|
||
}
|
||
$$('#layerList .lrow').forEach(b=>b.onclick=()=>{selLayer=+b.dataset.layer;renderStack();});
|
||
const spEl=$('#spread');
|
||
function paintRange(el){el.style.setProperty('--fill',(100*(el.value-el.min)/(el.max-el.min))+'%');}
|
||
spEl.addEventListener('input',()=>{spread=+spEl.value;paintRange(spEl);renderStack();});paintRange(spEl);
|
||
const stage=$('#stackStage');
|
||
stage.addEventListener('pointermove',e=>{if(e.pointerType!=='mouse'||reduced)return;const r=stage.getBoundingClientRect();
|
||
tilt.z=((e.clientX-r.left)/r.width-.5)*20; tilt.x=54+((e.clientY-r.top)/r.height-.5)*-14;
|
||
$('#stack3d').style.transform=`rotateX(${tilt.x}deg) rotateZ(${tilt.z}deg)`;$('#tiltRead').textContent=`${tilt.x.toFixed(0)}° / ${tilt.z.toFixed(0)}°`;});
|
||
stage.addEventListener('pointerenter',()=>overStack=true);
|
||
stage.addEventListener('pointerleave',()=>overStack=false);
|
||
let swayT=0;
|
||
function swayStack(){if(reduced)return;swayT+=.025;tilt.z=Math.sin(swayT)*7;tilt.x=54+Math.sin(swayT*.7)*3.5;
|
||
$('#stack3d').style.transform=`rotateX(${tilt.x.toFixed(1)}deg) rotateZ(${tilt.z.toFixed(1)}deg)`;
|
||
$('#tiltRead').textContent=`${tilt.x.toFixed(0)}° / ${tilt.z.toFixed(0)}°`;}
|
||
/* تفكك عند التمرير */
|
||
let manual=false;spEl.addEventListener('pointerdown',()=>manual=true);
|
||
addEventListener('scroll',()=>{if(manual||reduced)return;const r=stage.getBoundingClientRect();
|
||
if(r.top<innerHeight&&r.bottom>0){spread=Math.round(Math.max(0,Math.min(100,(innerHeight-r.top)/innerHeight*115-8)));renderStack();}},{passive:true});
|
||
renderStack();
|
||
|
||
/* ===== الترسانة ===== */
|
||
const CATS={recon:'استطلاع ورصد',cmd:'قيادة وتموضع',fire:'نيران وإسناد',eng:'هندسة ميدان'};
|
||
const ENGINES=[
|
||
{icon:'radar',cat:'recon',t:'مساحات الرؤية الدائرية 360°',en:'VIEWSHED ANALYSIS',d:'تحديد نطاق الكشف البصري والراداري من المواقع الحاكمة وأبراج المراقبة لكشف تسلل العدو عبر الوديان.',out:'خريطة تغطية دائرية: مكشوف مقابل محجوب مع نسبة التغطية.',use:'اختيار أبراج المراقبة ونقاط الرصد قبل التقدم.',src:'أبراج المراقبة والمواقع الحاكمة',v:'12.6km',k:'مدى الكشف'},
|
||
{icon:'eye',cat:'recon',t:'خط الرؤية الميداني',en:'LINE OF SIGHT / LOS',d:'حساب زوايا التغطية وكشف النقاط الميتة والمحجوبة وتحديد مجالات الرماية للمدافع والرشاشات بدقة الارتفاع السنتيمترية.',out:'مقطع رؤية راصد ← هدف: مكشوف أو محجوب مع نقطة الحجب.',use:'تثبيت الرشاشات والمدافع في مجالات نارية مؤكدة.',src:'نموذج الارتفاع الوطني',v:'94.2%',k:'تغطية مكشوفة'},
|
||
{icon:'compass',cat:'cmd',t:'التموضع بالتقاطع الخلفي',en:'GPS-DENIED RESECTION',d:'تحديد إحداثيات القوة بدقة عند التشويش الإلكتروني الكامل عبر التسديد البصري على قمم المعالم المعروفة.',out:'إحداثية تقديرية + هامش دقة من ثلاثة اتجاهات معلومة.',use:'عند انقطاع GPS: تسديد على 3 قمم واسترجاع الموقع.',src:'قمم ومعالم جغرافية معلومة',v:'±9m',k:'دقة التقاطع'},
|
||
{icon:'radio-tower',cat:'cmd',t:'تتبع القوات الصديقة بدون شبكة',en:'BLUE FORCE TRACKING',d:'بث ومزامنة تحركات السرايا والآليات لحظياً عبر شبكات راديوية أو محلية ذاتية التنظيم دون أي برج مدني.',out:'صورة موحدة: مواقع الوحدات وحالتها لحظة بلحظة.',use:'منع النيران الصديقة وضبط التقدم بين السرايا.',src:'شبكة راديوية مغلقة',v:'2.0s',k:'زمن المزامنة'},
|
||
{icon:'crosshair',cat:'fire',t:'حلول نيران المدفعية والهاونات',en:'ARTILLERY & BALLISTICS',d:'استخراج حلول الرماية فلكياً وتضاريسياً: زوايا السبطانة وزمن التحليق ونقطة السقوط بالاعتماد على نموذج الارتفاع الحقيقي.',out:'زاوية السبطانة + زمن التحليق + نقطة السقوط المتوقعة.',use:'تحضير جدول الرمي قبل الاشتباك من التضاريس الحقيقية.',src:'نموذج الارتفاع والحساب الفلكي',v:'±18m',k:'دقة السقوط CEP'},
|
||
{icon:'helicopter',cat:'fire',t:'تقييم مهابط المروحيات',en:'HLZ ASSESSMENT',d:'فحص ميلان الأرض وقطر الخلو من العوائق وتحديد ممرات الهبوط والإقلاع الآمنة في الثواني الحرجة.',out:'صلاحية مهبط: صالح / مشروط / مرفوض مع ممرات الاقتراب.',use:'اختيار مهبط الإخلاء أو الإنزال في الثواني الحرجة.',src:'مسح تضاريسي مباشر للموقع',v:'6.2°',k:'أقصى ميلان آمن'},
|
||
{icon:'triangle-alert',cat:'eng',t:'حقول الألغام والمناطق المحرمة',en:'MINEFIELD & HAZARD',d:'ترسيم حقول الألغام والمخاطر التكتيكية وحساب ممرات العبور الآمنة للقوات المتقدمة.',out:'حدود المناطق المحرمة + ممرات العبور الآمنة المعتمدة.',use:'تأمين تقدم المشاة والآليات عبر حقول المخاطر.',src:'مخططات هندسية معتمدة',v:'3',k:'ممرات آمنة'},
|
||
];
|
||
$('#engineGrid').innerHTML=ENGINES.map((e,i)=>`
|
||
<button data-eng="${i}" data-cat="${e.cat}" class="engine-card reveal sheen glass glass-glow corner rounded-2xl p-5 text-right flex flex-col" style="transition-delay:${(i%4)*70}ms">
|
||
<div class="flex items-center justify-between"><span class="w-11 h-11 rounded-xl grid place-items-center border border-[#00B4D8]/35 bg-black/40"><i data-lucide="${e.icon}" class="w-5 h-5 text-[#00B4D8]"></i></span>
|
||
<span class="num-ltr text-[10px] tracking-widest text-slate-500">0${i+1} / 07</span></div>
|
||
<div class="mt-3"><span class="text-[10.5px] font-bold rounded-full px-2.5 py-0.5 bg-[#00B4D8]/12 text-[#00B4D8] border border-[#00B4D8]/25">${CATS[e.cat]}</span></div>
|
||
<h3 class="font-bold text-[16px] mt-2 leading-7 glitch">${e.t}</h3>
|
||
<div class="num-ltr text-[10px] tracking-widest text-[#1E90FF] mt-0.5">${e.en}</div>
|
||
<p class="text-[12.5px] text-slate-400 leading-6 mt-2">${e.d}</p>
|
||
<canvas class="spark w-full h-[64px] mt-3 rounded-md bg-black/40 border border-white/5" data-spark="${i}" aria-hidden="true"></canvas>
|
||
<div class="flex items-center justify-between mt-3 pt-3 border-t border-white/5"><span class="num-ltr font-black text-[#00B4D8] text-[15px]">${e.v} <span class="text-[10px] font-bold text-slate-500">${e.k}</span></span>
|
||
<span class="text-[12px] font-bold text-slate-300 inline-flex items-center gap-1">التفاصيل والمخرج <i data-lucide="arrow-left" class="w-4 h-4 text-[#00B4D8]"></i></span></div>
|
||
</button>`).join('')+`
|
||
<div class="reveal sheen rounded-2xl p-5 border border-[#FFB800]/40 relative overflow-hidden flex flex-col justify-center" style="transition-delay:240ms;background:linear-gradient(150deg,rgba(255,184,0,.16),rgba(13,12,9,.92))">
|
||
<i data-lucide="wifi-off" class="w-8 h-8 text-[#FFB800]"></i>
|
||
<h3 class="font-black text-xl mt-2 leading-8">الميدان لا ينتظر<br><span class="gold-text">عودة الاتصال.</span></h3>
|
||
<p class="text-[13px] text-slate-300 mt-2 leading-7">بنية مصممة للعمل محلياً أولاً — استمرارية القرار أولوية مطلقة.</p>
|
||
<a href="#security" class="mt-4 inline-flex items-center gap-1 text-[13px] font-bold text-[#FFB800]">استكشف المعمارية <i data-lucide="arrow-left" class="w-4 h-4"></i></a>
|
||
<div class="num-ltr mt-3 text-[11px] tracking-widest text-slate-400">OFFLINE FIRST · 0% DEPENDENCY</div>
|
||
</div>`;
|
||
lucide.createIcons();$$('#engineGrid .reveal').forEach(el=>io.observe(el));
|
||
function paintSpark(cv,i){
|
||
const{x:c,W,H}=fitCanvas(cv);c.clearRect(0,0,W,H);
|
||
const gold='rgba(0,180,216,.95)',dim='rgba(0,180,216,.35)',olive='rgba(30,144,255,.8)',red='rgba(239,68,68,.9)';
|
||
c.lineWidth=1.8;
|
||
if(i===0){const cx=W/2,cy=H/2+4,R=Math.min(W,H)/2-6;[.4,.7,1].forEach(f=>{c.beginPath();c.arc(cx,cy,R*f,0,7);c.strokeStyle=dim;c.lineWidth=1;c.stroke();});
|
||
for(let a=0;a<12;a++){const r=a/12*Math.PI*2,l=R*(a%3===0?.55:1);c.beginPath();c.moveTo(cx,cy);c.lineTo(cx+Math.cos(r)*l,cy+Math.sin(r)*l*.55);c.strokeStyle=a%4===0?red:gold;c.lineWidth=a%4===0?2:1;c.stroke();}
|
||
c.fillStyle=gold;c.beginPath();c.arc(cx,cy,3,0,7);c.fill();}
|
||
else if(i===1){c.beginPath();for(let px=0;px<=W;px+=3){const y=H-8-Math.sin(px/W*Math.PI)*H*.35-Math.sin(px*.2)*3;px?c.lineTo(px,y):c.moveTo(px,y);}c.strokeStyle=olive;c.lineWidth=2;c.stroke();
|
||
c.setLineDash([5,4]);c.beginPath();c.moveTo(8,H-10);c.lineTo(W-8,14);c.strokeStyle=gold;c.lineWidth=2;c.stroke();c.setLineDash([]);
|
||
c.strokeStyle=red;c.lineWidth=4;c.beginPath();c.moveTo(W*.45,H*.55);c.lineTo(W*.58,H*.42);c.stroke();
|
||
c.fillStyle=gold;c.beginPath();c.arc(8,H-10,3.5,0,7);c.fill();c.fillStyle='#FFB800';c.beginPath();c.arc(W-8,14,3.5,0,7);c.fill();}
|
||
else if(i===2){const v=[[W*.5,10],[12,H-8],[W-12,H-8]],meet=[W*.5,H*.55];v.forEach((p,k)=>{c.setLineDash([4,3]);c.beginPath();c.moveTo(...p);c.lineTo(...meet);c.strokeStyle=k===1?olive:gold;c.lineWidth=1.5;c.stroke();c.setLineDash([]);c.strokeStyle=gold;c.strokeRect(p[0]-5,p[1]-7,10,10);});
|
||
c.strokeStyle=red;c.lineWidth=1.5;c.beginPath();c.arc(meet[0],meet[1],9,0,7);c.stroke();c.fillStyle=gold;c.beginPath();c.arc(meet[0],meet[1],3,0,7);c.fill();}
|
||
else if(i===3){const n=[[W*.2,H*.3],[W*.5,H*.22],[W*.78,H*.35],[W*.4,H*.72],[W*.68,H*.68]];n.forEach((p,k)=>{c.strokeStyle=k===1?'#FFB800':gold;c.lineWidth=1.5;c.strokeRect(p[0]-6,p[1]-5,12,10);c.beginPath();c.moveTo(p[0]-4,p[1]+3);c.lineTo(p[0]+4,p[1]-3);c.stroke();});
|
||
c.setLineDash([3,3]);c.strokeStyle=olive;c.beginPath();c.moveTo(...n[0]);c.lineTo(...n[1]);c.lineTo(...n[2]);c.moveTo(...n[1]);c.lineTo(...n[3]);c.lineTo(...n[4]);c.stroke();c.setLineDash([]);}
|
||
else if(i===4){c.beginPath();c.moveTo(6,H-6);c.quadraticCurveTo(W*.45,-H*.25,W-8,H-14);c.strokeStyle=gold;c.lineWidth=2;c.stroke();
|
||
c.fillStyle=olive;c.font='9px monospace';c.fillText('APEX',W*.42,10);c.strokeStyle=red;c.lineWidth=2;c.beginPath();c.moveTo(W-14,H-20);c.lineTo(W-3,H-9);c.moveTo(W-3,H-20);c.lineTo(W-14,H-9);c.stroke();}
|
||
else if(i===5){const cx=W/2,cy=H/2,R=Math.min(W,H)/2-5;c.beginPath();c.arc(cx,cy,R,0,7);c.strokeStyle=gold;c.lineWidth=2;c.stroke();
|
||
c.fillStyle=gold;c.font='bold 13px monospace';c.textAlign='center';c.fillText('H',cx,cy+5);c.textAlign='start';
|
||
c.strokeStyle=olive;c.lineWidth=1.5;[[0,-1],[0,1],[-1,0],[1,0]].forEach(([dx,dy])=>{c.beginPath();c.moveTo(cx+dx*(R+2),cy+dy*(R+2));c.lineTo(cx+dx*(R+8),cy+dy*(R+8));c.stroke();});}
|
||
else{for(let k=-H;k<W;k+=9){c.beginPath();c.moveTo(k,H);c.lineTo(k+H,0);c.strokeStyle='rgba(239,68,68,.4)';c.lineWidth=1.5;c.stroke();}
|
||
c.fillStyle='rgba(21,19,14,.85)';c.fillRect(W*.32,0,W*.36,H);c.strokeStyle=gold;c.lineWidth=2;c.setLineDash([6,4]);c.strokeRect(W*.32,2,W*.36,H-4);c.setLineDash([]);
|
||
c.fillStyle=gold;c.font='bold 10px monospace';c.fillText('SAFE',W*.32+8,H/2);}
|
||
}
|
||
$$('.spark').forEach(cv=>paintSpark(cv,+cv.dataset.spark));
|
||
/* نافذة المحرك */
|
||
const edlg=$('#engineDlg');let engIdx=0,gaugeT=0;
|
||
$$('[data-eng]').forEach(b=>b.onclick=()=>{engIdx=+b.dataset.eng;const e=ENGINES[engIdx];
|
||
$('#edNum').textContent=`ENGINE 0${engIdx+1} / 07`;$('#edCat').textContent=CATS[e.cat];
|
||
$('#edTitle').textContent=e.t;$('#edEn').textContent=e.en;$('#edDesc').textContent=e.d;
|
||
$('#edOut').textContent=e.out;$('#edUseBox').textContent=e.use;$('#edSrcBox').textContent=e.src;
|
||
$('#edValBig').textContent=e.v;$('#edValSub').textContent=e.k;
|
||
$('#edIcon').innerHTML=`<i data-lucide="${e.icon}" class="w-7 h-7"></i>`;lucide.createIcons();
|
||
edlg.showModal();requestAnimationFrame(()=>drawEngineLive());});
|
||
/* فلترة الترسانة حسب الصنف */
|
||
$$('[data-f]').forEach(ch=>ch.onclick=()=>{$$('[data-f]').forEach(x=>x.classList.toggle('on',x===ch));
|
||
const f=ch.dataset.f;$$('#engineGrid [data-eng]').forEach(card=>{card.classList.toggle('hide',f!=='all'&&card.dataset.cat!==f);});});
|
||
function drawEngineLive(){
|
||
const cv=$('#edGauge');if(!edlg.open)return;
|
||
const{x:c,W,H}=fitCanvas(cv);gaugeT+=.06;
|
||
const gold='rgba(0,180,216,.95)',dim='rgba(0,180,216,.3)',olive='rgba(30,144,255,.85)',red='rgba(239,68,68,.9)';
|
||
c.clearRect(0,0,W,H);
|
||
c.strokeStyle='rgba(30,144,255,.12)';c.lineWidth=1;
|
||
for(let y=16;y<H;y+=24){c.beginPath();c.moveTo(0,y);c.lineTo(W,y);c.stroke();}
|
||
for(let x=0;x<W;x+=48){c.beginPath();c.moveTo(x,0);c.lineTo(x,H);c.stroke();}
|
||
const i=engIdx;
|
||
if(i===0){const cx=W/2-30,cy=H/2,R=Math.min(W,H)/2-14;
|
||
[.4,.7,1].forEach(f=>{c.beginPath();c.arc(cx,cy,R*f,0,7);c.strokeStyle=dim;c.stroke();});
|
||
c.save();c.translate(cx,cy);c.rotate(gaugeT*.8);
|
||
const g=c.createConicGradient(0,0,0);g.addColorStop(0,'rgba(0,180,216,.5)');g.addColorStop(.25,'transparent');g.addColorStop(1,'transparent');
|
||
c.fillStyle=g;c.beginPath();c.moveTo(0,0);c.arc(0,0,R,0,7);c.fill();c.restore();
|
||
c.fillStyle=gold;c.beginPath();c.arc(cx,cy,4,0,7);c.fill();}
|
||
else if(i===1){c.beginPath();for(let px=0;px<=W;px+=4){const y=H-12-Math.sin(px/W*Math.PI)*H*.4;px?c.lineTo(px,y):c.moveTo(px,y);}c.strokeStyle=olive;c.lineWidth=2.5;c.stroke();
|
||
c.setLineDash([7,5]);c.beginPath();c.moveTo(10,H-12);c.lineTo(W-10,16);c.strokeStyle=gold;c.lineWidth=2.5;c.stroke();c.setLineDash([]);
|
||
if(Math.sin(gaugeT*2)>0){c.strokeStyle=red;c.lineWidth=6;c.beginPath();c.moveTo(W*.44,H*.6);c.lineTo(W*.58,H*.46);c.stroke();}
|
||
c.fillStyle=gold;c.beginPath();c.arc(10,H-12,5,0,7);c.fill();c.fillStyle='#FFB800';c.beginPath();c.arc(W-10,16,5,0,7);c.fill();}
|
||
else if(i===2){const v=[[W/2,12],[14,H-10],[W-14,H-10]],meet=[W/2+Math.sin(gaugeT)*4,H*.55];
|
||
v.forEach((p,k)=>{c.setLineDash([5,4]);c.beginPath();c.moveTo(...p);c.lineTo(...meet);c.strokeStyle=k===1?olive:gold;c.lineWidth=2;c.stroke();c.setLineDash([]);c.strokeStyle=gold;c.strokeRect(p[0]-6,p[1]-8,12,12);});
|
||
c.strokeStyle=red;c.lineWidth=2;c.beginPath();c.arc(meet[0],meet[1],10+Math.sin(gaugeT*2)*2,0,7);c.stroke();
|
||
c.fillStyle=gold;c.beginPath();c.arc(meet[0],meet[1],4,0,7);c.fill();}
|
||
else if(i===3){const n=[[W*.2,H*.3],[W*.5,H*.2],[W*.8,H*.33],[W*.38,H*.75],[W*.68,H*.68]];
|
||
c.setLineDash([4,4]);c.strokeStyle=olive;c.lineWidth=1.5;c.beginPath();c.moveTo(...n[0]);c.lineTo(...n[1]);c.lineTo(...n[2]);c.moveTo(...n[1]);c.lineTo(...n[3]);c.lineTo(...n[4]);c.stroke();c.setLineDash([]);
|
||
n.forEach((p,k)=>{const pu=(Math.sin(gaugeT*2+k)+1)/2;c.fillStyle=k===1?'#FFB800':gold;c.globalAlpha=.55+.45*pu;c.fillRect(p[0]-7,p[1]-6,14,12);c.globalAlpha=1;c.strokeStyle='#020810';c.strokeRect(p[0]-7,p[1]-6,14,12);});}
|
||
else if(i===4){c.beginPath();c.moveTo(8,H-8);c.quadraticCurveTo(W*.45,-H*.3,W-10,H-16);c.strokeStyle=gold;c.lineWidth=2.5;c.stroke();
|
||
const t=(gaugeT*.4)%1,px=(1-t)*(1-t)*8+2*(1-t)*t*(W*.45)+t*t*(W-10),py=(1-t)*(1-t)*(H-8)+2*(1-t)*t*(-H*.3)+t*t*(H-16);
|
||
c.fillStyle='#fff';c.beginPath();c.arc(px,py,5,0,7);c.fill();c.strokeStyle=red;c.lineWidth=2;c.stroke();
|
||
c.strokeStyle=red;c.beginPath();c.moveTo(W-18,H-24);c.lineTo(W-6,H-12);c.moveTo(W-6,H-24);c.lineTo(W-18,H-12);c.stroke();}
|
||
else if(i===5){const cx=W/2-30,cy=H/2,R=Math.min(W,H)/2-10;
|
||
c.beginPath();c.arc(cx,cy,R+(Math.sin(gaugeT*2)>0?3:0),0,7);c.strokeStyle=gold;c.lineWidth=2.5;c.stroke();
|
||
c.fillStyle=gold;c.font='bold 20px monospace';c.textAlign='center';c.fillText('H',cx,cy+7);c.textAlign='start';
|
||
c.strokeStyle=olive;c.lineWidth=2;for(let k=0;k<4;k++){const a=gaugeT*.5+k*Math.PI/2;c.beginPath();c.moveTo(cx+Math.cos(a)*(R+4),cy+Math.sin(a)*(R+4));c.lineTo(cx+Math.cos(a)*(R+12),cy+Math.sin(a)*(R+12));c.stroke();}}
|
||
else{for(let k=-H;k<W;k+=12){c.beginPath();c.moveTo(k,H);c.lineTo(k+H,0);c.strokeStyle='rgba(239,68,68,.35)';c.lineWidth=2;c.stroke();}
|
||
c.fillStyle='rgba(10,9,7,.9)';c.fillRect(W*.33,0,W*.34,H);
|
||
c.strokeStyle=(Math.sin(gaugeT*2)>0)?gold:olive;c.lineWidth=3;c.setLineDash([8,5]);c.strokeRect(W*.33,3,W*.34,H-6);c.setLineDash([]);
|
||
c.fillStyle=gold;c.font='bold 13px monospace';c.fillText('SAFE',W*.33+12,H/2);}
|
||
}
|
||
setInterval(()=>{if(edlg.open&&!document.hidden&&!reduced.matches)drawEngineLive();},90);
|
||
$$('[data-close]').forEach(b=>b.onclick=()=>b.closest('dialog').close());
|
||
$$('dialog').forEach(d=>d.addEventListener('click',e=>{if(e.target===d)d.close();}));
|
||
|
||
/* ===== التحصين: المصفوفة الخماسية ===== */
|
||
const DEFS=[
|
||
{icon:'file-code-2',t:'تظليل الكود',d:'منع الهندسة العكسية وتحليل الثنائيات'},
|
||
{icon:'fingerprint',t:'كشف كسر الحماية',d:'كشف فوري مع الإغلاق الآلي للمنظومة'},
|
||
{icon:'key-round',t:'شريحة الأمان العتادية',d:'المفاتيح داخل Hardware Keystore فقط'},
|
||
{icon:'package-x',t:'التوزيع المغلق',d:'دون المرور بأي متاجر عامة إطلاقاً'},
|
||
{icon:'bomb',t:'التدمير الذاتي',d:'مسح فوري للذاكرة عند السقوط بالأسر'},
|
||
];
|
||
$('#defGrid').innerHTML=DEFS.map((d,i)=>`
|
||
<div class="reveal glass rounded-xl p-4 text-center hover:-translate-y-1 transition">
|
||
<span class="mx-auto w-11 h-11 rounded-xl grid place-items-center border border-[#FF4444]/35 bg-[#FF4444]/10"><i data-lucide="${d.icon}" class="w-5 h-5 text-[#FF4444]"></i></span>
|
||
<div class="num-ltr text-[10px] tracking-widest text-slate-500 mt-2">LAYER 0${i+1}</div>
|
||
<b class="block text-[13px] mt-0.5">${d.t}</b><p class="text-[11.5px] text-slate-400 mt-1 leading-5">${d.d}</p>
|
||
</div>`).join('');
|
||
lucide.createIcons();$$('#defGrid .reveal').forEach(el=>io.observe(el));
|
||
|
||
/* ===== المحاكاة الحية LOS ===== */
|
||
const simC=$('#simMap');let S={x:0}, obs=null,tgt=null;
|
||
function simResize(){S=fitCanvas(simC);drawSim();}
|
||
function sproj(x,y){const{W,H}=S;return [W*.5+(x-y)*W*.30,H*.60+(x+y)*H*.20-elev(x,y)*H*.30];}
|
||
function toXY(px,py){const{W,H}=S;const a=(px-W*.5)/ (W*.30), b=(py-H*.60+(0)*0)/(H*.20);
|
||
// تقريب عكسي مبسط عبر بحث شبكي
|
||
let best=null,bd=1e9;for(let gx=-1;gx<=1;gx+=.05)for(let gy=-1;gy<=1;gy+=.05){const p=sproj(gx,gy);const d=(p[0]-px)**2+(p[1]-py)**2;if(d<bd){bd=d;best=[gx,gy];}}return best;}
|
||
function losBlocked(a,b){const N=60;let mx=0;const ea=elev(a[0],a[1])+.02,eb=elev(b[0],b[1])+.005;
|
||
for(let i=1;i<N;i++){const t=i/N,x=a[0]+(b[0]-a[0])*t,y=a[1]+(b[1]-a[1])*t;const ray=ea+(eb-ea)*t;const block=elev(x,y)-ray;if(block>mx)mx=block;}return mx;}
|
||
function drawSim(){
|
||
const{x:c,W,H}=S;c.clearRect(0,0,W,H);
|
||
c.strokeStyle='rgba(30,144,255,.15)';for(let i=0;i<W;i+=40){c.beginPath();c.moveTo(i,0);c.lineTo(i,H);c.stroke();}for(let i=0;i<H;i+=40){c.beginPath();c.moveTo(0,i);c.lineTo(W,i);c.stroke();}
|
||
c.lineWidth=.8;for(let yy=-1.1;yy<1.12;yy+=.055){c.beginPath();for(let xx=-1.1;xx<=1.12;xx+=.03){const p=sproj(xx,yy);xx<=-1.09?c.moveTo(...p):c.lineTo(...p);}c.strokeStyle='rgba(30,144,255,.35)';c.stroke();}
|
||
if(obs&&tgt){
|
||
const blk=losBlocked(obs,tgt), vis=blk<=0.005;
|
||
// مسار الشعاع مع تلوين المحجوب
|
||
const N=60;for(let i=0;i<N;i++){const t0=i/N,t1=(i+1)/N;
|
||
const a=[obs[0]+(tgt[0]-obs[0])*t0,obs[1]+(tgt[1]-obs[1])*t0], b=[obs[0]+(tgt[0]-obs[0])*t1,obs[1]+(tgt[1]-obs[1])*t1];
|
||
const pa=sproj(a[0],a[1]),pb=sproj(b[0],b[1]);
|
||
const ea=elev(obs[0],obs[1])+.02,eb=elev(tgt[0],tgt[1])+.005,ray=ea+(eb-ea)*((t0+t1)/2);
|
||
const blocked=elev((a[0]+b[0])/2,(a[1]+b[1])/2)>ray+.004;
|
||
c.strokeStyle=blocked?'rgba(239,68,68,.9)':'rgba(0,180,216,.9)';c.lineWidth=2.5;c.beginPath();c.moveTo(...pa);c.lineTo(...pb);c.stroke();}
|
||
// التغطية
|
||
const dx=tgt[0]-obs[0],dy=tgt[1]-obs[1],dist=Math.hypot(dx,dy)*8.4,az=((Math.atan2(dx,-dy)*180/Math.PI)+360)%360;
|
||
$('#simDist').textContent=dist.toFixed(2)+' km';$('#simAz').textContent=az.toFixed(1)+' °';
|
||
$('#simBlock').textContent=Math.max(0,Math.min(100,blk*220)).toFixed(0)+' %';
|
||
const vd=$('#simVerdict');vd.textContent=vis?'مكشوف — FIRE':'محجوب — HOLD';vd.style.color=vis?'#00B4D8':'#FF4444';
|
||
$('#artyEl').textContent=(280+dist*9+blk*400).toFixed(1)+' mil';$('#artyTof').textContent=(9+dist*3.4).toFixed(1)+' s';
|
||
$('#artyCep').textContent='±'+Math.round(12+blk*300+dist*2)+' m (DEM)';
|
||
}
|
||
[[obs,'#00B4D8','OBS'],[tgt,'#FFB800','TGT']].forEach(([p,col,lb])=>{if(!p)return;const q=sproj(p[0],p[1]);
|
||
c.fillStyle=col;c.beginPath();c.arc(q[0],q[1],7,0,7);c.fill();c.strokeStyle='#020810';c.lineWidth=2;c.stroke();
|
||
c.beginPath();c.arc(q[0],q[1],16,0,7);c.strokeStyle=col+'66';c.lineWidth=1.5;c.stroke();
|
||
c.fillStyle='#fff';c.font='bold 11px monospace';c.fillText(lb,q[0]+20,q[1]-10);});
|
||
if(!obs&&!tgt){c.fillStyle='rgba(160,216,255,.6)';c.font='600 14px -apple-system,"SF Pro Text","SF Arabic",Tahoma,Arial,sans-serif';c.textAlign='center';c.fillText('انقر على التضاريس لوضع الراصد ثم الهدف',W/2,40);c.textAlign='start';}
|
||
drawViewshed();
|
||
}
|
||
function drawViewshed(){
|
||
const cv=$('#viewshed'),{x:c,W,H}=fitCanvas(cv);c.clearRect(0,0,W,H);
|
||
const cx=W/2,cy=H/2,R=Math.min(W,H)/2-8;
|
||
[.33,.66,1].forEach(f=>{c.beginPath();c.arc(cx,cy,R*f,0,7);c.strokeStyle='rgba(0,180,216,.2)';c.stroke();});
|
||
const ox=obs?obs[0]:-.3,oy=obs?obs[1]:-.2;
|
||
for(let a=0;a<360;a+=3){const r=a*Math.PI/180,dx=Math.cos(r),dy=Math.sin(r);
|
||
let reach=1;for(let t=.1;t<1;t+=.1){const px=ox+dx*t*.9,py=oy+dy*t*.9;if(Math.abs(px)>1||Math.abs(py)>1){reach=t;break;}
|
||
if(elev(px,py)-elev(ox,oy)>.28){reach=t;break;}}
|
||
c.strokeStyle=reach>.6?'rgba(0,180,216,.75)':'rgba(239,68,68,.6)';c.lineWidth=2;
|
||
c.beginPath();c.moveTo(cx,cy);c.lineTo(cx+Math.cos(r)*R*reach,cy+Math.sin(r)*R*reach*.6);c.stroke();}
|
||
c.fillStyle='#00B4D8';c.beginPath();c.arc(cx,cy,4,0,7);c.fill();
|
||
}
|
||
simC.addEventListener('click',e=>{const r=simC.getBoundingClientRect();const g=toXY(e.clientX-r.left,e.clientY-r.top);
|
||
if(!g)return;if(!obs||(obs&&tgt)){obs=g;tgt=null;$('#simVerdict').textContent='ضع الهدف';$('#simVerdict').style.color='#FFB800';}else tgt=g;drawSim();});
|
||
$('#simClear').onclick=()=>{obs=tgt=null;$('#simVerdict').textContent='بانتظار النقر';$('#simVerdict').style.color='';['#simDist','#simAz','#simBlock'].forEach(s=>$(s).textContent='— '+(s==='#simDist'?'km':s==='#simAz'?'°':'%'));drawSim();};
|
||
$('#simDemo').onclick=()=>{obs=[-.55+Math.random()*.4,-.4+Math.random()*.5];tgt=[.2+Math.random()*.5,-.3+Math.random()*.8];drawSim();};
|
||
new ResizeObserver(simResize).observe(simC);simResize();obs=[-.5,-.25];tgt=[.45,.3];drawSim();
|
||
|
||
/* ===== ROI ===== */
|
||
/* ===== الحاسبة السيادية الجديدة ===== */
|
||
const VEHICLES=60000; // ثابت: 60 ألف مركبة في الأردن
|
||
const FOREIGN_RATE=7; // $7 per 1k requests
|
||
const LOCAL_RATE=2; // $2 per 1k requests
|
||
function calcROI(){
|
||
const req=+$('#reqIn').value; // طلبات/يوم/مركبة
|
||
const years=+$('#yIn').value;
|
||
const cap=+$('#capIn').value||0; // تأسيس لمرة واحدة
|
||
const op=+$('#opIn').value||0; // تشغيل سنوي
|
||
|
||
$('#reqOut').textContent=req.toLocaleString();
|
||
$('#reqOut2').textContent=req.toLocaleString();
|
||
$('#yOut').textContent=years+' سنوات';
|
||
|
||
const requestsPerYear=VEHICLES*req*365;
|
||
const foreignPerYear=requestsPerYear/1000*FOREIGN_RATE;
|
||
const localPerYear=requestsPerYear/1000*LOCAL_RATE;
|
||
const foreignTotal=foreignPerYear*years;
|
||
const localTotal=localPerYear*years + cap + op*years;
|
||
const save=foreignTotal-localTotal;
|
||
const pct=foreignTotal>0?(Math.abs(save/foreignTotal)*100).toFixed(1):'0';
|
||
|
||
$('#annFor').textContent='$'+(foreignPerYear/1e6).toFixed(2)+'M';
|
||
$('#annSov').textContent='$'+(localPerYear/1e6).toFixed(2)+'M';
|
||
$('#forVal').textContent='$'+(foreignTotal/1e6).toFixed(2).replace(/\.?0+$/,'')+'M';
|
||
$('#sovVal').textContent='$'+(localTotal/1e6).toFixed(2).replace(/\.?0+$/,'')+'M';
|
||
$('#saveVal').textContent=(save>=0?'$':'−$')+Math.abs(save/1e6).toFixed(2).replace(/\.?0+$/,'')+'M';
|
||
$('#saveLabel').textContent=save>=0?`صافي الوفر التراكمي خلال ${years} سنوات`:`فرق تكلفة إضافي خلال ${years} سنوات`;
|
||
$('#savePct').textContent=save>=0?`${pct}% خفض في تكلفة الطلبات`:`${pct}% زيادة في التكلفة`;
|
||
$('#forBar').style.width='100%';
|
||
$('#sovBar').style.width=(localTotal/Math.max(foreignTotal,1)*100).toFixed(1)+'%';
|
||
|
||
paintAllRanges();
|
||
}
|
||
['reqIn','yIn','capIn','opIn'].forEach(id=>$('#'+id).addEventListener('input',calcROI));
|
||
calcROI();
|
||
|
||
/* ===== الإقناع: مقارنة + ضمانات + أسئلة ===== */
|
||
const CMP=[
|
||
['العمل بدون إنترنت','يعمل كاملاً في التعتيم الإلكتروني','يتوقف كلياً عند انقطاع الاتصال'],
|
||
['لغة البيانات الجغرافية','120,000+ معلم بالعربية','أسماء أجنبية ناقصة ومضللة'],
|
||
['مكان الخوادم','داخل الحدود الوطنية حصراً','خوادم خارجية تخضع لقوانين أجنبية'],
|
||
['الصمود تحت التشويش','مصمم لبيئات GPS-Denied','يفقد التموضع فور التشويش'],
|
||
['الكلفة عبر السنوات','تملّك دائم بوفر يفوق 90%','اشتراك سنوي متصاعد بلا سقف'],
|
||
['العائد الوطني','أصل سيادي يدرّ دخلاً مدنياً','فاتورة سنوية تغادر الخزينة'],
|
||
];
|
||
$('#cmpRows').innerHTML=CMP.map((r,i)=>`
|
||
<div class="reveal grid grid-cols-[1.2fr_1fr_1fr] border-t border-white/5" style="transition-delay:${i*60}ms">
|
||
<div class="px-4 py-3 font-bold text-[12.5px] sm:text-[13.5px]">${r[0]}</div>
|
||
<div class="px-2 sm:px-4 py-3 text-center text-[12px] sm:text-[13px] bg-[#00B4D8]/5 text-slate-100 flex items-center justify-center gap-1.5"><i data-lucide="check-circle-2" class="w-4 h-4 text-[#1E90FF] shrink-0"></i><span>${r[1]}</span></div>
|
||
<div class="px-2 sm:px-4 py-3 text-center text-[12px] sm:text-[13px] text-slate-500 flex items-center justify-center gap-1.5"><i data-lucide="x-circle" class="w-4 h-4 text-[#FF4444]/70 shrink-0"></i><span>${r[2]}</span></div>
|
||
</div>`).join('');$$('#cmpRows .reveal').forEach(el=>io.observe(el));
|
||
const GUA=[
|
||
{icon:'flask-conical',t:'إثبات ميداني أولاً',d:'لا اعتماد قبل تجربة حية تقيسها لجنتكم'},
|
||
{icon:'vault',t:'بيانات لا تغادر',d:'النشر المعزول شرط تعاقدي لا شعار تسويقي'},
|
||
{icon:'graduation-cap',t:'كوادر وطنية',d:'تدريب مهندسيكم على التشغيل والصيانة الكاملة'},
|
||
{icon:'handshake',t:'تقييم مشترك',d:'المركز الجغرافي الملكي شريك فحص لا متلقٍ'},
|
||
];
|
||
$('#guaGrid').innerHTML=GUA.map(g=>`
|
||
<div class="reveal glass rounded-xl p-4 flex gap-3 items-start"><span class="w-10 h-10 rounded-lg grid place-items-center border border-[#00B4D8]/35 bg-black/40 shrink-0"><i data-lucide="${g.icon}" class="w-5 h-5 text-[#00B4D8]"></i></span>
|
||
<span><b class="block text-[13.5px]">${g.t}</b><span class="block text-[12px] text-slate-400 mt-0.5 leading-6">${g.d}</span></span></div>`).join('');
|
||
$$('#guaGrid .reveal').forEach(el=>io.observe(el));
|
||
const FAQ=[
|
||
['هل تعمل المنظومة فعلاً بدون إنترنت — أم جزئياً؟','تعمل كاملة: الخرائط والتضاريس والمحركات السبعة محلية على الجهاز أو الشبكة المغلقة. لا يوجد أي اتصال خارجي في المسار العسكري — وهذا ما ستختبره اللجنة عملياً بفصل كل الاتصالات أثناء المحاكاة.'],
|
||
['من أين تأتي دقة الارتفاعات والخرائط؟','من نموذج ارتفاع رقمي وطني وقاعدة معالم عربية تتجاوز 120,000 معلم، تُدار داخل الحدود. التفاصيل الفنية الكاملة تُعرض في جلسة التقييم المشترك مع المركز الجغرافي الملكي.'],
|
||
['كيف نضمن عدم تسرب البيانات العسكرية عبر المسار المدني؟','بفصل معماري كامل: شبكتان وقاعدتا بيانات وصلاحيات منفصلة. المسار المدني يتغذى ببيانات مدنية منقّحة فقط عبر بوابة أحادية الاتجاه — ولا يرى أي معلومة عسكرية أصلاً.'],
|
||
['ما الكلفة الحقيقية مقارنة بالاشتراكات الأجنبية؟','جرّب الحاسبة أعلاه بسيناريو المملكة (حتى 60,000 مركبة): التملك الدائم يسترد كلفته عادة خلال السنة الأولى، ثم يتحول من فاتورة إلى أصل مدرّ للدخل عبر البوابة المدنية.'],
|
||
];
|
||
$('#faqList').innerHTML=FAQ.map(f=>`
|
||
<details class="faq reveal glass rounded-xl border border-white/10 px-5 py-4">
|
||
<summary class="flex items-center justify-between gap-3 font-bold text-[14.5px]">${f[0]}<span class="pm w-7 h-7 grid place-items-center rounded-full border border-[#00B4D8]/40 text-[#00B4D8] text-lg leading-none shrink-0">+</span></summary>
|
||
<p class="text-[13.5px] text-slate-300 leading-8 mt-3">${f[1]}</p>
|
||
</details>`).join('');
|
||
$$('#faqList .reveal').forEach(el=>io.observe(el));
|
||
lucide.createIcons();
|
||
|
||
/* ===== نبض المنظومة: سجل حي ===== */
|
||
const OPS=[
|
||
['مزامنة BFT','السرية S2 حدّثت موقعها — القناة الراديوية 04','ok'],
|
||
['خط رؤية','المرصد OP أكّد كشف الممر الشمالي — لا حجب','ok'],
|
||
['مدفعية','حل رمي تجريبي: زمن تحليق 24.8s — CEP ضمن ±18m','ok'],
|
||
['تشويش','رصد تشويش GPS قطاعي — التموضع بالتقاطع الخلفي نشط','warn'],
|
||
['مهبط','المهبط HLZ-2 صالح: ميلان 4.1° وخلو كامل','ok'],
|
||
['هندسة','ممر آمن جديد معتمد عبر المنطقة المحرمة C','ok'],
|
||
['شبكة','صفر اتصالات خارجية — العزل الكامل مستمر','ok'],
|
||
];
|
||
let opsI=0,opsVis=true;
|
||
function pushOps(){
|
||
if(!opsVis||document.hidden||reduced)return;
|
||
const o=OPS[opsI%OPS.length];opsI++;
|
||
const t=new Date().toLocaleTimeString('en-GB',{hour12:false});
|
||
const li=document.createElement('li');
|
||
li.className='flex items-center gap-2.5 glass rounded-md px-3 py-1.5';
|
||
li.innerHTML=`<span class="num-ltr text-[11px] text-slate-500 tick">${t}</span><b class="text-[12px] ${o[2]==='warn'?'text-[#FFB800]':'text-[#00B4D8]'} shrink-0">${o[0]}</b><span class="text-slate-300 truncate">${o[1]}</span><span class="num-ltr mr-auto text-[9px] tracking-widest text-slate-600 shrink-0">OFFLINE</span>`;
|
||
const feed=$('#opsFeed');feed.prepend(li);
|
||
while(feed.children.length>3)feed.lastChild.remove();
|
||
}
|
||
pushOps();pushOps();setInterval(pushOps,2600);
|
||
new IntersectionObserver(es=>opsVis=es[0].isIntersecting).observe($('#opsFeed'));
|
||
|
||
/* ===== شريط التقدم ===== */
|
||
addEventListener('scroll',()=>{
|
||
const p=scrollY/(document.body.scrollHeight-innerHeight||1);
|
||
$('#progress').style.width=(p*100)+'%';
|
||
},{passive:true});
|
||
</script>
|
||
</body>
|
||
</html>
|