/* =================================================================== Die Bereiche -- EINE Quelle für die ganze Anwendung. Zeichen, Farbton, Rolle und Ziel jedes Bereichs standen bis zum 01.09.2026 nur in start.js. Seit jede Unterseite Zeichen und Farbe ihrer Kachel trägt, brauchen sie auch die Kopfleisten -- und eine zweite, abgeschriebene Liste wäre der sichere Weg, dass "Aufgaben" irgendwann auf der Startseite gelb und auf der Aufgabenseite grün ist. Deshalb liegt beides jetzt hier und wird von start.js UND kopf.js benutzt. Wer eine Kachel ändert, ändert damit automatisch auch den Kopf der zugehörigen Seite. =================================================================== */ (() => { 'use strict'; /* ---------- Zeichen ------------------------------------------------------ Alle im selben Raster (24×24), alle nur aus Linien -- gefüllte Zeichen wirken neben Text wie Flecken. Eigene statt einer Fremdbibliothek: siebzehn Pfade sind kleiner als jede Schriftart und kosten keine zusätzliche Lieferkette. */ const ZEICHEN = { dashboard: ['M4.5 4.5h6v6h-6z', 'M13.5 4.5h6v4h-6z', 'M13.5 11.5h6v8h-6z', 'M4.5 13.5h6v6h-6z'], aufgaben: ['M4.5 5h4v14h-4z', 'M10 5h4v9h-4z', 'M15.5 5h4v11.5h-4z'], kalender: ['M4 6.5h16v13H4z', 'M4 10.5h16', 'M8.5 3.5v4', 'M15.5 3.5v4'], calls: ['M3.5 7h11v10h-11z', 'M14.5 11l6-3.5v9l-6-3.5z'], dateien: ['M3.5 6.5h5.5l2 2h9.5v11h-17z'], profil: ['M12 7a3.2 3.2 0 1 0 0 6.4A3.2 3.2 0 0 0 12 7z', 'M5.5 20c.7-3.3 3.3-5.3 6.5-5.3s5.8 2 6.5 5.3'], startcheck: ['M6 4.5h12v15H6z', 'M9.2 9.6l1.7 1.7 3.6-3.7', 'M9.2 15.2h5.6'], live: ['M12 10.2a1.8 1.8 0 1 0 0 3.6 1.8 1.8 0 0 0 0-3.6z', 'M8.2 8.2a5.4 5.4 0 0 0 0 7.6', 'M15.8 15.8a5.4 5.4 0 0 0 0-7.6', 'M5.4 5.4a9.4 9.4 0 0 0 0 13.2', 'M18.6 18.6a9.4 9.4 0 0 0 0-13.2'], content: ['M3.5 6h17v13h-17z', 'M3.5 10h17', 'M8 6l-1.4 4', 'M13 6l-1.4 4', 'M18 6l-1.4 4'], technik: ['M4 7.5h16', 'M4 12h16', 'M4 16.5h16', 'M9 7.5a1.4 1.4 0 1 0 0-.02z', 'M15 12a1.4 1.4 0 1 0 0-.02z', 'M7.5 16.5a1.4 1.4 0 1 0 0-.02z'], community: ['M9 8.6a2.7 2.7 0 1 0 0 5.4 2.7 2.7 0 0 0 0-5.4z', 'M3.5 19.5c.6-2.8 2.8-4.5 5.5-4.5s4.9 1.7 5.5 4.5', 'M16 8.8a2.4 2.4 0 1 1 1.6 4.3', 'M17 15.2c2 .5 3.3 2 3.7 4.3'], schutz: ['M12 3.6 5.6 6.3v5.1c0 3.8 2.6 7.2 6.4 8.4 3.8-1.2 6.4-4.6 6.4-8.4V6.3z', 'M9.4 11.8l1.9 1.9 3.4-3.6'], reports: ['M4 19.5h16', 'M7.5 16.5V9.5', 'M12 16.5V5.5', 'M16.5 16.5v-5'], personen: ['M14.4 6.2a4 4 0 1 0 0 8 4 4 0 0 0 0-8z', 'M11.6 12.2 4 19.8', 'M6.4 17.4l2 2', 'M8.6 15.2l2 2'], scouting: ['M3.5 5.5h17l-6.6 7.6v6.4l-3.8-2.1v-4.3z'], wissen: ['M4 5h6.4c.9 0 1.6.7 1.6 1.6V19c0-.9-.7-1.6-1.6-1.6H4z', 'M20 5h-6.4c-.9 0-1.6.7-1.6 1.6V19c0-.9.7-1.6 1.6-1.6H20z'], automation: ['M13.2 3.2 6 13.4h5.2l-.8 7.4 7.6-10.6h-5.2z'], }; /* ---------- Die Bereiche ------------------------------------------------- `rollen` steuert, wem ein Bereich überhaupt erscheint -- serverseitig wird es ohnehin noch einmal geprüft, das hier ist nur Höflichkeit. `ton` ist der Farbplatz 1..17 -- JEDE Kachel hat ihre eigene Farbe. Ein erster Versuch mit frei gewählten Farben ergab Paare mit einem Abstand von 1,4: praktisch dieselbe Farbe, das sieht nach Zufall aus statt nach Absicht. Deshalb sind Farben UND Zuordnung gerechnet, von tools/kachel-farben.mjs. Die Überlegung dahinter: Das Auge vergleicht nur, was nebeneinander liegt. Siebzehn Farben müssen sich also nicht alle voneinander unterscheiden, sondern nur von ihren Nachbarn im Raster -- und da sind es jetzt mindestens 105,9 Grad. Wer hier Kacheln umsortiert oder eine hinzufügt, ändert damit die Nachbarschaften. Dann gehört tools/kachel-farben.mjs neu gelaufen (dort die Liste NACHBARN anpassen), sonst stimmt der Abstand nicht mehr und niemand merkt es. */ const GRUPPEN = [ { name: 'Täglich', unter: 'Was du sowieso jeden Tag aufmachst', bereiche: [ { name: 'Dashboard', unter: 'Alle Creator auf einen Blick', zeichen: 'dashboard', ton: 3, gross: true, rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'uebersicht.html' }, { name: 'Aufgaben', unter: 'Offen, in Arbeit, Review', zeichen: 'aufgaben', ton: 9, rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'aufgaben.html' }, { name: 'Kalender', unter: 'Termine und Calls', zeichen: 'kalender', ton: 15, rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'kalender.html' }, { name: 'Calls & Protokolle', unter: 'Gespräche mit To-dos', zeichen: 'calls', ton: 8, rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'calls.html' }, { name: 'Dateien', unter: 'Ablage und Freigaben', zeichen: 'dateien', ton: 16, rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'dateien.html' }, ], }, { name: 'Rund um den Creator', unter: 'Die Betreuungsakte – Stand, Zahlen, Verlauf', bereiche: [ { name: 'Creator-Profile', unter: 'Ziele und 90-Tage-Plan', zeichen: 'profil', ton: 4, rollen: ['admin', 'manager', 'scout'], ziel: 'profil.html' }, { name: 'Mein Profil', unter: 'Deine Ziele und Pläne', zeichen: 'profil', ton: 4, rollen: ['creator'], ziel: 'profil.html' }, { name: 'Start-Check', unter: 'Erstanalyse, 16 Punkte', zeichen: 'startcheck', ton: 14, rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'startcheck.html' }, { name: 'LIVE-Analyse', unter: 'Vorher, während, danach', zeichen: 'live', ton: 6, rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'bereich.html?b=live' }, { name: 'Content-Planung', unter: 'Idee bis Upload', zeichen: 'content', ton: 10, rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'content.html' }, { name: 'Community', unter: 'Moderation und Konflikte', zeichen: 'community', ton: 5, rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'bereich.html?b=community' }, { name: 'Technik', unter: 'Setup, Fehler, Lösungen', zeichen: 'technik', ton: 11, rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'bereich.html?b=technik' }, { name: 'Schutz & Regeln', unter: 'Richtlinien und Vorfälle', zeichen: 'schutz', ton: 1, rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'bereich.html?b=schutz' }, { name: 'Reports & Review', unter: 'Woche und Entscheidung', zeichen: 'reports', ton: 13, rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'report.html' }, ], }, { name: 'Team & System', unter: 'Was den Laden am Laufen hält', /* Für einen Creator bleibt von dieser Gruppe genau eine Kachel übrig: die Wissens-Bibliothek. "Team & System" wäre dann eine Überschrift, die etwas verspricht, was gar nicht da ist -- und die klingt, als gäbe es dahinter noch einen Bereich, den er nicht sehen darf. Er liest stattdessen "Wissen", und das beschreibt genau, was dort steht. Der Untertitel wechselt mit. */ nameCreator: 'Wissen', unterCreator: 'Nachschlagen, wenn du etwas brauchst', bereiche: [ { name: 'Personen & Zugänge', unter: 'Rollen und Codes', zeichen: 'personen', ton: 7, rollen: ['admin', 'manager'], ziel: 'personen.html' }, { name: 'Scout-Pipeline', unter: 'Entdeckt bis übergeben', zeichen: 'scouting', ton: 12, rollen: ['admin', 'manager', 'scout'], ziel: 'scouting.html' }, { name: 'Wissens-Bibliothek', unter: 'Anleitungen und PDFs', zeichen: 'wissen', ton: 2, rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'wissen.html' }, { name: 'Automationen', unter: 'Was von allein passiert', zeichen: 'automation', ton: 17, rollen: ['admin', 'manager'], ziel: 'automation.html' }, ], }, ]; /* Ein Bereich anhand des Dateinamens finden. Die Bereichsseite (bereich.html?b=live) trägt ihren Bereich in der Adresse -- deshalb wird auch die Abfrage verglichen, nicht nur der Dateiname. */ function zuSeite(pfad, abfrage) { const datei = String(pfad).split('/').pop() || 'start.html'; const gesucht = datei + (abfrage || ''); let treffer = null; for (const g of GRUPPEN) { for (const b of g.bereiche) { if (b.ziel === gesucht) return b; /* Ohne Abfrage: der erste Bereich mit passendem Dateinamen. "Mein Profil" und "Creator-Profile" zeigen auf dieselbe Datei und teilen sich Zeichen und Ton -- da ist beides richtig. */ if (!treffer && b.ziel.split('?')[0] === datei) treffer = b; } } return treffer; } /* Ein SVG mit dem Zeichen eines Bereichs. Klasse frei wählbar, damit Kachel, Hinweiszeile und Seitenkopf dieselbe Form in unterschiedlicher Größe benutzen können. */ function zeichenBauen(name, klasse = 'kachel__svg') { const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); svg.setAttribute('viewBox', '0 0 24 24'); svg.setAttribute('aria-hidden', 'true'); svg.setAttribute('class', klasse); for (const d of (ZEICHEN[name] || [])) { const p = document.createElementNS('http://www.w3.org/2000/svg', 'path'); p.setAttribute('d', d); svg.append(p); } return svg; } window.Bereiche = { ZEICHEN, GRUPPEN, zuSeite, zeichenBauen }; })();