-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
129 lines (117 loc) · 4.72 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AQI Search</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="favicon.ico" />
<!-- FONT -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<!-- FONTAWSOME -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css"
integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
</head>
<body>
<section id="home">
<div class="card">
<div class="heading">
<h2 class="head">AIR QUALITY INDEX</h2>
</div>
<div class="search">
<div>
<label >City</label><br/>
<input type="text" class="city">
</div>
<div>
<label for="">State</label><br/>
<input type="text" class="state">
</div>
<div>
<label for="">Country</label><br/>
<input type="text" class="country">
</div>
<button class="search-btn">Search</button>
</div>
<div id="display" class="display">
<h2 class="aq"></h2>
<div class="concern-level">
<h2 class="level"></h2>
</div>
</div>
</div>
</section>
<section id="pollutants">
<h1 style="margin: 1em;">Major Pollutants</h1>
<div class="pollutants">
<div class="pol pol-1">
<h3 class="o3"></h3>
<h3>Ozone</h3>
</div>
<div class="pol pol-2">
<h3 class="co"></h3>
<h3>CO</h3>
</div>
<div class="pol pol-3">
<h3 class="no2"></h3>
<h3>NO2</h3>
</div>
<div class="pol pol-4">
<h3 class="so2"></h3>
<h3>SO2</h3>
</div>
<div class="pol pol-5">
<h3 class="pm2"></h3>
<h3>PM2.5</h3>
</div>
</div>
</section>
<section id="about">
<div class="about-aqi">
<div class="img">
<img src="aqi-1.png" alt="" srcset="">
</div>
<div class="info">
<h3>What is Air Quality Index?</h3>
<p>
The air quality index (AQI) is an index for reporting air quality on a daily basis.
It is a measure of how air pollution affects one's health within a short time period.
The purpose of the AQI is to help people know how the local air quality impacts their health.
People can use this website to know AQI of their city.
The National Air Quality Index (AQI) was launched in New Delhi on September 17, 2014,
under the Swachh Bharat Abhiyan. The daily ozone AQI is calculated by taking the maximum
8 hour concentration from 07:00-23:00 LST, and then converting to AQI.
There are 17 8-hour averages considered in each day.
Each 8-hour average requires 6 of 8 hours (75%) for a valid calculation.
</p>
</p>
</div>
</div>
</section>
<section id="end">
<div class="moto">
<div class="plant-img">
<img src="bg.png" alt="">
</div>
<div class="quotation">
<p>Trees are the soul of our planet.</p>
<p>Planting trees would surely help in reducing toxic gases and balance the AQI.</p>
</div>
</div>
<div class="contact">
<div class="main">
<h3>Kartikay</h3>
<div class="media">
<a href="mailto:kapilkartikay01@gmail.com" target="__blank"><i class="far fa-envelope"></i></a>
<a href="https://github.com/kartikay23" target="__blank"><i class="fab fa-github"></i></a>
</div>
</div>
</div>
<h3 style="text-align: center;margin: 1% 0;">Developed by Jagadeesh & Kartikay Kapil</h3>
</section>
<script src="config.js"></script>
<script src="server.js"></script>
</body>
</html>