2526-web/kelompok12-codebeater
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: styling leaderboard

Browse Source
This commit is contained in:
Matthew Florentino 2025-11-24 11:16:48 +07:00
parent 7e6d71d67a
commit fb1ebd6fee
3 changed files with 36 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/css/global.css
View File

@ -10,14 +10,3 @@ body {
background-color: black; background-color: black;
} }
.row {
display: flex;
height: 100dvh;
}
.col {
flex: 1;
width: 50%;
padding: 30px;
box-sizing: border-box;
}

31
src/css/style.css
View File

@ -134,6 +134,13 @@
color: yellow; color: yellow;
} }
.container-board {
display: flex;
justify-content: space-around;
align-items: center;
height: 100dvh;
}
.container-board .chara { .container-board .chara {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -147,4 +154,28 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
}
.container-board .chara .character img {
width: 300px;
image-rendering: pixelated;
margin: 20px;
}
.container-board .menu {
margin: 0 auto;
border-radius: 10px;
width: 400px;
border: 1px solid;
height: 40px;
align-content: center;
}
.container-board table {
margin: 0 auto;
border-radius: 10px;
width: 400px;
border: 1px solid;
height: 40px;
align-content: center;
} }

47
src/leaderboard.php
View File

@ -22,46 +22,9 @@
<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">
<title>leaderboard</title> <title>leaderboard</title>
<link rel="stylesheet" href="css/global.css">
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
</head> </head>
<style>
.chara {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.chara .character {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
flex-direction: column;
}
.chara .character img {
width: 300px;
image-rendering: pixelated;
margin: 20px;
}
.menu {
margin: 0 auto;
border-radius: 10px;
width: 400px;
border: 1px solid;
height: 40px;
align-content: center;
}
table {
width: 100%;
border: 1px solid;
height: 20px;
}
</style>
<body> <body>
<div class="container-board"> <div class="container-board">
<div class="chara"> <div class="chara">
@ -70,10 +33,10 @@
</div> </div>
<h1 style="text-align: center;">150pts</h1> <h1 style="text-align: center;">150pts</h1>
<div class="character"> <div class="character">
<img src="../src/assets/Design/KnightPixLE.png" alt="knight"> <img src="assets/Design/KnightPixLE.png" alt="knight">
</div> </div>
</div> </div>
<div class="board col"> <div class="board">
<table> <table>
<thead> <thead>
<tr> <tr>
@ -83,7 +46,7 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<?php <!-- <?php
$peringkat = 1; $peringkat = 1;
foreach ($leaderboard as $pemain) : foreach ($leaderboard as $pemain) :
?> ?>
@ -101,7 +64,7 @@
if (empty($leaderboard)) { if (empty($leaderboard)) {
echo '<tr><td colspan="3" style="text-align: center;">Belum ada pemain</td></tr>'; echo '<tr><td colspan="3" style="text-align: center;">Belum ada pemain</td></tr>';
} }
?> ?> -->
</tbody> </tbody>
</table> </table>
</div> </div>