58 lines
2.8 KiB
HTML
58 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>한모CNN - 서비스 준비 중</title>
|
|
<style>
|
|
body { background-color: #0b0e14; color: #d1d5db; font-family: sans-serif; display: flex; align-items: center; justify-content: center; min-height: 100vh; margin: 0; }
|
|
.main-box { text-align: center; border: 1px solid #1f2937; background: #111827; padding: 40px; border-radius: 16px; box-shadow: 0 10px 25px rgba(0,0,0,0.5); width: 350px; }
|
|
h1 { color: #60a5fa; margin-bottom: 5px; letter-spacing: -1px; }
|
|
.sub-text { color: #9ca3af; margin-bottom: 30px; font-size: 0.9rem; }
|
|
.hmi-panel { background: #000; border-radius: 8px; padding: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 15px; border-left: 4px solid #60a5fa; }
|
|
.sensor { display: flex; flex-direction: column; align-items: center; }
|
|
.s-label { font-size: 0.7rem; color: #6b7280; margin-bottom: 5px; text-transform: uppercase; }
|
|
.s-value { font-family: 'Courier New', monospace; font-size: 1.6rem; color: #10b981; font-weight: bold; }
|
|
.full-width { grid-column: span 2; border-top: 1px solid #1f2937; padding-top: 10px; margin-top: 5px; }
|
|
.update-time { font-size: 0.7rem; color: #374151; margin-top: 25px; }
|
|
.blink { animation: fade 2s infinite; }
|
|
@keyframes fade { 50% { opacity: 0.3; } }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="main-box">
|
|
<h1>HANMO CONTROL & NETWORK CO., LTD.</h1>
|
|
<p class="sub-text">시스템 정식 서비스 준비 중입니다.</p>
|
|
<div class="hmi-panel">
|
|
<div class="sensor">
|
|
<span class="s-label">CPU</span>
|
|
<span class="s-value"><span id="cpu">--</span>°C</span>
|
|
</div>
|
|
<div class="sensor">
|
|
<span class="s-label">NVMe</span>
|
|
<span class="s-value"><span id="nvme">--</span>°C</span>
|
|
</div>
|
|
<div class="sensor full-width">
|
|
<span class="s-label">UPTIME</span>
|
|
<span class="s-value"><span id="days">--</span> DAYS</span>
|
|
</div>
|
|
</div>
|
|
<div class="update-time">
|
|
<span class="blink" style="color:#10b981">●</span> LIVE SCAN: <span id="time">--</span>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
function update() {
|
|
fetch('status.json?t=' + Date.now())
|
|
.then(r => r.json())
|
|
.then(d => {
|
|
document.getElementById('cpu').innerText = d.cpu_temp;
|
|
document.getElementById('nvme').innerText = d.nvme_temp;
|
|
document.getElementById('days').innerText = d.uptime_days;
|
|
document.getElementById('time').innerText = d.last_update;
|
|
}).catch(() => console.log("Waiting for data..."));
|
|
}
|
|
setInterval(update, 10000); update();
|
|
</script>
|
|
</body>
|
|
</html> |