diff --git a/README.md b/README.md index 86cec52..a4d9ae0 100644 --- a/README.md +++ b/README.md @@ -1,73 +1,75 @@ # Feuerwehr Stadt Wehlen – Webseite -## Zwei komplette Design-Varianten (Redesign) +Modernes Redesign im hellen „Modern Light"-Design: hellgrauer Hintergrund, +weiße abgerundete Karten, roter Header mit Logo-Muster. Vollständig +mobile-optimiert (responsives Grid, Hamburger-Menü, Karten statt Tabellen +auf dem Smartphone). -Die Seite existiert in zwei vollständig eigenständigen Designs mit -identischem Inhalt – zum Vergleich und zur Entscheidungsfindung: +## Seiten -| 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`. +| Datei | Inhalt | +|---|---| +| `index.html` | Start: Hero, Gerätehaus, Termine, Schnellzugriff | +| `geschichte.html` | Wehrgeschichte seit 1865 als Accordion (inkl. Zeitungsartikel 1921) | +| `technik.html` | Fahrzeug-Übersicht mit Kategorie-Filter | +| `fahrzeug.html` | Detailseite, datengetrieben via `?id=lf10` usw. | +| `mitglieder.html` | Organigramm & Mitgliederlisten | +| `dienstplan.html` | Nächste Termine + komplette Termintabelle | +| `veranstaltungen.html` | Feste & Veranstaltungen (aus der CSV gefiltert) | +| `kontakt.html` | Kontakt & Impressum | ## 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 +assets/ + style.css Komplettes Design (Farben in :root-Variablen) + components.js Navbar, Footer, Hero + alle Renderer +data/ ZENTRALE DATENQUELLEN – Inhalte nur HIER pflegen + fahrzeuge.js Fahrzeuge/Boote/Anhänger inkl. Technikdaten & Bilder + geschichte.js Geschichts-Epochen + mitglieder.js Organigramm & Mitgliederlisten + dienste.js Liest dienstplan/dienstplan.csv, befüllt alle Terminbereiche +dienstplan/ + dienstplan.csv Termine (einzige Quelle für Dienstplan & Veranstaltungen) +bilder/, technik/, geschichte/ Bildmaterial ``` ## 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. +- Inhalte liegen zentral in `data/` bzw. `dienstplan/dienstplan.csv` – + die Seiten rendern daraus automatisch ihr Markup. +- Navbar, Footer und Hero liegen in `assets/components.js` und werden in + die Platzhalter `#site-header` / `#site-footer` / `#site-hero` eingefügt. +- `window.FFW_BASE` (im `` jeder Seite) ist der Pfad zum + Projekt-Root – bei Seiten im Root einfach `""`. - 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) | +| Termine / Dienstplan / Veranstaltungen | `dienstplan/dienstplan.csv` | +| Fahrzeugdaten, Bilder, Beladung | `data/fahrzeuge.js` | +| Geschichtstexte | `data/geschichte.js` | +| Mitglieder / Organigramm | `data/mitglieder.js` | +| Menü / Footer / Hero | `assets/components.js` | +| Farben | `assets/style.css` (`:root`-Variablen oben) | -## Hinweise +## Offene TODOs -- 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!). +- Kontaktdaten (Adresse, E-Mail) in `kontakt.html` ergänzen + (mit `TODO`-Kommentaren markiert) +- ELW 1: Detailseite fehlt noch – Karte ist als „Demnächst" markiert + (`inArbeit: true` in `data/fahrzeuge.js`) + +## Lokal ansehen + +```sh +python3 -m http.server 8000 +# dann http://localhost:8000/ öffnen +``` + +## Hinweis + +Die vorherigen Design-Entwürfe (rote Dark-Variante, alter Stand) sind in +der Git-Historie erhalten. diff --git a/varianten/grau/assets/components.js b/assets/components.js similarity index 94% rename from varianten/grau/assets/components.js rename to assets/components.js index d05e0a7..488646f 100644 --- a/varianten/grau/assets/components.js +++ b/assets/components.js @@ -1,8 +1,8 @@ /* ====================================================== - components.js – VARIANTE GRAU (Modern Light Theme) + components.js – Feuerwehr Stadt Wehlen (Modern Light) ------------------------------------------------------ Rendert alle wiederkehrenden Elemente und die Inhalte - aus den zentralen Daten-Dateien (varianten/shared/). + aus den zentralen Daten-Dateien (data/). Erwartet window.FFW_BASE (Pfad zum Projekt-Root). Aktiver Navigationspunkt über . @@ -39,8 +39,8 @@ - - + + @@ -49,23 +49,31 @@ const FOOTER = `