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>