created Dashboard

Webserver/static/Styles/dashboard.css

@@ -0,0 +1,141 @@
+#content{
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    /* grid-template-rows: repeat( {{ zones|length  }} , minmax(150px, auto)); moved to content div to use jinja */
+    grid-gap: 30px;
+    margin: 0 auto;
+}
+.zone{
+    position: relative;
+    background: green;
+    color: white;
+    font-size: larger;
+    padding-left: 30px;
+    padding-bottom: 30px;
+    padding-right: 30px;
+}
+.zone a{
+    color: inherit;
+    text-decoration: inherit;
+}
+
+.zone:hover{
+    animation: scale 0.5s linear 0.0s normal both;
+}
+
+
+@keyframes scale{
+    0% {transform: scale3d(100%, 100%, 100%);}
+    100% {transform: scale3d(107%, 120%, 100%);}
+}
+
+.zone h3{
+    padding-top: 25px;
+    padding-bottom: 25px;
+}
+.zone_number{
+    position: absolute;
+    top: 15px;
+    right: 30px;;
+}
+
+.zone table{
+    table-layout: auto;
+    width: 100%;
+}
+
+
+td.icon{
+    text-align: left;
+    width: 30px;
+}
+td.property{
+    text-align: left;
+}
+td.value{
+    text-align: left;
+    position: relative;
+}
+
+.state{
+    display: inline;
+}
+.on_off{
+    display: none;
+    color: green;
+    position: absolute;
+    background: #bbb;
+    padding-right: 50px;
+    padding-left: 5px;
+    top: -15px;
+    left: 0px;
+    z-index: 1;
+}
+.state:hover + .on_off, .on_off:hover{
+    display: inline;
+}
+
+
+
+
+.outer_dot {
+    height: 30px;
+    width: 30px;
+    background-color: #bbb;
+    border-radius: 50%;
+    display: inline-block;
+    margin-right: 10px;
+    z-index: 1;
+}
+.inner_icon{
+    color: black;
+    font-size: 16px;
+    font-weight: bold;
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+    height: 15px;
+    width: 15px;
+    margin-left: 7.5px;
+    margin-top: 7.5px;
+    border-radius: 50%;
+    display: inline-block;
+    z-index: 2;
+}
+.dot_green {
+    background-color: green;
+}
+.dot_red {
+    background-color: red;
+}
+
+@media screen and (min-width: 2051px){
+    .zone:nth-child(even){
+        background: blue;
+    }
+}
+
+@media screen and (max-width: 2050px) and (min-width: 1351px){
+    #content{
+        grid-template-columns: repeat(2, 1fr);
+    }
+    .zone:nth-child(4n){
+        background: blue;
+    }
+    .zone:nth-child(4n+1){
+        background: blue;
+    }
+}
+
+@media screen and (max-width: 1350px){
+    #content{
+        grid-template-columns: repeat(1, 1fr);
+    }
+    .zone{
+        max-width: 600px;
+    }
+    .zone:nth-child(even){
+        background: blue;
+    }
+}
+
+
+

Webserver/static/Styles/header.css

@@ -4,13 +4,14 @@ header{
     position: sticky;
     left: 0px;
     top: 0px;
+    z-index: 20;
 }
 
 nav{
-    z-index: 1;
+    z-index: 21;
     position: absolute;
     top: 0px;
-    right: 20px;
+    right: 25px;
 }
 
 nav ul li{
@@ -21,13 +22,13 @@ nav ul li a{
     white-space: nowrap;
     text-decoration: none;
     color: white;
-    background-color: green;
+    background-color: blue;
     padding: 5px;
     margin: 10px;
 }
 
 nav ul li a:hover{
-    background-color: darkgreen;
+    background-color: darkblue;
 }
 
 .active{

Webserver/static/Styles/main.css

@@ -4,3 +4,9 @@ main{
     margin-left: auto;
     margin-right: auto;
 }
+
+h2{
+    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
+    text-transform: uppercase;
+    margin-bottom: 2em;
+}