design final

data/KURSE_README.md

@@ -0,0 +1,147 @@
+# Kurse verwalten
+
+## Kurse bearbeiten
+
+Die aktuellen Kurse werden aus der Datei `courses.csv` geladen und automatisch auf der "Über uns" Seite angezeigt.
+
+### CSV-Format
+
+Die Datei hat fünf Spalten (alle außer `title` sind optional):
+- `title` - Der Titel des Kurses (erforderlich)
+- `description` - Eine kurze Beschreibung (optional)
+- `dates` - Termine und Zeiten (optional)
+- `offen_fuer` - Zielgruppe/Altersgruppe (optional)
+- `image` - Pfad zum Kursbild (optional)
+
+**Beispiel:**
+```csv
+title,description,dates,offen_fuer,image
+Löten und Leuchten,Herstellung von Nachttischleuchten mit 3D-Design und Löttechnik,"Di 15.10. 14:00-16:00",Klasse 7-9,/static/images/courses/loeten.jpg
+Die Vogelvilla,Bau von Vogelhäusern mit Lasercutter und Holzbearbeitung,"Mi 23.10. 13:00-15:00",alle Schüler:innen,
+Robotik Intro,,,ab Klasse 5,/static/images/courses/robotik.jpg
+```
+
+### Kursbilder hinzufügen
+
+1. Speichere das Bild in `/static/images/courses/`
+2. Verwende den Pfad `/static/images/courses/dein-bild.jpg` in der CSV
+3. Empfohlene Bildgröße: mindestens 640x400 Pixel
+4. Unterstützte Formate: JPG, PNG, WebP
+
+**Tipp:** Wenn kein Bild angegeben ist, wird der Kurs ohne Bild angezeigt (nur Text).### Felder im Detail
+
+#### `title` (erforderlich)
+Der Kursname - wird immer angezeigt.
+
+#### `description` (optional)
+Kurzbeschreibung des Kurses. Wird nur angezeigt, wenn vorhanden.
+
+#### `dates` (optional)
+Termine und Uhrzeiten. Kann mehrere Termine enthalten:
+- Einzelner Termin: `Mi 23.10. 13:00-15:00`
+- Mehrere Termine: `Di 15.10. 14:00-16:00, Do 17.10. 14:00-16:00`
+- Bei Terminen mit Kommas: In Anführungszeichen setzen
+
+#### `offen_fuer` (optional)
+Freitextfeld für die Zielgruppe:
+- `Klasse 7-9`
+- `alle Schüler:innen`
+- `ab 14 Jahren`
+- `Oberstufe`
+
+### Kurs hinzufügen
+
+Einfach eine neue Zeile am Ende der Datei hinzufügen:
+```csv
+title,description,dates,offen_fuer
+Löten und Leuchten,Herstellung von Nachttischleuchten mit 3D-Design und Löttechnik,"Di 15.10. 14:00-16:00, Do 17.10. 14:00-16:00",Klasse 7-9
+Neuer Kurs,Beschreibung des neuen Kurses,"Mo 20.10. 15:00-17:00",Klasse 8-10
+```
+
+### Fehlende Informationen
+
+Alle Felder außer `title` sind optional. Beispiele:
+
+**Nur Titel und Beschreibung:**
+```csv
+title,description,dates,offen_fuer
+Workshop XYZ,Toller Workshop über Making,,
+```
+
+**Nur Titel und Termine:**
+```csv
+title,description,dates,offen_fuer
+Workshop ABC,,"Fr 25.10. 14:00",
+```
+
+**Nur Titel und Zielgruppe:**
+```csv
+title,description,dates,offen_fuer
+Workshop 123,,,Klasse 9-10
+```
+
+### Kurs entfernen
+
+Einfach die entsprechende Zeile löschen.
+
+### Wichtig
+
+- **Keine Anführungszeichen** verwenden, außer der Text enthält ein Komma
+- **Keine Zeilenumbrüche** innerhalb der Beschreibung
+- Die erste Zeile (`title,description,dates,offen_fuer,image`) muss erhalten bleiben
+- Nach dem Speichern wird die Änderung sofort auf der Website sichtbar
+
+### Darstellung auf der Website
+
+Die Kurse werden in einem **Grid-Layout** mit **Karten-Design** angezeigt:
+
+- **Große, fette Titel** (1.5em) mit pinker Unterstreichung
+- **Hover-Effekt**: Karten heben sich beim Überfahren an
+- **Responsive**: Auf Mobilgeräten eine Spalte, auf Desktop mehrere Spalten
+- **Kursbilder** (optional): 200px hoch, oben auf der Karte
+- **Metadata** am unteren Rand: Datum und Zielgruppe mit Icons
+
+**Beispiel mit Bild:**
+```
+┌─────────────────────────────┐
+│   [Kursbild 640x400]        │
+├─────────────────────────────┤
+│ Löten und Leuchten          │ ← 1.5em, fett, pink unterstrichen
+│ ─────────────────────       │
+│                             │
+│ Herstellung von Nachtisch-  │ ← Beschreibung
+│ leuchten mit 3D-Design      │
+│                             │
+├─────────────────────────────┤
+│ 📅 Dez. '24                 │ ← Metadata mit Icons
+│ 👥 Klasse 5-6               │
+└─────────────────────────────┘
+```
+
+**Beispiel ohne Bild:**
+```
+┌─────────────────────────────┐
+│ Textiles Plotten            │ ← Direkt der Titel
+│ ─────────────────           │
+│                             │
+│ Erschaffe deine eigenen     │
+│ Klamottendesigns            │
+│                             │
+├─────────────────────────────┤
+│ 📅 Mai '25                  │
+│ 👥 Jhg. 9                   │
+└─────────────────────────────┘
+```
+
+### Live-Update
+
+Die Kurse werden bei jedem Seitenaufruf neu geladen. Es ist **kein Neustart** des Servers erforderlich!
+
+### Keine Kurse anzeigen
+
+Wenn keine Kurse stattfinden, einfach alle Zeilen außer der Kopfzeile löschen:
+```csv
+title,description
+```
+
+Die Seite zeigt dann: "Aktuell sind keine Kurse geplant. Schaut bald wieder vorbei!"