61 lines
1.9 KiB
HTML
61 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>MC服务器监控</title>
|
|
<link href="https://cdn.jsdmirror.com/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
|
<style>
|
|
body { background: linear-gradient(45deg, #1a1a1a, #2a2a2a); color: #fff; }
|
|
.card { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); }
|
|
.chart-container { background: rgba(0,0,0,0.3); border-radius: 15px; padding: 20px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container py-5">
|
|
<h1 class="text-center mb-4"><i class="fas fa-server"></i> MC服务器监控</h1>
|
|
<div id="status" class="row"></div>
|
|
<div class="chart-container mt-5">
|
|
<canvas id="chart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdmirror.com/npm/chart.js"></script>
|
|
<script>
|
|
let chart;
|
|
async function update() {
|
|
const res = await fetch('/data');
|
|
const data = await res.json();
|
|
|
|
// 更新状态卡片
|
|
document.getElementById('status').innerHTML = data.map(s => `
|
|
<div class="col-md-4 mb-4">
|
|
<div class="card p-3">
|
|
<h3>${s.addr}:${s.port}</h3>
|
|
<p class="mb-1">当前在线: <span class="badge bg-success">${s.current}</span></p>
|
|
<small>最后更新: ${new Date(s.updated).toLocaleString()}</small>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
|
|
// 更新图表
|
|
const ctx = document.getElementById('chart').getContext('2d');
|
|
if(chart) chart.destroy();
|
|
|
|
chart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: data[0].history.map(d => new Date(d.timestamp).toLocaleString()),
|
|
datasets: data.map((s, i) => ({
|
|
label: `${s.addr}:${s.port}`,
|
|
data: s.history.map(d => d.online),
|
|
borderColor: `hsl(${i * 90}, 75%, 50%)`,
|
|
tension: 0.2
|
|
}))
|
|
}
|
|
});
|
|
}
|
|
setInterval(update, 60000);
|
|
update();
|
|
</script>
|
|
</body>
|
|
</html> |