further updates for mobile experience

as described in https://serverfault.com/questions/407612/error-2006-mysql-server-has-gone-away
the uwsgi server usually forks its workers from the parent, which already has a connection
open to the mysql database. So the new child typically inherits the same connection.
Should both workers use the same connection at the same time, the server connection throws a
'2006, server has gone away error'.
The flag --lazy creates fresh forks for each child, each creating a new connection.
This prevents the overload and after testing, the '2006' error seems to not be reproduceable.

database/__init__.py

@@ -0,0 +1,14 @@
+from server import db
+import time
+from database.models import Device
+
+def cleanDevices():
+    allDevs = db.session.query(Device)
+    devices = allDevs.filter(Device.lastConnection <= int(round(time.time())) - 60*60*24*30).all()
+    devices += allDevs.filter(Device.lastConnection == None)
+    for device in devices:
+        print(device.deviceName)
+        db.session.delete(device)
+
+    db.session.commit()
+

database/db.py

@@ -1,38 +0,0 @@
-# http://flask.pocoo.org/docs/1.0/tutorial/database/
-import sqlite3
-
-import click
-from flask import current_app, g
-from flask.cli import with_appcontext
-
-def get_db():
-    if "db" not in g:
-        g.db = sqlite3.connect(
-            "database/sqlite_db", detect_types=sqlite3.PARSE_DECLTYPES
-        )
-        g.db.row_factory = sqlite3.Row
-
-    return g.db
-
-def close_db(e=None):
-    db = g.pop("db/db", None)
-
-    if db is not None:
-        db.close()
-
-def init_db():
-    db = get_db()
-
-    with current_app.open_resource("database/schema.sql") as f:
-        db.executescript(f.read().decode("utf8"))
-
-@click.command("init-db")
-@with_appcontext
-def init_db_command():
-    """Clear the existing data and create new tables."""
-    init_db()
-    click.echo("Initialized the database.")
-
-def init_app(app):
-    app.teardown_appcontext(close_db)
-    app.cli.add_command(init_db_command)

database/migrations/versions/9882522aafa9_.py

@@ -0,0 +1,30 @@
+"""empty message
+
+Revision ID: 9882522aafa9
+Revises: e5ef5e4a807b
+Create Date: 2020-07-25 09:34:07.987380
+
+"""
+from alembic import op
+import sqlalchemy as sa
+
+
+# revision identifiers, used by Alembic.
+revision = '9882522aafa9'
+down_revision = 'e5ef5e4a807b'
+branch_labels = None
+depends_on = None
+
+
+def upgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.add_column('calendar', sa.Column('calendar_type', sa.String(length=32), nullable=True))
+    op.create_index(op.f('ix_calendar_calendar_type'), 'calendar', ['calendar_type'], unique=False)
+    # ### end Alembic commands ###
+
+
+def downgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.drop_index(op.f('ix_calendar_calendar_type'), table_name='calendar')
+    op.drop_column('calendar', 'calendar_type')
+    # ### end Alembic commands ###

database/models.py

@@ -61,11 +61,13 @@ class Device(db.Model):
     user_id = db.Column(db.Integer, db.ForeignKey('user.id'))
     deviceName = db.Column(db.String(64), unique=True)
     connection = db.Column(db.Boolean)
+    lastConnection = db.Column(db.BigInteger)
 
 class Calendar(db.Model):
     id = db.Column(db.Integer, primary_key=True, autoincrement=True)
     user_id = db.Column(db.Integer, db.ForeignKey('user.id'), index=True,  nullable=False)
     calendar_id = db.Column(db.String(256), primary_key=True)
+    calendar_type = db.Column(db.String(32), index=True)
     name = db.Column(db.String(256), index=True)
     toggle = db.Column(db.String(8))
     color = db.Column(db.String(16))

database/schema.sql

@@ -1,14 +0,0 @@
-CREATE TABLE user (
-  id TEXT PRIMARY KEY,
-  name TEXT NOT NULL,
-  email TEXT UNIQUE NOT NULL,
-  profile_pic TEXT NOT NULL
-);
-
-CREATE TABLE calendar (
-  usr_id TEXT NOT NULL,
-  calendar_id TEXT PRIMARY KEY,
-  name TEXT NOT NULL,
-  toggle TEXT,
-  color TEXT
-);

database/user.py

@@ -1,92 +0,0 @@
-from flask_login import UserMixin
-from pathlib import Path
-
-from server.database.db import get_db
-
-class User(UserMixin):
-    def __init__(self, id_, name, email, profile_pic):
-        self.id = id_
-        self.name = name
-        self.email = email
-        self.profile_pic = profile_pic
-
-    @staticmethod
-    def get(user_id):
-        db = get_db()
-        user = db.execute(
-            "SELECT * FROM user WHERE id = ?", (user_id,)
-        ).fetchone()
-        if not user:
-            return None
-
-        user = User(
-            id_=user[0], name=user[1], email=user[2], profile_pic=user[3]
-        )
-        return user
-
-    @staticmethod
-    def create(id_, name, email, profile_pic):
-        db = get_db()
-        db.execute(
-            "INSERT INTO user (id, name, email, profile_pic) "
-            "VALUES (?, ?, ?, ?)",
-            (id_, name, email, profile_pic),
-        )
-        db.commit()
-
-        Path(f"userinfo/{id_}").mkdir(parents=True, exist_ok=True)
-
-class dbCalendar():
-    def __init__(self, id_, name, toggle, color):
-        self.usr_id = id_
-        self.name = name
-        self.toggle = toggle
-        self.color = color
-
-    @staticmethod
-    def getCalendars(user_id):
-        db = get_db()
-        calendars = db.execute(
-            "SELECT * FROM calendar WHERE usr_id = ?", (user_id,)
-        ).fetchall()
-
-        return calendars
-
-    @staticmethod
-    def getCalendar(user_id, calendar_id):
-        db = get_db()
-        calendar = db.execute(
-            "SELECT * FROM calendar WHERE usr_id = ? AND calendar_id = ?", (user_id, calendar_id)
-        ).fetchone()
-        
-        if not calendar:
-            return None
-        
-        return calendar
-    
-    @staticmethod
-    def updateCalendar(user_id, calendar_name, toggle=None, color=None):
-        db = get_db()
-        print("updating")
-        if(toggle != None):
-            print(toggle)
-            db.execute(
-                "UPDATE calendar SET toggle = ? WHERE usr_id = ? AND name = ?", (toggle, user_id, calendar_name)
-            )
-            db.commit()
-
-        if(color != None):
-            db.execute(
-                "UPDATE calendar SET color = ? WHERE usr_id = ? AND name = ?", (color, user_id, calendar_name)
-            )
-            db.commit()
-
-    @staticmethod
-    def create(user_id, calendar_id, name, color, toggle = 'True'):
-        db = get_db()
-        db.execute(
-            "INSERT INTO calendar (usr_id, calendar_id, name, toggle, color) "
-            "VALUES (?, ?, ?, ?, ?)",
-            (user_id, calendar_id, name, toggle, color),
-        )
-        db.commit()

docker/calendarwatch/Dockerfile

@@ -2,9 +2,10 @@ FROM python:3.8-slim-buster
 RUN apt-get update && apt-get upgrade
 RUN pip3 install flask Flask-SQLAlchemy flask_migrate flask_login flask_wtf python-dotenv
 RUN apt-get install gcc libpcre3 libpcre3-dev libmariadbclient-dev -y
-RUN pip3 install uwsgi email-validator random-word
+RUN pip3 install uwsgi email-validator RandomWords ics
 RUN pip3 install google google-oauth google-auth-oauthlib google-api-python-client mysqlclient
 COPY docker-entrypoint.sh /usr/local/bin/
 EXPOSE 8084
 EXPOSE 3001
 ENTRYPOINT ["docker-entrypoint.sh"]
+# CMD tail -f /dev/null

docker/calendarwatch/docker-entrypoint.sh

@@ -1,7 +1,17 @@
 #!/bin/sh
 cd /home/calendarwatch
-# uwsgi --http-socket 0.0.0.0:8084 -w wsgi --protocol=https 
+
-export FLASK_APP=/home/calendarwatch/server.py
+# use flasks own uwsgi server for debugging:
-python3 server.py
+# export FLASK_APP=/home/calendarwatch/server.py
+# python3 server.py
+
+
+# the --lazy flag forks() a new instance of the server
+# instead of forking from the parent and copying the same mysql
+# connection. If you don't do that, then multiple forks will use
+# the same connection at the same time, causing the server to throw
+# a 'connection has gone away' error.
+# more here: https://serverfault.com/questions/407612/error-2006-mysql-server-has-gone-away
+uwsgi --ini wsgi.ini --lazy
 echo "server has been started"  
 

routine.py

@@ -1,17 +0,0 @@
-#!/usr/bin/env python3
-from backend.Routine import Routine
-import sched, time
-
-s = sched.scheduler(time.time, time.sleep)
-routine = Routine()
-
-def run_routine(sc):
-    # do some stuff
-    routine.start()
-
-    #schedule next routine
-    s.enter(600, 1, run_routine, (sc,))
-
-routine.start()
-s.enter(600, 1, run_routine, (s, ))
-s.run()

server.py

@@ -1,10 +1,5 @@
 # Configuration
 from server import app
-from backend import routine
-
-# routine.start()
 
 if __name__ == "__main__":
-    context = ('certificate/xip.io.crt', 'certificate/xip.io.key')#certificate and key files
-#    app.run('0.0.0.0', 8084, ssl_context='adhoc', debug=True)
     app.run(host='0.0.0.0', port=8084, debug=True)

server/forms.py

@@ -4,12 +4,22 @@ from wtforms.validators import DataRequired, ValidationError, Email, EqualTo
 from database.models import User, Device
 import email_validator
 
+'''
+LoginForm defines the flask form used for the 
+email-based login procedure
+This Form is based on 'The Flask Mega-Tutorial'
+'''
 class LoginForm(FlaskForm):
     username = StringField('Username', validators=[DataRequired()])
     password = PasswordField('Password', validators=[DataRequired()])
     remember_me = BooleanField('Remember Me')
     submit = SubmitField('Sign In')
 
+'''
+RegiatrationForm validates username, email and pw
+This Form is based on 'The Flask mega-Tutorial'
+'''
+
 class RegistrationForm(FlaskForm):
     username = StringField('Username', validators=[DataRequired()])
     email = StringField('Email', validators=[DataRequired(), Email()])
@@ -31,8 +41,18 @@ class RegistrationForm(FlaskForm):
 class DeviceForm(FlaskForm):
     deviceName=StringField('New Device ID', validators=[DataRequired()])
     submit = SubmitField('Add New Device')
-
+# 
     def validate_deviceName (self, deviceName):
         device = Device.query.filter_by(deviceName=deviceName.data).first()
         if device is None:
             raise ValidationError('Device not Found')
+
+
+class CalendarForm(FlaskForm):
+    iCalURL = StringField('New ical URL', validators=[DataRequired()])
+    calName = StringField('Calendar Name', validators=[DataRequired()])
+    submit = SubmitField('Add URL')
+
+    def validate_iCalURL (self, iCalURL):
+        return None
+

server/googleHandler.py

@@ -1,8 +1,8 @@
 import google.oauth2.credentials
 import google_auth_oauthlib.flow
 import googleapiclient.discovery
+from googleapiclient.discovery import build
 
-import backend.caltojson as caltojson
 from oauthlib.oauth2 import WebApplicationClient
 import flask
 
@@ -23,8 +23,11 @@ from flask_login import (
 import requests
 
 from database.models import Calendar as dbCalendar
-from server import db
+from backend import Calendar, Event
-# Configuration
+
+# Configuration class for the google client 
+# all necessary variables and secrets are defined in this
+# aswell as some helper functions
 class GoogleClient():
     def __init__(self):
         self.CLIENT_SECRETS_FILE = "certificate/client_secret.json"
@@ -60,6 +63,7 @@ class GoogleClient():
 
 GC = GoogleClient()
 
+# stuff for OAuth login
 def login():
     # Create flow instance to manage the OAuth 2.0 Authorization Grant Flow steps.
     flow = google_auth_oauthlib.flow.Flow.from_client_secrets_file(
@@ -115,59 +119,92 @@ def deleteAccount(user):
     print(result, flush=True)
     return
 
-class Calendar:
-    def __init__(self, name, calendarId, toggle='False', color="#000000"):
-        self.name = name
-        self.color = color
-        self.toggle=toggle
-        self.calendarId = calendarId
 
-# TODO move this to database
+def fetchCalendarEvents(user, calendars, startDate, endDate):
-def calendarsFromDb():
+   
-    pyCalendars = []
+    service = None
-    for calendar in current_user.calendars:
+    if user.google_token is not None:
-        name = (calendar.name[:16] + '..') if len(calendar.name)> 18 else calendar.name
+        client_token = GC.build_credentials(user.google_token.token,
-        calendarId = calendar.calendar_id
+                                            user.google_token.refresh_token)
-        toggle = calendar.toggle
+        credentials = google.oauth2.credentials.Credentials(**client_token)
-        color = calendar.color
 
-        pyCalendars.append(Calendar(name, calendarId, toggle, color))
+        service = build(GC.API_SERVICE_NAME, GC.API_VERSION, credentials=credentials)
-
-    return pyCalendars
-
-
-def updateCalendars():
-    if 'credentials' not in flask.session:
-        return flask.redirect('login/google')
-
-  # Load credentials from the session.
-  # credentials = google.oauth2.credentials.Credentials(
-  #       **flask.session['credentials'])
-  #   a = flask.session['credentials']
-  #   print(a, flush=True) 
-  #   print(current_user.getGoogleCredentials(), flush=True)
-    if current_user.google_token == None:
-        return
     
+    all_events = []
+    for calendar in calendars:
+        if (calendar.toggle == "True" and 
+            calendar.calendar_type == "Google" and 
+            service != None):
+            event_result = service.events().list(calendarId=calendar.calendar_id, 
+                                                 timeMin=startDate.isoformat(),
+                                                 timeMax=endDate.isoformat(),
+                                                 maxResults=10, 
+                                                 singleEvents=True,
+                                                 orderBy='startTime').execute()
+
+            for event in event_result.get('items', []):
+                
+                # create simple event
+                name = event.get('summary', '(no Title)')
+                start = event['start'].get('dateTime')
+                end = event['end'].get('dateTime')
+                newEvent = Event(name, start, end)
+
+                # handle weird colors from google
+                color = event.get('colorId')
+                if color == None:
+                    newEvent.colorHex = calendar.color
+                    newEvent.eventColorId = None
+                else:
+                    newEvent.eventColorId = color
+                
+                all_events.append(newEvent)
+
+    if service != None:
+        colors = service.colors().get().execute()
+    else:
+        colors = None
+
+    return all_events, colors
+
+
+def fetchCalendars():
+    # get client api service
+    if current_user.google_token == None:
+        return [], None, None
     client_token = GC.build_credentials(current_user.google_token.token,
                                         current_user.google_token.refresh_token)
     credentials = google.oauth2.credentials.Credentials(**client_token)
-    calendars = caltojson.getCalendarList(credentials)
+
-    for calendar in calendars:
+    service = build(GC.API_SERVICE_NAME, GC.API_VERSION, credentials=credentials)
-        if not current_user.hasCalendar(calendar.calendarId):
+   
-            c = dbCalendar(calendar_id=calendar.calendarId, 
+    # get all calendars and put them into Calendar Class
-                           name = calendar.summary,
+    page_token = None
-                           toggle = "False",
+    calendars = []
-                           color = calendar.color)
+    while True:
-            db.session.add(c)
+        calendar_list = service.calendarList().list(pageToken=page_token).execute()
-            current_user.calendars.append(c)
+        for calendar in calendar_list['items']:
-    
+            calendars.append(Calendar(name=calendar['summary'], 
-    # Save credentials back to session in case access token was refreshed.
+                                      calType="Google",
-    # ACTION ITEM: In a production app, you likely want to save these
+                                              calendarId=calendar['id'], 
-    #              credentials in a persistent database instead.
+                                              color=calendar['colorId']))
-    # TODO add save updated token to database here 
+        page_token = calendar_list.get('nextPageToken')
-    current_user.google_token.token = credentials.token
+        if not page_token:
-    db.session.commit()
+            break
+
+
+    colors = service.colors().get().execute()
+
+    return calendars, colors, credentials.token
+        
+
+
+def getUserCredentials(user):
+    credentials = GC.build_credentials(user.google_token.token,
+                                        user.google_token.refresh_token)
+    googleCreds = google.oauth2.credentials.Credentials(**credentials)                                        
+    return googleCreds
+
 
 
 def credentials_to_dict(credentials):

server/routes.py

@@ -1,6 +1,7 @@
 # Python standard libraries
 import json
 import os
+import time
 
 # Third-party libraries
 import flask
@@ -13,36 +14,53 @@ from flask_login import (
     login_user,
     logout_user,
 )
-from random_word import RandomWords
+from random_words import RandomWords
 import requests
 
+import backend.icalHandler as ical
 import server.googleHandler as google
 
-from backend.Routine import Routine
 from server import login_manager, app, db
-from server.forms import LoginForm, RegistrationForm, DeviceForm
+from server.forms import LoginForm, RegistrationForm, DeviceForm, CalendarForm
+import backend
 from database.models import User, Calendar, Device, GoogleToken
 
 os.environ['OAUTHLIB_INSECURE_TRANSPORT'] = '1'
 
 @app.route("/")
-def account():
+def startpage():
-    return flask.redirect('account')
+    return flask.render_template('startpage.html')
+
+    
 
 @app.route("/privacy")
 def privacy():
     return flask.render_template('privacy.html')
 
-@app.route("/account")
+@app.route("/login")
-def index():
+def login():
     if current_user.is_authenticated:
-        google.updateCalendars()
+        return redirect(url_for('account'))
+    return flask.render_template('login.html')
+
+
+@app.route("/account")
+def account():
+    if current_user.is_authenticated:
+        calendars = []
+        gCalendars, colors, token = google.fetchCalendars()
+        if token != None:
+            current_user.google_token.token = token
+            db.session.commit()
+        calendars.extend(gCalendars)
+        backend.updateCalendars(current_user, calendars, colors)
+        
         return (flask.render_template('account.html',
             username = current_user.username, email = current_user.email, profile_img=current_user.profile_pic
             )
         )
     else:
-        return flask.render_template('login.html')
+        return redirect(url_for("login"))
 
 @app.route("/view")
 def view():
@@ -58,29 +76,77 @@ def devices():
 
     # if this is a post request from the 'unlink' submittion form
     # delete this device from the list
+    form = DeviceForm()
     if request.method == 'POST':
+
         if request.form.get("submit") == "Unlink":
             device = db.session.query(Device).filter(Device.deviceName==request.form.get("device")).first()
             db.session.delete(device)
             db.session.commit()
 
     # if this is part of the device form
-    form = DeviceForm()
+        elif form.validate_on_submit():
-    if form.validate_on_submit():
+            device = db.session.query(Device).filter(Device.deviceName==form.deviceName.data).first()
-        device = db.session.query(Device).filter(Device.deviceName==form.deviceName.data).first()
+            current_user.devices.append(device)
-        current_user.devices.append(device)
+            db.session.commit()
-        db.session.commit()
 
     return flask.render_template('devices.html', 
             devices=current_user.devices,
             form=form)
 
 
-@app.route("/calendar")
+@app.route("/calendar", methods=['GET', 'POST', 'DELETE'])
-@login_required
 def calendar():
-    calendars = google.calendarsFromDb()
+    if not current_user.is_authenticated:
-    return flask.render_template('calendar.html', calendars=calendars)
+        return flask.render_template('login.html')
+
+    calendars = backend.calendarsFromDb(current_user)
+
+    form = CalendarForm()
+    if request.method == 'POST':
+
+        if request.form.get("submit") == "Remove":
+            calendar = db.session.query(Calendar).filter(Calendar.calendar_id==request.form.get("calendar")).first()
+            db.session.delete(calendar)
+            db.session.commit()
+            return flask.redirect(url_for('calendar'))
+
+        elif form.validate_on_submit():
+            ical.icalToCalendarDb(form.iCalURL.data, form.calName.data, current_user)
+            return flask.redirect(url_for('calendar'))
+
+            
+        # otherwise it is a javascript POST
+        else:
+            try:
+                calId = request.json.get('calendar_id')
+                color = request.json.get('color', None)
+                toggle = request.json.get('toggle', None)
+            except:
+                return flask.render_template('calendar.html', calendars=calendars, form=form)
+
+            if color != None:
+                current_user.updateCalendar(calId, color=color)
+            if toggle != None:
+                current_user.updateCalendar(calId, toggle=toggle)
+            # toggle specific calendar of user
+            try:
+                calId = request.json.get('calendar_id')
+                color = request.json.get('color', None)
+                toggle = request.json.get('toggle', None)
+            except:
+                return flask.render_template('calendar.html', calendars=calendars, form=form)
+
+            if color != None:
+                current_user.updateCalendar(calId, color=color)
+            if toggle != None:
+                current_user.updateCalendar(calId, toggle=toggle)
+            # toggle specific calendar of user
+
+
+    return flask.render_template('calendar.html', calendars=calendars, form=form)
+
+# POST
 
 @app.route('/login/email', methods=['GET', 'POST'])
 def emaillogin():
@@ -169,21 +235,13 @@ def callback():
     # Begin user session by logging the user in
     login_user(user)
     
-    return flask.redirect(flask.url_for('index'))
+    return flask.redirect(flask.url_for('account'))
 
 @app.route("/logout")
 @login_required
 def logout():
     logout_user()
-    return redirect(url_for("index"))
+    return redirect(url_for("startpage"))
-
-def credentials_to_dict(credentials):
-  return {'token': credentials.token,
-          'refresh_token': credentials.refresh_token,
-          'token_uri': credentials.token_uri,
-          'client_id': credentials.client_id,
-          'client_secret': credentials.client_secret,
-          'scopes': credentials.scopes}
 
 
 @app.route("/device/<path:device>/calendarevents.json")
@@ -195,16 +253,18 @@ def downloader(device):
     if request_device.user_id == None: 
         return jsonify(kind="unregistered")
 
+    request_device.lastConnection=int(round(time.time()))
     request_device.connection=True
     db.session.commit()
     request_user = db.session.query(User).filter(User.id==request_device.user_id).first()
 
-    routine = Routine()
     # TODO add test if googke token exists
     # if request_user.google_token != Null:
-    client_token = google.GC.build_credentials(request_user.google_token.token,
+    # TODO only pass along google calendars form user
-                                                request_user.google_token.refresh_token)
+    startDate, endDate = backend.getTimeStamps()
-    calendarjson = routine.updateCalendar(request_user, client_token) 
+    events, colors  = google.fetchCalendarEvents(request_user, request_user.calendars, startDate, endDate)
+    events.extend(ical.fetchCalendarEvents(request_user.calendars, startDate, endDate))
+    calendarjson = backend.generateJsonFromCalendarEntries(events, colors) 
     return jsonify(calendarjson)
 
 @app.route("/devicefingerprint.json")
@@ -214,9 +274,7 @@ def generateDeviceFingerprint():
     while True:
         fingerprint = ""
         length = 3
-        randos = r.get_random_words(limit=length, hasDictionaryDef="true",
+        randos = r.random_words(count=length)
-                           includePartOfSpeech="noun", minDictionaryCount=1,
-                           maxDictionaryCount=10, minLength=5, maxLength=10)
         for i in range(len(randos)):
             fingerprint += randos[i] 
             if i < length-1:
@@ -226,6 +284,7 @@ def generateDeviceFingerprint():
         if not db.session.query(Device).filter(Device.deviceName==fingerprint).first():
             # Save as new Device
             device = Device(deviceName=fingerprint, connection=False)
+            device.lastConnection = int(round(time.time()))
             db.session.add(device)
             db.session.commit()
             break;
@@ -233,27 +292,3 @@ def generateDeviceFingerprint():
     # Send to Device
     return jsonify(deviceName=fingerprint)
 
-# POST
-
-@app.route('/calendar', methods = ['POST', 'DELETE'])
-@login_required
-def user():
-    if request.method == 'POST':
-        calId = request.json.get('calendar_id')
-        color = request.json.get('color', None)
-        toggle = request.json.get('toggle', None)
-        
-        if color != None:
-            current_user.updateCalendar(calId, color=color)
-        if toggle != None:
-            current_user.updateCalendar(calId, toggle=toggle)
-        # toggle specific calendar of user
-        
-    elif request.method == 'DELETE':
-        # do nothing
-        return 'NONE'
-    else:
-        # POST Error 405
-        print("405")
-
-    return 'OK'

server/static/css/main.css

@@ -3,9 +3,9 @@ html,
 body
 {
     font-family: "Trebuchet MS", Helvetica, sans-serif;
-    margin: 0.5rem;
     padding: 0;
-    height: calc(100% - 1rem)
+    margin: 0;
+    height: calc(100% - 0.5rem)
 }
 
 #container {
@@ -31,15 +31,86 @@ body
 .banner {
     display:flex;
     justify-content: center;
+    margin: 5rem;
     align-items:center;
-    background-color: orange;
-    height: 20rem;
     flex-direction: column;
-    margin-bottom: 10rem;
+}
+
+.subtitle {
+    color: #333;
+    text-align: center;
+    margin: 1rem;
+    font-size: 1.2rem;
+}
+
+.primeblue {
+    color: #1b75bc;
 }
 
 .title {
-    color: blue;
+    font-size: 3rem;
+    font-weight: bold;
+    text-align: center;
+    margin: 1rem;
+}
+
+.whiteblock {
+    display: flex;
+    background-color: #fff;
+    align-items: center; 
+    justify-content: center;
+    margin-left: 10rem;
+    margin-right: 10rem;
+}
+.grayblock {
+    background-color: #ddd;
+    align-items: center;
+    justify-content: center;
+}
+
+.grayblock .padded {
+    padding: 0rem; 
+}
+
+.horizontal {
+    display: flex;
+    flex-wrap: wrap;
+}
+.vertical {
+    font-size: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+}
+.vertical .content {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    margin: 2rem
+}
+
+.vertical .content .image {
+    max-width: 90%;
+    width: 25rem;
+}
+
+.vertical .content .text {
+    max-width: 90%;
+    margin: auto;
+    width: 26rem;
+}
+
+.horizontal .content {
+    font-size: 2rem;
+    text-align: center;
+}
+
+.horizontal .image {
+    margin: 1rem;
+    height: 20rem;
+    border-radius: 1rem;
+    width: auto;
 }
 
 .logins {
@@ -82,14 +153,20 @@ body
 
 /* top navigation */
 .navigation {
-    background-color: orange;
+    background-color: #eaeaea;
     overflow: hidden;
+    margin: auto;
+    display: block;
+}
+
+.navigation_rightside {
+   margin-left: auto; 
 }
 
 .navigation a {
     float: left;
-    display: flex;
+    display: block;
-    color: #f2f2f2;
+    color: #333;
     text-align: center;
     padding: 14px 16px;
     text-decoration: none;
@@ -134,6 +211,7 @@ body
     display: block;
     text-align: left;
   }
+  
 }
 
 /* Style page content */
@@ -212,25 +290,27 @@ body
   }
 
 .container {
-    display: inline-flex;
+    display: flex;
+    flex-wrap: wrap;
     justify-content: center;
     align-items:center;
-    flex-direction: row;
+    /* flex-direction: row; */
-    padding: 0px 2rem 0px 2rem;
+    /*padding: 0px 2rem 0px 2rem;*/
 }
 
 .container .button {
    padding: 1rem 1.5rem 1rem 1.5rem;
    font-size: 2rem;
-   margin: 4rem;
+   margin: 4rem 1rem 1rem 1rem;
    color: black;
    text-decoration: none;
 }
 
 .container .preview {
     width: 20rem;
-    height: 20rem;
+    height: auto;
     margin: 1rem 3rem 4rem 3rem;
+    max-width: 100%;
 }
 
 .container .button.logout {
@@ -251,8 +331,9 @@ body
 }
 
 .sub.container {
-    width: 20rem;
+    width: 40%;
     justify-content: left;
+    display: flex;
 }
 
 .profile {
@@ -272,6 +353,7 @@ body
 .profile .name {
     font-size: 3rem;
     color: #333;
+    text-align: center;
 }
 
 .grey {
@@ -289,3 +371,10 @@ body
     border-radius: 5px; 
     margin-right: 1rem;
 }
+
+
+@media (max-width:800px) { 
+  .sub.container {
+    justify-content: center;
+  }
+}

server/static/res/arrow.svg

@@ -0,0 +1,12 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 196.88073 91.52294">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <title>Artboard 1</title>
+  <path class="cls-1" d="M190.17035,42.08149,122.7379,3.14935a2.52251,2.52251,0,0,0-3.78377,2.18456V83.1982a2.52251,2.52251,0,0,0,3.78377,2.18456l67.43245-38.93214A2.52252,2.52252,0,0,0,190.17035,42.08149Z"/>
+  <path class="cls-1" d="M118.93578,66.72477H4.29316a2.52252,2.52252,0,0,1-2.52252-2.52252V23.66931a2.52252,2.52252,0,0,1,2.52252-2.52252H118.93578Z"/>
+</svg>

server/static/res/calendar.svg

@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201.61468 195.55963">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+
+      .cls-2 {
+        fill: #808285;
+        stroke: #a7a9ac;
+        stroke-width: 0.25px;
+      }
+
+      .cls-10, .cls-11, .cls-12, .cls-2, .cls-5, .cls-6, .cls-7, .cls-8, .cls-9 {
+        stroke-miterlimit: 10;
+      }
+
+      .cls-10, .cls-3 {
+        fill: #939598;
+      }
+
+      .cls-4, .cls-6 {
+        fill: #1b75bc;
+      }
+
+      .cls-5 {
+        fill: #92278f;
+      }
+
+      .cls-10, .cls-11, .cls-12, .cls-5, .cls-6, .cls-7, .cls-8, .cls-9 {
+        stroke: #fff;
+      }
+
+      .cls-7 {
+        fill: #39b54a;
+      }
+
+      .cls-8 {
+        fill: #27aae1;
+      }
+
+      .cls-9 {
+        fill: #ee2a7b;
+      }
+
+      .cls-11 {
+        fill: #f7941d;
+      }
+
+      .cls-12 {
+        fill: #ffcd34;
+      }
+    </style>
+  </defs>
+  <title>Artboard 1</title>
+  <g id="background">
+    <rect class="cls-1" x="0.2844" y="0.22936" width="201.13761" height="195.19266" rx="12.7156"/>
+  </g>
+  <g id="Layer_1" data-name="Layer 1">
+    <line class="cls-2" x1="18.11927" y1="81.24771" x2="193.16514" y2="81.24771"/>
+    <line class="cls-2" x1="18.11927" y1="116.24771" x2="193.16514" y2="116.24771"/>
+    <line class="cls-2" x1="18.11927" y1="151.24771" x2="193.16514" y2="151.24771"/>
+    <circle class="cls-3" cx="45.87156" cy="16.41284" r="9.57798"/>
+    <circle class="cls-4" cx="105.87156" cy="16.41284" r="9.57798"/>
+    <circle class="cls-3" cx="165.87156" cy="16.41284" r="9.57798"/>
+    <rect class="cls-4" x="78.37156" y="31.07339" width="55" height="8" rx="2"/>
+    <rect class="cls-5" x="78.37156" y="46.92661" width="55" height="39.61468" rx="2"/>
+    <rect class="cls-6" x="78.37156" y="91.77982" width="55" height="8" rx="2"/>
+    <rect class="cls-7" x="78.37156" y="111.6422" width="55" height="21.62385" rx="2"/>
+    <rect class="cls-8" x="78.37156" y="135.63303" width="55" height="24.90826" rx="2"/>
+    <rect class="cls-9" x="78.37156" y="164.55963" width="55" height="8" rx="2"/>
+    <rect class="cls-5" x="18.37156" y="46.92661" width="55" height="39.17431" rx="2"/>
+    <rect class="cls-6" x="18.37156" y="91.77982" width="55" height="8" rx="2"/>
+    <rect class="cls-8" x="18.37156" y="117.20183" width="55" height="21.08257" rx="2"/>
+    <rect class="cls-8" x="18.37156" y="139.93578" width="55" height="16.6789" rx="2"/>
+    <rect class="cls-9" x="18.37156" y="107.19266" width="55" height="8" rx="2"/>
+    <rect class="cls-5" x="138.37156" y="46.92661" width="55" height="49.30275" rx="2"/>
+    <rect class="cls-10" x="138.37156" y="117.36697" width="55" height="8" rx="2"/>
+    <rect class="cls-11" x="138.37156" y="128.77982" width="55" height="21.6422" rx="2"/>
+    <rect class="cls-12" x="138.37156" y="177.30275" width="55" height="9.77982" rx="2"/>
+    <g>
+      <path class="cls-3" d="M7.9614,46.45853c0,1.32519-.4917,2.05664-1.355,2.05664-.76172,0-1.27734-.71338-1.28955-2.00293,0-1.30713.564-2.02686,1.35547-2.02686C7.49363,44.48538,7.9614,45.21683,7.9614,46.45853Zm-2.1167.05957c0,1.01367.31153,1.58935.79151,1.58935.53955,0,.79736-.62988.79736-1.625,0-.95947-.2456-1.58935-.7915-1.58935C6.18064,44.8931,5.8447,45.45706,5.8447,46.5181Z"/>
+      <path class="cls-3" d="M11.03953,46.45853c0,1.32519-.4917,2.05664-1.355,2.05664-.76172,0-1.27735-.71338-1.28955-2.00293,0-1.30713.564-2.02686,1.35547-2.02686C10.57175,44.48538,11.03953,45.21683,11.03953,46.45853Zm-2.1167.05957c0,1.01367.31152,1.58935.7915,1.58935.53955,0,.79737-.62988.79737-1.625,0-.95947-.24561-1.58935-.79151-1.58935C9.25877,44.8931,8.92283,45.45706,8.92283,46.5181Z"/>
+      <path class="cls-3" d="M12.92381,45.29105c0,.77246-.28663,1.19873-.79,1.19873-.44385,0-.74414-.416-.751-1.167,0-.76221.32813-1.18116.78955-1.18116C12.65086,44.14163,12.92381,44.5679,12.92381,45.29105Zm-1.23389.03515c0,.59034.18213.92578.46142.92578.31446,0,.46485-.36669.46485-.94677,0-.55908-.14356-.92627-.46143-.92627C11.88572,44.37894,11.68992,44.70755,11.68992,45.3262Z"/>
+      <path class="cls-3" d="M14.71824,45.29105c0,.77246-.28662,1.19873-.79,1.19873-.44385,0-.74414-.416-.751-1.167,0-.76221.32813-1.18116.78955-1.18116C14.44529,44.14163,14.71824,44.5679,14.71824,45.29105Zm-1.23389.03515c0,.59034.18164.92578.46143.92578.31445,0,.46484-.36669.46484-.94677,0-.55908-.14355-.92627-.46142-.92627C13.68015,44.37894,13.48435,44.70755,13.48435,45.3262Z"/>
+    </g>
+    <g>
+      <path class="cls-3" d="M6.51609,115.043H6.50437l-.67773.36572-.10205-.40136.85156-.45606h.44971v3.898H6.51609Z"/>
+      <path class="cls-3" d="M8.4492,118.44925v-.32373l.41357-.40186c.99561-.94726,1.44531-1.45117,1.45117-2.03906a.69522.69522,0,0,0-.77344-.76123,1.32667,1.32667,0,0,0-.82763.32959l-.168-.37158a1.7104,1.7104,0,0,1,1.10352-.396,1.09685,1.09685,0,0,1,1.19335,1.1333c0,.71973-.522,1.30127-1.34326,2.09278l-.312.28808v.01172h1.751v.438Z"/>
+      <path class="cls-3" d="M12.92381,115.29105c0,.77246-.28663,1.19873-.79,1.19873-.44385,0-.74414-.416-.751-1.167,0-.76221.32813-1.18116.78955-1.18116C12.65086,114.14163,12.92381,114.5679,12.92381,115.29105Zm-1.23389.03515c0,.59034.18213.92578.46142.92578.31446,0,.46485-.36669.46485-.94677,0-.55908-.14356-.92627-.46143-.92627C11.88572,114.37894,11.68992,114.70755,11.68992,115.3262Z"/>
+      <path class="cls-3" d="M14.71824,115.29105c0,.77246-.28662,1.19873-.79,1.19873-.44385,0-.74414-.416-.751-1.167,0-.76221.32813-1.18116.78955-1.18116C14.44529,114.14163,14.71824,114.5679,14.71824,115.29105Zm-1.23389.03515c0,.59034.18164.92578.46143.92578.31445,0,.46484-.36669.46484-.94677,0-.55908-.14355-.92627-.46142-.92627C13.68015,114.37894,13.48435,114.70755,13.48435,115.3262Z"/>
+    </g>
+    <g>
+      <path class="cls-3" d="M5.37107,188.44925v-.32373l.41358-.40186c.9956-.94726,1.44531-1.45117,1.45117-2.03906a.69522.69522,0,0,0-.77344-.76123,1.3267,1.3267,0,0,0-.82764.32959l-.168-.37158a1.7104,1.7104,0,0,1,1.10352-.396,1.09685,1.09685,0,0,1,1.19336,1.1333c0,.71973-.522,1.30127-1.34326,2.09278l-.312.28808v.01172h1.751v.438Z"/>
+      <path class="cls-3" d="M10.08006,188.44925v-1.06152H8.269v-.34766l1.73926-2.48877h.56982v2.42285h.54541v.41358H10.5781v1.06152Zm0-1.4751v-1.30127q0-.30615.01806-.61181h-.01806c-.11963.228-.21582.396-.32373.57568l-.95362,1.3252v.0122Z"/>
+      <path class="cls-3" d="M12.92381,185.29105c0,.77246-.28663,1.19873-.79,1.19873-.44385,0-.74414-.416-.751-1.167,0-.76221.32813-1.18116.78955-1.18116C12.65086,184.14163,12.92381,184.5679,12.92381,185.29105Zm-1.23389.03515c0,.59034.18213.92578.46142.92578.31446,0,.46485-.36669.46485-.94677,0-.55908-.14356-.92627-.46143-.92627C11.88572,184.37894,11.68992,184.70755,11.68992,185.3262Z"/>
+      <path class="cls-3" d="M14.71824,185.29105c0,.77246-.28662,1.19873-.79,1.19873-.44385,0-.74414-.416-.751-1.167,0-.76221.32813-1.18116.78955-1.18116C14.44529,184.14163,14.71824,184.5679,14.71824,185.29105Zm-1.23389.03515c0,.59034.18164.92578.46143.92578.31445,0,.46484-.36669.46484-.94677,0-.55908-.14355-.92627-.46142-.92627C13.68015,184.37894,13.48435,184.70755,13.48435,185.3262Z"/>
+    </g>
+    <line class="cls-2" x1="18.11927" y1="46.24771" x2="193.16514" y2="46.24771"/>
+    <line class="cls-2" x1="18.11927" y1="186.24771" x2="137.6789" y2="186.24771"/>
+  </g>
+</svg>

server/static/res/connect_calendar.svg

@@ -0,0 +1,70 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 25">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #27aae1;
+      }
+
+      .cls-2 {
+        fill: #fff;
+      }
+
+      .cls-3, .cls-4 {
+        fill: none;
+        stroke-width: 1.5615px;
+      }
+
+      .cls-3 {
+        stroke: #939598;
+      }
+
+      .cls-3, .cls-4, .cls-6 {
+        stroke-miterlimit: 10;
+      }
+
+      .cls-4 {
+        stroke: #a7a9ac;
+      }
+
+      .cls-5 {
+        fill: #f7941d;
+      }
+
+      .cls-6 {
+        fill: #00aeef;
+        stroke: #fff;
+        stroke-width: 0.819px;
+      }
+    </style>
+  </defs>
+  <title>Artboard 1</title>
+  <g>
+    <path class="cls-1" d="M12.377,6.70433V20.036a.60366.60366,0,0,0,.60366.60367H24.69291a.60365.60365,0,0,0,.42685-.17681l2.08043-2.08043a.60366.60366,0,0,0,.17681-.42832L27.34962,6.70269a.60368.60368,0,0,0-.60367-.6022l-13.76529.00017A.60366.60366,0,0,0,12.377,6.70433Z"/>
+    <circle class="cls-2" cx="15.4964" cy="8.97936" r="1.01362"/>
+    <circle class="cls-2" cx="24.36129" cy="8.97936" r="1.01362"/>
+    <g>
+      <path class="cls-2" d="M15.28135,18.48v-.02979c0-.81982.69971-1.83935,2.00879-2.8584,1.13965-.88965,1.4292-1.15967,1.4292-1.98926a1.23962,1.23962,0,0,0-1.34912-1.33935c-.89942,0-1.36914.43017-1.53907,1.38965h-.50976a1.94123,1.94123,0,0,1,2.04883-1.86914,1.74262,1.74262,0,0,1,1.89892,1.78906c0,1.01953-.42969,1.35937-1.64892,2.3584a4.96814,4.96814,0,0,0-1.75928,2.05908h3.67822l-.08984.48975Z"/>
+      <path class="cls-2" d="M20.38486,16.64111a1.814,1.814,0,0,1,1.26954-1.75928,1.4784,1.4784,0,0,1-.9795-1.40918,1.68665,1.68665,0,0,1,1.91895-1.689,1.66465,1.66465,0,0,1,1.82861,1.6792,1.43291,1.43291,0,0,1-.96924,1.39892,1.77374,1.77374,0,0,1,1.23926,1.75928,1.98384,1.98384,0,0,1-2.17871,1.979A1.96437,1.96437,0,0,1,20.38486,16.64111Zm3.76807-.02a1.40857,1.40857,0,0,0-1.60937-1.48926,1.42461,1.42461,0,0,0-1.61915,1.48926,1.47113,1.47113,0,0,0,1.60938,1.50928A1.45349,1.45349,0,0,0,24.15293,16.62109Zm-2.93848-3.17822c0,.62939.37989,1.209,1.36914,1.209.91944,0,1.29932-.47949,1.29932-1.16894a1.18858,1.18858,0,0,0-1.31933-1.2295C21.57432,12.25341,21.21445,12.77294,21.21445,13.44287Z"/>
+    </g>
+  </g>
+  <path class="cls-3" d="M44.24948,8.87635l1.41044.0142a3.896,3.896,0,0,1,3.85656,3.935h0a3.635,3.635,0,0,1-3.67142,3.59822l-1.52229-.01533"/>
+  <path class="cls-3" d="M44.24948,8.87635l1.41044.0142a3.896,3.896,0,0,1,3.85656,3.935h0a3.635,3.635,0,0,1-3.67142,3.59822l-1.52229-.01533"/>
+  <path class="cls-3" d="M45.26721,16.418l-1.41044-.0142a3.896,3.896,0,0,1-3.85657-3.935h0a3.635,3.635,0,0,1,3.67143-3.59822l1.52228.01533"/>
+  <path class="cls-3" d="M49.51648,12.82557h0a3.635,3.635,0,0,1-3.67142,3.59822l-1.52229-.01533"/>
+  <path class="cls-3" d="M40.0002,12.46875a3.635,3.635,0,0,1,3.67143-3.59822l1.52228.01533"/>
+  <path class="cls-4" d="M44.24948,8.87635l1.41044.0142a3.896,3.896,0,0,1,3.85656,3.935h0a3.635,3.635,0,0,1-3.67142,3.59822l-1.52229-.01533"/>
+  <path class="cls-4" d="M45.26721,16.418l-1.41044-.0142a3.896,3.896,0,0,1-3.85657-3.935h0a3.635,3.635,0,0,1,3.67143-3.59822l1.52228.01533"/>
+  <path class="cls-3" d="M50.75052,16.418l-1.41044-.0142a3.896,3.896,0,0,1-3.85656-3.935h0a3.635,3.635,0,0,1,3.67142-3.59822l1.52229.01533"/>
+  <path class="cls-3" d="M49.73279,8.87635l1.41044.0142a3.896,3.896,0,0,1,3.85657,3.935h0a3.635,3.635,0,0,1-3.67143,3.59822l-1.52228-.01533"/>
+  <path class="cls-3" d="M49.73279,8.87635l1.41044.0142a3.896,3.896,0,0,1,3.85657,3.935h0a3.635,3.635,0,0,1-3.67143,3.59822l-1.52228-.01533"/>
+  <path class="cls-3" d="M50.75052,16.418l-1.41044-.0142a3.896,3.896,0,0,1-3.85656-3.935h0a3.635,3.635,0,0,1,3.67142-3.59822l1.52229.01533"/>
+  <path class="cls-3" d="M54.9998,12.82557h0a3.635,3.635,0,0,1-3.67143,3.59822l-1.52228-.01533"/>
+  <path class="cls-3" d="M45.48352,12.46875a3.635,3.635,0,0,1,3.67142-3.59822l1.52229.01533"/>
+  <path class="cls-3" d="M49.73279,8.87635l1.41044.0142a3.896,3.896,0,0,1,3.85657,3.935h0a3.635,3.635,0,0,1-3.67143,3.59822l-1.52228-.01533"/>
+  <path class="cls-3" d="M45.48352,12.46875a3.635,3.635,0,0,1,3.67142-3.59822l1.52229.01533"/>
+  <g>
+    <ellipse class="cls-5" cx="72.04133" cy="12.8295" rx="6.98436" ry="6.85133"/>
+    <ellipse class="cls-6" cx="67.30085" cy="18.57004" rx="3.27515" ry="3.21277"/>
+  </g>
+  <path class="cls-4" d="M49.51648,12.82557h0a3.635,3.635,0,0,1-3.67142,3.59822l-1.52229-.01533"/>
+</svg>

server/static/res/connect_device.svg

@@ -0,0 +1,133 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 25">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+
+      .cls-2 {
+        fill: #fbb040;
+      }
+
+      .cls-3 {
+        fill: #00aeef;
+      }
+
+      .cls-4 {
+        fill: #f15a29;
+      }
+
+      .cls-5 {
+        fill: #231f20;
+      }
+
+      .cls-10, .cls-6, .cls-9 {
+        fill: none;
+        stroke-miterlimit: 10;
+      }
+
+      .cls-6 {
+        stroke: #231f20;
+        stroke-width: 0.09565px;
+      }
+
+      .cls-7 {
+        fill: #808285;
+      }
+
+      .cls-8 {
+        fill: #f1f2f2;
+      }
+
+      .cls-9 {
+        stroke: #939598;
+      }
+
+      .cls-10, .cls-9 {
+        stroke-width: 1.5615px;
+      }
+
+      .cls-10 {
+        stroke: #a7a9ac;
+      }
+    </style>
+  </defs>
+  <title>Artboard 1</title>
+  <g>
+    <circle class="cls-1" cx="17.76735" cy="12.5" r="12.76748"/>
+    <circle class="cls-2" cx="21.94283" cy="7.24563" r="1.83373"/>
+    <circle class="cls-3" cx="19.90843" cy="17.18926" r="0.94108"/>
+    <g>
+      <path class="cls-4" d="M6.28254,11.94644a2.72215,2.72215,0,0,1,.40039-.03027.838.838,0,0,1,.5918.18213.673.673,0,0,1,.20605.52441.77117.77117,0,0,1-.21094.56738.89642.89642,0,0,1-.6455.21045,3.04493,3.04493,0,0,1-.3418-.01758ZM6.471,13.238a1.16551,1.16551,0,0,0,.19043.01074.56127.56127,0,0,0,.62207-.61963.52132.52132,0,0,0-.5918-.56348,1.07246,1.07246,0,0,0-.2207.01953Z"/>
+      <path class="cls-4" d="M8.29524,13.38736,8.27961,13.255H8.27277a.38979.38979,0,0,1-.32031.15625A.29868.29868,0,0,1,7.63215,13.11c0-.25342.22461-.39209.62988-.39014v-.02149a.21588.21588,0,0,0-.23828-.24267.5174.5174,0,0,0-.27246.07812l-.04395-.126a.65483.65483,0,0,1,.34473-.09326c.32031,0,.39844.21923.39844.42919v.39209a1.50378,1.50378,0,0,0,.01758.25147Zm-.02832-.53516c-.208-.00439-.44434.03272-.44434.23633a.16823.16823,0,0,0,.17969.18164.261.261,0,0,0,.2539-.17529.21954.21954,0,0,0,.01075-.06055Z"/>
+      <path class="cls-4" d="M8.7552,12.66568c0-.12354-.002-.22949-.00879-.32715h.167l.00684.20606h.00781a.31545.31545,0,0,1,.291-.23.202.202,0,0,1,.05371.00683v.17969a.28207.28207,0,0,0-.06445-.00635.26661.26661,0,0,0-.25586.24463.48486.48486,0,0,0-.00879.08887v.55908H8.7552Z"/>
+      <path class="cls-4" d="M9.65852,12.81949h.0039c.02637-.03662.06348-.082.09375-.11914l.30762-.36182h.22949l-.40527.43115.46191.61768H10.1175l-.36133-.50244-.09765.10791v.39453H9.47V11.84879h.18848Z"/>
+      <path class="cls-4" d="M10.90363,12.73062v.14111h-.53515v-.14111Z"/>
+      <path class="cls-4" d="M12.182,13.33951a.93578.93578,0,0,1-.38574.06933.68222.68222,0,0,1-.72168-.73877.72673.72673,0,0,1,.7627-.76709.78612.78612,0,0,1,.34668.065l-.0459.15429a.67575.67575,0,0,0-.29395-.061.54315.54315,0,0,0-.57031.60254.53087.53087,0,0,0,.56152.58691.753.753,0,0,0,.30762-.06055Z"/>
+      <path class="cls-4" d="M13.33234,12.85416a.51258.51258,0,0,1-.52246.55713.4986.4986,0,0,1-.50293-.53956.51228.51228,0,0,1,.52051-.55712A.49707.49707,0,0,1,13.33234,12.85416Zm-.832.01123c0,.22949.13184.40283.31836.40283.18164,0,.31836-.17139.31836-.40723,0-.17773-.08886-.40332-.31445-.40332C12.598,12.45767,12.50031,12.66568,12.50031,12.86539Z"/>
+      <path class="cls-4" d="M13.56867,12.62271c0-.1084-.00195-.19726-.00879-.28418h.167l.00879.16895h.00585a.36233.36233,0,0,1,.33008-.19287.311.311,0,0,1,.29688.21044h.0039a.43586.43586,0,0,1,.11719-.13671.35793.35793,0,0,1,.23145-.07373c.13867,0,.34472.0913.34472.45507v.61768h-.18652v-.59375c0-.20166-.07324-.32275-.22754-.32275a.24546.24546,0,0,0-.22461.17334.30819.30819,0,0,0-.01562.09521v.64795h-.18653v-.62842c0-.167-.07324-.28808-.21875-.28808a.26063.26063,0,0,0-.23633.19043.26687.26687,0,0,0-.01464.09326v.63281h-.18653Z"/>
+      <path class="cls-4" d="M15.37043,12.68082c0-.13428-.00391-.24268-.00879-.34229h.1709l.00879.18018h.00488a.41189.41189,0,0,1,.37207-.2041.47521.47521,0,0,1,.44434.5332.49637.49637,0,0,1-.47656.56348.36913.36913,0,0,1-.32325-.16456h-.0039v.56983h-.18848Zm.18848.27978a.38972.38972,0,0,0,.00879.07813.29409.29409,0,0,0,.28613.22314c.20117,0,.31836-.165.31836-.40527,0-.21045-.11035-.39014-.3125-.39014a.30459.30459,0,0,0-.28809.23633.33934.33934,0,0,0-.01269.07764Z"/>
+      <path class="cls-4" d="M17.54914,12.85416a.51258.51258,0,0,1-.52246.55713.4986.4986,0,0,1-.50293-.53956.51227.51227,0,0,1,.52051-.55712A.49707.49707,0,0,1,17.54914,12.85416Zm-.832.01123c0,.22949.13184.40283.31836.40283.18164,0,.31836-.17139.31836-.40723,0-.17773-.08887-.40332-.31445-.40332C16.81477,12.45767,16.71711,12.66568,16.71711,12.86539Z"/>
+      <path class="cls-4" d="M17.7591,13.19254a.504.504,0,0,0,.252.07568c.13867,0,.20312-.06934.20312-.15625,0-.09082-.05371-.14063-.19434-.19287-.18847-.0669-.27734-.1709-.27734-.29639a.32288.32288,0,0,1,.36133-.3081.5225.5225,0,0,1,.25781.06543l-.04785.13867a.401.401,0,0,0-.21387-.061c-.11328,0-.17578.06494-.17578.14307,0,.08691.0625.126.19922.17773.18164.06934.27539.16016.27539.31641,0,.18408-.14355.314-.39258.314a.59421.59421,0,0,1-.29394-.07129Z"/>
+      <path class="cls-4" d="M18.85285,12.0441a.11768.11768,0,0,1-.23535,0,.116.116,0,0,1,.11914-.11914A.11252.11252,0,0,1,18.85285,12.0441Zm-.21191,1.34326V12.33853h.19043v1.04883Z"/>
+      <path class="cls-4" d="M19.37629,12.03726v.30127h.27344V12.484h-.27344v.56543c0,.12988.03711.20361.14355.20361a.411.411,0,0,0,.11036-.01318l.00879.14306a.47026.47026,0,0,1-.16895.02588.26294.26294,0,0,1-.20605-.08007.38541.38541,0,0,1-.07422-.27295V12.484h-.16211v-.14551h.16211v-.25146Z"/>
+      <path class="cls-4" d="M20.07356,12.0441a.11768.11768,0,0,1-.23536,0,.116.116,0,0,1,.11914-.11914A.11253.11253,0,0,1,20.07356,12.0441Zm-.21192,1.34326V12.33853h.19043v1.04883Z"/>
+      <path class="cls-4" d="M21.31672,12.85416a.51258.51258,0,0,1-.52246.55713.4986.4986,0,0,1-.50293-.53956.51227.51227,0,0,1,.52051-.55712A.49707.49707,0,0,1,21.31672,12.85416Zm-.832.01123c0,.22949.13183.40283.31836.40283.18164,0,.31836-.17139.31836-.40723,0-.17773-.08887-.40332-.31446-.40332C20.58234,12.45767,20.48469,12.66568,20.48469,12.86539Z"/>
+      <path class="cls-4" d="M21.55305,12.62271c0-.1084-.002-.19726-.00879-.28418h.16894l.01075.17334h.00488a.38541.38541,0,0,1,.34766-.19726c.14453,0,.37011.08691.37011.44677v.626h-.19043v-.60449c0-.169-.0625-.31006-.24414-.31006a.28249.28249,0,0,0-.26855.28418v.63037h-.19043Z"/>
+      <path class="cls-4" d="M23.19563,12.73062v.14111h-.53516v-.14111Z"/>
+      <path class="cls-4" d="M23.6507,12.92789l-.15136.45947H23.304l.49707-1.46045h.22754l.498,1.46045h-.20215l-.15527-.45947Zm.4795-.14746-.14356-.41993c-.03222-.0957-.05371-.18213-.07519-.2666h-.00489c-.02148.08643-.04492.1753-.07324.26416l-.14355.42237Z"/>
+      <path class="cls-4" d="M24.72395,12.68082c0-.13428-.00391-.24268-.00879-.34229h.1709l.00878.18018h.00489a.41188.41188,0,0,1,.37207-.2041.47521.47521,0,0,1,.44433.5332.49637.49637,0,0,1-.47656.56348.36912.36912,0,0,1-.32324-.16456h-.00391v.56983h-.18847Zm.18847.27978a.39045.39045,0,0,0,.00879.07813.2941.2941,0,0,0,.28613.22314c.20118,0,.31836-.165.31836-.40527,0-.21045-.11035-.39014-.3125-.39014a.30458.30458,0,0,0-.28808.23633.33935.33935,0,0,0-.0127.07764Z"/>
+      <path class="cls-4" d="M25.95344,12.68082c0-.13428-.00391-.24268-.00879-.34229h.1709l.00879.18018h.00488a.41188.41188,0,0,1,.37207-.2041.47521.47521,0,0,1,.44434.5332.49638.49638,0,0,1-.47657.56348.36912.36912,0,0,1-.32324-.16456h-.0039v.56983h-.18848Zm.18848.27978a.39047.39047,0,0,0,.00878.07813.2941.2941,0,0,0,.28614.22314c.20117,0,.31836-.165.31836-.40527,0-.21045-.11036-.39014-.3125-.39014a.30458.30458,0,0,0-.28809.23633.33934.33934,0,0,0-.01269.07764Z"/>
+      <path class="cls-4" d="M27.182,11.84879h.19043v1.53857H27.182Z"/>
+      <path class="cls-4" d="M27.79817,12.89761a.33586.33586,0,0,0,.35937.36426.68723.68723,0,0,0,.29-.0542l.0332.13623a.85506.85506,0,0,1-.34961.06494.48716.48716,0,0,1-.51562-.52832.50957.50957,0,0,1,.49219-.56591.44431.44431,0,0,1,.43359.49414.74715.74715,0,0,1-.00684.08886Zm.55859-.13623a.27171.27171,0,0,0-.26465-.31006.31557.31557,0,0,0-.292.31006Z"/>
+    </g>
+  </g>
+  <g>
+    <path class="cls-5" d="M59.49445,9.612a2.72215,2.72215,0,0,1,.40039-.03027.838.838,0,0,1,.5918.18212.67306.67306,0,0,1,.20606.52442.77119.77119,0,0,1-.21094.56738.89644.89644,0,0,1-.64551.21045,3.04732,3.04732,0,0,1-.3418-.01758Zm.18848,1.2915a1.16446,1.16446,0,0,0,.19043.01074.56147.56147,0,0,0,.62207-.61962.52132.52132,0,0,0-.5918-.56348,1.07261,1.07261,0,0,0-.2207.01953Z"/>
+    <path class="cls-5" d="M61.50715,11.05289l-.01563-.13233h-.00683a.3898.3898,0,0,1-.32031.15625.29867.29867,0,0,1-.32032-.30127c0-.25342.22461-.39209.62989-.39013v-.02149a.21588.21588,0,0,0-.23828-.24267.51747.51747,0,0,0-.27247.07812l-.04394-.126a.65487.65487,0,0,1,.34473-.09326c.32031,0,.39843.21924.39843.4292v.39209a1.50485,1.50485,0,0,0,.01758.25147Zm-.02832-.53516c-.208-.00439-.44434.03223-.44434.23633a.16824.16824,0,0,0,.17969.18164.261.261,0,0,0,.25391-.17529.21958.21958,0,0,0,.01074-.06055Z"/>
+    <path class="cls-5" d="M61.96711,10.33121c0-.12354-.002-.2295-.00879-.32715h.167l.00684.206H62.14a.31547.31547,0,0,1,.291-.23.20166.20166,0,0,1,.05371.00684v.17969a.28207.28207,0,0,0-.06445-.00635.26661.26661,0,0,0-.25586.24463.484.484,0,0,0-.00879.08886v.55909h-.18848Z"/>
+    <path class="cls-5" d="M62.87043,10.485h.00391c.02636-.03663.06347-.082.09375-.11915l.30761-.36181h.2295l-.40528.43115.46192.61768h-.23242L62.96809,10.55l-.09766.1084v.39453H62.682V9.51431h.18848Z"/>
+    <path class="cls-5" d="M64.11555,10.39615v.14111h-.53516v-.14111Z"/>
+    <path class="cls-5" d="M65.39387,11.005a.936.936,0,0,1-.38574.06933.68222.68222,0,0,1-.72168-.73877.72673.72673,0,0,1,.76269-.76709.78612.78612,0,0,1,.34668.06494l-.0459.15381a.69056.69056,0,0,0-.29394-.06055.54315.54315,0,0,0-.57031.60254.53086.53086,0,0,0,.56152.58692.753.753,0,0,0,.30762-.06055Z"/>
+    <path class="cls-5" d="M66.54426,10.51968a.51258.51258,0,0,1-.52246.55713.49859.49859,0,0,1-.50293-.53955.51228.51228,0,0,1,.52051-.55713A.49707.49707,0,0,1,66.54426,10.51968Zm-.832.01123c0,.2295.13183.40284.31836.40284.18164,0,.31836-.17139.31836-.40723,0-.17773-.08887-.40332-.31446-.40332C65.80988,10.1232,65.71223,10.33121,65.71223,10.53091Z"/>
+    <path class="cls-5" d="M66.78059,10.28824c0-.1084-.002-.19727-.00879-.28418h.167l.00879.16894h.00586a.36232.36232,0,0,1,.33008-.19287.311.311,0,0,1,.29687.21045h.00391a.43589.43589,0,0,1,.11719-.13672.358.358,0,0,1,.23144-.07373c.13867,0,.34473.09131.34473.45508v.61768h-.18653v-.59375c0-.20166-.07324-.32276-.22754-.32276a.24546.24546,0,0,0-.2246.17334.3083.3083,0,0,0-.01563.09522v.64795h-.18652v-.62842c0-.167-.07325-.28809-.21875-.28809a.26063.26063,0,0,0-.23633.19043.26691.26691,0,0,0-.01465.09326v.63282h-.18652Z"/>
+    <path class="cls-5" d="M68.58234,10.34634c0-.13427-.0039-.24267-.00878-.34228h.17089l.00879.18017h.00489a.41188.41188,0,0,1,.37207-.2041.47522.47522,0,0,1,.44433.53321.49637.49637,0,0,1-.47656.56347.3691.3691,0,0,1-.32324-.16455h-.00391v.56983h-.18848Zm.18848.27979a.38616.38616,0,0,0,.00879.07812.29409.29409,0,0,0,.28613.22315c.20118,0,.31836-.165.31836-.40528,0-.21044-.11035-.39013-.3125-.39013a.30458.30458,0,0,0-.28808.23633.33911.33911,0,0,0-.0127.07812Z"/>
+    <path class="cls-5" d="M70.76106,10.51968a.51258.51258,0,0,1-.52247.55713.49859.49859,0,0,1-.50292-.53955.51228.51228,0,0,1,.5205-.55713A.49708.49708,0,0,1,70.76106,10.51968Zm-.832.01123c0,.2295.13184.40284.31836.40284.18164,0,.31836-.17139.31836-.40723,0-.17773-.08886-.40332-.31445-.40332C70.02668,10.1232,69.929,10.33121,69.929,10.53091Z"/>
+    <path class="cls-5" d="M70.971,10.85806a.504.504,0,0,0,.252.07569c.13867,0,.20312-.06934.20312-.15625,0-.09082-.05371-.14063-.19433-.19239-.18848-.06738-.27734-.17138-.27734-.29687a.32287.32287,0,0,1,.36132-.30811.52254.52254,0,0,1,.25782.06543l-.04786.13867a.401.401,0,0,0-.21386-.061c-.11328,0-.17578.06494-.17578.14307,0,.08691.0625.126.19921.17773.18165.06934.2754.16016.2754.31641,0,.18408-.14356.314-.39258.314a.59422.59422,0,0,1-.294-.07129Z"/>
+    <path class="cls-5" d="M72.06477,9.70962a.11768.11768,0,0,1-.23535,0,.116.116,0,0,1,.11914-.11914A.11253.11253,0,0,1,72.06477,9.70962Zm-.21192,1.34327V10.00406h.19043v1.04883Z"/>
+    <path class="cls-5" d="M72.53156,9.42789v2.1665H72.387V9.42789Z"/>
+  </g>
+  <rect class="cls-6" x="58.54489" y="8.74619" width="26.45526" height="3.21029"/>
+  <path class="cls-7" d="M62.00373,14.51282H81.26555a2.051,2.051,0,0,1,2.051,2.051v0a2.051,2.051,0,0,1-2.051,2.051H62.00371a2.051,2.051,0,0,1-2.051-2.051v0a2.051,2.051,0,0,1,2.051-2.051Z"/>
+  <g>
+    <path class="cls-8" d="M65.012,17.33609a1.07013,1.07013,0,0,1-.44824.08105.79272.79272,0,0,1-.83789-.85888.84386.84386,0,0,1,.88574-.89112.908.908,0,0,1,.40332.07569l-.05273.17871a.79665.79665,0,0,0-.34278-.0708.63123.63123,0,0,0-.66211.70019.61714.61714,0,0,0,.65235.68262.8744.8744,0,0,0,.35742-.07129Z"/>
+    <path class="cls-8" d="M66.35578,16.77261a.59491.59491,0,0,1-.60644.64649.57871.57871,0,0,1-.584-.62647.59494.59494,0,0,1,.60449-.647A.57654.57654,0,0,1,66.35578,16.77261Zm-.96679.01221c0,.26709.15429.46826.37011.46826.21192,0,.37012-.19873.37012-.47314,0-.20655-.10254-.46826-.36426-.46826C65.50227,16.31168,65.389,16.55337,65.389,16.78482Z"/>
+    <path class="cls-8" d="M66.637,16.50308c0-.126-.00195-.229-.00976-.33008h.19629l.01269.20166h.00488a.44832.44832,0,0,1,.40332-.229c.168,0,.42969.10059.42969.51855v.72754h-.2207v-.70263c0-.19629-.07324-.35987-.28223-.35987a.31323.31323,0,0,0-.29687.22657.30158.30158,0,0,0-.01563.10351v.73242H66.637Z"/>
+    <path class="cls-8" d="M68.03547,16.50308c0-.126-.002-.229-.00977-.33008H68.222l.0127.20166h.00488a.4483.4483,0,0,1,.40332-.229c.168,0,.42969.10059.42969.51855v.72754h-.2207v-.70263c0-.19629-.07325-.35987-.28223-.35987a.31324.31324,0,0,0-.29688.22657.30183.30183,0,0,0-.01562.10351v.73242h-.22168Z"/>
+    <path class="cls-8" d="M69.55793,16.82291a.38967.38967,0,0,0,.417.42236.804.804,0,0,0,.33789-.0625l.03809.1582a.97185.97185,0,0,1-.40527.07617.566.566,0,0,1-.59961-.61474.59156.59156,0,0,1,.57129-.65674.51589.51589,0,0,1,.5039.57373.76.76,0,0,1-.00781.10352Zm.64941-.1587a.31647.31647,0,0,0-.30761-.36035.3676.3676,0,0,0-.33985.36035Z"/>
+    <path class="cls-8" d="M71.56574,17.34683a.82005.82005,0,0,1-.35058.07031.57883.57883,0,0,1-.60645-.62207.6191.6191,0,0,1,.6543-.647.74274.74274,0,0,1,.30762.063l-.05079.1709a.51248.51248,0,0,0-.25683-.05762.45913.45913,0,0,0-.00684.916.6197.6197,0,0,0,.27149-.06055Z"/>
+    <path class="cls-8" d="M72.12434,15.82339V16.173h.31738v.169h-.31738v.65723c0,.15039.043.23632.167.23632a.52663.52663,0,0,0,.12793-.01464l.00976.166a.538.538,0,0,1-.19628.03027.30934.30934,0,0,1-.23926-.09375.45342.45342,0,0,1-.085-.31689V16.342h-.18946v-.169h.18946v-.292Z"/>
+    <path class="cls-8" d="M73.23371,15.71744a3.15816,3.15816,0,0,1,.46582-.03516.9716.9716,0,0,1,.6875.21143.78446.78446,0,0,1,.23926.60937.8976.8976,0,0,1-.24414.65918,1.04519,1.04519,0,0,1-.751.24414,3.511,3.511,0,0,1-.39746-.01953Zm.21875,1.50049a1.42013,1.42013,0,0,0,.22168.01269.65214.65214,0,0,0,.72266-.72021.60472.60472,0,0,0-.6875-.6543,1.24505,1.24505,0,0,0-.25684.02246Z"/>
+    <path class="cls-8" d="M75.0384,16.82291a.38967.38967,0,0,0,.417.42236.804.804,0,0,0,.33789-.0625l.03809.1582a.97191.97191,0,0,1-.40528.07617.566.566,0,0,1-.5996-.61474.59156.59156,0,0,1,.57128-.65674.5159.5159,0,0,1,.50391.57373.76.76,0,0,1-.00781.10352Zm.64941-.1587a.31647.31647,0,0,0-.30761-.36035.3676.3676,0,0,0-.33985.36035Z"/>
+    <path class="cls-8" d="M76.263,16.173l.23926.68506a3.005,3.005,0,0,1,.09765.312h.00782c.02734-.10058.06347-.20117.10351-.312l.23633-.68506H77.179l-.47851,1.21875h-.21094L76.02668,16.173Z"/>
+    <path class="cls-8" d="M77.63606,15.83072a.13721.13721,0,0,1-.27442,0,.13459.13459,0,0,1,.13867-.13818A.1311.1311,0,0,1,77.63606,15.83072Zm-.24707,1.561V16.173h.22168v1.21875Z"/>
+    <path class="cls-8" d="M78.848,17.34683a.82007.82007,0,0,1-.35059.07031.57883.57883,0,0,1-.60644-.62207.6191.6191,0,0,1,.6543-.647.74269.74269,0,0,1,.30761.063l-.05078.1709a.51248.51248,0,0,0-.25683-.05762.45913.45913,0,0,0-.00684.916.61965.61965,0,0,0,.27148-.06055Z"/>
+    <path class="cls-8" d="M79.21711,16.82291a.38993.38993,0,0,0,.418.42236.80229.80229,0,0,0,.33691-.0625l.03809.1582a.97185.97185,0,0,1-.40527.07617.566.566,0,0,1-.59961-.61474.59156.59156,0,0,1,.57129-.65674.51589.51589,0,0,1,.5039.57373.76.76,0,0,1-.00781.10352Zm.64941-.1587a.31647.31647,0,0,0-.30761-.36035.3676.3676,0,0,0-.33985.36035Z"/>
+  </g>
+  <path class="cls-9" d="M41.24948,8.87635l1.41044.0142a3.896,3.896,0,0,1,3.85656,3.935h0a3.635,3.635,0,0,1-3.67142,3.59822l-1.52229-.01533"/>
+  <path class="cls-9" d="M41.24948,8.87635l1.41044.0142a3.896,3.896,0,0,1,3.85656,3.935h0a3.635,3.635,0,0,1-3.67142,3.59822l-1.52229-.01533"/>
+  <path class="cls-9" d="M42.26721,16.418l-1.41044-.0142a3.896,3.896,0,0,1-3.85657-3.935h0a3.635,3.635,0,0,1,3.67143-3.59822l1.52228.01533"/>
+  <path class="cls-9" d="M46.51648,12.82557h0a3.635,3.635,0,0,1-3.67142,3.59822l-1.52229-.01533"/>
+  <path class="cls-9" d="M37.0002,12.46875a3.635,3.635,0,0,1,3.67143-3.59822l1.52228.01533"/>
+  <path class="cls-10" d="M41.24948,8.87635l1.41044.0142a3.896,3.896,0,0,1,3.85656,3.935h0a3.635,3.635,0,0,1-3.67142,3.59822l-1.52229-.01533"/>
+  <path class="cls-10" d="M42.26721,16.418l-1.41044-.0142a3.896,3.896,0,0,1-3.85657-3.935h0a3.635,3.635,0,0,1,3.67143-3.59822l1.52228.01533"/>
+  <path class="cls-9" d="M47.75052,16.418l-1.41044-.0142a3.896,3.896,0,0,1-3.85656-3.935h0a3.635,3.635,0,0,1,3.67142-3.59822l1.52229.01533"/>
+  <path class="cls-9" d="M46.73279,8.87635l1.41044.0142a3.896,3.896,0,0,1,3.85657,3.935h0a3.635,3.635,0,0,1-3.67143,3.59822l-1.52228-.01533"/>
+  <path class="cls-9" d="M46.73279,8.87635l1.41044.0142a3.896,3.896,0,0,1,3.85657,3.935h0a3.635,3.635,0,0,1-3.67143,3.59822l-1.52228-.01533"/>
+  <path class="cls-9" d="M47.75052,16.418l-1.41044-.0142a3.896,3.896,0,0,1-3.85656-3.935h0a3.635,3.635,0,0,1,3.67142-3.59822l1.52229.01533"/>
+  <path class="cls-9" d="M51.9998,12.82557h0a3.635,3.635,0,0,1-3.67143,3.59822l-1.52228-.01533"/>
+  <path class="cls-9" d="M42.48352,12.46875a3.635,3.635,0,0,1,3.67142-3.59822l1.52229.01533"/>
+  <path class="cls-9" d="M46.73279,8.87635l1.41044.0142a3.896,3.896,0,0,1,3.85657,3.935h0a3.635,3.635,0,0,1-3.67143,3.59822l-1.52228-.01533"/>
+  <path class="cls-9" d="M42.48352,12.46875a3.635,3.635,0,0,1,3.67142-3.59822l1.52229.01533"/>
+  <path class="cls-10" d="M46.51648,12.82557h0a3.635,3.635,0,0,1-3.67142,3.59822l-1.52229-.01533"/>
+</svg>

server/static/res/personalize_view.svg

@@ -0,0 +1,100 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 75">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #1b75bc;
+      }
+
+      .cls-2 {
+        fill: #fff;
+      }
+
+      .cls-3 {
+        fill: #ec008c;
+      }
+
+      .cls-4 {
+        fill: #231f20;
+      }
+
+      .cls-5 {
+        fill: #f7941d;
+      }
+
+      .cls-6 {
+        fill: #a7a9ac;
+      }
+
+      .cls-7 {
+        fill: #8dc63f;
+      }
+
+      .cls-8 {
+        fill: #be1e2d;
+      }
+
+      .cls-9 {
+        fill: #00aeef;
+      }
+    </style>
+  </defs>
+  <title>Artboard 1</title>
+  <rect class="cls-1" x="43.80966" y="6.00119" width="12.56532" height="6.47899" rx="3.23949"/>
+  <circle class="cls-2" cx="53.13548" cy="9.26874" r="2.31393"/>
+  <circle class="cls-3" cx="81.65535" cy="9.26874" r="3.34465"/>
+  <g>
+    <path class="cls-4" d="M5.3986,7.25093a4.42753,4.42753,0,0,1,.83448-.07324,1.46005,1.46005,0,0,1,.97119.25732.74138.74138,0,0,1,.29394.62451.84011.84011,0,0,1-.59814.77686v.01025a.91189.91189,0,0,1,.72949.88721.95413.95413,0,0,1-.29932.70849,1.77465,1.77465,0,0,1-1.22314.33057,5.25541,5.25541,0,0,1-.7085-.042Zm.45655,1.44873h.415c.48242,0,.76611-.252.76611-.59278,0-.415-.31494-.57763-.77686-.57763a1.92933,1.92933,0,0,0-.40429.03174Zm0,1.69531a2.3895,2.3895,0,0,0,.3833.02148c.47216,0,.9082-.17334.9082-.688,0-.48291-.41455-.68213-.91357-.68213H5.85515Z"/>
+    <path class="cls-4" d="M10.5446,9.45063A1.24131,1.24131,0,0,1,9.28,10.79927,1.20752,1.20752,0,0,1,8.06218,9.49263,1.24036,1.24036,0,0,1,9.32194,8.14351,1.20269,1.20269,0,0,1,10.5446,9.45063ZM8.529,9.47651c0,.55664.32032.97657.77149.97657.4414,0,.772-.41456.772-.98682,0-.43066-.21533-.97656-.76123-.97656S8.529,8.9936,8.529,9.47651Z"/>
+    <path class="cls-4" d="M13.318,7.01509V10.0854c0,.22559.00537.48291.021.65625h-.41455l-.021-.44092h-.01026a.94.94,0,0,1-.86621.49854,1.15822,1.15822,0,0,1-1.08691-1.291,1.21563,1.21563,0,0,1,1.13916-1.36474.85.85,0,0,1,.7666.38818h.01025V7.01509ZM12.85612,9.2353a.79549.79549,0,0,0-.021-.19433.6789.6789,0,0,0-.66651-.53565c-.47754,0-.76123.41992-.76123.98194,0,.51416.252.93945.75049.93945a.69409.69409,0,0,0,.67725-.55127.78488.78488,0,0,0,.021-.19922Z"/>
+    <path class="cls-4" d="M14.24919,8.20112l.55615,1.50147c.05762.168.1211.36718.16309.51953h.01025c.04736-.15235.09961-.34668.1626-.53027l.50391-1.49073h.48828l-.69287,1.811a3.86132,3.86132,0,0,1-.87159,1.59033,1.24923,1.24923,0,0,1-.5664.29932l-.11573-.38868a1.22385,1.22385,0,0,0,.4043-.22558,1.39924,1.39924,0,0,0,.38818-.51465.33274.33274,0,0,0,.03711-.10986.40318.40318,0,0,0-.03173-.12061l-.93946-2.34131Z"/>
+  </g>
+  <rect class="cls-1" x="43.80966" y="6.00119" width="12.56532" height="6.47899" rx="3.23949"/>
+  <circle class="cls-2" cx="53.13548" cy="9.26874" r="2.31393"/>
+  <circle class="cls-3" cx="81.65535" cy="9.26874" r="3.34465"/>
+  <g>
+    <path class="cls-4" d="M5.85515,21.31977v1.48H7.56657v-1.48h.46192v3.5376H7.56657V23.19868H5.85515v1.65869H5.3986v-3.5376Z"/>
+    <path class="cls-4" d="M11.10026,23.56587A1.24146,1.24146,0,0,1,9.83561,24.915a1.20768,1.20768,0,0,1-1.21777-1.30713,1.24021,1.24021,0,0,1,1.25977-1.34863A1.2028,1.2028,0,0,1,11.10026,23.56587Zm-2.01562.02637c0,.55664.32031.97656.77148.97656.44141,0,.772-.415.772-.98682,0-.43066-.21534-.97656-.76124-.97656S9.08464,23.10933,9.08464,23.59224Z"/>
+    <path class="cls-4" d="M11.65886,24.85737c.01025-.17334.021-.43017.021-.65625v-3.0708h.45655V22.726h.01074a.946.946,0,0,1,.86572-.46679,1.13985,1.13985,0,0,1,1.0708,1.29638A1.20708,1.20708,0,0,1,12.945,24.915a.90507.90507,0,0,1-.85059-.47754h-.01562l-.021.41992Zm.47754-1.01806a.88806.88806,0,0,0,.021.168.71314.71314,0,0,0,.69287.54053c.48291,0,.77149-.394.77149-.97656,0-.50928-.26221-.94482-.75586-.94482a.73609.73609,0,0,0-.70313.56689.89836.89836,0,0,0-.02636.189Z"/>
+    <path class="cls-4" d="M14.64226,24.85737c.01025-.17334.021-.43017.021-.65625v-3.0708h.45654V22.726h.01075a.946.946,0,0,1,.86572-.46679,1.13985,1.13985,0,0,1,1.0708,1.29638A1.20709,1.20709,0,0,1,15.92839,24.915a.90507.90507,0,0,1-.85059-.47754h-.01562l-.021.41992Zm.47753-1.01806a.88806.88806,0,0,0,.021.168.71313.71313,0,0,0,.69287.54053c.48291,0,.77149-.394.77149-.97656,0-.50928-.26221-.94482-.75586-.94482a.73609.73609,0,0,0-.70313.56689.8983.8983,0,0,0-.02637.189Z"/>
+    <path class="cls-4" d="M17.778,22.31685l.55615,1.501c.05811.168.12061.36768.1626.52h.01074c.04736-.15234.09961-.34668.1626-.53027l.5039-1.49072h.48829l-.69288,1.811a3.87332,3.87332,0,0,1-.87109,1.59033,1.25636,1.25636,0,0,1-.56738.29932l-.11524-.38867a1.21978,1.21978,0,0,0,.4043-.22559,1.40115,1.40115,0,0,0,.38818-.51416.331.331,0,0,0,.03662-.11035.40324.40324,0,0,0-.03125-.12109l-.93945-2.34082Z"/>
+  </g>
+  <rect class="cls-1" x="43.80966" y="20.11682" width="12.56532" height="6.47899" rx="3.23949"/>
+  <circle class="cls-2" cx="53.13548" cy="23.38437" r="2.31393"/>
+  <circle class="cls-5" cx="81.65535" cy="23.38437" r="3.34465"/>
+  <g>
+    <path class="cls-4" d="M5.85515,35.435v1.48047H7.56657V35.435h.46192V38.9731H7.56657V37.3144H5.85515v1.6587H5.3986V35.435Z"/>
+    <path class="cls-4" d="M11.10026,37.68208a1.24131,1.24131,0,0,1-1.26465,1.34863,1.20752,1.20752,0,0,1-1.21777-1.30664A1.24037,1.24037,0,0,1,9.87761,36.375,1.2027,1.2027,0,0,1,11.10026,37.68208ZM9.08464,37.708c0,.55664.32031.97656.77148.97656.44141,0,.772-.41455.772-.98682,0-.43066-.21534-.97656-.76124-.97656S9.08464,37.22505,9.08464,37.708Z"/>
+    <path class="cls-4" d="M11.67985,37.12007c0-.26221-.00537-.47754-.021-.6875h.40429l.02051.40967h.01612a.87514.87514,0,0,1,.79785-.46729.75147.75147,0,0,1,.71923.50928h.01026a1.041,1.041,0,0,1,.28369-.33106.86676.86676,0,0,1,.56152-.17822c.33594,0,.83448.22022.83448,1.102v1.4961h-.45166V37.53462c0-.48779-.17823-.78174-.55079-.78174a.59715.59715,0,0,0-.54589.41992.76011.76011,0,0,0-.03711.231V38.9731h-.45117V37.45063c0-.4038-.17872-.69775-.53028-.69775a.63172.63172,0,0,0-.57226.46191.6434.6434,0,0,0-.03662.22559V38.9731h-.45118Z"/>
+    <path class="cls-4" d="M16.30925,37.78657a.814.814,0,0,0,.87158.88184,1.67715,1.67715,0,0,0,.70361-.13086l.07862.33056a2.05238,2.05238,0,0,1-.84522.15772,1.17977,1.17977,0,0,1-1.249-1.28125,1.233,1.233,0,0,1,1.1914-1.36963A1.07643,1.07643,0,0,1,18.11,37.57173a1.81233,1.81233,0,0,1-.01563.21484Zm1.35449-.33056a.65747.65747,0,0,0-.64063-.75049.76576.76576,0,0,0-.70849.75049Z"/>
+  </g>
+  <rect class="cls-6" x="43.80966" y="34.23246" width="12.56532" height="6.47899" rx="3.23949"/>
+  <circle class="cls-2" cx="47.00823" cy="37.5" r="2.31393"/>
+  <circle class="cls-7" cx="81.65535" cy="37.5" r="3.34465"/>
+  <g>
+    <path class="cls-4" d="M7.23063,51.42964H5.85515V52.705H7.38786v.3833H5.3986V49.55024H7.30925v.3833H5.85515v1.11817H7.23063Z"/>
+    <path class="cls-4" d="M7.96257,51.2353c0-.2622-.00537-.47754-.021-.6875h.40918l.02637.41992h.01025a.93369.93369,0,0,1,.83985-.47753c.352,0,.89795.21.89795,1.08105v1.51709H9.66325V51.624c0-.40966-.15234-.75048-.58789-.75048a.65631.65631,0,0,0-.61963.47216.66339.66339,0,0,0-.03125.21534v1.52734H7.96257Z"/>
+    <path class="cls-4" d="M11.40739,49.81831v.72949H12.069v.35156h-.66162v1.37012c0,.31494.08936.49365.34668.49365a1.02994,1.02994,0,0,0,.26758-.03173l.021.34619a1.12112,1.12112,0,0,1-.40918.06347.641.641,0,0,1-.499-.19433.94393.94393,0,0,1-.17822-.66162V50.89936h-.394V50.5478h.394v-.60888Z"/>
+    <path class="cls-4" d="M12.81218,51.90181a.814.814,0,0,0,.87158.88183,1.67715,1.67715,0,0,0,.70361-.13086l.07862.33057a2.05258,2.05258,0,0,1-.84522.15771,1.17977,1.17977,0,0,1-1.249-1.28125,1.233,1.233,0,0,1,1.1914-1.36962A1.07643,1.07643,0,0,1,14.613,51.687a1.81272,1.81272,0,0,1-.01563.21485Zm1.35449-.33057a.65747.65747,0,0,0-.64063-.75049.76577.76577,0,0,0-.70849.75049Z"/>
+    <path class="cls-4" d="M15.18181,51.34028c0-.29883-.00537-.55615-.021-.79248h.4043l.01562.49854h.021a.762.762,0,0,1,.70312-.55615.51016.51016,0,0,1,.13135.01562v.43555a.70988.70988,0,0,0-.15723-.01563.6479.6479,0,0,0-.61962.59326,1.3229,1.3229,0,0,0-.021.21485v1.35449h-.45654Z"/>
+    <path class="cls-4" d="M17.5778,49.81831v.72949h.66162v.35156H17.5778v1.37012c0,.31494.08936.49365.34668.49365a1.02994,1.02994,0,0,0,.26758-.03173l.021.34619a1.12216,1.12216,0,0,1-.40967.06347.64064.64064,0,0,1-.49854-.19433.94155.94155,0,0,1-.17822-.66162V50.89936h-.39355V50.5478h.39355v-.60888Z"/>
+    <path class="cls-4" d="M20.16374,53.08833l-.03711-.32031H20.111a.94529.94529,0,0,1-.77686.37793.724.724,0,0,1-.77686-.7295c0-.61425.5459-.95019,1.52735-.94482v-.05225a.52359.52359,0,0,0-.57715-.58789,1.26587,1.26587,0,0,0-.66113.18848l-.10547-.3042a1.57993,1.57993,0,0,1,.835-.22558c.77685,0,.96582.52978.96582,1.03906v.95019a3.55479,3.55479,0,0,0,.042.60889Zm-.06836-1.29639c-.50391-.01074-1.07617.07862-1.07617.57178a.40918.40918,0,0,0,.43555.44141.63159.63159,0,0,0,.61425-.4253.4885.4885,0,0,0,.02637-.147Z"/>
+    <path class="cls-4" d="M21.798,49.83394a.2859.2859,0,0,1-.57178,0,.28133.28133,0,0,1,.28857-.28858A.27389.27389,0,0,1,21.798,49.83394Zm-.51416,3.25439V50.5478h.46191v2.54053Z"/>
+    <path class="cls-4" d="M22.51091,51.2353c0-.2622-.00537-.47754-.021-.6875h.40918l.02637.41992h.01074a.93368.93368,0,0,1,.83984-.47753c.35157,0,.89747.21.89747,1.08105v1.51709h-.46192V51.624c0-.40966-.15234-.75048-.58789-.75048a.65585.65585,0,0,0-.61963.47216.66339.66339,0,0,0-.03125.21534v1.52734h-.46191Z"/>
+    <path class="cls-4" d="M25.42058,51.2353c0-.2622-.00538-.47754-.021-.6875h.40381l.02148.40967h.01563a.87515.87515,0,0,1,.79785-.46728.7504.7504,0,0,1,.71875.50927h.01074a1.05221,1.05221,0,0,1,.2832-.331.86909.86909,0,0,1,.562-.17822c.33593,0,.83447.22021.83447,1.102v1.49609h-.45117V51.64985c0-.48779-.17871-.78174-.55127-.78174a.59715.59715,0,0,0-.5459.41993.76065.76065,0,0,0-.03662.231v1.56934h-.45166V51.56587c0-.40381-.17822-.69776-.53028-.69776a.68993.68993,0,0,0-.60888.6875v1.53272h-.45117Z"/>
+    <path class="cls-4" d="M30.05046,51.90181a.8134.8134,0,0,0,.87109.88183,1.67294,1.67294,0,0,0,.70313-.13086l.0791.33057a2.05447,2.05447,0,0,1-.84522.15771,1.18014,1.18014,0,0,1-1.24951-1.28125,1.23332,1.23332,0,0,1,1.1919-1.36962,1.07642,1.07642,0,0,1,1.0498,1.19677,1.69487,1.69487,0,0,1-.01611.21485Zm1.354-.33057a.65737.65737,0,0,0-.64013-.75049.76622.76622,0,0,0-.709.75049Z"/>
+    <path class="cls-4" d="M32.4196,51.2353c0-.2622-.00537-.47754-.021-.6875h.40918l.02637.41992h.01025a.9337.9337,0,0,1,.83985-.47753c.352,0,.898.21.898,1.08105v1.51709h-.46192V51.624c0-.40966-.15234-.75048-.58789-.75048a.65631.65631,0,0,0-.61963.47216.66339.66339,0,0,0-.03125.21534v1.52734H32.4196Z"/>
+    <path class="cls-4" d="M35.86442,49.81831v.72949H36.526v.35156h-.66162v1.37012c0,.31494.08936.49365.34668.49365a1.02994,1.02994,0,0,0,.26758-.03173l.021.34619a1.12112,1.12112,0,0,1-.40918.06347.64106.64106,0,0,1-.499-.19433.94393.94393,0,0,1-.17822-.66162V50.89936h-.394V50.5478h.394v-.60888Z"/>
+  </g>
+  <rect class="cls-1" x="43.80966" y="48.34809" width="12.56532" height="6.47899" rx="3.23949"/>
+  <circle class="cls-2" cx="53.13548" cy="51.61563" r="2.31393"/>
+  <circle class="cls-8" cx="81.65535" cy="51.61563" r="3.34465"/>
+  <g>
+    <path class="cls-4" d="M5.97624,67.20454l-.89795-3.53809H5.5612l.41992,1.79c.105.44141.19971.88184.2627,1.22266h.01025c.05811-.35156.168-.77148.28858-1.22754l.47265-1.78516h.47754l.43067,1.7959c.0996.41992.19433.83985.24658,1.21192h.01025c.07373-.38867.17334-.78223.28369-1.22266l.46729-1.78516h.46679L8.39567,67.20454H7.91813l-.44628-1.84277a10.77444,10.77444,0,0,1-.231-1.1543H7.23063a11.11184,11.11184,0,0,1-.27294,1.1543l-.50391,1.84277Z"/>
+    <path class="cls-4" d="M11.9445,65.91352a1.24141,1.24141,0,0,1-1.26514,1.34864,1.20779,1.20779,0,0,1-1.21777-1.30664,1.241,1.241,0,0,1,1.25977-1.34961A1.2032,1.2032,0,0,1,11.9445,65.91352Zm-2.01562.02637c0,.55567.32031.97559.772.97559.44043,0,.77148-.41406.77148-.98633,0-.43066-.21533-.97656-.76123-.97656S9.92888,65.45649,9.92888,65.93989Z"/>
+    <path class="cls-4" d="M12.52409,65.45649c0-.29882-.00537-.55664-.021-.793h.4038l.01612.499h.021a.76256.76256,0,0,1,.70313-.55664.48779.48779,0,0,1,.13135.0166v.43555a.68042.68042,0,0,0-.15772-.01563.64737.64737,0,0,0-.61914.59277,1.27134,1.27134,0,0,0-.021.21485v1.35449h-.45654Z"/>
+    <path class="cls-4" d="M14.716,65.82954h.01025c.06348-.08984.15234-.19922.22607-.28906l.74512-.877h.55664l-.98193,1.04493,1.11816,1.49609h-.56152l-.87647-1.21777-.23632.26269v.95508h-.45655V63.478H14.716Z"/>
+  </g>
+  <rect class="cls-1" x="43.80966" y="62.46372" width="12.56532" height="6.47899" rx="3.23949"/>
+  <circle class="cls-2" cx="53.13548" cy="65.73126" r="2.31393"/>
+  <circle class="cls-9" cx="81.65535" cy="65.73126" r="3.34465"/>
+</svg>

server/static/res/watchface.svg

@@ -0,0 +1,61 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 473.42255 469.30275">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+
+      .cls-2, .cls-3, .cls-4, .cls-5, .cls-6 {
+        fill: none;
+        stroke-linecap: round;
+        stroke-width: 20px;
+      }
+
+      .cls-2 {
+        stroke: #21409a;
+      }
+
+      .cls-2, .cls-4, .cls-5, .cls-6 {
+        stroke-miterlimit: 10;
+      }
+
+      .cls-3 {
+        stroke: #92278f;
+        stroke-linejoin: round;
+      }
+
+      .cls-4 {
+        stroke: #ee2a7b;
+      }
+
+      .cls-5 {
+        stroke: #00aeef;
+      }
+
+      .cls-6 {
+        stroke: #39b54a;
+      }
+
+      .cls-7 {
+        fill: #fbb040;
+      }
+
+      .cls-8 {
+        fill: #454da1;
+      }
+    </style>
+  </defs>
+  <title>Artboard 1</title>
+  <g id="background">
+    <circle class="cls-1" cx="237.48192" cy="234.48624" r="203.12844"/>
+  </g>
+  <g id="Layer_1" data-name="Layer 1">
+    <path class="cls-2" d="M100.10931,128.61269a174.61778,174.61778,0,0,1,32.93776-32.07842"/>
+    <path class="cls-3" d="M236.62631,409.45124A173.63773,173.63773,0,0,1,78.53868,164.03335"/>
+    <path class="cls-4" d="M384.6971,326.51445a174.40847,174.40847,0,0,1-29.53382,36.16634"/>
+    <path class="cls-5" d="M376.28793,132.73488a174.0403,174.0403,0,0,1,30.9287,135.45127q-1.41985,7.53807-3.47937,14.83668"/>
+    <path class="cls-6" d="M213.06279,63.846a173.34913,173.34913,0,0,1,148.19464,51.16884"/>
+    <circle class="cls-7" cx="303.91311" cy="150.88991" r="29.17431"/>
+    <circle class="cls-8" cx="271.54614" cy="309.09174" r="14.97248"/>
+  </g>
+</svg>

server/template/base_navigation.html

@@ -0,0 +1,11 @@
+
+<div class="navigation" id="navigation">
+    <a href="/"><div class='primeblue'>Longitude</div></a>
+    <div class="navigation_rightside">
+        <a href="/login">Log In</a>
+        <a href="/register">Sign up</a>
+    </div>
+    <a href="javascript:void(0);" class="icon" onclick="menuBars()">
+        <i class="fa fa-bars"></i>
+    </a>
+</div>

server/template/calendar.html

@@ -2,18 +2,32 @@
 {% block body%}
 
 <div class="container">
-    <div style="width: 15rem; margin: 1rem">Calendar</div>
+    <div style="width: 4rem;margin:1rem;"></div>
-    <div style="width: 10rem; margin: 1rem; padding-right: 5rem">Show on device</div>
+    <div style="width: 10rem; margin: 1rem; font-weight: bold">Calendar</div>
-    <div style="width: 2rem; margin: 1rem">Color</div>
+    <div style="display: inline-flex">
+        <div style="width: 5rem; margin: 1rem; padding-right: 1rem;font-weight: bold">Show on device</div>
+        <div style="width: 2rem; margin: 1rem;font-weight: bold">Color</div>
+    </div>
 </div>
 
     {% for item in calendars %}
-    <div class="container">
+    <div class="container" style="margin-top: 1.5rem">
+        <!--action button-->
+        {% if "ical" == item.calType %} 
+        <div style="width: 4rem; margin: 1rem;">
+            <form action="" method="post">
+                <input type="hidden" name="calendar" value={{ item.calendarId }}>
+                <input type="submit" name="submit" value="Remove">
+            </form> 
+        </div>
+        {% else %}
+        <div style="width: 4rem; margin: 1rem;"></div>
+        {% endif %}
         <!--Name-->
-        <div style="width: 15rem; margin: 1rem;">{{ item.name }}</div>
+        <div style="width: 10rem; margin-left: 1rem; margin-right: 1rem; margin-top: 0.5rem">{{ item.name }}</div>
-
+        <div style="display: inline-flex">
         <!--Toggle-->
-        <div style="width: 10rem; margin: 1rem; padding-right: 5rem">
+        <div style="width: 5rem; margin-left: 1rem; margin-right: 1rem; margin-top: 0.5rem; padding-right: 1rem">
             <!-- Rounded switch -->
             <label class="switch">
                 <input class="toggle" id={{item.calendarId}} type="checkbox" toggled={{item.toggle}} onclick="toggleReaction(this)">
@@ -22,22 +36,38 @@
         </div>
 
         <!--Color Selector-->
-        <div style="width: 2rem; margin: 1rem;">
+        <div style="width: 2rem; margin-left: 1rem; margin-right: 1rem; margin-top: 0.5rem">
         <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 }} />
             </svg--> 
         </div>
+        </div>
         
     </div>
     {% endfor %}
     <div id=calendars class="container">
-        <a class="button" href="login/google">Google Calendar</a>
-        <a class="button" href="#" >Nextcloud Calendar</a>
     </div>
-    <div class="container">
+    <form action="" method="post">
-        <a class="button addcalendar" href="/login/google" style="width: auto; margin: 4rem">Add Calendar</a>
+    <div class="container grey" style="margin-top: 3rem;">
+        <div>{{ form.hidden_tag() }}</div>
+        <div style="display: flex">
+        <div style="margin: 1rem">{{ form.calName.label }}</div>
+        <div style="margin: 1rem">{{ form.calName(size=24) }}</div>
+        </div>
+        <div style="display: flex">
+        <div style="margin: 1rem">{{ form.iCalURL.label }}</div>
+        <div style="margin: 1rem">{{ form.iCalURL(size=24) }}</div>
+        </div>
+        <div style="with: 8rem; margin: 1rem">{{ form.submit() }}</div>
+        {% for error in form.iCalURL.errors %}
+        <span style="color: red;">[{{ error }}]</span>
+        {% endfor %}
     </div> 
+    </form>
+    <!--div class="container">
+        <a class="button addcalendar" href="/login/google" style="width: auto; margin: 4rem">Add Calendar</a>
+    </div--> 
 
 <script type="text/javascript">
     

server/template/devices.html

@@ -34,9 +34,9 @@
     <form action="" method="post">
     <div class="container grey" style="margin-top: 3rem;">
         <div>{{ form.hidden_tag() }}</div>
-        <div style="width: 7rem; margin: 1rem">{{ form.deviceName.label }}</div>
+        <div style="margin: 1rem">{{ form.deviceName.label }}</div>
-        <div style="width: 12rem; margin: 1rem">{{ form.deviceName(size=24) }}</div>
+        <div style="margin: 1rem">{{ form.deviceName(size=24) }}</div>
-        <div style="with: 7rem; margin: 1rem">{{ form.submit() }}</div>
+        <div style="with: 8rem; margin: 1rem">{{ form.submit() }}</div>
         {% for error in form.deviceName.errors %}
         <span style="color: red;">[{{ error }}]</span>
         {% endfor %}

server/template/footer.html

@@ -1,7 +1,7 @@
 
 <div id="footer">
 
-    <div class="footer">
+    <div class="footer container">
         <p>made by Raphael Maenle </p>  
         <p><a href="mailto:raphael@maenle.net">raphael@maenle.net</a></p>
       <p><a href="/privacy">privacy policy</a></p>

server/template/login.html

@@ -2,6 +2,8 @@
 
 {% block content %}
 
+{% include "base_navigation.html" %}
+
 <div class="banner">
     <h1 class="title">Longitude</h1>
     <h5> A calendar watchface</h5>

server/template/privacy.html

@@ -7,7 +7,7 @@
 </div>
 
 <h3 style="margin-left:10rem">Summary</h3>
-<div style="margin-left:10rem; margin-right:10rem;">This Privacy Statement descibes how Longitude handles your data and how the developer makes sure, that the users information remains as secure as possible.
+<div style="margin-left:10rem; margin-right:10rem;">This Privacy Statement describes how Longitude handles your data and how the developer makes sure, that the user's information remains as secure as possible.
 This application does not share any user information with third parties and takes care to only save the minimum amount of information about the user.
 The following chapters cover all essential points of interest about which information is saved and when it is removed from the server.
 If you have any further questions or suggestions, please email us at <a href="mailto:raphael@maenle.net">raphael@maenle.net</a>.</div>
@@ -15,7 +15,7 @@ If you have any further questions or suggestions, please email us at <a href="ma
 
 <h3 style="margin-left:10rem">What Information is saved?</h3>
 <div style="margin-left:10rem; margin-right:10rem;">
-Longitude Calendar saves as little information about their users as possible. The application handles sensitive information only when directly prompted by the user or a device associated with the user. The service only provides this information to the user or a device associated with the user. The data saved in the Longidute Databas is
+Longitude Calendar saves as little information about their users as possible. The application handles sensitive information only when directly prompted by the user or a device associated with the user. The service only provides this information to the user or a device associated with the user. The data saved in the Longidute Database is
 <ul>
     <li>Username and hashed password or alternatively</li>
     <li>Google Username and  Id with Google Login Token</li>

server/template/register.html

@@ -1,7 +1,25 @@
 {% extends "base.html" %}
 
+
 {% block content %}
-    <h1>Register</h1>
+
+{% include "base_navigation.html" %}
+
+    <!--Google Login-->
+    <div class="center-align">
+    <div class="col s12 m6 offset-m3 center-align"  style=" margin: 5px;">
+        <a class="oauth-container btn darken-4 white black-text" href="/login/google" style="text-transform:none">
+            <div class="left">
+                <img width="20px" style="margin-top:7px; margin-right:8px" alt="Google sign-in" 
+                    src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/512px-Google_%22G%22_Logo.svg.png" />
+            </div class="login_google">
+            <div class="login_google">Register with Google</div>
+        </a>
+    </div>
+    <div class="container">
+    <div class=login_email>Register with Email</div>
+    </div>
+    <div class="container">
     <form action="" method="post">
         {{ form.hidden_tag() }}
         <p>
@@ -34,4 +52,11 @@
         </p>
         <p>{{ form.submit() }}</p>
     </form>
-{% endblock %}
+
+    </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 %}

server/template/sidebar.html

@@ -39,6 +39,8 @@
                 // content here
                 {% endblock %}
 
+          </div>
+          <div id="main">
           </div>
           {% include "footer.html" %}
     </div>

server/template/startpage.html

@@ -0,0 +1,48 @@
+{% 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: 3.2rem; vertical-align:middle; padding-Bottom: 0.1rem'/> Calendar...-->
+            Connect your 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-->
+            ..with your Tizen Watchface
+        </div>
+        <img class="image" src='/static/res/watchface.svg'/>
+    </div>
+</div>
+<div class="whiteblock vertical">
+    <div class="content">
+            <img class="image" src='/static/res/connect_calendar.svg'/>
+            <div class="text">1, Connect your Calendar Service to Longitude</div>
+    </div>
+    <div class="content">
+            <img class="image" src='/static/res/connect_device.svg'/>
+            <div class="text">2, Connect the Longitude Watch app to Longitude Web</div>
+    </div>
+    <div class="content">
+            <img class="image" src='/static/res/personalize_view.svg'/>
+            <div class="text">3, Customize your Content and Style</div>
+    </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 %}

wsgi.ini

@@ -0,0 +1,13 @@
+# uwsgi --socket 0.0.0.0:8084 -w wsgi:application --protocol=http
+
+[uwsgi]
+module = wsgi:application
+protocol = http
+master = true
+processes = 5
+
+socket = 0.0.0.0:8084
+
+die-on-term = true
+
+