Skip to content

Commit 4aec56c

Browse files
committed
github sign up added and responsive css updated
1 parent 89c46ad commit 4aec56c

File tree

8 files changed

+224
-162
lines changed

8 files changed

+224
-162
lines changed

main.py

Lines changed: 22 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
import google.oauth2.id_token
99

1010
#Enable running on local dev environment
11+
#Always comment lines 12 and 13 before running on the cloud, otherwise the app will NOT work
1112
os.environ.setdefault("GCLOUD_PROJECT", "ad-364515")
1213
os.environ["GOOGLE_APPLICATION_CREDENTIALS"] = (r"C:\Users\matth\Desktop\AdLocalCoursework\venv\application_default_credentials.json")
1314

@@ -53,11 +54,7 @@ def root():
5354

5455
if id_token:
5556
try:
56-
# Verify the token against the Firebase Auth API. This example
57-
# verifies the token on each page load. For improved performance,
58-
# some applications may wish to cache results in an encrypted
59-
# session store (see for instance
60-
# http://flask.pocoo.org/docs/1.0/quickstart/#sessions).
57+
# Verify the token against the Firebase Auth API
6158
claims = google.oauth2.id_token.verify_firebase_token(
6259
id_token, firebase_request_adapter)
6360

@@ -79,42 +76,25 @@ def home():
7976
def about():
8077
return render_template('about.html')
8178

82-
@app.route('/register')
83-
def register():
84-
return render_template('register.html')
85-
86-
@app.route('/login')
87-
def login():
88-
return render_template('login.html')
89-
90-
# [END form]
91-
# [START submitted]
92-
93-
@app.route('/submitted', methods=['POST'])
94-
def submitted_form():
95-
name = request.form['name']
96-
email = request.form['email']
97-
site = request.form['site_url']
98-
comments = request.form['comments']
99-
# [END submitted]
100-
# [START render_template]
101-
return render_template(
102-
'submitted_form.html',
103-
name=name,
104-
email=email,
105-
site=site,
106-
comments=comments)
107-
# [END render_template]
108-
109-
@app.errorhandler(500)
110-
def server_error(e):
111-
# Log the error and stacktrace.
112-
logging.exception('An error occurred during a request.')
113-
return 'An internal error occurred.', 500
114-
115-
@app.errorhandler(404)
116-
def page_not_found(error):
117-
return render_template('404.html'), 404
79+
@app.route('/games')
80+
def games():
81+
return render_template('games.html')
82+
83+
@app.route('/account')
84+
def account():
85+
# Verify Firebase auth.
86+
id_token = request.cookies.get("token")
87+
error_message = None
88+
claims = None
89+
90+
if id_token:
91+
try:
92+
claims = google.oauth2.id_token.verify_firebase_token(
93+
id_token, firebase_request_adapter)
94+
95+
except ValueError as exc:
96+
error_message = str(exc)
97+
return render_template('account.html', user_data=claims)
11898

11999
if __name__ == '__main__':
120100
# This is used when running locally only. When deploying to Google App
@@ -125,4 +105,4 @@ def page_not_found(error):
125105
# the "static" directory. See:
126106
# http://flask.pocoo.org/docs/1.0/quickstart/#static-files. Once deployed,
127107
# App Engine itself will serve those files as configured in app.yaml.
128-
app.run(host='127.0.0.1', port=8080, debug=True)
108+
app.run(host='0.0.0.0', port=5000, debug=True)

static/custom.css

Lines changed: 93 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,37 @@ body {
77
background-color: black;
88
max-width: 100%;
99
overflow-x: hidden;
10+
position: relative
1011
}
1112
p {
12-
font-size: 1.2em;
13+
font-size: 1.2em;
14+
color: white;
1315
}
16+
#sign-out{
17+
position: absolute;
18+
right: 2.5rem;
19+
top: 1rem;
20+
cursor: pointer;
21+
}
22+
.glyphicon.glyphicon-log-out {
23+
font-size: 30px;
24+
color: greenyellow;
25+
}
26+
.glyphicon.glyphicon-log-out:hover {
27+
font-size: 30px;
28+
color: red;
29+
}
1430
.starter-template {
1531
text-align: center;
1632
margin: 0;
1733
padding: 0;
1834
width: 100%;
1935
}
36+
.conentDiv{
37+
width: 100%;
38+
position: absolute;
39+
left: 0;
40+
}
2041
.topDiv-home{
2142
text-align: center;
2243
}
@@ -27,6 +48,7 @@ p {
2748
}
2849
.topDiv-home p{
2950
color: white;
51+
max-height: 100%;
3052
}
3153
.topDiv-home a{
3254
color: greenyellow;
@@ -40,40 +62,49 @@ p {
4062
display: flex;
4163
margin-top: 5rem;
4264
margin-bottom: 10rem;
65+
width: 100%;
4366
}
4467
.mainDiv-home-pic {
45-
flex: 2;
68+
flex: 3;
69+
margin-left: 5rem;
70+
max-height: 100%;
4671
}
4772
.mainDiv-home-text {
4873
flex: 1;
4974
padding-right: 15rem;
5075
padding-left: 3rem;
51-
padding-top: 1rem;
52-
padding-bottom: 3rem;
76+
padding-top: 15rem;
77+
padding-bottom: 15rem;
5378
margin-right: -10rem;
5479
background-color: rgb(40, 41, 43);
5580
color: white;
5681
align-self: center;
82+
margin-top: 10rem;
83+
margin-bottom: 10rem;
5784
}
58-
.mainDiv-home-text h1{
85+
.mainDiv-home-text h1 {
5986
font-weight: bold;
6087
}
6188
.mainDiv-home-pic-2 {
62-
flex: 2;
89+
flex: 3;
90+
max-height: 100%;
91+
margin-right: 5rem;
6392
}
6493
.mainDiv-home-text-2 {
6594
flex: 1;
6695
padding-left: 15rem;
6796
padding-right: 3rem;
68-
padding-top: 1rem;
69-
padding-bottom: 3rem;
97+
padding-top: 15rem;
98+
padding-bottom: 15rem;
7099
margin-left: -10rem;
71100
background-color: rgb(40, 41, 43);
72101
color: white;
73102
align-self: center;
74103
text-align: right;
75-
}
76-
.mainDiv-home-text h1{
104+
margin-top: 10rem;
105+
margin-bottom: 10rem;
106+
}
107+
.mainDiv-home-text-2 h1 {
77108
font-weight: bold;
78109
}
79110
.secondDiv-home {
@@ -106,8 +137,8 @@ p {
106137
font-weight: bold;
107138
}
108139
.coverImage {
109-
width: 100%;
110-
height: 100%;
140+
max-width: 100%;
141+
max-height: 100%;
111142
}
112143
.navbar {
113144
-webkit-border-radius: 0;
@@ -119,28 +150,28 @@ p {
119150
-moz-box-shadow: 0px 9px 8px -4px rgba(0,0,0,0.48);
120151
box-shadow: 0px 9px 8px -4px rgba(0,0,0,0.48);
121152
}
122-
.navbar .collapse ul li a {
153+
.navbar .container-fluid ul li a {
123154
color: rgb(255, 255, 255);
124155
font-size: 15;
125156
font-weight: bold;
126157
}
127-
.navbar .collapse ul .active .navlink {
158+
.navbar .container-fluid ul .active .navlink {
128159
background-color: rgb(83, 79, 77);
129160
color: rgb(255, 255, 255);
130161
font-size: 15;
131162
font-weight: bold;
132163
}
133-
.navbar .collapse .navbar-header .navbar-brand {
164+
.navbar .container-fluid .navbar-header .navbar-brand {
134165
color: rgb(255, 255, 255);
135166
background-repeat: no-repeat;
136-
padding-left:10px;
137-
padding-right:10px;
167+
padding-left: 20px;
168+
padding-right: 5px;
138169
font-family: 'Exo';
139170
font-size: 40px;
140171
transform: skew(-15deg);
141172
letter-spacing: 0.01em;
142173
}
143-
.navbar .collapse .navbar-header .navbar-brand-sub {
174+
.navbar .container-fluid .navbar-header .navbar-brand-sub {
144175
font-family: 'Mr Dafoe';
145176
font-size: 20px;
146177
color: white;
@@ -153,8 +184,51 @@ p {
153184
text-decoration: underline;
154185
text-decoration-color: white;
155186
}
156-
.navbar .collapse ul {
187+
.navbar .container-fluid ul {
157188
position: relative;
158189
left: 50%;
159190
transform: translatex(-50%);
160191
}
192+
@media screen and (max-width: 770px) {
193+
body {
194+
background-color: black;
195+
}
196+
.nav {
197+
display: none;
198+
}
199+
.conentDiv{
200+
display: none;
201+
}
202+
}
203+
@media (max-width: 1500px) {
204+
.topContainer-home{
205+
max-width: 100%;
206+
}
207+
.mainDiv-home-text {
208+
flex: 1;
209+
padding-top: 5rem;
210+
padding-bottom: 5rem;
211+
margin-top: 5rem;
212+
margin-bottom: 5rem;
213+
font-size: 10px;
214+
215+
}
216+
.mainDiv-home-text-2 {
217+
flex: 1;
218+
padding-top: 5rem;
219+
padding-bottom: 5rem;
220+
margin-top: 5rem;
221+
margin-bottom: 5rem;
222+
font-size: 10px;
223+
}
224+
.mainDiv-home-pic {
225+
flex: 2;
226+
max-height: 100%;
227+
font-size: 10px;
228+
}
229+
.mainDiv-home-pic-2 {
230+
flex: 2;
231+
max-height: 100%;
232+
font-size: 10px;
233+
}
234+
}

static/index.css

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ h1 {
2222
transform: skew(-15deg);
2323
letter-spacing: 0.01em;
2424
margin-top: -5px;
25-
margin-bottom: -80px;
25+
margin-bottom: -80px;
2626
}
2727
.brand-sub{
2828
font-family: 'Mr Dafoe';
@@ -35,18 +35,13 @@ h1 {
3535
text-decoration: underline;
3636
text-decoration-color: white;
3737
text-align: center;
38+
margin-bottom: 0;
3839
}
3940
.firebaseui-container {
4041
background-color: rgb(40, 41, 43);
41-
position: absolute !important;
42-
top: 25%;
43-
-ms-transform: translateY(-50%);
44-
transform: translateY(-50%);
45-
margin: 0;
46-
left: 50%;
47-
-ms-transform: translateX(-50%);
48-
transform: translateX(-50%);
49-
padding-top: 15px;
42+
margin: auto;
43+
margin-top: 8px;
44+
padding: 1rem;
5045
}
5146
.firebaseui-button {
5247
background-color: rgb(62, 63, 66) !important;

templates/account.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{% extends "base.html" %}
2+
{% set active_page = "account" %}
3+
{% block body %}
4+
<p>{{ user_data['name'] }}</p>
5+
{% endblock %}

templates/base.html

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,10 @@
1515
</head>
1616
<!-- Jinja2 stuff related to generating nav and setting active state. Add more pages here! -->
1717
{% set navigation_bar = [('/home', 'home', 'Home'), ('/about', 'about', 'About')] -%}
18-
{% set navigation_bar_right = [('/register', 'register', 'Sign Up'), ('/login', 'login', 'Login')] -%}
18+
{% set navigation_bar_right = [('/games', 'games', 'Games'), ('/account', 'account', 'Account')] -%}
1919
<body>
2020
<nav class="navbar navbar-inverse">
21-
<div class="collapse navbar-collapse">
21+
<div class="container-fluid">
2222
<ul class="nav navbar-nav">
2323
{% for href, id, caption in navigation_bar %}
2424
{% if id == active_page %}
@@ -45,6 +45,7 @@
4545
</ul>
4646
</div>
4747
</nav>
48+
<a id="sign-out" hidden=true onclick="signOut()"><span class="glyphicon glyphicon-log-out"></span></a>
4849
<main role="main" class="container">
4950
<!-- Content -->
5051
{% block body %}
@@ -57,7 +58,6 @@
5758
<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>
5859
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
5960
<script src="https://www.gstatic.com/firebasejs/8.9.0/firebase-app.js"></script>
60-
6161
<script src="https://www.gstatic.com/firebasejs/8.9.0/firebase-auth.js"></script>
6262

6363
<!-- TODO: Add SDKs for Firebase products that you want to use
@@ -87,5 +87,11 @@
8787
}
8888
});
8989
</script>
90+
<script>
91+
function signOut(){
92+
firebase.auth().signOut();
93+
window.location.href = "/";
94+
}
95+
</script>
9096
</body>
9197
</html>

templates/games.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{% extends "base.html" %}
2+
{% set active_page = "games" %}
3+
{% block body %}
4+
<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>
5+
{% endblock %}

0 commit comments

Comments
 (0)