Merge branch 'main' into add-scoreboard-header

ProjectSourceCode/docker-compose.yaml

@@ -29,7 +29,7 @@ services:
     depends_on:
       - db
     ports:
-      - '3000:3000'
+      - '3000:3001'
     volumes:
       - ../ProjectSourceCode:/home/node/app  # Mount ProjectSourceCode directory
       - ../ProjectSourceCode/node_modules:/home/node/app/node_modules  # Mount node_modules directory

ProjectSourceCode/src/index.js

@@ -175,5 +175,5 @@ app.get('/', (req, res) => {
 // <!-- Section 5 : Start Server-->
 // *****************************************************
 // starting the server and keeping the connection open to listen for more requests
-app.listen(3000);
+app.listen(3001);
 console.log('Server is listening on port 3000');

ProjectSourceCode/src/init_data/create.sql

@@ -0,0 +1,4 @@
+CREATE TABLE users (
+    username VARCHAR(50) PRIMARY KEY,
+    password CHAR(60) NOT NULL
+);

ProjectSourceCode/src/resources/css/home-screen.css

@@ -1,3 +1,42 @@
-.card-container {
+.banner {
-    margin-bottom: 35px;
+  width: 500px; /* Set width of the banner to 100% of viewport width */
+  height: 150px;
+  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 */
+}
+
+.banner: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 {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 1%; /* Width of the red strip */
+  background-color: red; /* Red color */
 }

ProjectSourceCode/src/resources/css/login_and_registration.css

@@ -7,7 +7,7 @@
 }
 
 .form-container {
-    width: 40%;
+    width: 25%;
 }
 
 /* Styling to center register page items */
@@ -16,4 +16,49 @@
     display: flex;
     justify-content: center; /* Center items horizontally */
     align-items: center; /* Center items vertically */
-}
+}
+
+body {
+    font-family: "Golos Text";
+}
+
+#dropdown {
+    padding: 5px;
+}
+
+#league_dropdown {
+    margin : 100x;
+}
+
+/* Center form items */
+.form-container {
+    width: 50%; /* Adjust width as needed */
+    margin: 0 auto; /* Center horizontally */
+    text-align: center; /* Center text horizontally */
+}
+
+/* Apply modern styling to inputs and select elements */
+.form-control,
+select {
+    width: 100%; /* 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: 10px; /* Example margin */
+}
+
+

ProjectSourceCode/src/resources/js/homepage/routes.js

@@ -0,0 +1,18 @@
+const express = require('express');
+const app = express();
+const exphbs = require('express-handlebars');
+
+app.engine('hbs', exphbs({ extname: '.hbs' }));
+app.set('view engine', 'hbs');
+
+// 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', { leagueName });
+});
+
+app.listen(3000, () => {
+  console.log('Server is running on http://localhost:3000');
+});

ProjectSourceCode/src/views/pages/home.hbs

@@ -1,27 +1,36 @@
   <div class="container mt-5">
-    <h1 class="mb-4">Welcome</h1>
+    <h1 class="mb-4 underlined-header">Leagues</h1>
     <div class="card-container">
-        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-2 g-3">
+      <div class="row g-3">
-
+        
-            <!-- 🇬🇧 Premier League -->
+        <!-- 🇬🇧 Premier League -->
-            {{> league_table eventName="Event Name" eventDateTime="Date and Time"}}
+        <a href="league-page.hbs" class="card-link">
-
+          {{> league_table leagueName="Premier League" logo="./img/home-screen/premier-league/icon.png" title="./img/home-screen/premier-league/title.png"}}
-            <!-- 🇪🇸 La Liga -->
+        </a>
-            {{> league_table eventName="Event Name" eventDateTime="Date and Time"}}
+        
-
+        <!-- 🇪🇸 La Liga -->
-            <!-- 🇩🇪 Bundesliga -->
+        {{> league_table leagueName="La Liga" logo="./img/home-screen/la-liga/icon.png" title="./img/home-screen/la-liga/title.png"}}
-            {{> league_table eventName="Event Name" eventDateTime="Date and Time"}}
+        
-
+        <!-- 🇩🇪 Bundesliga -->
-            <!-- 🇮🇹 Serie A -->
+        {{> league_table leagueName="Bundesliga" logo="./img/home-screen/la-liga/icon.png" title="./img/home-screen/la-liga/title.png"}}
-            {{> league_table eventName="Event Name" eventDateTime="Date and Time"}}
+        
-
+        <!-- 🇮🇹 Serie A -->
-            <!-- 🇫🇷 Ligue 1 -->
+        {{> league_table leagueName="Serie A" logo="./img/home-screen/la-liga/icon.png" title="./img/home-screen/la-liga/title.png"}}
-            {{> league_table eventName="Event Name" eventDateTime="Date and Time"}}
+        
-
+        <!-- 🇫🇷 Ligue 1 -->
-            <!-- 🇧🇷 Brasilerao -->
+        {{> league_table leagueName="Ligue 1" logo="./img/home-screen/la-liga/icon.png" title="./img/home-screen/la-liga/title.png"}}
-            {{> league_table eventName="Event Name" eventDateTime="Date and Time"}}
+        
-            
+        <!-- 🇧🇷 Brasilerao -->
-        </div>
+        {{> league_table leagueName="Brasileirao" logo="./img/home-screen/la-liga/icon.png" title="./img/home-screen/la-liga/title.png"}}
+        
+        /* Script to generate league URLs */
+        <script>
+          function redirectToLeaguePage(leagueName) 
+          {
+            window.location.href = '/league-page/' + encodeURIComponent(leagueName);
+          }
+        </script>
+      </div>
     </div>
   </div>
 

ProjectSourceCode/src/views/pages/register.hbs

@@ -14,6 +14,32 @@
           <input type="password" class="form-control" id="password" 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>
+            </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>
+            </select>
+          </div>
+        </div>
+
         <button type="submit" class="btn btn-primary">Submit</button>
       </form>
 

ProjectSourceCode/src/views/partials/league_table.hbs

@@ -1,34 +1,7 @@
-<div class="col-md-4 mb-4">
+<div class="banner">
-    <div class="card">
+   <div class="content">
-        <div class="card-body">
+      <img src={{logo}} height="120">
-            <h5 class="card-title">League Name</h5> <!-- Insert Name using Handlesbars and API -->
+      <img src={{title}} height="80">
-            <table class="table">
+      {{flag}}
-                <thead>
+   </div>
-                    <tr>
+</div>
-                        <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>
-
-

TeamMeetingLogs/minutes.txt

@@ -4,3 +4,10 @@
 16 : 20 , database discussion
 16 : 22 , questions
 16 : 23 , end of meeting
+
+==== Meeting 2    04/04/2024   ====
+15 : 45 : start
+15 : 48 : display of the project
+15 : 49 : overview of features and display of initial website
+15 : 52 : discussion on database
+15 : 53 : end of meeting