-
Notifications
You must be signed in to change notification settings - Fork 12
/
index.html
139 lines (134 loc) · 6.49 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
<!doctype html>
<html lang="en">
<head>
<title>AQI WTF?!</title>
<script type="text/javascript" src="app.js"></script>
<link rel="stylesheet" href="style.css" />
<script defer data-domain="aqi.wtf" src="https://plausible.io/js/script.js"></script>
<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>
<!-- Primary Meta Tags -->
<meta name="title" content="What the fuck is the AQI">
<meta name="description" content="What the fuck is the AQI from the PurpleAir sensor nearest to me?">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://aqiwtf.com/">
<meta property="og:title" content="AQI WTF?!">
<meta property="og:description" content="What the fuck is the AQI from the PurpleAir sensor nearest to me?">
<meta property="og:image" content="meta.png">
<!-- Twitter -->
<meta property="twitter:url" content="https://aqiwtf.com/">
<meta property="twitter:title" content="AQI WTF?!">
<meta property="twitter:description" content="What the fuck is the AQI from the PurpleAir sensor nearest to me?">
<meta property="twitter:image" content="meta.png">
<!-- Favicon and Friends -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">
</head>
<body class="checking">
<div class="container">
<div>
<h1>
<span id="aqi">Checking…</span>
<span class="maybe-show airmoji very-hazardous">☠️</span>
<span class="maybe-show airmoji hazardous">😵</span>
<span class="maybe-show airmoji very-unhealthy">🤢</span>
<span class="maybe-show airmoji unhealthy">😷</span>
<span class="maybe-show airmoji unhealthy-for-sensitive-groups">🙁</span>
<span class="maybe-show airmoji moderate">😐</span>
<span class="maybe-show airmoji good">😀</span>
</h1>
<div id="aqi-explanation">AQI calculated using <a href="https://www.epa.gov/sites/default/files/2021-05/documents/toolsresourceswebinar_purpleairsmoke_210519b.pdf">EPA-recommended corrections</a></div>
<div id="state"></div>
<h2> <span id="desc"></span>
<span class="maybe-show aqi-desc very-hazardous">Very Hazardous</span>
<span class="maybe-show aqi-desc hazardous">Hazardous</span>
<span class="maybe-show aqi-desc very-unhealthy">Very Unhealthy</span>
<span class="maybe-show aqi-desc unhealthy">Unhealthy</span>
<span class="maybe-show aqi-desc unhealthy-for-sensitive-groups">Unhealthy for sensitive groups</span>
<span class="maybe-show aqi-desc moderate">Moderate</span>
<span class="maybe-show aqi-desc good">Good</span>
</h2>
<h3 id="msg"></h3>
<div class="explanation maybe-show hazardous very-hazardous">
<p>
<strong>Everyone</strong>: Avoid all physical activity outdoors.
</p>
<p>
<strong>Sensitive groups</strong>: Remain indoors and keep
activity levels low. Follow tips for keeping particle levels low
indoors.
</p>
</div>
<div class="explanation maybe-show very-unhealthy">
<p>
<strong>Sensitive groups</strong>: Avoid all physical activity
outdoors. Move activities indoors or reschedule to a time when air
quality is better.
</p>
<p>
<strong>Everyone else</strong>: Avoid prolonged or heavy exertion.
Consider moving activities indoors or rescheduling to a time when
air quality is better.
</p>
</div>
<div class="explanation maybe-show unhealthy">
<p>
<strong>Sensitive groups</strong>: Avoid prolonged or heavy
exertion. Consider moving activities indoors or rescheduling.
</p>
<p>
<strong>Everyone else</strong>: Reduce prolonged or heavy
exertion. Take more breaks during outdoor activities.
</p>
</div>
<div class="explanation maybe-show unhealthy-for-sensitive-groups">
<p>
<strong>Sensitive groups</strong>: Reduce prolonged or heavy
exertion. It’s OK to be active outside, but take more breaks and do
less intense activities. Watch for symptoms such as coughing or
shortness of breath.
</p>
<p>
<strong>People with asthma</strong>: should follow their asthma
action plans and keep quick relief medicine handy.
</p>
<p>
<strong>If you have heart disease</strong>: Symptoms such as
palpitations, shortness of breath, or unusual fatigue may indicate a
serious problem. If you have any of these, contact your heath care
provider.
</p>
</div>
<div class="explanation maybe-show moderate">
<p>
<strong>Unusually sensitive people</strong>: Consider reducing
prolonged or heavy exertion. Watch for symptoms such as coughing or
shortness of breath. These are signs to take it easier.
</p>
<p>
<strong>Everyone else</strong>: It’s a good day to be active
outside.
</p>
</div>
<div class="explanation maybe-show good">
<p>It’s a great day to be active outside.</p>
</div>
<div id="explain-permissions">
We need your browser location to find the nearest PurpleAir sensor.
This information never leaves your device. It's not sent to a server.
</div>
</div>
</div>
<footer>
<div>
<a href="https://aqi.wtf">aqi.wtf</a> is made with ❤️ by <a href="https://skalnik.com">@skalnik</a> & <a href="https://github.com/skalnik/aqi-wtf/graphs/contributors">friends</a> • <a href="https://github.com/skalnik/aqi-wtf/">Code</a> • <a href="https://www2.purpleair.com">Data</a> • <a href="/privacy.html">Privacy</a>
</div>
<div class="right">
<a id="powerwash" href="#" onclick="clearStorage(); return false;">Clear stored data.</a>
</div>
</footer>
</body>
</html>