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

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

@@ -1,3 +0,0 @@
-.card-container {
-    margin-bottom: 35px;
-}

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

@@ -0,0 +1,62 @@
+/* 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);
+
+  /* Counter skew contents to keep inner content straight*/
+  #card-contents {
+    transform: skewX(20deg); /* Counter-skew the content to maintain its appearance */
+  }
+}
+
+#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 */
+}

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;
+    
+}
+