Fixes to file structure

public/assets/css/generated-pages/club-pages/club-page-layouts.css

@@ -0,0 +1,35 @@
+/* Main Contents Container (Below Header) */
+#club-page-contents-container 
+{
+    display: flex;
+    flex-direction: row;
+}
+
+    /* Child Containers */
+
+    /* Left 20% of #club-page-contents-container */
+    #club-information-container
+    {
+        width: 20%;
+
+        display: flex;
+        flex-direction: column;
+    }
+
+    /* Right 80% of #club-page-contents-container */
+    #club-stats-and-players-container 
+    {
+        width: 80%;
+    }
+
+
+
+
+
+
+
+
+
+
+
+

public/assets/css/generated-pages/club-pages/club-page-styling.css

@@ -0,0 +1,23 @@
+#club-information-container
+{
+    margin-right: 20px;
+}
+
+#club-favorite-button
+{
+    width: 35px;
+    transform: skewX(20deg);
+    margin-right: 25px;
+    filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.3));
+    filter: outline(2px solid red);
+}
+
+#club-favorite-button:hover
+{
+    cursor: pointer;
+}
+
+#competition-logo {
+    width: 60px;
+    margin-right: 10px;
+}

public/assets/css/generated-pages/generated-pages-styling.css

@@ -0,0 +1,170 @@
+/*
+==============================================================
+                 ENTIRE PAGE CONTAINER
+==============================================================
+*/
+
+.page-container {
+        /* --- SIZE CONTAINER --- */
+        width: 100%; /* Set the width to the full width of screen */
+        padding: 10px 100px; /* Create some distance between page boundries and elements */
+    
+        /* --- FORMAT CHILD ITEMS (Table and Leading Scorers Cards) --- */
+        display: flex; /* Enable flexbox layout */
+        flex-direction: column; /* Arrange child elements vertically */
+}
+
+.page-content-container {
+    display: flex;
+    flex-direction: row;
+}
+
+/*
+=================================
+    LEAGUE INFORMATION HEADER
+=================================
+*/
+
+/* Stylization for League Information Header Card */
+.information-container
+{
+    /* --- POSITION CONTAINER --- */
+    align-items: center; /* Center content vertically */
+    margin: 20px;
+
+    /* --- SIZE CONTAINER --- */
+    height: 100px;
+    width: fit-content;
+    padding: 10px 20px; /* Adjust padding as needed */
+
+    /* --- STYLE CONTAINER --- */
+    background: linear-gradient(to right, white, rgb(245, 245, 245), rgb(227, 227, 227)); /* Gradient from white to gray */
+    transform: skewX(-20deg); /* Skew the banner to create a triangular side */
+    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.4);
+
+    /* --- FORMAT CHILD ITEMS (logo, league name, flag) --- */
+    display: flex; /* Enable flexbox layout */
+    flex-direction: row; /* Arrange child elements horizontally */
+}
+
+/* Adds Red Diagonal Strip at the end of the #league-information-container */
+.information-container::after
+{
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 8px; /* Width of the red strip */
+    background-color: red; /* Red color */
+}
+
+    /*
+    ===========================
+    LEAGUE INFORMATION CHILD ITEMS
+    ===========================
+    */
+
+    /* Styling for League Logo in League Information Header */
+    #generated-page-header-logo 
+    {
+        margin: 0px 30px;
+        transform: skewX(20deg); /* Skew the banner to create a triangular side */
+        height: 80%;
+    }
+
+    /* Styling for League Title in League Information Header */
+    #generated-page-header-title 
+    {
+        transform: skewX(20deg); /* Skew the banner to create a triangular side */
+        margin-right: 20px;
+    }
+
+    /* Styling for Flag in League Information Header */
+    #generated-page-header-flag 
+    {
+        transform: skewX(20deg); /* Skew the banner to create a triangular side */
+        height: 20px;
+        margin-right: 130px;
+    }
+
+/*
+=============================================
+             CARDS IN PAGE BODY
+=============================================
+*/
+    
+/* Styling for All Card Containers on Generated Pages */
+.card-container
+{
+    /* --- POSITION CONTAINER --- */
+    margin: 0 10px;
+    margin-bottom: 20px;
+
+    /* --- SIZE CONTAINER --- */
+    padding: 15px;
+
+    /* --- STYLE CONTAINER --- */
+    background: linear-gradient(to top, rgb(216, 216, 216), rgb(236, 236, 236), rgb(241, 240, 240));
+    border: 1px solid gray;
+    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.5);
+}
+
+/* Styling for All Tables on Generated Pages */
+table
+{
+    width: 100%;
+    padding: 15px;
+
+    /* Table Header Styling */
+    th 
+    {
+        border-bottom: 3px solid red; /* Add red bottom border */
+    }
+
+    /* Data in Row Style */
+    td
+    {
+        padding: 5px;
+    }
+}
+
+/* Styling for All Tables Designated to Alternate on Generated Pages */
+.alternating-table tbody tr:nth-child(odd)
+{
+    /* Every Odd Row in Table Style */
+    background-color: #d2d2d2; /* Light gray for odd rows */
+}
+
+/*
+==============================================================
+                       HOVER STYLES
+==============================================================
+*/
+
+/* Hover Styling for All Card Containers on Generated Pages */
+.card-container:hover
+{
+    transform: scale(1.01); /* Scale the row by 1.1 on hover */
+    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
+}
+
+/* Hover Styling for All Tables Designated to Alternate on Generated Pages */
+.alternating-table tbody tr:hover 
+{
+    /* Create border around row on hover */
+    border: 1px solid lightgray;
+    border-radius: 10px;
+
+    /* Make club logo larger on hover */
+    #league-table-club-logo
+    {
+        width: 32px;
+    }
+
+    /* Undeline club name on hover */
+    #league-table-club-name-column 
+    {
+        text-decoration: underline; /* Add underline effect */
+    }
+}

public/assets/css/generated-pages/league-pages/league-page.css

@@ -0,0 +1,28 @@
+/*
+=============================================
+             CARDS IN PAGE BODY
+=============================================
+*/
+
+#table-and-top-scorers-containers 
+{
+    display: flex;
+    flex-direction: row;
+}
+
+/*
+==============================================================
+                 DYNAMIC PAGE WIDTH STYLES
+==============================================================
+*/
+
+/* Width of Screen is Less Than 950px */
+@media (max-width: 1230px) 
+{
+    #table-and-top-scorers-containers {
+        display: flex;
+        flex-direction: column;
+    }
+}
+
+    

public/assets/css/generated-pages/league-pages/league-table.css

@@ -0,0 +1,62 @@
+/*
+=================================
+      LEAGUE TABLE CONTAINER
+=================================
+*/
+
+/* Container for table and header */
+#league-table-container 
+{
+    width: 60%;
+    margin-right: 20px;
+}
+
+/*
+============================================
+        LEAGUE TABLE COLUMNS STYLE
+============================================
+*/
+
+/* Club Logo Column in Table Style */
+#league-table-club-logo-column {
+    width: 25px; 
+
+    /* Club Logo Style */
+    #league-table-club-logo 
+    {      
+        width: 25px;
+        margin-right: 5px;
+        cursor: pointer;
+    }
+
+}
+
+/* Club Name Column in Table Style */
+#league-table-club-name-column 
+{
+    font-weight: 500;
+    cursor: pointer;
+}
+
+/* Points Column in Table Style */
+#league-table-points-column 
+{
+    font-weight: bolder;
+}
+
+/*
+==============================================================
+                 DYNAMIC PAGE WIDTH STYLES
+==============================================================
+*/
+
+/* Stlye for Screens Smaller than 1230px */
+@media (max-width: 1230px) 
+{
+    #league-table-container 
+    {
+        align-items: center;
+        width: 75%;
+        min-width: 580px;
+    }   
+}

public/assets/css/generated-pages/league-pages/league-top-scorers.css

@@ -0,0 +1,77 @@
+/*
+=================================
+    TABLE AND HEADER CONTAINER
+=================================
+*/
+
+#league-top-scorers-container 
+{
+    width: 40%;
+}
+
+/*
+===========================
+    TABLE COLUMNS STYLE
+===========================
+*/
+
+#league-top-scorers-goals-column 
+{
+    text-align: center;
+    font-size: 20px;
+    font-weight: bolder;
+}
+
+#league-top-scorers-logo 
+{
+    width: 25px;
+    margin: 0 15px;
+    cursor: pointer;
+}
+
+#league-top-scorers-player-name-column 
+{
+
+    font-size: 14px;
+    font-weight: bold;
+    padding-right: 15px;
+}
+
+#league-top-scorers-club-name-column 
+{
+    padding-right: 15px;
+}
+
+/*
+==============================================================
+                       HOVER STYLES
+==============================================================
+*/
+
+#league-top-scorers-stats-container tbody tr:hover 
+{
+
+    border: 1px solid lightgray;
+
+    #league-top-scorers-logo {
+        width: 32px;
+    }
+    
+    #league-top-scorers-club-name-column {
+        text-decoration: underline;
+        cursor: pointer;
+    }
+}
+
+/*
+==============================================================
+                 DYNAMIC PAGE WIDTH STYLES
+==============================================================
+*/
+
+@media (max-width: 1230px) {
+    #league-top-scorers-logo {
+        align-items: center;
+        width: 75%;
+    }   
+}

public/assets/css/homepage/homepage.css

@@ -0,0 +1,81 @@
+/* Container for all page contents */
+#page-container {
+  width: 100%;
+  text-align: center; /* Center the content horizontally */
+}
+
+/* Styling for text at top of the page */
+#leagues-header {
+  font-family: 'Scottsdale-Italic';
+  display: inline-block; /* Ensure the width is based on content */
+  border-bottom: 1.5px solid #999696; /* Adjust the color and thickness as needed */
+}
+
+/* Position cards in the center of the screen */
+#card-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Stylize League Cards */
+#league-card {
+  width: 500px; /* Set width of the banner to 100% of viewport width */
+  height: 150px;
+  margin: 20px;
+  text-align: center; /* Center the content horizontally */
+  background: linear-gradient(to right, white, rgb(245, 245, 245), rgb(227, 227, 227)); /* Gradient from white to gray */
+  padding: 10px; /* Adjust padding as needed */
+  position: relative; /* Needed for absolute positioning */
+  overflow: hidden; /* Hide the overflowing skewed content */
+  transform: skewX(-20deg); /* Skew the banner to create a triangular side */
+  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transition for smooth transformation and box-shadow */
+  cursor: pointer; /* Change cursor to pointer on hover */
+  box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.4);
+
+  display: flex; /* Use flexbox for layout */
+  justify-content: center; /* Center content horizontally */
+  align-items: center; /* Center content vertically */
+}
+
+/* Counter skew contents to keep inner content straight*/
+#card-contents {
+  display: flex; /* Use flexbox for layout */
+  align-items: center; /* Align items vertically */
+  transform: skewX(20deg); /* Skew the banner to create a triangular side */
+}
+
+
+#league-card:hover {
+  transform: skewX(-20deg) scale(1.05); /* Increase scale on hover to make it pop */
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); /* Add box-shadow on hover for depth effect */
+}
+
+#league-card::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 1%; /* Width of the red strip */
+  background-color: red; /* Red color */
+}
+
+
+#logo {
+  width: 30%; /* Set width for logo */
+  max-height: 100px;
+  max-width: 100px;
+  margin-right: 20px;
+}
+
+.title-wrapper {
+  width: 70%; /* Set width for title wrapper */
+}
+
+#title-logo {
+  max-height: 80px;
+  max-width: 250px;
+}
+
+

public/assets/css/login-and-registration/account.css

@@ -0,0 +1,98 @@
+#account-pane {
+    display: none;
+}
+
+#account-pane-content-container {
+    display: flex;
+    flex-direction: column;
+    padding: 10px;
+}
+
+
+
+#account-header-container {
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+    border-bottom: 3px solid red;
+
+    #username {
+        font-size: 23px;
+        font-weight: 500;
+    }  
+}
+
+#account-favorite-teams-container {
+    padding: 10px;
+}
+
+.account-favorite-teams-card {
+    
+    display: flex;
+    align-items: center; /* Align items vertically in the center */
+    background-color: white;
+    border: 1px solid rgb(218, 218, 218);
+    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
+    border-radius: 8px;
+    padding: 10px 20px;
+    margin: 10px 0;    
+}
+
+.account-favorite-teams-card:hover {
+    transform: scale(1.01); /* Scale the row by 1.1 on hover */
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
+
+    #account-favorite-teams-card-title {
+        text-decoration: underline;
+    }
+
+    #account-favorite-teams-card-logo {
+        transform: scale(1.02); /* Scale the row by 1.1 on hover */
+    }
+}
+
+#account-favorite-teams-card-logo {
+    width: 35px;
+    margin-right: 15px;
+}
+
+#account-favorite-teams-card-title {
+    font-weight: 600;
+    text-decoration: none;
+    color: black;
+}
+
+
+/* Delete Button CSS --> Switches Between Icons */
+
+/* Align the delete button container */
+#account-delete-favorite-team-button-container {
+    margin-left: auto; /* Align the container all the way to the right */
+    display: inline-block;
+    position: relative;
+}
+
+.account-delete-favorite-team-button {
+    width: 15px;
+    cursor: pointer;
+    width: 18px;
+    height: auto;
+    
+}
+
+/* Don't show hover icon on start */
+#account-delete-favorite-team-button-hover {
+    display: none; /* Initially hide the hover image */
+}
+
+    /* Hover Effects */
+
+    #account-delete-favorite-team-button-container:hover #account-delete-favorite-team-button {
+        display: none; /* Hide the default image when hovered over */
+    }
+
+    #account-delete-favorite-team-button-container:hover #account-delete-favorite-team-button-hover {
+        display: inline-block; /* Display the hover image when hovered over */
+    }

public/assets/css/login-and-registration/login.css

@@ -0,0 +1,6 @@
+#login-pane {
+    display: none;
+}
+
+
+  

public/assets/css/login-and-registration/login_and_registration.css

@@ -0,0 +1,71 @@
+
+/* Standardized Styling for Login, Registration, and Account Panes */
+.account-portal-container {
+    width: 400px;
+    position: absolute;
+    top: 150px; /* Adjust this value as needed */
+    right: 20px; /* Adjust this value as needed */
+    z-index: 5;
+    background: linear-gradient(to bottom, white, rgb(245, 245, 245), rgb(227, 227, 227)); /* Gradient from white to gray */
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
+    border: 1px solid gray;
+}
+
+/* Set Login and Registration Panes to be same size */
+#login-pane, #register-pane {
+    height: 408px;
+}
+
+/* */
+.form-container {
+    width: 70%; /* Adjust width as needed */
+    margin: 0 auto; /* Center horizontally */
+    text-align: center; /* Center text horizontally */
+}
+
+.account-portal-button {
+    text-decoration: none;
+
+    padding: 5px 10px;
+    background-color: red;
+    border-color: red;
+
+    border: 1px solid red;
+    border-radius: 8px;
+    color: white;
+}
+
+.account-portal-button:hover {
+    background-color: darkred;
+    border-color: darkred;
+    color: white;
+}
+
+body {
+    font-family: "Golos Text";
+}
+
+/* Apply modern styling to inputs and select elements */
+#form-control,
+select {
+    width: 70%; /* Make inputs and select elements same width */
+    padding: 0.375rem 0.75rem; /* Example padding */
+    font-size: 1rem; /* Example font size */
+    line-height: 1.5; /* Example line height */
+    color: #495057; /* Example text color */
+    background-color: #fff; /* Example background color */
+    border: 1px solid #ced4da; /* Example border */
+    border-radius: 0.25rem; /* Example border radius */
+    margin-bottom: 10px; /* Example margin */
+}
+
+/* Adjust styling for form labels */
+.form-label {
+    font-weight: bold; /* Example font weight */
+}
+
+/* Adjust styling for buttons */
+.btn {
+    margin-top: 30px; /* Example margin */
+}
+

public/assets/css/login-and-registration/registration.css

@@ -0,0 +1,3 @@
+#register-screen-container {
+    display: none;
+}

public/assets/css/navigation-bar/navigation-bar.css

@@ -0,0 +1,68 @@
+
+
+.sticky {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 1000; /* Adjust as needed */
+}
+
+#navigation-bar-container {
+    background-color: hsl(0, 98%, 40%);
+    box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.4);
+    height: 50px;
+
+    display: flex;
+}
+
+#logo {
+    color: white;
+    text-decoration: none;
+    font-family: 'Scottsdale-Italic';
+    font-size: 25px;
+    margin-right: 10px;
+
+    transition: font-size 0.3s ease; /* Adding transition for smooth effect */
+}
+
+#logo:hover {
+    font-size: 30px;
+}
+
+#favorite-teams-container {
+    margin-right: 25px;
+
+    a {
+        text-decoration: none; 
+    }
+    
+    img {
+        width: 28px;
+        height: auto;
+        max-height: 30px;
+        margin: 0 4px;
+        cursor: pointer;
+
+        transition: width 0.3s ease; /* Adding transition for smooth effect */
+    }
+
+    img:hover {
+        width: 32px;
+    }
+}
+
+#user-profile-button {
+    width: 25px;
+    cursor: pointer;
+    transition: width 0.3s ease; /* Adding transition for smooth effect */
+}
+
+#user-profile-button:hover {
+    width: 30px;
+}
+
+/* Add logo font face */
+@font-face {
+    font-family: 'Scottsdale-Italic';
+    src: url('../../fonts/Scottsdale-Italic.ttf') format('truetype');
+}

public/assets/css/navigation-bar/scoreboard-header/game-card.css

@@ -0,0 +1,87 @@
+.scoreboard-league-container {
+    height: 100%;
+}
+
+#game-card {
+    
+    display: inline-block; /* Display cards as inline-block to allow them to sit next to each other */
+    margin: 0px;
+    height: 100%;
+    background: linear-gradient(to right, white, rgb(245, 245, 245), rgb(227, 227, 227)); /* Gradient from white to gray */
+    padding: 10px; /* Adjust padding as needed */
+    position: relative; /* Needed for absolute positioning */
+    overflow: hidden; /* Hide the overflowing skewed content */
+    transform: skewX(-20deg); /* Skew the banner to create a triangular side */
+    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transition for smooth transformation and box-shadow */
+    
+    transition: transform 0.4s ease; /* Add transition for smooth effect */
+}
+
+
+
+#game-card:hover {
+    transform: skewX(-20deg) scale(1.05); /* Increase scale on hover to make it pop */
+    z-index: 998;
+    box-shadow: 
+        -10px 0 20px rgba(0, 0, 0, 0.3), /* Shadow on the left side */
+        10px 0 20px rgba(0, 0, 0, 0.3), /* Shadow on the right side */
+        0 0 20px rgba(0, 0, 0, 0.3); /* Default shadow */
+}
+
+
+/* Entire Card Information Body */
+.score-card-body {
+    display: flex;
+    width: 100%;
+    justify-content: flex-end
+    align-items: center;
+    transform: skewX(20deg); /* Counter-skew the content to maintain its appearance */
+}
+
+/* Left Side of Container (Scores) */
+.card-team-container {
+    flex: 70%;
+    flex-grow: 1; /* Both team containers will grow to occupy equal width */
+    flex-direction: column; /* Stacks each team over one another */
+}
+
+/* Right Side of Container (Time) */
+.card-game-information-container {
+    flex: 30%;
+    display: flex;
+    align-items: center;
+    margin: 0px 15px;
+}
+
+/* Center the time in game */
+#time {
+    margin: 0;
+}
+
+/* Container for each team in card's information */
+.team {
+    align-items: center; /* Center items vertically */
+    padding: 5px;
+}
+
+.team a {
+    color: black;
+    display: flex;
+    text-decoration: none;
+    margin: 0;
+}
+
+
+.team p {
+    margin: 0; /* Remove default margin */
+}
+
+#team-name {
+    margin-right: 10px;
+}
+
+.team img {
+    max-width: 20px; /* Set the width of the image to 100% of its container */
+    max-height: 20px; /* Maintain the aspect ratio */
+    margin-right: 10px;
+}

public/assets/css/navigation-bar/scoreboard-header/scoreboard.css

@@ -0,0 +1,26 @@
+.scoreboard-container {
+    overflow-x: auto; /* Enable horizontal scrolling */
+    overflow-y: hidden; /* Disable vertical scrolling */
+    white-space: nowrap; /* Prevent cards from wrapping to the next line */
+    border: 1px solid rgb(202, 2, 2);
+    margin: 0px;
+    height: 90px;
+
+    
+
+    background-color: rgb(255, 255, 255);
+
+    /* Inner box shadow */
+    box-shadow: inset 0px 0px 15px rgba(77, 76, 76, 0.3);
+}
+
+/* Hide scrollbar in scoreboard for webkit browsers */
+.scoreboard-container::-webkit-scrollbar {
+    display: none;
+}
+
+.scoreboard-league-container {
+    margin: 0px;
+    
+}
+

public/assets/js/club-page/favorite-button.js

@@ -0,0 +1,73 @@
+document.addEventListener("DOMContentLoaded", function() {
+    var favoriteButton = document.getElementById("club-favorite-button");
+    if (favoriteButton) {
+        favoriteButton.addEventListener("click", function() {
+            var userID = document.getElementById("userID").value;
+            var teamID = document.getElementById("teamID").value;
+            var teamName = document.getElementById("teamName").value;
+            var teamLogo = document.getElementById("teamLogo").value;
+            
+            if (favoriteButton.src.includes("/favorited.png")) {
+                removeFavoriteTeam(userID, teamID);
+            } else {
+                addFavoriteTeam(userID, teamID, teamName, teamLogo);
+            }
+        });
+    }
+});
+
+async function addFavoriteTeam(userID, teamID, teamName, teamLogo){
+    try {
+        const response = await fetch('/favteam/add', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                userID: userID,
+                teamID: teamID,
+                teamName: teamName,
+                teamLogo: teamLogo
+            })
+        });
+
+        if (!response.ok) {
+            throw new Error('Failed to add favorite team');
+        }
+
+        if (response.status === 200) {
+            console.log('New favorite team added successfully.');
+            var favoriteButton = document.getElementById("club-favorite-button");
+            favoriteButton.src = "/img/club-page/favorited.png";
+            location.reload(); // Refresh the page
+        }
+
+    } catch (error) {
+        console.error('Error adding favorite team:', error);
+    }
+}
+
+async function removeFavoriteTeam(userID, teamID) {
+    try {
+        const response = await fetch('/favteam/remove', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                userID: userID,
+                teamID: teamID
+            })
+        });
+        
+        if (response.status === 200) {
+            console.log('Favorite team removed successfully.');
+            var favoriteButton = document.getElementById("club-favorite-button");
+            favoriteButton.src = "/img/club-page/unfavorited.png";
+            location.reload(); // Refresh the page
+        }
+
+    } catch (error) {
+        console.error('Error removing favorite team:', error);
+    }
+}

public/assets/js/league-page/change-goal-difference-color.js

@@ -0,0 +1,29 @@
+document.addEventListener("DOMContentLoaded", function() {
+    var goalDifferenceCells = document.querySelectorAll("#league-table-goal-difference-column"); // Selecting the cells in the goal_difference column
+
+    goalDifferenceCells.forEach(function(cell) {
+        var goalDifference = parseInt(cell.textContent);
+        var color;
+
+        if (goalDifference < 0) 
+        {
+            // Gradually darken the text color for negative goal differences
+            var darkenFactor = Math.ceil(goalDifference / -10); // Calculate the darken factor
+            var shade = Math.max(0, 255 - darkenFactor * 25); // Calculate the shade of red
+            color = "rgb(" + shade + ", 0, 0)"; // Create the color value
+        } 
+        else if (goalDifference > 0) 
+        {
+            // Gradually darken the text color for positive goal differences
+            var darkenFactor = Math.floor(goalDifference / 10); // Calculate the darken factor
+            var shade = Math.max(0, 155 - darkenFactor * 15); // Adjusted the starting point to make greens darker
+            color = "rgb(0, " + shade + ", 0)"; // Create the color value
+        } 
+        else 
+        {
+            color = "inherit"; // If goal difference is 0, leave text color unchanged
+        }
+
+        cell.style.color = color; // Apply the calculated color
+    });
+});

public/assets/js/navigation-bar/navigation-bar-follow.js

@@ -0,0 +1,45 @@
+// navbar-sticky.js
+
+// Function to add sticky behavior to the navbar
+function makeNavbarSticky() {
+  // Get the navigation bar element
+  var navbar = document.getElementById("navigation-bar-container");
+  var accountPane = document.querySelector(".account-portal-container"); // Use querySelector instead of getElementByClassName
+
+  // Get the initial offset of the navbar from the top of the page
+  var navbarOffset = navbar.offsetTop;
+
+  // Function to add sticky behavior when scrolling
+  function stickyNavbar() {
+    // Check if the current scroll position is greater than or equal to the initial offset of the navbar
+    if (window.pageYOffset >= navbarOffset) {
+      // Add the 'fixed-top' class to make the navbar sticky
+      navbar.classList.add("fixed-top");
+      // Add padding to the body to prevent content from jumping when the navbar becomes sticky
+      document.body.style.paddingTop = navbar.offsetHeight + "px";
+      
+      // Adjust the position of the account pane
+      accountPane.style.position = "fixed"; // Make the account pane fixed
+      accountPane.style.top = navbar.offsetHeight + 20 + 'px'; // Move the account pane below the navbar
+    } else {
+      // Remove the 'fixed-top' class to make the navbar non-sticky
+      navbar.classList.remove("fixed-top");
+      // Reset the padding of the body
+      document.body.style.paddingTop = 0;
+      accountPane.style.position = "absolute"; // Make the account pane fixed
+      
+      // Set the top position of the account pane to be 150px off the top
+      accountPane.style.top = "160px";
+    }
+  }
+
+  // Call the stickyNavbar function when the page is scrolled
+  window.onscroll = function() {
+    stickyNavbar();
+  };
+}
+
+// Call the makeNavbarSticky function when the page loads
+window.onload = function() {
+  makeNavbarSticky();
+};

public/assets/js/navigation-bar/user/delete-account-favorite-club.js

@@ -0,0 +1,36 @@
+document.addEventListener("DOMContentLoaded", function() {
+    var deleteButtons = document.querySelectorAll("#account-delete-favorite-team-button-hover");
+    deleteButtons.forEach(function(deleteButton) {
+        deleteButton.addEventListener("click", function() {
+            var userID = deleteButton.getAttribute("userID");
+            var teamID = deleteButton.getAttribute("teamID");
+            
+            if (deleteButton.src.includes("/delete-club-hover.png")) {
+                removeAccountFavoriteTeam(userID, teamID);
+            }
+        });
+    });
+});
+
+async function removeAccountFavoriteTeam(userID, teamID) {
+    try {
+        const response = await fetch('/favteam/remove', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                userID: userID,
+                teamID: teamID
+            })
+        });
+        
+        if (response.status === 200) {
+            console.log('Favorite team removed successfully.');
+            location.reload(); // Refresh the page
+        }
+
+    } catch (error) {
+        console.error('Error removing favorite team:', error);
+    }
+}

public/assets/js/navigation-bar/user/login-and-register-page-linking.js

@@ -0,0 +1,41 @@
+$(document).ready(function() {
+
+  // When #user is clicked
+  $('#user-profile-button').click(function() {
+
+    $('#register-screen-container').hide();
+    // Toggle the visibility of the login container
+    $('#login-pane').toggle();
+  });
+
+  $('#register-page-login-button').click(function (event) {
+    event.preventDefault(); // Prevent the default action of following the link
+
+    $('#register-screen-container').hide();
+    $('#login-pane').show();
+  });
+
+});
+
+$(document).ready(function () {
+  
+  // Listen for click event on the register button
+  $('#register-button').click(function (event) {
+    event.preventDefault(); // Prevent the default action of following the link
+
+    $('#login-pane').hide();
+    // Show the register container
+    $('#register-screen-container').show();
+  });
+    
+});
+
+$(document).ready(function() {
+
+  // When #user is clicked
+  $('#user-profile-button').click(function() {
+
+    // Toggle the visibility of the login container
+    $('#account-pane').toggle();
+  });
+});