feat: initial commit

2026-05-19 14:53:36 +02:00
commit 7d34caf1a2
19 changed files with 1114 additions and 0 deletions
@@ -0,0 +1,191 @@
+:root {
+  --bg: #f5f8fb;
+  --panel: #ffffff;
+  --ink: #0b1f33;
+  --muted: #516173;
+  --line: #d2d9e2;
+  --ok: #16a34a;
+  --warn: #f59e0b;
+  --off: #94a3b8;
+  --router: #0ea5e9;
+  --switch: #f97316;
+  --ap: #22c55e;
+  --client: #6366f1;
+  --domain: #64748b;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
+  color: var(--ink);
+  background: radial-gradient(circle at top right, #eaf4ff, var(--bg) 55%);
+}
+
+header {
+  display: flex;
+  justify-content: space-between;
+  align-items: end;
+  gap: 1rem;
+  padding: 1.2rem 1.4rem;
+  border-bottom: 1px solid var(--line);
+}
+
+h1 {
+  margin: 0;
+  font-size: 1.35rem;
+}
+
+p {
+  margin: 0.25rem 0 0;
+  color: var(--muted);
+}
+
+.meta {
+  color: var(--muted);
+  font-size: 0.9rem;
+}
+
+main {
+  display: grid;
+  gap: 1rem;
+  padding: 1rem;
+  grid-template-columns: 2fr 1.2fr;
+  grid-template-areas:
+    "graph devices"
+    "graph events";
+}
+
+.panel {
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
+  padding: 0.8rem;
+}
+
+.graph-panel {
+  grid-area: graph;
+}
+
+.devices-panel {
+  grid-area: devices;
+}
+
+.events-panel {
+  grid-area: events;
+}
+
+.panel h2 {
+  margin: 0.2rem 0 0.6rem;
+  font-size: 1rem;
+}
+
+.panel-title-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+button {
+  border: 1px solid var(--line);
+  background: #f8fafc;
+  border-radius: 8px;
+  padding: 0.35rem 0.6rem;
+  cursor: pointer;
+}
+
+#graph {
+  width: 100%;
+  height: 640px;
+  border: 1px dashed var(--line);
+  border-radius: 10px;
+  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
+}
+
+.table-wrap {
+  max-height: 310px;
+  overflow: auto;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.9rem;
+}
+
+th,
+td {
+  text-align: left;
+  border-bottom: 1px solid var(--line);
+  padding: 0.35rem;
+}
+
+.status-pill {
+  display: inline-block;
+  border-radius: 999px;
+  padding: 0.15rem 0.55rem;
+  font-size: 0.78rem;
+  color: #fff;
+}
+
+.status-online {
+  background: var(--ok);
+}
+
+.status-offline {
+  background: var(--off);
+}
+
+#eventList {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  max-height: 260px;
+  overflow: auto;
+  font-size: 0.9rem;
+}
+
+#eventList li {
+  border-bottom: 1px solid var(--line);
+  padding: 0.42rem 0;
+  color: var(--muted);
+}
+
+.node-label {
+  font-size: 12px;
+  font-weight: 600;
+  fill: #0f172a;
+}
+
+.node {
+  stroke: #1e293b;
+  stroke-width: 1.2;
+}
+
+.edge {
+  stroke: #94a3b8;
+  stroke-width: 1.2;
+}
+
+.edge-dns {
+  stroke-dasharray: 4 3;
+  opacity: 0.65;
+}
+
+@media (max-width: 1200px) {
+  main {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "graph"
+      "devices"
+      "events";
+  }
+
+  #graph {
+    height: 520px;
+  }
+}