anulax
/
skamkraft.anulax.ch
1
0
Fork 0
Code Issues Pull Requests Packages project_board Releases Wiki Activity

finished leaderboard git pull origin agent_bryte!

Browse Source
agent_bryte
AmorimDSJM ago%!(EXTRA string=2 years)
parent 3db46f2d25
commit e88a21430e
3 changed files with 59 additions and 39 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 61
      css/style.css
  2. 11
      index.html
  3. 4
      js/main.js

61
css/style.css
Unescape View File

@ -6,37 +6,44 @@
font-family: M42; font-family: M42;
font-size: 10px; font-size: 10px;
} }
.container {
margin: auto;
width: 70%;
}
.head-board { .head-board {
display: flex; display: flex;
margin: auto; margin: auto;
justify-content: space-between; justify-content: space-between;
flex-direction: row; width: 100%;
width: 70%;
border: 2px solid black; border: 2px solid black;
border-bottom-color: white; border-bottom-color: white;
border-bottom-width: 1px; border-bottom-width: 1px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 10px; border-top-left-radius: 10px;
border-top-right-radius: 10px; border-top-right-radius: 10px;
background-color: black; background-color: black;
} }
.btn-cont {
margin: auto;
display: flex;
justify-content: space-between;
width: 100.3%;
}
.leaderboard { .leaderboard {
display: flex; display: flex;
margin: auto; margin: auto;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
width: 70%; width: 100%;
height: 50vh; height: 50vh;
overflow-y: scroll; overflow-y: scroll;
overflow-x:visible; overflow-x:visible;
border: 2px solid black; border: 2px solid black;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
background-color: black; background-color: black;
scrollbar-width: none; /* Firefox */ scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; -ms-overflow-style: none;
@ -74,29 +81,37 @@ p{
.ships{ .ships{
color: rgb(146, 146, 146); color: rgb(146, 146, 146);
} }
.buttons button{ button{
position: absolute; /* Position them relative to the browser window */ margin: auto;
left: 200px; /* Position them outside of the screen */ border: 3px none none 3px;
transition: 0.3s; /* Add transition on hover */ transition: 0.3s; /* Add transition on hover */
padding: 15px; /* 15px padding */ padding: 15px; /* 15px padding */
width: 300px; /* Set a specific width */
text-decoration: none; /* Remove underline */ text-decoration: none; /* Remove underline */
font-size: 20px; /* Increase font size */ font-size: 11px; /* Increase font size */
color: white; /* White text color */ color: white; /* White text color */
border-radius: 0 5px 5px 0; /* Rounded corners on the top right and bottom right side */
} }
.buttons button:hover{ button:hover{
left: 400px; /* On mouse-over, make the elements appear as they should */ transition: ease-in-out;
color: black;
transition-duration: 0.3s;
background-color: white;
} }
/* The about link: 20px from the top with a green background */
.btn-test{ .btn-test{
top: 80px; background-color: black;
background-color: #04AA6D; color: rgb(250, 204, 88);
width: 50%;
border-left: none;
border-bottom: none;
border-radius: 0px 0px 0px 10px;
} }
.btn-test2{ .btn-test2{
top: 180px; background-color: black;
background-color: #2196F3; /* Blue */ color: rgb(86, 187, 255);
border-bottom: none;
border-right: none;
border-left: none;
border-radius: 0px 0px 10px 0px;
width: 50%;
} }

11
index.html
Unescape View File

@ -1,16 +1,15 @@
<!-- © 2023 Entreprise SpaceTarders --> <!-- © 2023 Entreprise SpaceTarders -->
<!DOCTYPE html> <!DOCTYPE html>
<header> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/css/style.css"> <link rel="stylesheet" href="/css/style.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script type="module" src="js/main.js" defer></script> <script type="module" src="js/main.js" defer></script>
</header> </head>
<body> <body>
<div class="container">
<div class="head-board"> <div class="head-board">
<p class="num">rank</p> <p class="num">rank</p>
<p class="symbol">name</p> <p class="symbol">name</p>
@ -20,7 +19,9 @@
<p class="ships">ships</p> <p class="ships">ships</p>
</div> </div>
<div class="leaderboard"> <div class="leaderboard">
<div class="buttons">
</div>
<div class="btn-cont">
<button class="btn-test">Sort by credits</button> <button class="btn-test">Sort by credits</button>
<button class="btn-test2">Sort by ships</button> <button class="btn-test2">Sort by ships</button>
</div> </div>

4
js/main.js
Unescape View File

@ -61,3 +61,7 @@ $(document).ready(function() {
state = true state = true
}) })
}); });
$('button').on('click', () => {
$('btn-test').css('width', '75%');
})
Write Preview
Loading…
Cancel
Save