adds device page and form for new device

- form added to push new device id to backend
- device added to db model (needs to be pushed still)
- form return right now just prints
- design for device list created, still needs some updates

server/template/calendar.html

@@ -1,20 +1,19 @@
 {% extends "sidebar.html" %}
 {% block body%}
 
-<div style="height: 50px">
-    <div style="width: 30%; float: left; margin-left: 10%">Calendar</div>
-    <div style="width: 30%; float: left">Show on device</div>
-    <div style="width: 30%; float: left">Color</div>
+<div class="container">
+    <div style="width: 15rem; margin: 1rem">Calendar</div>
+    <div style="width: 10rem; margin: 1rem; padding-right: 5rem">Show on device</div>
+    <div style="width: 2rem; margin: 1rem">Color</div>
 </div>
 
-<div>
     {% for item in calendars %}
-    <div style="height: 30px">
+    <div class="container">
         <!--Name-->
-        <div style="width: 30%; float: left; font-size: 10px; text-align: left; margin-left: 10%">{{ item.name }}</div>
+        <div style="width: 15rem; margin: 1rem;">{{ item.name }}</div>
 
         <!--Toggle-->
-        <div style="width: 30%; float: left">
+        <div style="width: 10rem; margin: 1rem; padding-right: 5rem">
             <!-- Rounded switch -->
             <label class="switch">
                 <input class="toggle" id={{item.calendarId}} type="checkbox" toggled={{item.toggle}} onclick="toggleReaction(this)">
@@ -23,7 +22,7 @@
         </div>
 
         <!--Color Selector-->
-        <div style="width: 30%; float: left">
+        <div style="width: 2rem; margin: 1rem;">
         <div class="colorPickSelector" id={{item.calendarId}}  defaultColor={{item.color}}></div>
             <!--svg height="20" width="20">
                 <circle cx="10" cy="10" r="10" stroke="black" stroke-width="0" fill={{ item.color }} />
@@ -32,8 +31,9 @@
         
     </div>
     {% endfor %}
- 
-</div>
+    <div class="container">
+        <div class="button addcalendar" style="width: auto; margin: 4rem">Add Calendar</div>
+    </div> 
 
 <script type="text/javascript">
     

server/template/devices.html

@@ -0,0 +1,36 @@
+{% extends "sidebar.html" %}
+{% block body%}
+
+<div class="container">
+    <div style="width: 15rem; margin: 1rem">Device ID</div>
+    <div style="width: 10rem; margin: 1rem; padding-right: 5rem">Link Status</div>
+    <div style="width: 2rem; margin: 1rem">Action</div>
+</div>
+
+    {% for item in devices %}
+    <div class="container">
+        <!--Name-->
+        <div style="width: 15rem; margin: 1rem;">{{ item.deviceId }}</div>
+
+        <!--Toggle-->
+        <div style="width: 10rem; margin: 1rem; padding-right: 5rem">
+           Connected 
+        </div>
+
+        <!--Color Selector-->
+        <div style="width: 2rem; margin: 1rem;">
+            <button type="button">Unlink</button>
+        </div>
+        
+    </div>
+    {% endfor %}
+    <form action="" method="post">
+    <div class="container">
+        {{ form.hidden_tag() }}
+        {{ form.deviceId.label }}
+        {{ form.deviceId(size=32) }}
+        {{ form.submit() }}
+    </div> 
+    </form>
+
+{% endblock %}