Overhauled and standardized most pages' visuals + fixed quiz page to work with DB

[alexchen2]

Changes Made:

• Overhauled or tweaked the design of a majority of pages (quiz, login, register, lesson) so as to flow better thematically and have a more modern look; you can access the designs through your browser here.
  • Edited pages were also redesigned to be responsive, if necessary; the position/sizing of elements on the page will therefore change dynamically depending on your device screen/browser window's size.
    • ~There is a bug with the login and register pages where the fixed-position BG circles will cover the main login form box, if the screen is small enough. I'm not sure how to fix this issue (z-index doesn't seem to work), so odds are, the page may be edited in the future to remove these circles all together on mobile-sized screens.~ (fixed in update below)
  • The register page includes a minor additional edit to the HTML file adding a label switch that currently doesn't do anything; this is in anticipation of the additions made in #117, which introduced the idea of the toggle button for different roles and will include its JS functionality with the rest of the page.
  • Grouped CSS attributes/properties shared between common classes within the login and register page into one CSS file: authPage.css. Unique attributes for each of the two pages still remain within the separate CSS files, login.css and register.css.
• Fixed the quiz page and its main.py endpoint to properly render data from the database (previously, hardcoded placeholder data was being shown and variables referencing the DB were incorrect).
  • Included logic so that if the respective quiz id requested is not found, then the hardcoded placeholder data from before will be autogenerated within the database and sent to the quiz page. Only one or two of these placeholder quizzes will exist in the database at one time, so there is no risk of cluttering up the database.
  • Included a "pagination"-like feature between quiz questions with next and previous buttons, so that not all questions are rendered at once on the page—this helps to declutter the page a bit, while relieving the user from the hassle of scrolling through a large block of text.
• Added a new local Figma file (which you can open on the website/desktop app to edit on your own account) featuring the new designs alongside the old ones.
• Added a link to the Quizzes button in the header to a placeholder quiz, just so that there's a temporary way of accessing a quiz for now.

Disclaimers/Things to Note:

• No changes were made to the dashboard and profile pages; these will need to be finished later.
  • I did not do a dashboard design, since there were many tickets from other team members that could have modified the design in the dashboard.css and dashboard.html files significantly (#107, #114). Overall though, only minimal changes should be needed to tweak the design and make it match the other pages (border/shadow/color/font edits).
  • The profile page wasn't touched at all, since the page's design is incomplete as a whole and I wasn't sure about the direction we'd want to take with that page.
• As such, a follow-up PR will have to be made later that adds in similar styling to the dashboard and profile pages, alongside other pages still in review from other PRs (e.g. teacher dashboard, contact page, etc.)

---

Further Additions (03-09-2024):

• Added a dropdown profile menu that dynamically displays the user's info (name, username, email, google-like default profile picture) when they are logged in; it primarily contains links for the profile page, badge page, and sign out functionality.
  • Moved the badges header link to the profile submenu (grouped due to its close association with personal user info).
  • Adjusted the profile menu button to display properly on a smaller mobile screen (<= 991px) within the right side offcanvas menu.
  • Added a profile picture with randomized dark background colours for each user for every session (although if another user doesn't log in between the first's sessions, the colour will remain the same).
• Modified the endpoints in main.py so that when calling render_template(), all common logged-in user info is passed as a single unpacked dictionary returnLoggedInData (this helps with conciseness, while reducing the chance of bugs arising from forgetting to pass jinja variables).
• Renamed registerNew.css to register.css and moved the old CSS file to a separate folder.
• Modified the login and register page to be more responsive for mobile devices.
  • Made it so that the pages' background circles would disappear when the screen size becomes less than 1000px wide (to prevent any overlap with the main form container).
• Added support for proper email format regex checks during registration (using a similar regex to what HTML5 uses for email inputs).
  • As such, an appropriate error was added that pops up during registration if the user enters in an email with an invalid format.
• Made a small method change for sessionStorage for user_profile.html...? (not sure if sessionStorage.includes() is a valid method for sessionStorage)
• Removed redundant font declarations in dashboard.css (they were also messing with the profile menu fonts as well).
• Updated the local Figma file to reflect the new header profile menu additions.

[alexchen2]

Primary reviewer is @cenesdeveloper

[alexchen2]

Enes has a lot on his plate this week and will not be able to review the PR, so I'm changing the primary reviewer to @racheldennis

[skydonline]

There are a lot of merge conflicts to be resolved

[alexchen2]

It's probably related to some changes I made to condense repetitive render_template() current_user arguments into a single dictionary; as a result, future endpoints added to main.py only require you to instantiate and unpack a dict, as opposed to adding a slew of arguments inside every render_template() where forgetting one arg will cause the server to throw a hissy fit. I'll just quickly deal with the conflicts, it shouldn't be a big deal I think

[alexchen2]

Please don't merge this yet, it seems like some genius recently decided to commit a bunch of old files (at least from 1-2 months ago) to the main repo and now everything appears to be broken. Will look into if there's an quick and easy fix for this

[alexchen2]

Will merge this for now. I'll create a separate PR with server bug fixes as well as fixing the entire login system to actually function properly, since there are a couple of concerning issues with this like:

• "Logging out" through profile actually never logged you out; even if you pressed the logout button, you'd still be able to visit private pages only available to logged-in users (and vice versa, where logged in users can access the login/register pages).
• Someone recently threw an unknown enumerate function in dashboard.html Jinja syntax, causing the entire page to crash... Jinja doesn't have enumerate, only Python does
• Teachers are never actually logged in; instead, students with the same autogenerated primary key id are logged in instead to the teacher dashboard