-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
396 lines (358 loc) · 23.3 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
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0'">
<head>
<title>SatSquatch</title>
<meta charset="utf-8" />
<script src='js/intro.min.js'></script>
<link rel="stylesheet" href="css/leaflet.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/Control.Opacity.css" />
<link rel="stylesheet" href="css/jquery-ui-1.10.3.custom.min.css" />
<link rel="stylesheet" href="css/leaflet-sidebar.css" />
<link rel="stylesheet" href="css/scrubber.css" />
<link rel="stylesheet" href="css/L.Control.Locate.css" />
<link rel="stylesheet" href="css/dragdealer.css" />
<link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="css/simplebar.css" />
<link rel="stylesheet" href="css/login.css" />
<link rel="stylesheet" href="css/introjs.css" />
<link rel="stylesheet" href="css/introjs-modern.css" />
<link rel="stylesheet" href="css/sort.css" />
<script src="js/leaflet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<script src="js/map.js"></script>
<script src="js/leaflet-providers.js"></script>
<script src="js/Control.Opacity.js"></script>
<script src="js/leaflet-sidebar.js"></script>
<script src="js/scrubber.js"></script>
<script src="js/bigSlide.min.js"></script>
<script src="js/L.Control.Locate.min.js"></script>
<script src="js/leaflet.timedimension.min.js"></script>
<script src="js/iso8601.min.js"></script>
<script src="js/dragdealer.js"></script>
<script src="js/simplebar.js"></script>
<script src="js/jquery.vibrate.min.js"></script>
<script src='js/jquery.fullscreen-min.js'></script>
<script src='js/progressbar.min.js'></script>
<script src='js/html2canvas.js'></script>
<script src='js/html2canvas.svg.js'></script>
<script src='js/leaflet.ajax.min.js'></script>
<script src='js/leaflet-image.js'></script>
<script src='js/spin.min.js'></script>
<script src='js/Sortable.min.js'></script>
</head>
<html>
<body>
<div id='all-content'>
<nav id="menu" class="panel" role="navigation">
<div id='layers-content'>
<div class='close-div' id='layers-close-div'>
<!-- <h3>Layers</h3> -->
<a href="#menu" id='layers-close' class="close menu-link vibrate"><i class="fa fa-times fa-2x" aria-hidden="true"></i></a>
<input value='layers' id="tab1" type="radio" name="tabs" checked>
<label for="tab1">Layers</label>
<input value="order" id="tab2" type="radio" name="tabs">
<label for="tab2">Order</label>
</div>
<div id='layers-scroll' class='scroll-div'>
<div id='visible-dropdown' class='layer-dropdown'>
<div class='dropdown-header '>
<h3>Visible</h3> <div class='layer-dropdown-arrow'> <i style='color: white;' class="fa fa-chevron-down fa-2x"></i></div>
</div>
<div class='layer-dropdown-content' id='visible'>
<div id='G16-ABI-FD-BAND01' class='single_toggle toggles'>
<h4 class='toggle-label'>GOES-16 Blue Visible Band</h4>
<input data-layer-info='GOES-16 Band 1: Blue Visible ' id="goes16_1_toggle" class="cmn-toggle cmn-toggle-round-flat vibrate-toggle" type="checkbox">
<label for="goes16_1_toggle"></label>
</div>
<div id='GOES16_02' class='single_toggle toggles'>
<h4 class='toggle-label'>GOES-16 Red Visible Band</h4>
<input data-layer-info='GOES-16 Band 2: Red Visible' id="goes16_2_toggle" class="cmn-toggle cmn-toggle-round-flat vibrate-toggle" type="checkbox">
<label for="goes16_2_toggle"></label>
</div>
</div>
</div>
<div id='nearinfrared-dropdown' class='layer-dropdown'>
<div class='dropdown-header '>
<h3>Near Infrared</h3> <div class='layer-dropdown-arrow'> <i style='color: white;' class="fa fa-chevron-down fa-2x"></i></div>
</div>
<div class='layer-dropdown-content' id='nearinfrared'>
<div id='G16-ABI-FD-BAND03' class='single_toggle toggles'>
<h4 class='toggle-label'>GOES-16 Vegetation NIR Band</h4>
<input data-layer-info='GOES-16 Band 3: Vegetation NIR' id="goes16_3_toggle" class="cmn-toggle cmn-toggle-round-flat vibrate-toggle" type="checkbox">
<label for="goes16_3_toggle"></label>
</div>
<div id='G16-ABI-FD-BAND04' class='single_toggle toggles'>
<h4 class='toggle-label'>GOES-16 Cirrus NIR Band</h4>
<input data-layer-info='GOES-16 Band 4: Cirrus NIR' id="goes16_4_toggle" class="cmn-toggle cmn-toggle-round-flat vibrate-toggle" type="checkbox">
<label for="goes16_4_toggle"></label>
</div>
<div id='G16-ABI-FD-BAND05' class='single_toggle toggles'>
<h4 class='toggle-label'>GOES-16 Snow/Ice NIR Band</h4>
<input data-layer-info='GOES-16 Band 5: Snow/Ice NIR' id="goes16_5_toggle" class="cmn-toggle cmn-toggle-round-flat vibrate-toggle" type="checkbox">
<label for="goes16_5_toggle"></label>
</div>
<div id='G16-ABI-FD-BAND06' class='single_toggle toggles'>
<h4 class='toggle-label'>GOES-16 Cloud Particle Size NIR Band</h4>
<input data-layer-info='GOES-16 Band 6: Cloud Particle Size NIR' id="goes16_6_toggle" class="cmn-toggle cmn-toggle-round-flat vibrate-toggle" type="checkbox">
<label for="goes16_6_toggle"></label>
</div>
</div>
</div>
<div id='infrared-dropdown' class='layer-dropdown'>
<div class='dropdown-header '>
<h3>Infrared</h3> <div class='layer-dropdown-arrow'> <i style='color: white;' class="fa fa-chevron-down fa-2x"></i></div>
</div>
<div class='layer-dropdown-content' id='infrared'>
<div id='G16-ABI-FD-BAND07' class='single_toggle toggles'>
<h4 class='toggle-label'>GOES-16 Shortwave Window IR Band</h4>
<input data-layer-info='GOES-16 Band 7: Shortwave Window IR' id="goes16_7_toggle" class="cmn-toggle cmn-toggle-round-flat vibrate-toggle" type="checkbox">
<label for="goes16_7_toggle"></label>
</div>
<div id='G16-ABI-FD-BAND08' class='single_toggle toggles'>
<h4 class='toggle-label'>GOES-16 Upper-level Water Vapor IR Band</h4>
<input data-layer-info='GOES-16 Band 8: Upper-level Water Vapor IR' id="goes16_8_toggle" class="cmn-toggle cmn-toggle-round-flat vibrate-toggle" type="checkbox">
<label for="goes16_8_toggle"></label>
</div>
<div id='G16-ABI-FD-BAND09' class='single_toggle toggles'>
<h4 class='toggle-label'>GOES-16 Mid-level Water Vapor IR Band</h4>
<input data-layer-info='GOES-16 Band 9: Mid-level Water Vapor IR' id="goes16_9_toggle" class="cmn-toggle cmn-toggle-round-flat vibrate-toggle" type="checkbox">
<label for="goes16_9_toggle"></label>
</div>
<div id='G16-ABI-FD-BAND10' class='single_toggle toggles'>
<h4 class='toggle-label'>GOES-16 Low-level Water Vapor IR Band</h4>
<input data-layer-info='GOES-16 Band 10: Low-level Water Vapor IR' id="goes16_10_toggle" class="cmn-toggle cmn-toggle-round-flat vibrate-toggle" type="checkbox">
<label for="goes16_10_toggle"></label>
</div>
<div id='G16-ABI-FD-BAND11' class='single_toggle toggles'>
<h4 class='toggle-label'>GOES-16 Cloud-Top Phase IR Band</h4>
<input data-layer-info='GOES-16 Band 11: Cloud-Top Phase IR' id="goes16_11_toggle" class="cmn-toggle cmn-toggle-round-flat vibrate-toggle" type="checkbox">
<label for="goes16_11_toggle"></label>
</div>
<div id='G16-ABI-FD-BAND12' class='single_toggle toggles'>
<h4 class='toggle-label'>GOES-16 Ozone IR Band</h4>
<input data-layer-info='GOES-16 Band 12: Ozone IR' id="goes16_12_toggle" class="cmn-toggle cmn-toggle-round-flat vibrate-toggle" type="checkbox">
<label for="goes16_12_toggle"></label>
</div>
<div id='G16-ABI-FD-BAND13' class='single_toggle toggles'>
<h4 class='toggle-label'>GOES-16 Clean Window IR Band</h4>
<input data-layer-info='GOES-16 Band 13: Clean Window IR' id="goes16_13_toggle" class="cmn-toggle cmn-toggle-round-flat vibrate-toggle" type="checkbox">
<label for="goes16_13_toggle"></label>
</div>
<div id='G16-ABI-FD-BAND14' class='single_toggle toggles'>
<h4 class='toggle-label'>GOES-16 Legacy Window IR Band</h4>
<input data-layer-info='GOES-16 Band 14: Legacy Window IR' id="goes16_14_toggle" class="cmn-toggle cmn-toggle-round-flat vibrate-toggle" type="checkbox">
<label for="goes16_14_toggle"></label>
</div>
<div id='G16-ABI-FD-BAND15' class='single_toggle toggles'>
<h4 class='toggle-label'>GOES-16 Dirty Window IR Band</h4>
<input data-layer-info='GOES-16 Band 15: Dirty Window IR' id="goes16_15_toggle" class="cmn-toggle cmn-toggle-round-flat vibrate-toggle" type="checkbox">
<label for="goes16_15_toggle"></label>
</div>
<div id='G16-ABI-FD-BAND16' class='single_toggle toggles'>
<h4 class='toggle-label'>GOES-16 Carbon Dioxide IR Band</h4>
<input data-layer-info='GOES-16 Band 16: Carbon Dioxide IR' id="goes16_16_toggle" class="cmn-toggle cmn-toggle-round-flat vibrate-toggle" type="checkbox">
<label for="goes16_16_toggle"></label>
</div>
</div>
</div>
<div id='overlays-dropdown' class='layer-dropdown'>
<div class='dropdown-header '>
<h3>Overlays</h3> <div class='layer-dropdown-arrow'> <i style='color: white;' class="fa fa-chevron-down fa-2x"></i></div>
</div>
<div class='layer-dropdown-content' id='overlays'>
<div id='nexrhres' class='multi_toggle toggles'>
<h4 class='toggle-label'>Filtered NEXRAD</h4>
<input id="nexrad_toggle" class="cmn-toggle cmn-toggle-round-flat vibrate-toggle" type="checkbox">
<label for="nexrad_toggle"></label>
</div>
<div id='SPCcoday1' class='multi_toggle toggles'>
<h4 class='toggle-label'>SPC Day1 Outlook</h4>
<input id="SPCcoday1_toggle" class="cmn-toggle cmn-toggle-round-flat vibrate-toggle" type="checkbox">
<label for="SPCcoday1_toggle"></label>
</div>
</div>
</div>
</div>
<div id='order-scroll' class='scroll-div' style="display: none;">
<ul id="layer-list">
</ul>
</div>
</div>
<div id='sectors-content'>
<div class='close-div' id='sectors-close-div'>
<h3>Sectors</h3>
<a href="#menu" id='sectors-close' class="close menu-link vibrate"><i class="fa fa-times fa-2x" aria-hidden="true"></i></a>
</div>
<div class='scroll-div'>
<div class='sectors-container '>
<div class='sectors-div' id='goes-sectors'>
<h3>GOES-16 Sector</h3>
<div id='CONUS' class='sector-select goes-sector-select sector-selected'>
<h4>CONUS</h4>
</div>
<div id='Mesoscale-1' class='sector-select goes-sector-select'>
<h4>Mesoscale 1</h4>
</div>
<div id='Mesoscale-2' class='sector-select goes-sector-select'>
<h4>Mesoscale 2</h4>
</div>
</div>
<div class='sectors-div' id='goes-sectors'>
<h3>Sector Zoom</h3>
<div class='sector-select sector-zoom'>
<h4 class='zoom-label'>Central Great Plains</h4>
</div>
<div class='sector-select sector-zoom'>
<h4 class='zoom-label'>Northern Great Plains</h4>
</div>
<div class='sector-select sector-zoom'>
<h4 class='zoom-label'>Southern Great Plains</h4>
</div>
<div class='sector-select sector-zoom'>
<h4 class='zoom-label'>North America</h4>
</div>
<div class='sector-select sector-zoom'>
<h4 class='zoom-label'>CONUS</h4>
</div>
</div>
</div>
</div>
</div>
<div id='options-content'>
<div class='close-div' id='options-close-div'>
<h3>Options</h3>
<a href="#menu" id='options-close' class="close menu-link vibrate"><i class="fa fa-times fa-2x" aria-hidden="true"></i></a>
</div>
<div class='scroll-div'>
<div class='options-container'>
<h3>Account Options</h3>
<div id='login-toggle' class='button -dark center'><strong>Login</strong></div>
<div class='button -dark center'><strong>Subscribe</strong></div>
</div>
<div class='options-container'>
<h3>Loop Options</h3>
<div id='speedscrubber' class='toggles'>
<h4>Loop Speed</h4>
<p class="speed-display">10 FPS</p>
</div>
<div id='framesscrubber' class='toggles'>
<h4>Number of Frames</h4>
<p class="frames-display">15</p>
</div>
</div>
<div class='options-container'>
<h3>General Options</h3>
<div id='UTC' class='utc-toggle toggles'>
<h4 class='toggle-label'>Local Time Display</h4>
<input id="UTC_toggle" class="cmn-toggle cmn-toggle-round-flat vibrate-toggle" type="checkbox">
<label for="UTC_toggle"></label>
</div>
<!-- <div id='advanced' class='advanced-toggle toggles'>
<h4 class='toggle-label'>Advanced Mode</h4>
<input value=1 id="advanced_toggle" class="cmn-toggle cmn-toggle-round-flat vibrate-toggle" type="checkbox">
<label for="advanced_toggle"></label>
</div> -->
<div id='haptic' class='haptic-toggle toggles'>
<h4 class='toggle-label'>Mobile Haptic Feedback</h4>
<input id="haptic_toggle" class="cmn-toggle cmn-toggle-round-flat vibrate-toggle" type="checkbox">
<label for="haptic_toggle"></label>
</div>
<div id='update' class='update-toggle toggles'>
<h4 class='toggle-label'>Auto Update</h4>
<input id="update_toggle" class="cmn-toggle cmn-toggle-round-flat vibrate-toggle" type="checkbox">
<label for="update_toggle"></label>
</div>
<div id='updatescrubber' class='toggles' style='padding-top: 0px'>
<p class="update-display">10 Min</p>
</div>
</div>
<div class='options-container'>
<h3>Help</h3>
<div id='tutorial-toggle' class='button -dark center'><strong>Show Tutorial</strong></div>
</div>
</div>
</div>
</nav>
<div class='wrap push' style='left: 15.625em; transition: left 300ms ease;'>
<div class='transform' id='menu-shadow'></div>
<div class ='leaflet-bar leaflet-control'>
<a href="#menu" id='layers-link' class="transform menu-link leaflet-bar-part leaflet-bar-part-single vibrate"><img class='layers-img' src='css/images/layers-hres.png'></a>
</div>
<div class ='leaflet-bar leaflet-control'>
<a href="#menu" id='sectors-link' class="transform menu-link leaflet-bar-part leaflet-bar-part-single vibrate"><i style='font-size:2.7em; margin-top: 4px; color:#f4f4f4' class="fa fa-globe fa-3x" aria-hidden="true"></i></a>
</div>
<div class ='leaflet-bar leaflet-control'>
<a href="#menu" id='options-link' class="transform menu-link leaflet-bar-part leaflet-bar-part-single vibrate"><span><i style='margin-top:4px;color:#f4f4f4' class="fa fa-cog fa-3x" aria-hidden="true"></i></span></a>
</div>
<div id="mapid"> </div>
</div>
<div id='time_container' class='transform'>
<h3 id='time'></h3>
<br>
<p id='layer-info'></p>
<i id='time_container_close' class="fa fa-chevron-left fa-2x vibrate" aria-hidden="true"></i>
</div>
<div id='options_container_dummy' style="position:absolute; right: 0px; top:155px; height: 43px; width: 25px;">
<div id='options_container' class='transform'>
<i id='options_container_close' class="fa fa-chevron-left fa-2x vibrate" aria-hidden="true"></i>
<div class ='leaflet-bar leaflet-control'>
<a id='fullscreen-link' class="transform leaflet-bar-part leaflet-bar-part-single vibrate"><span><i class="fa fa-arrows-alt fa-2x"></i></span></a>
</div>
<div class ='leaflet-bar leaflet-control'>
<a id='share-link' class="transform leaflet-bar-part leaflet-bar-part-single vibrate"><span><i style='margin-top: 11px;font-size: 2.2em;' class="fa fa-share-square-o fa-2x"></i></span></a>
</div>
<div class ='leaflet-bar leaflet-control'>
<a id='refresh-link' class="transform leaflet-bar-part leaflet-bar-part-single vibrate"><span><i style='margin-top: 10px;font-size: 2.2em;' class="fa fa-refresh fa-2x"></i></span></a>
</div>
</div>
</div>
<div id='scrubber_container' class='transform dragdealer'>
<div class="handle red-bar"><i id='time_bars' class="handle fa fa-bars fa-lg" aria-hidden="true"></i></div>
</div>
<div id='time_control_container' class='transform'>
<div id='step-back' class='time-control-div'>
<i id='step-back-button' class="fa fa-step-backward fa-2x" aria-hidden="true"></i>
</div>
<div id='play' class='time-control-div'>
<i id='play-button' style='color:white;' class="fa fa-play fa-2x" aria-hidden="true"></i>
</div>
<div id='time_spinner' class='time-control-div'>
<div id='time_spinner_view'></div>
</div>
<div id='pause' class='time-control-div'>
<i id='pause-button' class="fa fa-pause fa-2x" aria-hidden="true"></i>
</div>
<div id='step-forward' class='time-control-div'>
<i id='step-forward-button' class="fa fa-step-forward fa-2x" aria-hidden="true"></i>
</div>
</div>
<div id='login-container'>
<a id='login-close' class="vibrate"><i class="login-close fa fa-times fa-2x" aria-hidden="true"></i></a>
<div class="form">
<form class="register-form">
<input type="text" placeholder="name"/>
<input type="password" placeholder="password"/>
<input type="text" placeholder="email address"/>
<button>create</button>
<p class="message">Already registered? <a href="#">Sign In</a></p>
</form>
<form class="login-form">
<input type="text" placeholder="username"/>
<input type="password" placeholder="password"/>
<button>login</button>
<p class="message">Not registered? <a href="#">Create an account</a></p>
</form>
</div>
</div>
<div id='img-container'>
<a id='img-close' class="vibrate"><i class="img-close fa fa-times fa-2x" aria-hidden="true"></i></a>
<img id='screenshot'/>
<div id='img_load'></div>
<a id='img-link'><div id='savePNG' class='button -dark center'>Save PNG</div></a>
</div>
<div id='spinner'><img src="css/images/ring-alt.svg" /></div>
</div>
</body>
</html>