Andrej StevanovskiandClaude Opus 5
92a6faaf54
Umsetzung des Design-Handoffs als statisches HTML ohne Build-Schritt, nach dem Hausmuster der übrigen ASX-Websites. Seiten - index.html Startseite (blaue Welt) - hilfe-verein.html Hilfe Verein (gelbe Welt) - shop.html Platzhalter, Online-Shop bewusst nicht gebaut - impressum.html § 5 DDG - datenschutz.html Art. 13 DSGVO Design - Farbe lebt in Flächen und Display-Typo, nie im Fließtext — dadurch laufen alle drei Markenfarben, ohne die Hierarchie zu brechen. - Ein gesättigtes Vollflächen-Band pro Seite gegen die Blässe der reinen Pastellfassung. - Alle fünf Seiten bestehen WCAG AA im Kontrast. Mobil - Header unter 640px zweizeilig, Navigation als Viererraster, alle Touch-Ziele >= 44px (WCAG 2.5.5), Footer-Links >= 24px (2.5.8). - Geprüft bei 320/375/390/640/768/1024/1440/1920 px. Datenschutz - Keine Cookies, kein Storage, keine Skripte, null Fremdanfragen. Deshalb bewusst kein Einwilligungsbanner. - Fredoka und Nunito selbst gehostet statt über Google Fonts (LG München I, 3 O 17493/20). Bilder - Drei Pexels-Fotos, Lizenz geprüft, heruntergeladen und selbst gehostet. - Bewusst keine Kinderfotos: Pexels gibt kein Model Release. Offen: drei Angaben in den Rechtstexten, Foto Opa Martin, zwei Audiodateien. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
98 lines
4.9 KiB
Markdown
98 lines
4.9 KiB
Markdown
# Emma's Schatzkiste — Website
|
|
|
|
Drei statische Seiten für den Baby- und Kinder-Second-Hand-Laden in Rottenburg a.d. Laaber
|
|
und den zugehörigen Hilfe Verein.
|
|
|
|
| Datei | Seite |
|
|
|---|---|
|
|
| `index.html` | Startseite |
|
|
| `hilfe-verein.html` | Hilfe Verein (`#helfen`, `#kontakt`) |
|
|
| `shop.html` | Online-Shop, bewusst geparkt („Im Aufbau") |
|
|
| `assets/site.css` | gemeinsames Stylesheet, Tokens und Komponenten |
|
|
| `design_handoff_emmas_schatzkiste/` | Original-Handoff, unverändert |
|
|
|
|
Design-Entscheidungen und Abweichungen: [`DESIGN.md`](DESIGN.md).
|
|
Benannte Referenz: [`emmas-schatzkiste-ds.md`](../design-references/entries/emmas-schatzkiste-ds.md).
|
|
|
|
Kein Build. Lokal ansehen:
|
|
|
|
```bash
|
|
cd "/Users/andrej/ASX Studio/Emmas schatzkiste" && python3 -m http.server 4173
|
|
```
|
|
|
|
## Was noch fehlt
|
|
|
|
### Vor dem Launch zwingend
|
|
|
|
1. **Zwei Felder in der Datenschutzerklärung, eine Bestätigung im Impressum.** Beide
|
|
Seiten existieren, sind im Footer verlinkt und bestehen den Kontrast-Check. Aus dem
|
|
Impressum der alten Seite übernommen und eingetragen: **Martin Lindenau, Hollerstraße 2,
|
|
84056 Rottenburg a.d. Laaber**. Hoster STRATO GmbH ist eingetragen. Offen, jeweils rot
|
|
gestrichelt auf der Seite markiert:
|
|
|
|
- Impressum: bestätigen, dass es ein Kleingewerbe ohne Handelsregistereintrag ist.
|
|
- Datenschutz: AV-Vertrag nach Art. 28 DSGVO mit STRATO abschließen (im STRATO-Kundenkonto
|
|
verfügbar) und Datum eintragen; Speicherdauer der Server-Logfiles nachsehen.
|
|
|
|
**Ein Cookie-Banner ist nicht nötig** — gemessen: keine Cookies, kein Storage, keine
|
|
Fremdanfragen. Details in [`DESIGN.md`](DESIGN.md#recht-und-datenschutz).
|
|
Beide Texte sind Entwürfe und sollten vor dem Launch juristisch geprüft werden.
|
|
|
|
2. **Die alte Datenschutzerklärung ist eine leere Vorlage — dringend.** Unter
|
|
`emmas-schatzkiste.de/datenschutzerklarung/` steht aktuell noch der unausgefüllte
|
|
Mustertext („Bitte geben Sie den Namen Ihres Datenverantwortlichen ein"). Das ist ein
|
|
laufender Verstoß gegen Art. 13 DSGVO und unabhängig von dieser neuen Seite. Entweder
|
|
die alte Seite abschalten oder den Text dort sofort ersetzen.
|
|
|
|
### Vom Kunden ausstehend
|
|
|
|
3. **Foto von Opa Martin.** Der Slot auf der Startseite ist 1:1 und beschriftet. Bild
|
|
einsetzen: den `<div class="portrait__slot">` durch
|
|
`<img src="assets/opa-martin.jpg" alt="Opa Martin">` ersetzen — der Kommentar steht an
|
|
der Stelle. Bild und Name, kein Bildtext (Kundenvorgabe).
|
|
4. **Zwei Audiodateien** — ein Lied für den Laden, eines für den Verein. Bis dahin ist der
|
|
Player sichtbar deaktiviert, mit Badge „Audio folgt". Beim Einbau: je ein `<audio>`
|
|
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".
|
|
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.
|
|
7. **Rechtsform des Vereins.** Noch nicht eingetragen; die Seite spricht deshalb nur vom
|
|
„Hilfe Verein". Sobald eingetragen: Name und Rechtsform überall nachziehen, dann sind
|
|
auch Spendenquittungen und ein echter Spendenweg möglich.
|
|
|
|
### Nicht bauen
|
|
|
|
Der Online-Shop bleibt geparkt — kein Storefront, kein Warenkorb, kein Checkout. Der
|
|
Nav-Eintrag bleibt trotzdem sichtbar, damit Besucher wissen, dass da etwas kommt. Falls
|
|
später doch ein Shop entsteht: die §19-UStG-Zeile muss zusätzlich im Checkout und auf
|
|
Rechnungen stehen.
|
|
|
|
## Inhaltliche Lücke gegenüber der alten Seite
|
|
|
|
Die alte Seite `emmas-schatzkiste.de` führt Angebote, die auf der neuen Seite nirgends
|
|
vorkommen. Der Handoff erwähnt sie nicht — vermutlich übersehen, nicht bewusst gestrichen:
|
|
|
|
- **Verleih** von Reisebetten und Atemmonitoren
|
|
- **UPS Access Point**
|
|
- **Zahlungsarten** bar, Karte und PayPal
|
|
- eigene Seiten „Über uns" und „Unser Laden" (der Nav-Punkt „Unser Laden" wurde laut
|
|
Handoff allerdings ausdrücklich vom Kunden entfernt)
|
|
|
|
Bitte klären, ob das weiterhin angeboten wird. Besonders der Verleih und der UPS Access
|
|
Point sind starke Gründe, überhaupt in den Laden zu kommen — die würde ich nicht
|
|
verschweigen.
|
|
|
|
## Vom Handoff fehlt
|
|
|
|
Der Bundle enthält `design/_ds/…/styles.css` und `_ds_bundle.js` **nicht** — die drei
|
|
`.dc.html`-Prototypen lassen sich damit nicht öffnen. Die elf Komponenten (`SiteHeader`,
|
|
`SiteFooter`, `Button`, `IconButton`, `Icon`, `Badge`, `SectionHeader`, `InfoTile`,
|
|
`TrustBadge`, `ImagePlaceholder`, `Decor`) waren nur über Name und Prop-Liste bekannt; ihr
|
|
Innenleben ist hier aus der Token-Tabelle und den Inline-Styles rekonstruiert. Falls der
|
|
Absender den `_ds/`-Ordner nachliefert, lohnt ein Abgleich — vor allem bei `InfoTile`,
|
|
`TrustBadge` und `SiteFooter`.
|