From 27c409bfb3b38f135f7f27e5fc3319f808f8f9d4 Mon Sep 17 00:00:00 2001 From: AliceDarkest Date: Mon, 13 Jul 2026 22:52:00 +0200 Subject: [PATCH] Add beginner guidance to NetWorker --- .../resources/static/css/networker-guide.css | 1 + .../resources/static/js/networker-guide.js | 53 +++++++++++++++++++ src/main/resources/templates/networker.html | 2 +- 3 files changed, 55 insertions(+), 1 deletion(-) create mode 100644 src/main/resources/static/css/networker-guide.css create mode 100644 src/main/resources/static/js/networker-guide.js diff --git a/src/main/resources/static/css/networker-guide.css b/src/main/resources/static/css/networker-guide.css new file mode 100644 index 0000000..cbcd82a --- /dev/null +++ b/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} diff --git a/src/main/resources/static/js/networker-guide.js b/src/main/resources/static/js/networker-guide.js new file mode 100644 index 0000000..782b794 --- /dev/null +++ b/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 = `
MINI-LEXIKON ÖFFNEN
IP-Adresse
Die Hausnummer eines Geräts im Netzwerk.
Präfix /24
Die ersten drei Zahlenblöcke gehören zum Netz. Bei 192.168.10.x/24 sind die üblichen Hostadressen .1 bis .254.
Gateway
Die Tür aus dem eigenen Netz in ein anderes Netz – meistens die Router-Adresse.
Ping
Ein kurzer Erreichbarkeitstest: Kommt ein Paket vom Startgerät am Ziel an?
`; + + function guide(title, body) { + const box = document.createElement('aside'); + box.className = 'nw-guide'; + box.setAttribute('aria-label', 'NetWorker Lernhilfe'); + box.innerHTML = `WAS MACHE ICH JETZT?

${title}

${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.', `

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.

  1. Welt 1: Geräte im selben Netz verbinden.
  2. Welt 2: den Router als Ausgang benutzen.
  3. Welt 3: den Weg über zwei Router eintragen.

Tipp: 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.

`)); + return; + } + + if (briefing) { + briefing.querySelector('.nw-rules')?.before(guide('So läuft eine Welt ab.', `
  1. Klicke auf Kalibrierung starten.
  2. Ändere nur die Felder im rechten Konfigurationsbereich.
  3. Klicke auf Pings testen und lies die Rückmeldung unter „Ping-Ziele“.

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.

`)); + return; + } + + if (!levelHead) return; + const type = levelHead.querySelector('.nw-kicker')?.textContent || ''; + let title = 'Erst prüfen, dann ändern.'; + let body = `

Rechts stehen nur die Werte, die in diesem Level verändert werden dürfen. Klicke danach auf Pings testen. Die Diagnose sagt dir konkret, was der Paketweg noch blockiert.

`; + + if (type.includes('ASSIGN')) { + title = 'Geräte in dasselbe Netz bringen.'; + body = `

Vergleiche die IP-Adresse und das Präfix des PCs mit dem Zielgerät. Bei 192.168.10.20/24 braucht der PC ebenfalls 192.168.10 am Anfang und das Präfix 24 – nur die letzte Zahl muss frei und zwischen 1 und 254 sein.

Beispiel: Zum Server 192.168.10.20/24 passt etwa 192.168.10.10/24.

`; + } else if (type.includes('FIX')) { + title = 'Einen fehlerhaften Wert reparieren.'; + body = `

Ändere nur das Feld rechts, das bearbeitbar ist. Achte auf zwei typische Fallen: Eine Adresse darf im gleichen Netz nicht doppelt vorkommen und bei /24 sind .0 (Netzadresse) sowie .255 (Broadcast) keine Geräteadressen.

Danach testen – die Diagnose verrät dir, ob der Fehler schon behoben ist.

`; + } else if (type.includes('ROUTE')) { + title = 'Dem Router den Weg zum Ziel zeigen.'; + body = `

PC und Server liegen in verschiedenen Netzen. Der erste Router braucht deshalb eine Route zum Zielnetz des Servers und muss sie an den nächsten Router weitergeben. Nimm beim Zielnetz die ersten drei Blöcke der Server-IP und ergänze bei /24 eine .0.

Beispiel: Für 10.10.2.20/24 lautet das Zielnetz 10.10.2.0/24.

`; + } + levelHead.after(guide(title, body)); + } + + new MutationObserver(renderGuide).observe(view, {childList: true}); + renderGuide(); +})(); diff --git a/src/main/resources/templates/networker.html b/src/main/resources/templates/networker.html index c6ab356..8efa2f4 100644 --- a/src/main/resources/templates/networker.html +++ b/src/main/resources/templates/networker.html @@ -1 +1 @@ -NetWorker · Mindflux
← DashboardNETZPLÄNE
NetWorkerNETZPLAN · DIAGNOSE
NETZWERKPLÄNE WERDEN KALIBRIERT …
+NetWorker · Mindflux
← DashboardNETZPLÄNE
NetWorkerNETZPLAN · DIAGNOSE
NETZWERKPLÄNE WERDEN KALIBRIERT …