-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
71 lines (67 loc) · 2.38 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html>
<head>
<title>Game of Life</title>
<link href="./resources/styles/style.css" type="text/css" rel="stylesheet">
<link
href="https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap"
rel="stylesheet">
</head>
<body>
<h1>Conway's Game of Life</h1>
<nav>
</nav>
<section class="main">
<article id="cells">
<div id="grid-container">
</div>
</article>
<article id="rules">
<p>The rules of the game:</p>
<ul>
<li id="first">A living cell with less than 2 neighbors dies.
</li>
<li>A living cell with 2 or 3 living neighbors lives.</li>
<li>A living cell with more than 3 neighbors dies.</li>
<li>A dead cell with exactly three living neighbors becomes
alive.</li>
</ul>
<p id="counter"></p>
</article>
</section>
<section class="selectors">
<form>
<div class="inputs">
<div>
<label for="cellHeight">Height (default 23):</label>
<input type="number" id="cellHeight" value="23" min="1"
max="50">
</div>
<div>
<label for="cellWidth">Width (default 23):</label>
<input type="number" id="cellWidth" value="23" min="1"
max="50">
</div>
<div>
<label for="livingColor">Living cells color:</label>
<input type="color" id="livingColor" value="#EFFFEE">
</div>
<div>
<label for="deadColor">Dead cells color:</label>
<input type="color" id="deadColor" value="#013220">
</div>
</div>
<div class="time">
<label for="seconds">Time between steps:</label>
<input type="number" id="seconds" value="2.5" min="0.5" max="60"
step="0.1">
</div>
<div class="buttons">
<button type="button" id="submit">START</button>
<button type="button" id="stop">STOP</button>
</div>
</form>
</section>
<script src="./resources/scripts/main.js"></script>
</body>
</html>