-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
342 lines (334 loc) · 26.7 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
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js"> <!--<![endif]-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="./node_modules/animate.css/animate.min.css">
<link rel="stylesheet" href="./node_modules/datatables.net-dt/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="./node_modules/leaflet/dist/leaflet.css">
<link rel="stylesheet" href="./src/styles/style.css">
<script src="./src/scripts/hooks.js"></script>
<script src="./src/scripts/slides.js" defer></script>
<script src="./src/scripts/dropbox.js" defer></script>
<script src="./renderer.js" defer></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="d-none z-3">
<div class="d-flex flex-row justify-content-center">
<div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
</div>
</div>
<div class="d-flex flex-column justify-content-center min-vh-100 position-relative z-2 overflow-hidden">
<div id="slider" class="d-none flex-column bg-dark-blue w-100 justify-content-evenly position-absolute start-50 top-0 translate-middle-x">
<div>
<div class="d-flex flex-row">
<span id="slider-item-1"></span>
<p id="slider-item-2" class="p-3 fw-bold border border-1 rounded-1 m-0 slider-item">
Curate
</p>
<div class="flex-grow-1 d-flex flex-column justify-content-center"><hr></div>
<p id="slider-item-3" class="p-3 fw-bold border border-1 rounded-1 m-0 slider-item">
Describe
</p>
<div class="flex-grow-1 d-flex flex-column justify-content-center"><hr></div>
<p id="slider-item-4" class="p-3 fw-bold border border-1 rounded-1 m-0 slider-item">
Predict
</p>
<div class="flex-grow-1 d-flex flex-column justify-content-center"><hr></div>
<p id="slider-item-5" class="p-3 fw-bold border border-1 rounded-1 m-0 slider-item">
Done
</p>
</div>
<div class="d-flex flex-row justify-content-between mt-2 rounded-1">
<button id="previous-slide-button" class="previous-button align-self-center border-0 btn btn-outline-primary">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="16" width="16" viewBox="0 0 256 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M9.4 278.6c-12.5-12.5-12.5-32.8 0-45.3l128-128c9.2-9.2 22.9-11.9 34.9-6.9s19.8 16.6 19.8 29.6l0 256c0 12.9-7.8 24.6-19.8 29.6s-25.7 2.2-34.9-6.9l-128-128z"/></svg>
</button>
<button id="next-slide-button" class="next-button align-self-center border-0 btn btn-outline-primary">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="16" width="16" viewBox="0 0 256 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z"/></svg>
</button>
</div>
</div>
</div>
<div id="slide-1" class="visually-hidden">
<div id="content-slide-in-down" class="d-flex flex-column justify-content-center ">
<div class="d-flex flex-row justify-content-center">
<img src="./public/icon.png" alt="logo" height="64" width="64">
<p class="text-center h1 m-0 pt-3 mb-0 fw-bolder align-self-center fst-italic">StormCaster</p>
</div>
<div class="d-flex flex-row justify-content-center fw-light fs-6">
<span>Reinhart Logronio</span>
<span class="mx-4">Carren Mae Yongco</span>
<span>Louvilla Limpin</span>
</div>
</div>
<div id="content-fade-in" class="d-flex flex-row justify-content-center my-5 ">
<div id="drop-box-block" class="d-none user-select-none d-flex flex-column justify-content-center position-absolute bg-black bg-opacity-75 drop-box-block">
<div class="d-flex flex-row justify-content-center animate__bounce animate__loopForever">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="32" width="32" viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M2 334.5c-3.8 8.8-2 19 4.6 26l136 144c4.5 4.8 10.8 7.5 17.4 7.5s12.9-2.7 17.4-7.5l136-144c6.6-7 8.4-17.2 4.6-26s-12.5-14.5-22-14.5l-72 0 0-288c0-17.7-14.3-32-32-32L128 0C110.3 0 96 14.3 96 32l0 288-72 0c-9.6 0-18.2 5.7-22 14.5z"/></svg>
</div>
<p class="fs-5 fw-bold m-0 text-center">Drop Here</p>
</div>
<div id="drop-box" class="p-5 border border-1 d-flex flex-column justify-content-center drop-box-section">
<div class="text text-center mb-3">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="64" width="64" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M448 80v48c0 44.2-100.3 80-224 80S0 172.2 0 128V80C0 35.8 100.3 0 224 0S448 35.8 448 80zM393.2 214.7c20.8-7.4 39.9-16.9 54.8-28.6V288c0 44.2-100.3 80-224 80S0 332.2 0 288V186.1c14.9 11.8 34 21.2 54.8 28.6C99.7 230.7 159.5 240 224 240s124.3-9.3 169.2-25.3zM0 346.1c14.9 11.8 34 21.2 54.8 28.6C99.7 390.7 159.5 400 224 400s124.3-9.3 169.2-25.3c20.8-7.4 39.9-16.9 54.8-28.6V432c0 44.2-100.3 80-224 80S0 476.2 0 432V346.1z"/></svg>
</div>
<p class="m-0 text-center">Drag your dataset file in this section</p>
<div class="d-flex flex-row mt-2 mb-3">
<div class="flex-grow-1"><hr></div>
<p class="m-0 mx-2 align-self-center fw-light">OR</p>
<div class="flex-grow-1"><hr></div>
</div>
<div class="d-flex flex-row justify-content-center">
<button id="upload-button" class="btn btn-primary align-self-center rounded-1 border-0">
<p class="m-0 text-center">Click to Upload</p>
</button>
</div>
</div>
</div>
<div id="content-slide-in-up" class="">
<p class="text-center m-0">Final Project for ITD105-Data Analytics</p>
</div>
</div>
<div id="slide-2" class="d-none d-flex flex-column slide flex-grow-1 justify-content-center">
<div class="d-flex flex-column justify-content-center">
<div id="loading-icon" class="d-flex flex-row justify-content-center">
<div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
</div>
<div id="error-icon" class="d-none d-flex flex-row justify-content-center text-danger animate__flash animate__loopForever">
<svg xmlns="http://www.w3.org/2000/svg" fill="red" height="45" width="45" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"/></svg>
</div>
<p class="h1 fw-bolder text-center">Curating</p>
<p id="curration-text" class="text-center">Loading Files...</p>
<div id="error-text" class="text-white bg-danger text-center"></div>
</div>
</div>
<div id="slide-3" class="d-none d-flex slide">
<div class="content d-flex flex-column justify-content-start">
<div>
<div class="slide-pad"></div>
<p class="text-center h3 ">Description</p>
<div id="describe-table" class="d-flex flex-row justify-content-center mb-5"></div>
<p class="text-center h3 ">Data Types</p>
<div id="types-table" class="d-flex flex-row justify-content-center mb-5"></div>
<hr>
<div class="d-flex flex-column justify-content-center mb-2">
<p class="text-center h3 ">Frequency of Storms</p>
<select id="number-of-storms-select-input" class="form-select form-control align-self-center">
<optgroup label="Classification">
<option value="status" selected>By Status</option>
<option value="category">By Category</option>
</optgroup>
<optgroup label="Seasonality">
<option value="year">By Year</option>
<option value="month">By Month</option>
</optgroup>
</select>
</div>
<div id="number-of-storms-status-container" class="d-flex flex-row justify-content-center mb-5"></div>
<div id="number-of-storms-category-container" class="d-none d-flex flex-row justify-content-center mb-5"></div>
<div id="number-of-storms-year-container" class="d-none d-flex flex-row justify-content-center mb-5"></div>
<div id="number-of-storms-month-container" class="d-none d-flex flex-row justify-content-center mb-5"></div>
<p class="text-center h3 ">Cyclicality</p>
<div id="cyclicality-container" class="d-flex flex-row justify-content-center mb-5"></div>
<p class="text-center h3 ">Heat Map</p>
<div id="heat-map-container" class="map ms-auto me-auto mb-5"></div>
<div class="d-flex flex-column justify-content-center mb-2">
<p class="text-center h3 ">Individual Storm Paths</p>
<div class="d-flex flex-row justify-content-center">
<button id="shuffleButton" class="btn btn-primary me-3"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M403.8 34.4c12-5 25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6V160H352c-10.1 0-19.6 4.7-25.6 12.8L284 229.3 244 176l31.2-41.6C293.3 110.2 321.8 96 352 96h32V64c0-12.9 7.8-24.6 19.8-29.6zM164 282.7L204 336l-31.2 41.6C154.7 401.8 126.2 416 96 416H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H96c10.1 0 19.6-4.7 25.6-12.8L164 282.7zm274.6 188c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6V416H352c-30.2 0-58.7-14.2-76.8-38.4L121.6 172.8c-6-8.1-15.5-12.8-25.6-12.8H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H96c30.2 0 58.7 14.2 76.8 38.4L326.4 339.2c6 8.1 15.5 12.8 25.6 12.8h32V320c0-12.9 7.8-24.6 19.8-29.6s25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64z"/></svg></button>
<input list="individual-storm-path-datalist" id="individual-storm-path-datalist-input" name="individual-storm-path" class="form-control "/>
<div class="form-check align-self-center ms-4">
<input class="form-check-input" type="checkbox" value="" id="individual-storm-path-show-diameter-checkbox">
<label class="form-check-label" for="flexCheckDefault">
Show Diameter
</label>
</div>
<datalist id="individual-storm-path-datalist" class="align-self-center">
</datalist>
</div>
</div>
<div id="individual-storm-path-container" class="map ms-auto me-auto mb-5"></div>
<div class="d-flex flex-column justify-content-center mb-2">
<p class="text-center h3 ">All Storm Path</p>
<select id="number-of-storms-select-input" class="d-none form-select align-self-center">
<option value="all">All</option>
<optgroup label="Status">
<option value="Tropical Storm">Tropical Storm</option>
<option value="Tropical Depression">Tropical Depression</option>
<option value="Subtropical Depression">Subtropical Depression</option>
<option value="Subtropical Storm">Subtropical Storm</option>
<option value="Extratropical">Extratropical</option>
<option value="Other Low">Other Low</option>
<option value="Tropical Wave">Tropical Wave</option>
<option value="Hurricane">Hurricane</option>
<option value="Disturbance">Disturbance</option>
</optgroup>
<optgroup label="Category">
<option value="1">Category 1</option>
<option value="2">Category 2</option>
<option value="3">Category 3</option>
<option value="4">Category 4</option>
<option value="5">Category 5</option>
</optgroup>
</select>
</div>
<div id="storm-path-by-group-container" class="map ms-auto me-auto mb-5"></div>
<p class="text-center h3 ">Storm Genesis</p>
<div id="storm-genesis-container" class="map ms-auto me-auto mb-5"></div>
<div class="slide-pad"></div>
</div>
</div>
</div>
<div id="slide-4" class="d-none d-flex slide ">
<div class="content">
<div>
<div class="slide-pad"></div>
<!--
<div class="d-flex flex-column justify-content-center"><p class="h1 fw-bolder text-center">Predictive Analysis</p></div>
-->
<p class="text-center h3 ">Prediction on the Total Number of Storms</p>
<div id="storm-prediction-number-of-storms" class="d-flex flex-row justify-content-center ms-auto me-auto align-self-center"></div>
<hr>
<p class="text-center h3 mt-5 d-none">Predicted Duration</p>
<div class="my-5 d-none">
<form id="form-duration" class="ms-auto me-auto">
<div class="d-flex flex-row mb-3">
<div class="form-floating flex-grow-1 mx-1">
<input type="number" class="form-control " id="form-duration-year" required placeholder="Type in year">
<label for="floatingInput">Year</label>
</div>
<div class="form-floating flex-grow-1 mx-1">
<input type="number" class="form-control" id="form-duration-month" required placeholder="Type in Month">
<label for="floatingInput">Month</label>
</div>
<div class="form-floating flex-grow-1 mx-1">
<input type="number" class="form-control" id="form-duration-day" required placeholder="Type in">
<label for="floatingInput">Day</label>
</div>
<div class="form-floating flex-grow-1 mx-1">
<input type="number" class="form-control" id="form-duration-hour" required placeholder="Type in">
<label for="floatingInput">Hour</label>
</div>
</div>
<div class="d-flex flex-row mb-3">
<div class="form-floating flex-grow-1 mx-1">
<select id="form-duration-status" required class="form-select">
<option value="Tropical Storm">Tropical Storm</option>
<option value="Tropical Depression">Tropical Depression</option>
<option value="Subtropical Depression">Subtropical Depression</option>
<option value="Subtropical Storm">Subtropical Storm</option>
<option value="Extratropical">Extratropical</option>
<option value="Other Low">Other Low</option>
<option value="Tropical Wave">Tropical Wave</option>
<option value="Hurricane">Hurricane</option>
<option value="Disturbance">Disturbance</option>
</select>
<label for="floatingInput">Status</label>
</div>
<div class="form-floating flex-grow-1 mx-1">
<select id="form-duration-category" required class="form-select">
<option value="1">Category 1</option>
<option value="2">Category 2</option>
<option value="3">Category 3</option>
<option value="4">Category 4</option>
<option value="5">Category 5</option>
</select>
<label for="floatingInput">Category</label>
</div>
</div>
<div class="d-flex flex-row mb-3">
<div class="form-floating flex-grow-1 mx-1">
<input type="number" class="form-control" id="form-duration-wind" required step="0.01" placeholder="Type in year">
<label for="floatingInput">Wind</label>
</div>
<div class="form-floating flex-grow-1 mx-1">
<input type="number" class="form-control" id="form-duration-pressure" required step="0.01" placeholder="Type in Month">
<label for="floatingInput">Pressure</label>
</div>
<div class="form-floating flex-grow-1 mx-1">
<input type="number" class="form-control" id="form-duration-latitude" required step="0.01" placeholder="Type in">
<label for="floatingInput">Latitude</label>
</div>
<div class="form-floating flex-grow-1 mx-1">
<input type="number" class="form-control" id="form-duration-longitude" required step="0.01" placeholder="Type in">
<label for="floatingInput">Longitude</label>
</div>
</div>
<div class="d-flex flex-row justify-content-center">
<input type="submit" value="Submit" class="btn btn-primary text-white"></input>
</div>
</form>
<p id="result-duration" class="text-center h2 mt-4 ms-auto me-auto align-self-center"></p>
</div>
<p class="text-center h3 mt-5">Predicted Category</p>
<div class="my-5">
<form id="form-category" class="ms-auto me-auto">
<div class="d-flex flex-row mb-3">
<div class="form-floating flex-grow-1 mx-1">
<input type="number" class="form-control " id="form-category-year" required placeholder="Type in year">
<label for="floatingInput">Year</label>
</div>
<div class="form-floating flex-grow-1 mx-1">
<input type="number" class="form-control" id="form-category-month" required placeholder="Type in Month">
<label for="floatingInput">Month</label>
</div>
<div class="form-floating flex-grow-1 mx-1">
<input type="number" class="form-control" id="form-category-day" required placeholder="Type in">
<label for="floatingInput">Day</label>
</div>
<div class="form-floating flex-grow-1 mx-1">
<input type="number" class="form-control" id="form-category-hour" required placeholder="Type in">
<label for="floatingInput">Hour</label>
</div>
</div>
<div class="d-flex flex-row mb-3">
<div class="form-floating flex-grow-1 mx-1">
<input type="number" class="form-control" id="form-category-wind" step="0.01" required placeholder="Type in year">
<label for="floatingInput">Wind</label>
</div>
<div class="form-floating flex-grow-1 mx-1">
<input type="number" class="form-control" id="form-category-pressure" step="0.01" required placeholder="Type in Month">
<label for="floatingInput">Pressure</label>
</div>
<div class="form-floating flex-grow-1 mx-1">
<input type="number" class="form-control" id="form-category-latitude" step="0.01" required placeholder="Type in">
<label for="floatingInput">Latitude</label>
</div>
<div class="form-floating flex-grow-1 mx-1">
<input type="number" class="form-control" id="form-category-longitude" step="0.01" required placeholder="Type in">
<label for="floatingInput">Longitude</label>
</div>
</div>
<div class="d-flex flex-row justify-content-center">
<input type="submit" value="Submit" class="btn btn-primary text-white"></input>
</div>
</form>
<p id="result-category" class="text-center h2 mt-4 ms-auto me-auto align-self-center"></p>
</div>
<div class="slide-pad"></div>
</div>
</div>
</div>
<div id="slide-5" class="d-none d-flex slide">
<div class="content">
<div>
<div class="slide-pad"></div>
<div class="d-flex flex-column justify-content-center"><p class="h1 fw-bolder text-center">Thank You</p></div>
</div>
</div>
</div>
</div>
<div class="min-vh-100 min-vw-100 position-fixed top-0 start-0 z-0 bg-gradient-darkblue"></div>
</body>
</html>