385 lines
24 KiB
HTML
385 lines
24 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8"/>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||
<title>Admin Dashboard – 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; --blue: #3b82f6; --sidebar-w: 240px;
|
||
}
|
||
body { font-family: 'Poppins', sans-serif; background: #f5f5f4; color: var(--dark); display: flex; min-height: 100vh; }
|
||
|
||
/* SIDEBAR */
|
||
.sidebar {
|
||
width: var(--sidebar-w); background: #1c1917; color: #fff;
|
||
position: fixed; top: 0; left: 0; bottom: 0; overflow-y: auto;
|
||
display: flex; flex-direction: column; z-index: 50;
|
||
}
|
||
.sidebar-brand { padding: 22px 18px; border-bottom: 1px solid #292524; }
|
||
.brand-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
|
||
.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;
|
||
}
|
||
.brand-name { font-weight: 800; font-size: 1rem; }
|
||
.club-pill {
|
||
background: rgba(249,115,22,0.15); border: 1px solid rgba(249,115,22,0.3);
|
||
border-radius: 8px; padding: 6px 12px; font-size: 0.8rem;
|
||
}
|
||
.club-pill .club-label { color: #a8a29e; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; }
|
||
.club-pill .club-name { color: var(--orange); font-weight: 700; font-size: 0.85rem; }
|
||
.sidebar-section { padding: 18px 10px 6px; }
|
||
.sidebar-section-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: #78716c; padding: 0 8px; margin-bottom: 5px; }
|
||
.sidebar-link {
|
||
display: flex; align-items: center; gap: 10px; padding: 9px 10px;
|
||
border-radius: 8px; text-decoration: none; color: #a8a29e; font-size: 0.88rem;
|
||
font-weight: 500; transition: all .2s; cursor: pointer;
|
||
}
|
||
.sidebar-link:hover { background: #292524; color: #fff; }
|
||
.sidebar-link.active { background: rgba(249,115,22,0.18); color: var(--orange); }
|
||
.sidebar-link .icon { font-size: 1.05rem; width: 20px; text-align: center; }
|
||
.sidebar-bottom { margin-top: auto; padding: 14px 10px; border-top: 1px solid #292524; }
|
||
.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
|
||
.avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8rem; flex-shrink: 0; }
|
||
.av-orange { background: linear-gradient(135deg, var(--orange), var(--amber)); color: #fff; }
|
||
.user-name { font-size: 0.85rem; font-weight: 600; color: #fff; }
|
||
.user-role { font-size: 0.72rem; color: #78716c; }
|
||
|
||
/* MAIN */
|
||
.main { margin-left: var(--sidebar-w); flex: 1; }
|
||
.topbar {
|
||
background: #fff; border-bottom: 1px solid var(--border);
|
||
padding: 0 28px; height: 62px; display: flex; align-items: center;
|
||
justify-content: space-between; position: sticky; top: 0; z-index: 40;
|
||
}
|
||
.topbar-title { font-size: 1.05rem; font-weight: 700; }
|
||
.topbar-right { display: flex; align-items: center; gap: 10px; }
|
||
.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); }
|
||
.content { padding: 28px; }
|
||
|
||
/* WELCOME */
|
||
.welcome-bar {
|
||
background: linear-gradient(135deg, var(--orange), var(--amber));
|
||
border-radius: 14px; padding: 24px 28px; margin-bottom: 24px; color: #fff;
|
||
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px;
|
||
}
|
||
.welcome-bar h2 { font-size: 1.3rem; font-weight: 800; margin-bottom: 4px; }
|
||
.welcome-bar p { font-size: 0.9rem; opacity: 0.85; }
|
||
.btn-white { background: #fff; color: var(--orange); border: none; border-radius: 9px; padding: 10px 20px; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 0.88rem; cursor: pointer; transition: all .2s; }
|
||
.btn-white:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.15); }
|
||
|
||
/* STATS */
|
||
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin-bottom: 24px; }
|
||
.stat-card { background: #fff; border-radius: 12px; padding: 20px; border: 1px solid var(--border); display: flex; align-items: center; gap: 16px; }
|
||
.stat-icon { width: 46px; height: 46px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
|
||
.bg-o { background: rgba(249,115,22,0.12); }
|
||
.bg-a { background: rgba(245,158,11,0.12); }
|
||
.bg-g { background: rgba(34,197,94,0.12); }
|
||
.bg-b { background: rgba(59,130,246,0.1); }
|
||
.stat-val { font-size: 1.7rem; font-weight: 800; }
|
||
.stat-label { font-size: 0.8rem; color: var(--gray); font-weight: 500; }
|
||
.stat-delta { font-size: 0.75rem; font-weight: 600; margin-top: 2px; }
|
||
.up { color: var(--green); } .down { color: var(--red); }
|
||
|
||
/* GRID */
|
||
.grid-main { display: grid; grid-template-columns: 1fr 340px; gap: 20px; }
|
||
.card { background: #fff; border-radius: 12px; 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: 5px 12px; border-radius: 6px; 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 { width: 100%; border-collapse: collapse; }
|
||
thead th { padding: 10px 18px; text-align: left; font-size: 0.75rem; 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: 12px 18px; font-size: 0.88rem; vertical-align: middle; }
|
||
.member-row { display: flex; align-items: center; gap: 10px; }
|
||
.m-avatar { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.75rem; color: #fff; flex-shrink: 0; }
|
||
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 20px; font-size: 0.72rem; 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); }
|
||
|
||
/* QUICK ACTIONS */
|
||
.quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px; }
|
||
.qa-btn {
|
||
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||
gap: 6px; padding: 16px 12px; border-radius: 10px; border: 2px solid var(--border);
|
||
cursor: pointer; transition: all .2s; background: #fff; font-family: 'Poppins', sans-serif; text-decoration: none;
|
||
}
|
||
.qa-btn:hover { border-color: var(--orange); background: rgba(249,115,22,0.04); }
|
||
.qa-icon { font-size: 1.6rem; }
|
||
.qa-label { font-size: 0.78rem; font-weight: 600; color: var(--dark); text-align: center; }
|
||
|
||
/* ACTIVITY */
|
||
.activity-list { padding: 12px 18px; display: flex; flex-direction: column; gap: 12px; }
|
||
.activity-item { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
|
||
.activity-item:last-child { border-bottom: none; }
|
||
.activity-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
|
||
.dot-green { background: var(--green); }
|
||
.dot-orange { background: var(--orange); }
|
||
.dot-blue { background: var(--blue); }
|
||
.activity-text { font-size: 0.85rem; font-weight: 500; }
|
||
.activity-sub { font-size: 0.75rem; color: var(--gray); }
|
||
.activity-time { margin-left: auto; font-size: 0.73rem; color: var(--gray); white-space: nowrap; }
|
||
|
||
.breadcrumb { font-size: 0.8rem; color: var(--gray); margin-bottom: 18px; display: flex; align-items: center; gap: 6px; }
|
||
.breadcrumb a { color: var(--orange); text-decoration: none; font-weight: 500; }
|
||
|
||
@media (max-width: 1024px) { .stats-grid { grid-template-columns: repeat(2,1fr); } .grid-main { grid-template-columns: 1fr; } }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<aside class="sidebar">
|
||
<div class="sidebar-brand">
|
||
<div class="brand-row">
|
||
<div class="logo-icon">🍺</div>
|
||
<div class="brand-name">DeckelApp</div>
|
||
</div>
|
||
<div class="club-pill">
|
||
<div class="club-label" data-de="Dein Verein" data-en="Your Club">Dein Verein</div>
|
||
<div class="club-name">SC Biertrinker e.V.</div>
|
||
</div>
|
||
</div>
|
||
<div class="sidebar-section">
|
||
<div class="sidebar-section-label" data-de="Verwaltung" data-en="Management">Verwaltung</div>
|
||
<a class="sidebar-link active" href="admin.html"><span class="icon">📊</span><span data-de="Dashboard" data-en="Dashboard">Dashboard</span></a>
|
||
<a class="sidebar-link" href="deckel.html"><span class="icon">🧾</span><span data-de="Deckel" data-en="Tabs">Deckel</span></a>
|
||
<a class="sidebar-link" href="#"><span class="icon">👥</span><span data-de="Mitglieder" data-en="Members">Mitglieder</span></a>
|
||
<a class="sidebar-link" href="preisliste.html"><span class="icon">🍺</span><span data-de="Preisliste" data-en="Price List">Preisliste</span></a>
|
||
</div>
|
||
<div class="sidebar-section">
|
||
<div class="sidebar-section-label" data-de="Abrechnung" data-en="Billing">Abrechnung</div>
|
||
<a class="sidebar-link" href="#"><span class="icon">📄</span><span data-de="Rechnungen" data-en="Invoices">Rechnungen</span></a>
|
||
<a class="sidebar-link" href="#"><span class="icon">💰</span><span data-de="Zahlungen" data-en="Payments">Zahlungen</span></a>
|
||
<a class="sidebar-link" href="#"><span class="icon">📈</span><span data-de="Statistiken" data-en="Statistics">Statistiken</span></a>
|
||
</div>
|
||
<div class="sidebar-section">
|
||
<div class="sidebar-section-label" data-de="System" data-en="System">System</div>
|
||
<a class="sidebar-link" href="#"><span class="icon">⚙️</span><span data-de="Einstellungen" data-en="Settings">Einstellungen</span></a>
|
||
<a class="sidebar-link" href="superadmin.html"><span class="icon">🔑</span><span data-de="Super Admin" data-en="Super Admin">Super Admin</span></a>
|
||
<a class="sidebar-link" href="index.html"><span class="icon">🌐</span><span data-de="Zur Website" data-en="To Website">Zur Website</span></a>
|
||
</div>
|
||
<div class="sidebar-bottom">
|
||
<div class="sidebar-user">
|
||
<div class="avatar av-orange">MA</div>
|
||
<div>
|
||
<div class="user-name">Max Admin</div>
|
||
<div class="user-role" data-de="Vereins-Admin" data-en="Club Admin">Vereins-Admin</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<div class="main">
|
||
<div class="topbar">
|
||
<div class="topbar-title" data-de="Admin Dashboard" data-en="Admin Dashboard">Admin Dashboard</div>
|
||
<div class="topbar-right">
|
||
<button class="lang-toggle" onclick="toggleLang()" id="langBtn">EN</button>
|
||
<a href="deckel.html"><button class="btn-sm btn-sm-primary" data-de="🧾 Deckel buchen" data-en="🧾 Book Tab">🧾 Deckel buchen</button></a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content">
|
||
<div class="breadcrumb">
|
||
<a href="index.html">DeckelApp</a> › <span>SC Biertrinker e.V.</span> › <span data-de="Dashboard" data-en="Dashboard">Dashboard</span>
|
||
</div>
|
||
|
||
<div class="welcome-bar">
|
||
<div>
|
||
<h2 data-de="Guten Tag, Max! 👋" data-en="Good day, Max! 👋">Guten Tag, Max! 👋</h2>
|
||
<p data-de="Hier ist deine Übersicht für März 2025." data-en="Here is your overview for March 2025.">Hier ist deine Übersicht für März 2025.</p>
|
||
</div>
|
||
<button class="btn-white" data-de="📄 Monatsabrechnung erstellen" data-en="📄 Create monthly invoice">📄 Monatsabrechnung erstellen</button>
|
||
</div>
|
||
|
||
<div class="stats-grid">
|
||
<div class="stat-card">
|
||
<div class="stat-icon bg-o">👥</div>
|
||
<div><div class="stat-val">84</div><div class="stat-label" data-de="Aktive Mitglieder" data-en="Active Members">Aktive Mitglieder</div><div class="stat-delta up">↑ 5 <span data-de="neu" data-en="new">neu</span></div></div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-icon bg-a">🧾</div>
|
||
<div><div class="stat-val">342</div><div class="stat-label" data-de="Buchungen März" data-en="Bookings March">Buchungen März</div><div class="stat-delta up">↑ 18%</div></div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-icon bg-g">💰</div>
|
||
<div><div class="stat-val">1.248€</div><div class="stat-label" data-de="Offene Deckel" data-en="Open Tabs">Offene Deckel</div><div class="stat-delta down">↑ 12%</div></div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-icon bg-b">🍺</div>
|
||
<div><div class="stat-val">18</div><div class="stat-label" data-de="Getränke im Angebot" data-en="Drinks available">Getränke im Angebot</div><div class="stat-delta up" data-de="aktuell" data-en="current">aktuell</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid-main">
|
||
<!-- MEMBERS TABLE -->
|
||
<div style="display:flex;flex-direction:column;gap:20px">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title" data-de="Mitglieder & offene Deckel" data-en="Members & open tabs">Mitglieder & offene Deckel</div>
|
||
<div style="display:flex;gap:8px">
|
||
<button class="btn-sm btn-sm-ghost" data-de="Exportieren" data-en="Export">Exportieren</button>
|
||
<button class="btn-sm btn-sm-primary" data-de="+ Mitglied" data-en="+ Member">+ Mitglied</button>
|
||
</div>
|
||
</div>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th data-de="Mitglied" data-en="Member">Mitglied</th>
|
||
<th data-de="Deckel (€)" data-en="Tab (€)">Deckel (€)</th>
|
||
<th data-de="Buchungen" data-en="Bookings">Buchungen</th>
|
||
<th data-de="Status" data-en="Status">Status</th>
|
||
<th data-de="Aktionen" data-en="Actions">Aktionen</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><div class="member-row"><div class="m-avatar" style="background:linear-gradient(135deg,#f97316,#f59e0b)">MK</div><div><div style="font-weight:600">Max Kellner</div><div style="font-size:0.75rem;color:var(--gray)">max@verein.de</div></div></div></td>
|
||
<td style="font-weight:700;color:var(--red)">32,50€</td><td>14</td>
|
||
<td><span class="badge badge-red" data-de="Offen" data-en="Open">Offen</span></td>
|
||
<td><button class="btn-sm btn-sm-primary" onclick="location.href='deckel.html'" data-de="Deckel" data-en="Tab">Deckel</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td><div class="member-row"><div class="m-avatar" style="background:linear-gradient(135deg,#3b82f6,#8b5cf6)">AS</div><div><div style="font-weight:600">Anna Schneider</div><div style="font-size:0.75rem;color:var(--gray)">anna@verein.de</div></div></div></td>
|
||
<td style="font-weight:700;color:var(--red)">18,00€</td><td>9</td>
|
||
<td><span class="badge badge-red" data-de="Offen" data-en="Open">Offen</span></td>
|
||
<td><button class="btn-sm btn-sm-primary" onclick="location.href='deckel.html'" data-de="Deckel" data-en="Tab">Deckel</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td><div class="member-row"><div class="m-avatar" style="background:linear-gradient(135deg,#22c55e,#16a34a)">TM</div><div><div style="font-weight:600">Tom Meier</div><div style="font-size:0.75rem;color:var(--gray)">tom@verein.de</div></div></div></td>
|
||
<td style="font-weight:700;color:var(--green)">0,00€</td><td>22</td>
|
||
<td><span class="badge badge-green" data-de="Bezahlt" data-en="Paid">Bezahlt</span></td>
|
||
<td><button class="btn-sm btn-sm-ghost" onclick="location.href='deckel.html'" data-de="Details" data-en="Details">Details</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td><div class="member-row"><div class="m-avatar" style="background:linear-gradient(135deg,#ec4899,#f43f5e)">LW</div><div><div style="font-weight:600">Lisa Wagner</div><div style="font-size:0.75rem;color:var(--gray)">lisa@verein.de</div></div></div></td>
|
||
<td style="font-weight:700;color:var(--red)">54,00€</td><td>31</td>
|
||
<td><span class="badge badge-red" data-de="Offen" data-en="Open">Offen</span></td>
|
||
<td><button class="btn-sm btn-sm-primary" onclick="location.href='deckel.html'" data-de="Deckel" data-en="Tab">Deckel</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td><div class="member-row"><div class="m-avatar" style="background:linear-gradient(135deg,#06b6d4,#3b82f6)">PB</div><div><div style="font-weight:600">Paul Braun</div><div style="font-size:0.75rem;color:var(--gray)">paul@verein.de</div></div></div></td>
|
||
<td style="font-weight:700;color:var(--green)">0,00€</td><td>7</td>
|
||
<td><span class="badge badge-green" data-de="Bezahlt" data-en="Paid">Bezahlt</span></td>
|
||
<td><button class="btn-sm btn-sm-ghost" onclick="location.href='deckel.html'" data-de="Details" data-en="Details">Details</button></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- RECENT BOOKINGS -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title" data-de="Letzte Buchungen" data-en="Recent Bookings">Letzte Buchungen</div>
|
||
<a href="deckel.html"><button class="btn-sm btn-sm-ghost" data-de="Alle anzeigen" data-en="View all">Alle anzeigen</button></a>
|
||
</div>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th data-de="Mitglied" data-en="Member">Mitglied</th>
|
||
<th data-de="Getränk" data-en="Drink">Getränk</th>
|
||
<th data-de="Preis" data-en="Price">Preis</th>
|
||
<th data-de="Uhrzeit" data-en="Time">Uhrzeit</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>Max Kellner</td><td>🍺 <span data-de="Pils 0,5l" data-en="Pils 0.5l">Pils 0,5l</span></td><td style="font-weight:600">2,50€</td><td style="color:var(--gray)">18:32</td></tr>
|
||
<tr><td>Lisa Wagner</td><td>🍷 <span data-de="Rotwein 0,2l" data-en="Red Wine 0.2l">Rotwein 0,2l</span></td><td style="font-weight:600">3,50€</td><td style="color:var(--gray)">18:28</td></tr>
|
||
<tr><td>Anna Schneider</td><td>🥤 <span data-de="Cola 0,3l" data-en="Cola 0.3l">Cola 0,3l</span></td><td style="font-weight:600">2,00€</td><td style="color:var(--gray)">18:15</td></tr>
|
||
<tr><td>Tom Meier</td><td>🍺 <span data-de="Weizen 0,5l" data-en="Wheat Beer 0.5l">Weizen 0,5l</span></td><td style="font-weight:600">3,00€</td><td style="color:var(--gray)">17:55</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- RIGHT COLUMN -->
|
||
<div style="display:flex;flex-direction:column;gap:20px">
|
||
<div class="card">
|
||
<div class="card-header"><div class="card-title" data-de="Schnellaktionen" data-en="Quick Actions">Schnellaktionen</div></div>
|
||
<div class="quick-actions">
|
||
<a href="deckel.html" class="qa-btn"><div class="qa-icon">🧾</div><div class="qa-label" data-de="Getränk buchen" data-en="Book drink">Getränk buchen</div></a>
|
||
<a href="preisliste.html" class="qa-btn"><div class="qa-icon">🍺</div><div class="qa-label" data-de="Preisliste" data-en="Price list">Preisliste</div></a>
|
||
<a href="#" class="qa-btn"><div class="qa-icon">👤</div><div class="qa-label" data-de="Mitglied einladen" data-en="Invite member">Mitglied einladen</div></a>
|
||
<a href="#" class="qa-btn"><div class="qa-icon">📄</div><div class="qa-label" data-de="Rechnung erstellen" data-en="Create invoice">Rechnung erstellen</div></a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header"><div class="card-title" data-de="Aktivitäten heute" data-en="Today's Activity">Aktivitäten heute</div></div>
|
||
<div class="activity-list">
|
||
<div class="activity-item">
|
||
<div class="activity-dot dot-orange"></div>
|
||
<div><div class="activity-text" data-de="Max Kellner – Pils gebucht" data-en="Max Kellner – Pils booked">Max Kellner – Pils gebucht</div><div class="activity-sub">+2,50€</div></div>
|
||
<div class="activity-time">18:32</div>
|
||
</div>
|
||
<div class="activity-item">
|
||
<div class="activity-dot dot-green"></div>
|
||
<div><div class="activity-text" data-de="Tom Meier hat bezahlt" data-en="Tom Meier paid">Tom Meier hat bezahlt</div><div class="activity-sub">67,00€</div></div>
|
||
<div class="activity-time">16:10</div>
|
||
</div>
|
||
<div class="activity-item">
|
||
<div class="activity-dot dot-orange"></div>
|
||
<div><div class="activity-text" data-de="Lisa Wagner – Rotwein" data-en="Lisa Wagner – Red Wine">Lisa Wagner – Rotwein</div><div class="activity-sub">+3,50€</div></div>
|
||
<div class="activity-time">18:28</div>
|
||
</div>
|
||
<div class="activity-item">
|
||
<div class="activity-dot dot-blue"></div>
|
||
<div><div class="activity-text" data-de="Neues Mitglied beigetreten" data-en="New member joined">Neues Mitglied beigetreten</div><div class="activity-sub">Petra Koch</div></div>
|
||
<div class="activity-time">14:05</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header"><div class="card-title" data-de="Top Getränke" data-en="Top Drinks">Top Getränke</div></div>
|
||
<div style="padding:16px 18px;display:flex;flex-direction:column;gap:12px">
|
||
<div style="display:flex;align-items:center;gap:10px">
|
||
<span style="font-size:1.3rem">🍺</span>
|
||
<div style="flex:1"><div style="font-size:0.85rem;font-weight:600" data-de="Pils 0,5l" data-en="Pils 0.5l">Pils 0,5l</div>
|
||
<div style="background:var(--border);border-radius:4px;height:6px;margin-top:4px"><div style="background:var(--orange);height:6px;border-radius:4px;width:78%"></div></div></div>
|
||
<span style="font-size:0.8rem;font-weight:700;color:var(--orange)">78%</span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:10px">
|
||
<span style="font-size:1.3rem">🍺</span>
|
||
<div style="flex:1"><div style="font-size:0.85rem;font-weight:600" data-de="Weizen 0,5l" data-en="Wheat Beer 0.5l">Weizen 0,5l</div>
|
||
<div style="background:var(--border);border-radius:4px;height:6px;margin-top:4px"><div style="background:var(--amber);height:6px;border-radius:4px;width:54%"></div></div></div>
|
||
<span style="font-size:0.8rem;font-weight:700;color:var(--amber)">54%</span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:10px">
|
||
<span style="font-size:1.3rem">🥤</span>
|
||
<div style="flex:1"><div style="font-size:0.85rem;font-weight:600">Cola 0,3l</div>
|
||
<div style="background:var(--border);border-radius:4px;height:6px;margin-top:4px"><div style="background:var(--blue);height:6px;border-radius:4px;width:32%"></div></div></div>
|
||
<span style="font-size:0.8rem;font-weight:700;color:var(--blue)">32%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</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;
|
||
});
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|