mirror of
https://github.com/r-ca/kidshift-be.git
synced 2024-10-25 16:14:02 +00:00
113 lines
4.1 KiB
HTML
113 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ja">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=DotGothic16&display=swap" rel="stylesheet">
|
||
<title>KidShift-API</title>
|
||
<style>
|
||
body {
|
||
font-family: 'DotGothic16', sans-serif;
|
||
background-color: #f9f9f9;
|
||
color: #333;
|
||
margin: 0;
|
||
padding: 20px;
|
||
}
|
||
|
||
header {
|
||
background-color: #7BA2A7;
|
||
color: white;
|
||
padding: 10px 0;
|
||
text-align: center;
|
||
border-radius: 8px;
|
||
font-size: 2em;
|
||
}
|
||
|
||
main {
|
||
margin: 20px auto;
|
||
max-width: 1000px;
|
||
text-align: center;
|
||
font-size: 1.5em;
|
||
}
|
||
|
||
ul {
|
||
list-style-type: none;
|
||
padding: 0;
|
||
}
|
||
</style>
|
||
<script>
|
||
// send ping to server every 30 seconds and update the last checked time
|
||
setInterval(() => {
|
||
fetch(location.href + 'meta/ping')
|
||
.then(res => res.text())
|
||
.then(text => {
|
||
if (text === 'pong') {
|
||
document.querySelector('#stateStr').textContent = '✅ Server is running!';
|
||
document.querySelector('#catIcon').textContent = '✅';
|
||
} else { // Unknow response (? emoji
|
||
document.querySelector('#stateStr').textContent = '❓ Server is responding but unknown!';
|
||
document.querySelector('#stateStr').append(document.createElement('br'));
|
||
document.querySelector('#stateStr').append(document.createTextNode('Response: ' + text));
|
||
document.querySelector('#stateStr').style.color = '#333';
|
||
document.querySelector('#catIcon').textContent = '❓';
|
||
}
|
||
}).catch(err => {
|
||
document.querySelector('#stateStr').textContent = '❌ Server is down!';
|
||
document.querySelector('#catIcon').textContent = '❌';
|
||
}).finally(() => {
|
||
const now = new Date();
|
||
document.querySelector('#lastChecked').textContent = now.toLocaleTimeString();
|
||
});
|
||
}, 1000 * 1);
|
||
|
||
// get meta data from server ('/meta') and display it
|
||
function getMeta() {
|
||
fetch('/meta')
|
||
.then(res => res.json())
|
||
.then(meta => {
|
||
const ul = document.createElement('ul');
|
||
Object.entries(meta).forEach(([key, value]) => {
|
||
const li = document.createElement('li');
|
||
li.textContent = `${key}: ${value}`
|
||
ul.appendChild(li);
|
||
});
|
||
ul.style.textAlign = 'left';
|
||
ul.style.width = 'fit-content';
|
||
ul.style.margin = '20px auto';
|
||
document.querySelector('main').appendChild(ul);
|
||
});
|
||
}
|
||
getMeta();
|
||
</script>
|
||
</head>
|
||
|
||
<body>
|
||
<header>
|
||
<h1>KidShift API Server</h1>
|
||
</header>
|
||
<main>
|
||
|
||
<h2 id="stateStr"> ✅ Server is running! </h2>
|
||
<h3> Last checked: <span id="lastChecked"></h3>
|
||
<p>
|
||
A____A<br>
|
||
|・ㅅ・|<br>
|
||
|っ<span id="catIcon">✅</span>ｃ|<br>
|
||
| |<br>
|
||
U￣￣U<br>
|
||
</p>
|
||
|
||
<!-- divider -->
|
||
<div style="margin: 20px 0; border-bottom: 1px solid #ccc;"></div>
|
||
<!-- 以下の情報は取得時の実行環境の現状であって，稼働しているバージョンのことを指すとは限らないことを忠告 -->
|
||
<p style="font-size: 0.6em; color: gray">
|
||
The information below is about the current environment when the page is loaded, not necessarily the running version of the server.</p>
|
||
|
||
</main>
|
||
</body>
|
||
|
||
</html>
|