Merge pull request #126 from RPI-ITWS/Test-CSS-

CSS LEADERBOARD AND PREDICTIONS AGAIN
RPI-ITWS · Dec 9, 2024 · 7126d57 · 7126d57
2 parents 68abf25 + 6c5a6bb
commit 7126d57
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 36 deletions.
diff --git 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: #6e7f82;
+    background-color: #ffff;
 }
 
 #leaderboardTable {
@@ -24,57 +24,67 @@ body, html {
 }
 
 #leaderboardTable tr:nth-child(even) {
-    background-color: #2b3233;
+    background-color: #333;
 }
 
 #leaderboardTable tr:nth-child(odd) {
-    background-color: #2b3233;
+    background-color: #333;
 }
 
 #leaderboardTable tr:hover {
     background-color: #374244;
 }
 
+#MiddleColumn h1 {
+    color: #00ffc3;
+    text-align: center;
+    margin-top: 20px;
+}
 
 #leaderBoardTitle {
-    font-family: Arial black, Helvetica, sans-serif;
-    font-size: 40px;
-    font-weight: bold;
-    font-style: italic;
-    color: #333;
     text-align: center;
-    margin: 20px 0;
+    margin-top: 20px;
 }
 
 #LeftCol {
     width: 20%;
     height: 1046px;
-
+    background-color: #ffff;
 }
 
 #MiddleCol {
     padding: 20px;
     box-sizing: border-box;
-    background-color: #d3d3d3;
+
+    background-color: #333;
     border-radius: 8px;
-    border: 2px solid #00ffc3;
+    border: 4px solid #00ffc3;
     width: 70%;
     height: 1046px;
 }
 
-
+#leaderBoardTitle {
+    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: 40px;
+}
 
 #leaderboardTable {
     width: 90%;
     margin: 0 auto;
     border-collapse: collapse;
-    background-color: #2b3233;
+    background-color: #333;
     box-shadow: 0 0 10px rgba(25, 215, 149, 0.2);
     table-layout: fixed;
 }
 
 #leaderboardTable th, #leaderboardTable td {
-    border: 1px solid #00ffc3;
+    border: 1px solid #19D795;
     padding: 12px;
     text-align: center;
     overflow: hidden;
@@ -129,7 +139,7 @@ body, html {
     overflow: hidden;
     display: inline-block;
     position: relative;
-    background: linear-gradient(to bottom, #21946D 0%, #00ffc3 100%);
+    background: linear-gradient(to bottom, #21946D 0%, #19D795 100%);
     border-radius: 5px;
     padding: 5px 10px;
     min-width: 100px;
@@ -150,7 +160,7 @@ body, html {
     display: block;
     font-family: 'Digital-7', monospace;
     font-size: 1.5em;
-    color: #00ffc3;
+    color: #18e69e;
     text-shadow: 0 0 5px #18E59D;
     text-align: center;
 }
@@ -174,14 +184,18 @@ body, html {
 
 #sortButtons .btn {
     margin-right: 10px;
-    background-color: #21946D;
+    background-color: #00ffc3;
     border-color: #00ffc3;
-    color: #00ffc3;
+    color: #333;
+    font-family: Arial black, Helvetica, sans-serif;
+    font-style: italic;
+    font-weight: bold;
 }
 
 #sortButtons .btn.active {
-    background-color: #00ffc3;
-    color: #2b3233;
+    background-color: #00c194;
+    color: #fff;
+    border-color: #00c194;
 }
 
 #leaderboardTable th, #leaderboardTable td {
@@ -195,7 +209,7 @@ body, html {
     overflow: hidden;
     display: inline-block;
     position: relative;
-    background: linear-gradient(to bottom, #21946D 0%, #00ffc3 100%);
+    background: linear-gradient(to bottom, #21946D 0%, #19D795 100%);
     border-radius: 5px;
     padding: 5px 15px;
     min-width: 100px;
@@ -223,13 +237,13 @@ body, html {
 }
 
 .rank-num {
-    color: #00ffc3;
+    color: #18e69e;
 }
 
 #RightCol {
     width: 20%;
     height: 1046px;
-
+    background-color: #fff;
 }
 
 #viewButtons {
@@ -238,14 +252,18 @@ body, html {
 
 #viewButtons .btn {
     margin-right: 10px;
-    background-color: #21946D;
+    background-color: #00ffc3;
     border-color: #00ffc3;
-    color: #00ffc3;
+    color: #333;
+    font-family: Arial black, Helvetica, sans-serif;
+    font-style: italic;
+    font-weight: bold;
 }
 
 #viewButtons .btn.active {
-    background-color: #00ffc3;
-    color: #2b3233;
+    background-color: #00c194;
+    color: #fff;
+    border-color: #00c194;
 }
 
 .words{

diff --git a/Predictions/src/predictions.css b/Predictions/src/predictions.css
@@ -19,30 +19,29 @@ body, html {
 }
 
 #mainframe {
-    background-color: #333333;
+    background-color: #d3d3d3;
     border-radius: 10px;
     padding: 10px;
     width: 90%;
     max-width: 1700px;
-
-
     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);
-    border: 10px solid #333;
+    border: 4px solid #00ffc3;
     margin: 5rem auto;
     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: 60px;
+    font-size: 40px;
     position: absolute;
     justify-content: center;
     transform: translate(-50%, -10%);
@@ -68,7 +67,7 @@ body, html {
 .game-card {
     width: 100%;
     height: 150px;
-    background-color: rgb(39, 36, 36);
+    background-color: #ffff;
     border: 1px solid #00ffc3;
     border-radius: 8px;
     margin-bottom: 15px;
@@ -107,7 +106,7 @@ body, html {
 }
 
 .score-display {
-    color: white;
+    color: #333;
     font-size: 2rem;
     font-weight: bold;
     text-align: center;

diff --git a/index.php b/index.php
@@ -64,7 +64,7 @@
                 </tbody>
             </table>
             <div class="image-container-left">
-                <img src="./assets/Photos/harden.png" alt="Basketball Image Harden" class="background-image-left">
+                <img src="./assets/Photos/Harden.png" alt="Basketball Image Harden" class="background-image-left">
         </div>
     </div> 
         <div id="MiddleColumn">