494 lines
20 KiB
HTML
494 lines
20 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Invité | Event erstellen</title>
|
||
|
||
<!-- Stylesheet für diese Seite-->
|
||
<link rel="stylesheet" href="css/event_create.css" />
|
||
<script src="js/navigation.js" defer></script>
|
||
|
||
<!-- Globales Stylesheet -->
|
||
<link rel="stylesheet" href="css/stylesheet_global.css">
|
||
|
||
<!-- Font Awesome Icons -->
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.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="button-small" href="login.html" aria-label="Login">Login</a>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
|
||
<main class="event-create-page layout-narrow">
|
||
<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 hero startseite">
|
||
<div>
|
||
<p class="badge margin-bottom-40">Event erstellen</p>
|
||
<h1 id="intro-title">Hey <span id="username">{{username}}</span>, was hast du vor?</h1>
|
||
<p class="step-text margin-bottom-40">
|
||
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-primary" data-start-flow>
|
||
Los geht’s!
|
||
</button>
|
||
</div>
|
||
|
||
<div class="hero__right" aria-label="Stimmungsbild zur Event-Erstellung">
|
||
<img
|
||
class="intro-image"
|
||
src="assets/eventcreate_foodtable-new.jpg"
|
||
alt="Ein gedeckter Tisch mit gemeinsamem Essen"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="step" data-step="1" aria-labelledby="step1-title">
|
||
<div class="step-layout">
|
||
<div class="step-copy">
|
||
<p class="badge">Schritt 1</p>
|
||
<h2 id="step1-title">Was hast du vor?</h2>
|
||
<p class="step-text margin-bottom-40">
|
||
Erzähl uns, was für ein Event du planst. Ist es ein gemütlicher Brunch,
|
||
ein Dinner mit Wow-Effekt oder einfach ein entspanntes Mittagessen mit gutem Essen?
|
||
</p>
|
||
</div>
|
||
|
||
<div class="step-fields">
|
||
<fieldset class="form-field">
|
||
<label>Art des Essens / Eventtyp</label>
|
||
|
||
<div class="option-grid option-grid--4 option-grid--event-type option-grid--icon-choices option-grid--tomato-choices">
|
||
<label class="option-card option option-card--with-icon">
|
||
<input type="radio" name="eventType" value="Brunch" required />
|
||
<i class="fa-solid fa-bread-slice option-card__icon" aria-hidden="true"></i>
|
||
<span>Brunch</span>
|
||
</label>
|
||
|
||
<label class="option-card option option-card--with-icon">
|
||
<input type="radio" name="eventType" value="Lunch" />
|
||
<i class="fa-solid fa-pizza-slice option-card__icon" aria-hidden="true"></i>
|
||
<span>Lunch</span>
|
||
</label>
|
||
|
||
<label class="option-card option option-card--with-icon">
|
||
<input type="radio" name="eventType" value="Kaffee + Kuchen" />
|
||
<i class="fa-solid fa-mug-hot option-card__icon" aria-hidden="true"></i>
|
||
<span>Kaffee + Kuchen</span>
|
||
</label>
|
||
|
||
<label class="option-card option option-card--with-icon">
|
||
<input type="radio" name="eventType" value="Dinner" />
|
||
<i class="fa-solid fa-martini-glass option-card__icon" aria-hidden="true"></i>
|
||
<span>Dinner</span>
|
||
</label>
|
||
</div>
|
||
</fieldset>
|
||
|
||
<fieldset class="form-field">
|
||
<label>Maximale Personenanzahl</label>
|
||
|
||
<div class="counter" data-counter>
|
||
<button
|
||
type="button"
|
||
class="counter-button"
|
||
data-counter-action="decrease"
|
||
aria-label="Personenzahl verringern"
|
||
>
|
||
−
|
||
</button>
|
||
<div class="counter-value-group">
|
||
<i class="fa-solid fa-user-group guest-count-icon" aria-hidden="true"></i>
|
||
<input
|
||
type="number"
|
||
id="maxGuests"
|
||
name="maxGuests"
|
||
min="1"
|
||
step="1"
|
||
value="0"
|
||
required
|
||
/>
|
||
</div>
|
||
<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="badge">Schritt 2</p>
|
||
<h2 id="step2-title">Was kommt auf den Tisch?</h2>
|
||
<p class="step-text margin-bottom-40">
|
||
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">
|
||
<label>Ernährungsform</label>
|
||
|
||
<div class="option-grid option-grid--4 option-grid--icon-choices option-grid--tomato-choices">
|
||
<label class="option-card option option-card--with-icon">
|
||
<input type="checkbox" name="dietType" value="Fleisch" />
|
||
<i class="fa-solid fa-drumstick-bite option-card__icon" aria-hidden="true"></i>
|
||
<span>Fleisch</span>
|
||
</label>
|
||
|
||
<label class="option-card option option-card--with-icon">
|
||
<input type="checkbox" name="dietType" value="Fisch" />
|
||
<i class="fa-solid fa-fish option-card__icon" aria-hidden="true"></i>
|
||
<span>Fisch</span>
|
||
</label>
|
||
|
||
<label class="option-card option option-card--with-icon">
|
||
<input type="checkbox" name="dietType" value="Vegetarisch" />
|
||
<i class="fa-solid fa-seedling option-card__icon" aria-hidden="true"></i>
|
||
<span>Vegetarisch</span>
|
||
</label>
|
||
|
||
<label class="option-card option option-card--with-icon">
|
||
<input type="checkbox" name="dietType" value="Vegan" />
|
||
<i class="fa-solid fa-leaf option-card__icon" aria-hidden="true"></i>
|
||
<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="badge">Schritt 3</p>
|
||
<h2 id="step3-title">Gibt es etwas zu beachten?</h2>
|
||
<p class="step-text margin-bottom-40">
|
||
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">
|
||
<label>Allergene / Unverträglichkeiten</label>
|
||
<p class="field-hint">Optional – nur auswählen, wenn es für dein Event relevant ist.</p>
|
||
|
||
<div class="option-grid option-grid--3 option-grid--tomato-choices">
|
||
<label class="option-card option">
|
||
<input type="checkbox" name="allergies" value="glutenfrei" />
|
||
<span>Glutenfrei</span>
|
||
</label>
|
||
|
||
<label class="option-card option">
|
||
<input type="checkbox" name="allergies" value="laktosefrei" />
|
||
<span>Laktosefrei</span>
|
||
</label>
|
||
|
||
<label class="option-card option">
|
||
<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</label>
|
||
<p class="field-hint">Optional – nur auswählen, wenn es für dein Event relevant ist.</p>
|
||
<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="badge">Schritt 4</p>
|
||
<h2 id="step4-title">Wann findet dein Event statt?</h2>
|
||
<p class="step-text margin-bottom-40">
|
||
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="badge">Schritt 5</p>
|
||
<h2 id="step5-title">Wo findet dein Event statt?</h2>
|
||
<p class="step-text margin-bottom-40">
|
||
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="badge">Schritt 6</p>
|
||
<h2 id="step6-title">Gib deinem Event den letzten Schliff.</h2>
|
||
<p class="step-text margin-bottom-40">
|
||
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 heissen?</label>
|
||
<input type="text" id="eventTitle" name="eventTitle" required />
|
||
</div>
|
||
|
||
<div class="form-field">
|
||
<label for="eventDescription">Beschreibung des Events</label>
|
||
<textarea id="eventDescription" name="eventDescription" rows="6" required></textarea>
|
||
</div>
|
||
|
||
<div class="form-field">
|
||
<label>Wie wird dein Event aussehen?</label>
|
||
<p class="field-hint">Optional – füge Bilder zu deinem Event hinzu.</p>
|
||
<div class= "option-grid option-grid--4">
|
||
<div class="gallery-preview" id="galleryPreview"></div>
|
||
<button type="button" class="gallery-add-button" id="galleryAddBtn" aria-label="Foto hinzufügen">
|
||
<i class="fa-solid fa-plus gallery-add-button__icon" aria-hidden="true"></i>
|
||
<span class="option">Foto hinzufügen</span>
|
||
</button>
|
||
<input type="file" id="galleryFileInput" accept="image/*" multiple hidden />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="step" data-step="7" aria-labelledby="step7-title">
|
||
<div class="step-layout">
|
||
<div class="step-copy">
|
||
<p class="badge">Schritt 7</p>
|
||
<h2 id="step7-title">Dein Event auf einen Blick</h2>
|
||
<p class="step-text margin-bottom-40">
|
||
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>
|
||
|
||
<div class="review-item" data-edit-step="6" data-edit-field="galleryAddBtn" role="button" tabindex="0" aria-label="Fotos bearbeiten">
|
||
<dt>Fotos</dt>
|
||
<dd>
|
||
<div class="review-gallery" data-review-gallery>
|
||
<span>Keine Fotos hinzugefügt</span>
|
||
</div>
|
||
</dd>
|
||
</div>
|
||
</dl>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<div class="flow-footer" id="flowFooter" hidden>
|
||
<div class="flow-actions">
|
||
<button type="button" id="backButton" class="button-secondary">
|
||
Zurück
|
||
</button>
|
||
|
||
<div class="progress-wrap">
|
||
<span class="progress-label" id="progressMarkerLabel">
|
||
Schritt 1 von 7
|
||
</span>
|
||
<div class="progress">
|
||
<span id="progressBar" class="progress-bar"></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flow-actions-right">
|
||
<p
|
||
id="errorMessage"
|
||
class="error-message error-message--callout"
|
||
role="alert"
|
||
aria-live="assertive"
|
||
></p>
|
||
<button type="button" id="nextButton" class="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 hero startseite">
|
||
<div class="step-copy">
|
||
<div class="submission-success-title-row">
|
||
<h2 id="success-title">Dein Event ist ready </h2>
|
||
<span class="submission-success-icon" aria-hidden="true">
|
||
<!-- <i class="fa-solid fa-champagne-glasses"></i>-->
|
||
</span>
|
||
</div>
|
||
<p class="step-text margin-bottom-40">
|
||
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 class="submission-success-actions">
|
||
<a class="button-primary button--intro" href="my_profil.html">Weiter zu deinem Profil</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="hero__right" aria-label="Stimmungsbild zur Event-Erstellung">
|
||
<img
|
||
class="intro-image"
|
||
src="assets/eventcreate_foodtable with friends.jpg"
|
||
alt="Gemeinsames Essen an einem gedeckten Tisch"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</form>
|
||
</main>
|
||
|
||
<div class="footer">
|
||
<div class="footer-left">
|
||
<p class="p-small inline">© <img src="assets/logo_invite.svg" alt="Invité Logo" class="footer-invite_logo" /></p>
|
||
</div>
|
||
|
||
<div class="footer-center">
|
||
<a href="https://www.instagram.com" target="_blank" rel="noopener noreferrer" class="instagram-invite__link">
|
||
<img src="assets/Icon_instagram.png" alt="Instagram" class="instagram-invite_icon" />
|
||
</a>
|
||
</div>
|
||
|
||
<div class="footer-right footer-links">
|
||
<a href="impressum.html" class="link-text-footer">Impressum</a>
|
||
<a href="datenschutz.html" class="link-text-footer">Datenschutz</a>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="js/event_create.js"></script>
|
||
</body>
|
||
</html>
|