-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
121 lines (118 loc) · 6.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./src/assets/favicon.ico" rel="icon">
<title>Quake</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css" rel="stylesheet" />
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.min.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.css" type="text/css">
<link rel="stylesheet" href="./src/css/style.css">
</head>
<body>
<div class="overlay">
<img src="./src/assets/loading.gif" alt="Loading...">
</div>
<nav id="menu">
<svg id="toggle-menu" class="active" width="20" height="20" viewBox="0 0 18 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M16.37 10.8L8.99 16.54L1.62 10.81L0 12.07L9 19.07L18 12.07L16.37 10.8ZM9 0L0 7L1.63 8.27L9 14L16.36 8.27L18 7L9 0ZM9 11.47L3.26 7L9 2.53L14.74 7L9 11.47Z" fill="currentColor" />
</svg>
<div id="full-menu" class="inactive">
<h4>Latest Earthquakes</h4>
<div class="carousel" data-carousel>
<button class="carousel-button prev" data-carousel-button="prev">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#fff">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
</svg>
</button>
<button class="carousel-button next" data-carousel-button="next">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#fff">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
</svg>
</button>
<ul data-slides>
<li class="slide" data-active> </li>
<li class="slide"></li>
<li class="slide"></li>
</ul>
</div>
<div class="partition"></div>
<h4>Custom Features</h4>
<section>
</section>
<form>
<div id="showing-label">
<p></p>
</div>
<div class="circle-by-mag">
Magnitude:
<div id="mag-2">
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="5" cy="5" r="5" fill="#FC1D1D" />
</svg>
<p>< 2</p>
</div>
<div id="mag-4">
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="4" cy="4" r="4" fill="#FC691D" />
</svg>
<p>> 2 & <= 4</p>
</div>
<div id="mag-6">
<svg width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="3" cy="3" r="3" fill="#FCA31D" />
</svg>
<p>> 6</p>
</div>
<div id="mag-unknown">
<svg width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="3" cy="3" r="3" fill="black" />
</svg>
<p>unknown</p>
</div>
</div>
<div class="duration">
<input id="start-date" name="start" type="date">
to
<input id="end-date" name="end" type="date">
</div>
<div class="magnitude">Magnitude -
<input id="min-mag" name="min" type="number" placeholder="min" step="any">
to
<input id="max-mag" name="max" type="number" placeholder="max" step="any">
<button id="submit" type="submit">
<svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px" fill="#fff">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
</svg>
</button>
</div>
</form>
</div>
<div id="theme-toggle" class="inactive">
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
<rect fill="none" height="24" width="24" />
<path d="M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36c-0.98,1.37-2.58,2.26-4.4,2.26 c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z" />
</svg>
</div>
<div id="close" class="inactive">
<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
<path d="M0 0h24v24H0V0z" fill="none" />
<path d="M14.59 8L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41 14.59 8zM12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" />
</svg>
</div>
</nav>
<div id="info">
<a href="https://github.com/MaskofDevil" target="_blank">©MaskofDevil</a>
</div>
<div id="map"></div>
<script src="./src/js/map.js" type="module"></script>
<script src="./src/js/script.js" type="module"></script>
</body>
</html>