basic.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tsl-hex-tiling · Basic Demo</title>
    <style>
      * { box-sizing: border-box; }
      html, body, #app { width: 100%; height: 100%; margin: 0; overflow: hidden; }
      body { background: #080a07; color: #eef2e7; font: 14px/1.4 system-ui, sans-serif; }
      canvas { display: block; }
      .panel { position: fixed; top: 18px; left: 18px; width: min(300px, calc(100vw - 36px)); padding: 14px 15px; border: 1px solid #bcc09e35; border-radius: 10px; background: #15170edd; backdrop-filter: blur(12px); pointer-events: none; }
      h1 { margin: 0 0 4px; font-size: 17px; }
      p { margin: 0; color: #b8bba9; font-size: 12px; }
      .badge { display: inline-block; margin-top: 8px; padding: 3px 7px; border-radius: 999px; background: #aeb56e33; color: #dce69b; font-size: 12px; }
      .demo-link { color: #dce69b; text-decoration: none; font-size: 12px; pointer-events: auto; }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <section class="panel">
      <h1>TSL Hex Tiling</h1>
      <p>Left: repeated UVs · Right: stochastic hex tiling</p>
      <p><a class="demo-link" href="./pbr.html" target="_top">Open PBR demo →</a></p>
      <span class="badge" id="backend">initializing renderer…</span>
    </section>
    <script type="module" src="./demo/boot.js"></script>
  </body>
</html>