379 lines
22 KiB
HTML
379 lines
22 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 – DeckelApp</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet"/>
|
||
<style>
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
:root {
|
||
--orange: #f97316; --amber: #f59e0b; --red: #dc2626;
|
||
--dark: #1c1917; --light: #fffbef; --gray: #78716c; --border: #e7e5e4;
|
||
--green: #22c55e;
|
||
}
|
||
body { font-family: 'Poppins', sans-serif; background: #f5f5f4; color: var(--dark); min-height: 100vh; }
|
||
|
||
/* TOP NAV (minimal, member-facing) */
|
||
nav {
|
||
background: #fff; border-bottom: 1px solid var(--border);
|
||
padding: 0 5%; height: 62px; display: flex; align-items: center; justify-content: space-between;
|
||
position: sticky; top: 0; z-index: 50;
|
||
}
|
||
.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
|
||
.logo-icon { width: 34px; height: 34px; border-radius: 8px; background: linear-gradient(135deg, var(--orange), var(--amber)); display: flex; align-items: center; justify-content: center; font-size: 16px; }
|
||
.nav-brand { font-weight: 800; font-size: 1rem; color: var(--dark); }
|
||
.club-tag { font-size: 0.75rem; font-weight: 600; color: var(--gray); }
|
||
.nav-right { display: flex; align-items: center; gap: 12px; }
|
||
.lang-toggle { background: none; border: 2px solid var(--border); border-radius: 20px; padding: 4px 12px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.78rem; cursor: pointer; color: var(--gray); transition: all .2s; }
|
||
.lang-toggle:hover { border-color: var(--orange); color: var(--orange); }
|
||
.nav-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--orange), var(--amber)); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.8rem; color: #fff; cursor: pointer; }
|
||
|
||
/* PAGE */
|
||
.page { max-width: 1000px; margin: 0 auto; padding: 36px 24px; }
|
||
.breadcrumb { font-size: 0.8rem; color: var(--gray); margin-bottom: 24px; display: flex; align-items: center; gap: 6px; }
|
||
.breadcrumb a { color: var(--orange); text-decoration: none; font-weight: 500; }
|
||
|
||
/* PROFILE HERO */
|
||
.profile-hero {
|
||
background: linear-gradient(135deg, var(--dark) 0%, #292524 100%);
|
||
border-radius: 18px; padding: 36px; margin-bottom: 24px; color: #fff;
|
||
display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
|
||
position: relative; overflow: hidden;
|
||
}
|
||
.profile-hero::before {
|
||
content: ''; position: absolute; width: 300px; height: 300px;
|
||
background: radial-gradient(circle, rgba(249,115,22,0.15) 0%, transparent 70%);
|
||
top: -80px; right: -60px; border-radius: 50%;
|
||
}
|
||
.profile-avatar-large {
|
||
width: 90px; height: 90px; border-radius: 50%; flex-shrink: 0;
|
||
background: linear-gradient(135deg, var(--orange), var(--amber));
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 2rem; font-weight: 800; color: #fff;
|
||
border: 4px solid rgba(255,255,255,0.2);
|
||
position: relative; z-index: 1;
|
||
}
|
||
.profile-info { flex: 1; min-width: 200px; position: relative; z-index: 1; }
|
||
.profile-name { font-size: 1.7rem; font-weight: 800; margin-bottom: 4px; }
|
||
.profile-email { color: #a8a29e; font-size: 0.9rem; margin-bottom: 12px; }
|
||
.profile-badges { display: flex; gap: 8px; flex-wrap: wrap; }
|
||
.p-badge { padding: 4px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 700; }
|
||
.p-badge-orange { background: rgba(249,115,22,0.2); color: var(--orange); border: 1px solid rgba(249,115,22,0.3); }
|
||
.p-badge-gray { background: rgba(255,255,255,0.1); color: #d6d3d1; }
|
||
.profile-deckel-box {
|
||
background: rgba(220,38,38,0.15); border: 1px solid rgba(220,38,38,0.3);
|
||
border-radius: 14px; padding: 20px 24px; text-align: center; min-width: 160px;
|
||
position: relative; z-index: 1;
|
||
}
|
||
.deckel-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #fca5a5; margin-bottom: 6px; }
|
||
.deckel-amount { font-size: 2.2rem; font-weight: 800; color: #fca5a5; }
|
||
.deckel-sub { font-size: 0.75rem; color: #f87171; margin-top: 4px; }
|
||
.btn-pay-now {
|
||
margin-top: 12px; width: 100%; padding: 10px; border: none; border-radius: 9px;
|
||
background: linear-gradient(135deg, var(--orange), var(--amber)); color: #fff;
|
||
font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 0.85rem; cursor: pointer;
|
||
}
|
||
|
||
/* STATS ROW */
|
||
.stats-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-bottom: 24px; }
|
||
.mini-stat { background: #fff; border-radius: 12px; border: 1px solid var(--border); padding: 18px; text-align: center; }
|
||
.mini-stat .val { font-size: 1.6rem; font-weight: 800; margin-bottom: 4px; }
|
||
.mini-stat .lbl { font-size: 0.78rem; color: var(--gray); font-weight: 500; }
|
||
.col-orange { color: var(--orange); }
|
||
.col-green { color: var(--green); }
|
||
.col-blue { color: #3b82f6; }
|
||
.col-amber { color: var(--amber); }
|
||
|
||
/* GRID */
|
||
.grid-2 { display: grid; grid-template-columns: 1fr 340px; gap: 20px; }
|
||
.card { background: #fff; border-radius: 14px; border: 1px solid var(--border); overflow: hidden; }
|
||
.card-header { padding: 18px 22px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
|
||
.card-title { font-size: 0.95rem; font-weight: 700; }
|
||
.btn-sm { padding: 6px 14px; border-radius: 7px; border: none; cursor: pointer; font-family: 'Poppins', sans-serif; font-size: 0.78rem; font-weight: 600; transition: all .2s; }
|
||
.btn-sm-primary { background: var(--orange); color: #fff; }
|
||
.btn-sm-ghost { background: var(--border); color: var(--dark); }
|
||
|
||
/* TABLE */
|
||
table { width: 100%; border-collapse: collapse; }
|
||
thead th { padding: 10px 18px; text-align: left; font-size: 0.72rem; font-weight: 700; color: var(--gray); text-transform: uppercase; letter-spacing: 0.8px; border-bottom: 1px solid var(--border); background: #fafaf9; }
|
||
tbody tr { border-bottom: 1px solid var(--border); }
|
||
tbody tr:last-child { border-bottom: none; }
|
||
tbody tr:hover { background: #fafaf9; }
|
||
tbody td { padding: 11px 18px; font-size: 0.87rem; }
|
||
|
||
/* MONTH GROUPS */
|
||
.month-group { padding: 8px 18px; background: #fafaf9; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--gray); border-bottom: 1px solid var(--border); }
|
||
|
||
/* SETTINGS */
|
||
.settings-list { display: flex; flex-direction: column; }
|
||
.setting-item { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--border); }
|
||
.setting-item:last-child { border-bottom: none; }
|
||
.setting-label { font-size: 0.9rem; font-weight: 600; margin-bottom: 2px; }
|
||
.setting-sub { font-size: 0.78rem; color: var(--gray); }
|
||
.toggle { width: 42px; height: 24px; border-radius: 12px; background: var(--border); border: none; cursor: pointer; position: relative; transition: background .2s; flex-shrink: 0; }
|
||
.toggle.on { background: var(--orange); }
|
||
.toggle::after { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #fff; top: 3px; left: 3px; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
|
||
.toggle.on::after { transform: translateX(18px); }
|
||
|
||
/* INVOICE LIST */
|
||
.invoice-item { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; border-bottom: 1px solid var(--border); }
|
||
.invoice-item:last-child { border-bottom: none; }
|
||
.inv-icon { width: 38px; height: 38px; border-radius: 9px; background: rgba(249,115,22,0.1); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
|
||
.inv-title { font-size: 0.88rem; font-weight: 600; }
|
||
.inv-sub { font-size: 0.75rem; color: var(--gray); }
|
||
.inv-amount { font-weight: 800; font-size: 0.95rem; }
|
||
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 20px; font-size: 0.7rem; font-weight: 700; }
|
||
.badge-green { background: rgba(34,197,94,0.12); color: #16a34a; }
|
||
.badge-red { background: rgba(220,38,38,0.1); color: var(--red); }
|
||
.badge-gray { background: #f5f5f4; color: var(--gray); }
|
||
|
||
.col-stack { display: flex; flex-direction: column; gap: 20px; }
|
||
|
||
/* EDIT MODAL */
|
||
.modal-overlay { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); align-items: center; justify-content: center; }
|
||
.modal-overlay.active { display: flex; }
|
||
.modal { background: #fff; border-radius: 18px; padding: 32px; width: 100%; max-width: 400px; position: relative; box-shadow: 0 24px 60px rgba(0,0,0,0.18); animation: slideUp .3s ease; }
|
||
@keyframes slideUp { from { opacity:0; transform: translateY(14px); } to { opacity:1; transform: translateY(0); } }
|
||
.modal-close { position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; border-radius: 50%; background: var(--border); border: none; cursor: pointer; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; }
|
||
.modal h2 { font-size: 1.2rem; font-weight: 800; margin-bottom: 20px; }
|
||
.form-group { margin-bottom: 13px; }
|
||
.form-group label { display: block; font-size: 0.82rem; font-weight: 600; margin-bottom: 5px; }
|
||
.form-group input { width: 100%; padding: 9px 12px; border: 2px solid var(--border); border-radius: 8px; font-family: 'Poppins', sans-serif; font-size: 0.9rem; outline: none; transition: border .2s; }
|
||
.form-group input:focus { border-color: var(--orange); }
|
||
.btn-primary { background: linear-gradient(135deg, var(--orange), var(--amber)); border: none; border-radius: 9px; padding: 11px; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 0.9rem; color: #fff; cursor: pointer; width: 100%; margin-top: 4px; }
|
||
|
||
@media (max-width: 900px) { .stats-row { grid-template-columns: repeat(2,1fr); } .grid-2 { grid-template-columns: 1fr; } .profile-hero { flex-direction: column; } }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- NAV -->
|
||
<nav>
|
||
<a class="nav-logo" href="index.html">
|
||
<div class="logo-icon">🍺</div>
|
||
<div>
|
||
<div class="nav-brand">DeckelApp</div>
|
||
<div class="club-tag">SC Biertrinker e.V.</div>
|
||
</div>
|
||
</a>
|
||
<div class="nav-right">
|
||
<button class="lang-toggle" onclick="toggleLang()" id="langBtn">EN</button>
|
||
<a href="admin.html" style="text-decoration:none;font-size:0.85rem;font-weight:600;color:var(--gray)" data-de="Admin" data-en="Admin">Admin</a>
|
||
<div class="nav-avatar">MK</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="page">
|
||
<div class="breadcrumb">
|
||
<a href="index.html">DeckelApp</a> › <span data-de="Mein Profil" data-en="My Profile">Mein Profil</span>
|
||
</div>
|
||
|
||
<!-- PROFILE HERO -->
|
||
<div class="profile-hero">
|
||
<div class="profile-avatar-large">MK</div>
|
||
<div class="profile-info">
|
||
<div class="profile-name">Max Kellner</div>
|
||
<div class="profile-email">max.kellner@email.de</div>
|
||
<div class="profile-badges">
|
||
<span class="p-badge p-badge-orange" data-de="Mitglied" data-en="Member">Mitglied</span>
|
||
<span class="p-badge p-badge-gray" data-de="SC Biertrinker e.V." data-en="SC Biertrinker e.V.">SC Biertrinker e.V.</span>
|
||
<span class="p-badge p-badge-gray" data-de="Dabei seit Jan 2024" data-en="Member since Jan 2024">Dabei seit Jan 2024</span>
|
||
</div>
|
||
</div>
|
||
<div class="profile-deckel-box">
|
||
<div class="deckel-label" data-de="Offener Deckel" data-en="Open Tab">Offener Deckel</div>
|
||
<div class="deckel-amount">32,50€</div>
|
||
<div class="deckel-sub" data-de="März 2025 · 14 Buchungen" data-en="March 2025 · 14 bookings">März 2025 · 14 Buchungen</div>
|
||
<button class="btn-pay-now" data-de="💳 Jetzt bezahlen" data-en="💳 Pay now">💳 Jetzt bezahlen</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- MINI STATS -->
|
||
<div class="stats-row">
|
||
<div class="mini-stat">
|
||
<div class="val col-orange">14</div>
|
||
<div class="lbl" data-de="Buchungen diesen Monat" data-en="Bookings this month">Buchungen diesen Monat</div>
|
||
</div>
|
||
<div class="mini-stat">
|
||
<div class="val col-amber">32,50€</div>
|
||
<div class="lbl" data-de="Offener Betrag" data-en="Open balance">Offener Betrag</div>
|
||
</div>
|
||
<div class="mini-stat">
|
||
<div class="val col-green">145,00€</div>
|
||
<div class="lbl" data-de="Gesamt bezahlt (2025)" data-en="Total paid (2025)">Gesamt bezahlt (2025)</div>
|
||
</div>
|
||
<div class="mini-stat">
|
||
<div class="val col-blue">🍺</div>
|
||
<div class="lbl" data-de="Lieblingsgetränk: Pils" data-en="Fav. drink: Pils">Lieblingsgetränk: Pils</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid-2">
|
||
<!-- LEFT -->
|
||
<div class="col-stack">
|
||
<!-- BOOKING HISTORY -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title" data-de="Buchungsverlauf" data-en="Booking History">Buchungsverlauf</div>
|
||
<button class="btn-sm btn-sm-ghost" data-de="Exportieren" data-en="Export">Exportieren</button>
|
||
</div>
|
||
<div class="month-group" data-de="März 2025 (offen)" data-en="March 2025 (open)">März 2025 (offen)</div>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th data-de="Getränk" data-en="Drink">Getränk</th>
|
||
<th data-de="Datum" data-en="Date">Datum</th>
|
||
<th data-de="Preis" data-en="Price">Preis</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>🍺 <span data-de="Pils 0,5l" data-en="Pils 0.5l">Pils 0,5l</span></td><td style="color:var(--gray)">29.03.25 18:32</td><td style="font-weight:700">2,50€</td></tr>
|
||
<tr><td>🍺 <span data-de="Weizen 0,5l" data-en="Wheat Beer 0.5l">Weizen 0,5l</span></td><td style="color:var(--gray)">29.03.25 17:15</td><td style="font-weight:700">3,00€</td></tr>
|
||
<tr><td>🥤 Cola 0,3l</td><td style="color:var(--gray)">28.03.25 20:44</td><td style="font-weight:700">2,00€</td></tr>
|
||
<tr><td>🍺 <span data-de="Pils 0,5l" data-en="Pils 0.5l">Pils 0,5l</span></td><td style="color:var(--gray)">28.03.25 20:12</td><td style="font-weight:700">2,50€</td></tr>
|
||
<tr><td>🍷 <span data-de="Rotwein 0,2l" data-en="Red Wine 0.2l">Rotwein 0,2l</span></td><td style="color:var(--gray)">27.03.25 19:30</td><td style="font-weight:700">3,50€</td></tr>
|
||
<tr><td>🥃 <span data-de="Korn 2cl" data-en="Schnapps 2cl">Korn 2cl</span></td><td style="color:var(--gray)">26.03.25 21:05</td><td style="font-weight:700">1,50€</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="month-group" data-de="Februar 2025 (bezahlt)" data-en="February 2025 (paid)">Februar 2025 (bezahlt)</div>
|
||
<table>
|
||
<tbody>
|
||
<tr style="opacity:0.6"><td>🍺 <span data-de="Pils 0,5l" data-en="Pils 0.5l">Pils 0,5l</span></td><td style="color:var(--gray)">28.02.25</td><td style="font-weight:700">2,50€</td></tr>
|
||
<tr style="opacity:0.6"><td>🍺 <span data-de="Weizen 0,5l" data-en="Wheat Beer 0.5l">Weizen 0,5l</span></td><td style="color:var(--gray)">21.02.25</td><td style="font-weight:700">3,00€</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- RIGHT -->
|
||
<div class="col-stack">
|
||
<!-- INVOICES -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title" data-de="Meine Rechnungen" data-en="My Invoices">Meine Rechnungen</div>
|
||
</div>
|
||
<div class="invoice-item">
|
||
<div class="inv-icon">🧾</div>
|
||
<div style="flex:1;margin:0 12px">
|
||
<div class="inv-title" data-de="März 2025" data-en="March 2025">März 2025</div>
|
||
<div class="inv-sub" data-de="14 Buchungen · offen" data-en="14 bookings · open">14 Buchungen · offen</div>
|
||
</div>
|
||
<div style="text-align:right">
|
||
<div class="inv-amount" style="color:var(--red)">32,50€</div>
|
||
<span class="badge badge-red" data-de="Offen" data-en="Open">Offen</span>
|
||
</div>
|
||
</div>
|
||
<div class="invoice-item">
|
||
<div class="inv-icon">🧾</div>
|
||
<div style="flex:1;margin:0 12px">
|
||
<div class="inv-title" data-de="Februar 2025" data-en="February 2025">Februar 2025</div>
|
||
<div class="inv-sub" data-de="22 Buchungen · bezahlt" data-en="22 bookings · paid">22 Buchungen · bezahlt</div>
|
||
</div>
|
||
<div style="text-align:right">
|
||
<div class="inv-amount" style="color:var(--green)">48,00€</div>
|
||
<span class="badge badge-green" data-de="Bezahlt" data-en="Paid">Bezahlt</span>
|
||
</div>
|
||
</div>
|
||
<div class="invoice-item">
|
||
<div class="inv-icon">🧾</div>
|
||
<div style="flex:1;margin:0 12px">
|
||
<div class="inv-title" data-de="Januar 2025" data-en="January 2025">Januar 2025</div>
|
||
<div class="inv-sub" data-de="18 Buchungen · bezahlt" data-en="18 bookings · paid">18 Buchungen · bezahlt</div>
|
||
</div>
|
||
<div style="text-align:right">
|
||
<div class="inv-amount" style="color:var(--green)">39,50€</div>
|
||
<span class="badge badge-green" data-de="Bezahlt" data-en="Paid">Bezahlt</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SETTINGS -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title" data-de="Einstellungen" data-en="Settings">Einstellungen</div>
|
||
<button class="btn-sm btn-sm-primary" onclick="openModal()" data-de="Bearbeiten" data-en="Edit">Bearbeiten</button>
|
||
</div>
|
||
<div class="settings-list">
|
||
<div class="setting-item">
|
||
<div>
|
||
<div class="setting-label" data-de="E-Mail Benachrichtigungen" data-en="Email Notifications">E-Mail Benachrichtigungen</div>
|
||
<div class="setting-sub" data-de="Neue Buchungen und Abrechnungen per Mail" data-en="New bookings and invoices by email">Neue Buchungen und Abrechnungen per Mail</div>
|
||
</div>
|
||
<button class="toggle on" onclick="this.classList.toggle('on')"></button>
|
||
</div>
|
||
<div class="setting-item">
|
||
<div>
|
||
<div class="setting-label" data-de="Monatliche Abrechnung" data-en="Monthly Billing">Monatliche Abrechnung</div>
|
||
<div class="setting-sub" data-de="Automatische Rechnungserstellung am Monatsende" data-en="Automatic invoice at end of month">Automatische Rechnungserstellung am Monatsende</div>
|
||
</div>
|
||
<button class="toggle on" onclick="this.classList.toggle('on')"></button>
|
||
</div>
|
||
<div class="setting-item">
|
||
<div>
|
||
<div class="setting-label" data-de="Erinnerungen bei offenem Deckel" data-en="Reminders for open tab">Erinnerungen bei offenem Deckel</div>
|
||
<div class="setting-sub" data-de="Wöchentliche Erinnerungs-Mail bei offenem Betrag" data-en="Weekly reminder email for open balance">Wöchentliche Erinnerungs-Mail bei offenem Betrag</div>
|
||
</div>
|
||
<button class="toggle" onclick="this.classList.toggle('on')"></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- LINKS -->
|
||
<div class="card" style="padding:16px 22px;display:flex;flex-direction:column;gap:8px">
|
||
<a href="deckel.html" style="display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:9px;text-decoration:none;color:var(--dark);font-weight:600;font-size:0.88rem;transition:background .2s" onmouseover="this.style.background='#f5f5f4'" onmouseout="this.style.background='none'">
|
||
<span>🧾 <span data-de="Getränk auf Deckel buchen" data-en="Book drink to tab">Getränk auf Deckel buchen</span></span><span style="color:var(--orange)">→</span>
|
||
</a>
|
||
<a href="preisliste.html" style="display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:9px;text-decoration:none;color:var(--dark);font-weight:600;font-size:0.88rem;transition:background .2s" onmouseover="this.style.background='#f5f5f4'" onmouseout="this.style.background='none'">
|
||
<span>🍺 <span data-de="Preisliste ansehen" data-en="View price list">Preisliste ansehen</span></span><span style="color:var(--orange)">→</span>
|
||
</a>
|
||
<a href="index.html" style="display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:9px;text-decoration:none;color:var(--gray);font-weight:500;font-size:0.85rem;transition:background .2s" onmouseover="this.style.background='#f5f5f4'" onmouseout="this.style.background='none'">
|
||
<span>🚪 <span data-de="Abmelden" data-en="Log out">Abmelden</span></span><span>→</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- EDIT PROFILE MODAL -->
|
||
<div class="modal-overlay" id="modalOverlay" onclick="closeOut(event)">
|
||
<div class="modal">
|
||
<button class="modal-close" onclick="closeModal()">✕</button>
|
||
<h2 data-de="Profil bearbeiten" data-en="Edit Profile">Profil bearbeiten</h2>
|
||
<div class="form-group">
|
||
<label data-de="Name" data-en="Name">Name</label>
|
||
<input type="text" value="Max Kellner" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label data-de="E-Mail" data-en="Email">E-Mail</label>
|
||
<input type="email" value="max.kellner@email.de" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label data-de="Neues Passwort" data-en="New Password">Neues Passwort</label>
|
||
<input type="password" placeholder="••••••••" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label data-de="Passwort bestätigen" data-en="Confirm Password">Passwort bestätigen</label>
|
||
<input type="password" placeholder="••••••••" />
|
||
</div>
|
||
<button class="btn-primary" data-de="Änderungen speichern" data-en="Save changes">Änderungen speichern</button>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
let currentLang = 'de';
|
||
function toggleLang() {
|
||
currentLang = currentLang === 'de' ? 'en' : 'de';
|
||
document.getElementById('langBtn').textContent = currentLang === 'de' ? 'EN' : 'DE';
|
||
document.querySelectorAll('[data-de]').forEach(el => {
|
||
const val = el.getAttribute('data-' + currentLang);
|
||
if (val) el.innerHTML = val;
|
||
});
|
||
}
|
||
function openModal() { document.getElementById('modalOverlay').classList.add('active'); }
|
||
function closeModal() { document.getElementById('modalOverlay').classList.remove('active'); }
|
||
function closeOut(e) { if (e.target === document.getElementById('modalOverlay')) closeModal(); }
|
||
</script>
|
||
</body>
|
||
</html>
|