Skip to content

Commit

Permalink
new leaderBoard v1
Browse files Browse the repository at this point in the history
  • Loading branch information
@feove
feove committed Aug 22, 2024
1 parent fa3a8ad commit 3a66688
Show file tree
Hide file tree
Showing 2 changed files with 221 additions and 8 deletions.
95 changes: 90 additions & 5 deletions index/leaderboard.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 () {
Expand Down
134 changes: 131 additions & 3 deletions style/style-leaderboard.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

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

0 comments on commit 3a66688

Please sign in to comment.