-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
347 lines (312 loc) · 18.2 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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-171694847-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-171694847-1');
</script>
<script>
var trackEvent = function(action, category) {
gtag('event', action, {
'event_category': category || 'general'
});
}
</script>
<script src="js/p5/p5.js"></script>
<script src="js/p5/p5.sound.min.js"></script>
<link rel="stylesheet" href="js/social-share-kit/css/social-share-kit.css" type="text/css">
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="js/social-share-kit/js/social-share-kit.js"></script>
<title>JustWearIt.FYI</title>
<link rel="icon" type="image/png" href="/assets/favicon-16.png" sizes="16x16"/>
<link rel="icon" type="image/png" href="/assets/favicon-32.png" sizes="32x32"/>
<link rel="icon" type="image/png" href="/assets/favicon-96.png" sizes="96x96"/>
<meta property="og:title" content="JustWearIt.FYI" />
<meta property="og:description" content="Visualize how wearing a mask reduces the spread of COVID-19. Anyone can help stop the spread by wearing a mask." />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://JustWearIt.FYI" />
<meta property="og:image" content="https://just-wear-it.s3-us-west-2.amazonaws.com/open-graph-image.png" />
</head>
<body>
<div id="share-options" class="ssk-sticky ssk-left ssk-center ssk-lg ssk-grayscale">
<a onclick="trackEvent('share-facebook', 'share')" href="" class="ssk ssk-facebook"></a>
<a onclick="trackEvent('share-twitter', 'share')" href="" class="ssk ssk-twitter"></a>
<a onclick="trackEvent('share-pinterest', 'share')" href="" class="ssk ssk-pinterest"></a>
<a onclick="trackEvent('share-email', 'share')" href="" class="ssk ssk-email"></a>
<a onclick="copyLink(); trackEvent('share-link', 'share')" class="ssk ssk-link"></a>
</div>
<div id="hero">
<script src="simulation.js"></script>
<div id="config-popover">
<div id="config-popover-container">
<div class="config-row">
<p id="config-header" class="config-title">Configuration</p>
<a onclick="saveConfigChanges()" id="config-save" class="config-input">Save</a>
</div>
<div class="config-row">
<p class="config-title">Mask Usage Percentage</p>
<input id="mask-percentage" type="text" inputmode="decimal" class="config-input" min="10" max="100" value="100" onfocus="onConfigFieldFocus()" onblur="onConfigFieldBlur()" >
</div>
<div class="config-row">
<p class="config-title">Mask Effectiveness</p>
<input id="mask-effectiveness" type="text" inputmode="decimal" class="config-input" min="1" max="100" value="70" onfocus="onConfigFieldFocus()" onblur="onConfigFieldBlur()" >
</div>
<div class="config-row">
<p class="config-title">Transmission Rate</p>
<input id="transmission-rate" type="text" inputmode="decimal" class="config-input" min="1" max="100" step="0.1" value="3.7" onfocus="onConfigFieldFocus()" onblur="onConfigFieldBlur()" >
</div>
<div class="config-row">
<p class="config-title">Transmission Distance</p>
<input id="transmission-distance" type="text" inputmode="decimal" class="config-input" min="1" max="100" value="7" step="0.5" onfocus="onConfigFieldFocus()" onblur="onConfigFieldBlur()" >
</div>
<div class="config-row">
<p class="config-title">Initial Popation Health</p>
<input id="population-health" type="text" inputmode="decimal" class="config-input" min="1" max="100" value="92" onfocus="onConfigFieldFocus()" onblur="onConfigFieldBlur()" >
</div>
<div class="config-row">
<p class="config-title">Recovery Percentage</p>
<input id="recovery-percentage" type="text" inputmode="decimal" class="config-input" min="1" max="100" value="95" onfocus="onConfigFieldFocus()" onblur="onConfigFieldBlur()" >
</div>
<div class="config-row">
<p class="config-title">Avg Illnes Duration</p>
<input id="illness-duration" type="text" inputmode="decimal" class="config-input" min="1" max="10" value="4" step="0.1" onfocus="onConfigFieldFocus()" onblur="onConfigFieldBlur()" >
</div>
<div class="config-row">
<p class="config-title">Seconds Per Week</p>
<input id="seconds-per-week" type="text" inputmode="decimal" class="config-input" min="1" max="20" value="8" step="0.1"onfocus="onConfigFieldFocus()" onblur="onConfigFieldBlur()" >
</div>
<div class="config-row">
<p class="config-title">Speed</p>
<input id="speed" type="text" inputmode="decimal" class="config-input" min="1" max="10" step="1" value="2" onfocus="onConfigFieldFocus()" onblur="onConfigFieldBlur()" >
</div>
<div class="config-row">
<p class="config-title">Density</p>
<input id="density" type="text" inputmode="decimal" class="config-input" min="1" max="100" step="1" value="25" onfocus="onConfigFieldFocus()" onblur="onConfigFieldBlur()" >
</div>
</div>
</div>
<div class="footer">
<div id="navigation" class="banner">
<div class="banner-block">
<p id="title">JustWearIt.FYI</p>
<p id="share" class="clickable" onclick="toggleShareOptions()">Share</p>
<p id="donate">
<a
onclick="trackEvent('donate', 'donations')"
href="https://www.omaze.com/collections/coronavirus-covid-19-donations"
target="blank"
>
Donate
</a>
</p>
</div>
<div class="banner-block">
<p id="scroll" onclick="scrollToInfo()">Scroll To Learn More</p>
<svg id="scroll-icon" width="10" height="19" viewBox="0 0 10 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 7L5 11L9 7" stroke="white" stroke-opacity="0.6" stroke-width="2"/>
<path d="M1 1L5 5L9 1" stroke="white" stroke-opacity="0.4" stroke-width="2"/>
<path d="M1 13L5 17L9 13" stroke="white" stroke-opacity="0.8" stroke-width="2"/>
</svg>
</div>
<div id="config-section" class="banner-block">
<p id="config-summary">100% Mask Usage, 70% Effective</p>
<p onclick="toggleConfig()" id="config" class="clickable">Configure</p>
</div>
</div>
<div id="mini-navigation" class="banner">
<div class="banner-block">
<p id="scroll" onclick="scrollToInfo()">Learn More</p>
<svg id="scroll-icon" width="10" height="19" viewBox="0 0 10 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 7L5 11L9 7" stroke="white" stroke-opacity="0.6" stroke-width="2"/>
<path d="M1 1L5 5L9 1" stroke="white" stroke-opacity="0.4" stroke-width="2"/>
<path d="M1 13L5 17L9 13" stroke="white" stroke-opacity="0.8" stroke-width="2"/>
</svg>
</div>
<div id="config-section" class="banner-block">
<p id="config-summary-compact">100% Mask Usage<br>70% Effective</p>
<img onclick="toggleConfig()" src="/assets/settings.svg" />
</div>
</div>
</div>
</div>
<div class="separator"></div>
<div class="info" id="FAQ">
<div class="info-padding">
<h2 class="info-title">How do masks work?</h2>
<p class="info-text-block">When an infected person coughs, sneezes, or breaths out, particles disperse through the air and become very small, yet still infectious.</p>
<p class="info-text-block">Because these particles are so small, it's difficult to prevent other people from breathing them in. Once the particles have dispersed in the air, <span class="info-highlighted-text">only the highest quality protective gear, combined with strict fit requirements, would stop you from breathing them in.</span></p>
<p class="info-text-block">However, what if we could stop these particles before they disperse through the air? That's what wearing a mask does. <span class="info-highlighted-text">It stops a sick person from spreading their particles in the first place.</span></p>
<p class="info-text-block"><span class="info-highlighted-text">This means wearing a mask is about helping other people just as much as it's about helping yourself.</span> When you wear a mask, you're doing it to help your community. And if less people get sick, you're less likely to get sick as well.</p>
<p class="info-text-block">It can feel like we have no control over this situation, but wearing a mask lets <span class="info-highlighted-text"><i>anyone</i></span> contribute to making a real difference. <span class="info-highlighted-text">So just wear it.</span></p>
<h2 class="info-title">Where can I get a mask?</h2>
<div class="info-button-group">
<a
class="info-button"
href="https://masks4all.co/how-to-make-a-homemade-mask/"
target="blank"
onclick="trackEvent('make-mask', 'get-mask')"
>
Make Your Own
</a>
<a
class="info-button"
onclick="trackEvent('buy-mask', 'get-mask')"
href="https://www.amazon.com/Best-Sellers-Industrial-Scientific-Medical-Face-Masks/zgbs/industrial/8404646011"
target="blank"
>
Buy One
</a>
</div>
<h2 class="info-title">Where can I learn more?</h2>
<p class="info-text-block condensed-p"><a onclick="trackEvent('visited-cdc', 'learn-more')" href="https://www.cdc.gov/coronavirus/2019-ncov/index.html" target="blank">CDC - Symptom check & the latest COVID news</a></p>
<p class="info-text-block condensed-p"><a onclick="trackEvent('visited-atlantic', 'learn-more')" href="https://www.theatlantic.com/health/archive/2020/04/dont-wear-mask-yourself/610336/?scrollnoblockerrefresh=1" target="blank">The Atlantic - The Real Reason to Wear a Mask</a></p>
<p class="info-text-block condensed-p"><a onclick="trackEvent('visited-mask4all', 'learn-more')" href="https://masks4all.co" target="blank">Masks4All - Mask Research and Instructions</a></p>
<p class="info-text-block condensed-p"><a onclick="trackEvent('visited-fastai', 'learn-more')" href="https://www.fast.ai/2020/04/13/masks-summary/" target="blank">Fast AI Mask Summary - How Masks Work</a></p>
<h2 class="info-title">How else can I help?</h2>
<div class="info-button-group">
<div class="info-button" onclick="toggleShareOptions()">Share</div>
<a
class="info-button"
href="https://www.omaze.com/collections/coronavirus-covid-19-donations"
target="blank"
onclick="trackEvent('donate', 'donations')"
>
Donate
</a>
</div>
<h2 class="info-title">Who made this site?</h2>
<p class="info-text-block condensed-p">This website was created by <a onclick="trackEvent('about-matt', 'about')" class="info-highlighted-text" href="https://twitter.com/thefuturematt" target="blank">Matt Moss</a>, with help from <a onclick="trackEvent('about-maas', 'about')" class="info-highlighted-text" href="https://twitter.com/maaslalani" target="blank">Maas Lalani</a>. It was inspired by <a onclick="trackEvent('visited-atlantic', 'learn-more')" class="info-highlighted-text" href="https://www.theatlantic.com/health/archive/2020/04/dont-wear-mask-yourself/610336/?scrollnoblockerrefresh=1" target="blank">this article</a> in The Atlantic and <a onclick="trackEvent('about-kevin-simler', 'about')" class="info-highlighted-text" href="https://meltingasphalt.com/interactive/outbreak/" target="blank">this interactive essay</a> by Kevin Simler.</p>
<p class="info-text-block condensed-p"><span class="info-highlighted-text">Important:</span> While our simulation accounts for basic factors in COVID-19 spread, it is intended to raise awareness and should not be treated as a scientific model. You can learn more from the experts <a onclick="trackEvent('visited-research', 'learn-more')" class="info-highlighted-text" href="https://www.preprints.org/manuscript/202004.0203/v1" target="blank">here</a>.</p>
<p class="info-text-block condensed-p">You can also find the project on <a class="info-highlighted-text" href="https://github.com/matthewmoss/just-wear-it" target="blank">Github</a>, where you can experiment with our p5.js simulation and contribute. If you've got any feedback or questions, <a class="info-highlighted-text" href="mailto:matthewmoss@me.com" target="blank">email us</a> or reach out on <a class="info-highlighted-text" href="https://twitter.com/thefuturematt" target="blank">Twitter</a>!</p>
</div>
</div>
<script>
//
// Text field events
//
// When the user focuses on a config field, clear it so they can type from scrath.
// For convenience, the previous value is shown as the placeholder.
function onConfigFieldFocus() {
event.srcElement.placeholder = event.srcElement.value;
event.srcElement.value = '';
}
// If the user leaves a field blank, set it back to its previous value.
function onConfigFieldBlur() {
if (event.srcElement.value === '') {
event.srcElement.value = event.srcElement.placeholder;
}
}
//
// Viewport helpers
//
let initialWidth = 0;
let initialHeight = 0;
function updateWindowSize() {
if (initialWidth === window.innerWidth) {
return; // Only resize when the width changes. This prevents sim resize when browser UI is all that's changing.
}
initialWidth = window.innerWidth;
initialHeight = window.innerHeight;
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
}
window.addEventListener('resize', updateWindowSize);
updateWindowSize();
//
// Scrolling
//
function scrollToInfo() {
document.getElementById('FAQ').scrollIntoView();
}
//
// Share
//
function toggleShareOptions() {
let shareOptions = document.getElementById("share-options");
if (shareOptions.style.visibility === "hidden") {
shareOptions.style.visibility = "visible";
} else {
shareOptions.style.visibility = "hidden";
}
}
toggleShareOptions();
//
// Keyboard
//
// Listen for key events
document.addEventListener('keyup', event => {
console.log("key code: " + event.keyCode);
if (event.keyCode == 32) {
// togglePause();
} else if (event.keyCode == 13) {
// saveConfigChanges();
}
})
//
// Config
//
function toggleConfig() {
let popover = document.getElementById("config-popover");
if (popover.style.visibility === "visible") {
popover.style.visibility = "hidden";
updateForConfigChange(); // Update UI for config changes
} else {
popover.style.visibility = "visible";
}
}
// Save config changes
function saveConfigChanges() {
// Log
trackEvent('updated-config');
// Update simulation
setMaskPercentage(document.getElementById("mask-percentage").value);
setMaskEffectiveness(document.getElementById("mask-effectiveness").value);
setTransmissionRate(document.getElementById("transmission-rate").value);
setTransmissionDistance(document.getElementById("transmission-distance").value);
setPopulationHealth(document.getElementById("population-health").value);
setRecoveryPercentage(document.getElementById("recovery-percentage").value);
setIllnessDuration(document.getElementById("illness-duration").value);
setSecondsPerWeek(document.getElementById("seconds-per-week").value);
setSpeed(document.getElementById("speed").value);
setDensity(document.getElementById("density").value);
// Restart
restartSimulation();
// Hide config popover, which will update UI for config changes
toggleConfig()
}
// Update UI for config change
function updateForConfigChange() {
document.getElementById("config-summary").innerHTML = `${maskPercentage()}% Mask Usage, ${maskEffectiveness()}% Effective`;
document.getElementById("config-summary-compact").innerHTML = `${maskPercentage()}% Mask Usage<br>${maskEffectiveness()}% Effective`;
document.getElementById("mask-percentage").value = maskPercentage();
document.getElementById("mask-effectiveness").value = maskEffectiveness();
document.getElementById("transmission-rate").value = transmissionRate().toFixed(1);
document.getElementById("transmission-distance").value = transmissionDistance();
document.getElementById("population-health").value = populationHealth();
document.getElementById("recovery-percentage").value = recoveryPercentage();
document.getElementById("illness-duration").value = illnessDuration();
document.getElementById("seconds-per-week").value = secondsPerWeek();
document.getElementById("speed").value = speed();
document.getElementById("density").value = density().toFixed(0);
}
updateForConfigChange(); // trigger initially
</script>
<script type="text/javascript">
function copyLink() {
navigator.clipboard.writeText("https://JustWearIt.FYI");
alert("Link copied!");
}
SocialShareKit.init({
selector: '.ssk',
url: 'https://JustWearIt.FYI',
text: '#JustWearIt'
});
</script>
</body>
</html>