nordisk/nornir

crates/nornir-viz-web/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  <title>nornir · viz — web</title>
  <meta name="description" content="nornir's viz as a wasm website: the wasm-capable facett Facets nornir embeds, rendered in the browser." />
  <style>
    html, body { margin: 0; height: 100%; overflow: hidden; background: #0b0d10; }
    canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
    #loading {
      position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
      color: #9aa4b2; font: 500 15px/1.4 system-ui, sans-serif; letter-spacing: .02em;
    }
    #loading .dot { animation: blink 1s infinite both; }
    @keyframes blink { 0%, 100% { opacity: .25 } 50% { opacity: 1 } }
  </style>
</head>
<body>
  <div id="loading">loading nornir viz<span class="dot">…</span></div>
  <canvas id="nornir_viz"></canvas>
  <script type="module">
    // With `--target web`, wasm-bindgen exports are module members (not globals), so
    // lift the browser-readable state hook onto `window` for a headless drive / the
    // console: `window.__nornir_viz_state()` → the whole state_json.
    import init, { __nornir_viz_state } from './nornir-viz-web.js';
    window.__nornir_viz_state = __nornir_viz_state;
    init().then(() => {
      const el = document.getElementById('loading');
      if (el) el.remove();
    }).catch((e) => {
      console.error('nornir-viz-web failed to start:', e);
    });
  </script>
</body>
</html>