github sign up added and responsive css updated

Author: mattlee24

main.py

@@ -8,6 +8,7 @@
 import google.oauth2.id_token
 
 #Enable running on local dev environment
+#Always comment lines 12 and 13 before running on the cloud, otherwise the app will NOT work
 os.environ.setdefault("GCLOUD_PROJECT", "ad-364515")
 os.environ["GOOGLE_APPLICATION_CREDENTIALS"] = (r"C:\Users\matth\Desktop\AdLocalCoursework\venv\application_default_credentials.json")
 
@@ -53,11 +54,7 @@ def root():
 
     if id_token:
         try:
-            # Verify the token against the Firebase Auth API. This example
-            # verifies the token on each page load. For improved performance,
-            # some applications may wish to cache results in an encrypted
-            # session store (see for instance
-            # http://flask.pocoo.org/docs/1.0/quickstart/#sessions).
+            # Verify the token against the Firebase Auth API
             claims = google.oauth2.id_token.verify_firebase_token(
                 id_token, firebase_request_adapter)
 
@@ -79,42 +76,25 @@ def home():
 def about(): 
  return render_template('about.html') 
 
-@app.route('/register') 
-def register(): 
- return render_template('register.html') 
-
-@app.route('/login') 
-def login(): 
- return render_template('login.html') 
-
-# [END form] 
-# [START submitted]
-
-@app.route('/submitted', methods=['POST']) 
-def submitted_form(): 
- name = request.form['name'] 
- email = request.form['email'] 
- site = request.form['site_url'] 
- comments = request.form['comments'] 
- # [END submitted]
- # [START render_template]
- return render_template( 
- 'submitted_form.html', 
- name=name, 
- email=email, 
- site=site, 
- comments=comments) 
- # [END render_template]
-
-@app.errorhandler(500) 
-def server_error(e): 
- # Log the error and stacktrace.
- logging.exception('An error occurred during a request.') 
- return 'An internal error occurred.', 500
-
-@app.errorhandler(404) 
-def page_not_found(error): 
- return render_template('404.html'), 404
+@app.route('/games') 
+def games(): 
+ return render_template('games.html') 
+
+@app.route('/account') 
+def account(): 
+     # Verify Firebase auth.
+    id_token = request.cookies.get("token")
+    error_message = None
+    claims = None
+
+    if id_token:
+        try:
+            claims = google.oauth2.id_token.verify_firebase_token(
+                id_token, firebase_request_adapter)
+
+        except ValueError as exc:
+            error_message = str(exc)
+    return render_template('account.html', user_data=claims) 
 
 if __name__ == '__main__':
     # This is used when running locally only. When deploying to Google App
@@ -125,4 +105,4 @@ def page_not_found(error):
     # the "static" directory. See:
     # http://flask.pocoo.org/docs/1.0/quickstart/#static-files. Once deployed,
     # App Engine itself will serve those files as configured in app.yaml.
-    app.run(host='127.0.0.1', port=8080, debug=True)
+    app.run(host='0.0.0.0', port=5000, debug=True)

static/custom.css

@@ -7,16 +7,37 @@ body {
     background-color: black;
     max-width: 100%;
     overflow-x: hidden;
+    position: relative
 }
 p { 
-    font-size: 1.2em;   
+    font-size: 1.2em;
+    color: white;   
 } 
+#sign-out{
+    position: absolute;
+    right: 2.5rem;
+    top: 1rem;
+    cursor: pointer;
+}
+.glyphicon.glyphicon-log-out {
+    font-size: 30px;
+    color: greenyellow;
+}
+.glyphicon.glyphicon-log-out:hover {
+    font-size: 30px;
+    color: red;
+}
 .starter-template { 
     text-align: center; 
     margin: 0;
     padding: 0;
     width: 100%;
 }
+.conentDiv{
+    width: 100%;
+    position: absolute;
+    left: 0;
+}
 .topDiv-home{
     text-align: center;
 }
@@ -27,6 +48,7 @@ p {
 }
 .topDiv-home p{
     color: white;
+    max-height: 100%;
 }
 .topDiv-home a{
     color: greenyellow;
@@ -40,40 +62,49 @@ p {
     display: flex;
     margin-top: 5rem;
     margin-bottom: 10rem;
+    width: 100%;
 }
 .mainDiv-home-pic {
-    flex: 2;
+    flex: 3;
+    margin-left: 5rem;
+    max-height: 100%;
 }
 .mainDiv-home-text {
     flex: 1;
     padding-right: 15rem;
     padding-left: 3rem;
-    padding-top: 1rem;
-    padding-bottom: 3rem;
+    padding-top: 15rem;
+    padding-bottom: 15rem;
     margin-right: -10rem;
     background-color: rgb(40, 41, 43);
     color: white;
     align-self: center;
+    margin-top: 10rem;
+    margin-bottom: 10rem;
 }
-.mainDiv-home-text h1{
+.mainDiv-home-text h1 {
     font-weight: bold;
 }
 .mainDiv-home-pic-2 {
-    flex: 2;
+    flex: 3;
+    max-height: 100%;
+    margin-right: 5rem;
 }
 .mainDiv-home-text-2 {
     flex: 1;
     padding-left: 15rem;
     padding-right: 3rem;
-    padding-top: 1rem;
-    padding-bottom: 3rem;
+    padding-top: 15rem;
+    padding-bottom: 15rem;
     margin-left: -10rem;
     background-color: rgb(40, 41, 43);
     color: white;
     align-self: center;
     text-align: right;
-}
-.mainDiv-home-text h1{
+    margin-top: 10rem;
+    margin-bottom: 10rem;
+} 
+.mainDiv-home-text-2 h1 {
     font-weight: bold;
 }
 .secondDiv-home {
@@ -106,8 +137,8 @@ p {
     font-weight: bold;
 }
 .coverImage {
-    width: 100%;
-    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
 }
 .navbar {
     -webkit-border-radius: 0;
@@ -119,28 +150,28 @@ p {
     -moz-box-shadow: 0px 9px 8px -4px rgba(0,0,0,0.48);
     box-shadow: 0px 9px 8px -4px rgba(0,0,0,0.48);
 }
-.navbar .collapse ul li a {
+.navbar .container-fluid ul li a {
     color: rgb(255, 255, 255);
     font-size: 15;
     font-weight: bold;
 }
-.navbar .collapse ul .active .navlink {
+.navbar .container-fluid ul .active .navlink {
     background-color: rgb(83, 79, 77);
     color: rgb(255, 255, 255);
     font-size: 15;
     font-weight: bold;
 }
-.navbar .collapse .navbar-header .navbar-brand {
+.navbar .container-fluid .navbar-header .navbar-brand {
     color: rgb(255, 255, 255);
     background-repeat: no-repeat;
-    padding-left:10px;
-    padding-right:10px;
+    padding-left: 20px;
+    padding-right: 5px; 
     font-family: 'Exo';
     font-size: 40px;
     transform: skew(-15deg);
     letter-spacing: 0.01em;
 }
-.navbar .collapse .navbar-header .navbar-brand-sub {
+.navbar .container-fluid .navbar-header .navbar-brand-sub {
     font-family: 'Mr Dafoe';
     font-size: 20px;
     color: white;
@@ -153,8 +184,51 @@ p {
     text-decoration: underline;
     text-decoration-color: white;    
 }
-.navbar .collapse ul {
+.navbar .container-fluid ul {
     position: relative;
     left: 50%;
     transform: translatex(-50%);
 }
+@media screen and (max-width: 770px) {
+    body {
+        background-color: black;
+    }
+    .nav {
+        display: none;
+    }
+    .conentDiv{
+        display: none;
+    }
+}
+@media (max-width: 1500px) {
+    .topContainer-home{
+        max-width: 100%;
+    }
+    .mainDiv-home-text {
+        flex: 1;
+        padding-top: 5rem;
+        padding-bottom: 5rem;
+        margin-top: 5rem;
+        margin-bottom: 5rem;
+        font-size: 10px;
+
+    }
+    .mainDiv-home-text-2 {
+        flex: 1;
+        padding-top: 5rem;
+        padding-bottom: 5rem;
+        margin-top: 5rem;
+        margin-bottom: 5rem;
+        font-size: 10px;
+    } 
+    .mainDiv-home-pic {
+        flex: 2;
+        max-height: 100%;
+        font-size: 10px;
+    }
+    .mainDiv-home-pic-2 {
+        flex: 2;
+        max-height: 100%;
+        font-size: 10px;
+    }
+}

static/index.css

@@ -22,7 +22,7 @@ h1 {
     transform: skew(-15deg);
     letter-spacing: 0.01em;
     margin-top: -5px;
-    margin-bottom: -80px;
+    margin-bottom: -80px; 
 }
 .brand-sub{
     font-family: 'Mr Dafoe';
@@ -35,18 +35,13 @@ h1 {
     text-decoration: underline;
     text-decoration-color: white;
     text-align: center;
+    margin-bottom: 0;
 }
 .firebaseui-container {
     background-color: rgb(40, 41, 43);
-    position: absolute !important;
-    top: 25%;
-    -ms-transform: translateY(-50%);
-    transform: translateY(-50%);
-    margin: 0;
-    left: 50%;
-    -ms-transform: translateX(-50%);
-    transform: translateX(-50%);
-    padding-top: 15px;
+    margin: auto;
+    margin-top: 8px;
+    padding: 1rem;
 }
 .firebaseui-button {
     background-color: rgb(62, 63, 66) !important;

templates/account.html

@@ -0,0 +1,5 @@
+{% extends "base.html" %} 
+{% set active_page = "account" %} 
+{% block body %}
+<p>{{ user_data['name'] }}</p>
+{% endblock %} 

templates/base.html

@@ -15,10 +15,10 @@
     </head>
     <!-- Jinja2 stuff related to generating nav and setting active state. Add more pages here! -->
     {% set navigation_bar = [('/home', 'home', 'Home'), ('/about', 'about', 'About')] -%} 
-    {% set navigation_bar_right = [('/register', 'register', 'Sign Up'), ('/login', 'login', 'Login')] -%} 
+    {% set navigation_bar_right = [('/games', 'games', 'Games'), ('/account', 'account', 'Account')] -%} 
     <body>
         <nav class="navbar navbar-inverse">
-            <div class="collapse navbar-collapse">
+            <div class="container-fluid">
                 <ul class="nav navbar-nav">
                     {% for href, id, caption in navigation_bar %} 
                     {% if id == active_page %} 
@@ -45,6 +45,7 @@
                 </ul>
             </div>
         </nav>    
+        <a id="sign-out" hidden=true onclick="signOut()"><span class="glyphicon glyphicon-log-out"></span></a>
         <main role="main" class="container">
             <!-- Content -->
             {% block body %} 
@@ -57,7 +58,6 @@
         <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
         <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
         <script src="https://www.gstatic.com/firebasejs/8.9.0/firebase-app.js"></script>
-
         <script src="https://www.gstatic.com/firebasejs/8.9.0/firebase-auth.js"></script>
 
     <!-- TODO: Add SDKs for Firebase products that you want to use
@@ -87,5 +87,11 @@
             }
         });
         </script>
+        <script>
+            function signOut(){
+                firebase.auth().signOut();
+                window.location.href = "/";
+            }
+        </script>
     </body>    
 </html>

templates/games.html

@@ -0,0 +1,5 @@
+{% extends "base.html" %} 
+{% set active_page = "games" %} 
+{% block body %} 
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis lorem rhoncus, condimentum massa eget, semper sapien. Suspendisse vitae magna venenatis, iaculis odio eu, cursus neque. Vivamus imperdiet sapien velit, nec venenatis dolor laoreet in. Phasellus dictum ac felis eget lacinia. Vivamus porttitor magna justo, vitae mattis nisi fermentum ut. Curabitur vehicula augue erat, quis pellentesque risus tristique tempus. Nullam tempor purus massa, sollicitudin suscipit massa pretium sed. Maecenas ut dui nec nulla tristique malesuada nec quis nibh. Sed nibh sapien, tempor finibus rhoncus sit amet, gravida at eros. Nunc tempor lacinia eros non euismod. Sed maximus leo hendrerit, lacinia massa vel, tincidunt metus. Quisque magna lorem, sollicitudin nec dictum at, finibus quis felis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse non ullamcorper libero. Aliquam erat volutpat.</p>
+{% endblock %}