viz/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>MIDI / VIZ</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      body,
      select,
      a:link,
      a:visited {
        font-family: monospace;
        color: #999;
        font-size: 18px;
        text-decoration: none;
      }

      html,
      body {
        background: #111;
        width: 100%;
        height: 100%;
      }

      body {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      canvas {
        display: block;
        width: 600px;
        height: 600px;
      }

      select {
        border: none;
        background: none;
      }

      .source {
        position: absolute;
        bottom: 2em;
        right: 2em;
      }

      .x-center {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
      }

      .left {
        position: absolute;
        left: 2em;
      }

      .right {
        position: absolute;
        right: 2em;
      }

      .top {
        position: absolute;
        top: 2em;
      }

      .bottom {
        position: absolute;
        bottom: 2em;
      }
    </style>
  </head>
  <body>
    <canvas width="600" height="600" id="main-canvas"></canvas>

    <select id="source-select" class="bottom left"></select>
    <aside id="main-msg" class="bottom x-center">MIDI NOT SUPPORTED</aside>
    <aside id="side-msg" class="bottom right"></aside>
    <a
      class="top right"
      href="https://github.com/max-vogler/midi/tree/master/viz"
      target="_blank"
      >?</a
    >

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