133 lines
3.9 KiB
HTML
133 lines
3.9 KiB
HTML
<!doctype html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Мониторинг системы</title>
|
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🖥️</text></svg>">
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<header class="top">
|
|
<div class="wrap">
|
|
<div class="brand">
|
|
<span class="dot" id="statusDot"></span>
|
|
<h1>Мониторинг системы</h1>
|
|
</div>
|
|
<div class="host">
|
|
<span id="hostname">загрузка…</span>
|
|
<span class="muted" id="osinfo"></span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="wrap">
|
|
|
|
<div class="grid gauges">
|
|
<section class="card gauge" id="cpuCard">
|
|
<div class="gauge-head">
|
|
<span class="ico">⚙️</span>
|
|
<div>
|
|
<h2>Процессор</h2>
|
|
<p class="muted" id="cpuModel">—</p>
|
|
</div>
|
|
</div>
|
|
<div class="gauge-body">
|
|
<div class="num" id="cpuPct">0<span class="pc">%</span></div>
|
|
<div class="bar"><i id="cpuBar"></i></div>
|
|
<div class="sub muted" id="cpuSub">—</div>
|
|
</div>
|
|
<svg class="spark" id="cpuSpark" viewBox="0 0 100 30" preserveAspectRatio="none"></svg>
|
|
</section>
|
|
|
|
<section class="card gauge" id="memCard">
|
|
<div class="gauge-head">
|
|
<span class="ico">🧠</span>
|
|
<div>
|
|
<h2>Память</h2>
|
|
<p class="muted">Оперативная память</p>
|
|
</div>
|
|
</div>
|
|
<div class="gauge-body">
|
|
<div class="num" id="memPct">0<span class="pc">%</span></div>
|
|
<div class="bar"><i id="memBar"></i></div>
|
|
<div class="sub muted" id="memSub">—</div>
|
|
</div>
|
|
<svg class="spark" id="memSpark" viewBox="0 0 100 30" preserveAspectRatio="none"></svg>
|
|
</section>
|
|
|
|
<section class="card gauge" id="diskCard">
|
|
<div class="gauge-head">
|
|
<span class="ico">💾</span>
|
|
<div>
|
|
<h2>Диск</h2>
|
|
<p class="muted">Корневой раздел</p>
|
|
</div>
|
|
</div>
|
|
<div class="gauge-body">
|
|
<div class="num" id="diskPct">0<span class="pc">%</span></div>
|
|
<div class="bar"><i id="diskBar"></i></div>
|
|
<div class="sub muted" id="diskSub">—</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="grid stats">
|
|
<section class="card stat">
|
|
<span class="ico">🕒</span>
|
|
<div>
|
|
<div class="label">Аптайм</div>
|
|
<div class="value" id="uptime">—</div>
|
|
</div>
|
|
</section>
|
|
<section class="card stat">
|
|
<span class="ico">📊</span>
|
|
<div>
|
|
<div class="label">Нагрузка (1/5/15 мин)</div>
|
|
<div class="value" id="loadavg">—</div>
|
|
</div>
|
|
</section>
|
|
<section class="card stat">
|
|
<span class="ico">🌐</span>
|
|
<div>
|
|
<div class="label">Сеть</div>
|
|
<div class="value" id="network">—</div>
|
|
</div>
|
|
</section>
|
|
<section class="card stat">
|
|
<span class="ico">🧬</span>
|
|
<div>
|
|
<div class="label">Ядра / архитектура</div>
|
|
<div class="value" id="cores">—</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<section class="card">
|
|
<div class="proc-head">
|
|
<h2>Топ процессов</h2>
|
|
<span class="muted small">по загрузке CPU</span>
|
|
</div>
|
|
<div class="table-wrap">
|
|
<table id="procTable">
|
|
<thead>
|
|
<tr><th>PID</th><th>Процесс</th><th>CPU</th><th>Память</th></tr>
|
|
</thead>
|
|
<tbody id="procBody">
|
|
<tr><td colspan="4" class="muted">загрузка…</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="foot muted">
|
|
Обновляется автоматически каждые 3 секунды · <span id="lastUpd">—</span>
|
|
</footer>
|
|
|
|
</main>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|