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

adds template structure

Browse Source
This commit is contained in:
Raphael Maenle
2020-04-10 09:53:25 +00:00
parent bcb3b1bbac
commit 53a1f201f8
5 changed files with 150 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
template/account.html Normal file
View File

@@ -0,0 +1,8 @@
{% extends "sidebar.html" %}
{% block body%}
<p>Hello, {{ username }}! You're logged in! Email: {{email}}</p>
<div><p>Google Profile Picture:</p>
<img src={{ profile_img }} alt="Google profile pic"></img></div>
<a class="button" href="/logout">Logout</a>
<a class="button" href="/test">test API</a>
{% endblock %}

35
template/calendar.html Normal file
View File

@@ -0,0 +1,35 @@
{% extends "sidebar.html" %}
{% block body%}
<div>
<div style="width: 30%; float: left" align="center" >Calendar</div>
<div style="width: 30%; float: left" align="center">Show on device</div>
<div style="width: 30%; float: left" align="center">Color</div>
</div>
<div style="margin-top: 50px">
{% for item in calendars %}
<div style="width: 30%; float: left" align="center" >{{ item.name }}</div>
<div style="width: 30%; float: left" align="center">
<!-- Rounded switch -->
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div style="width: 30%; float: left" align="center">
<div>
<input type="color" id="head" name="head"
value="#e66465">
<label for="head">Test</label>
</div>
<!--svg height="20" width="20">
<circle cx="10" cy="10" r="10" stroke="black" stroke-width="0" fill={{ item.color }} />
</svg-->
</div>
{% endfor %}
</div>
{% endblock %}

46
template/login.html Normal file
View File

@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="/static/css/main.css">
<title>Index</title>
</head>
<body>
<h1 style="color: blue">Login Page</h1>
<!--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">Login with Google</div>
</a>
</div>
<!--Email Login-->
<div class="col s12 m6 offset-m3 center-align" style=" margin: 5px;">
<a class="oauth-container btn darken-4 white black-text" href="/login/email" style="text-transform:none">
<div class="left">
<img width="20px" style="margin-top:7px; margin-right:8px" alt="E-mail sign-in"
src="http://assets.stickpng.com/thumbs/585e4bf3cb11b227491c339a.png" />
</div>
<div class="login_email">Login with Email</div>
</a>
</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>
</body>
</html>

31
template/sidebar.html Normal file
View File

@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="/static/css/main.css">
<title>Index</title>
</head>
<body>
<!-- Side navigation -->
<div class="sidenav">
<a href="/view">View</a>
<a href="/calendar">Calendar</a>
<a href="/account">Account</a>
<a href="/devices">Devices</a>
</div>
<!-- Page content -->
<div class="main">
{% block body %}
// content here
{% endblock %}
</div>
</body>
</html>