Making HTML look good ^^

This commit is contained in:
zkwolf 2024-05-15 21:09:31 +02:00
parent 744006cac5
commit 9e95ebff13
3 changed files with 208 additions and 66 deletions

View File

@ -5,15 +5,37 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matchmaking Debug</title>
<style>
:root {
--stat-cell-size: 200px;
--queue-len-color: white;
--open-lobbies-color: white;
--killed-lobbies-color: white;
--queued-hunters-color: white;
--queued-runners-color: white;
}
body {
background-color: #333;
color: #fff;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
margin: 0;
}
.container {
max-width: 1264px;
width: 100%;
margin: 0 auto;
padding-block: 50px 25px;
}
h1, h2 {
color: #f2f2f2;
text-align: center;
}
.statistics p {
text-align: center;
}
.statistics p strong {
display: inline-block;
margin-bottom: 12px;
}
table {
border-collapse: collapse;
@ -45,6 +67,32 @@
li {
list-style-type: none;
}
.statistics {
padding-top: 20px;
}
.statistics > .row {
display: grid;
justify-content: center;
align-content: center;
gap: 40px;
}
.row-1 {
grid-template-columns: repeat(3, var(--stat-cell-size));
}
.row-2 {
grid-template-columns: repeat(2, var(--stat-cell-size));
}
.data-tbl-container {
display: block;
width: 100%;
padding-top: 20px;
}
.queue-len {
color: white;}
.open-lobbies{color: var(--open-lobbies-color);}
.killed-lobbies{color: var(--killed-lobbies-color);}
.queued-hunters{color: var(--queued-hunters-color);}
.queued-runners{color: var(--queued-runners-color);}
</style>
<meta http-equiv="refresh" content="4">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
@ -56,35 +104,47 @@
<meta name="theme-color" content="#ffffff">
</head>
<body>
<h1>Matchmaking Debug Information</h1>
<p><strong>Length of Queue:</strong> {{ len_queue }}</p>
<p><strong>Killed Lobbies:</strong> {{ len_killed_lobbies }}</p>
<p><strong>Queued Runners:</strong> {{ len_queued_runners }}</p>
<p><strong>Queued Hunters:</strong> {{ len_queued_hunters }}</p>
<p><strong>Open Lobbies:</strong> {{ len_open_lobbies }}</p>
<div class="container">
<h1>Matchmaking Debug Information</h1>
<h2>Lobby Data</h2>
<table>
<tr>
<th>Lobby ID</th>
<th>Hunters</th>
<th>Runners</th>
<th>Status</th>
</tr>
{% for lobby in lobby_data %}
<tr>
<td>{{ lobby.id }}</td>
<td>1</td>
<td>
<ul>
{% for runner in lobby.nonHosts %}
<li>{{ runner.userId }}</li>
{% endfor %}
</ul>
</td>
<td>{{ lobby.status }}</td>
</tr>
{% endfor %}
</table>
<div class="statistics">
<div class="row row-1">
<p class="queue-len"><strong>Length of Queue</strong> <br> {{ len_queue }}</p>
<p class="open-lobbies"><strong>Open Lobbies</strong> <br>{{ len_open_lobbies }}</p>
<p class="killed-lobbies"><strong>Killed Lobbies</strong> <br> {{ len_killed_lobbies }}</p>
</div>
<div class="row row-2">
<p class="queued-hunters"><strong>Queued Hunters</strong> <br> {{ len_queued_hunters }}</p>
<p class="queued-runners"><strong>Queued Runners</strong> <br> {{ len_queued_runners }}</p>
</div>
</div>
</div>
<div class="container">
<h2>Lobby Data</h2>
<div class="data-tbl-container">
<table>
<tr>
<th>Lobby ID</th>
<th>Hunters</th>
<th>Runners</th>
<th>Status</th>
</tr>
{% for lobby in lobby_data %}
<tr>
<td>{{ lobby.id }}</td>
<td>1</td>
<td>
<ul>
{% for runner in lobby.nonHosts %}
<li>{{ runner.userId }}</li>
{% endfor %}
</ul>
</td>
<td>{{ lobby.status }}</td>
</tr>
{% endfor %}
</table>
</div>
</div>
</body>
</html>
</html>

View File

@ -5,15 +5,37 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matchmaking Debug</title>
<style>
:root {
--stat-cell-size: 200px;
--queue-len-color: white;
--open-lobbies-color: white;
--killed-lobbies-color: white;
--queued-hunters-color: white;
--queued-runners-color: white;
}
body {
background-color: #333;
color: #fff;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
margin: 0;
}
.container {
max-width: 1264px;
width: 100%;
margin: 0 auto;
padding-block: 50px 25px;
}
h1, h2 {
color: #f2f2f2;
text-align: center;
}
.statistics p {
text-align: center;
}
.statistics p strong {
display: inline-block;
margin-bottom: 12px;
}
table {
border-collapse: collapse;
@ -45,6 +67,32 @@
li {
list-style-type: none;
}
.statistics {
padding-top: 20px;
}
.statistics > .row {
display: grid;
justify-content: center;
align-content: center;
gap: 40px;
}
.row-1 {
grid-template-columns: repeat(3, var(--stat-cell-size));
}
.row-2 {
grid-template-columns: repeat(2, var(--stat-cell-size));
}
.data-tbl-container {
display: block;
width: 100%;
padding-top: 20px;
}
.queue-len {
color: white;}
.open-lobbies{color: var(--open-lobbies-color);}
.killed-lobbies{color: var(--killed-lobbies-color);}
.queued-hunters{color: var(--queued-hunters-color);}
.queued-runners{color: var(--queued-runners-color);}
</style>
<meta http-equiv="refresh" content="4">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
@ -56,35 +104,48 @@
<meta name="theme-color" content="#ffffff">
</head>
<body>
<h1>Matchmaking Debug Information</h1>
<p><strong>Length of Queue:</strong> {{ len_queue }}</p>
<p><strong>Killed Lobbies:</strong> {{ len_killed_lobbies }}</p>
<p><strong>Queued Runners:</strong> {{ len_queued_runners }}</p>
<p><strong>Queued Hunters:</strong> {{ len_queued_hunters }}</p>
<p><strong>Open Lobbies:</strong> {{ len_open_lobbies }}</p>
<h2>Lobby Data</h2>
<table>
<tr>
<th>Lobby ID</th>
<th>Hunters</th>
<th>Runners</th>
<th>Status</th>
</tr>
{% for lobby in lobby_data %}
<tr>
<td>{{ lobby.id }}</td>
<td>{{ lobby.host }}</td>
<td>
<ul>
{% for runner in lobby.nonHosts %}
<li>{{ runner.userId }}</li>
{% endfor %}
</ul>
</td>
<td>{{ lobby.status }}</td>
</tr>
{% endfor %}
</table>
<div class="container">
<h1>Matchmaking Debug Information</h1>
<div class="statistics">
<div class="row row-1">
<p class="queue-len"><strong>Length of Queue</strong> <br> {{ len_queue }}</p>
<p class="open-lobbies"><strong>Open Lobbies</strong> <br>{{ len_open_lobbies }}</p>
<p class="killed-lobbies"><strong>Killed Lobbies</strong> <br> {{ len_killed_lobbies }}</p>
</div>
<div class="row row-2">
<p class="queued-hunters"><strong>Queued Hunters</strong> <br> {{ len_queued_hunters }}</p>
<p class="queued-runners"><strong>Queued Runners</strong> <br> {{ len_queued_runners }}</p>
</div>
</div>
</div>
<div class="container">
<h2>Lobby Data</h2>
<div class="data-tbl-container">
<table>
<tr>
<th>Lobby ID</th>
<th>Hunters</th>
<th>Runners</th>
<th>Status</th>
</tr>
{% for lobby in lobby_data %}
<tr>
<td>{{ lobby.id }}</td>
<td>{{ lobby.host }}</td>
<td>
<ul>
{% for runner in lobby.nonHosts %}
<li>{{ runner.userId }}</li>
{% endfor %}
</ul>
</td>
<td>{{ lobby.status }}</td>
</tr>
{% endfor %}
</table>
</div>
</div>
</body>
</html>
</html>

View File

@ -1,8 +1,4 @@
<!DOCTYPE html>
<meta
name = "color-scheme"
content = "light dark"
/>
<html>
<head>
<title>Deathgarden Bloodharvest REBIRTH API</title>
@ -13,12 +9,37 @@
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#000000">
<meta name="msapplication-TileColor" content="#000000">
<meta name="theme-color" content="#ffffff">
<style>
body {
background-color: #333;
color: #fff;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
text-align: center;
}
h1 {
color: white;
}
p {
margin-bottom: 20px;
}
a {
color: #007bff; /* blue */
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>Welcome to the Deathgarden Bloodharvest Testing API.</h1>
<p>For more information please visit its GitHub Repository.</p>
<div class="github-card" data-github="wolfswolke/DeathGarden_API_Rebirth" data-width="400" data-height="155" data-theme="default"></div>
<script src="//cdn.jsdelivr.net/github-cards/latest/widget.js"></script>
<p></p>
<a href="/debug/matchmaking" style="color: #007bff;">Match Status</a>
</body>
</html>