From a2cbc08d60d7b3c5978bbaed15189e79edf7cdaa Mon Sep 17 00:00:00 2001
From: sharmp5 <sharmp5@rpi.edu>
Date: Mon, 9 Dec 2024 15:19:13 -0500
Subject: [PATCH] LEADERBOARD & PREDICTIONS

leaderboard and predictions css hopefully done. Simply changed colors and fonts
---
 Leaderboard/src/leaderboard.css | 134 +++++++++++++++++++-------------
 Predictions/src/predictions.css | 112 +++++++++++++++++---------
 2 files changed, 158 insertions(+), 88 deletions(-)

diff --git a/Leaderboard/src/leaderboard.css b/Leaderboard/src/leaderboard.css
index d852725..6b687c5 100644
--- a/Leaderboard/src/leaderboard.css
+++ b/Leaderboard/src/leaderboard.css
@@ -3,7 +3,7 @@ body, html {
     margin: 0;
     padding: 0;
     font-family: Arial, sans-serif;
-    background-color: #000;
+    background-color: #ffff;
 }
 
 #leaderboardTable {
@@ -13,98 +13,99 @@ body, html {
 }
 
 #leaderboardTable th, #leaderboardTable td {
-    border: 1px solid #7DD8BA;
+    border: 1px solid #00ffc3;
     padding: 10px;
     text-align: center;
 }
 
 #leaderboardTable th {
-    background-color: #696D73;
-    color: #7DD8BA;
+    background-color: #21946D;
+    color: #00ffc3;
 }
 
 #leaderboardTable tr:nth-child(even) {
-    background-color: #f2f2f2;
+    background-color: #333;
+}
+
+#leaderboardTable tr:nth-child(odd) {
+    background-color: #333;
 }
 
 #leaderboardTable tr:hover {
-    background-color: #e6e6e6;
+    background-color: #374244;
 }
 
 #MiddleColumn h1 {
-    color: #696D73;
+    color: #00ffc3;
     text-align: center;
     margin-top: 20px;
 }
+
 #leaderBoardTitle {
     text-align: center;
     margin-top: 20px;
 }
 
-#LeftCol{
-    /*border: solid red;*/
+#LeftCol {
     width: 20%;
     height: 1046px;
+    background-color: #ffff;
 }
 
-#MiddleCol{
-
+#MiddleCol {
     padding: 20px;
     box-sizing: border-box;
-    margin: 10px;
-    background-color: #000000;
+    
+    background-color: #333;
     border-radius: 8px;
-    border: 2px solid #00aaff;
+    border: 2px solid #00ffc3;
     width: 70%;
     height: 1046px;
 }
 
 #leaderBoardTitle {
-    color: #00aaff;
+    color: #333;
     text-align: center;
     margin-top: 60px;
     margin-bottom: 20px;
+    font-family: Arial black, Helvetica, sans-serif;
+    font-weight: bold;
+    font-style: italic;
+    font-size: 40;
 }
 
 #leaderboardTable {
     width: 90%;
     margin: 0 auto;
     border-collapse: collapse;
-    background-color: white;
-    box-shadow: 0 0 10px rgba(0,0,0,0.1);
-    table-layout: fixed; /* This ensures our column widths are respected */
+    background-color: #333;
+    box-shadow: 0 0 10px rgba(25, 215, 149, 0.2);
+    table-layout: fixed;
 }
 
 #leaderboardTable th, #leaderboardTable td {
-    border: 1px solid #7DD8BA;
+    border: 1px solid #19D795;
     padding: 12px;
     text-align: center;
-    overflow: hidden; /* This prevents content from overflowing */
-    text-overflow: ellipsis; /* This adds an ellipsis for overflowing text */
-    white-space: nowrap; /* This keeps content on a single line */
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: #00ffc3;
 }
 
 #leaderboardTable th {
-    background-color: #696D73;
-    color: #7DD8BA;
+    background-color: #21946D;
+    color: #00ffc3;
     font-weight: bold;
 }
 
-#leaderboardTable tr:nth-child(even) {
-    background-color: #f8f8f8;
-}
-
-#leaderboardTable tr:hover {
-    background-color: #e8e8e8;
-}
-
 #leaderboardTable td:first-child {
     font-weight: bold;
-    color: #696D73;
+    color: #00ffc3;
 }
 
 #leaderboardTable #rankings {
-    width: 20%; /* Reduced from 20% */
+    width: 20%;
     text-align: center;
 }
 
@@ -114,6 +115,7 @@ body, html {
 
 #leaderboardTable .player-name {
     vertical-align: middle;
+    color: #00ffc3;
 }
 
 #leaderboardTable #score {
@@ -121,7 +123,6 @@ body, html {
     text-align: center;
 }
 
-/* New style for profile picture */
 #leaderboardTable .profile-pic {
     width: 30px;
     height: 30px;
@@ -129,16 +130,16 @@ body, html {
     object-fit: cover;
     vertical-align: middle;
     margin-right: 10px;
+    border: 2px solid #00ffc3;
 }
 
-/*slot machine visualization*/
 .score-container {
     height: 1.5em;
     line-height: 1.5em;
     overflow: hidden;
     display: inline-block;
     position: relative;
-    background: linear-gradient(to bottom, #100048 0%, #060019 100%);
+    background: linear-gradient(to bottom, #21946D 0%, #19D795 100%);
     border-radius: 5px;
     padding: 5px 10px;
     min-width: 100px;
@@ -159,17 +160,15 @@ body, html {
     display: block;
     font-family: 'Digital-7', monospace;
     font-size: 1.5em;
-    color: #7fe1c5;
-    text-shadow: 0 0 5px #56D7B2;
+    color: #18e69e;
+    text-shadow: 0 0 5px #18E59D;
     text-align: center;
 }
 
-/* Create a glowing effect on hover */
 #leaderboardTable tr:hover .score-container {
-    box-shadow: 0 0 15px #7fe1c5;
+    box-shadow: 0 0 15px #18E59D;
 }
 
-/* Hide scrollbar */
 .score-container::-webkit-scrollbar {
     display: none;
 }
@@ -185,17 +184,23 @@ body, html {
 
 #sortButtons .btn {
     margin-right: 10px;
+    background-color: #00ffc3;
+    border-color: #00ffc3;
+    color: #333;
+    font-family: Arial black, Helvetica, sans-serif;
+    font-style: italic;
+    font-weight: bold;
 }
 
 #sortButtons .btn.active {
-    background-color: #007bff;
-    color: white;
+    background-color: #00c194;
+    color: #fff;
+    border-color: #00c194;
 }
 
 #leaderboardTable th, #leaderboardTable td {
     width: 25%;
-    background-color: #000
-
+    background-color: transparent;
 }
 
 .score-container, .winrate-container {
@@ -204,7 +209,7 @@ body, html {
     overflow: hidden;
     display: inline-block;
     position: relative;
-    background: linear-gradient(to bottom, #4c4c4c 0%, #2c2c2c 100%);
+    background: linear-gradient(to bottom, #21946D 0%, #19D795 100%);
     border-radius: 5px;
     padding: 5px 15px;
     min-width: 100px;
@@ -225,17 +230,42 @@ body, html {
     display: inline-block;
     font-family: 'Digital-7', monospace;
     font-size: 1.5em;
-    color: #7fe1c5;
-    text-shadow: 0 0 5px #56D7B2;
+    color: white;
+    text-shadow: 0 0 5px #18E59D;
     text-align: center;
     white-space: nowrap;
 }
 
-.rank-num{
-    color: #7fe1c5;
+.rank-num {
+    color: #18e69e;
 }
 
-#RightCol{
+#RightCol {
     width: 20%;
     height: 1046px;
+    background-color: #fff;
+}
+
+#viewButtons {
+    margin-bottom: 20px;
+}
+
+#viewButtons .btn {
+    margin-right: 10px;
+    background-color: #00ffc3;
+    border-color: #00ffc3;
+    color: #333;
+    font-family: Arial black, Helvetica, sans-serif;
+    font-style: italic;
+    font-weight: bold;
+}
+
+#viewButtons .btn.active {
+    background-color: #00c194;
+    color: #fff;
+    border-color: #00c194;
+}
+
+.words{
+    color: white;
 }
\ No newline at end of file
diff --git a/Predictions/src/predictions.css b/Predictions/src/predictions.css
index 6125d44..345fa6b 100644
--- a/Predictions/src/predictions.css
+++ b/Predictions/src/predictions.css
@@ -1,3 +1,13 @@
+body, html {
+    overflow-x: hidden;
+    margin: 0;
+    padding: 0;
+    font-family: Arial, sans-serif;
+    background-color: #d3d3d3;
+    min-height: 100vh;
+    width: 100%;
+}
+
 #frameWords {
     height: 100%;
     display: flex;
@@ -5,75 +15,105 @@
     padding: 0;
     justify-content: center;
     align-items: center;
+    background-color: #d3d3d3;
 }
 
 #mainframe {
-    background-color: rgb(39, 36, 36);
+    background-color: #333333;
     border-radius: 10px;
     padding: 10px;
     width: 90%;
     max-width: 1700px;
-    height: 90vh;
-    max-height: 700px;
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
-    transition: all 0.3s ease;
-    border: 10px solid #000000;
+    border: 4px solid #00ffc3;
     margin: 5rem auto;
-    z-index: 1; 
+    z-index: 1;
     overflow-y: auto;
 }
 
+#header1 {
+    padding: 20px;
+    font-family: Arial Black, Helvetica, sans-serif;
+    font-style: italic;
+    font-weight: bold;
+    display: flex;
+    font-size: 40px;
+    position: absolute;
+    justify-content: center;
+    transform: translate(-50%, -10%);
+    left: 50%;
+
+    align-items: center;
+    background: transparent;
+}
+
+#Recent_Results {
+    width: 100%;
+    padding: 15px;
+    background-color: transparent;
+}
 
+#Recent_Results h4 {
+    color: white;
+    font-size: 1.2rem;
+    margin-bottom: 20px;
+    text-align: center;
+}
 
-#mainframe > div {
+.game-card {
     width: 100%;
-    min-height: 20vh;
-    margin-bottom: 6px;
+    height: 150px;
+    background-color: rgb(39, 36, 36);
+    border: 1px solid #00ffc3;
+    border-radius: 8px;
+    margin-bottom: 15px;
+    padding: 15px;
+    cursor: pointer;
+    transition: transform 0.2s ease;
     display: flex;
-    justify-content: space-between;
     align-items: center;
-    padding: 0 20px;
-    box-sizing: border-box;
-    border: #00aaff solid 1px;
 }
 
-#mainframe > div:last-child {
-    margin-bottom: 0;
+.game-card:hover {
+    transform: translateY(-2px);
 }
 
-#mainframe > div img {
-    max-width: 20%;
-    max-height: 70%;
+.game-info {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px;
+    width: 100%;
+}
+
+.team-logo {
+    width: 100px;
+    height: 100px;
     object-fit: contain;
 }
 
-#mainframe > div .content {
-    flex-grow: 1;
-    padding: 0 20px;
+.game-details {
+    flex: 1;
     display: flex;
     flex-direction: column;
-    justify-content: center;
     align-items: center;
-    text-align: center;
-    color: white
+    justify-content: center;
+    gap: 15px;
 }
 
-#mainframe > div .content h2,
-#mainframe > div .content p {
-    margin: 0;
-    padding: 10px 0;
+.score-display {
+    color: white;
+    font-size: 2rem;
+    font-weight: bold;
+    text-align: center;
 }
 
-#header1{
-    font-family: 'Orbitron', sans-serif;
-    display: flex;
-    font-size: 60px;
-    position: absolute;
-    left: 35%;
-    color: #00aaff;
-    align-items: center;
+.time-display {
+    color: #888;
+    font-size: 1rem;
+    text-align: center;
 }
\ No newline at end of file