<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8" />
		<title>Chaos game</title>
		
		<!-- Loading Bootstrap -->
		<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
		<link href="bootstrap/css/prettify.css" rel="stylesheet">
		
		<!-- Loading Flat UI -->
		<link href="css/flat-ui.css" rel="stylesheet">
		<link href="css/docs.css" rel="stylesheet">
		
		<!-- Site styles -->
		<link href="css/main.css" rel="stylesheet">
		
		<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
		<!--[if lt IE 9]>
		<script src="js/html5shiv.js"></script>
		<![endif]-->
	</head>
	<body>
		<section id="renderer">
			<h3>Render</h3>
			
			<p>
				<canvas width="500" height="500" id="canvas">
					Please update to newer version of your browser in order to view this page!
				</canvas>
			</p>
			
			<ul class="pager" id="zoomer">
				<li>
					<a href="#" id="zoom-in"><span>
						<i class="fui-plus"></i>
						&nbsp;Zoom
					</span></a>
				</li>
				<li><a href="#" id="zoom-out">&mdash;</a></li>
			</ul>
		</section>
		
		<section id="parameters">
			<form>
				<fieldset>
					<legend>Parameters</legend>
					<p>
						<label for="pt-num">Precision :</label>
						<input type="range" class="ui-slider" min="1" max="500" step="1" value="25000" id="pt-num" />
					</p>
					<p>
						<label for="pt-width">Size :</label>
						<input type="number" class="form-control" min="50" max="5000" step="50" value="500" id="pt-size" />
					</p>
					<p>
						<label for="pt-vertices">Vertices :</label>
						<input type="number" class="form-control" min="3" value="3" step="1" id="pt-vertices" />
					</p>
					<p>
						<label for="pt-frac-top">Factor :</label>
						<span class="fraction form-control">
							<sup><input type="number" class="form-control flat" min="1" value="1" step="1" id="pt-frac-top" /></sup>
							<sub><input type="number" class="form-control flat" min="1" value="2" step="1" id="pt-frac-bottom" /></sub>
						</span>
					</p>
				</fieldset>
				<fieldset>
					<legend>Presets</legend>
					<p>
						<img src="images/setting1.png" class="setting" data-setting-id="1"
							 alt="Sierpinski's triangle" title="Sierpinski's triangle" />
						<img src="images/setting2.png" class="setting" data-setting-id="2"
							 alt="Fractal no. 1" title="Fractal no. 1" />
						<img src="images/setting3.png" class="setting" data-setting-id="3"
							 alt="Fractal no. 2" title="Fractal no. 2" />
						<img src="images/setting4.png" class="setting" data-setting-id="4"
							 alt="Fractal no. 3" title="Fractal no. 3" />
					</p>
				</fieldset>
				<p class="bottom">
					<button class="btn btn-primary" id="pt-gen">Plot</button>
					<button class="btn btn-primary" id="pt-render">
						<a href="#" download="chaos-game-result.png">Download result</a>
					</button>
				</p>
			</form>
		</section>
		
		<script src="js/lib/jquery-1.8.3.min.js"></script>
		<script src="js/lib/jquery-ui-1.10.3.custom.min.js"></script>
		<script src="js/lib/jquery.ui.touch-punch.min.js"></script>
		<script src="js/lib/bootstrap.min.js"></script>
		<script src="js/lib/bootstrap-select.js"></script>
		<script src="js/lib/bootstrap-switch.js"></script>
		<script src="js/lib/flatui-checkbox.js"></script>
		<script src="js/lib/flatui-radio.js"></script>
		<script src="js/lib/jquery.tagsinput.js"></script>
		<script src="js/lib/jquery.placeholder.js"></script>
		<script src="bootstrap/js/google-code-prettify/prettify.js"></script>
		<script src="js/lib/application.js"></script>
		
		<script src="js/utils.js"></script>
		<script src="js/script.js"></script>
	</body>
</html>