-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
201 lines (201 loc) · 9.35 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
<!DOCTYPE html>
<!-- html start: __________________________________________________________ -->
<html>
<!-- head start:_________________________________________________________ -->
<head>
<meta http-equiv="content-type"
content="text/html; charset=utf-8">
<meta name="viewport"
content="width=device-width,initial-scale=1">
<link rel="icon"
href="./img/icon/icon.png"
sizes="192x192">
<!-- title: ___________________________________________________________ -->
<title>Air Quality Stripes</title>
<!-- styles: __________________________________________________________ -->
<link rel="stylesheet"
type="text/css"
href="./css/site.css"
media="all">
<!-- scripts: _________________________________________________________ -->
<!-- Google Analytics -->
<script async
src="https://www.googletagmanager.com/gtag/js?id=G-R37BD08TMN">
</script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-R37BD08TMN');
</script>
<!-- End Google Analytics -->
<script src="./js/site.js"
charset="utf-8"
defer>
</script>
<!-- meta tags: _______________________________________________________ -->
<meta id="meta_title"
name="title"
content="Air Quality Stripes">
<meta id="meta_desc"
name="description"
content="">
<meta id="twit_card"
name="twitter:card"
content="summary_large_image">
<meta id="twit_title"
name="twitter:title"
content="Air Quality Stripes">
<meta id="twit_desc"
name="twitter:description"
content="">
<meta id="twit_img"
name="twitter:image"
content="https://airqualitystripes.info/img/icon/icon.png">
<meta id="og_type"
name="og:type"
content="website">
<meta id="og_title"
name="og:title"
content="Air Quality Stripes">
<meta id="og_desc"
name="og:description"
content="">
<meta id="og_img"
name="og:image"
content="https://airqualitystripes.info/img/icon/icon.png">
<!-- head end:___________________________________________________________ -->
</head>
<!-- body start: ________________________________________________________ -->
<body>
<!-- container start: _________________________________________________ -->
<div id="container"
class="container column">
<!-- header: ________________________________________________________ -->
<div id="header"
class="header row flex_start flex_no_grow">
<div id="header_text"
class="header_text">
<a href="https://airqualitystripes.info/">Air Quality Stripes</a>
</div>
</div>
<!-- content: _______________________________________________________ -->
<div id="content"
class="content row">
<!-- controls: ____________________________________________________ -->
<div id="content_control"
class="content_control">
<div id="content_control_close"
class="content_control_close row flex_end">
<a id="content_control_close_click"
href="javascript:void(0)"
class="content_control_close"
onclick="content_control_toggle()">×</a>
</div>
<div id="stripes_control"
class="control_section">
<p id="stripes_control_header"
class="control_header_active">Home</p>
</div>
<div id="stripes_control"
class="control_section">
<p id="stripes_control_header"
class="control_header"><a href="./stripes/">Select City Stripes</a></p>
</div>
<div id="faq_control"
class="control_section">
<p id="faq_control_header"
class="control_header"><a href="./faq/">FAQ</a></p>
</div>
<div id="about_control"
class="control_section">
<p id="about_control_header"
class="control_header"><a href="./about/">About</a></p>
</div>
<div id="contact_control"
class="control_section">
<p id="contact_control_header"
class="control_header"><a href="./contact">Get in touch</a></p>
</div>
<div id="ack_control"
class="control_section">
<p id="ack_control_header"
class="control_header"><a href="./acknowledgements/">Acknowledgements</a></p>
</div>
</div>
<!-- dashboard: ___________________________________________________ -->
<div id="content_container"
class="content_plot column">
<div id="content_control_menu"
class="content_control_menu row flex_start">
<img id="content_control_menu_img"
class="content_control_menu_img"
src="./img/control/menu.png"
onclick="content_control_toggle()">
</div>
<div id="content_home_img_container"
class="content_home_img_container row_wrap flex_start">
<img class="content_home_img flex_grow"
src="./img/home/aq_stripes_london.png">
<img class="content_home_img content_home_img_hide flex_grow"
src="./img/home/aq_stripes_beijing.png">
<img class="content_home_img content_home_img_hide flex_grow"
src="./img/home/aq_stripes_islamabad.png">
<img class="content_home_img content_home_img_hide flex_grow"
src="./img/home/aq_stripes_jakarta.png">
</div>
<div class="content_text_container column flex_start">
<h3><u>Welcome to the Air Quality Stripes!</u></h3>
<p><b>To see the stripes for yourself <a href="stripes/">CLICK HERE</a></b></p>
<p>Inspired by the <a href="http://showyourstripes.info/" target="_new">Climate Stripes</a> created by Prof Ed Hawkins from the University of Reading,we have created these Air Quality Stripe images which show the change in particulate matter (PM2.5) air pollution from 1850 to 2021 in cities around the globe.</p>
<p>The PM2.5 data is from the <a href="https://ukesm.ac.uk/home/" target="_new">UKESM</a> climate model combined with satellite observations. The colour scale was informed by an artist who analysed google images of air pollution. The light blue colours represent the clean blue sky, with darker red and browns showing increasing amounts of air pollution.</p>
<p>"The images show that it is possible to reduce air pollution; the air in many cities in Europe is much cleaner now than it was 100 years ago, and this is improving our health. We really hope similar improvements can be achieved across the globe."</p>
<p>"The bottom line is that air pollution is one of the world's leading risk factors for death, it is thought to contribute to <a href="https://ourworldindata.org/air-pollution" target="_new">one in ten deaths</a> globally. The Air Quality Stripes show the huge range in trends and concentrations around the world. Our stripes demonstrate that there is still more work to be done to reduce people’s exposure to poor air quality, and in some places a great deal more!"</p>
</div>
</div>
</div>
<!-- footer: ________________________________________________________ -->
<div id="footer"
class="footer row_wrap flex_center flex_no_grow">
<div id="footer_uol_logo"
class="footer_item footer_item_hide">
<a href="https://leeds.ac.uk/"
target="_new"><img class="footer_logo"
src="./img/logo/uol_logo.png"></a>
</div>
<div id="footer_uoe_logo"
class="footer_item footer_item_hide">
<a href="https://www.ed.ac.uk/"
target="_new"><img class="footer_logo"
src="./img/logo/uoe_logo.png"></a>
</div>
<div id="footer_ssi_logo"
class="footer_item footer_item_hide">
<a href="https://software.ac.uk/"
target = "_new"><img class="footer_logo"
src="./img/logo/ssi_logo.png"></a>
</div>
<div id="footer_mo_logo"
class="footer_item footer_item_hide">
<a href="https://metoffice.gov.uk/"
target="_new"><img class="footer_logo"
src="./img/logo/mo_logo.png"></a>
</div>
<div id="footer_nc_logo"
class="footer_item footer_item_hide">
<a href="https://ncsu.edu/"
target="_new"><img class="footer_logo"
src="./img/logo/nc_logo.png"></a>
</div>
<div id="footer_links"
class="footer_links flex_center">
<a class="footer_link"
href="./privacy/">Privacy Notice</a>
</div>
</div>
<!-- container end: ___________________________________________________ -->
</div>
<!-- body end: __________________________________________________________ -->
</body>
<!-- html end: ____________________________________________________________ -->
</html>