committed files

ProjectSourceCode/src/resources/css/homepage/homepage.css

@@ -9,7 +9,6 @@
   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 */
@@ -24,9 +23,7 @@
   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 */
@@ -36,21 +33,24 @@
   cursor: pointer; /* Change cursor to pointer on hover */
   box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.4);
 
-  /* Counter skew contents to keep inner content straight*/
-  #card-contents {
-    transform: skewX(20deg); /* Counter-skew the content to maintain its appearance */
-  }
+  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;
@@ -60,3 +60,22 @@
   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;
+}
+
+

ProjectSourceCode/src/resources/css/league-page/league-page.css

@@ -0,0 +1,28 @@
+#league-page-body {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+}
+
+#league-information-container {
+    height: 100px;
+    background-color: #f0f0f0; /* Example background color */
+    /* Add any other styling you need for the league information container */
+}
+
+#league-stats-container {
+    display: flex;
+    flex: 1;
+}
+
+#league-table-container {
+    flex: 1;
+    background-color: #eaeaea; /* Example background color */
+    /* Add any other styling you need for the league table container */
+}
+
+#top-scorers-container {
+    flex: 1;
+    background-color: #dcdcdc; /* Example background color */
+    /* Add any other styling you need for the top scorers container */
+}

ProjectSourceCode/src/resources/css/navigation-bar/login.css

@@ -1,10 +1,14 @@
+#login-container {
+    display: none;
+}
+
 #login-page {
     width: 400px;
     height: fit-content;
     position: absolute;
     top: 150px; /* Adjust this value as needed */
     right: 20px; /* Adjust this value as needed */
-    z-index: 10;
+    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;

ProjectSourceCode/src/resources/css/navigation-bar/navigation-bar.css

@@ -35,6 +35,7 @@
 
 #user {
     width: 25px;
+    cursor: pointer;
     transition: width 0.3s ease; /* Adding transition for smooth effect */
 }
 

ProjectSourceCode/src/resources/css/navigation-bar/scoreboard-header/scoreboard.css

@@ -1,5 +1,6 @@
 .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;

ProjectSourceCode/src/resources/js/homepage/create-league-routes.js

@@ -1,25 +0,0 @@
-// create-league-routes.js
-
-const express = require('express');
-const exphbs = require('express-handlebars');
-
-const app = express();
-
-app.engine('hbs', exphbs({ extname: '.hbs' }));
-app.set('view engine', 'hbs');
-
-// Define the redirectToLeaguePage function
-function redirectToLeaguePage(leagueName) {
-    window.location.href = '/views/pages/league-page/league-page.hbs?leagueName=' + encodeURIComponent(leagueName);
-}
-
-// Define a route to render the league-page.hbs template
-app.get('/league-page/:leagueName', (req, res) => {
-  const leagueName = req.params.leagueName;
-  // Here you might fetch data related to the clicked league
-  // Pass the data to the template and render it
-  res.render('league-page/league-page', { leagueName });
-});
-
-// Export the app and redirectToLeaguePage function
-module.exports = { app, redirectToLeaguePage };

ProjectSourceCode/src/resources/js/homepage/redirect-to-league-url.js

@@ -0,0 +1,7 @@
+function redirectToLeaguePage(leagueName) {
+  // Append the league name to the URL
+  var url = "/league/" + leagueName.toLowerCase().replace(/\s+/g, '-');
+  
+  // Redirect to the league page
+  window.location.href = url;
+}

ProjectSourceCode/src/resources/js/navigation-bar/user/login.js

@@ -1,8 +1,10 @@
 $(document).ready(function() {
+
   // When #user is clicked
   $('#user').click(function() {
     // Toggle the visibility of the login container
     $('#login-container').toggle();
   });
-});
   
+  
+});

ProjectSourceCode/src/resources/js/registration/league-and-team-select.js

@@ -0,0 +1,40 @@
+
+document.addEventListener("DOMContentLoaded", function() {
+
+
+    const league_select = document.getElementById('league_dropdown');
+    const team_select = document.getElementById('team_dropdown');
+  
+    league_select.addEventListener('change', updateTeamSelect);
+  
+    function updateTeamSelect() {
+      var selectedLeague = league_select.value;
+      var teamSelect = team_select;
+      
+      // Clear existing options
+      teamSelect.innerHTML = "";
+      
+      // Add options based on the selected value from the first select element
+      if (selectedLeague === "La Liga") {
+        // Add options for La Liga
+        addOption(teamSelect, "Option 1 for LL", "option1A");
+        addOption(teamSelect, "Option 2 for LL", "option2A");
+      } else if (selectedLeague === "Serie A") {
+        // Add options for Serie A
+        addOption(teamSelect, "Team 1 in Serie A", "option1B");
+        addOption(teamSelect, "Team 2 in Serie A", "option2B");
+      } else {
+        // Add options for Bundesliga
+        addOption(teamSelect, "Option 1 for Bun", "option1C");
+        addOption(teamSelect, "Option 2 for Bun", "option2C");
+      }
+    }
+  
+    function addOption(selectElement, text, value) {
+      var option = document.createElement("option");
+      option.text = text;
+      option.value = value;
+      selectElement.add(option);
+    }
+  });
+  

ProjectSourceCode/src/resources/routes/league-pages/generate-league-routes.js

@@ -0,0 +1,18 @@
+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/:leagueName', (req, res) => {
+        // Extract the league name from the URL parameters
+        const leagueName = req.params.leagueName;
+
+        // Render the league page template using Handlebars
+        res.render('pages/league-page', { leagueName: leagueName });
+    });
+};
+
+

ProjectSourceCode/src/resources/routes/navigation-bar/current-match-information.js

@@ -7,7 +7,7 @@ const fetchMatchesData = async (req, res, next) => {
         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(3, 'days');
+        const yesterdayUnformatted = moment().subtract(4, 'days');
 
         // Format yesterday's date as YYYY-MM-DD
         const yesterday = yesterdayUnformatted.format('YYYY-MM-DD');