adds view mode design

server/routes.py

@@ -39,6 +39,13 @@ def index():
     else:
         return flask.render_template('login.html')
 
+@app.route("/view")
+def view():
+    if not current_user.is_authenticated:
+        return flask.render_template('login.html')
+    else:
+        return (flask.render_template('view.html'))
+    
 @app.route("/calendar")
 @login_required
 def calendar():

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;
 }

server/template/calendar.html

@@ -18,7 +18,7 @@
             <!-- Rounded switch -->
             <label class="switch">
                 <input class="toggle" id={{item.calendarId}} type="checkbox" toggled={{item.toggle}} onclick="toggleReaction(this)">
-                <span class="slider round"></span>
+                <span class="slider on round"></span>
             </label>
         </div>
 

server/template/view.html

@@ -0,0 +1,43 @@
+{% extends "sidebar.html" %}
+{% block body%}
+<div class="container profile">
+    <p class="name">Sun View</p>
+</div>
+<div class="container">
+    <i class="fa fa-arrow-left" style="font-size: 4rem; color: #ddd; margin-bottom: 3rem"></i>
+    <img class="preview" src="/static/res/sunview.png" alt="Profile Picture"></img> 
+    <i class="fa fa-arrow-right" style="font-size: 4rem; color: #ddd; margin-bottom: 3rem"></i>
+</div>
+<div class="sub container">
+    <p class=name>Sun</p>
+    <div style="flex-grow: 1"></div>
+<label class="switch">
+    <input class="toggle" id=Sun type="checkbox" toggled="True" >
+    <span class="slider round"></span>
+</label>
+</div> 
+<div class="sub container">
+    <p class=name>Planet</p>
+    <div style="flex-grow: 1"></div>
+<label class="switch">
+    <input class="toggle" id=Sun type="checkbox" toggled="True" >
+    <span class="slider round"></span>
+</label>
+</div> 
+<div class="sub container">
+    <p class=name>Dwarf</p>
+    <div style="flex-grow: 1"></div>
+    <label class="switch"> 
+    <input class="toggle" id=Sun type="checkbox" toggled="True" >
+    <span class="slider round"></span>
+</label>
+</div> 
+<div class="sub container">
+    <p class=name>Calendar</p>
+    <div style="flex-grow: 1"></div>
+    <label class="switch">
+    <input class="toggle" id=Sun type="checkbox" toggled="True" >
+    <span class="slider round"></span>
+</label>
+</div> 
+{% endblock %}