LotusGuild/gandalf
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui updates

Browse Source
This commit is contained in:
Jared Vititoe
2025-01-04 01:27:49 -05:00
parent d4cdad7006
commit 5173302eb4
2 changed files with 103 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
index.html
View File

@ -1,18 +1,57 @@
<!DOCTYPE html>
<html>
<head>
<title>GANDALF (Global Advanced Network Detection And Link Facilitator)</title>
<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">
<h1>GANDALF (Global Advanced Network Detection And Link Facilitator)</h1>
<p>This is my version of a Network State Manager</p>
<div class="header">
<h1>GANDALF Network Monitor</h1>
<p>Ubiquiti Network Management Dashboard</p>
</div>
<div class="metrics-container">
<div id="network-health"></div>
<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>
</div>
<script src="{{ url_for('static', filename='app.js') }}"></script>
</body>

65
style.css
View File

@ -1,19 +1,70 @@
:root {
--primary-color: #006FFF;
--secondary-color: #00439C;
--background-color: #f8f9fa;
--card-background: #ffffff;
--text-color: #2c3e50;
--border-radius: 12px;
}
body {
font-family: 'Inter', -apple-system, sans-serif;
background-color: var(--background-color);
color: var(--text-color);
margin: 0;
padding: 0;
}
.container {
max-width: 1200px;
max-width: 1400px;
margin: 0 auto;
padding: 20px;
}
.header {
background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
color: white;
padding: 20px;
border-radius: var(--border-radius);
margin-bottom: 30px;
}
.metrics-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 25px;
margin-top: 20px;
}
.metric-card {
background: #f5f5f6;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
background: var(--card-background);
padding: 25px;
border-radius: var(--border-radius);
box-shadow: 0 4px 6px rgba(0,0,0,0.07);
transition: transform 0.2s ease;
}
.metric-card:hover {
transform: translateY(-5px);
}
.device-status {
display: flex;
align-items: center;
gap: 10px;
margin: 10px 0;
}
.status-indicator {
width: 12px;
height: 12px;
border-radius: 50%;
}
.status-up {
background-color: #10B981;
}
.status-down {
background-color: #EF4444;
}