public/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Browser Lab</title>
  <meta name="description" content="A live, animated tour of how the browser and JavaScript engine work.">
  <link rel="stylesheet" href="/css/lab.css">
  <!-- modulepreload: fetch the router's imports in parallel with it (§26) -->
  <link rel="modulepreload" href="/js/lib/dom.js">
  <link rel="modulepreload" href="/js/lib/missions.js">
  <script type="module" src="/js/main.js"></script>
</head>
<body>
  <a class="skip" href="#stage">Skip to the station</a>
  <div class="shell">
    <nav class="sidebar" aria-label="Stations">
      <div class="brand">
        <span class="logo" aria-hidden="true">⚡</span>
        <div>
          <strong>Browser Lab</strong>
          <small id="proto">loading…</small>
        </div>
      </div>
      <ol id="station-nav"></ol>
      <div class="progress">
        <div class="bar"><span id="progress-fill"></span></div>
        <small id="progress-text"></small>
        <button id="reset-missions" type="button" class="link">reset missions</button>
      </div>
    </nav>
    <main id="stage" tabindex="-1">
      <p class="lede">Loading…</p>
    </main>
  </div>
</body>
</html>