raphael/calendarwatch_frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

adds a landing page which gives an overview of the tool

Browse Source 
- 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
This commit is contained in:
Raphael Maenle 2020-06-06 20:02:18 +02:00
parent 0f47ff15dd
commit 39b899283c
13 changed files with 324 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
backend

@ -1 +1 @@
Subproject commit 183bf60fc089c76a9f1b9e9fde31d02b910d11a6 Subproject commit 1a5700e9a0bdc404d0d2a49898dba78d872b53e8

2
server/googleHandler.py
View File

@ -161,6 +161,8 @@ def fetchCalendarEvents(user, calendars, startDate, endDate):
def fetchCalendars(): def fetchCalendars():
# get client api service # get client api service
if current_user.google_token == None:
return [], None, None
client_token = GC.build_credentials(current_user.google_token.token, client_token = GC.build_credentials(current_user.google_token.token,
current_user.google_token.refresh_token) current_user.google_token.refresh_token)
credentials = google.oauth2.credentials.Credentials(**client_token) credentials = google.oauth2.credentials.Credentials(**client_token)

28
server/routes.py
View File

@ -26,27 +26,39 @@ from database.models import User, Calendar, Device, GoogleToken
os.environ['OAUTHLIB_INSECURE_TRANSPORT'] = '1' os.environ['OAUTHLIB_INSECURE_TRANSPORT'] = '1'
@app.route("/") @app.route("/")
def account(): def startpage():
return flask.redirect('account') return flask.render_template('startpage.html')
@app.route("/privacy") @app.route("/privacy")
def privacy(): def privacy():
return flask.render_template('privacy.html') return flask.render_template('privacy.html')
@app.route("/account") @app.route("/login")
def index(): def login():
if current_user.is_authenticated: if current_user.is_authenticated:
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() gCalendars, colors, token = google.fetchCalendars()
current_user.google_token.token = token if token != None:
db.session.commit() current_user.google_token.token = token
backend.updateCalendars(current_user, gCalendars, colors) db.session.commit()
calendars.extend(gCalendars)
backend.updateCalendars(current_user, calendars, colors)
return (flask.render_template('account.html', return (flask.render_template('account.html',
username = current_user.username, email = current_user.email, profile_img=current_user.profile_pic username = current_user.username, email = current_user.email, profile_img=current_user.profile_pic
) )
) )
else: else:
return flask.render_template('login.html') return redirect(url_for("login"))
@app.route("/view") @app.route("/view")
def view(): def view():

61
server/static/css/main.css
View File

@ -3,9 +3,8 @@ html,
body body
{ {
font-family: "Trebuchet MS", Helvetica, sans-serif; font-family: "Trebuchet MS", Helvetica, sans-serif;
margin: 0.5rem;
padding: 0; padding: 0;
height: calc(100% - 1rem) height: calc(100% - 0.5rem)
} }
#container { #container {
@ -31,15 +30,55 @@ body
.banner { .banner {
display:flex; display:flex;
justify-content: center; justify-content: center;
margin: 5rem;
align-items:center; align-items:center;
background-color: orange;
height: 20rem;
flex-direction: column; flex-direction: column;
margin-bottom: 10rem; }
.subtitle {
color: #333;
text-align: center;
margin: 1rem;
}
.primeblue {
color: #1b75bc;
} }
.title { .title {
color: blue; font-size: 5rem;
font-weight: bold;
text-align: center;
margin: 1rem;
}
.grayblock {
background-color: #ddd;
align-items: center;
justify-content: center;
}
.grayblock .padded {
padding: 3rem;
}
.horizontal {
display: flex;
flex-wrap: wrap;
}
.horizontal .content {
font-size: 2rem;
text-align: center;
}
.horizontal .image {
margin: 1rem;
margin-left: 4rem;
margin-right: 4rem;
height: 30rem;
border-radius: 1rem;
width: auto;
} }
.logins { .logins {
@ -82,14 +121,20 @@ body
/* top navigation */ /* top navigation */
.navigation { .navigation {
background-color: orange; background-color: #eaeaea;
overflow: hidden; overflow: hidden;
margin: auto;
display: flex;
}
.navigation_rightside {
margin-left: auto;
} }
.navigation a { .navigation a {
float: left; float: left;
display: flex; display: flex;
color: #f2f2f2; color: #333;
text-align: center; text-align: center;
padding: 14px 16px; padding: 14px 16px;
text-decoration: none; text-decoration: none;

12
server/static/res/arrow.svg Executable file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 602 B

102
server/static/res/calendar.svg Executable file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 7.1 KiB

BIN
server/static/res/googlelogo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.8 KiB

BIN
server/static/res/tizenlogo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

61
server/static/res/watchface.svg Executable file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

11
server/template/base_navigation.html Normal file
View File

@ -0,0 +1,11 @@
<div class="navigation" id="navigation">
<a href="/"><div class='primeblue'>Longidute</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>

2
server/template/login.html
View File

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

27
server/template/register.html
View File

@ -1,7 +1,25 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block content %} {% 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 action="" method="post">
{{ form.hidden_tag() }} {{ form.hidden_tag() }}
<p> <p>
@ -34,4 +52,11 @@
</p> </p>
<p>{{ form.submit() }}</p> <p>{{ form.submit() }}</p>
</form> </form>
</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 %} {% endblock %}

33
server/template/startpage.html Normal file
View File

@ -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 %}