Emma's Schatzkiste — statische Website, fünf Seiten
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>
This commit is contained in:
commit
92a6faaf54
31 files changed
+5880
No files matched your search
@@ -0,0 +1,173 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,59 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,158 @@
|
||||
<!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="Start" on-navigate="{{ onNavigate }}" hint-size="100%,64px"></x-import>
|
||||
|
||||
<section style="position:relative; background:var(--surface-band-cool); overflow:hidden; min-height:clamp(540px, 64vw, 680px); display:grid">
|
||||
<img src="https://images.pexels.com/photos/3661386/pexels-photo-3661386.jpeg?auto=compress&cs=tinysrgb&w=1800" alt="Kinder spielen mit Holzspielzeug" style="position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:74% 45%" />
|
||||
<span style="position:absolute; inset:0; background:linear-gradient(98deg, var(--surface-card) 0, var(--surface-card) 430px, rgba(255,255,255,0.9) 560px, rgba(255,255,255,0) 820px)"></span>
|
||||
<div style="position:relative; align-self:center; width:100%; max-width:var(--page-max); margin:0 auto; padding:var(--space-10) var(--page-pad-x)">
|
||||
<div style="display:grid; gap:var(--space-5); justify-items:start; max-width:min(100%, 540px)">
|
||||
<img src="./assets/logo-shop.jpeg" alt="Emma's Schatzkiste — Baby & Kind Second Hand" style="width:100%; max-width:200px; mix-blend-mode:multiply" />
|
||||
<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(--sky-500); display:inline-block; transform:rotate(-2.5deg)">Gebraucht,</span>
|
||||
<span style="color:var(--sun-600); display:inline-block; transform:rotate(1.5deg) translateX(14px)">geliebt,</span>
|
||||
<span style="color:var(--coral-500); display:inline-block; transform:rotate(-1deg)">weitergegeben!</span>
|
||||
</h1>
|
||||
<p style="font:var(--text-body-l); color:var(--ink-700); max-width:34ch">Baby- und Kindersachen aus zweiter Hand — preiswert, gut erhalten, mitten in Rottenburg.</p>
|
||||
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.Button" as="a" href="./Hilfe Verein.dc.html" size="l" icon="{{ iconArrow }}" hint-size="280px,48px">Hilfe Verein ansehen</x-import>
|
||||
<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="{{ iconSparkles }}" title="Einzelstücke" sub="nur 1× vorhanden" hint-size="180px,52px"></x-import>
|
||||
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.TrustBadge" icon="{{ iconCheck }}" title="Sehr gut erhalten" sub="wir prüfen jedes Teil" hint-size="200px,52px"></x-import>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section 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="Wie alles angefangen hat" icon="{{ iconHeart }}" hint-size="100%,44px"></x-import>
|
||||
<div style="display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:var(--gutter-grid); align-items:start">
|
||||
<p style="font:var(--text-body-l); color:var(--text-body); max-width:52ch">Im September haben wir den Second-Hand-Laden übernommen — eine Herzensangelegenheit. Kinder und Jugendliche sollen Spielsachen bekommen, die ein zweites Leben verdient haben: nachhaltig, familienfreundlich und für jeden Geldbeutel.</p>
|
||||
<p style="font:var(--text-body-l); color:var(--text-body); max-width:52ch">Bei uns findest du Einzelstücke — vom Strampler bis zum Bobbycar. Jedes Teil gibt es nur 1× vorhanden, und jedes hat schon eine Geschichte hinter sich.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="max-width:560px; margin:0 auto; padding:var(--space-8) var(--page-pad-x) var(--space-16); display:grid; gap:var(--space-5); justify-items:center">
|
||||
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.ImagePlaceholder" slot-id="opa-martin" label="Bild von Opa Martin hier ablegen" tone="sun" ratio="1 / 1" radius="var(--radius-xl)" style="width:100%" hint-size="100%,420px"></x-import>
|
||||
<span style="font:var(--text-display-m); color:var(--sky-500)">Opa Martin</span>
|
||||
</section>
|
||||
|
||||
<section 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="Für Familien" icon="{{ iconFamily }}" hint-size="100%,44px"></x-import>
|
||||
<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="Preise für Familien" body="Second-Hand-Preise, die zum Familienbudget passen." tone="cool" hint-size="100%,150px"></x-import>
|
||||
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.InfoTile" title="Sehr gut erhalten" body="Auch aus zweiter Hand: geprüft, sauber, in gutem Zustand." tone="band" hint-size="100%,150px"></x-import>
|
||||
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.InfoTile" title="Wir suchen mit" body="Sag uns, was du brauchst — wir helfen beim Suchen." tone="soft" hint-size="100%,150px"></x-import>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<sc-if value="{{ audioSichtbar }}" hint-placeholder-val="{{ true }}">
|
||||
<section 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="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 Laden</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>
|
||||
</sc-if>
|
||||
|
||||
<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); 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(--sun-600)">Hilfe. Herz. Hoffnung.</span>
|
||||
<h2 style="font:var(--text-display-l); color:var(--sky-500)">Unser Hilfe Verein ist im Aufbau.</h2>
|
||||
<p style="font:var(--text-body-l); color:var(--text-body); max-width:46ch">Soziale Hilfe für unsere Region. Dafür brauchen wir finanzielle und menschliche Hilfe — in jeder Form, die du geben kannst.</p>
|
||||
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.Button" as="a" href="./Hilfe Verein.dc.html" size="l" hint-size="220px,48px">So kannst du helfen</x-import>
|
||||
</div>
|
||||
<img src="./assets/logo-verein.jpeg" alt="Emma's Schatzkiste Hilfe Verein" style="width:100%; max-width:380px; justify-self:center; mix-blend-mode:multiply" />
|
||||
</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 data-props="{"audioSichtbar":{"editor":"boolean","default":true,"tsType":"boolean","section":"Inhalte"}}">
|
||||
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 });
|
||||
}
|
||||
|
||||
renderVals() {
|
||||
return {
|
||||
audioSichtbar: this.props.audioSichtbar ?? true,
|
||||
navItems: ['Start', 'Shop', 'Hilfe Verein', 'Kontakt'],
|
||||
onNavigate: item => {
|
||||
if (item === 'Shop') window.location.href = './Shop.dc.html';
|
||||
else if (item === 'Hilfe Verein') window.location.href = './Hilfe Verein.dc.html';
|
||||
else if (item === 'Kontakt') window.location.href = './Hilfe Verein.dc.html#kontakt';
|
||||
},
|
||||
iconArrow: this.icon('arrow-right', 18),
|
||||
iconSparkles: this.icon('sparkles', 15),
|
||||
iconCheck: this.icon('badge-check', 15),
|
||||
iconSearch: this.icon('search', 15),
|
||||
footerColumns: [
|
||||
{ title: 'Laden', links: ['Unser Laden', 'Öffnungszeiten', 'Ware abgeben'] },
|
||||
{ title: 'Hilfe Verein', links: ['Spenden', 'Mithelfen', 'Weitersagen'] },
|
||||
{ title: 'Über', links: ['Über uns', 'Kontakt', 'Impressum'] }
|
||||
],
|
||||
iconHeart: this.icon('heart'),
|
||||
iconFamily: this.icon('heart-handshake'),
|
||||
iconMusic: this.icon('music')
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large.
Load diff
File diff suppressed because it is too large.
Load diff
Reference in new issue
Block a user