-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
204 lines (204 loc) · 7.91 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
<!DOCTYPE html>
<html lang="en">
<!--COVID image courtesy of https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/SARS-CoV-2_without_background.png/1200px-SARS-CoV-2_without_background.png.
Custom Logo Font courtesy of https://www.font-generator.com/fonts/ByronMark1/ and author Richard Polt. -->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Custom made favicon, using the sourced COVID image. -->
<link
rel="icon"
type="image/png"
href="./view/covid-logo-assets/covid-logo-virus-favicon.png"
/>
<title>US COVID-19 Tracker</title>
<!-- Link to our CSS stylesheet. -->
<link
rel="stylesheet"
href="./css/style.css"
/>
<!-- Link to Bulma, which is used throughout all of our HTML -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.8.2/css/bulma.min.css"
/>
</head>
<body>
<!-- Page header, containing custom logos and text. -->
<section class="hero">
<header class="container">
<figure class="image center">
<!-- Custom header image for the index.html Bulma "Hero". -->
<img
id="covid-logo-main"
src="./view/covid-logo-assets/covid-logo-main-header.png"
alt="United States COVID-19 Tracker"
/>
</figure>
</header>
<figure class="image center">
<!-- Custom page introduction, using sourced Byron Mark 1 font. -->
<img
id="covid-subtitle"
src="./view/covid-logo-assets/covid-subtitle.png"
alt="A useful tool to track the statistics related to COVID-19 in a state/territory of your choosing."
/>
</figure>
</section>
<!-- Main home page element, which consists of page directions and columns that link to the different data elements. -->
<main class="frontPage">
<section class="section">
<header class="background-data center">
<!-- Custom directions logo. -->
<figure class="image center">
<img
class="data-select"
src="./view/covid-logo-assets/covid-logo-directions.png"
alt="Please select your desired Covid-19 data type."
/>
</figure>
</header>
<br />
<br />
<!-- The three home page columns, which can be clicked by the user to traverse to the desired data type. -->
<figure class="container">
<section class="columns">
<!-- Map column. -->
<section class="column">
<!-- Anchor tag, making the entire content-box element link to the map.html page. -->
<a href="./view/map.html">
<section class="content-box">
<section class="state-selector">
<!-- Header containing the custom map logo. -->
<header class="background">
<figure class="image center">
<!-- Custom map logo. -->
<img
id="covid-logo-map"
src="./view/covid-logo-assets/covid-logo-map.png"
alt="US COVID-19 map."
/>
</figure>
</header>
<br />
<!-- An interactive map that shows the total deaths from COVID-19 for a hovered over State. -->
<section class="placeholder-image">
<figure id="indexMap"></figure>
</section>
</section>
</section>
</a>
</section>
<!-- Chart column -->
<section class="column">
<!-- Anchor tag, making the entire content-box element link to the chart.html page. -->
<a href="./view/chart.html">
<section class="content-box">
<section class="state-selector">
<!-- Header containing the custom chart/graph logo. -->
<header class="background">
<figure class="image center">
<!-- Custom chart/graph logo. -->
<img
id="covid-logo-chart"
src="./view/covid-logo-assets/covid-logo-chart.png"
alt="US COVID-19 chart/graph."
/>
</figure>
</header>
<br />
<!-- An interactive chart showing the COVID-19 statistics for the State associated with the user's IP address. -->
<section class="placeholder-image">
<figure id="indexChart"></figure>
</section>
</section>
</section>
</a>
</section>
<!-- Statistics column -->
<section class="column">
<!-- Anchor tag, making the entire content-box element link to the stats.html page. -->
<a href="./view/stats.html">
<section class="content-box">
<section class="data-selector">
<!-- Header containing the custom stats logo. -->
<header class="background">
<figure class="image center">
<!-- Custom stats logo. -->
<img
src="./view/covid-logo-assets/covid-logo-stats.png"
alt="US COVID-19 statistics."
/>
</figure>
</header>
<br/>
<!-- An interactive list showing the COVID-19 statistics for the State associated with the user's IP address. -->
<section class="placeholder-image-stats">
<figure id="indexStats"></figure>
</section>
</section>
</section>
</a>
</section>
</section>
</figure>
</section>
</main>
<!-- Page footer -->
<footer>
<section class="content has-text-centered">
<p>
COVID-19 Data Tracker 2020 DW/SH
</p>
</section>
</footer>
<!-- Linked JQuery script. -->
<script
src="https://code.jquery.com/jquery-3.4.1.min.js">
</script>
<!-- Linked HighCharts scripts for the interactive map. -->
<script
src="https://code.highcharts.com/maps/highmaps.js">
</script>
<script
src="https://code.highcharts.com/maps/modules/data.js">
</script>
<script
src="https://code.highcharts.com/maps/modules/drilldown.js">
</script>
<script
src="https://code.highcharts.com/maps/modules/exporting.js">
</script>
<script
src="https://code.highcharts.com/maps/modules/offline-exporting.js">
</script>
<script
src="https://code.highcharts.com/mapdata/countries/us/us-all.js">
</script>
<!-- Linked HighCharts scripts for the interactive chart/graph. -->
<script
src="https://code.highcharts.com/modules/series-label.js">
</script>
<script
src="https://code.highcharts.com/modules/exporting.js">
</script>
<script
src="https://code.highcharts.com/modules/export-data.js">
</script>
<script
src="https://code.highcharts.com/modules/accessibility.js">
</script>
<!-- Link to allow FontAwesome script use. -->
<script
src="https://kit.fontawesome.com/8e2f4402c5.js">
</script>
<!-- Link to allow the use of moment.js script. -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.25.3/moment.min.js">
</script>
<!-- Link to the stats data provided by our index.js file. -->
<script
src="./js/index.js">
</script>
</body>
</html>