initial, vibe-coded version, mostly frontend
This commit is contained in:
Michael Hoennig
+61
@@ -0,0 +1,61 @@
|
|||||||
|
# === Betriebssystem ===
|
||||||
|
.DS_Store
|
||||||
|
Thumbs.db
|
||||||
|
Desktop.ini
|
||||||
|
|
||||||
|
# === IntelliJ IDEA / JetBrains (D13) ===
|
||||||
|
# Projektdateien lokal halten; geteilte Einstellungen ggf. gezielt wieder einchecken.
|
||||||
|
.idea/
|
||||||
|
*.iml
|
||||||
|
*.ipr
|
||||||
|
*.iws
|
||||||
|
out/
|
||||||
|
|
||||||
|
# === Editoren ===
|
||||||
|
.vscode/
|
||||||
|
*.swp
|
||||||
|
*~
|
||||||
|
|
||||||
|
# === Backend: Gradle / Kotlin / JVM (D13) ===
|
||||||
|
backend/.gradle/
|
||||||
|
backend/build/
|
||||||
|
backend/**/build/
|
||||||
|
!backend/**/src/**/build/
|
||||||
|
.gradle/
|
||||||
|
build/
|
||||||
|
!src/**/build/
|
||||||
|
# Gradle-Wrapper einchecken, aber lokale Overrides ignorieren
|
||||||
|
!gradle/wrapper/gradle-wrapper.jar
|
||||||
|
!gradle/wrapper/gradle-wrapper.properties
|
||||||
|
gradle-app.setting
|
||||||
|
|
||||||
|
# Spring Boot / lokale Laufzeit
|
||||||
|
*.log
|
||||||
|
logs/
|
||||||
|
application-local.properties
|
||||||
|
application-local.yml
|
||||||
|
application-local.yaml
|
||||||
|
|
||||||
|
# === Java-Artefakte ===
|
||||||
|
*.class
|
||||||
|
*.jar
|
||||||
|
*.war
|
||||||
|
*.ear
|
||||||
|
hs_err_pid*
|
||||||
|
replay_pid*
|
||||||
|
!gradle-wrapper.jar
|
||||||
|
|
||||||
|
# === Frontend (Vanilla HTML/CSS/JS, D11) ===
|
||||||
|
# Derzeit build-frei; falls später Tooling dazukommt:
|
||||||
|
frontend/node_modules/
|
||||||
|
frontend/dist/
|
||||||
|
|
||||||
|
# === Geheimnisse / lokale Umgebung ===
|
||||||
|
.env
|
||||||
|
.env.local
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# === Temporäres ===
|
||||||
|
tmp/
|
||||||
|
*.tmp
|
||||||
|
*.bak
|
||||||
@@ -0,0 +1,25 @@
|
|||||||
|
# Werkbaum
|
||||||
|
|
||||||
|
Monorepo für Werkbaum: eine textuelle WBS-Notation mit Und/Oder-Zerlegung
|
||||||
|
(„all of" nebeneinander, „any of" untereinander) samt Editor und geplantem
|
||||||
|
Integrations-Backend.
|
||||||
|
|
||||||
|
## Struktur
|
||||||
|
- `frontend/` — Editor (Vanilla HTML/CSS/JS). Eigene Regeln: frontend/CLAUDE.md
|
||||||
|
- `backend/` — Kotlin/Spring-Boot-Anwendung (Taiga-Integration, Persistenz).
|
||||||
|
Eigene Regeln: backend/CLAUDE.md
|
||||||
|
- `docs/` — Projektdokumente · `brand/` — Marke (brand/BRAND.md)
|
||||||
|
|
||||||
|
## Verbindliche Referenzen
|
||||||
|
- Sprachdefinition: @docs/SPEC.md — die Notation ist der gemeinsame Vertrag
|
||||||
|
von Frontend und Backend. Syntaxänderungen: SPEC **zuerst**, dann Code.
|
||||||
|
- Entscheidungen: @docs/DECISIONS.md — respektieren; Abweichungen als neuen
|
||||||
|
Eintrag begründen, alte Einträge nie löschen. Besonders D13 (Backend-Stack)
|
||||||
|
und D14 (Parser-Hoheit) beachten.
|
||||||
|
- Ziele: docs/ROADMAP.md · Offene Arbeit: docs/TASKS.md (Checkboxen pflegen).
|
||||||
|
|
||||||
|
## Querschnitts-Konventionen
|
||||||
|
- UI-Texte und Doku auf Deutsch.
|
||||||
|
- Keine neuen Laufzeit-Abhängigkeiten ohne Rückfrage (gilt in beiden Teilen).
|
||||||
|
- Der Notationstext ist das führende Datenformat; kein Teil erfindet ein
|
||||||
|
eigenes Speicherformat für die Struktur.
|
||||||
@@ -0,0 +1,44 @@
|
|||||||
|
<p align="left">
|
||||||
|
<img src="brand/logo.svg" width="72" alt="Werkbaum-Logo">
|
||||||
|
</p>
|
||||||
|
|
||||||
|
# Werkbaum
|
||||||
|
|
||||||
|
Eine textuelle, Markdown-artige Notation für Projektstrukturpläne
|
||||||
|
(Work Breakdown Structure) mit Und/Oder-Zerlegung — und ein Live-Editor,
|
||||||
|
der sie als Diagramm rendert.
|
||||||
|
|
||||||
|
```
|
||||||
|
[~] Werkbaum (XL) https://wiki.example.de/relaunch
|
||||||
|
- [~] Dokumentenspeicher
|
||||||
|
| [x] Textdatei mit Copy+Paste im Frontend (S)
|
||||||
|
- [x] Parser
|
||||||
|
- [x] Texteingabefeld im Frontend
|
||||||
|
| [ ] Backend
|
||||||
|
- [~] Darstellung/Rendern (XL)
|
||||||
|
- [/] H (S) @anna
|
||||||
|
- [ ] CMS-Anbindung (M)
|
||||||
|
| [ ] WordPress
|
||||||
|
| [?] Headless CMS
|
||||||
|
```
|
||||||
|
|
||||||
|
`-` = Pflicht-Teilpaket (all of, im Diagramm nebeneinander) ·
|
||||||
|
`|` = Alternative (any of, untereinander) · `[…]` = Status ·
|
||||||
|
`(M)` = T-Shirt-Aufwand · `@name` = Zuständigkeit · `%%` = Kommentar.
|
||||||
|
|
||||||
|
## Nutzung
|
||||||
|
|
||||||
|
`frontend/index.html` im Browser öffnen — links Text bearbeiten, rechts entsteht das
|
||||||
|
Diagramm live. Toggles: transponierte (schmale) Darstellung, verworfene
|
||||||
|
Elemente einblenden.
|
||||||
|
|
||||||
|
## Projektdokumente
|
||||||
|
|
||||||
|
- `frontend/` — Editor · `backend/` — Kotlin/Spring (Gerüst folgt, siehe backend/README.md)
|
||||||
|
- `docs/SPEC.md` — verbindliche Sprachdefinition
|
||||||
|
- `docs/DECISIONS.md` — Design-Entscheidungen mit Begründung
|
||||||
|
- `docs/ROADMAP.md` — Mermaid-Plugin, Taiga-Integration, Tenzu
|
||||||
|
- `docs/TASKS.md` — offene Aufgaben (Checkboxen)
|
||||||
|
- `docs/brand/BRAND.md` — Logo, Wortbild, Anwendungsregeln
|
||||||
|
- `docs/design/` — Design-Herleitung der Marke
|
||||||
|
- `CLAUDE.md` — Projektkontext für Claude Code
|
||||||
@@ -0,0 +1,26 @@
|
|||||||
|
# Werkbaum · Backend
|
||||||
|
|
||||||
|
Kotlin/Spring-Boot-Anwendung. Aufgaben: Persistenz der Notationstexte,
|
||||||
|
Taiga-Integration (REST-API, `#ref`-Auflösung, Status-Sync), später
|
||||||
|
Tenzu-Adapter. Noch nicht bootstrapped — siehe README.md hier.
|
||||||
|
|
||||||
|
## Konventionen
|
||||||
|
- Kotlin, Spring Boot, Gradle (Kotlin DSL), JDK 21.
|
||||||
|
- Paketwurzel `de.werkbaum`; Schichten: `api` (Controller/DTOs),
|
||||||
|
`domain`, `integration.taiga` (Client, Mapping), `persistence`.
|
||||||
|
- Tests mit JUnit 5 + Kotest-Assertions; Taiga-Client gegen
|
||||||
|
aufgezeichnete Antworten (WireMock), nie gegen Live-Instanzen.
|
||||||
|
- Konfiguration über `application.yml` + Umgebungsvariablen;
|
||||||
|
keine Zugangsdaten im Repository.
|
||||||
|
|
||||||
|
## Wichtig (D14 — Parser-Hoheit)
|
||||||
|
Das Backend parst die Notation **nicht**. Es speichert den Text als Ganzes
|
||||||
|
und arbeitet mit expliziten Metadaten. Sollte Backend-Parsen doch nötig
|
||||||
|
werden: zuerst DECISIONS ergänzen, dann gegen die gemeinsamen Fixtures aus
|
||||||
|
docs/SPEC.md §10 testen — niemals eine zweite, abweichende Grammatik pflegen.
|
||||||
|
|
||||||
|
## Taiga-Mapping (Vorgabe aus docs/ROADMAP.md)
|
||||||
|
- `#123` referenziert Epic/User Story/Task/Issue; Auflösung liefert Titel,
|
||||||
|
URL, Status. Status-Mapping Taiga-Workflow → Notation konfigurierbar
|
||||||
|
(Default: „New"→`[ ]`, „In progress"→`[~]`, „Ready for test"→`[/]`,
|
||||||
|
„Done"→`[x]`, „Archived"→`[^]`).
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
# Werkbaum Backend
|
||||||
|
|
||||||
|
Noch nicht bootstrapped. Vorgesehener Weg:
|
||||||
|
|
||||||
|
1. Gerüst über https://start.spring.io erzeugen: Kotlin · Gradle (Kotlin DSL) ·
|
||||||
|
JDK 21 · Abhängigkeiten: Spring Web, Spring Data JPA, Validation.
|
||||||
|
2. Inhalt dieses Ordners (CLAUDE.md, README.md) beibehalten, Gerüst
|
||||||
|
hineinlegen, Paketwurzel `de.werkbaum`.
|
||||||
|
3. Konventionen: siehe CLAUDE.md in diesem Ordner.
|
||||||
@@ -0,0 +1,85 @@
|
|||||||
|
# Entscheidungen (ADR-Kurzform)
|
||||||
|
|
||||||
|
Festgehaltene Design-Entscheidungen samt Begründung. Bei Änderungen: Eintrag
|
||||||
|
ergänzen, nicht löschen.
|
||||||
|
|
||||||
|
## D1 — `|` für Oder-Zerlegung, `-` für Und-Zerlegung
|
||||||
|
`|` bedeutet in Regex und BNF-Grammatiken bereits „oder“ und ist damit
|
||||||
|
selbsterklärend. `-` ist das gewohnte Markdown-Listenzeichen für „normale“
|
||||||
|
Teilpakete. Das Gate steckt im Aufzählungszeichen der Kinder, nicht in einer
|
||||||
|
Annotation am Parent — lokal lesbar, trivial parsebar.
|
||||||
|
|
||||||
|
## D2 — Status als erweiterte Markdown-Task-Checkbox
|
||||||
|
GitHub-Markdown kennt `[ ]`/`[x]`; die Erweiterung auf `[?] [~] [/] [^] [-]`
|
||||||
|
wirkt sofort vertraut. Mnemonik: `?` vage, leeres Kästchen = todo, `~` gängige
|
||||||
|
In-progress-Konvention, `/` = halbes `x`, `x` = erledigt, `^` = „nach oben
|
||||||
|
deployed“, `-` = durchgestrichen.
|
||||||
|
|
||||||
|
## D3 — Begriff „Durchstich“ für den Zwischenstatus
|
||||||
|
Zustand zwischen „in Arbeit“ und „fertig“: durchgängig funktionsfähig und
|
||||||
|
vorführbar, Feinarbeiten offen. „Durchstich“ ist als Fachbegriff (Tunnelbau,
|
||||||
|
End-to-End-Slice in der Softwarearchitektur) etabliert. Verworfene
|
||||||
|
Alternativen: „Feinschliff“, „Richtfest“, „vorführbereit“, „Beta“.
|
||||||
|
|
||||||
|
## D4 — Begriff „verworfen“ statt „gestrichen“
|
||||||
|
Beschreibt die bewusste Entscheidung gegen eine Option — besonders passend
|
||||||
|
für Any-of-Alternativen. Default ausgeblendet, Toggle „verworfene einblenden“.
|
||||||
|
|
||||||
|
## D5 — Farb-Logik folgt dem Risiko, nicht dem Fortschritt
|
||||||
|
Rosé = Kosten investiert, Risiko hoch (in Arbeit). Pastellgelb = läuft,
|
||||||
|
Restrisiko klein (Durchstich). Flieder = geplant (Absicht, nichts investiert,
|
||||||
|
zwischen Grau der Idee und Rosé der Arbeit). Ergebnis-Skala:
|
||||||
|
grau → flieder → rosé → gelb → grün → blau.
|
||||||
|
|
||||||
|
## D6 — Größe in Klammern, URL nackt, Personen mit `@`
|
||||||
|
`(M)` liest sich wie ein Kleidungsetikett. URLs werden ohne Link-Syntax
|
||||||
|
erkannt (einfach einfügbar); die URL wird **vor** den `@`-Tags extrahiert,
|
||||||
|
damit `https://user@host/…` nicht kollidiert. `@` ist die universelle
|
||||||
|
Mention-Konvention (GitHub, Slack, Jira).
|
||||||
|
|
||||||
|
## D7 — `%%` als Kommentarzeichen
|
||||||
|
Mermaid-Konvention; hält den Weg zum Mermaid-Plugin frei. `//` scheidet wegen
|
||||||
|
URLs aus, `#` bleibt für Referenzen/Tags reserviert, `<!-- -->` ist zu sperrig.
|
||||||
|
|
||||||
|
## D8 — Untergliederungspflicht ab M sichtbar machen
|
||||||
|
Fehlende Zerlegung wird nicht nur gemeldet, sondern **gezeigt**: Geister-Knoten
|
||||||
|
„Untergliederung fehlt“ hängt genau dort, wo der Ast weitergehen müsste.
|
||||||
|
Verworfene Elemente sind ausgenommen. Werden alle Kinder eines M+-Elements
|
||||||
|
verworfen und ausgeblendet, erscheint der Platzhalter wieder (es braucht eine
|
||||||
|
neue Zerlegung) — gewollt.
|
||||||
|
|
||||||
|
## D9 — Transponierte Darstellung mit unterschiedlichen Austrittsseiten
|
||||||
|
Im vertikalen Modus tritt all of **rechts** aus dem Parent aus (LR-Baum),
|
||||||
|
any of **unten links**. Austrittsseite + Linienstil (durchgezogen/gestrichelt)
|
||||||
|
codieren das Gate doppelt; Beschriftungen werden nie rotiert.
|
||||||
|
|
||||||
|
## D10 — Abzweige zielen auf Knotenmitte, nicht Teilbaummitte
|
||||||
|
Feste Knoten-Zeilenhöhe macht die Anschlusshöhe deterministisch (23 px).
|
||||||
|
Behebt „ins Leere laufende“ Linien bei eingerückten Unterbäumen.
|
||||||
|
|
||||||
|
## D11 — Technologie: Vanilla HTML/CSS/JS, eine Datei als Prototyp
|
||||||
|
Keine Frameworks, kein Build-Zwang. Parser ~30 Zeilen, Renderer erzeugt
|
||||||
|
verschachtelte `ul.and`/`ul.or`; Linien via CSS-Pseudo-Elemente. Modularisierung
|
||||||
|
(Parser/Renderer/UI getrennt + Tests) ist der geplante nächste Schritt.
|
||||||
|
|
||||||
|
## D12 — Name „Werkbaum" und Marke aus der Notation
|
||||||
|
Name: „Werk" + „Baum" = wörtlich der WBS-Baum; funktioniert als npm-Paket,
|
||||||
|
CLI-Befehl und Mermaid-Schlüsselwort (`werkbaum`, kleingeschrieben in
|
||||||
|
Code-Kontexten). Verworfene Kandidaten: Astrein, undoder, Aufriss, Gabelung.
|
||||||
|
Marke: Miniatur des Diagramms (K2) in zwei Orientierungen analog zu den
|
||||||
|
Darstellungsmodi — Hochformat als Primärzeichen, transponiert als
|
||||||
|
Sekundärzeichen. Nur Tinte + Petrol; durchgezogen = und, gestrichelt = oder;
|
||||||
|
Pastelltöne bleiben Statusfarben. Details: brand/BRAND.md.
|
||||||
|
|
||||||
|
## D13 — Backend in Kotlin/Spring Boot, Monorepo-Struktur
|
||||||
|
Backend als Kotlin/Spring-Boot-Anwendung (Gradle Kotlin DSL, JDK 21),
|
||||||
|
entwickelt in IntelliJ IDEA Ultimate. Monorepo mit `frontend/` und `backend/`;
|
||||||
|
CLAUDE.md dreistufig: Wurzel für Querschnitt, je eine pro Teilprojekt
|
||||||
|
(wird von Claude Code pfadbezogen geladen). Kein Node- oder Python-Backend.
|
||||||
|
|
||||||
|
## D14 — Parser-Hoheit liegt beim Frontend, SPEC ist normativ
|
||||||
|
Der Notationstext ist das führende Datenformat. Das Backend parst die
|
||||||
|
Notation nicht; es speichert den Text als Ganzes und bedient Integrationen
|
||||||
|
über explizite Metadaten. Wird Backend-Parsen später doch erforderlich,
|
||||||
|
gilt: docs/SPEC.md ist normativ, beide Parser testen gegen dieselben
|
||||||
|
Fixtures (SPEC §10) — es darf keine zweite, abweichende Grammatik entstehen.
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
# Roadmap
|
||||||
|
|
||||||
|
## Nahziel: tragfähige Codebasis
|
||||||
|
- Single-HTML-Prototyp (`index.html`) in Module zerlegen: `parser`, `model`,
|
||||||
|
`render`, `app`. Parser und Renderer müssen headless (ohne DOM-Editor)
|
||||||
|
nutzbar sein — Voraussetzung für alle Integrationen.
|
||||||
|
- Testsuite gegen `docs/SPEC.md` (kanonisches Beispiel als Fixture).
|
||||||
|
|
||||||
|
## Mermaid-Plugin
|
||||||
|
Ziel: ```wbs```-Blöcke in Mermaid-Umgebungen rendern.
|
||||||
|
- Offizieller Mechanismus: `mermaid.registerExternalDiagrams()` mit
|
||||||
|
Detektor (Schlüsselwort `wbs`), Parser, DiagramDB, Renderer.
|
||||||
|
Präzedenzfälle: ZenUML (extern), Mindmap (ursprünglich extern, ebenfalls
|
||||||
|
einrückungsbasierte Syntax).
|
||||||
|
- Hauptaufwand: **SVG-Renderer** mit eigener Layout-Berechnung
|
||||||
|
(Knotenmaße messen, Positionen, Verbinder als Pfade) inkl. Mischlayout
|
||||||
|
und transponiertem Modus. Toggles werden zu Syntax-Optionen
|
||||||
|
(z. B. `wbs LR`, Direktiven).
|
||||||
|
- Einschränkungen: wirkt nur in selbst initialisierten Mermaid-Instanzen
|
||||||
|
(nicht GitHub/GitLab/Notion); Lazy-Loading externer Diagramme galt zuletzt
|
||||||
|
als experimentell. Für universelle Verfügbarkeit: PR als eingebautes
|
||||||
|
Diagramm (Vorbild Mindmap/Kanban).
|
||||||
|
|
||||||
|
## Taiga-Integration
|
||||||
|
Ziel: Knoten mit Taiga-Objekten verlinken, Status automatisch synchronisieren.
|
||||||
|
- Architektur nach **Seedtime-Vorbild**: Companion-Ansatz — der Editor
|
||||||
|
(frontend/) plus ein Kotlin/Spring-Backend (backend/, D13) sprechen per
|
||||||
|
REST-API mit Taiga; optional dünnes
|
||||||
|
contrib-Frontend-Plugin (Menüpunkt im Projekt) und Backend-Paket
|
||||||
|
(Speicherung in Taigas DB statt Wiki-Seite).
|
||||||
|
- Syntax-Erweiterung `#123`: Referenz auf Epic/User Story/Task/Issue;
|
||||||
|
App löst Titel, Link und Status per API auf. Status-Mapping
|
||||||
|
Taiga-Workflow → Notation (z. B. „In progress“ → `[~]`, „Done“ → `[x]`).
|
||||||
|
- Aktualisierung: API-Abfrage beim Öffnen; Push via Webhooks.
|
||||||
|
Rückrichtung (Status im WBS ändern → Taiga) möglich.
|
||||||
|
- Einschränkungen: Plugins nur self-hosted (nicht taiga.io-Cloud);
|
||||||
|
Taiga 6 im Wartungsmodus, Frontend AngularJS-Altbestand — daher
|
||||||
|
Companion-App bevorzugen.
|
||||||
|
|
||||||
|
## Tenzu (Beobachten)
|
||||||
|
Nachfolger von „Taiga Next“; seit Ende Juli 2024 von der französischen
|
||||||
|
Genossenschaft Biru entwickelt (Kaleidos fokussiert Penpot). Open Source,
|
||||||
|
in laufender Entwicklung, Integrationsfähigkeit erklärtes Ziel — noch zu
|
||||||
|
jung als Plattform-Ziel. Companion-App so schneiden, dass ein späterer
|
||||||
|
Umzug Taiga → Tenzu nur den API-Adapter betrifft.
|
||||||
|
|
||||||
|
## Kleinere Ideen
|
||||||
|
- Deterministische Pastellfarbe pro `@name` (Personen wiedererkennen).
|
||||||
|
- SVG/PNG-Export für Präsentationen.
|
||||||
|
- Sichtbare Anmerkungen am Knoten (eigene Syntax, getrennt von `%%`).
|
||||||
|
- Aufwands-Rollup: Größen der Kinder aggregieren und mit Parent vergleichen.
|
||||||
|
- Attribut-Syntax für Termine/Meilensteine.
|
||||||
+140
@@ -0,0 +1,140 @@
|
|||||||
|
# WBS-Notation – Spezifikation
|
||||||
|
|
||||||
|
Textuelle Notation für Projektstrukturpläne (Work Breakdown Structure) mit
|
||||||
|
Und/Oder-Zerlegung. Diese Datei ist die verbindliche Sprachdefinition.
|
||||||
|
Syntaxänderungen werden zuerst hier dokumentiert, dann implementiert.
|
||||||
|
|
||||||
|
## 1. Zeilenformat
|
||||||
|
|
||||||
|
```
|
||||||
|
[Einrückung][Zeichen] [Statusbox] Label (Größe) URL @tag … %% Kommentar
|
||||||
|
```
|
||||||
|
|
||||||
|
Alle Bestandteile außer dem Label sind optional. Die Extraktion erfolgt in
|
||||||
|
dieser Reihenfolge (wichtig für Kollisionsfreiheit):
|
||||||
|
|
||||||
|
1. Kommentar entfernen: alles ab `%%` bis Zeilenende.
|
||||||
|
2. Einrückung, Zeichen (`-` / `|`) und Statusbox `[…]` per Zeilen-Regex.
|
||||||
|
3. URL: erstes Token, das auf `https?://\S+` passt (dadurch stören `@` in URLs nicht).
|
||||||
|
4. Größe: erstes `(XS|S|M|L|XL|XXL)`, Groß-/Kleinschreibung egal.
|
||||||
|
5. Tags: alle `@name`-Vorkommen.
|
||||||
|
6. Rest, whitespace-normalisiert = Label. Leeres Label ⇒ Zeile ignorieren.
|
||||||
|
|
||||||
|
Referenz-Regex der Implementierung:
|
||||||
|
|
||||||
|
```
|
||||||
|
^([ \t]*)([-|])?\s*(?:\[([ ?~xX^/-])\]\s*)?(.*)$
|
||||||
|
```
|
||||||
|
|
||||||
|
## 2. Hierarchie
|
||||||
|
|
||||||
|
- Die Einrückung bestimmt die Ebene. Es gibt keine feste Schrittweite:
|
||||||
|
Elternknoten ist die nächste vorangehende Zeile mit **kleinerer**
|
||||||
|
Einrückungsbreite (Tab zählt als 2 Leerzeichen).
|
||||||
|
- Zeilen ohne Zeichen (`-`/`|`) sind Wurzelknoten. Mehrere Wurzeln = mehrere
|
||||||
|
Bäume nebeneinander.
|
||||||
|
|
||||||
|
## 3. Zerlegungsart (Gate)
|
||||||
|
|
||||||
|
| Zeichen | Bedeutung | Semantik |
|
||||||
|
|---|---|---|
|
||||||
|
| `-` | all of (Und-Zerlegung) | Alle Teilpakete sind erforderlich. |
|
||||||
|
| `\|` | any of (Oder-Zerlegung) | Mindestens eine Alternative wird gewählt. |
|
||||||
|
|
||||||
|
- Das Gate ist eine Eigenschaft der Geschwistergruppe; alle Geschwister sollen
|
||||||
|
dasselbe Zeichen tragen.
|
||||||
|
- Gemischte Geschwister: Darstellung nach dem **ersten** Kind, plus Warnung
|
||||||
|
mit Zeilennummer.
|
||||||
|
|
||||||
|
## 4. Status
|
||||||
|
|
||||||
|
Codiert als Checkbox nach dem Zeichen (Erweiterung der Markdown-Task-Syntax):
|
||||||
|
|
||||||
|
| Code | Key | Name | Bedeutung | Hintergrund | Rahmen |
|
||||||
|
|---|---|---|---|---|---|
|
||||||
|
| `[?]` | idee | Idee | vage Idee | `#EBEDEF` (grau) | `#A2ABB5` |
|
||||||
|
| `[ ]` | geplant | geplant | beschlossen, nichts investiert | `#EBE4F6` (flieder) | `#A991D4` |
|
||||||
|
| `[~]` | arbeit | in Arbeit | Kosten investiert, Risiko hoch | `#FADDE4` (rosé) | `#D897A8` |
|
||||||
|
| `[/]` | durchstich | Durchstich | funktionsbereit/vorführbar, Feinarbeiten offen | `#FBF2CE` (pastellgelb) | `#D9BE63` |
|
||||||
|
| `[x]` | fertig | fertig | abgeschlossen | `#DCF1DE` (pastellgrün) | `#86C293` |
|
||||||
|
| `[^]` | prod | in Produktion | deployed/live | `#DBEAF8` (pastellblau) | `#85ACD7` |
|
||||||
|
| `[-]` | verworfen | verworfen | bewusst nicht weiterverfolgt | `#F1F2F4`, gestrichelter Rahmen, Text durchgestrichen | `#B3BAC2` |
|
||||||
|
|
||||||
|
- Ohne Statusbox: neutraler Knoten (weiß).
|
||||||
|
- `x` auch als `X` zulässig.
|
||||||
|
- Verworfene Knoten (inkl. Teilbaum) sind per Default **ausgeblendet**;
|
||||||
|
Toggle „verworfene einblenden“ zeigt sie.
|
||||||
|
|
||||||
|
## 5. Aufwand (T-Shirt-Größen)
|
||||||
|
|
||||||
|
- Werte: `XS < S < M < L < XL < XXL`, notiert in Klammern, z. B. `(L)`.
|
||||||
|
- **Untergliederungsregel:** Ab `(M)` muss ein Element weiter zerlegt sein.
|
||||||
|
Ein Element ≥ M **ohne Kinder** erhält:
|
||||||
|
- gestrichelte orange Umrandung (`--warn`, `#B45309`) und
|
||||||
|
- einen Geister-Knoten „Untergliederung fehlt“ an gestrichelter Linie darunter.
|
||||||
|
- Ausnahme: verworfene Elemente lösen die Regel nie aus.
|
||||||
|
- Anzeige: dunkles Badge oben rechts an der Knoten-Ecke.
|
||||||
|
|
||||||
|
## 6. Links
|
||||||
|
|
||||||
|
- Ein nacktes `https://…`-Token macht den ganzen Knoten klickbar
|
||||||
|
(neuer Tab, `rel="noopener"`); Kennzeichnung mit ↗ hinter dem Label.
|
||||||
|
|
||||||
|
## 7. Personen-Tags
|
||||||
|
|
||||||
|
- `@name` mit `name` aus Unicode-Buchstaben, Ziffern, `.`, `_`, `-`.
|
||||||
|
- Mehrere Tags pro Zeile möglich, Position im Text egal.
|
||||||
|
- Anzeige: helle Pillen unten rechts an der Knoten-Ecke.
|
||||||
|
|
||||||
|
## 8. Kommentare
|
||||||
|
|
||||||
|
- `%%` leitet einen Kommentar ein — ganze Zeile oder ab Zeilenmitte.
|
||||||
|
- Konvention aus Mermaid übernommen; `%%{` vermeiden (dort Direktiven-Syntax).
|
||||||
|
|
||||||
|
## 9. Darstellung
|
||||||
|
|
||||||
|
### Normalmodus
|
||||||
|
- **all of:** Kinder nebeneinander, klassischer Organigramm-Fächer,
|
||||||
|
durchgezogene Linien (Tinte `#41556E`).
|
||||||
|
- **any of:** Alternativen untereinander; durchgezogene vertikale Linie links
|
||||||
|
unterhalb des Parents, **gestrichelte** Abzweige zu den Alternativen
|
||||||
|
(Petrol `#0F766E`). Alternative-Knoten mit petrolfarbenem Rahmen.
|
||||||
|
|
||||||
|
### Transponierter Modus (Toggle „schmal (vertikal)“)
|
||||||
|
- **all of:** Linie tritt **rechts auf halber Höhe** aus dem Parent aus
|
||||||
|
(entspricht Richtung LR), vertikale Sammelleiste, durchgezogene Abzweige;
|
||||||
|
Kinder rechts eingerückt untereinander.
|
||||||
|
- **any of:** unverändert — Austritt **unten links**, gestrichelte Abzweige.
|
||||||
|
- Merkregel: Austrittsseite codiert das Gate (rechts = und, unten = oder),
|
||||||
|
Linienstil bestätigt es.
|
||||||
|
|
||||||
|
### Geometrie-Invarianten
|
||||||
|
- Knoten haben feste Zeilenhöhe (`line-height: 1.3`), damit Abzweige
|
||||||
|
deterministisch auf Knotenmitte liegen (Offset 23 px = 5 px Listenabstand
|
||||||
|
+ halbe Knotenhöhe). Abzweige zielen auf den **Knoten**, nie auf die Mitte
|
||||||
|
des Teilbaums.
|
||||||
|
|
||||||
|
## 10. Beispiel (kanonisch)
|
||||||
|
|
||||||
|
```
|
||||||
|
%% Projektstruktur – Stand Sprint 14
|
||||||
|
[~] Website-Relaunch (XL) https://wiki.example.de/relaunch
|
||||||
|
- [x] Konzeption (M)
|
||||||
|
- [x] Zielgruppenanalyse (S)
|
||||||
|
- [x] Sitemap (XS)
|
||||||
|
- [~] Umsetzung (XL)
|
||||||
|
- [/] Frontend (S) https://git.example.de/frontend @anna
|
||||||
|
- [ ] Backend (L) @ben @carla
|
||||||
|
- [ ] CMS-Anbindung (M)
|
||||||
|
| [ ] WordPress
|
||||||
|
| [?] Headless CMS
|
||||||
|
| [-] Eigenentwicklung %% Aufwand zu hoch
|
||||||
|
- [?] Hosting (M)
|
||||||
|
| Cloud
|
||||||
|
| On-Premise
|
||||||
|
```
|
||||||
|
|
||||||
|
## 11. Reservierte Erweiterungen (noch nicht implementiert)
|
||||||
|
|
||||||
|
- `#123` — Referenz auf externe Tickets (geplant für Taiga-Integration).
|
||||||
|
- `#tag` — freie Schlagworte (deshalb `#` nicht anderweitig verwenden).
|
||||||
@@ -0,0 +1,29 @@
|
|||||||
|
# Aufgaben
|
||||||
|
|
||||||
|
Abhaken beim Erledigen; neue Aufgaben unten anfügen.
|
||||||
|
|
||||||
|
## Phase 1 — Modularisierung & Tests
|
||||||
|
- [ ] Projektgerüst: `src/` (parser.js, model.js, render.js, app.js),
|
||||||
|
`tests/`, `index.html` bindet Module ein; weiterhin ohne Build nutzbar
|
||||||
|
(ES-Module) oder mit minimalem Setup (Vite) — Entscheidung dokumentieren.
|
||||||
|
- [ ] Parser extrahieren; Verhalten exakt wie in `docs/SPEC.md` §1–§8.
|
||||||
|
- [ ] Unit-Tests für den Parser (Vitest): kanonisches Beispiel aus SPEC §10
|
||||||
|
als Fixture; Randfälle: gemischte Gates, Tabs/ungleichmäßige Einrückung,
|
||||||
|
URL mit `@`, mehrere Wurzeln, leere Labels, `%%` am Zeilenanfang/-ende.
|
||||||
|
- [ ] Renderer extrahieren (HTML-String-Erzeugung), Snapshot-Tests für
|
||||||
|
Normal- und Vertikalmodus sowie „Untergliederung fehlt“.
|
||||||
|
- [ ] Warnungs-Modell vereinheitlichen (Zeilennummern, Typen).
|
||||||
|
|
||||||
|
## Phase 2 — Qualität
|
||||||
|
- [ ] Barrierefreiheit: Fokusreihenfolge, aria-Labels für Status/Größe/Tags.
|
||||||
|
- [ ] Druck-Stylesheet (Diagramm ohne Editor-Panel).
|
||||||
|
- [ ] Fehlertolerantes Parsen weiter ausbauen (unbekannte Statuszeichen melden).
|
||||||
|
|
||||||
|
## Phase 3 — Integrationen (siehe docs/ROADMAP.md)
|
||||||
|
- [ ] Backend-Gerüst per Spring Initializr in `backend/` anlegen
|
||||||
|
(Kotlin, Gradle Kotlin DSL, JDK 21; Konventionen: backend/CLAUDE.md).
|
||||||
|
- [ ] SVG-Renderer (Layout-Engine) als gemeinsame Basis für Export und
|
||||||
|
Mermaid-Plugin.
|
||||||
|
- [ ] Mermaid-Plugin-Spike: Detektor + Registrierung, ein Minimalbaum.
|
||||||
|
- [ ] Taiga-Spike: `#ref`-Syntax parsen, Status via REST-API auflösen
|
||||||
|
(read-only), Mapping konfigurierbar.
|
||||||
@@ -0,0 +1,39 @@
|
|||||||
|
# Werkbaum — Marke
|
||||||
|
|
||||||
|
Leitidee: Die Marke ist aus den Strichen der Notation gebaut —
|
||||||
|
**durchgezogen = und**, **gestrichelt = oder**. Das Zeichen ist eine Miniatur
|
||||||
|
des Diagramms; es existiert in zwei Orientierungen, analog zu den beiden
|
||||||
|
Darstellungsmodi des Produkts.
|
||||||
|
|
||||||
|
## Dateien (`brand/`)
|
||||||
|
|
||||||
|
| Datei | Zweck |
|
||||||
|
|---|---|
|
||||||
|
| `logo.svg` | Primärzeichen, Hochformat (Variante A), helle Flächen |
|
||||||
|
| `logo-dark.svg` | Primärzeichen für dunkle Flächen |
|
||||||
|
| `logo-quer.svg` | Sekundärzeichen, transponiert (Variante B), für breite/niedrige Flächen (Header-Leisten, Banner) |
|
||||||
|
| `logo-quer-dark.svg` | Sekundärzeichen für dunkle Flächen |
|
||||||
|
| `favicon.svg` | vereinfachte Zwei-Ebenen-Form für 16–32 px |
|
||||||
|
|
||||||
|
Design-Herleitung und Alternativen: `docs/design/logo-konzepte.html` und
|
||||||
|
`docs/design/logo-k2-varianten.html`.
|
||||||
|
|
||||||
|
## Farben
|
||||||
|
|
||||||
|
- Tinte `#243447`, Petrol `#0F766E` (Oder-Anteile).
|
||||||
|
- Auf dunklem Grund: Papier `#F3F6F9`, Petrol hell `#45C4B4`.
|
||||||
|
- Die Pastelltöne des Produkts sind **Statusfarben** und erscheinen nie im Logo.
|
||||||
|
- Einfarbige Variante: alles in Tinte; die Strichelung bleibt erhalten.
|
||||||
|
|
||||||
|
## Wortbild
|
||||||
|
|
||||||
|
- IBM Plex Sans SemiBold, Zweiteilung: **Werk** (Tinte) + **baum** (Petrol),
|
||||||
|
letter-spacing −0.02em.
|
||||||
|
- CLI/npm/Code-Kontexte: konsequent kleingeschrieben `werkbaum`
|
||||||
|
(IBM Plex Mono).
|
||||||
|
|
||||||
|
## Regeln
|
||||||
|
|
||||||
|
- Gestrichelte Anteile behalten Richtung und Strichmuster; nichts rotieren.
|
||||||
|
- Unter 24 px immer `favicon.svg` verwenden, nie das Primärzeichen verkleinern.
|
||||||
|
- Schutzraum: mindestens die Höhe des Wurzel-Kästchens rundum.
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
|
||||||
|
<!-- Werkbaum · Favicon (vereinfachte Zwei-Ebenen-Form) -->
|
||||||
|
<rect x="18" y="4" width="28" height="16" rx="4" fill="#243447"/>
|
||||||
|
<path d="M32 20 V26 M12 26 H52 M12 26 V32 M52 26 V32" fill="none" stroke="#243447" stroke-width="5"/>
|
||||||
|
<rect x="2" y="32" width="24" height="16" rx="4" fill="#fff" stroke="#243447" stroke-width="5"/>
|
||||||
|
<rect x="38" y="32" width="24" height="16" rx="4" fill="#fff" stroke="#0F766E" stroke-width="5"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 502 B |
@@ -0,0 +1,9 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
|
||||||
|
<!-- Werkbaum · Primärzeichen (Variante A, Hochformat) · für dunkle Flächen -->
|
||||||
|
<rect x="22" y="5" width="20" height="12" rx="3.5" fill="#F3F6F9"/>
|
||||||
|
<path d="M32 17 V22 M14 22 H50 M14 22 V27 M50 22 V27" fill="none" stroke="#F3F6F9" stroke-width="3"/>
|
||||||
|
<rect x="4" y="27" width="20" height="12" rx="3.5" fill="none" stroke="#F3F6F9" stroke-width="3"/>
|
||||||
|
<rect x="40" y="27" width="20" height="12" rx="3.5" fill="none" stroke="#F3F6F9" stroke-width="3"/>
|
||||||
|
<path d="M50 39 V46" fill="none" stroke="#45C4B4" stroke-width="3" stroke-dasharray="4 4"/>
|
||||||
|
<rect x="40" y="46" width="20" height="12" rx="3.5" fill="none" stroke="#45C4B4" stroke-width="3"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 728 B |
@@ -0,0 +1,9 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
|
||||||
|
<!-- Werkbaum · Sekundärzeichen (Variante B, transponiert) · für dunkle Flächen -->
|
||||||
|
<rect x="4" y="26" width="20" height="12" rx="3.5" fill="#F3F6F9"/>
|
||||||
|
<path d="M24 32 H30 M30 14 V32 M30 14 H38 M30 32 H38" fill="none" stroke="#F3F6F9" stroke-width="3"/>
|
||||||
|
<path d="M30 32 V50 M30 50 H38" fill="none" stroke="#45C4B4" stroke-width="3" stroke-dasharray="4 4"/>
|
||||||
|
<rect x="38" y="8" width="22" height="12" rx="3.5" fill="none" stroke="#F3F6F9" stroke-width="3"/>
|
||||||
|
<rect x="38" y="26" width="22" height="12" rx="3.5" fill="none" stroke="#F3F6F9" stroke-width="3"/>
|
||||||
|
<rect x="38" y="44" width="22" height="12" rx="3.5" fill="none" stroke="#45C4B4" stroke-width="3"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 743 B |
@@ -0,0 +1,9 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
|
||||||
|
<!-- Werkbaum · Sekundärzeichen (Variante B, transponiert) · hell -->
|
||||||
|
<rect x="4" y="26" width="20" height="12" rx="3.5" fill="#243447"/>
|
||||||
|
<path d="M24 32 H30 M30 14 V32 M30 14 H38 M30 32 H38" fill="none" stroke="#243447" stroke-width="3"/>
|
||||||
|
<path d="M30 32 V50 M30 50 H38" fill="none" stroke="#0F766E" stroke-width="3" stroke-dasharray="4 4"/>
|
||||||
|
<rect x="38" y="8" width="22" height="12" rx="3.5" fill="#fff" stroke="#243447" stroke-width="3"/>
|
||||||
|
<rect x="38" y="26" width="22" height="12" rx="3.5" fill="#fff" stroke="#243447" stroke-width="3"/>
|
||||||
|
<rect x="38" y="44" width="22" height="12" rx="3.5" fill="#fff" stroke="#0F766E" stroke-width="3"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 727 B |
@@ -0,0 +1,9 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
|
||||||
|
<!-- Werkbaum · Primärzeichen (Variante A, Hochformat) · hell -->
|
||||||
|
<rect x="22" y="5" width="20" height="12" rx="3.5" fill="#243447"/>
|
||||||
|
<path d="M32 17 V22 M14 22 H50 M14 22 V27 M50 22 V27" fill="none" stroke="#243447" stroke-width="3"/>
|
||||||
|
<rect x="4" y="27" width="20" height="12" rx="3.5" fill="#fff" stroke="#243447" stroke-width="3"/>
|
||||||
|
<rect x="40" y="27" width="20" height="12" rx="3.5" fill="#fff" stroke="#243447" stroke-width="3"/>
|
||||||
|
<path d="M50 39 V46" fill="none" stroke="#0F766E" stroke-width="3" stroke-dasharray="4 4"/>
|
||||||
|
<rect x="40" y="46" width="20" height="12" rx="3.5" fill="#fff" stroke="#0F766E" stroke-width="3"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 712 B |
@@ -0,0 +1,213 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Werkbaum · K2 „Die Miniatur" — zwei Varianten</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
:root{
|
||||||
|
--paper:#F3F6F9;
|
||||||
|
--grid:rgba(36,52,71,.055);
|
||||||
|
--ink:#243447;
|
||||||
|
--card:#FFFFFF;
|
||||||
|
--muted:#6B7A8C;
|
||||||
|
--or:#0F766E;
|
||||||
|
--or-dark:#45C4B4;
|
||||||
|
}
|
||||||
|
*{box-sizing:border-box;margin:0;padding:0}
|
||||||
|
body{
|
||||||
|
font-family:'IBM Plex Sans',system-ui,sans-serif;
|
||||||
|
color:var(--ink);
|
||||||
|
background:
|
||||||
|
repeating-linear-gradient(0deg,transparent 0 23px,var(--grid) 23px 24px),
|
||||||
|
repeating-linear-gradient(90deg,transparent 0 23px,var(--grid) 23px 24px),
|
||||||
|
var(--paper);
|
||||||
|
min-height:100vh;
|
||||||
|
padding:44px 24px 72px;
|
||||||
|
}
|
||||||
|
main{max-width:980px;margin:0 auto}
|
||||||
|
.eyebrow{
|
||||||
|
font-family:'IBM Plex Mono',monospace;font-size:.68rem;
|
||||||
|
letter-spacing:.12em;text-transform:uppercase;color:var(--or);
|
||||||
|
}
|
||||||
|
h1{font-size:1.5rem;font-weight:600;letter-spacing:-.01em;margin-top:6px}
|
||||||
|
header p{margin-top:8px;color:var(--muted);font-size:.92rem;max-width:66ch;line-height:1.6}
|
||||||
|
header p b{color:var(--ink);font-weight:500}
|
||||||
|
|
||||||
|
.variant{
|
||||||
|
margin-top:28px;
|
||||||
|
background:var(--card);
|
||||||
|
border:1px solid rgba(36,52,71,.14);
|
||||||
|
border-radius:16px;
|
||||||
|
padding:24px;
|
||||||
|
}
|
||||||
|
.v-head{display:flex;align-items:baseline;gap:12px;margin-bottom:18px}
|
||||||
|
.v-head h2{font-size:1.05rem;font-weight:600}
|
||||||
|
.v-head span{
|
||||||
|
font-family:'IBM Plex Mono',monospace;font-size:.62rem;
|
||||||
|
letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
|
||||||
|
}
|
||||||
|
.stage{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
|
||||||
|
.swatch{
|
||||||
|
border-radius:14px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;
|
||||||
|
}
|
||||||
|
.sw-paper{width:140px;height:140px;background:var(--paper);border:1px solid rgba(36,52,71,.12)}
|
||||||
|
.sw-ink{width:140px;height:140px;background:var(--ink)}
|
||||||
|
.minis{display:flex;flex-direction:column;gap:8px;align-items:center}
|
||||||
|
.minis .swatch{background:var(--paper);border:1px solid rgba(36,52,71,.12);border-radius:7px}
|
||||||
|
.m32{width:48px;height:48px}
|
||||||
|
.m16{width:28px;height:28px}
|
||||||
|
.minis span{font-family:'IBM Plex Mono',monospace;font-size:.58rem;color:var(--muted)}
|
||||||
|
.lockup{
|
||||||
|
display:flex;align-items:center;gap:14px;
|
||||||
|
background:var(--paper);border:1px solid rgba(36,52,71,.12);
|
||||||
|
border-radius:14px;padding:18px 24px;flex:1 1 260px;min-width:250px;
|
||||||
|
}
|
||||||
|
.wordmark{font-size:1.75rem;font-weight:600;letter-spacing:-.02em;line-height:1}
|
||||||
|
.wordmark .w1{color:var(--ink)}
|
||||||
|
.wordmark .w2{color:var(--or)}
|
||||||
|
.variant p{margin-top:16px;font-size:.88rem;color:var(--muted);line-height:1.7;max-width:76ch}
|
||||||
|
.variant p b{color:var(--ink);font-weight:500}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<span class="eyebrow">Markenentwurf · K2 ausgearbeitet</span>
|
||||||
|
<h1>Die Miniatur — zwei Varianten</h1>
|
||||||
|
<p>Beide Varianten zeigen denselben Baum: gefüllte Wurzel, Und-Fächer mit
|
||||||
|
durchgezogenen Linien, ein Oder-Anschluss gestrichelt in Petrol. Sie
|
||||||
|
entsprechen den <b>zwei Darstellungsmodi des Produkts</b> — Hochformat wie
|
||||||
|
die normale Ansicht, Querformat wie die transponierte.</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="variant">
|
||||||
|
<div class="v-head"><h2>Variante A · Hochformat</h2><span>Primärzeichen</span></div>
|
||||||
|
<div class="stage">
|
||||||
|
<div class="swatch sw-paper">
|
||||||
|
<svg width="112" height="112" viewBox="0 0 64 64">
|
||||||
|
<rect x="22" y="5" width="20" height="12" rx="3.5" fill="#243447"/>
|
||||||
|
<path d="M32 17 V22 M14 22 H50 M14 22 V27 M50 22 V27" fill="none" stroke="#243447" stroke-width="3"/>
|
||||||
|
<rect x="4" y="27" width="20" height="12" rx="3.5" fill="#fff" stroke="#243447" stroke-width="3"/>
|
||||||
|
<rect x="40" y="27" width="20" height="12" rx="3.5" fill="#fff" stroke="#243447" stroke-width="3"/>
|
||||||
|
<path d="M50 39 V46" fill="none" stroke="#0F766E" stroke-width="3" stroke-dasharray="4 4"/>
|
||||||
|
<rect x="40" y="46" width="20" height="12" rx="3.5" fill="#fff" stroke="#0F766E" stroke-width="3"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="swatch sw-ink">
|
||||||
|
<svg width="112" height="112" viewBox="0 0 64 64">
|
||||||
|
<rect x="22" y="5" width="20" height="12" rx="3.5" fill="#F3F6F9"/>
|
||||||
|
<path d="M32 17 V22 M14 22 H50 M14 22 V27 M50 22 V27" fill="none" stroke="#F3F6F9" stroke-width="3"/>
|
||||||
|
<rect x="4" y="27" width="20" height="12" rx="3.5" fill="none" stroke="#F3F6F9" stroke-width="3"/>
|
||||||
|
<rect x="40" y="27" width="20" height="12" rx="3.5" fill="none" stroke="#F3F6F9" stroke-width="3"/>
|
||||||
|
<path d="M50 39 V46" fill="none" stroke="#45C4B4" stroke-width="3" stroke-dasharray="4 4"/>
|
||||||
|
<rect x="40" y="46" width="20" height="12" rx="3.5" fill="none" stroke="#45C4B4" stroke-width="3"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="minis">
|
||||||
|
<div class="swatch m32">
|
||||||
|
<svg width="36" height="36" viewBox="0 0 64 64">
|
||||||
|
<rect x="22" y="5" width="20" height="12" rx="3.5" fill="#243447"/>
|
||||||
|
<path d="M32 17 V22 M14 22 H50 M14 22 V27 M50 22 V27" fill="none" stroke="#243447" stroke-width="4"/>
|
||||||
|
<rect x="4" y="27" width="20" height="12" rx="3.5" fill="#fff" stroke="#243447" stroke-width="4"/>
|
||||||
|
<rect x="40" y="27" width="20" height="12" rx="3.5" fill="#fff" stroke="#243447" stroke-width="4"/>
|
||||||
|
<path d="M50 39 V46" fill="none" stroke="#0F766E" stroke-width="4" stroke-dasharray="5 5"/>
|
||||||
|
<rect x="40" y="46" width="20" height="12" rx="3.5" fill="#fff" stroke="#0F766E" stroke-width="4"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="swatch m16">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 64 64">
|
||||||
|
<rect x="18" y="4" width="28" height="16" rx="4" fill="#243447"/>
|
||||||
|
<path d="M32 20 V26 M12 26 H52 M12 26 V32 M52 26 V32" fill="none" stroke="#243447" stroke-width="5"/>
|
||||||
|
<rect x="2" y="32" width="24" height="16" rx="4" fill="#fff" stroke="#243447" stroke-width="5"/>
|
||||||
|
<rect x="38" y="32" width="24" height="16" rx="4" fill="#fff" stroke="#0F766E" stroke-width="5"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<span>32 / 16 px</span>
|
||||||
|
</div>
|
||||||
|
<div class="lockup">
|
||||||
|
<svg width="46" height="46" viewBox="0 0 64 64">
|
||||||
|
<rect x="22" y="5" width="20" height="12" rx="3.5" fill="#243447"/>
|
||||||
|
<path d="M32 17 V22 M14 22 H50 M14 22 V27 M50 22 V27" fill="none" stroke="#243447" stroke-width="3"/>
|
||||||
|
<rect x="4" y="27" width="20" height="12" rx="3.5" fill="#fff" stroke="#243447" stroke-width="3"/>
|
||||||
|
<rect x="40" y="27" width="20" height="12" rx="3.5" fill="#fff" stroke="#243447" stroke-width="3"/>
|
||||||
|
<path d="M50 39 V46" fill="none" stroke="#0F766E" stroke-width="3" stroke-dasharray="4 4"/>
|
||||||
|
<rect x="40" y="46" width="20" height="12" rx="3.5" fill="#fff" stroke="#0F766E" stroke-width="3"/>
|
||||||
|
</svg>
|
||||||
|
<span class="wordmark"><span class="w1">Werk</span><span class="w2">baum</span></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p>Drei Ebenen erzählen die ganze Geschichte: Wurzel, Und-Fächer, und aus dem
|
||||||
|
rechten Paket hängt gestrichelt eine Alternative. <b>Einsatz:</b> Website,
|
||||||
|
Doku-Titel, App-Icon, README. Für 16 px die vereinfachte Form — zwei Ebenen,
|
||||||
|
der Oder-Anteil wandert als petrolfarbener Rahmen ins rechte Kind.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="variant">
|
||||||
|
<div class="v-head"><h2>Variante B · Transponiert</h2><span>Sekundärzeichen für breite Flächen</span></div>
|
||||||
|
<div class="stage">
|
||||||
|
<div class="swatch sw-paper">
|
||||||
|
<svg width="112" height="112" viewBox="0 0 64 64">
|
||||||
|
<rect x="4" y="26" width="20" height="12" rx="3.5" fill="#243447"/>
|
||||||
|
<path d="M24 32 H30 M30 14 V32 M30 14 H38 M30 32 H38" fill="none" stroke="#243447" stroke-width="3"/>
|
||||||
|
<path d="M30 32 V50 M30 50 H38" fill="none" stroke="#0F766E" stroke-width="3" stroke-dasharray="4 4"/>
|
||||||
|
<rect x="38" y="8" width="22" height="12" rx="3.5" fill="#fff" stroke="#243447" stroke-width="3"/>
|
||||||
|
<rect x="38" y="26" width="22" height="12" rx="3.5" fill="#fff" stroke="#243447" stroke-width="3"/>
|
||||||
|
<rect x="38" y="44" width="22" height="12" rx="3.5" fill="#fff" stroke="#0F766E" stroke-width="3"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="swatch sw-ink">
|
||||||
|
<svg width="112" height="112" viewBox="0 0 64 64">
|
||||||
|
<rect x="4" y="26" width="20" height="12" rx="3.5" fill="#F3F6F9"/>
|
||||||
|
<path d="M24 32 H30 M30 14 V32 M30 14 H38 M30 32 H38" fill="none" stroke="#F3F6F9" stroke-width="3"/>
|
||||||
|
<path d="M30 32 V50 M30 50 H38" fill="none" stroke="#45C4B4" stroke-width="3" stroke-dasharray="4 4"/>
|
||||||
|
<rect x="38" y="8" width="22" height="12" rx="3.5" fill="none" stroke="#F3F6F9" stroke-width="3"/>
|
||||||
|
<rect x="38" y="26" width="22" height="12" rx="3.5" fill="none" stroke="#F3F6F9" stroke-width="3"/>
|
||||||
|
<rect x="38" y="44" width="22" height="12" rx="3.5" fill="none" stroke="#45C4B4" stroke-width="3"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="minis">
|
||||||
|
<div class="swatch m32">
|
||||||
|
<svg width="36" height="36" viewBox="0 0 64 64">
|
||||||
|
<rect x="4" y="26" width="20" height="12" rx="3.5" fill="#243447"/>
|
||||||
|
<path d="M24 32 H30 M30 14 V32 M30 14 H38 M30 32 H38" fill="none" stroke="#243447" stroke-width="4"/>
|
||||||
|
<path d="M30 32 V50 M30 50 H38" fill="none" stroke="#0F766E" stroke-width="4" stroke-dasharray="5 5"/>
|
||||||
|
<rect x="38" y="8" width="22" height="12" rx="3.5" fill="#fff" stroke="#243447" stroke-width="4"/>
|
||||||
|
<rect x="38" y="26" width="22" height="12" rx="3.5" fill="#fff" stroke="#243447" stroke-width="4"/>
|
||||||
|
<rect x="38" y="44" width="22" height="12" rx="3.5" fill="#fff" stroke="#0F766E" stroke-width="4"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="swatch m16">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 64 64">
|
||||||
|
<rect x="2" y="24" width="24" height="16" rx="4" fill="#243447"/>
|
||||||
|
<path d="M26 32 H32 M32 14 V32 M32 14 H40 M32 32 H40" fill="none" stroke="#243447" stroke-width="5"/>
|
||||||
|
<rect x="40" y="6" width="22" height="16" rx="4" fill="#fff" stroke="#243447" stroke-width="5"/>
|
||||||
|
<rect x="40" y="24" width="22" height="16" rx="4" fill="#fff" stroke="#0F766E" stroke-width="5"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<span>32 / 16 px</span>
|
||||||
|
</div>
|
||||||
|
<div class="lockup">
|
||||||
|
<svg width="46" height="46" viewBox="0 0 64 64">
|
||||||
|
<rect x="4" y="26" width="20" height="12" rx="3.5" fill="#243447"/>
|
||||||
|
<path d="M24 32 H30 M30 14 V32 M30 14 H38 M30 32 H38" fill="none" stroke="#243447" stroke-width="3"/>
|
||||||
|
<path d="M30 32 V50 M30 50 H38" fill="none" stroke="#0F766E" stroke-width="3" stroke-dasharray="4 4"/>
|
||||||
|
<rect x="38" y="8" width="22" height="12" rx="3.5" fill="#fff" stroke="#243447" stroke-width="3"/>
|
||||||
|
<rect x="38" y="26" width="22" height="12" rx="3.5" fill="#fff" stroke="#243447" stroke-width="3"/>
|
||||||
|
<rect x="38" y="44" width="22" height="12" rx="3.5" fill="#fff" stroke="#0F766E" stroke-width="3"/>
|
||||||
|
</svg>
|
||||||
|
<span class="wordmark"><span class="w1">Werk</span><span class="w2">baum</span></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p>Die Wurzel links, die Struktur wächst nach rechts — exakt die Logik des
|
||||||
|
transponierten Modus: die Und-Linie tritt <b>rechts</b> aus der Wurzel aus,
|
||||||
|
der Oder-Zweig hängt gestrichelt <b>unten</b> an der Sammelleiste.
|
||||||
|
<b>Einsatz:</b> breite Flächen wie Header-Leisten, Social-Banner,
|
||||||
|
Doku-Fußzeilen — überall dort, wo das Hochformat zu viel Höhe bräuchte.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,317 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Werkbaum · Logo & Wortbild</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
:root{
|
||||||
|
--paper:#F3F6F9;
|
||||||
|
--grid:rgba(36,52,71,.055);
|
||||||
|
--ink:#243447;
|
||||||
|
--line:#41556E;
|
||||||
|
--card:#FFFFFF;
|
||||||
|
--muted:#6B7A8C;
|
||||||
|
--or:#0F766E;
|
||||||
|
--or-dark:#45C4B4;
|
||||||
|
}
|
||||||
|
*{box-sizing:border-box;margin:0;padding:0}
|
||||||
|
body{
|
||||||
|
font-family:'IBM Plex Sans',system-ui,sans-serif;
|
||||||
|
color:var(--ink);
|
||||||
|
background:
|
||||||
|
repeating-linear-gradient(0deg,transparent 0 23px,var(--grid) 23px 24px),
|
||||||
|
repeating-linear-gradient(90deg,transparent 0 23px,var(--grid) 23px 24px),
|
||||||
|
var(--paper);
|
||||||
|
min-height:100vh;
|
||||||
|
padding:44px 24px 72px;
|
||||||
|
}
|
||||||
|
main{max-width:980px;margin:0 auto}
|
||||||
|
header{margin-bottom:14px}
|
||||||
|
.eyebrow{
|
||||||
|
font-family:'IBM Plex Mono',monospace;font-size:.68rem;
|
||||||
|
letter-spacing:.12em;text-transform:uppercase;color:var(--or);
|
||||||
|
}
|
||||||
|
h1{font-size:1.5rem;font-weight:600;letter-spacing:-.01em;margin-top:6px}
|
||||||
|
header p{margin-top:8px;color:var(--muted);font-size:.92rem;max-width:64ch;line-height:1.6}
|
||||||
|
header p b{color:var(--ink);font-weight:500}
|
||||||
|
|
||||||
|
section{margin-top:40px}
|
||||||
|
h2{
|
||||||
|
font-family:'IBM Plex Mono',monospace;font-size:.72rem;font-weight:500;
|
||||||
|
letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
|
||||||
|
border-bottom:1px solid rgba(36,52,71,.14);padding-bottom:8px;margin-bottom:18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.concepts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
|
||||||
|
.concept{
|
||||||
|
background:var(--card);
|
||||||
|
border:1px solid rgba(36,52,71,.14);
|
||||||
|
border-radius:14px;
|
||||||
|
padding:20px;position:relative;
|
||||||
|
}
|
||||||
|
.concept.reco{border-color:var(--or)}
|
||||||
|
.reco-tag{
|
||||||
|
position:absolute;top:-9px;left:16px;
|
||||||
|
font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.08em;
|
||||||
|
background:var(--or);color:#fff;border-radius:999px;padding:2px 9px;
|
||||||
|
}
|
||||||
|
.stage{
|
||||||
|
display:flex;gap:14px;align-items:center;margin-bottom:14px;
|
||||||
|
}
|
||||||
|
.swatch{
|
||||||
|
border-radius:14px;display:flex;align-items:center;justify-content:center;
|
||||||
|
flex:0 0 auto;
|
||||||
|
}
|
||||||
|
.sw-paper{width:112px;height:112px;background:var(--paper);border:1px solid rgba(36,52,71,.12)}
|
||||||
|
.sw-ink{width:112px;height:112px;background:var(--ink)}
|
||||||
|
.minis{display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center}
|
||||||
|
.minis .swatch{background:var(--paper);border:1px solid rgba(36,52,71,.12);border-radius:7px}
|
||||||
|
.m32{width:44px;height:44px}
|
||||||
|
.m16{width:26px;height:26px}
|
||||||
|
.minis span{font-family:'IBM Plex Mono',monospace;font-size:.58rem;color:var(--muted)}
|
||||||
|
.concept h3{font-size:.98rem;font-weight:600}
|
||||||
|
.concept p{margin-top:6px;font-size:.85rem;color:var(--muted);line-height:1.6}
|
||||||
|
.concept p b{color:var(--ink);font-weight:500}
|
||||||
|
|
||||||
|
.wordmarks{display:flex;flex-direction:column;gap:14px}
|
||||||
|
.wm{
|
||||||
|
background:var(--card);border:1px solid rgba(36,52,71,.14);border-radius:14px;
|
||||||
|
padding:22px 24px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;
|
||||||
|
}
|
||||||
|
.wm .label{
|
||||||
|
font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.08em;
|
||||||
|
text-transform:uppercase;color:var(--muted);flex:0 0 118px;
|
||||||
|
}
|
||||||
|
.lockup{display:flex;align-items:center;gap:13px}
|
||||||
|
.lockup svg{flex:0 0 auto}
|
||||||
|
.wordmark{
|
||||||
|
font-size:1.9rem;font-weight:600;letter-spacing:-.02em;line-height:1;
|
||||||
|
}
|
||||||
|
.wordmark .w1{color:var(--ink)}
|
||||||
|
.wordmark .w2{color:var(--or)}
|
||||||
|
.wm.dark{background:var(--ink);border-color:var(--ink)}
|
||||||
|
.wm.dark .wordmark .w1{color:#F3F6F9}
|
||||||
|
.wm.dark .wordmark .w2{color:var(--or-dark)}
|
||||||
|
.wm.dark .label{color:#8CA0B5}
|
||||||
|
.cli{
|
||||||
|
font-family:'IBM Plex Mono',monospace;font-size:1.05rem;color:var(--ink);
|
||||||
|
background:var(--paper);border:1px solid rgba(36,52,71,.14);
|
||||||
|
border-radius:8px;padding:10px 16px;
|
||||||
|
}
|
||||||
|
.cli .brk{color:var(--or)}
|
||||||
|
.cli .dim{color:var(--muted)}
|
||||||
|
|
||||||
|
.rules{
|
||||||
|
background:var(--card);border:1px solid rgba(36,52,71,.14);border-radius:14px;
|
||||||
|
padding:20px 24px;font-size:.88rem;line-height:1.75;color:var(--muted);max-width:74ch;
|
||||||
|
}
|
||||||
|
.rules b{color:var(--ink);font-weight:500}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<span class="eyebrow">Markenentwurf</span>
|
||||||
|
<h1>Werkbaum — Logo & Wortbild</h1>
|
||||||
|
<p>Leitidee: Die Marke wird aus den Strichen der Notation selbst gebaut —
|
||||||
|
<b>durchgezogen = und</b>, <b>gestrichelt = oder</b>.
|
||||||
|
Wer das Diagramm kennt, liest das Logo; wer das Logo kennt, versteht das Diagramm.</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>Bildmarken</h2>
|
||||||
|
<div class="concepts">
|
||||||
|
|
||||||
|
<div class="concept reco">
|
||||||
|
<span class="reco-tag">Empfehlung</span>
|
||||||
|
<div class="stage">
|
||||||
|
<div class="swatch sw-paper">
|
||||||
|
<svg width="88" height="88" viewBox="0 0 64 64">
|
||||||
|
<path d="M32 11 L32 28 L19 49" fill="none" stroke="#243447" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M32 28 L45 49" fill="none" stroke="#0F766E" stroke-width="5" stroke-linecap="round" stroke-dasharray="6 7"/>
|
||||||
|
<circle cx="32" cy="10" r="4.6" fill="#243447"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="swatch sw-ink">
|
||||||
|
<svg width="88" height="88" viewBox="0 0 64 64">
|
||||||
|
<path d="M32 11 L32 28 L19 49" fill="none" stroke="#F3F6F9" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M32 28 L45 49" fill="none" stroke="#45C4B4" stroke-width="5" stroke-linecap="round" stroke-dasharray="6 7"/>
|
||||||
|
<circle cx="32" cy="10" r="4.6" fill="#F3F6F9"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="minis">
|
||||||
|
<div class="swatch m32">
|
||||||
|
<svg width="32" height="32" viewBox="0 0 64 64">
|
||||||
|
<path d="M32 11 L32 28 L19 49" fill="none" stroke="#243447" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M32 28 L45 49" fill="none" stroke="#0F766E" stroke-width="6" stroke-linecap="round" stroke-dasharray="7 8"/>
|
||||||
|
<circle cx="32" cy="10" r="5.2" fill="#243447"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="swatch m16">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 64 64">
|
||||||
|
<path d="M32 11 L32 28 L19 49" fill="none" stroke="#243447" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M32 28 L45 49" fill="none" stroke="#0F766E" stroke-width="8" stroke-linecap="round" stroke-dasharray="9 10"/>
|
||||||
|
<circle cx="32" cy="10" r="6" fill="#243447"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<span>32 / 16 px</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3>K1 · Die Gabelung</h3>
|
||||||
|
<p>Wurzelpunkt, Stamm, eine Und-Gabel, ein Oder-Zweig — die ganze Notation
|
||||||
|
in einer Geste. <b>Skaliert bis zum Favicon</b>, funktioniert einfarbig
|
||||||
|
und ist als App-Kachel sofort erkennbar.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="concept">
|
||||||
|
<div class="stage">
|
||||||
|
<div class="swatch sw-paper">
|
||||||
|
<svg width="88" height="88" viewBox="0 0 64 64">
|
||||||
|
<rect x="20" y="6" width="24" height="13" rx="3.5" fill="#243447"/>
|
||||||
|
<path d="M32 19 V24 M14 24 H50 M14 24 V29 M50 24 V29" fill="none" stroke="#243447" stroke-width="3"/>
|
||||||
|
<rect x="4" y="29" width="20" height="12" rx="3.5" fill="#fff" stroke="#243447" stroke-width="3"/>
|
||||||
|
<rect x="40" y="29" width="20" height="12" rx="3.5" fill="#fff" stroke="#243447" stroke-width="3"/>
|
||||||
|
<path d="M50 41 V47" fill="none" stroke="#0F766E" stroke-width="3" stroke-dasharray="4 4"/>
|
||||||
|
<rect x="40" y="47" width="20" height="11" rx="3.5" fill="#fff" stroke="#0F766E" stroke-width="3"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="swatch sw-ink">
|
||||||
|
<svg width="88" height="88" viewBox="0 0 64 64">
|
||||||
|
<rect x="20" y="6" width="24" height="13" rx="3.5" fill="#F3F6F9"/>
|
||||||
|
<path d="M32 19 V24 M14 24 H50 M14 24 V29 M50 24 V29" fill="none" stroke="#F3F6F9" stroke-width="3"/>
|
||||||
|
<rect x="4" y="29" width="20" height="12" rx="3.5" fill="none" stroke="#F3F6F9" stroke-width="3"/>
|
||||||
|
<rect x="40" y="29" width="20" height="12" rx="3.5" fill="none" stroke="#F3F6F9" stroke-width="3"/>
|
||||||
|
<path d="M50 41 V47" fill="none" stroke="#45C4B4" stroke-width="3" stroke-dasharray="4 4"/>
|
||||||
|
<rect x="40" y="47" width="20" height="11" rx="3.5" fill="none" stroke="#45C4B4" stroke-width="3"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="minis">
|
||||||
|
<div class="swatch m32">
|
||||||
|
<svg width="32" height="32" viewBox="0 0 64 64">
|
||||||
|
<rect x="20" y="6" width="24" height="13" rx="3.5" fill="#243447"/>
|
||||||
|
<path d="M32 19 V24 M14 24 H50 M14 24 V29 M50 24 V29" fill="none" stroke="#243447" stroke-width="4"/>
|
||||||
|
<rect x="4" y="29" width="20" height="12" rx="3.5" fill="#fff" stroke="#243447" stroke-width="4"/>
|
||||||
|
<rect x="40" y="29" width="20" height="12" rx="3.5" fill="#fff" stroke="#243447" stroke-width="4"/>
|
||||||
|
<path d="M50 41 V47" fill="none" stroke="#0F766E" stroke-width="4" stroke-dasharray="4 4"/>
|
||||||
|
<rect x="40" y="47" width="20" height="11" rx="3.5" fill="#fff" stroke="#0F766E" stroke-width="4"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="swatch m16">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 64 64">
|
||||||
|
<rect x="18" y="4" width="28" height="16" rx="4" fill="#243447"/>
|
||||||
|
<path d="M32 20 V26 M12 26 H52 M12 26 V32 M52 26 V32" fill="none" stroke="#243447" stroke-width="5"/>
|
||||||
|
<rect x="2" y="32" width="24" height="15" rx="4" fill="#fff" stroke="#243447" stroke-width="5"/>
|
||||||
|
<rect x="38" y="32" width="24" height="15" rx="4" fill="#fff" stroke="#243447" stroke-width="5"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<span>32 / 16 px</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3>K2 · Die Miniatur</h3>
|
||||||
|
<p>Der Projektstrukturplan selbst als Zeichen: gefüllte Wurzel, Und-Fächer,
|
||||||
|
gestrichelter Oder-Anschluss. <b>Am erklärendsten</b> — ideal für
|
||||||
|
Website-Header und Doku; fürs Favicon braucht es die vereinfachte Form.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="concept">
|
||||||
|
<div class="stage">
|
||||||
|
<div class="swatch sw-paper">
|
||||||
|
<svg width="88" height="88" viewBox="0 0 64 64">
|
||||||
|
<rect x="20" y="27" width="24" height="24" rx="5.5" fill="#fff" stroke="#243447" stroke-width="4"/>
|
||||||
|
<path d="M27 45.5 L37 32.5" stroke="#0F766E" stroke-width="4" stroke-linecap="round"/>
|
||||||
|
<path d="M32 27 V16 M32 16 L23 8" fill="none" stroke="#243447" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M32 16 L41 8" fill="none" stroke="#0F766E" stroke-width="4" stroke-linecap="round" stroke-dasharray="5 6"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="swatch sw-ink">
|
||||||
|
<svg width="88" height="88" viewBox="0 0 64 64">
|
||||||
|
<rect x="20" y="27" width="24" height="24" rx="5.5" fill="none" stroke="#F3F6F9" stroke-width="4"/>
|
||||||
|
<path d="M27 45.5 L37 32.5" stroke="#45C4B4" stroke-width="4" stroke-linecap="round"/>
|
||||||
|
<path d="M32 27 V16 M32 16 L23 8" fill="none" stroke="#F3F6F9" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M32 16 L41 8" fill="none" stroke="#45C4B4" stroke-width="4" stroke-linecap="round" stroke-dasharray="5 6"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="minis">
|
||||||
|
<div class="swatch m32">
|
||||||
|
<svg width="32" height="32" viewBox="0 0 64 64">
|
||||||
|
<rect x="18" y="26" width="28" height="27" rx="6" fill="#fff" stroke="#243447" stroke-width="5"/>
|
||||||
|
<path d="M26 47 L38 32" stroke="#0F766E" stroke-width="5" stroke-linecap="round"/>
|
||||||
|
<path d="M32 26 V15 M32 15 L22 7" fill="none" stroke="#243447" stroke-width="5" stroke-linecap="round"/>
|
||||||
|
<path d="M32 15 L42 7" fill="none" stroke="#0F766E" stroke-width="5" stroke-linecap="round" stroke-dasharray="6 7"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="swatch m16">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 64 64">
|
||||||
|
<rect x="16" y="26" width="32" height="30" rx="7" fill="#fff" stroke="#243447" stroke-width="6"/>
|
||||||
|
<path d="M25 48 L39 33" stroke="#0F766E" stroke-width="6" stroke-linecap="round"/>
|
||||||
|
<path d="M32 26 V14 M32 14 L21 5 M32 14 L43 5" fill="none" stroke="#243447" stroke-width="6" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<span>32 / 16 px</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3>K3 · Der Spross</h3>
|
||||||
|
<p>Aus der Status-Checkbox <b>[/]</b> (Durchstich) wächst ein Zweig — Und
|
||||||
|
solid, Oder gestrichelt. Erzählt die Herkunft aus der Markdown-Task-Welt;
|
||||||
|
der verspielteste der drei Entwürfe.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>Wortbild</h2>
|
||||||
|
<div class="wordmarks">
|
||||||
|
|
||||||
|
<div class="wm">
|
||||||
|
<span class="label">Primär-Lockup</span>
|
||||||
|
<div class="lockup">
|
||||||
|
<svg width="42" height="42" viewBox="0 0 64 64">
|
||||||
|
<path d="M32 11 L32 28 L19 49" fill="none" stroke="#243447" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M32 28 L45 49" fill="none" stroke="#0F766E" stroke-width="5" stroke-linecap="round" stroke-dasharray="6 7"/>
|
||||||
|
<circle cx="32" cy="10" r="4.6" fill="#243447"/>
|
||||||
|
</svg>
|
||||||
|
<span class="wordmark"><span class="w1">Werk</span><span class="w2">baum</span></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="wm dark">
|
||||||
|
<span class="label">Auf Tinte</span>
|
||||||
|
<div class="lockup">
|
||||||
|
<svg width="42" height="42" viewBox="0 0 64 64">
|
||||||
|
<path d="M32 11 L32 28 L19 49" fill="none" stroke="#F3F6F9" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M32 28 L45 49" fill="none" stroke="#45C4B4" stroke-width="5" stroke-linecap="round" stroke-dasharray="6 7"/>
|
||||||
|
<circle cx="32" cy="10" r="4.6" fill="#F3F6F9"/>
|
||||||
|
</svg>
|
||||||
|
<span class="wordmark"><span class="w1">Werk</span><span class="w2">baum</span></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="wm">
|
||||||
|
<span class="label">CLI / npm</span>
|
||||||
|
<div class="cli"><span class="dim">$</span> <span class="brk">[/]</span> werkbaum <span class="dim">render projekt.wbs</span></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>Anwendungsregeln</h2>
|
||||||
|
<div class="rules">
|
||||||
|
Die Marke nutzt genau zwei Farben: <b>Tinte #243447</b> und <b>Petrol #0F766E</b>
|
||||||
|
(auf dunklem Grund #F3F6F9 und #45C4B4). Die Pastelltöne bleiben ausschließlich
|
||||||
|
<b>Statusfarben im Produkt</b> und erscheinen nie im Logo — so bleibt die Marke
|
||||||
|
ruhig und die Status-Semantik eindeutig. Der gestrichelte Zweig zeigt immer nach
|
||||||
|
rechts unten und behält sein Strichmuster; einfarbige Variante: alles in Tinte,
|
||||||
|
Strichelung bleibt. Wortbild in IBM Plex Sans SemiBold mit der Zweiteilung
|
||||||
|
<b>Werk</b> / <b style="color:var(--or)">baum</b>; für CLI, npm und
|
||||||
|
Code-Kontexte konsequent <b>kleingeschrieben</b>: <span style="font-family:'IBM Plex Mono',monospace">werkbaum</span>.
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
# Werkbaum · Frontend
|
||||||
|
|
||||||
|
Editor: `index.html` ist der funktionierende Prototyp (Text links,
|
||||||
|
Diagramm rechts, Toggles für transponierte Ansicht und verworfene Elemente).
|
||||||
|
|
||||||
|
## Konventionen
|
||||||
|
- Vanilla HTML/CSS/JS, ES-Module; keine Frameworks. Testwerkzeug (Vitest) ok.
|
||||||
|
- Parser und Renderer müssen headless (ohne Editor-UI) nutzbar bleiben —
|
||||||
|
Basis für SVG-Export und Mermaid-Plugin (docs/ROADMAP.md).
|
||||||
|
- Design: Farben/Typografie beibehalten (CSS-Variablen, IBM Plex);
|
||||||
|
Statusfarben sind in SPEC §4 normiert. Marke nach ../brand/BRAND.md;
|
||||||
|
Pastelltöne nie im Logo.
|
||||||
|
|
||||||
|
## Stolperfallen
|
||||||
|
- Abzweig-Linien zielen auf die **Knotenmitte** (fester 23-px-Offset,
|
||||||
|
`line-height: 1.3`), nicht auf die Mitte des Teilbaums — bei Layout-
|
||||||
|
Änderungen beide Modi (normal + „schmal (vertikal)") prüfen.
|
||||||
|
- Extraktionsreihenfolge im Parser nicht umstellen: Kommentar → Zeichen/
|
||||||
|
Status → URL → Größe → Tags (sonst kollidiert `@` in URLs).
|
||||||
|
- „verworfen" ist per Default ausgeblendet; Filterlogik steckt in
|
||||||
|
`visibleChildren()` und muss bei Renderer-Umbauten erhalten bleiben.
|
||||||
@@ -0,0 +1,494 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Werkbaum · WBS-Editor</title>
|
||||||
|
<link rel="icon" type="image/svg+xml" href="../docs/brand/favicon.svg">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
:root{
|
||||||
|
--paper:#F3F6F9;
|
||||||
|
--grid:rgba(36,52,71,.055);
|
||||||
|
--ink:#243447;
|
||||||
|
--line:#41556E;
|
||||||
|
--card:#FFFFFF;
|
||||||
|
--muted:#6B7A8C;
|
||||||
|
--or:#0F766E;
|
||||||
|
--warn:#B45309;
|
||||||
|
--r:8px;
|
||||||
|
}
|
||||||
|
*{box-sizing:border-box;margin:0;padding:0}
|
||||||
|
body{
|
||||||
|
font-family:'IBM Plex Sans',system-ui,sans-serif;
|
||||||
|
color:var(--ink);
|
||||||
|
background:
|
||||||
|
repeating-linear-gradient(0deg,transparent 0 23px,var(--grid) 23px 24px),
|
||||||
|
repeating-linear-gradient(90deg,transparent 0 23px,var(--grid) 23px 24px),
|
||||||
|
var(--paper);
|
||||||
|
min-height:100vh;
|
||||||
|
padding:32px 20px 56px;
|
||||||
|
}
|
||||||
|
header{max-width:1200px;margin:0 auto 24px}
|
||||||
|
h1{font-size:1.25rem;font-weight:600;letter-spacing:-.01em}
|
||||||
|
header p{margin-top:4px;color:var(--muted);font-size:.9rem}
|
||||||
|
|
||||||
|
.app{
|
||||||
|
max-width:1200px;margin:0 auto;
|
||||||
|
display:grid;grid-template-columns:360px 1fr;gap:20px;
|
||||||
|
align-items:start;
|
||||||
|
}
|
||||||
|
@media (max-width:820px){ .app{grid-template-columns:1fr} }
|
||||||
|
|
||||||
|
.panel{
|
||||||
|
background:var(--card);
|
||||||
|
border:1px solid rgba(36,52,71,.14);
|
||||||
|
border-radius:12px;
|
||||||
|
overflow:hidden;
|
||||||
|
}
|
||||||
|
.panel-head{
|
||||||
|
padding:10px 16px;
|
||||||
|
display:flex;justify-content:space-between;align-items:center;gap:14px;
|
||||||
|
font-family:'IBM Plex Mono',monospace;
|
||||||
|
font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
|
||||||
|
color:var(--muted);
|
||||||
|
border-bottom:1px solid rgba(36,52,71,.1);
|
||||||
|
flex-wrap:wrap;
|
||||||
|
}
|
||||||
|
.panel-head>span{margin-right:auto}
|
||||||
|
.switch{
|
||||||
|
display:flex;align-items:center;gap:7px;cursor:pointer;
|
||||||
|
text-transform:none;letter-spacing:0;
|
||||||
|
font-family:'IBM Plex Sans',sans-serif;font-size:.78rem;color:var(--muted);
|
||||||
|
}
|
||||||
|
.switch input{position:absolute;opacity:0;width:0;height:0}
|
||||||
|
.switch i{
|
||||||
|
width:30px;height:17px;border-radius:999px;background:#C6CFD8;
|
||||||
|
position:relative;transition:background .15s;flex:0 0 auto;
|
||||||
|
}
|
||||||
|
.switch i::before{
|
||||||
|
content:'';position:absolute;top:2px;left:2px;width:13px;height:13px;
|
||||||
|
border-radius:50%;background:#fff;transition:left .15s;
|
||||||
|
box-shadow:0 1px 2px rgba(36,52,71,.25);
|
||||||
|
}
|
||||||
|
.switch input:checked + i{background:var(--or)}
|
||||||
|
.switch input:checked + i::before{left:15px}
|
||||||
|
textarea{
|
||||||
|
display:block;width:100%;min-height:380px;
|
||||||
|
border:0;outline:none;resize:vertical;
|
||||||
|
padding:14px 16px;
|
||||||
|
font-family:'IBM Plex Mono',monospace;
|
||||||
|
font-size:.85rem;line-height:1.7;
|
||||||
|
color:var(--ink);background:var(--card);
|
||||||
|
tab-size:2;
|
||||||
|
}
|
||||||
|
.hint{
|
||||||
|
padding:12px 16px;border-top:1px dashed rgba(36,52,71,.18);
|
||||||
|
font-size:.8rem;color:var(--muted);line-height:1.7;
|
||||||
|
}
|
||||||
|
.hint code{
|
||||||
|
font-family:'IBM Plex Mono',monospace;font-size:.75rem;
|
||||||
|
background:var(--paper);border:1px solid rgba(36,52,71,.12);
|
||||||
|
border-radius:4px;padding:0 5px;
|
||||||
|
}
|
||||||
|
.hint .or-code{color:var(--or);border-color:rgba(15,118,110,.4)}
|
||||||
|
|
||||||
|
.diagram{
|
||||||
|
padding:28px 16px 24px;
|
||||||
|
overflow-x:auto;
|
||||||
|
background:transparent;
|
||||||
|
}
|
||||||
|
.panel.right{background:rgba(255,255,255,.6)}
|
||||||
|
.warnings{padding:0 16px 14px;font-size:.8rem;color:var(--warn)}
|
||||||
|
.warnings div{margin-top:4px}
|
||||||
|
.empty{color:var(--muted);font-size:.85rem;padding:8px 4px}
|
||||||
|
|
||||||
|
/* ---------- Baum ---------- */
|
||||||
|
.tree{width:max-content;margin:0 auto;list-style:none}
|
||||||
|
.tree ul{list-style:none}
|
||||||
|
.tree li{display:flex;flex-direction:column;align-items:center;position:relative}
|
||||||
|
.tree > li + li{margin-top:36px}
|
||||||
|
|
||||||
|
.node{
|
||||||
|
position:relative;
|
||||||
|
color:var(--ink);
|
||||||
|
background:var(--card);
|
||||||
|
border:1.5px solid var(--line);
|
||||||
|
border-radius:var(--r);
|
||||||
|
padding:7px 14px;
|
||||||
|
font-size:.88rem;font-weight:500;line-height:1.3;
|
||||||
|
white-space:nowrap;
|
||||||
|
box-shadow:0 1px 2px rgba(36,52,71,.08);
|
||||||
|
}
|
||||||
|
a.node{text-decoration:none;cursor:pointer}
|
||||||
|
a.node:hover{box-shadow:0 2px 8px rgba(36,52,71,.22)}
|
||||||
|
.ext{font-size:.72em;margin-left:5px;opacity:.55}
|
||||||
|
.size{
|
||||||
|
position:absolute;top:-9px;right:-9px;
|
||||||
|
font-family:'IBM Plex Mono',monospace;
|
||||||
|
font-size:.58rem;font-weight:500;letter-spacing:.02em;
|
||||||
|
background:var(--ink);color:#fff;
|
||||||
|
border:1.5px solid var(--card);
|
||||||
|
border-radius:999px;padding:1px 6px;line-height:1.4;
|
||||||
|
}
|
||||||
|
.node.needs{outline:2px dashed var(--warn);outline-offset:2px}
|
||||||
|
.tags{
|
||||||
|
position:absolute;right:-9px;bottom:-9px;
|
||||||
|
display:flex;gap:3px;
|
||||||
|
}
|
||||||
|
.tag{
|
||||||
|
font-family:'IBM Plex Mono',monospace;
|
||||||
|
font-size:.58rem;font-weight:500;letter-spacing:.02em;
|
||||||
|
background:#EEF1F4;color:var(--ink);
|
||||||
|
border:1.5px solid var(--line);
|
||||||
|
border-radius:999px;padding:1px 6px;line-height:1.4;
|
||||||
|
box-shadow:0 0 0 1.5px var(--card);
|
||||||
|
}
|
||||||
|
.ghost-node{
|
||||||
|
position:relative;margin-top:14px;
|
||||||
|
border:1.5px dashed var(--warn);
|
||||||
|
color:var(--warn);background:rgba(180,83,9,.06);
|
||||||
|
border-radius:var(--r);padding:4px 12px;
|
||||||
|
font-size:.74rem;font-style:italic;white-space:nowrap;
|
||||||
|
}
|
||||||
|
.ghost-node::before{
|
||||||
|
content:'';position:absolute;top:-14px;left:50%;height:14px;
|
||||||
|
border-left:2px dashed var(--warn);
|
||||||
|
}
|
||||||
|
.root-node{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600;padding:9px 20px}
|
||||||
|
|
||||||
|
/* --- ALL OF: Kinder nebeneinander, durchgezogener Verteiler --- */
|
||||||
|
ul.and{display:flex;align-items:flex-start;position:relative;padding-top:14px}
|
||||||
|
ul.and::before{
|
||||||
|
content:'';position:absolute;top:0;left:50%;height:14px;border-left:2px solid var(--line);
|
||||||
|
}
|
||||||
|
ul.and>li{padding:16px 12px 0}
|
||||||
|
ul.and>li::before,
|
||||||
|
ul.and>li::after{
|
||||||
|
content:'';position:absolute;top:0;right:50%;
|
||||||
|
border-top:2px solid var(--line);width:50%;height:16px;
|
||||||
|
}
|
||||||
|
ul.and>li::after{right:auto;left:50%;border-left:2px solid var(--line)}
|
||||||
|
ul.and>li:only-child{padding-top:14px}
|
||||||
|
ul.and>li:only-child::before,ul.and>li:only-child::after{border-top:none}
|
||||||
|
ul.and>li:only-child::after{border-left:2px solid var(--line);height:14px}
|
||||||
|
ul.and>li:first-child::before,
|
||||||
|
ul.and>li:last-child::after{border:0 none}
|
||||||
|
ul.and>li:last-child::before{border-right:2px solid var(--line);border-radius:0 6px 0 0}
|
||||||
|
ul.and>li:first-child::after{border-radius:6px 0 0 0}
|
||||||
|
|
||||||
|
/* --- ANY OF: durchgezogene Linie links, gestrichelte Abzweige --- */
|
||||||
|
li.has-or{align-items:flex-start}
|
||||||
|
ul.or{
|
||||||
|
display:flex;flex-direction:column;
|
||||||
|
align-items:flex-start;
|
||||||
|
position:relative;
|
||||||
|
padding-top:14px;
|
||||||
|
}
|
||||||
|
ul.or::before{
|
||||||
|
content:'';position:absolute;top:0;left:9px;height:14px;border-left:2px solid var(--or);
|
||||||
|
}
|
||||||
|
ul.or>li{position:relative;align-items:flex-start;padding:5px 0 5px 30px}
|
||||||
|
/* Abzweig auf Höhe der Knoten-Mitte (5px li-Padding + halbe Knotenhöhe), nicht Mitte des Teilbaums */
|
||||||
|
ul.or>li::before{
|
||||||
|
content:'';position:absolute;left:9px;top:23px;width:21px;border-top:2px dashed var(--or);
|
||||||
|
}
|
||||||
|
ul.or>li::after{
|
||||||
|
content:'';position:absolute;left:9px;top:0;height:100%;border-left:2px solid var(--or);
|
||||||
|
}
|
||||||
|
ul.or>li:last-child::after{height:23px}
|
||||||
|
ul.or .node{
|
||||||
|
border-color:var(--or);
|
||||||
|
box-shadow:none;
|
||||||
|
font-weight:400;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Status (Pastell) ---------- */
|
||||||
|
.node.st-idee {background:#EBEDEF;border-color:#A2ABB5;color:var(--ink)}
|
||||||
|
.node.st-geplant {background:#EBE4F6;border-color:#A991D4;color:var(--ink)}
|
||||||
|
.node.st-arbeit {background:#FADDE4;border-color:#D897A8;color:var(--ink)}
|
||||||
|
.node.st-durchstich{background:#FBF2CE;border-color:#D9BE63;color:var(--ink)}
|
||||||
|
.node.st-fertig {background:#DCF1DE;border-color:#86C293;color:var(--ink)}
|
||||||
|
.node.st-prod {background:#DBEAF8;border-color:#85ACD7;color:var(--ink)}
|
||||||
|
.node.st-verworfen{
|
||||||
|
background:#F1F2F4;border-color:#B3BAC2;border-style:dashed;
|
||||||
|
color:var(--muted);text-decoration:line-through;box-shadow:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
|
||||||
|
.chip{
|
||||||
|
font-family:'IBM Plex Mono',monospace;font-size:.72rem;
|
||||||
|
border:1.5px solid;border-radius:6px;padding:2px 8px;
|
||||||
|
color:var(--ink);white-space:nowrap;
|
||||||
|
}
|
||||||
|
.chip.st-idee {background:#EBEDEF;border-color:#A2ABB5}
|
||||||
|
.chip.st-geplant {background:#EBE4F6;border-color:#A991D4}
|
||||||
|
.chip.st-arbeit {background:#FADDE4;border-color:#D897A8}
|
||||||
|
.chip.st-durchstich{background:#FBF2CE;border-color:#D9BE63}
|
||||||
|
.chip.st-fertig {background:#DCF1DE;border-color:#86C293}
|
||||||
|
.chip.st-prod {background:#DBEAF8;border-color:#85ACD7}
|
||||||
|
.chip.st-verworfen{background:#F1F2F4;border-color:#B3BAC2;border-style:dashed;color:var(--muted);text-decoration:line-through}
|
||||||
|
|
||||||
|
/* ---------- Vertikal-Modus (transponiert) ---------- */
|
||||||
|
.tree.vertical{margin:0}
|
||||||
|
.tree.vertical li{align-items:flex-start}
|
||||||
|
.tree.vertical ul.and{flex-direction:column;align-items:flex-start;padding-top:14px}
|
||||||
|
.tree.vertical ul.and::before{left:9px;height:14px}
|
||||||
|
.tree.vertical ul.and>li{padding:5px 0 5px 30px}
|
||||||
|
.tree.vertical ul.and>li::before{
|
||||||
|
left:9px;right:auto;top:23px;width:21px;height:0;
|
||||||
|
border:0;border-top:2px solid var(--line);border-radius:0;
|
||||||
|
}
|
||||||
|
.tree.vertical ul.and>li::after{
|
||||||
|
left:9px;right:auto;top:0;width:0;height:100%;
|
||||||
|
border:0;border-left:2px solid var(--line);border-radius:0;
|
||||||
|
}
|
||||||
|
.tree.vertical ul.and>li:last-child::after{height:23px}
|
||||||
|
|
||||||
|
/* All-of transponiert: Linie läuft rechts aus dem Überknoten heraus (wie Richtung LR),
|
||||||
|
Any-of bleibt unten-links — dadurch klar unterscheidbare Austrittsseiten */
|
||||||
|
.tree.vertical li.has-and{flex-direction:row;align-items:flex-start}
|
||||||
|
.tree.vertical li.has-and>ul.and{padding-top:0}
|
||||||
|
.tree.vertical li.has-and>ul.and::before{
|
||||||
|
left:0;top:17px;width:9px;height:0;
|
||||||
|
border-left:0;border-top:2px solid var(--line);
|
||||||
|
}
|
||||||
|
.tree.vertical li.has-and>ul.and>li:first-child::after{top:17px;height:calc(100% - 17px)}
|
||||||
|
.tree.vertical li.has-and>ul.and>li:only-child::after{top:17px;height:6px}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<h1 style="display:flex;align-items:center;gap:11px">
|
||||||
|
<svg width="34" height="34" viewBox="0 0 64 64" aria-hidden="true">
|
||||||
|
<rect x="22" y="5" width="20" height="12" rx="3.5" fill="#243447"/>
|
||||||
|
<path d="M32 17 V22 M14 22 H50 M14 22 V27 M50 22 V27" fill="none" stroke="#243447" stroke-width="3"/>
|
||||||
|
<rect x="4" y="27" width="20" height="12" rx="3.5" fill="#fff" stroke="#243447" stroke-width="3"/>
|
||||||
|
<rect x="40" y="27" width="20" height="12" rx="3.5" fill="#fff" stroke="#243447" stroke-width="3"/>
|
||||||
|
<path d="M50 39 V46" fill="none" stroke="#0F766E" stroke-width="3" stroke-dasharray="4 4"/>
|
||||||
|
<rect x="40" y="46" width="20" height="12" rx="3.5" fill="#fff" stroke="#0F766E" stroke-width="3"/>
|
||||||
|
</svg>
|
||||||
|
<span>Werk<span style="color:var(--or)">baum</span></span>
|
||||||
|
</h1>
|
||||||
|
<p>Links die textuelle Struktur bearbeiten — rechts entsteht das Diagramm live.</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="app">
|
||||||
|
<div class="panel">
|
||||||
|
<div class="panel-head">Struktur (Text)</div>
|
||||||
|
<textarea id="src" spellcheck="false"></textarea>
|
||||||
|
<div class="hint">
|
||||||
|
Einrückung (2 Leerzeichen oder Tab) definiert die Hierarchie.<br>
|
||||||
|
<code>-</code> Teilpaket, alle erforderlich <em>(all of)</em><br>
|
||||||
|
<code class="or-code">|</code> Alternative, eine wählen <em>(any of)</em><br>
|
||||||
|
Zeile ohne Zeichen = Wurzelknoten. Geschwister sollten dasselbe Zeichen tragen.<br>
|
||||||
|
Status als Kästchen nach dem Zeichen, z. B. <code>- [~] Frontend</code>:
|
||||||
|
<div class="chips">
|
||||||
|
<span class="chip st-idee">[?] Idee</span>
|
||||||
|
<span class="chip st-geplant">[ ] geplant</span>
|
||||||
|
<span class="chip st-arbeit">[~] in Arbeit</span>
|
||||||
|
<span class="chip st-durchstich">[/] Durchstich</span>
|
||||||
|
<span class="chip st-fertig">[x] fertig</span>
|
||||||
|
<span class="chip st-prod">[^] in Produktion</span>
|
||||||
|
<span class="chip st-verworfen">[-] verworfen</span>
|
||||||
|
</div>
|
||||||
|
Aufwand als T-Shirt-Größe in Klammern, Link einfach als URL anhängen:<br>
|
||||||
|
<code>- [ ] Backend (L) https://…</code><br>
|
||||||
|
Ab <code>(M)</code> gilt: weiter untergliedern — fehlt die Untergliederung, erscheint ein Platzhalter im Diagramm.<br>
|
||||||
|
Kommentare mit <code>%%</code> — als ganze Zeile oder am Zeilenende.
|
||||||
|
Personen mit <code>@name</code> — erscheinen unten rechts am Knoten.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel right">
|
||||||
|
<div class="panel-head">
|
||||||
|
<span>Diagramm</span>
|
||||||
|
<label class="switch">
|
||||||
|
<input type="checkbox" id="showc"><i></i>verworfene
|
||||||
|
</label>
|
||||||
|
<label class="switch">
|
||||||
|
<input type="checkbox" id="vert"><i></i>vertikal
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="diagram"><ul class="tree" id="out"></ul></div>
|
||||||
|
<div class="warnings" id="warn"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const INITIAL = `%% Projektstruktur – Stand Sprint 14
|
||||||
|
[~] Website-Relaunch (XL) https://wiki.example.de/relaunch
|
||||||
|
- [x] Konzeption (M)
|
||||||
|
- [x] Zielgruppenanalyse (S)
|
||||||
|
- [x] Sitemap (XS)
|
||||||
|
- [~] Umsetzung (XL)
|
||||||
|
- [/] Frontend (S) https://git.example.de/frontend @anna
|
||||||
|
- [ ] Backend (L) @ben @carla
|
||||||
|
- [ ] CMS-Anbindung (M)
|
||||||
|
| [ ] WordPress
|
||||||
|
| [?] Headless CMS
|
||||||
|
| [-] Eigenentwicklung %% Aufwand zu hoch
|
||||||
|
- [?] Hosting (M)
|
||||||
|
| Cloud
|
||||||
|
| On-Premise`;
|
||||||
|
|
||||||
|
const SIZE_RANK = {XS:0, S:1, M:2, L:3, XL:4, XXL:5};
|
||||||
|
|
||||||
|
const STATUS_BY_CODE = {
|
||||||
|
'?': {key:'idee', name:'Idee'},
|
||||||
|
' ': {key:'geplant', name:'geplant'},
|
||||||
|
'~': {key:'arbeit', name:'in Arbeit'},
|
||||||
|
'/': {key:'durchstich', name:'Durchstich – funktionsbereit, Feinarbeiten offen'},
|
||||||
|
'x': {key:'fertig', name:'fertig'},
|
||||||
|
'^': {key:'prod', name:'in Produktion'},
|
||||||
|
'-': {key:'verworfen', name:'verworfen'}
|
||||||
|
};
|
||||||
|
|
||||||
|
const src = document.getElementById('src');
|
||||||
|
const out = document.getElementById('out');
|
||||||
|
const warnBox = document.getElementById('warn');
|
||||||
|
|
||||||
|
function esc(s){
|
||||||
|
return s.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Parser ---------- */
|
||||||
|
function parse(text){
|
||||||
|
const virtualRoot = {label:'', type:'and', children:[]};
|
||||||
|
const stack = [{node:virtualRoot, width:-1}];
|
||||||
|
const warnings = [];
|
||||||
|
|
||||||
|
text.split('\n').forEach((raw, i) => {
|
||||||
|
raw = raw.replace(/%%.*$/, ''); /* %%-Kommentare entfernen (Mermaid-Konvention) */
|
||||||
|
if(!raw.trim()) return;
|
||||||
|
const m = raw.match(/^([ \t]*)([-|])?\s*(?:\[([ ?~xX^\/-])]\s*)?(.*)$/);
|
||||||
|
const width = m[1].replace(/\t/g,' ').length;
|
||||||
|
const type = m[2] === '|' ? 'or' : 'and';
|
||||||
|
const status = m[3] ? STATUS_BY_CODE[m[3].toLowerCase()] : null;
|
||||||
|
|
||||||
|
let rest = m[4], url = null, size = null;
|
||||||
|
const tags = [];
|
||||||
|
rest = rest.replace(/https?:\/\/\S+/i, s => { url = s; return ''; });
|
||||||
|
rest = rest.replace(/\((XXL|XS|XL|S|M|L)\)/i, (s, g) => { size = g.toUpperCase(); return ''; });
|
||||||
|
rest = rest.replace(/@([\p{L}\p{N}._-]+)/gu, (s, g) => { tags.push(g); return ''; });
|
||||||
|
const label = rest.replace(/\s+/g, ' ').trim();
|
||||||
|
if(!label) return;
|
||||||
|
|
||||||
|
while(stack.length > 1 && stack[stack.length-1].width >= width) stack.pop();
|
||||||
|
const parent = stack[stack.length-1].node;
|
||||||
|
|
||||||
|
const node = {label, type, status, url, size, tags, children:[], line:i+1};
|
||||||
|
parent.children.push(node);
|
||||||
|
stack.push({node, width});
|
||||||
|
});
|
||||||
|
|
||||||
|
return {roots: virtualRoot.children, warnings};
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Renderer ---------- */
|
||||||
|
function gateOf(children){
|
||||||
|
return children.length && children[0].type === 'or' ? 'or' : 'and';
|
||||||
|
}
|
||||||
|
|
||||||
|
function needsBreakdown(n){
|
||||||
|
if(n.status && n.status.key === 'verworfen') return false;
|
||||||
|
return !!n.size && SIZE_RANK[n.size] >= SIZE_RANK.M && !n.children.length;
|
||||||
|
}
|
||||||
|
|
||||||
|
function visibleChildren(n){
|
||||||
|
if(showc.checked) return n.children;
|
||||||
|
return n.children.filter(k => !k.status || k.status.key !== 'verworfen');
|
||||||
|
}
|
||||||
|
|
||||||
|
const GHOST = '<div class="ghost-node">Untergliederung fehlt</div>';
|
||||||
|
|
||||||
|
function nodeHtml(n, extra){
|
||||||
|
const need = needsBreakdown(n);
|
||||||
|
const cls = ['node', extra || '', n.status ? 'st-' + n.status.key : '', need ? 'needs' : '']
|
||||||
|
.filter(Boolean).join(' ');
|
||||||
|
const title = n.status ? ` title="${n.status.name}"` : '';
|
||||||
|
const tagsHtml = n.tags && n.tags.length
|
||||||
|
? `<span class="tags">${n.tags.map(t => `<span class="tag">${esc(t)}</span>`).join('')}</span>`
|
||||||
|
: '';
|
||||||
|
const inner = esc(n.label) +
|
||||||
|
(n.url ? '<span class="ext">↗</span>' : '') +
|
||||||
|
(n.size ? `<span class="size">${n.size}</span>` : '') +
|
||||||
|
tagsHtml;
|
||||||
|
const html = n.url
|
||||||
|
? `<a class="${cls}" href="${esc(n.url).replace(/"/g,'"')}" target="_blank" rel="noopener"${title}>${inner}</a>`
|
||||||
|
: `<div class="${cls}"${title}>${inner}</div>`;
|
||||||
|
return html + (need ? GHOST : '');
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderChildren(node, warnings){
|
||||||
|
const kids = visibleChildren(node);
|
||||||
|
if(!kids.length) return '';
|
||||||
|
const types = new Set(kids.map(k => k.type));
|
||||||
|
if(types.size > 1){
|
||||||
|
warnings.push(`Zeile ${kids[0].line}: Unter „${esc(node.label)}“ sind - und | gemischt — dargestellt nach dem ersten Kind.`);
|
||||||
|
}
|
||||||
|
const gate = gateOf(kids);
|
||||||
|
const items = kids.map(k => {
|
||||||
|
const vk = visibleChildren(k);
|
||||||
|
const liCls = vk.length ? (gateOf(vk) === 'or' ? ' class="has-or"' : ' class="has-and"') : '';
|
||||||
|
return `<li${liCls}>` +
|
||||||
|
nodeHtml(k) +
|
||||||
|
renderChildren(k, warnings) +
|
||||||
|
`</li>`;
|
||||||
|
}).join('');
|
||||||
|
return `<ul class="${gate}">${items}</ul>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function render(){
|
||||||
|
let {roots} = parse(src.value);
|
||||||
|
const warnings = [];
|
||||||
|
if(!showc.checked){
|
||||||
|
roots = roots.filter(r => !r.status || r.status.key !== 'verworfen');
|
||||||
|
}
|
||||||
|
|
||||||
|
if(!roots.length){
|
||||||
|
out.innerHTML = '<div class="empty">Noch keine Struktur — einfach lostippen.</div>';
|
||||||
|
warnBox.innerHTML = '';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
out.innerHTML = roots.map(root => {
|
||||||
|
const vk = visibleChildren(root);
|
||||||
|
const liCls = vk.length ? (gateOf(vk) === 'or' ? ' class="has-or"' : ' class="has-and"') : '';
|
||||||
|
return `<li${liCls}>` +
|
||||||
|
nodeHtml(root, 'root-node') +
|
||||||
|
renderChildren(root, warnings) +
|
||||||
|
`</li>`;
|
||||||
|
}).join('');
|
||||||
|
|
||||||
|
warnBox.innerHTML = warnings.map(w => `<div>⚠ ${w}</div>`).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tab-Taste rückt ein statt den Fokus zu wechseln */
|
||||||
|
src.addEventListener('keydown', e => {
|
||||||
|
if(e.key === 'Tab'){
|
||||||
|
e.preventDefault();
|
||||||
|
const {selectionStart:s, selectionEnd:eEnd, value} = src;
|
||||||
|
src.value = value.slice(0, s) + ' ' + value.slice(eEnd);
|
||||||
|
src.selectionStart = src.selectionEnd = s + 2;
|
||||||
|
render();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
src.addEventListener('input', render);
|
||||||
|
|
||||||
|
const vert = document.getElementById('vert');
|
||||||
|
vert.addEventListener('change', () => {
|
||||||
|
out.classList.toggle('vertical', vert.checked);
|
||||||
|
});
|
||||||
|
|
||||||
|
const showc = document.getElementById('showc');
|
||||||
|
showc.addEventListener('change', render);
|
||||||
|
|
||||||
|
src.value = INITIAL;
|
||||||
|
render();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user