forked from mtouloup/covid19-visualization-cyprus
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathprevention.html
417 lines (397 loc) · 27.7 KB
/
prevention.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
<!DOCTYPE html>
<html lang="zxx" class="js">
<head>
<meta charset="utf-8">
<meta name="author" content="Softnio">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<!-- Fav Icon -->
<link rel="shortcut icon" href="images/favicon.png">
<!-- Site Title -->
<title>COVID-19 Cyprus Visual Guide</title>
<!-- Bundle and Base CSS -->
<link rel="stylesheet" href="assets/css/bundle.css?ver=100">
<link rel="stylesheet" href="assets/css/styles.css?ver=100">
<!-- AmCharts Resources -->
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
</head>
<body class="nk-body">
<div class="nk-wrap">
<header class="nk-header bg-light has-overlay" id="home">
<div class="overlay shape shape-a"></div><!-- Overlay Shape -->
<div class="nk-navbar is-light is-sticky" id="navbar">
<div class="container-fluid">
<div class="nk-navbar-wrap">
<div class="nk-navbar-logo logo">
<a class="logo-link">
<img class="logo-dark" src="images/logo-dark.png" srcset="images/logo-dark2x.png 2x" alt="logo">
<img class="logo-light" src="images/logo-white.png" srcset="images/logo-white2x.png 2x" alt="logo">
</a>
</div><!-- .nk-navbar-logo -->
<div class="nk-navbar-toggle d-lg-none">
<a href="#" class="toggle" data-menu-toggle="navbar-menu"><em class="icon-menu icon ni ni-menu"></em><em class="icon-close icon ni ni-cross"></em></a>
</div><!-- .nk-navbar-toggle -->
<nav class="nk-navbar-menu" id="navbar-menu">
<ul class="nk-menu">
<li class="nk-menu-item"><a class="scrollto nav-link nk-menu-link" href="index.html">Home</a></li>
<li class="nk-menu-item"><a class="scrollto nav-link nk-menu-link" href="index.html">Cyprus Data</a></li>
<li class="nk-menu-item"><a class="scrollto nav-link nk-menu-link" href="about.html">About Covid-19</a></li>
<li class="nk-menu-item"><a class="scrollto nav-link nk-menu-link" href="symptoms.html">Symptoms</a></li>
<li class="nk-menu-item"><a class="scrollto nav-link nk-menu-link" href="prevention.html">Prevention</a></li>
<li class="nk-menu-item"><a class="scrollto nav-link nk-menu-link" href="treatment.html">Treatment</a></li>
<li class="nk-menu-item"><a class="scrollto nav-link nk-menu-link" href="index.html#faq">FAQ</a></li>
</ul>
<ul class="nk-menu-btns">
<li class="nk-menu-item"><a href="index.html#protect" class="btn btn-sm scrollto nav-link">Do & Don’t</a></li>
</ul>
</nav><!-- .nk-navbar-menu -->
</div><!-- .nk-navbar-wrap -->
</div><!-- .container -->
</div><!-- .nk-navbar -->
<div class="nk-banner" style="min-height: 0px;">
</div><!-- .nk-banner -->
</header><!-- .nk-header -->
<main class="nk-pages">
<section class="section section-l bg-light section-advice pb-0 ov-h" id="prevention">
<div class="container">
<div class="section-head text-center wide-lg">
<h5 class="subtitle">How to Protect Yourself?</h5>
<h2 class="title">Prevention <br class="d-sm-none"> & advice</h2>
<p align="justify">There is currently no vaccine to prevent coronavirus disease 2019 (COVID-19). <strong>The best way to prevent illness is to avoid being exposed to this virus.</strong> Stay aware of the latest information on the COVID-19 outbreak, available on the WHO website and through your national and local public health authority. </p>
</div><!-- .section-head -->
<div class="section-content">
<div class="row g-gs gy-sm-m">
<div class="col-lg-3 col-sm-6">
<div class="box3">
<div class="box3-gfx">
<img src="images/gfx/advice-a.png" alt="">
</div>
<div class="box3-content">
<h5 class="title">Wash your hands frequently</h5>
<p align="justify">Regularly and thoroughly clean your hands with an alcohol-based hand rub or wash them with soap and water for at least 20 seconds.</p>
</div>
</div><!-- .box3 -->
</div><!-- .col -->
<div class="col-lg-3 col-sm-6">
<div class="box3">
<div class="box3-gfx">
<img src="images/gfx/advice-b.png" alt="">
</div>
<div class="box3-content">
<h5 class="title">Maintain social distancing</h5>
<p align="justify">Maintain at least 1 metre (3 feet) distance between yourself & anyone who is coughing or sneezing. If you are too close, get chance to infected.</p>
</div>
</div><!-- .box3 -->
</div><!-- .col -->
<div class="col-lg-3 col-sm-6">
<div class="box3">
<div class="box3-gfx">
<img src="images/gfx/advice-c.png" alt="">
</div>
<div class="box3-content">
<h5 class="title">Avoid touching face</h5>
<p align="justify">Hands touch many surfaces and can pick up viruses. So, hands can transfer the virus to your eyes, nose or mouth and can make you sick.</p>
</div>
</div><!-- .box3 -->
</div><!-- .col -->
<div class="col-lg-3 col-sm-6">
<div class="box3">
<div class="box3-gfx">
<img src="images/gfx/advice-d.png" alt="">
</div>
<div class="box3-content">
<h5 class="title">Practice respiratory hygiene</h5>
<p align="justify">Maintain good respiratory hygiene as covering your mouth & nose with your bent elbow or tissue when cough or sneeze.</p>
</div>
</div><!-- .box3 -->
</div><!-- .col -->
</div><!-- .row -->
<ul class="section-actions">
<li><a href="#handwash" class="btn scrollto"><span>Check how you wash hand</span><em class="icon ni ni-arrow-long-right"></em></a></li>
<li><a href="#faq" class="btn btn-transparent scrollto"><span>Q&A on Coronaviruses</span><em class="icon ni ni-arrow-long-right"></em></a></li>
</ul><!-- .section-actions -->
</div><!-- .section-content -->
</div><!-- .container -->
</section><!-- .section -->
<section class="section section-l bg-light section-steps pb-4" id="steps">
<div class="container">
<div class="section-content section-content-boxed">
<div class="row g-gs justify-content-center align-items-center">
<div class="col-lg-8">
<div class="list-block pr-lg-4">
<h4 class="title">Take steps to protect others</h4>
<ul class="list-check">
<li><strong>Stay home if you’re sick</strong> – Stay home if you are sick, except to get medical care.</li>
<li><strong>Cover your mouth and nose</strong> – with a tissue when you cough or sneeze (throw used tissues in the trash) or use the inside of your elbow.</li>
<li><strong>Wear a facemask if you are sick</strong> – You should wear a facemask when you are around other people (e.g., sharing a room or vehicle) and before you enter a healthcare provider’s </li>
<li><strong>Clean AND disinfect frequently touched surfaces daily</strong> – This includes phones, tables, light switches, doorknobs, countertops, handles, desks, toilets, faucets, and sinks.</li>
<li><strong>Clean the dirty surfaces</strong> – Use detergent or soap and water prior to disinfection.</li>
<li><strong>Stay informed about the local COVID-19 situation</strong> – Get up-to-date information about local COVID-19 activity from public health officials.</li>
<li><strong>Dedicated, lined trash can</strong> – If possible, dedicate a lined trash can for the ill person. Use gloves when removing garbage bags, and handling & disposing of trash.</li>
</ul>
</div><!-- .list-block -->
</div><!-- .col -->
<div class=" col-sm-10 col-md-8 col-lg-4">
<img src="images/gfx/steps.png" class="mb-2 mb-sm-0" alt="">
</div><!-- .col -->
</div><!-- .row -->
</div><!-- .section-content -->
</div><!-- .container -->
</section><!-- .section -->
<section class="section section-l bg-light section-handwash" id="handwash">
<div class="container mt-n4">
<div class="section-subhead text-center">
<h4 class="title">Follow steps to <br class="d-sm-none"> wash hands</h4>
<a href="#faq" class="btn btn-sm btn-transparent scrollto"><span>Why do I need wash hand</span><em class="icon ni ni-arrow-long-right"></em></a>
</div>
<div class="section-content">
<div class="row g-gs justify-content-center">
<div class="col-6 col-mb-5 col-sm-4 col-lg-2">
<div class="box4">
<div class="box4-gfx">
<img src="images/gfx/hand-a.png" alt="">
</div>
<div class="box4-content">
<h6 class="title">Soap on Hand</h6>
</div>
</div><!-- .box4 -->
</div><!-- .col -->
<div class="col-6 col-mb-5 col-sm-4 col-lg-2">
<div class="box4">
<div class="box4-gfx">
<img src="images/gfx/hand-b.png" alt="">
</div>
<div class="box4-content">
<h6 class="title">Palm to Palm</h6>
</div>
</div><!-- .box4 -->
</div><!-- .col -->
<div class="col-6 col-mb-5 col-sm-4 col-lg-2">
<div class="box4">
<div class="box4-gfx">
<img src="images/gfx/hand-c.png" alt="">
</div>
<div class="box4-content">
<h6 class="title">Between Fingers</h6>
</div>
</div><!-- .box4 -->
</div><!-- .col -->
<div class="col-6 col-mb-5 col-sm-4 col-lg-2">
<div class="box4">
<div class="box4-gfx">
<img src="images/gfx/hand-d.png" alt="">
</div>
<div class="box4-content">
<h6 class="title">Back to Hands</h6>
</div>
</div><!-- .box4 -->
</div><!-- .col -->
<div class="col-6 col-mb-5 col-sm-4 col-lg-2">
<div class="box4">
<div class="box4-gfx">
<img src="images/gfx/hand-e.png" alt="">
</div>
<div class="box4-content">
<h6 class="title">Clean with Water</h6>
</div>
</div><!-- .box4 -->
</div><!-- .col -->
<div class="col-6 col-mb-5 col-sm-4 col-lg-2">
<div class="box4">
<div class="box4-gfx">
<img src="images/gfx/hand-f.png" alt="">
</div>
<div class="box4-content">
<h6 class="title">Focus on Wrist</h6>
</div>
</div><!-- .box4 -->
</div><!-- .col -->
</div><!-- .row -->
</div><!-- .section-content -->
</div><!-- .container -->
</section><!-- .section -->
<section class="section section-l bg-accent-light tc-light section-treatment has-overlay" id="treatment">
<div class="overlay shape shape-b"></div><!-- Overlay Shape -->
<div class="container">
<div class="section-content">
<div class="row g-gs gy-sm-m justify-content-between align-items-center">
<div class="col-lg-7 col-xl-6">
<div class="text-block">
<h5 class="subtitle">Be carefull & Stay Safe</h5>
<h2 class="title">Treatment for coronavirus</h2>
<p align="justify"> <strong>To date, there is no vaccine and no specific antiviral medicine to prevent or treat COVID-2019. </strong> However, those affected should receive care to relieve symptoms. People with serious illness should be hospitalized. Most patients recover thanks to supportive care.</p>
<p align="justify">Antibiotics do not help, as they do not work against viruses. Treatment aims to relieve the symptoms while your body fights the illness. You'll need to stay in isolation, away from other people, until you have recovered.</p>
</div><!-- .text-block -->
</div><!-- .col -->
<div class="col-lg-5">
<div class="box5 bg-accent-dark">
<h6 class="title">Self Care</h6>
<p>If you have mild symptoms, stay at home until you’ve recovered. You can relieve your symptoms if you:</p>
<ul class="list-arrow">
<li>Rest and sleep</li>
<li>Keep warm</li>
<li>Drink plenty of liquids</li>
<li>Use a room humidifier or take a hot shower to help ease a sore throat and cough</li>
</ul>
<h6 class="title">Medical Treatments</h6>
<p align="justify">If you develop a fever, cough, and have difficulty breathing, promptly seek medical care. Call in advance and tell your health provider of any recent travel or recent contact with travelers.</p>
</div><!-- .box5 -->
</div><!-- .col -->
</div><!-- .row -->
</div><!-- .section-content -->
</div><!-- .container -->
</section><!-- .section -->
<section class="section section-l bg-light section-protect" id="protect">
<div class="container">
<div class="section-head text-center wide-lg">
<h5 class="subtitle">Do’s & Don’ts</h5>
<h2 class="title">Protect yourself</h2>
<p align="justify">The best thing you can do now is plan for how you can adapt your daily routine. Take few steps to protect yourself as Clean your hands often, Avoid close contact, Cover coughs and sneezes, clean daily used surfaces etc. The best way to prevent illness is to avoid being exposed to this virus.</p>
</div><!-- .section-head -->
<div class="section-content">
<div class="row g-gs justify-content-center flex-lg-nowrap">
<div class="col-md-8 col-lg-5 col-xl-6 align-self-end">
<div class="protect-block-gfx">
<img src="images/gfx/protect.png" alt="">
</div>
</div><!-- .col -->
<div class="col-6 col-mb-5 col-sm-6 col-lg-4 col-xl-3 flex-grow-1 order-lg-first">
<div class="protect-item negative">
<div class="protect-gfx">
<img src="images/gfx/donts-a.png" alt="">
</div>
<div class="protect-text">
<h5 class="title">Avoid Close Contact</h5>
</div>
</div><!-- .protext-item -->
<div class="protect-item negative">
<div class="protect-gfx">
<img src="images/gfx/donts-b.png" alt="">
</div>
<div class="protect-text">
<h5 class="title">Don’t Touch Face</h5>
</div>
</div><!-- .protext-item -->
<div class="protect-item negative">
<div class="protect-gfx">
<img src="images/gfx/donts-c.png" alt="">
</div>
<div class="protect-text">
<h5 class="title">Social Distancing</h5>
</div>
</div><!-- .protext-item -->
</div><!-- .col -->
<div class="col-6 col-mb-5 col-sm-6 col-lg-4 col-xl-3 flex-grow-1 ">
<div class="protect-item positive">
<div class="protect-gfx">
<img src="images/gfx/dos-a.png" alt="">
</div>
<div class="protect-text">
<h5 class="title">Wash Your Hands</h5>
</div>
</div><!-- .protext-item -->
<div class="protect-item positive">
<div class="protect-gfx">
<img src="images/gfx/dos-b.png" alt="">
</div>
<div class="protect-text">
<h5 class="title">Drink Much Watar</h5>
</div>
</div><!-- .protext-item -->
<div class="protect-item positive">
<div class="protect-gfx">
<img src="images/gfx/dos-c.png" alt="">
</div>
<div class="protect-text">
<h5 class="title">Use Face Mask</h5>
</div>
</div><!-- .protext-item -->
</div><!-- .col -->
</div><!-- .row -->
</div><!-- .section-content -->
</div><!-- .container -->
</section><!-- .section -->
</main><!-- .nk-pages -->
<footer class="nk-footer bg-dark tc-light has-overlay">
<div class="overlay shape shape-c"></div><!-- Overlay Shape -->
<section class="section section-footer section-m tc-light">
<div class="container">
<div class="nk-footer-top">
<div class="row g-gs gy-m">
<div class="col-lg-6 col-md-9 mr-auto">
<div class="wgs wgs-about">
<div class="wgs-logo logo">
<a class="logo-link">
<img src="images/logo-white.png" srcset="images/logo-white2x.png 2x" alt="logo">
</a>
</div>
<div class="wgs-about-text">
<p> This website will try to bring awareness to the people especially on what the virus is, how to prevent the spread etc. The website is also using public data provided by the Johns Hopkins University Center for Systems Science and Engineering (JHU CCSE), in order to visualize the COVID-19 outbreak in Cyprus. </p>
<p>Learn about the Cyprus government response to coronavirus at <a href="https://www.pio.gov.cy/coronavirus/" target="_blank">https://www.pio.gov.cy/coronavirus</a></p>
</div>
<!--
<ul class="wgs-social">
<li><a href="https://www.linkedin.com/in/marios-touloupos-967a69110/" target="_blank"><em class="icon ni ni-linkedin"></em></a></li>
<li><a href="https://www.linkedin.com/in/evgenia-kapassa-abb720107/" target="_blank"><em class="icon ni ni-linkedin"></em></a></li>
</ul>
-->
</div><!-- .wgs -->
</div><!-- .col -->
<div class="col-sm-3 col-lg-3">
<div class="wgs wgs-menu">
<h6 class="wgs-title">Quick Link</h6>
<ul class="wgs-links">
<li><a class="scrollto" href="symptoms.html">Symptoms</a></li>
<li><a class="scrollto" href="prevention.html">Prevention</a></li>
<li><a class="scrollto" href="index.html#protect">Protect Youself</a></li>
<li><a class="scrollto" href="index.html#faq">FAQs</a></li>
<li><a class="scrollto" href="about.html">About Corona</a></li>
</ul>
</div><!-- .wgs -->
</div><!-- .col -->
</div><!-- .row -->
</div><!-- .nk-footer-top -->
<div class="nk-footer-bottom">
<div class="row align-items-center">
<div class="col-md-12">
<p class="nk-copyright">© 2020 COVID-19 Cyprus Visualization. Template Made by <a href="https://softnio.com" target="_blank">Softnio, Edited by <strong> <a href="https://www.unic.ac.cy/iff/people/" target="_blank">Marios Touloupos</a>,<a href="https://www.unic.ac.cy/iff/people/" target="_blank"> Evgenia Kapassa </a></a></p>
</div><!-- .col -->
</div><!-- .row -->
<div class="row">
<div class="col-12">
<div class="nk-dislaimer">
<p>Disclaimer: We hope you find the information presented on this website useful. This website is for general information and raise awareness of (2019-nCoV) only. <br class="d-none d-lg-block">
All the information based on WHO, NHS and CDC website. The data used is provided by the Johns Hopkins University Center for Systems Science and Engineering (JHU CCSE). <br class="d-none d-lg-block">
Information on our website is meant for awareness, if you have any doubt please verify from respective site.</p>
</div>
</div>
</div>
</div><!-- .nk-footer-bottom -->
</div><!-- .container -->
</section><!-- .section -->
</footer><!-- .nk-footer -->
</div><!-- .nk-wrap -->
<!-- JavaScript -->
<script src="assets/js/bundle.js?ver=100"></script>
<script src="assets/js/scripts.js?ver=100"></script>
<script src="assets/js/amcharts_scripts_active_cases.js"></script>
<script src="assets/js/amcharts_scripts_recover_cases.js"></script>
<script src="assets/js/amcharts_scripts_death_cases.js"></script>
<script src="assets/js/table_last_cases.js"></script>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-162710453-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-162710453-1');
</script>
</body>
</html>