419 lines
16 KiB
HTML
419 lines
16 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Event erstellen | Invité</title>
|
||
|
||
<!-- Stylesheet für diese Seite-->
|
||
<link rel="stylesheet" href="css/event_create.css" />
|
||
<!-- Globales Stylesheet -->
|
||
<link rel="stylesheet" href="css/stylesheet_global.css">
|
||
</head>
|
||
|
||
<body>
|
||
<!-- Top Navigation mit Seitenlinks -->
|
||
<header class="top-nav-wrap">
|
||
<div class="top-nav">
|
||
<a class="brand" href="index.html" aria-label="Zur Startseite">
|
||
<img src="assets/logo_invite.svg" alt="Invite Logo">
|
||
</a>
|
||
<nav class="nav-tab-links" aria-label="Hauptnavigation">
|
||
<a class="nav-tab" href="event_overview.html">Event finden</a>
|
||
<a class="nav-tab" href="event_create.html">Event erstellen</a>
|
||
<a class="button-small" href="login.html" aria-label="Profil">Login</a>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
|
||
<main class="event-create-page">
|
||
<section class="event-flow-header" aria-label="Event erstellen Aktionen">
|
||
</section>
|
||
|
||
<form id="eventForm" class="event-form" novalidate>
|
||
<section
|
||
class="step step--active step--intro"
|
||
data-step="0"
|
||
aria-labelledby="intro-title"
|
||
>
|
||
<div class="step-layout step-layout--intro">
|
||
<div class="step-copy">
|
||
<p class="step-kicker">Event erstellen</p>
|
||
<h1 id="intro-title">Hey <span id="username">{{username}}</span>, was hast du vor?</h1>
|
||
<p class="step-text">
|
||
Erzähl uns von deiner Idee – vom Essen bis zur Stimmung. Ob Dinner, Brunch
|
||
oder etwas ganz Eigenes – wir helfen dir dabei, dein Event in sieben Schritten aufzubauen.
|
||
</p>
|
||
<button type="button" class="button button--primary button--intro" data-start-flow>
|
||
Los geht’s!
|
||
</button>
|
||
</div>
|
||
|
||
<aside class="intro-card intro-card--image" aria-label="Stimmungsbild zur Event-Erstellung">
|
||
<img
|
||
class="intro-image"
|
||
src="assets/eventcreate_foodtable.jpg"
|
||
alt="Ein gedeckter Tisch mit gemeinsamem Essen"
|
||
/>
|
||
</aside>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="step" data-step="1" aria-labelledby="step1-title">
|
||
<div class="step-layout">
|
||
<div class="step-copy">
|
||
<p class="step-kicker">Schritt 1</p>
|
||
<h2 id="step1-title">Was hast du vor?</h2>
|
||
<p class="step-text">
|
||
Erzähl uns, was für ein Event du planst. Ist es ein gemütlicher Brunch,
|
||
ein Dinner mit Wow-Effekt oder einfach ein entspannter Abend mit gutem Essen?
|
||
</p>
|
||
</div>
|
||
|
||
<div class="step-fields">
|
||
<fieldset class="form-field">
|
||
<legend>Art des Essens / Eventtyp</legend>
|
||
|
||
<div class="option-grid option-grid--4">
|
||
<label class="option-card">
|
||
<input type="radio" name="eventType" value="Brunch" required />
|
||
<span>Brunch</span>
|
||
</label>
|
||
|
||
<label class="option-card">
|
||
<input type="radio" name="eventType" value="Lunch" />
|
||
<span>Lunch</span>
|
||
</label>
|
||
|
||
<label class="option-card">
|
||
<input type="radio" name="eventType" value="Kaffee + Kuchen" />
|
||
<span>Kaffee + Kuchen</span>
|
||
</label>
|
||
|
||
<label class="option-card">
|
||
<input type="radio" name="eventType" value="Dinner" />
|
||
<span>Dinner</span>
|
||
</label>
|
||
</div>
|
||
</fieldset>
|
||
|
||
<fieldset class="form-field">
|
||
<legend>Maximale Personenanzahl</legend>
|
||
|
||
<div class="counter" data-counter>
|
||
<button
|
||
type="button"
|
||
class="counter-button"
|
||
data-counter-action="decrease"
|
||
aria-label="Personenzahl verringern"
|
||
>
|
||
−
|
||
</button>
|
||
<input
|
||
type="number"
|
||
id="maxGuests"
|
||
name="maxGuests"
|
||
min="1"
|
||
step="1"
|
||
value="4"
|
||
required
|
||
/>
|
||
<button
|
||
type="button"
|
||
class="counter-button"
|
||
data-counter-action="increase"
|
||
aria-label="Personenzahl erhöhen"
|
||
>
|
||
+
|
||
</button>
|
||
</div>
|
||
</fieldset>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="step" data-step="2" aria-labelledby="step2-title">
|
||
<div class="step-layout">
|
||
<div class="step-copy">
|
||
<p class="step-kicker">Schritt 2</p>
|
||
<h2 id="step2-title">Was kommt auf den Tisch?</h2>
|
||
<p class="step-text">
|
||
Mach uns neugierig. Was gibt es zu essen? Gibt es eine bestimmte Ernährungsform oder ein Motto? Je mehr du verrätst, desto besser können sich deine Gäste auf dein Event freuen.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="step-fields">
|
||
<fieldset class="form-field">
|
||
<legend>Ernährungsform</legend>
|
||
|
||
<div class="option-grid option-grid--3">
|
||
<label class="option-card">
|
||
<input type="radio" name="dietType" value="Omnivor" required />
|
||
<span>Omnivor</span>
|
||
<small>Fleisch und/oder Fisch</small>
|
||
</label>
|
||
|
||
<label class="option-card">
|
||
<input type="radio" name="dietType" value="Vegetarisch" />
|
||
<span>Vegetarisch</span>
|
||
</label>
|
||
|
||
<label class="option-card">
|
||
<input type="radio" name="dietType" value="Vegan" />
|
||
<span>Vegan</span>
|
||
</label>
|
||
</div>
|
||
</fieldset>
|
||
|
||
<div class="form-field">
|
||
<label for="menuDescription">Was ist das Menü?</label>
|
||
<textarea id="menuDescription" name="menuDescription" rows="5" required></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="step" data-step="3" aria-labelledby="step3-title">
|
||
<div class="step-layout">
|
||
<div class="step-copy">
|
||
<p class="step-kicker">Schritt 3</p>
|
||
<h2 id="step3-title">Gibt es etwas zu beachten?</h2>
|
||
<p class="step-text">
|
||
Gibt es Allergien, Unverträglichkeiten oder andere Hinweise, die für dein Event wichtig sind? So wissen deine Gäste gleich, worauf sie sich einstellen können.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="step-fields">
|
||
<fieldset class="form-field">
|
||
<legend>Allergene / Unverträglichkeiten</legend>
|
||
<p class="field-hint">Optional – nur auswählen, wenn es für dein Event relevant ist.</p>
|
||
|
||
<div class="option-grid option-grid--3">
|
||
<label class="option-card option-card--checkbox">
|
||
<input type="checkbox" name="allergies" value="glutenfrei" />
|
||
<span>glutenfrei</span>
|
||
</label>
|
||
|
||
<label class="option-card option-card--checkbox">
|
||
<input type="checkbox" name="allergies" value="laktosefrei" />
|
||
<span>laktosefrei</span>
|
||
</label>
|
||
|
||
<label class="option-card option-card--checkbox">
|
||
<input type="checkbox" name="allergies" value="ohne Nüsse" />
|
||
<span>ohne Nüsse</span>
|
||
</label>
|
||
</div>
|
||
</fieldset>
|
||
|
||
<div class="form-field">
|
||
<label for="allergiesOther">Weitere Unverträglichkeiten oder Hinweise (optional)</label>
|
||
<textarea id="allergiesOther" name="allergiesOther" rows="3"></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="step" data-step="4" aria-labelledby="step4-title">
|
||
<div class="step-layout">
|
||
<div class="step-copy">
|
||
<p class="step-kicker">Schritt 4</p>
|
||
<h2 id="step4-title">Wann findet dein Event statt?</h2>
|
||
<p class="step-text">
|
||
Wähle Datum und Uhrzeit für dein Event. So können deine Gäste direkt einschätzen, ob der Termin für sie passt.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="step-fields">
|
||
<div class="field-row">
|
||
<div class="form-field">
|
||
<label for="eventDate">Datum</label>
|
||
<input type="date" id="eventDate" name="eventDate" required />
|
||
</div>
|
||
|
||
<div class="form-field">
|
||
<label for="eventTime">Uhrzeit</label>
|
||
<input type="time" id="eventTime" name="eventTime" required />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="step" data-step="5" aria-labelledby="step5-title">
|
||
<div class="step-layout">
|
||
<div class="step-copy">
|
||
<p class="step-kicker">Schritt 5</p>
|
||
<h2 id="step5-title">Wo findet dein Event statt?</h2>
|
||
<p class="step-text">
|
||
Sag uns, wo dein Event stattfindet. Keine Sorge: Die genaue Adresse sehen Gäste erst nach der Buchung.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="step-fields">
|
||
<div class="form-field">
|
||
<label for="eventAddress">Adresse</label>
|
||
<input type="text" id="eventAddress" name="eventAddress" autocomplete="street-address" required />
|
||
</div>
|
||
|
||
<div class="form-field">
|
||
<label for="eventCity">Ort</label>
|
||
<input type="text" id="eventCity" name="eventCity" autocomplete="address-level2" required />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="step" data-step="6" aria-labelledby="step6-title">
|
||
<div class="step-layout">
|
||
<div class="step-copy">
|
||
<p class="step-kicker">Schritt 6</p>
|
||
<h2 id="step6-title">Gib deinem Event den letzten Schliff.</h2>
|
||
<p class="step-text">
|
||
Jetzt bekommt dein Event seinen Namen und die Atmosphäre, die Lust aufs Dabeisein macht.
|
||
Ein klarer Titel (z.B. "Italienische Tavolata") und ein guter Beschreibungstext (Ablauf etc.) machen den Unterschied.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="step-fields">
|
||
<div class="form-field">
|
||
<label for="eventTitle">Wie soll dein Event heißen?</label>
|
||
<input type="text" id="eventTitle" name="eventTitle" required />
|
||
</div>
|
||
|
||
<div class="form-field">
|
||
<label for="eventDescription">Beschreibung des Event-Abends</label>
|
||
<textarea id="eventDescription" name="eventDescription" rows="6" required></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="step" data-step="7" aria-labelledby="step7-title">
|
||
<div class="step-layout">
|
||
<div class="step-copy">
|
||
<p class="step-kicker">Schritt 7</p>
|
||
<h2 id="step7-title">Dein Event auf einen Blick.</h2>
|
||
<p class="step-text">
|
||
Schau dir alle Details nochmal in Ruhe an. Wenn alles passt,
|
||
kannst du dein Event jetzt veröffentlichen und Gäste einladen.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="review-card" aria-live="polite">
|
||
<dl class="review-list">
|
||
<div class="review-item" data-edit-step="1" data-edit-field="eventType" role="button" tabindex="0" aria-label="Eventtyp bearbeiten">
|
||
<dt>Eventtyp</dt>
|
||
<dd data-review="eventType">–</dd>
|
||
</div>
|
||
|
||
<div class="review-item" data-edit-step="1" data-edit-field="maxGuests" role="button" tabindex="0" aria-label="Maximale Personenanzahl bearbeiten">
|
||
<dt>Maximale Personenanzahl</dt>
|
||
<dd data-review="maxGuests">–</dd>
|
||
</div>
|
||
|
||
<div class="review-item" data-edit-step="2" data-edit-field="dietType" role="button" tabindex="0" aria-label="Ernährungsform bearbeiten">
|
||
<dt>Ernährungsform</dt>
|
||
<dd data-review="dietType">–</dd>
|
||
</div>
|
||
|
||
<div class="review-item" data-edit-step="2" data-edit-field="menuDescription" role="button" tabindex="0" aria-label="Menü bearbeiten">
|
||
<dt>Menü</dt>
|
||
<dd data-review="menuDescription">–</dd>
|
||
</div>
|
||
|
||
<div class="review-item" data-edit-step="3" data-edit-field="allergiesOther" role="button" tabindex="0" aria-label="Allergene und Unverträglichkeiten bearbeiten">
|
||
<dt>Allergene / Unverträglichkeiten</dt>
|
||
<dd data-review="allergies">Keine Angabe</dd>
|
||
</div>
|
||
|
||
<div class="review-item" data-edit-step="4" data-edit-field="eventDate" role="button" tabindex="0" aria-label="Datum bearbeiten">
|
||
<dt>Datum</dt>
|
||
<dd data-review="eventDate">–</dd>
|
||
</div>
|
||
|
||
<div class="review-item" data-edit-step="4" data-edit-field="eventTime" role="button" tabindex="0" aria-label="Uhrzeit bearbeiten">
|
||
<dt>Uhrzeit</dt>
|
||
<dd data-review="eventTime">–</dd>
|
||
</div>
|
||
|
||
<div class="review-item" data-edit-step="5" data-edit-field="eventAddress" role="button" tabindex="0" aria-label="Adresse bearbeiten">
|
||
<dt>Adresse</dt>
|
||
<dd data-review="eventAddress">–</dd>
|
||
</div>
|
||
|
||
<div class="review-item" data-edit-step="5" data-edit-field="eventCity" role="button" tabindex="0" aria-label="Ort bearbeiten">
|
||
<dt>Ort</dt>
|
||
<dd data-review="eventCity">–</dd>
|
||
</div>
|
||
|
||
<div class="review-item" data-edit-step="6" data-edit-field="eventTitle" role="button" tabindex="0" aria-label="Eventtitel bearbeiten">
|
||
<dt>Eventtitel</dt>
|
||
<dd data-review="eventTitle">–</dd>
|
||
</div>
|
||
|
||
<div class="review-item" data-edit-step="6" data-edit-field="eventDescription" role="button" tabindex="0" aria-label="Event-Abend bearbeiten">
|
||
<dt>Event-Abend</dt>
|
||
<dd data-review="eventDescription">–</dd>
|
||
</div>
|
||
</dl>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="flow-footer" id="flowFooter" hidden>
|
||
<div class="progress-wrap" aria-hidden="true">
|
||
<div class="progress-marker" id="progressMarker">
|
||
<span class="progress-marker__circle" id="progressMarkerLabel">1</span>
|
||
</div>
|
||
<div class="progress">
|
||
<span id="progressBar" class="progress-bar"></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flow-actions">
|
||
<button type="button" id="backButton" class="button button--text">Zurück</button>
|
||
|
||
<div class="flow-actions-right">
|
||
<p id="errorMessage" class="error-message" role="alert" aria-live="assertive"></p>
|
||
<button type="button" id="nextButton" class="button button--primary">Weiter</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<section
|
||
id="submissionSuccess"
|
||
class="submission-success"
|
||
aria-labelledby="success-title"
|
||
aria-live="polite"
|
||
hidden
|
||
>
|
||
<div class="step-layout">
|
||
<div class="step-copy">
|
||
<p class="step-kicker">Event erstellt</p>
|
||
<h2 id="success-title">Dein Event ist ready.</h2>
|
||
<p class="step-text">
|
||
Sieht gut aus: Deine Idee ist jetzt live und bereit für Gäste.
|
||
Im Profil kannst du dein Event anschauen, verwalten oder direkt das nächste planen.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="review-card review-card--success">
|
||
<div class="submission-success-actions">
|
||
<a class="button button--primary" href="event_overview.html">Weiter zu deinem Profil</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</form>
|
||
</main>
|
||
|
||
<footer class="site-footer">
|
||
<p>© Social Cooking</p>
|
||
</footer>
|
||
|
||
<script src="js/event_create.js"></script>
|
||
</body>
|
||
</html>
|