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>
174 lines
13 KiB
HTML
174 lines
13 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="./image-slot.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)">
|
|
|
|
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.SiteHeader" items="{{ navItems }}" active="Hilfe Verein" on-navigate="{{ onNavigate }}" hint-size="100%,64px"></x-import>
|
|
|
|
<section style="position:relative; background:var(--sun-100); overflow:hidden; border-bottom:6px solid var(--sun-400); min-height:clamp(520px, 62vw, 660px); display:grid">
|
|
<img src="https://images.pexels.com/photos/8435803/pexels-photo-8435803.jpeg?auto=compress&cs=tinysrgb&w=1800" alt="Kinder spielen gemeinsam" style="position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:72% 40%" />
|
|
<span style="position:absolute; inset:0; background:linear-gradient(100deg, var(--sun-100) 0, var(--sun-100) 430px, rgba(253,244,220,0.9) 560px, rgba(253,244,220,0) 820px)"></span>
|
|
<div style="position:relative; align-self:center; width:100%; max-width:var(--page-max); margin:0 auto; padding:var(--space-12) var(--page-pad-x)">
|
|
<div style="display:grid; gap:var(--space-5); justify-items:start; max-width:min(100%, 540px)">
|
|
<span style="display:inline-block; background:var(--sun-400); color:var(--ink-700); font:var(--text-label); letter-spacing:var(--ls-caps); text-transform:uppercase; padding:6px 14px; border-radius:var(--radius-pill); transform:rotate(-2deg)">Hilfe. Herz. Hoffnung.</span>
|
|
<h1 style="font:var(--text-display-xl); font-size:clamp(32px,7.5vw,56px); line-height:1.05; display:grid; justify-items:start; gap:2px">
|
|
<span style="color:var(--sun-600); display:inline-block; transform:rotate(-2deg)">Helfen,</span>
|
|
<span style="color:var(--coral-500); display:inline-block; transform:rotate(1.5deg) translateX(12px)">teilen,</span>
|
|
<span style="color:var(--sky-500); display:inline-block; transform:rotate(-1deg)">zusammenhalten!</span>
|
|
</h1>
|
|
<p style="font:var(--text-body-l); color:var(--ink-700); max-width:34ch">Soziale Hilfe vor der Haustür. Der Verein ist gerade im Aufbau — und jede Hand zählt.</p>
|
|
<div style="display:flex; flex-wrap:wrap; gap:var(--space-3)">
|
|
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.Button" as="a" href="#helfen" size="l" icon="{{ iconArrow }}" hint-size="230px,48px">So kannst du helfen</x-import>
|
|
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.Button" as="a" href="#kontakt" size="l" variant="secondary" hint-size="150px,48px">Kontakt</x-import>
|
|
</div>
|
|
<div style="display:flex; flex-wrap:wrap; gap:var(--space-4); margin-top:var(--space-2)">
|
|
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.TrustBadge" icon="{{ iconHandSmall }}" title="Im Aufbau" sub="wir fangen gerade an" hint-size="190px,52px"></x-import>
|
|
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.TrustBadge" icon="{{ iconPin }}" title="Rottenburg a.d. Laaber" sub="für Familien hier" hint-size="220px,52px"></x-import>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<img src="./assets/logo-verein.jpeg" alt="Emma's Schatzkiste Hilfe Verein" style="position:absolute; right:var(--page-pad-x); bottom:var(--space-6); width:clamp(110px, 16vw, 180px); mix-blend-mode:multiply; transform:rotate(-3deg)" />
|
|
</section>
|
|
|
|
<section style="max-width:var(--page-max); margin:0 auto; padding:var(--space-16) var(--page-pad-x) 0">
|
|
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.SectionHeader" title="Unser Lied" icon="{{ iconMusic }}" hint-size="100%,44px"></x-import>
|
|
<div style="display:grid; max-width:520px; margin:0 auto">
|
|
<div style="background:var(--surface-card); border:1px solid var(--line-soft); border-radius:var(--radius-l); box-shadow:var(--shadow-card); padding:var(--space-5); display:grid; gap:var(--space-4)">
|
|
<div style="display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap">
|
|
<span style="font:var(--text-subheading); color:var(--sky-500)">Lied vom Hilfe Verein</span>
|
|
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.Badge" tone="warning" hint-size="110px,22px">Audio folgt</x-import>
|
|
</div>
|
|
<div style="display:flex; align-items:center; gap:var(--space-4)">
|
|
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.IconButton" label="Abspielen" disabled="{{ true }}" size="{{ 44 }}" hint-size="44px,44px">
|
|
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.Icon" name="play" size="{{ 18 }}" hint-size="18px,18px"></x-import>
|
|
</x-import>
|
|
<div style="flex:1; display:grid; gap:var(--space-2)">
|
|
<span style="height:8px; border-radius:var(--radius-pill); background:var(--surface-sunk)"></span>
|
|
<span style="font:var(--text-small); color:var(--text-muted)">0:00</span>
|
|
</div>
|
|
</div>
|
|
<p style="font:var(--text-small); color:var(--text-muted)">Sobald die Datei da ist, spielt der Player sie hier ab.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="helfen" style="max-width:var(--page-max); margin:0 auto; padding:var(--space-16) var(--page-pad-x) var(--space-12)">
|
|
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.SectionHeader" title="Wir brauchen Hilfe" icon="{{ iconHands }}" hint-size="100%,44px"></x-import>
|
|
<p style="font:var(--text-body-l); color:var(--text-body); max-width:56ch; margin-bottom:var(--space-8)">Ein Verein im Aufbau braucht beides: Mittel, um wirklich helfen zu können, und Menschen, die mit anpacken. Finanziell und menschlich — in jeder Form.</p>
|
|
<div style="display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:var(--gutter-grid)">
|
|
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.InfoTile" title="Geldspenden" body="Jeder Betrag hilft — für Ware, Miete und Familien, die gerade nichts übrig haben." tone="soft" cta="{{ ctaSpende }}" hint-size="100%,170px"></x-import>
|
|
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.InfoTile" title="Ehrenamtlich mithelfen" body="Sortieren, verkaufen, aufbauen, mitdenken — regelmäßig oder ab und zu." tone="cool" cta="{{ ctaHelfen }}" hint-size="100%,170px"></x-import>
|
|
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.InfoTile" title="Weitersagen" body="Reichweite kostet nichts: erzähl von uns und bring Familien vorbei." tone="band" hint-size="100%,170px"></x-import>
|
|
</div>
|
|
</section>
|
|
|
|
<section style="max-width:var(--page-max); margin:0 auto var(--space-16); padding:0 var(--page-pad-x)">
|
|
<div style="background:var(--surface-band-cool); border-radius:var(--radius-band); padding:var(--space-10); display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:var(--space-8); align-items:center">
|
|
<div style="display:grid; gap:var(--space-4); justify-items:start">
|
|
<span style="font:var(--text-label); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--sky-500)">Der Second-Hand-Laden</span>
|
|
<h2 style="font:var(--text-display-l); color:var(--sky-500)">Wo alles angefangen hat.</h2>
|
|
<p style="font:var(--text-body-l); color:var(--text-body); max-width:46ch">Im September haben wir den Second-Hand-Laden übernommen — eine Herzensangelegenheit. Kinder und Jugendliche bekommen bei uns Spielsachen, die ein zweites Leben verdient haben.</p>
|
|
<p style="font:var(--text-body-l); color:var(--text-body); max-width:46ch">Die Sachen sind preiswert, sehr gut erhalten und von guter Qualität. Und wir suchen mit, bis du findest, was du brauchst.</p>
|
|
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.Button" as="a" href="./Startseite.dc.html" variant="secondary" size="l" hint-size="210px,48px">Mehr über den Laden</x-import>
|
|
</div>
|
|
<img src="./assets/logo-shop.jpeg" alt="Emma's Schatzkiste — Baby & Kind Second Hand" style="width:100%; max-width:360px; justify-self:center; mix-blend-mode:multiply" />
|
|
</div>
|
|
</section>
|
|
|
|
<section id="kontakt" style="max-width:var(--page-max); margin:0 auto; padding:0 var(--page-pad-x) var(--space-16)">
|
|
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.SectionHeader" title="Schreib uns" icon="{{ iconMail }}" hint-size="100%,44px"></x-import>
|
|
<div style="display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:var(--gutter-grid)">
|
|
<div style="background:var(--surface-card); border:1px solid var(--line-soft); border-radius:var(--radius-l); box-shadow:var(--shadow-card); padding:var(--space-5); display:grid; gap:var(--space-2)">
|
|
<span style="font:var(--text-label); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--text-muted)">Adresse</span>
|
|
<p style="font:var(--text-body-l); color:var(--text-price)">84056 Rottenburg a.d. Laaber</p>
|
|
</div>
|
|
<div style="background:var(--surface-card); border:1px solid var(--line-soft); border-radius:var(--radius-l); box-shadow:var(--shadow-card); padding:var(--space-5); display:grid; gap:var(--space-2)">
|
|
<span style="font:var(--text-label); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--text-muted)">Telefon</span>
|
|
<p style="font:var(--text-body-l)"><a href="tel:015751479212">0157 51479212</a></p>
|
|
</div>
|
|
<div style="background:var(--surface-card); border:1px solid var(--line-soft); border-radius:var(--radius-l); box-shadow:var(--shadow-card); padding:var(--space-5); display:grid; gap:var(--space-2)">
|
|
<span style="font:var(--text-label); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--text-muted)">E-Mail</span>
|
|
<p style="font:var(--text-body-l); word-break:break-word"><a href="mailto:emmas.schatzkiste.hilft@gmail.com">emmas.schatzkiste.hilft@gmail.com</a></p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<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 {
|
|
state = { dsReady: false };
|
|
|
|
componentDidMount() {
|
|
this.waitForDs();
|
|
}
|
|
|
|
componentWillUnmount() { clearInterval(this._t); }
|
|
|
|
waitForDs() {
|
|
const check = () => {
|
|
const ds = window.EmmasSchatzkisteDesignSystem_3da4b6;
|
|
if (ds && ds.Icon) { clearInterval(this._t); this.setState({ dsReady: true }); }
|
|
};
|
|
this._t = setInterval(check, 120);
|
|
check();
|
|
}
|
|
|
|
icon(name, size) {
|
|
const ds = window.EmmasSchatzkisteDesignSystem_3da4b6;
|
|
if (!ds || !ds.Icon) return null;
|
|
return React.createElement(ds.Icon, { name: name, size: size || 22 });
|
|
}
|
|
|
|
link(href, label, variant) {
|
|
const ds = window.EmmasSchatzkisteDesignSystem_3da4b6;
|
|
if (!ds || !ds.Button) return null;
|
|
return React.createElement(ds.Button, { as: 'a', href: href, size: 's', variant: variant || 'primary' }, label);
|
|
}
|
|
|
|
renderVals() {
|
|
return {
|
|
navItems: ['Start', 'Shop', 'Hilfe Verein', 'Kontakt'],
|
|
onNavigate: item => {
|
|
if (item === 'Start') window.location.href = './Startseite.dc.html';
|
|
else if (item === 'Shop') window.location.href = './Shop.dc.html';
|
|
else if (item === 'Kontakt') window.location.hash = '#kontakt';
|
|
},
|
|
iconArrow: this.icon('arrow-right', 18),
|
|
iconHandSmall: this.icon('hand-heart', 15),
|
|
iconPin: this.icon('map-pin', 15),
|
|
footerColumns: [
|
|
{ title: 'Laden', links: ['Unser Laden', 'Öffnungszeiten', 'Ware abgeben'] },
|
|
{ title: 'Hilfe Verein', links: ['Spenden', 'Mithelfen', 'Weitersagen'] },
|
|
{ title: 'Über', links: ['Über uns', 'Kontakt', 'Impressum'] }
|
|
],
|
|
iconHands: this.icon('hand-heart'),
|
|
iconMail: this.icon('mail'),
|
|
iconMusic: this.icon('music'),
|
|
ctaSpende: this.link('mailto:emmas.schatzkiste.hilft@gmail.com?subject=Spende%20Hilfe%20Verein', 'Spenden'),
|
|
ctaHelfen: this.link('tel:015751479212', 'Anrufen', 'secondary')
|
|
};
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|