no message
This commit is contained in:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user