Add beginner guidance to NetWorker

src/main/resources/static/css/networker-guide.css

@@ -0,0 +1 @@
+.nw-guide{margin:1rem 0;border:1px solid color-mix(in srgb,var(--nw-accent) 62%,var(--border));border-radius:10px;padding:1rem 1.1rem;background:color-mix(in srgb,#0b2540 74%,var(--surface));box-shadow:0 0 18px color-mix(in srgb,var(--nw-accent) 12%,transparent)}.nw-guide h2{margin:.35rem 0 .5rem;color:var(--heading);font-size:1rem}.nw-guide p,.nw-guide li{color:var(--muted);font-size:.82rem;line-height:1.5}.nw-guide ol{margin:.45rem 0;padding-left:1.25rem}.nw-guide strong{color:var(--text)}.nw-guide code{color:var(--nw-accent);font:700 .78rem "Courier New",monospace}.nw-guide details{margin-top:.7rem;border-top:1px solid var(--border);padding-top:.6rem}.nw-guide summary{color:var(--nw-accent);cursor:pointer;font:700 .72rem "Courier New",monospace;letter-spacing:.05em}.nw-guide dl{display:grid;grid-template-columns:max-content 1fr;gap:.35rem .75rem;margin:.65rem 0 0}.nw-guide dt{color:var(--nw-accent);font-weight:700}.nw-guide dd{margin:0;color:var(--muted);font-size:.8rem}

src/main/resources/static/js/networker-guide.js

@@ -0,0 +1,53 @@
+(function () {
+  'use strict';
+
+  const view = document.getElementById('nwView');
+  if (!view) return;
+
+  const glossary = `<details><summary>MINI-LEXIKON ÖFFNEN</summary><dl><dt>IP-Adresse</dt><dd>Die Hausnummer eines Geräts im Netzwerk.</dd><dt>Präfix /24</dt><dd>Die ersten drei Zahlenblöcke gehören zum Netz. Bei <code>192.168.10.x/24</code> sind die üblichen Hostadressen <code>.1</code> bis <code>.254</code>.</dd><dt>Gateway</dt><dd>Die Tür aus dem eigenen Netz in ein anderes Netz – meistens die Router-Adresse.</dd><dt>Ping</dt><dd>Ein kurzer Erreichbarkeitstest: Kommt ein Paket vom Startgerät am Ziel an?</dd></dl></details>`;
+
+  function guide(title, body) {
+    const box = document.createElement('aside');
+    box.className = 'nw-guide';
+    box.setAttribute('aria-label', 'NetWorker Lernhilfe');
+    box.innerHTML = `<span class="nw-kicker">WAS MACHE ICH JETZT?</span><h2>${title}</h2>${body}${glossary}`;
+    return box;
+  }
+
+  function renderGuide() {
+    if (view.querySelector('.nw-guide')) return;
+    const hero = view.querySelector('.nw-hero');
+    const briefing = view.querySelector('.nw-brief');
+    const levelHead = view.querySelector('.nw-level-head');
+
+    if (hero) {
+      hero.after(guide('Starte ganz links: Welt 1.', `<p>Du musst kein Netzwerk-Profi sein. Jede Aufgabe zeigt dir nur die Werte, die du ändern darfst. Lies den Netzplan von links nach rechts und teste danach den Paketweg.</p><ol><li><strong>Welt 1:</strong> Geräte im selben Netz verbinden.</li><li><strong>Welt 2:</strong> den Router als Ausgang benutzen.</li><li><strong>Welt 3:</strong> den Weg über zwei Router eintragen.</li></ol><p><strong>Tipp:</strong> Beginne mit „Ein Netz für alle“. Eine falsche Eingabe kann nichts kaputt machen; nach dem Test erklärt die Diagnose, wo das Paket stehen bleibt.</p>`));
+      return;
+    }
+
+    if (briefing) {
+      briefing.querySelector('.nw-rules')?.before(guide('So läuft eine Welt ab.', `<ol><li>Klicke auf <strong>Kalibrierung starten</strong>.</li><li>Ändere nur die Felder im rechten Konfigurationsbereich.</li><li>Klicke auf <strong>Pings testen</strong> und lies die Rückmeldung unter „Ping-Ziele“.</li></ol><p>Du hast pro Level drei Versuche. „Lösung anzeigen“ zeigt den korrekten Plan und bringt dich weiter – ideal, wenn du danach verstehen willst, warum er funktioniert.</p>`));
+      return;
+    }
+
+    if (!levelHead) return;
+    const type = levelHead.querySelector('.nw-kicker')?.textContent || '';
+    let title = 'Erst prüfen, dann ändern.';
+    let body = `<p>Rechts stehen nur die Werte, die in diesem Level verändert werden dürfen. Klicke danach auf <strong>Pings testen</strong>. Die Diagnose sagt dir konkret, was der Paketweg noch blockiert.</p>`;
+
+    if (type.includes('ASSIGN')) {
+      title = 'Geräte in dasselbe Netz bringen.';
+      body = `<p>Vergleiche die IP-Adresse und das Präfix des PCs mit dem Zielgerät. Bei <code>192.168.10.20/24</code> braucht der PC ebenfalls <code>192.168.10</code> am Anfang und das Präfix <code>24</code> – nur die letzte Zahl muss frei und zwischen <code>1</code> und <code>254</code> sein.</p><p><strong>Beispiel:</strong> Zum Server <code>192.168.10.20/24</code> passt etwa <code>192.168.10.10/24</code>.</p>`;
+    } else if (type.includes('FIX')) {
+      title = 'Einen fehlerhaften Wert reparieren.';
+      body = `<p>Ändere nur das Feld rechts, das bearbeitbar ist. Achte auf zwei typische Fallen: Eine Adresse darf im gleichen Netz nicht doppelt vorkommen und bei <code>/24</code> sind <code>.0</code> (Netzadresse) sowie <code>.255</code> (Broadcast) keine Geräteadressen.</p><p>Danach testen – die Diagnose verrät dir, ob der Fehler schon behoben ist.</p>`;
+    } else if (type.includes('ROUTE')) {
+      title = 'Dem Router den Weg zum Ziel zeigen.';
+      body = `<p>PC und Server liegen in verschiedenen Netzen. Der erste Router braucht deshalb eine Route zum <strong>Zielnetz</strong> des Servers und muss sie an den <strong>nächsten Router</strong> weitergeben. Nimm beim Zielnetz die ersten drei Blöcke der Server-IP und ergänze bei <code>/24</code> eine <code>.0</code>.</p><p><strong>Beispiel:</strong> Für <code>10.10.2.20/24</code> lautet das Zielnetz <code>10.10.2.0/24</code>.</p>`;
+    }
+    levelHead.after(guide(title, body));
+  }
+
+  new MutationObserver(renderGuide).observe(view, {childList: true});
+  renderGuide();
+})();

src/main/resources/templates/networker.html

@@ -1 +1 @@
-<!doctype html><html lang="de" data-theme="dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>NetWorker · Mindflux</title><link rel="stylesheet" href="/css/theme.css"><link rel="stylesheet" href="/css/networker.css?v=1"><script src="/js/theme.js"></script></head><body><main class="nw-app"><header class="nw-top"><div style="display:flex;align-items:center;gap:.65rem"><a href="/dashboard" class="nw-back">← Dashboard</a><a href="/networker" class="nw-btn">NETZPLÄNE</a></div><div class="nw-brand"><b>NetWorker</b><span>NETZPLAN · DIAGNOSE</span></div><span class="mf-a11y-host"></span></header><section id="nwView" class="nw-view"><div class="nw-loading">NETZWERKPLÄNE WERDEN KALIBRIERT …</div></section></main><script src="/js/networker.js?v=1"></script></body></html>
+<!doctype html><html lang="de" data-theme="dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>NetWorker · Mindflux</title><link rel="stylesheet" href="/css/theme.css"><link rel="stylesheet" href="/css/networker.css?v=1"><link rel="stylesheet" href="/css/networker-guide.css?v=1"><script src="/js/theme.js"></script></head><body><main class="nw-app"><header class="nw-top"><div style="display:flex;align-items:center;gap:.65rem"><a href="/dashboard" class="nw-back">← Dashboard</a><a href="/networker" class="nw-btn">NETZPLÄNE</a></div><div class="nw-brand"><b>NetWorker</b><span>NETZPLAN · DIAGNOSE</span></div><span class="mf-a11y-host"></span></header><section id="nwView" class="nw-view"><div class="nw-loading">NETZWERKPLÄNE WERDEN KALIBRIERT …</div></section></main><script src="/js/networker.js?v=1"></script><script src="/js/networker-guide.js?v=1"></script></body></html>