/
index.html
303 lines (277 loc) · 15.6 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
<!doctype html>
<html xmlns="http://www.w3.org/1999/html">
<!--
Colour Palette:
Colour | Hex | Materialize
--------+-----------+--------------
Red | #d50000 | red accent-4
Cyan | #0097a7 | cyan darken-2
White | #ffffff | white
Black | #000000 | black
-->
<head>
<!-- === Begin 3rd party dependencies === -->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-135027670-3"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'UA-135027670-3');
</script>
<!--- fav icons -->
<link rel="apple-touch-icon" sizes="57x57" href="icons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="icons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="icons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="icons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="icons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="icons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="icons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="icons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="icons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="icons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
<!-- Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Material Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>
<!-- === End 3rd party dependencies === -->
<!-- Logic -->
<script src="./js/script.js?qw54r" rel="script"></script>
<!-- Metadata -->
<title>COVID-19 Infographics</title>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="COVID-19 Infographics created by a group of doctors, medical students and volunteers that are available in more than 50 languages">
<meta name="viewport" content="width=device-width, initial-scale=1 minimum-scale=1.0, maximum-scale=1.0">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="icons/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<!-- Manifest -->
<link rel="manifest" href="/manifest.json">
<!-- Style -->
<link href="css/style.css" rel="stylesheet">
</head>
<div id="fb-root"></div>
<script async defer crossorigin="anonymous"
src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v6.0"></script>
<!-- === Begin Content === -->
<nav class="cyan darken-2">
<div class="brand-logo center">COVID-19 Infographics</div>
<ul class="right hide-on-med-and-down nav-mobile">
<li><a href="pages/get-involved.html">Get involved</a></li>
<li><a href="pages/resources.html">Well-being</a></li>
<li><a href="pages/privacy-policy.html">Privacy Policy</a></li>
</ul>
</nav>
<main class="white">
<div class="container row">
<div class="col s12 m8">
<div id="missionContainer" class="col s12">
<div class="card grey lighten-4">
<div class="card-content">
<span class="card-title cyan-text text-darken-2">Our Mission</span>
<p>As a group of doctors, medical students and volunteers, we’ve created infographics to help
summarise key points about COVID-19 in a variety of languages to get the right information,
in
an easy to understand format, to these communities.</p>
<br/>
<p>Follow the steps below to view or download an infographic in your preferred langauge.</p>
<p class="red-text">We're currently working on a on-request basis, therefore if there are any resources which are not available in your required language, please get in touch with us via email or
social media platforms and we can arrange for them to be made available!</p>
</div>
</div>
</div>
<div id="card1Container" class="col s12">
<div class="card grey lighten-4" id="language_selection">
<div class="card-content">
<span class="card-title cyan-text text-darken-2">Step 1</span>
<p class="black-text">First, select your preferred language</p>
<br/>
<div onclick="resetSelection()">
<select class="white materialSelect browser-default" id="lanSel"
onchange="showLanguageInfos()">
<option value="" disabled selected>Choose here...</option>
</select>
</div>
</div>
</div>
</div>
<div id="card2Container" class="col s12">
<div class="card grey lighten-4" id="infographic_selection">
<div class="card-content">
<span class="card-title cyan-text text-darken-2">Step 2</span>
<p class="black-text">View or download infographics from the list below by clicking either of
the two options</p>
<br/>
<ul id="allGraphics" class="collapsible">
<li class="collection-item">
<div class="red-text">Please Select a language first
<a href="#!" class="secondary-content" style="visibility: hidden">
<i class="material-icons ">file_download</i>
</a>
</div>
</li>
</ul>
<br/>
<p class="black-text">You can share the infographics with others using the buttons below</p>
</div>
<div class="card-action center">
<a id="facebookSocial" class="flow-text" href="#"><i class="fa fa-facebook"></i></a>
<a id="twitterSocial" class="flow-text" href="#"><i class="fa fa-twitter"></i></a>
<a id="mailSocial" class="flow-text" href="#"><i class="fa fa-envelope"></i></a>
<a id="whatsappSocial" class="flow-text" href="#"><i class="fa fa-whatsapp"></i></a>
</div>
</div>
</div>
</div>
<div class="col s12 m4">
<div class="col s12">
<div class="card grey lighten-4">
<div class="card-content">
<span class="card-title cyan-text text-darken-2">Well-being</span>
<p>We have created a list of all the services offering
support to BAME groups in each region of the UK.</p>
<a href="pages/resources.html">Click here to find one near you</a>
</div>
</div>
</div>
<div id="socialContainer" class="col s12">
<div class="card grey lighten-4">
<div class="card-content">
<span class="card-title cyan-text text-darken-2">Share & Get Involved</span>
<div class="fb-like left" data-href="https://www.facebook.com/COVID2019Infographics"
data-width="" data-layout="box_count" data-action="like" data-size="small"
data-share="true"
style="margin-right: 5px;"></div>
<p class="black-text">Like our Facebook page and share it with your friends! Please consider
getting involved.</p>
</div>
<div class="card-action">
<a href="/pages/get-involved.html">We have open roles, get involved now!</a>
</div>
</div>
</div>
<div class="col s12">
<div class="card grey lighten-4">
<div class="card-content">
<a class="twitter-timeline" data-height="420"
href="https://twitter.com/C19Infographics?ref_src=twsrc%5Etfw">Tweets by C19Infographics</a>
</div>
</div>
</div>
</div>
<div class="col s12">
<div class="card grey lighten-4">
<div class="card-content">
<span class="card-title cyan-text text-darken-2">Does your organisation want to use our resources?</span>
<p>To keep track of which organisations are using our resources and ensure you are receiving
relevant and updated information, we kindly request organisations to register your interest.
We would be very happy to work with you to tailor our resource to your members.
Please contact us at covid19infographics@gmail.com for further information.</p>
<div class="row">
<form class="col s12" method="GET" action="" onsubmit="sendEmail()">
<div class="row">
<div class="input-field col s6">
<i class="material-icons prefix">account_circle</i>
<input id="name" type="text" class="validate" required>
<label for="name">Full Name</label>
</div>
<div class="input-field col s6">
<i class="material-icons prefix">email</i>
<input id="mail-email" type="email" class="validate" required>
<label for="mail-email">Email</label>
</div>
<div class="input-field col s6">
<i class="material-icons prefix">mode_edit</i>
<textarea id="role-email" class="materialize-textarea" required></textarea>
<label for="role-email">Role</label>
</div>
<div class="input-field col s6">
<i class="material-icons prefix">mode_edit</i>
<textarea id="org-email" class="materialize-textarea" required></textarea>
<label for="org-email">Organisation</label>
</div>
</div>
<button class="btn waves-effect waves-light" type="submit">Open Mail client
<i class="material-icons right">send</i>
</button>
</form>
<div class="input-field col s12">
<label class="red-text">If the above does not work, please send an email to <span
class="blue-text">covid19infographics@gmail.com</span></label>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="page-footer grey darken-2">
<div class="container grey-text text-lighten-2">
<div class="row">
<div class="col s12 m6">
<h5 class="grey-text text-lighten-1">Links</h5>
<ul>
<li><u><a class="cyan-text text-lighten-2" href="pages/get-involved.html">
We have open roles, Get Involved!</a></u></li>
<li><u><a class="cyan-text text-lighten-2" href="https://www.facebook.com/COVID2019Infographics">
COVID-19 Infographics Facebook</a></u></li>
<li><u><a class="cyan-text text-lighten-2" href="mailto:covid19infographics@gmail.com?subject=Hi">
Contact us</a></u></li>
</ul>
</div>
<div class="col s12 m6">
<h5 class="grey-text text-lighten-1">Sources</h5>
<div class="row">
</br>
<div class="col s6">
<a href="https://www.facebook.com/COVID2019Infographics">
<img src="assets/logo-400x400.jpg" height="40px" alt="logo"></a>
</div>
<div class="col s6">
<a href="https://www.nice.org.uk/covid-19">
<img src="assets/nice.png" height="40px"> </a>
</div>
<div class="col s6">
<a href="https://www.nhs.uk/conditions/coronavirus-covid-19">
<img src="assets/NHS-Logo.svg" height="40px"> </a>
</div>
<div class="col s6">
<a href="https://www.who.int/emergencies/diseases/novel-coronavirus-2019">
<img src="assets/who.png" height="40px"> </a>
</div>
</div>
</div>
</div>
</div>
<div class="footer-copyright grey-text text-lighten-1">
<div class="container">
<div class="left">© 2020 Copyright</div>
<div class="right">
<span>Developers: </span>
<a href="https://baizel.dev"><img class="img-icon"
src="https://avatars1.githubusercontent.com/u/14371879?s=460&u=93c44dd1020f86976cc852d01bd170138ebb1f31&v=4"></a>
<a href="http://szy.wtf"><img class="img-icon"
src="https://avatars3.githubusercontent.com/u/19878551?s=460&u=84d35790c466c07ba4dd3f6fd0b0c1823e1bb98c&v=4"></a>
<span> | </span>
<a class="cyan-text text-lighten-2" href="https://github.com/baizel/covidinfographics">Source code</a>
</div>
</div>
</div>
</footer>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<!-- === End Content === -->
</html>