From b505f4413b39236ca244dcac52a298bf6c3ce014 Mon Sep 17 00:00:00 2001 From: Photon-Aiden <87028152+Photon-Aiden@users.noreply.github.com> Date: Tue, 6 Dec 2022 20:03:21 -0500 Subject: [PATCH 1/2] Reformatting and fixes Fixed bolding issues, alignment, general styling, added CSS vars --- assets/styles/login.css | 73 ++++++++++++-------------------------- assets/styles/register.css | 58 ++++++++++++++++-------------- 2 files changed, 55 insertions(+), 76 deletions(-) diff --git a/assets/styles/login.css b/assets/styles/login.css index 1709eeb..f68b4b6 100644 --- a/assets/styles/login.css +++ b/assets/styles/login.css @@ -1,6 +1,13 @@ html, body { margin: 0; padding: 0; + --Standard-Element-Width: 284px; + --Standard-Element-Height: 28px; + --Input-Offset: 24px; + + --Gray1: rgba(95, 95, 95, 1); + --White1: rgba(217, 217, 217, 1); + --Aqua1: rgba(16, 185, 129, 1); } .login-login { @@ -10,7 +17,6 @@ html, body { position: relative; align-items: center; flex-shrink: 0; - border-color: var(--dl-color-gray-black); border-width: 0; margin: 0; flex-direction: column; @@ -38,10 +44,9 @@ html, body { height: auto; font-size: 40px; align-self: stretch; - font-style: Display Bold; text-align: center; font-family: Noto Sans; - font-weight: 700; + font-weight: 1000; line-height: normal; font-stretch: normal; margin-right: 0; @@ -51,9 +56,9 @@ html, body { .login-textinput { flex: initial; - color: rgba(95, 95, 95, 1); - width: 284px; - height: 28px; + color: var(--Gray1); + width: calc(var(--Standard-Element-Width) - var(--Input-Offset)); + height: var(--Standard-Element-Height); font-size: 12px; margin-top: 0; text-align: left; @@ -63,30 +68,12 @@ html, body { border-radius: 10px; margin-bottom: 10px; padding: 15px 15px 15px 9px; - background-color: rgba(217, 217, 217, 1); -} - -.login-textinput1 { - flex: initial; - color: rgba(95, 95, 95, 1); - width: 284px; - height: 28px; - font-size: 12px; - margin-top: 0; - text-align: left; - font-family: Noto Sans; - border-style: hidden; - border-width: 0px; - border-radius: 10px; - margin-bottom: 10px; - padding: 15px 15px 15px 9px; - text-transform: capitalize; - background-color: rgba(217, 217, 217, 1); + background-color: var(--White1); } .login-login-button { - width: 284px; - height: 28px; + width: var(--Standard-Element-Width); + height: var(--Standard-Element-Height); display: flex; overflow: hidden; position: relative; @@ -95,7 +82,7 @@ html, body { border-color: transparent; border-radius: 10px; margin-bottom: 10px; - background-color: rgba(16, 185, 129, 1); + background-color: var(--Aqua1); } .login-text2 { @@ -107,10 +94,9 @@ html, body { position: absolute; font-size: 12px; align-self: auto; - font-style: SemiBold; text-align: center; font-family: Noto Sans; - font-weight: 600; + font-weight: 700; line-height: normal; font-stretch: normal; margin-right: 0; @@ -118,34 +104,21 @@ html, body { text-decoration: none; } -.login-text4 { - color: rgba(16, 185, 129, 1); +.login-text3 { + color: var(--Aqua1); height: auto; font-size: 12px; align-self: auto; - font-style: SemiBold; text-align: center; font-family: Noto Sans; - font-weight: 600; + font-weight: 700; line-height: normal; font-stretch: normal; margin-right: 0; - margin-bottom: 10px; + margin-bottom: 0; text-decoration: none; } -.login-text6 { - color: rgba(16, 185, 129, 1); - height: auto; - font-size: 12px; - align-self: auto; - font-style: SemiBold; - text-align: center; - font-family: Noto Sans; - font-weight: 600; - line-height: normal; - font-stretch: normal; - margin-right: 0; - margin-bottom: 0; - text-decoration: none; -} \ No newline at end of file +.login-margin { + margin-bottom: 10px; +} diff --git a/assets/styles/register.css b/assets/styles/register.css index d19081f..d73e9fe 100644 --- a/assets/styles/register.css +++ b/assets/styles/register.css @@ -1,7 +1,16 @@ html, body { margin: 0; padding: 0; + + --Standard-Element-Width: 284px; + --Standard-Element-Height: 28px; + --Input-Offset: 24px; + + --Gray1: rgba(95, 95, 95, 1); + --White1: rgba(217, 217, 217, 1); + --Aqua1: rgba(16, 185, 129, 1); } + .register-register { width: 100%; height: 100vh; @@ -34,10 +43,9 @@ html, body { height: auto; font-size: 40px; align-self: stretch; - font-style: Display Bold; text-align: center; font-family: Noto Sans; - font-weight: 700; + font-weight: 1000; line-height: normal; font-stretch: normal; margin-right: 0; @@ -55,9 +63,9 @@ html, body { } .register-textinput { - color: rgba(95, 95, 95, 1); - width: 284px; - height: 28px; + color: var(--Gray1); + width: var(--Standard-Element-Width); + height: var(--Standard-Element-Height); font-size: 12px; align-self: center; text-align: left; @@ -70,13 +78,13 @@ html, body { margin-bottom: 10px; padding-right: 15px; padding-bottom: 15px; - background-color: rgba(217, 217, 217, 1); + background-color: var(--White1); } .register-textinput1 { - color: rgba(95, 95, 95, 1); - width: 284px; - height: 28px; + color: var(--Gray1); + width: var(--Standard-Element-Width); + height: var(--Standard-Element-Height); font-size: 12px; align-self: center; text-align: left; @@ -89,13 +97,13 @@ html, body { margin-bottom: 10px; padding-right: 15px; padding-bottom: 15px; - background-color: rgba(217, 217, 217, 1); + background-color: var(--White1); } .register-textinput2 { - color: rgba(95, 95, 95, 1); - width: 284px; - height: 28px; + color: var(--Gray1); + width: var(--Standard-Element-Width); + height: var(--Standard-Element-Height); font-size: 12px; align-self: center; text-align: left; @@ -108,13 +116,13 @@ html, body { margin-bottom: 10px; padding-right: 15px; padding-bottom: 15px; - background-color: rgba(217, 217, 217, 1); + background-color: var(--White1); } .register-textinput3 { - color: rgba(95, 95, 95, 1); - width: 284px; - height: 28px; + color: var(--Gray1); + width: var(--Standard-Element-Width); + height: var(--Standard-Element-Height); font-size: 12px; align-self: center; text-align: left; @@ -127,12 +135,12 @@ html, body { margin-bottom: 10px; padding-right: 15px; padding-bottom: 15px; - background-color: rgba(217, 217, 217, 1); + background-color: var(--White1); } .register-login-button { - width: 284px; - height: 28px; + width: calc(var(--Standard-Element-Width) + var(--Input-Offset)); + height: var(--Standard-Element-Height); display: flex; overflow: hidden; position: relative; @@ -141,7 +149,7 @@ html, body { flex-shrink: 0; border-color: transparent; border-radius: 10px; - background-color: rgba(16, 185, 129, 1); + background-color: var(--Aqua1); } .register-text2 { @@ -150,24 +158,22 @@ html, body { height: auto; font-size: 12px; align-self: center; - font-style: SemiBold; text-align: center; font-family: Noto Sans; - font-weight: 600; + font-weight: 700; line-height: normal; font-stretch: normal; text-decoration: none; } .register-text4 { - color: rgba(16, 185, 129, 1); + color: var(--Aqua1); height: auto; font-size: 12px; align-self: center; - font-style: SemiBold; text-align: center; font-family: Noto Sans; - font-weight: 600; + font-weight: 700; line-height: normal; font-stretch: normal; margin-right: 0; From 1f716cc6a1b84e6198dadf3f6045f1434cd5cc4d Mon Sep 17 00:00:00 2001 From: Photon-Aiden <87028152+Photon-Aiden@users.noreply.github.com> Date: Tue, 6 Dec 2022 21:08:47 -0500 Subject: [PATCH 2/2] Completed Leaderboard.html requires {{name}} template now for the welcome message at the top right corner. See line 13 in leaderboard.html. --- assets/styles/leaderboard.css | 92 ++++++++++++++++++++++++++++++++++- html/login.html | 6 +-- templates/leaderboard.html | 45 +++++++++-------- templates/level.html | 34 ++++++------- 4 files changed, 136 insertions(+), 41 deletions(-) diff --git a/assets/styles/leaderboard.css b/assets/styles/leaderboard.css index 4f605ae..9552859 100644 --- a/assets/styles/leaderboard.css +++ b/assets/styles/leaderboard.css @@ -1,4 +1,94 @@ +body, html { + --Gray1: rgba(95, 95, 95, 1); + --Gray2: rgba(63, 63, 63, 1); + --White1: rgba(217, 217, 217, 1); + --White2: rgba(239, 238, 238, 1); + --Aqua1: rgba(16, 185, 129, 1); + + --Text-Header: rgb(8, 133, 102); + + background-color: var(--Gray2); +} + #table td { text-align: center; vertical-align: middle; -} \ No newline at end of file +} + +.logout { + float: right; + color: var(--Aqua1); + height: auto; + font-size: 24px; + align-self: auto; + text-align: right; + font-family: Noto Sans; + font-weight: 700; + line-height: normal; + font-stretch: normal; + margin-right: 20px; + margin-bottom: 0; + text-decoration: none; +} + +.logout a { + color: var(--Aqua1); + text-decoration: none; +} + +.logout-span { + color: var(--White2) +} + +.navLinks { + display: inline-block; + text-align: center; + color: var(--Aqua1); + height: auto; + font-size: 24px; + align-self: auto; + font-family: Noto Sans; + font-weight: 700; + line-height: normal; + font-stretch: normal; + margin: 5px 5px 0; + text-decoration: none; + background-color: var(--White2); + border-radius: 30px; + padding: 5px 40px; +} + +.navContain1 { + margin-left: calc(50% - 155.98px); +} + +h2 { + text-align: center; + font-weight: 1000; + font-size: 3rem; + color: var(--White2); +} + +table { + margin-left: auto; + margin-right: auto; + background-color: var(--White2); + border-radius: 60px; + width: 95vw; + height: auto; + font-family: Noto Sans; +} + +table th { + color: var(--Text-Header); + font-size: 2rem; + font-weight: 1000; + padding: 10px; +} + +table td { + color: var(--Gray1); + font-size: 1.2rem; + font-weight: 1000; + padding: 10px; +} diff --git a/html/login.html b/html/login.html index a6130a3..02961a6 100644 --- a/html/login.html +++ b/html/login.html @@ -28,13 +28,13 @@ required name="password" id="password" - class="login-textinput1 input" + class="login-textinput input" /> - Register - Forgot Password? + Register + Forgot Password? diff --git a/templates/leaderboard.html b/templates/leaderboard.html index e25cb19..d18632e 100644 --- a/templates/leaderboard.html +++ b/templates/leaderboard.html @@ -4,29 +4,34 @@ Leaderboard + -Home -Level -Logout -
-

Level {{ level }} Leaderboard

-
- - - - - - - - {% for entry in entries %} + Home + Level +
+ Welcome, {{name}}! +
+ Logout +
+
+

Level {{ level }} Leaderboard

+
+
RankNameMedian Execution TimeMean Execution Time
- - - - + + + + - {% endfor %} -
{{loop.index}}{{entry.name}}{{entry.median}}{{entry.mean}}RankNameMedian Execution TimeMean Execution Time
+ {% for entry in entries %} + + {{loop.index}} + {{entry.name}} + {{entry.median}} + {{entry.mean}} + + {% endfor %} + \ No newline at end of file diff --git a/templates/level.html b/templates/level.html index eacea00..9c941fe 100644 --- a/templates/level.html +++ b/templates/level.html @@ -7,23 +7,23 @@ -Home -Leaderboard -Logout -
-

Description

-

{{desc}}

-
- - - - + Home + Leaderboard + Logout
- -
+

Description

+

{{desc}}

+
+ + + + +
+ +
\ No newline at end of file