adds view mode design

server/static/css/main.css

@@ -106,11 +106,14 @@ body *
     left: 0;
     right: 0;
     bottom: 0;
-    background-color:  #2196F3;
+    background-color: #ddd; 
     -webkit-transition: .4s;
     transition: .4s;
   }
-  
+
+.slider.on {
+    background-color:  #2196F3;
+ } 
   .slider:before {
     position: absolute;
     content: "";
@@ -123,15 +126,15 @@ body *
     transition: .4s;
   }
   
-  input:checked + .slider {
+  input:checked + .slider.on{
     background-color: #ccc;
   }
   
-  input:focus + .slider {
+  input:focus + .slider.on {
     box-shadow: 0 0 1px #ccc;
   }
   
-  input:checked + .slider:before {
+  input:checked + .slider.on:before {
     -webkit-transform: translateX(-13px);
     -ms-transform: translateX(-13px);
     transform: translateX(-13px);
@@ -162,6 +165,12 @@ body *
    text-decoration: none;
 }
 
+.container .preview {
+    width: 20rem;
+    height: 20rem;
+    margin: 1rem 3rem 4rem 3rem;
+}
+
 .container .button.logout {
     background-color: #ddd;
 }