-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
391 lines (389 loc) · 21.7 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
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Weather and sky tracker</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
</head>
<body>
<!--main-->
<main class="container-wrapper">
<main class="navigation-container">
<nav class="Navigation-window">
<ul>
<!--Navbar-contents-->
<li class="location-button">
<i class="bi bi-geo-alt-fill" id="location-tracker"></i>
</li>
<li class="clock-view-section-button">
<i class="bi bi-clock" id="clock-view-section"></i>
</li>
<li class="alarm-setter-nav-button">
<i class="bi bi-alarm" id="alarm-setter-section"></i>
</li>
<li class="moon-and-sun-tracker-nav">
<i class="bi bi-moon" id="moon-and-sun-section"></i>
</li>
<li class="weather-nav-button">
<i class="bi bi-cloud" id="weather-forecast-button"></i>
</li>
<li class="settings-nav-button">
<i class="bi bi-gear" id="user-settings"></i>
</li>
</ul>
</nav>
</main>
<!--Main navigation -->
<main class="content-of-container">
<!---Wrapper A location-->
<main class="location-wrapper">
<!--Search box-->
<div class="search-section">
<div class="searching-div">
<i class="bi bi-search" id="seach-button"></i>
<input id="location-input" type="text" placeholder="enter a location..">
</div>
<!-- add the location to my list-->
<div class="location-adder">
<button class="add-the-location">
<i class="bi bi-plus"></i>
</button>
</div>
</div>
<!--Locatons saved by user-->
<div class="saved-locations">
<!--saved-location-div-->
<div class="location-boxes">
<!--Container-->
<div class="location">
<div class="location-name">location</div><br>
<div class="buttons">
<i class="bi bi-eye" id="set-location"></i>
<i class="bi bi-trash" id="put-location-to-trash"></i>
</div>
</div>
<!--##-->
</div>
</div>
<!--location div-->
</main>
<!--location content wrapper end-->
<!--Time clock wrapper div-->
<main class="time-clock-wrapper">
<header class="location-text">Local-time at location</header>
<div class="time-and-date-wrapper">
<!--week wrapper-->
<div class="week-day-name-bar">
<span class="week-day-text">
<span class="day" dayIndex="0">Sun</span>
<span class="day" dayIndex="1">Mon</span>
<span class="day" dayIndex="2">Tue</span>
<span class="day" dayIndex="3">Wed</span>
<span class="day" dayIndex="4">Thu</span>
<span class="day" dayIndex="5">Fri</span>
<span class="day" dayIndex="6">Sat</span>
</span>
</div><br>
<div class="current-time-renderer">
<span class="time-text">12:34:56</span><br>
<br>
<span class="date-text">YYYY-MM-DD</span>
</div>
</div>
</main>
<!--Moon-phase wrapper-layout-->
<main class="Moon-phase-wrapper">
<div class="content-of-moon">
<div class="Heading-moon">
<header>Lunar Tracker</header>
</div><br>
<div class="location-parameters">
<span class="location-text">
location<p id="lat-long-text">00.00°/00.00°</p>
</span>
</div>
<div class="moon-section">
<div class="Moon-detail-div">
<div class="moon-image"></div>
</div>
<div class="moon-info-text">
<span class="Moon-Phase-Text">
<i class="bi bi-info-circle" id="full-moon-info-button"></i>
<span id="moon-phase-text">Full Moon (100 %)</span>
</span>
</div>
<div class="Moon-info-and-current-parameters">
<div>
<span class="moon-rise-time-text">Moon-rise: HH:MM</span>
</div>
<div>
<span class="moon-set-time-text">Moon-set: HH:MM</span>
</div>
<div>
<span class="sun-rise-text">Sun-rise: HH:MM</span>
</div>
<div>
<span class="sun-set-text">Sunset: HH:MM</span>
</div>
</div>
</div>
<!--Lunar cycle display-->
</div>
<!--full moon-->
<dialog class="full-moon-names">
<div class="top-close-button">
<i class="bi bi-x-circle-fill" id="close-fullMoon-dialog"></i>
</div>
<div class="content-of-full-moon-names">
<div class="Heading">
<header>Full Moon Lore's</header>
</div>
<div class="calendar-photo">
<i class="bi bi-calendar3"></i>
</div>
<div class="First-Para">
<p>
A full moon has been an integral part of nature for tracking<br>
seasons and changing months. Although most Common full Moon names<br>
are Native English interpretations from the old Farmers Almanac, some
are also Celtic, Anglo-Saxon, medieval English, and Neo-Pagan. <br>
</p><br>
</div>
<div class="inner-para-graphs">
<div class="Moon-image">
<div class="moon-image"></div>
</div>
<div class="inner-heading">
<div>
<header>January:The Wolf Moon 🐺</header>
</div>
<div>
<p>
The Full Moon of January is often called the <q>Wolf Moon</q> By <br>
Some european cultures, which depicts Howling of hungry wolves in the<br>
winter. <br>
</p>
</div>
</div>
<div class="inner-heading">
<div>
<header>February: The Snow Moon ❄️</header>
</div>
<div>
<p>
The Full Moon of February is Called <q>Snow Moon</q> which is named<br>
after abundant snow fall in Northern hemisphere. Some Call it the Bear<br>
Moon to refer the fact that bear cubs are born at this time of the year<br>
</p>
</div>
<div class="inner-heading">
<div>
<header>March: The Worm Moon 🪱</header>
</div>
<div>
<p>
The last full moon of winter season in March is called the <q>Worm Moon</q><br>
Because Earth worms that come out of the soil worm up. Native American tribes<br>
called it <q>The Crow Moon</q> for the crows coming back.<br>
</p>
</div>
</div>
<div class="inner-heading">
<div>
<header>April: The Pink Moon </header>
</div>
<div>
<p>
Its Called <q>Pink Moon</q> But has nothing to do with the color pink other<br>
Than fact that its the full moon of April. But Sometimes due to scattering of <br>
moon light in the lower atmosphere due to dust particles the moon can have a reddish<br>
to even pink hues.<br>
</p>
</div>
</div>
<div class="inner-heading">
<div>
<header>May: The Flower Moon 🥀</header>
</div>
<div>
<p>
The Full Moon of May is known as the flower Moon from the old farmers almanac<br>
Since in May The season is summer or spring in northern hemisphere the flower moon<br>
signifies the blooming of flowers in this month.<br>
</p>
</div>
</div>
<div class="inner-heading">
<div>
<header>June: The Strawberry Moon 🍓</header>
</div>
<div>
<p>
The Wild Strawberry's start to ripen during early summer months which gave the name<br>
<q>Strawberry Moon</q>Other native names are Green corn moon and Hot moon. Every 20<br>
years the full moon of this month coincides with the summer solstice.
</p>
</div>
</div>
<div class="inner-heading">
<div>
<header>July: The Buck Moon ♈</header>
</div>
<div>
<p>
In July, The full Moon is buck Moon named after reindeers that emerge from buck's <br>
forehead, Its also called <q>thunder Moon</q> because of frequently occurring <br>
thunderstorms in the summer.<br>
</p>
</div>
</div>
<div class="inner-heading">
<div>
<header>August: The Sturgeon Moon 🚤</header>
</div>
<div>
<p>
The August Full Moon is called Sturgeon Moon because a Large number of sturgeon fish<br>
are found in the great lakes of north America. The most common sturgeon in the Great Lakes<br>
is the lake sturgeon—males have a life span of 55 years, while females can live up to 150 years!<br>
It is also the American continent's largest freshwater fish and can grow to over two meters long <br>
(6 feet) and weigh around 90 kilos (200 pounds).<br>
</p>
</div>
</div>
<div class="inner-heading">
<div>
<header>September: The Harvest Moon 🌾</header>
</div>
<div>
<p>
The full Moon closest the september equinox is called Harvest Moon.<br>
Unlike other full Moons the moon rises almost right after sunset-for several<br>
evenings in a row, giving farmers extra hours of Bright Moon-light and allowing<br>
them to finish their harvests before the winter.<br>
</p>
</div>
</div>
<div class="inner-heading">
<div>
<header>October: Hunter's Moon 🔫</header>
</div>
<div>
<p>
Traditionally, people in the Northern Hemisphere spent October preparing for the<br>
coming winter by hunting, slaughtering, and preserving meats, giving this Full Moon <br>
<q>Hunter's Moon</q>.The name was added to the Farmer’s Almanac in North America and is<br>
used widely today.<br>
</p>
</div>
</div>
<div class="inner-heading">
<div>
<header>November: Beaver's Moon 🦫</header>
</div>
<div>
<p>
The Full Moon of November is Named after Beavers who build their winter dams at this time<br>
of the Year. Beavers are mostly nocturnal so they work under the light of the full moon<br>
Native American names for the November Full Moon are Frost Moon, Freezing Moon, Trading Moon,<br>
and Snow Moon, although the latter is more common for the February Full Moon. <br>
</p>
</div>
</div>
<div class="inner-heading">
<div>
<header>December: Cold Moon 🥶</header>
</div>
<div>
<p>
On December, at the Peak of cold winter nights the full Moon is called the cold moon,<br>
its also called <q>The Long Nights Moon</q>. Is December really cold?? No depends on where <br>
you live off-course but this full moon is closest to the winter solstice.<br>
</p>
</div>
</div>
</div>
</div>
<!--#-->
</div>
<!--dialog end-->
</dialog>
<!--Main end-->
</main>
<main class="weather-forecast-div">
<div class="Heading">
<header>Weather</header>
</div>
<div class="The-weather">
<div class="location-details">
<span class="city-location-text">country, city</span><br>
<span class="lat-long-text">00.000° 00.000°</span>
</div>
<!--Weather dispplay container-->
<div class="weather-display">
<div class="display-div">
<!--display-container-box-->
<div class="weather-condition-display-image">
<div class="weather-image"></div><!--Weather display-->
</div>
<div class="Air-quality-and-temperature-index-div">
<div class="aqi-container">
<span class="Air-quality-index">AQI: --</span>
<i class="bi bi-info-circle" id="AQI-info-button"></i>
</div>
<div class="temperature-text">
<span class="temperature-text">temperature: --°C</span><br>
<p class="weather-condition-text">Clear</p>
</div>
</div>
</div>
<!--Weather-condtions!-->
<div class="weather-parameters">
<div class="weather-content" id="cloud-cover-container">
<span class="cloud-cover-text">Cloud Cover: --%</span>
</div>
<div class="weather-content" id="pressure-info-container">
<span class="pressure-text">Pressure (Mb): --</span>
</div>
<div class="weather-content" id="humidity-info">
<span class="humidity-text">Humidity: --%</span>
</div>
<div class="weather-content" id="UV-index-info">
<span class="UV-index-text">UV index: --</span>
</div>
<div class="weather-content" id="Visibility-text">
<span class="visibility-text">Visibility: -- km</span>
</div>
<div class="weather-content" id="wind-speed">
<span class="wind-speed">Wind speed: -- km</span>
</div>
<div class="local-time">
<span>Local-time:
<span class="local-time-of-input-city" style="font-family: 'Time-clock';">YYYY-MM-DD HH:MM</span>
</span>
</div>
<div class="last-update">
<span>
Last-update:<span class="last-updated-time" style="font-family: 'Time-clock';">YYYY-MM-DD HH:MM</span>
</span>
</div>
</div>
<!--Weather-parameters div end -->
</div>
</div>
</main>
<!--weather-->
<!-- <main></main> -->
</main>
<!--Page layout-wrapper-->
<!--dialog elements-->
<!-- <dialog class="Settings-dialog-box">
<div class=""></div>
</dialog> -->
<!--complete background wrapper-->
</main>
<!--HTML content-end-->
<script src="utility.js"></script> <!--Script file-->
</body>
</html>