2024-06-16 05:52:46 +00:00
|
|
|
|
<!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;
|
2024-06-17 04:48:58 +00:00
|
|
|
|
max-width: 1000px;
|
2024-06-16 05:52:46 +00:00
|
|
|
|
text-align: center;
|
|
|
|
|
|
font-size: 1.5em;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
ul {
|
|
|
|
|
|
list-style-type: none;
|
|
|
|
|
|
padding: 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
2024-06-17 03:08:23 +00:00
|
|
|
|
<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 = '✅';
|
2024-06-17 03:30:29 +00:00
|
|
|
|
} 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 = '❓';
|
2024-06-17 03:08:23 +00:00
|
|
|
|
}
|
2024-06-17 03:30:29 +00:00
|
|
|
|
}).catch(err => {
|
|
|
|
|
|
document.querySelector('#stateStr').textContent = '❌ Server is down!';
|
|
|
|
|
|
document.querySelector('#catIcon').textContent = '❌';
|
|
|
|
|
|
}).finally(() => {
|
|
|
|
|
|
const now = new Date();
|
|
|
|
|
|
document.querySelector('#lastChecked').textContent = now.toLocaleTimeString();
|
2024-06-17 03:08:23 +00:00
|
|
|
|
});
|
2024-06-17 03:24:11 +00:00
|
|
|
|
}, 1000 * 1);
|
2024-06-17 03:08:23 +00:00
|
|
|
|
|
|
|
|
|
|
// 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');
|
2024-06-17 03:24:11 +00:00
|
|
|
|
li.textContent = `${key}: ${value}`
|
2024-06-17 03:08:23 +00:00
|
|
|
|
ul.appendChild(li);
|
|
|
|
|
|
});
|
2024-06-17 03:24:11 +00:00
|
|
|
|
ul.style.textAlign = 'left';
|
|
|
|
|
|
ul.style.width = 'fit-content';
|
|
|
|
|
|
ul.style.margin = '20px auto';
|
2024-06-17 03:08:23 +00:00
|
|
|
|
document.querySelector('main').appendChild(ul);
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
getMeta();
|
|
|
|
|
|
</script>
|
2024-06-16 05:52:46 +00:00
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<header>
|
|
|
|
|
|
<h1>KidShift API Server</h1>
|
|
|
|
|
|
</header>
|
|
|
|
|
|
<main>
|
|
|
|
|
|
|
2024-06-17 03:08:23 +00:00
|
|
|
|
<h2 id="stateStr"> ✅ Server is running! </h2>
|
|
|
|
|
|
<h3> Last checked: <span id="lastChecked"></h3>
|
2024-06-16 05:52:46 +00:00
|
|
|
|
<p>
|
2024-06-17 03:08:23 +00:00
|
|
|
|
A____A<br>
|
2024-06-16 08:40:21 +00:00
|
|
|
|
|・ㅅ・|<br>
|
2024-06-17 03:08:23 +00:00
|
|
|
|
|っ<span id="catIcon">✅</span>ｃ|<br>
|
2024-06-16 08:40:21 +00:00
|
|
|
|
| |<br>
|
2024-06-17 03:08:23 +00:00
|
|
|
|
U￣￣U<br>
|
2024-06-16 05:52:46 +00:00
|
|
|
|
</p>
|
2024-06-17 03:08:23 +00:00
|
|
|
|
|
|
|
|
|
|
<!-- divider -->
|
|
|
|
|
|
<div style="margin: 20px 0; border-bottom: 1px solid #ccc;"></div>
|
2024-06-17 03:33:25 +00:00
|
|
|
|
<!-- 以下の情報は取得時の実行環境の現状であって，稼働しているバージョンのことを指すとは限らないことを忠告 -->
|
|
|
|
|
|
<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>
|
2024-06-17 03:08:23 +00:00
|
|
|
|
|
2024-06-16 05:52:46 +00:00
|
|
|
|
</main>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
|
|
</html>
|
