private/dev/index.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Dashboard</title>
    <link rel="icon" type="image/png" href="https://uppy.io/img/logo.svg" />
    <style>
      main {
        display: block;
        width: fit-content;
        margin: 100px auto;
      }

      h1 {
        text-align: center;
      }

      #upload-form {
        max-width: 400px;
        text-align: left;
        margin: auto;
      }

      /* css to make sure that Dashboard's css overrides page css */
      button,
      input {
        color: green;
        font-size: 30px;
        text-align: right;
        border: 2px solid purple;
      }
      ul {
        margin: 60px;
      }
      li {
        margin: 60px;
      }
      a {
        color: purple;
      }
      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        color: green;
      }
    </style>
  </head>

  <body>
    <main class="foo">
      <h1>Dashboard is here</h1>

      <!-- some inputs in a form to check focus management in Dashboard -->
      <form id="upload-form" action="/">
        <button type="button" id="pick-files">Pick Files</button><br />
        True ?
        <input type="checkbox" name="check_test" value="1" checked /><br />
        Something: <input type="text" name="yo" value="1" /><br />
        <input type="hidden" name="bla" value="12333" /><br />
        <button type="submit">Submit</button>
      </form>
    </main>

    <script src="./index.js" type="module"></script>
  </body>
</html>