Initial commit: IT Nexus Web-App
This commit is contained in:
6
nexus-scanner/internal/web/embed.go
Normal file
6
nexus-scanner/internal/web/embed.go
Normal file
@@ -0,0 +1,6 @@
|
||||
package web
|
||||
|
||||
import "embed"
|
||||
|
||||
//go:embed static templates
|
||||
var webFS embed.FS
|
||||
1294
nexus-scanner/internal/web/server.go
Normal file
1294
nexus-scanner/internal/web/server.go
Normal file
File diff suppressed because it is too large
Load Diff
510
nexus-scanner/internal/web/static/style.css
Normal file
510
nexus-scanner/internal/web/static/style.css
Normal file
@@ -0,0 +1,510 @@
|
||||
/* ── Reset ── */
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
/* ── Design Tokens ── */
|
||||
:root {
|
||||
--teal: #008487;
|
||||
--teal-600: #006e71;
|
||||
--teal-700: #005a5c;
|
||||
--teal-50: #e6f3f3;
|
||||
--bg: #f5f5f7;
|
||||
--surface: #ffffff;
|
||||
--surface-2: #fbfbfd;
|
||||
--surface-3: #f2f2f4;
|
||||
--text: #1d1d1f;
|
||||
--text-2: #515154;
|
||||
--text-3: #86868b;
|
||||
--border: rgba(0,0,0,0.08);
|
||||
--border-strong: rgba(0,0,0,0.14);
|
||||
--shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 1px rgba(0,0,0,0.03);
|
||||
--shadow-md: 0 4px 16px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
|
||||
--shadow-lg: 0 24px 64px -16px rgba(0,0,0,0.18), 0 6px 18px rgba(0,0,0,0.08);
|
||||
--success: #34a853;
|
||||
--warning: #e8a23a;
|
||||
--danger: #e5484d;
|
||||
--info: #2f7df1;
|
||||
--r-sm: 8px;
|
||||
--r-md: 12px;
|
||||
--r-lg: 16px;
|
||||
--r-xl: 20px;
|
||||
--sidebar-w: 232px;
|
||||
--topbar-h: 52px;
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
color-scheme: dark;
|
||||
--bg: #000000;
|
||||
--surface: #1c1c1e;
|
||||
--surface-2: #161618;
|
||||
--surface-3: #2c2c2e;
|
||||
--text: #f5f5f7;
|
||||
--text-2: #aeaeb2;
|
||||
--text-3: #636366;
|
||||
--border: rgba(255,255,255,0.08);
|
||||
--border-strong: rgba(255,255,255,0.14);
|
||||
--shadow-sm: 0 1px 2px rgba(0,0,0,0.6);
|
||||
--shadow-md: 0 6px 20px rgba(0,0,0,0.45);
|
||||
--teal-50: rgba(0,132,135,0.15);
|
||||
}
|
||||
|
||||
/* ── Base ── */
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-size: 14px;
|
||||
line-height: 1.45;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
letter-spacing: -0.005em;
|
||||
}
|
||||
a { text-decoration: none; color: inherit; }
|
||||
button { font-family: inherit; }
|
||||
input, select { font-family: inherit; font-size: inherit; color: inherit; }
|
||||
::selection { background: rgba(0,132,135,0.2); }
|
||||
|
||||
/* ── Layout ── */
|
||||
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
|
||||
.main { display: flex; flex-direction: column; min-width: 0; }
|
||||
|
||||
/* ── Sidebar ── */
|
||||
.sidebar {
|
||||
position: sticky; top: 0; height: 100vh;
|
||||
background: var(--surface-2);
|
||||
border-right: 1px solid var(--border);
|
||||
display: flex; flex-direction: column;
|
||||
padding: 14px 10px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.sidebar-brand {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 6px 8px 16px;
|
||||
}
|
||||
.brand-mark {
|
||||
width: 30px; height: 30px; border-radius: var(--r-sm);
|
||||
background: var(--teal); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
|
||||
}
|
||||
.brand-mark svg { color: #fff; width: 17px; height: 17px; }
|
||||
.brand-name { font-size: 13.5px; font-weight: 700; color: var(--text); }
|
||||
.brand-sub { font-size: 11px; color: var(--text-3); }
|
||||
|
||||
.sidebar-section {
|
||||
font-size: 10.5px; font-weight: 600; color: var(--text-3);
|
||||
letter-spacing: 0.05em; text-transform: uppercase;
|
||||
padding: 12px 8px 5px;
|
||||
}
|
||||
.nav-item {
|
||||
display: flex; align-items: center; gap: 9px;
|
||||
padding: 7px 8px; border-radius: var(--r-sm);
|
||||
color: var(--text-2); font-size: 13.5px; font-weight: 500;
|
||||
transition: background 0.12s, color 0.12s;
|
||||
cursor: pointer; border: none; background: none; width: 100%; text-align: left;
|
||||
}
|
||||
.nav-item:hover { background: var(--surface-3); color: var(--text); }
|
||||
.nav-item.active { background: var(--teal-50); color: var(--teal); }
|
||||
.nav-item svg { width: 17px; height: 17px; flex-shrink: 0; stroke-width: 1.75; }
|
||||
.nav-badge {
|
||||
margin-left: auto; background: var(--surface-3); color: var(--text-2);
|
||||
border-radius: 999px; padding: 1px 7px; font-size: 11px; font-weight: 600;
|
||||
}
|
||||
.nav-item.active .nav-badge { background: rgba(0,132,135,.18); color: var(--teal); }
|
||||
.nav-dot { margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
|
||||
|
||||
.sidebar-footer {
|
||||
margin-top: auto; padding: 10px 8px 6px;
|
||||
border-top: 1px solid var(--border);
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
}
|
||||
.avatar {
|
||||
width: 27px; height: 27px; border-radius: 50%;
|
||||
background: linear-gradient(135deg, var(--teal), var(--teal-700));
|
||||
color: #fff; display: flex; align-items: center; justify-content: center;
|
||||
font-size: 11px; font-weight: 700; flex-shrink: 0;
|
||||
}
|
||||
.user-name { font-size: 12.5px; font-weight: 600; color: var(--text); }
|
||||
.user-sub { font-size: 11px; color: var(--text-3); }
|
||||
|
||||
/* ── Topbar ── */
|
||||
.topbar {
|
||||
height: var(--topbar-h); position: sticky; top: 0;
|
||||
background: color-mix(in srgb, var(--bg) 85%, transparent);
|
||||
backdrop-filter: saturate(180%) blur(20px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex; align-items: center; padding: 0 28px; gap: 8px; z-index: 50;
|
||||
}
|
||||
.breadcrumb { flex: 1; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-3); }
|
||||
.breadcrumb-sep { color: var(--text-3); }
|
||||
.breadcrumb-current { font-weight: 600; color: var(--text); }
|
||||
.topbar-actions { display: flex; align-items: center; gap: 8px; }
|
||||
|
||||
/* ── Content area ── */
|
||||
.content { flex: 1; padding: 24px 28px; }
|
||||
|
||||
/* ── Page header ── */
|
||||
.page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; }
|
||||
.page-header h2, .page-title { font-size: 21px; font-weight: 700; letter-spacing: -0.3px; }
|
||||
.page-header p, .page-sub { font-size: 13px; color: var(--text-3); margin-top: 2px; }
|
||||
.page-actions { display: flex; align-items: center; gap: 8px; }
|
||||
|
||||
/* ── Scan status pill (in page header) ── */
|
||||
.scan-pill {
|
||||
display: inline-flex; align-items: center; gap: 7px;
|
||||
background: var(--surface); border: 1px solid var(--border);
|
||||
border-radius: 999px; padding: 5px 12px 5px 10px;
|
||||
font-size: 12.5px;
|
||||
}
|
||||
.scan-pill .label { font-weight: 500; color: var(--text); }
|
||||
.scan-pill .sep { color: var(--text-3); }
|
||||
.scan-pill .site { color: var(--text-3); }
|
||||
|
||||
/* ── Status pill (topbar) ── */
|
||||
.status-pill {
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 500;
|
||||
background: var(--surface-3); color: var(--text-2);
|
||||
}
|
||||
.status-pill.online { background: rgba(52,168,83,.1); color: var(--success); }
|
||||
.status-pill.scanning { background: rgba(0,132,135,.1); color: var(--teal); }
|
||||
|
||||
/* ── Buttons ── */
|
||||
.btn {
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
padding: 7px 14px; border-radius: var(--r-sm);
|
||||
font-size: 13px; font-weight: 500;
|
||||
cursor: pointer; border: 1px solid var(--border);
|
||||
background: var(--surface); color: var(--text);
|
||||
transition: background 0.12s, border-color 0.12s; white-space: nowrap;
|
||||
}
|
||||
.btn:hover { background: var(--surface-3); }
|
||||
.btn svg { width: 14px; height: 14px; stroke-width: 1.75; }
|
||||
.btn-primary { background: var(--teal); color: #fff; border-color: var(--teal); }
|
||||
.btn-primary:hover { background: var(--teal-600); border-color: var(--teal-600); }
|
||||
.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
|
||||
.btn-sm { padding: 5px 11px; font-size: 12.5px; }
|
||||
.btn-ghost { background: transparent; border-color: transparent; }
|
||||
.btn-ghost:hover { background: var(--surface-3); }
|
||||
.btn:disabled { opacity: .55; cursor: not-allowed; }
|
||||
|
||||
/* ── Icon button ── */
|
||||
.icon-btn {
|
||||
width: 30px; height: 30px; border-radius: var(--r-sm);
|
||||
border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
cursor: pointer; transition: background 0.12s;
|
||||
}
|
||||
.icon-btn:hover { background: var(--surface-3); color: var(--text); }
|
||||
.icon-btn svg { width: 14px; height: 14px; stroke-width: 1.75; }
|
||||
|
||||
/* ── Inputs ── */
|
||||
.input, .select {
|
||||
width: 100%; padding: 7.5px 12px;
|
||||
border: 1px solid var(--border-strong); border-radius: var(--r-sm);
|
||||
background: var(--surface); color: var(--text); font-size: 13.5px;
|
||||
outline: none; transition: border-color .14s, box-shadow .14s;
|
||||
}
|
||||
.input:focus, .select:focus {
|
||||
border-color: var(--teal);
|
||||
box-shadow: 0 0 0 3px rgba(0,132,135,.14);
|
||||
}
|
||||
.input::placeholder { color: var(--text-3); }
|
||||
.input-label { font-size: 12.5px; font-weight: 500; color: var(--text-2); margin-bottom: 5px; display: block; }
|
||||
|
||||
/* ── Toggle ── */
|
||||
.toggle { position: relative; display: inline-block; width: 36px; height: 22px; flex-shrink: 0; }
|
||||
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
|
||||
.toggle-track {
|
||||
position: absolute; inset: 0; background: var(--surface-3);
|
||||
border: 1px solid var(--border); border-radius: 20px;
|
||||
cursor: pointer; transition: background .18s;
|
||||
}
|
||||
.toggle input:checked + .toggle-track { background: var(--teal); border-color: var(--teal); }
|
||||
.toggle-track::after {
|
||||
content: ''; position: absolute; left: 2px; top: 2px;
|
||||
width: 16px; height: 16px; border-radius: 50%;
|
||||
background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2);
|
||||
transition: transform .18s;
|
||||
}
|
||||
.toggle input:checked + .toggle-track::after { transform: translateX(14px); }
|
||||
|
||||
/* ── Dot ── */
|
||||
.dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
|
||||
.dot.green { background: var(--success); box-shadow: 0 0 0 2px rgba(52,168,83,.18); }
|
||||
.dot.red { background: var(--danger); }
|
||||
.dot.yellow { background: var(--warning); }
|
||||
.dot.gray { background: var(--text-3); }
|
||||
.dot.teal { background: var(--teal); }
|
||||
.dot.pulse { animation: dotpulse 1.6s ease-out infinite; }
|
||||
@keyframes dotpulse {
|
||||
0% { box-shadow: 0 0 0 0 rgba(52,168,83,0.5); }
|
||||
70% { box-shadow: 0 0 0 6px rgba(52,168,83,0); }
|
||||
100% { box-shadow: 0 0 0 0 rgba(52,168,83,0); }
|
||||
}
|
||||
|
||||
/* ── Badge ── */
|
||||
.badge {
|
||||
display: inline-flex; align-items: center; gap: 5px;
|
||||
padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 500;
|
||||
background: var(--surface-3); color: var(--text-2);
|
||||
}
|
||||
.badge-green { background: rgba(52,168,83,.12); color: #2c8a44; }
|
||||
.badge-red { background: rgba(229,72,77,.12); color: #c4393d; }
|
||||
.badge-yellow { background: rgba(232,162,58,.14); color: #b07820; }
|
||||
.badge-teal { background: var(--teal-50); color: var(--teal); }
|
||||
.badge-gray { background: var(--surface-3); color: var(--text-3); }
|
||||
[data-theme="dark"] .badge-green { color: #4cc471; }
|
||||
[data-theme="dark"] .badge-red { color: #ff6b6f; }
|
||||
[data-theme="dark"] .badge-yellow { color: #ffc46b; }
|
||||
[data-theme="dark"] .badge-teal { color: #4ec6c9; }
|
||||
|
||||
/* ── Card ── */
|
||||
.card {
|
||||
background: var(--surface); border: 1px solid var(--border);
|
||||
border-radius: var(--r-lg); overflow: hidden;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
.card-header {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 14px 20px; border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.card-title { font-size: 14px; font-weight: 600; }
|
||||
.card-sub { font-size: 12px; color: var(--text-3); margin-top: 2px; }
|
||||
.card-action { font-size: 12.5px; color: var(--teal); display: flex; align-items: center; gap: 4px; }
|
||||
.card-action svg { width: 12px; height: 12px; }
|
||||
|
||||
/* ── Stats grid ── */
|
||||
.stats-grid { display: grid; gap: 16px; margin-bottom: 20px; }
|
||||
.stats-grid-4 { grid-template-columns: repeat(4, 1fr); }
|
||||
.stat {
|
||||
background: var(--surface); border: 1px solid var(--border);
|
||||
border-radius: var(--r-lg); padding: 18px 20px;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
.stat-icon { width: 14px; height: 14px; color: var(--text-3); stroke-width: 1.75; }
|
||||
.stat-label { font-size: 12.5px; color: var(--text-3); font-weight: 500; margin-bottom: 6px; display: flex; align-items: center; gap: 7px; }
|
||||
.stat-value { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; margin-top: 2px; }
|
||||
.stat-delta { font-size: 12.5px; color: var(--text-3); margin-top: 4px; }
|
||||
.stat-delta.up { color: var(--success); }
|
||||
.stat-delta.down { color: var(--danger); }
|
||||
|
||||
/* ── Sparkline ── */
|
||||
.sparkline { display: flex; align-items: flex-end; gap: 2px; height: 24px; margin-top: 8px; }
|
||||
.sparkline span { flex: 1; background: var(--teal); border-radius: 1.5px; opacity: 0.75; }
|
||||
|
||||
/* ── Dashboard 2-col grid ── */
|
||||
.dash-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
|
||||
|
||||
/* ── Table ── */
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
thead th {
|
||||
padding: 10px 16px; text-align: left; white-space: nowrap;
|
||||
font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
|
||||
color: var(--text-3); border-bottom: 1px solid var(--border);
|
||||
background: var(--surface-2); position: sticky; top: var(--topbar-h);
|
||||
}
|
||||
tbody td { padding: 12px 16px; font-size: 13px; border-bottom: 1px solid var(--border); }
|
||||
tbody tr:last-child td { border-bottom: none; }
|
||||
tbody tr:hover td { background: var(--surface-2); }
|
||||
.mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 12.5px; }
|
||||
|
||||
/* ── Device icon cell ── */
|
||||
.device-icon {
|
||||
width: 28px; height: 28px; border-radius: 7px;
|
||||
background: var(--surface-3); color: var(--text-2);
|
||||
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
|
||||
}
|
||||
.device-icon svg { width: 14px; height: 14px; stroke-width: 1.75; }
|
||||
.device-row { display: flex; align-items: center; gap: 10px; }
|
||||
.device-name { font-size: 13px; font-weight: 600; }
|
||||
.device-vendor { font-size: 11.5px; color: var(--text-3); }
|
||||
|
||||
/* ── Filter chips ── */
|
||||
.filter-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; flex-wrap: wrap; border-bottom: 1px solid var(--border); background: var(--surface); }
|
||||
.filter-chips { display: flex; gap: 5px; }
|
||||
.chip {
|
||||
padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 500;
|
||||
background: transparent; border: 1px solid var(--border-strong); color: var(--text-2);
|
||||
cursor: pointer; transition: all .12s;
|
||||
}
|
||||
.chip:hover { background: var(--surface-3); }
|
||||
.chip.active { background: var(--teal-50); border-color: transparent; color: var(--teal); }
|
||||
.search-wrap { position: relative; flex: 1; min-width: 200px; max-width: 300px; }
|
||||
.search-wrap svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--text-3); pointer-events: none; }
|
||||
.search-wrap .input { padding-left: 32px; }
|
||||
|
||||
/* ── Module row ── */
|
||||
.module-row {
|
||||
display: flex; align-items: center; gap: 14px;
|
||||
padding: 14px 20px; border-bottom: 1px solid var(--border); transition: background .12s;
|
||||
}
|
||||
.module-row:last-child { border-bottom: none; }
|
||||
.module-row:hover { background: var(--surface-2); }
|
||||
.module-icon {
|
||||
width: 34px; height: 34px; border-radius: var(--r-sm);
|
||||
background: var(--surface-3); color: var(--text-3);
|
||||
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
|
||||
}
|
||||
.module-icon.active { background: var(--teal-50); color: var(--teal); }
|
||||
.module-icon svg { width: 17px; height: 17px; stroke-width: 1.75; }
|
||||
.module-info { flex: 1; min-width: 0; }
|
||||
.module-name { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
|
||||
.module-desc { font-size: 12px; color: var(--text-3); margin-top: 2px; }
|
||||
.module-stats { display: flex; gap: 16px; font-size: 12px; color: var(--text-3); margin-top: 3px; }
|
||||
.module-stats strong { color: var(--text-2); font-weight: 500; }
|
||||
.module-config {
|
||||
border-top: 1px solid var(--border); padding: 18px 20px;
|
||||
background: var(--surface-2);
|
||||
display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
|
||||
}
|
||||
|
||||
/* ── Dashboard module list row ── */
|
||||
.dash-module-row {
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
padding: 11px 20px; border-top: 1px solid var(--border);
|
||||
}
|
||||
.dash-module-icon {
|
||||
width: 30px; height: 30px; border-radius: var(--r-sm);
|
||||
background: var(--teal-50); color: var(--teal);
|
||||
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
|
||||
}
|
||||
.dash-module-icon.off { background: var(--surface-3); color: var(--text-3); }
|
||||
.dash-module-icon svg { width: 15px; height: 15px; stroke-width: 1.75; }
|
||||
.dash-module-name { font-size: 13px; font-weight: 600; }
|
||||
.dash-module-sub { font-size: 11.5px; color: var(--text-3); }
|
||||
|
||||
/* ── Logs ── */
|
||||
.log-controls { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
|
||||
.log-container {
|
||||
background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg);
|
||||
height: 500px; overflow-y: auto;
|
||||
font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 12px;
|
||||
}
|
||||
.log-row {
|
||||
display: grid; grid-template-columns: 80px 48px 1fr;
|
||||
gap: 14px; padding: 6px 16px;
|
||||
border-bottom: 1px solid var(--border); align-items: start; line-height: 1.5;
|
||||
}
|
||||
.log-row:last-child { border-bottom: none; }
|
||||
.log-row:hover { background: var(--surface-3); }
|
||||
.log-time { color: var(--text-3); font-size: 11px; white-space: nowrap; padding-top: 1px; }
|
||||
.log-level { font-size: 10.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-align: center; text-transform: uppercase; letter-spacing: 0.04em; }
|
||||
.log-level.ok { background: rgba(52,168,83,.14); color: #2c8a44; }
|
||||
.log-level.info { background: rgba(47,125,241,.14); color: #2766c4; }
|
||||
.log-level.warn { background: rgba(232,162,58,.18); color: #b07820; }
|
||||
.log-level.err { background: rgba(229,72,77,.14); color: #c4393d; }
|
||||
[data-theme="dark"] .log-level.ok { color: #4cc471; }
|
||||
[data-theme="dark"] .log-level.info { color: #71aaff; }
|
||||
[data-theme="dark"] .log-level.warn { color: #ffc46b; }
|
||||
[data-theme="dark"] .log-level.err { color: #ff7679; }
|
||||
.log-msg { color: var(--text); word-break: break-word; }
|
||||
|
||||
/* ── Settings ── */
|
||||
.settings-section { margin-bottom: 24px; }
|
||||
.settings-title { font-size: 15px; font-weight: 700; margin-bottom: 14px; }
|
||||
.setting-row {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 14px 20px; border-bottom: 1px solid var(--border); gap: 20px;
|
||||
}
|
||||
.setting-row:last-child { border-bottom: none; }
|
||||
.setting-label { font-size: 13.5px; font-weight: 500; }
|
||||
.setting-sub { font-size: 12px; color: var(--text-3); margin-top: 2px; }
|
||||
.setting-body { padding: 18px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
|
||||
.setting-body.full { grid-template-columns: 1fr; }
|
||||
.form-group { margin-bottom: 14px; }
|
||||
|
||||
/* ── Password wrap ── */
|
||||
.password-wrap { position: relative; }
|
||||
.password-wrap .input { padding-right: 40px; }
|
||||
.eye-btn {
|
||||
position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
|
||||
background: none; border: none; cursor: pointer; color: var(--text-3); padding: 2px;
|
||||
}
|
||||
.eye-btn:hover { color: var(--text); }
|
||||
.eye-btn svg { width: 16px; height: 16px; stroke-width: 1.75; }
|
||||
|
||||
/* ── Auth / Login ── */
|
||||
.auth-wrap {
|
||||
min-height: 100vh; display: flex; align-items: center; justify-content: center;
|
||||
background: var(--bg); padding: 48px 24px;
|
||||
}
|
||||
.auth-card {
|
||||
width: 100%; max-width: 380px; background: var(--surface);
|
||||
border: 1px solid var(--border); border-radius: 18px; padding: 36px 30px;
|
||||
box-shadow: var(--shadow-lg);
|
||||
display: flex; flex-direction: column; align-items: center; gap: 20px;
|
||||
}
|
||||
.auth-logo { height: 36px; }
|
||||
.auth-title { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
|
||||
.auth-sub { font-size: 13px; color: var(--text-3); text-align: center; margin-top: -10px; }
|
||||
.auth-card form { width: 100%; display: flex; flex-direction: column; gap: 12px; }
|
||||
|
||||
/* ── Setup wizard ── */
|
||||
.wizard-wrap {
|
||||
min-height: 100vh; display: flex;
|
||||
align-items: safe center; justify-content: safe center;
|
||||
background: var(--bg); padding: 24px;
|
||||
}
|
||||
.wizard {
|
||||
width: 100%; max-width: 540px; background: var(--surface);
|
||||
border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-lg); overflow: hidden;
|
||||
}
|
||||
.wizard-header { padding: 26px 30px 18px; border-bottom: 1px solid var(--border); }
|
||||
.wizard-steps { display: flex; gap: 6px; margin-top: 16px; }
|
||||
.wizard-step { flex: 1; height: 3px; border-radius: 999px; background: var(--surface-3); }
|
||||
.wizard-step.done, .wizard-step.active { background: var(--teal); }
|
||||
.wizard-body { padding: 26px 30px; min-height: 220px; }
|
||||
.wizard-footer {
|
||||
padding: 14px 30px; border-top: 1px solid var(--border);
|
||||
background: var(--surface-2);
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
}
|
||||
.wizard-icon {
|
||||
width: 48px; height: 48px; border-radius: var(--r-md);
|
||||
background: var(--teal-50); color: var(--teal);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.wizard-icon svg { width: 24px; height: 24px; stroke-width: 1.75; }
|
||||
.wizard-title { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
|
||||
.wizard-sub { font-size: 13px; color: var(--text-3); margin-bottom: 20px; }
|
||||
.site-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
|
||||
.site-card {
|
||||
border: 2px solid var(--border); border-radius: var(--r-md); padding: 16px;
|
||||
cursor: pointer; transition: border-color .15s, background .15s;
|
||||
}
|
||||
.site-card:hover { border-color: var(--teal-50); background: var(--surface-2); }
|
||||
.site-card.selected { border-color: var(--teal); background: var(--teal-50); }
|
||||
.site-card-name { font-weight: 600; font-size: 14px; }
|
||||
.site-card-sub { font-size: 12px; color: var(--text-3); margin-top: 3px; }
|
||||
|
||||
/* ── Pagination ── */
|
||||
.pagination { display: flex; align-items: center; gap: 3px; }
|
||||
.page-btn {
|
||||
min-width: 28px; height: 28px; border-radius: 6px;
|
||||
border: 1px solid transparent; background: transparent;
|
||||
color: var(--text-2); font-size: 12.5px; font-weight: 500; cursor: pointer;
|
||||
display: flex; align-items: center; justify-content: center; padding: 0 8px;
|
||||
}
|
||||
.page-btn:hover { background: var(--surface-3); color: var(--text); }
|
||||
.page-btn.active { background: var(--teal); color: #fff; }
|
||||
.page-btn:disabled { opacity: .4; cursor: not-allowed; }
|
||||
|
||||
/* ── Error / Success msgs ── */
|
||||
.error-msg {
|
||||
background: rgba(229,72,77,.08); border: 1px solid rgba(229,72,77,.2);
|
||||
border-radius: var(--r-sm); padding: 10px 14px; font-size: 13px; color: var(--danger);
|
||||
}
|
||||
.success-msg {
|
||||
background: rgba(52,168,83,.08); border: 1px solid rgba(52,168,83,.2);
|
||||
border-radius: var(--r-sm); padding: 10px 14px; font-size: 13px; color: var(--success);
|
||||
}
|
||||
|
||||
/* ── Spinner ── */
|
||||
.spinner { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
|
||||
/* ── HTMX ── */
|
||||
.htmx-indicator { display: none; }
|
||||
.htmx-request .htmx-indicator { display: inline-flex; }
|
||||
|
||||
/* ── Utilities ── */
|
||||
.spacer { flex: 1; }
|
||||
.mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 12.5px; }
|
||||
71
nexus-scanner/internal/web/templates/ad.html
Normal file
71
nexus-scanner/internal/web/templates/ad.html
Normal file
@@ -0,0 +1,71 @@
|
||||
{{define "content"}}
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<h1 class="page-title">Active Directory</h1>
|
||||
<p class="page-sub">{{len .Computers}} Computer-Objekte aus {{.Domain}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{if not .ADEnabled}}
|
||||
<div style="background:rgba(232,162,58,.08);border:1px solid rgba(232,162,58,.3);border-radius:var(--r-lg);padding:20px 24px;margin-bottom:20px;">
|
||||
<div style="font-weight:600;color:var(--warning);margin-bottom:6px;">AD Sync nicht konfiguriert</div>
|
||||
<div style="font-size:13px;color:var(--text-2);">Trage Server, Bind-DN und Passwort in der <a href="/settings" style="color:var(--teal);">config.yaml</a> ein und aktiviere das Modul.</div>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
<!-- Stats -->
|
||||
<div class="stats-grid" style="grid-template-columns:repeat(3,1fr);margin-bottom:20px;">
|
||||
<div class="stat">
|
||||
<div class="stat-label">Computer in AD</div>
|
||||
<div class="stat-value">{{len .Computers}}</div>
|
||||
<div class="stat-delta neutral">{{.Domain}}</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-label">Im Netzwerk gesehen</div>
|
||||
<div class="stat-value" style="color:var(--success);">{{.SeenCount}}</div>
|
||||
<div class="stat-delta up">↑ aktiv erreichbar</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-label">Nicht gesehen</div>
|
||||
<div class="stat-value" style="{{if gt .MissingCount 0}}color:var(--warning);{{end}}">{{.MissingCount}}</div>
|
||||
<div class="stat-delta {{if gt .MissingCount 0}}down{{else}}neutral{{end}}">offline oder abwesend</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Computer-Name</th>
|
||||
<th>Abteilung / OU</th>
|
||||
<th>Betriebssystem</th>
|
||||
<th>Letzter Login (AD)</th>
|
||||
<th>Im Netzwerk</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{range .Computers}}
|
||||
<tr>
|
||||
<td style="font-weight:600;">{{.CN}}</td>
|
||||
<td style="color:var(--text-2);">{{if .Department}}{{.Department}}{{else}}<span style="color:var(--text-3);">—</span>{{end}}</td>
|
||||
<td style="color:var(--text-2);font-size:12px;">{{if .OS}}{{.OS}}{{else}}<span style="color:var(--text-3);">—</span>{{end}}</td>
|
||||
<td style="color:var(--text-3);font-size:12px;">
|
||||
{{if not .LastLogon.IsZero}}{{formatTime .LastLogon}}{{else}}—{{end}}
|
||||
</td>
|
||||
<td>
|
||||
{{if .SeenInNetwork}}
|
||||
<span class="badge badge-green"><span class="dot green" style="width:5px;height:5px;margin-right:4px;"></span>Online</span>
|
||||
{{else}}
|
||||
<span class="badge badge-yellow">Nicht gesehen</span>
|
||||
{{end}}
|
||||
</td>
|
||||
</tr>
|
||||
{{else}}
|
||||
<tr><td colspan="5" style="text-align:center;padding:48px;color:var(--text-3);">
|
||||
Noch keine AD-Daten — AD Sync ausführen.
|
||||
</td></tr>
|
||||
{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{{end}}
|
||||
126
nexus-scanner/internal/web/templates/assets.html
Normal file
126
nexus-scanner/internal/web/templates/assets.html
Normal file
@@ -0,0 +1,126 @@
|
||||
{{define "content"}}
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<h2 class="page-title">Geräte-Inventar</h2>
|
||||
<p class="page-sub">{{.TotalHosts}} Einträge · zuletzt aktualisiert {{.LastScan}}</p>
|
||||
</div>
|
||||
<div style="display:flex;gap:8px;">
|
||||
<a href="/assets/export.csv" class="btn">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
|
||||
CSV Export
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filter bar -->
|
||||
<div class="card" style="margin-bottom:16px;overflow:visible;">
|
||||
<form method="GET" action="/assets">
|
||||
<div class="filter-bar">
|
||||
<div class="search-wrap">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
|
||||
<input class="input" type="search" name="q" value="{{.Query}}" placeholder="IP, Hostname oder MAC…">
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:6px;">
|
||||
<span style="font-size:12px;color:var(--text-3);white-space:nowrap;">Standort:</span>
|
||||
<div class="filter-chips">
|
||||
<button type="submit" name="site" value="" class="chip{{if eq .SiteFilter ""}} active{{end}}">Alle</button>
|
||||
<button type="submit" name="site" value="LUD" class="chip{{if eq .SiteFilter "LUD"}} active{{end}}">Lüdenscheid</button>
|
||||
<button type="submit" name="site" value="BAR" class="chip{{if eq .SiteFilter "BAR"}} active{{end}}">Barleben</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:6px;">
|
||||
<span style="font-size:12px;color:var(--text-3);white-space:nowrap;">Status:</span>
|
||||
<div class="filter-chips">
|
||||
<button type="submit" name="status" value="" class="chip{{if eq .StatusFilter ""}} active{{end}}">Alle</button>
|
||||
<button type="submit" name="status" value="online" class="chip{{if eq .StatusFilter "online"}} active{{end}}">Online</button>
|
||||
<button type="submit" name="status" value="offline" class="chip{{if eq .StatusFilter "offline"}} active{{end}}">Offline</button>
|
||||
</div>
|
||||
</div>
|
||||
<input type="hidden" name="site" value="{{.SiteFilter}}">
|
||||
<input type="hidden" name="status" value="{{.StatusFilter}}">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
<div class="card">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="padding-left:20px;">IP-Adresse</th>
|
||||
<th>MAC-Adresse</th>
|
||||
<th>Hersteller</th>
|
||||
<th>Hostname</th>
|
||||
<th>Offene Ports</th>
|
||||
<th>Standort</th>
|
||||
<th>Zuletzt gesehen</th>
|
||||
<th style="padding-right:20px;">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{range .Hosts}}
|
||||
<tr>
|
||||
<td style="padding-left:20px;" class="mono" style="font-weight:600;">{{.IP}}</td>
|
||||
<td class="mono" style="color:var(--text-3);">{{.MAC}}</td>
|
||||
<td>
|
||||
<div class="device-row">
|
||||
<div class="device-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="2" y="3" width="20" height="8" rx="2"/><rect x="2" y="13" width="20" height="8" rx="2"/><path d="M6 7h.01M6 17h.01"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span style="color:var(--text-2);">{{if .Vendor}}{{.Vendor}}{{else}}<span style="color:var(--text-3);">—</span>{{end}}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td style="color:var(--text-2);font-size:12.5px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{if .Hostname}}{{.Hostname}}{{else}}<span style="color:var(--text-3);">—</span>{{end}}</td>
|
||||
<td>
|
||||
{{if .OpenPorts}}
|
||||
<div style="display:flex;flex-wrap:wrap;gap:3px;">
|
||||
{{range .OpenPorts}}<span style="background:var(--teal-50);color:var(--teal);border-radius:3px;padding:1px 5px;font-size:10px;font-family:monospace;font-weight:600;">{{.}}</span>{{end}}
|
||||
</div>
|
||||
{{else}}<span style="color:var(--text-3);">—</span>{{end}}
|
||||
</td>
|
||||
<td><span class="badge badge-gray">{{.Site}}</span></td>
|
||||
<td style="color:var(--text-3);font-size:12px;">{{.LastSeenFmt}}</td>
|
||||
<td style="padding-right:20px;">
|
||||
{{if eq .Status "online"}}
|
||||
<span class="badge badge-green"><span class="dot green" style="width:5px;height:5px;margin-right:4px;"></span>Online</span>
|
||||
{{else}}
|
||||
<span class="badge badge-gray"><span class="dot gray" style="width:5px;height:5px;margin-right:4px;"></span>Offline</span>
|
||||
{{end}}
|
||||
</td>
|
||||
</tr>
|
||||
{{else}}
|
||||
<tr><td colspan="8" style="text-align:center;padding:48px;color:var(--text-3);">
|
||||
Keine Geräte gefunden.
|
||||
</td></tr>
|
||||
{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{{if gt .TotalPages 1}}
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-top:1px solid var(--border);background:var(--surface-2);">
|
||||
<span style="font-size:12.5px;color:var(--text-3);">
|
||||
Zeige {{if gt .TotalHosts 0}}{{inc (mul (dec .PageNum) 20)}}–{{end}}{{.TotalHosts}} Einträge
|
||||
</span>
|
||||
<div class="pagination">
|
||||
{{if gt .PageNum 1}}
|
||||
<a href="/assets?{{.QueryString}}&page={{dec .PageNum}}" class="page-btn">‹</a>
|
||||
{{else}}
|
||||
<button class="page-btn" disabled>‹</button>
|
||||
{{end}}
|
||||
|
||||
{{range .Pages}}
|
||||
<a href="/assets?{{$.QueryString}}&page={{.}}" class="page-btn{{if eq . $.PageNum}} active{{end}}">{{.}}</a>
|
||||
{{end}}
|
||||
|
||||
{{if lt .PageNum .TotalPages}}
|
||||
<a href="/assets?{{.QueryString}}&page={{inc .PageNum}}" class="page-btn">›</a>
|
||||
{{else}}
|
||||
<button class="page-btn" disabled>›</button>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
166
nexus-scanner/internal/web/templates/dashboard.html
Normal file
166
nexus-scanner/internal/web/templates/dashboard.html
Normal file
@@ -0,0 +1,166 @@
|
||||
{{define "content"}}
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<h2 class="page-title">Übersicht</h2>
|
||||
<p class="page-sub">Status deines lokalen Scanners und der gefundenen Assets.</p>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:10px;">
|
||||
<div class="scan-pill">
|
||||
{{if .Scanning}}<span class="dot green" style="animation:dotpulse 1.6s ease-out infinite;"></span>
|
||||
<span class="label">Scanner läuft</span>
|
||||
{{else}}<span class="dot yellow"></span>
|
||||
<span class="label">Bereit</span>{{end}}
|
||||
<span class="sep">·</span>
|
||||
<span class="site">Standort {{.SiteID}}</span>
|
||||
</div>
|
||||
<form method="POST" action="/scan/start" style="margin:0;">
|
||||
<button type="submit" class="btn btn-primary" {{if .Scanning}}disabled{{end}}>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" style="width:13px;height:13px;">
|
||||
{{if .Scanning}}<rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/>
|
||||
{{else}}<polygon points="6 4 20 12 6 20 6 4" fill="currentColor" stroke="none"/>{{end}}
|
||||
</svg>
|
||||
{{if .Scanning}}Scan läuft…{{else}}Jetzt scannen{{end}}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats -->
|
||||
<div class="stats-grid stats-grid-4">
|
||||
<div class="stat">
|
||||
<div class="stat-label">
|
||||
<svg class="stat-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="8" rx="2"/><rect x="2" y="13" width="20" height="8" rx="2"/></svg>
|
||||
Gefundene Geräte
|
||||
</div>
|
||||
<div class="stat-value">{{.HostCount}}</div>
|
||||
<div class="stat-delta up">+{{.RecentCount}} seit letztem Scan</div>
|
||||
<div class="sparkline">
|
||||
<span style="height:35%"></span><span style="height:42%"></span><span style="height:50%"></span><span style="height:58%"></span><span style="height:62%"></span><span style="height:70%"></span><span style="height:78%"></span><span style="height:82%"></span><span style="height:88%"></span><span style="height:92%"></span><span style="height:95%"></span><span style="height:100%"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-label">
|
||||
<svg class="stat-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
|
||||
Neu seit letztem Scan
|
||||
</div>
|
||||
<div class="stat-value">{{.RecentCount}}</div>
|
||||
<div class="stat-delta">In den letzten 60 Min</div>
|
||||
<div class="sparkline">
|
||||
<span style="height:20%"></span><span style="height:30%"></span><span style="height:25%"></span><span style="height:45%"></span><span style="height:55%"></span><span style="height:60%"></span><span style="height:70%"></span><span style="height:65%"></span><span style="height:80%"></span><span style="height:75%"></span><span style="height:85%"></span><span style="height:90%"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-label">
|
||||
<svg class="stat-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0zM12 9v4M12 17h.01"/></svg>
|
||||
Offline-Geräte
|
||||
</div>
|
||||
<div class="stat-value" style="{{if gt .OfflineCount 5}}color:var(--danger);{{end}}">{{.OfflineCount}}</div>
|
||||
<div class="stat-delta {{if gt .OfflineCount 5}}down{{end}}">{{if gt .OfflineCount 5}}Erhöht ggü. Vorwoche{{else}}Im Normalbereich{{end}}</div>
|
||||
<div class="sparkline">
|
||||
<span style="height:60%"></span><span style="height:70%"></span><span style="height:55%"></span><span style="height:65%"></span><span style="height:80%"></span><span style="height:60%"></span><span style="height:75%"></span><span style="height:65%"></span><span style="height:70%"></span><span style="height:85%"></span><span style="height:90%"></span><span style="height:70%"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-label">
|
||||
<svg class="stat-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||||
Letzter Scan
|
||||
</div>
|
||||
<div class="stat-value" style="font-size:26px;margin-top:4px;">{{.LastScan}}</div>
|
||||
<div class="stat-delta">Intervall: {{.ARPInterval}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2-col content -->
|
||||
<div class="dash-grid">
|
||||
<!-- Zuletzt gefundene Geräte -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<div class="card-title">Zuletzt gefundene Geräte</div>
|
||||
<div class="card-sub">Die 5 jüngsten Einträge im Inventar</div>
|
||||
</div>
|
||||
<a href="/assets" class="card-action">
|
||||
Alle anzeigen
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="padding-left:20px;">Gerät</th>
|
||||
<th>IP-Adresse</th>
|
||||
<th>Standort</th>
|
||||
<th>Status</th>
|
||||
<th style="padding-right:20px;text-align:right;">Gesehen</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{range .RecentHosts}}
|
||||
<tr>
|
||||
<td style="padding-left:20px;">
|
||||
<div class="device-row">
|
||||
<div class="device-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="8" rx="2"/><rect x="2" y="13" width="20" height="8" rx="2"/><path d="M6 7h.01M6 17h.01"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="device-name">{{if .Hostname}}{{.Hostname}}{{else}}{{.IP}}{{end}}</div>
|
||||
<div class="device-vendor">{{if .Vendor}}{{.Vendor}}{{else}}Unbekannt{{end}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="mono">{{.IP}}</td>
|
||||
<td><span class="badge badge-gray">{{.Site}}</span></td>
|
||||
<td>
|
||||
{{if eq .Status "online"}}
|
||||
<span class="badge badge-green"><span class="dot green" style="width:5px;height:5px;margin-right:4px;"></span>Online</span>
|
||||
{{else}}
|
||||
<span class="badge badge-red"><span class="dot red" style="width:5px;height:5px;margin-right:4px;"></span>Offline</span>
|
||||
{{end}}
|
||||
</td>
|
||||
<td style="padding-right:20px;text-align:right;color:var(--text-3);font-size:12px;">{{.LastSeenFmt}}</td>
|
||||
</tr>
|
||||
{{else}}
|
||||
<tr><td colspan="5" style="text-align:center;padding:40px;color:var(--text-3);">
|
||||
Noch keine Geräte — Scan starten.
|
||||
</td></tr>
|
||||
{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Aktive Module -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<div class="card-title">Aktive Module</div>
|
||||
<div class="card-sub">Status der Scan-Quellen</div>
|
||||
</div>
|
||||
<a href="/modules" class="card-action">
|
||||
Verwalten
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
{{range $i, $m := .Modules}}
|
||||
<div class="dash-module-row" style="{{if eq $i 0}}border-top:none;{{end}}">
|
||||
<div class="dash-module-icon{{if not $m.Enabled}} off{{end}}">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" style="width:15px;height:15px;">
|
||||
{{if eq $m.Name "arp_discovery"}}<path d="M5 12.55a11 11 0 0 1 14 0M1.42 9a16 16 0 0 1 21.16 0M8.53 16.11a6 6 0 0 1 6.95 0M12 20h.01"/>
|
||||
{{else if eq $m.Name "dns_reverse"}}<path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"/>
|
||||
{{else if eq $m.Name "ad_sync"}}<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/>
|
||||
{{else if eq $m.Name "site_monitoring"}}<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
|
||||
{{else if eq $m.Name "port_scan"}}<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
||||
{{else if eq $m.Name "snmp"}}<ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/>
|
||||
{{else}}<rect x="2" y="3" width="20" height="8" rx="2"/><rect x="2" y="13" width="20" height="8" rx="2"/>{{end}}
|
||||
</svg>
|
||||
</div>
|
||||
<div style="flex:1;min-width:0;">
|
||||
<div class="dash-module-name">{{$m.DisplayName}}</div>
|
||||
<div class="dash-module-sub">{{if $m.LastRun}}Letzter Lauf {{$m.LastRun}}{{else}}Noch nicht gelaufen{{end}}</div>
|
||||
</div>
|
||||
{{if $m.Enabled}}<span class="badge badge-green" style="font-size:11px;flex-shrink:0;">OK</span>
|
||||
{{else}}<span class="badge badge-gray" style="font-size:11px;flex-shrink:0;">Aus</span>{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
145
nexus-scanner/internal/web/templates/layout.html
Normal file
145
nexus-scanner/internal/web/templates/layout.html
Normal file
@@ -0,0 +1,145 @@
|
||||
{{define "layout"}}
|
||||
<!DOCTYPE html>
|
||||
<html lang="de" data-theme="light">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{.Title}} — Nexus Scanner</title>
|
||||
<link rel="stylesheet" href="/static/style.css">
|
||||
<script>
|
||||
(function(){
|
||||
var t = localStorage.getItem('nx-theme') || 'light';
|
||||
document.documentElement.setAttribute('data-theme', t);
|
||||
})();
|
||||
</script>
|
||||
<script src="https://unpkg.com/htmx.org@1.9.12" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="app">
|
||||
|
||||
<!-- Sidebar -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-brand">
|
||||
<div class="brand-mark">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="brand-name">Nexus Scanner</div>
|
||||
<div class="brand-sub">{{.SiteID}} · {{.Addr}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-section">Scanner</div>
|
||||
<nav>
|
||||
<a href="/dashboard" class="nav-item{{if eq .Page "dashboard"}} active{{end}}">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="9" rx="1.5"/><rect x="14" y="3" width="7" height="5" rx="1.5"/><rect x="14" y="12" width="7" height="9" rx="1.5"/><rect x="3" y="16" width="7" height="5" rx="1.5"/></svg>
|
||||
<span>Übersicht</span>
|
||||
</a>
|
||||
<a href="/assets" class="nav-item{{if eq .Page "assets"}} active{{end}}">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 9h18M9 9v11"/></svg>
|
||||
<span>Geräte</span>
|
||||
<span class="nav-badge">{{.HostCount}}</span>
|
||||
</a>
|
||||
<a href="/modules" class="nav-item{{if eq .Page "modules"}} active{{end}}">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></svg>
|
||||
<span>Module</span>
|
||||
</a>
|
||||
<a href="/snmp" class="nav-item{{if eq .Page "snmp"}} active{{end}}">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>
|
||||
<span>SNMP</span>
|
||||
</a>
|
||||
<a href="/monitoring" class="nav-item{{if eq .Page "monitoring"}} active{{end}}">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
|
||||
<span>Monitoring</span>
|
||||
{{if .Scanning}}<span class="nav-dot"></span>{{end}}
|
||||
</a>
|
||||
<a href="/ad" class="nav-item{{if eq .Page "ad"}} active{{end}}">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg>
|
||||
<span>Active Directory</span>
|
||||
</a>
|
||||
<a href="/logs" class="nav-item{{if eq .Page "logs"}} active{{end}}">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6h16M4 12h16M4 18h10"/></svg>
|
||||
<span>Logs</span>
|
||||
<span class="nav-dot"></span>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<div class="sidebar-section">System</div>
|
||||
<nav>
|
||||
<a href="/settings" class="nav-item{{if eq .Page "settings"}} active{{end}}">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/></svg>
|
||||
<span>Einstellungen</span>
|
||||
</a>
|
||||
<button class="nav-item" onclick="toggleTheme()">
|
||||
<svg id="theme-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>
|
||||
<span id="theme-label">Dunkler Modus</span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<div class="sidebar-footer">
|
||||
<div class="avatar">A</div>
|
||||
<div style="flex:1;min-width:0;">
|
||||
<div class="user-name">Administrator</div>
|
||||
<div class="user-sub">Eingeloggt</div>
|
||||
</div>
|
||||
<a href="/logout" class="icon-btn" title="Abmelden">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Main -->
|
||||
<div class="main">
|
||||
<header class="topbar">
|
||||
<div class="breadcrumb">
|
||||
<span>Nexus Scanner</span>
|
||||
<span class="breadcrumb-sep">/</span>
|
||||
<span class="breadcrumb-current">{{.Title}}</span>
|
||||
</div>
|
||||
<div class="topbar-actions">
|
||||
{{if .Scanning}}
|
||||
<div class="status-pill scanning"><span class="dot teal" style="animation:dotpulse 1.6s ease-out infinite;"></span> Scan läuft…</div>
|
||||
{{else}}
|
||||
<div class="status-pill online"><span class="dot green"></span> Online · {{.SiteID}}</div>
|
||||
{{end}}
|
||||
<a href="/logout" class="icon-btn" title="Abmelden">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="content">
|
||||
{{template "content" .}}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleTheme() {
|
||||
var cur = document.documentElement.getAttribute('data-theme') || 'light';
|
||||
var next = cur === 'dark' ? 'light' : 'dark';
|
||||
document.documentElement.setAttribute('data-theme', next);
|
||||
localStorage.setItem('nx-theme', next);
|
||||
updateThemeUI(next);
|
||||
}
|
||||
function updateThemeUI(t) {
|
||||
var icon = document.getElementById('theme-icon');
|
||||
var label = document.getElementById('theme-label');
|
||||
if (!icon || !label) return;
|
||||
if (t === 'dark') {
|
||||
icon.innerHTML = '<circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/>';
|
||||
label.textContent = 'Heller Modus';
|
||||
} else {
|
||||
icon.innerHTML = '<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>';
|
||||
label.textContent = 'Dunkler Modus';
|
||||
}
|
||||
}
|
||||
(function(){
|
||||
updateThemeUI(document.documentElement.getAttribute('data-theme') || 'light');
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
{{end}}
|
||||
71
nexus-scanner/internal/web/templates/login.html
Normal file
71
nexus-scanner/internal/web/templates/login.html
Normal file
@@ -0,0 +1,71 @@
|
||||
{{define "login"}}
|
||||
<!DOCTYPE html>
|
||||
<html data-theme="light">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Anmelden — Nexus Scanner</title>
|
||||
<link rel="stylesheet" href="/static/style.css">
|
||||
<script src="https://unpkg.com/htmx.org@1.9.12" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="auth-wrap">
|
||||
<div class="auth-card">
|
||||
<div class="auth-logo">
|
||||
<div class="brand-mark">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="brand-name">Nexus Scanner</div>
|
||||
<div class="brand-sub">Netzwerk-Inventar Agent</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 class="auth-title">Willkommen zurück.</h1>
|
||||
<p class="auth-sub">Passwort eingeben um fortzufahren.</p>
|
||||
|
||||
{{if .Error}}
|
||||
<div class="error-msg">{{.Error}}</div>
|
||||
{{end}}
|
||||
|
||||
<form method="POST" action="/login">
|
||||
<div class="form-group">
|
||||
<label class="input-label" for="password">Passwort</label>
|
||||
<div class="password-wrap">
|
||||
<input class="input" type="password" id="password" name="password"
|
||||
placeholder="••••••••" autocomplete="current-password" autofocus required>
|
||||
<button type="button" class="eye-btn" onclick="togglePw()" title="Anzeigen">
|
||||
<svg id="eye-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary w-full" style="justify-content:center;">
|
||||
Anmelden
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p style="font-size:12px;color:var(--text-3);text-align:center;margin-top:20px;">
|
||||
Nexus Scanner · Cereda Systems GmbH
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function togglePw() {
|
||||
const f = document.getElementById('password');
|
||||
const i = document.getElementById('eye-icon');
|
||||
if (f.type === 'password') {
|
||||
f.type = 'text';
|
||||
i.innerHTML = '<path d="M17.94 17.94A10.94 10.94 0 0 1 12 20c-6.5 0-10-7-10-7a18.4 18.4 0 0 1 4.06-4.94"/><path d="M9.9 4.24A10 10 0 0 1 12 4c6.5 0 10 7 10 7a18.4 18.4 0 0 1-3.16 4.19"/><path d="m2 2 20 20"/>';
|
||||
} else {
|
||||
f.type = 'password';
|
||||
i.innerHTML = '<path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/>';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
{{end}}
|
||||
57
nexus-scanner/internal/web/templates/logs.html
Normal file
57
nexus-scanner/internal/web/templates/logs.html
Normal file
@@ -0,0 +1,57 @@
|
||||
{{define "content"}}
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<h1 class="page-title">Logs</h1>
|
||||
<p class="page-sub">Strukturierte Ausgabe des Scanners in Echtzeit.</p>
|
||||
</div>
|
||||
<div class="page-actions">
|
||||
<form method="GET" action="/logs" style="display:flex;gap:8px;align-items:center;">
|
||||
<select class="select" name="level" style="width:auto;" onchange="this.form.submit()">
|
||||
<option value="">Alle Level</option>
|
||||
<option value="INFO"{{if eq .LevelFilter "INFO"}} selected{{end}}>INFO</option>
|
||||
<option value="WARN"{{if eq .LevelFilter "WARN"}} selected{{end}}>WARN</option>
|
||||
<option value="ERROR"{{if eq .LevelFilter "ERROR"}} selected{{end}}>ERROR</option>
|
||||
</select>
|
||||
</form>
|
||||
<button class="btn" onclick="clearLogs()">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6M14 11v6M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg>
|
||||
Leeren
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="log-container" id="log-container"
|
||||
hx-get="/logs/rows?level={{.LevelFilter}}"
|
||||
hx-trigger="every 2s"
|
||||
hx-swap="innerHTML"
|
||||
hx-target="this">
|
||||
{{template "log-rows" .}}
|
||||
</div>
|
||||
|
||||
<div style="margin-top:10px;font-size:12px;color:var(--text-3);text-align:right;">
|
||||
Aktualisiert automatisch alle 2 Sekunden
|
||||
<span id="log-count"> · {{len .Logs}} Einträge</span>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function clearLogs() {
|
||||
fetch('/logs/clear', {method:'POST'}).then(() => {
|
||||
document.getElementById('log-container').innerHTML = '';
|
||||
});
|
||||
}
|
||||
</script>
|
||||
{{end}}
|
||||
|
||||
{{define "log-rows"}}
|
||||
{{range .Logs}}
|
||||
<div class="log-row">
|
||||
<span class="log-time">{{.Time}}</span>
|
||||
<span class="log-level {{.LevelClass}}">{{.Level}}</span>
|
||||
<span class="log-msg">{{.Message}}</span>
|
||||
</div>
|
||||
{{else}}
|
||||
<div style="padding:48px;text-align:center;color:var(--text-3);font-size:13px;">
|
||||
Noch keine Log-Einträge.
|
||||
</div>
|
||||
{{end}}
|
||||
{{end}}
|
||||
69
nexus-scanner/internal/web/templates/modules.html
Normal file
69
nexus-scanner/internal/web/templates/modules.html
Normal file
@@ -0,0 +1,69 @@
|
||||
{{define "content"}}
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<h1 class="page-title">Module</h1>
|
||||
<p class="page-sub">Scanner-Module aktivieren, deaktivieren und konfigurieren.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
{{range .Modules}}
|
||||
<div class="module-row">
|
||||
<div class="module-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="module-info">
|
||||
<div class="module-name">{{.DisplayName}}</div>
|
||||
<div class="module-desc">{{.Description}} · alle {{.Interval}}</div>
|
||||
</div>
|
||||
|
||||
<div class="module-status">
|
||||
{{if .LastRun}}
|
||||
<span style="font-size:12px;color:var(--text-3);">Letzter Lauf: {{.LastRun}}</span>
|
||||
{{end}}
|
||||
{{if .Enabled}}
|
||||
<span class="badge badge-green">Aktiv</span>
|
||||
{{else}}
|
||||
<span class="badge badge-gray">Inaktiv</span>
|
||||
{{end}}
|
||||
<form method="POST" action="/modules/{{.Name}}/toggle" style="display:inline;">
|
||||
<label class="toggle" title="{{if .Enabled}}Deaktivieren{{else}}Aktivieren{{end}}">
|
||||
<input type="checkbox"{{if .Enabled}} checked{{end}} onchange="this.form.submit()">
|
||||
<span class="toggle-track"></span>
|
||||
</label>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
<div style="padding:48px;text-align:center;color:var(--text-3);">
|
||||
Keine Module registriert. Konfiguriere Module in config.yaml.
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
|
||||
<div class="card" style="margin-top:16px;">
|
||||
<div class="card-header">
|
||||
<span class="card-title">ARP-Discovery Konfiguration</span>
|
||||
</div>
|
||||
<form method="POST" action="/modules/arp_discovery/config" class="setting-body full">
|
||||
<div class="form-group">
|
||||
<label class="input-label">Subnetz (CIDR)</label>
|
||||
{{range .ARPSubnets}}
|
||||
<input class="input mb-3" type="text" name="subnet" value="{{.}}" placeholder="192.168.0.0/24">
|
||||
{{else}}
|
||||
<input class="input mb-3" type="text" name="subnet" value="" placeholder="192.168.0.0/24">
|
||||
{{end}}
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="input-label">Netzwerk-Interface</label>
|
||||
<input class="input" type="text" name="interface" value="{{.ARPInterface}}" placeholder="eth0">
|
||||
</div>
|
||||
<div>
|
||||
<button type="submit" class="btn btn-primary">Speichern</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{{end}}
|
||||
158
nexus-scanner/internal/web/templates/monitoring.html
Normal file
158
nexus-scanner/internal/web/templates/monitoring.html
Normal file
@@ -0,0 +1,158 @@
|
||||
{{define "content"}}
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<h1 class="page-title">Standort-Monitoring</h1>
|
||||
<p class="page-sub">Erreichbarkeit von Internet, Diensten und Netzwerkgeräten.</p>
|
||||
</div>
|
||||
<div style="display:flex;gap:8px;align-items:center;">
|
||||
{{if .AllOnline}}
|
||||
<div class="status-pill online"><span class="dot green"></span> Alle Systeme Online</div>
|
||||
{{else if eq .TotalChecks 0}}
|
||||
<div class="status-pill"><span class="dot" style="background:var(--text-3);"></span> Noch keine Checks</div>
|
||||
{{else}}
|
||||
<div class="status-pill" style="background:rgba(255,59,48,.1);border-color:rgba(255,59,48,.3);color:#ff3b30;">
|
||||
<span class="dot" style="background:#ff3b30;"></span> Probleme erkannt
|
||||
</div>
|
||||
{{end}}
|
||||
<form method="POST" action="/monitoring/scan" style="margin:0;">
|
||||
<button type="submit" class="btn btn-primary" style="height:32px;font-size:13px;">Jetzt prüfen</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats -->
|
||||
<div class="stats-grid" style="grid-template-columns:repeat(3,1fr);margin-bottom:20px;">
|
||||
<div class="stat">
|
||||
<div class="stat-label">Checks gesamt</div>
|
||||
<div class="stat-value">{{.TotalChecks}}</div>
|
||||
<div class="stat-delta neutral">konfiguriert</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-label">Online</div>
|
||||
<div class="stat-value" style="{{if gt .OnlineCount 0}}color:var(--success);{{end}}">{{.OnlineCount}}</div>
|
||||
<div class="stat-delta up">erreichbar</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-label">Offline</div>
|
||||
<div class="stat-value" style="{{if gt .OfflineCount 0}}color:#ff3b30;{{end}}">{{.OfflineCount}}</div>
|
||||
<div class="stat-delta {{if gt .OfflineCount 0}}down{{else}}neutral{{end}}">nicht erreichbar</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Checks Table -->
|
||||
<div class="card" style="margin-bottom:20px;">
|
||||
{{if .Checks}}
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Typ</th>
|
||||
<th>Ziel</th>
|
||||
<th>Status</th>
|
||||
<th>Latenz</th>
|
||||
<th style="width:180px;">Verlauf (letzte 20)</th>
|
||||
<th>Geprüft</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{range .Checks}}
|
||||
<tr>
|
||||
<td style="font-weight:600;">{{.Check.Name}}</td>
|
||||
<td>
|
||||
<span style="background:var(--bg-2);border:1px solid var(--border);border-radius:4px;padding:1px 7px;font-size:11px;font-family:monospace;text-transform:uppercase;color:var(--text-2);">{{.Check.Type}}</span>
|
||||
</td>
|
||||
<td style="color:var(--text-2);font-size:12px;font-family:monospace;">{{.Check.Target}}</td>
|
||||
<td>
|
||||
{{if not .HasResult}}
|
||||
<span class="badge" style="color:var(--text-3);">Ausstehend</span>
|
||||
{{else if eq .Latest.Status "online"}}
|
||||
<span class="badge badge-green"><span class="dot green" style="width:5px;height:5px;margin-right:4px;display:inline-block;"></span>Online</span>
|
||||
{{else}}
|
||||
<span class="badge" style="background:rgba(255,59,48,.1);border-color:rgba(255,59,48,.3);color:#ff3b30;"><span class="dot" style="background:#ff3b30;width:5px;height:5px;margin-right:4px;display:inline-block;border-radius:50%;"></span>Offline</span>
|
||||
{{end}}
|
||||
</td>
|
||||
<td style="color:var(--text-2);font-size:12px;">
|
||||
{{if and .HasResult (gt .Latest.LatencyMS 0)}}{{.Latest.LatencyMS}} ms{{else}}—{{end}}
|
||||
</td>
|
||||
<td>
|
||||
<div style="display:flex;gap:2px;align-items:center;">
|
||||
{{range .History}}
|
||||
<div style="width:8px;height:20px;border-radius:2px;flex-shrink:0;
|
||||
background:{{if eq .Status "online"}}var(--success){{else}}#ff3b30{{end}};
|
||||
opacity:0.8;"
|
||||
title="{{formatTime .CheckedAt}} · {{.Status}}{{if gt .LatencyMS 0}} · {{.LatencyMS}}ms{{end}}{{if .Error}} · {{.Error}}{{end}}">
|
||||
</div>
|
||||
{{end}}
|
||||
{{if eq (len .History) 0}}
|
||||
<span style="color:var(--text-3);font-size:11px;">noch keine Daten</span>
|
||||
{{end}}
|
||||
</div>
|
||||
</td>
|
||||
<td style="color:var(--text-3);font-size:12px;">
|
||||
{{if .HasResult}}{{formatTime .Latest.CheckedAt}}{{else}}—{{end}}
|
||||
</td>
|
||||
<td>
|
||||
<form method="POST" action="/monitoring/checks/{{.Check.ID}}/delete" style="margin:0;">
|
||||
<button type="submit" class="icon-btn" title="Löschen"
|
||||
onclick="return confirm('Check \'{{.Check.Name}}\' löschen?')"
|
||||
style="color:var(--text-3);">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6M14 11v6"/><path d="M9 6V4h6v2"/>
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
{{else}}
|
||||
<div style="text-align:center;padding:48px;color:var(--text-3);">
|
||||
<div style="font-size:32px;margin-bottom:8px;">📡</div>
|
||||
<div style="font-weight:600;margin-bottom:4px;">Noch keine Checks konfiguriert</div>
|
||||
<div style="font-size:13px;">Füge unten deinen ersten Check hinzu.</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
|
||||
<!-- Add Check Form -->
|
||||
<div class="card" style="margin-top:4px;">
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--border);">
|
||||
<div>
|
||||
<div style="font-weight:600;font-size:14px;color:var(--text-1);">Check hinzufügen</div>
|
||||
<div style="font-size:12px;color:var(--text-3);margin-top:2px;">Jeder Standort prüft unabhängig — Ping, HTTP oder TCP Port.</div>
|
||||
</div>
|
||||
</div>
|
||||
{{if .AddErr}}<div class="error-msg" style="margin-bottom:14px;">{{.AddErr}}</div>{{end}}
|
||||
<form method="POST" action="/monitoring/checks/add">
|
||||
<div style="display:grid;grid-template-columns:1fr 110px 1fr;gap:12px;margin-bottom:14px;">
|
||||
<div>
|
||||
<label class="input-label">Name</label>
|
||||
<input class="input" type="text" name="name" placeholder="z.B. Internet (Google)" required>
|
||||
</div>
|
||||
<div>
|
||||
<label class="input-label">Typ</label>
|
||||
<select class="select" name="type" style="width:100%;">
|
||||
<option value="ping">Ping</option>
|
||||
<option value="http">HTTP/S</option>
|
||||
<option value="tcp">TCP Port</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="input-label">Ziel</label>
|
||||
<input class="input" type="text" name="target"
|
||||
placeholder="8.8.8.8 · https://… · host:443" required>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;">
|
||||
<span style="font-size:12px;color:var(--text-3);">
|
||||
<span style="color:var(--text-2);font-weight:600;">Ping:</span> IP-Adresse
|
||||
<span style="color:var(--text-2);font-weight:600;">HTTP/S:</span> https://hostname
|
||||
<span style="color:var(--text-2);font-weight:600;">TCP:</span> hostname:port
|
||||
</span>
|
||||
<button type="submit" class="btn btn-primary">+ Hinzufügen</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{{end}}
|
||||
252
nexus-scanner/internal/web/templates/settings.html
Normal file
252
nexus-scanner/internal/web/templates/settings.html
Normal file
@@ -0,0 +1,252 @@
|
||||
{{define "content"}}
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<h1 class="page-title">Einstellungen</h1>
|
||||
<p class="page-sub">Standort, IT Nexus API und Scanner-Optionen.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{if .Saved}}<div class="success-msg" style="margin-bottom:16px;">Einstellungen gespeichert.</div>{{end}}
|
||||
{{if .SaveErr}}<div class="error-msg" style="margin-bottom:16px;">{{.SaveErr}}</div>{{end}}
|
||||
|
||||
<form method="POST" action="/settings">
|
||||
|
||||
<!-- Standort -->
|
||||
<div class="settings-section">
|
||||
<div class="settings-title">Standort</div>
|
||||
<div class="card">
|
||||
<div class="setting-row">
|
||||
<div>
|
||||
<div class="setting-label">Standort-ID</div>
|
||||
<div class="setting-sub">Wird in allen gemeldeten Assets verwendet.</div>
|
||||
</div>
|
||||
<div class="setting-control">
|
||||
<select class="select" name="site" style="width:200px;">
|
||||
<option value="LUD"{{if eq .Site "LUD"}} selected{{end}}>Lüdenscheid (LUD)</option>
|
||||
<option value="BAR"{{if eq .Site "BAR"}} selected{{end}}>Barleben (BAR)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- IT Nexus API -->
|
||||
<div class="settings-section">
|
||||
<div class="settings-title">IT Nexus Integration</div>
|
||||
<div class="card">
|
||||
<div class="setting-body full">
|
||||
<div class="form-group">
|
||||
<label class="input-label">API URL</label>
|
||||
<input class="input" type="url" name="nexus_url" value="{{.NexusURL}}"
|
||||
placeholder="https://it-nexus.cereda-systems.de">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="input-label">API Key</label>
|
||||
<div class="password-wrap">
|
||||
<input class="input" type="password" id="api-key" name="nexus_api_key" value="{{.NexusAPIKey}}"
|
||||
placeholder="itx-…">
|
||||
<button type="button" class="eye-btn" onclick="toggleApiKey()" title="Anzeigen">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scanner -->
|
||||
<div class="settings-section">
|
||||
<div class="settings-title">Scanner-Optionen</div>
|
||||
<div class="card">
|
||||
<div class="setting-row">
|
||||
<div>
|
||||
<div class="setting-label">Scan-Intervall</div>
|
||||
<div class="setting-sub">Wie oft der ARP-Scan automatisch ausgeführt wird.</div>
|
||||
</div>
|
||||
<div class="setting-control">
|
||||
<select class="select" name="arp_interval" style="width:160px;">
|
||||
<option value="1m"{{if eq .ARPInterval "1m"}} selected{{end}}>1 Minute</option>
|
||||
<option value="5m"{{if eq .ARPInterval "5m"}} selected{{end}}>5 Minuten</option>
|
||||
<option value="15m"{{if eq .ARPInterval "15m"}} selected{{end}}>15 Minuten</option>
|
||||
<option value="1h"{{if eq .ARPInterval "1h"}} selected{{end}}>1 Stunde</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scanner-Verhalten -->
|
||||
<div class="settings-section">
|
||||
<div class="settings-title">Scanner-Verhalten</div>
|
||||
<div class="card">
|
||||
<div class="setting-row">
|
||||
<div>
|
||||
<div class="setting-label">Offline-Schwellwert</div>
|
||||
<div class="setting-sub">Host gilt als Offline wenn er seit dieser Zeit nicht mehr gesehen wurde.</div>
|
||||
</div>
|
||||
<div class="setting-control">
|
||||
<select class="select" name="offline_after" style="width:140px;">
|
||||
<option value="5m"{{if eq .OfflineAfter "5m0s"}} selected{{end}}>5 Minuten</option>
|
||||
<option value="10m"{{if eq .OfflineAfter "10m0s"}} selected{{end}}>10 Minuten</option>
|
||||
<option value="15m"{{if eq .OfflineAfter "15m0s"}} selected{{end}}>15 Minuten</option>
|
||||
<option value="30m"{{if eq .OfflineAfter "30m0s"}} selected{{end}}>30 Minuten</option>
|
||||
<option value="1h"{{if eq .OfflineAfter "1h0m0s"}} selected{{end}}>1 Stunde</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Active Directory -->
|
||||
<div class="settings-section">
|
||||
<div class="settings-title">Active Directory</div>
|
||||
<div class="card">
|
||||
<div class="setting-row">
|
||||
<div>
|
||||
<div class="setting-label">AD Sync aktivieren</div>
|
||||
<div class="setting-sub">Computer-Objekte aus winkel.local importieren.</div>
|
||||
</div>
|
||||
<div class="setting-control">
|
||||
<label class="toggle">
|
||||
<input type="checkbox" name="ad_enabled"{{if .ADEnabled}} checked{{end}}>
|
||||
<span class="toggle-track"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="setting-body">
|
||||
<div class="form-group">
|
||||
<label class="input-label">Domain Controller (IP oder Hostname)</label>
|
||||
<input class="input" type="text" name="ad_server" value="{{.ADServer}}" placeholder="192.168.0.12">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="input-label">Port</label>
|
||||
<input class="input" type="number" name="ad_port" value="{{.ADPort}}" placeholder="389">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="input-label">Bind-DN (Service Account)</label>
|
||||
<input class="input" type="text" name="ad_bind_dn" value="{{.ADBindDN}}" placeholder="svc-scanner@winkel.local">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="input-label">Passwort</label>
|
||||
<div class="password-wrap">
|
||||
<input class="input" type="password" id="ad-pw" name="ad_bind_password" value="{{.ADBindPW}}" placeholder="Service-Account Passwort">
|
||||
<button type="button" class="eye-btn" onclick="toggleAdPw()">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="input-label">Search Base</label>
|
||||
<input class="input" type="text" name="ad_search_base" value="{{.ADSearchBase}}" placeholder="DC=winkel,DC=local">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="input-label">Sync-Intervall</label>
|
||||
<select class="select" name="ad_interval">
|
||||
<option value="15m"{{if eq .ADInterval "15m0s"}} selected{{end}}>15 Minuten</option>
|
||||
<option value="30m"{{if eq .ADInterval "30m0s"}} selected{{end}}>30 Minuten</option>
|
||||
<option value="1h"{{if eq .ADInterval "1h0m0s"}} selected{{end}}>1 Stunde</option>
|
||||
<option value="6h"{{if eq .ADInterval "6h0m0s"}} selected{{end}}>6 Stunden</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Alerts -->
|
||||
<div class="settings-section">
|
||||
<div class="settings-title">Benachrichtigungen</div>
|
||||
<div class="card">
|
||||
<div class="setting-row">
|
||||
<div>
|
||||
<div class="setting-label">IT Nexus Alert</div>
|
||||
<div class="setting-sub">Bei Ausfall an IT Nexus API melden (POST /api/scanner/alert).</div>
|
||||
</div>
|
||||
<div class="setting-control">
|
||||
<label class="toggle">
|
||||
<input type="checkbox" name="alert_nexus"{{if .AlertNexus}} checked{{end}}>
|
||||
<span class="toggle-track"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="setting-row">
|
||||
<div>
|
||||
<div class="setting-label">E-Mail (SMTP)</div>
|
||||
<div class="setting-sub">E-Mail bei Status-Wechsel senden.</div>
|
||||
</div>
|
||||
<div class="setting-control">
|
||||
<label class="toggle">
|
||||
<input type="checkbox" name="smtp_enabled"{{if .SMTPEnabled}} checked{{end}}>
|
||||
<span class="toggle-track"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="setting-body" style="grid-template-columns:1fr 1fr;">
|
||||
<div class="form-group">
|
||||
<label class="input-label">SMTP-Host</label>
|
||||
<input class="input" type="text" name="smtp_host" value="{{.SMTPHost}}" placeholder="smtp.office365.com">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="input-label">Port</label>
|
||||
<input class="input" type="number" name="smtp_port" value="{{.SMTPPort}}" placeholder="587">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="input-label">Benutzername</label>
|
||||
<input class="input" type="text" name="smtp_user" value="{{.SMTPUser}}" placeholder="scanner@cereda-systems.de">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="input-label">Passwort</label>
|
||||
<div class="password-wrap">
|
||||
<input class="input" type="password" name="smtp_pass" value="{{.SMTPPass}}" placeholder="SMTP-Passwort">
|
||||
<button type="button" class="eye-btn" onclick="this.previousElementSibling.type=this.previousElementSibling.type==='password'?'text':'password'">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="input-label">Absender (From)</label>
|
||||
<input class="input" type="email" name="smtp_from" value="{{.SMTPFrom}}" placeholder="nexus-scanner@cereda-systems.de">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="input-label">Empfänger (To)</label>
|
||||
<input class="input" type="email" name="smtp_to" value="{{.SMTPTo}}" placeholder="it@cereda-systems.de">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Passwort -->
|
||||
<div class="settings-section">
|
||||
<div class="settings-title">Passwort ändern</div>
|
||||
<div class="card">
|
||||
<div class="setting-body">
|
||||
<div class="form-group">
|
||||
<label class="input-label">Neues Passwort</label>
|
||||
<input class="input" type="password" name="new_password" placeholder="Mindestens 6 Zeichen" autocomplete="new-password">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="input-label">Bestätigung</label>
|
||||
<input class="input" type="password" name="confirm_password" placeholder="Passwort wiederholen" autocomplete="new-password">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;justify-content:flex-end;gap:10px;">
|
||||
<button type="reset" class="btn">Zurücksetzen</button>
|
||||
<button type="submit" class="btn btn-primary">Einstellungen speichern</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
function togglePw(id) {
|
||||
const f = document.getElementById(id);
|
||||
f.type = f.type === 'password' ? 'text' : 'password';
|
||||
}
|
||||
function toggleApiKey() { togglePw('api-key'); }
|
||||
function toggleAdPw() { togglePw('ad-pw'); }
|
||||
</script>
|
||||
{{end}}
|
||||
219
nexus-scanner/internal/web/templates/setup.html
Normal file
219
nexus-scanner/internal/web/templates/setup.html
Normal file
@@ -0,0 +1,219 @@
|
||||
{{define "setup"}}
|
||||
<!DOCTYPE html>
|
||||
<html data-theme="light">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Einrichtung — Nexus Scanner</title>
|
||||
<link rel="stylesheet" href="/static/style.css">
|
||||
<script>(function(){ var t=localStorage.getItem('nx-theme')||'light'; document.documentElement.setAttribute('data-theme',t); })();</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wizard-wrap">
|
||||
<div class="wizard">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="wizard-header">
|
||||
<div style="display:flex;align-items:center;gap:10px;">
|
||||
<div class="brand-mark" style="width:28px;height:28px;border-radius:7px;">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" style="width:15px;height:15px;color:#fff;"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
|
||||
</div>
|
||||
<span style="font-size:13px;font-weight:600;color:var(--text-2);">Nexus Scanner</span>
|
||||
</div>
|
||||
<div class="wizard-steps">
|
||||
{{range $i, $_ := .Steps}}
|
||||
<div class="wizard-step{{if lt $i $.Step}} done{{else if eq $i $.Step}} active{{end}}"></div>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{if eq .Step 0}}
|
||||
<!-- Schritt 1: Standort -->
|
||||
<div class="wizard-body">
|
||||
<div class="wizard-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
||||
</div>
|
||||
<h2 class="wizard-title">Willkommen beim Nexus Scanner.</h2>
|
||||
<p class="wizard-sub">Wähle zuerst deinen Standort.</p>
|
||||
<form method="POST" action="/setup" id="f">
|
||||
<input type="hidden" name="step" value="0">
|
||||
<div class="site-cards">
|
||||
<label class="site-card{{if eq .Site "LUD"}} selected{{end}}" onclick="sel(this,'LUD')">
|
||||
<input type="radio" name="site" value="LUD" style="display:none;"{{if eq .Site "LUD"}} checked{{end}}>
|
||||
<div class="site-card-name">Lüdenscheid</div>
|
||||
<div class="site-card-sub">LUD · 192.168.0.0/24</div>
|
||||
</label>
|
||||
<label class="site-card{{if eq .Site "BAR"}} selected{{end}}" onclick="sel(this,'BAR')">
|
||||
<input type="radio" name="site" value="BAR" style="display:none;"{{if eq .Site "BAR"}} checked{{end}}>
|
||||
<div class="site-card-name">Barleben</div>
|
||||
<div class="site-card-sub">BAR · 192.168.10.0/24</div>
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="wizard-footer">
|
||||
<span style="font-size:12.5px;color:var(--text-3);">Schritt 1 von {{len .Steps}}</span>
|
||||
<button form="f" type="submit" name="next" value="1" class="btn btn-primary">
|
||||
Weiter <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px;"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{{else if eq .Step 1}}
|
||||
<!-- Schritt 2: Netzwerk -->
|
||||
<div class="wizard-body">
|
||||
<div class="wizard-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="8" rx="2"/><rect x="2" y="14" width="20" height="8" rx="2"/><line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/></svg>
|
||||
</div>
|
||||
<h2 class="wizard-title">Netzwerk konfigurieren.</h2>
|
||||
<p class="wizard-sub">Welches Subnetz soll gescannt werden?</p>
|
||||
{{if .Error}}<div class="error-msg" style="margin-bottom:14px;">{{.Error}}</div>{{end}}
|
||||
<form method="POST" action="/setup" id="f">
|
||||
<input type="hidden" name="step" value="1">
|
||||
<input type="hidden" name="site" value="{{.Site}}">
|
||||
<div class="form-group">
|
||||
<label class="input-label">Subnetz (CIDR)</label>
|
||||
<input class="input" type="text" name="subnet" value="{{.Subnet}}" placeholder="192.168.0.0/24" required autofocus>
|
||||
<p style="font-size:12px;color:var(--text-3);margin-top:5px;">Beispiel: 192.168.0.0/24 scannt 254 Adressen.</p>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="input-label">Netzwerk-Interface</label>
|
||||
<select class="select" name="interface">
|
||||
{{range .Interfaces}}
|
||||
<option value="{{.}}"{{if eq . $.Interface}} selected{{end}}>{{.}}</option>
|
||||
{{end}}
|
||||
{{if not .Interfaces}}<option value="eth0">eth0</option>{{end}}
|
||||
</select>
|
||||
<p style="font-size:12px;color:var(--text-3);margin-top:5px;">Automatisch erkannt — wähle das Interface zum LAN.</p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="wizard-footer">
|
||||
<a href="/setup?step=0" class="btn">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px;"><path d="M19 12H5M12 19l-7-7 7-7"/></svg> Zurück
|
||||
</a>
|
||||
<div style="display:flex;align-items:center;gap:12px;">
|
||||
<span style="font-size:12.5px;color:var(--text-3);">Schritt 2 von {{len .Steps}}</span>
|
||||
<button form="f" type="submit" name="next" value="2" class="btn btn-primary">
|
||||
Weiter <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px;"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{else if eq .Step 2}}
|
||||
<!-- Schritt 3: IT Nexus API -->
|
||||
<div class="wizard-body">
|
||||
<div class="wizard-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
|
||||
</div>
|
||||
<h2 class="wizard-title">IT Nexus verbinden.</h2>
|
||||
<p class="wizard-sub">Optional — kann auch später konfiguriert werden.</p>
|
||||
<form method="POST" action="/setup" id="f">
|
||||
<input type="hidden" name="step" value="2">
|
||||
<input type="hidden" name="site" value="{{.Site}}">
|
||||
<input type="hidden" name="subnet" value="{{.Subnet}}">
|
||||
<input type="hidden" name="interface" value="{{.Interface}}">
|
||||
<div class="form-group">
|
||||
<label class="input-label">IT Nexus API URL</label>
|
||||
<input class="input" type="url" name="nexus_url" value="{{.NexusURL}}" placeholder="https://it-nexus.cereda-systems.de">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="input-label">API Key</label>
|
||||
<input class="input" type="password" name="nexus_api_key" value="{{.NexusAPIKey}}" placeholder="nsx-…">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="wizard-footer">
|
||||
<a href="/setup?step=1" class="btn">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px;"><path d="M19 12H5M12 19l-7-7 7-7"/></svg> Zurück
|
||||
</a>
|
||||
<div style="display:flex;align-items:center;gap:12px;">
|
||||
<span style="font-size:12.5px;color:var(--text-3);">Schritt 3 von {{len .Steps}}</span>
|
||||
<button form="f" type="submit" name="next" value="3" class="btn btn-primary">
|
||||
Weiter <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px;"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{else if eq .Step 3}}
|
||||
<!-- Schritt 4: Passwort -->
|
||||
<div class="wizard-body">
|
||||
<div class="wizard-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
|
||||
</div>
|
||||
<h2 class="wizard-title">Passwort festlegen.</h2>
|
||||
<p class="wizard-sub">Mindestens 6 Zeichen für den Web-Login.</p>
|
||||
{{if .Error}}<div class="error-msg" style="margin-bottom:14px;">{{.Error}}</div>{{end}}
|
||||
<form method="POST" action="/setup" id="f">
|
||||
<input type="hidden" name="step" value="3">
|
||||
<input type="hidden" name="site" value="{{.Site}}">
|
||||
<input type="hidden" name="subnet" value="{{.Subnet}}">
|
||||
<input type="hidden" name="interface" value="{{.Interface}}">
|
||||
<input type="hidden" name="nexus_url" value="{{.NexusURL}}">
|
||||
<input type="hidden" name="nexus_api_key" value="{{.NexusAPIKey}}">
|
||||
<div class="form-group">
|
||||
<label class="input-label">Passwort</label>
|
||||
<input class="input" type="password" name="password" placeholder="Mindestens 6 Zeichen" minlength="6" required autofocus>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="input-label">Bestätigung</label>
|
||||
<input class="input" type="password" name="confirm" placeholder="Passwort wiederholen" required>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="wizard-footer">
|
||||
<a href="/setup?step=2" class="btn">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px;"><path d="M19 12H5M12 19l-7-7 7-7"/></svg> Zurück
|
||||
</a>
|
||||
<div style="display:flex;align-items:center;gap:12px;">
|
||||
<span style="font-size:12.5px;color:var(--text-3);">Schritt 4 von {{len .Steps}}</span>
|
||||
<button form="f" type="submit" name="next" value="4" class="btn btn-primary">
|
||||
Weiter <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px;"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{else}}
|
||||
<!-- Schritt 5: Fertig -->
|
||||
<div class="wizard-body">
|
||||
<div class="wizard-icon" style="background:rgba(52,168,83,.12);color:var(--success);">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
|
||||
</div>
|
||||
<h2 class="wizard-title">Alles bereit.</h2>
|
||||
<p class="wizard-sub">Der Scanner ist konfiguriert und startet jetzt.</p>
|
||||
<div style="display:flex;flex-direction:column;gap:10px;font-size:13px;margin-top:16px;">
|
||||
<div style="display:flex;align-items:center;gap:8px;"><span class="badge badge-teal">{{.Site}}</span><span style="color:var(--text-2);">Standort</span></div>
|
||||
<div style="display:flex;align-items:center;gap:8px;"><span class="badge badge-green">{{.Subnet}}</span><span style="color:var(--text-2);">Subnetz</span></div>
|
||||
{{if .NexusURL}}<div style="display:flex;align-items:center;gap:8px;"><span class="badge badge-green">Verbunden</span><span style="color:var(--text-2);">IT Nexus API</span></div>{{end}}
|
||||
<div style="display:flex;align-items:center;gap:8px;"><span class="badge badge-green">✓</span><span style="color:var(--text-2);">Passwort gesetzt</span></div>
|
||||
</div>
|
||||
<form method="POST" action="/setup/complete" id="f">
|
||||
<input type="hidden" name="step" value="4">
|
||||
<input type="hidden" name="site" value="{{.Site}}">
|
||||
<input type="hidden" name="subnet" value="{{.Subnet}}">
|
||||
<input type="hidden" name="interface" value="{{.Interface}}">
|
||||
<input type="hidden" name="nexus_url" value="{{.NexusURL}}">
|
||||
<input type="hidden" name="nexus_api_key" value="{{.NexusAPIKey}}">
|
||||
<input type="hidden" name="password" value="{{.Password}}">
|
||||
</form>
|
||||
</div>
|
||||
<div class="wizard-footer" style="justify-content:center;">
|
||||
<button form="f" type="submit" class="btn btn-primary" style="width:100%;justify-content:center;">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px;"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||||
Scanner starten
|
||||
</button>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
</div><!-- .wizard -->
|
||||
</div><!-- .wizard-wrap -->
|
||||
|
||||
<script>
|
||||
function sel(card, site) {
|
||||
document.querySelectorAll('.site-card').forEach(c => c.classList.remove('selected'));
|
||||
card.classList.add('selected');
|
||||
card.querySelector('input[type=radio]').checked = true;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
{{end}}
|
||||
232
nexus-scanner/internal/web/templates/snmp.html
Normal file
232
nexus-scanner/internal/web/templates/snmp.html
Normal file
@@ -0,0 +1,232 @@
|
||||
{{define "content"}}
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<h1 class="page-title">SNMP</h1>
|
||||
<p class="page-sub">Geräte-Informationen via SNMP — Drucker, Switches, USVs.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{if .AddErr}}<div class="error-msg" style="margin-bottom:16px;">{{.AddErr}}</div>{{end}}
|
||||
|
||||
{{if .Targets}}
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px;margin-bottom:24px;">
|
||||
{{range .Targets}}
|
||||
<div class="card" style="overflow:visible;">
|
||||
<!-- Card Header -->
|
||||
<div style="padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;">
|
||||
<div style="display:flex;align-items:center;gap:10px;">
|
||||
<div style="width:32px;height:32px;border-radius:var(--r-sm);background:var(--teal-50);color:var(--teal);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
|
||||
{{if eq .Target.Type "printer"}}
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px;"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect x="6" y="14" width="12" height="8"/></svg>
|
||||
{{else if eq .Target.Type "switch"}}
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px;"><rect x="2" y="7" width="20" height="10" rx="2"/><path d="M6 12h.01M10 12h.01M14 12h.01M18 12h.01"/></svg>
|
||||
{{else}}
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px;"><rect x="4" y="4" width="16" height="16" rx="2"/><path d="M9 9h6M9 12h6M9 15h4"/></svg>
|
||||
{{end}}
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-weight:600;font-size:14px;">{{.Target.Name}}</div>
|
||||
<div style="font-size:12px;color:var(--text-3);font-family:monospace;">{{.Target.IP}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:8px;">
|
||||
{{if .HasData}}
|
||||
<span class="badge badge-green" style="font-size:11px;">Online</span>
|
||||
{{else}}
|
||||
<span class="badge badge-gray" style="font-size:11px;">Kein Datum</span>
|
||||
{{end}}
|
||||
<form method="POST" action="/snmp/targets/{{.Target.ID}}/delete" style="margin:0;">
|
||||
<button type="submit" class="icon-btn" onclick="return confirm('{{.Target.Name}} löschen?')" style="color:var(--text-3);" title="Löschen">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6M14 11v6"/><path d="M9 6V4h6v2"/></svg>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card Body -->
|
||||
<div style="padding:16px 20px;">
|
||||
{{if .HasData}}
|
||||
{{if .SysName}}<div style="margin-bottom:8px;"><span style="font-size:11px;color:var(--text-3);font-weight:600;text-transform:uppercase;">Name</span><div style="font-size:13px;color:var(--text-1);margin-top:2px;">{{.SysName}}</div></div>{{end}}
|
||||
{{if .SysDescr}}<div style="margin-bottom:8px;"><span style="font-size:11px;color:var(--text-3);font-weight:600;text-transform:uppercase;">Beschreibung</span><div style="font-size:12px;color:var(--text-2);margin-top:2px;">{{.SysDescr}}</div></div>{{end}}
|
||||
{{if .SysUpTime}}<div style="margin-bottom:8px;"><span style="font-size:11px;color:var(--text-3);font-weight:600;text-transform:uppercase;">Uptime</span><div style="font-size:13px;color:var(--text-2);margin-top:2px;">{{.SysUpTime}}</div></div>{{end}}
|
||||
{{if .SysLocation}}<div style="margin-bottom:8px;"><span style="font-size:11px;color:var(--text-3);font-weight:600;text-transform:uppercase;">Standort</span><div style="font-size:13px;color:var(--text-2);margin-top:2px;">{{.SysLocation}}</div></div>{{end}}
|
||||
|
||||
{{if eq .Target.Type "switch"}}
|
||||
<!-- Switch Stats -->
|
||||
<div style="margin-top:10px;padding-top:10px;border-top:1px solid var(--border);">
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
|
||||
{{if .PortsTotal}}
|
||||
<div style="background:var(--surface-2);border-radius:var(--r-sm);padding:10px 12px;">
|
||||
<div style="font-size:11px;color:var(--text-3);font-weight:600;text-transform:uppercase;margin-bottom:4px;">Ports</div>
|
||||
<div style="font-size:20px;font-weight:600;color:var(--text-1);">{{.PortsUp}}<span style="font-size:13px;color:var(--text-3);font-weight:400;"> / {{.PortsTotal}}</span></div>
|
||||
<div style="font-size:11px;color:var(--success);margin-top:2px;">● aktiv</div>
|
||||
</div>
|
||||
{{end}}
|
||||
{{if .TrafficIn}}
|
||||
<div style="background:var(--surface-2);border-radius:var(--r-sm);padding:10px 12px;">
|
||||
<div style="font-size:11px;color:var(--text-3);font-weight:600;text-transform:uppercase;margin-bottom:4px;">Traffic</div>
|
||||
<div style="font-size:12px;color:var(--text-2);margin-top:2px;">↓ {{.TrafficIn}}</div>
|
||||
<div style="font-size:12px;color:var(--text-2);margin-top:2px;">↑ {{.TrafficOut}}</div>
|
||||
</div>
|
||||
{{end}}
|
||||
{{if .MemTotal}}
|
||||
<div style="background:var(--surface-2);border-radius:var(--r-sm);padding:10px 12px;">
|
||||
<div style="font-size:11px;color:var(--text-3);font-weight:600;text-transform:uppercase;margin-bottom:4px;">RAM</div>
|
||||
<div style="font-size:13px;color:var(--text-1);">{{.MemUsed}} / {{.MemTotal}}</div>
|
||||
<div style="background:var(--surface-3);border-radius:3px;height:5px;margin-top:5px;overflow:hidden;">
|
||||
<div style="height:100%;border-radius:3px;width:{{.MemPct}}%;background:{{if gt .MemPct 85}}var(--danger){{else if gt .MemPct 70}}var(--warning){{else}}var(--teal){{end}};"></div>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
{{if .CpuLoad}}
|
||||
<div style="background:var(--surface-2);border-radius:var(--r-sm);padding:10px 12px;">
|
||||
<div style="font-size:11px;color:var(--text-3);font-weight:600;text-transform:uppercase;margin-bottom:4px;">CPU</div>
|
||||
<div style="font-size:20px;font-weight:600;color:var(--text-1);">{{.CpuLoad}}<span style="font-size:13px;font-weight:400;color:var(--text-3);">%</span></div>
|
||||
<div style="background:var(--surface-3);border-radius:3px;height:5px;margin-top:5px;overflow:hidden;">
|
||||
<div style="height:100%;border-radius:3px;width:{{.CpuLoad}}%;background:var(--teal);"></div>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
{{if eq .Target.Type "printer"}}
|
||||
<div style="margin-top:10px;padding-top:10px;border-top:1px solid var(--border);">
|
||||
{{if .PrinterStatus}}
|
||||
<div style="display:inline-flex;align-items:center;gap:5px;margin-bottom:12px;background:{{if eq .PrinterStatus "Druckt"}}rgba(0,132,135,.1){{else}}var(--surface-2){{end}};padding:4px 10px;border-radius:20px;">
|
||||
<span style="width:6px;height:6px;border-radius:50%;background:{{if eq .PrinterStatus "Druckt"}}var(--teal){{else}}var(--success){{end}};display:inline-block;"></span>
|
||||
<span style="font-size:12px;font-weight:500;color:var(--text-2);">{{.PrinterStatus}}</span>
|
||||
</div>
|
||||
{{end}}
|
||||
{{if .TonerLevel}}
|
||||
<div style="margin-bottom:4px;display:flex;justify-content:space-between;align-items:baseline;">
|
||||
<span style="font-size:12px;font-weight:600;color:var(--text-2);">Toner</span>
|
||||
<span style="font-size:13px;font-weight:600;color:{{if lt .TonerPct 20}}#ff3b30{{else if lt .TonerPct 40}}var(--warning){{else}}var(--text-1){{end}};">{{.TonerPct}}%</span>
|
||||
</div>
|
||||
<div style="background:var(--surface-3);border-radius:6px;height:10px;overflow:hidden;">
|
||||
<div style="height:100%;border-radius:6px;width:{{.TonerPct}}%;background:{{if lt .TonerPct 20}}#ff3b30{{else if lt .TonerPct 40}}#ff9500{{else}}var(--success){{end}};transition:width .4s;"></div>
|
||||
</div>
|
||||
{{if lt .TonerPct 20}}<div style="font-size:11px;color:#ff3b30;margin-top:5px;font-weight:500;">⚠ Toner bald leer — bitte nachbestellen</div>{{end}}
|
||||
{{end}}
|
||||
{{if .PageCount}}
|
||||
<div style="display:flex;align-items:center;gap:6px;margin-top:12px;padding-top:10px;border-top:1px solid var(--border);">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px;color:var(--text-3);flex-shrink:0;"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect x="6" y="14" width="12" height="8"/></svg>
|
||||
<span style="font-size:12px;color:var(--text-3);">Gesamtseiten: <strong style="color:var(--text-2);">{{.PageCount}}</strong></span>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
{{else}}
|
||||
<div style="color:var(--text-3);font-size:13px;text-align:center;padding:16px 0;">Noch kein Scan — läuft alle {{.Interval}}.</div>
|
||||
{{end}}
|
||||
</div>
|
||||
|
||||
<!-- Card Footer -->
|
||||
<div style="padding:8px 20px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;">
|
||||
<span style="font-size:11px;color:var(--text-3);">Community: <code style="background:var(--surface-3);padding:1px 5px;border-radius:3px;">{{.Target.Community}}</code> · {{.Target.Version}}</span>
|
||||
<div style="display:flex;gap:8px;align-items:center;">
|
||||
{{if .HasData}}
|
||||
<button onclick="openDetail('modal-{{.Target.ID}}')" class="btn" style="font-size:11px;padding:4px 10px;height:auto;">
|
||||
Details
|
||||
</button>
|
||||
{{end}}
|
||||
<span class="badge badge-gray" style="font-size:11px;text-transform:capitalize;">{{.Target.Type}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Detail Modal -->
|
||||
{{if .HasData}}
|
||||
<div id="modal-{{.Target.ID}}" style="display:none;position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.45);backdrop-filter:blur(2px);" onclick="if(event.target===this)closeDetail('modal-{{.Target.ID}}')">
|
||||
<div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(560px,95vw);max-height:85vh;overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:0 8px 40px rgba(0,0,0,.25);">
|
||||
<div style="padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--surface);z-index:1;">
|
||||
<div>
|
||||
<div style="font-weight:600;font-size:15px;">{{.Target.Name}}</div>
|
||||
<div style="font-size:12px;color:var(--text-3);font-family:monospace;margin-top:2px;">{{.Target.IP}} · {{.Target.Type}}</div>
|
||||
</div>
|
||||
<button onclick="closeDetail('modal-{{.Target.ID}}')" class="icon-btn" style="color:var(--text-3);">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:18px;height:18px;"><path d="M18 6 6 18M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div style="padding:20px 22px;">
|
||||
<table style="width:100%;border-collapse:collapse;font-size:13px;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="text-align:left;font-size:11px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;padding:0 0 10px;border-bottom:1px solid var(--border);width:40%;">Feld</th>
|
||||
<th style="text-align:left;font-size:11px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;padding:0 0 10px 16px;border-bottom:1px solid var(--border);">Wert</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{range $k, $v := .AllValues}}
|
||||
<tr>
|
||||
<td style="padding:9px 0;border-bottom:1px solid var(--border);color:var(--text-3);font-size:12px;vertical-align:top;font-weight:500;">{{$k}}</td>
|
||||
<td style="padding:9px 0 9px 16px;border-bottom:1px solid var(--border);color:var(--text-1);font-family:{{if or (eq $k "sysDescr") (eq $k "sysName") (eq $k "sysLocation") (eq $k "sysContact")}}inherit{{else}}monospace{{end}};font-size:13px;word-break:break-all;">{{$v}}</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
{{end}}
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="card" style="margin-bottom:24px;">
|
||||
<div style="text-align:center;padding:48px;color:var(--text-3);">
|
||||
<div style="font-size:32px;margin-bottom:8px;">📡</div>
|
||||
<div style="font-weight:600;margin-bottom:4px;">Noch keine SNMP-Geräte</div>
|
||||
<div style="font-size:13px;">Füge unten dein erstes Gerät hinzu.</div>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
<!-- Add Target Form -->
|
||||
<div class="card">
|
||||
<div style="padding:16px 20px;border-bottom:1px solid var(--border);">
|
||||
<div style="font-weight:600;font-size:14px;">SNMP-Gerät hinzufügen</div>
|
||||
<div style="font-size:12px;color:var(--text-3);margin-top:2px;">Drucker (Kyocera), Switches, USVs — Community string "public" ist Standard.</div>
|
||||
</div>
|
||||
<form method="POST" action="/snmp/targets/add" style="padding:16px 20px;">
|
||||
<div style="display:grid;grid-template-columns:1fr 160px 110px 110px 110px;gap:12px;margin-bottom:14px;">
|
||||
<div>
|
||||
<label class="input-label">Name</label>
|
||||
<input class="input" type="text" name="name" placeholder="z.B. Kyocera EcoSys" required>
|
||||
</div>
|
||||
<div>
|
||||
<label class="input-label">IP-Adresse</label>
|
||||
<input class="input" type="text" name="ip" placeholder="192.168.0.50" required>
|
||||
</div>
|
||||
<div>
|
||||
<label class="input-label">Community</label>
|
||||
<input class="input" type="text" name="community" placeholder="public" value="public">
|
||||
</div>
|
||||
<div>
|
||||
<label class="input-label">Version</label>
|
||||
<select class="select" name="version" style="width:100%;">
|
||||
<option value="v2c">SNMPv2c</option>
|
||||
<option value="v1">SNMPv1</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="input-label">Typ</label>
|
||||
<select class="select" name="type" style="width:100%;">
|
||||
<option value="generic">Allgemein</option>
|
||||
<option value="printer">Drucker</option>
|
||||
<option value="switch">Switch</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;justify-content:flex-end;">
|
||||
<button type="submit" class="btn btn-primary">+ Gerät hinzufügen</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function openDetail(id) { document.getElementById(id).style.display = 'block'; document.body.style.overflow = 'hidden'; }
|
||||
function closeDetail(id) { document.getElementById(id).style.display = 'none'; document.body.style.overflow = ''; }
|
||||
document.addEventListener('keydown', function(e) { if(e.key === 'Escape') { document.querySelectorAll('[id^="modal-"]').forEach(m => { m.style.display='none'; }); document.body.style.overflow=''; } });
|
||||
</script>
|
||||
{{end}}
|
||||
Reference in New Issue
Block a user