193 lines
8.9 KiB
HTML
193 lines
8.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Mein Profil | Invité</title>
|
|
|
|
<!-- Stylesheet für diese Seite -->
|
|
<link rel="stylesheet" href="css/my_profil.css">
|
|
<!-- Globales Stylesheet -->
|
|
<link rel="stylesheet" href="css/stylesheet_global.css">
|
|
<script src="js/navigation.js" defer></script>
|
|
</head>
|
|
|
|
<body>
|
|
<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">
|
|
<button id="logout-button" class="button-small profile-logout" type="button">
|
|
Logout
|
|
</button>
|
|
<a class="button-small" href="login.html" aria-label="Login">
|
|
Login
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="layout-wide">
|
|
<section class="profile-hero" aria-label="Profilübersicht">
|
|
<div>
|
|
<p class="badge margin-bottom-40">Mein Bereich</p>
|
|
<h1 id="headline">Mein Profil</h1>
|
|
<p id="profile-subline" class="profile-subline">Hier findest du deine Events, deine Anmeldungen und kannst deine Profildaten verwalten.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="logged-out-state" class="profile-panel hidden" aria-live="polite">
|
|
<h2 class="panel-title">Du bist noch nicht eingeloggt</h2>
|
|
<p>Melde dich an, damit wir deine Events und Anmeldungen anzeigen können.</p>
|
|
<div class="profile-cta-row">
|
|
<a class="button-primary" href="login.html">Zum Login</a>
|
|
<a class="button-primary profile-button-secondary" href="signup.html">Konto erstellen</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="logged-in-content" class="profile-grid">
|
|
<nav class="category-items" aria-label="Profilbereiche">
|
|
<button type="button" class="category-item is-active category-item-profile" data-category-item="hosting">
|
|
Meine Events <span class="btn-count" id="btn-my-events-count">0</span>
|
|
</button>
|
|
<button type="button"
|
|
class="category-item category-item-profile" data-category-item="teilnehmen">
|
|
Meine Anmeldungen <span class="btn-count" id="btn-my-registrations-count">0</span>
|
|
</button>
|
|
<button type="button" class="category-item category-item-profile" data-category-item="einstellungen">Profil-Einstellungen</button>
|
|
</nav>
|
|
|
|
<article data-profile-panel="hosting">
|
|
<div class="panel-head">
|
|
<span id="my-events-count" class="panel-count">0</span>
|
|
</div>
|
|
<div id="my-events-list" class="profile-card-list"></div>
|
|
</article>
|
|
|
|
<article data-profile-panel="teilnehmen">
|
|
<div class="panel-head">
|
|
<span id="my-registrations-count" class="panel-count">0</span>
|
|
</div>
|
|
<p class="info-abmeldung">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--olive)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink: 0; margin-top: 1px;">
|
|
<circle cx="12" cy="12" r="10"/>
|
|
<line x1="12" y1="8" x2="12" y2="8"/>
|
|
<line x1="12" y1="12" x2="12" y2="16"/>
|
|
</svg>
|
|
Eine Abmeldung ist bis 24 Stunden vor Eventbeginn möglich. Bitte respektiere den Host und melde dich rechtzeitig ab, wenn du nicht kommen kannst.
|
|
</p>
|
|
<div id="my-registrations-list" class="profile-card-list"></div>
|
|
</article>
|
|
|
|
<article class="profile-panel profile-panel-form hidden" data-profile-panel="einstellungen">
|
|
<h2 class="panel-title">Profil verwalten</h2>
|
|
<form id="profile-form" novalidate>
|
|
<div class="form-grid">
|
|
<div class="margin-bottom-16">
|
|
<label class="label-input-field" for="vorname">Vorname</label>
|
|
<input type="text" id="vorname" name="vorname" required>
|
|
<p class="input-error" id="vorname-error">Bitte gib deinen Vornamen ein.</p>
|
|
</div>
|
|
|
|
<div class="margin-bottom-16">
|
|
<label class="label-input-field" for="nachname">Nachname</label>
|
|
<input type="text" id="nachname" name="nachname" required>
|
|
<p class="input-error" id="nachname-error">Bitte gib deinen Nachnamen ein.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="margin-bottom-16">
|
|
<label class="label-input-field" for="email">E-Mail</label>
|
|
<input type="email" id="email" name="email" required>
|
|
<p class="input-error" id="email-error">Bitte gib eine gültige E-Mail-Adresse ein.</p>
|
|
</div>
|
|
|
|
<div class="margin-bottom-40">
|
|
<label class="label-input-field" for="passwort">Passwort</label>
|
|
<input type="password" id="passwort" name="passwort" minlength="6" placeholder="Mindestens 6 Zeichen">
|
|
<p class="input-hint">Nur ausfüllen, wenn du dein Passwort ändern möchtest.</p>
|
|
<p class="input-error" id="passwort-error">Das Passwort muss mindestens 6 Zeichen lang sein.</p>
|
|
</div>
|
|
|
|
<button class="button-primary" type="submit">Profil speichern</button>
|
|
<p id="profile-feedback" class="profile-feedback" aria-live="polite"></p>
|
|
</form>
|
|
</article>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- Logout Confirmation Modal -->
|
|
<div id="logoutModal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2>Abmelden?</h2>
|
|
</div>
|
|
<p class="modal-body">
|
|
Bist du sicher, dass du dich abmelden möchtest?
|
|
<button type="button" class="modal-close" aria-label="Popup schließen">×</button>
|
|
</p>
|
|
<div class="modal-footer">
|
|
<button class="button-primary button--outline" type="button" onclick="closeLogoutModal()">Abbrechen</button>
|
|
<button class="button-primary" type="button" onclick="confirmLogout()">Abmelden</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="unregister-confirm-modal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2>Pläne haben sich geändert?</h2>
|
|
<button type="button" class="modal-close" id="unregister-modal-close" aria-label="Popup schließen">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>Schade, dass du nicht dabei sein kannst! Aber manchmal kommt einfach etwas dazwischen. Wenn du dich jetzt abmeldest, gibst du deinen Stuhl am Tisch für jemand anderen aus der Community frei. So hilfst du bei der Planung und ein anderer Feinschmecker freut sich über den freien Platz.</p>
|
|
</div>
|
|
<div class="modal-footer" style="display: flex; justify-content: flex-end; gap: 16px; margin-top: 24px;">
|
|
<button class="button-primary button--outline" type="button" id="unregister-modal-cancel">Abbrechen</button>
|
|
<button class="button-primary button-primary-abmelden" type="button" id="confirm-unregister-btn">Ja, abmelden</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Snackbar: Feedback bei Abmeldung von Events -->
|
|
<div class="snackbar" id="snackbar"></div>
|
|
|
|
<!-- Event-Absage Confirmation Modal -->
|
|
<div id="cancelEventModal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2>Event absagen?</h2>
|
|
</div>
|
|
<p class="modal-body">
|
|
Bist du sicher, dass du dieses Event absagen möchtest? Diese Aktion kann nicht rückgängig gemacht werden.
|
|
<button type="button" class="modal-close" aria-label="Popup schließen">×</button>
|
|
</p>
|
|
<div class="modal-footer">
|
|
<button class="button-secondary" type="button" onclick="closeCancelEventModal()">Abbrechen</button>
|
|
<button class="button-primary-abmelden" type="button" id="confirmCancelEventBtn";>Event absagen</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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/my_profil.js"></script>
|
|
</body>
|
|
</html>
|