Dark VIS 4

[Enrico Fischer]

Hier wieder mal eine neue Version.Ich habe wieder einige Animationen hinterlegt und habe mich auf die Standart und Material Widgets beschränkt.

Video Vorschau

Home

Beleuchtung

Heizung

Wetter

Media (noch in Arbeit)

System

Kraftstoff

Systemlogs

Tagesschau in 100 Sek.

Download
grey.zip

CSS Code

Spoiler

@import url("https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap");


/* vis-view */


.vis-view {
   font-family: 'DM Sans', sans-serif;
   background: #1f1d2b;
   color:#fff;
   transition: 0.2s;
   overflow: hidden;
 display: flex;
}


.btn {
 border-radius: 20px;
 background: #1f2937;
 box-shadow:  6px 6px 12px #141a23,
            -6px -6px 12px #2a384b;
 color:rgba(255,255,255,.8);
}


.btnin {
border-radius: 20px;
background: #1f2937;
box-shadow: inset 4px 4px 9px #19212d,
           inset -4px -4px 9px #253141;
 color:rgba(255,255,255,.8);
}



.modulgreen {
 border-radius: 20px;
 background-color: rgba(149, 236, 192, 0.8);
 color: #4A4A4A;
 box-shadow: 0 2px 6px 0 rgba(136, 148, 171, 0.2), 0 24px 20px -24px rgba(71, 82, 107, 0.1);
}
.modulred {
 border-radius: 20px;
 background-color: rgba(239, 176, 185, 0.8);
 color: #4A4A4A;
 box-shadow: inset 4px 4px 9px #19212d,
           inset -4px -4px 9px #253141;
}

.bggreen {
 border-radius: 25px;
 background-color: green;
}

.bgred {
 border-radius: 25px;
 background-color: red;
}


.icon {
 box-shadow: none;
 background-color: #1f2937;
 color:rgba(255,255,255,.8);
}

/*RGB Animation*/


.rgb-glow {
   border-radius: 100px;
   box-shadow: -1px -1px 3px rgba(255, 255, 255, 0.1), 2px 2px 6px rgba(0, 0, 0, 0.8), inset -2px -2px 10px rgba(255, 255, 255, 0.05), inset 2px 2px 10px rgba(0, 0, 0, 0.5);
   animation: lightsbg 5s 750ms linear infinite;
}

@keyframes lightsbg {
   0% {
       color: hsl(230, 40%, 80%);
       box-shadow: 0 0 1em hsla(320, 100%, 50%, 0.2), 0 0 0.125em hsla(320, 100%, 60%, 0.3), -1em -0.125em 0.5em hsla(40, 100%, 60%, 0), 1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
   }
   30% {
       color: hsl(230, 80%, 90%);
       box-shadow: 0 0 1em hsla(320, 100%, 50%, 0.5), 0 0 0.125em hsla(320, 100%, 60%, 0.5), -0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2), 0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
   }
   40% {
       color: hsl(230, 100%, 95%);
       box-shadow: 0 0 1em hsla(320, 100%, 50%, 0.5), 0 0 0.125em hsla(320, 100%, 90%, 0.5), -0.25em -0.125em 0.125em hsla(40, 100%, 60%, 0.2), 0.25em 0.125em 0.125em hsla(200, 100%, 60%, 0.4);
   }
   70% {
       color: hsl(230, 80%, 90%);
       box-shadow: 0 0 1em hsla(320, 100%, 50%, 0.5), 0 0 0.125em hsla(320, 100%, 60%, 0.5), 0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2), -0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
   }
   100% {
       color: hsl(230, 40%, 80%);
       box-shadow: 0 0 1em hsla(320, 100%, 50%, 0.2), 0 0 0.125em hsla(320, 100%, 60%, 0.3), 1em -0.125em 0.5em hsla(40, 100%, 60%, 0), -1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
   }
}


/*Text Animation*/

.glow-text {
   margin: auto;
   font-size: 25px;
   font-weight: 300;
   animation: lights 5s 750ms linear infinite;
}

@keyframes lights {
   0% {
       color: hsl(230, 40%, 80%);
       text-shadow: 0 0 1em hsla(320, 100%, 50%, 0.2), 0 0 0.125em hsla(320, 100%, 60%, 0.3), -1em -0.125em 0.5em hsla(40, 100%, 60%, 0), 1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
   }
   30% {
       color: hsl(230, 80%, 90%);
       text-shadow: 0 0 1em hsla(320, 100%, 50%, 0.5), 0 0 0.125em hsla(320, 100%, 60%, 0.5), -0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2), 0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
   }
   40% {
       color: hsl(230, 100%, 95%);
       text-shadow: 0 0 1em hsla(320, 100%, 50%, 0.5), 0 0 0.125em hsla(320, 100%, 90%, 0.5), -0.25em -0.125em 0.125em hsla(40, 100%, 60%, 0.2), 0.25em 0.125em 0.125em hsla(200, 100%, 60%, 0.4);
   }
   70% {
       color: hsl(230, 80%, 90%);
       text-shadow: 0 0 1em hsla(320, 100%, 50%, 0.5), 0 0 0.125em hsla(320, 100%, 60%, 0.5), 0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2), -0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
   }
   100% {
       color: hsl(230, 40%, 80%);
       text-shadow: 0 0 1em hsla(320, 100%, 50%, 0.2), 0 0 0.125em hsla(320, 100%, 60%, 0.3), 1em -0.125em 0.5em hsla(40, 100%, 60%, 0), -1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
   }
}


.bgglow {
   border-radius:25px;
   background: aqua;
   box-shadow: inset 0 30px 10px 6px rgba(0, 0, 0, 0.3), inset 0 -4px 4px 4px rgba(0, 0, 0, 0.1);
   animation: colormorph 8s linear infinite;
}

@keyframes colormorph {
   0% {
       background: aqua;
       box-shadow: inset 0 30px 10px 6px rgba(0, 0, 0, 0.3), inset 0 -4px 4px 4px rgba(0, 0, 0, 0.1);
   }
   25% {
       background: #F1FF98;
       box-shadow: inset 0 20px 10px 6px rgba(0, 0, 0, 0.3), inset 0 -4px 4px 4px rgba(0, 0, 0, 0.1);
   }
   50% {
       background: #98FFA4;
       box-shadow: inset 0 30px 10px 6px rgba(0, 0, 0, 0.3), inset 0 -4px 4px 4px rgba(0, 0, 0, 0.1);
   }
   75% {
       background: #FF98FD;
       box-shadow: inset 0 20px 10px 6px rgba(0, 0, 0, 0.3), inset 0 -4px 4px 4px rgba(0, 0, 0, 0.1);
   }
   100% {
       background: aqua;
       box-shadow: inset 0 30px 10px 6px rgba(0, 0, 0, 0.3), inset 0 -4px 4px 4px rgba(0, 0, 0, 0.1);
   }
}

[helfi9999]

@enrico-fischer Hi eine Frage wo hast du die Icons für das Menu her?
Bräuchte noch ein paar andere.

Kannst du mir bitte aushelfen.

Gruss
helfi9999

[Enrico Fischer]

@helfi9999 Ich hab den Link auf meinem PC zu Hause.

[helfi9999]

@enrico-fischer hi würde gerne deinen Link haben für die Icons.

[Enrico Fischer]

@helfi9999 https://fonts.google.com/icons

[Zwillbrocki]

@enrico-fischer
Guten Morgen enrico, vielen lieben dank für das zur verfügung stellen deiner Visualiesierrung. Ich habe sie mir mal zu Testzwecken gedownloadet und sie funktioniert auch teilweise.
Ich habe dazu noch ein paar Fragen.

1. Wo muss oder sollte ich das css abspeichern?
2. Wie kann ich das Regenradr von Buineradar bearbeiten, der springt imer wieder auf Oldenburg zurück.
3. Unter dem Spritpreisen ist wahrscheinlich ein Diagramm, wie kann ich darauf zugreifen? hast die Daten in Influxdb gespeichert?
   wo und wie hast du die Spritpreise gespeichert?
   Ich habe e10 super und das habe ich nun erfolgreich eingebunden und zeigt mir die Tankstellen in der Nähe an.

Ich bedanke mich schon im voraus ganz herzlich bei dir dir.

Mfg
Zwillbrocki

[Enrico Fischer]

@zwillbrocki Eigendlich sollte der css Style Kram automatisch beim importieren in den CSS einstellungen in der Vis landen.Du kannst es aber auch händisch einfügen

Der Radar ist eigendlich nur ein Iframe
Hier der Link zum einstellen und unten wird dann der html code generiert
https://gadgets.buienradar.nl/gadget/zoommap#

Und die Spritpreise laufen über influx.

[Zwillbrocki]

@enrico-fischer
dankeschön für deine Antwort, ich hoffe du und alle anderen natürlich auch schöne Weihnachtstage gehabt?

ich schaue mir das die Tage mal genauer an.

einen schönen Abend allen zusammen.

LG

Zwillbroki