77 lines
2.9 KiB
HTML
77 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>KFC IT Monitor by Stranto</title>
|
|
<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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<header>
|
|
<div class="header-brand">
|
|
<div class="brand-dot"></div>
|
|
<span class="brand-name">KFC IT Monitor by Stranto</span>
|
|
</div>
|
|
|
|
<div class="view-toggle">
|
|
<button class="toggle-btn active" data-view="restaurants">By Restaurant</button>
|
|
<button class="toggle-btn" data-view="devices">By Device Type</button>
|
|
</div>
|
|
|
|
<div class="header-meta">
|
|
<span id="last-updated" class="last-updated">—</span>
|
|
<button id="refresh-btn" class="refresh-btn" title="Refresh">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/>
|
|
<path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="subbar">
|
|
<div class="legend">
|
|
<span class="legend-item"><span class="swatch ok"></span>OK</span>
|
|
<span class="legend-item"><span class="swatch warning"></span>Warning</span>
|
|
<span class="legend-item"><span class="swatch average"></span>Average</span>
|
|
<span class="legend-item"><span class="swatch high"></span>High</span>
|
|
<span class="legend-item"><span class="swatch disaster"></span>Disaster</span>
|
|
</div>
|
|
<div class="summary" id="summary"></div>
|
|
</div>
|
|
|
|
<div id="countries-wrap" class="countries-wrap">
|
|
<div class="page-center">
|
|
<div class="spinner"></div>
|
|
<p>Connecting to Zabbix…</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="error-box" class="error-box" style="display:none;"></div>
|
|
|
|
<!-- Detail modal -->
|
|
<div id="modal" class="modal" style="display:none;" role="dialog" aria-modal="true">
|
|
<div class="modal-panel">
|
|
<div class="modal-header">
|
|
<div class="modal-title-wrap">
|
|
<span id="modal-sev-dot" class="modal-sev-dot"></span>
|
|
<h2 id="modal-title"></h2>
|
|
</div>
|
|
<button class="modal-close" id="modal-close-btn" aria-label="Close">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
|
|
<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div id="modal-body" class="modal-body"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|