adds template structure

app.py

@@ -42,7 +42,9 @@ GOOGLE_DISCOVERY_URL = (
     "https://accounts.google.com/.well-known/openid-configuration"
 )
 # Flask app setup
-app = Flask(__name__)
+app = Flask(__name__,
+            static_folder='static',
+            template_folder='template')
 app.secret_key = os.environ.get("SECRET_KEY") or os.urandom(24)
 
 # User session management setup
@@ -66,27 +68,43 @@ def load_user(user_id):
     return User.get(user_id)
 
 @app.route("/")
+def account():
+    return flask.redirect('account')
+
+@app.route("/account")
 def index():
     if current_user.is_authenticated:
-        return (
+        return (flask.render_template('account.html',
-            "<p>Hello, {}! You're logged in! Email: {}</p>"
+            username = current_user.name, email = current_user.email, profile_img=current_user.profile_pic
-            "<div><p>Google Profile Picture:</p>"
-            '<img src="{}" alt="Google profile pic"></img></div>'
-            '<a class="button" href="/logout">Logout</a>'
-            '<a class="button" href="/test">test API</a>'.format(
-                current_user.name, current_user.email, current_user.profile_pic
             )
         )
     else:
-        return '<a class="button" href="/login">Google Login</a>'
+        return flask.render_template('login.html')
 
 def get_google_provider_cfg():
     return requests.get(GOOGLE_DISCOVERY_URL).json()
 
+class Calendar:
+    def __init__(self, name, color):
+        self.name = name
+        self.color = color
+
+@app.route("/calendar")
+def calendar():
+    ca1 = Calendar("Hightower", "#30ff30")
+    ca2 = Calendar("Toast", "#66e230")
+    calendars = [ca1, ca2]
+    return flask.render_template('calendar.html', calendars=calendars)
+
+
+
+
+
+
 @app.route('/test')
 def test_api_request():
   if 'credentials' not in flask.session:
-    return flask.redirect('login')
+    return flask.redirect('login/google')
 
   # Load credentials from the session.
   credentials = google.oauth2.credentials.Credentials(
@@ -102,7 +120,7 @@ def test_api_request():
 
   return flask.jsonify(todaysCal)
 
-@app.route("/login")
+@app.route("/login/google")
 def login():
 
     '''
@@ -140,12 +158,9 @@ def login():
     # Store the state so the callback can verify the auth server response.
     flask.session['state'] = state
 
-    print("auth_url: " + authorization_url)
-    print("state: " + state)
-
     return flask.redirect(authorization_url)
 
-@app.route("/login/callback")
+@app.route("/login/google/callback")
 def callback():
     # Specify the state when creating the flow in the callback so that it can
     # verified in the authorization server response.

template/account.html

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

template/calendar.html

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

template/login.html

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

template/sidebar.html

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