68 lines
55 KiB
HTML
68 lines
55 KiB
HTML
<!doctype html>
|
||
<html lang="ar" dir="rtl">
|
||
<head>
|
||
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<meta name="theme-color" content="#070b14"><meta name="description" content="عرض تفاعلي لمنظومة الخرائط التكتيكية والسيادية الأردنية: الطبقات الجغرافية، القدرات الميدانية، المعمارية الأمنية والجدوى الاقتصادية.">
|
||
<title>رَصْد | السيادة المكانية المطلقة</title>
|
||
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' rx='8' fill='%23070b14'/%3E%3Cpath d='M8 20h24M20 8v24' stroke='%2366f4d0'/%3E%3Ccircle cx='20' cy='20' r='10' stroke='%2366f4d0' fill='none'/%3E%3C/svg%3E">
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');
|
||
:root{--bg:#070b14;--panel:#0c1420;--line:rgba(111,164,183,.18);--muted:#91a3b3;--text:#edf4f7;--mint:#69f3cd;--cyan:#38bdf8;--gold:#eab308;--red:#ef6868;--gap:clamp(22px,4vw,64px)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:115px}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.8 'IBM Plex Sans Arabic',Tahoma,Arial,sans-serif}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}button{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--mint);outline-offset:5px}button:disabled{cursor:default}::selection{background:#69f3cd;color:#070b14}.wrap{max-width:1480px;margin:auto;padding-inline:var(--gap)}.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;letter-spacing:1px;direction:ltr;display:inline-block}.muted{color:var(--muted)}.mint{color:var(--mint)}.eyebrow{display:flex;align-items:center;gap:10px;color:var(--mint);font-size:13px;font-weight:600}.eyebrow:before{content:'';width:22px;height:1px;background:currentColor}.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 12px #69f3cd80}.icon{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.btn{display:inline-flex;justify-content:center;align-items:center;gap:12px;border:1px solid var(--line);background:#111c27;border-radius:3px;padding:13px 22px;font-weight:600;font-size:14px;transition:.2s}.btn:hover{background:#1b2f3a;border-color:#69f3cd70;transform:translateY(-2px)}.btn.primary{background:var(--mint);border-color:var(--mint);color:#071712}.btn.primary:hover{background:#9bffe1;box-shadow:0 5px 30px #69f3cd18}.btn.small{padding:8px 14px;font-size:13px}.status-bar{height:31px;border-bottom:1px solid var(--line);background:#0c151d;color:#b3c0c9;font-size:11px}.status-bar .wrap{display:flex;align-items:center;justify-content:space-between;height:100%;gap:12px}.status-items{display:flex;gap:25px}.status-items span{display:flex;gap:7px;align-items:center}.header{position:sticky;top:0;z-index:20;background:#070b14eb;backdrop-filter:blur(20px);border-bottom:1px solid var(--line)}.nav{height:81px;display:flex;align-items:center;justify-content:space-between;gap:25px}.brand{display:flex;align-items:center;gap:13px}.brand-mark{display:grid;place-items:center;width:42px;height:42px;color:var(--mint);border:1px solid #69f3cd60;transform:rotate(45deg);border-radius:4px}.brand-mark .icon{transform:rotate(-45deg);width:29px;height:29px}.brand-name{font-size:30px;font-weight:700;line-height:1.2}.brand-sub{font-size:10px;color:var(--muted);letter-spacing:2px}.nav-links{display:flex;gap:26px;font-size:13px;color:#becbd4}.nav-links a:hover,.nav-links a.active{color:var(--mint)}.nav-cta{font-size:12px}.menu{display:none}.hero{position:relative;overflow:hidden;padding-top:57px;background:radial-gradient(ellipse at 27% 45%,#112b304d,transparent 52%)}.hero:before{content:'';position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(#78b0c005 1px,transparent 1px),linear-gradient(90deg,#78b0c005 1px,transparent 1px);background-size:54px 54px}.hero-main{display:grid;grid-template-columns:1fr 1.07fr;align-items:center;gap:45px;position:relative}.document{display:inline-flex;gap:9px;align-items:center;padding:5px 11px;border:1px solid var(--line);border-radius:3px;color:#b3c8d0;font-size:11px;background:#111d2550}.document .icon{width:14px;height:14px}.hero h1{font-size:clamp(44px,4.6vw,70px);line-height:1.38;margin:24px 0 18px;letter-spacing:-2px;font-weight:700}.hero h1 em{font-style:normal;color:var(--mint)}.hero h1 .subline{font-size:.5em;letter-spacing:0;display:block;font-weight:500;margin-top:13px;line-height:1.65}.hero-copy>p{max-width:530px;color:#9dadba;line-height:2;font-size:15px;margin:0 0 25px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.hero-note{display:flex;gap:8px;align-items:center;margin-top:18px;font-size:12px;color:#8ba299}.hero-note .icon{width:15px;height:15px}.map-panel{position:relative;height:500px;border:1px solid #5d9eaf33;background:linear-gradient(145deg,#0b1923,#080f18);border-radius:5px;box-shadow:0 20px 100px #0005;direction:ltr;overflow:hidden}.map-top{position:absolute;inset:0 0 auto;display:flex;justify-content:space-between;padding:15px 18px;z-index:2;border-bottom:1px solid #4e768024;background:#0b1620bd}.map-top .mono{font-size:10px}.map-top .map-name{display:flex;gap:8px;align-items:center}.map-top small{color:var(--mint)}#terrain{display:block;width:100%;height:100%}.map-coordinates{position:absolute;left:18px;top:65px;color:#8aa7b4;line-height:1.9;font-size:10px}.north{position:absolute;right:20px;top:66px;text-align:center;color:#b1c8d1;font:12px monospace}.north:after{content:'↑';display:block;color:var(--mint);font-size:28px}.map-location{position:absolute;right:18px;bottom:71px;direction:rtl;background:#0b1926de;padding:10px 14px;border-right:2px solid var(--mint);min-width:153px}.map-location strong{font-size:13px;font-weight:500;display:block}.map-location .mono{color:var(--muted);font-size:9px}.map-scale{position:absolute;left:20px;bottom:85px;font:10px monospace;color:#86a5b3}.map-scale:after{content:'';display:block;width:70px;height:5px;border:1px solid #86a5b3;border-top:0;margin-top:5px}.map-controls{position:absolute;bottom:0;right:0;left:0;display:flex;align-items:center;justify-content:space-between;padding:12px 15px;border-top:1px solid var(--line);background:#0a131eec;gap:7px;direction:rtl}.segmented{display:flex;gap:3px;padding:3px;border:1px solid var(--line);border-radius:4px}.segmented button{border:0;background:transparent;padding:5px 12px;color:var(--muted);font-size:11px;border-radius:2px}.segmented button[aria-pressed=true]{background:#69f3cd19;color:var(--mint)}.play{display:flex;gap:7px;align-items:center;border:0;background:transparent;color:var(--mint);font-size:11px;padding:5px}.play .icon{width:14px;height:14px}.hero-caption{display:flex;justify-content:space-between;margin-top:10px;font-size:10px;color:#6f8493;direction:ltr}.stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:53px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative}.stat{padding:27px 28px 25px;border-left:1px solid var(--line)}.stat:last-child{border:0}.stat-top{display:flex;justify-content:space-between;align-items:center}.stat-top .icon{color:#506b78;width:23px;height:23px}.stat strong{font:500 clamp(30px,3.1vw,43px)/1.2 ui-monospace,monospace;color:#ecf7f5;letter-spacing:-2px;direction:ltr}.stat strong span{font-size:25px;color:var(--mint)}.stat h3{margin:7px 0 3px;font-size:14px;font-weight:500}.stat p{font-size:11px;margin:0;color:var(--muted)}.section{padding-block:90px;border-bottom:1px solid var(--line)}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:35px}.section h2{font-size:clamp(28px,3vw,40px);line-height:1.5;font-weight:600;letter-spacing:-.6px;margin:10px 0 7px}.section-heading p{font-size:14px;color:var(--muted);margin:0;max-width:510px}.section-number{color:#5c7280;font-size:12px;white-space:nowrap}.section-number b{color:var(--mint);font-weight:400}.layers-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:50px;align-items:center}.layer-list{display:grid;gap:9px}.layer-row{display:flex;align-items:center;width:100%;text-align:right;background:#0d1620;border:1px solid var(--line);padding:14px 17px;gap:14px;border-radius:3px;transition:.2s}.layer-row[aria-pressed=true]{border-color:#69f3cd66;background:#102320}.layer-num{color:#6b8796;font:13px monospace}.layer-row[aria-pressed=true] .layer-num{color:var(--mint)}.layer-row strong{font-size:14px;font-weight:500;display:block}.layer-row small{font-size:10px;color:var(--muted);letter-spacing:.5px}.layer-row .icon{margin-right:auto;color:#667f8c;width:17px}.layer-row[aria-pressed=true] .icon{color:var(--mint)}.layer-display{height:430px;position:relative;perspective:900px;background:radial-gradient(ellipse,#1137314d,transparent 65%);overflow:hidden}.stack{position:absolute;width:300px;height:300px;top:40px;left:calc(50% - 150px);transform:rotateX(57deg) rotateZ(-36deg);transform-style:preserve-3d;transition:transform .3s}.plane{position:absolute;inset:0;border:1px solid #69f3cd50;background:#091a2390;transform:translateZ(calc(var(--i) * var(--spread, 31px)));transition:transform .4s,opacity .3s,box-shadow .3s;box-shadow:0 0 35px #69f3cd09;overflow:hidden}.plane.selected{border-color:var(--mint);box-shadow:0 0 28px #69f3cd33}.plane canvas{width:100%;height:100%}.plane-label{position:absolute;right:8px;top:5px;font:10px monospace;color:var(--mint)}.layer-description{min-height:65px;margin:15px 0 0;color:var(--muted);font-size:13px}.range-block{padding:17px 20px;border:1px solid var(--line);background:#0b1520;border-radius:3px}.range-label{display:flex;justify-content:space-between;gap:20px;font-size:12px;margin-bottom:9px}.range-label output{color:var(--mint);font-family:monospace}input[type=range]{width:100%;height:4px;accent-color:var(--mint);cursor:pointer;direction:ltr;display:block;margin:14px 0} .layer-bottom{position:absolute;bottom:7px;left:0;right:0;text-align:center;color:#7b939f;font-size:11px}.engines{background:linear-gradient(#0a121d,#070b14)}.engine-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.engine-card{position:relative;display:flex;flex-direction:column;text-align:right;border:1px solid var(--line);background:#0e1823b0;border-radius:3px;padding:25px 22px;min-height:245px;transition:.25s;overflow:hidden}.engine-card:hover{border-color:#69f3cd70;background:#10222c;transform:translateY(-4px)}.engine-top{display:flex;justify-content:space-between;align-items:center;color:var(--mint);margin-bottom:24px}.engine-top .icon{width:27px;height:27px}.engine-top .mono{font-size:10px;color:#617c8b}.engine-card h3{font-size:17px;margin:0 0 4px;font-weight:500;line-height:1.65}.engine-card .en{font-size:10px;letter-spacing:.5px;color:#7a949f;direction:ltr;text-align:right}.engine-card p{font-size:12px;color:#93a8b5;line-height:1.9;margin:12px 0 20px}.card-link{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--mint);margin-top:auto}.card-link .icon{width:16px;height:16px}.engine-feature{background:#0b2424;border-color:#69f3cd40}.engine-feature h3{font-size:24px;line-height:1.5}.engine-feature p{margin-top:4px}.security-layout{display:grid;grid-template-columns:1fr 1fr;gap:40px}.architecture{background:#0c151f;border:1px solid var(--line);border-radius:4px;padding:30px}.architecture-title{display:flex;gap:15px;align-items:center;justify-content:center}.architecture-title .icon{color:var(--mint);width:29px;height:29px}.architecture-title strong{font-size:18px;display:block}.architecture-title small{color:var(--muted);font-size:11px}.architecture-lines{height:45px;width:54%;margin:auto;border-bottom:1px solid #3b5961;border-right:1px solid #3b5961;border-left:1px solid #3b5961;position:relative}.architecture-lines:before{content:'';position:absolute;left:50%;height:23px;top:0;border-left:1px solid #3b5961}.architecture-branches{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:17px}.branch{border:1px solid #69f3cd40;padding:20px 12px;text-align:center;background:#0e2424}.branch .icon{display:block;margin:auto auto 10px;color:var(--mint)}.branch h3{font-size:15px;margin:0}.branch p{font-size:12px;color:var(--muted);margin:8px 0}.branch .mono{font-size:9px;color:var(--mint)}.branch.civil{border-color:#38bdf833;background:#0c1b2b}.branch.civil .icon,.branch.civil .mono{color:var(--cyan)}.isolation{display:flex;gap:8px;align-items:center;justify-content:center;font-size:11px;color:#c5b76a;margin-top:20px}.isolation .icon{width:14px}.security-list{display:grid;gap:0}.security-item{display:flex;align-items:center;gap:15px;padding:17px 0;border-bottom:1px solid var(--line)}.security-item:first-child{padding-top:0}.security-item:last-child{border-bottom:0}.security-item>.icon{color:var(--mint);width:24px;height:24px}.security-item strong{font-weight:500;font-size:14px;display:block}.security-item p{color:var(--muted);font-size:12px;margin:2px 0}.security-item .mono{margin-right:auto;color:#577080}.roi{background:radial-gradient(ellipse at 20% 50%,#0e353333,transparent 60%)}.roi-layout{display:grid;grid-template-columns:1fr 1fr;gap:60px}.roi-controls{display:grid;gap:18px}.field label{display:flex;justify-content:space-between;font-size:14px;margin-bottom:8px}.field label output{font-family:monospace;color:var(--mint)}.numeric-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}.numeric-row label{font-size:12px;color:var(--muted);display:block;margin-bottom:7px}.numeric-row input{width:100%;border:1px solid var(--line);background:#0d1b26;padding:9px 12px;color:white;direction:ltr;border-radius:3px}.roi-result{border:1px solid #69f3cd35;border-radius:4px;background:#0b1b21;padding:30px}.roi-result-top{display:flex;align-items:center;justify-content:space-between;gap:20px}.roi-result-top .icon{color:var(--mint);width:32px;height:32px}.roi-result strong{display:block;color:var(--mint);font:500 clamp(35px,4vw,54px)/1.4 monospace;letter-spacing:-2px}.roi-result-top small{font-size:12px;color:var(--muted)}.roi-badge{background:#69f3cd15;color:var(--mint);padding:5px 10px;font-size:12px;display:inline-block;margin:15px 0 10px}.bar-label{display:flex;justify-content:space-between;color:#a7b8c3;font-size:12px;margin:16px 0 7px}.bar-track{height:9px;background:#1a2934}.bar-fill{height:100%;background:#627384;width:100%;transition:width .25s}.bar-fill.sovereign{background:var(--mint)}.assumptions{font-size:11px;color:#7d949f;margin:15px 0 0}.signoff{position:relative;text-align:center;padding-block:70px;background:radial-gradient(ellipse at 50% 100%,#17473b40,transparent 65%)}.signoff>.icon{height:37px;width:37px;color:var(--mint)}.signoff h2{font-size:34px;margin:13px 0}.signoff p{color:var(--muted);font-size:14px}.signoff .btn{margin:14px 0 26px}.signature{border-top:1px solid var(--line);padding-top:25px;max-width:630px;margin:0 auto}.signature strong{display:block;font-size:15px}.signature span{font-size:12px;color:var(--muted)}.footer{border-top:1px solid var(--line);padding-block:20px}.footer .wrap{display:flex;justify-content:space-between;gap:25px;color:#7a8e9c;font-size:11px}.footer .mono{font-size:10px}.demo-tag{color:#bcac6c;font-size:10px}.skip{position:fixed;top:-80px;right:20px;z-index:100;background:var(--mint);padding:10px;color:black}.skip:focus{top:10px}dialog{background:#0d1925;color:var(--text);border:1px solid #69f3cd50;border-radius:6px;padding:0;max-width:560px;width:calc(100% - 32px);max-height:90dvh;box-shadow:0 40px 150px #000a}dialog::backdrop{background:#020711c9;backdrop-filter:blur(8px)}.dialog-inner{padding:30px}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:20px}.dialog-head h2{margin:0;font-size:23px;line-height:1.6}.close-dialog{border:1px solid var(--line);background:#13212d;border-radius:3px;padding:7px;display:grid;place-items:center}.dialog-inner>p{font-size:14px;color:var(--muted)}.telemetry{height:120px;width:100%;border:1px solid var(--line);background:#08121c;margin-block:15px}.telemetry-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;font-size:12px;color:var(--muted)}.telemetry-summary span{color:var(--mint);font:20px monospace;display:block;margin-bottom:6px}.brief-form{display:grid;gap:14px}.brief-form label{font-size:13px;display:grid;gap:5px}.brief-form input,.brief-form select{min-width:0;max-width:100%;width:100%;border:1px solid var(--line);background:#0b131e;color:white;border-radius:3px;padding:9px 12px;color-scheme:dark}.form-message{font-size:13px;color:var(--mint);margin:0;min-height:24px}.no-motion *{animation:none!important;transition:none!important}.mobile-status{display:none}@media(min-width:1600px){.hero{padding-top:75px}.map-panel{height:550px}}@media(max-width:1150px){.nav-links{gap:15px;font-size:12px}.nav-cta{padding:10px}.hero-main{gap:25px}.hero h1{font-size:47px}.map-panel{height:470px}.engine-grid{grid-template-columns:repeat(2,1fr)}.engine-card{min-height:225px}.brand-sub{letter-spacing:1px}}@media(max-width:900px){.nav-links{display:none;position:absolute;top:81px;right:0;left:0;background:#0c1723;padding:20px;flex-direction:column;border-bottom:1px solid var(--line)}.nav-links.open{display:flex}.menu{display:grid;place-items:center;padding:8px;border:1px solid var(--line);background:transparent;border-radius:3px}.nav{gap:18px}.nav-cta{margin-right:auto}.hero-main{grid-template-columns:1fr}.hero-copy{max-width:650px}.hero h1{font-size:60px}.hero-copy>p{max-width:650px}.map-panel{height:470px}.hero-map{margin-top:12px}.hero{padding-top:35px}.stats{margin-top:32px}.stat{padding:22px 15px}.stat p{font-size:10px}.layers-layout{gap:25px}.stack{width:250px;height:250px;left:calc(50% - 125px);top:60px}.security-layout,.roi-layout{gap:25px}.architecture{padding:20px}.architecture-branches{gap:10px}.section{padding-block:65px}.section-heading{align-items:start}.section-number{display:none}}@media(max-width:600px){:root{--gap:20px}.status-bar .status-items span:nth-child(2),.status-bar .status-items span:nth-child(3),.status-bar .mono{display:none}.status-bar{font-size:10px}.status-items{gap:10px}.mobile-status{display:block}.nav{height:72px;gap:12px}.nav-links{top:72px}.nav-cta{font-size:10px;padding:9px 10px}.nav-cta .icon{display:none}.brand-name{font-size:26px}.brand-mark{width:32px;height:32px}.brand-mark .icon{width:24px;height:24px}.brand-sub{font-size:8px}.brand{gap:11px}.hero h1{font-size:43px;letter-spacing:-1px}.hero h1 .subline{font-size:23px}.document{font-size:9px;padding:5px 7px}.hero-copy>p{font-size:14px}.hero-actions{gap:8px}.hero-actions .btn{font-size:12px;padding:12px 14px}.map-panel{height:400px}.map-top{padding:13px 10px}.map-top .mono{font-size:8px}.map-coordinates{font-size:8px;left:10px}.map-controls{padding:9px 7px}.segmented button{font-size:10px;padding:5px 9px}.play{font-size:10px}.hero-caption{font-size:8px}.stats{grid-template-columns:repeat(2,1fr)}.stat:nth-child(2){border-left:0}.stat:nth-child(-n+2){border-bottom:1px solid var(--line)}.stat strong{font-size:35px}.stat h3{font-size:13px}.section-heading{display:block;margin-bottom:25px}.section h2{font-size:30px}.section-heading p{font-size:13px}.layers-layout,.security-layout,.roi-layout{grid-template-columns:1fr}.layer-display{height:370px;grid-row:1}.stack{top:30px}.layer-description{min-height:50px}.engine-grid{grid-template-columns:1fr 1fr;gap:10px}.engine-card{padding:18px 14px;min-height:245px}.engine-card h3{font-size:15px}.engine-card p{font-size:11px}.engine-top{margin-bottom:17px}.engine-top .icon{width:23px}.engine-feature h3{font-size:22px}.engine-card .en{font-size:8px}.card-link{font-size:10px}.security-list{margin-top:12px}.roi-result{padding:23px}.signoff h2{font-size:27px}.signoff{padding-block:50px}.footer .wrap{flex-direction:column;gap:6px}.dialog-inner{padding:22px}.numeric-row{gap:10px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<a class="skip" href="#main">الانتقال إلى المحتوى</a>
|
||
<div class="status-bar"><div class="wrap"><div class="status-items"><span><i class="dot"></i> جاهزية عملياتية 100% <small class="demo-tag">/ عرض توضيحي</small></span><span>المسار: معزول كلياً <b class="mono">OFFLINE</b></span><span>السيادة: وطنية كاملة</span></div><span class="mono">JO · SOVEREIGN GEOSPATIAL SYSTEM</span><span class="mobile-status">منظومة وطنية مستقلة</span></div></div>
|
||
<header class="header"><nav class="nav wrap" aria-label="التنقل الرئيسي"><a class="brand" href="#main" aria-label="رصد — الصفحة الرئيسية"><span class="brand-mark"><i data-icon="radar"></i></span><div><div class="brand-name">رَصْد</div><div class="brand-sub mono">RASD · JORDAN</div></div></a><div class="nav-links" id="navigation"><a href="#engines">الترسانة التكتيكية</a><a href="#layers">تفكيك الطبقات</a><a href="#security">التحصين الأمني</a><a href="#simulation">المحاكاة الحية</a><a href="#roi">الجدوى السيادية</a></div><button class="btn nav-cta" data-brief>طلب استعراض قيادي <i data-icon="arrow"></i></button><button class="menu" aria-label="فتح قائمة التنقل" aria-expanded="false" aria-controls="navigation"><i data-icon="menu"></i></button></nav></header>
|
||
<main id="main">
|
||
<section class="hero"><div class="wrap"><div class="hero-main"><div class="hero-copy"><div class="document"><i data-icon="shield"></i> وثيقة الاستعراض الميداني <span style="color:#47616e">/</span> قيادة العمليات والسيطرة المشتركة</div><h1>السيادة المكانية<br><em>المطلقة.</em><span class="subline">منظومة الاستطلاع والتوجيه التكتيكي<br>المستقلة <span class="mint">100% بدون إنترنت.</span></span></h1><p>القرار الميداني يبدأ من أرضٍ تعرفها. منظومة خرائط وطنية متكاملة، تجمع التحليل التضاريسي والتوجيه التكتيكي وتتبع القوات الصديقة، لتبقى الصورة واضحة في بيئات التشويش والتعتيم الإلكتروني.</p><div class="hero-actions"><button class="btn primary" data-brief>طلب استعراض حي بغرفة العمليات <i data-icon="arrow"></i></button><a class="btn" href="#simulation"><i data-icon="play"></i> استكشف المحاكاة</a></div><div class="hero-note"><i data-icon="lock"></i> بياناتك داخل حدودك. قرارك تحت سيادتك.</div></div><div class="hero-map" id="simulation"><div class="map-panel"><div class="map-top"><span class="mono map-name"><i class="dot"></i> RASD / TERRAIN INTELLIGENCE</span><small class="mono" id="map-status">DEMO · RUNNING</small></div><canvas id="terrain" role="img" aria-label="محاكاة توضيحية ثلاثية الأبعاد لتضاريس اصطناعية، مع مؤشرات وحدات ورادار"></canvas><div class="map-coordinates mono">SECTOR / DEMO–07<br>GRID / LOCAL REFERENCE<br><span id="telemetry-time">T+ 00:00:00</span></div><div class="north">N</div><div class="map-location"><strong id="map-layer-label">التضاريس والارتفاعات</strong><span class="mono">SYNTHETIC TERRAIN · 3D VIEW</span></div><div class="map-scale">DEMO SCALE</div><div class="map-controls"><div class="segmented" aria-label="طبقة العرض"><button aria-pressed="true" data-view="terrain">تضاريس</button><button aria-pressed="false" data-view="contours">كنتور</button><button aria-pressed="false" data-view="units">وحدات</button></div><button class="play" id="toggle-play" aria-pressed="true"><i data-icon="pause"></i><span>إيقاف المحاكاة</span></button></div></div><div class="hero-caption"><span>LOCAL ENGINE / NO OPERATIONAL DATA</span><span>تضاريس ومؤشرات افتراضية لأغراض العرض</span></div></div></div><div class="stats"><div class="stat"><div class="stat-top"><strong>0<span>%</span></strong><i data-icon="offline"></i></div><h3>اعتماد على الإنترنت</h3><p>استمرارية في بيئات التعتيم الإلكتروني</p></div><div class="stat"><div class="stat-top"><strong>120,000<span>+</span></strong><i data-icon="pin"></i></div><h3>معلم جغرافي محلي</h3><p>قاعدة عربية وفق بيانات العرض المقدّمة</p></div><div class="stat"><div class="stat-top"><strong>100<span>%</span></strong><i data-icon="shield"></i></div><h3>استقلال وسيادة بيانات</h3><p>بنية وطنية داخل الحدود</p></div><div class="stat"><div class="stat-top"><strong>90<span>%</span></strong><i data-icon="chart"></i></div><h3>وفر مالي مستهدف</h3><p>بحسب حجم النشر وافتراضات التكلفة</p></div></div></div></section>
|
||
<section class="section" id="layers"><div class="wrap"><div class="section-heading"><div><div class="eyebrow">البنية الجغرافية المتكاملة</div><h2>كل طبقة… بُعد جديد للقرار.</h2><p>من تفاصيل الأرض إلى الصورة الميدانية. فكّك المنظومة واكتشف ما وراء الخريطة.</p></div><span class="section-number mono"><b>01</b> / GEOSPATIAL LAYERS</span></div><div class="layers-layout"><div><div class="layer-list" id="layer-list"></div><p class="layer-description" id="layer-description" aria-live="polite"></p><div class="range-block"><label class="range-label" for="spread"><span>تفكيك الطبقات</span><output id="spread-output" for="spread">60%</output></label><input id="spread" type="range" min="0" max="100" value="60"><div class="range-label muted" style="margin:0"><span>خريطة موحّدة</span><span>طبقات منفصلة</span></div></div></div><div class="layer-display" id="layer-display"><div class="stack" id="stack"></div><div class="layer-bottom">اختر طبقة لمعاينتها · حرّك المؤشر لتغيير زاوية العرض</div></div></div></div></section>
|
||
<section class="section engines" id="engines"><div class="wrap"><div class="section-heading"><div><div class="eyebrow">الترسانة الميدانية</div><h2>قدرات متخصصة. صورة متكاملة.</h2><p>سبعة محركات تكتيكية ضمن بيئة واحدة. اختر المحرك لاستعراض محاكاته التوضيحية.</p></div><span class="section-number mono"><b>02</b> / TACTICAL CAPABILITIES</span></div><div class="engine-grid" id="engine-grid"></div></div></section>
|
||
<section class="section" id="security"><div class="wrap"><div class="section-heading"><div><div class="eyebrow">الدفاع في العمق</div><h2>السيادة ليست ميزة. إنها المعمارية.</h2><p>تصور معماري بمسارين منفصلين: حماية للمعلومة العسكرية، وقيمة اقتصادية للبيانات المدنية.</p></div><span class="section-number mono"><b>03</b> / ZERO-TRUST ARCHITECTURE</span></div><div class="security-layout"><div class="architecture"><div class="architecture-title"><i data-icon="server"></i><div><strong>البنية السيادية الوطنية</strong><small>استضافة داخلية · إدارة وصلاحيات مركزية</small></div></div><div class="architecture-lines"></div><div class="architecture-branches"><div class="branch"><i data-icon="shield"></i><h3>المسار العسكري</h3><p>شبكة معزولة بالكامل<br>خوادم داخل المقرات<br>حماية مفاتيح عتادية</p><span class="mono">AIR-GAPPED INTRANET</span></div><div class="branch civil"><i data-icon="network"></i><h3>المسار المدني</h3><p>بوابة بيانات مستقلة<br>النقل واللوجستيات<br>إيرادات وطنية مستدامة</p><span class="mono">CIVIL SERVICES GATEWAY</span></div></div><div class="isolation"><i data-icon="lock"></i> فصل البيانات والصلاحيات بين المسارين</div></div><div class="security-list" id="security-list"></div></div><p class="assumptions">المعمارية والضوابط المعروضة متطلبات تصميم؛ إثبات الاعتماد والفاعلية يخضع للتقييم الأمني والفني المشترك.</p></div></section>
|
||
<section class="section roi" id="roi"><div class="wrap"><div class="section-heading"><div><div class="eyebrow">الجدوى والعائد السيادي</div><h2>من فاتورة مستمرة… إلى أصل وطني.</h2><p>قارن نموذج الاشتراك الخارجي بالتملك السيادي، وفق مدخلات تقديرية قابلة للتعديل.</p></div><span class="section-number mono"><b>04</b> / SOVEREIGN RETURN</span></div><div class="roi-layout"><div class="roi-controls"><div class="field"><label for="vehicles">عدد المركبات والأجهزة <output id="vehicles-output">5,000</output></label><input id="vehicles" type="range" min="100" max="20000" step="100" value="5000"></div><div class="field"><label for="years">فترة المقارنة <output id="years-output">5 سنوات</output></label><input id="years" type="range" min="1" max="10" value="5"></div><div class="numeric-row"><div><label for="subscription">الاشتراك السنوي للجهاز ($)</label><input id="subscription" type="number" min="0" max="100000" step="10" value="240" required></div><div><label for="ownership">التأسيس السيادي لمرة واحدة ($)</label><input id="ownership" type="number" min="0" max="100000000" step="1000" value="350000" required></div></div><div class="numeric-row"><div><label for="maintenance">التشغيل والصيانة سنوياً ($)</label><input id="maintenance" type="number" min="0" max="100000000" step="1000" value="50000" required></div><div style="display:flex;align-items:end"><button class="btn small" id="reset-roi" style="width:100%"><i data-icon="reset"></i> القيم الافتراضية</button></div></div><p class="assumptions">النموذج بالدولار الأمريكي، دون ضرائب أو خصم زمني. لا يمثل عرض سعر أو وفراً مضموناً. يمكن تعديل تكاليف التأسيس والتشغيل بحسب نطاق المشروع.</p></div><div class="roi-result" aria-live="polite" aria-atomic="true"><div class="roi-result-top"><div><small id="saving-label">صافي الوفر التقديري خلال 5 سنوات</small><strong id="saving" dir="ltr">$5,400,000</strong></div><i data-icon="chart"></i></div><div class="roi-badge" id="saving-percent">90% خفض في إجمالي التكلفة</div><div class="bar-label"><span>الاشتراكات الخارجية</span><b class="mono" id="foreign-total">$6,000,000</b></div><div class="bar-track"><div class="bar-fill" id="foreign-bar"></div></div><div class="bar-label"><span>التملك والتشغيل السيادي</span><b class="mono" id="sovereign-total">$600,000</b></div><div class="bar-track"><div class="bar-fill sovereign" id="sovereign-bar" style="width:10%"></div></div><p class="assumptions" id="roi-equation">التكلفة السيادية = التأسيس + التشغيل السنوي × عدد السنوات</p></div></div></div></section>
|
||
<section class="signoff wrap"><i data-icon="radar"></i><div class="eyebrow" style="justify-content:center;margin-top:10px">الجاهزية تبدأ بالتقييم</div><h2>الأرض أرضنا. والمعلومة سيادتنا.</h2><p>مقدّم إلى القيادة العامة للقوات المسلحة الأردنية — الجيش العربي<br>والمركز الجغرافي الملكي الأردني</p><button class="btn primary" data-brief>تحديد موعد جلسة المحاكاة والتقييم الفني المشترك <i data-icon="arrow"></i></button><div class="signature"><strong>المقدم المتقاعد حمزة عايد الغويري</strong><span>المؤسس والمهندس المعماري للأنظمة التكتيكية المتقدمة</span></div></section>
|
||
</main><footer class="footer"><div class="wrap"><span>رَصْد · منظومة الخرائط التكتيكية والسيادية الأردنية</span><span>عرض تعريفي مستقل · الأرقام والقدرات وفق التصور المقدّم</span><span class="mono">DESIGNED FOR SOVEREIGNTY. BUILT FOR JORDAN.</span></div></footer>
|
||
<dialog id="engine-dialog" aria-labelledby="engine-title"><div class="dialog-inner"><div class="dialog-head"><h2 id="engine-title"></h2><button class="close-dialog" aria-label="إغلاق" data-close><i data-icon="close"></i></button></div><p id="engine-description"></p><div class="eyebrow">قياسات توضيحية مولّدة محلياً</div><canvas class="telemetry" id="engine-telemetry" aria-label="رسم إشارات اصطناعية لعرض استجابة الواجهة"></canvas><div class="telemetry-summary"><div><span>DEMO</span>نمط العرض</div><div><span>LOCAL</span>مصدر المحاكاة</div><div><span>0</span>اتصالات بيانات</div></div><p class="assumptions">هذه معاينة واجهة ببيانات اصطناعية، ولا تنتج حلول رماية أو توجيهاً ميدانياً أو تقديرات عبور آمن.</p><button class="btn small" data-close>العودة إلى الترسانة <i data-icon="arrow"></i></button></div></dialog>
|
||
<dialog id="brief-dialog" aria-labelledby="brief-title"><div class="dialog-inner"><div class="dialog-head"><h2 id="brief-title">إعداد جلسة الاستعراض القيادي</h2><button class="close-dialog" aria-label="إغلاق" data-close><i data-icon="close"></i></button></div><p>حدّد الموعد المقترح ومحور الجلسة، ثم نزّل دعوة تقويم لمشاركتها مع فريق التنسيق. لا يتم إرسال الدعوة أو تأكيد الحجز تلقائياً.</p><form class="brief-form" id="brief-form"><label>عنوان الجلسة<input name="title" value="جلسة المحاكاة والتقييم الفني المشترك — منظومة رصد" maxlength="140" required></label><div class="numeric-row"><label>التاريخ المقترح<input name="date" type="date" required></label><label>التوقيت — عمّان<input name="time" type="time" value="10:00" required></label></div><label>محور الاستعراض<select name="focus"><option>المنظومة المتكاملة والجدوى السيادية</option><option>الطبقات الجغرافية والمحركات التكتيكية</option><option>المعمارية الأمنية والنشر المعزول</option></select></label><button class="btn primary" type="submit"><i data-icon="calendar"></i> تنزيل دعوة تقويم مقترحة</button><p class="form-message" id="form-message" role="status"></p></form></div></dialog>
|
||
<script>
|
||
'use strict';
|
||
// Icons are embedded so the single file keeps its controls when disconnected.
|
||
const paths={radar:'<circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><path d="M12 12 19 5M12 2v2M2 12h2M12 20v2M20 12h2"/>',arrow:'<path d="M19 12H5m6-6-6 6 6 6"/>',shield:'<path d="m12 3 8 3v6c0 5-8 9-8 9s-8-4-8-9V6l8-3Z"/><path d="m8 12 3 3 5-6"/>',lock:'<rect x="5" y="10" width="14" height="11" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3M12 14v3"/>',play:'<path d="m8 4 12 8-12 8V4Z"/>',pause:'<path d="M8 5v14M16 5v14"/>',offline:'<path d="m3 3 18 18M8 8a8 8 0 0 1 11 2M2 7a16 16 0 0 1 3-2m5-2a17 17 0 0 1 12 4M5 12l1-1m3 5 3-1m4-2 3-1M12 20h.01"/>',pin:'<path d="M19 10c0 5-7 11-7 11S5 15 5 10a7 7 0 1 1 14 0Z"/><circle cx="12" cy="10" r="2"/>',chart:'<path d="M4 4v16h17M8 15l4-5 4 3 5-7"/>',menu:'<path d="M4 6h16M4 12h16M4 18h16"/>',layers:'<path d="m12 3 10 5-10 5L2 8l10-5Zm-10 9 10 5 10-5M2 16l10 5 10-5"/>',eye:'<path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12Z"/><circle cx="12" cy="12" r="3"/>',target:'<circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="3"/><path d="M12 1v4M12 19v4M1 12h4M19 12h4"/>',helicopter:'<path d="M3 3h18M12 3v5M5 18h14M8 15v3M16 15v3M3 8v5h5m0-5h8a4 4 0 0 1 0 8H8V8Z"/>',compass:'<circle cx="12" cy="12" r="9"/><path d="m16 8-3 5-5 3 3-5 5-3Z"/>',network:'<rect x="9" y="2" width="6" height="5" rx="1"/><rect x="2" y="17" width="6" height="5" rx="1"/><rect x="16" y="17" width="6" height="5" rx="1"/><path d="M12 7v5H5v5m7-5h7v5"/>',warning:'<path d="m12 3 10 18H2L12 3ZM12 9v5M12 17h.01"/>',server:'<rect x="3" y="3" width="18" height="7" rx="2"/><rect x="3" y="14" width="18" height="7" rx="2"/><path d="M7 6.5h.01M7 17.5h.01M12 7h5M12 18h5"/>',code:'<path d="m8 6-6 6 6 6m8-12 6 6-6 6M14 3l-4 18"/>',key:'<circle cx="8" cy="9" r="5"/><path d="m12 13 8 8m-4-4 3-3m-1 5 3-3"/>',erase:'<path d="m4 14 9-11 9 8-8 10H9l-5-4v-3ZM9 9l9 8M13 21h9"/>',reset:'<path d="M3 11a9 9 0 1 1 2 7M3 4v7h7"/>',calendar:'<rect x="3" y="5" width="18" height="16" rx="2"/><path d="M7 2v6M17 2v6M3 11h18M8 15h2M14 15h2"/>',close:'<path d="m6 6 12 12M6 18 18 6"/>'};
|
||
function icon(name){return '<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">'+(paths[name]||paths.layers)+'</svg>'}
|
||
function icons(root=document){root.querySelectorAll('[data-icon]').forEach(e=>{e.outerHTML=icon(e.dataset.icon)})}
|
||
const layers=[['التضاريس والارتفاعات الرقمية','DEM / HILLSHADE MESH','نموذج تضاريسي يوضح الارتفاع والانحدار؛ نقطة البداية لبناء الصورة الجغرافية.'],['خطوط الكنتور الطبوغرافية','TACTICAL CONTOURS','خطوط متساوية الارتفاع تكشف التكوين التضاريسي وتساعد في قراءة طبيعة الأرض.'],['شبكة الطرق والممرات','OFF-ROAD TACTICAL VECTORS','تمثيل مرئي لشبكة الطرق والممرات ضمن قاعدة الخرائط المحلية.'],['شبكة الإحداثيات العسكرية','MGRS REFERENCE GRID','طبقة تربيع وإسناد مكاني موحّدة؛ الشبكة هنا توضيحية ولا تمثل مرجعاً ملاحياً.'],['طبقة العمليات والقوات الصديقة','BFT / MIL-STD-2525','تصور لعرض رموز الوحدات ومزامنة حالتها؛ الرموز والمواقع في هذا العرض افتراضية.']];
|
||
const engines=[['eye','خط الرؤية الميداني','LINE OF SIGHT / LOS','قراءة العلاقة بين التضاريس ومجال الرؤية، مع إظهار مناطق الحجب على الخريطة.'],['radar','مساحات الرؤية الدائرية','360° VIEWSHED ANALYSIS','معاينة نطاق الرؤية حول نقطة افتراضية وتمييز المساحات المرئية والمحجوبة.'],['target','المدفعية والهاونات','ARTILLERY & BALLISTICS','واجهة عرض لمحرك التحليل الباليستي المقترح وتكامل نماذج الارتفاع؛ دون حسابات رماية تشغيلية.'],['helicopter','تقييم مهابط المروحيات','HLZ ASSESSMENT','استعراض خصائص الموقع والانحدار والعوائق لدعم التقييم الفني الأولي.'],['compass','التموضع بالتقاطع الخلفي','GPS-DENIED RESECTION','تصور لاستعادة الإسناد المكاني من المعالم المعروفة عند تعذر استقبال إشارات التموضع.'],['network','تتبع القوات الصديقة','BLUE FORCE TRACKING','صورة موحّدة لحالة الوحدات عبر شبكات محلية أو راديوية، دون الاعتماد على الاتصال المدني.'],['warning','المناطق المحرّمة والمخاطر','MINEFIELD & HAZARD LAYERS','تمثيل حدود المناطق المقيّدة وإبراز التنبيهات على الخريطة؛ لا تعتمد المعاينة لتحديد مسار آمن.']];
|
||
document.querySelector('#layer-list').innerHTML=layers.map((l,i)=>`<button class="layer-row" data-layer="${i}" aria-pressed="${i===0}"><span class="layer-num">0${i+1}</span><span><strong>${l[0]}</strong><small class="mono">${l[1]}</small></span>${icon('layers')}</button>`).join('');
|
||
document.querySelector('#stack').innerHTML=layers.map((l,i)=>`<div class="plane ${i===0?'selected':''}" style="--i:${i}" data-plane="${i}"><canvas width="600" height="600" aria-label="${l[0]}"></canvas><span class="plane-label">0${i+1} / ${l[1].split(' / ')[0]}</span></div>`).join('');
|
||
document.querySelector('#engine-grid').innerHTML=engines.map((e,i)=>`<button class="engine-card" data-engine="${i}" aria-haspopup="dialog"><span class="engine-top">${icon(e[0])}<span class="mono">0${i+1} / ENGINE</span></span><h3>${e[1]}</h3><span class="en mono">${e[2]}</span><p>${e[3]}</p><span class="card-link">استعراض المحرك ${icon('arrow')}</span></button>`).join('')+`<div class="engine-card engine-feature"><span class="engine-top">${icon('offline')}<span class="mono">OFFLINE FIRST</span></span><h3>الميدان لا ينتظر<br><span class="mint">عودة الاتصال.</span></h3><p>بنية مصممة للعمل محلياً، حيث تكون استمرارية القرار أولوية.</p><a class="card-link" href="#security">استكشف المعمارية ${icon('arrow')}</a></div>`;
|
||
const defenses=[['code','تظليل الكود','تقليل قابلية التحليل والهندسة العكسية.'],['shield','كشف العبث وكسر الحماية','التحقق من سلامة البيئة وتقييد التشغيل عند الاشتباه.'],['key','مفاتيح داخل شريحة الأمان','حفظ المفاتيح عبر Hardware Keystore حيث يتوفر.'],['lock','توزيع مغلق ومُدار','نشر داخلي مع ضبط الإصدارات وصلاحيات الوصول.'],['erase','مسح طارئ للبيانات الحساسة','سياسة مسح وإبطال مفاتيح تخضع لضوابط الاعتماد.']];
|
||
document.querySelector('#security-list').innerHTML=defenses.map((s,i)=>`<div class="security-item">${icon(s[0])}<div><strong>${s[1]}</strong><p>${s[2]}</p></div><span class="mono">0${i+1}</span></div>`).join('');icons();
|
||
const menu=document.querySelector('.menu'),navigation=document.querySelector('#navigation');menu.onclick=()=>{const open=menu.getAttribute('aria-expanded')!=='true';menu.setAttribute('aria-expanded',open);menu.setAttribute('aria-label',open?'إغلاق قائمة التنقل':'فتح قائمة التنقل');navigation.classList.toggle('open',open)};navigation.querySelectorAll('a').forEach(a=>a.onclick=()=>{navigation.classList.remove('open');menu.setAttribute('aria-expanded','false');menu.setAttribute('aria-label','فتح قائمة التنقل')});
|
||
const reduced=matchMedia('(prefers-reduced-motion: reduce)');let playing=!reduced.matches,mode='terrain',phase=0,lastTime=0,visibleMap=true;const terrain=document.querySelector('#terrain'),ctx=terrain.getContext('2d'),cache=document.createElement('canvas'),terrainCtx=cache.getContext('2d');let W=600,H=500,DPR=1;
|
||
// Synthetic elevation function, deliberately unrelated to real geographical coordinates.
|
||
function elevation(x,y){return 1.0*Math.exp(-((x+.35)**2*2.8+(y+.18)**2*5))+0.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 point(x,y){return [W*.49+(x-y)*W*.27,H*.50+(x+y)*H*.19-elevation(x,y)*H*.25]}
|
||
function pathLine(c,pts){c.beginPath();pts.forEach((p,i)=>i?c.lineTo(...p):c.moveTo(...p));c.stroke()}
|
||
function drawTerrain(){terrainCtx.clearRect(0,0,W,H);const c=terrainCtx;c.lineWidth=.65;for(let y=-1.1;y<1.12;y+=.036){let p=[];for(let x=-1.1;x<=1.12;x+=.024)p.push(point(x,y));c.strokeStyle=mode==='contours'?'rgba(105,243,205,.48)':'rgba(88,182,167,.4)';pathLine(c,p)}for(let x=-1.1;x<1.12;x+=.045){let p=[];for(let y=-1.1;y<=1.12;y+=.035)p.push(point(x,y));c.strokeStyle='rgba(65,143,157,.21)';pathLine(c,p)}c.strokeStyle='#50747b25';c.lineWidth=1;for(let i=0;i<W;i+=45)pathLine(c,[[i,0],[i,H]]);for(let i=0;i<H;i+=45)pathLine(c,[[0,i],[W,i]]);c.setLineDash([4,6]);c.strokeStyle='#eab30875';c.lineWidth=1.4;pathLine(c,Array.from({length:80},(_,i)=>{let x=-.9+i/44;return point(x,.26+Math.sin(x*3)*.27)}));c.setLineDash([]);if(mode==='contours'){c.strokeStyle='#6ae6be55';for(let level=.06;level<1.1;level+=.085){for(let y=-1;y<1;y+=.026){let pts=[];for(let x=-1;x<1;x+=.018)if(Math.abs(elevation(x,y)-level)<.011)pts.push(point(x,y));for(const p of pts){c.beginPath();c.arc(...p,.8,0,Math.PI*2);c.stroke()}}}}}
|
||
function resize(){let r=terrain.getBoundingClientRect();W=r.width;H=r.height;DPR=Math.min(devicePixelRatio||1,2);for(const c of [terrain,cache]){c.width=Math.round(W*DPR);c.height=Math.round(H*DPR);c.getContext('2d').setTransform(DPR,0,0,DPR,0,0)}drawTerrain();renderMap()}
|
||
function renderMap(){ctx.clearRect(0,0,W,H);ctx.drawImage(cache,0,0,W,H);const [cx,cy]=point(.1,.05),rad=W*.23;ctx.save();ctx.translate(cx,cy);ctx.scale(1,.52);ctx.strokeStyle='#69f3cd32';ctx.lineWidth=1;for(let f of [.35,.7,1]){ctx.beginPath();ctx.arc(0,0,rad*f,0,Math.PI*2);ctx.stroke()}ctx.rotate(phase*.22);const gradient=ctx.createConicGradient(0,0,0);gradient.addColorStop(0,'#69f3cd30');gradient.addColorStop(.18,'#69f3cd00');gradient.addColorStop(1,'#69f3cd00');ctx.fillStyle=gradient;ctx.beginPath();ctx.moveTo(0,0);ctx.arc(0,0,rad,0,Math.PI*2);ctx.fill();ctx.strokeStyle='#69f3cd65';pathLine(ctx,[[0,0],[rad,0]]);ctx.restore();const nodes=[[-.57,-.12,'ALPHA / 01'],[.44,.29,'BRAVO / 02'],[.55,-.55,'OBS / 03']];if(mode==='units')nodes.push([-.2,.6,'DELTA / 04'],[.8,-.05,'ECHO / 05']);nodes.forEach(([x,y,label],i)=>{const p=point(x+Math.sin(phase*.12+i)*.025,y);ctx.strokeStyle=i===2?'#eab308':'#69f3cd';ctx.fillStyle='#0a242be6';ctx.lineWidth=1.4;ctx.fillRect(p[0]-6,p[1]-5,12,10);ctx.strokeRect(p[0]-6,p[1]-5,12,10);pathLine(ctx,[[p[0]-5,p[1]+4],[p[0]+5,p[1]-4]]);ctx.beginPath();ctx.arc(...p,12+(Math.sin(phase*1.5+i)+1)*3,0,Math.PI*2);ctx.strokeStyle='#69f3cd30';ctx.stroke();ctx.fillStyle=i===2?'#d1b455':'#8cd9c5';ctx.font='9px monospace';ctx.fillText(label,p[0]+13,p[1]-8)});document.querySelector('#telemetry-time').textContent='T+ '+new Date(Math.floor(phase)*1000).toISOString().slice(11,19)}
|
||
function syncPlay(){document.querySelector('#toggle-play').innerHTML=icon(playing?'pause':'play')+'<span>'+(playing?'إيقاف المحاكاة':'تشغيل المحاكاة')+'</span>';document.querySelector('#toggle-play').setAttribute('aria-pressed',playing);document.querySelector('#map-status').textContent=playing?'DEMO · RUNNING':'DEMO · PAUSED'}
|
||
document.querySelector('#toggle-play').onclick=()=>{playing=!playing;syncPlay()};syncPlay();reduced.addEventListener('change',e=>{if(e.matches){playing=false;syncPlay()}});
|
||
document.querySelectorAll('[data-view]').forEach(b=>b.onclick=()=>{mode=b.dataset.view;document.querySelectorAll('[data-view]').forEach(x=>x.setAttribute('aria-pressed',x===b));document.querySelector('#map-layer-label').textContent={terrain:'التضاريس والارتفاعات',contours:'خطوط الكنتور الطبوغرافية',units:'الوحدات الافتراضية'}[mode];drawTerrain();renderMap()});new ResizeObserver(resize).observe(terrain);new IntersectionObserver(entries=>{visibleMap=entries[0].isIntersecting}).observe(terrain);
|
||
function frame(t){const dt=Math.min((t-lastTime)/1000,.07);lastTime=t;if(playing&&!document.hidden&&visibleMap){phase+=dt;renderMap()}if(engineDialog.open&&!document.hidden&&!reduced.matches)drawGauge(t*.001);requestAnimationFrame(frame)}
|
||
const spread=document.querySelector('#spread'),stack=document.querySelector('#stack');let manualSpread=false;function setSpread(value){stack.style.setProperty('--spread',(value*.58)+'px');document.querySelector('#spread-output').value=value+'%'}spread.oninput=()=>{manualSpread=true;setSpread(spread.value)};setSpread(60);
|
||
const planeCanvases=[...document.querySelectorAll('.plane canvas')];planeCanvases.forEach((canvas,index)=>{let c=canvas.getContext('2d');c.strokeStyle='#69f3cd70';c.lineWidth=1.2;const s=600;if(index===0||index===1){for(let j=0;j<35;j++){let pts=[];for(let i=0;i<100;i++){let x=i/99*600,y=35+j*16+Math.sin(i*.075+j*.15)*30+Math.sin(i*.18)*12;pts.push([x,y])}pathLine(c,pts)}}if(index===2){c.strokeStyle='#b8b076';for(let j=0;j<5;j++)pathLine(c,Array.from({length:40},(_,i)=>[i*16,100+j*90+Math.sin(i*.14+j)*45]))}if(index===3){for(let x=0;x<s;x+=60){pathLine(c,[[x,0],[x,s]]);pathLine(c,[[0,x],[s,x]])}c.font='15px monospace';c.fillStyle='#69f3cd';c.fillText('REFERENCE GRID / DEMO',50,560)}if(index===4){[[180,180],[420,310],[180,450]].forEach(([x,y])=>{c.strokeRect(x,y,45,30);pathLine(c,[[x,y],[x+45,y+30]]);c.beginPath();c.arc(x+22,y+15,45,0,Math.PI*2);c.stroke()})}});
|
||
function selectLayer(index){document.querySelectorAll('[data-layer]').forEach((b,i)=>b.setAttribute('aria-pressed',i===index));document.querySelectorAll('[data-plane]').forEach((p,i)=>{p.classList.toggle('selected',i===index);p.style.opacity=i===index?'1':'.48'});document.querySelector('#layer-description').textContent=layers[index][2]}
|
||
document.querySelectorAll('[data-layer]').forEach(b=>b.onclick=()=>selectLayer(+b.dataset.layer));selectLayer(0);const display=document.querySelector('#layer-display');display.onpointermove=e=>{if(e.pointerType!=='mouse'||reduced.matches)return;let r=display.getBoundingClientRect();stack.style.transform=`rotateX(${57+(e.clientY-r.top-r.height/2)/40}deg) rotateZ(${-36+(e.clientX-r.left-r.width/2)/35}deg)`};display.onpointerleave=()=>stack.style.transform='';let scrollQueued=false;window.addEventListener('scroll',()=>{if(manualSpread||reduced.matches||scrollQueued)return;scrollQueued=true;requestAnimationFrame(()=>{const r=display.getBoundingClientRect();if(r.top<innerHeight&&r.bottom>0){const value=Math.round(Math.max(20,Math.min(100,(innerHeight-r.top)/innerHeight*110)));spread.value=value;setSpread(value)}scrollQueued=false})},{passive:true});
|
||
const engineDialog=document.querySelector('#engine-dialog'),briefDialog=document.querySelector('#brief-dialog');let activeEngine=0;document.querySelectorAll('[data-engine]').forEach(b=>b.onclick=()=>{activeEngine=+b.dataset.engine;document.querySelector('#engine-title').textContent=engines[activeEngine][1];document.querySelector('#engine-description').textContent=engines[activeEngine][3];engineDialog.showModal();drawGauge(0)});document.querySelectorAll('[data-close]').forEach(b=>b.onclick=()=>b.closest('dialog').close());[engineDialog,briefDialog].forEach(d=>d.addEventListener('click',e=>{if(e.target===d){let r=d.getBoundingClientRect();if(e.clientX<r.left||e.clientX>r.right||e.clientY<r.top||e.clientY>r.bottom)d.close()}}));
|
||
function drawGauge(t){const canvas=document.querySelector('#engine-telemetry'),r=canvas.getBoundingClientRect(),d=Math.min(devicePixelRatio||1,2);if(canvas.width!==Math.round(r.width*d)||canvas.height!==Math.round(r.height*d)){canvas.width=Math.round(r.width*d);canvas.height=Math.round(r.height*d)}let c=canvas.getContext('2d');c.setTransform(d,0,0,d,0,0);c.clearRect(0,0,r.width,r.height);c.strokeStyle='#548d9826';c.lineWidth=1;for(let y=20;y<r.height;y+=25)pathLine(c,[[0,y],[r.width,y]]);c.strokeStyle='#69f3cd';c.lineWidth=1.4;pathLine(c,Array.from({length:Math.ceil(r.width)},(_,i)=>[i,r.height/2+Math.sin(i*.04+t+activeEngine)*17+Math.cos(i*.09-t)*7]));}
|
||
const fmt=new Intl.NumberFormat('en-US',{maximumFractionDigits:0}),usd=v=>'$'+fmt.format(v),roiIds=['vehicles','years','subscription','ownership','maintenance'];function updateROI(){const fields=roiIds.map(id=>document.getElementById(id));if(fields.some(f=>f.value===''||!f.validity.valid)){document.querySelector('#saving').textContent='—';document.querySelector('#saving-percent').textContent='أدخل قيماً صحيحة ضمن الحدود المتاحة';document.querySelector('#foreign-total').textContent='—';document.querySelector('#sovereign-total').textContent='—';document.querySelector('#foreign-bar').style.width='0%';document.querySelector('#sovereign-bar').style.width='0%';return}const [vehicles,years,subscription,ownership,maintenance]=fields.map(f=>Number(f.value));document.querySelector('#vehicles-output').value=fmt.format(vehicles);document.querySelector('#years-output').value=years+' سنوات';let foreign=vehicles*years*subscription,sovereign=ownership+years*maintenance,saving=foreign-sovereign;document.querySelector('#saving').textContent=(saving<0?'−':'')+usd(Math.abs(saving));document.querySelector('#saving-label').textContent=saving>=0?'صافي الوفر التقديري خلال '+years+' سنوات':'فرق تكلفة إضافي خلال '+years+' سنوات';document.querySelector('#saving-percent').textContent=foreign>0?(Math.abs(saving/foreign)*100).toFixed(1)+'% '+(saving>=0?'خفض في إجمالي التكلفة':'زيادة في إجمالي التكلفة'):'لا يمكن حساب نسبة الوفر دون تكلفة اشتراك';document.querySelector('#foreign-total').textContent=usd(foreign);document.querySelector('#sovereign-total').textContent=usd(sovereign);const max=Math.max(foreign,sovereign,1);document.querySelector('#foreign-bar').style.width=foreign/max*100+'%';document.querySelector('#sovereign-bar').style.width=sovereign/max*100+'%'}roiIds.forEach(id=>document.getElementById(id).addEventListener('input',updateROI));document.querySelector('#reset-roi').onclick=()=>{[5000,5,240,350000,50000].forEach((v,i)=>document.getElementById(roiIds[i]).value=v);updateROI()};updateROI();
|
||
const briefForm=document.querySelector('#brief-form');const today=new Intl.DateTimeFormat('en-CA',{timeZone:'Asia/Amman',year:'numeric',month:'2-digit',day:'2-digit'}).format(new Date());briefForm.elements.date.min=today;document.querySelectorAll('[data-brief]').forEach(b=>b.onclick=()=>{document.querySelector('#form-message').textContent='';briefDialog.showModal()});
|
||
function icsEscape(s){return s.replace(/\\/g,'\\\\').replace(/\r?\n/g,'\\n').replace(/;/g,'\\;').replace(/,/g,'\\,')}
|
||
function foldLine(line){const encoder=new TextEncoder();let result='',part='',size=0;for(const char of line){let len=encoder.encode(char).length;if(size+len>73){result+=part+'\r\n ';part='';size=1}part+=char;size+=len}return result+part}
|
||
briefForm.onsubmit=e=>{e.preventDefault();if(!briefForm.reportValidity())return;const date=briefForm.elements.date.value,time=briefForm.elements.time.value;const start=new Date(date+'T'+time+':00+03:00');if(start<=new Date()){document.querySelector('#form-message').textContent='اختر موعداً مقترحاً في المستقبل.';return}const stamp=d=>d.toISOString().replace(/[-:]/g,'').replace(/\.\d{3}/,'');let text=['BEGIN:VCALENDAR','VERSION:2.0','PRODID:-//RASD//Mission Briefing//AR','CALSCALE:GREGORIAN','BEGIN:VEVENT','UID:rasd-'+Date.now()+'-'+Math.random().toString(36).slice(2)+'@local.invalid','DTSTAMP:'+stamp(new Date()),'DTSTART:'+stamp(start),'DTEND:'+stamp(new Date(start.getTime()+3600000)),'SUMMARY:'+icsEscape(briefForm.elements.title.value),'DESCRIPTION:'+icsEscape('موعد مقترح غير مؤكد. محور الجلسة: '+briefForm.elements.focus.value+'\nيُنسّق مكان الاجتماع والمشاركون بشكل منفصل.'),'STATUS:TENTATIVE','END:VEVENT','END:VCALENDAR'].map(foldLine).join('\r\n')+'\r\n';const url=URL.createObjectURL(new Blob([text],{type:'text/calendar;charset=utf-8'})),a=document.createElement('a');a.href=url;a.download='rasd-briefing-'+date+'.ics';a.click();setTimeout(()=>URL.revokeObjectURL(url),2000);document.querySelector('#form-message').textContent='تم تجهيز دعوة التقويم للتنزيل. الموعد مقترح ولم يُرسل إلى أي جهة.'};
|
||
new IntersectionObserver(entries=>{for(const e of entries)if(e.isIntersecting){document.querySelectorAll('.nav-links a').forEach(a=>a.classList.toggle('active',a.hash==='#'+e.target.id))}},{rootMargin:'-15% 0px -65% 0px'}).observe(document.querySelector('#layers'));
|
||
requestAnimationFrame(frame);
|
||
</script>
|
||
</body></html>
|