<!DOCTYPE html>

<html>
  <head>
    <style>
      body {
        height: 100vh;
        width: 100vw;
        margin: 0;
      }
      .bottomRight {
        padding: 12px;
        position: fixed;
        bottom: 0;
        right: 0;
        background-color: rgba(255,255,255,0.5);
        border: 1px solid white;
        border-radius: 8px;
        margin-right: 6px;
        margin-bottom: 6px;
      }
      .verticalSlider
      {
        writing-mode: bt-lr; /* IE */
        -webkit-appearance: slider-vertical; /* Chromium */
        width: 8px;
        padding: 0 5px;
      }
    </style>
  </head>
  <body>
    <div id="canvasHolder">
      
    </div>
    <div class="bottomRight">
      <input orient="vertical" type="range" min="-1000" max="1000" value="0" id="imaginarySlider" class="verticalSlider">
      <input type="range" min="-1000" max="1000" value="0" id="realSlider">
      <br>
      imaginary: <input id="imag-val" size="10" type="number" step="0.001"></input>
      <button id="animate-imag" onclick="startAnim('animate-imag', 'ci')">Animate</button>
      <br>
      real: <input id="real-val" size="10" type="number" step="0.001"></input>
      <button id="animate-real" onclick="startAnim('animate-real', 'cr')">Animate</button>
      <br>
      powered by <a href="https://github.com/gpujs/gpu.js">gpu.js</a>
    </div>

    <script src="gpu-browser.js"></script>
    <script src="julia.js"></script>
  </body>
</html>