From f762e743c0e3c62d7ef6b664a9fafd565d437015 Mon Sep 17 00:00:00 2001
From: Toddeh Alexander <56146543+toddehalexander@users.noreply.github.com>
Date: Sun, 17 Dec 2023 20:21:08 -0800
Subject: [PATCH] Delete profile directory

---
 profile/login.html    | 365 -------------------------
 profile/profile.html  | 610 ------------------------------------------
 profile/register.html | 442 ------------------------------
 profile/reset.html    | 396 ---------------------------
 4 files changed, 1813 deletions(-)
 delete mode 100644 profile/login.html
 delete mode 100644 profile/profile.html
 delete mode 100644 profile/register.html
 delete mode 100644 profile/reset.html
diff --git a/profile/login.html b/profile/login.html
deleted file mode 100644
index 3afe7e2..0000000
--- a/profile/login.html
+++ /dev/null
@@ -1,365 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7990188983460307"
-     crossorigin="anonymous"></script>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width" , initial-scale="1.0">
-    <title> Login </title>
-    <!-- The link below is used for formatting the website and uses a CDN to get the framework for building the website. -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
-        integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous" />
-    <!-- The link below is a CDN that is written in JavaScript that contains a library of crypto standards. -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"> </script>
-    <style>
-        :root {
-            --clr-body-bg: #333;
-            --clr-text: hsl(0, 0%, 100%);
-            --clr-heading: hsl(0 0% 25%);
-        }
-
-        body {
-            /* To be able to bring all of the input buttons to the center of the page. */
-            /* Make the high and width equal to the viewport and the margins to 0 pixels. */
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-            align-items: center;
-            margin: 0px;
-            font-family: Consolas, monaco, monospace;
-            background: var(--clr-body-bg);
-        }
-
-        html,
-        body {
-            height: 100%;
-            margin: 0;
-            padding: 0;
-            font-family: Consolas, monaco, monospace;
-            background: var(--clr-body-bg);
-            color: var(--clr-text);
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-
-        }
-
-        .mb-3 {
-            color: hsl(0 0% 25%);
-            font-family: Consolas, monaco, monospace;
-        }
-
-
-        .pink {
-            --clr-body-bg: hsl(310 50% 90%);
-            --clr-card-bg: hsl(310 50% 100%);
-            --clr-text: hsl(310 50% 15%);
-            --clr-heading: hsl(310 50% 25%);
-        }
-
-        .blue {
-            --clr-body-bg: hsl(209 50% 90%);
-            --clr-card-bg: hsl(209 50% 100%);
-            --clr-text: hsl(209 50% 15%);
-            --clr-heading: hsl(209 50% 25%);
-        }
-
-        .green {
-            --clr-body-bg: hsl(109 50% 90%);
-            --clr-card-bg: hsl(109 50% 100%);
-            --clr-text: hsl(109 50% 15%);
-            --clr-heading: hsl(109 50% 25%);
-        }
-
-        :root:has(#pink:checked) {
-            --clr-body-bg: hsl(310 50% 90%);
-            --clr-card-bg: hsl(310 50% 100%);
-            --clr-text: hsl(310 50% 15%);
-            --clr-heading: hsl(310 50% 25%);
-        }
-
-        :root:has(#blue:checked) {
-            --clr-body-bg: hsl(209 50% 90%);
-            --clr-card-bg: hsl(209 50% 100%);
-            --clr-text: hsl(209 50% 15%);
-            --clr-heading: hsl(209 50% 25%);
-        }
-
-        :root:has(#green:checked) {
-            --clr-body-bg: hsl(109 50% 90%);
-            --clr-card-bg: hsl(109 50% 100%);
-            --clr-text: hsl(109 50% 15%);
-            --clr-heading: hsl(109 50% 25%);
-        }
-
-        .btn-outline-primary {
-            font-family: Consolas, monaco, monospace;
-            --bs-btn-color: var(--clr-text);
-            --bs-btn-border-color: var(--clr-heading);
-            --bs-btn-hover-color: #fff;
-            --bs-btn-hover-bg: var(--clr-heading);
-            --bs-btn-hover-border-color: var(--clr-heading);
-            --bs-btn-focus-shadow-rgb: var(--clr-heading);
-            --bs-btn-active-color: #fff;
-            --bs-btn-active-bg: var(--clr-heading);
-            --bs-btn-active-border-color: var(--clr-heading);
-            --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-            --bs-btn-disabled-color: var(--clr-heading);
-            --bs-btn-disabled-bg: transparent;
-            --bs-btn-disabled-border-color: var(--clr-heading);
-            --bs-gradient: none;
-        }
-
-        #header {
-            height: 10%;
-            width: 100%;
-            box-sizing: border-box;
-            position: relative;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            background: var(--clr-heading);
-        }
-
-        .typewriter h1 {
-            color: #fff;
-            font-family: monospace;
-            overflow: hidden;
-            /* Ensures the content is not revealed until the animation */
-            border-right: .15em solid orange;
-            /* The typwriter cursor */
-            white-space: nowrap;
-            /* Keeps the content on a single line */
-            margin: 0 auto;
-            /* Gives that scrolling effect as the typing happens */
-            letter-spacing: .15em;
-            /* Adjust as needed */
-            animation:
-                typing 7.5s steps(30, end) infinite,
-                blink-caret .5s step-end infinite;
-            font-size: 2rem;
-            font-weight: bolder;
-        }
-
-        /* The typing effect */
-        @keyframes typing {
-            0% {
-                width: 0%
-            }
-
-            25% {
-                width: 100%
-            }
-
-            50% {
-                width: 100%
-            }
-
-            75% {
-                width: 0%
-            }
-
-            100% {
-                width: 0%
-            }
-        }
-
-        /* The typewriter cursor effect */
-        @keyframes blink-caret {
-
-            from,
-            to {
-                border-color: transparent
-            }
-
-            50% {
-                border-color: orange
-            }
-        }
-
-        #footer {
-            height: 10%;
-            width: 100%;
-            background: var(--clr-heading)
-        }
-
-        ::-webkit-scrollbar {
-            width: 6px;
-        }
-
-        ::-webkit-scrollbar-track {
-            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-        }
-
-        ::-webkit-scrollbar-thumb {
-            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-        }
-    </style>
-</head>
-<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
-<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
-<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
-<link rel="manifest" href="/site.webmanifest">
-<body>
-    <div id="header">
-        <div id="logoname" style="cursor: pointer;">
-            <div class="typewriter">
-                <h1>Code Racer</h1>
-            </div>
-        </div>
-
-    </div>
-
-
-    <div class="mb-5 col-md-6">
-        <h3 class="mb-3" style="font-weight: bold;color:var(--clr-text)"> Login </h3>
-        <div class="form-floating mb-3">
-            <input type="text" placeholder="Username" id="userInp" class="form-control mb-3">
-            <label for="floatingUsername" style="font-weight: bold"> Username </label>
-        </div>
-        <div class="form-floating mb-3">
-            <input type="password" placeholder="Password" id="passInp" class="form-control mb-3">
-            <label for="floatingPassword" style="font-weight: bold"> Password </label>
-        </div>
-        <!-- Default switch from "https://mdbootstrap.com/docs/standard/forms/switch/"-->
-        <div class="d-grid gap-2">
-            <div class="form-check form-switch">
-                <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault" />
-                <label class="form-check-label" for="flexSwitchCheckDefault" style="font-weight: bold">Keep Me Logged
-                    In</label>
-            </div>
-            <button type="text" id="sub_btn" class="btn btn-outline-primary" style="font-weight: bold"> Login </button>
-            <!-- <a class="btn btn-outline-primary" href="profile.html" role="button"> Login</a> -->
-            <!-- The code below is a button that you can find on Bootstrap. (w-100 means the width and 100 pixels) -->
-            <a class="btn btn-outline-primary" href="register.html" role="button" style="font-weight: bold"> Sign Up
-            </a>
-            <a class="btn btn-outline-primary" href="reset.html" role="button" style="font-weight: bold"> Forgot
-                Password? </a>
-        </div>
-    </div>
-
-    <script type="module">
-
-        const colorThemes = document.querySelectorAll('[name="theme"]');
-
-        // store theme
-        const storeTheme = function (theme) {
-            localStorage.setItem("theme", theme);
-        };
-
-        // set theme when visitor returns
-        const setTheme = function () {
-            const activeTheme = localStorage.getItem("theme");
-            colorThemes.forEach((themeOption) => {
-                if (themeOption.id === activeTheme) {
-                    themeOption.checked = true;
-                }
-            });
-            // fallback for no :has() support
-            document.documentElement.className = activeTheme;
-        };
-
-        colorThemes.forEach((themeOption) => {
-            themeOption.addEventListener("click", () => {
-                storeTheme(themeOption.id);
-                // fallback for no :has() support
-                document.documentElement.className = themeOption.id;
-            });
-        });
-
-        document.onload = setTheme();
-
-        import { initializeApp } from "https://www.gstatic.com/firebasejs/9.17.1/firebase-app.js";
-
-        const firebaseConfig = {
-            apiKey: "AIzaSyCfqETPecXz44bqT_d5hgQAFbejf4isfIk",
-            authDomain: "coderacer-4d354.firebaseapp.com",
-            databaseURL: "https://coderacer-4d354-default-rtdb.firebaseio.com",
-            projectId: "coderacer-4d354",
-            storageBucket: "coderacer-4d354.appspot.com",
-            messagingSenderId: "300760585108",
-            appId: "1:300760585108:web:f1841e34b255daf97fb581"
-        };
-
-        // Initialize Firebase
-        const app = initializeApp(firebaseConfig);
-
-        import { getDatabase, ref, set, child, get }
-            from "https://www.gstatic.com/firebasejs/9.17.1/firebase-database.js";
-
-        const db = getDatabase();
-
-        // References
-
-        const username = document.getElementById('userInp');
-        const pass = document.getElementById('passInp');
-        const submit = document.getElementById('sub_btn');
-
-        // Authentication Process
-
-        function authenticateUser() {
-            const dbref = ref(db);
-
-            // Checks if the password is correct or not from the database and allows the user to login, if the information is correct
-            get(child(dbref, "UsersList/" + username.value)).then((snapshot) => {
-                if (snapshot.exists()) {
-                    let dbpass = decryptedPassword(snapshot.val().password);
-                    if (dbpass == pass.value && pass.value.length > 0) {
-                        login(snapshot.val());
-                    }
-                    else {
-                        alert("Invalid Username or Password");
-                    }
-                }
-                else {
-                    alert("Invalid Username or Password");
-                }
-            });
-        }
-
-        // Decryption Process
-
-        function decryptedPassword(dbpass) {
-            var decryptPass = CryptoJS.AES.decrypt(dbpass, pass.value);
-            return decryptPass.toString(CryptoJS.enc.Utf8);
-        }
-
-        // Login (Sends the entire object containing all of the users information)
-
-        function login(user) {
-            let keepLoggedIn = document.getElementById('flexSwitchCheckDefault').checked;
-
-            // If the keepLoggedIn is false, then use the session storage
-            // Stores the data only if the session is active. Otherwise, the data is gone
-            if (!keepLoggedIn) {
-                sessionStorage.setItem('user', JSON.stringify(user));
-                window.location = "/index.html";
-            }
-            else {
-                // Save users information in the local storage
-                // The local storage is a permanent storage that keeps the user logged in even if the browser is closed
-                localStorage.setItem('keepLoggedIn', 'yes');
-                localStorage.setItem('user', JSON.stringify(user));
-                window.location = "/index.html";
-            }
-        }
-
-        // Assign the events
-
-        submit.addEventListener('click', authenticateUser);
-
-        // Once the user clicks on the logo, the user is redirected back to the homepage
-
-        let logo = document.getElementById("logoname");
-
-        logo.addEventListener('click', () => {
-            window.location = "/index.html";
-        })
-
-    </script>
-    <footer id="footer"></footer>
-</body>
-
-</html>
diff --git a/profile/profile.html b/profile/profile.html
deleted file mode 100644
index 7255001..0000000
--- a/profile/profile.html
+++ /dev/null
@@ -1,610 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7990188983460307"
-     crossorigin="anonymous"></script>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width" , initial-scale="1.0">
-    <title> Profile </title>
-    <style>
-        :root {
-            --clr-body-bg: #333;
-            --clr-text: hsl(0, 0%, 100%);
-            --clr-heading: hsl(0 0% 25%);
-        }
-
-        html,
-        body {
-            height: 100%;
-            margin: 0;
-            padding: 0;
-            font-family: Consolas, monaco, monospace;
-            background: var(--clr-body-bg);
-            color: var(--clr-text);
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-        }
-
-        .pink {
-            --clr-body-bg: hsl(310 50% 90%);
-            --clr-card-bg: hsl(310 50% 100%);
-            --clr-text: hsl(310 50% 15%);
-            --clr-heading: hsl(310 50% 25%);
-        }
-
-        .blue {
-            --clr-body-bg: hsl(209 50% 90%);
-            --clr-card-bg: hsl(209 50% 100%);
-            --clr-text: hsl(209 50% 15%);
-            --clr-heading: hsl(209 50% 25%);
-        }
-
-        .green {
-            --clr-body-bg: hsl(109 50% 90%);
-            --clr-card-bg: hsl(109 50% 100%);
-            --clr-text: hsl(109 50% 15%);
-            --clr-heading: hsl(109 50% 25%);
-        }
-
-        :root:has(#pink:checked) {
-            --clr-body-bg: hsl(310 50% 90%);
-            --clr-card-bg: hsl(310 50% 100%);
-            --clr-text: hsl(310 50% 15%);
-            --clr-heading: hsl(310 50% 25%);
-        }
-
-        :root:has(#blue:checked) {
-            --clr-body-bg: hsl(209 50% 90%);
-            --clr-card-bg: hsl(209 50% 100%);
-            --clr-text: hsl(209 50% 15%);
-            --clr-heading: hsl(209 50% 25%);
-            --clr-body-bg2: hsl(210, 57%, 78%);
-        }
-        
-
-        :root:has(#green:checked) {
-            --clr-body-bg: hsl(109 50% 90%);
-            --clr-card-bg: hsl(109 50% 100%);
-            --clr-text: hsl(109 50% 15%);
-            --clr-heading: hsl(109 50% 25%);
-        }
-
-        .btn-outline-primary {
-            font-family: Consolas, monaco, monospace;
-            --bs-btn-color: var(--clr-text);
-            --bs-btn-border-color: var(--clr-heading);
-            --bs-btn-hover-color: #fff;
-            --bs-btn-hover-bg: var(--clr-heading);
-            --bs-btn-hover-border-color: var(--clr-heading);
-            --bs-btn-focus-shadow-rgb: var(--clr-heading);
-            --bs-btn-active-color: #fff;
-            --bs-btn-active-bg: var(--clr-heading);
-            --bs-btn-active-border-color: var(--clr-heading);
-            --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-            --bs-btn-disabled-color: var(--clr-heading);
-            --bs-btn-disabled-bg: transparent;
-            --bs-btn-disabled-border-color: var(--clr-heading);
-            --bs-gradient: none;
-        }
-
-        #header {
-            height: 10%;
-            width: 100%;
-            box-sizing: border-box;
-            position: relative;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            background: var(--clr-heading);
-        }
-
-        .typewriter h1 {
-            color: #fff;
-            font-family: monospace;
-            overflow: hidden;
-            /* Ensures the content is not revealed until the animation */
-            border-right: .15em solid orange;
-            /* The typwriter cursor */
-            white-space: nowrap;
-            /* Keeps the content on a single line */
-            margin: 0 auto;
-            /* Gives that scrolling effect as the typing happens */
-            letter-spacing: .15em;
-            /* Adjust as needed */
-            animation:
-                typing 7.5s steps(30, end) infinite,
-                blink-caret .5s step-end infinite;
-            font-size: 2rem;
-            font-weight: bolder;
-        }
-
-        /* The typing effect */
-        @keyframes typing {
-            0% {
-                width: 0%
-            }
-
-            25% {
-                width: 100%
-            }
-
-            50% {
-                width: 100%
-            }
-
-            75% {
-                width: 0%
-            }
-
-            100% {
-                width: 0%
-            }
-        }
-
-        /* The typewriter cursor effect */
-        @keyframes blink-caret {
-
-            from,
-            to {
-                border-color: transparent
-            }
-
-            50% {
-                border-color: orange
-            }
-        }
-
-        #mainContent {
-            display: flex;
-            flex-direction: column;
-            justify-content: space-evenly;
-            align-items: center;
-            width: 100%;
-            height: 100%;
-            min-height: fit-content;
-            margin-top: 1%;
-            margin-bottom: 1%;
-        }
-
-        #username {
-            background: var(--clr-heading);
-            padding-left: 1%;
-            padding-right: 1%;
-            border-radius: 25px;
-            border: 1px solid var(--clr-text);
-            height: fit-content;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-        }
-
-        #username>h2 {
-            color: whitesmoke;
-        }
-
-        #stats {
-            height: 15vh;
-            width: 100%;
-            display: flex;
-            justify-content: space-evenly;
-            align-items: center;
-            border-radius: 25px;
-        }
-
-        #top,
-        #bottom,
-        #chart-bg {
-            width: 25%;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-            background: var(--clr-heading);
-            border-radius: 25px;
-            border: 1px solid var(--clr-text);
-            padding: 1%;
-        }
-
-        #top>div,
-        #bottom>div {
-            display: flex;
-            height: 100%;
-            width: 100%;
-            justify-content: space-between;
-            color: whitesmoke;
-        }
-
-        #stats>div>div>h3 {
-            margin: 2%;
-            font-size: 1.2rem;
-        }
-
-        #chart-bg {
-            height: 35%;
-            width: 35%;
-            height: fit-content;
-            margin: 2%;
-        }
-
-        #sign-out-button {
-            padding: 1%;
-            width: 10%;
-            background: var(--clr-heading);
-            color: whitesmoke;
-            border-radius: 25px;
-            font-weight: bold;
-            font-size: 1rem;
-        }
-
-        #sign-out-button:hover {
-            filter: brightness(0.8);
-        }
-
-        #sign-out-button:active {
-            filter: brightness(0.6);
-        }
-
-        #footer {
-            height: 10%;
-            width: 100%;
-            background: var(--clr-heading)
-        }
-    </style>
-</head>
-
-<body>
-
-    <div id="header">
-        <div id="logoname" style="cursor: pointer;">
-            <div class="typewriter">
-                <h1>Code Racer</h1>
-            </div>
-        </div>
-    </div>
-
-    <div id="mainContent">
-        <div id="username">
-            <h2 id="name_h2">Username</h2>
-        </div>
-
-        <div id="stats">
-            <div id="top">
-                <div id="average_wpm">
-                    <h3>Average Words Per Minute: </h3>
-                    <h3 id='average_wpm_h3'>0</h3>
-
-                </div>
-
-                <div id="average_cpm">
-                    <h3>Average Characters Per Minute: </h3>
-                    <h3 id="average_cpm_h3">0</h3>
-
-                </div>
-
-                <div id="lifetime_accuracy">
-                    <h3>Lifetime Accuracy: </h3>
-                    <h3 id="lifetime_accuracy_h3">0</h3>
-
-                </div>
-            </div>
-
-            <div id="bottom">
-                <div id="total_words_typed">
-                    <h3>Total Words Typed: </h3>
-                    <h3 id="total_words_typed_h3">0</h3>
-
-                </div>
-
-                <div id="total_characters_typed">
-                    <h3>Total Characters Typed: </h3>
-                    <h3 id="total_characters_typed_h3">0</h3>
-
-                </div>
-
-                <div id="total_time_spent_typing">
-                    <h3>Total Time Spent Typing: </h3>
-                    <h3 id="time_spend_typing_h3">0</h3>
-
-                </div>
-            </div>
-        </div>
-
-        <div id="chart-bg">
-            <canvas id="myChart" style="width:100%;"></canvas>
-        </div>
-        <button id="sign-out-button">Sign Out</button>
-    </div>
-
-    <footer id="footer"></footer>
-
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js">
-    </script>
-
-    <script type="module">
-
-        import { initializeApp } from "https://www.gstatic.com/firebasejs/9.17.1/firebase-app.js";
-
-        const firebaseConfig = {
-            apiKey: "AIzaSyCfqETPecXz44bqT_d5hgQAFbejf4isfIk",
-            authDomain: "coderacer-4d354.firebaseapp.com",
-            databaseURL: "https://coderacer-4d354-default-rtdb.firebaseio.com",
-            projectId: "coderacer-4d354",
-            storageBucket: "coderacer-4d354.appspot.com",
-            messagingSenderId: "300760585108",
-            appId: "1:300760585108:web:f1841e34b255daf97fb581"
-        };
-
-        // Initialize Firebase
-
-        const app = initializeApp(firebaseConfig);
-
-        import { getDatabase, ref, child, get, update }
-            from "https://www.gstatic.com/firebasejs/9.17.1/firebase-database.js";
-
-        const db = getDatabase();
-
-        // Gets the user's username that's stored in the local or session storage
-
-        var currentuser = null;
-
-        let keepLoggedIn = localStorage.getItem("keepLoggedIn");
-
-        if (keepLoggedIn == "yes") {
-            currentuser = JSON.parse(localStorage.getItem('user'));
-        }
-        else {
-            currentuser = JSON.parse(sessionStorage.getItem('user'));
-        }
-
-        // Displaying all of the user statistics in the tables
-        function AddItemToTable(total_words_typed, total_characters_typed, avg_WPM, avg_CPM,
-            lifetime_accuracy, total_time_spent_typing) {
-
-            // Convert total time spent typing to Hours/Minutes/Seconds
-            let hours = Math.floor(total_time_spent_typing / 3600);
-            total_time_spent_typing = total_time_spent_typing % 3600;
-            let minutes = Math.floor(total_time_spent_typing / 60);
-            let seconds = Math.floor(total_time_spent_typing % 60);
-
-            document.getElementById("time_spend_typing_h3").innerText = hours + "h " + minutes + "m " + seconds + "s";
-            document.getElementById("average_wpm_h3").innerText = avg_WPM;
-            document.getElementById("lifetime_accuracy_h3").innerText = lifetime_accuracy + " %";
-            document.getElementById("total_words_typed_h3").innerText = total_words_typed;
-            document.getElementById("total_characters_typed_h3").innerText = total_characters_typed;
-            document.getElementById("average_cpm_h3").innerText = avg_CPM;
-        }
-
-        function AddAllItemsToProfile(UsersList) {
-            var users = [];
-
-            // Inital state of data from Firebase
-
-            UsersList.forEach(element => {
-                AddItemToTable(element.total_words_typed, element.total_characters_typed, element.avg_WPM, element.avg_CPM,
-                    element.lifetime_accuracy, element.total_time_spent_typing)
-            });
-        }
-
-        // Getting all of the data from Firebase at once
-
-        function GetAllDataOnce() {
-            const dbRef = ref(db);
-            var users = [];
-
-            get(child(dbRef, 'UsersList/' + currentuser.username)).then((snapshot) => {
-                users.push(snapshot.val());
-                AddAllItemsToProfile(users);
-            })
-        }
-
-        window.onload = GetAllDataOnce();
-
-        // Updates the database after the graph is updated
-
-        function updateGraph() {
-            // Database reference
-
-            const dbRef = ref(db);
-
-            // Updates the data points for the graph for WPM
-
-            get(child(dbRef, "UsersList/" + currentuser.username)).then((snapshot) => {
-
-                // Gets the avg_WPM from the database
-
-                var retrieved_avg_WPM = snapshot.val().avg_WPM;
-
-                // Getting all of the data points individually from the database
-
-                var retrieved_data_point_1 = snapshot.val().data_point_1;
-                var retrieved_data_point_2 = snapshot.val().data_point_2;
-                var retrieved_data_point_3 = snapshot.val().data_point_3;
-                var retrieved_data_point_4 = snapshot.val().data_point_4;
-                var retrieved_data_point_5 = snapshot.val().data_point_5;
-                var retrieved_data_point_6 = snapshot.val().data_point_6;
-                var retrieved_data_point_7 = snapshot.val().data_point_7;
-                var retrieved_data_point_8 = snapshot.val().data_point_8;
-                var retrieved_data_point_9 = snapshot.val().data_point_9;
-                var retrieved_data_point_10 = snapshot.val().data_point_10;
-
-                // Code for the line graph
-
-                const xValues = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
-                const yValues = [retrieved_data_point_1, retrieved_data_point_2,
-                retrieved_data_point_3, retrieved_data_point_4, 
-                retrieved_data_point_5, retrieved_data_point_6, 
-                retrieved_data_point_7, retrieved_data_point_8,
-                retrieved_data_point_9, retrieved_data_point_10];
-
-                const myChart = new Chart("myChart", {
-                    type: "line",
-                    data: {
-                        labels: xValues,
-                        datasets: [{
-                            backgroundColor: 'rgba(255, 255, 255, 0.3)',
-                            borderColor: "whitesmoke",
-                            data: yValues,
-                        }]
-                    },
-                    options: {
-                        legend: {
-                            display: false,
-                        },
-                        responsive: true,
-                        title: {
-                            display: true,
-                            text: 'Words Per Minute Graph',
-                            fontColor: "whitesmoke"
-                        },
-                        tooltips: {
-                            mode: 'label',
-                        },
-                        hover: {
-                            mode: 'nearest',
-                            intersect: true
-                        },
-                        scales: {
-                            xAxes: [{
-                                display: true,
-                                gridLines: {
-                                    display: true,
-                                    color: "whitesmoke"
-                                },
-                                scaleLabel: {
-                                    display: true,
-                                    labelString: 'Previous Attempts (1 = Latest, 10 = Most Recent)',
-                                    fontColor: "whitesmoke"
-                                },
-                                ticks: {
-                                    fontColor: "whitesmoke"
-                                }
-                            }],
-                            yAxes: [{
-                                display: true,
-                                gridLines: {
-                                    display: true,
-                                    color: "whitesmoke"
-                                },
-                                scaleLabel: {
-                                    display: true,
-                                    labelString: 'WPM',
-                                    fontColor: "whitesmoke"
-                                },
-                                ticks: {
-                                    fontColor: "whitesmoke"
-                                }
-                            }]
-                        }
-                    }
-                });
-            });
-        }
-
-        window.onload = updateGraph();
-
-        // THEMES
-        const colorThemes = document.querySelectorAll('[name="theme"]');
-
-        // store theme
-        const storeTheme = function (theme) {
-            localStorage.setItem("theme", theme);
-        };
-
-        // set theme when visitor returns
-        const setTheme = function () {
-            const activeTheme = localStorage.getItem("theme");
-            colorThemes.forEach((themeOption) => {
-                if (themeOption.id === activeTheme) {
-                    themeOption.checked = true;
-                }
-            });
-            // fallback for no :has() support
-            document.documentElement.className = activeTheme;
-        };
-
-        colorThemes.forEach((themeOption) => {
-            themeOption.addEventListener("click", () => {
-                storeTheme(themeOption.id);
-                // fallback for no :has() support
-                document.documentElement.className = themeOption.id;
-            });
-        });
-
-        document.onload = setTheme();
-
-        // References
-
-        let userlink = document.getElementById('name_h2');
-        let signoutlink = document.getElementById('signoutlink');
-        var currentuser = null;
-
-        // Gets the username and checks to see if the user wants to be kept logged in or not
-
-        function getUsername() {
-            let keepLoggedIn = localStorage.getItem("keepLoggedIn");
-
-            if (keepLoggedIn == "yes") {
-                currentuser = JSON.parse(localStorage.getItem('user'));
-            }
-            else {
-                currentuser = JSON.parse(sessionStorage.getItem('user'));
-            }
-        }
-
-        // When the "signOut" function gets called, the user is logged out and is redirected to the homepage
-
-        function signOut() {
-            sessionStorage.removeItem('user');
-            localStorage.removeItem('user');
-            localStorage.removeItem('keepLoggedIn');
-            window.location = "/index.html";
-        }
-
-        // Loads Windows
-
-        // If the user is signed in, it will display the username and the signout button on the top right-hand corner of the page
-        // Once the person presses "Sign Out", it will redirect them to the homepage
-        window.onload = function () {
-            getUsername();
-            if (currentuser != null) {
-                userlink.innerText = currentuser.username;
-                userlink.classList.replace("btn", "nav-link");
-                userlink.classList.add("btn-primary");
-                userlink.href = "#";
-
-                signoutlink.innerText = "Sign Out";
-                signoutlink.classList.replace("btn", "nav-link");
-                signoutlink.classList.add("btn-success");
-                signoutlink.href = "javascript:signOut()";
-            }
-            else {
-                signoutlink.innerText = "Sign Out";
-                signoutlink.classList.replace("btn", "nav-link");
-                signoutlink.classList.add("btn-success");
-                signoutlink.href = "javascript:signOut()";
-            }
-        }
-
-
-        // Clicking on logo will send you back to home page
-        let logo = document.getElementById("logoname");
-
-        logo.addEventListener('click', () => {
-            window.location = "/index.html";
-        })
-
-        // Add sign out functionality to sign-out-button
-        const sign_out = document.getElementById("sign-out-button");
-
-        sign_out.addEventListener("click", () => {
-            signOut()
-        })
-
-
-    </script>
-
-</body>
-
-</html>
diff --git a/profile/register.html b/profile/register.html
deleted file mode 100644
index 0346189..0000000
--- a/profile/register.html
+++ /dev/null
@@ -1,442 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7990188983460307"
-     crossorigin="anonymous"></script>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width" , initial-scale="1.0">
-    <title> Register </title>
-    <!-- The link below is used for formatting the website and uses a CDN to get the framework for building the website. -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
-        integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
-    <!-- The link below is a CDN that is written in JavaScript that contains a library of crypto standards. -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"> </script>
-    <!-- The link below is a CDN that is written in Javascript that contains a library of fonts. -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
-        integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
-        crossorigin="anonymous" referrerpolicy="no-referrer" />
-    <style>
-        :root {
-            --clr-body-bg: #333;
-            --clr-text: hsl(0, 0%, 100%);
-            --clr-heading: hsl(0 0% 25%);
-        }
-
-        body {
-            /* To be able to bring all of the input buttons to the center of the page. */
-            /* Make the high and width equal to the viewport and the margins to 0 pixels. */
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-            align-items: center;
-            margin: 0px;
-            font-family: Consolas, monaco, monospace;
-            background: var(--clr-body-bg);
-        }
-
-        html,
-        body {
-            height: 100%;
-            margin: 0;
-            padding: 0;
-            font-family: Consolas, monaco, monospace;
-            background: var(--clr-body-bg);
-            color: var(--clr-text);
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-
-        }
-
-        .mb-3 {
-            color: hsl(0 0% 25%);
-            font-family: Consolas, monaco, monospace;
-        }
-
-        .mb-5>h3 {
-            color: var(--clr-text);
-            font-weight: bold;
-        }
-
-        .pink {
-            --clr-body-bg: hsl(310 50% 90%);
-            --clr-card-bg: hsl(310 50% 100%);
-            --clr-text: hsl(310 50% 15%);
-            --clr-heading: hsl(310 50% 25%);
-        }
-
-        .blue {
-            --clr-body-bg: hsl(209 50% 90%);
-            --clr-card-bg: hsl(209 50% 100%);
-            --clr-text: hsl(209 50% 15%);
-            --clr-heading: hsl(209 50% 25%);
-        }
-
-        .green {
-            --clr-body-bg: hsl(109 50% 90%);
-            --clr-card-bg: hsl(109 50% 100%);
-            --clr-text: hsl(109 50% 15%);
-            --clr-heading: hsl(109 50% 25%);
-        }
-
-        :root:has(#pink:checked) {
-            --clr-body-bg: hsl(310 50% 90%);
-            --clr-card-bg: hsl(310 50% 100%);
-            --clr-text: hsl(310 50% 15%);
-            --clr-heading: hsl(310 50% 25%);
-        }
-
-        :root:has(#blue:checked) {
-            --clr-body-bg: hsl(209 50% 90%);
-            --clr-card-bg: hsl(209 50% 100%);
-            --clr-text: hsl(209 50% 15%);
-            --clr-heading: hsl(209 50% 25%);
-        }
-
-        :root:has(#green:checked) {
-            --clr-body-bg: hsl(109 50% 90%);
-            --clr-card-bg: hsl(109 50% 100%);
-            --clr-text: hsl(109 50% 15%);
-            --clr-heading: hsl(109 50% 25%);
-        }
-
-        .btn-outline-primary {
-            font-family: Consolas, monaco, monospace;
-            --bs-btn-color: var(--clr-text);
-            --bs-btn-border-color: var(--clr-heading);
-            --bs-btn-hover-color: #fff;
-            --bs-btn-hover-bg: var(--clr-heading);
-            --bs-btn-hover-border-color: var(--clr-heading);
-            --bs-btn-focus-shadow-rgb: var(--clr-heading);
-            --bs-btn-active-color: #fff;
-            --bs-btn-active-bg: var(--clr-heading);
-            --bs-btn-active-border-color: var(--clr-heading);
-            --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-            --bs-btn-disabled-color: var(--clr-heading);
-            --bs-btn-disabled-bg: transparent;
-            --bs-btn-disabled-border-color: var(--clr-heading);
-            --bs-gradient: none;
-        }
-
-        #header {
-            height: 10%;
-            width: 100%;
-            box-sizing: border-box;
-            position: relative;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            background: var(--clr-heading);
-        }
-
-        .typewriter h1 {
-            color: #fff;
-            font-family: monospace;
-            overflow: hidden;
-            /* Ensures the content is not revealed until the animation */
-            border-right: .15em solid orange;
-            /* The typwriter cursor */
-            white-space: nowrap;
-            /* Keeps the content on a single line */
-            margin: 0 auto;
-            /* Gives that scrolling effect as the typing happens */
-            letter-spacing: .15em;
-            /* Adjust as needed */
-            animation:
-                typing 7.5s steps(30, end) infinite,
-                blink-caret .5s step-end infinite;
-            font-size: 2rem;
-            font-weight: bolder;
-        }
-
-        /* The typing effect */
-        @keyframes typing {
-            0% {
-                width: 0%
-            }
-
-            25% {
-                width: 100%
-            }
-
-            50% {
-                width: 100%
-            }
-
-            75% {
-                width: 0%
-            }
-
-            100% {
-                width: 0%
-            }
-        }
-
-        /* The typewriter cursor effect */
-        @keyframes blink-caret {
-
-            from,
-            to {
-                border-color: transparent
-            }
-
-            50% {
-                border-color: orange
-            }
-        }
-
-        #footer {
-            height: 10%;
-            width: 100%;
-            background: var(--clr-heading)
-        }
-
-        ::-webkit-scrollbar {
-            width: 6px;
-        }
-
-        ::-webkit-scrollbar-track {
-            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-        }
-
-        ::-webkit-scrollbar-thumb {
-            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-        }
-    </style>
-</head>
-<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
-<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
-<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
-<link rel="manifest" href="/site.webmanifest">
-
-<body>
-    <div id="header">
-        <div id="logoname" style="cursor: pointer;">
-            <div class="typewriter">
-                <h1>Code Racer</h1>
-            </div>
-        </div>
-
-    </div>
-
-    <div class="mb-5 col-md-6">
-        <h3 class="mb-3"> Sign Up </h3>
-        <div class="form-floating mb-3">
-            <input type="text" placeholder="Full Name (First and Last Name)" id="nameInp" class="form-control mb-3">
-            <label for="floatingFullName" style="font-weight: bold;"> Full Name (First and Last Name) </label>
-        </div>
-        <div class="form-floating mb-3">
-            <input type="email" placeholder="Email" id="emailInp" class="form-control mb-3">
-            <label for="floatingEmail" style="font-weight: bold;"> Email </label>
-        </div>
-        <div class="form-floating mb-3">
-            <input type="text" placeholder="Username (Min. of 5 Characters)" id="userInp" class="form-control mb-3">
-            <label for="floatingUserName" style="font-weight: bold;"> Username (Min. of 5 Characters) </label>
-        </div>
-        <div class="form-floating mb-3">
-            <input type="password" placeholder="Password" id="passInp" class="form-control mb-3">
-            <label for="floatingPassword" style="font-weight: bold;"> Password (Min. of 10 Characters) </label>
-        </div>
-        <div class="d-grid gap-2">
-            <button type="text" id="sub_btn" class="btn btn-outline-primary" style="font-weight: bold;"> Create New
-                Account </button>
-            <!-- The code below is a button that you can find on Bootstrap. (w-100 means the width and 100 pixels) -->
-            <a class="btn btn-outline-primary" href="login.html" role="button" style="font-weight: bold;"> Already Have
-                An Account? </a>
-        </div>
-    </div>
-
-    <script type="module">
-
-        import { initializeApp } from "https://www.gstatic.com/firebasejs/9.17.1/firebase-app.js";
-
-        const colorThemes = document.querySelectorAll('[name="theme"]');
-
-        // store theme
-        const storeTheme = function (theme) {
-            localStorage.setItem("theme", theme);
-        };
-
-        // set theme when visitor returns
-        const setTheme = function () {
-            const activeTheme = localStorage.getItem("theme");
-            colorThemes.forEach((themeOption) => {
-                if (themeOption.id === activeTheme) {
-                    themeOption.checked = true;
-                }
-            });
-            // fallback for no :has() support
-            document.documentElement.className = activeTheme;
-        };
-
-        colorThemes.forEach((themeOption) => {
-            themeOption.addEventListener("click", () => {
-                storeTheme(themeOption.id);
-                // fallback for no :has() support
-                document.documentElement.className = themeOption.id;
-            });
-        });
-
-        document.onload = setTheme();
-
-        const firebaseConfig = {
-            apiKey: "AIzaSyCfqETPecXz44bqT_d5hgQAFbejf4isfIk",
-            authDomain: "coderacer-4d354.firebaseapp.com",
-            databaseURL: "https://coderacer-4d354-default-rtdb.firebaseio.com",
-            projectId: "coderacer-4d354",
-            storageBucket: "coderacer-4d354.appspot.com",
-            messagingSenderId: "300760585108",
-            appId: "1:300760585108:web:f1841e34b255daf97fb581"
-        };
-
-        // Initialize Firebase
-
-        const app = initializeApp(firebaseConfig);
-
-        import { getDatabase, ref, set, child, get }
-            from "https://www.gstatic.com/firebasejs/9.17.1/firebase-database.js";
-
-        const db = getDatabase();
-
-        // References
-
-        const name = document.getElementById('nameInp');
-        const email = document.getElementById('emailInp');
-        const username = document.getElementById('userInp');
-        const pass = document.getElementById('passInp');
-        const submit = document.getElementById('sub_btn');
-
-        // Checks to see if any inputs are empty.
-
-        function isEmptyOrSpaces(str) {
-            return str == null || str.match(/^ *$/) != null;
-        }
-
-        // This function is for validation (Regular Expressions) (Compilers - Lexical Analyzer)
-
-        function validation() {
-            // The code below denotes that there could be any lowercase or uppercase alphabets and any number of these alphabets.
-            let nameregex = /^[a-zA-Z\s]+$/;
-            // The code below denotes that there could be any lowercase or uppercase alphabets and any number of these alphabets and numbers.
-            // The plus sign denotes that there should be at least one of these or there could be any number of these combinations.
-            // The domain names are inside the ().
-            let emailregex = /^[a-zA-Z0-9]+@(gmail|yahoo|outlook|protonmail)\.com$/;
-            let userregex = /^[a-zA-Z0-9]{5,}$/;
-
-            // Alert user if there are any spaces or inputs that are left empty.
-            if (isEmptyOrSpaces(name.value) || isEmptyOrSpaces(email.value) || isEmptyOrSpaces(username.value) || isEmptyOrSpaces(pass.value)) {
-                alert("You cannot leave any fields empty");
-                return false;
-            }
-
-            // If it is not correct, show an error message to the user. Otherwise, accept the correct input by the user.
-            if (!nameregex.test(name.value)) {
-                alert("The name should only contain alphabets");
-                return false;
-            }
-            if (!emailregex.test(email.value)) {
-                alert("Please enter a valid email");
-                return false;
-            }
-            if (!userregex.test(username.value)) {
-                alert("Username can only be alphanumeric, must be at least 5 characters, and cannot contain spaces");
-                return false;
-            }
-            if (pass.value.length <= 10) {
-                alert("Please create a password that is longer than 10 characters");
-                return false;
-            }
-            if (pass.value == "123456" || pass.value == "123456789" || pass.value == "qwerty" || pass.value == "password" || pass.value == "12345" ||
-                pass.value == "qwerty123" || pass.value == "1q2w3e" || pass.value == "12345678" || pass.value == "111111" || pass.value == "1234567890" ||
-                pass.value == "123") {
-                alert("A commonly used password was inputted, please create a password that is longer than 10 characters and refrain from using commonly used passwords");
-                return false;
-            }
-            return true;
-        }
-
-        // This function registers the user to Firebase
-
-        function registerUsers() {
-            if (!validation()) {
-                return;
-            }
-
-            const dbRef = ref(db);
-
-            // Checks if the user exists. "UsersList" is the folder that contains the user's data.
-            get(child(dbRef, "UsersList/" + username.value)).then((snapshot) => {
-                if (snapshot.exists()) {
-                    alert("Account Already Exists!")
-                }
-                else {
-                    set(ref(db, "UsersList/" + username.value),
-                        {
-                            fullname: encryptedFullName(),
-                            email: encryptedEmail(),
-                            username: username.value,
-                            password: encryptedPassword(),
-                            total_words_typed: 0,
-                            total_characters_typed: 0,
-                            avg_WPM: 0,
-                            avg_CPM: 0,
-                            accuracy: 0,
-                            lifetime_accuracy: 0,
-                            total_completed_runs: 0,
-                            total_time_spent_typing: 0,
-                            data_point_1: 0,
-                            data_point_2: 0,
-                            data_point_3: 0,
-                            data_point_4: 0,
-                            data_point_5: 0,
-                            data_point_6: 0,
-                            data_point_7: 0,
-                            data_point_8: 0,
-                            data_point_9: 0,
-                            data_point_10: 0
-                        })
-                        .then(() => {
-                            alert("User was added successfully!");
-                            window.location = "login.html";
-                        })
-                        .catch((error) => {
-                            alert("Error" + error);
-                        })
-                }
-            });
-        }
-
-        // The user's data is encrypted using AES 256-bit encryption
-
-        function encryptedFullName() {
-            var encryptFullName = CryptoJS.AES.encrypt(name.value, name.value);
-            return encryptFullName.toString();
-        }
-
-        function encryptedEmail() {
-            var encryptEmail = CryptoJS.AES.encrypt(email.value, email.value);
-            return encryptEmail.toString();
-        }
-
-        function encryptedPassword() {
-            var encryptPass = CryptoJS.AES.encrypt(pass.value, pass.value);
-            return encryptPass.toString();
-        }
-
-        // Assign the events
-
-        submit.addEventListener('click', registerUsers);
-
-        let logo = document.getElementById("logoname");
-
-        logo.addEventListener('click', () => {
-            window.location = "/index.html";
-        })
-
-    </script>
-    <footer id="footer"></footer>
-</body>
-
-</html>
diff --git a/profile/reset.html b/profile/reset.html
deleted file mode 100644
index 894a256..0000000
--- a/profile/reset.html
+++ /dev/null
@@ -1,396 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7990188983460307"
-     crossorigin="anonymous"></script>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width" , initial-scale="1.0">
-    <title> Reset Password </title>
-    <!-- The link below is used for formatting the website and uses a CDN to get the framework for building the website. -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
-        integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
-    <!-- The link below is a CDN that is written in JavaScript that contains a library of crypto standards. -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"> </script>
-    <style>
-        :root {
-            --clr-body-bg: #333;
-            --clr-text: hsl(0, 0%, 100%);
-            --clr-heading: hsl(0 0% 25%);
-        }
-
-        body {
-            /* To be able to bring all of the input buttons to the center of the page. */
-            /* Make the high and width equal to the viewport and the margins to 0 pixels. */
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-            align-items: center;
-            margin: 0px;
-            font-family: Consolas, monaco, monospace;
-            background: var(--clr-body-bg);
-        }
-
-        html,
-        body {
-            height: 100%;
-            margin: 0;
-            padding: 0;
-            font-family: Consolas, monaco, monospace;
-            background: var(--clr-body-bg);
-            color: var(--clr-text);
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-        }
-
-        .mb-3 {
-            color: hsl(0 0% 25%);
-            font-family: Consolas, monaco, monospace;
-        }
-
-        .mb-5>h3 {
-            color: var(--clr-text);
-            font-weight: bold;
-        }
-
-        .pink {
-            --clr-body-bg: hsl(310 50% 90%);
-            --clr-card-bg: hsl(310 50% 100%);
-            --clr-text: hsl(310 50% 15%);
-            --clr-heading: hsl(310 50% 25%);
-        }
-
-        .blue {
-            --clr-body-bg: hsl(209 50% 90%);
-            --clr-card-bg: hsl(209 50% 100%);
-            --clr-text: hsl(209 50% 15%);
-            --clr-heading: hsl(209 50% 25%);
-        }
-
-        .green {
-            --clr-body-bg: hsl(109 50% 90%);
-            --clr-card-bg: hsl(109 50% 100%);
-            --clr-text: hsl(109 50% 15%);
-            --clr-heading: hsl(109 50% 25%);
-        }
-
-        :root:has(#pink:checked) {
-            --clr-body-bg: hsl(310 50% 90%);
-            --clr-card-bg: hsl(310 50% 100%);
-            --clr-text: hsl(310 50% 15%);
-            --clr-heading: hsl(310 50% 25%);
-        }
-
-        :root:has(#blue:checked) {
-            --clr-body-bg: hsl(209 50% 90%);
-            --clr-card-bg: hsl(209 50% 100%);
-            --clr-text: hsl(209 50% 15%);
-            --clr-heading: hsl(209 50% 25%);
-        }
-
-        :root:has(#green:checked) {
-            --clr-body-bg: hsl(109 50% 90%);
-            --clr-card-bg: hsl(109 50% 100%);
-            --clr-text: hsl(109 50% 15%);
-            --clr-heading: hsl(109 50% 25%);
-        }
-
-        .btn-outline-primary {
-            font-family: Consolas, monaco, monospace;
-            --bs-btn-color: var(--clr-text);
-            --bs-btn-border-color: var(--clr-heading);
-            --bs-btn-hover-color: #fff;
-            --bs-btn-hover-bg: var(--clr-heading);
-            --bs-btn-hover-border-color: var(--clr-heading);
-            --bs-btn-focus-shadow-rgb: var(--clr-heading);
-            --bs-btn-active-color: #fff;
-            --bs-btn-active-bg: var(--clr-heading);
-            --bs-btn-active-border-color: var(--clr-heading);
-            --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-            --bs-btn-disabled-color: var(--clr-heading);
-            --bs-btn-disabled-bg: transparent;
-            --bs-btn-disabled-border-color: var(--clr-heading);
-            --bs-gradient: none;
-        }
-
-        #header {
-            height: 10%;
-            width: 100%;
-            box-sizing: border-box;
-            position: relative;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            background: var(--clr-heading);
-        }
-
-        .typewriter h1 {
-            color: #fff;
-            font-family: monospace;
-            overflow: hidden;
-            /* Ensures the content is not revealed until the animation */
-            border-right: .15em solid orange;
-            /* The typwriter cursor */
-            white-space: nowrap;
-            /* Keeps the content on a single line */
-            margin: 0 auto;
-            /* Gives that scrolling effect as the typing happens */
-            letter-spacing: .15em;
-            /* Adjust as needed */
-            animation:
-                typing 7.5s steps(30, end) infinite,
-                blink-caret .5s step-end infinite;
-            font-size: 2rem;
-            font-weight: bolder;
-        }
-
-        /* The typing effect */
-        @keyframes typing {
-            0% {
-                width: 0%
-            }
-
-            25% {
-                width: 100%
-            }
-
-            50% {
-                width: 100%
-            }
-
-            75% {
-                width: 0%
-            }
-
-            100% {
-                width: 0%
-            }
-        }
-
-        /* The typewriter cursor effect */
-        @keyframes blink-caret {
-
-            from,
-            to {
-                border-color: transparent
-            }
-
-            50% {
-                border-color: orange
-            }
-        }
-
-        #footer {
-            height: 10%;
-            width: 100%;
-            background: var(--clr-heading)
-        }
-
-        ::-webkit-scrollbar {
-            width: 6px;
-        }
-
-        ::-webkit-scrollbar-track {
-            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-        }
-
-        ::-webkit-scrollbar-thumb {
-            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-        }
-    </style>
-</head>
-<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
-<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
-<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
-<link rel="manifest" href="/site.webmanifest">
-
-<body>
-    <div id="header">
-        <div id="logoname" style="cursor: pointer;">
-            <div class="typewriter">
-                <h1>Code Racer</h1>
-            </div>
-        </div>
-
-    </div>
-
-    <div class="mb-5 col-md-6">
-        <h3 class="mb-3"> Reset Password </h3>
-        <div class="form-floating mb-3">
-            <input type="text" placeholder="Username" id="userInp" class="form-control mb-3">
-            <label for="floatingUsername" style="font-weight: bold;"> Username </label>
-        </div>
-        <div class="form-floating mb-3">
-            <input type="email" placeholder="Email" id="emailInp" class="form-control mb-3">
-            <label for="floatingEmail" style="font-weight: bold;"> Email </label>
-        </div>
-        <div class="form-floating mb-3">
-            <input type="password" placeholder="Password" id="passInp" class="form-control mb-3">
-            <label for="floatingPassword" style="font-weight: bold;"> Enter New Password </label>
-        </div>
-        <div class="form-floating mb-3">
-            <input type="password" placeholder="ConfirmPassword" id="confirmPassInp" class="form-control mb-3">
-            <label for="floatingPassword" style="font-weight: bold;"> Confirm New Password </label>
-        </div>
-        <button type="text" id="sub_btn" class="btn btn-outline-primary w-100" style="font-weight: bold;"> Submit
-        </button>
-    </div>
-
-    <script type="module">
-
-        import { initializeApp } from "https://www.gstatic.com/firebasejs/9.17.1/firebase-app.js";
-
-        const firebaseConfig = {
-            apiKey: "AIzaSyCfqETPecXz44bqT_d5hgQAFbejf4isfIk",
-            authDomain: "coderacer-4d354.firebaseapp.com",
-            databaseURL: "https://coderacer-4d354-default-rtdb.firebaseio.com",
-            projectId: "coderacer-4d354",
-            storageBucket: "coderacer-4d354.appspot.com",
-            messagingSenderId: "300760585108",
-            appId: "1:300760585108:web:f1841e34b255daf97fb581"
-        };
-
-        // Initialize Firebase
-
-        const app = initializeApp(firebaseConfig);
-
-        import { getDatabase, ref, child, get, update }
-            from "https://www.gstatic.com/firebasejs/9.17.1/firebase-database.js";
-
-        const colorThemes = document.querySelectorAll('[name="theme"]');
-
-        // store theme
-        const storeTheme = function (theme) {
-            localStorage.setItem("theme", theme);
-        };
-
-        // set theme when visitor returns
-        const setTheme = function () {
-            const activeTheme = localStorage.getItem("theme");
-            colorThemes.forEach((themeOption) => {
-                if (themeOption.id === activeTheme) {
-                    themeOption.checked = true;
-                }
-            });
-            // fallback for no :has() support
-            document.documentElement.className = activeTheme;
-        };
-
-        colorThemes.forEach((themeOption) => {
-            themeOption.addEventListener("click", () => {
-                storeTheme(themeOption.id);
-                // fallback for no :has() support
-                document.documentElement.className = themeOption.id;
-            });
-        });
-
-        document.onload = setTheme();
-
-        const db = getDatabase();
-
-        // References
-
-        const username = document.getElementById('userInp');
-        const email = document.getElementById('emailInp');
-        const pass = document.getElementById('passInp');
-        const confirm_pass = document.getElementById('confirmPassInp');
-        const submit = document.getElementById('sub_btn');
-
-        // This function is for validation (Regular Expressions) (Compilers - Lexical Analyzer)
-
-        function validation() {
-            if (pass.value.length <= 10) {
-                alert("Please create a password that is longer than 10 characters");
-                return false;
-            }
-            if (pass.value == "123456" || pass.value == "123456789" || pass.value == "qwerty" || pass.value == "password" || pass.value == "12345" ||
-                pass.value == "qwerty123" || pass.value == "1q2w3e" || pass.value == "12345678" || pass.value == "111111" || pass.value == "1234567890" ||
-                pass.value == "123") {
-                alert("A commonly used password was inputted, please create a password that is longer than 10 characters and refrain from using commonly used passwords");
-                return false;
-            }
-            return true;
-        }
-
-        // Reset Password
-
-        function resetPassword() {
-            if (!validation()) {
-                return;
-            }
-
-            const dbRef = ref(db);
-
-            // Checks if the user exists. "UsersList" is the folder that contains the user's data
-            // Updates password once the user is verified by checking the user's email and making sure
-            // that the user didn't enter the same password that is already in the database and
-            // making the user enter the same password twice
-
-            get(child(dbRef, "UsersList/" + username.value)).then((snapshot) => {
-                if (!snapshot.exists()) {
-                    alert("Account Doesn't Exist!")
-                }
-                else {
-                    let dbemail = decryptedEmail(snapshot.val().email);
-                    let dbpass = decryptedPassword(snapshot.val().password);
-                    if (dbemail == email.value) {
-                        if (confirm_pass.value == pass.value && (dbpass != pass.value) && (dbpass != confirm_pass.value)) {
-                            update(ref(db, "UsersList/" + username.value),
-                                {
-                                    password: encryptedPassword()
-                                })
-                                .then(() => {
-                                    alert("Password was reset successfully!");
-                                    window.location = "login.html";
-                                })
-                                .catch((error) => {
-                                    alert("Error" + error);
-                                })
-                        }
-                        else {
-                            alert("Invalid Password")
-                        }
-                    }
-                    else {
-                        alert("Invalid Email Address")
-                    }
-                }
-            });
-        }
-
-        // Decryption Process
-
-        function decryptedEmail(dbemail) {
-            var decryptEmail = CryptoJS.AES.decrypt(dbemail, email.value);
-            return decryptEmail.toString(CryptoJS.enc.Utf8);
-        }
-
-        function decryptedPassword(dbpass) {
-            var decryptPass = CryptoJS.AES.decrypt(dbpass, pass.value);
-            return decryptPass.toString(CryptoJS.enc.Utf8);
-        }
-
-        // The user's data is encrypted using AES 256-bit encryption
-
-        function encryptedPassword() {
-            var encryptPass = CryptoJS.AES.encrypt(pass.value, pass.value);
-            return encryptPass.toString();
-        }
-
-        // Assign the events
-
-        submit.addEventListener('click', resetPassword);
-
-        let logo = document.getElementById("logoname");
-
-        logo.addEventListener('click', () => {
-            window.location = "/index.html";
-        })
-
-    </script>
-    <footer id="footer"></footer>
-</body>
-
-</html>
