offline.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"/>
<title>Offline — Vector Hoops</title>
<meta name="description" content="You are offline. Vector Hoops needs a connection to load its data."/>
<meta name="robots" content="noindex"/>
<meta name="color-scheme" content="light dark"/>
<meta name="theme-color" content="#FCFBF7" media="(prefers-color-scheme: light)"/><meta name="theme-color" content="#0F1114" media="(prefers-color-scheme: dark)"/>
<link rel="icon" href="/assets/favicon.svg" type="image/svg+xml"/>
<link rel="manifest" href="/manifest.json"/>
<style>
/* Self-contained on purpose: this page must render with nothing else cached. */
:root{ color-scheme:dark; --bg:#07090C; --surface:#0D1015; --line:#1D232C; --line-2:#2A323D; --fg:#ECEEF1; --fg-2:#A7B0BC; --fg-3:#7F8995; --accent:#FF7A33; --on-accent:#0A0B0D; --ease:cubic-bezier(.2,.7,.1,1); }
@media (prefers-color-scheme: light){ :root{ color-scheme:light; --bg:#F3F1EC; --surface:#FFFFFF; --line:#DCD8CF; --line-2:#C8C3B8; --fg:#0E1116; --fg-2:#454C57; --fg-3:#5B6370; --accent:#B03A0A; --on-accent:#FFFFFF; } }
*{ box-sizing:border-box; }
html,body{ margin:0; min-height:100%; background:var(--bg); color:var(--fg); font:15px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing:antialiased; }
body{ min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:32px 16px calc(32px + env(safe-area-inset-bottom)); }
::selection{ background:var(--accent); color:var(--on-accent); }
main{ width:100%; max-width:560px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:20px; }
svg{ width:56px; height:56px; color:var(--fg-3); }
.eyebrow{ font-size:11px; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--fg-3); display:inline-flex; gap:14px; align-items:center; }
.eyebrow::before,.eyebrow::after{ content:""; width:28px; height:1px; background:var(--line-2); }
h1{ margin:0; font-size:clamp(34px,7vw,52px); line-height:1.02; letter-spacing:-.03em; font-weight:700; text-wrap:balance; }
p{ margin:0; color:var(--fg-2); max-width:46ch; text-wrap:pretty; }
.actions{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:8px; }
.btn{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 20px; border-radius:4px; border:1px solid var(--line-2); background:transparent; color:var(--fg); font-family:inherit; font-size:11.5px; font-weight:700; line-height:1; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; cursor:pointer; transition:border-color 140ms var(--ease), background 140ms var(--ease); }
.btn:hover{ border-color:var(--fg-3); }
.btn-primary{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
ul{ list-style:none; margin:12px 0 0; padding:16px 0 0; border-top:1px solid var(--line); width:100%; display:flex; justify-content:center; flex-wrap:wrap; gap:8px 24px; }
ul a{ font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-2); text-decoration:none; }
ul a:hover{ color:var(--fg); }
.note{ font-size:13px; color:var(--fg-3); }
</style>
</head>
<body>
<main>
  <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10.25" fill="none" stroke="currentColor" stroke-width="1.2"/><line x1="1.75" y1="12" x2="22.25" y2="12" stroke="currentColor" stroke-width="1.2"/><circle cx="12" cy="12" r="3.25" fill="none" stroke="currentColor" stroke-width="1.2"/></svg>
  <div class="eyebrow">Offline</div>
  <h1>You’re off the network.</h1>
  <p>Vector Hoops loads its seasons and model files live, so this page can’t be shown without a connection. Pages you’ve already opened may still work from this device’s cache.</p>
  <div class="actions">
    <button class="btn btn-primary" type="button" id="retry">Try again</button>
    <a class="btn" href="/">Go to the atlas</a>
  </div>
  <p class="note" id="status" aria-live="polite"></p>
  <p class="note">Nearest seasons by cosine similarity in the 64-dimensional MTNN v5 embedding.</p>
  <nav aria-label="Offline navigation"><ul aria-label="Pages that may be cached"><li><a href="/play">Play</a></li><li><a href="/players">Players</a></li><li><a href="/methods">Methods</a></li></ul></nav>
</main>
<script src="/assets/inline-offline.js?v=61689e91"></script>
</body>
</html>