# Feuerwehr Stadt Wehlen – Webseite ## Zwei komplette Design-Varianten (Redesign) Die Seite existiert in zwei vollständig eigenständigen Designs mit identischem Inhalt – zum Vergleich und zur Entscheidungsfindung: | Variante | Pfad | Design | |---|---|---| | **Rot** | `varianten/rot/` | Dark Theme: schwarz-roter Hintergrund, gelbe Akzente, kantige Shapes, große Hero-Sektion, Zeitleisten-Tabs | | **Grau** | `varianten/grau/` | Light Theme: hellgrauer Hintergrund, weiße abgerundete Karten, roter Header mit Logo-Muster, Accordion, Kategorie-Filter | Jede Variante umfasst 6 Seiten: `index.html` (Start), `geschichte.html`, `technik.html`, `fahrzeug.html` (Detailseite, datengetrieben via `?id=lf10` usw.), `mitglieder.html` (Organigramm), `dienstplan.html`. ## Struktur ``` varianten/ shared/ ZENTRALE DATENQUELLEN (für beide Designs) fahrzeuge.js Alle Fahrzeuge/Boote/Anhänger inkl. Technikdaten geschichte.js Alle 5 Geschichts-Epochen mitglieder.js Organigramm & Mitgliederlisten dienste.js CSV-Logik für Dienstplan & Termine rot/ index.html, geschichte.html, technik.html, fahrzeug.html, mitglieder.html, dienstplan.html assets/ rot.css Komplettes Dark-Theme components.js Navbar, Footer, Hero + alle Renderer grau/ (gleiche 6 Seiten) assets/ grau.css Komplettes Light-Theme components.js Navbar, Footer, Hero + alle Renderer ``` ## Prinzip - **Inhalte werden nur an EINER Stelle gepflegt**: in `varianten/shared/` (bzw. `dienstplan/dienstplan.csv` für Termine). Beide Designs rendern daraus ihr eigenes Markup. - Navbar, Footer und Hero liegen je Variante zentral in `assets/components.js` und werden in die Platzhalter `#site-header`, `#site-footer`, `#site-hero` eingefügt. - Jede Seite setzt `window.FFW_BASE = "../../"` (Pfad zum Projekt-Root), damit Bilder und die CSV auch aus den Unterordnern gefunden werden. - Der aktive Menüpunkt wird über `` gesteuert. ## Inhalte ändern | Was | Wo | |---|---| | Termine / Dienstplan | `dienstplan/dienstplan.csv` | | Fahrzeugdaten, Bilder, Beladung | `varianten/shared/fahrzeuge.js` | | Geschichtstexte | `varianten/shared/geschichte.js` | | Mitglieder / Organigramm | `varianten/shared/mitglieder.js` | | Menü / Footer | `varianten/{rot,grau}/assets/components.js` | | Farben eines Designs | `varianten/{rot,grau}/assets/*.css` (`:root`-Variablen) | ## Hinweise - Zum lokalen Ansehen einen Server starten (wegen CSV-Fetch): `python3 -m http.server 8000`, dann `http://localhost:8000/varianten/rot/` bzw. `.../grau/` öffnen. - Der ELW 1 hat aktuell keine Detailseite – die Karte ist mit „Demnächst“ markiert (`inArbeit: true` in `fahrzeuge.js`). - `index.html` / `index_old.html` im Root sowie die Ordner `geschichte/`, `technik/`, `mitglieder/` enthalten den ALTEN Stand und können nach der Design-Entscheidung entfernt werden (die Bilder darin werden vom Redesign weiterverwendet – vorher Bilder umziehen!).