-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
484 lines (375 loc) · 23.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
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
<!DOCTYPE html>
<html lang="nl">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="keywords" content="whatsapp, social, queue, reservation, checkin, covid, hospitality, hotel, restaurant, bar">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="author" content="Waits.App">
<!-- Primary Meta Tags -->
<!-- Dit zijn instructies die vaak door zoekmachines worden geinterpreteerd om de weergave van een zoekresultaat te vertonen -->
<title>CheckGesprek</title>
<meta name="title" content="Waits.App's Gratis Checkgesprek / Gezondheidscheck voor bedrijven">
<meta name="description" content="Open Source - Privacy respecterend Gratis CheckGesprek / Gezondheidscheck voor bedrijven en instellingen. Samen verslaan we corona!">
<!-- Open Graph / Facebook / -->
<!-- Dit betekent niet dat facebook uw bezoek op deze pagina nu tracked, maar door deze kenmerken mee te geven wordt de pagina in newsfeeds opgemaakt zoals we willen -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://waits.app/checkgesprek">
<meta property="og:title" content="Waits.App's Gratis Checkgesprek / Gezondheidscheck voor bedrijven">
<meta property="og:description" content="Open Source - Privacy respecterend Gratis CheckGesprek / Gezondheidscheck voor bedrijven en instellingen. Samen verslaan we corona!">
<meta property="og:image" content="https://waits.app/img/social-waitsapp.png">
<!-- Twitter -->
<!-- Dit betekent niet dat twitter uw bezoek op deze pagina nu tracked, maar door deze kenmerken mee te geven wordt de pagina in newsfeeds opgemaakt zoals we willen -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://waits.app/checkgesprek">
<meta property="twitter:title" content="Waits.App's Gratis Checkgesprek / Gezondheidscheck voor bedrijven">
<meta property="twitter:description" content="Open Source - Privacy respecterend Gratis CheckGesprek / Gezondheidscheck voor bedrijven en instellingen. Samen verslaan we corona!">
<meta property="twitter:image" content="https://waits.app/img/social-waitsapp.png">
<!--====== Favicon Icon ======-->
<!-- Dit zijn instructies om die "gezellige icoontjes" in je address balk op je browser te vertonen. Ook bepaald dit het icoontje voor de "homescreen" mocht je besluiten deze pagina op te slaan daar op. -->
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png">
<link rel="manifest" href="/favicons/site.webmanifest">
<link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#775dff">
<meta name="msapplication-TileColor" content="#775dff">
<meta name="theme-color" content="#775dff">
<!-- Bootstrap CSS -->
<!-- CSS is een methode om webpaginas op te maken. Hieronder wordt gelinked naar het standaard opmaakbestand van het framework dat wordt gebruikt voor deze pagina -->
<link rel="stylesheet" href="bootstrap.min.css">
<!-- Naast de standaard CSS opmaak van het framework Bootstrap, zijn een aantal elementen op deze pagina aangepast. Die aanpassingen zie je in het codeblock hieronder -->
<style type="text/css">
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
}
li {
padding-top: 0.5em;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
body > .container {
padding: 60px 15px 0;
}
.footer > .container {
padding-right: 15px;
padding-left: 15px;
}
#resultbody {
color: #ffffff;
}
#question {
line-height: 1.5em;
}
</style>
</head>
<body>
<!-- <nav class="navbar navbar-expand-md navbar-warning sticky-top bg-warning"> -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="/"><img src="icon.png" width="30" height="30" class="d-inline-block align-top mr-2" alt=""> <b>CheckGesprek</b> <span id="venue"></span></a>
</nav>
<div class="container">
<div class="row mt-3">
<div class="col-12">
<div id="explain">
<p><img src="visual.svg" class="img-fluid" alt="visual" />
<p><span id="explain_intro">Welkom bij het CheckGesprek. In deze zelftest vind je een aantal vragen die in het kader van de Gezondheidscheck moeten worden gesteld aan bezoekers en medewerkers.</span> <a class="" data-toggle="collapse" href="#collapseReadMore" role="button" aria-expanded="false" aria-controls="collapseReadMore">
<span id="explainlink">Lees meer over uw privacy</span>
</a></p>
<div class="text-center">
<button class="btn btn-primary btn-lg" onclick="startCheck()" id="explain_start">Start CheckGesprek</button><h3 id="languages" class="mt-3">🇱</h3>
</div>
<div class="collapse mb-3 mt-3" id="collapseReadMore">
<div class="card card-body" id="explain_body">
<p>De code van deze pagina is volledig opensource & inzichtelijk (en downloadbaar en herbruikbaar!) en kunt u hier terug vinden.</p>
<p>Vanuit het oogpunt zo veilig mogelijk om te gaan met gevoelige data, wordt NIKS van deze webpagina opgeslagen.</p>
<p>Elke handeling die u op deze pagina pleegt, wordt alleen op deze pagina verwerkt. Indien u niet vertrouwd op <del>mijn blauwe ogen</del> deze pixels: verbreek gerust de verbinding met internet door bijvoorbeeld uw telefoon in airplane modus te zetten.</p>
</div>
</div>
</div>
<div id="testblock" style="display:none;">
<div class="card card-block">
<div class="card-body">
<div class="progress">
<div id="progress" class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="5">20%</div>
</div>
<h4 id="question" class="text-left lead mt-3"></h4>
</div>
<div class="card-footer text-center">
<button class="btn btn-danger mr-3" id="buttrue" onclick="answer(true)">Ja</button> <button class="btn btn-success" id="butfalse" onclick="answer(false)">Nee</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="result_dialog" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title text-center" id="resulttitle"></h5>
</div>
<div class="modal-body text-center" id="resultbody">
<p class="mt-2"><span id="timeago"></span></p>
<img src="" class="img-fluid mt-3 mb-5" id="resultimg" />
<h3 id="resultunder"></h3>
</div>
<div class="modal-footer margin-auto">
<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="resetit()">Reset</button>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container text-center">
<span class="text-muted"><a href="https://github.com/WaitsApp-Open/checkgesprek">Open source</a> by <a href="https://waits.app">Waits.App</a></span>
</div>
</footer>
<!-- library voor eenvoudige javascript functies. MIT licentie -->
<script src="jquery.min.js"></script>
<!-- library met javascript functies voor de user interface. MIT licentie -->
<script src="bootstrap.min.js"></script>
<!-- code voor checkgesprek -->
<script type="text/javascript">
var defaultlang = "nl";
var language = defaultlang;
var timer;
var currentquestion = 0;
var answers = [];
var starttime = 0;
var venue;
var questions = {
"nl": {
"q": [
"Heb je de afgelopen 24 uur of op dit moment één of meerdere van de volgende (milde) klachten: neusverkoudheid, hoesten, benauwdheid en/of koorts (vanaf 38 graden Celsius)?",
"Heb je op dit moment een huisgenoot/gezinslid met koorts en/of benauwdheidsklachten?",
"Heb je het nieuwe coronavirus gehad (vastgesteld met een laboratoriumtest) en is dit in de afgelopen 7 dagen vastgesteld?",
"Heb je een huisgenoot/gezinslid met het nieuwe coronavirus (vastgesteld met een laboratoriumtest) en heb je korter dan 14 dagen geleden contact gehad met deze huisgenoot/gezinslid terwijl hij/zij nog klachten had?",
"Ben je in thuisisolatie omdat je direct contact hebt gehad met iemand waarbij het nieuwe coronavirus is vastgesteld?"
],
"a": ["ja","nee"],
"explain": {
"intro":'Welkom bij het CheckGesprek. Hieronder vind je een aantal vragen die in het kader van de Gezondheidscheck moeten worden gesteld aan bezoekers en medewerkers.',
"bodytxt":'<ul><li>Vanuit de gedachte zo veilig mogelijk om te gaan met gevoelige medische data, wordt NIKS van deze webpagina opgeslagen.</li><li>Tevens vraagt deze pagina NIET om op een locatie in te checken of uw gegevens achter te laten, bijvoorbeeld ten behoeve van contactonderzoek. Contactonderzoek is onzer mening na iets voor een opt-in contact-tracing app gebouwd door een overheidsinitiatief zonder winstoogmerk, met de hoogst mogelijke vorm van privacy waarborgen en met auditing in elk mogellijke vorm.</li><li>Elke handeling die u op deze pagina pleegt, wordt alleen op deze pagina verwerkt. <i>En dus nergens naar toe verzonden of opgeslagen</i>.</li><li>De broncode van deze pagina is volledig <a href="https://github.com/WaitsApp-Open/checkgesprek">opensource & inzichtelijk</a> (en downloadbaar en herbruikbaar!) en kunt u <a href="https://github.com/WaitsApp-Open/checkgesprek">hier</a> terug vinden.</li><li>Indien u niet vertrouwd op <del>mijn blauwe ogen</del> deze pixels: verbreek gerust de verbinding met internet door bijvoorbeeld uw telefoon in airplane modus te zetten. U zult zien dat de functionaliteit blijft.</li></ul>',
"readmore":'Uw privacy is belangrijk. Echt!',
"startbutton": "Start CheckGesprek"
},
"emoji": "🇳🇱"
},
"en": {
"q": [
"Have you had one or more of the following (mild) complaints in the past 24 hours or at this time: colds, cough, shortness of breath and / or fever (from 38 degrees Celsius)?",
"Do you currently have a roommate / family member with a fever and / or shortness of breath?",
"Have you had the new coronavirus (diagnosed with a laboratory test) and has it been diagnosed in the past 7 days?",
"Did you have a roommate / family member with the new coronavirus (determined by a laboratory test) and did you have contact with this roommate / family member less than 14 days ago while he / she still had complaints?",
"Are you in home isolation because you have had direct contact with someone diagnosed with the new coronavirus?"
],
"a": ["yes","no"],
"explain": {
"intro":'Welcome to the Health Chat Conversation. In this self test you will find a number of questions that must be asked to visitors and employees in the context of the Health Check.',
"bodytxt":'<ol><li>Since these Health Chat Conversations deal with medical personal data, highly sensitive, NOTHING on this page is recorded or stored.</li><li>Also, this page does NOT ask to check in at a location or leave your details, for example for contact research. Contact tracing is our opinion a dedicated task for an opt-in contact-tracing app built by a non-profit government initiative, with the highest possible level of privacy safeguards and auditing in every possible form.</li><li>Any action you perform on this page will solely be processed on this page only via so-called client-side code (meaning: on your device, not online). And therefore not sent or stored anywhere.</li><li>The source code of this page is <a href="https://github.com/WaitsApp-Open/checkgesprek">fully open source</a> & transparent (and downloadable and reusable!) And can be found <a href="https://github.com/WaitsApp-Open/checkgesprek">here</a>.</li><li>You will see that the functionality remains even if you disconnect from the internet by, for example, putting your phone in airplane mode.</li></ol>',
"readmore":'Your privacy matters',
"startbutton": 'Start Health Check'
},
"emoji": "🇬🇧"
},
"fr": {
"q": [
"Avez-vous souffert une ou plusieurs des plaintes (légères) suivantes au cours des dernières 24 heures ou en ce moment: rhume, toux, essoufflement et / ou fièvre (à partir de 38 degrés Celsius)?",
"Y a-t-il dans votre ménage en ce moment quelqu'un qui souffre de la fièvre et / ou d’essoufflement?",
"Avez-vous eu le nouveau coronavirus diagnostiqué avec un test de laboratoire au cours des 7 derniers jours?",
"Y a-t-il dans votre ménage quelqu'un qui a souffert le nouveau coronavirus (déterminé par un test de laboratoire) et avez-vous eu des contacts avec ce colocataire / membre de la famille quand on avait des plaintes et cela il y a moins de 14 jours?",
"Êtes-vous dans ce moment en quarantaine / isolement par rapport que vous étiez en contact direct avec une personne diagnostiquée avec le nouveau coronavirus?"
],
"a": ["oui","non"],
"explain": {
"intro":'Bienvenue á l\'outil d\'évaluation de la santé. Cet autotest vous présente un certain nombre de questions. C\'est obligatoire de vous poser ces questions et à vous de répondre dans le cadre du bilan de santé. La confidentialité des données est d\'importance majeure, nous n\'enregistrons AUCUNE donnée.',
"bodytxt":'<ol><li>Parce que ces questions concernent votre santé et donc sont des données personnelles médicales très sensibles, RIEN sur cette page est enregistré ou stocké.</li><li>En plus, ce page ne demande CERTAINEMENT pas votre coordonnées gps aux endroit ou d\'enregistrer vos données. Ces données pourraient être utilisées pour des protocols de “suivi des contacts” par exemple. C\'est notre conviction que le construction des logiciels pour ces protocols doivent être exécutée par un ONG qui garantissent les normes les plus élevées de sécurité, d\'intégrité et d\'audit constant.</li><li>Toute action que vous effectuez sur cette page sera uniquement traitée via côté client, c\'est-à-dire sur votre appareil, pas en ligne. Et donc pas envoyé ou stocké nulle part!</li><li>Le code source de cette page est <a href="https://github.com/WaitsApp-Open/checkgesprek">entièrement open source</a> et transparent (et téléchargeable et réutilisable!) Vous pouvez <a href="https://github.com/WaitsApp-Open/checkgesprek">trouver le code ici</a>.</li><li>Si, par exemple, vous mettez votre téléphone en mode avion, vous verrez que la fonctionnalité de la page reste intacte.</li></ol>',
"readmore":"Votre vie privée est importante!",
"startbutton":"Commencez Autotest"
},
"emoji": "🇫🇷"
},
"de": {
"q": [
"Hatten Sie in den letzten 24 Stunden oder im Moment eine oder mehrere der folgenden (leichten) Beschwerden: Nasenkälte, Husten, Atemnot und / oder Fieber (ab 38 Grad Celsius)?",
"Haben Sie derzeit einen Mitbewohner / ein Familienmitglied mit Fieber und / oder Atemnot?",
"Hatten Sie das neue Coronavirus (diagnostiziert mit einem Labortest) und wurde es in den letzten 7 Tagen diagnostiziert?",
"Haben Sie einen Mitbewohner / ein Familienmitglied mit dem neuen Coronavirus (diagnostiziert mit einem Labortest) und hatten Sie vor weniger als 14 Tagen Kontakt zu diesem Mitbewohner / Familienmitglied, während er / sie noch Beschwerden hatte?",
"Sind Sie zu Hause isoliert, weil Sie direkten Kontakt zu jemandem hatten, bei dem das neue Coronavirus diagnostiziert wurde?"
],
"a": ["ja","nein"],
"explain": {
"intro":'Willkommen zum Check Gespräch. Diese enthält eine Reihe von Fragen, die im Rahmen des Gesundheitschecks an Besucher und Mitarbeiter gestellt werden müssen.',
"bodytxt":'<ul><li>Basierend auf der Idee, sensible medizinische Daten so sicher wie möglich zu behandeln, wird NICHTS dieser Webseite gespeichert.</li><li>Außerdem werden Sie auf dieser Seite NICHT aufgefordert, an einem Ort einzuchecken oder Ihre Daten zu hinterlassen, beispielsweise zum Zwecke der Kontaktrecherche.</li><li>Alle Aktionen, die Sie auf dieser Seite ausführen, werden nur auf dieser Seite verarbeitet und daher nicht über das Internet gesendet.<i>Und deshalb nirgendwo verschickt oder gespeichert.</i>.</li><li>Der Quellcode dieser Seite ist <a href="https://github.com/WaitsApp-Open/checkgesprek">vollständig Open Source</a> und transparent (und kann heruntergeladen und wiederverwendet werden!) Und ist <a href="https://github.com/WaitsApp-Open/checkgesprek">hier zu finden</a>.</li><li>Sie können die Verbindung zum Internet trennen, indem Sie beispielsweise Ihr Telefon in den Flugzeugmodus versetzen. Sie werden sehen, dass die Funktionalität erhalten bleibt.</li></ul>',
"readmore":'Ihre Privatsphäre ist wichtig. Wirklich!',
"startbutton": "Start Check Gespräch"
},
"emoji": "🇩🇪"
}
};
// answers holds an array with the answers given by the guest
function timeSince(date) {
if (typeof date !== 'object') {
date = new Date(date*1000);
}
var seconds = Math.floor((new Date() - date) / 1000);
var interval = Math.floor(seconds / 31536000);
if (interval > 1) {
return interval + " year";
}
interval = Math.floor(seconds / 2592000);
if (interval > 1) {
return interval + " min";
}
interval = Math.floor(seconds / 86400);
if (interval > 1) {
return interval + " day";
}
interval = Math.floor(seconds / 3600);
if (interval > 1) {
return interval + " hr";
}
interval = Math.floor(seconds / 60);
if (interval > 1) {
return interval + " min";
}
return Math.floor(seconds) + " sec";
}
function startCheck() {
// fill question
nextQuestion();
// fill language answer yes/no
$('#buttrue').text(questions[language].a[0]);
$('#butfalse').text(questions[language].a[1]);
// hide explainer.
$('#explain').hide();
$('#testblock').show();
// showcheck
}
function answer(val) {
answers[currentquestion] = val;
currentquestion++;
nextQuestion();
}
function updateProgressbar() {
var pw = currentquestion / questions[language].q.length * 100;
$('#progress').attr('style','width: '+pw+'%').text(pw+'%');
}
function nextQuestion() {
if(currentquestion >= questions[language].q.length) {
// no more questsions.
// caculate result
updateProgressbar();
calculateResult();
} else {
$("#question").text(questions[language].q[currentquestion]);
updateProgressbar();
}
}
function updateTime() {
$('#timeago').text(timeSince(starttime));
}
function calculateResult() {
starttime = new Date();
for(k in answers) {
if(answers[k]) {
// some value is truthy, user will not pass check.
return drawResult("FAIL");
break;
}
}
return drawResult("PASS");
}
function drawResult(result) {
if(result === "FAIL") {
$('#resultimg').attr('src', 'fail.png');
$('#resultbody').addClass('bg-danger');
} else {
$('#resultimg').attr('src', 'pass.png');
$('#resultbody').addClass('bg-success');
}
$('#resultunder').text(result);
if(venue) {
$('#resulttitle').text(decodeURIComponent(venue));
} else {
$('#resulttitle').text(result);
}
$('#result_dialog').modal(
{
backdrop: 'static',
keyboard: false
}
).modal('show');
setInterval(updateTime, 1000);
}
function resetit() {
// reset questions
try {
clearInterval(updateTime);
} catch (err) { }
currentquestion = 0;
// reset answers
answers = [];
drawUI();
}
function drawUI() {
updateProgressbar();
// remove background testresult;
$('#resultbody').removeClass('bg-danger').removeClass('bg-success');
// show explainer.
$('#explain').show();
// // hide testblock;
$('#testblock').hide();
// fill texts
$('#explain_intro').html(questions[language].explain.intro);
$('#explain_body').html(questions[language].explain.bodytxt);
$('#explainlink').text(questions[language].explain.readmore);
$('#explain_start').text(questions[language].explain.startbutton)
$('#languages').html('');
for(var lang in questions) {
if(lang != language) {
$('#languages').append("<button class='btn btn-lg btn-link' onclick='setLanguage(\""+lang+"\")'>"+questions[lang].emoji+"</button>");
}
}
}
function setLanguage(lan) {
if(questions.hasOwnProperty(lan)){
language = lan;
}
resetit();
}
var getQueryString = function ( field, url ) {
var href = url ? url : window.location.href;
var reg = new RegExp( '[?&]' + field + '=([^&#]*)', 'i' );
var string = reg.exec(href);
return string ? string[1] : null;
};
$(document).ready(function() {
venue = getQueryString("venue");
if(venue) {
$('#venue').text("> "+decodeURIComponent(venue));
}
if(getQueryString("lang")) {
language = getQueryString("lang");
}
setLanguage(language);
});
</script>
</body>
</html>