-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
316 lines (307 loc) · 18.4 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
<!DOCTYPE html>
<html lang='en-us'>
<head>
<!--meta-->
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<!--css-->
<link href='./assets/css/plover.css' rel='stylesheet' type='text/css'>
<!--moment-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js'></script>
<!-- font awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href='style.css' rel='stylesheet' type='text/css'>
<title>COVID Danger Data for California</title>
</head>
<body class='flexwrap'>
<ul id="dropdown1" class="dropdown-content">
<li><a href="#!">California</a></li>
<li class="divider"></li>
<li><a href="#!">Comming soon!</a></li>
</ul>
<nav class="top red darken-2">
<div class="nav-wrapper">
<ul class="left">
<li>
<a href="#" class="lightgrey-text" style='font-size: 2rem;'>COVID Danger Data</a>
</li>
</ul>
<ul class="hide-on-sm-and-down right">
<li>
<a id='drop' class="dropdown-trigger" href="#!" data-target="dropdown1">California<i
class="material-icons right">arrow_drop_down</i></a>
</li>
<li>
<form class="col s12" id="topbarsearch" action="#!">
<div class="input-field col s6 s12 grey-text">
<i class="white-text material-icons prefix" style='top:+.25rem'>search</i>
<input id="userCity" type="text" action="" style='caret-color:white;margin:0;margin-left: 2rem;padding-left:0;background: none;' placeholder="search your county" id="autocomplete-input" class="autocomplete white-text" autocomplete="off">
</div>
</form>
</li>
</ul>
</div>
</nav>
<div id='three-columns' class="body row">
<section id="left-column" class="col s12 m3 l3 grey" style='overflow: auto;'>
<div class="container" style='margin:0; width:100%'>
<section>
<h5>
<i class="material-icons orange-text lighten-1 white">local_fire_department</i> Wildfire Preparedness
</h5>
<ul class="collapsible">
<li class='active'>
<header class="collapsible-header">
<i class="material-icons">drive_eta</i> Evacuation Plan
</header>
<article class="collapsible-body">
<span>According to CalFire, create an
<strong>evacuation plan</strong>
that includes:
<br>
<ul>
<li class="defaultlist">• An emergency meeting location. Consider COVID-19 when
making decisions to stay
with relatives or friends. Ask first if they have
symptoms of COVID-19 or have people in their home at a higher risk for
serious illness.</li>
<li class="defaultlist">• Several escape routes from your home and community
<li class="defaultlist">• Evacuation plan for pets and large animals
<li class="defaultlist">• Family Communication Plan that designates an
out-of-area friend or relative as a
point of contact and single source of information among family members in
case of separation.
</li>
</ul>
</span>
</article>
</li>
<li>
<header class="collapsible-header"><i class="material-icons">add_alert</i> Real Time Alerts
</header>
<article class="collapsible-body">
<span> Sign up for
<strong>mobile text alerts</strong>
with just your mobile number and zip code
<strong><a href="https://plan.readyforwildfire.org/">here:</a></strong>
</span>
</article>
</li>
<li>
<header class="collapsible-header"><i class="material-icons">assignment_turned_in</i>Emergency Supply Kit Checklist
</header>
<article class="collapsible-body"><span>Create an <strong>Emergency Kit</strong> which inlcudes
the following:
<br></br>
<ul>
<li class="defaultlist">• Face masks or coverings</li>
<li class="defaultlist">• Three-day supply of non-perishable food and three
gallons of water per person
</li>
<li class="defaultlist">• Map marked with atleast 2 evacuation routes</li>
<li class="defaultlist">• Medical prescriptions</li>
<li class="defaultlist">• Change of clothing</li>
<li class="defaultlist">• Extra eyeglasses and contact lenses</li>
<li class="defaultlist">• Extra set of car keys, credit cards and cash</li>
<li class="defaultlist">• First aid kit</li>
<li class="defaultlist">• Flashlight</li>
<li class="defaultlist">• Battery powered radio and extra batteries</li>
<li class="defaultlist">• Sanitation supplies</li>
<li class="defaultlist">• Copies of important documents</li>
<li class="defaultlist">• Pet food and water</li>
<li class="defaultlist">• Easily carried valuables</li>
<li class="defaultlist">• Family photos and other irreplacable items</li>
<li class="defaultlist">• Personal computer information on hard drives and discs
</li>
<li class="defaultlist">• Charger for cell phones, laptops, etc.</li>
<br></br>
<p>For more information on emergency supplies, visit
<a href="https://www.ready.gov">www.ready.gov</a>
. </p>
</ul>
</span>
</article>
</li>
</ul>
</section>
<section>
<h5>
<i class="material-icons red-text lighten-1 white">coronavirus</i> Covid-19 Toolkit
</h5>
<ul class="collapsible">
<li>
<header class="collapsible-header">
<i class="material-icons">supervisor_account</i> Symptoms
</header>
<article class="collapsible-body">
<span>
According to the CDC, symptoms may appear 2-14 days after exposure to the virus.
People with these
<strong>symptoms</strong> may have COVID-19:<br>
<ul>
<li class="defaultlist">• Fever or chills</li>
<li class="defaultlist">• Cough</li>
<li class="defaultlist">• Shortness of breath or difficulty breathing</li>
<li class="defaultlist">• Fatigue</li>
<li class="defaultlist">• Muscle or body aches</li>
<li class="defaultlist">• Headache</li>
<li class="defaultlist">• New loss of taste or smell</li>
<li class="defaultlist">• Sore throat</li>
<li class="defaultlist">• Congestion or runny nose</li>
<li class="defaultlist">• Nausea or vomiting</li>
<li class="defaultlist">• Diarrhea</li>
</ul>
<br>
<p>Look for emergency warning signs for COVID-19. If someone is showing any of these
signs,
<strong>seek emergency medical care immediately:</strong>
</p>
<ul>
<li class="defaultlist">• Trouble breathing</li>
<li class="defaultlist">• Persistent pain or pressure in the chest</li>
<li class="defaultlist">• New confusion</li>
<li class="defaultlist">• Inability to wake or stay awake</li>
<li class="defaultlist">• Bluish lips or face</li>
</ul>
<br>
<p>For more information on emergency supplies, visit
<a href="https://www.cdc.gov">cdc.gov</a>
</p>
</span>
</article>
</li>
<li>
<header class="collapsible-header">
<i class="material-icons">local_hospital</i>
Preventive Measures
</header>
<article class="collapsible-body">
<span> Older adults and people who have severe underlying medical conditions like heart
or lung disease or diabetes seem to be at higher risk for developing serious
complications from COVID-19 illness.
<strong> You can protect yourself and your family through simple actions such
as:</strong>
<br></br>
<ul>
<li class="defaultlist">
• Wash your hands with soap and water for 20 seconds or using a hand
sanitizer that contains at least 60% alcohol, especially after being in a
public place, after blowing your nose, coughing or sneezing.
</li>
<li class="defaultlist">
• Cover your mouth and nose with a mask when around others
</li>
<li class="defaultlist">
• Clean and disinfect
</li>
<li class="defaultlist">
• Monitor your health
</li>
</span>
</article>
</li>
</li>
<li>
<header class="collapsible-header">
<i class="material-icons">healing</i> Covid-19 Testing
</header>
<article class="collapsible-body">
<span>There are two types of tests available for Covid-19:
<strong>viral tests and antibody tests</strong>
. A viral test tells you if you have a current infection. An antibody test might
tell you if you had a past infection. An antibody test might not show if you have a
current infection because it can take 1–3 weeks after infection for your body to
make antibodies. Having antibodies to the virus that causes COVID-19 might provide
protection from getting infected with the virus again. If it does, we do not know
how much protection the antibodies might provide or how long this protection might
last.
<br>
<ul>
<li class="defaultlist">
To find a Covid-19 testing site within California,
<a
href="https://www.arcgis.com/apps/Nearby/index.html?appid=43118dc0d5d348d8ab20a81967a15401">
click
here.</a>
</li>
</ul>
</span>
</article>
</li>
</ul>
</section>
</div>
</section>
<section class="col s12 m5 l5 grey lighten-3 flexwrap">
<header>
<label for='weekIndex' class='black-text'>Weeks since the beginning of data (3/20/2020)</label>
</header>
<div class=' block top ' style="display:flex">
<button id="play" class="red-text darken-4 white">
<i class="material-icons">play_arrow</i>
</button>
<button id="pause" class='white-text red' style=' display: none; '>
<i class="material-icons">pause</i>
</button>
<p class="range-field" style=' margin:0;width:-webkit-fill-available '>
<input type="range" id="weekIndex" min="0" max="2" value="2" />
</p>
</div>
<article id="main" class="map">
<div id="map-holder">
<aside id='legend-aside'>
<div id="title">
<i class="material-icons red-text lighten-1 white">coronavirus</i>
<div style=' margin:0; '>
14 day rate per 100k:
</div>
</div>
<div id="legend">
<div class="label">0-15
<div class="r15 legend"></div>
</div>
<div class="label">16-50
<div class="r50 legend"></div>
</div>
<div class="label">51-100
<div class="r100 legend"></div>
</div>
<div class="label">101-200
<div class="r200 legend"></div>
</div>
<div class="label">201-500
<div class="r500 legend"></div>
</div>
<div class="label">501+
<div class="rMore legend"></div>
</div>
</div>
</aside>
</div>
<!--/map-holder-->
</article>
<div id="googMap" style="height: 100%;"></div>
<!--main-->
</section>
<section id='sidePanel' class="col s12 m4 l4 grey lighten-1">
<div id="info"></div>
</section>
</div>
<!--main-->
<!-- jquery -->
<script src=' https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js '></script>
<!-- materialize js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- chart.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<!-- All our API calls and data functions -->
<script src=' ./assets/js/gif-base.js '></script>
<!-- Google map -->
<script src="./assets/js/app.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCDOpl339VCgyBvahm-mHPeQ-GGE3rqcz0&libraries=places&callback=getData">
</script>
</body>
</html>