From 3a666885a43bec44005f4d4778dda423d9f6b625 Mon Sep 17 00:00:00 2001
From: feove <99760430+feove@users.noreply.github.com>
Date: Thu, 22 Aug 2024 16:22:56 +0200
Subject: [PATCH] new leaderBoard v1

---
 index/leaderboard.html      |  95 +++++++++++++++++++++++--
 style/style-leaderboard.css | 134 +++++++++++++++++++++++++++++++++++-
 2 files changed, 221 insertions(+), 8 deletions(-)

diff --git a/index/leaderboard.html b/index/leaderboard.html
index a58d07f..4ca2445 100644
--- a/index/leaderboard.html
+++ b/index/leaderboard.html
@@ -36,16 +36,101 @@
        
     </div>
 
+    
+
     <div class="leaderboard-bg">
+        <div class="leaderboard-title">
+            <h1>Top Speedruns Leaderboard</h1>
+        </div>
         <div class="band"></div>
         <div class="leaderboard">
-            <!-- Name,Time,Proof,Version,Date -->
-
-
-
+            <table>
+                <thead>
+                    <tr>
+                        <th>Username</th>
+                        <th>Time</th>
+                        <th>Proof</th>
+                        <th>Version</th>
+                        <th>Date</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>SpeedRunner1</td>
+                        <td>12:34.56</td>
+                        <td><a href="proof1.html">Video</a></td>
+                        <td>1.0</td>
+                        <td>2024-08-20</td>
+                    </tr>
+                    <tr>
+                        <td>SpeedRunner2</td>
+                        <td>13:12.89</td>
+                        <td><a href="proof2.html">Video</a></td>
+                        <td>1.1</td>
+                        <td>2024-08-18</td>
+                    </tr>
+                    <tr>
+                        <td>SpeedRunner3</td>
+                        <td>14:22.45</td>
+                        <td><a href="proof3.html">Video</a></td>
+                        <td>1.2</td>
+                        <td>2024-08-15</td>
+                    </tr>
+                    <tr>
+                        <td>SpeedRunner4</td>
+                        <td>15:43.21</td>
+                        <td><a href="proof4.html">Video</a></td>
+                        <td>1.0</td>
+                        <td>2024-08-12</td>
+                    </tr>
+                    <tr>
+                        <td>SpeedRunner5</td>
+                        <td>16:05.78</td>
+                        <td><a href="proof5.html">Video</a></td>
+                        <td>1.1</td>
+                        <td>2024-08-10</td>
+                    </tr>
+                    <tr>
+                        <td>SpeedRunner6</td>
+                        <td>17:22.34</td>
+                        <td><a href="proof6.html">Video</a></td>
+                        <td>1.2</td>
+                        <td>2024-08-08</td>
+                    </tr>
+                    <tr>
+                        <td>SpeedRunner7</td>
+                        <td>18:54.67</td>
+                        <td><a href="proof7.html">Video</a></td>
+                        <td>1.0</td>
+                        <td>2024-08-06</td>
+                    </tr>
+                    <tr>
+                        <td>SpeedRunner8</td>
+                        <td>19:44.12</td>
+                        <td><a href="proof8.html">Video</a></td>
+                        <td>1.1</td>
+                        <td>2024-08-04</td>
+                    </tr>
+                    <tr>
+                        <td>SpeedRunner9</td>
+                        <td>20:30.78</td>
+                        <td><a href="proof9.html">Video</a></td>
+                        <td>1.2</td>
+                        <td>2024-08-02</td>
+                    </tr>
+                    <tr>
+                        <td>SpeedRunner10</td>
+                        <td>21:12.45</td>
+                        <td><a href="proof10.html">Video</a></td>
+                        <td>1.0</td>
+                        <td>2024-08-01</td>
+                    </tr>
+                </tbody>
+            </table>
         </div>
-      
     </div>
+    
+    
 </body>
 <script>
     document.addEventListener('scroll', function () {
diff --git a/style/style-leaderboard.css b/style/style-leaderboard.css
index 897d087..0c82f31 100644
--- a/style/style-leaderboard.css
+++ b/style/style-leaderboard.css
@@ -62,15 +62,143 @@ body {
     transition: all 1s ease; 
 }
 .leaderboard{
-
     position: relative;
-    margin-top: 25%;
+    margin-top: 27%;
     background-color: blue;
     width:100%;
     height: 70%;
     z-index: 9999; 
 
+}
+
+.leaderboard-title {
+    text-align: center;
+    margin-top: 3%;
+    margin-bottom: 0;
+    margin-left: 10%;
+    margin-right: 10%;
+}
 
+.leaderboard-title h1 {
+    position: relative;
+    font-size: 4vw;
+    font-weight: bold;
+    color: #ffffff;
+    text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.7);
+    background: linear-gradient(135deg, #006400, #00994d);
+    padding: 20px 40px; 
+    border-radius: 20px; 
+    display: inline-block;
+    border: 5px solid rgba(255, 255, 255, 0.3); 
+    box-shadow: 0 0 25px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 255, 0, 0.7) inset;
+}
 
+.leaderboard-title h1::after {
+    content: '';
+    position: absolute;
+    top: -10px;
+    bottom: -10px;
+    left: -10px;
+    right: -10px;
+    border: 2px solid #ffffff; 
+    border-radius: 25px; 
+    z-index: -1; 
+    opacity: 0.6; 
+}
+
+
+/* Leaderboard  */
+.leaderboard {
+    position: relative;
+    
+    margin-top: 5%;
+    width: 100%;
+    height: 70%;
+    text-align: center;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
+    background: linear-gradient(135deg, #3cb572, #23ac5a, #29ec8abe); 
+    animation: gradientAnimation 10s ease infinite;
+    background-size: 200% 200%;
+}
+
+@keyframes gradientAnimation {
+    0% {
+        background-position: 0% 50%;
+    }
+    50% {
+        background-position: 100% 50%;
+    }
+    100% {
+        background-position: 0% 50%;
+    }
+}
+
+table {
+    margin-left: 5%;
+    margin-right: 5%;
+    margin-top: 3%;
+    width: 90%;
+    height: 90%;
+    border-collapse: collapse;
+    font-family: 'Roboto Slab', serif;
+}
+
+th, td {
+    padding: 2%;
+    text-align: center;
+    border: 2px solid #ffffff;
+    transition: background-color 0.8s ease, color 0.3s ease; 
+}
 
-}
\ No newline at end of file
+th {
+    font-size: 1.8em;
+    color: #ffffff;
+    background-color: rgba(0, 0, 0, 0.3); 
+}
+
+td {
+    font-size: 1.2em;
+    color: #ffffff;
+}
+
+th:nth-child(1),
+td:nth-child(1) {
+    background-color: rgba(0, 100, 160, 0.7); /* Dark Blue */
+}
+
+th:nth-child(2),
+td:nth-child(2) {
+    background-color: rgba(0, 85, 128, 0.7); /* Dark Green */
+}
+
+th:nth-child(3),
+td:nth-child(3) {
+    background-color: rgba(25, 43, 135, 0.7); /* Dark Red */
+}
+
+th:nth-child(4),
+td:nth-child(4) {
+    background-color: rgba(45, 112, 160, 0.7); /* Dark Brown */
+}
+
+th:nth-child(5),
+td:nth-child(5) {
+    background-color: rgba(11, 126, 184, 0.7); /* Dark Gold */
+}
+
+/* Hover effect */
+th:hover, td:hover {
+    background-color: rgba(255, 255, 255, 0.3); 
+    color: #000000; 
+}
+
+td a {
+    color: #47a7ff;
+    text-decoration: none;
+}
+
+td a:hover {
+    text-decoration: underline;
+}