💡 Update UI
This commit is contained in:
parent
96cbc3a302
commit
cbce765d5f
113
index.html
113
index.html
|
|
@ -1,106 +1,33 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="fr">
|
<html lang="fr">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8">
|
||||||
<title>Chaos game</title>
|
<title>Chaos game</title>
|
||||||
|
|
||||||
<!-- Loading Bootstrap -->
|
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,400italic|Playfair+Display:400,400italic,700" rel="stylesheet">
|
||||||
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
|
<link href="styles/subsite.css" rel="stylesheet">
|
||||||
<link href="bootstrap/css/prettify.css" rel="stylesheet">
|
<link href="styles/index.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>
|
</head>
|
||||||
<body>
|
<body class="split">
|
||||||
<section id="renderer">
|
<aside>
|
||||||
<h3>Render</h3>
|
<header>
|
||||||
|
<a href="/">
|
||||||
|
<img src="images/avatar.jpg" alt="Photo de Mattéo" />
|
||||||
|
<span>Mattéo Delabre ✏️</span><br />
|
||||||
|
Back to home
|
||||||
|
</a>
|
||||||
|
</header>
|
||||||
|
|
||||||
<p>
|
<h1>The Chaos Game</h1>
|
||||||
<canvas width="500" height="500" id="canvas">
|
<h3>Creating fractals with the chaos game</h3>
|
||||||
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>
|
|
||||||
Zoom
|
|
||||||
</span></a>
|
|
||||||
</li>
|
|
||||||
<li><a href="#" id="zoom-out">—</a></li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="parameters">
|
</aside>
|
||||||
<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>
|
<div id="content">
|
||||||
<script src="js/lib/jquery-ui-1.10.3.custom.min.js"></script>
|
<canvas id="plotting"></canvas>
|
||||||
<script src="js/lib/jquery.ui.touch-punch.min.js"></script>
|
</div>
|
||||||
<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="bundle.js"></script>
|
||||||
<script src="js/script.js"></script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in New Issue