90 lines
2.7 KiB
HTML
90 lines
2.7 KiB
HTML
<html>
|
|
<head>
|
|
<title>Cellular Automaton Explorer</title>
|
|
<link rel="stylesheet" href="./style.css" >
|
|
</head>
|
|
<body>
|
|
<sidebar>
|
|
<h1>Cellular Automaton Explorer</h1>
|
|
<div class="menu-row">
|
|
<form name="rules">
|
|
<div class="form-field">
|
|
<label>Rules</label>
|
|
</div>
|
|
<div class="form-field">
|
|
<label>111
|
|
<input type="checkbox" name="111" checked>
|
|
</label>
|
|
</div>
|
|
<div class="form-field">
|
|
<label>110
|
|
<input type="checkbox" name="110">
|
|
</label>
|
|
</div>
|
|
<div class="form-field">
|
|
<label>101
|
|
<input type="checkbox" name="101" checked>
|
|
</label>
|
|
</div>
|
|
<div class="form-field">
|
|
<label>100
|
|
<input type="checkbox" name="100">
|
|
</label>
|
|
</div>
|
|
<div class="form-field">
|
|
<label>011
|
|
<input type="checkbox" name="011" checked>
|
|
</label>
|
|
</div>
|
|
<div class="form-field">
|
|
<label>010
|
|
<input type="checkbox" name="010">
|
|
</label>
|
|
</div>
|
|
<div class="form-field">
|
|
<label>001
|
|
<input type="checkbox" name="001">
|
|
</label>
|
|
</div>
|
|
<div class="form-field">
|
|
<label>000
|
|
<input type="checkbox" name="000" checked>
|
|
</label>
|
|
</div>
|
|
<div class="form-field">
|
|
<input type="button" name="start" id="start" value="start"/>
|
|
</div>
|
|
<div class="form-field">
|
|
<input type="button" name="reset" id="reset" value="reset"/>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="menu-row">
|
|
<form method="">
|
|
<div class="form-field">
|
|
<label for="live">Living cell color</label>
|
|
<input name="live" type="color" id="live" value="#000000"/>
|
|
</div>
|
|
<div class="form-field">
|
|
<label for="dead">Dead cell color</label>
|
|
<input name="dead" type="color" id="dead" value="#99FF00"/>
|
|
</div>
|
|
<div class="form-field">
|
|
<label>Cell size</label>
|
|
<input name="cellSize" type="number" id="cellSize" value="5"/>
|
|
</div>
|
|
<div class="form-field">
|
|
<label>Loop
|
|
<input name="loop" type="checkbox" id="loop"/>
|
|
</label>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</sidebar>
|
|
<main id="main">
|
|
<canvas width="500" height="500" id="canvas"></canvas>
|
|
</main>
|
|
<script src="main.js"></script>
|
|
</body>
|
|
</html>
|