-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdetails.html
133 lines (133 loc) · 3.76 KB
/
details.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
<!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" />
<title>Earthquake Details</title>
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
crossorigin="" />
<link
href="output.css"
rel="stylesheet" />
<style>
#map {
height: 400px;
}
</style>
</head>
<body class="bg-gray-200">
<header
class="sticky top-0 z-50 flex items-center justify-between px-4 py-4 text-white bg-gray-800 md:px-48">
<h1
class="text-xl font-bold sm:text-lg"
href="#">
Earthquakes
</h1>
</header>
<div class="container px-4 py-4 mx-auto my-4 md:px-20">
<h2 class="mb-4 text-xl font-bold text-center">Earthquake Details</h2>
<div class="flex items-center justify-between gap-4 md:justify-start">
<a
href="index.html"
class="flex items-center p-1 transition-all duration-500 bg-gray-200 rounded-md hover:bg-gray-300 w-max"
><svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-list"
width="26"
height="26"
viewBox="0 0 24 24"
stroke-width="2"
stroke="#000000"
fill="none"
stroke-linecap="round"
stroke-linejoin="round">
<path
stroke="none"
d="M0 0h24v24H0z"
fill="none" />
<path d="M9 6l11 0" />
<path d="M9 12l11 0" />
<path d="M9 18l11 0" />
<path d="M5 6l0 .01" />
<path d="M5 12l0 .01" />
<path d="M5 18l0 .01" />
</svg>
<span class="ml-2 text-lg">List View</span></a
>
<a
href="map.html"
class="flex items-center p-1 transition-all duration-500 bg-gray-200 rounded-md hover:bg-gray-300 w-max"
><svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-map-2"
width="26"
height="26"
viewBox="0 0 24 24"
stroke-width="2"
stroke="#000000"
fill="none"
stroke-linecap="round"
stroke-linejoin="round">
<path
stroke="none"
d="M0 0h24v24H0z"
fill="none" />
<path d="M12 18.5l-3 -1.5l-6 3v-13l6 -3l6 3l6 -3v7.5" />
<path d="M9 4v13" />
<path d="M15 7v5.5" />
<path
d="M21.121 20.121a3 3 0 1 0 -4.242 0c.418 .419 1.125 1.045 2.121 1.879c1.051 -.89 1.759 -1.516 2.121 -1.879z" />
<path d="M19 18v.01" />
</svg>
<span class="ml-2 text-lg">Map View</span></a
>
</div>
<div class="p-2 mx-auto my-4 bg-white rounded-lg shadow-lg">
<div class="card">
<h2
id="earthquake-location"
class="mb-2 text-2xl font-bold"></h2>
<p
id="earthquake-time"
class="mb-2 text-lg text-gray-700"></p>
<p
id="earthquake-magnitude"
class="mb-2 text-lg text-gray-700"></p>
<p
id="earthquake-depth"
class="mb-2 text-lg text-gray-700"></p>
<p
id="earthquake-tsunami"
class="mb-2 text-lg text-gray-700"></p>
<div
id="map"
class="border-2 border-gray-300 rounded-lg drop-shadow-xl"></div>
</div>
</div>
</div>
<footer
class="flex items-center justify-between p-4 text-white bg-gray-800">
<a
class="text-white"
href="https://earthquake.usgs.gov/"
target="_blank"
>Data provided by USGS</a
>
</footer>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script
src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
crossorigin=""></script>
<script src="details.js"></script>
</body>
</html>