index.html

<!DOCTYPE html>
<html>
  <head>
    <title>drones</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

    <script type="text/javascript" src="./scripts/Tone.js"></script>
    <script type="text/javascript" src="./scripts/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="./scripts/nexusUI.js"></script>
    <script type="text/javascript" src="./dronesynth.js"></script>
    <link rel="stylesheet" type="text/css" href="./style.css" />
  </head>
  <body>
    <div class="container-fluid">
      <div class="row">
        <div class="col-xs-12" id="joints-holder">
          <canvas nx="joints"></canvas>
        </div>
      </div>
      <div class="row">
        <div class="footer">
          <nav class="navbar navbar-inverse navbar-fixed-bottom" id="options-navbar">
              <div class="col-lg-2 col-sm-3 col-xs-7" id="button-holder">
                <div class="btn-group" role="group" aria-label="waveshape">
                  <button type="button" title="sine" id="sine" class="btn btn-dark btn-primary active">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 48 48">
                      <g>
                        <path fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" d="M4,24 c0,0 5,-20 10,-20 c5,0 10,20 10,20 c0,0 5,20 10,20 c5,0 10,-20 10,-20"/>
                      </g>
                    </svg>
                  </button>
                  <button type="button" title="triangle" id="triangle" class="btn btn-primary">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 48 48">
                      <g>
                        <path fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" d="M4,24 l10,-20 20,40 10,-20"/>
                      </g>
                    </svg>
                  </button>
                  <button type="button" title="square" id="square6" class="btn btn-primary">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 48 48">
                      <g>
                        <path fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" d="M4,24 l0,-20 20,0 0,40 20,0 0,-20"/>
                      </g>
                    </svg>
                  </button>
                  <button type="button" title="sawtooth" id="sawtooth6" class="btn btn-primary">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 48 48">
                      <g>
                        <path fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" d="M4,24 l0,-20 40,40 0,-20"/>
                      </g>
                    </svg>
                  </button>
                </div><!--btn-group-->
              </div><!--btn-column-->
              <div class="col-lg-2 col-sm-3 col-xs-5" id="slider-holder">
                <div class="row">
                  <div class="col-xs-9">
                    <input type="range" title="fundamental" id="fundamental-slider" min="20" max="60" step="1" value="32" />
                  </div>
                  <div class="col-xs-3">
                    <label for="fundamentalfreq" id="fundamental">32Hz</label>
                  </div>
                </div>
              </div><!--slider-column-->
            </nav>
          </div><!--footer-->
        </div>
      </div><!--container-fluid-->
    </div>
  </body>
</html>