Alle sieben Aktions-Buttons (Standort, Ausflugsziel anlegen,
KI-Prompt-Generator, Import, Backup) lagen bislang als absolut
positionierte Toolbar oben links ueber der Karte - direkt dort, wo
Leaflet standardmaessig seinen Zoom-Regler platziert, wodurch sich
beides ueberschnitt. Auf dem Smartphone nahm die Toolbar zudem viel
Platz auf der Karte weg.
Die Buttons sind jetzt in einem aufklappbaren Hamburger-Menue im Header
(js/main.js: setupMenuToggle(), schliesst bei Aktion/Escape/Klick
ausserhalb) statt direkt auf der Karte. Der Zoom-Regler wurde zusaetzlich
auf oben rechts verschoben (js/map/mapController.js), damit oben links
dauerhaft Platz fuer eigene Overlays (z.B. map-picking-hint) bleibt.
App-Shell auf Flexbox umgestellt (body als Flex-Spalte, .app-layout mit
flex:1) statt des bisherigen calc(100vh - fixe Header-Hoehe) auf
Desktop, da der Header jetzt bei geoeffnetem Menue waechst - die alte
fixe Berechnung haette Karte/Liste dabei abgeschnitten. --header-height
war dadurch ueberfluessig und wurde entfernt.
Neuer Toolbar-Button "Standort auf Karte waehlen" ergaenzt die
bestehenden Wege (Browser-Geolocation, manuelle Eingabe): aktiviert
einen Auswahlmodus (Crosshair-Cursor, Hinweisleiste mit
Abbrechen-Option), der naechste Klick auf die Karte setzt
state.userLocation auf die geklickten Koordinaten. Escape oder der
Abbrechen-Button beenden den Modus ohne Aenderung.
js/map/mapController.js: startLocationPicking()/stopLocationPicking()/
isPickingLocation() kapseln den einmaligen Klick-Listener und dessen
Aufraeumen. Wiederverwendet den bereits vorhandenen
"Hier bist du"-Marker (aus dem vorherigen Fix) fuer die Anzeige.
Neues Modal (js/ui/form.js) mit allen Feldern aus anforderung.md
Abschnitt 6: Name, Kategorie, Kurz-/Volltext-Beschreibung, Adresse, Ort,
Koordinaten, Altersgruppe, Kosten, Oeffnungszeiten, Aufenthaltsdauer,
Ausstattungs-Checkboxen, Indoor/Outdoor, Bild-URL, Website, Tags.
Validierung: Pflichtfelder (Name, Kategorie, Koordinaten), Koordinaten-
Bereichspruefung, Alter min<=max, Bild-/Website-URL nur http/https.
Fehler erscheinen inline je Feld (aria-invalid/aria-describedby), erstes
fehlerhaftes Feld wird fokussiert.
EventMap.ui.openPlaceForm(place) dient als Einstiegspunkt: ohne Argument
zum Neuanlegen, mit Place-Objekt zum Bearbeiten. Speichern aktualisiert
den Store mit neuer Array-Referenz (Karte/Liste reagieren automatisch)
und persistiert nach LocalStorage.
Verdrahtung: neuer "+ Neues Ausflugsziel hinzufuegen"-Button in der
Karten-Toolbar; der bisherige Bearbeiten-Platzhalter in der
Detailansicht (js/ui/detail.js) oeffnet jetzt das Formular vorausgefuellt
mit dem aktuell angezeigten Ausflugsziel.
Reines HTML5/CSS3/JavaScript ohne Build-Tooling, lauffaehig direkt per
Doppelklick auf index.html (file://, kein Server noetig):
- Datenmodell fuer Ausflugsziele mit allen Feldern aus der Anforderung,
15 feste Kategorien inkl. Farbe/Icon
- Zentraler Pub/Sub-Store mit LocalStorage-Persistenz und
Migrations-Grundgeruest
- Interaktive Karte (Leaflet + Leaflet.markercluster, lokal vendored)
mit kategoriefarbenen Markern, Clustering, Popups, Geolocation-Button
- Kartengrundlage ueber CARTO-Basemaps statt tile.openstreetmap.org, da
dessen Referer-Pflicht file://-Aufrufe blockiert
- Seed-Daten als eingebettetes Script (data/seed.js) statt JSON-Datei,
da fetch() auf lokale Dateien unter file:// nicht zuverlaessig
funktioniert
- Ergebnisliste mit 10 Beispiel-Ausflugszielen, sicher gerendert ueber
textContent/DOM-APIs statt innerHTML (Vorbereitung fuer spaeteren
KI-JSON-Import mit Fremddaten)
- Responsives Layout (Desktop nebeneinander, Mobile gestapelt)
dapelza