Fixes to file structure
This commit is contained in:
Lucas Patenaude
@@ -1,35 +0,0 @@
|
||||
/* 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%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,23 +0,0 @@
|
||||
#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;
|
||||
}
|
||||
@@ -1,170 +0,0 @@
|
||||
/*
|
||||
==============================================================
|
||||
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 */
|
||||
}
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
/*
|
||||
=============================================
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,62 +0,0 @@
|
||||
/*
|
||||
=================================
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -1,77 +0,0 @@
|
||||
/*
|
||||
=================================
|
||||
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%;
|
||||
}
|
||||
}
|
||||
@@ -1,81 +0,0 @@
|
||||
/* 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;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,98 +0,0 @@
|
||||
#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 */
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
#login-pane {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -1,71 +0,0 @@
|
||||
|
||||
/* 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 */
|
||||
}
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
#register-screen-container {
|
||||
display: none;
|
||||
}
|
||||
@@ -1,68 +0,0 @@
|
||||
|
||||
|
||||
.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');
|
||||
}
|
||||
@@ -1,87 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
.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;
|
||||
|
||||
}
|
||||
|
||||
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 127 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
@@ -1,73 +0,0 @@
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
var favoriteButton = document.getElementById("club-favorite-button");
|
||||
if (favoriteButton) {
|
||||
favoriteButton.addEventListener("click", function() {
|
||||
var userID = document.getElementById("userID").value;
|
||||
var teamID = document.getElementById("teamID").value;
|
||||
var teamName = document.getElementById("teamName").value;
|
||||
var teamLogo = document.getElementById("teamLogo").value;
|
||||
|
||||
if (favoriteButton.src.includes("/favorited.png")) {
|
||||
removeFavoriteTeam(userID, teamID);
|
||||
} else {
|
||||
addFavoriteTeam(userID, teamID, teamName, teamLogo);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
async function addFavoriteTeam(userID, teamID, teamName, teamLogo){
|
||||
try {
|
||||
const response = await fetch('/favteam/add', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
userID: userID,
|
||||
teamID: teamID,
|
||||
teamName: teamName,
|
||||
teamLogo: teamLogo
|
||||
})
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to add favorite team');
|
||||
}
|
||||
|
||||
if (response.status === 200) {
|
||||
console.log('New favorite team added successfully.');
|
||||
var favoriteButton = document.getElementById("club-favorite-button");
|
||||
favoriteButton.src = "/img/club-page/favorited.png";
|
||||
location.reload(); // Refresh the page
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error adding favorite team:', error);
|
||||
}
|
||||
}
|
||||
|
||||
async function removeFavoriteTeam(userID, teamID) {
|
||||
try {
|
||||
const response = await fetch('/favteam/remove', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
userID: userID,
|
||||
teamID: teamID
|
||||
})
|
||||
});
|
||||
|
||||
if (response.status === 200) {
|
||||
console.log('Favorite team removed successfully.');
|
||||
var favoriteButton = document.getElementById("club-favorite-button");
|
||||
favoriteButton.src = "/img/club-page/unfavorited.png";
|
||||
location.reload(); // Refresh the page
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error removing favorite team:', error);
|
||||
}
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
var goalDifferenceCells = document.querySelectorAll("#league-table-goal-difference-column"); // Selecting the cells in the goal_difference column
|
||||
|
||||
goalDifferenceCells.forEach(function(cell) {
|
||||
var goalDifference = parseInt(cell.textContent);
|
||||
var color;
|
||||
|
||||
if (goalDifference < 0)
|
||||
{
|
||||
// Gradually darken the text color for negative goal differences
|
||||
var darkenFactor = Math.ceil(goalDifference / -10); // Calculate the darken factor
|
||||
var shade = Math.max(0, 255 - darkenFactor * 25); // Calculate the shade of red
|
||||
color = "rgb(" + shade + ", 0, 0)"; // Create the color value
|
||||
}
|
||||
else if (goalDifference > 0)
|
||||
{
|
||||
// Gradually darken the text color for positive goal differences
|
||||
var darkenFactor = Math.floor(goalDifference / 10); // Calculate the darken factor
|
||||
var shade = Math.max(0, 155 - darkenFactor * 15); // Adjusted the starting point to make greens darker
|
||||
color = "rgb(0, " + shade + ", 0)"; // Create the color value
|
||||
}
|
||||
else
|
||||
{
|
||||
color = "inherit"; // If goal difference is 0, leave text color unchanged
|
||||
}
|
||||
|
||||
cell.style.color = color; // Apply the calculated color
|
||||
});
|
||||
});
|
||||
@@ -1,45 +0,0 @@
|
||||
// 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");
|
||||
var accountPane = document.querySelector(".account-portal-container"); // Use querySelector instead of getElementByClassName
|
||||
|
||||
// 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";
|
||||
|
||||
// Adjust the position of the account pane
|
||||
accountPane.style.position = "fixed"; // Make the account pane fixed
|
||||
accountPane.style.top = navbar.offsetHeight + 20 + 'px'; // Move the account pane below the navbar
|
||||
} 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;
|
||||
accountPane.style.position = "absolute"; // Make the account pane fixed
|
||||
|
||||
// Set the top position of the account pane to be 150px off the top
|
||||
accountPane.style.top = "160px";
|
||||
}
|
||||
}
|
||||
|
||||
// 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();
|
||||
};
|
||||
@@ -1,36 +0,0 @@
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
var deleteButtons = document.querySelectorAll("#account-delete-favorite-team-button-hover");
|
||||
deleteButtons.forEach(function(deleteButton) {
|
||||
deleteButton.addEventListener("click", function() {
|
||||
var userID = deleteButton.getAttribute("userID");
|
||||
var teamID = deleteButton.getAttribute("teamID");
|
||||
|
||||
if (deleteButton.src.includes("/delete-club-hover.png")) {
|
||||
removeAccountFavoriteTeam(userID, teamID);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
async function removeAccountFavoriteTeam(userID, teamID) {
|
||||
try {
|
||||
const response = await fetch('/favteam/remove', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
userID: userID,
|
||||
teamID: teamID
|
||||
})
|
||||
});
|
||||
|
||||
if (response.status === 200) {
|
||||
console.log('Favorite team removed successfully.');
|
||||
location.reload(); // Refresh the page
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error removing favorite team:', error);
|
||||
}
|
||||
}
|
||||
@@ -1,41 +0,0 @@
|
||||
$(document).ready(function() {
|
||||
|
||||
// When #user is clicked
|
||||
$('#user-profile-button').click(function() {
|
||||
|
||||
$('#register-screen-container').hide();
|
||||
// Toggle the visibility of the login container
|
||||
$('#login-pane').toggle();
|
||||
});
|
||||
|
||||
$('#register-page-login-button').click(function (event) {
|
||||
event.preventDefault(); // Prevent the default action of following the link
|
||||
|
||||
$('#register-screen-container').hide();
|
||||
$('#login-pane').show();
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
$(document).ready(function () {
|
||||
|
||||
// Listen for click event on the register button
|
||||
$('#register-button').click(function (event) {
|
||||
event.preventDefault(); // Prevent the default action of following the link
|
||||
|
||||
$('#login-pane').hide();
|
||||
// Show the register container
|
||||
$('#register-screen-container').show();
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
$(document).ready(function() {
|
||||
|
||||
// When #user is clicked
|
||||
$('#user-profile-button').click(function() {
|
||||
|
||||
// Toggle the visibility of the login container
|
||||
$('#account-pane').toggle();
|
||||
});
|
||||
});
|
||||
406
src/index.js
Normal file
406
src/index.js
Normal file
@@ -0,0 +1,406 @@
|
||||
// *****************************************************
|
||||
// <!-- Section 1 : Import Dependencies -->
|
||||
// *****************************************************
|
||||
|
||||
const express = require("express"); // To build an application server or API
|
||||
const app = express();
|
||||
const handlebars = require("express-handlebars");
|
||||
const Handlebars = require("handlebars");
|
||||
const path = require("path");
|
||||
const pgp = require("pg-promise")(); // To connect to the Postgres DB from the node server
|
||||
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 -->
|
||||
// *****************************************************
|
||||
|
||||
// create `ExpressHandlebars` instance and configure the layouts and partials dir.
|
||||
const hbs = handlebars.create({
|
||||
extname: "hbs",
|
||||
layoutsDir: __dirname + "/../public/views/layouts",
|
||||
partialsDir: __dirname + "/../public/views/partials",
|
||||
});
|
||||
|
||||
// database configuration
|
||||
// database configuration
|
||||
const dbConfig = {
|
||||
host: "db", // the database server
|
||||
port: 5432, // the database port
|
||||
database: "users_db", // the database name
|
||||
user: "postgres", // the user account to connect with
|
||||
password: "pwd", // the password of the user account
|
||||
};
|
||||
|
||||
const db = pgp(dbConfig);
|
||||
|
||||
// test your database
|
||||
db.connect()
|
||||
.then((obj) => {
|
||||
console.log("Database connection successful"); // you can view this message in the docker compose logs
|
||||
obj.done(); // success, release the connection;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log("ERROR:", error.message || error);
|
||||
});
|
||||
|
||||
// *****************************************************
|
||||
// <!-- Section 3 : App Settings -->
|
||||
// *****************************************************
|
||||
|
||||
// Register `hbs` as our view engine using its bound `engine()` function.
|
||||
app.engine("hbs", hbs.engine);
|
||||
app.set("view engine", "hbs");
|
||||
app.set("views", path.join(__dirname, "/../public/views"));
|
||||
app.use(bodyParser.json()); // specify the usage of JSON for parsing request body.
|
||||
|
||||
// initialize session variables
|
||||
app.get("/welcome", (req, res) => {
|
||||
res.json({ status: "success", message: "Welcome!" });
|
||||
});
|
||||
app.use(
|
||||
session({
|
||||
secret: process.env.SESSION_SECRET,
|
||||
saveUninitialized: false,
|
||||
resave: false,
|
||||
})
|
||||
);
|
||||
|
||||
app.use(
|
||||
bodyParser.urlencoded({
|
||||
extended: true,
|
||||
})
|
||||
);
|
||||
app.use(async function (req, res, next) {
|
||||
res.locals.user = req.session.user;
|
||||
|
||||
if (res.locals.user) {
|
||||
try {
|
||||
res.locals.fav_teams = await getFavoriteTeamsForUser(
|
||||
res.locals.user.userid
|
||||
);
|
||||
} catch (error) {
|
||||
console.error("Error fetching favorite teams:", error);
|
||||
}
|
||||
}
|
||||
|
||||
next();
|
||||
});
|
||||
|
||||
// Serve static files from the 'public' directory
|
||||
app.use(express.static(path.join(__dirname, "/../public/assets")));
|
||||
app.use(express.static(path.join(__dirname, "/")));
|
||||
|
||||
// *****************************************************
|
||||
// <!-- Section 4 : Middleware -->
|
||||
// *****************************************************
|
||||
|
||||
// Middleware to automatically update live scoreboard
|
||||
const fetchMatchesData = require("./middleware/navigation-bar/current-match-information");
|
||||
app.use(fetchMatchesData);
|
||||
|
||||
//Middleware to automatically update in-game time abbreviations
|
||||
|
||||
const convert_time = require("./middleware/navigation-bar/convert-time");
|
||||
app.use(convert_time);
|
||||
|
||||
// Leagues Page Middleware
|
||||
|
||||
const fetchLeaguesData = require("./middleware/leagues-page/get-current-league-information");
|
||||
const fetchLeagueScorerData = require("./middleware/leagues-page/get-current-league-top-scorers");
|
||||
|
||||
app.get(
|
||||
"/league/:leagueID",
|
||||
[fetchLeaguesData, fetchLeagueScorerData],
|
||||
(req, res) => {
|
||||
// Render the Handlebars view with league data
|
||||
res.render("pages/leagues-page", {
|
||||
leagueID: req.params.leagueID,
|
||||
leagues: res.locals.leagues,
|
||||
scorers: res.locals.topScorers, // Assuming fetchLeagueScorerData sets the data in res.locals.scorers
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
// Clubs Page Middleware
|
||||
|
||||
const fetchClubsData = require("./middleware/clubs-page/get-current-club-information");
|
||||
|
||||
app.get("/club/:clubID", [fetchClubsData], (req, res) => {
|
||||
// Render the Handlebars view with league data
|
||||
|
||||
var isFav = false;
|
||||
var fav_teams = res.locals.fav_teams;
|
||||
if (res.locals.user && fav_teams) {
|
||||
const isTeamIDInFavTeams = fav_teams.some((team) => {
|
||||
const teamIdInt = parseInt(team.teamid);
|
||||
const clubIdInt = parseInt(req.params.clubID);
|
||||
console.log("Checking team:", teamIdInt);
|
||||
console.log("equal to", clubIdInt);
|
||||
return teamIdInt === clubIdInt;
|
||||
});
|
||||
if (isTeamIDInFavTeams) {
|
||||
isFav = true;
|
||||
}
|
||||
}
|
||||
res.render("pages/clubs-page", {
|
||||
isFav: isFav,
|
||||
clubID: req.params.clubID,
|
||||
clubs: res.locals.club,
|
||||
});
|
||||
});
|
||||
|
||||
// *****************************************************
|
||||
// <!-- Section 5 : API Routes -->
|
||||
// *****************************************************
|
||||
|
||||
/************************
|
||||
Login Page Routes
|
||||
*************************/
|
||||
|
||||
// Redirect to the /login endpoint
|
||||
app.get("/", (req, res) => {
|
||||
res.redirect("/home");
|
||||
});
|
||||
|
||||
// Render login page for /login route
|
||||
app.get("/login", (req, res) => {
|
||||
res.render("/");
|
||||
});
|
||||
|
||||
// Trigger login form to check database for matching username and password
|
||||
app.post("/login", async (req, res) => {
|
||||
try {
|
||||
// Check if username exists in DB
|
||||
const user = await db.oneOrNone(
|
||||
"SELECT * FROM users WHERE username = $1",
|
||||
req.body.username
|
||||
);
|
||||
|
||||
if (!user) {
|
||||
// Redirect user to login screen if no user is found with the provided username
|
||||
return res.redirect("/register");
|
||||
}
|
||||
|
||||
// Check if password from request matches with password in DB
|
||||
const match = await bcrypt.compare(req.body.password, user.password);
|
||||
|
||||
// Check if match returns no data
|
||||
if (!match) {
|
||||
// Render the login page with the message parameter
|
||||
return res.render("/", { message: "Password does not match" });
|
||||
} else {
|
||||
// Save user information in the session variable
|
||||
req.session.user = user;
|
||||
req.session.save();
|
||||
|
||||
// Redirect user to the home page
|
||||
res.redirect("/");
|
||||
}
|
||||
} catch (error) {
|
||||
// Direct user to login screen if no user is found with matching password
|
||||
res.redirect("/register");
|
||||
}
|
||||
});
|
||||
|
||||
/************************
|
||||
Registration Page Routes
|
||||
*************************/
|
||||
|
||||
// Render registration page for /register route
|
||||
app.get("/register", (req, res) => {
|
||||
res.redirect("/");
|
||||
});
|
||||
|
||||
// Trigger Registration Form to Post
|
||||
app.post("/register", async (req, res) => {
|
||||
try {
|
||||
if (!req.body.username || !req.body.password) {
|
||||
// If username or password is missing, respond with status 400 and an error message
|
||||
return res
|
||||
.status(400)
|
||||
.json({ status: "error", message: "Invalid input" });
|
||||
}
|
||||
|
||||
// Check if the username already exists in the database
|
||||
const existingUser = await db.oneOrNone(
|
||||
"SELECT * FROM users WHERE username = $1",
|
||||
req.body.username
|
||||
);
|
||||
if (existingUser) {
|
||||
// If a user with the same username already exists, respond with status 409 and an error message
|
||||
return res
|
||||
.status(409)
|
||||
.json({ status: "error", message: "Username already exists" });
|
||||
}
|
||||
|
||||
// Hash the password using bcrypt library
|
||||
const hash = await bcrypt.hash(req.body.password, 10);
|
||||
|
||||
// Insert username and hashed password into the 'users' table
|
||||
await db.none("INSERT INTO users (username, password) VALUES ($1, $2)", [
|
||||
req.body.username,
|
||||
hash,
|
||||
]);
|
||||
const user = await db.oneOrNone(
|
||||
"SELECT * FROM users WHERE username = $1",
|
||||
req.body.username
|
||||
);
|
||||
req.session.user = user;
|
||||
req.session.save();
|
||||
// Redirect user to the home page
|
||||
res.redirect("/home");
|
||||
} catch (error) {
|
||||
// If an error occurs during registration, respond with status 500 and an error message
|
||||
res.status(500).json({
|
||||
status: "error",
|
||||
message: "An error occurred during registration",
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
/************************
|
||||
Home Page Routes
|
||||
*************************/
|
||||
|
||||
app.get("/home", (req, res) => {
|
||||
const loggedIn = req.session.user ? true : false;
|
||||
res.render("pages/home");
|
||||
});
|
||||
|
||||
app.get("/logout", (req, res) => {
|
||||
req.session.destroy((err) => {
|
||||
if (err) {
|
||||
console.error("Error destroying session:", err);
|
||||
res.status(500).send("Internal Server Error");
|
||||
} else {
|
||||
// Redirect to the same page after destroying the session
|
||||
res.redirect("/"); // You can change '/' to the desired page if it's not the home page
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
/************************
|
||||
League Page Routes
|
||||
*************************/
|
||||
|
||||
// Import and call generateLeagueRoutes function
|
||||
const generateLeagueRoutes = require("./routes/league-pages/generate-league-routes");
|
||||
generateLeagueRoutes(app);
|
||||
|
||||
/************************
|
||||
Club Page Routes
|
||||
*************************/
|
||||
|
||||
// Import and call generateLeagueRoutes function
|
||||
const generateClubRoutes = require("./routes/club-pages/generate-club-routes");
|
||||
generateClubRoutes(app);
|
||||
|
||||
/************************
|
||||
Favorite Team Database
|
||||
*************************/
|
||||
|
||||
// Function to add a new row to the FavoriteTeams table
|
||||
// database configuration
|
||||
|
||||
app.post("/favteam/add", async (req, res, next) => {
|
||||
try {
|
||||
const { userID, teamID, teamName, teamLogo } = req.body;
|
||||
|
||||
// Check if the user is logged in
|
||||
if (!req.session.user) {
|
||||
return res
|
||||
.status(400)
|
||||
.json({ message: "Login or register to add a favorite team." });
|
||||
}
|
||||
|
||||
// Insert the new favorite team into the database
|
||||
const query = {
|
||||
text: "INSERT INTO FavoriteTeams (UserID, TeamID, TeamName, TeamLogo) VALUES ($1, $2, $3, $4)",
|
||||
values: [userID, teamID, teamName, teamLogo],
|
||||
};
|
||||
|
||||
await db.none(query);
|
||||
console.log("New favorite team added successfully.");
|
||||
return res
|
||||
.status(200)
|
||||
.json({ message: "New favorite team added successfully." });
|
||||
} catch (error) {
|
||||
console.error("Error adding favorite team:", error);
|
||||
return res.status(500).json({ error: "Error adding favorite team" });
|
||||
}
|
||||
});
|
||||
|
||||
app.post("/favteam/remove", async (req, res) => {
|
||||
try {
|
||||
const { userID, teamID } = req.body;
|
||||
|
||||
// Check if the team exists for the user
|
||||
const existingTeam = await db.oneOrNone(
|
||||
"SELECT * FROM FavoriteTeams WHERE UserID = $1 AND TeamID = $2",
|
||||
[userID, teamID]
|
||||
);
|
||||
|
||||
// If the team does not exist for the user, return a 404 error
|
||||
if (!existingTeam) {
|
||||
return res
|
||||
.status(404)
|
||||
.json({ message: "This team is not in your favorites." });
|
||||
}
|
||||
|
||||
// Remove the favorite team from the database
|
||||
await db.none(
|
||||
"DELETE FROM FavoriteTeams WHERE UserID = $1 AND TeamID = $2",
|
||||
[userID, teamID]
|
||||
);
|
||||
|
||||
console.log("Favorite team removed successfully.");
|
||||
return res
|
||||
.status(200)
|
||||
.json({ message: "Favorite team removed successfully." });
|
||||
} catch (error) {
|
||||
console.error("Error removing favorite team:", error);
|
||||
|
||||
// If the error is a database error, return a 500 error
|
||||
if (error instanceof QueryResultError) {
|
||||
return res.status(500).json({
|
||||
error: "Database error occurred while removing favorite team",
|
||||
});
|
||||
}
|
||||
|
||||
// If the error is a generic error, return a 400 error
|
||||
return res
|
||||
.status(400)
|
||||
.json({ error: "Error occurred while removing favorite team" });
|
||||
}
|
||||
});
|
||||
|
||||
async function getFavoriteTeamsForUser(userId) {
|
||||
try {
|
||||
// Execute the SQL query
|
||||
const favoriteTeams = await db.any(
|
||||
`
|
||||
SELECT * FROM FavoriteTeams
|
||||
WHERE UserID = $1;
|
||||
`,
|
||||
userId
|
||||
);
|
||||
`a`;
|
||||
|
||||
// Return the result
|
||||
return favoriteTeams;
|
||||
} catch (error) {
|
||||
console.error("Error fetching favorite teams:", error);
|
||||
throw error; // Rethrow the error for handling at a higher level
|
||||
}
|
||||
}
|
||||
|
||||
// *****************************************************
|
||||
// <!-- Section 5 : Start Server-->
|
||||
// *****************************************************
|
||||
// starting the server and keeping the connection open to listen for more requests
|
||||
module.exports = app.listen(3000);
|
||||
console.log("Server is listening on port 3000");
|
||||
12
src/init_data/create.sql
Normal file
12
src/init_data/create.sql
Normal file
@@ -0,0 +1,12 @@
|
||||
CREATE TABLE users (
|
||||
UserID SERIAL PRIMARY KEY,
|
||||
Username VARCHAR(50) UNIQUE NOT NULL,
|
||||
Password CHAR(60) NOT NULL
|
||||
);
|
||||
|
||||
CREATE TABLE FavoriteTeams (
|
||||
TeamID INT,
|
||||
UserID INT REFERENCES users(UserID),
|
||||
TeamName VARCHAR(50),
|
||||
TeamLogo VARCHAR(100)
|
||||
);
|
||||
@@ -1,20 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="h-100">
|
||||
<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}}
|
||||
|
||||
<!-- Render the main content of each page -->
|
||||
{{{body}}}
|
||||
|
||||
<!-- Add your footer -->
|
||||
{{> footer}}
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,147 +0,0 @@
|
||||
<div id="club-page-body" class="page-container">
|
||||
|
||||
<!-- Container on Top containing Club Information -->
|
||||
<div id="club-header-container" class="information-container">
|
||||
<img id="generated-page-header-logo" src="{{club.crest}}" alt="{{club.name}} Logo">
|
||||
<h1 id="generated-page-header-title">{{club.name}}</h1>
|
||||
<img id="generated-page-header-flag" src="{{club.area.club_flag}}" alt="{{club.name}} Flag">
|
||||
|
||||
{{#if user}}
|
||||
{{#if isFav}}
|
||||
<img id="club-favorite-button" src="/img/club-page/favorited.png" alt="Favorite Button">
|
||||
{{else}}
|
||||
<img id="club-favorite-button" src="/img/club-page/unfavorited.png" alt="Favorite Button">
|
||||
{{/if}}
|
||||
|
||||
{{else}}
|
||||
<img id="club-favorite-button" src="/img/club-page/cant-favorite.png" title="Please Sign In to Save a Favorite Club!">
|
||||
{{/if}}
|
||||
|
||||
<!-- Hidden input fields -->
|
||||
<input type="hidden" id="userID" value="{{user.userid}}">
|
||||
<input type="hidden" id="teamID" value="{{club.club_id}}">
|
||||
<input type="hidden" id="teamName" value="{{club.name}}">
|
||||
<input type="hidden" id="teamLogo" value="{{club.crest}}">
|
||||
</div>
|
||||
|
||||
<div id="club-page-contents-container" class="page-content-container">
|
||||
|
||||
<!-- Container on Left Side containing Club Information -->
|
||||
<div id="club-information-container" class="page-content-container">
|
||||
|
||||
<!-- Container for Club History Information -->
|
||||
<div id="club-history-container" class="content-container">
|
||||
|
||||
<div id="club-information-table-header">
|
||||
<h2>Information</h2>
|
||||
</div>
|
||||
|
||||
<div id="club-information-table-container" class="card-container">
|
||||
<table id="club-information-table">
|
||||
<tbody>
|
||||
<!-- Club Address Container -->
|
||||
<tr>
|
||||
<td>
|
||||
<span style="font-weight: bold;">Club Address:</span><br>
|
||||
{{club.address}}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Club Foundation Container -->
|
||||
<tr>
|
||||
<td>
|
||||
<span style="font-weight: bold;">Founded</span><br>
|
||||
{{club.founded}}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Manager Information Table -->
|
||||
<tr>
|
||||
<td>
|
||||
<span style="font-weight: bold;">Manager</span><br>
|
||||
<span>Name: {{club.coach.name}}</span><br>
|
||||
<span>Nationality: {{club.coach.nationality}}</span><br>
|
||||
<span>DOB: {{club.coach.dateOfBirth}}</span><br>
|
||||
<span>Contract Start: {{club.coach.contract.start}}</span><br>
|
||||
<span>Contract End: {{club.coach.contract.until}}</span><br>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div> <!-- End of Club History Table Container -->
|
||||
</div> <!-- End of Club History Container -->
|
||||
|
||||
<!-- Container to Display Club's Current Competitions -->
|
||||
<div id="club-competitions-container" class="content-container">
|
||||
|
||||
<div id="club-competitions-table-header">
|
||||
<h2>Competitions</h2>
|
||||
</div>
|
||||
|
||||
<div id="club-competitions-table-container" class="card-container">
|
||||
<table id="club-competitions-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{#each club.runningCompetitions}}
|
||||
<tr>
|
||||
<td><img id="competition-logo" src="{{emblem}}"></td>
|
||||
<td>{{name}}</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div> <!-- End of Club Competitions Table Container -->
|
||||
</div> <!-- End of Club Competitions Container -->
|
||||
|
||||
</div> <!-- End of Club Information Container (Left 20%) -->
|
||||
|
||||
<!-- Container on Right Side containing Club Stats -->
|
||||
<div id="club-stats-and-players-container" class="page-section-container">
|
||||
|
||||
<!-- Club Player Container -->
|
||||
<div id="club-players-container" class="content-container">
|
||||
|
||||
<div id="club-players-table-header" class="content-container">
|
||||
<h2>Players</h2>
|
||||
</div>
|
||||
|
||||
<div id="club-players-table-container" class="card-container">
|
||||
<table id="club-players-table" class="alternating-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>DOB</th>
|
||||
<th>Nationality</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{#each club.squad}}
|
||||
<tr>
|
||||
<td>{{name}}</td>
|
||||
<td>{{position}}</td>
|
||||
<td>{{dateOfBirth}}</td>
|
||||
<td>{{nationality}}</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div> <!-- End of Club Players Table Container -->
|
||||
</div> <!-- End of Club Players Container -->
|
||||
|
||||
</div> <!-- End of Club Stats Container -->
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,36 +0,0 @@
|
||||
<div class="container mt-5" id="page-container">
|
||||
<div id="league-cards-container" class="page-section-container">
|
||||
<div class="row g-3" id="card-row">
|
||||
<!-- 🇬🇧 Premier League -->
|
||||
<a href="#" onclick="redirectToLeaguePage('2021')" 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 -->
|
||||
<a href="#" onclick="redirectToLeaguePage('2014')" 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 -->
|
||||
<a href="#" onclick="redirectToLeaguePage('2002')" class="card-link" id="league-card">
|
||||
{{> homepage/league-card leagueName="Bundesliga" logo="./img/homepage/bundesliga/icon.png" title="./img/homepage/bundesliga/title.png" }}
|
||||
</a>
|
||||
|
||||
<!-- 🇮🇹 Serie A -->
|
||||
<a href="#" onclick="redirectToLeaguePage('2019')" class="card-link" id="league-card">
|
||||
{{> homepage/league-card leagueName="Serie A" logo="./img/homepage/serie-a/icon.png" title="./img/homepage/serie-a/title.png"}}
|
||||
</a>
|
||||
|
||||
<!-- 🇫🇷 Ligue 1 -->
|
||||
<a href="#" onclick="redirectToLeaguePage('2015')" class="card-link" id="league-card">
|
||||
{{> homepage/league-card leagueName="Ligue 1" logo="./img/homepage/ligue-1/icon.png" title="./img/homepage/ligue-1/title.png" }}
|
||||
</a>
|
||||
|
||||
<!-- 🇧🇷 Brasileirao -->
|
||||
<a href="#" onclick="redirectToLeaguePage('2013')" class="card-link" id="league-card">
|
||||
{{> homepage/league-card leagueName="Brasileirao" logo="./img/homepage/brasileirao/icon.png" title="./img/homepage/brasileirao/title.png" }}
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,90 +0,0 @@
|
||||
<div id="league-page-body" class="page-container">
|
||||
|
||||
<!-- Container for all league information (logo, name, country, etc. ) <- top 100px -->
|
||||
<div id="league-header-container" class="information-container">
|
||||
<img id="generated-page-header-logo" src="{{league.competition.league_emblem}}" alt="{{league.competition.league_name}} Emblem">
|
||||
<h1 id="generated-page-header-title">{{league.competition.league_name}}</h2>
|
||||
<img id="generated-page-header-flag" src="{{league.area.league_flag}}" alt="{{league.competition.league_name}} Flag">
|
||||
</div>
|
||||
|
||||
<!-- Container to display all stats for league <- bottom rest of the container -->
|
||||
<div id="table-and-top-scorers-containers" class="page-content-container">
|
||||
|
||||
<!-- Container to display league table <- split 50% -->
|
||||
<div id="league-table-container" class="content-container">
|
||||
|
||||
<!-- Put header above table container -->
|
||||
<div id="league-table-header-container" class="header-container">
|
||||
<h2>Table</h2>
|
||||
</div>
|
||||
|
||||
<!-- Container containing all league table stats -->
|
||||
<div id="league-table-stats-container" class="card-container">
|
||||
<table id="league-standings-table" class="alternating-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th></th>
|
||||
<th>Club</th>
|
||||
<th>GP</th>
|
||||
<th>W</th>
|
||||
<th>L</th>
|
||||
<th>D</th>
|
||||
<th>GD</th>
|
||||
<th>Pts</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{#each league.standings}}
|
||||
<tr>
|
||||
<td>{{table.league_position}}</td>
|
||||
<td id="league-table-club-logo-column"><img id="league-table-club-logo" clubID="{{table.team_id}}" src="{{table.team_crest}}" alt="{{table.team_name}} Crest"></td>
|
||||
<td><span id="league-table-club-name-column" clubID="{{table.team_id}}">{{table.team_name}}</span></td>
|
||||
<td>{{games_played}}</td>
|
||||
<td>{{wins}}</td>
|
||||
<td>{{losses}}</td>
|
||||
<td>{{draws}}</td>
|
||||
<td id="league-table-goal-difference-column">{{goal_difference}}</td>
|
||||
<td id="league-table-points-column">{{points}}</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Container to display top scorers for league <- Split 50% -->
|
||||
<div id="league-top-scorers-container" class="content-container">
|
||||
|
||||
<div id="league-top-scorers-header-container" class="header-container">
|
||||
<h2>Top Scorers</h2>
|
||||
</div>
|
||||
|
||||
<div id="league-top-scorers-stats-container" class="card-container">
|
||||
<table id="league-top-scorers-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Goals</th>
|
||||
<th></th>
|
||||
<th>Name</th>
|
||||
<th>Club</th>
|
||||
<th>GP</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{#each topScorers.scorers}}
|
||||
<tr id="top-scorers-row">
|
||||
<td id="league-top-scorers-goals-column">{{goals}}</td>
|
||||
<td><img id="league-top-scorers-logo" clubID="{{team.team_id}}" src="{{team.team_crest}}" alt="{{table.team_name}} Crest"></img></td>
|
||||
<td id="league-top-scorers-player-name-column">{{player.player_name}}</td>
|
||||
<td id="league-top-scorers-club-name-column" clubID="{{team.team_id}}">{{team.team_name}}</td>
|
||||
<td>{{games_played}}</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,20 +0,0 @@
|
||||
<div class="player-card" id="player-card">
|
||||
<div class="player-card-body">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Player Name</th>
|
||||
<th>Nationality</th>
|
||||
<th>Position</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>persons.name</td>
|
||||
<td>persons.nationality</td>
|
||||
<td>persons.position</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,5 +0,0 @@
|
||||
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="player-card tooltip">
|
||||
Contract Start: {{contractStart}}
|
||||
Contract End: {{contractEnd}}
|
||||
{{/each}}
|
||||
</button>
|
||||
@@ -1,21 +0,0 @@
|
||||
<footer class="text-center text-muted w-100 mt-auto fixed-bottom">
|
||||
<p>
|
||||
© 2024 - CSCI 3308 Group 6
|
||||
</p>
|
||||
|
||||
<!-- Navigation Bar Scripts -->
|
||||
<script src="/js/navigation-bar/navigation-bar-follow.js"></script>
|
||||
<script src="/js/navigation-bar/user/login-and-register-page-linking.js"></script>
|
||||
<script src="/js/navigation-bar/user/delete-account-favorite-club.js"></script>
|
||||
|
||||
<!-- Homepage Scripts -->
|
||||
<script src="/routes/league-pages/redirect-to-league-url.js"></script>
|
||||
|
||||
<!-- League Pages Scripts -->
|
||||
<script src="/js/league-page/change-goal-difference-color.js"></script>
|
||||
<script src="/routes/club-pages/redirect-to-club-url.js"></script>
|
||||
|
||||
<!-- Club Pages Scripts -->
|
||||
<script src="/js/club-page/favorite-button.js"></script>
|
||||
|
||||
</footer>
|
||||
@@ -1,40 +0,0 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
|
||||
<meta name="description" content="" />
|
||||
<!-- Set the Content-Security-Policy header to allow inline scripts -->
|
||||
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' https://code.jquery.com https://cdn.jsdelivr.net https://stackpath.bootstrapcdn.com;">
|
||||
|
||||
<!--------------- CSS Stylesheets ---------------->
|
||||
|
||||
<!-- Linking forms.css -->
|
||||
<link rel="stylesheet" type="text/css" href="/css/login-and-registration/login_and_registration.css">
|
||||
|
||||
<!-- Navigation Bar Stylesheets -->
|
||||
<link rel="stylesheet" type="text/css" href="/css/navigation-bar/navigation-bar.css">
|
||||
<link rel="stylesheet" type="text/css" href="/css/login-and-registration/login.css">
|
||||
<link rel="stylesheet" type="text/css" href="/css/login-and-registration/registration.css">
|
||||
<link rel="stylesheet" type="text/css" href="/css/login-and-registration/account.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">
|
||||
|
||||
<!-- Home Page Stylesheets -->
|
||||
<link rel="stylesheet" type="text/css" href="/css/homepage/homepage.css">
|
||||
|
||||
<!-- All Generated Pages CSS -->
|
||||
<link rel="stylesheet" type="text/css" href="/css/generated-pages/generated-pages-styling.css">
|
||||
|
||||
<!-- League Page Stylesheets -->
|
||||
<link rel="stylesheet" type="text/css" href="/css/generated-pages/league-pages/league-page.css">
|
||||
<link rel="stylesheet" type="text/css" href="/css/generated-pages/league-pages/league-table.css">
|
||||
<link rel="stylesheet" type="text/css" href="/css/generated-pages/league-pages/league-top-scorers.css">
|
||||
|
||||
<!-- Club Page Stylesheets -->
|
||||
<link rel="stylesheet" type="text/css" href="/css/generated-pages/club-pages/club-page-layouts.css">
|
||||
<link rel="stylesheet" type="text/css" href="/css/generated-pages/club-pages/club-page-styling.css">
|
||||
|
||||
<title>Group 6 Final Project</title>
|
||||
|
||||
<!-- Include Bootstrap 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">
|
||||
@@ -1,9 +0,0 @@
|
||||
<div class="banner">
|
||||
<div class="content" id="card-contents">
|
||||
<img id="logo" src={{logo}}>
|
||||
<div class="title-wrapper">
|
||||
<img id="title-logo" src={{title}}>
|
||||
{{flag}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,5 +0,0 @@
|
||||
{{#if message}}
|
||||
<div class="alert alert-{{#if error}}danger{{else}}success{{/if}}" role="alert">
|
||||
{{ message }}
|
||||
</div>
|
||||
{{/if}}
|
||||
@@ -1,71 +0,0 @@
|
||||
<!-- 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="/league/2021">Premier League</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/league/2002">Bundesliga</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/league/2014">La Liga</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/league/2019">Serie A</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/league/2015">Ligue 1</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/league/2013">Brasileirao</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="favorite-teams-container" class="logos-container">
|
||||
{{#each fav_teams}}
|
||||
<a href="/club/{{this.teamid}}">
|
||||
<img id="teamlogo" src="{{this.teamlogo}}" alt="teamlogo">
|
||||
</a>
|
||||
{{/each}}
|
||||
</div>
|
||||
|
||||
<div id="user-profile-button" class="user-icon">
|
||||
<img src="/img/navigation-bar/user-menu/user-button.png" alt="Account" class="img-fluid">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{{#if user.username}}
|
||||
<div class="account-portal" id="account-screen-container">
|
||||
{{> navigation-bar/user-menu/account-screen}}
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="account-portal" id="login-account-container">
|
||||
{{> navigation-bar/user-menu/login}}
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div class="account-portal" id="register-screen-container">
|
||||
{{> navigation-bar/user-menu/register}}
|
||||
</div>
|
||||
@@ -1,35 +0,0 @@
|
||||
<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">
|
||||
<a href="/club/{{homeTeam.teamID}}">
|
||||
<img src="{{ homeTeam.crest }}" alt="{{ homeTeam.name }} Crest">
|
||||
<p id="team-name">{{ homeTeam.name }}</p> <!-- {{team1.name}} -->
|
||||
<p id="team-score">{{ score.homeScore }}</p>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Team 2 Name with Score -->
|
||||
<div class="team">
|
||||
<a href="/club/{{awayTeam.teamID}}">
|
||||
<img src="{{ awayTeam.crest }}" alt="{{ awayTeam.name }} Crest">
|
||||
<p id="team-name">{{ awayTeam.name }}</p> <!-- {{team1.name}} -->
|
||||
<p id="team-score">{{ score.awayScore }}</p>
|
||||
</a>
|
||||
</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>
|
||||
@@ -1,10 +0,0 @@
|
||||
<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>
|
||||
@@ -1,32 +0,0 @@
|
||||
<div class="account-portal-container" id="account-pane">
|
||||
<div id="account-pane-content-container">
|
||||
<div id="account-header-container">
|
||||
<a id="username">Hello, {{user.username}}</a>
|
||||
<div class="logout-container">
|
||||
<a id="logout-button" class="account-portal-button" href="/logout">Logout</a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="account-favorite-teams-container">
|
||||
<a id="account-favorite-teams-header">Favorite Teams:</a>
|
||||
{{#each fav_teams}}
|
||||
<div class="account-favorite-teams-card">
|
||||
<div id="account-favorite-teams-card-logo-container">
|
||||
<a href="/club/{{this.teamid}}">
|
||||
<img id="account-favorite-teams-card-logo" src="{{this.teamlogo}}" alt="teamlogo">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<a id="account-favorite-teams-card-title" href="/club/{{this.teamid}}">
|
||||
{{this.teamname}}
|
||||
</a>
|
||||
|
||||
<div id="account-delete-favorite-team-button-container">
|
||||
<!-- Add a different image for hover effect -->
|
||||
<img id="account-delete-favorite-team-button" class="account-delete-favorite-team-button" src="/img/navigation-bar/user-menu/account-pane/delete-club.png" alt="Delete Favorite Team">
|
||||
<img id="account-delete-favorite-team-button-hover" class="account-delete-favorite-team-button" src="/img/navigation-bar/user-menu/account-pane/delete-club-hover.png" userID="{{this.userid}}" teamID="{{this.teamid}}" alt="Delete Favorite Team Hover" >
|
||||
</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,29 +0,0 @@
|
||||
<!-- Linking forms.css -->
|
||||
<div class="account-portal-container" id="login-pane">
|
||||
<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 -->
|
||||
{{#if message}}
|
||||
{{> message}}
|
||||
{{/if}}
|
||||
|
||||
<form action="/login" 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>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="password" class="form-label">Password:</label>
|
||||
<input type="password" class="form-control" id="password" name="password" required>
|
||||
</div>
|
||||
|
||||
<button class="account-portal-button" type="submit" id="login-submit">Submit</button>
|
||||
|
||||
</form>
|
||||
|
||||
<p class="mt-3">Don't have an account? <a id="register-button" href="/home">Register</a></p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,29 +0,0 @@
|
||||
<div class="account-portal-container" id="register-pane">
|
||||
<div class="form-container">
|
||||
|
||||
<h1 class="mt-5 mb-4">Register</h1>
|
||||
|
||||
<!--- START OF FORM --->
|
||||
<form action="/register" method="POST" class="mt-3"> <!-- Specify API route to DB -->
|
||||
<!-- app.post('register') is found in index.js -->
|
||||
|
||||
<div class="mb-3" id="username-form">
|
||||
<label for="username" class="form-label">Username:</label>
|
||||
<input type="text" class="form-control" id="usernameInput" name="username" required>
|
||||
</div>
|
||||
|
||||
<div class="mb-3" id="password-form">
|
||||
<label for="password" class="form-label">Password:</label>
|
||||
<input type="password" class="form-control" id="passwordInput" name="password" required>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="account-portal-button">Submit</button>
|
||||
|
||||
</form>
|
||||
<!--- END OF FORM --->
|
||||
|
||||
<p class="mt-3">Already have an account? <a id="register-page-login-button" href="/login">Login</a></p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user