50 lines
2.0 KiB
HTML
50 lines
2.0 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">
|
|
{%- for device in devices %}
|
|
<div class="device-status" data-device-name="{{ device.name }}">
|
|
<span class="status-indicator"></span>
|
|
<div class="device-info">
|
|
<span class="device-name">{{ device.name }}</span>
|
|
<span class="device-details">{{ device.ip }}</span>
|
|
<span class="device-type">{{ device.type }} ({{ device.connection_type }})</span>
|
|
{% if device.critical %}
|
|
<span class="critical-badge">Critical</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{%- endfor %}
|
|
</div>
|
|
</div>
|
|
<div class="metric-card">
|
|
<h2>Interface Status</h2>
|
|
<div id="interface-details"></div>
|
|
</div>
|
|
<div class="metric-card">
|
|
<h2>System Health</h2>
|
|
<div id="system-metrics"></div>
|
|
</div>
|
|
<div class="metric-card">
|
|
<h2>Power Management</h2>
|
|
<div id="power-metrics"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="{{ url_for('static', filename='app.js') }}"></script>
|
|
</body>
|
|
</html></html> |