index.html

<html>
<head>
  <meta property="og:title" content="Explore the Mandelbrot Set" />
  <meta property="og:description" content="Dive deep into this mesmerising fractal. Tip: Found a nice pattern and want to make it your wallpaper. Just right click on the canvas and save it as an HD image." />
  <meta property="og:image" content="https://raw.githubusercontent.com/ishu9bansal/mandelbrot/master/assets/mandelbrot-og-image.png" />
  <link rel="stylesheet" href="index.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script type="text/javascript" src="controls.js"></script>
  <title>Mandelbrot Set</title>
</head>
<body>
  <div>
    <div class="bg-image">
      <canvas></canvas>
      <svg class="axes"></svg>
    </div>
    <div>
      <div class="operations" style="position: absolute;">
        <div style="float: left; border-right: 3px solid purple;">
          <div style="text-align: center;">
            <button title="Pan Up: ArrowUp" class="btn" onclick="handleKeyPress('ArrowUp')" >
              <i class="fa fa-arrow-up"></i>
            </button>
          </div>
          <div style="text-align: center;">
            <button title="Pan Left: ArrowLeft" class="btn" onclick="handleKeyPress('ArrowLeft')" >
              <i class="fa fa-arrow-left"></i>
            </button>
            <button title="Add details: D" class="btn" onclick="handleKeyPress('d')" >
              <i class="fa fa-bolt"></i>
            </button>
            <button title="Pan Right: ArrowRight" class="btn" onclick="handleKeyPress('ArrowRight')" >
              <i class="fa fa-arrow-right"></i>
            </button>
          </div>
          <div  style="text-align: center;">
            <button title="Pan Down: ArrowDown" class="btn" onclick="handleKeyPress('ArrowDown')" >
              <i class="fa fa-arrow-down"></i>
            </button>
          </div>
        </div>
        <div style="float: right;">
          <div>
            <div style="float: left;">
              <p>
              | Colors:&nbsp;
              </p>
            </div>
            <div style="float: right;">
              <button title="Global: G" id="globe" class="toggle" onclick="handleKeyPress('g')" >
                <i class="fa fa-globe"></i>
              </button>
              <button title="Local: L" id="home" class="toggle" onclick="handleKeyPress('l')" >
                <i class="fa fa-home"></i>
              </button>
            </div>
          </div>
          <div style="clear: both;">
            <div style="float: left;">
              <p>
                | Fix Colors:&nbsp;
              </p>
            </div>
            <div style="float: right;">
              <input type="checkbox" id="fix_color" onclick="handleKeyPress('f')">
            </div>
          </div>
          <div style="clear: both;">
            <div style="float: left;">
              <p>
                | Pan:&nbsp;
              </p>
            </div>
            <div style="float: right;">
              <input id="pan_range" type="range" value=5 min=1 max=9 oninput="handlePanChange(this.value)" />
            </div>
          </div>
        </div>
        <div style="clear: both;">
          <button title="Zoom out: O" class="btn toggle" onclick="handleKeyPress('o')" >
              <i class="fa fa-minus-square"></i>
            </button>
            <button title="Reset: Z" class="btn toggle low" onclick="handleKeyPress('z')" >
              zoom
            </button>
             <button title="Zoom in: I" class="btn toggle" onclick="handleKeyPress('i')" >
              <i class="fa fa-plus-square"></i>
            </button>
        </div>
        <div style="float: left;">
          <p>
            Click <i class="fa fa-hand-o-up" style="color: purple;"></i> on canvas anywhere to
            <br>
            zoom that region.
          </p>
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="index.js"></script>
</body>
</html>