Updates to file structure

src/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%;
+    }
+
+
+
+
+
+
+
+
+
+
+
+

src/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;
+}

src/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 */
+    }
+}

src/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;
+    }
+}
+
+    

src/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;
+    }   
+}

src/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%;
+    }   
+}

src/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;
+}
+
+

src/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 */
+    }

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

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

src/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 */
+}
+

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

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

src/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');
+}

src/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;
+}

src/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;
+    
+}
+

src/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);
+    }
+}

src/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
+    });
+});

src/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();
+};

src/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);
+    }
+}

src/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();
+  });
+});

src/assets/middleware/clubs-page/get-current-club-information.js

@@ -0,0 +1,74 @@
+const axios = require('axios');
+
+// Middleware function to fetch clubs data
+const fetchClubsData = async (req, res, next) => {
+    try {
+        // Extract club ID from the URL
+        const clubID = req.params.clubID;
+
+        // Make GET request to the API endpoint using the club ID
+        const response = await axios.get(`http://api.football-data.org/v4/teams/${clubID}/?offset=&limit=`, {
+            headers: {
+                'X-Auth-Token': '0aa1ed31245d4a36b1ef5a79150324b3', // Add your API key here
+            },
+        });
+
+        // Extract relevant data from the API response
+        const clubData = response.data;
+        // res.locals.user = users
+        // Attach the data to res.locals
+        res.locals.club = {
+            area: {
+                id: clubData.area.id,
+                name: clubData.area.name,
+                code: clubData.area.code,
+                club_flag: clubData.area.flag,
+            },
+            club_id: clubData.id,
+            name: clubData.name,
+            shortName: clubData.shortName,
+            tla: clubData.tla,
+            crest: clubData.crest,
+            address: clubData.address,
+            website: clubData.website,
+            founded: clubData.founded,
+            clubColors: clubData.clubColors,
+            venue: clubData.venue,
+            runningCompetitions: clubData.runningCompetitions.map(competition => ({
+                id: competition.id,
+                name: competition.name,
+                code: competition.code,
+                type: competition.type,
+                emblem: competition.emblem
+            })),
+            coach: {
+                id: clubData.coach.id,
+                firstName: clubData.coach.firstName,
+                lastName: clubData.coach.lastName,
+                name: clubData.coach.name,
+                dateOfBirth: clubData.coach.dateOfBirth,
+                nationality: clubData.coach.nationality,
+                contract: {
+                    start: clubData.coach.contract.start,
+                    until: clubData.coach.contract.until
+                }
+            },
+            squad: clubData.squad.map(player => ({
+                id: player.id,
+                name: player.name,
+                position: player.position,
+                dateOfBirth: player.dateOfBirth,
+                nationality: player.nationality
+            })),
+            staff: clubData.staff,
+            lastUpdated: clubData.lastUpdated
+        };
+        next();
+    } catch (error) {
+        console.error('Error fetching clubs data:', error);
+        res.locals.club = null; // Set to null if there's an error
+        next(); // Call next middleware or route handler
+    }
+};
+
+module.exports = fetchClubsData;

src/assets/middleware/leagues-page/get-current-league-information.js

@@ -0,0 +1,54 @@
+const axios = require('axios');
+
+// Middleware function to fetch leagues data
+const fetchLeaguesData = async (req, res, next) => {
+    try {
+        // Extract league ID from the URL
+        const leagueID = req.params.leagueID;
+
+        // Make GET request to the API endpoint using the league ID
+        const response = await axios.get(`http://api.football-data.org/v4/competitions/${leagueID}/standings?season`, {
+            headers: {
+                'X-Auth-Token': '0aa1ed31245d4a36b1ef5a79150324b3', // Add your API key here
+            },
+        });
+
+        // Extract relevant data from the API response
+        const leagueData = response.data;
+
+        // Attach the data to res.locals
+        //res.locals.username = req.session.user.username;
+        console.log(req.session.user)
+        res.locals.league = {
+            area: {
+                league_flag: leagueData.area.flag,
+            },
+            competition: {
+                league_id: leagueData.competition.id,
+                league_name: leagueData.competition.name,
+                league_emblem: leagueData.competition.emblem
+            },
+            standings: leagueData.standings[0].table.map(team => ({
+                table: {
+                    league_position: team.position,
+                    team_id: team.team.id,
+                    team_name: team.team.name,
+                    team_crest: team.team.crest
+                },
+                games_played: team.playedGames,
+                wins: team.won,
+                losses: team.lost,
+                draws: team.draw,
+                goal_difference: team.goalDifference,
+                points: team.points
+            })),
+        };
+        next();
+    } catch (error) {
+        console.error('Error fetching leagues data:', error);
+        res.locals.league = null; // Set to null if there's an error
+        next(); // Call next middleware or route handler
+    }
+};
+
+module.exports = fetchLeaguesData;

src/assets/middleware/leagues-page/get-current-league-top-scorers.js

@@ -0,0 +1,44 @@
+const axios = require('axios');
+
+// Middleware function to fetch leagues data
+const fetchLeagueScorerData = async (req, res, next) => {
+    try {
+        // Extract league ID from the URL
+        const leagueID = req.params.leagueID;
+
+        // Make GET request to the API endpoint using the league ID
+        const response = await axios.get(`http://api.football-data.org/v4/competitions/${leagueID}/scorers?season&limit=20`, {
+            headers: {
+                'X-Auth-Token': '0aa1ed31245d4a36b1ef5a79150324b3', // Add your API key here
+            },
+        });
+
+        // Extract relevant data from the API response
+        const scorerData = response.data;
+
+        // Attach the data to res.locals
+        res.locals.topScorers = {
+            scorers: scorerData.scorers.map(player => ({
+                player: {
+                    player_id: player.player.id,
+                    player_name: player.player.name,
+                },
+                team: {
+                    team_id: player.team.id,
+                    team_name: player.team.name,
+                    team_crest: player.team.crest,
+                },
+                games_played: player.playedMatches,
+                goals: player.goals,
+            }))
+        };
+
+        next();
+    } catch (error) {
+        console.error('Error fetching leagues data:', error);
+        res.locals.topScorers = null; // Set to null if there's an error
+        next(); // Call next middleware or route handler
+    }
+};
+
+module.exports = fetchLeagueScorerData;

src/assets/middleware/navigation-bar/convert-time.js

@@ -0,0 +1,33 @@
+// Convert finished matches to "FT"
+const convert_time = (req, res, next) => {
+    try {
+        // Access matches data from res.locals
+        const matches = res.locals.matches;
+
+        // Loop through matches and convert "FINISHED" to "FT" for minute
+        const convertedMatches = matches.map(match => {
+            if (match.minute === "FINISHED") {
+                match.minute = "FT";
+            }
+            else if (match.minute === "IN_PLAY") {
+                match.minute = "IP"
+            }
+            else if (match.minute === "TIMED") {
+                match.minute = "TM";
+            }
+            return match;
+        });
+
+        // Update res.locals with converted matches
+        res.locals.matches = convertedMatches;
+
+        // Proceed to the next middleware/route handler
+        next();
+    } catch (error) {
+        // If an error occurs, log it and proceed to the next middleware/route handler
+        console.error('Error converting finished matches:', error);
+        next();
+    }
+};
+
+module.exports = convert_time;

src/assets/middleware/navigation-bar/current-match-information.js

@@ -0,0 +1,68 @@
+const moment = require('moment');
+const axios = require('axios');
+
+// Middleware function to fetch matches data
+const fetchMatchesData = async (req, res, next) => {
+    try {
+        const today = moment().format('YYYY-MM-DD'); // Get today's date in YYYY-MM-DD format
+
+        // Subtract one day to get yesterday's date
+        const yesterdayUnformatted = moment().subtract(1, 'days');
+
+        // Format yesterday's date as YYYY-MM-DD
+        const yesterday = yesterdayUnformatted.format('YYYY-MM-DD');
+
+        // Array of years to fetch matches data
+        const league_ids = [2021, 2002, 2014, 2019, 2015, 2013];
+
+        // Array to store all matches data
+        let allMatches = [];
+
+        // Loop through each year and fetch matches data
+        for (const league_id of league_ids) {
+            const response = await axios({
+                url: `http://api.football-data.org/v4/competitions/${league_id}/matches`,
+                method: 'GET',
+                params: {
+                    dateFrom: yesterday, // Set dateFrom to yesterday's date
+                    dateTo: today, // Set dateTo to today's date
+                },
+                headers: {
+                    'X-Auth-Token': '0aa1ed31245d4a36b1ef5a79150324b3', // Add your API key here
+                },
+            });
+
+            // Extract relevant data from the API response
+            const matches = response.data.matches.map(match => ({
+                homeTeam: {
+                    teamID: match.homeTeam.id,
+                    name: match.homeTeam.tla,
+                    crest: match.homeTeam.crest,
+                },
+                awayTeam: {
+                    teamID: match.awayTeam.id,
+                    name: match.awayTeam.tla,
+                    crest: match.awayTeam.crest,
+                },
+                score: {
+                    homeScore: match.score.fullTime.home,
+                    awayScore: match.score.fullTime.away,
+                },
+                minute: match.status, // Set the minute of the game
+            }));
+
+            // Concatenate matches data to allMatches array
+            allMatches = allMatches.concat(matches);
+        }
+
+        // Attach all matches data to res.locals
+        res.locals.matches = allMatches;
+        next();
+    } catch (error) {
+        console.error('Error fetching matches data:', error);
+        res.locals.matches = []; // Set an empty array if there's an error
+        next(); // Call next middleware or route handler
+    }
+};
+
+module.exports = fetchMatchesData;

src/assets/routes/club-pages/generate-club-routes.js

@@ -0,0 +1,17 @@
+const express = require('express');
+const app = express();
+
+// generate-league-routes.js
+
+// Define a function to generate league routes
+module.exports = function generateClubRoutes(app) {
+    // Define a route to handle requests to "/league/:leagueName"
+    app.get('/club/:clubID', (req, res) => {
+        // Extract the league name from the URL parameters
+        const clubID = req.params.clubID;
+        // Render the league page template using Handlebars
+        res.render('pages/club-page', { clubID: clubID, });
+    });
+};
+
+

src/assets/routes/club-pages/redirect-to-club-url.js

@@ -0,0 +1,17 @@
+// Add click event listener to club logos
+document.querySelectorAll('#league-table-club-logo, #league-table-club-name-column, #league-top-scorers-logo, #league-top-scorers-club-name-column').forEach(element => {
+  element.addEventListener('click', (event) => {
+      // Get the club ID from the clicked club logo's clubID attribute
+      const clubId = element.getAttribute('clubID');
+      redirectToClubPage(clubId);
+  });
+});
+
+// Function to redirect to the club page
+function redirectToClubPage(clubID) {
+  // Append the club ID to the URL
+  var url = "/club/" + clubID;
+
+  // Redirect to the club page
+  window.location.href = url;
+}

src/assets/routes/league-pages/generate-league-routes.js

@@ -0,0 +1,17 @@
+const express = require('express');
+const app = express();
+
+// generate-league-routes.js
+
+// Define a function to generate league routes
+module.exports = function generateLeagueRoutes(app) {
+    // Define a route to handle requests to "/league/:leagueName"
+    app.get('/league/:leagueID', (req, res) => {
+        // Extract the league name from the URL parameters
+        const leagueID = req.params.leagueID;
+        // Render the league page template using Handlebars
+        res.render('pages/leagues-page', { leagueID: leagueID, user: user});
+    });
+};
+
+

src/assets/routes/league-pages/get-team-names-for-registry.js

@@ -0,0 +1,21 @@
+const axios = require('axios');
+
+const fetchTeamNames = async (selectedLeague) => {
+    try {
+        const response = await axios({
+            url: `http://api.football-data.org/v4/competitions/${selectedLeague}/teams`,
+            method: 'GET',
+            headers: {
+                'X-Auth-Token': '0aa1ed31245d4a36b1ef5a79150324b3',
+            },
+        });
+        
+        const teams = response.data.teams.map(team => team.name);
+        return teams;
+    } catch (error) {
+        console.error('Error fetching teams data:', error);
+        return [];
+    }
+};
+
+module.exports = fetchTeamNames;

src/assets/routes/league-pages/redirect-to-league-url.js

@@ -0,0 +1,7 @@
+function redirectToLeaguePage(leagueID) {
+  // Append the league name to the URL
+  var url = "/league/" + leagueID;
+  
+  // Redirect to the league page
+  window.location.href = url;
+}

src/views/layouts/main.hbs

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en" class="h-100">
+<head>
+    <!-- Add your head content here -->
+    {{> head}}
+</head>
+<body>
+    <!-- Render the scoreboard header on every page -->
+    {{> navigation-bar/scoreboard-header/scoreboard-header}}
+
+    <!-- Add your navigation -->
+    {{> navigation-bar/nav}}
+
+    <!-- Render the main content of each page -->
+    {{{body}}}
+
+    <!-- Add your footer -->
+    {{> footer}}
+</body>
+</html>

src/views/pages/clubs-page.hbs

@@ -0,0 +1,147 @@
+<div id="club-page-body" class="page-container">
+
+    <!-- Container on Top containing Club Information -->
+    <div id="club-header-container" class="information-container">
+        <img id="generated-page-header-logo" src="{{club.crest}}" alt="{{club.name}} Logo">
+        <h1 id="generated-page-header-title">{{club.name}}</h1>
+        <img id="generated-page-header-flag" src="{{club.area.club_flag}}" alt="{{club.name}} Flag">
+
+        {{#if user}}
+            {{#if isFav}}
+                <img id="club-favorite-button" src="/img/club-page/favorited.png" alt="Favorite Button">
+            {{else}}
+                <img id="club-favorite-button" src="/img/club-page/unfavorited.png" alt="Favorite Button">
+            {{/if}}
+
+        {{else}}
+            <img id="club-favorite-button" src="/img/club-page/cant-favorite.png" title="Please Sign In to Save a Favorite Club!">
+        {{/if}}
+
+<!-- Hidden input fields -->
+<input type="hidden" id="userID" value="{{user.userid}}">
+<input type="hidden" id="teamID" value="{{club.club_id}}">
+<input type="hidden" id="teamName" value="{{club.name}}">
+<input type="hidden" id="teamLogo" value="{{club.crest}}">
+    </div>
+
+    <div id="club-page-contents-container" class="page-content-container">
+
+        <!-- Container on Left Side containing Club Information -->
+        <div id="club-information-container" class="page-content-container">
+
+            <!-- Container for Club History Information -->
+            <div id="club-history-container" class="content-container">
+
+                <div id="club-information-table-header">
+                    <h2>Information</h2>
+                </div>
+
+                <div id="club-information-table-container" class="card-container">
+                    <table id="club-information-table">
+                        <tbody>
+                            <!-- Club Address Container -->
+                            <tr>
+                                <td>
+                                    <span style="font-weight: bold;">Club Address:</span><br>
+                                    {{club.address}}
+                                </td>
+                            </tr>
+
+                            <!-- Club Foundation Container -->
+                            <tr>
+                                <td>
+                                    <span style="font-weight: bold;">Founded</span><br>
+                                    {{club.founded}}
+                                </td>
+                            </tr>
+
+                            <!-- Manager Information Table -->
+                            <tr>
+                                <td>
+                                    <span style="font-weight: bold;">Manager</span><br>
+                                    <span>Name: {{club.coach.name}}</span><br>
+                                    <span>Nationality: {{club.coach.nationality}}</span><br>
+                                    <span>DOB: {{club.coach.dateOfBirth}}</span><br>
+                                    <span>Contract Start: {{club.coach.contract.start}}</span><br>
+                                    <span>Contract End: {{club.coach.contract.until}}</span><br>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div> <!-- End of Club History Table Container -->
+            </div> <!-- End of Club History Container -->
+
+            <!-- Container to Display Club's Current Competitions -->
+            <div id="club-competitions-container" class="content-container">
+
+                <div id="club-competitions-table-header">
+                    <h2>Competitions</h2>
+                </div>
+
+                <div id="club-competitions-table-container" class="card-container">
+                    <table id="club-competitions-table">
+                        <thead>
+                            <tr>
+                                <th>Name</th>
+                                <th></th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {{#each club.runningCompetitions}}
+                            <tr>
+                                <td><img id="competition-logo" src="{{emblem}}"></td>
+                                <td>{{name}}</td>
+                            </tr>
+                            {{/each}}
+                        </tbody>
+                    </table>
+                </div> <!-- End of Club Competitions Table Container -->
+            </div> <!-- End of Club Competitions Container -->
+        
+        </div> <!-- End of Club Information Container (Left 20%) -->
+
+        <!-- Container on Right Side containing Club Stats -->
+        <div id="club-stats-and-players-container" class="page-section-container">
+
+            <!-- Club Player Container -->
+            <div id="club-players-container" class="content-container">
+                
+                <div id="club-players-table-header" class="content-container">
+                    <h2>Players</h2>
+                </div>
+                
+                <div id="club-players-table-container" class="card-container">
+                    <table id="club-players-table" class="alternating-table">
+                        <thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Position</th>
+                                <th>DOB</th>
+                                <th>Nationality</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {{#each club.squad}}
+                            <tr>
+                                <td>{{name}}</td>
+                                <td>{{position}}</td>
+                                <td>{{dateOfBirth}}</td>
+                                <td>{{nationality}}</td>
+                            </tr>
+                            {{/each}}
+                        </tbody>
+                    </table>
+                </div> <!-- End of Club Players Table Container -->
+            </div> <!-- End of Club Players Container -->
+
+        </div> <!-- End of Club Stats Container -->
+    
+    </div>
+
+</div>
+
+
+
+
+
+

src/views/pages/home.hbs

@@ -0,0 +1,36 @@
+<div class="container mt-5" id="page-container">
+    <div id="league-cards-container" class="page-section-container">
+        <div class="row g-3" id="card-row">
+            <!-- 🇬🇧 Premier League -->
+            <a href="#" onclick="redirectToLeaguePage('2021')" class="card-link" id="league-card">
+                {{> homepage/league-card leagueName="Premier League" logo="./img/homepage/premier-league/icon.png" title="./img/homepage/premier-league/title.png" }}
+            </a>
+
+            <!-- 🇪🇸 La Liga -->
+            <a href="#" onclick="redirectToLeaguePage('2014')" class="card-link" id="league-card">
+                {{> homepage/league-card leagueName="La Liga" logo="./img/homepage/la-liga/icon.png" title="./img/homepage/la-liga/title.png" }}
+            </a>
+
+            <!-- 🇩🇪 Bundesliga -->
+            <a href="#" onclick="redirectToLeaguePage('2002')" class="card-link" id="league-card">
+                {{> homepage/league-card leagueName="Bundesliga" logo="./img/homepage/bundesliga/icon.png" title="./img/homepage/bundesliga/title.png"  }}
+            </a>
+
+            <!-- 🇮🇹 Serie A -->
+            <a href="#" onclick="redirectToLeaguePage('2019')" class="card-link" id="league-card">
+                {{> homepage/league-card leagueName="Serie A" logo="./img/homepage/serie-a/icon.png" title="./img/homepage/serie-a/title.png"}}
+            </a>
+
+            <!-- 🇫🇷 Ligue 1 -->
+            <a href="#" onclick="redirectToLeaguePage('2015')" class="card-link" id="league-card">
+                {{> homepage/league-card leagueName="Ligue 1" logo="./img/homepage/ligue-1/icon.png" title="./img/homepage/ligue-1/title.png"  }}
+            </a>
+
+            <!-- 🇧🇷 Brasileirao -->
+            <a href="#" onclick="redirectToLeaguePage('2013')" class="card-link" id="league-card">
+                {{> homepage/league-card leagueName="Brasileirao" logo="./img/homepage/brasileirao/icon.png" title="./img/homepage/brasileirao/title.png" }}
+            </a>
+
+        </div>
+    </div>
+</div>

src/views/pages/leagues-page.hbs

@@ -0,0 +1,90 @@
+<div id="league-page-body" class="page-container">
+
+    <!-- Container for all league information (logo, name, country, etc. ) <- top 100px -->
+    <div id="league-header-container" class="information-container">
+        <img id="generated-page-header-logo" src="{{league.competition.league_emblem}}" alt="{{league.competition.league_name}} Emblem">
+        <h1 id="generated-page-header-title">{{league.competition.league_name}}</h2>
+        <img id="generated-page-header-flag" src="{{league.area.league_flag}}" alt="{{league.competition.league_name}} Flag">
+    </div>
+
+    <!-- Container to display all stats for league <- bottom rest of the container -->
+    <div id="table-and-top-scorers-containers" class="page-content-container">
+
+        <!-- Container to display league table <- split 50% -->
+        <div id="league-table-container" class="content-container">
+
+            <!-- Put header above table container -->
+            <div id="league-table-header-container" class="header-container">
+                <h2>Table</h2>
+            </div>
+            
+            <!-- Container containing all league table stats -->
+            <div id="league-table-stats-container" class="card-container">
+                <table id="league-standings-table" class="alternating-table">
+                    <thead>
+                        <tr>
+                            <th>#</th>
+                            <th></th>
+                            <th>Club</th>
+                            <th>GP</th>
+                            <th>W</th>
+                            <th>L</th>
+                            <th>D</th>
+                            <th>GD</th>
+                            <th>Pts</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {{#each league.standings}}
+                        <tr>
+                            <td>{{table.league_position}}</td>
+                            <td id="league-table-club-logo-column"><img id="league-table-club-logo" clubID="{{table.team_id}}" src="{{table.team_crest}}" alt="{{table.team_name}} Crest"></td>
+                            <td><span id="league-table-club-name-column" clubID="{{table.team_id}}">{{table.team_name}}</span></td>
+                            <td>{{games_played}}</td>
+                            <td>{{wins}}</td>
+                            <td>{{losses}}</td>
+                            <td>{{draws}}</td>
+                            <td id="league-table-goal-difference-column">{{goal_difference}}</td>
+                            <td id="league-table-points-column">{{points}}</td>
+                        </tr>
+                        {{/each}}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+        <!-- Container to display top scorers for league <- Split 50% -->
+        <div id="league-top-scorers-container" class="content-container">
+
+            <div id="league-top-scorers-header-container" class="header-container">
+                <h2>Top Scorers</h2>
+            </div>
+
+            <div id="league-top-scorers-stats-container" class="card-container">
+                <table id="league-top-scorers-table">
+                    <thead>
+                        <tr>
+                            <th>Goals</th>
+                            <th></th>
+                            <th>Name</th>
+                            <th>Club</th>
+                            <th>GP</th>     
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {{#each topScorers.scorers}}
+                        <tr id="top-scorers-row">
+                            <td id="league-top-scorers-goals-column">{{goals}}</td>
+                            <td><img id="league-top-scorers-logo" clubID="{{team.team_id}}" src="{{team.team_crest}}" alt="{{table.team_name}} Crest"></img></td>
+                            <td id="league-top-scorers-player-name-column">{{player.player_name}}</td>
+                            <td id="league-top-scorers-club-name-column" clubID="{{team.team_id}}">{{team.team_name}}</td>
+                            <td>{{games_played}}</td>
+                        </tr>
+                        {{/each}}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+    </div>
+</div>

src/views/partials/club-page/player-card.hbs

@@ -0,0 +1,20 @@
+<div class="player-card" id="player-card">
+    <div class="player-card-body">
+        <table class="table">
+            <thead>
+                <tr>
+                    <th>Player Name</th>
+                    <th>Nationality</th>
+                    <th>Position</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>persons.name</td>
+                    <td>persons.nationality</td>
+                    <td>persons.position</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</div>

src/views/partials/club-page/player-hover.hbs

@@ -0,0 +1,5 @@
+<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="player-card tooltip">
+    Contract Start: {{contractStart}}
+    Contract End: {{contractEnd}}
+    {{/each}}
+</button>

src/views/partials/footer.hbs

@@ -0,0 +1,21 @@
+    <footer class="text-center text-muted w-100 mt-auto fixed-bottom">
+        <p>
+            &copy; 2024 - CSCI 3308 Group 6
+        </p>
+
+        <!-- Navigation Bar Scripts -->
+        <script src="/js/navigation-bar/navigation-bar-follow.js"></script>
+        <script src="/js/navigation-bar/user/login-and-register-page-linking.js"></script>
+        <script src="/js/navigation-bar/user/delete-account-favorite-club.js"></script>
+
+        <!-- Homepage Scripts -->
+        <script src="/routes/league-pages/redirect-to-league-url.js"></script>
+
+        <!-- League Pages Scripts -->
+        <script src="/js/league-page/change-goal-difference-color.js"></script>
+        <script src="/routes/club-pages/redirect-to-club-url.js"></script>
+
+        <!-- Club Pages Scripts -->
+        <script src="/js/club-page/favorite-button.js"></script>
+
+    </footer>

src/views/partials/head.hbs

@@ -0,0 +1,40 @@
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
+  <meta name="description" content="" />
+  <!-- Set the Content-Security-Policy header to allow inline scripts -->
+  <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' https://code.jquery.com https://cdn.jsdelivr.net https://stackpath.bootstrapcdn.com;">
+
+  <!--------------- CSS Stylesheets ---------------->
+
+  <!-- Linking forms.css -->
+  <link rel="stylesheet" type="text/css" href="/css/login-and-registration/login_and_registration.css">
+
+  <!-- Navigation Bar Stylesheets -->
+  <link rel="stylesheet" type="text/css" href="/css/navigation-bar/navigation-bar.css">
+  <link rel="stylesheet" type="text/css" href="/css/login-and-registration/login.css">
+  <link rel="stylesheet" type="text/css" href="/css/login-and-registration/registration.css">
+  <link rel="stylesheet" type="text/css" href="/css/login-and-registration/account.css">
+
+    <!-- Scoreboard Header Stylesheets -->
+    <link rel="stylesheet" type="text/css" href="/css/navigation-bar/scoreboard-header/scoreboard.css">
+    <link rel="stylesheet" type="text/css" href="/css/navigation-bar/scoreboard-header/game-card.css">
+
+  <!-- Home Page Stylesheets -->
+  <link rel="stylesheet" type="text/css" href="/css/homepage/homepage.css">
+
+  <!-- All Generated Pages CSS -->
+  <link rel="stylesheet" type="text/css" href="/css/generated-pages/generated-pages-styling.css">
+
+    <!-- League Page Stylesheets -->
+    <link rel="stylesheet" type="text/css" href="/css/generated-pages/league-pages/league-page.css">
+    <link rel="stylesheet" type="text/css" href="/css/generated-pages/league-pages/league-table.css">
+    <link rel="stylesheet" type="text/css" href="/css/generated-pages/league-pages/league-top-scorers.css">
+
+    <!-- Club Page Stylesheets -->
+    <link rel="stylesheet" type="text/css" href="/css/generated-pages/club-pages/club-page-layouts.css">
+    <link rel="stylesheet" type="text/css" href="/css/generated-pages/club-pages/club-page-styling.css">
+
+  <title>Group 6 Final Project</title>
+
+  <!-- Include Bootstrap CSS -->
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

src/views/partials/homepage/league-card.hbs

@@ -0,0 +1,9 @@
+<div class="banner">
+   <div class="content" id="card-contents">
+      <img id="logo" src={{logo}}>
+      <div class="title-wrapper">
+         <img id="title-logo" src={{title}}>
+         {{flag}}
+      </div>
+   </div>
+</div>

src/views/partials/message.hbs

@@ -0,0 +1,5 @@
+{{#if message}}
+  <div class="alert alert-{{#if error}}danger{{else}}success{{/if}}" role="alert">
+    {{ message }}
+  </div>
+{{/if}}

src/views/partials/navigation-bar/nav.hbs

@@ -0,0 +1,71 @@
+<!-- Include jQuery library -->
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+
+<!-- HTML structure -->
+<nav class="navbar navbar-expand-lg navbar-dark" id="navigation-bar-container">
+  <div class="container-fluid d-flex justify-content align-items-center">
+    <div>
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation" style="margin-right: 20px;">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <a class="logo" id="logo" href="/home">ScoreSpot</a>
+      <div id="line"></div>
+    </div>
+    <div class="collapse navbar-collapse" id="navbarToggler">
+      <ul class="navbar-nav mr-auto mt-2 mt-lg-0" id="navbar-list">
+
+        <li class="nav-item">
+          <a class="nav-link" href="/league/2021">Premier League</a>
+        </li>
+
+        <li class="nav-item">
+          <a class="nav-link" href="/league/2002">Bundesliga</a>
+        </li>
+        
+        <li class="nav-item">
+          <a class="nav-link" href="/league/2014">La Liga</a>
+        </li>
+
+        <li class="nav-item">
+          <a class="nav-link" href="/league/2019">Serie A</a>
+        </li>
+
+        <li class="nav-item">
+          <a class="nav-link" href="/league/2015">Ligue 1</a>
+        </li>
+
+        <li class="nav-item">
+          <a class="nav-link" href="/league/2013">Brasileirao</a>
+        </li>
+
+      </ul>
+    </div>
+
+    <div id="favorite-teams-container" class="logos-container">
+      {{#each fav_teams}}
+        <a href="/club/{{this.teamid}}">
+          <img id="teamlogo" src="{{this.teamlogo}}" alt="teamlogo">
+        </a>
+      {{/each}}
+    </div>
+
+    <div id="user-profile-button" class="user-icon">
+      <img src="/img/navigation-bar/user-menu/user-button.png" alt="Account" class="img-fluid">
+    </div>
+
+  </div>
+</nav>
+
+{{#if user.username}}
+<div class="account-portal" id="account-screen-container">
+  {{> navigation-bar/user-menu/account-screen}}
+</div>
+{{else}}
+<div class="account-portal" id="login-account-container">
+  {{> navigation-bar/user-menu/login}}
+</div>
+{{/if}}
+
+<div class="account-portal" id="register-screen-container">
+  {{> navigation-bar/user-menu/register}}
+</div>

src/views/partials/navigation-bar/scoreboard-header/game-card.hbs

@@ -0,0 +1,35 @@
+<div class="game-card" id="game-card">
+    <div class="score-card-body">
+
+        <!-- Left side (70%) -->
+        <div class="card-team-container">
+
+            <!-- Team 1 Name with Score -->
+            <div class="team">
+                <a href="/club/{{homeTeam.teamID}}">
+                    <img src="{{ homeTeam.crest }}" alt="{{ homeTeam.name }} Crest">
+                    <p id="team-name">{{ homeTeam.name }}</p> <!-- {{team1.name}} -->
+                    <p id="team-score">{{ score.homeScore }}</p>
+                </a>
+            </div>
+            <!-- Team 2 Name with Score -->
+            <div class="team">
+                <a href="/club/{{awayTeam.teamID}}">
+                    <img src="{{ awayTeam.crest }}" alt="{{ awayTeam.name }} Crest">
+                    <p id="team-name">{{ awayTeam.name }}</p> <!-- {{team1.name}} -->
+                    <p id="team-score">{{ score.awayScore }}</p>
+                </a>
+            </div>
+        </div>
+
+        <!-- Right side (30%) -->
+        <div class="card-game-information-container">
+            
+            <!-- Time -->
+            <div class="game-info">
+                <p id="time">{{ minute }}</p>
+            </div>
+        </div>
+
+    </div>
+</div>

src/views/partials/navigation-bar/scoreboard-header/scoreboard-header.hbs

@@ -0,0 +1,10 @@
+<div class="scoreboard-container" id="scoreboard">
+    <div class="scoreboard-league-container">
+        
+        <!-- Iterate over matches and insert a game card for each -->
+        {{#each matches}}
+            {{> navigation-bar/scoreboard-header/game-card}}
+        {{/each}}
+
+    </div>
+</div>

src/views/partials/navigation-bar/user-menu/account-screen.hbs

@@ -0,0 +1,32 @@
+<div class="account-portal-container" id="account-pane">
+    <div id="account-pane-content-container">
+        <div id="account-header-container">
+            <a id="username">Hello, {{user.username}}</a>
+            <div class="logout-container">
+                <a id="logout-button" class="account-portal-button" href="/logout">Logout</a>
+            </div>
+        </div>
+        <div id="account-favorite-teams-container">
+            <a id="account-favorite-teams-header">Favorite Teams:</a>
+            {{#each fav_teams}}
+            <div class="account-favorite-teams-card">
+                <div id="account-favorite-teams-card-logo-container">
+                    <a href="/club/{{this.teamid}}">
+                        <img id="account-favorite-teams-card-logo" src="{{this.teamlogo}}" alt="teamlogo">
+                    </a>
+                </div>
+
+                <a id="account-favorite-teams-card-title" href="/club/{{this.teamid}}">
+                    {{this.teamname}}
+                </a>
+
+                <div id="account-delete-favorite-team-button-container">
+                    <!-- Add a different image for hover effect -->
+                    <img id="account-delete-favorite-team-button" class="account-delete-favorite-team-button" src="/img/navigation-bar/user-menu/account-pane/delete-club.png" alt="Delete Favorite Team">
+                    <img id="account-delete-favorite-team-button-hover" class="account-delete-favorite-team-button" src="/img/navigation-bar/user-menu/account-pane/delete-club-hover.png" userID="{{this.userid}}" teamID="{{this.teamid}}" alt="Delete Favorite Team Hover" >
+                </div>
+            </div>
+            {{/each}}
+        </div>
+    </div>
+</div>

src/views/partials/navigation-bar/user-menu/login.hbs

@@ -0,0 +1,29 @@
+    <!-- Linking forms.css -->
+    <div class="account-portal-container" id="login-pane">
+      <div class="form-container" id="login-form">
+        <h1 class="mt-5 mb-4">Login</h1>
+
+        <!-- Check if message variable is present to display message partial -->
+        {{#if message}}
+        {{> message}}
+        {{/if}}
+
+        <form action="/login" method="POST" class="mt-3">
+
+          <div class="mb-3">
+          <label for="username" class="form-label">Username:</label>
+          <input type="text" class="form-control" id="username" name="username" required>
+          </div>
+
+          <div class="mb-3">
+          <label for="password" class="form-label">Password:</label>
+          <input type="password" class="form-control" id="password" name="password" required>
+          </div>
+
+          <button class="account-portal-button" type="submit" id="login-submit">Submit</button>
+
+        </form>
+
+        <p class="mt-3">Don't have an account? <a id="register-button" href="/home">Register</a></p>
+      </div>
+    </div>

src/views/partials/navigation-bar/user-menu/register.hbs

@@ -0,0 +1,29 @@
+<div class="account-portal-container" id="register-pane">
+  <div class="form-container">
+
+    <h1 class="mt-5 mb-4">Register</h1>
+
+    <!--- START OF FORM --->
+    <form action="/register" method="POST" class="mt-3"> <!-- Specify API route to DB -->
+    <!-- app.post('register') is found in index.js -->
+
+      <div class="mb-3" id="username-form">
+        <label for="username" class="form-label">Username:</label>
+        <input type="text" class="form-control" id="usernameInput" name="username" required>
+      </div>
+
+      <div class="mb-3" id="password-form">
+        <label for="password" class="form-label">Password:</label>
+        <input type="password" class="form-control" id="passwordInput" name="password" required>
+      </div>
+
+      <button type="submit" class="account-portal-button">Submit</button>
+
+    </form>
+    <!--- END OF FORM --->
+
+    <p class="mt-3">Already have an account? <a id="register-page-login-button" href="/login">Login</a></p>
+
+  </div>
+</div>
+