-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
131 lines (118 loc) · 6.42 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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE HTML>
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-161620217-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-161620217-1');
</script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>
<body style="padding-bottom: 50px;">
<div class="container">
<div class="row">
<div class="col-sm">
<p id="susceptibleCount" style="box-shadow: 0px 1px 10px 1px black; background-color: #0275d8; border-radius: 0px 0px 5px 5px;" class="h4 text-white"></p>
</div>
<div class="col-sm">
<p id="infectedCount" style="box-shadow: 0px 1px 10px 1px black; background-color: #d9534f; border-radius: 0px 0px 5px 5px;" class="h4 text-white"></p>
</div>
<div class="col-sm">
<p id="removedCount" style="box-shadow: 0px 1px 10px 1px black; background-color: #5cb85c; border-radius: 0px 0px 5px 5px;" class="h4 text-white"></p>
</div>
<div class="col-sm">
<p id="asymptomaticCount" style="box-shadow: 0px 1px 10px 1px black; background-color: #f0ad4e; border-radius: 0px 0px 5px 5px;" class="h4 text-white"></p>
</div>
</div>
<div class="row p-3">
<div class="col-xs-12 col-sm-6 col-md-6">
<canvas id="simulationContainer" width="570" height="400"></canvas>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div id="chartContainer" style="height: 370px; width:100%;"></div>
</div>
</div>
<div class="row">
<div class="col-sm">
<p>Population speed (simulates lockdown)</p>
<input type="range" min="0" max="3" value="2" step="0.1" class="slider" id="populationSpeed">
<output id="populationSpeedOut" for="populationSpeed">2</output>
</div>
<div class="col-sm">
<p>Social distancing rate (how many people practice distancing)<sup>*</sup></p>
<input type="range" min="0" max="1" value="0.5" step="0.1" class="slider" id="socialDistancingRate">
<output id="socialDistancingRateOut" for="socialDistancingRate">50%</output>
</div>
<div class="col-sm">
<p>Probability that a person showing symptoms will get quarantined<sup>*</sup></p>
<input type="range" min="0" max="1" value="0.5" step="0.1" class="slider" id="quarantinePercentage">
<output id="quarantinePercentageOut" for="quarantinePercentage">50%</output>
</div>
</div>
<div class="row">
<div class="col-sm">
<p>Time to develop symptoms (how long you can stay asymptomatic)<sup>*</sup></p>
<input type="range" min="7" max="14" value="10" class="slider" id="timeToSymptoms">
<output id="timeToSymptomsOut" for="timeToSymptoms">10 days</output>
</div>
<div class="col-sm">
<p>Time until detection (how long until you get diagnosed and removed after showing symptoms, simulates how much we test)<sup>*</sup></p>
<input type="range" min="1" max="14" value="3" class="slider" id="timeUntilDetection">
<output id="timeUntilDetectionOut" for="timeUntilDetection">3 days</output>
</div>
<div class="col-sm">
<p>Circle of infection (how many people one person can infect at once)</p>
<input type="range" min="5" max="20" value="5" class="slider" id="infectionCircleRadius">
</div>
</div>
<div class="row">
<div class="col-sm">
<p>Probability that an infected person will be asymptomatic<sup>*</sup></p>
<input type="range" min="0" max="1" value="0.5" step="0.1" class="slider" id="asymptomaticProbability">
<output id="asymptomaticProbabilityOut" for="asymptomaticProbability">50%</output>
</div>
</div>
<div class="row">
<div class="col-sm">
<input type="checkbox" id="enableSocialDistancing" name="enableSocialDistancing" value="enableSocialDistancing">
<label for="enableSocialDistancing">Enable social distancing</label><br>
</div>
</div>
<div class="row">
<div class="col-sm">
<label for="initSusceptibleCount">Initial number of susceptibles: </label>
<input type="number" id="initSusceptibleCount" name="initSusceptibleCount" min="100" max="500" value="100">
</div>
<div class="col-sm">
<label for="initInfectedCount">Initial number of infected: </label>
<input type="number" id="initInfectedCount" name="initInfectedCount" min="1" max="20" value="1">
</div>
<div class="col-sm">
<label for="numberBeds">Number of hospital beds (less than total population): </label>
<input type="number" id="numberBeds" name="numberBeds" min="1" max="1000" value="1">
</div>
</div>
<div class="row p-3">
<div class="col-sm">
<button type="button" id="startSimulation" class="btn btn-primary">Start simulation</button>
<button type="button" id="reload" class="btn btn-secondary">Reload</button>
</div>
<div class="col-sm">
<p><sup>*</sup>can't be modified after starting simulation</p>
</div>
</div>
</div>
<nav class="navbar fixed-bottom navbar-dark bg-dark text-white">
<a class="navbar-brand" href="https://github.com/alexandrumeterez/abmcovid19">GitHub</a>
Created by Alexandru Meterez©
</nav>
<script src="model.js"></script>
</body>
</html>