359 lines
13 KiB
HTML
359 lines
13 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 Schritt für Schritt aufzubauen.
|
||
</p>
|
||
<button type="button" class="button button--primary button--intro" data-start-flow>
|
||
Los geht’s!
|
||
</button>
|
||
</div>
|
||
|
||
<aside class="intro-card" aria-label="Hinweis zur Event-Erstellung">
|
||
<div class="intro-card-emoji" aria-hidden="true">🍽️</div>
|
||
<p>Aus einer Idee wird Schritt für Schritt dein Event.</p>
|
||
</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">
|
||
<div class="form-field">
|
||
<label for="eventTitle">Wie soll dein Event heißen?</label>
|
||
<input type="text" id="eventTitle" name="eventTitle" required />
|
||
</div>
|
||
|
||
<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>
|
||
</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 kochst du – und wie fühlt sich dein Abend an?
|
||
Hier entsteht die Geschichte, auf die sich deine Gäste freuen.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="step-fields">
|
||
<div class="form-field">
|
||
<label for="menuDescription">Was ist das Menü?</label>
|
||
<textarea id="menuDescription" name="menuDescription" rows="5" required></textarea>
|
||
</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="3" aria-labelledby="step3-title">
|
||
<div class="step-layout">
|
||
<div class="step-copy">
|
||
<p class="step-kicker">Schritt 3</p>
|
||
<h2 id="step3-title">Wen lädst du ein?</h2>
|
||
<p class="step-text">
|
||
Wie viele Gäste passen zu deinem Event? Und gibt es etwas, das du bei
|
||
Ernährung oder Unverträglichkeiten beachten möchtest?
|
||
</p>
|
||
</div>
|
||
|
||
<div class="step-fields">
|
||
<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>
|
||
|
||
<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>
|
||
|
||
<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>
|
||
|
||
<div class="form-field">
|
||
<label for="allergiesOther">Weitere Unverträglichkeiten oder Hinweise (optional)</label>
|
||
<textarea id="allergiesOther" name="allergiesOther" rows="3"></textarea>
|
||
</div>
|
||
</fieldset>
|
||
</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 – und 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="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 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="5" aria-labelledby="step5-title">
|
||
<div class="step-layout">
|
||
<div class="step-copy">
|
||
<p class="step-kicker">Schritt 5</p>
|
||
<h2 id="step5-title">Alles bereit für deine Gäste?</h2>
|
||
<p class="step-text">
|
||
Schau dir dein Event nochmal in Ruhe an. Passt alles?
|
||
Dann kannst du es jetzt veröffentlichen und Gäste einladen.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="review-card" aria-live="polite">
|
||
<dl class="review-list">
|
||
<div class="review-item">
|
||
<dt>Eventtitel</dt>
|
||
<dd data-review="eventTitle">–</dd>
|
||
</div>
|
||
|
||
<div class="review-item">
|
||
<dt>Eventtyp</dt>
|
||
<dd data-review="eventType">–</dd>
|
||
</div>
|
||
|
||
<div class="review-item">
|
||
<dt>Menü</dt>
|
||
<dd data-review="menuDescription">–</dd>
|
||
</div>
|
||
|
||
<div class="review-item">
|
||
<dt>Event-Abend</dt>
|
||
<dd data-review="eventDescription">–</dd>
|
||
</div>
|
||
|
||
<div class="review-item">
|
||
<dt>Maximale Personenanzahl</dt>
|
||
<dd data-review="maxGuests">–</dd>
|
||
</div>
|
||
|
||
<div class="review-item">
|
||
<dt>Ernährungsform</dt>
|
||
<dd data-review="dietType">–</dd>
|
||
</div>
|
||
|
||
<div class="review-item">
|
||
<dt>Allergene / Unverträglichkeiten</dt>
|
||
<dd data-review="allergies">Keine Angabe</dd>
|
||
</div>
|
||
|
||
<div class="review-item">
|
||
<dt>Datum</dt>
|
||
<dd data-review="eventDate">–</dd>
|
||
</div>
|
||
|
||
<div class="review-item">
|
||
<dt>Uhrzeit</dt>
|
||
<dd data-review="eventTime">–</dd>
|
||
</div>
|
||
|
||
<div class="review-item">
|
||
<dt>Adresse</dt>
|
||
<dd data-review="eventAddress">–</dd>
|
||
</div>
|
||
|
||
<div class="review-item">
|
||
<dt>Ort</dt>
|
||
<dd data-review="eventCity">–</dd>
|
||
</div>
|
||
</dl>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="flow-footer" id="flowFooter" hidden>
|
||
<div class="progress" aria-hidden="true">
|
||
<span id="progressBar" class="progress-bar"></span>
|
||
</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>
|
||
</form>
|
||
</main>
|
||
|
||
<footer class="site-footer">
|
||
<p>© Social Cooking</p>
|
||
</footer>
|
||
|
||
<script src="js/event_create.js"></script>
|
||
</body>
|
||
</html> |