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>
60 lines
3.3 KiB
HTML
60 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<script src="./support.js"></script>
|
|
</head>
|
|
<body>
|
|
<x-dc>
|
|
<helmet>
|
|
<link rel="stylesheet" href="./_ds/emmas-schatzkiste-design-system-3da4b643-9f78-4b1c-927d-8b058aa8403e/styles.css" />
|
|
<script src="https://unpkg.com/lucide@0.451.0/dist/umd/lucide.js"></script>
|
|
<script src="./_ds/emmas-schatzkiste-design-system-3da4b643-9f78-4b1c-927d-8b058aa8403e/_ds_bundle.js"></script>
|
|
</helmet>
|
|
|
|
<div style="background:var(--surface-page); min-height:100vh; display:flex; flex-direction:column">
|
|
|
|
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.SiteHeader" items="{{ navItems }}" active="Shop" on-navigate="{{ onNavigate }}" hint-size="100%,64px"></x-import>
|
|
|
|
<main style="flex:1; display:flex; align-items:center; justify-content:center; padding:var(--space-20) var(--page-pad-x)">
|
|
<div style="max-width:620px; display:grid; gap:var(--space-5); justify-items:center; text-align:center">
|
|
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.Badge" tone="warning" hint-size="120px,22px">Im Aufbau</x-import>
|
|
<h1 style="font:var(--text-display-l); color:var(--sky-500)">Der Online-Shop ist noch im Aufbau.</h1>
|
|
<p style="font:var(--text-body-l); color:var(--text-body); max-width:48ch">Wir richten ihn gerade ein. Bis dahin findest du unsere Sachen im Laden in Rottenburg a.d. Laaber — oder du rufst an und wir suchen mit.</p>
|
|
<div style="display:flex; flex-wrap:wrap; gap:var(--space-3); justify-content:center; margin-top:var(--space-2)">
|
|
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.Button" as="a" href="tel:015751479212" size="l" hint-size="190px,48px">0157 51479212</x-import>
|
|
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.Button" as="a" href="./Startseite.dc.html" variant="secondary" size="l" hint-size="190px,48px">Zurück zur Startseite</x-import>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.SiteFooter" columns="{{ footerColumns }}" hint-size="100%,280px"></x-import>
|
|
<div style="background:var(--surface-footer); padding:0 var(--page-pad-x) var(--space-8)">
|
|
<p style="max-width:var(--page-max); margin:0 auto; font:var(--text-small); color:var(--text-muted)">Kleinunternehmerregelung nach § 19 UStG: Als Kleinunternehmer berechnen wir keine Umsatzsteuer und weisen sie daher auch nicht aus.</p>
|
|
</div>
|
|
|
|
</div>
|
|
</x-dc>
|
|
<script type="text/x-dc" data-dc-script>
|
|
class Component extends DCLogic {
|
|
renderVals() {
|
|
return {
|
|
navItems: ['Start', 'Shop', 'Hilfe Verein', 'Kontakt'],
|
|
onNavigate: item => {
|
|
if (item === 'Hilfe Verein') window.location.href = './Hilfe Verein.dc.html';
|
|
else if (item === 'Kontakt') window.location.href = './Hilfe Verein.dc.html#kontakt';
|
|
else if (item !== 'Shop') window.location.href = './Startseite.dc.html';
|
|
},
|
|
footerColumns: [
|
|
{ title: 'Laden', links: ['Unser Laden', 'Öffnungszeiten', 'Ware abgeben'] },
|
|
{ title: 'Hilfe Verein', links: ['Spenden', 'Mithelfen', 'Weitersagen'] },
|
|
{ title: 'Über', links: ['Über uns', 'Kontakt', 'Impressum'] }
|
|
]
|
|
};
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|