-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
42 lines (42 loc) · 3.05 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
<!doctype html>
<html lang="en">
<head>
<title>Epidemic</title>
<meta charset="utf-8"/>
<link href="https://fonts.googleapis.com/css?family=Inconsolata&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<main>
<form class="data" id="form">
<div class="option"><input type="number" id="population" min="1" max="1000" value="200" /> total population</div>
<div class="option"><input type="number" id="velocity" min="0.1" max="10.1" value="1.5" step="0.1" /> maximum movement speed</div>
<div class="option"><input type="number" id="quarantined" min="0" max="999" value="5" /> amount of quarantined people</div>
<div class="option"><input type="number" id="infected" min="1" max="1000" value="1" /> amount of infected people</div>
<div class="option"><input type="number" id="illnessTime" min="0" max="30" value="6" /> duration of illness (seconds)</div>
<div class="option"><input type="number" id="recoveryTime" min="0" max="30" value="2" /> duration of recovery (seconds)</div>
<div class="option"><input type="number" id="oddsOfReinfection" min="0" max="100" value="3" /> chance of reinfection (percent)</div>
<div class="option"><input type="number" id="oddsOfDeath" min="0" max="100" value="2" /> chance of death (percent)</div>
<!-- <div class="option"><input type="number" id="width" min="100" max="2000" value="800" /> area width</div> -->
<!-- <div class="option"><input type="number" id="height" min="100" max="1000" value="400" /> area height</div> -->
</form>
<div class="results">
<div class="result"><div class="legend healthy"></div><input disabled type="number" id="resultsHealthy"> healthy</div>
<div class="result"><div class="legend quarantined"></div><input disabled type="number" id="resultsQuarantined"> healthy (quarantined)</div>
<div class="result"><div class="legend recovered"></div><input disabled type="number" id="resultsRecovered"> recovered</div>
<div class="result"><div class="legend ill"></div><input disabled type="number" id="resultsIll"> ill (contageous)</div>
<div class="result"><div class="legend contageous"></div><input disabled type="number" id="resultsContageous"> recovering (contageous)</div>
<div class="result"><div class="legend reinfected"></div><input disabled type="number" id="resultsReinfected"> reinfected (contageous)</div>
<div class="result"><div class="legend dead"></div><input disabled type="number" id="resultsDead"> dead</div>
<div class="result"><div class="legend"></div><input disabled type="number" id="resultsDuration"> duration (seconds)</div>
<input form="form" type="submit" value="Start" class="result start" />
</div>
<div id="placeholder">
<p>simulation ready...</p>
</div>
<canvas></canvas>
</main>
<a href="https://github.com/Alaricus/epidemic" class="tag">Have some input?<br>View project on GitHub</a>
<script src="index.js"></script>
</body>
</html>