index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="manifest" href="manifest.json">
    <link rel="shortcut icon" href="logo.png">
    <script>
      if (navigator.serviceWorker) {
        navigator.serviceWorker
          .register("service-worker.js")
          .then(
            (registration) =>
              console.log(
                `Service worker registered on scope ${registration.scope}`,
              ),
            (reason) =>
              console.log(`Service worker failed to register ~ ${reason}`),
          )
      }
    </script>
  </head>
  <body>
    <div>
      Your client ID: <input id="user-id" type="text" value="" readonly="" />
    </div>
    <div>
      Enter peer ID: <input id="peer-id" type="text" value="" />
      <button id="peer-connect">Connect</button>
    </div>
    <div>
      Connected peers:
      <ul id="connected-peers"></ul>
    </div>

    <svg
      id="whiteboard"
      width="100%"
      height="100%"
      style="position: fixed"
    ></svg>

    <script src="js/app.js"></script>
  </body>
</html>