dapelza
ee55fb1cf9
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)
21 lines
391 B
CSS
21 lines
391 B
CSS
/* Desktop-Layout ab 1024px: Karte und Liste nebeneinander (Grid). */
|
|
|
|
@media (min-width: 1024px) {
|
|
.app-layout {
|
|
display: grid;
|
|
grid-template-columns: 65% 35%;
|
|
height: calc(100vh - var(--header-height));
|
|
}
|
|
|
|
.map-panel {
|
|
height: 100%;
|
|
min-height: 0;
|
|
}
|
|
|
|
.list-panel {
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
border-left: 1px solid var(--color-border);
|
|
}
|
|
}
|