-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathumbrella.html
More file actions
183 lines (152 loc) · 7.49 KB
/
umbrella.html
File metadata and controls
183 lines (152 loc) · 7.49 KB
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
<!-- =============================== -->
<!-- Umbrella -->
<!-- A simple weather app -->
<!-- =============================== -->
<!DOCTYPE html>
<html lang="pl">
<head>
<!-- ------------ title ------------ -->
<title>Umbrella</title>
<!-- --------- description --------- -->
<meta name="description"
content="Prosta strona z informacjami pogodowymi, która powie Ci, czy musisz wziąć parasol, wychodząc na zewnątrz." />
<!-- --------- Open Graph ---------- -->
<meta property="og:title" content="Umbrella" />
<meta property="og:description"
content="Prosta strona z informacjami pogodowymi, która powie Ci, czy musisz wziąć parasol, wychodząc na zewnątrz." />
<meta property="og:image"
content="https://vardecab.github.io/umbrella/images/social-sharing/umbrella-facebook-ogimage-v2.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://vardecab.github.io/umbrella/umbrella.html" />
<meta name="twitter:card" content="summary_large_image" />
<!-- --------- theme color --------- -->
<!-- *NOTE: The theme-color meta tag provides a way to suggest a color that browsers should use to customize the display of the page or of the surrounding user interface. For example, browsers might use the color for the page’s title bar or use it as a color highlight in a tab bar or task switcher. -->
<meta name="theme-color" content="#000000" /> <!-- default -->
<!-- ------------ other ------------ -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- - website/tab icon / favicon -- -->
<link rel="icon" type="image/png" href="./images/umbrella-icon_blue-circle.png" />
<!-- ------------- CSS ------------- -->
<link rel="stylesheet" href="./styles/styles.min.css" /> <!-- website styling -->
<!-- --------- JavaScript ---------- -->
<!-- ---------- my files ----------- -->
<script src="./scripts/weather.js"></script> <!-- weather logic -->
<script src="./scripts/weatherx.js"></script> <!-- UV index & dew point logic -->
<script src="./scripts/airQuality.js"></script> <!-- air quality logic -->
<script src="./scripts/airQualityForecasts.js"></script> <!-- air quality forecasts -->
<script src="./scripts/airQuality-AQI_ug.js"></script> <!-- convert AQI to μg -->
<script src="./scripts/allergy.js"></script> <!-- allergy logic -->
<script src="./scripts/dispatcher.js"></script> <!-- get location & send coords to functions to get data -->
<script src="./scripts/findMe.js"></script> <!-- geolocation -->
<script src="./scripts/sunTimes.js"></script> <!-- sunrise, sunset -->
<!-- ----- external libraries ------ -->
<script src="./scripts/libraries/moment.min.js"></script> <!-- time formats manipulation -->
<script src="./scripts/libraries/dayjs.min.js"></script> <!-- date & time library -->
<script src="./scripts/libraries/js.cookie.min.js"></script>
<!-- lightweight JavaScript API for handling browser cookies -->
<script src="./scripts/libraries/jquery.slim.min.js"></script> <!-- jQuery for hide() and show() in allergy.js -->
<!-- -------- auto-refresh --------- -->
<meta http-equiv="refresh" content="900" />
<!-- auto refresh the website every x ms (/60 => min) to load a new forecast -->
</head>
<body>
<div class="container">
<div class="row">
<div class="twelve columns">
<img id="icon" title="Ikona pogody" src="./images/status/loading.svg" />
<!-- icon used while loading data -->
<div class="data_holder">
<div id="temperature" title="Średnia odczuwalna temperatura w ciągu najbliższych ~ 3 godzin"></div>
</div>
<div class="more_details" id="ShowHide">
<!-- <div class="more_details" id="ShowHide" onclick="ShowHide()"> -->
<!-- - wind & pressure & humidity -- -->
<span id="wind" title="Prędkość wiatru:"></span>
<span id="air_pressure" title="Ciśnienie:"></span>
<!-- FIX: API is now paid -->
<!-- <span id="dew_point" title="Punkt rosy:"></span> -->
<!-- --------- sun & moon ---------- -->
<br>
<span id="first_light" title="Pierwsze promienie słońca:">🌥️ </span>
<span id="sunrise" title="Wschód słońca:">🌅 </span>
<span id="sunset" title="Zachód słońca:">🌇 </span>
<span id="last_light" title="Ostatnie promienie słońca:">🌑 </span>
<!-- ------------ rain ------------- -->
<br>
<span id="rain" title="Opady:"></span>
<!-- ------------- UVI ------------- -->
<!-- FIX: API is now paid -->
<!-- <span id="uvi" title="Indeks UV:">🌤️ UVI: </span> -->
<!-- <span id="temperature_next_6hrs" title="Kolejne 6 godzin:">🕡 </span> -->
</div>
<div id="loading">Patrzę w chmury... 🧐</div>
<div id="umbrella" title="Deszcz w ciągu kolejnych 3 godzin?"></div>
<div id="clothes" title="Co by tu ubrać? 🤔"></div>
<div class="data_holder" id="ShowHide2">
<div id="air_quality" title="🤓 Dobre; 🤢 Złe; 🤬 Szkodliwe; ⚰️ RIP"></div>
<!-- <div id="air_quality"></div> -->
</div>
<div class="more_details">
<span id="pm25" title="PM2.5"></span>
<br>
<span id="pm10" title="PM10"></span>
<!-- TODO: probably not necessary -->
<span id="pm_forecast_6" title="Kolejne 6 godzin"></span>
<span id="pm_forecast_12" title="Kolejne 12 godzin"></span>
<span id="pm_forecast_18" title="Kolejne 18 godzin"></span>
<!-- TODO: ^ -->
</div>
<!-- FIX: doesn't work as of late 2024, the website is down so we need to take the data from a different API -->
<!-- <div id="allergy" title="Informacje alergologiczne - kliknij!">
<p id="allergy_placeholder"></p>
<p id="allergy_description"></p>
</div> -->
</div>
</div>
</div>
<div id="bottom_navbar">
<div id="to_the_right">
<p id="findme"
onclick="Cookies.remove('umbrella_coord_lat'); Cookies.remove('umbrella_coord_lng'); Cookies.remove('umbrella_location');"
title="Znajdź mnie!">
📍
</p>
<p id="location"
onclick="Cookies.remove('umbrella_coord_lat'); Cookies.remove('umbrella_coord_lng'); Cookies.remove('umbrella_location');"
title="Zmień miejsce">
🌍
</p>
</div>
<div id="to_the_left">
<!-- *NOTE: shutting down EN version until I figure out how to easily maintain two languages -->
<!-- <p
onclick="window.location='umbrella-en.html'"
title="Change language to English."
>
🇬🇧
</p> -->
<a href="https://github.com/vardecab/umbrella" target="_blank"><img id="github-logo"
alt="Link z logo GitHuba prowadzący do strony z kodem źródłowym."
title="Link z logo GitHuba prowadzący do strony z kodem źródłowym."
src="images/GitHub-Mark-64px.png"></img></a>
</div>
</div>
<script>
// be able to force more temperature details to show up and stop hiding
function ShowHide() {
var element = document.getElementById("ShowHide"); // assign value
if (element.style.display === "block") { // if visible then hide
element.style.display = "none";
} else { // if hidden then show
element.style.display = "block";
}
}
// add listeners so when elements are clicked the functions can start working
document.querySelector("#location").addEventListener("click", manualFinder); // manual location search
document.querySelector("#findme").addEventListener("click", findMe); // geolocation
document.querySelector("#temperature").addEventListener("click", ShowHide); // show/hide more temperature details
</script>
</body>
</html>