Enthält die Projektanforderung (anforderung.md) für die EventMap-Anwendung sowie die Claude-Code-Agentendefinitionen für den Entwicklungsworkflow.
296 lines
8.1 KiB
Markdown
296 lines
8.1 KiB
Markdown
Du bist ein erfahrener Full-Stack-Webentwickler und UI/UX-Designer. Entwickle eine moderne, responsive HTML-Webanwendung, mit der familienfreundliche Ausflugsziele auf einer interaktiven Karte dargestellt, gefiltert und verwaltet werden können.
|
|
|
|
## Projektziel
|
|
|
|
Erstelle eine übersichtliche Plattform für Familien mit Kindern. Nutzer sollen auf einer Karte sehen können, welche Ausflugsziele sich in ihrer Umgebung befinden. Dazu gehören beispielsweise:
|
|
|
|
- Naturparks
|
|
- Wälder und Wanderwege
|
|
- Seen und Badestellen
|
|
- Erlebnisparks
|
|
- Freizeitparks
|
|
- Tierparks und Zoos
|
|
- Spielplätze
|
|
- Museen für Kinder
|
|
- Indoor-Spielplätze
|
|
- Bauernhöfe
|
|
- Kletterparks
|
|
- Aussichtspunkte
|
|
- Familienfreundliche Cafés und Restaurants
|
|
- Sonstige kinderfreundliche Aktivitäten
|
|
|
|
Die Anwendung soll außerdem eine Funktion enthalten, mit der Nutzer mithilfe eines automatisch erstellten KI-Prompts neue Ausflugsziele recherchieren oder strukturieren lassen können. Die KI soll die Ergebnisse in einem festgelegten JSON-Format zurückgeben. Dieses JSON soll anschließend geprüft und in die Anwendung importiert werden können.
|
|
|
|
## Technische Vorgaben
|
|
|
|
Verwende möglichst einfache und gut verständliche Technologien:
|
|
|
|
- HTML5
|
|
- CSS3
|
|
- JavaScript
|
|
- Eine Open-Source-Kartenbibliothek, zum Beispiel Leaflet
|
|
- OpenStreetMap als Kartengrundlage
|
|
- Speicherung der Daten zunächst über LocalStorage
|
|
- Optional Vorbereitung für eine spätere Datenbank oder API
|
|
- Keine Pflicht zu einem Backend in der ersten Version
|
|
|
|
Die Anwendung muss vollständig responsiv sein und auf Desktop-Computern, Tablets und Smartphones funktionieren.
|
|
|
|
## Hauptfunktionen
|
|
|
|
### 1. Interaktive Karte
|
|
|
|
Erstelle eine interaktive Karte als zentrale Funktion der Anwendung.
|
|
|
|
Die Karte soll:
|
|
|
|
- Den aktuellen Standort des Nutzers optional verwenden können
|
|
- Alle gespeicherten Ausflugsziele als Marker anzeigen
|
|
- Unterschiedliche Markerfarben oder Icons je Kategorie verwenden
|
|
- Beim Anklicken eines Markers ein Informationsfenster öffnen
|
|
- Den Namen, die Kategorie, eine kurze Beschreibung und weitere Daten anzeigen
|
|
- Eine Möglichkeit bieten, direkt eine Route oder Navigation zu starten
|
|
- Die Ansicht auf alle vorhandenen Ausflugsziele automatisch anpassen können
|
|
|
|
Falls keine Standortfreigabe erteilt wird, soll die Karte mit einer sinnvollen Standardregion geöffnet werden.
|
|
|
|
### 2. Ausflugsziele
|
|
|
|
Jedes Ausflugsziel soll mindestens folgende Informationen enthalten:
|
|
|
|
- Eindeutige ID
|
|
- Name
|
|
- Kategorie
|
|
- Kurzbeschreibung
|
|
- Ausführliche Beschreibung
|
|
- Breitengrad
|
|
- Längengrad
|
|
- Adresse
|
|
- Ort
|
|
- Bundesland oder Region
|
|
- Altersgruppe
|
|
- Geeignet für Kinderalter
|
|
- Kosteninformationen
|
|
- Öffnungszeiten
|
|
- Geschätzte Aufenthaltsdauer
|
|
- Geeignet für Kinderwagen
|
|
- Barrierefreiheit
|
|
- Toiletten vorhanden
|
|
- Parkplätze vorhanden
|
|
- Gastronomie vorhanden
|
|
- Indoor- oder Outdoor-Aktivität
|
|
- Website oder Informationsquelle
|
|
- Bild oder Bild-URL, falls vorhanden
|
|
- Bewertung
|
|
- Tags
|
|
- Erstellungsdatum
|
|
- Änderungsdatum
|
|
|
|
### 3. Kategorien und Filter
|
|
|
|
Erstelle eine Filter- und Suchfunktion.
|
|
|
|
Mögliche Filter:
|
|
|
|
- Kategorie
|
|
- Entfernung
|
|
- Alter der Kinder
|
|
- Kostenlos oder kostenpflichtig
|
|
- Indoor oder Outdoor
|
|
- Kinderwagen geeignet
|
|
- Barrierefrei
|
|
- Mit Parkplatz
|
|
- Mit Toiletten
|
|
- Mit Gastronomie
|
|
- Aufenthaltsdauer
|
|
- Bewertung
|
|
- Region oder Ort
|
|
|
|
Die Filter sollen sowohl auf die Kartenmarker als auch auf eine zusätzliche Ergebnisliste angewendet werden.
|
|
|
|
### 4. Ergebnisliste
|
|
|
|
Neben oder unter der Karte soll eine Liste aller passenden Ausflugsziele angezeigt werden.
|
|
|
|
Jede Karte in der Ergebnisliste soll enthalten:
|
|
|
|
- Name
|
|
- Kategorie
|
|
- Kurzbeschreibung
|
|
- Entfernung, falls ein Standort vorhanden ist
|
|
- Bewertung
|
|
- Wichtige Eigenschaften als Symbole oder kleine Labels
|
|
- Button „Details anzeigen“
|
|
- Button „Auf Karte anzeigen“
|
|
|
|
Auf mobilen Geräten soll die Ergebnisliste unterhalb der Karte erscheinen oder als aufklappbares Bedienfeld umgesetzt werden.
|
|
|
|
### 5. Detailansicht
|
|
|
|
Beim Öffnen eines Ausflugsziels soll eine Detailansicht erscheinen.
|
|
|
|
Diese soll enthalten:
|
|
|
|
- Titelbild oder Platzhalterbild
|
|
- Name
|
|
- Kategorie
|
|
- Vollständige Beschreibung
|
|
- Adresse
|
|
- Karte mit genauer Position
|
|
- Öffnungszeiten
|
|
- Kosten
|
|
- Altersempfehlung
|
|
- Ausstattung
|
|
- Hinweise für Familien
|
|
- Website oder Informationsquelle
|
|
- Button für Navigation
|
|
- Button zum Bearbeiten
|
|
- Button zum Löschen
|
|
|
|
### 6. Neue Ausflugsziele manuell hinzufügen
|
|
|
|
Erstelle ein Formular zum Anlegen neuer Einträge.
|
|
|
|
Das Formular soll folgende Felder enthalten:
|
|
|
|
- Name
|
|
- Kategorie
|
|
- Beschreibung
|
|
- Adresse
|
|
- Ort
|
|
- Breitengrad
|
|
- Längengrad
|
|
- Altersgruppe
|
|
- Kosten
|
|
- Öffnungszeiten
|
|
- Aufenthaltsdauer
|
|
- Kinderwagen geeignet
|
|
- Barrierefrei
|
|
- Toiletten
|
|
- Parkplatz
|
|
- Gastronomie
|
|
- Indoor oder Outdoor
|
|
- Bild-URL
|
|
- Website
|
|
- Tags
|
|
|
|
Funktionen des Formulars:
|
|
|
|
- Pflichtfelder validieren
|
|
- Koordinaten prüfen
|
|
- Kategorien als Dropdown anbieten
|
|
- Checkboxen für Eigenschaften verwenden
|
|
- Fehlermeldungen verständlich anzeigen
|
|
- Nach dem Speichern den neuen Eintrag sofort auf der Karte anzeigen
|
|
- Daten im LocalStorage speichern
|
|
|
|
Optional kann eine Adresssuche oder Geocoding-Funktion vorbereitet werden. Falls keine externe Geocoding-API verwendet wird, sollen Breitengrad und Längengrad manuell eingegeben werden können.
|
|
|
|
## KI-Prompt-Generator
|
|
|
|
Baue eine eigene Oberfläche ein, mit der Nutzer einen Prompt für eine KI erstellen können.
|
|
|
|
Die Funktion soll beispielsweise „Neue Ausflugsziele mit KI erstellen“ heißen.
|
|
|
|
### Eingabefelder für den Prompt-Generator
|
|
|
|
Der Nutzer soll folgende Informationen eingeben können:
|
|
|
|
- Region, Ort oder Suchgebiet
|
|
- Maximaler Radius in Kilometern
|
|
- Gewünschte Kategorien
|
|
- Altersgruppe der Kinder
|
|
- Indoor, Outdoor oder beides
|
|
- Kostenrahmen
|
|
- Maximale Anzahl an Ergebnissen
|
|
- Besondere Anforderungen
|
|
- Sprache der Ausgabe
|
|
|
|
Beispiele für besondere Anforderungen:
|
|
|
|
- Kinderwagen geeignet
|
|
- Für Kleinkinder geeignet
|
|
- Bei schlechtem Wetter geeignet
|
|
- Kostenlos
|
|
- Mit Tieren
|
|
- Mit Spielplatz
|
|
- Ruhige Umgebung
|
|
- Barrierefrei
|
|
- Für einen Tagesausflug geeignet
|
|
|
|
### Erzeugter KI-Prompt
|
|
|
|
Aus diesen Eingaben soll automatisch ein strukturierter Prompt erstellt werden.
|
|
|
|
Der erzeugte Prompt soll der KI eindeutig erklären:
|
|
|
|
1. Welche Region untersucht werden soll
|
|
2. Welche Kategorien gesucht werden
|
|
3. Für welches Alter die Ziele geeignet sein sollen
|
|
4. Welche Eigenschaften wichtig sind
|
|
5. Wie viele Ergebnisse geliefert werden sollen
|
|
6. Dass keine erfundenen Informationen ausgegeben werden dürfen
|
|
7. Dass unsichere Angaben gekennzeichnet werden müssen
|
|
8. Dass die Ausgabe ausschließlich als gültiges JSON erfolgen muss
|
|
9. Dass für jedes Ziel möglichst genaue Koordinaten geliefert werden müssen
|
|
10. Dass die Daten direkt in die Anwendung importierbar sein sollen
|
|
|
|
Der generierte Prompt soll:
|
|
|
|
- In einem Textfeld angezeigt werden
|
|
- Mit einem Button in die Zwischenablage kopiert werden können
|
|
- Optional als Textdatei gespeichert werden können
|
|
- Eine kurze Anleitung zur Nutzung enthalten
|
|
|
|
## Vorgabe für das KI-JSON
|
|
|
|
Die KI soll exakt dieses Datenformat verwenden:
|
|
|
|
```json
|
|
{
|
|
"version": "1.0",
|
|
"generatedAt": "2026-01-01T12:00:00Z",
|
|
"region": "Beispielregion",
|
|
"places": [
|
|
{
|
|
"name": "Beispiel-Ausflugsziel",
|
|
"category": "Spielplatz",
|
|
"shortDescription": "Kurze Beschreibung des Ausflugsziels.",
|
|
"description": "Ausführliche Beschreibung des Ausflugsziels und seiner Besonderheiten.",
|
|
"latitude": 52.520008,
|
|
"longitude": 13.404954,
|
|
"address": "Beispielstraße 1",
|
|
"city": "Beispielstadt",
|
|
"region": "Beispielregion",
|
|
"ageRecommendation": {
|
|
"min": 2,
|
|
"max": 12
|
|
},
|
|
"cost": {
|
|
"type": "free",
|
|
"description": "Kostenlos"
|
|
},
|
|
"openingHours": "Täglich von 08:00 bis 20:00 Uhr",
|
|
"durationMinutes": 120,
|
|
"facilities": {
|
|
"strollerAccessible": true,
|
|
"wheelchairAccessible": false,
|
|
"toilets": true,
|
|
"parking": true,
|
|
"restaurant": false
|
|
},
|
|
"environment": "outdoor",
|
|
"website": "",
|
|
"image": "",
|
|
"rating": null,
|
|
"tags": [
|
|
"familienfreundlich",
|
|
"kostenlos",
|
|
"Spielplatz"
|
|
],
|
|
"source": "",
|
|
"sourceVerified": false
|
|
}
|
|
]
|
|
}
|
|
``` |