till/vk-friseur
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Design Raster: neue Startseite und alle Unterseiten, echte Fotos, neue Seiten Barber, Neu bei uns, Karriere, Gutscheine; Anfrage mit Braut- und Great-Lengths-Feldern; 301 für Ortsseiten

Browse Source
This commit is contained in:
till committed 2026-10-10 07:18:41 +02:00
1 parent f65e9d0463
commit 52bfcc95f5
106 files changed
+2164 -2542
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/pages/anfrage/index.astro
+100 -96
View File
@@ -1,66 +1,110 @@
---
import Base from '../../layouts/Base.astro';
import Icon from '../../components/Icon.astro';
import '../../styles/form.css';
import { anliegen, salon, ANFRAGE_ENDPOINT, eur } from '../../data/site';
import { anliegen, salon, ANFRAGE_ENDPOINT, waits } from '../../data/site';
---
<Base
title="Anfrage stellen"
description="Anfrage an das Friseur-Team VK in Tostedt für Brautstyling, Balayage, Haarverlängerung und mehr. Mit Fotos, Wunschzeitraum und Rückrufzeit. Wir melden uns telefonisch."
description="Anfrage an das Friseur-Team VK in Tostedt für Braut, Great Lengths, Balayage und Farbe. Mit Fotos und Wunschzeitraum, Rückruf innerhalb von zwei Werktagen."
crumbs={[{ name: 'Anfrage', href: '/anfrage' }]}
bar="kontakt"
>
<section class="aq">
<div class="wrap aq__grid">
<div class="aq__side">
<p class="label">Anfrage</p>
<h1>Erzählen Sie uns, <em>was Sie vorhaben.</em></h1>
<p class="lead">Wir vergeben Termine nicht online, sondern im Gespräch. Mit diesen Angaben können wir vorab einschätzen, wie viel Zeit wir einplanen und wer aus dem Team am besten passt.</p>
</div>
<section class="ph" aria-labelledby="ph-h">
<div class="pad">
<p class="ph__crumb"><a href="/">Start</a> <span>/ Anfrage</span></p>
<h1 id="ph-h" class="ph__title is-mid"><span class="sr">Erzählen Sie uns, was Sie vorhaben.</span><span aria-hidden="true"><span class="ini">E</span>rzählen Sie uns,<br /><span class="it">was Sie vorhaben.</span></span></h1>
</div>
</section>
<div class="aq__main">
<section class="sec-b" aria-label="Anfrageformular">
<div class="r3 aq">
<aside class="ab aq__side">
<div class="gap-5 aq__sticky">
<p class="lead">Termine vergeben wir im Gespräch, nicht online. Mit diesen Angaben wissen wir vorab, wie viel Zeit wir einplanen und wer aus dem Team am besten passt.</p>
<ol class="aq__how" role="list">
<li><span>1</span>Sie schicken die Anfrage, gern mit Fotos.</li>
<li><span>2</span>Wir rufen innerhalb von zwei Werktagen zurück.</li>
<li><span>3</span>Wir tragen den Termin ein und bestätigen ihn.</li>
</ol>
<div class="note note--wash">
<p class="cap">Schnitt, Herren, Kinder</p>
<p>Dafür brauchen Sie kein Formular. Rufen Sie an oder schreiben Sie per WhatsApp.</p>
<div class="row"><a class="oval oval--sm" href={salon.phoneHref}>{salon.phoneDisplay}</a><a class="go" href={salon.whatsappHref} rel="noopener">WhatsApp</a></div>
</div>
</div>
</aside>
<div class="c aq__main">
<div id="f-summary" class="f__summary" role="alert" tabindex="-1" hidden>
<h2>Bitte prüfen Sie Ihre Angaben</h2>
<ul></ul>
</div>
<form id="anfrage" class="f" action={ANFRAGE_ENDPOINT} method="post" enctype="multipart/form-data" data-endpoint={ANFRAGE_ENDPOINT}>
<!-- 1 Anliegen -->
<fieldset>
<legend><span class="f__n">1</span>Worum geht es?</legend>
<div class="choices choices--2" role="radiogroup" aria-describedby="err-anliegen">
<div class="choices" role="radiogroup" aria-describedby="err-anliegen">
{anliegen.map((a) => (
<label class="choice">
<input type="radio" name="anliegen" value={a.value} required data-hint={a.hint} data-label={a.label} />
<span class="choice__t">{a.label}</span>
<span class="choice__h">{a.from !== null ? `ab ${eur(a.from)}` : 'Preis nach Absprache'}</span>
<span class="choice__h">{a.sub}</span>
</label>
))}
</div>
<p class="f__err" id="err-anliegen" data-for="anliegen"></p>
</fieldset>
<!-- 2 Braut (nur bei Brautstyling) -->
<!-- Braut -->
<fieldset class="step-later" data-locked data-only="braut">
<legend><span class="f__n">2</span>Ihre Hochzeit <span class="f__opt nojs-only">(nur bei Brautstyling)</span></legend>
<div class="f__row3">
<div class="f__field">
<label class="f__label" for="hochzeitsdatum">Datum der Hochzeit</label>
<input type="date" id="hochzeitsdatum" name="hochzeitsdatum" />
</div>
<div class="f__field">
<label class="f__label" for="ort">Ort oder Location <span class="f__opt">(optional)</span></label>
<input type="text" id="ort" name="ort" autocomplete="off" placeholder="Name der Location oder Adresse" />
</div>
<div class="f__field">
<label class="f__label" for="personen">Personen mit Styling</label>
<input type="number" id="personen" name="personen" min="1" max="15" inputmode="numeric" placeholder="1" aria-describedby="help-personen" />
<p class="f__help" id="help-personen">Braut plus Begleitung, zum Beispiel 3</p>
</div>
<legend><span class="f__n" data-num>2</span>Ihre Hochzeit</legend>
<div class="f__row2">
<div class="f__field"><label class="f__label" for="hochzeitsdatum">Datum der Hochzeit</label><input type="date" id="hochzeitsdatum" name="hochzeitsdatum" /></div>
<div class="f__field"><label class="f__label" for="x_trauung">Uhrzeit der Trauung</label><input type="time" id="x_trauung" name="x_trauung" data-label="Trauung um" /></div>
</div>
<p class="note note--wash small" id="braut-kurz" hidden>Ihre Hochzeit ist in weniger als acht Wochen. Rufen Sie uns bitte direkt an, dann sagen wir Ihnen sofort, ob es noch passt: <a class="link" href={salon.phoneHref}>{salon.phoneDisplay}</a></p>
<div class="f__row2">
<div class="f__field"><label class="f__label" for="x_fertig">Alle fertig bis <span class="f__opt">(optional)</span></label><input type="time" id="x_fertig" name="x_fertig" data-label="Fertig bis" /></div>
<div class="f__field"><label class="f__label" for="ort">Ort oder Location <span class="f__opt">(optional)</span></label><input type="text" id="ort" name="ort" autocomplete="off" placeholder="z. B. Gutshof in Handeloh" /></div>
</div>
<div class="f__row2">
<div class="f__field"><label class="f__label" for="personen">Personen mit Frisur</label><input type="number" id="personen" name="personen" min="1" max="15" inputmode="numeric" placeholder="1" aria-describedby="help-personen" /><p class="f__help" id="help-personen">Braut plus Begleitung</p></div>
<div class="f__field"><label class="f__label" for="x_makeup">Personen mit Make-up <span class="f__opt">(optional)</span></label><input type="number" id="x_makeup" name="x_makeup" min="0" max="15" inputmode="numeric" placeholder="0" data-label="Make-up für" /></div>
</div>
<fieldset class="f__group">
<legend class="f__sub">Wo soll gestylt werden?</legend>
<div class="choices choices--inline">
<label class="choice"><input type="radio" name="x_wo" value="im Salon" data-label="Styling" /><span class="choice__t">Im Salon</span></label>
<label class="choice"><input type="radio" name="x_wo" value="vor Ort" data-label="Styling" /><span class="choice__t">Vor Ort</span></label>
<label class="choice"><input type="radio" name="x_wo" value="noch offen" data-label="Styling" /><span class="choice__t">Noch offen</span></label>
</div>
</fieldset>
</fieldset>
<!-- 3 Haar -->
<!-- Great Lengths -->
<fieldset class="step-later" data-locked data-only="verlaengerung">
<legend><span class="f__n" data-num>2</span>Ihr Wunsch</legend>
<fieldset class="f__group">
<legend class="f__sub">Was möchten Sie?</legend>
<div class="choices choices--inline">
<label class="choice"><input type="radio" name="x_gl" value="mehr Länge" data-label="Great Lengths" /><span class="choice__t">Mehr Länge</span></label>
<label class="choice"><input type="radio" name="x_gl" value="mehr Fülle" data-label="Great Lengths" /><span class="choice__t">Mehr Fülle</span></label>
<label class="choice"><input type="radio" name="x_gl" value="beides" data-label="Great Lengths" /><span class="choice__t">Beides</span></label>
</div>
</fieldset>
<div class="f__row2">
<div class="f__field">
<label class="f__label" for="x_ziel">Gewünschte Länge</label>
<select id="x_ziel" name="x_ziel" data-label="Ziellänge"><option value="">Bitte wählen</option><option>bis Schulter</option><option>bis Brust</option><option>bis Mitte Rücken</option><option>noch länger</option></select>
</div>
<div class="f__field">
<label class="f__label" for="x_budget">Budgetrahmen</label>
<select id="x_budget" name="x_budget" data-label="Budget"><option value="">Bitte wählen</option><option>bis 500 €</option><option>500 bis 900 €</option><option>900 bis 1.400 €</option><option>über 1.400 €</option><option>weiß ich noch nicht</option></select>
</div>
</div>
<label class="check"><input type="checkbox" name="x_frueher" value="ja" data-label="Hatte schon Extensions" /><span>Ich hatte schon einmal Extensions.</span></label>
</fieldset>
<!-- Haar -->
<fieldset class="step-later" data-locked>
<legend><span class="f__n" data-num>2</span>Ihr Haar heute</legend>
<fieldset class="f__group">
@@ -82,21 +126,21 @@ import { anliegen, salon, ANFRAGE_ENDPOINT, eur } from '../../data/site';
</fieldset>
<div class="f__field">
<label class="f__label" for="wunsch">Ihr Wunsch <span class="f__opt">(optional)</span></label>
<textarea id="wunsch" name="wunsch" rows="4" maxlength="2000" aria-describedby="help-wunsch"></textarea>
<textarea id="wunsch" name="wunsch" rows="4" maxlength="1500" aria-describedby="help-wunsch"></textarea>
<p class="f__help" id="help-wunsch">Was soll sich ändern? Was hat Ihnen beim letzten Mal nicht gefallen?</p>
</div>
<div class="f__field">
<span class="f__label" id="lbl-fotos">Fotos <span class="f__opt">(optional, bis zu 3, je höchstens 6 MB)</span></span>
<div class="drop">
<input type="file" id="fotos" name="fotos" accept="image/jpeg,image/png,image/webp,image/heic,image/heif" multiple aria-labelledby="lbl-fotos" aria-describedby="help-fotos err-fotos" />
<p class="f__help" id="help-fotos">Am besten ein Foto vom Ist-Zustand, bei Tageslicht von hinten, und eins von Ihrem Wunsch.</p>
<p class="f__help" id="help-fotos">Ein Foto von Ihrem Haar heute, bei Tageslicht von hinten, hilft uns sehr.</p>
</div>
<ul class="files" id="files" aria-live="polite"></ul>
<p class="f__err" id="err-fotos" data-for="fotos"></p>
</div>
</fieldset>
<!-- 4 Zeit -->
<!-- Zeit -->
<fieldset class="step-later" data-locked>
<legend><span class="f__n" data-num>3</span>Wann passt es Ihnen?</legend>
<div class="f__field">
@@ -109,11 +153,16 @@ import { anliegen, salon, ANFRAGE_ENDPOINT, eur } from '../../data/site';
<option>In ein bis drei Monaten</option>
<option>Später oder fester Termin</option>
</select>
<p class="f__help">Aktuell: {waits.items.map((w) => `${w.label} ${w.value.toLowerCase()}`).join(' · ')}</p>
</div>
<label class="check check--box">
<input type="checkbox" name="warteliste" value="on" />
<span><strong>Ich kann auch kurzfristig.</strong><br /><span class="small">Wenn ein Termin frei wird, rufen wir Sie an. So kommen Sie oft schneller dran.</span></span>
<span><strong>Ich kann auch kurzfristig.</strong><br /><span class="small muted">Wenn ein Termin frei wird, rufen wir Sie an. So kommen Sie oft schneller dran.</span></span>
</label>
<div class="f__field">
<label class="f__label" for="x_tage">Passende Tage <span class="f__opt">(optional)</span></label>
<input type="text" id="x_tage" name="x_tage" placeholder="z. B. dienstags und freitags ab 14 Uhr" data-label="Passende Tage" />
</div>
<fieldset class="f__group">
<legend class="f__sub">Waren Sie schon bei uns?</legend>
<div class="choices choices--inline">
@@ -123,13 +172,13 @@ import { anliegen, salon, ANFRAGE_ENDPOINT, eur } from '../../data/site';
</fieldset>
</fieldset>
<!-- 5 Kontakt -->
<!-- Kontakt -->
<fieldset class="step-later" data-locked>
<legend><span class="f__n" data-num>4</span>Wie erreichen wir Sie?</legend>
<div class="f__row2">
<div class="f__field">
<label class="f__label" for="name">Name <span class="f__req" aria-hidden="true">*</span></label>
<input type="text" id="name" name="name" required autocomplete="name" maxlength="120" aria-describedby="err-name" />
<input type="text" id="name" name="name" required autocomplete="name" maxlength="100" aria-describedby="err-name" />
<p class="f__err" id="err-name" data-for="name"></p>
</div>
<div class="f__field">
@@ -154,59 +203,34 @@ import { anliegen, salon, ANFRAGE_ENDPOINT, eur } from '../../data/site';
</fieldset>
<div class="pricebox" aria-live="polite">
<p class="label">Preisrahmen</p>
<p class="cap">Preisrahmen</p>
<p class="pricebox__v" id="pricebox-v" hidden></p>
<ul class="pricebox__all" id="pricebox-all">
{anliegen.map((a) => <li>{a.label}: {a.hint}</li>)}
</ul>
<p class="small">Richtwerte. Den genauen Preis nennen wir im Gespräch. <a href="/leistungen-preise">Alle Preise</a></p>
<ul class="pricebox__all" id="pricebox-all" role="list">{anliegen.map((a) => <li>{a.label}: {a.hint}</li>)}</ul>
<p class="small">Richtwerte. Den genauen Preis nennen wir nach der Beratung. <a class="link" href="/leistungen-preise">Alle Preise</a></p>
</div>
<label class="check">
<input type="checkbox" name="preis_ok" value="on" />
<span>Ich habe den Preisrahmen gesehen und möchte beraten werden.</span>
</label>
<label class="check"><input type="checkbox" name="preis_ok" value="on" /><span>Ich habe den Preisrahmen gesehen und möchte beraten werden.</span></label>
<label class="check">
<input type="checkbox" name="datenschutz" value="on" required aria-describedby="err-datenschutz" />
<span>Ich bin einverstanden, dass der Salon meine Angaben und Fotos speichert, um meine Anfrage zu bearbeiten. Mehr in der <a href="/datenschutz">Datenschutzerklärung</a>. <span class="f__req" aria-hidden="true">*</span></span>
<span>Ich bin einverstanden, dass der Salon meine Angaben und Fotos speichert, um meine Anfrage zu bearbeiten. Mehr in der <a class="link" href="/datenschutz">Datenschutzerklärung</a>. <span class="f__req" aria-hidden="true">*</span></span>
</label>
<p class="f__err" id="err-datenschutz" data-for="datenschutz"></p>
<div class="hp" aria-hidden="true">
<label for="website">Website (bitte leer lassen)</label>
<input type="text" id="website" name="website" tabindex="-1" autocomplete="off" />
</div>
<div class="hp" aria-hidden="true"><label for="website">Website (bitte leer lassen)</label><input type="text" id="website" name="website" tabindex="-1" autocomplete="off" /></div>
<div class="f__submit">
<button type="submit" class="btn" id="f-btn"><span class="f__spin" aria-hidden="true"></span><span class="f__btn-t">Anfrage senden</span><Icon name="arrow" /></button>
<p class="f__help">* Pflichtfeld. Wir melden uns telefonisch, eine Online-Buchung gibt es bewusst nicht.</p>
<button type="submit" class="oval oval--fill f__btn" id="f-btn"><span class="f__spin" aria-hidden="true"></span><span class="f__btn-t">Anfrage senden</span></button>
<p class="f__help">* Pflichtfeld. Absenden ist noch keine Buchung, wir rufen Sie zurück.</p>
<p class="f__err" id="f-net" role="alert"></p>
</div>
</fieldset>
</form>
<div id="f-done" class="done" tabindex="-1" hidden>
<span class="done__ico"><Icon name="check" /></span>
<h2 id="f-done-h">Danke, Ihre Anfrage ist da.</h2>
<p id="f-done-p">Wir rufen Sie zurück, um alles Weitere zu besprechen.</p>
<p class="small leise" id="f-done-id"></p>
<a class="more" href="/"><span>Zur Startseite</span><Icon name="arrow" /></a>
<span class="step__n" aria-hidden="true">Danke</span>
<h2 id="f-done-h" class="h3">Danke, Ihre Anfrage ist da.</h2>
<p id="f-done-p">Wir rufen Sie innerhalb von zwei Werktagen zurück.</p>
<p class="cap" id="f-done-id"></p>
<div class="row"><a class="oval" href="/">Zur Startseite</a><a class="go" href="/kundenkarte">Kundenkarte</a></div>
</div>
</div>
<aside class="aq__more" aria-label="So geht es weiter">
<ol class="aq__how">
<li><span>1</span>Sie schicken die Anfrage, gern mit Fotos.</li>
<li><span>2</span>Wir rufen Sie zu Ihrer Wunschzeit zurück.</li>
<li><span>3</span>Wir tragen den Termin ein und bestätigen ihn.</li>
</ol>
<div class="aq__regular">
<p class="f__label">Schon Kundin oder Kunde bei uns?</p>
<p class="small">Dann geht es am schnellsten direkt:</p>
<div class="btn-row">
<a class="btn btn--ghost" href={salon.phoneHref}><Icon name="phone" />{salon.phoneDisplay}</a>
<a class="btn btn--ghost" href={salon.whatsappHref} rel="noopener"><Icon name="whatsapp" />WhatsApp</a>
</div>
</div>
</aside>
</div>
</section>
</Base>
@@ -215,23 +239,3 @@ import { anliegen, salon, ANFRAGE_ENDPOINT, eur } from '../../data/site';
import { initAnfrage } from '../../scripts/anfrage';
initAnfrage();
</script>
<style>
.aq { padding-block: var(--s-7) var(--section); }
.aq__grid { display: grid; gap: var(--s-7); grid-template-areas: 'side' 'main' 'more'; }
.aq__side { grid-area: side; display: grid; gap: var(--s-5); align-content: start; }
.aq__side h1 { font-size: var(--fs-h2); }
.aq__main { grid-area: main; min-width: 0; display: grid; gap: var(--s-5); align-content: start; }
.aq__more { grid-area: more; display: grid; gap: var(--s-6); align-content: start; }
.aq__how { list-style: none; padding: 0; display: grid; gap: var(--s-3); border-top: var(--hair); padding-top: var(--s-5); }
.aq__how li { display: grid; grid-template-columns: 2rem 1fr; align-items: baseline; }
.aq__how span { font-family: var(--font-display); font-style: italic; color: var(--c-petrol); font-size: 1.25rem; }
.aq__regular { display: grid; gap: var(--s-3); padding: var(--s-5); background: var(--c-nebel-hell); border-radius: var(--r-m); }
@media (min-width: 64rem) {
.aq__grid { grid-template-columns: 0.85fr 1.15fr; grid-template-areas: 'side main' 'more main'; grid-template-rows: auto 1fr; column-gap: var(--s-9); row-gap: var(--s-6); }
}
:global(.f__row2), :global(.f__row3) { display: grid; gap: var(--s-5); }
@media (min-width: 40rem) { :global(.f__row2) { grid-template-columns: 1fr 1fr; } }
@media (min-width: 52rem) { :global(.f__row3) { grid-template-columns: 1fr 1.3fr 1fr; } }
:global(.f.is-js .nojs-only) { display: none; }
</style>