-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
364 lines (350 loc) · 18.9 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
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
<!DOCTYPE HTML>
<!--
Hyperspace by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-PM0QV0WD8F"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-PM0QV0WD8F');
</script>
<title>CanAirIO</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" />
<meta name="yandex-verification" content="df44ab6fdb86e48c" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
<description>Citizen network for monitoring air quality.</description>
</head>
<body class="is-preload">
<!-- Sidebar -->
<section id="sidebar">
<div class="inner">
<nav>
<ul>
<li><a href="#intro">CanAirIO</a></li>
<li><a href="#one">What we aim for</a></li>
<li><a href="#docs" >Docs</a></li>
<li><a href="#installer" >Web Installer</a></li>
<li><a href="#two">How we do it</a></li>
<li><a href="#three">Contact</a></li>
<li><a href="privacy.html">Privacy Policy</a></li>
</ul>
</nav>
</div>
</section>
<!-- Wrapper -->
<div id="wrapper">
<!-- Intro -->
<section id="intro" class="wrapper style1 fullscreen fade-up">
<div class="inner">
<h1>CanAirIO</h1>
<h2>Citizen network for monitoring air quality</h2>
<p>CanAirIO is a citizen science project using mobile and static sensors <br/>
to measure air quality with cell phones and low-cost technology. </p>
<div class="row" style="align:center;">
<div class="column">
<a href="samples/first_track.html">
<img alt="Mobile Map" src="images/canairio_collage_clouds.jpg" style="max-width: 60%; min-width: 400px; height: auto;"></a>
</div>
</div>
<ul></ul>
<ul class="actions">
<li><a href="https://canair.io/installer.html" rel="noreferer, ,noopener" target="_blank"class="button">Installer</a></li>
<li><a href="samples/first_track.html" class="button">Reports.. </a></li>
<li><a href="https://canair.io/docs/" rel="noreferer, ,noopener" target="_blank"class="button">Build a CanAirIO</a></li>
</ul>
<div class="row" style="align:right;" align="right">
<div>
<ul class="actions" >
<li><a href="es/index.html"><span><img alt="Spanish" src="images/flag_of_spain.png"></span></a></li>
<li><a href="index.html"><span><img alt="English" src="images/flag_of_uk.png"></span></a></li>
</ul>
</div>
<div>
<ul class="icons">
<li>
<ul class="icons" style="align:left;" align="left">
<li><a href="https://github.com/kike-canaries" rel="noreferer, ,noopener" target="_blank" class="fa-github"><span class="label">GitHub</span></a></li>
<li><a href="https://twitter.com/canairq" rel="noreferer, ,noopener" target="_blank" class="fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="https://www.facebook.com/canairq/" rel="noreferer, ,noopener" target="_blank" class="fa-facebook"><span class="label">Facebook</span></a></li>
<li><a href="https://www.instagram.com/canairq/" rel="noreferer, ,noopener" target="_blank" class="fa-instagram"><span class="label">Instagram</span></a></li>
<li><a href="https://play.google.com/store/apps/details?id=hpsaturn.pollutionreporter&hl=en" rel="noreferer, ,noopener" target="_blank" class="fa-android"><span class="label">Instalar</span></a></li>
<li><a href="https://t.me/airqco" rel="noreferer, ,noopener" target="_blank" class="fa-telegram"><span class="label">Telegram News Channel</span></a></li>
<li><a href="https://t.me/canairio" rel="noreferer, ,noopener" target="_blank" class="fa-telegram"><span class="label">Telegram Chat Tech Support</span></a></li>
</ul>
</li>
<li style="padding-left: 3px;"><a href="https://liberapay.com/CanAirIO"><span><img alt="Liberapay receives" src="http://img.shields.io/liberapay/receives/CanAirIO.svg?logo=liberapay"></span></a></li>
<li style="padding-left: 3px;"><a href="https://liberapay.com/CanAirIO"><span><img alt="Liberapay patrons" src="http://img.shields.io/liberapay/patrons/CanAirIO.svg?logo=liberapay"></span></a></li>
</ul>
</div>
</div>
</div>
</section>
<!-- One -->
<section id="one" class="wrapper style2 spotlights">
<section>
<a href="#como" class="image"><img src="images/pic01.jpg" alt="" data-position="center center" /></a>
<div class="content">
<div class="inner">
<h2>What are we looking for?</h2>
<p>We are looking to build a citizen network, an air quality map that will allow us
to know what we are breathing and how we can improve life quality. With the data collected
we could independently validate official air quality numbers, because what can be measured
can be improved.
</p>
<ul class="actions">
<li><a href="#como" class="button scrolly">More</a></li>
</ul>
</div>
</div>
</section>
<section id="como">
<a href="#como" class="image"><img src="images/pic02.jpg" alt="" data-position="top center" /></a>
<div class="content">
<div class="inner">
<h2>How can you get involved?</h2>
<p>Download our app. With our app and a CanAirIO device you can track air quality in
your area and in other areas. You can also <a href="#talleres">build your own CanAirIO device</a> and generate
your own air quality reports. You can share widely your <a href="samples/first_track.html">reports </a>
and those from other users. Together we can promote actions to improve air quality.</p>
<ul class="actions">
<li><a href="#participacion" class="button scrolly">How to collaborate</a></li>
<li><a href="https://play.google.com/store/apps/details?id=hpsaturn.pollutionreporter" rel="noreferer, ,noopener" target="_blank"><img src="images/gplayicon.png" width="128" ></a></li>
</ul>
</div>
</div>
</section>
<section id="participacion">
<a href="#talleres" class="image"><img src="images/pic03.jpg" alt="" data-position="25% 25%" /></a>
<div class="content">
<div class="inner">
<h2>Play your part</h2>
<p>You don’t need to be an engineer to get involved. If you can draw, write or if you
and your company or group of friends want to live in a healthy city, you can get involved.</p>
<ul class="actions">
<li><a href="#talleres" class="button scrolly">How to join us</a></li>
</ul>
</div>
</div>
</section>
<section id="talleres">
<a href="#docs" class="image"><img src="images/pic04.jpg" alt="" data-position="25% 25%" /></a>
<div class="content">
<div class="inner">
<h2>Our workshops</h2>
<p>
We have held some workshops so far. In a few hours you can build and start running
your CanAirIO device. You don’t need previous training in programming or electronics,
just to be willing to learn. You can also do it at home, following our
<a rel="noreferer, ,noopener" target="_blank" href="https://canair.io/docs">documentation,</a>
where we have some guides of some device alternatives.
</p>
<a href="https://canair.io/docs/" rel="noreferer, ,noopener" target="_blank"><img src="images/canairio_collage_community.jpg" width="480" /></a>
<ul class="actions">
<li><a href="#docs" class="button scrolly">Documentation</a></li>
<li><a href="#installer" class="button scrolly">Installer</a></li>
</ul>
</div>
</div>
</section>
<section id="docs">
<a href="https://canair.io/docs" class="image"><img src="images/docs_preview.jpg" alt="_blank" data-position="25% 25%" /></a>
<div class="content">
<div class="inner">
<h2>Documentation</h2>
<p>
We are in continuous development but right now we have some documentation about our guides, API,
protocols, Android app user manual, publication flow and more. Also you can help us in this task.
Thanks
</p>
<ul class="actions">
<li><a href="https://canair.io/docs" rel="noreferer, ,noopener" target="_blank" class="button">Documentation</a></li>
</ul>
</div>
</div>
</section>
<section id="installer">
<a href="https://canair.io/installer.html" class="image"><img src="images/canairio_web_installer_preview.png" alt="" data-position="25% 25%" /></a>
<div class="content">
<div class="inner">
<h2>CanAirIO Web Installer</h2>
<p>
If you already have a ESP32 board, you can test our CanAirIO firmware on one click, with our web installer.
</p>
<ul class="actions">
<li><a href="https://canair.io/installer.html" class="button">CanAirIO Web Installer</a></li>
</ul>
</div>
</div>
</section>
</section>
<!-- Two -->
<section id="two" class="wrapper style3 fade-up">
<div class="inner">
<h2>How do we do it?</h2>
<p>Think about this collaborative effort as wikipedia that can contribute to improving your health.
Have you experienced the benefits of collective data gathering achieved through apps such as Waze?
Have you used improved maps thanks to wikipedia? We will achieve our goals in a similar way. </p>
<div class="features">
<section>
<span class="icon major fa-code"></span>
<h3>Your device</h3>
<p>You can build your own CanAirIO device or propose new devices.
We will provide you with detailed instructions.</p>
</section>
<section>
<span class="icon major fa-lock"></span>
<h3>In your bike</h3>
<p>Going for a ride is possible, especially when you’d like to breath some pure air.
If you move around you can detect what is the best place to do so.</p>
</section>
<section>
<span class="icon major fa-cog"></span>
<h3>The App</h3>
<p>If you have an Android device, you can download our app to connect to the
CanAirIO device</p>
</section>
<section>
<span class="icon major fa-desktop"></span>
<h3>Data consolidation</h3>
<p>To date, you can store your captured data in the internal memory of your
Android device or you can share it in the cloud. </p>
</section>
<section>
<span class="icon major fa-chain"></span>
<h3>Popular actions</h3>
<p>Once we have our CanAirIO devices and reporting data, we could communicate
broadly our findings and be actively involved in policy making decisions to
protect our health.</p>
</section>
<section>
<span class="icon major fa-diamond"></span>
<h3>The results</h3>
<p>Currently we are building what is necessary so that the result is
better quality of life for you and everyone.</p>
</section>
</div>
<ul class="actions">
<li><a href="#three" class="button scrolly">I want to participate!</a></li>
</ul>
</div>
</section>
<!-- Three -->
<section id="three" class="wrapper style1 fade-up">
<div class="inner">
<h2>Would you like to get involved?</h2>
<p>We started gathering data from Bogotá, Colombia, concerned about the pollution in the
city generated by old technologies promoted by the government. We want to go further,
because we know we can contribute much more. </p>
<div class="split style1">
<section>
<form method="post" action="https://formspree.io/info@canair.io">
<div class="fields">
<div class="field half">
<label for="name">Name</label>
<input type="text" name="name" id="name" />
</div>
<div class="field half">
<label for="email">Email</label>
<input type="text" name="email" id="email" />
</div>
<div class="field half">
<label for="city">City</label>
<input type="text" name="city" id="city" />
</div>
<div class="field half">
<label for="subject">Subject</label>
<select id="subject">
<option value="request_info">Request info</option>
<option value="request data">Request data</option>
<option value="help_us">Help Us</option>
<option value="workshops">Workshops</option>
<option value="support">Support</option>
<option value="other">Other</option>
</select>
</div>
<div class="field">
<label for="message">Message</label>
<textarea name="message" id="message" rows="5"></textarea>
</div>
</div>
<ul class="actions">
<li><a href="" class="button submit">Send</a></li>
</ul>
</form>
</section>
<section>
<ul class="contact">
<li>
<h3>Email</h3>
<a href="mailto:info@canair.io">info@canair.io</a>
</li>
<li>
<h3>Social</h3>
<ul class="icons">
<li><a href="https://twitter.com/canairq" rel="noreferer, ,noopener" target="_blank" class="fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="https://www.facebook.com/canairq/" rel="noreferer, ,noopener" target="_blank" class="fa-facebook"><span class="label">Facebook</span></a></li>
<li><a href="https://github.com/kike-canaries" rel="noreferer, ,noopener" target="_blank" class="fa-github"><span class="label">GitHub</span></a></li>
<li><a href="https://www.instagram.com/canairq/" rel="noreferer, ,noopener" target="_blank" class="fa-instagram"><span class="label">Instagram</span></a></li>
<li><a href="https://play.google.com/store/apps/details?id=hpsaturn.pollutionreporter&hl=en" rel="noreferer, ,noopener" target="_blank" class="fa-android"><span class="label">Instalar</span></a></li>
<li><a href="https://t.me/airqco" rel="noreferer, ,noopener" target="_blank" class="fa-telegram"><span class="label">Telegram News Channel</span></a></li>
<li><a href="https://t.me/canairio" rel="noreferer, ,noopener" target="_blank" class="fa-telegram"><span class="label">Telegram Chat Tech Support</span></a></li>
</ul>
</li>
</ul>
</section>
</div>
</div>
</section>
</div>
<!-- Footer -->
<footer id="footer" class="wrapper style1-alt">
<div class="inner">
<div class="row" style="align:right;" align="right">
<div>
<ul class="actions" >
<li><a href="es/index.html"><span><img alt="Spanish" src="images/flag_of_spain.png"></span></a></li>
<li><a href="index.html"><span><img alt="English" src="images/flag_of_uk.png"></span></a></li>
</ul>
</div>
<div>
<ul class="icons">
<li>
<ul class="icons" style="align:left;" align="left">
<li><a href="https://github.com/kike-canaries" rel="noreferer, ,noopener" target="_blank" class="fa-github"><span class="label">GitHub</span></a></li>
<li><a href="https://twitter.com/canairq" rel="noreferer, ,noopener" target="_blank" class="fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="https://www.facebook.com/canairq/" rel="noreferer, ,noopener" target="_blank" class="fa-facebook"><span class="label">Facebook</span></a></li>
<li><a href="https://www.instagram.com/canairq/" rel="noreferer, ,noopener" target="_blank" class="fa-instagram"><span class="label">Instagram</span></a></li>
<li><a href="https://play.google.com/store/apps/details?id=hpsaturn.pollutionreporter&hl=en" rel="noreferer, ,noopener" target="_blank" class="fa-android"><span class="label">Instalar</span></a></li>
<li><a href="https://t.me/airqco" rel="noreferer, ,noopener" target="_blank" class="fa-telegram"><span class="label">Telegram News Channel</span></a></li>
<li><a href="https://t.me/canairio" rel="noreferer, ,noopener" target="_blank" class="fa-telegram"><span class="label">Telegram Chat Tech Support</span></a></li>
</ul>
</li>
<li style="padding-left: 3px;"><a href="https://liberapay.com/CanAirIO"><span><img alt="Liberapay receives" src="http://img.shields.io/liberapay/receives/CanAirIO.svg?logo=liberapay"></span></a></li>
<li style="padding-left: 3px;"><a href="https://liberapay.com/CanAirIO"><span><img alt="Liberapay patrons" src="http://img.shields.io/liberapay/patrons/CanAirIO.svg?logo=liberapay"></span></a></li>
</ul>
</div>
</div>
<ul class="menu">
<li>We want you to do it in your city</li><li>It is for real: <a href="https://github.com/kike-canaries">First steps</a></li>
</ul>
</div>
</footer>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>