design final

data/KURSE_QUICKREF.md

@@ -0,0 +1,104 @@
+# Kurse Schnellanleitung / Quick Reference
+
+## 🚀 Kurs hinzufügen (Add Course)
+
+1. Öffne `data/courses.csv` (Open the file)
+2. Füge eine neue Zeile hinzu (Add a new line):
+
+```csv
+Kurs Titel,Beschreibung (optional),Termine (optional),Zielgruppe (optional)
+```
+
+### Beispiele (Examples):
+
+**Vollständiger Kurs (Full course):**
+```csv
+Robotik Workshop,LEGO SPIKE Programmierung,"Mo 11.11. 15:00, Mi 13.11. 15:00",Klasse 8-10
+```
+
+**Nur Titel + Termin (Title + Date only):**
+```csv
+Offene Werkstatt,,"Di 12.11. 14:00-16:00",
+```
+
+**Nur Titel + Zielgruppe (Title + Audience only):**
+```csv
+Kommt bald,,,alle Schüler:innen
+```
+
+## 📋 Spalten (Columns)
+
+| Spalte | Pflicht? | Beispiel |
+|--------|----------|----------|
+| `title` | ✅ JA | `Löten und Leuchten` |
+| `description` | ❌ Nein | `Herstellung von Nachttischleuchten...` |
+| `dates` | ❌ Nein | `Di 15.10. 14:00-16:00` |
+| `offen_fuer` | ❌ Nein | `Klasse 7-9` |
+
+## ⚡ Wichtige Regeln (Important Rules)
+
+1. **Erste Zeile nie löschen!** (Never delete header row)
+   ```csv
+   title,description,dates,offen_fuer
+   ```
+
+2. **Kommas in Terminen:** Anführungszeichen verwenden
+   ```csv
+   Workshop,"Text","Mo 10:00, Di 10:00",Klasse 8
+   ```
+
+3. **Leere Felder:** Einfach leer lassen
+   ```csv
+   Nur Titel,,,
+   ```
+
+4. **Keine Zeilenumbrüche** in den Feldern
+
+## 🎨 Darstellung (Display)
+
+```
+┌─────────────────────────────────────┐
+│ Kurs Titel                          │  ← Immer sichtbar
+│ Beschreibung hier...                │  ← Nur wenn vorhanden
+│ 📅 Di 15.10. 14:00-16:00           │  ← Nur wenn vorhanden
+│ 👥 Offen für: Klasse 7-9           │  ← Nur wenn vorhanden
+└─────────────────────────────────────┘
+```
+
+## 📝 Vorlage zum Kopieren (Template to Copy)
+
+```csv
+Neuer Kurs,Beschreibung hier,Termine hier,Zielgruppe hier
+```
+
+## ✅ Checkliste (Checklist)
+
+- [ ] CSV-Datei geöffnet: `data/courses.csv`
+- [ ] Neue Zeile am Ende hinzugefügt
+- [ ] Titel ausgefüllt (erforderlich!)
+- [ ] Optionale Felder ausgefüllt oder leer gelassen
+- [ ] Bei Kommas in Terminen: Anführungszeichen gesetzt
+- [ ] Datei gespeichert
+- [ ] Website neu laden → Kurs erscheint sofort!
+
+## 🔄 Live-Update
+
+**Kein Server-Neustart nötig!** (No restart needed!)
+Einfach Datei speichern und Website neu laden.
+
+## ❓ Beispiel-Szenarien
+
+### Vergangener Kurs (Past course)
+```csv
+Löten Basics,Grundlagen des Lötens,"Abgeschlossen: 10.10., 12.10.",Klasse 7-8
+```
+
+### Zukünftiger Kurs (Future course)
+```csv
+Drohnen Flug,Erste Schritte mit Drohnen,"Kommt: 20.11. 15:00",ab Klasse 9
+```
+
+### Kurs ohne festen Termin (Course without date)
+```csv
+Makerspace Tour,Kennenlernen des Studios,,alle Interessierten
+```

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!"

data/courses.csv

@@ -0,0 +1,8 @@
+title,description,dates,offen_fuer,image
+Löten und Leuchten,Herstellung von Nachttischleuchten mit 3D-Design und Löttechnik,"Dez. '24",Klasse 5-6,/static/images/courses/löten und leuchten.jpeg
+Löten und Leuchten,Herstellung von Nachttischleuchten mit 3D-Design und Löttechnik,"Jan. '25",Klasse 5-6,/static/images/courses/löten und leuchten.jpeg
+Die Vogelvilla,Bau von Vogelhäusern mit Lasercutter und Holzbearbeitung,"Mär. '25",Jhg. 8,/static/images/courses/vogelvilla.jpeg
+Textiles Plotten,Erschaffe deine eigenen Klamottendesigns,"Mai '25",Jhg. 9,/static/images/courses/textiles plotten.jpeg
+Kicker-Glow-Up,Erstelle deine eigene Kickerfigur mit 3D Design,"Jun '25",Jhg. 7,
+Projektwoche: Realitäten Transformieren,Erstelle deine eigene Augmented Reality App und lerne 3D Scannen,"Jul '25",Jhg. 10-11,
+Reshaping Plastics,Lerne Plastik neu zu formen und eigene Produkte zu designen,"Okt '25",Jhg. 10,/static/images/courses/reshaping plastics.jpeg