mirror of
https://github.com/r-ca/kidshift-be.git
synced 2024-10-26 00:24:02 +00:00
103 lines
3.3 KiB
HTML
103 lines
3.3 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: 800px;
|
||
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 => {
|
||
document.querySelector('#lastChecked').textContent = new Date().toLocaleTimeString();
|
||
if (text === 'pong') {
|
||
document.querySelector('#stateStr').textContent = '✅ Server is running!';
|
||
document.querySelector('#catIcon').textContent = '✅';
|
||
} else {
|
||
document.querySelector('#stateStr').textContent = '❌ Server is down!';
|
||
document.querySelector('#catIcon').textContent = '❌';
|
||
}
|
||
|
||
});
|
||
}, 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);
|
||
});
|
||
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, not necessarily the version running.</p>
|
||
|
||
</main>
|
||
</body>
|
||
|
||
</html>
|