Merge branch 'main' of github.com:LucasPatenaude/ScoreSpot

.gitignore

@@ -1,2 +1,2 @@
-node_modules
+ProjectSourceCode/node_modules
 .DS_Store

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 3001
+}

ProjectSourceCode/package.json

@@ -9,6 +9,7 @@
         "express": "^4.6.1",
         "express-handlebars": "^7.1.2",
         "express-session": "1.17.3",
+        "moment": "^2.30.1",
         "nodemon": "2.0.20",
         "pg-promise": "^10.11.1"
     },

ProjectSourceCode/src/index.js

@@ -12,6 +12,7 @@ const bodyParser = require('body-parser');
 const session = require('express-session'); // To set the session object. To store or access session data, use the `req.session`, which is (generally) serialized as JSON by the store.
 const bcrypt = require('bcryptjs'); //  To hash passwords
 const axios = require('axios'); // To make HTTP requests from our server. We'll learn more about it in Part C.
+const moment = require('moment'); // To extract current time data
 
 // *****************************************************
 // <!-- Section 2 : Connect to DB -->
@@ -80,13 +81,33 @@ app.use(express.static(path.join(__dirname, 'resources')));
 // <!-- Section 4 : API Routes -->
 // *****************************************************
 
+/************************ 
+ Header Scoreboard Routes
+*************************/
+
+const fetchMatchesData = require('./resources/js/navigation-bar/scoreboard-header/current-match-routes');
+app.use(fetchMatchesData);
+
+const convert_time = require('./resources/js/navigation-bar/scoreboard-header/convert-time');
+app.use(convert_time);
+
+/************************ 
+ Homepage Routes
+*************************/
+
+/* const { app, redirectToLeaguePage } = require('ProjectSourceCode/src/resources/js/homepage/create-league-routes.js');
+
+// Serve static files
+app.use(express.static('public')); */
+
+
 /************************ 
  Login Page Routes
 *************************/
 
 // Redirect to the /login endpoint
 app.get('/', (req, res) => {
-    res.redirect('/login');
+    res.redirect('/home');
   });
   
   // Render login page for /login route
@@ -162,15 +183,13 @@ app.get('/', (req, res) => {
   });
 
   /************************ 
-   Discover Page Routes
+   Home Page Routes
   *************************/
 
-  // Render registration page for /register route
   app.get('/home', (req, res) => {
     res.render('pages/home');
   });
 
-
 // *****************************************************
 // <!-- Section 5 : Start Server-->
 // *****************************************************

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

@@ -1,6 +1,32 @@
-.banner {
+/* 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 */
@@ -8,30 +34,24 @@
   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);
+
+  /* Counter skew contents to keep inner content straight*/
+  #card-contents {
+    transform: skewX(20deg); /* Counter-skew the content to maintain its appearance */
+  }
 }
 
-.banner:hover {
+#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 */
 }
 
-.underlined-header {
-  font-family: 'Golos Text';
-  display: inline-block; /* Ensure the width is based on content */
-  border-bottom: 1.5px solid #999696; /* Adjust the color and thickness as needed */
-  width: 165px; /* Adjust the width as needed, for example, 50% of the header's width */
-}
 
-.content {
-  transform: skewX(20deg); /* Counter-skew the content to maintain its appearance */
-}
 
-.banner .content {
-  display: flex;
-  align-items: center;
-}
 
-.banner::after {
+
+#league-card::after {
   content: '';
   position: absolute;
   top: 0;

ProjectSourceCode/src/resources/css/login_and_registration.css

@@ -38,9 +38,9 @@ body {
 }
 
 /* Apply modern styling to inputs and select elements */
-.form-control,
+#form-control,
 select {
-    width: 100%; /* Make inputs and select elements same width */
+    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 */
@@ -51,6 +51,8 @@ select {
     margin-bottom: 10px; /* Example margin */
 }
 
+
+
 /* Adjust styling for form labels */
 .form-label {
     font-weight: bold; /* Example font weight */
@@ -61,4 +63,3 @@ select {
     margin-top: 10px; /* Example margin */
 }
 
-

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

@@ -0,0 +1,31 @@
+#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;
+    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;
+    border-radius: 8px;
+}
+
+#login-submit {
+    padding: 5px 10px;
+    background-color: red;
+    border-color: red;
+
+    border: 1px solid red;
+    border-radius: 8px;
+    color: white;
+}
+
+#login-submit:hover {
+    background-color: darkred;
+    border-color: darkred;
+    color: white;
+}
+
+
+  

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

@@ -0,0 +1,54 @@
+/* Add logo font face */
+@font-face {
+    font-family: 'Scottsdale-Italic';
+    src: url('../fonts/Scottsdale-Italic.ttf') format('truetype');
+}
+
+.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;
+}
+
+#user {
+    width: 25px;
+    transition: width 0.3s ease; /* Adding transition for smooth effect */
+}
+
+#user:hover {
+    width: 30px;
+}
+
+
+#line {
+    height: 100%; /* spans the entire height of the navigation bar */
+    width: 10px;
+    background-color: white; /* makes the line white */
+    transform: skewx(-20deg); /* rotates the line by 20 degrees */
+    transform-origin: top left; /* sets the rotation origin to top left */
+    margin-left: 10px; /* Add margin to separate the line from the logo */
+  }
+  

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

@@ -0,0 +1,82 @@
+.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 */
+    cursor: pointer; /* Change cursor to pointer on hover */
+    
+    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 {
+    display: flex; /* Keeps all items in a row */
+    align-items: center; /* Center items vertically */
+    padding: 5px;
+}
+
+
+.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;
+}

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

@@ -0,0 +1,25 @@
+.scoreboard-container {
+    overflow-x: auto; /* Enable horizontal 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;
+    
+}
+

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

@@ -0,0 +1,25 @@
+// 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/navigation-bar/navigation-bar-follow.js

@@ -0,0 +1,37 @@
+// 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");
+  
+    // 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";
+      } 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;
+      }
+    }
+  
+    // 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();
+  };
+  

ProjectSourceCode/src/resources/js/navigation-bar/scoreboard-header/convert-time.js

@@ -0,0 +1,30 @@
+// 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 === "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;

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

@@ -0,0 +1,66 @@
+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(3, '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]; /* Readd , 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/2021/matches`, /* Resinsert ${league_id} for 2021 */
+                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: {
+                    name: match.homeTeam.tla,
+                    crest: match.homeTeam.crest,
+                },
+                awayTeam: {
+                    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;

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

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

ProjectSourceCode/src/resources/js/selectFunctions.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/views/layouts/main.hbs

@@ -1,18 +1,20 @@
 <!DOCTYPE html>
 <html lang="en" class="h-100">
-
-    <!-- TODO: Add the head.hbs partial here -->
+<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}}
 
-    <!-- TODO: Add the nav.hbs partial here -->
-    {{> nav}}
-
-
+    <!-- Render the main content of each page -->
     {{{body}}}
 
-
-    <!-- TODO: Add the footer.hbs partial here -->
+    <!-- Add your footer -->
     {{> footer}}
-    
+</body>
 </html>

ProjectSourceCode/src/views/pages/home.hbs

@@ -1,29 +1,37 @@
-<body>
-  <div class="container mt-5">
-    <h1 class="mb-4 underlined-header">Leagues</h1>
+<div class="container mt-5" id="page-container">
+    <h1 class="mb-4 underlined-header" id="leagues-header">Leagues</h1>
     <div class="card-container">
-      <div class="row g-3">
-        
+        <div class="row g-3" id="card-row">
             <!-- 🇬🇧 Premier League -->
-        {{> league_table leagueName="Premier League" logo="./img/Premier_Icon.png" title="./img/Premier_Title.png"}}
+            <a href="#" onclick="redirectToLeaguePage('Premier League')" 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 -->
-        {{> league_table leagueName="La Liga" logo="./img/Laliga_Icon.png" title="./img/Laliga_Title.png"}}
+            <a href="#" onclick="redirectToLeaguePage('La Liga')" 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 -->
-        {{> league_table eventName="Event Name" eventDateTime="Date and Time"}}
+            <a href="#" onclick="redirectToLeaguePage('Bundesliga')" class="card-link" id="league-card">
+              {{> homepage/league-card leagueName="Bundesliga" logo="./img/homepage/la-liga/icon.png" title="./img/homepage/la-liga/title.png"}}
+            </a>
 
             <!-- 🇮🇹 Serie A -->
-        {{> league_table eventName="Event Name" eventDateTime="Date and Time"}}
+            <a href="#" onclick="redirectToLeaguePage('Serie A')" class="card-link" id="league-card">
+              {{> homepage/league-card leagueName="Serie A" logo="./img/homepage/la-liga/icon.png" title="./img/homepage/la-liga/title.png"}}
+            </a>
 
             <!-- 🇫🇷 Ligue 1 -->
-        {{> league_table eventName="Event Name" eventDateTime="Date and Time"}}
+            <a href="#" onclick="redirectToLeaguePage('Ligue 1')" class="card-link" id="league-card">
+              {{> homepage/league-card leagueName="Ligue 1" logo="./img/homepage/la-liga/icon.png" title="./img/homepage/la-liga/title.png"}}
+            </a>
 
-        <!-- 🇧🇷 Brasilerao -->
-        {{> league_table eventName="Event Name" eventDateTime="Date and Time"}}
+            <!-- 🇧🇷 Brasileirao -->
+            <a href="#" onclick="redirectToLeaguePage('Brasileirao')" class="card-link" id="league-card">
+              {{> homepage/league-card leagueName="Brasileirao" logo="./img/homepage/la-liga/icon.png" title="./img/homepage/la-liga/title.png"}}
+            </a>
 
         </div>
     </div>
-  </div>
-</body>
-
+</div>

ProjectSourceCode/src/views/pages/register.hbs

@@ -1,50 +1,76 @@
-<body class="container">
-  <div class="register-page">
+<div class="register-page">
   <div class="form-container">
     <h1 class="mt-5 mb-4">Register</h1>
-
     <form action="/register" 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>
+        <input type="text" class="form-control" id="usernameInput" 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>
+        <input type="password" class="form-control" id="passwordInput" name="password" required>
       </div>
-
-        <div class = "dropdowns">
-          <div id="league_dropdown">
-            <label for="password" class="form-label">Preferred League :</label><br>
-            <select id="dropdown">
-              <option value="option1">Premier League</option>
-              <option value="option2">La Liga</option>
-              <option value="option3">Bundesliga</option>
-              <option value="option3">Serie A</option>
-              <option value="option3">Ligue 1</option>
-              <option value="option3">Brasilerao</option>
+      <div class="dropdowns">
+        <div>
+          <label class="form-label">Preferred League :</label><br>
+          <select id="league_dropdown">
+            <option>Premier League</option>
+            <option>La Liga</option>
+            <option>Bundesliga</option>
+            <option>Serie A</option>
+            <option>Ligue 1</option>
+            <option>Brasilerao</option>
           </select>
         </div>
-
-          <div id="team_dropdown">
-            <label for="password" class="form-label">Favourite Team   :</label><br>
-            <select id="dropdown">
-              <option value="option1">Premier League</option>
-              <option value="option2">La Liga</option>
-              <option value="option3">Bundesliga</option>
-              <option value="option3">Serie A</option>
-              <option value="option3">Ligue 1</option>
-              <option value="option3">Brasilerao</option>
+        <div>
+          <label class="form-label">Favorite Team   :</label><br>
+          <select id="team_dropdown">
           </select>
         </div>
       </div>
-
       <button type="submit" class="btn btn-primary">Submit</button>
     </form>
-
     <p class="mt-3">Already have an account? <a href="/login">Login</a></p>
   </div>
-  </div>
-</body>
+
+  <script>
+    console.log("Hello");
+    const league_select = document.getElementById('league_dropdown');
+    const team_select = document.getElementById('team_dropdown');
+
+    document.addEventListener("DOMContentLoaded", function() {
+
+      league_select.addEventListener('change', updateTeamSelect);
+
+      function updateTeamSelect() {
+        var selectedLeague = league_select.value;
+
+        team_select.innerHTML = "";
+        console.log(selectedLeague);
+        // Add options based on the selected value from the first select element
+        if (selectedLeague === "La Liga") {
+          // Add options for La Liga
+              console.log("Hello");
+
+          addOption(team_select, "Option 1 for LL", "option1A");
+          addOption(team_select, "Option 2 for LL", "option2A");
+        } else if (selectedLeague === "Serie A") {
+          // Add options for Serie A
+          addOption(team_select, "Team 1 in Serie A", "option1B");
+          addOption(team_select, "Team 2 in Serie A", "option2B");
+        } else if (selectedLeague === "Bundesliga") {
+          // Add options for Bundesliga
+          addOption(team_select, "Option 1 for Bun", "option1C");
+          addOption(team_select, "Option 2 for Bun", "option2C");
+        }
+      }
+
+      function addOption(selectElement, text, value) {
+        var option = document.createElement("option");
+        option.text = text;
+        option.value = value;
+        selectElement.add(option);
+      }
+    });
+  </script>
+</div>

ProjectSourceCode/src/views/partials/footer.hbs

@@ -1,8 +1,15 @@
-<footer class="text-center text-muted w-100 mt-auto fixed-bottom">
+    <footer class="text-center text-muted w-100 mt-auto fixed-bottom">
         <p>
             &copy; 2024 - CSCI 3308 Group 6
         </p>
 
-    <!-- TODO: Add the <script><script /> tag to include bootstrap javascript -->
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
-</footer>
+        <!-- Navigation Bar Scripts -->
+        <script src="js/navigation-bar/navigation-bar-follow.js"></script>
+        <script src="js/navigation-bar/user/login.js"></script>
+
+        <!-- Include Bootstrap JavaScript -->
+        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
+        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
+    </footer>

ProjectSourceCode/src/views/partials/head.hbs

@@ -1,20 +1,20 @@
-<head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
   <meta name="description" content="" />
 
   <!-- Linking forms.css -->
   <link rel="stylesheet" type="text/css" href="css/login_and_registration.css">
-  <link rel="stylesheet" type="text/css" href="css/home-screen.css">
+  <link rel="stylesheet" type="text/css" href="css/homepage/homepage.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">
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Golos+Text:wght@400..900&display=swap" rel="stylesheet">
+  <!-- Navigation Bar Stylesheets -->
+  <link rel="stylesheet" type="text/css" href="css/navigation-bar/navigation-bar.css">
+  <link rel="stylesheet" type="text/css" href="css/navigation-bar/login.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">
 
   <title>Group 6 Final Project</title>
 
   <!-- Include Bootstrap CSS -->
-  <body class="h-100 d-flex flex-column"></body>
-</head>
-
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

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

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

ProjectSourceCode/src/views/partials/league-page/league-page.hbs

@@ -0,0 +1 @@
+<h1>Hello</h1>

ProjectSourceCode/src/views/partials/league_table.hbs

@@ -1,39 +0,0 @@
-{{!-- <div class="col-md-4 mb-4">
-    <div class="card">
-        <div class="">
-            <h5 class="card-title">League Name</h5> <!-- Insert Name using Handlesbars and API -->
-            <table class="table">
-                <thead>
-                    <tr>
-                        <th>Position</th>
-                        <th>Club Name</th>
-                        <th>Wins</th>
-                        <th>Draws</th>
-                        <th>Losses</th>
-                        <th>Points</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <!-- Add rows dynamically using backend data -->
-                    <tr>
-                        <td>1</td>
-                        <td>Club A</td>
-                        <td>10</td>
-                        <td>5</td>
-                        <td>3</td>
-                        <td>35</td>
-                    </tr>
-                    <!-- Add more rows if needed -->
-                </tbody>
-            </table>
-            <a href="#" class="btn btn-primary">View League</a>
-        </div>
-    </div>
-</div> --}}
-<div class="banner">
-   <div class="content">
-      <img src={{logo}} height="120">
-      <img src={{title}} height="80">
-      {{flag}}
-   </div>
-</div>

ProjectSourceCode/src/views/partials/navigation-bar/login.hbs

@@ -1,7 +1,6 @@
-  <body class="container">
     <!-- Linking forms.css -->
-    <div class="login-page">
-      <div class="form-container">
+    <div class="login-page" id="login-page">
+      <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 -->
@@ -21,11 +20,10 @@
           <input type="password" class="form-control" id="password" name="password" required>
           </div>
 
-          <button type="submit" class="btn btn-primary">Submit</button>
+          <button type="submit" id="login-submit">Submit</button>
 
         </form>
 
         <p class="mt-3">Don't have an account? <a href="/register">Register</a></p>
       </div>
     </div>
-  </body>

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

@@ -0,0 +1,57 @@
+<!-- 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="#">Premier League</a>
+        </li>
+
+        <li class="nav-item">
+          <a class="nav-link" href="#">Bundesliga</a>
+        </li>
+        
+        <li class="nav-item">
+          <a class="nav-link" href="#">La Liga</a>
+        </li>
+
+        <li class="nav-item">
+          <a class="nav-link" href="#">Serie A</a>
+        </li>
+
+        <li class="nav-item">
+          <a class="nav-link" href="#">Ligue 1</a>
+        </li>
+
+        <li class="nav-item">
+          <a class="nav-link" href="#">Brasileirao</a>
+        </li>
+
+      </ul>
+    </div>
+
+    <div id="user" class="user-icon">
+      <img src="img/navigation-bar/user.png" alt="Your Image" class="img-fluid">
+    </div>
+
+  </div>
+</nav>
+
+<!-- Container for login section -->
+<div id="login-container" class="container">
+  {{> navigation-bar/login}}
+</div>
+
+
+

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

@@ -0,0 +1,31 @@
+<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">
+                <img src="{{ homeTeam.crest }}" alt="{{ homeTeam.name }} Crest">
+                <p id="team-name">{{ homeTeam.name }}</p> <!-- {{team1.name}} -->
+                <p id="team-score">{{ score.homeScore }}</p>
+            </div>
+            <!-- Team 2 Name with Score -->
+            <div class="team">
+                <img src="{{ awayTeam.crest }}" alt="{{ awayTeam.name }} Crest">
+                <p id="team-name">{{ awayTeam.name }}</p> <!-- {{team1.name}} -->
+                <p id="team-score">{{ score.awayScore }}</p>
+            </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>

ProjectSourceCode/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>