Restyle the homepage
This commit is contained in:
Ac_K
parent
4a0a5b2e6b
commit
9183528f1b
3 changed files with 97 additions and 55 deletions
65
index.html
65
index.html
|
|
@ -48,35 +48,56 @@
|
|||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-5 who-online">
|
||||
<div class="card shadow h-100">
|
||||
<div class="col-sm-4 margin-bt">
|
||||
<div class="card shadow">
|
||||
<div class="card-header">
|
||||
<h4 class="my-0 font-weight-normal"><i class="fas fa-users"></i> Who is online ?</h4>
|
||||
<h4 class="my-0 font-weight-normal"><i class="red-sw fas fa-users"></i> Who is online ?</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="container main-stats"></div>
|
||||
<table class="w-100">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th class="text-right">Public <i class="fas fa-user"></i></th>
|
||||
<th class="text-right">Private <i class="fas fa-user-secret"></i></th>
|
||||
<th class="text-right">Total <i class="fas fa-users"></i></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><i class="fas fa-users"></i> Players</th>
|
||||
<td class="players-public text-right"></td>
|
||||
<td class="players-private text-right"></td>
|
||||
<td class="players-total text-right"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><i class="fas fa-gamepad"></i> Games</th>
|
||||
<td class="games-public text-right"></td>
|
||||
<td class="games-private text-right"></td>
|
||||
<td class="games-total text-right"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><i class="fas fa-people-arrows"></i> In Connection</th>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td class="in-progress-total text-right"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><i class="fas fa-server"></i> On Proxy Server</th>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td class="proxy-server-total text-right"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-7 hosted-games">
|
||||
<div class="card shadow">
|
||||
<div class="card-header">
|
||||
<h4 class="my-0 font-weight-normal"><i class="fas fa-network-wired"></i> Hosted Games</h4>
|
||||
</div>
|
||||
<div class="card-body public-games">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Game</th>
|
||||
<th>Players</th>
|
||||
<th>State</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="games-table">
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="col-sm-8">
|
||||
<div class="card-header margin-bt">
|
||||
<h4 class="my-0 font-weight-normal"><i class="red-sw fas fa-network-wired"></i> Hosted Games</h4>
|
||||
</div>
|
||||
<div class="public-games"></div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="pt-4 my-md-5 pt-md-5 border-top">
|
||||
|
|
|
|||
25
main.js
25
main.js
|
|
@ -2,21 +2,24 @@ $(document).ready(function() {
|
|||
function encode(r){return r.replace(/[\x26\x0A\<>'"]/g,function(r){return"&#"+r.charCodeAt(0)+";"})}
|
||||
|
||||
$.getJSON("/api", function(data) {
|
||||
$(".main-stats").append('<div class="row"><div class="col-1"><i class="fas fa-user"></i></div><div class="col-6">Public Players</div><div class="col-4 text-right">' + data.public_players_count + '</div></div>');
|
||||
$(".main-stats").append('<div class="row"><div class="col-1"><i class="fas fa-user-secret"></i></div><div class="col-6">Private Players</div><div class="col-4 text-right">' + data.private_players_count + '</div></div>');
|
||||
$(".main-stats").append('<div class="row"><div class="col-1"><i class="fas fa-users"></i></div><div class="col-6">Total Players</div><div class="col-4 text-right">' + data.total_players_count + '</div></div>');
|
||||
$(".main-stats").append('<div class="row row-space"></div>');
|
||||
$(".main-stats").append('<div class="row"><div class="col-1"><i class="fas fa-gamepad"></i></div><div class="col-6">Public Games</div><div class="col-4 text-right">' + data.public_games_count + '</div></div>');
|
||||
$(".main-stats").append('<div class="row"><div class="col-1"><i class="fas fa-lock"></i></div><div class="col-6">Private Games</div><div class="col-4 text-right">' + data.private_games_count + '</div></div>');
|
||||
$(".main-stats").append('<div class="row"><div class="col-1"><i class="fas fa-layer-group"></i></div><div class="col-6">Total Games</div><div class="col-4 text-right">' + data.total_games_count + '</div></div>');
|
||||
$(".main-stats").append('<div class="row row-space"></div>');
|
||||
$(".main-stats").append('<div class="row"><div class="col-1"><i class="fas fa-people-arrows"></i></div><div class="col-6">In Connection</div><div class="col-4 text-right">' + data.in_progress_count + '</div></div>');
|
||||
$(".main-stats").append('<div class="row"><div class="col-1"><i class="fas fa-server"></i></div><div class="col-6">On Proxy Server</div><div class="col-4 text-right">' + data.master_proxy_count + '</div></div>');
|
||||
$(".players-public").text(data.public_players_count);
|
||||
$(".players-private").text(data.private_players_count);
|
||||
$(".players-total").text(data.total_players_count);
|
||||
|
||||
$(".games-public").text(data.public_games_count);
|
||||
$(".games-private").text(data.private_games_count);
|
||||
$(".games-total").text(data.total_games_count);
|
||||
|
||||
$(".in-progress-total").text(data.in_progress_count);
|
||||
$(".proxy-server-total").text(data.master_proxy_count);
|
||||
});
|
||||
|
||||
$.getJSON("/api/public_games", function(data) {
|
||||
$.each(data, function() {
|
||||
$(".games-table").append('<tr><th><i class="fas fa-gamepad"></i> ' + this.game_name + '<br /><span class="titleid">(' + this.title_id + ')</span></th><td>' + this.player_count + '/' + this.max_player_count + ' <i class="fas fa-users"></i><br /><i class="fas fa-home"></i> ' + this.players.map(player => encode(player)).join(', <i class="fas fa-user"></i> ') + '</td><td><i class="fas fa-network-wired"></i> ' + this.mode + ' (' + this.status + ')</td></tr>');
|
||||
$(".public-games").append('<div class="card margin-bt shadow"><div class="card-header"><div class="row"><div class="col-sm-10"><i class="red-sw fas fa-gamepad"></i> ' + this.game_name + ' <span class="badge badge-dark">' + this.title_id + '</span></div>'
|
||||
+ '<div class="col-sm-2 games-players-number"><i class="blue-sw fas fa-users"></i> ' + this.player_count + '/' + this.max_player_count + ' Players</div></div></div>'
|
||||
+ '<div class="card-body"><blockquote class="blockquote mb-0"><i class="blue-sw fas fa-home"></i> ' + this.players.map(player => encode(player)).join(', <i class="fas fa-user"></i> ')
|
||||
+ '<footer class="blockquote-footer"><i class="blue-sw fas fa-network-wired"></i> ' + this.mode + ' (' + this.status + ')</footer></blockquote></div></div>');
|
||||
});
|
||||
});
|
||||
});
|
||||
62
style.css
62
style.css
|
|
@ -15,11 +15,6 @@ table {
|
|||
color: #FFFFFF !important;
|
||||
}
|
||||
|
||||
.public-games {
|
||||
height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.display-4, .font-weight-normal {
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
|
@ -44,29 +39,48 @@ table {
|
|||
background-color: #515159;
|
||||
}
|
||||
|
||||
.row-space { height: 15px; }
|
||||
|
||||
.main-stats .col-4 {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.main-stats .row {
|
||||
margin-right: -30px;
|
||||
}
|
||||
|
||||
.titleid {
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.online-dot {
|
||||
color: #4bd6d1;
|
||||
color: #02c5e5;
|
||||
}
|
||||
|
||||
.margin-bt {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.blockquote {
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
|
||||
.blockquote-footer {
|
||||
color: #FFFFFF !important;
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: normal !important;
|
||||
}
|
||||
|
||||
.red-sw {
|
||||
color: #ff5f55;
|
||||
}
|
||||
|
||||
.blue-sw {
|
||||
color: #02c5e5;
|
||||
}
|
||||
|
||||
.blockquote-footer::before {
|
||||
color: #02c5e5;
|
||||
content: "\221F\00A0" !important;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.games-players-number {
|
||||
text-align: right!important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
|
@ -74,7 +88,11 @@ table {
|
|||
border-top: none !important;
|
||||
}
|
||||
|
||||
.who-online {
|
||||
.margin-bt {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.games-players-number {
|
||||
text-align: left!important;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue