66 lines
2.3 KiB
HTML
66 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>GANDALF - Network Monitor</title>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<h1>GANDALF (Global Advanced Network Detection And Link Facilitator)</h1>
|
|
<p>Ubiquiti Network Management Dashboard</p>
|
|
</div>
|
|
|
|
<div class="metrics-container">
|
|
<div class="metric-card">
|
|
<h2>Network Overview</h2>
|
|
<div id="network-health">
|
|
<div class="device-status">
|
|
<span class="status-indicator status-up"></span>
|
|
<span>UniFi Dream Machine Pro</span>
|
|
</div>
|
|
<div class="device-status">
|
|
<span class="status-indicator status-up"></span>
|
|
<span>UniFi Switch 24 PoE</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="metric-card">
|
|
<h2>Network Performance</h2>
|
|
<div id="latency"></div>
|
|
<div id="bandwidth"></div>
|
|
</div>
|
|
|
|
<div class="metric-card">
|
|
<h2>Access Points</h2>
|
|
<div id="ap-status">
|
|
<div class="device-status">
|
|
<span class="status-indicator status-up"></span>
|
|
<span>AP Living Room</span>
|
|
</div>
|
|
<div class="device-status">
|
|
<span class="status-indicator status-up"></span>
|
|
<span>AP Office</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="metric-card">
|
|
<h2>Connected Clients</h2>
|
|
<div id="client-count"></div>
|
|
</div>
|
|
|
|
<div class="metric-card">
|
|
<h2>Diagnostics</h2>
|
|
<div id="diagnostics-panel">
|
|
<div class="diagnostics-content"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<script src="{{ url_for('static', filename='app.js') }}"></script>
|
|
</body>
|
|
</html> |