From 7ab8a7d5a9fcad2bb676661265cbedea6946776c Mon Sep 17 00:00:00 2001 From: Andrej Stevanovski Date: Fri, 25 Sep 2026 17:18:27 +0200 Subject: [PATCH] =?UTF-8?q?Anfahrt=20mit=20Karte,=20Adresse=20und=20=C3=96?= =?UTF-8?q?ffnungszeiten,=20Vereinslogo=20im=20Header?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Beide Logos im Header auf allen Seiten - Adresse Hollerstraße 2 und Öffnungszeiten Mo-Fr 9-13 (Google Maps) im Footer, Kontakt, Shop-Seite und neuer Sektion 'So findest du uns' - Google-Maps-Karte als Zwei-Klick-Lösung: lädt erst nach Klick, kein Banner nötig; Datenschutzerklärung um Abschnitt 4a ergänzt - 'Im September 2025' - Impressum: roter Warnkasten, Registereintrag und interne Hinweise entfernt Co-Authored-By: Claude Opus 5.5 --- DESIGN.md | 19 +++++++++++++++ README.md | 3 +-- assets/site.css | 42 ++++++++++++++++++++++++++++++++- datenschutz.html | 43 +++++++++++++++++++++++---------- hilfe-verein.html | 12 ++++++---- impressum.html | 28 ++++++---------------- index.html | 60 +++++++++++++++++++++++++++++++++++++++++++---- shop.html | 9 +++---- 8 files changed, 166 insertions(+), 50 deletions(-) diff --git a/DESIGN.md b/DESIGN.md index 526ea39..1e1b417 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -257,6 +257,25 @@ damit der Rhythmus Weiß ↔ Farbe erhalten bleibt. Kontrast gegen die **dunklere** Musterfarbe gemessen, nicht gegen den Grund: `--ink-700` 7.41–9.71, Weiß auf dem Blau-Band 4.65. +## Anfahrt und Karte (2026-09-25) + +Adresse und Öffnungszeiten von Google Maps übernommen: **Hollerstraße 2, 84056 Rottenburg +a.d. Laaber**, **Mo–Fr 9:00–13:00**, Sa/So geschlossen. Stehen jetzt im Footer aller Seiten, +in der Kontaktkarte der Vereinsseite, auf der Shop-Seite und in der neuen Sektion +„So findest du uns" (`index.html#anfahrt`). + +**Die Karte ist eine Zwei-Klick-Lösung.** Ein Google-Maps-iframe beim Seitenaufruf würde +die IP jedes Besuchers an Google übertragen und bräuchte eine Einwilligung nach +§ 25 TDDDG — also ein Banner. Stattdessen steht dort eine getönte Fläche mit „Karte +laden"; erst der Klick setzt das iframe ein (Inline-Skript am Ende von `index.html`, das +einzige JavaScript der Site). Gemessen: vor dem Klick keine einzige Anfrage an Google. +Datenschutzerklärung Abschnitt 4a beschreibt das. „Route planen" ist ein normaler Link. + +Die Aussage „null Anfragen an Dritte" aus dem Abschnitt Recht gilt damit weiter für den +Seitenaufruf, nicht mehr nach dem Klick auf die Karte. + +Header: beide Zeichen (Laden und Hilfe Verein) nebeneinander auf allen Seiten. + ## Motion Nur Zustandsfeedback, wie im Handoff: 120ms Farbe, 200ms Lift, 340ms alles Größere, diff --git a/README.md b/README.md index a702f43..07362c5 100644 --- a/README.md +++ b/README.md @@ -52,8 +52,7 @@ cd "/Users/andrej/ASX Studio/Emmas schatzkiste" && python3 -m http.server 4173 verdrahten, Button aktivieren, Fortschrittsbalken aus `timeupdate` treiben, Abspielposition in `localStorage` merken. **Ein Lied pro Seite, nicht beide auf beiden** (Kundenvorgabe). -5. **Öffnungszeiten und vollständige Anschrift.** Bekannt sind nur Postleitzahl und Ort. - Der Footer sagt bis dahin „Öffnungszeiten folgen". +5. ~~**Öffnungszeiten und vollständige Anschrift.**~~ Erledigt 2026-09-25 (von Google Maps). 6. **Logos als Vektor.** Die gelieferten JPEGs sind freigestellt worden (siehe DESIGN.md), aber eine SVG- oder transparente PNG-Originaldatei wäre sauberer, besonders fürs Header-Zeichen bei 32px. diff --git a/assets/site.css b/assets/site.css index 2de7232..05b0bfd 100644 --- a/assets/site.css +++ b/assets/site.css @@ -201,6 +201,9 @@ a:hover{color:var(--sky-600)} min-height:44px; /* Touch-Ziel, auch auf Tablets */ } .hdr__brand img{width:34px; height:34px; object-fit:contain} +/* Beide Zeichen: Laden und Hilfe Verein (Kundenwunsch 2026-09-25) — die zwei Welten + des Handoffs stehen damit auf jeder Seite nebeneinander. */ +.hdr__marks{display:flex; align-items:center; gap:4px} .nav{display:flex; align-items:center; gap:var(--space-1); flex-wrap:wrap} /* 44px hoch statt 31: Tablets sind Touch-Geraete, WCAG 2.5.5 will 44x44. Passt weiterhin in den 64px hohen Header. */ @@ -225,7 +228,7 @@ a:hover{color:var(--sky-600)} :root{--header-h:60px; --page-pad-x:20px} .hdr__in{gap:var(--space-2)} .hdr__brand{font-size:0; gap:0; min-width:44px; justify-content:center} - .hdr__brand img{width:36px; height:36px} + .hdr__brand img{width:32px; height:32px} .nav{flex-wrap:nowrap; gap:0} .nav a{ position:relative; min-height:44px; padding:6px clamp(5px,2.2vw,10px); @@ -242,6 +245,10 @@ a:hover{color:var(--sky-600)} display:flex; align-items:center; min-height:44px; padding-block:2px; } } +/* Unter 360px mit zwei Zeichen im Header: "Hilfe Verein" darf zweizeilig werden. */ +@media (max-width:359.98px){ + .nav a{white-space:normal; text-align:center; line-height:1.1} +} /* ============================================================ BUTTONS */ .btn{ @@ -436,6 +443,37 @@ a:hover{color:var(--sky-600)} transform:rotate(-2deg); } +/* Anfahrt — Adresse, Zeiten, Karte */ +.visit{ + display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); + gap:var(--space-8); align-items:stretch; +} +.visit__info{display:grid; gap:var(--space-6); align-content:center; justify-items:start} +.visit__info .label{display:block; margin-bottom:var(--space-2)} +.visit__addr{font:600 22px/1.35 'Nunito','Segoe UI',sans-serif; color:var(--ink-700)} +.hours{margin:0; display:grid; grid-template-columns:auto auto; gap:var(--space-1) var(--space-6)} +.hours dt{color:var(--ink-500)} +.hours dd{margin:0; font-weight:700; color:var(--ink-700)} +/* Zwei-Klick-Karte. Vor dem Klick eine getönte Fläche mit Decor-Muster — keine Karte + in der Karte (Guardrail), nur Inhalt auf Fläche. */ +.map{ + position:relative; isolation:isolate; min-height:380px; overflow:hidden; + border-radius:var(--radius-xl); box-shadow:var(--shadow-band); + background:var(--sky-100) url(decor/cool.svg) 0 0/var(--decor-size,600px) auto repeat; + display:grid; place-items:center; padding:var(--space-8) var(--space-6); +} +.map.is-loaded{padding:0; display:block; background:var(--surface-sunk)} +.map iframe{display:block; width:100%; height:100%; min-height:380px; border:0} +.map__consent{display:grid; gap:var(--space-3); justify-items:center; text-align:center; max-width:36ch} +.map__pin{ + width:56px; height:56px; border-radius:50%; display:grid; place-items:center; + background:var(--accent); color:#fff; box-shadow:var(--shadow-card); +} +.map__pin svg{width:28px; height:28px} +.map__title{font:var(--t-h3); color:var(--ink-700)} +.map__note{font:var(--t-small); color:var(--ink-700)} +.map__note a{color:var(--ink-700)} + /* Audio */ .song{ max-width:520px; margin-inline:auto; background:var(--surface-card); @@ -492,6 +530,8 @@ a:hover{color:var(--sky-600)} /* Telefon und E-Mail sind die wichtigsten Links der Seite und waren 23px hoch — einen Pixel unter WCAG 2.5.8. Als volles 44px-Ziel laesst sich die Nummer am Handy zuverlaessig antippen. */ +.contact .contact__note{font:var(--t-small); color:var(--ink-500)} +.contact .contact__note a{min-height:0; display:inline} .contact a{ color:var(--accent-text); display:inline-flex; align-items:center; min-height:44px; text-decoration:underline; text-underline-offset:3px; diff --git a/datenschutz.html b/datenschutz.html index cd360c8..0249364 100644 --- a/datenschutz.html +++ b/datenschutz.html @@ -11,7 +11,7 @@ - + @@ -19,7 +19,7 @@
- + Emma's Schatzkiste
diff --git a/hilfe-verein.html b/hilfe-verein.html index 1a56e33..1e4049a 100644 --- a/hilfe-verein.html +++ b/hilfe-verein.html @@ -10,7 +10,7 @@ - + @@ -18,7 +18,7 @@
- + Emma's Schatzkiste