232 lines
9.6 KiB
HTML
232 lines
9.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>JAESWIFT // TELEMETRY</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=JetBrains+Mono:wght@300;400;500;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="/css/style.css">
|
|
<link rel="stylesheet" href="/css/section.css">
|
|
<link rel="stylesheet" href="/css/telemetry.css">
|
|
<link rel="stylesheet" href="/css/sitewide-effects.css">
|
|
</head>
|
|
<body>
|
|
<div class="scanline-overlay"></div>
|
|
<div class="grid-bg"></div>
|
|
|
|
<!-- Boot sequence overlay -->
|
|
<div class="tm-boot" id="tmBoot">
|
|
<div class="tm-boot-line" style="animation-delay:0.0s">INITIALISING TELEMETRY UPLINK</div>
|
|
<div class="tm-boot-line" style="animation-delay:0.4s">NEGOTIATING SECURE CHANNEL // VPS.MCR01</div>
|
|
<div class="tm-boot-line" style="animation-delay:0.8s">DECRYPTING OPS FEED — KEY ROLL OK</div>
|
|
<div class="tm-boot-bar"></div>
|
|
<div class="tm-boot-line" style="animation-delay:1.3s">AUTHORISED — OPERATOR GRADE A</div>
|
|
</div>
|
|
|
|
<nav class="nav-main" id="navbar">
|
|
<div class="nav-container">
|
|
<a href="/" class="nav-logo">
|
|
<span class="logo-bracket">[</span> JAE <span class="logo-bracket">]</span>
|
|
</a>
|
|
<button class="nav-toggle" id="navToggle" aria-label="Menu">
|
|
<span></span><span></span><span></span>
|
|
</button>
|
|
<ul class="nav-menu" id="navMenu"></ul>
|
|
<div class="nav-status">
|
|
<span class="nav-clock" id="navClock"></span>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="breadcrumb">
|
|
<a href="/">HOME</a>
|
|
<span class="separator">/</span>
|
|
<a href="/hq">HQ</a>
|
|
<span class="separator">/</span>
|
|
<span class="current">TELEMETRY</span>
|
|
</div>
|
|
|
|
<section class="section-header" style="padding-top: calc(var(--nav-height) + 1.5rem);">
|
|
<div class="section-header-label">HQ // HEADQUARTERS</div>
|
|
<h1 class="section-header-title">TELEMETRY</h1>
|
|
<p class="section-header-sub">> Live ops feed — every metric, every service, every packet.</p>
|
|
</section>
|
|
|
|
<main class="tm-dashboard">
|
|
|
|
<!-- Alert banner (hidden until alerts exist) -->
|
|
<div class="tm-alerts" id="tmAlerts">
|
|
<div class="tm-alerts-content" id="tmAlertsContent"></div>
|
|
</div>
|
|
|
|
<!-- Status bar: LIVE indicator + visitors + sound toggle -->
|
|
<div class="tm-statusbar">
|
|
<div class="tm-live">
|
|
<span class="tm-live-dot" id="tmLiveDot"></span>
|
|
<span>LIVE</span>
|
|
<span style="color:var(--tm-muted);margin-left:0.4rem;">last sync <span id="tmLastSync">—</span>s ago</span>
|
|
</div>
|
|
<div class="tm-visitors">
|
|
<span>ONLINE NOW</span>
|
|
<strong id="tmVisitorsActive">—</strong>
|
|
<span style="font-size:0.7rem;">(<span id="tmVisitorsRpm">—</span> req/min)</span>
|
|
<button class="tm-sound-toggle" id="tmSoundToggle" title="Alarm sound">🔇 ALARM OFF</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Row 1: CPU | MEM | DISK | NET -->
|
|
<div class="tm-row r1">
|
|
<div class="tm-panel">
|
|
<div class="tm-panel-title">CPU <span class="badge" id="tmCpuBadge">—</span></div>
|
|
<div class="tm-gauge-wrap">
|
|
<canvas class="tm-gauge-canvas" id="tmCpuGauge" width="280" height="280"></canvas>
|
|
<div class="tm-gauge-value" id="tmCpuVal">—</div>
|
|
<div class="tm-gauge-label" id="tmCpuLoad">load —</div>
|
|
</div>
|
|
<canvas class="tm-spark" id="tmCpuSpark" width="400" height="40"></canvas>
|
|
</div>
|
|
|
|
<div class="tm-panel">
|
|
<div class="tm-panel-title">MEMORY <span class="badge" id="tmMemBadge">—</span></div>
|
|
<div class="tm-gauge-wrap">
|
|
<canvas class="tm-gauge-canvas" id="tmMemGauge" width="280" height="280"></canvas>
|
|
<div class="tm-gauge-value" id="tmMemVal">—</div>
|
|
<div class="tm-gauge-label" id="tmMemSize">— / —</div>
|
|
</div>
|
|
<canvas class="tm-spark" id="tmMemSpark" width="400" height="40"></canvas>
|
|
</div>
|
|
|
|
<div class="tm-panel">
|
|
<div class="tm-panel-title">STORAGE</div>
|
|
<div class="tm-disks" id="tmDisks">
|
|
<div class="tm-loading">READING MOUNTS</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tm-panel">
|
|
<div class="tm-panel-title">NETWORK</div>
|
|
<div class="tm-net">
|
|
<div class="tm-net-row">
|
|
<span class="label">↓ RX</span>
|
|
<span class="val" id="tmNetRx">—</span>
|
|
</div>
|
|
<div class="tm-net-row">
|
|
<span class="label">↑ TX</span>
|
|
<span class="val tx" id="tmNetTx">—</span>
|
|
</div>
|
|
</div>
|
|
<canvas class="tm-spark" id="tmNetSpark" width="400" height="80" style="height:80px;"></canvas>
|
|
<div class="tm-gauge-label" id="tmUptime" style="margin-top:0.5rem;text-align:center;">uptime —</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Row 2: Services | Crons -->
|
|
<div class="tm-row r2">
|
|
<div class="tm-panel">
|
|
<div class="tm-panel-title">SERVICES <span class="badge" id="tmSvcBadge">—</span></div>
|
|
<table class="tm-table">
|
|
<thead><tr><th>STATE</th><th>NAME</th><th>UPTIME</th><th>MEM</th><th>CPU</th></tr></thead>
|
|
<tbody id="tmServicesBody"><tr><td colspan="5" class="tm-loading">QUERYING SYSTEMD</td></tr></tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="tm-panel">
|
|
<div class="tm-panel-title">SCHEDULED TASKS</div>
|
|
<table class="tm-table">
|
|
<thead><tr><th>NAME</th><th>SCHEDULE</th><th>LAST RUN</th><th>STATUS</th></tr></thead>
|
|
<tbody id="tmCronsBody"><tr><td colspan="4" class="tm-loading">READING CRON LOGS</td></tr></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Row 3: Nginx full-width -->
|
|
<div class="tm-row r3">
|
|
<div class="tm-panel">
|
|
<div class="tm-panel-title">NGINX TRAFFIC // 24h</div>
|
|
<div class="tm-nginx-grid" id="tmNginxStats">
|
|
<div class="tm-loading">PARSING ACCESS LOG</div>
|
|
</div>
|
|
<div class="tm-toppages" id="tmTopPages"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Row 4: Security | SSL -->
|
|
<div class="tm-row r4">
|
|
<div class="tm-panel">
|
|
<div class="tm-panel-title">SECURITY</div>
|
|
<div class="tm-security-grid" id="tmSecurityStats">
|
|
<div class="tm-loading">SCANNING</div>
|
|
</div>
|
|
<div class="tm-jails" id="tmJails"></div>
|
|
</div>
|
|
|
|
<div class="tm-panel">
|
|
<div class="tm-panel-title">SSL CERTIFICATES</div>
|
|
<div class="tm-ssl" id="tmSsl">
|
|
<div class="tm-loading">CHECKING CERTS</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Row 5: Stack | Repos -->
|
|
<div class="tm-row r5">
|
|
<div class="tm-panel">
|
|
<div class="tm-panel-title">STACK INVENTORY</div>
|
|
<div class="tm-stack" id="tmStack">
|
|
<div class="tm-loading">DETECTING BINARIES</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tm-panel">
|
|
<div class="tm-panel-title">GIT ACTIVITY</div>
|
|
<div id="tmRepos">
|
|
<div class="tm-loading">READING REPOS</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Row 6: Geo | Tail -->
|
|
<div class="tm-row r6">
|
|
<div class="tm-panel">
|
|
<div class="tm-panel-title">GEO DISTRIBUTION // 24h</div>
|
|
<div class="tm-geo" id="tmGeo">
|
|
<div class="tm-loading">LOCATING</div>
|
|
</div>
|
|
<div class="tm-geo-top" id="tmGeoTop"></div>
|
|
</div>
|
|
|
|
<div class="tm-panel">
|
|
<div class="tm-panel-title">LIVE TAIL // nginx</div>
|
|
<div class="tm-tail" id="tmTail">
|
|
<div class="tm-loading">WAITING FOR REQUESTS</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Row 7: Burn | Deploys -->
|
|
<div class="tm-row r7">
|
|
<div class="tm-panel">
|
|
<div class="tm-panel-title">BURN RATE</div>
|
|
<div class="tm-burn" id="tmBurn">
|
|
<div class="tm-loading">COMPUTING</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tm-panel">
|
|
<div class="tm-panel-title">DEPLOYMENT TICKER</div>
|
|
<div class="tm-ticker" id="tmTicker">
|
|
<div class="tm-loading">READING COMMIT LOG</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</main>
|
|
|
|
<script src="/js/wallet-connect.js"></script>
|
|
<script src="/js/nav.js"></script>
|
|
<script src="/js/clock.js"></script>
|
|
<script src="/js/telemetry.js"></script>
|
|
<script src="/js/sitewide-effects.js" defer></script>
|
|
</body>
|
|
</html>
|