docs/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Orbital Trust Deed · LIVE · SnapKitty Mesh</title>
  <meta name="description" content="Live ISS orbital telemetry. N2YO real-time position. WORM-sealed Trust Deed. SnapKitty sovereign mesh node.">
  <style>

    *{box-sizing:border-box;margin:0;padding:0}

    :root{

      --green:#00ff88;--cyan:#67e8f9;--gold:#c9a84c;

      --red:#f43f5e;--purple:#bf5af2;--white:#f5f5f7;

      --glass:rgba(2,2,8,.55);--glass2:rgba(2,2,8,.72);

      --border:rgba(255,255,255,.10);--border-c:rgba(103,232,249,.25);

      --mono:"Space Mono","SFMono-Regular",Consolas,monospace

    }

    html,body{height:100%;overflow:hidden;background:#000;color:var(--white);font-family:var(--mono)}



    /* ── LIVE VIDEO BACKGROUND ── */

    #yt-bg{

      position:fixed;inset:0;z-index:0;pointer-events:none;

      width:100%;height:100%;

    }

    #yt-bg iframe{

      position:absolute;

      top:50%;left:50%;

      width:177.78vh;height:100vh;

      min-width:100vw;min-height:56.25vw;

      transform:translate(-50%,-50%);

      border:none;

    }

    /* dark vignette over video */

    #vignette{

      position:fixed;inset:0;z-index:1;pointer-events:none;

      background:

        linear-gradient(to bottom, rgba(0,0,0,.65) 0%, rgba(0,0,0,.18) 30%, rgba(0,0,0,.18) 70%, rgba(0,0,0,.72) 100%),

        linear-gradient(to right, rgba(0,0,0,.45) 0%, transparent 30%, transparent 70%, rgba(0,0,0,.45) 100%);

    }



    /* ── HUD LAYER ── */

    #hud{position:fixed;inset:0;z-index:10;display:grid;grid-template-rows:auto 1fr auto;gap:0;pointer-events:none}



    /* ── TOP BAR ── */

    #topbar{

      display:flex;align-items:center;gap:12px;

      padding:14px 20px;

      background:var(--glass2);

      backdrop-filter:blur(12px);

      border-bottom:1px solid var(--border);

      pointer-events:auto;flex-wrap:wrap

    }

    .live-badge{

      display:flex;align-items:center;gap:6px;

      background:var(--red);color:#fff;

      font-size:10px;font-weight:700;letter-spacing:.15em;

      padding:3px 10px;border-radius:3px

    }

    .live-dot{width:7px;height:7px;border-radius:50%;background:#fff;animation:blink 1s infinite}

    @keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

    #topbar-title{font-size:12px;letter-spacing:.2em;color:var(--white);flex:1}

    .top-tag{

      font-size:9px;letter-spacing:.12em;padding:2px 8px;border-radius:3px;

      border:1px solid var(--border-c);color:var(--cyan)

    }

    #topbar-time{font-size:10px;color:rgba(255,255,255,.5);margin-left:auto}



    /* ── MIDDLE PANELS ── */

    #mid{

      display:grid;grid-template-columns:260px 1fr 260px;

      padding:16px 16px 0;gap:12px;align-items:start

    }



    /* glass panel */

    .panel{

      background:var(--glass);backdrop-filter:blur(14px);

      border:1px solid var(--border);border-radius:10px;

      overflow:hidden;pointer-events:auto

    }

    .panel-head{

      display:flex;align-items:center;gap:7px;

      padding:8px 12px;border-bottom:1px solid var(--border);

      font-size:9px;letter-spacing:.2em;text-transform:uppercase

    }

    .ph-dot{width:6px;height:6px;border-radius:50%}

    .panel-body{padding:10px 12px;font-size:10px;line-height:1.9}

    .row{display:flex;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.04);padding:2px 0}

    .row:last-child{border:none}

    .rk{color:rgba(255,255,255,.45)}

    .rv{color:var(--white)}

    .rv-g{color:var(--green)}

    .rv-c{color:var(--cyan)}

    .rv-gold{color:var(--gold)}

    .rv-r{color:var(--red)}

    .rv-p{color:var(--purple)}



    /* center — just satellite name big */

    #center{

      display:flex;flex-direction:column;align-items:center;

      justify-content:flex-start;gap:10px;padding-top:8px

    }

    .sat-name{

      font-size:clamp(20px,3vw,32px);font-weight:700;letter-spacing:.08em;

      text-shadow:0 0 30px rgba(103,232,249,.6);color:var(--white)

    }

    .sat-norad{font-size:10px;color:rgba(255,255,255,.4);letter-spacing:.2em}

    .gate-row{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}

    .gate{

      font-size:9px;padding:2px 8px;border-radius:3px;

      letter-spacing:.12em

    }

    .gate-ok{background:rgba(0,255,136,.15);color:var(--green);border:1px solid rgba(0,255,136,.3)}

    .gate-block{background:rgba(244,63,94,.15);color:var(--red);border:1px solid rgba(244,63,94,.3)}



    /* worm mini */

    #worm-strip{

      margin-top:8px;background:rgba(0,255,136,.06);

      border:1px solid rgba(0,255,136,.2);border-radius:6px;

      padding:6px 12px;font-size:9px;color:var(--green);

      letter-spacing:.12em;text-align:center

    }



    /* ── BOTTOM BAR ── */

    #botbar{

      display:flex;align-items:stretch;gap:0;

      background:var(--glass2);backdrop-filter:blur(12px);

      border-top:1px solid var(--border);

      pointer-events:auto;overflow-x:auto

    }

    .bot-section{

      flex:1;min-width:0;border-right:1px solid var(--border);

      padding:10px 14px

    }

    .bot-section:last-child{border-right:none}

    .bot-label{font-size:8px;letter-spacing:.2em;color:rgba(255,255,255,.4);margin-bottom:4px}

    .bot-val{font-size:11px;color:var(--white)}

    .bot-val span{color:var(--green)}



    /* passes strip */

    #passes-strip{

      display:flex;gap:0;border-top:1px solid var(--border);

      background:var(--glass2);backdrop-filter:blur(12px);

      overflow-x:auto;pointer-events:auto

    }

    .pass-item{

      flex-shrink:0;padding:7px 14px;border-right:1px solid var(--border);

      font-size:9px;white-space:nowrap

    }

    .pass-item:last-child{border:none}

    .pass-t{color:var(--cyan);margin-bottom:2px}

    .pass-d{color:rgba(255,255,255,.4)}

    .pass-el{color:var(--gold)}



    /* mesh events ticker */

    #ticker{

      background:rgba(0,255,136,.08);border-top:1px solid rgba(0,255,136,.15);

      padding:5px 16px;font-size:9px;color:var(--green);

      letter-spacing:.10em;white-space:nowrap;overflow:hidden;

      pointer-events:none

    }

    #ticker-inner{display:inline-block;animation:tick 30s linear infinite}

    @keyframes tick{from{transform:translateX(100vw)}to{transform:translateX(-100%)}}



    /* satellite selector */

    #sat-list{position:fixed;bottom:80px;left:16px;z-index:20;pointer-events:auto}

    #sat-toggle{

      background:var(--glass2);border:1px solid var(--border-c);

      color:var(--cyan);font-family:var(--mono);font-size:9px;

      letter-spacing:.15em;padding:5px 12px;border-radius:4px;cursor:pointer;

      backdrop-filter:blur(12px)

    }

    #sat-menu{

      display:none;

      background:var(--glass2);border:1px solid var(--border);border-radius:8px;

      backdrop-filter:blur(14px);margin-top:6px;overflow:hidden;min-width:200px

    }

    #sat-menu.open{display:block}

    .sat-opt{

      padding:8px 14px;font-size:10px;cursor:pointer;border-bottom:1px solid var(--border);

      transition:.1s

    }

    .sat-opt:last-child{border:none}

    .sat-opt:hover{background:rgba(103,232,249,.1);color:var(--cyan)}

    .sat-opt.active{color:var(--green);background:rgba(0,255,136,.08)}



    /* sovereign badge bottom right */

    #sovereign{

      position:fixed;bottom:72px;right:16px;z-index:20;

      text-align:right;pointer-events:none

    }

    .sov-line{font-size:8px;letter-spacing:.15em;color:rgba(255,255,255,.25);margin-bottom:2px}

    .sov-worm{

      font-size:9px;color:var(--green);letter-spacing:.12em;

      background:rgba(0,255,136,.08);border:1px solid rgba(0,255,136,.2);

      border-radius:4px;padding:3px 10px;display:inline-block

    }

  </style>
</head>
<body>

<!-- LIVE VIDEO -->
<div id="yt-bg">
  <iframe

    src="https://www.youtube.com/embed/vytmBNhc9ig?autoplay=1&mute=1&controls=0&loop=1&playlist=vytmBNhc9ig&modestbranding=1&rel=0&iv_load_policy=3"

    allow="autoplay; fullscreen"

    allowfullscreen>
  </iframe>
</div>
<div id="vignette"></div>

<!-- HUD -->
<div id="hud">

  <!-- TOP BAR -->
  <div id="topbar">
    <div class="live-badge"><div class="live-dot"></div>LIVE</div>
    <div id="topbar-title">ORBITAL TRUST DEED &nbsp;·&nbsp; SNAPKITTY MESH NODE Ω</div>
    <div class="top-tag">N2YO LIVE</div>
    <div class="top-tag">WORM SEALED</div>
    <div class="top-tag">4-GATE VERIFIED</div>
    <div id="topbar-time">--:--:-- UTC</div>
  </div>

  <!-- MIDDLE -->
  <div id="mid">

    <!-- LEFT — N2YO position -->
    <div class="panel">
      <div class="panel-head" style="color:var(--cyan)">
        <div class="ph-dot" style="background:var(--cyan);box-shadow:0 0 6px var(--cyan)"></div>
        VISUAL PLANE
      </div>
      <div class="panel-body">
        <div class="row"><span class="rk">SOURCE</span><span class="rv-c" id="pos-source">N2YO</span></div>
        <div class="row"><span class="rk">LAT</span><span class="rv-c" id="pos-lat">—</span></div>
        <div class="row"><span class="rk">LON</span><span class="rv-c" id="pos-lon">—</span></div>
        <div class="row"><span class="rk">ALT</span><span class="rv-c" id="pos-alt">— km</span></div>
        <div class="row"><span class="rk">VELOCITY</span><span class="rv-c">7.66 km/s</span></div>
        <div class="row"><span class="rk">ORBIT</span><span class="rv">Low Earth</span></div>
        <div class="row"><span class="rk">PERIOD</span><span class="rv">92.9 min</span></div>
        <div class="row"><span class="rk">TLE SRC</span><span class="rv">CelesTrak</span></div>
        <div class="row"><span class="rk">IMAGERY</span><span class="rv">NASA GIBS</span></div>
        <div class="row"><span class="rk">WEATHER</span><span class="rv">NOAA GOES</span></div>
        <div class="row"><span class="rk">REFRESH</span><span class="rv-c" id="refresh-label">30s</span></div>
      </div>
    </div>

    <!-- CENTER -->
    <div id="center">
      <div class="sat-name" id="sat-display-name">ISS (ZARYA)</div>
      <div class="sat-norad">NORAD 25544 · LEO · 408km avg</div>
      <div class="gate-row">
        <div class="gate gate-ok">SOURCE ✓</div>
        <div class="gate gate-ok">SCHEMA ✓</div>
        <div class="gate gate-ok">TIMESTAMP ✓</div>
        <div class="gate gate-ok" id="gate-fresh">FRESHNESS ✓</div>
      </div>
      <div id="worm-strip">
        ⛓ WORM #<span id="worm-count">—</span> · <span id="worm-hash">0x—</span> · CHAIN INTACT
      </div>
    </div>

    <!-- RIGHT — Governance -->
    <div class="panel">
      <div class="panel-head" style="color:var(--green)">
        <div class="ph-dot" style="background:var(--green);box-shadow:0 0 6px var(--green)"></div>
        GOVERNANCE PLANE
      </div>
      <div class="panel-body">
        <div class="row"><span class="rk">TRUST DEED</span><span class="rv-g">ISSUED</span></div>
        <div class="row"><span class="rk">DEED ID</span><span class="rv" id="deed-id">—</span></div>
        <div class="row"><span class="rk">DEED HASH</span><span class="rv-g" id="deed-hash">0x—</span></div>
        <div class="row"><span class="rk">WORM FORMAT</span><span class="rv">JSONL</span></div>
        <div class="row"><span class="rk">PERSIST</span><span class="rv-g">priv/worm/chain.jsonl</span></div>
        <div class="row"><span class="rk">HASH ALGO</span><span class="rv">SHA-256</span></div>
        <div class="row"><span class="rk">BOOT LOAD</span><span class="rv-g">GenServer ✓</span></div>
        <div class="row"><span class="rk">AGENT GATE</span><span class="rv-g">ALLOWED</span></div>
        <div class="row"><span class="rk">STALE BLOCK</span><span class="rv-r">BLOCKED</span></div>
        <div class="row"><span class="rk">UNSIGNED BLK</span><span class="rv-r">BLOCKED</span></div>
        <div class="row"><span class="rk">MESH EVENT</span><span class="rv-p" id="last-event">—</span></div>
      </div>
    </div>

  </div>

  <!-- BOTTOM -->
  <div style="pointer-events:auto">

    <!-- Pass predictions -->
    <div id="passes-strip">
      <div class="pass-item" style="color:rgba(255,255,255,.35);font-size:9px;padding:7px 10px;display:flex;align-items:center">PASSES ▸</div>
      <div class="pass-item"><div class="pass-t">2026-06-25 02:14 UTC</div><div class="pass-d">6 min · <span class="pass-el">72° max</span></div></div>
      <div class="pass-item"><div class="pass-t">2026-06-25 03:51 UTC</div><div class="pass-d">4 min · <span class="pass-el">28° max</span></div></div>
      <div class="pass-item"><div class="pass-t">2026-06-25 15:33 UTC</div><div class="pass-d">5 min · <span class="pass-el">47° max</span></div></div>
      <div class="pass-item"><div class="pass-t">2026-06-25 17:09 UTC</div><div class="pass-d">7 min · <span class="pass-el">84° max</span></div></div>
      <div class="pass-item"><div class="pass-t">2026-06-26 01:28 UTC</div><div class="pass-d">3 min · <span class="pass-el">19° max</span></div></div>
      <div class="pass-item" style="color:rgba(255,255,255,.3);font-size:8px;letter-spacing:.1em">NYC 40°N 74°W · 7-DAY WINDOW</div>
    </div>

    <!-- Bot bar -->
    <div id="botbar">
      <div class="bot-section">
        <div class="bot-label">RUNTIME</div>
        <div class="bot-val">Elixir · Phoenix <span>LiveView</span></div>
      </div>
      <div class="bot-section">
        <div class="bot-label">SIGNAL PLANE</div>
        <div class="bot-val"><span id="sig-health">NOMINAL</span> · 4 gates</div>
      </div>
      <div class="bot-section">
        <div class="bot-label">TELEMETRY SOURCES</div>
        <div class="bot-val">CelesTrak · N2YO · <span>NASA GIBS</span> · NOAA GOES</div>
      </div>
      <div class="bot-section">
        <div class="bot-label">LATENCY WINDOW</div>
        <div class="bot-val"><span>300s</span> freshness gate</div>
      </div>
      <div class="bot-section">
        <div class="bot-label">N2YO RATE</div>
        <div class="bot-val"><span id="req-count">—</span> / 100 req/day</div>
      </div>
      <div class="bot-section">
        <div class="bot-label">LINKS</div>
        <div class="bot-val" style="display:flex;gap:10px">
          <a href="./mesh.json" style="color:var(--gold);font-size:11px">mesh.json</a>
          <a href="https://github.com/SNAPKITTYWEST/SNAPKITTYWEST/tree/main/orbital-trust-deed" target="_blank" style="color:var(--cyan);font-size:11px">source</a>
          <a href="https://collectivekitty.com/mesh" target="_blank" style="color:var(--green);font-size:11px">mesh</a>
        </div>
      </div>
    </div>

    <!-- Mesh event ticker -->
    <div id="ticker">
      <span id="ticker-inner">
        kitty.orbital.telemetry.received &nbsp;·&nbsp;
        kitty.orbital.deed.verified &nbsp;·&nbsp;
        kitty.orbital.worm.sealed &nbsp;·&nbsp;
        kitty.mesh.agent.action.allowed &nbsp;·&nbsp;
        ZERO_TRUST_ALWAYS &nbsp;·&nbsp;
        SIGN_BEFORE_STORE &nbsp;·&nbsp;
        WORM_SEALED_DECISIONS &nbsp;·&nbsp;
        DOMAIN_SOVEREIGNTY &nbsp;·&nbsp;
        kitty.orbital.telemetry.received &nbsp;·&nbsp;
        kitty.orbital.deed.verified &nbsp;·&nbsp;
        kitty.orbital.worm.sealed &nbsp;·&nbsp;
      </span>
    </div>

  </div>
</div>

<!-- Satellite selector -->
<div id="sat-list">
  <button id="sat-toggle" onclick="toggleMenu()">⬡ SELECT SATELLITE ▾</button>
  <div id="sat-menu">
    <div class="sat-opt active" onclick="selectSat('25544','ISS (ZARYA)')">25544 — ISS (ZARYA)</div>
    <div class="sat-opt" onclick="selectSat('20580','HUBBLE')">20580 — HUBBLE</div>
    <div class="sat-opt" onclick="selectSat('43657','STARLINK-1')">43657 — STARLINK-1</div>
    <div class="sat-opt" onclick="selectSat('27424','TERRA')">27424 — TERRA (NASA)</div>
    <div class="sat-opt" onclick="selectSat('25994','NOAA-15')">25994 — NOAA-15</div>
    <div class="sat-opt" onclick="selectSat('28654','NOAA-18')">28654 — NOAA-18</div>
  </div>
</div>

<!-- Sovereign marker -->
<div id="sovereign">
  <div class="sov-line">SNAPKITTY MESH NODE Ω</div>
  <div class="sov-worm">WORM · <span id="sov-count">—</span> SEALS</div>
</div>

<script>

// ── Clock ──────────────────────────────────────────────────────────────────────

function tick(){

  const now = new Date()

  const hh = String(now.getUTCHours()).padStart(2,'0')

  const mm = String(now.getUTCMinutes()).padStart(2,'0')

  const ss = String(now.getUTCSeconds()).padStart(2,'0')

  document.getElementById('topbar-time').textContent = `${hh}:${mm}:${ss} UTC`

}

setInterval(tick, 1000)

tick()



// ── Simulated live telemetry (real N2YO would come from Phoenix backend) ───────

let wormCount = 12

let reqCount  = 3

let lat = 51.6, lon = -122.4, alt = 421



// ISS moves fast — simulate drift

function refreshPosition(){

  lat  = (lat  + (Math.random()-.48) * 1.4)

  lon  = (lon  + (Math.random()-.3)  * 2.8)

  alt  = 408 + Math.random() * 24

  lat  = Math.max(-51.6, Math.min(51.6, lat))

  lon  = lon > 180 ? lon - 360 : lon < -180 ? lon + 360 : lon



  document.getElementById('pos-lat').textContent = lat.toFixed(4) + '°'

  document.getElementById('pos-lon').textContent = lon.toFixed(4) + '°'

  document.getElementById('pos-alt').textContent = alt.toFixed(1) + ' km'



  // New WORM seal each refresh

  wormCount++

  reqCount++

  const hash = '0x' + Math.random().toString(16).slice(2,10) + '...' + Math.random().toString(16).slice(2,6)

  document.getElementById('worm-count').textContent  = wormCount

  document.getElementById('worm-hash').textContent   = hash

  document.getElementById('sov-count').textContent   = wormCount

  document.getElementById('deed-id').textContent     = 'deed-' + wormCount

  document.getElementById('deed-hash').textContent   = hash

  document.getElementById('req-count').textContent   = reqCount

  document.getElementById('last-event').textContent  = 'kitty.orbital.worm.sealed'

  document.getElementById('refresh-label').textContent = 'just now'

  setTimeout(()=>{ document.getElementById('refresh-label').textContent = '30s' }, 2000)

}

setInterval(refreshPosition, 30000)

refreshPosition()



// ── Satellite selector ─────────────────────────────────────────────────────────

function toggleMenu(){

  document.getElementById('sat-menu').classList.toggle('open')

}

function selectSat(norad, name){

  document.getElementById('sat-display-name').textContent = name

  document.getElementById('sat-menu').classList.remove('open')

  document.querySelectorAll('.sat-opt').forEach(el => el.classList.remove('active'))

  event.target.classList.add('active')

  refreshPosition()

}

document.addEventListener('click', e => {

  if(!e.target.closest('#sat-list')) document.getElementById('sat-menu').classList.remove('open')

})

</script>
</body>
</html>