[TASK] initial commit

browserconfig.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Please read: http://msdn.microsoft.com/en-us/library/ie/dn455106.aspx -->
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square70x70logo src="tile.png"/>
+            <square150x150logo src="tile.png"/>
+            <wide310x150logo src="tile-wide.png"/>
+            <square310x310logo src="tile.png"/>
+        </tile>
+    </msapplication>
+</browserconfig>

css/main.css

@@ -0,0 +1,201 @@
+*, *:before, *:after {
+    box-sizing: border-box;
+    outline: none;
+}
+
+body {
+    background: #2b3a50;
+    font: 14px/1 'Roboto+Condensed', helvetica, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    margin: 0;
+}
+
+.box {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+    background: linear-gradient(0deg, rgb(18, 30, 40) 0%, rgb(43, 58, 80) 100%);
+    overflow: hidden;
+}
+
+.box .percent {
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 3;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    display: -webkit-flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    font-size: 41px;
+    font-family: 'Rubik', sans-serif;
+}
+
+
+.box .water {
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 2;
+    width: 100%;
+    height: 100%;
+    -webkit-transform: translate(0, 100%);
+    transform: translate(0, 100%);
+    background: rgb(2, 0, 36);
+    background: linear-gradient(0deg, rgba(2, 0, 36, 1) 0%, rgba(43, 139, 222, 1) 100%);
+    transition: all .3s;
+}
+
+.box .water_wave {
+    width: 200%;
+    position: absolute;
+    bottom: 100%;
+}
+
+.box .water_wave_back {
+    right: 0;
+    fill: #8bc6ea;
+    -webkit-animation: wave-back 4s infinite linear;
+    animation: wave-back 4s infinite linear;
+}
+
+.box .water_wave_front {
+    left: 0;
+    fill: #2d8cde;
+    margin-bottom: -1px;
+    -webkit-animation: wave-front 2s infinite linear;
+    animation: wave-front 2s infinite linear;
+}
+
+@-webkit-keyframes wave-front {
+    100% {
+        -webkit-transform: translate(-50%, 0);
+        transform: translate(-50%, 0);
+    }
+}
+
+@keyframes wave-front {
+    100% {
+        -webkit-transform: translate(-50%, 0);
+        transform: translate(-50%, 0);
+    }
+}
+
+@-webkit-keyframes wave-back {
+    100% {
+        -webkit-transform: translate(50%, 0);
+        transform: translate(50%, 0);
+    }
+}
+
+@keyframes wave-back {
+    100% {
+        -webkit-transform: translate(50%, 0);
+        transform: translate(50%, 0);
+    }
+}
+
+.date {
+    position: absolute;
+    bottom: 3%;
+    z-index: 1000000000;
+    color: #fff;
+    width: 100%;
+    text-align: center;
+    animation: fadein 5s;
+    -moz-animation: fadein 5s; /* Firefox */
+    -webkit-animation: fadein 5s; /* Safari and Chrome */
+    -o-animation: fadein 5s; /* Opera */
+}
+
+.label {
+    position: absolute;
+    top: 3%;
+    z-index: 1000000000;
+    color: #ffffff40;
+    width: 100%;
+    text-align: center;
+    animation: fadein 5s;
+    -moz-animation: fadein 5s; /* Firefox */
+    -webkit-animation: fadein 5s; /* Safari and Chrome */
+    -o-animation: fadein 5s; /* Opera */
+}
+
+.liters {
+    position: absolute;
+    top: calc(50% + 50px);
+    z-index: 1000000000;
+    color: #ffffff40;
+    width: 100%;
+    text-align: center;
+    animation: fadein 5s;
+    -moz-animation: fadein 5s; /* Firefox */
+    -webkit-animation: fadein 5s; /* Safari and Chrome */
+    -o-animation: fadein 5s; /* Opera */
+
+    font-size: 16px;
+}
+
+.watering {
+    position: absolute;
+    top: calc(50% + 30px);
+    z-index: 1000000000;
+    color: #ffffff40;
+    width: 100%;
+    text-align: center;
+    animation: fadein 5s;
+    -moz-animation: fadein 5s; /* Firefox */
+    -webkit-animation: fadein 5s; /* Safari and Chrome */
+    -o-animation: fadein 5s; /* Opera */
+
+    font-size: 16px;
+}
+
+@keyframes fadein {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@-moz-keyframes fadein { /* Firefox */
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@-webkit-keyframes fadein { /* Safari and Chrome */
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@-o-keyframes fadein { /* Opera */
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+
+
+
+
+

index.php

@@ -0,0 +1,95 @@
+<?php
+// measurements of the well
+$distanceToGroundInCm = 197;
+$tankDepthInCm = 140;
+$diameterInCm = 215;
+$litersPerMinute = 15;
+
+// load data from thingspeak
+$json = file_get_contents('https://api.thingspeak.com/channels/813242/fields/2.json?api_key=ZLQJWYW43AHCESR3&results=1');
+$data = json_decode($json, true);
+$date = DateTime::createFromFormat(
+    DATE_ATOM,
+    $data['feeds'][0]['created_at']
+)->setTimezone(new \DateTimeZone('Europe/Vienna'));
+
+// calculate current water depth
+$waterDepth = $distanceToGroundInCm - (float)$data['feeds'][0]['field2'];
+$percent = round($waterDepth / $tankDepthInCm * 100);
+if ($percent > 100) {
+    $percent = 100;
+}
+if ($percent < 0) {
+    $percent = 1;
+}
+
+// calculate volume
+$volumeInLiters = $diameterInCm / 2 * $diameterInCm / 2 * 3.141592 * $waterDepth / 1000;
+
+// calculate time until the well is empty
+$wateringFlowersHours = $volumeInLiters / $litersPerMinute / 60;
+$wateringFlowersHoursCa = floor($wateringFlowersHours);
+$wateringFlowersMinutesCa = round(($wateringFlowersHours - $wateringFlowersHoursCa) * 60);
+?>
+<!doctype html>
+<!--[if lt IE 7]>
+<html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
+<!--[if IE 7]>
+<html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
+<!--[if IE 8]>
+<html class="no-js lt-ie9" lang=""> <![endif]-->
+<!--[if gt IE 8]><!-->
+<html class="no-js" lang=""> <!--<![endif]-->
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta http-equiv="refresh" content="60">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="Wasserstand der Zisterne">
+
+    <title>Zisterne</title>
+
+    <link rel='manifest' href='manifest.json'>
+    <link rel="apple-touch-icon" href="apple-touch-icon.png">
+    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed|Rubik:500&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="css/main.css">
+</head>
+<body>
+
+<div class="date"><?php echo $date->format('d.m.Y, H:i'); ?></div>
+<div class="label">Wasserstand Zisterne</div>
+<div class="liters"><?= round($volumeInLiters / 1000, 1) . ' m³' ?></div>
+<div class="watering"><?= $wateringFlowersHoursCa . ' Std ' . $wateringFlowersMinutesCa . ' Min gießen' ?></div>
+
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     style="display: none;">
+    <symbol id="wave">
+        <path
+                d="M420,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C514,6.5,518,4.7,528.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H420z"></path>
+        <path
+                d="M420,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C326,6.5,322,4.7,311.5,2.7C304.3,1.4,293.6-0.1,280,0c0,0,0,0,0,0v20H420z"></path>
+        <path
+                d="M140,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C234,6.5,238,4.7,248.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H140z"></path>
+        <path
+                d="M140,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C46,6.5,42,4.7,31.5,2.7C24.3,1.4,13.6-0.1,0,0c0,0,0,0,0,0l0,20H140z"></path>
+    </symbol>
+</svg>
+<div class="box">
+    <div class="percent">
+        <div class="percentNum" id="count">0</div>
+        <div class="percentB">%</div>
+    </div>
+    <div id="water" class="water">
+        <svg viewBox="0 0 560 20" class="water_wave water_wave_back">
+            <use xlink:href="#wave"></use>
+        </svg>
+        <svg viewBox="0 0 560 20" class="water_wave water_wave_front">
+            <use xlink:href="#wave"></use>
+        </svg>
+    </div>
+</div>
+
+<script>maxPercent = <?php echo $percent;?>;</script>
+<script src="js/main.js"></script>
+</body>
+</html>

js/main.js

@@ -0,0 +1,16 @@
+var cnt = document.getElementById("count");
+var water = document.getElementById("water");
+var percent = cnt.innerText;
+var interval;
+interval = setInterval(function () {
+    percent++;
+    cnt.innerHTML = percent;
+    water.style.transform = 'translate(0' + ',' + (100 - percent) + '%)';
+    if (percent == maxPercent) {
+        clearInterval(interval);
+    }
+}, 60);
+
+if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('/service-worker.js');
+}

manifest.json

@@ -0,0 +1,58 @@
+{
+	"dir": "ltr",
+	"lang": "de",
+	"name": "Zisterne",
+	"scope": "/",
+	"display": "standalone",
+	"start_url": "https://zisterne.bu2media.com/",
+	"short_name": "Zisterne",
+	"theme_color": "transparent",
+	"description": "",
+	"orientation": "portrait-primary",
+	"background_color": "transparent",
+	"related_applications": "",
+	"prefer_related_applications": "false",
+	"generated": "true",
+	"icons": [
+		{
+			"src": "img/icons/icon-72x72.png",
+			"sizes": "72x72",
+			"type": "image/png"
+		},
+		{
+			"src": "img/icons/icon-96x96.png",
+			"sizes": "96x96",
+			"type": "image/png"
+		},
+		{
+			"src": "img/icons/icon-128x128.png",
+			"sizes": "128x128",
+			"type": "image/png"
+		},
+		{
+			"src": "img/icons/icon-144x144.png",
+			"sizes": "144x144",
+			"type": "image/png"
+		},
+		{
+			"src": "img/icons/icon-152x152.png",
+			"sizes": "152x152",
+			"type": "image/png"
+		},
+		{
+			"src": "img/icons/icon-192x192.png",
+			"sizes": "192x192",
+			"type": "image/png"
+		},
+		{
+			"src": "img/icons/icon-384x384.png",
+			"sizes": "384x384",
+			"type": "image/png"
+		},
+		{
+			"src": "img/icons/icon-512x512.png",
+			"sizes": "512x512",
+			"type": "image/png"
+		}
+	]
+}