-
Notifications
You must be signed in to change notification settings - Fork 0
/
simulation.html
102 lines (94 loc) · 4.98 KB
/
simulation.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wear A Mask!</title>
<link rel="icon" href="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/twitter/259/face-with-medical-mask_1f637.png" type="image/x-icon">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.js"></script>
<script src="static/simulation.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://emoji-css.afeld.me/emoji.css" rel="stylesheet">
<link href="static/style.css" rel="stylesheet">
</head>
<body>
<h1 style="text-align: center"><img style="max-width: 100%" src="media/logo.png" alt="Wear a mask!"></h1>
<div class="row">
<div id="description" class="col-lg-3 col-sm-12">
<p>Welcome to WearAMask!</p>
<p>
This simple website has been made with the purpose of highlighting the importance of <b>using a mask</b>.
Through executing the simulation with different combinations of variables, the user should realize that
populations where mask percentage is higher take more epochs to get fully infected than others.
Also, <b>social distance</b> (related to board size) is another key factor.
</p>
<p>
The population is randomly distributed and moves randomly. The probability of infection, which is
applied when two people are closer than the minimum safe distance, can be found below in the image.
For more details, visit the <a href="https://github.com/atmguille/wear-a-mask">GitHub project</a>
</p>
<p>Want to know more about me? Check my <a href="https://www.linkedin.com/in/guillermogarciacobo/">LinkedIn</a></p>
<p>Enjoy... and <span style="color: #54B2A9">#WearAMask</span><i class="em em-mask"></i></p>
<img style="max-width: 100%; max-height: 100%" src="media/masks_prob.png" alt="masks probability">
</div>
<div id="form" class="col-lg-3 col-sm-6">
<form>
<div class="form-row">
<div class="col-6">
<label for="board-size">Board size</label>
<input id="board-size" class="form-control modifiable-input" type="number" min="1" value="20">
</div>
<div class="col-6">
<label for="n-persons">Population</label>
<input id="n-persons" class="form-control modifiable-input" type="number" min="1" value="10">
</div>
<div class="col-6">
<label for="infected-percentage">% Infected</label>
<input id="infected-percentage" class="form-control modifiable-input" value="0.5" type="number" min="0" max="1" step="0.01">
</div>
<div class="col-6">
<label for="masks-percentage">% Masks</label>
<input id="masks-percentage" class="form-control modifiable-input" value="0.5" type="number" min="0" max="1" step="0.01">
</div>
<div class="col-6">
<label for="speed">Seconds / epoch</label>
<input id="speed" class="form-control" type="number" min="0" value="1" step="0.01">
</div>
<button class="col-6 btn btn-primary play-stop-button" id="play" style="height: fit-content; position: relative; top: 32px">Play!</button>
</div>
</form>
<div id="legend">
<b>Legend:</b>
<ul>
<li>
<i class="em em-mask"></i>: Healthy with mask
</li>
<li>
<i class="em em-confused"></i>: Healthy without mask
</li>
<li>
<i class="em em-mask ill-filter"></i>: Ill with mask
</li>
<li>
<i class="em em-face_with_thermometer ill-filter"></i>: Ill without mask
</li>
</ul>
</div>
<div id="stats">
<div>
<b>Infected: </b><span id="infected_count"></span>
</div>
<div>
<b>Masks: </b><span id="masks_count"></span>
</div>
<div>
<b>N epochs: </b><span id="epoch_count">0</span>
</div>
</div>
</div>
<div class="col-lg-6 col-sm-6">
<div id="board"></div>
<div id="rectangle"></div>
</div>
</div>
</body>
</html>