<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>game of life</title>
<style>
body {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<input type="range" id="frameRate" name="frameRate" min="1" max="500" value="50">
<label for="frameRate" id="frameRate-label">Frame Interval: 50</label>
<input type="range" id="randThreshold" name="randThreshold" min="0" max="100" value="50">
<label for="randThreshold" id="randThreshold-label">Rand Threshold: 50</label>
<input type="number" id="width" name="width" min="1" max="1000" value="100">
<label for="width">width</label>
<input type="number" id="height" name="height" min="1" max="1000" value="100">
<label for="height">height</label>
<!-- <pre id="game-of-life-canvas"></pre> -->
<canvas id="game-of-life-canvas"></canvas>
<input type="checkbox" id="play-check" name="play-check">
<label for="play-check">Play</label>
<button id="step">Step</button>
<button id="reset">Reset</button>
<div id="fps"></div>
<script src="./bootstrap.js"></script>
</body>
</html>