-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
87 lines (82 loc) · 3.76 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>aqi2ciggs</title>
<link rel="stylesheet" href="style.css">
<link rel="icon"
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%2210 0 100 100%22><text y=%22.90em%22 font-size=%2290%22>🚬</text></svg>">
<script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
<script data-goatcounter="https://aqi2ciggs.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
</head>
<body>
<div class="main">
<div id="location-nav">
Current Location: <span id="location"></span>
</div>
<div class="aqi2ciggs">
<div class="info-box">
<div class="info-header">
<h2>Air Quality Index (AQI)</h2>
</div>
<div class="info-content">
<span class="aqi" contenteditable="true" oninput="handleAqiChange(this)"
data-maxvalue="500">-</span>
</div>
<div id="aqi-warning" class="warning-message"></div>
<button class="card-button">AQI</button>
</div>
<div class="info-box">
<div class="info-header">
<h2>Number of Cigarettes</h2>
</div>
<div class="info-content">
<span id="ciggs">5</span>
</div>
<div class="info-description">
<p>Cigarettes smoked</p>
</div>
</div>
<div>
<button class="show-calculation-button" id="show-calculation-button">Show Calculation</button>
<div id="calculation-container">
<div id="calculation" class="collapsed calculation">
<h3>Calculation</h3>
<p>1 cigg = 22 μg/m³</p>
<!-- <p>1 μg/m³ = \( \frac{1}{22} \) cigg</p> -->
<!-- <p>1 AQI = 0.2 μg/m³</p> -->
<p>Current AQI: <span class="aqi">-</span></p>
<p>PM 2.5 Concentration based on AQI: <span id="conc-aqi"></span>\( \text{ } \mu g/m³ \)</p>
<p>Cigarettes smoked based on concentration: <span id="cigarettes-smoked"></span></p>
</div>
</div>
</div>
</div>
<div class="more-information">
<h2>Additional Information</h2>
<p>This works by converting the AQI to PM2.5 particle concentrations.</p>
<p>See the calculation for more info</p>
<p>I created this after seeing <a href="https://jasminedevv.github.io/AQI2cigarettes/"> this</a> and
calculation that I am using was taken from <a
href="https://www.airnow.gov/sites/default/files/custom-js/aqi-conc.js">here</a> which is also
mentioned in Jasmines site</p>
<p>The location is according to the users IP. support for GPS will be added soon</p>
<h5>Note: if location is not fetched, it's because of adblocker. ublock was blocking calls to ipinfo. Will
change the provider in future</h5>
</div>
</div>
<footer class="footer">
<div class="footer-links">
<a href="https://github.com/shoebham/aqi2ciggs" target="_blank">GitHub</a>|
<a href="mailto:me@shubhwym.me">Email</a>
</div>
<div class="footer-statement">
Created with 🚬
</div>
</footer>
<script src="script.js"></script>
</body>
</html>