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.csvfür Termine). Beide Designs rendern daraus ihr eigenes Markup. - Navbar, Footer und Hero liegen je Variante zentral in
assets/components.jsund werden in die Platzhalter#site-header,#site-footer,#site-heroeingefü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
<body data-page="...">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, dannhttp://localhost:8000/varianten/rot/bzw..../grau/öffnen. - Der ELW 1 hat aktuell keine Detailseite – die Karte ist mit
„Demnächst“ markiert (
inArbeit: trueinfahrzeuge.js). index.html/index_old.htmlim Root sowie die Ordnergeschichte/,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!).