hidable menu content
This commit is contained in:
156
index.html
156
index.html
@ -7,82 +7,88 @@
|
||||
<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="stop" id="stop" value="stop"/>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<input type="button" name="reset" id="reset" value="reset"/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="menu-row">
|
||||
<form>
|
||||
<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>
|
||||
<h2>Elementary Cellular Automata</h2>
|
||||
<div class="menu-row-content">
|
||||
<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="stop" id="stop" value="stop"/>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<input type="button" name="reset" id="reset" value="reset"/>
|
||||
</div>
|
||||
</form>
|
||||
<form>
|
||||
<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>
|
||||
</div>
|
||||
<!-- <div class="menu-row"> -->
|
||||
<!-- <h2>2D Cellular Automata</h2> -->
|
||||
<!-- <div class="menu-row-content"> -->
|
||||
<!-- </div> -->
|
||||
<!-- </div> -->
|
||||
</sidebar>
|
||||
<main id="main">
|
||||
<canvas width="500" height="500" id="canvas"></canvas>
|
||||
|
||||
Reference in New Issue
Block a user