| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| <title>WHITE KNUCKLE — tether recon</title> |
| <style> |
| html, body { |
| margin: 0; padding: 0; width: 100%; height: 100%; |
| background: #000; overflow: hidden; |
| font-family: "Courier New", ui-monospace, monospace; |
| -webkit-user-select: none; user-select: none; |
| } |
| #app { position: fixed; inset: 0; } |
| canvas { display: block; } |
| |
| #overlay { |
| position: fixed; inset: 0; z-index: 10; |
| display: flex; flex-direction: column; align-items: center; justify-content: center; |
| background: rgba(0,0,0,0.82); |
| color: #e8e8e8; text-align: center; cursor: pointer; |
| transition: opacity 240ms ease; |
| } |
| #overlay.hidden { opacity: 0; pointer-events: none; } |
| #overlay h1 { |
| font-size: clamp(28px, 6vh, 54px); letter-spacing: 0.34em; |
| margin: 0 0 6px 0; font-weight: 700; color: #f2f2f2; |
| text-shadow: 0 0 18px rgba(255,255,255,0.25); |
| } |
| #overlay h2 { |
| font-size: clamp(11px, 1.8vh, 15px); letter-spacing: 0.5em; |
| margin: 0 0 34px 0; font-weight: 400; color: #9a9a9a; |
| } |
| #overlay .glyphs { font-size: clamp(18px,3vh,26px); letter-spacing: 1.2em; text-indent: 1.2em; color:#cfcfcf; margin-bottom: 30px; } |
| #overlay .controls { |
| font-size: clamp(11px, 1.7vh, 14px); line-height: 2.1; color: #b8b8b8; letter-spacing: 0.12em; |
| } |
| #overlay .controls b { color: #fff; font-weight: 700; } |
| #overlay .hint { margin-top: 34px; font-size: clamp(10px,1.5vh,12px); color:#777; letter-spacing: 0.28em; animation: pulse 1.6s ease-in-out infinite; } |
| @keyframes pulse { 50% { opacity: 0.35; } } |
| #pauseTag { |
| position: fixed; left: 50%; bottom: 4.5%; transform: translateX(-50%); |
| color: rgba(255,255,255,0.55); font-size: 11px; letter-spacing: 0.3em; |
| z-index: 5; display: none; pointer-events: none; |
| } |
| </style> |
| <script type="module" crossorigin src="./assets/index-dzcLn9RP.js"></script> |
| </head> |
| <body> |
| <div id="app"></div> |
| <div id="overlay"> |
| <h1>WHITE KNUCKLE</h1> |
| <h2>TETHER RECON // DAY ONE</h2> |
| <div class="glyphs">╱ ○ ✕</div> |
| <div class="controls"> |
| <div><b>MOUSE</b> look</div> |
| <div><b>W A S D</b> drift · <b>SPACE</b> rise · <b>SHIFT</b> sink</div> |
| <div><b>LMB</b> fire tether · <b>RMB / Q</b> release</div> |
| <div><b>M</b> mute · <b>ESC</b> pause</div> |
| </div> |
| <div class="hint">CLICK TO DROP IN</div> |
| </div> |
| <div id="pauseTag">PAUSED — CLICK TO RESUME</div> |
| </body> |
| </html> |
|
|
