bezier.html

<!DOCTYPE html>


<title>Bezier</title>
<head>
  <meta charset="utf-8">

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-responsive.css">
  <link rel="stylesheet" type="text/css" href="Bezier/bezier.css">
	
</head>
<body>

    <div class="container-fluid">
      <div class="row-fluid">
        <div class="span3">
          <div class="sidebar-nav">
            <ul class="nav nav-list">
                <div id="instruction">
                  <p>
                  <strong>Left click</strong> on the canvas to add a control point.
<!--                   <strong>Right click</strong> on the canvas to remove a control point.
 -->                  <strong>Drag</strong> a control point to change curve shape.
                  </P>
                </div>

                <li class="nav-header">Select Curve Type</li>
                <div id="curveType">
                  <div class="radio">
                    <label>
                      <input type="radio" name="optionsRadios" id="type0" value="0">
                      Straight line
                    </label>
                  </div>
                  <div class="radio">
                    <label>
                      <input type="radio" name="optionsRadios" id="type1" value="1" checked>
                      Bezier
                    </label>
                  </div>
                  <div class="radio">
                    <label>
                      <input type="radio" name="optionsRadios" id="type2" value="2">
                      Spline
                    </label>
                  </div>
                </div>
                <li class="nav-header">Select curve smoothness</li>
                <div id="sliderWrapper">
                  <span id="levelOfDetail"></span>
                  <div id="slider">
                  </div>
                </div>

            </ul>
          </div><!--/.well -->
        </div><!--/span-->
        <div class="span9" id="main">          
          <div class="row">
            <h1>Bezier!</h1>
            <canvas id="canvas"></canvas>                   
          </div>
       	</div>
      </div>
    </div>

<body>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="Bezier/point.js"></script>
<script src="Bezier/curves.js"></script>
<script src="Bezier/script.js"></script>