72 lines
3.4 KiB
HTML
72 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{% block title %}FabledNetMon{% endblock %}</title>
|
|
<script src="https://unpkg.com/htmx.org@2.0.4/dist/htmx.min.js"></script>
|
|
<style>
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body { font-family: system-ui, sans-serif; background: #0f0f0f; color: #e0e0e0; }
|
|
nav { background: #1a1a2e; padding: 0.75rem 1.5rem; display: flex; align-items: center; gap: 1rem; border-bottom: 1px solid #2a2a4a; }
|
|
nav a { color: #a0a0ff; text-decoration: none; font-size: 0.9rem; }
|
|
nav .brand { font-weight: bold; color: #c0c0ff; font-size: 1.1rem; margin-right: auto; }
|
|
main { padding: 1.5rem; max-width: 1200px; margin: 0 auto; }
|
|
.alert { padding: 0.75rem 1rem; border-radius: 4px; margin-bottom: 1rem; }
|
|
.alert-error { background: #3a1a1a; border: 1px solid #8b2020; color: #ffaaaa; }
|
|
.card { background: #1a1a2e; border: 1px solid #2a2a4a; border-radius: 6px; padding: 1.25rem; margin-bottom: 1rem; }
|
|
.form-group { margin-bottom: 1rem; }
|
|
label { display: block; margin-bottom: 0.3rem; font-size: 0.9rem; color: #a0a0c0; }
|
|
input[type=text], input[type=email], input[type=password] {
|
|
width: 100%; padding: 0.5rem 0.75rem; background: #0f0f1e; border: 1px solid #3a3a5a;
|
|
border-radius: 4px; color: #e0e0e0; font-size: 1rem;
|
|
}
|
|
button[type=submit], .btn {
|
|
padding: 0.5rem 1.25rem; background: #4040a0; color: #fff; border: none;
|
|
border-radius: 4px; cursor: pointer; font-size: 0.95rem;
|
|
}
|
|
button[type=submit]:hover, .btn:hover { background: #5050c0; }
|
|
/* Ping pills */
|
|
.ping-card { padding: 0.75rem 1.25rem; }
|
|
.ping-row { display:flex; align-items:center; gap:1rem; padding:0.45rem 0; border-bottom:1px solid #161626; }
|
|
.ping-row:last-child { border-bottom:none; }
|
|
.ping-meta { min-width:160px; flex-shrink:0; }
|
|
.ping-name { font-size:0.9rem; }
|
|
.ping-addr { display:block; color:#505070; font-size:0.75rem; }
|
|
.ping-pills { display:flex; gap:2px; flex:1; align-items:center; }
|
|
.pill { display:inline-block; width:7px; height:22px; border-radius:2px; cursor:default; transition:opacity .1s; }
|
|
.pill:hover { opacity:.75; }
|
|
.pill-empty { background:#1a1a28; }
|
|
.ping-cur { min-width:72px; text-align:right; font-size:0.85rem; font-variant-numeric:tabular-nums; }
|
|
.ping-cur-good { color:#22aa44; }
|
|
.ping-cur-warn { color:#ccaa20; }
|
|
.ping-cur-bad { color:#dd6020; }
|
|
.ping-cur-down { color:#cc2020; font-weight:bold; }
|
|
.ping-cur-nd { color:#404060; }
|
|
</style>
|
|
{% block head %}{% endblock %}
|
|
</head>
|
|
<body>
|
|
{% if session.user_id is defined %}
|
|
<nav>
|
|
<span class="brand">FabledNetMon</span>
|
|
<a href="/">Dashboard</a>
|
|
<a href="/hosts/">Hosts</a>
|
|
<a href="/ping/">Ping</a>
|
|
<a href="/alerts/">Alerts</a>
|
|
<a href="/ansible/">Ansible</a>
|
|
{% if session.user_role == 'admin' %}
|
|
<a href="/settings/">Settings</a>
|
|
{% endif %}
|
|
<a href="/logout">Logout ({{ session.username }})</a>
|
|
</nav>
|
|
{% endif %}
|
|
<main>
|
|
{% if error %}
|
|
<div class="alert alert-error">{{ error }}</div>
|
|
{% endif %}
|
|
{% block content %}{% endblock %}
|
|
</main>
|
|
</body>
|
|
</html>
|