-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
302 lines (284 loc) · 23.6 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="icon" type="image/x-icon" href="./images/favicon.svg" />
<link href="style.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<title>Breez</title>
</head>
<body class="page">
<!-- Navigation -->
<div class="header">
<nav class="navbar navbar-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="./images/logo.svg" alt="Breez" width="120" onclick="window.location.reload();" />
</a>
<!-- Search -->
<form class="col-lg-3 col-md-6 col-sm-6 col-12 d-flex search" name="search" id="searchForm">
<div class="input-group">
<input id="search" class="form-control me-2 titleXS" type="search" placeholder="City" aria-label="Search" />
</div>
<button class="btn titleXS" type="submit" id="go">GO!</button>
</form>
</div>
</nav>
</div>
<!-- Location -->
<section class="container-fluid">
<div class="row content">
<!-- Infos -->
<div class="col-lg-9 col-md-6 col-sm-6 col-12">
<h1 class="titleL" id="location"></h1>
<h2 class="titleM secondary" id="date"></h2>
<div class="flex horizontal space12 infos">
<div class="pill">
<h3 class="titleXS tertiary" id="description"></h3>
</div>
<div class="pill">
<h3 class="titleXS tertiary" id="aqi"></h3>
</div>
</div>
</div>
<!-- Temperature -->
<div class="col-lg-3 col-md-6 col-sm-6 col-12">
<h3 class="titleXL align-right" id="temp"></h3>
</div>
</div>
</section>
<!-- Current -->
<section class="container-fluid">
<div class="row content">
<div class="col-lg-2 col-md-4 col-6">
<!-- Min -->
<div class="flex horizontal space8">
<div class="pillSquare">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M10 6C10 4.89543 10.8954 4 12 4C13.1046 4 14 4.89543 14 6V11.5001C14 12.145 14.3101 12.69 14.7069 13.055C15.5032 13.7874 16 14.835 16 16C16 18.2091 14.2091 20 12 20C9.79086 20 8 18.2091 8 16C8 14.835 8.49678 13.7874 9.29309 13.055C9.68992 12.69 10 12.145 10 11.5001V6ZM12 2C9.79086 2 8 3.79086 8 6V11.4982C7.99954 11.5002 7.99815 11.505 7.99438 11.5128C7.98627 11.5296 7.96922 11.5553 7.93916 11.583C6.7484 12.6782 6 14.2524 6 16C6 19.3137 8.68629 22 12 22C15.3137 22 18 19.3137 18 16C18 14.2524 17.2516 12.6782 16.0608 11.583C16.0308 11.5553 16.0137 11.5296 16.0056 11.5128C16.0019 11.505 16.0005 11.5002 16 11.4982V6C16 3.79086 14.2091 2 12 2ZM12 18C13.1046 18 14 17.1046 14 16C14 14.8954 13.1046 14 12 14C10.8954 14 10 14.8954 10 16C10 17.1046 10.8954 18 12 18Z"
class="icons"
/>
</svg>
</div>
<div class="vertical details">
<h4 class="titleXS secondary">Min</h4>
<h4 class="titleXS primary" id="tempMin"></h4>
</div>
</div>
<!-- Max -->
<div class="flex horizontal space8">
<div class="pillSquare">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M10 6C10 4.89543 10.8954 4 12 4C13.1046 4 14 4.89543 14 6V11.5001C14 12.145 14.3101 12.69 14.7069 13.055C15.5032 13.7874 16 14.835 16 16C16 18.2091 14.2091 20 12 20C9.79086 20 8 18.2091 8 16C8 14.835 8.49678 13.7874 9.29309 13.055C9.68992 12.69 10 12.145 10 11.5001V6ZM12 2C9.79086 2 8 3.79086 8 6V11.4982C7.99954 11.5002 7.99815 11.505 7.99438 11.5128C7.98627 11.5296 7.96922 11.5553 7.93916 11.583C6.7484 12.6782 6 14.2524 6 16C6 19.3137 8.68629 22 12 22C15.3137 22 18 19.3137 18 16C18 14.2524 17.2516 12.6782 16.0608 11.583C16.0308 11.5553 16.0137 11.5296 16.0056 11.5128C16.0019 11.505 16.0005 11.5002 16 11.4982V6C16 3.79086 14.2091 2 12 2ZM12 18C13.1046 18 14 17.1046 14 16C14 14.8954 13.1046 14 12 14C10.8954 14 10 14.8954 10 16C10 17.1046 10.8954 18 12 18Z"
class="icons"
/>
</svg>
</div>
<div class="vertical details">
<h4 class="titleXS secondary">Max</h4>
<h4 class="titleXS primary" id="tempMax"></h4>
</div>
</div>
</div>
<div class="col-lg-2 col-md-4 col-6">
<!-- Sunrise -->
<div class="flex horizontal space8">
<div class="pillSquare">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M15.7071 5.70711C15.3166 6.09763 14.6834 6.09763 14.2929 5.70711L13 4.41421V9C13 9.55229 12.5523 10 12 10C11.4477 10 11 9.55229 11 9V4.41421L9.70711 5.70711C9.31658 6.09763 8.68342 6.09763 8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289L11.2929 1.29289C11.6834 0.902369 12.3166 0.902369 12.7071 1.29289L15.7071 4.29289C16.0976 4.68342 16.0976 5.31658 15.7071 5.70711ZM19.0711 11.3432C19.4616 10.9526 19.4616 10.3195 19.0711 9.92894C18.6806 9.53842 18.0474 9.53842 17.6569 9.92894L16.2427 11.3432C15.8522 11.7337 15.8522 12.3668 16.2427 12.7574C16.6332 13.1479 17.2664 13.1479 17.6569 12.7574L19.0711 11.3432ZM22 18C22.5523 18 23 17.5523 23 17C23 16.4477 22.5523 16 22 16H20C19.4477 16 19 16.4477 19 17C19 17.5523 19.4477 18 20 18H22ZM5 17C5 17.5523 4.55228 18 4 18H2C1.44772 18 1 17.5523 1 17C1 16.4477 1.44772 16 2 16H4C4.55228 16 5 16.4477 5 17ZM6.34319 12.7574C6.73371 13.1479 7.36688 13.1479 7.7574 12.7574C8.14792 12.3668 8.14792 11.7337 7.7574 11.3432L6.34319 9.92894C5.95266 9.53842 5.3195 9.53842 4.92897 9.92894C4.53845 10.3195 4.53845 10.9526 4.92897 11.3432L6.34319 12.7574ZM22 21C22 21.5523 21.5523 22 21 22H12H3C2.44772 22 2 21.5523 2 21C2 20.4477 2.44772 20 3 20H6.23219C6.08099 19.6183 6 19.1644 6 18.625C6 15.5184 8.68629 13 12 13C15.3137 13 18 15.5184 18 18.625C18 19.1644 17.919 19.6183 17.7678 20H21C21.5523 20 22 20.4477 22 21ZM12 20C13.7152 20 14.8116 19.9089 15.4691 19.6331C15.735 19.5216 15.8199 19.4212 15.8571 19.3646C15.8972 19.3036 16 19.1117 16 18.625C16 16.7426 14.3327 15 12 15C9.66731 15 8 16.7426 8 18.625C8 19.1117 8.10284 19.3036 8.14292 19.3646C8.18012 19.4212 8.26503 19.5216 8.53095 19.6331C9.18839 19.9089 10.2848 20 12 20Z"
class="icons"
/>
</svg>
</div>
<div class="vertical details">
<h4 class="titleXS secondary">Sunrise</h4>
<h4 class="titleXS primary" id="sunrise"></h4>
</div>
</div>
<!-- Sunset -->
<div class="flex horizontal space8">
<div class="pillSquare">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M14.2929 5.79289L13 7.08579L13 2C13 1.44772 12.5523 1 12 1C11.4477 1 11 1.44772 11 2L11 7.08579L9.70711 5.79289C9.31658 5.40237 8.68342 5.40237 8.29289 5.79289C7.90237 6.18342 7.90237 6.81658 8.29289 7.20711L11.2929 10.2071C11.6834 10.5976 12.3166 10.5976 12.7071 10.2071L15.7071 7.20711C16.0976 6.81658 16.0976 6.18342 15.7071 5.79289C15.3166 5.40237 14.6834 5.40237 14.2929 5.79289ZM19.0711 11.3432C19.4616 10.9526 19.4616 10.3195 19.0711 9.92894C18.6806 9.53842 18.0474 9.53842 17.6569 9.92894L16.2427 11.3432C15.8522 11.7337 15.8522 12.3668 16.2427 12.7574C16.6332 13.1479 17.2664 13.1479 17.6569 12.7574L19.0711 11.3432ZM22 18C22.5523 18 23 17.5523 23 17C23 16.4477 22.5523 16 22 16H20C19.4477 16 19 16.4477 19 17C19 17.5523 19.4477 18 20 18H22ZM5 17C5 17.5523 4.55228 18 4 18H2C1.44772 18 1 17.5523 1 17C1 16.4477 1.44772 16 2 16H4C4.55228 16 5 16.4477 5 17ZM6.34319 12.7574C6.73371 13.1479 7.36688 13.1479 7.7574 12.7574C8.14792 12.3668 8.14792 11.7337 7.7574 11.3432L6.34319 9.92894C5.95266 9.53842 5.3195 9.53842 4.92897 9.92894C4.53845 10.3195 4.53845 10.9526 4.92897 11.3432L6.34319 12.7574ZM22 21C22 21.5523 21.5523 22 21 22H12H3C2.44772 22 2 21.5523 2 21C2 20.4477 2.44772 20 3 20H6.23219C6.08099 19.6183 6 19.1644 6 18.625C6 15.5184 8.68629 13 12 13C15.3137 13 18 15.5184 18 18.625C18 19.1644 17.919 19.6183 17.7678 20H21C21.5523 20 22 20.4477 22 21ZM12 20C13.7152 20 14.8116 19.9089 15.4691 19.6331C15.735 19.5216 15.8199 19.4212 15.8571 19.3646C15.8972 19.3036 16 19.1117 16 18.625C16 16.7426 14.3327 15 12 15C9.66731 15 8 16.7426 8 18.625C8 19.1117 8.10284 19.3036 8.14292 19.3646C8.18012 19.4212 8.26503 19.5216 8.53095 19.6331C9.18839 19.9089 10.2848 20 12 20Z"
class="icons"
/>
</svg>
</div>
<div class="vertical details">
<h4 class="titleXS secondary">Sunset</h4>
<h4 class="titleXS primary" id="sunset"></h4>
</div>
</div>
</div>
<div class="col-lg-2 col-md-4 col-6">
<!-- Wind -->
<div class="flex horizontal space8">
<div class="pillSquare">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M10.0033 5.97211C11.6618 5.26915 13.5 6.48651 13.5 8.28787C13.5 9.67697 12.3739 10.803 10.9848 10.803L5 10.803C4.44772 10.803 4 10.3553 4 9.80305C4 9.25076 4.44772 8.80305 5 8.80305L10.9848 8.80305C11.2693 8.80305 11.5 8.5724 11.5 8.28787C11.5 7.9189 11.1235 7.66955 10.7838 7.81354L10.6024 7.89043C10.0939 8.10595 9.50693 7.86845 9.29141 7.35995C9.07588 6.85146 9.31339 6.26452 9.82188 6.049L10.0033 5.97211ZM15.32 9.26583C16.5188 8.06699 18.4274 7.96128 19.7513 9.0204C20.5426 9.65345 21 10.6161 21 11.6242C21 13.4755 19.5005 15 17.6361 15L3.5 15C2.94772 15 2.5 14.5523 2.5 14C2.5 13.4477 2.94772 13 3.5 13L17.6361 13C18.3828 13 19 12.384 19 11.6242C19 11.2184 18.8147 10.8324 18.5019 10.5821C17.9738 10.1596 17.2124 10.2018 16.7342 10.68L16.2071 11.2071C15.8166 11.5977 15.1834 11.5977 14.7929 11.2071C14.4024 10.8166 14.4024 10.1834 14.7929 9.79291L15.32 9.26583ZM7 17C6.44772 17 6 17.4477 6 18C6 18.5523 6.44772 19 7 19H15C15.5523 19 16 18.5523 16 18C16 17.4477 15.5523 17 15 17H7Z"
class="icons"
/>
</svg>
</div>
<div class="vertical details">
<h4 class="titleXS secondary">Wind</h4>
<h4 class="titleXS primary" id="wind"></h4>
</div>
</div>
<!-- Wind Degree -->
<div class="flex horizontal space8">
<div class="pillSquare">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.26862 16.8916C5.27743 16.8715 5.28627 16.8513 5.29513 16.831L10.1679 5.69323C10.1763 5.67409 10.1847 5.65494 10.193 5.63581C10.3673 5.23727 10.5393 4.84377 10.7168 4.55737C10.8876 4.28166 11.2782 3.74742 12.0002 3.74742C12.7222 3.74742 13.1129 4.28166 13.2837 4.55737C13.4612 4.84378 13.6332 5.23728 13.8074 5.63582C13.8158 5.65495 13.8242 5.67409 13.8326 5.69323L18.7053 16.831C18.7142 16.8513 18.723 16.8715 18.7319 16.8916C18.9591 17.4108 19.1689 17.8902 19.2789 18.2702C19.3366 18.4697 19.3943 18.7287 19.3773 19.0032C19.3582 19.3126 19.2407 19.6611 18.9392 19.9321C18.6377 20.203 18.2786 20.2827 17.969 20.2687C17.6942 20.2564 17.4428 20.1714 17.2506 20.0928C16.8845 19.9429 16.4302 19.6832 15.9382 19.402C15.9191 19.3911 15.8999 19.3801 15.8807 19.3692L12.0002 17.1517L8.11972 19.3692C8.10053 19.3801 8.0814 19.3911 8.06231 19.402C7.57028 19.6832 7.11594 19.9429 6.74983 20.0928C6.55769 20.1714 6.30628 20.2564 6.03151 20.2687C5.72184 20.2827 5.36277 20.203 5.06127 19.9321C4.75977 19.6611 4.64226 19.3126 4.62313 19.0032C4.60616 18.7287 4.66385 18.4697 4.72158 18.2702C4.83156 17.8902 5.04139 17.4108 5.26862 16.8916ZM7.12745 17.6327L11.008 15.4152C11.0149 15.4113 11.0219 15.4072 11.0292 15.4031C11.1308 15.345 11.2607 15.2706 11.384 15.2153C11.5359 15.1472 11.7437 15.0759 12.0002 15.0759C12.2568 15.0759 12.4646 15.1472 12.6165 15.2153C12.7398 15.2706 12.8697 15.345 12.9713 15.4031C12.9785 15.4072 12.9856 15.4113 12.9925 15.4152L16.873 17.6327L12.0002 6.49487L7.12745 17.6327Z"
class="icons"
/>
</svg>
</div>
<div class="vertical details">
<h4 class="titleXS secondary">Wind Deg</h4>
<h4 class="titleXS primary" id="windDeg"></h4>
</div>
</div>
</div>
<div class="col-lg-2 col-md-4 col-6">
<!-- Cloud -->
<div class="flex horizontal space8">
<div class="pillSquare">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M17.5532 4.0307C16.6163 3.92641 15.6691 4.08908 14.8207 4.49994C13.9723 4.91081 13.2573 5.55313 12.7583 6.35282C12.6126 6.58613 12.4872 6.83006 12.3825 7.08196C11.2502 6.39546 9.92155 6 8.5 6C4.35786 6 1 9.35787 1 13.5C1 17.6421 4.35786 21 8.5 21C8.62493 21 8.74923 20.9969 8.87282 20.9909C8.91739 20.9969 8.96289 21 9.00911 21H16C18.7614 21 21 18.7614 21 16C21 14.8743 20.628 13.8355 20.0002 12.9998C20.1859 12.8605 20.3624 12.708 20.5281 12.543C21.196 11.8779 21.6623 11.0374 21.8732 10.1187C22.0842 9.19995 22.031 8.2403 21.7201 7.35043C21.4091 6.46057 20.8529 5.67674 20.1156 5.08936C19.3783 4.50198 18.49 4.13499 17.5532 4.0307ZM18.0917 13.8495L18.0981 13.8779C18.1042 13.8766 18.1103 13.8752 18.1164 13.8738C18.6622 14.4171 19 15.1691 19 16C19 17.6569 17.6569 19 16 19H9.18341C9.09738 18.9834 9.00766 18.9777 8.91584 18.9846C8.77874 18.9948 8.64007 19 8.5 19C5.46243 19 3 16.5376 3 13.5C3 10.4624 5.46243 8 8.5 8C10.7499 8 12.6865 9.3511 13.5384 11.2903C13.9313 12.1847 14.8177 13 16 13C16.8135 13 17.5513 13.3238 18.0917 13.8495ZM18.4373 11.6333C18.6855 11.4978 18.9145 11.3273 19.1168 11.1258C19.5176 10.7267 19.7974 10.2225 19.9239 9.67122C20.0505 9.11997 20.0186 8.54418 19.832 8.01026C19.6454 7.47634 19.3117 7.00604 18.8694 6.65362C18.427 6.30119 17.894 6.08099 17.3319 6.01842C16.7698 5.95585 16.2014 6.05345 15.6924 6.29997C15.1834 6.54649 14.7544 6.93188 14.455 7.41169C14.2547 7.73252 14.1179 8.08681 14.0498 8.45546C14.5928 9.05247 15.0406 9.7373 15.3695 10.4859C15.53 10.8512 15.8064 11 16 11C16.885 11 17.7162 11.2299 18.4373 11.6333Z"
class="icons"
/>
</svg>
</div>
<div class="vertical details">
<h4 class="titleXS secondary">Clouds</h4>
<h4 class="titleXS primary" id="clouds"></h4>
</div>
</div>
<!-- Visibility -->
<div class="flex horizontal space8">
<div class="pillSquare">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M2 11.9999L1.1576 11.461C0.93405 11.8105 0.949503 12.2617 1.19644 12.5951L2 11.9999ZM3.52519 12.2731C3.4259 12.1613 3.33603 12.0576 3.25608 11.9636C3.32069 11.8793 3.39258 11.7874 3.47157 11.6893C3.89759 11.1598 4.52403 10.4539 5.3225 9.75013C6.93453 8.32929 9.15114 7 11.7766 7C13.8929 7 15.8177 7.86191 17.4023 8.95534C18.9281 10.0081 20.0779 11.2344 20.6958 11.9652C20.0163 12.6967 18.754 13.9466 17.1748 15.0215C15.5289 16.1419 13.644 17 11.7766 17C9.46776 17 7.25247 15.6861 5.53366 14.2357C4.69015 13.5239 4.00213 12.8096 3.52519 12.2731ZM11.7766 5C8.46337 5 5.79165 6.67064 4.00006 8.24974C3.09672 9.04595 2.39252 9.84 1.91335 10.4355C1.67321 10.734 1.48808 10.9844 1.36126 11.163C1.29782 11.2523 1.24886 11.3237 1.2148 11.3744C1.19777 11.3997 1.18445 11.4198 1.1749 11.4344L1.16341 11.452L1.15979 11.4576L1.15852 11.4596L1.15801 11.4604C1.1578 11.4607 1.1576 11.461 2 11.9999C1.19644 12.5951 1.19662 12.5953 1.19682 12.5956L1.19731 12.5963L1.19859 12.598L1.20239 12.6031L1.21486 12.6197C1.22532 12.6335 1.24008 12.6529 1.25902 12.6775C1.2969 12.7267 1.35156 12.7966 1.42212 12.8844C1.56317 13.0598 1.76823 13.3069 2.03033 13.6017C2.55336 14.1902 3.30971 14.9759 4.24384 15.7642C6.08029 17.3139 8.75332 19 11.7766 19C14.224 19 16.5095 17.8937 18.3002 16.6749C20.1057 15.4459 21.5154 14.0287 22.2327 13.249C22.8713 12.5548 22.9129 11.5003 22.2972 10.7622C21.631 9.96366 20.3218 8.53989 18.5382 7.30919C16.7577 6.08065 14.4392 5 11.7766 5ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 8C9.79087 8 8.00001 9.79086 8.00001 12C8.00001 14.2091 9.79087 16 12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8Z"
class="icons"
/>
</svg>
</div>
<div class="vertical details">
<h4 class="titleXS secondary">Visibility</h4>
<h4 class="titleXS primary" id="visibility"></h4>
</div>
</div>
</div>
<div class="col-lg-2 col-md-4 col-6">
<!-- Humidity -->
<div class="flex horizontal space8">
<div class="pillSquare">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M12.5962 3.19707L12.0001 4L11.3599 3.23177C11.7146 2.93623 12.2255 2.92188 12.5962 3.19707ZM12.0312 5.31488C11.9467 5.39398 11.8552 5.48093 11.7576 5.57524C11.2157 6.09908 10.4949 6.84407 9.77678 7.72971C8.30065 9.55011 7 11.7662 7 13.799C7 14.7124 7.32152 16.049 8.11818 17.1325C8.88384 18.1739 10.0951 19 12 19C13.9049 19 15.1162 18.1739 15.8818 17.1325C16.6785 16.049 17 14.7124 17 13.799C17 11.4829 15.6853 9.26177 14.2351 7.5392C13.5233 6.69374 12.809 6.00415 12.2724 5.52615C12.1871 5.45015 12.1064 5.37965 12.0312 5.31488ZM15.765 6.2511C17.3147 8.0918 19 10.7701 19 13.799C19 15.0866 18.5715 16.8505 17.4932 18.3172C16.3838 19.8261 14.5951 21 12 21C9.40488 21 7.61616 19.8261 6.50682 18.3172C5.42848 16.8505 5 15.0866 5 13.799C5 11.0328 6.6994 8.34938 8.22332 6.47004C9.0052 5.50581 9.78449 4.70086 10.3676 4.13723C10.6597 3.85482 10.9042 3.63147 11.0773 3.47739C11.1638 3.40031 11.2326 3.34047 11.2807 3.29913C11.3047 3.27846 11.3236 3.26241 11.3369 3.25113L11.3527 3.23781L11.3574 3.23388L11.3599 3.23177C11.3601 3.23159 11.3599 3.23177 12.0001 4C12.5962 3.19707 12.5959 3.19686 12.5962 3.19707L12.5991 3.19923L12.6042 3.20303L12.6207 3.21552C12.6346 3.22601 12.654 3.2408 12.6786 3.25978C12.7278 3.29775 12.7977 3.35252 12.8854 3.42324C13.0608 3.5646 13.3079 3.7701 13.6028 4.03278C14.1912 4.55695 14.9769 5.31494 15.765 6.2511Z"
class="icons"
/>
</svg>
</div>
<div class="vertical details">
<h4 class="titleXS secondary">Humidity</h4>
<h4 class="titleXS primary" id="humidity"></h4>
</div>
</div>
<!-- Pressure -->
<div class="flex horizontal space8">
<div class="pillSquare">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M11 19.9381V19C11 18.4477 11.4477 18 12 18C12.5523 18 13 18.4477 13 19V19.9381C16.6187 19.4869 19.4869 16.6187 19.9381 13H19C18.4477 13 18 12.5523 18 12C18 11.4477 18.4477 11 19 11H19.9381C19.4869 7.38128 16.6187 4.51314 13 4.06189V5C13 5.55228 12.5523 6 12 6C11.4477 6 11 5.55228 11 5V4.06189C7.38128 4.51314 4.51314 7.38128 4.06189 11H5C5.55228 11 6 11.4477 6 12C6 12.5523 5.55228 13 5 13H4.06189C4.51314 16.6187 7.38128 19.4869 11 19.9381ZM22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM14.0961 9.90394L13.0421 12.3632C12.8765 12.7495 12.4967 13 12.0763 13C11.4819 13 11 12.5181 11 11.9237C11 11.5033 11.2505 11.1235 11.6368 10.9579L14.0961 9.90394ZM16.8699 8.50881C17.2433 7.63761 16.3624 6.75672 15.4912 7.1301L10.849 9.11961C9.72728 9.60034 9 10.7033 9 11.9237C9 13.6227 10.3773 15 12.0763 15C13.2967 15 14.3997 14.2727 14.8804 13.151L16.8699 8.50881Z"
class="icons"
/>
</svg>
</div>
<div class="vertical details">
<h4 class="titleXS secondary">Pressure</h4>
<h4 class="titleXS primary" id="pressure"></h4>
</div>
</div>
</div>
<div class="col-lg-2 col-md-4 col-6">
<!-- Uvi -->
<div class="flex horizontal space8">
<div class="pillSquare">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M12 2C12.5523 2 13 2.44772 13 3V5C13 5.55228 12.5523 6 12 6C11.4477 6 11 5.55228 11 5V3C11 2.44772 11.4477 2 12 2ZM12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16ZM13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19V21C11 21.5523 11.4477 22 12 22C12.5523 22 13 21.5523 13 21V19ZM19.0709 4.92888C19.4614 5.3194 19.4614 5.95257 19.0709 6.34309L17.6567 7.75731C17.2661 8.14783 16.633 8.14783 16.2424 7.75731C15.8519 7.36678 15.8519 6.73362 16.2424 6.34309L17.6567 4.92888C18.0472 4.53836 18.6804 4.53836 19.0709 4.92888ZM7.7574 17.6568C8.14792 17.2663 8.14792 16.6331 7.7574 16.2426C7.36688 15.8521 6.73371 15.8521 6.34319 16.2426L4.92897 17.6568C4.53845 18.0473 4.53845 18.6805 4.92897 19.071C5.3195 19.4616 5.95266 19.4616 6.34319 19.071L7.7574 17.6568ZM22 12C22 12.5523 21.5523 13 21 13H19C18.4477 13 18 12.5523 18 12C18 11.4477 18.4477 11 19 11H21C21.5523 11 22 11.4477 22 12ZM5 13C5.55228 13 6 12.5523 6 12C6 11.4477 5.55228 11 5 11H3C2.44772 11 2 11.4477 2 12C2 12.5523 2.44772 13 3 13H5ZM19.0709 19.0711C18.6804 19.4616 18.0472 19.4616 17.6567 19.0711L16.2424 17.6569C15.8519 17.2664 15.8519 16.6332 16.2424 16.2427C16.633 15.8522 17.2661 15.8522 17.6567 16.2427L19.0709 17.6569C19.4614 18.0474 19.4614 18.6806 19.0709 19.0711ZM6.34319 7.7574C6.73371 8.14792 7.36688 8.14792 7.7574 7.7574C8.14792 7.36688 8.14792 6.73371 7.7574 6.34319L6.34319 4.92897C5.95266 4.53845 5.3195 4.53845 4.92897 4.92897C4.53845 5.3195 4.53845 5.95266 4.92897 6.34319L6.34319 7.7574Z"
class="icons"
/>
</svg>
</div>
<div class="vertical details">
<h4 class="titleXS secondary">UV Index</h4>
<h4 class="titleXS primary" id="uvi"></h4>
</div>
</div>
<!-- Dew Point -->
<div class="flex horizontal space8">
<div class="pillSquare">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M10 6C10 4.89543 10.8954 4 12 4C13.1046 4 14 4.89543 14 6H12V8H14V10H12V12H14.0637C14.1741 12.4267 14.4174 12.7888 14.7069 13.055C15.5032 13.7874 16 14.835 16 16C16 18.2091 14.2091 20 12 20C9.79086 20 8 18.2091 8 16C8 14.835 8.49678 13.7874 9.29309 13.055C9.68992 12.69 10 12.145 10 11.5001V6ZM12 2C9.79086 2 8 3.79086 8 6V11.4982C7.99954 11.5002 7.99815 11.505 7.99438 11.5128C7.98627 11.5296 7.96922 11.5553 7.93916 11.583C6.7484 12.6782 6 14.2524 6 16C6 19.3137 8.68629 22 12 22C15.3137 22 18 19.3137 18 16C18 14.2524 17.2516 12.6782 16.0608 11.583C16.0308 11.5553 16.0137 11.5296 16.0056 11.5128C16.0019 11.505 16.0005 11.5002 16 11.4982V6C16 3.79086 14.2091 2 12 2ZM12 18C13.1046 18 14 17.1046 14 16C14 14.8954 13.1046 14 12 14C10.8954 14 10 14.8954 10 16C10 17.1046 10.8954 18 12 18Z"
class="icons"
/>
</svg>
</div>
<div class="vertical details">
<h4 class="titleXS secondary">Dew Point</h4>
<h4 class="titleXS primary" id="dewPoint"></h4>
</div>
</div>
</div>
</div>
</section>
<!-- Hourly Forecast -->
<section class="container-fluid scrolling-wrapper">
<div class="flex horizontal content" id="hourly-weather"></div>
</section>
<!-- Daily Forecast -->
<section class="container-fluid scrolling-wrapper">
<div class="flex horizontal content" id="daily-weather"></div>
</section>
<script type="module" src="app.js"></script>
</body>
</html>