<html>
  <head>
    <title>Rainbow Sort</title>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript" src="main.js"></script>
    <link rel="stylesheet" type="text/css" href="main.css" />
  </head>
  <body>
    <canvas id="mainCanvas" height="100%" width="100%">Not supported.</canvas>
    <div id="panel" class="shadow rounded-corners">
      <button id="reset">Reset</button>
      <select id="algo">
	<option id="ssort">Selection Sort</option>
        <option id="bsort">Bubble Sort</option>
        <option id="isort">Insertion Sort</option>
        <option id="qsort1">Quick Sort (using mid-point pivot)</option>
        <option id="qsort2">Quick Sort (using Tukey's median-of-medians pivot)</option>
        <option id="hsort">Heap Sort</option>
      </select>
      <input type="number" class="num" id="squareSize" />
    </div>
  </body>
</html>

<html>
  <head>
    <title>Rainbow Sort</title>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript" src="main.js"></script>
    <link rel="stylesheet" type="text/css" href="main.css" />
  </head>
  <body>
    <canvas id="mainCanvas" height="100%" width="100%">Not supported.</canvas>
    <div id="panel" class="shadow rounded-corners">
      <button id="reset">Reset</button>
      <select id="algo">
	<option id="ssort">Selection Sort</option>
        <option id="bsort">Bubble Sort</option>
        <option id="isort">Insertion Sort</option>
        <option id="qsort1">Quick Sort (using mid-point pivot)</option>
        <option id="qsort2">Quick Sort (using Tukey's median-of-medians pivot)</option>
        <option id="hsort">Heap Sort</option>
      </select>
      <input type="range" class="num" id="squareSize" min="5" max="100" />
    </div>
  </body>
</html>

Use a slider, not a text field
Use a slider, not a text field
