Merge branch 'main' into add-scoreboard-header

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

@@ -1,3 +1,42 @@
-.card-container {
-    margin-bottom: 35px;
+.banner {
+  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');
+});