From 4062e764912d82775edc2748678f3e02606089d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20H=C3=A4fliger?= <dh@belevo.ch>
Date: Tue, 24 Jun 2025 13:53:37 +0200
Subject: [PATCH] no message

---
 PV_Visu/module.html | 267 ++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 258 insertions(+), 9 deletions(-)
diff --git a/PV_Visu/module.html b/PV_Visu/module.html
index 043d0d5..b4aed1a 100644
--- a/PV_Visu/module.html
+++ b/PV_Visu/module.html
@@ -1,18 +1,267 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <meta charset="utf-8">
+    <meta charset="UTF-8">
+    <script src="/icons.js" crossorigin="anonymous"></script>
     <style>
-        html, body { margin: 0; padding: 4px; background: transparent; }
-        .bar-container { width: 100%; background: #eee; border-radius: 4px; overflow: hidden; height: 20px; margin-bottom: 10px; }
-        .bar { height: 100%; float: left; }
-        .bar-cons { background: #4CAF50; }
-        .bar-feed { background: #8BC34A; }
-        .bar-pv { background: #FF9800; }
-        .bar-grid { background: #FF5722; }
-        .label { font-size: 0.9em; margin-bottom: 4px; color: #333; }
+        :root {
+            --div-height: 23px;
+        }
+
+        ::-webkit-scrollbar {
+            width: 8px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 20px;
+        }
+
+        ::-webkit-scrollbar-thumb:hover {
+            background: #555;
+        }
+
+        .main_container {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-wrap: nowrap;
+            position: relative;
+            box-sizing: border-box;
+        }
+
+        .div1 {
+            width: 20%;
+            box-sizing: border-box;
+        }
+
+        .div1 img {
+            box-sizing: border-box;
+            max-width: 100%;
+            max-height: 100%;
+        }
+
+        .div2 {
+            width: 80%;
+            padding: 5px 5px 5px 2.5%;
+            margin: 0px 0px 0px 2.5%;
+            box-sizing: border-box;
+            border-radius: 0px;
+            border-left: 1px dotted #28cdab;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-evenly;
+        }
+
+        .balkendiagramm {
+            width: 100%;
+            display: flex;
+            position: relative;
+            margin-bottom: 2%;
+            box-sizing: border-box;
+        }
+
+        .balken_links_leistung,
+        .balken_links_durchfluss,
+        .balken_links_luefterdrehzahl,
+        .balken_links_kompressor,
+        .balken_rechts_leistung,
+        .balken_rechts_durchfluss,
+        .balken_rechts_luefterdrehzahl,
+        .balken_rechts_kompressor {
+            height: calc(var(--div-height) + var(--div-height) /5);
+            border-radius: calc(var(--div-height) / 4) 0px 0px calc(var(--div-height) / 4);
+            font-size: 0.9em;
+            transition: width 2s;
+            transition-timing-function: ease;
+        }
+
+        @keyframes gradient_leistung {
+            0% {
+                background-position: 0 0;
+            }
+
+            100% {
+                background-position: -200% 0;
+            }
+        }
+
+        @keyframes gradient_durchfluss {
+            0% {
+                background-position: 0 0;
+            }
+
+            100% {
+                background-position: -200% 0;
+            }
+        }
+
+        @keyframes gradient_luefterdrehzahl {
+            0% {
+                background-position: 0 0;
+            }
+
+            100% {
+                background-position: -200% 0;
+            }
+        }
+
+        @keyframes gradient_kompressor {
+            0% {
+                background-position: 0 0;
+            }
+
+            100% {
+                background-position: -200% 0;
+            }
+        }
+
+        .balken_links_leistung {
+            background: repeating-linear-gradient(to right, red 0%, orange 50%, red 100%);
+            background-size: 200% auto;
+            background-position: 0 100%;
+            animation: gradient_leistung 10s infinite;
+            animation-fill-mode: forwards;
+            animation-timing-function: linear;
+        }
+
+        .balken_links_durchfluss {
+            background: repeating-linear-gradient(to right, #0054ff 0%, #44a4f5 50%, #0054ff 100%);
+            background-size: 200% auto;
+            background-position: 0 100%;
+            animation: gradient_leistung 10s infinite;
+            animation-fill-mode: forwards;
+            animation-timing-function: linear;
+        }
+
+        .balken_links_luefterdrehzahl {
+            background: repeating-linear-gradient(to right, #13b7f2 0%, #99e4ff 50%, #13b7f2 100%);
+            background-size: 200% auto;
+            background-position: 0 100%;
+            animation: gradient_leistung 10s infinite;
+            animation-fill-mode: forwards;
+            animation-timing-function: linear;
+        }
+
+        .balken_links_kompressor {
+            background: repeating-linear-gradient(to right, #990303 0%, #ff0000 50%, #990303 100%);
+            background-size: 200% auto;
+            background-position: 0 100%;
+            animation: gradient_leistung 10s infinite;
+            animation-fill-mode: forwards;
+            animation-timing-function: linear;
+        }
+
+        .balken_links_text {
+            position: absolute;
+            top: 50%;
+            left: 2%;
+            transform: translate(-0%, -50%);
+            color: #fff;
+            z-index: 2;
+            padding: 3px;
+        }
+
+        .balken_rechts {
+            width: 100%;
+            border-radius: calc(var(--div-height) / 4) calc(var(--div-height) / 4);
+            background: linear-gradient(to right, rgba(135, 135, 135, 0.6) 0%, rgba(135, 135, 135, 0.2) 100%);
+            overflow: hidden;
+        }
+
+        @keyframes blink {
+            0% {
+                opacity: 0
+            }
+
+            50% {
+                opacity: 1
+            }
+
+            100% {
+                opacity: 0
+            }
+        }
+
+        .container_daten {
+            display: flex;
+            flex-wrap: nowrap;
+            width: 100%;
+            font-size: 0.9em;
+        }
+
+        .daten_links {
+            margin-right: 20px;
+            border: 0px solid #000;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .daten_rechts {
+            border: 0px solid #000;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .icon {
+            color: #26d4b9;
+            width: 13px;
+        }
+
+        .right-space {
+            padding-right: 2px;
+        }
+
+        .right-padding {
+            padding-right: 15px;
+        }
+
+        #status,
+        #mode {
+            color: gray;
+        }
+
+        .row {
+            display: flex;
+            flex-direction: row;
+        }
+
+        .title {
+            width: 100px;
+        }
+
+        .clickable {
+            cursor: pointer;
+        }
+
+        .status_0 .status-off {
+            color: #26d4b9;
+        }
+
+        .status_3 .status-heating {
+            color: orangered;
+        }
+
+        .status_4 .status-defrost {
+            color: lightskyblue;
+        }
+
+        .status_5 .status-warm-water {
+            color: blue;
+        }
+
+        .mode_0 .mode-normal,
+        .mode_1 .mode-silent,
+        .mode_2 .mode-eco {
+            color: #26d4b9;
+        }
     </style>
 </head>
+
 <body>
     <div class="main_container">
         <div id="div1" class="div1">
