initial commit
This commit is contained in:
BIN
html/img/down.png
Normal file
BIN
html/img/down.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
BIN
html/img/favicon.png
Normal file
BIN
html/img/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
BIN
html/img/hb.png
Normal file
BIN
html/img/hb.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
395
html/style.css
Normal file
395
html/style.css
Normal file
@ -0,0 +1,395 @@
|
||||
@font-face {
|
||||
font-family: FiraSans;
|
||||
src: url("fonts/FiraSans-Medium.otf") format: ("opentype");
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: "FiraSans", sans-serif;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #101010;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
padding-bottom: 100px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
/* Popup container */
|
||||
.popup {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Popup */
|
||||
|
||||
.popup h5 {
|
||||
margin-top: 0px;
|
||||
border: 1px solid #248bcc;
|
||||
border-radius: 25px;
|
||||
font-size: 15px;
|
||||
color: white;
|
||||
position: relative;
|
||||
padding-left: 7px;
|
||||
padding-right: 7px;
|
||||
}
|
||||
|
||||
.popup h5:hover {
|
||||
background-color: #248bcc;
|
||||
}
|
||||
|
||||
.popup {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.popup .popuptext {
|
||||
background-color: #101010;
|
||||
position: absolute;
|
||||
z-index: 512;
|
||||
visibility: hidden;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
text-align: left;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
margin-left: -50%;
|
||||
border: 1px solid #248bcc;
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
.popup .popuptext p {
|
||||
color: white;
|
||||
font-size: 15px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.popup .popuptext .emo {
|
||||
margin-top: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
.popup .popuptext .emo a {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
font-size: 69px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.popup .popuptext .text {
|
||||
padding-left: 25px;
|
||||
}
|
||||
|
||||
.popup .popuptext .text p {
|
||||
margin-bottom: 25px;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.popup .popuptext .sources {
|
||||
padding-left: 25px;
|
||||
}
|
||||
.popup .popuptext .sources a {
|
||||
color: #248bcc;
|
||||
padding-top: 0px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
/* Hide and show the popup */
|
||||
.popup .show {
|
||||
position: absolute;
|
||||
z-index: 512;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.main {
|
||||
border: 1px solid;
|
||||
border-color: #248bcc;
|
||||
border-radius: 25px 0 0 25px;
|
||||
float: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin-top: 7px;
|
||||
width: 100%;
|
||||
align: center;
|
||||
}
|
||||
|
||||
.conditions {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
width: 20%;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
color: grey;
|
||||
}
|
||||
|
||||
.current {
|
||||
padding-bottom: 5px;
|
||||
padding-top: 5px;
|
||||
color: #101010;
|
||||
text-align: center;
|
||||
border-radius: 15px;
|
||||
background-color: #248bcc;
|
||||
}
|
||||
|
||||
.current .update {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
font-weight: normal;
|
||||
color: white;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.current .wttr {
|
||||
margin: 0;
|
||||
color: #101010;
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.current .danger {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
background-color: #248bcc;
|
||||
border-radius: 0 0 25px 25px;
|
||||
color: white;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.current .level {
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.danger p {
|
||||
color: #101010;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
font-weight: none;
|
||||
color: white;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.cat {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.data {
|
||||
margin-top: 5px;
|
||||
font-weight: bold;
|
||||
font-size: 25px;
|
||||
padding-bottom: 5px;
|
||||
padding-top: 5px;
|
||||
color: white;
|
||||
border-bottom: 1px solid #248bcc;
|
||||
border-left: 1px solid #248bcc;
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
.cat p {
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.datapoint {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 0;
|
||||
padding-left: 10px;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
.video {
|
||||
position: relative;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.video img {
|
||||
width: 80%;
|
||||
max-height: inherit;
|
||||
max-width: inherit;
|
||||
padding-top: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer p {
|
||||
font-size: 13px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
font-size: 13px;
|
||||
color: #FFFFFF;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.footer a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1100px) {
|
||||
.popup .show {
|
||||
position: absolute;
|
||||
z-index: 512;
|
||||
visibility: visible;
|
||||
}
|
||||
.main {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-radius: 25px 25px 0px 0px;
|
||||
}
|
||||
.conditions, .video {
|
||||
width: 100%;
|
||||
}
|
||||
.conditons {
|
||||
font-size: 13px;
|
||||
width: 100%;
|
||||
}
|
||||
.conditions .cat {
|
||||
width: 50%;
|
||||
display: inline;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
padding-left: 5%;
|
||||
padding-right: 5%;
|
||||
}
|
||||
.header {
|
||||
margin-bottom: 0px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.header img {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.logo {
|
||||
max-height: 75px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.popup .popuptext {
|
||||
top: 0%;
|
||||
left: 50%;
|
||||
margin-top: -15%;
|
||||
margin-left: -50%;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.popup .popuptext p {
|
||||
font-size: 10px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.popup .popuptext .emo {
|
||||
margin-top: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
.popup .popuptext .emo a {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.popup .popuptext .text {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.popup .popuptext .text p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding-bottom: 10px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.popup .popuptext .sources {
|
||||
padding-left: 15px;
|
||||
}
|
||||
.popup .popuptext .sources p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding-top: 5px;
|
||||
}
|
||||
.popup .popuptext .sources a {
|
||||
margin-top: 0;
|
||||
padding-top: 0px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.popup h5 {
|
||||
margin-bottom: 5px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
.current {
|
||||
border-radius: 9px;
|
||||
}
|
||||
.current .update {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 10px;
|
||||
}
|
||||
.current .wttr {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 15px;
|
||||
}
|
||||
.current .danger {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 10px;
|
||||
}
|
||||
.current .level {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
.danger p {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: white;
|
||||
font-size: 10px;
|
||||
}
|
||||
.cat p {
|
||||
margin: 0;
|
||||
padding-left: 12px;
|
||||
}
|
||||
.data {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.datapoint {
|
||||
margin: 0;
|
||||
padding-bottom: 0px;
|
||||
font-size: 10px;
|
||||
}
|
||||
.video img {
|
||||
margin-top: 15px;
|
||||
width: 100%;
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
183
index.sh
Executable file
183
index.sh
Executable file
@ -0,0 +1,183 @@
|
||||
#!/bin/bash
|
||||
#
|
||||
|
||||
data="/var/www/hardbrugg.ch/data/"
|
||||
|
||||
## Read old data
|
||||
atemp_old="$(cat $data/atemp.data)"
|
||||
depth_old="$(cat $data/depth.data)"
|
||||
disch_old="$(cat $data/disch.data)"
|
||||
wtemp_old="$(cat $data/wtemp.data)"
|
||||
|
||||
# Get new data
|
||||
## Air Temp
|
||||
curl -A "Mozilla/5.0 (X11; Linux x86_64; rv:60.0) Gecko/20100101 Firefox/81.0" -s https://www.wetteronline.ch/wettertrend/zuerich | grep -A 1 nowcast-card-temperature | tail -n 1 | grep -Eo '\-?[0-9]*' > $data/atemp.data
|
||||
|
||||
## Depth
|
||||
curl -s https://www.ag.ch/app/hydrometrie/station/?id=11626 | grep -m 9 td | tail -n 1 | grep -Eo '[0-9][0-9][0-9].[0-9][0-9]' | awk '{print $1-398}' > $data/depth.data
|
||||
|
||||
## Discharge
|
||||
curl -s --user-agent "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/538.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36" https://hydroproweb.zh.ch/Listen/AktuelleWerte/aktuelle_werte.html | grep -A 3 Unterhard | grep nbsp | grep -Eo '[0-9]*[.][0-9]*' | sed 's/\.//' > $data/disch.data
|
||||
|
||||
## Water Temp
|
||||
curl -s https://hydroproweb.zh.ch/Listen/AktuelleWerte/AktWassertemp.html | grep -A 3 Letten | grep '<FONT COLOR=#000000>' | grep -Eo '[0-9]*\.[0-9]' > $data/wtemp.data
|
||||
|
||||
## Weather
|
||||
curl -s -N wttr.in/zuerich > $data/wttr.dataraw && grep -m 2 -Eo "[A-Z][a-z][a-z]* *[A-Za-z]* *[A-Za-z]* *[A-Za-z]*" $data/wttr.dataraw | tail -n 1 > $data/wttr.data
|
||||
|
||||
## Generate Visitor Number
|
||||
visit_num="$(shuf -i 111111-420069 -n 1)"
|
||||
|
||||
# Read new data
|
||||
atemp_new="$(cat $data/atemp.data)"
|
||||
depth_new="$(cat $data/depth.data)"
|
||||
disch_new="$(cat $data/disch.data)"
|
||||
wtemp_new="$(cat $data/wtemp.data)"
|
||||
|
||||
# Compare old and new data
|
||||
## Air Temp
|
||||
if [ $atemp_old -lt $atemp_new ]
|
||||
then
|
||||
echo "${atemp_new}° C ↗" > $data/atemp.datatrend
|
||||
elif [ $atemp_old -gt $atemp_new ]
|
||||
then
|
||||
echo "${atemp_new}° C ↘" > $data/atemp.datatrend
|
||||
else
|
||||
echo "${atemp_new}° C ➡" > $data/atemp.datatrend
|
||||
fi
|
||||
|
||||
## Depth
|
||||
if (( $(echo "$disch_old < $disch_new" | bc -l) ))
|
||||
then
|
||||
echo "${depth_new} m ↗" > $data/depth.datatrend
|
||||
elif (( $(echo "$disch_old > $disch_new" | bc -l) ))
|
||||
then
|
||||
echo "${depth_new} m ↘" > $data/depth.datatrend
|
||||
else
|
||||
echo "${depth_new} m ➡" > $data/depth.datatrend
|
||||
fi
|
||||
|
||||
## Discharge
|
||||
if (( $(echo "$disch_old < $disch_new" | bc -l) ))
|
||||
then
|
||||
echo "${disch_new}0 L ↗" > $data/disch.datatrend
|
||||
elif (( $(echo "$disch_old > $disch_new" | bc -l) ))
|
||||
then
|
||||
echo "${disch_new}0 L ↘" > $data/disch.datatrend
|
||||
else
|
||||
echo "${disch_new}0 L ➡" > $data/disch.datatrend
|
||||
fi
|
||||
|
||||
## Water Temp
|
||||
if (( $(echo "$wtemp_old < $wtemp_new" | bc -l) ))
|
||||
then
|
||||
echo "${wtemp_new}° C ↗" > $data/wtemp.datatrend
|
||||
elif (( $(echo "$wtemp_old > $wtemp_new" | bc -l) ))
|
||||
then
|
||||
echo "${wtemp_new}° C ↘" > $data/wtemp.datatrend
|
||||
else
|
||||
echo "${wtemp_new}° C ➡" > $data/wtemp.datatrend
|
||||
fi
|
||||
|
||||
# Determine Danger Level
|
||||
disch_dng="$(cat $data/disch.data)"
|
||||
|
||||
if [ $disch_dng -le 35000 ]
|
||||
then
|
||||
dangr="color:#00FF00\">1"
|
||||
elif [ $disch_dng -gt 35000 ] && [ $disch_dng -le 45000 ]
|
||||
|
||||
then
|
||||
dangr="color:#FFFF00\">2"
|
||||
elif [ $disch_dng -gt 45000 ] && [ $disch_dng -le 53000 ]
|
||||
|
||||
then
|
||||
dangr="color:#FFA500\">3"
|
||||
elif [ $disch_dng -gt 53000 ] && [ $disch_dng -le 60000 ]
|
||||
|
||||
then
|
||||
dangr="color:#FF0000\">4"
|
||||
else
|
||||
dangr="color:#9A0000\">5"
|
||||
fi
|
||||
|
||||
# Read current data
|
||||
atemp="$(cat $data/atemp.datatrend)"
|
||||
depth="$(cat $data/depth.datatrend)"
|
||||
disch="$(cat $data/disch.datatrend)"
|
||||
wtemp="$(cat $data/wtemp.datatrend)"
|
||||
|
||||
utime="$(ls -la $data/atemp.data | awk '{print $8 }')"
|
||||
wttr="$(cat $data/wttr.data)"
|
||||
|
||||
# Write index.html
|
||||
echo -e "<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>
|
||||
hardbrugg.ch
|
||||
</title>
|
||||
<meta name=viewport content=\"width=device-width, initial-scale=1.0\" charset=utf-8>
|
||||
<link rel=\"shortcut icon\" type=image/png href=img/favicon.png>
|
||||
<link rel=stylesheet href=style.css>
|
||||
<head>
|
||||
<body>
|
||||
<script>
|
||||
// Popup Function
|
||||
function popFunction() {
|
||||
var popup = document.getElementById(\"infopop\");
|
||||
popup.classList.toggle(\"show\");
|
||||
}
|
||||
</script>
|
||||
<div class=main>
|
||||
<div class=conditions>
|
||||
<p class=header><img class=logo src=img/hb.png alt=Hb.ch></p>
|
||||
<div class=\"popup\" onclick=\"popFunction()\">
|
||||
<div class=header>
|
||||
<h5>ℹ</h5>
|
||||
</div>
|
||||
<span class=\"popuptext\" id=\"infopop\">
|
||||
<p class=emo><a href=https://www.openstreetmap.org/#map=17/47.39157/8.52349 target=_blank>🗺</a> <a href=mailto:cam@6bit.ch>📧</a></p>
|
||||
<div class=text><p>Made with bash.</p></div>
|
||||
<div class=text><p>No cookies, no bullshit.</p></div>
|
||||
<div class=text><p>Updated every 20 minutes.</p></div>
|
||||
<div class=sources><p>Using open data from:</p></div>
|
||||
<div class=sources><a href=https://ag.ch target=_blank>ag.ch</a> <a href=https://wetteronline.ch target=_blank>wetteronline.ch</a> <a href=https://wttr.in target=_blank>wttr.in</a> <a href=https://zh.ch target=_blank>zh.ch</a></div>
|
||||
<div class=text><p>Thank you!</ul></div>
|
||||
</span>
|
||||
</div>
|
||||
<div class=current>
|
||||
<p class=update>Updated at ${utime}</p>
|
||||
<p class=wttr>$wttr</p>
|
||||
<p class=danger>Danger Level</p>
|
||||
<p class=level style=\"${dangr} / 5</p>
|
||||
</div>
|
||||
<div class=cat>
|
||||
<p class=datapoint>Air Temperature</p>
|
||||
<p class=data>${atemp}</p>
|
||||
</div>
|
||||
<div class=cat>
|
||||
</div>
|
||||
<div class=cat>
|
||||
<p class=datapoint>Water Temperature</p>
|
||||
<p class=data>${wtemp}</p>
|
||||
</div>
|
||||
<div class=cat>
|
||||
<p class=datapoint>Discharge per Second</p>
|
||||
<p class=data>${disch}</p>
|
||||
</div>
|
||||
<div class=cat>
|
||||
<p class=datapoint>Depth</p>
|
||||
<p class=data>≈${depth}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class=video>
|
||||
<img src=https://live.hardbrugg.ch alt=\"Looks like the network is down. Please tell your network admin that the network is down.\" onerror=this.src=\"img/down.png\">
|
||||
</div>
|
||||
</div>
|
||||
<div class=footer>
|
||||
<p>Gmacht mit 🔮 z'Züri. | <a href=https://6bit.ch/humans.txt>humans.txt</a></p>
|
||||
</div>
|
||||
</body>
|
||||
</html>" > /var/www/hardbrugg.ch/html/index.html
|
||||
# EOF
|
||||
11
monitor/atemp.snmp
Normal file
11
monitor/atemp.snmp
Normal file
@ -0,0 +1,11 @@
|
||||
#!/usr/bin/env bash
|
||||
#
|
||||
|
||||
if [ $1 = -g ]
|
||||
then
|
||||
echo "1.3.6.42.69.11"
|
||||
echo "INTEGER"
|
||||
cat /var/www/hardbrugg.ch/data/atemp.data
|
||||
fi
|
||||
|
||||
# EOF
|
||||
11
monitor/depth.snmp
Normal file
11
monitor/depth.snmp
Normal file
@ -0,0 +1,11 @@
|
||||
#!/usr/bin/env bash
|
||||
#
|
||||
|
||||
if [ $1 = -g ]
|
||||
then
|
||||
echo "1.3.6.42.69.12"
|
||||
echo "INTEGER"
|
||||
cat /var/www/hardbrugg.ch/data/depth.data
|
||||
fi
|
||||
|
||||
# EOF
|
||||
11
monitor/disch.snmp
Normal file
11
monitor/disch.snmp
Normal file
@ -0,0 +1,11 @@
|
||||
#!/usr/bin/env bash
|
||||
#
|
||||
|
||||
if [ $1 = -g ]
|
||||
then
|
||||
echo "1.3.6.42.69.13"
|
||||
echo "INTEGER"
|
||||
cat /var/www/hardbrugg.ch/data/disch.data
|
||||
fi
|
||||
|
||||
# EOF
|
||||
11
monitor/wtemp.snmp
Normal file
11
monitor/wtemp.snmp
Normal file
@ -0,0 +1,11 @@
|
||||
#!/usr/bin/env bash
|
||||
#
|
||||
|
||||
if [ $1 = -g ]
|
||||
then
|
||||
echo "1.3.6.42.69.14"
|
||||
echo "INTEGER"
|
||||
cat /var/www/hardbrugg.ch/data/wtemp.data
|
||||
fi
|
||||
|
||||
# EOF
|
||||
Reference in New Issue
Block a user