adds a landing page which gives an overview of the tool

- landing page shows two images of google calendar and tizen watch
  and how the calendars corelate
- routes redesigned to fit this landing page
- redesign of coloring in css

server/template/startpage.html

@@ -0,0 +1,33 @@
+{% extends "base.html" %}
+
+{% block content %}
+
+{% include "base_navigation.html" %}
+
+<div class="banner">
+    <div class="title primeblue">Longitude Calendar</div>
+    <h4 class="subtitle">your day on your wrist</h4>
+</div>
+
+<div class="grayblock horizontal">
+    <div class="content padded">
+        <div style='margin: 1rem'>
+            Connect your <img src='/static/res/googlelogo.png' style='height: 2.2rem; vertical-align:middle; padding-Bottom: 0.1rem'/> Calendar...
+        </div>
+        <img class="image" src='/static/res/calendar.svg'/>
+    </div>
+    <div class="content padded">
+        <div style='margin: 1rem'>
+            ...with your <img src='/static/res/tizenlogo.png' style='height: 2rem; vertical-align:middle; padding-Bottom:0.3rem;'/> Watchface
+        </div>
+        <img class="image" src='/static/res/watchface.svg'/>
+    </div>
+</div>
+
+<!-- Compiled and minified CSS -->
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
+
+<!-- Compiled and minified JavaScript -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
+
+{% endblock %}