<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>webgl learn</title>

    <script type="module" src="/src/base/index.ts"></script>
    <meta
      name="viewport"
      content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"
    />
  </head>

  <style>
    * {
      padding: 0;
      margin: 0;
    }

    #container {
      display: flex;
      flex-direction: column;
      position: absolute;
      left: 0;
      top: 0;
      height: 100% !important;
      width: 100%;
    }

    #canvas-wrap {
      flex-grow: 1;
    }

    #canvas {
      width: 100%;
      height: 100%;
    }

    #toolbar {
      height: 100px;
    }
  </style>

  <body style="background-color: #ccc">
    <div id="container">
      <div id="canvas-wrap">
        <canvas id="canvas" style="background-color: #efefef"></canvas>
      </div>

      <div id="toolbar">
        <button id="toggleTestLayer">toggleTestLayer</button>
      </div>
    </div>
  </body>
</html>
