Fixes to file structure

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

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

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

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

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

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

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

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

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

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

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

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

public/assets/css/homepage/homepage.css

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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