74 lines
3.0 KiB
Markdown
74 lines
3.0 KiB
Markdown
# 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 `<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`, 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!).
|