index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'sha256-6RkvnLhc+Dxs3DRMSy+Rs0us73msKNskVUvxIBn7gdw='; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; media-src 'self' blob:; font-src 'self'; connect-src 'self'; frame-src 'self'; object-src 'none'; base-uri 'self'; form-action 'none'">
<meta name="referrer" content="no-referrer">
<title>Torque: What is torque?</title>
<meta name="description" content="What is torque? An interactive 3D explainer from Glassbox. Free and open source.">
<meta name="theme-color" content="#07080c">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%2307080c'/%3E%3Ccircle cx='32' cy='32' r='14' fill='%237aa2ff'/%3E%3C/svg%3E">
<link rel="stylesheet" href="fonts/fonts.css">
<link rel="stylesheet" href="css/app.css">
<script type="importmap">
{
  "imports": {
    "three": "./vendor/three/three.module.min.js",
    "three/addons/": "./vendor/three/addons/"
  }
}
</script>
</head>
<body style="--c:#7aa2ff">
<header class="top">
  <a class="home" href="/" title="Glassbox: every box, and today's new one" aria-label="Back to Glassbox home"><svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path d="M15 5l-7 7 7 7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg><span>Glassbox</span></a>
  <a class="brand" href="#" title="What is torque?"><span class="logo" aria-hidden="true"></span><span class="name">Torque</span></a>
  <button id="btnSound" class="icon-btn" aria-label="Sound on">♪</button>
</header>
<div class="layout">
  <aside class="menu" aria-label="Chapters">
    <div class="menu-head"><h4>Chapters</h4><span id="menuProgress"></span></div>
    <nav id="chapters" class="chapters"></nav>
  </aside>
  <main class="stage-wrap">
    <div id="stage" class="stage"></div>
    <div class="stage-title"><span id="kicker"></span><strong id="title"></strong></div>
    <div id="readout" class="readout" aria-live="polite" hidden></div>
    <p id="hint" class="hint">Drag to orbit · scroll or pinch to zoom</p>
    <button id="reset" class="chip reset">Reset view</button>
    <p id="noGL" class="nogl" hidden>Your browser couldn't start WebGL, which this box needs for its 3D models.</p>
  </main>
  <aside id="panel" class="panel"></aside>
</div>
<div id="toasts" class="toasts"></div>
<div class="modal" id="modal" hidden><div class="modal-card" id="modalCard" role="dialog" aria-modal="true"></div></div>
<script type="module" src="js/app.js"></script>
<!-- Glassbox bar: served by the Glassbox site; harmless 404 when run on its own -->
<script src="/bar.js" defer></script>
</body>
</html>