Workflow & Datenfluss (Mermaid Ablaufdiagramm)
Das folgende Ablaufdiagramm veranschaulicht den nahtlosen Datenfluss von der Corporate Design Erstellung (Phase 1) über die HTML & Bootstrap Anpassung im Editor (Phase 2) bis zur Aufgaben-Erfassung im Relaunch Projekt-Tracker (Phase 3).
flowchart TD
subgraph M1["🎨 Phase 1: Brand Suite (Corporate Design)"]
A1["Stammprojekt wählen / CSV importieren"] --> A2["Farben & Typografie festlegen"]
A2 --> A3["SVG Logo & WOFF Fonts hochladen"]
A3 --> A4["DTP Druck-Normen (DIN 5008 / Visitenkarte) definieren"]
A4 --> A5["DTP Canvas & Clipboard PNG Export"]
A4 --> A6["⚡ CD Tokens generieren"]
end
subgraph M2["🛠️ Phase 2: Design-Editor (Tailwind & Bootstrap 5.3)"]
B1["HTML-Datei laden / Demo-Template wählen"] --> B2["Live Viewport (Desktop / Tablet / Mobile)"]
A6 -- "⚡ CD in Editor übernehmen" --> B3["CSS Variablen & Farbschema anwenden"]
B2 --> B4["Visual Inspector & Tailwind-zu-Bootstrap Mapping"]
B3 --> B5["Code Viewer & SCSS / Fluid Export"]
end
subgraph M3["📊 Phase 3: Projekt-Übersicht (Relaunch Tracker)"]
C1["Projektstand Dashboard"] --> C2["Umsetzungs & Review Fortschrittsbalken"]
B2 -- "✅ In Übersicht eintragen" --> C3["Neue Seite/Modul als Aufgabe erfassen"]
C3 --> C4["Design, Technik, Inhalt & SEO Haken pflegen"]
C4 --> C5["CSV Export & Server Sync (save-relaunch.php)"]
end
style M1 fill:#1e293b,stroke:#3b82f6,stroke-width:2px,color:#fff
style M2 fill:#0f172a,stroke:#6366f1,stroke-width:2px,color:#fff
style M3 fill:#f8fafc,stroke:#10b981,stroke-width:2px,color:#333
1. Brand Suite
- Corporate Design Tokens: Farbpaletten (Primär, Akzent, Text) & Typografie.
- DTP Norm-Canvases: Interaktive Arbeitsflächen für DIN 5008 Briefe & Visitenkarten.
- Vector & Font Hub: Upload eigener SVG Logos und WOFF/TTF Schriftarten.
- Clipboard Engine: Rechtsklick-Export von Layout-Elementen direkt als PNG.
2. Design-Editor
- HTML Import: Unterstützt HTML Templates & Tailwind Class Parser.
- Visual Inspector: Klick-Analyse im Live-Iframe mit Breadcrumb-Pfad.
- Bootstrap 5.3 Mapping: Automatische Umwandlung von Tailwind-Klassen.
- TYPO3 Fluid Export: Generiert SCSS Variablen und Fluid Content Element Templates.
3. Relaunch-Tracker
- Projektstand Tabelle: Nachverfolgung aller Unterseiten & Module.
- Bilder-Check: Erfassung von vorhanden/fehlenden Medien pro Seite.
- Fortschrittsbalken: Automatische Berechnung von Technik & SEO-Reviews.
- CSV & Server Sync: Speicherung in LocalStorage oder PHP Backend.
4-Schritte Schnellstart Anleitung
1
Brand Suite öffnen & Tokens definieren
Wählen Sie das Stammprojekt (z.B. 7°MS Münster) oder geben Sie eigene Farb-Hex-Codes und Schriftarten an.
2
Corporate Design übertragen
Klicken Sie auf den Button ⚡ CD in Editor übernehmen. Das gesamte Farbschema und die Radien werden in den Design-Editor eingespeist.
3
HTML anpassen & inspizieren
Laden Sie eine HTML-Datei oder wählen Sie ein Demo-Template. Klicken Sie auf Elemente in der Live-Vorschau, um Tailwind-Klassen anzupassen.
4
Projektstand dokumentieren
Klicken Sie auf ✅ In Übersicht eintragen, um die aktuelle Seite direkt im Relaunch-Tracker als Aufgabe zu erfassen.
System Dateistruktur
├── index.html # Haupt-Einstiegsseite mit vereinheitlichter Navigation
├── readme.html # Diese interaktive Dokumentation & Ablaufdiagramm
├── css/
│ ├── app.css # Globale Grundstile & Header-Layouts
│ ├── editor.css # Design-Editor UI & Inspector Styles
│ ├── brand-suite.css # Brand Suite DTP, Lineale, Normbögen & Canvas Styles
│ └── uebersicht.css # Project Tracker Tabellen & Fortschrittsbalken Styles
├── js/
│ ├── app.js # Haupt-Controller & View-Switcher
│ ├── brandSuiteManager.js # Master Brand Suite v9.1 Engine & Canvas Dragger
│ ├── uebersichtManager.js # Project Tracker Engine & CSV Parser
│ ├── themeManager.js # Live CSS Variable & Preset Controller
│ ├── previewManager.js # Iframe Preview & Live Inspector Bridge
│ ├── htmlParser.js # HTML String & Element Parser
│ ├── componentDetector.js # Component Archetype Detector
│ ├── historyManager.js # Undo / Redo System
│ ├── fileLoader.js # Drag & Drop File Loader
│ └── exporter.js # HTML, SCSS & Fluid Code Converter
├── modules/
│ ├── bootstrapConverter.js # Tailwind-zu-Bootstrap 5.3 Regelwerk
│ └── typo3Exporter.js # TYPO3 Fluid Content Element Generator
├── README.md # Markdown Dokumentation
└── metadata.json # Applet Metadata & Manifest