Add future-of-warfare-technology cheatsheet HTML
· 7 months ago
2c372f1d44cde3fc3253d1d49d7408fbf1800e15
Parent:
c558c4809
Introduces a comprehensive HTML cheatsheet outlining key technologies, metrics, timelines, and countermeasures shaping the next 10–30 years of warfare. Covers autonomy, swarms, electronic warfare, cyber-secure compute, directed energy, logistics automation, and space, with interactive filtering and data-driven insights.
1 file changed +528 −0
Diff
--- /dev/null +++ b/future-of-warfare-technology.html @@ -0,0 +1,528 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <title>The Future of Warfare Technology: Systems-of-Systems Dominance</title> + <meta name="description" content="Strategic cheatsheet on how autonomy, swarms, EW, cyber-secure compute, and directed energy will shape the next 10–30 years of warfare. Includes metrics, timelines, and countermeasures." /> + <meta name="keywords" content="future warfare technology, military autonomy, swarms, electronic warfare, directed energy, trusted compute, logistics automation, counter-space" /> + <link rel="canonical" href="https://cheatsheets.davidveksler.com/future-of-warfare-technology.html" /> + <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⚔️</text></svg>" /> + <meta property="og:title" content="The Future of Warfare Technology: Systems-of-Systems Dominance" /> + <meta property="og:description" content="A compact, data-driven view of how autonomy, swarms, EW, trusted compute, and DE reshape warfare in the next 30 years." /> + <meta property="og:type" content="website" /> + <meta property="og:url" content="https://cheatsheets.davidveksler.com/future-of-warfare-technology.html" /> + <meta property="og:image" content="images/future-of-warfare-technology.png" /> + <meta property="og:image:alt" content="Systems map showing autonomy, swarms, EW, and resilient comms in future warfare." /> + <meta name="twitter:card" content="summary_large_image" /> + <meta name="twitter:title" content="The Future of Warfare Technology" /> + <meta name="twitter:description" content="Executive metrics, failure modes, and timelines for autonomy-first warfare." /> + <meta name="twitter:image" content="images/future-of-warfare-technology.png" /> + <meta name="twitter:creator" content="@heroiclife" /> + <script type="application/ld+json"> + { + "@context": "https://schema.org", + "@type": "TechArticle", + "headline": "Future of Warfare Technology Cheatsheet 2025", + "description": "A strategic reference describing the interplay of autonomy, swarms, EW, trusted compute, logistics automation, and counter-space capabilities over the next 30 years.", + "author": { + "@type": "Person", + "name": "David Veksler (AI Generated)" + }, + "publisher": { + "@type": "Organization", + "name": "David Veksler Cheatsheets" + }, + "datePublished": "2025-02-14", + "dateModified": "2025-02-14", + "keywords": "future warfare,future military technology,autonomous weapons,electronic warfare,edge AI,swarm drones,trusted compute" + } + </script> + <link rel="preconnect" href="https://cdn.jsdelivr.net" /> + <link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" rel="stylesheet" /> + <link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" rel="stylesheet" /> + <style> + :root { + --bg: #05080f; + --panel: #0f1724; + --panel-alt: #141f33; + --text: #d6e2ff; + --muted: #8fa0c7; + --accent: #00ffc6; + --accent-2: #ff7a18; + --danger: #ff4d6d; + --success: #63ffa1; + --border: rgba(255, 255, 255, 0.08); + } + body { + background-color: var(--bg); + color: var(--text); + font-family: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; + line-height: 1.6; + padding-bottom: 4rem; + } + .page-header { + background: radial-gradient(circle at top, rgba(0, 255, 198, 0.15), transparent 50%), + linear-gradient(135deg, rgba(0, 255, 198, 0.08), rgba(255, 122, 24, 0.05)); + border: 1px solid var(--border); + border-radius: 1rem; + padding: 3rem 2rem; + box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); + margin-bottom: 2rem; + } + .section-title { + border-left: 4px solid var(--accent); + padding-left: 0.75rem; + text-transform: uppercase; + letter-spacing: 0.08em; + font-size: 0.95rem; + color: var(--muted); + margin-bottom: 1rem; + display: flex; + align-items: center; + gap: 0.5rem; + } + .section-title .bi { color: var(--accent); font-size: 1.1rem; } + .info-card { + background: linear-gradient(145deg, var(--panel), var(--panel-alt)); + border: 1px solid var(--border); + border-radius: 1rem; + padding: 1.5rem; + height: 100%; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); + } + .info-card.highlight { + border-color: rgba(0, 255, 198, 0.4); + box-shadow: 0 20px 45px rgba(0, 255, 198, 0.12); + } + .metric-pill { + display: inline-flex; + align-items: center; + gap: 0.35rem; + background: rgba(0, 255, 198, 0.08); + color: var(--accent); + border: 1px solid rgba(0, 255, 198, 0.4); + border-radius: 999px; + padding: 0.3rem 0.9rem; + font-size: 0.85rem; + font-weight: 600; + } + .lane-list li { + margin-bottom: 1rem; + } + .lane-list strong { + color: var(--accent); + } + .lane-details { + margin-top: 0.5rem; + color: var(--muted); + } + .timeline { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 1rem; + } + .timeline .phase { + border-left: 3px solid var(--accent-2); + padding-left: 1rem; + } + .interactive-panel { + background: rgba(8, 13, 24, 0.75); + border: 1px solid var(--border); + border-radius: 1rem; + padding: 1.5rem; + } + .form-check-label { + color: var(--muted); + } + .data-table th, .data-table td { + padding: 0.75rem; + border-color: var(--border); + } + .data-table tbody tr:hover { + background-color: rgba(255, 255, 255, 0.02); + } + .failure { + border-left: 4px solid var(--danger); + } + .badge-impact { + font-size: 0.75rem; + border-radius: 0.5rem; + } + .impact-high { background: rgba(255, 122, 24, 0.15); color: var(--accent-2); } + .impact-very-high { background: rgba(0, 255, 198, 0.15); color: var(--accent); } + .impact-medium { background: rgba(99, 255, 161, 0.15); color: var(--success); } + .icon-accent { color: var(--accent); } + .icon-warn { color: var(--accent-2); } + .print-note { + display: none; + } + @media (max-width: 768px) { + .page-header { padding: 2rem 1.5rem; } + } + @media print { + body { background: #fff; color: #000; } + .page-header, .info-card { box-shadow: none; } + .print-note { display: block; font-style: italic; color: #555; margin-top: 1rem; } + .interactive-panel { border: 1px dashed #999; } + } + </style> +</head> +<body> + <div class="container py-4"> + <header class="page-header"> + <p class="text-uppercase text-muted mb-2">Future Warfare 2035+ Playbook</p> + <h1 class="display-5 fw-bold">The Future of Warfare Technology</h1> + <p class="lead mb-0">Battlefields in the next 10–30 years will be defined by <strong>distributed sensing + edge AI + cheap autonomy</strong>, with <strong>spectrum & cyber control</strong> as strategic assets; lethality migrates from rifles to networked systems-of-systems.</p> + <p class="mt-3 mb-0">Physical lines (fiber, power) and trusted compute become prized targets and assets.</p> + <div class="print-note">Print view: collapse interactive sections for concise briefings.</div> + </header> + + <section class="mb-5"> + <h2 class="section-title"><i class="bi bi-diagram-3" aria-hidden="true"></i>Top Tech Lanes (Ranked)</h2> + <div class="row g-4" id="lane-grid"> + <div class="col-md-6 col-lg-4"> + <article class="info-card highlight" data-lane="autonomy" data-phase="near" data-impact="very-high"> + <div class="d-flex justify-content-between align-items-start mb-2"> + <h3 class="h5 mb-0">Autonomy & Edge AI</h3> + <span class="badge badge-impact impact-very-high">95% dominance</span> + </div> + <p class="mb-2">Sensor→shooter loops close in <200 ms with 2–20 W inference nodes running 0.5–5 TOPS quantized models; humans arbitrate ambiguous ROE cases only.</p> + <ul class="lane-details list-unstyled mb-0"> + <li><i class="bi bi-lightning-charge text-warning"></i> Edge inference budgets: 2–20 W, <50–200 ms latency.</li> + <li><i class="bi bi-diagram-3 text-info"></i> Kill-chain compression accelerates decision cycles.</li> + </ul> + </article> + </div> + <div class="col-md-6 col-lg-4"> + <article class="info-card" data-lane="swarms" data-phase="near" data-impact="very-high"> + <div class="d-flex justify-content-between align-items-start mb-2"> + <h3 class="h5 mb-0">Swarmed Loitering Munitions</h3> + <span class="badge badge-impact impact-very-high">90% adoption</span> + </div> + <p class="mb-2">Expendable drones at $200–$2k per sortie make attrition math favor swarms over manned sorties or exposed infantry.</p> + <ul class="lane-details list-unstyled mb-0"> + <li><i class="bi bi-currency-dollar text-success"></i> Unit cost ≤ $1k with ≥20% Pk.</li> + <li><i class="bi bi-broadcast text-info"></i> Tactics: saturation ISR, low-cost precision effects.</li> + </ul> + </article> + </div> + <div class="col-md-6 col-lg-4"> + <article class="info-card" data-lane="ew" data-phase="near" data-impact="very-high"> + <div class="d-flex justify-content-between align-items-start mb-2"> + <h3 class="h5 mb-0">Electronic Warfare & Spectrum</h3> + <span class="badge badge-impact impact-very-high">95% decisive</span> + </div> + <p class="mb-2">Jamming, spoofing, and sensing denial surge; GNSS-independent localization with 1–5 m drift for 30–120 s becomes must-have.</p> + <ul class="lane-details list-unstyled mb-0"> + <li><i class="bi bi-shield-shaded text-info"></i> Multimodal sensing (acoustic/EO/IR/RF/lidar).</li> + <li><i class="bi bi-crosshair text-warning"></i> Adversarial robustness a baseline requirement.</li> + </ul> + </article> + </div> + <div class="col-md-6 col-lg-4"> + <article class="info-card" data-lane="comms" data-phase="mid" data-impact="high"> + <div class="d-flex justify-content-between align-items-start mb-2"> + <h3 class="h5 mb-0">Resilient Comms Backbone</h3> + <span class="badge badge-impact impact-high">85% hybrid stack</span> + </div> + <p class="mb-2">Fiber, mmWave, FSO, and LEO/mesh integration deliver <100 ms targeting data; fiber cut/repair/armoring becomes tactical mission.</p> + <ul class="lane-details list-unstyled mb-0"> + <li><i class="bi bi-hdd-network text-info"></i> Tbps backhaul when uncontested.</li> + <li><i class="bi bi-tools text-warning"></i> OTDR detection + rapid reel repair teams.</li> + </ul> + </article> + </div> + <div class="col-md-6 col-lg-4"> + <article class="info-card" data-lane="cyber" data-phase="mid" data-impact="very-high"> + <div class="d-flex justify-content-between align-items-start mb-2"> + <h3 class="h5 mb-0">Cyber & Trusted Compute</h3> + <span class="badge badge-impact impact-very-high">95% mandatory</span> + </div> + <p class="mb-2">Autonomy trust hinges on TPM-class attestation, shot logs, and remote verification <1 s; supply-chain integrity becomes part of fires approval.</p> + <ul class="lane-details list-unstyled mb-0"> + <li><i class="bi bi-cpu text-info"></i> Hardware roots-of-trust + immutable telemetry.</li> + <li><i class="bi bi-cloud-check text-success"></i> Continuous posture validation.</li> + </ul> + </article> + </div> + <div class="col-md-6 col-lg-4"> + <article class="info-card" data-lane="directed-energy" data-phase="mid" data-impact="high"> + <div class="d-flex justify-content-between align-items-start mb-2"> + <h3 class="h5 mb-0">Directed Energy (DE)</h3> + <span class="badge badge-impact impact-high">70% tactical</span> + </div> + <p class="mb-2">10–100 kW lasers and microwaves defend fixed sites/vehicles, neutralizing small UAS at tens-hundreds of meters once thermal loads are solved.</p> + <ul class="lane-details list-unstyled mb-0"> + <li><i class="bi bi-bullseye text-warning"></i> Mobile platforms need 10–30 kW w/ cooling.</li> + <li><i class="bi bi-thermometer-half text-danger"></i> Thermal management is gating function.</li> + </ul> + </article> + </div> + <div class="col-md-6 col-lg-4"> + <article class="info-card" data-lane="logistics" data-phase="mid" data-impact="high"> + <div class="d-flex justify-content-between align-items-start mb-2"> + <h3 class="h5 mb-0">Logistics Automation</h3> + <span class="badge badge-impact impact-high">80% adoption</span> + </div> + <p class="mb-2">UGV resupply + additive manufacturing extend small-unit endurance 2–5×, enabling distributed, low-signature operations.</p> + <ul class="lane-details list-unstyled mb-0"> + <li><i class="bi bi-truck text-info"></i> Autonomous convoys and cached payloads.</li> + <li><i class="bi bi-printer text-success"></i> Forward AM for spares + mission kits.</li> + </ul> + </article> + </div> + <div class="col-md-6 col-lg-4"> + <article class="info-card" data-lane="space" data-phase="long" data-impact="medium"> + <div class="d-flex justify-content-between align-items-start mb-2"> + <h3 class="h5 mb-0">Space & Counter-Space</h3> + <span class="badge badge-impact impact-medium">75% shaping</span> + </div> + <p class="mb-2">Proliferated LEO ISR, resilient PNT, and counter-space (kinetic & non-kinetic) shape strategic options; on-orbit repair & redundancy critical.</p> + <ul class="lane-details list-unstyled mb-0"> + <li><i class="bi bi-stars text-warning"></i> LEO constellations for comms & sensing.</li> + <li><i class="bi bi-slash-circle text-danger"></i> Offensive counter-space introduces escalation ladders.</li> + </ul> + </article> + </div> + <div class="col-md-6 col-lg-4"> + <article class="info-card" data-lane="biotech" data-phase="long" data-impact="medium"> + <div class="d-flex justify-content-between align-items-start mb-2"> + <h3 class="h5 mb-0">Biotech & Non-Kinetic</h3> + <span class="badge badge-impact impact-medium">Niche impact</span> + </div> + <p class="mb-2">High legal/strategic hurdles keep biotech secondary for conventional war, but CBRN detection, synthetic bio threats, and medical enhancements gain niche relevance.</p> + <ul class="lane-details list-unstyled mb-0"> + <li><i class="bi bi-eyedropper text-info"></i> Advanced diagnostics & counter-agents.</li> + <li><i class="bi bi-shield-plus text-success"></i> Warfighter care & resilience tech.</li> + </ul> + </article> + </div> + </div> + </section> + + <section class="mb-5"> + <div class="row g-4"> + <div class="col-lg-7"> + <h2 class="section-title"><i class="bi bi-intersect" aria-hidden="true"></i>Systems View</h2> + <article class="info-card"> + <ul class="mb-0 list-unstyled"> + <li><i class="bi bi-eye icon-accent me-2" aria-hidden="true"></i><strong>Sensing layer</strong>: ubiquitous ISR (drones, acoustics, passive RF, space assets) floods the stack with data.</li> + <li><i class="bi bi-cpu icon-accent me-2" aria-hidden="true"></i><strong>Edge layer</strong>: quantized AI nodes fuse multimodal inputs, delivering <200 ms high-confidence target cues.</li> + <li><i class="bi bi-bullseye icon-accent me-2" aria-hidden="true"></i><strong>Effectors</strong>: swarms, loitering munitions, remote guns, and precision fires share aimpoints over low-latency mesh; humans supervise high-risk engagements.</li> + <li><i class="bi bi-shield-lock icon-accent me-2" aria-hidden="true"></i><strong>Resilience layer</strong>: fiber/FSO/mmWave backbone with RF fallback + LEO routing, OTDR tamper detection, rapid recovery kits.</li> + <li><i class="bi bi-lightning-charge icon-accent me-2" aria-hidden="true"></i><strong>Defeat layer</strong>: EW + cyber + kinetic + DE + deception, with counter-autonomy treated as co-equal mission set.</li> + </ul> + </article> + </div> + <div class="col-lg-5"> + <h2 class="section-title"><i class="bi bi-funnel" aria-hidden="true"></i>Interactive Filter</h2> + <div class="interactive-panel" id="lane-filter"> + <p class="mb-2 text-muted">Toggle to surface lanes by timeline impact.</p> + <div class="row g-2"> + <div class="col-6"> + <div class="form-check"> + <input class="form-check-input" type="checkbox" value="near" id="filterNear" checked /> + <label class="form-check-label" for="filterNear">1–3 yr lanes</label> + </div> + </div> + <div class="col-6"> + <div class="form-check"> + <input class="form-check-input" type="checkbox" value="mid" id="filterMid" checked /> + <label class="form-check-label" for="filterMid">3–8 yr lanes</label> + </div> + </div> + <div class="col-6"> + <div class="form-check"> + <input class="form-check-input" type="checkbox" value="long" id="filterLong" checked /> + <label class="form-check-label" for="filterLong">8+ yr lanes</label> + </div> + </div> + <div class="col-6"> + <div class="form-check"> + <input class="form-check-input" type="checkbox" value="very-high" id="filterVeryHigh" checked /> + <label class="form-check-label" for="filterVeryHigh">95%+ impact</label> + </div> + </div> + </div> + <small class="text-muted d-block mt-3">Filters persist via localStorage for recurring briefings.</small> + </div> + </div> + </div> + </section> + + <section class="mb-5"> + <h2 class="section-title"><i class="bi bi-graph-up-arrow" aria-hidden="true"></i>Critical Thresholds & Numbers</h2> + <div class="table-responsive"> + <table class="table table-dark table-striped data-table align-middle"> + <thead> + <tr> + <th>Metric</th> + <th>Trigger Point</th> + <th>Implication</th> + </tr> + </thead> + <tbody> + <tr> + <td><i class="bi bi-cpu icon-accent me-2" aria-hidden="true"></i>Edge inferencing cost</td> + <td>0.5–2 W at 1–5 TOPS</td> + <td>24–72 h battery endurance enables mass deployment of autonomous nodes.</td> + </tr> + <tr> + <td><i class="bi bi-airplane-engines icon-accent me-2" aria-hidden="true"></i>Drone cost-to-effect</td> + <td>≤ $1k per unit & ≥20% success</td> + <td>Swarms beat manned sorties + reduce political attrition risk.</td> + </tr> + <tr> + <td><i class="bi bi-battery-charging icon-accent me-2" aria-hidden="true"></i>Battery energy density</td> + <td>500–750 Wh/kg</td> + <td>Long-endurance loiterers become standard; otherwise tether/hybrid remains.</td> + </tr> + <tr> + <td><i class="bi bi-layers-half icon-accent me-2" aria-hidden="true"></i>Directed energy readiness</td> + <td>10–30 kW mobile, 10–100 kW fixed</td> + <td>Wide-field counter-UAS adoption once cooling solved.</td> + </tr> + <tr> + <td><i class="bi bi-pin-map icon-accent me-2" aria-hidden="true"></i>GNSS denial resilience</td> + <td>Visual/IMU SLAM drift <1–3 m over 60 s</td> + <td>PNT denial manageable; autonomy loses dependency on GNSS.</td> + </tr> + </tbody> + </table> + </div> + </section> + + <section class="mb-5"> + <h2 class="section-title"><i class="bi bi-exclamation-octagon" aria-hidden="true"></i>Failure Modes & Countermeasures</h2> + <div class="row g-4"> + <div class="col-md-6"> + <article class="info-card failure"> + <h3 class="h5"><i class="bi bi-emoji-dizzy icon-warn me-2" aria-hidden="true"></i>Spoofing & Adversarial AI</h3> + <p class="mb-1">Adversary injects adversarial examples, spoofed sensors, and decoys.</p> + <p class="mb-0"><strong>Mitigate</strong>: multimodal fusion, adversarial training, strict sensor firmware attestation.</p> + </article> + </div> + <div class="col-md-6"> + <article class="info-card failure"> + <h3 class="h5"><i class="bi bi-broadcast-pin icon-warn me-2" aria-hidden="true"></i>EW & Comms Denial</h3> + <p class="mb-1">Mesh collapse forces units into isolation.</p> + <p class="mb-0"><strong>Mitigate</strong>: pre-planned mission timers, local autonomy for 10–30 min, fallback HF/LEO relays.</p> + </article> + </div> + <div class="col-md-6"> + <article class="info-card failure"> + <h3 class="h5"><i class="bi bi-box-seam icon-warn me-2" aria-hidden="true"></i>Supply Chain Compromise</h3> + <p class="mb-1">Hardware trojans or tampered firmware corrupt ROE.</p> + <p class="mb-0"><strong>Mitigate</strong>: hardware roots-of-trust, in-field attestation, forensic shot logs + immutable audit trails.</p> + </article> + </div> + <div class="col-md-6"> + <article class="info-card failure"> + <h3 class="h5"><i class="bi bi-lightning-charge-fill icon-warn me-2" aria-hidden="true"></i>Physical Attacks on Lines</h3> + <p class="mb-1">Fiber/power sabotage severs kill-chains.</p> + <p class="mb-0"><strong>Mitigate</strong>: redundancy, OTDR detection, armored/buried spans, mobile reels, airborne FSO relays.</p> + </article> + </div> + </div> + </section> + + <section class="mb-5"> + <h2 class="section-title"><i class="bi bi-diagram-3-fill" aria-hidden="true"></i>Operational & Doctrinal Shifts</h2> + <div class="row g-4"> + <div class="col-md-4"> + <article class="info-card"> + <h3 class="h5"><i class="bi bi-people icon-accent me-2" aria-hidden="true"></i>Human Role</h3> + <p>Humans become supervisors/systems integrators vs direct shooters; skills pivot to AI supervision, EW, cyber, logistics ops.</p> + </article> + </div> + <div class="col-md-4"> + <article class="info-card"> + <h3 class="h5"><i class="bi bi-clipboard-check icon-accent me-2" aria-hidden="true"></i>Engagement Doctrine</h3> + <p>Confidence-based ROE with auditable engagement logs replaces purely person-centric authorization.</p> + </article> + </div> + <div class="col-md-4"> + <article class="info-card"> + <h3 class="h5"><i class="bi bi-bezier icon-accent me-2" aria-hidden="true"></i>Force Posture</h3> + <p>Layered autonomous ISR/ADS enables distributed, smaller units with persistent presence.</p> + </article> + </div> + </div> + </section> + + <section> + <h2 class="section-title"><i class="bi bi-hourglass-split" aria-hidden="true"></i>Likely Timelines</h2> + <div class="timeline"> + <div class="info-card phase" data-phase="near"> + <h3 class="h5"><i class="bi bi-lightning-charge icon-accent me-2" aria-hidden="true"></i>1–3 Years</h3> + <p>Cheap ISR proliferation, first swarm playbooks, localized EW battles already underway.</p> + </div> + <div class="info-card phase" data-phase="mid"> + <h3 class="h5"><i class="bi bi-shield-check icon-accent me-2" aria-hidden="true"></i>3–8 Years</h3> + <p>Edge AI maturity, resilient mesh protocols, fielded DE point defenses, repeatable counter-UAS TTPs.</p> + </div> + <div class="info-card phase" data-phase="mid"> + <h3 class="h5"><i class="bi bi-diagram-3 icon-accent me-2" aria-hidden="true"></i>8–15 Years</h3> + <p>Doctrinal shifts, standardized trusted compute + attestation, logistics automation mainstream.</p> + </div> + <div class="info-card phase" data-phase="long"> + <h3 class="h5"><i class="bi bi-stars icon-accent me-2" aria-hidden="true"></i>15–30 Years</h3> + <p>Networked autonomous warfare dominates high-tech theaters; space & cyber are aggressively contested, direct rifle engagements rare.</p> + </div> + </div> + </section> + </div> + + <script> + (function () { + const filters = { + phase: new Set(["near", "mid", "long"]), + showVeryHigh: true + }; + const storageKey = "future-warfare-lane-filters"; + const saved = localStorage.getItem(storageKey); + if (saved) { + try { + const parsed = JSON.parse(saved); + filters.phase = new Set(parsed.phase || filters.phase); + filters.showVeryHigh = parsed.showVeryHigh !== undefined ? parsed.showVeryHigh : filters.showVeryHigh; + } catch (e) { + console.warn("Filter restore failed", e); + } + } + document.getElementById("filterNear").checked = filters.phase.has("near"); + document.getElementById("filterMid").checked = filters.phase.has("mid"); + document.getElementById("filterLong").checked = filters.phase.has("long"); + document.getElementById("filterVeryHigh").checked = filters.showVeryHigh; + + const cards = document.querySelectorAll("#lane-grid article"); + function applyFilters() { + cards.forEach(card => { + const phase = card.dataset.phase; + const isVeryHigh = card.dataset.impact === "very-high"; + const visible = filters.phase.has(phase) && (filters.showVeryHigh || !isVeryHigh); + card.style.display = visible ? "" : "none"; + }); + localStorage.setItem(storageKey, JSON.stringify({ + phase: Array.from(filters.phase), + showVeryHigh: filters.showVeryHigh + })); + } + document.getElementById("filterNear").addEventListener("change", (e) => { toggle(filters.phase, "near", e.target.checked); applyFilters(); }); + document.getElementById("filterMid").addEventListener("change", (e) => { toggle(filters.phase, "mid", e.target.checked); applyFilters(); }); + document.getElementById("filterLong").addEventListener("change", (e) => { toggle(filters.phase, "long", e.target.checked); applyFilters(); }); + document.getElementById("filterVeryHigh").addEventListener("change", (e) => { + filters.showVeryHigh = e.target.checked; + applyFilters(); + }); + function toggle(set, value, enabled) { + if (enabled) { set.add(value); } else { set.delete(value); } + if (set.size === 0) { set.add(value); } + } + applyFilters(); + })(); + </script> + <script crossorigin="anonymous" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> +</body> +</html>