Merge pull request #24 from LucasPatenaude/club-page-revision-prototype

Club page design and elements streamlined with league page template

ProjectSourceCode/node_modules/.bin/_mocha

@@ -1,12 +1 @@
-#!/bin/sh
+../mocha/bin/_mocha
-basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
-
-case `uname` in
-    *CYGWIN*|*MINGW*|*MSYS*) basedir=`cygpath -w "$basedir"`;;
-esac
-
-if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../mocha/bin/_mocha" "$@"
-else 
-  exec node  "$basedir/../mocha/bin/_mocha" "$@"
-fi

ProjectSourceCode/node_modules/.bin/esparse

@@ -1,12 +1 @@
-#!/bin/sh
+../esprima/bin/esparse.js
-basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
-
-case `uname` in
-    *CYGWIN*|*MINGW*|*MSYS*) basedir=`cygpath -w "$basedir"`;;
-esac
-
-if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../esprima/bin/esparse.js" "$@"
-else 
-  exec node  "$basedir/../esprima/bin/esparse.js" "$@"
-fi

ProjectSourceCode/node_modules/.bin/esvalidate

@@ -1,12 +1 @@
-#!/bin/sh
+../esprima/bin/esvalidate.js
-basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
-
-case `uname` in
-    *CYGWIN*|*MINGW*|*MSYS*) basedir=`cygpath -w "$basedir"`;;
-esac
-
-if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../esprima/bin/esvalidate.js" "$@"
-else 
-  exec node  "$basedir/../esprima/bin/esvalidate.js" "$@"
-fi

ProjectSourceCode/node_modules/.bin/flat

@@ -1,12 +1 @@
-#!/bin/sh
+../flat/cli.js
-basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
-
-case `uname` in
-    *CYGWIN*|*MINGW*|*MSYS*) basedir=`cygpath -w "$basedir"`;;
-esac
-
-if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../flat/cli.js" "$@"
-else 
-  exec node  "$basedir/../flat/cli.js" "$@"
-fi

ProjectSourceCode/node_modules/.bin/he

@@ -1,12 +1 @@
-#!/bin/sh
+../he/bin/he
-basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
-
-case `uname` in
-    *CYGWIN*|*MINGW*|*MSYS*) basedir=`cygpath -w "$basedir"`;;
-esac
-
-if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../he/bin/he" "$@"
-else 
-  exec node  "$basedir/../he/bin/he" "$@"
-fi

ProjectSourceCode/node_modules/.bin/js-yaml

@@ -1,12 +1 @@
-#!/bin/sh
+../js-yaml/bin/js-yaml.js
-basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
-
-case `uname` in
-    *CYGWIN*|*MINGW*|*MSYS*) basedir=`cygpath -w "$basedir"`;;
-esac
-
-if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../js-yaml/bin/js-yaml.js" "$@"
-else 
-  exec node  "$basedir/../js-yaml/bin/js-yaml.js" "$@"
-fi

ProjectSourceCode/node_modules/.bin/mocha

@@ -1,12 +1 @@
-#!/bin/sh
+../mocha/bin/mocha
-basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
-
-case `uname` in
-    *CYGWIN*|*MINGW*|*MSYS*) basedir=`cygpath -w "$basedir"`;;
-esac
-
-if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../mocha/bin/mocha" "$@"
-else 
-  exec node  "$basedir/../mocha/bin/mocha" "$@"
-fi

ProjectSourceCode/node_modules/.bin/nodemon

@@ -1,12 +1 @@
-#!/bin/sh
+../nodemon/bin/nodemon.js
-basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
-
-case `uname` in
-    *CYGWIN*|*MINGW*|*MSYS*) basedir=`cygpath -w "$basedir"`;;
-esac
-
-if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../nodemon/bin/nodemon.js" "$@"
-else 
-  exec node  "$basedir/../nodemon/bin/nodemon.js" "$@"
-fi

ProjectSourceCode/node_modules/.bin/npm-run-all

@@ -1,12 +1 @@
-#!/bin/sh
+../npm-run-all/bin/npm-run-all/index.js
-basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
-
-case `uname` in
-    *CYGWIN*|*MINGW*|*MSYS*) basedir=`cygpath -w "$basedir"`;;
-esac
-
-if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../npm-run-all/bin/npm-run-all/index.js" "$@"
-else 
-  exec node  "$basedir/../npm-run-all/bin/npm-run-all/index.js" "$@"
-fi

ProjectSourceCode/node_modules/.bin/pidtree

@@ -1,12 +1 @@
-#!/bin/sh
+../pidtree/bin/pidtree.js
-basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
-
-case `uname` in
-    *CYGWIN*|*MINGW*|*MSYS*) basedir=`cygpath -w "$basedir"`;;
-esac
-
-if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../pidtree/bin/pidtree.js" "$@"
-else 
-  exec node  "$basedir/../pidtree/bin/pidtree.js" "$@"
-fi

ProjectSourceCode/node_modules/.bin/resolve

@@ -1,12 +1 @@
-#!/bin/sh
+../resolve/bin/resolve
-basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
-
-case `uname` in
-    *CYGWIN*|*MINGW*|*MSYS*) basedir=`cygpath -w "$basedir"`;;
-esac
-
-if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../resolve/bin/resolve" "$@"
-else 
-  exec node  "$basedir/../resolve/bin/resolve" "$@"
-fi

ProjectSourceCode/node_modules/.bin/run-p

@@ -1,12 +1 @@
-#!/bin/sh
+../npm-run-all/bin/run-p/index.js
-basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
-
-case `uname` in
-    *CYGWIN*|*MINGW*|*MSYS*) basedir=`cygpath -w "$basedir"`;;
-esac
-
-if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../npm-run-all/bin/run-p/index.js" "$@"
-else 
-  exec node  "$basedir/../npm-run-all/bin/run-p/index.js" "$@"
-fi

ProjectSourceCode/node_modules/.bin/run-s

@@ -1,12 +1 @@
-#!/bin/sh
+../npm-run-all/bin/run-s/index.js
-basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
-
-case `uname` in
-    *CYGWIN*|*MINGW*|*MSYS*) basedir=`cygpath -w "$basedir"`;;
-esac
-
-if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../npm-run-all/bin/run-s/index.js" "$@"
-else 
-  exec node  "$basedir/../npm-run-all/bin/run-s/index.js" "$@"
-fi

ProjectSourceCode/node_modules/mocha/node_modules/.bin/mkdirp

@@ -1,12 +1 @@
-#!/bin/sh
+../mkdirp/bin/cmd.js
-basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
-
-case `uname` in
-    *CYGWIN*|*MINGW*|*MSYS*) basedir=`cygpath -w "$basedir"`;;
-esac
-
-if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../mkdirp/bin/cmd.js" "$@"
-else 
-  exec node  "$basedir/../mkdirp/bin/cmd.js" "$@"
-fi

ProjectSourceCode/node_modules/mocha/node_modules/.bin/which

@@ -1,12 +1 @@
-#!/bin/sh
+../which/bin/which
-basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
-
-case `uname` in
-    *CYGWIN*|*MINGW*|*MSYS*) basedir=`cygpath -w "$basedir"`;;
-esac
-
-if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../which/bin/which" "$@"
-else 
-  exec node  "$basedir/../which/bin/which" "$@"
-fi

ProjectSourceCode/node_modules/node-environment-flags/node_modules/.bin/semver

@@ -1,12 +1 @@
-#!/bin/sh
+../semver/bin/semver
-basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
-
-case `uname` in
-    *CYGWIN*|*MINGW*|*MSYS*) basedir=`cygpath -w "$basedir"`;;
-esac
-
-if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../semver/bin/semver" "$@"
-else 
-  exec node  "$basedir/../semver/bin/semver" "$@"
-fi

ProjectSourceCode/node_modules/normalize-package-data/node_modules/.bin/semver

@@ -1,12 +1 @@
-#!/bin/sh
+../semver/bin/semver
-basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
-
-case `uname` in
-    *CYGWIN*|*MINGW*|*MSYS*) basedir=`cygpath -w "$basedir"`;;
-esac
-
-if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../semver/bin/semver" "$@"
-else 
-  exec node  "$basedir/../semver/bin/semver" "$@"
-fi

ProjectSourceCode/node_modules/npm-run-all/node_modules/.bin/semver

@@ -1,12 +1 @@
-#!/bin/sh
+../semver/bin/semver
-basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
-
-case `uname` in
-    *CYGWIN*|*MINGW*|*MSYS*) basedir=`cygpath -w "$basedir"`;;
-esac
-
-if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../semver/bin/semver" "$@"
-else 
-  exec node  "$basedir/../semver/bin/semver" "$@"
-fi

ProjectSourceCode/node_modules/npm-run-all/node_modules/.bin/which

@@ -1,12 +1 @@
-#!/bin/sh
+../which/bin/which
-basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
-
-case `uname` in
-    *CYGWIN*|*MINGW*|*MSYS*) basedir=`cygpath -w "$basedir"`;;
-esac
-
-if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../which/bin/which" "$@"
-else 
-  exec node  "$basedir/../which/bin/which" "$@"
-fi

ProjectSourceCode/node_modules/superagent/node_modules/.bin/mime

@@ -1,12 +1 @@
-#!/bin/sh
+../mime/cli.js
-basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
-
-case `uname` in
-    *CYGWIN*|*MINGW*|*MSYS*) basedir=`cygpath -w "$basedir"`;;
-esac
-
-if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../mime/cli.js" "$@"
-else 
-  exec node  "$basedir/../mime/cli.js" "$@"
-fi

ProjectSourceCode/node_modules/tar/node_modules/.bin/mkdirp

@@ -1,12 +1 @@
-#!/bin/sh
+../mkdirp/bin/cmd.js
-basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
-
-case `uname` in
-    *CYGWIN*|*MINGW*|*MSYS*) basedir=`cygpath -w "$basedir"`;;
-esac
-
-if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../mkdirp/bin/cmd.js" "$@"
-else 
-  exec node  "$basedir/../mkdirp/bin/cmd.js" "$@"
-fi

ProjectSourceCode/src/resources/css/club-pages/club-page.css

@@ -1,91 +0,0 @@
-#club-page-body {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-}
-
-#club-page-body {
-    padding: 50px;
-}
-
-#club-crest {
-    text-align: center;
-}
-
-#club-area-flag-row {
-    text-align: center;
-}
-
-#club-area-flag {
-    width : 150px;
-}
-
-#club-players-container {
-    padding: 30px;
-}
-
-#top-scorers-container {
-    padding : 30px
-}
-
-#club-information-container {
-    height: 100px;
-    width: fit-content;
-    margin: 20px;
-    background: linear-gradient(to right, white, rgb(245, 245, 245), rgb(227, 227, 227)); /* Gradient from white to gray */
-    padding: 10px 20px; /* Adjust padding as needed */
-    transform: skewX(-20deg); /* Skew the banner to create a triangular side */
-    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 */
-    align-items: center; /* Center content vertically */
-
-    /* Add any other styling you need for the club information container */
-}
-
-#club-information-container::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    width: 8px; /* Width of the red strip */
-    background-color: red; /* Red color */
-  }
-
-#club-logo {
-    margin: 0px 20px;
-    transform: skewX(20deg); /* Skew the banner to create a triangular side */
-    height: 80px;
-}
-
-#club-title {
-    transform: skewX(20deg); /* Skew the banner to create a triangular side */
-    margin-right: 20px;
-}
-
-#club-flag {
-
-    transform: skewX(20deg); /* Skew the banner to create a triangular side */
-    height: 20px;
-    margin-right: 200px;
-}
-
-#club-stats-container {
-    width: 100%;
-    display: flex;
-    flex: 1;
-}
-
-#club-stats-container .container {
-    margin: 0 10px;
-
-    background-color: #eaeaea; /* Example background color */
-
-    border: 1px solid gray;
-    border-radius: 8px;
-
-    box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.4);
-    /* Add any other styling you need for the club table container */
-}

ProjectSourceCode/src/resources/css/club-pages/club-top-scorers.css

@@ -1,6 +0,0 @@
-#club-top-scorers-container {
-    flex: 1;
-    background-color: #dcdcdc; /* Example background color */
-    width: 40%;
-    /* Add any other styling you need for the top scorers container */
-}

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

ProjectSourceCode/src/resources/css/generated-pages/club-pages/club-page-styling.css

@@ -0,0 +1,4 @@
+/* Container for all stats and player cards */
+#club-stats-and-players-container {
+    width: 80%;
+}

ProjectSourceCode/src/resources/css/generated-pages/generated-pages-styling.css

@@ -1,11 +1,10 @@
 /*
 ==============================================================
-                     OVERALL PAGE STYLES
+                 ENTIRE PAGE CONTAINER
 ==============================================================
 */
 
-#league-page-body 
+.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 */
@@ -15,6 +14,11 @@
         flex-direction: column; /* Arrange child elements vertically */
 }
 
+.page-content-container {
+    display: flex;
+    flex-direction: row;
+}
+
 /*
 =================================
     LEAGUE INFORMATION HEADER
@@ -22,7 +26,7 @@
 */
 
 /* Stylization for League Information Header Card */
-#league-information-container 
+.information-container
 {
     /* --- POSITION CONTAINER --- */
     align-items: center; /* Center content vertically */
@@ -38,6 +42,18 @@
     transform: skewX(-20deg); /* Skew the banner to create a triangular side */
     box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.4);
 
+    /* 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 */
+    }
+
     /* --- FORMAT CHILD ITEMS (logo, league name, flag) --- */
     display: flex; /* Enable flexbox layout */
     flex-direction: row; /* Arrange child elements horizontally */
@@ -49,20 +65,8 @@
     ===========================
     */
 
-    /* Adds Red Diagonal Strip at the end of the #league-information-container */
-    #league-information-container::after
-    {
-        content: '';
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        width: 8px; /* Width of the red strip */
-        background-color: red; /* Red color */
-    }
-
     /* Styling for League Logo in League Information Header */
-    #league-logo 
+    #generated-page-header-logo 
     {
         margin: 0px 30px;
         transform: skewX(20deg); /* Skew the banner to create a triangular side */
@@ -70,14 +74,14 @@
     }
 
     /* Styling for League Title in League Information Header */
-    #league-title 
+    #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 */
+    /* Styling for Flag in League Information Header */
-    #league-flag 
+    #generated-page-header-flag 
     {
         transform: skewX(20deg); /* Skew the banner to create a triangular side */
         height: 20px;
@@ -90,13 +94,8 @@
 =============================================
 */
     
-#table-and-top-scorers-containers {
+/* Styling for All Card Containers on Generated Pages */
-    display: flex;
+.card-container
-    flex-direction: row;
-}
-
-/* Styling for Standings and Top Scorers Cards */
-#table-stats-container, #top-scorers-stats-container 
 {
     /* --- POSITION CONTAINER --- */
     margin: 0 10px;
@@ -111,32 +110,61 @@
     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 Standings and Top Scorers Cards */
+/* Hover Styling for All Card Containers on Generated Pages */
-    #table-stats-container:hover, #top-scorers-stats-container:hover 
+.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 
-                 DYNAMIC PAGE WIDTH STYLES
-==============================================================
-*/
-
-/* Width of Screen is Less Than 950px */
-@media (max-width: 1230px) 
 {
-    #table-and-top-scorers-containers {
+    /* Create border around row on hover */
-        display: flex;
+    border: 1px solid lightgray;
-        flex-direction: column;
+    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 */
+    }
+}

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

ProjectSourceCode/src/resources/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: 30px;
+}
+
+/*
+============================================
+        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;
+    }   
+}

ProjectSourceCode/src/resources/css/generated-pages/league-pages/league-top-scorers.css

@@ -0,0 +1,76 @@
+/*
+=================================
+    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-player-name-column {
+        text-decoration: underline;
+    }
+}
+
+/*
+==============================================================
+                 DYNAMIC PAGE WIDTH STYLES
+==============================================================
+*/
+
+@media (max-width: 1230px) {
+    #league-top-scorers-logo {
+        align-items: center;
+        width: 75%;
+    }   
+}

ProjectSourceCode/src/resources/css/league-pages/league-table.css

@@ -1,131 +0,0 @@
-/*
-=================================
-    TABLE ADN HEADER CONTAINER
-=================================
-*/
-
-/* Container for table and header */
-#league-table-container 
-{
-    width: 60%;
-    justify-content: center;
-    align-items: center;
-
-    margin-right: 30px;
-
-    transition: transform 0.3s ease; /* Add smooth transition effect */
-}
-
-/*
-=================================
-        TABLE CONTAINER
-=================================
-*/
-
-/* Container for Table */
-#table-stats-container 
-{
-   width: 100%;    
-}
-
-/* Table that holds all the standing information */
-#standings-table, .table
-{
-    width: 100%;
-    padding: 15px;
-
-    /* Table Header Styling */
-    th 
-    {
-        border-bottom: 3px solid red; /* Add red bottom border */
-    }
-
-    /* Data in Row Style */
-    td
-    {
-        padding: 15px;
-
-    }
-
-    /* Every Odd Row in Table Style */
-    tbody tr:nth-child(odd) 
-    {
-        background-color: #d2d2d2; /* Light gray for odd rows */
-    }
-}
-
-    /*
-    ===========================
-        TABLE COLUMNS STYLE
-    ===========================
-    */
-
-    /* Club Logo Column in Table Style */
-    #club-logo-column {
-        width: 25px; 
-
-        /* Club Logo Style */
-        #table-club-logo 
-        {      
-            width: 25px;
-            margin-right: 5px;
-            cursor: pointer;
-        }
-
-    }
-
-    /* Club Name Column in Table Style */
-    #club-name-column 
-    {
-        font-weight: 500;
-        cursor: pointer;
-    }
-
-    /* Points Column in Table Style */
-    #points-column 
-    {
-        font-weight: bolder;
-    }
-
-/*
-==============================================================
-                       HOVER STYLES
-==============================================================
-*/
-
-/* Add hover effect to table rows */
-#standings-table tbody tr:hover 
-{
-    /* Create border around row on hover */
-    border: 1px solid lightgray;
-    border-radius: 10px;
-
-    /* Make club logo larger on hover */
-    #table-club-logo 
-    {
-        width: 32px;
-    }
-
-    /* Undeline club name on hover */
-    #club-name-column 
-    {
-        text-decoration: underline; /* Add underline effect */
-    }
-}
-
-/*
-==============================================================
-                 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;
-    }   
-}

ProjectSourceCode/src/resources/css/league-pages/top-scorers.css

@@ -1,96 +0,0 @@
-/*
-=================================
-    TABLE ADN HEADER CONTAINER
-=================================
-*/
-
-#top-scorers-container 
-{
-    width: 40%;
-}
-
-#top-scorers-stats-container {
-
-    /* Table Header Styling */
-    th 
-    {
-        border-bottom: 3px solid red; /* Add red bottom border */
-    }
-
-    tr 
-    {
-        padding: 3px;
-    }
-
-    /* Data in Row Style */
-    td
-    {
-        padding: 5px;
-    }
-}
-
-    /*
-    ===========================
-        TABLE COLUMNS STYLE
-    ===========================
-    */
-
-    #goals-column 
-    {
-        text-align: center;
-        font-size: 20px;
-        font-weight: bolder;
-    }
-
-    #top-scorers-logo 
-    {
-        width: 25px;
-        margin: 0 15px;
-        cursor: pointer;
-    }
-
-    #player-name-column 
-    {
-    
-        font-size: 14px;
-        font-weight: bold;
-        padding-right: 15px;
-    }
-    
-    #club-name-column 
-    {
-        padding-right: 15px;
-    }
-
-/*
-==============================================================
-                       HOVER STYLES
-==============================================================
-*/
-
-#top-scorers-stats-container tbody tr:hover 
-{
-
-    border: 1px solid lightgray;
-
-    #top-scorers-logo {
-        width: 32px;
-    }
-    
-    #club-name-column {
-        text-decoration: underline;
-    }
-}
-
-/*
-==============================================================
-                 DYNAMIC PAGE WIDTH STYLES
-==============================================================
-*/
-
-@media (max-width: 1230px) {
-    #top-scorers-container {
-        align-items: center;
-        width: 75%;
-    }   
-}

ProjectSourceCode/src/resources/routes/club-pages/redirect-to-club-url.js

@@ -1,5 +1,5 @@
 // Add click event listener to club logos
-document.querySelectorAll('#table-club-logo, #club-name, #top-scorers-logo, #club-name-column').forEach(element => {
+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');

ProjectSourceCode/src/views/pages/clubs-page.hbs

@@ -1,66 +1,44 @@
-<!DOCTYPE html>
+<div id="club-page-body" class="page-container">
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Club Details</title>
-</head>
-<body>
-<div class="container" id="club-page-body">
-    <div class="container" id="club-stats-container">
-        <div class="container" id="club-players-container">
-            <h2>Players</h2>
-            <ul id="players-list"></ul>
-            <table id="players-table"  class = "table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Position</th>
-                            <th>DOB</th>
-                            <th>Nationality</th>
 
-                        </tr>
+    <!-- Container on Top containing Club Information -->
-                    </thead>
+    <div id="club-header-container" class="information-container">
-                    <tbody>
+        <img id="generated-page-header-logo" src="{{club.crest}}" alt="{{club.name}} Logo">
-                        {{#each club.squad}}
+        <h1 id="generated-page-header-title">{{club.name}}</h1>
-                        <tr>
+        <img id="generated-page-header-flag" src="{{club.area.club_flag}}" alt="{{club.name}} Flag">
-                            <td>{{name}}</td>
-                            <td>{{position}}</td>
-                            <td>{{dateOfBirth}}</td>
-                            <td>{{nationality}}</td>
-                        </tr>
-                        {{/each}}
-                    </tbody>
-                </table>
     </div>
 
-        <div class="container" id="top-scorers-container">
+    <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>
-            <ul id="scorers-list"></ul>
+                </div>
-            <table id="top-scorers-table" class = "table">
+
+                <div id="club-information-table-container" class="card-container">
+                    <table id="club-information-table">
                         <tbody>
-                    <tr>
+                            <!-- Club Address Container -->
-                        <td id = "club-crest">
-                            <img src = {{club.crest}}>  
-                        </td>
-                    </tr>
-                    <tr>
-                        <td id = "club-area-flag-row">
-                            <img id = "club-area-flag" src = {{club.area.club_flag}}>  
-                        </td>
-                    </tr>
                             <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>
@@ -71,13 +49,20 @@
                                     <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>
-            <ul id="competitions-list"></ul>
+                </div>
-            <table id="players-table"  class = "table">
+
+                <div id="club-competitions-table-container" class="card-container">
+                    <table id="club-competitions-table">
                         <thead>
                             <tr>
                                 <th>Name</th>
@@ -91,10 +76,53 @@
                             {{/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>
 
 
-</body>
+
-</html>
+
+
+

ProjectSourceCode/src/views/pages/home.hbs

@@ -1,6 +1,6 @@
 <div class="container mt-5" id="page-container">
     <h1 class="mb-4 underlined-header" id="leagues-header">Leagues</h1>
-    <div class="card-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">

ProjectSourceCode/src/views/pages/leagues-page.hbs

@@ -1,25 +1,26 @@
 <div id="league-page-body" class="page-container">
+
     <!-- Container for all league information (logo, name, country, etc. ) <- top 100px -->
-    <div id="league-information-container" class="information-container">
+    <div id="league-header-container" class="information-container">
-        <img id="league-logo" src="{{league.competition.league_emblem}}" alt="{{league.competition.league_name}} Emblem">
+        <img id="generated-page-header-logo" src="{{league.competition.league_emblem}}" alt="{{league.competition.league_name}} Emblem">
-        <h1 id="league-title">{{league.competition.league_name}}</h2>
+        <h1 id="generated-page-header-title">{{league.competition.league_name}}</h2>
-        <img id="league-flag" src="{{league.area.league_flag}}" alt="{{league.competition.league_name}} Flag">
+        <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="stats-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="stats-container">
+        <div id="league-table-container" class="content-container">
 
             <!-- Put header above table container -->
-            <div id="table-header-container" class="header">
+            <div id="league-table-header-container" class="header-container">
                 <h2>Table</h2>
             </div>
             
             <!-- Container containing all league table stats -->
-            <div id="table-stats-container" class="stats-container">
+            <div id="league-table-stats-container" class="card-container">
-                <table id="standings-table" class = "table">
+                <table id="league-standings-table" class="alternating-table">
                     <thead>
                         <tr>
                             <th>#</th>
@@ -37,14 +38,14 @@
                         {{#each league.standings}}
                         <tr>
                             <td>{{table.league_position}}</td>
-                            <td id="club-logo-column"><img id="table-club-logo" clubID="{{table.team_id}}" src="{{table.team_crest}}" alt="{{table.team_name}} Crest"></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="club-name-column" clubID="{{table.team_id}}">{{table.team_name}}</span></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="goal-difference-column">{{goal_difference}}</td>
+                            <td id="league-table-goal-difference-column">{{goal_difference}}</td>
-                            <td id="points-column">{{points}}</td>
+                            <td id="league-table-points-column">{{points}}</td>
                         </tr>
                         {{/each}}
                     </tbody>
@@ -53,13 +54,14 @@
         </div>
 
         <!-- Container to display top scorers for league <- Split 50% -->
-        <div id="top-scorers-container" class="stats-container">
+        <div id="league-top-scorers-container" class="content-container">
-            <div id="top-scorers-header-container" class="header">
+
+            <div id="league-top-scorers-header-container" class="header-container">
                 <h2>Top Scorers</h2>
             </div>
 
-            <div id="top-scorers-stats-container" class="stats-container">
+            <div id="league-top-scorers-stats-container" class="card-container">
-                <table>
+                <table id="league-top-scorers-table">
                     <thead>
                         <tr>
                             <th>Goals</th>
@@ -72,10 +74,10 @@
                     <tbody>
                         {{#each topScorers.scorers}}
                         <tr id="top-scorers-row">
-                            <td id="goals-column">{{goals}}</td>
+                            <td id="league-top-scorers-goals-column">{{goals}}</td>
-                            <td><img id="top-scorers-logo" clubID="{{team.team_id}}" src="{{team.team_crest}}" alt="{{table.team_name}} Crest"></img></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="player-name-column">{{player.player_name}}</td>
+                            <td id="league-top-scorers-player-name-column">{{player.player_name}}</td>
-                            <td id="club-name-column" clubID="{{team.team_id}}">{{team.team_name}}</td>
+                            <td id="league-top-scorers-club-name-column" clubID="{{team.team_id}}">{{team.team_name}}</td>
                             <td>{{games_played}}</td>
                         </tr>
                         {{/each}}

ProjectSourceCode/src/views/partials/head.hbs

@@ -4,6 +4,7 @@
   <!-- 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 ---------------->
 
   <!-- CSS on All Pages -->
   <link rel="stylesheet" type="text/css" href="/css/all-pages-style.css">
@@ -22,15 +23,17 @@
   <!-- Home Page Stylesheets -->
   <link rel="stylesheet" type="text/css" href="/css/homepage/homepage.css">
 
-  <!-- League Page Stylesheets -->
+  <!-- All Generated Pages CSS -->
-  <link rel="stylesheet" type="text/css" href="/css/league-pages/league-page.css">
+  <link rel="stylesheet" type="text/css" href="/css/generated-pages/generated-pages-styling.css">
-  <link rel="stylesheet" type="text/css" href="/css/league-pages/league-table.css">
-  <link rel="stylesheet" type="text/css" href="/css/league-pages/top-scorers.css">
 
     <!-- League Page Stylesheets -->
-  <link rel="stylesheet" type="text/css" href="/css/club-pages/club-page.css">
+    <link rel="stylesheet" type="text/css" href="/css/generated-pages/league-pages/league-page.css">
-  <link rel="stylesheet" type="text/css" href="/css/club-pages/players-table.css">
+    <link rel="stylesheet" type="text/css" href="/css/generated-pages/league-pages/league-table.css">
-  <link rel="stylesheet" type="text/css" href="/css/club-pages/club-top-scorers.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>