index.html


<!doctype html>
<html>
<head>
  <title>Elmo_Purescript's Simple Slider Puzzle</title>
  <style>
  .picture {
    border: 1px solid black;
  }
  </style>
</head>
<body>
  <div id="title">
    <h1>Elmo_Purescript's Simple Slider Puzzle</h1>
  </div>

  <div>
  <p id="moves_requested">
    <input  style="text-transform: uppercase" type="text" name="input_moves" id ="input_moves" size="80" />
  </p>
  <input type="radio" name="input_mode" checked > Input Mode
  <br>
  <input type="radio" name="playback_mode" > Playback Mode
  </div>
  <div id="main" class="main" tabindex="0"  onkeyup="handleOnKeyUp(event)" >
    <canvas id="puzzle" width="480px" height="480px"></canvas>
  </div>
  <p id="moves_made">
  </p>
  <div id="target" class="main">
    <canvas id="puzzle_final" width="480px" height="480px"></canvas>
  </div>
  <script src="slider.js"></script>
</body>
</html>