403 lines
26 KiB
HTML
403 lines
26 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8"/>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||
<title>Deckel – 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; --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; }
|
||
.club-label { color: #a8a29e; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; }
|
||
.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; }
|
||
.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; 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 { margin-left: var(--sidebar-w); flex: 1; display: flex; flex-direction: column; }
|
||
.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); }
|
||
.btn-sm { padding: 6px 14px; border-radius: 7px; border: none; cursor: pointer; font-family: 'Poppins', sans-serif; font-size: 0.8rem; font-weight: 600; transition: all .2s; }
|
||
.btn-sm-primary { background: var(--orange); color: #fff; }
|
||
.btn-sm-ghost { background: var(--border); color: var(--dark); }
|
||
.content { padding: 28px; flex: 1; display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; }
|
||
|
||
.breadcrumb { font-size: 0.8rem; color: var(--gray); margin-bottom: 20px; display: flex; align-items: center; gap: 6px; }
|
||
.breadcrumb a { color: var(--orange); text-decoration: none; font-weight: 500; }
|
||
.content-col { display: flex; flex-direction: column; gap: 20px; }
|
||
|
||
/* MEMBER SELECTOR */
|
||
.member-selector { background: #fff; border-radius: 14px; border: 1px solid var(--border); padding: 22px; }
|
||
.selector-title { font-size: 0.95rem; font-weight: 700; margin-bottom: 16px; }
|
||
.member-chips { display: flex; flex-wrap: wrap; gap: 8px; }
|
||
.member-chip {
|
||
display: flex; align-items: center; gap: 8px; padding: 8px 14px;
|
||
border-radius: 30px; border: 2px solid var(--border); cursor: pointer;
|
||
transition: all .2s; background: #fff; font-family: 'Poppins', sans-serif;
|
||
}
|
||
.member-chip:hover { border-color: var(--orange); }
|
||
.member-chip.selected { border-color: var(--orange); background: rgba(249,115,22,0.08); }
|
||
.chip-avatar { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||
.chip-name { font-size: 0.85rem; font-weight: 600; }
|
||
.chip-balance { font-size: 0.75rem; font-weight: 700; }
|
||
.balance-open { color: var(--red); }
|
||
.balance-paid { color: var(--green); }
|
||
|
||
/* DRINK BUTTONS */
|
||
.drink-picker { background: #fff; border-radius: 14px; border: 1px solid var(--border); padding: 22px; }
|
||
.picker-title { font-size: 0.95rem; font-weight: 700; margin-bottom: 6px; }
|
||
.picker-sub { font-size: 0.82rem; color: var(--gray); margin-bottom: 16px; }
|
||
.drink-cat-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--gray); margin: 12px 0 8px; }
|
||
.drink-buttons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
|
||
.drink-btn {
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
padding: 11px 14px; border-radius: 10px; border: 2px solid var(--border);
|
||
background: #fff; cursor: pointer; font-family: 'Poppins', sans-serif; transition: all .2s;
|
||
}
|
||
.drink-btn:hover { border-color: var(--orange); background: rgba(249,115,22,0.04); }
|
||
.drink-btn:active { transform: scale(0.97); }
|
||
.drink-btn.booked { border-color: var(--green); background: rgba(34,197,94,0.05); animation: flash .3s; }
|
||
@keyframes flash { 0%,100%{background:#fff} 50%{background:rgba(34,197,94,0.15)} }
|
||
.drink-btn-left { display: flex; align-items: center; gap: 8px; }
|
||
.drink-btn-emoji { font-size: 1.3rem; }
|
||
.drink-btn-name { font-size: 0.82rem; font-weight: 600; text-align: left; }
|
||
.drink-btn-price { font-size: 0.85rem; font-weight: 800; color: var(--orange); }
|
||
|
||
/* DECKEL TABLE */
|
||
.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; }
|
||
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; vertical-align: middle; }
|
||
|
||
/* SUMMARY CARD */
|
||
.summary-card { background: #fff; border-radius: 14px; border: 1px solid var(--border); }
|
||
.summary-header { padding: 18px 22px; border-bottom: 1px solid var(--border); }
|
||
.summary-title { font-size: 0.95rem; font-weight: 700; }
|
||
.selected-member-display { display: flex; align-items: center; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--border); }
|
||
.sel-avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.95rem; color: #fff; }
|
||
.sel-name { font-weight: 700; font-size: 1rem; }
|
||
.sel-since { font-size: 0.78rem; color: var(--gray); }
|
||
.summary-total { padding: 20px 22px; background: linear-gradient(135deg, #fff7ed, #fef3c7); }
|
||
.total-label { font-size: 0.8rem; color: var(--gray); font-weight: 600; margin-bottom: 4px; }
|
||
.total-amount { font-size: 2.4rem; font-weight: 800; color: var(--red); }
|
||
.total-sub { font-size: 0.8rem; color: var(--gray); margin-top: 4px; }
|
||
.summary-actions { padding: 16px 22px; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--border); }
|
||
.btn-pay { width: 100%; padding: 13px; border: none; border-radius: 10px; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 0.95rem; cursor: pointer; transition: all .2s; }
|
||
.btn-pay-primary { background: linear-gradient(135deg, var(--green), #16a34a); color: #fff; box-shadow: 0 4px 14px rgba(34,197,94,0.3); }
|
||
.btn-pay-primary:hover { transform: translateY(-1px); }
|
||
.btn-pay-ghost { background: none; border: 2px solid var(--border); color: var(--dark); }
|
||
.btn-pay-ghost:hover { border-color: var(--orange); color: var(--orange); }
|
||
.booking-log { padding: 14px 22px; }
|
||
.log-title { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--gray); margin-bottom: 10px; }
|
||
.log-item { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 0.83rem; }
|
||
.log-item:last-child { border-bottom: none; }
|
||
.log-drink { font-weight: 600; }
|
||
.log-time { color: var(--gray); font-size: 0.75rem; }
|
||
.log-price { font-weight: 700; color: var(--orange); }
|
||
.badge-new { background: var(--orange); color: #fff; font-size: 0.65rem; font-weight: 700; padding: 1px 6px; border-radius: 8px; margin-left: 6px; animation: pulse 1s infinite; }
|
||
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.6} }
|
||
|
||
@media (max-width: 1000px) { .content { 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" href="admin.html"><span class="icon">📊</span><span data-de="Dashboard" data-en="Dashboard">Dashboard</span></a>
|
||
<a class="sidebar-link active" 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>
|
||
</div>
|
||
<div class="sidebar-section">
|
||
<div class="sidebar-section-label" data-de="System" data-en="System">System</div>
|
||
<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">TH</div>
|
||
<div><div class="user-name" data-de="Theken-Modus" data-en="Bar Mode">Theken-Modus</div><div class="user-role">SC Biertrinker e.V.</div></div>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<div class="main">
|
||
<div class="topbar">
|
||
<div class="topbar-title" data-de="🧾 Deckel buchen" data-en="🧾 Book Tab">🧾 Deckel buchen</div>
|
||
<div class="topbar-right">
|
||
<button class="lang-toggle" onclick="toggleLang()" id="langBtn">EN</button>
|
||
<span id="timeDisplay" style="font-size:0.85rem;font-weight:600;color:var(--gray)"></span>
|
||
<a href="admin.html"><button class="btn-sm btn-sm-ghost" data-de="Zur Übersicht" data-en="Overview">Zur Übersicht</button></a>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="padding:28px 28px 0">
|
||
<div class="breadcrumb">
|
||
<a href="index.html">DeckelApp</a> › <a href="admin.html">SC Biertrinker e.V.</a> › <span data-de="Deckel buchen" data-en="Book Tab">Deckel buchen</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content">
|
||
<!-- LEFT: MEMBER + DRINKS -->
|
||
<div class="content-col">
|
||
<!-- MEMBER SELECTOR -->
|
||
<div class="member-selector">
|
||
<div class="selector-title" data-de="1. Mitglied auswählen" data-en="1. Select member">1. Mitglied auswählen</div>
|
||
<div class="member-chips">
|
||
<div class="member-chip selected" onclick="selectMember(this,'Max Kellner','MK','f97316','32,50€',true)">
|
||
<div class="chip-avatar" style="background:linear-gradient(135deg,#f97316,#f59e0b)">MK</div>
|
||
<div><div class="chip-name">Max Kellner</div><div class="chip-balance balance-open">32,50€</div></div>
|
||
</div>
|
||
<div class="member-chip" onclick="selectMember(this,'Anna Schneider','AS','3b82f6','18,00€',true)">
|
||
<div class="chip-avatar" style="background:linear-gradient(135deg,#3b82f6,#8b5cf6)">AS</div>
|
||
<div><div class="chip-name">Anna Schneider</div><div class="chip-balance balance-open">18,00€</div></div>
|
||
</div>
|
||
<div class="member-chip" onclick="selectMember(this,'Tom Meier','TM','22c55e','0,00€',false)">
|
||
<div class="chip-avatar" style="background:linear-gradient(135deg,#22c55e,#16a34a)">TM</div>
|
||
<div><div class="chip-name">Tom Meier</div><div class="chip-balance balance-paid">✓ 0,00€</div></div>
|
||
</div>
|
||
<div class="member-chip" onclick="selectMember(this,'Lisa Wagner','LW','ec4899','54,00€',true)">
|
||
<div class="chip-avatar" style="background:linear-gradient(135deg,#ec4899,#f43f5e)">LW</div>
|
||
<div><div class="chip-name">Lisa Wagner</div><div class="chip-balance balance-open">54,00€</div></div>
|
||
</div>
|
||
<div class="member-chip" onclick="selectMember(this,'Paul Braun','PB','06b6d4','0,00€',false)">
|
||
<div class="chip-avatar" style="background:linear-gradient(135deg,#06b6d4,#3b82f6)">PB</div>
|
||
<div><div class="chip-name">Paul Braun</div><div class="chip-balance balance-paid">✓ 0,00€</div></div>
|
||
</div>
|
||
<div class="member-chip" onclick="selectMember(this,'Petra Koch','PK','a78bfa','0,00€',false)">
|
||
<div class="chip-avatar" style="background:linear-gradient(135deg,#a78bfa,#7c3aed)">PK</div>
|
||
<div><div class="chip-name">Petra Koch</div><div class="chip-balance balance-paid">✓ neu</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- DRINK PICKER -->
|
||
<div class="drink-picker">
|
||
<div class="picker-title" data-de="2. Getränk buchen" data-en="2. Book drink">2. Getränk buchen</div>
|
||
<div class="picker-sub" data-de="Tippe auf ein Getränk, um es direkt auf den Deckel zu buchen." data-en="Tap a drink to add it directly to the tab.">Tippe auf ein Getränk, um es direkt auf den Deckel zu buchen.</div>
|
||
|
||
<div class="drink-cat-label" data-de="🍺 Bier" data-en="🍺 Beer">🍺 Bier</div>
|
||
<div class="drink-buttons">
|
||
<button class="drink-btn" onclick="bookDrink(this,'Pils 0,5l','🍺',2.50)">
|
||
<div class="drink-btn-left"><span class="drink-btn-emoji">🍺</span><span class="drink-btn-name" data-de="Pils 0,5l" data-en="Pils 0.5l">Pils 0,5l</span></div>
|
||
<span class="drink-btn-price">2,50€</span>
|
||
</button>
|
||
<button class="drink-btn" onclick="bookDrink(this,'Weizen 0,5l','🍺',3.00)">
|
||
<div class="drink-btn-left"><span class="drink-btn-emoji">🍺</span><span class="drink-btn-name" data-de="Weizen 0,5l" data-en="Wheat 0.5l">Weizen 0,5l</span></div>
|
||
<span class="drink-btn-price">3,00€</span>
|
||
</button>
|
||
<button class="drink-btn" onclick="bookDrink(this,'Radler 0,5l','🍺',2.50)">
|
||
<div class="drink-btn-left"><span class="drink-btn-emoji">🍺</span><span class="drink-btn-name" data-de="Radler 0,5l" data-en="Shandy 0.5l">Radler 0,5l</span></div>
|
||
<span class="drink-btn-price">2,50€</span>
|
||
</button>
|
||
<button class="drink-btn" onclick="bookDrink(this,'Alkoholfrei','🍺',2.00)">
|
||
<div class="drink-btn-left"><span class="drink-btn-emoji">🍺</span><span class="drink-btn-name" data-de="Alkoholfrei" data-en="Non-alc.">Alkoholfrei</span></div>
|
||
<span class="drink-btn-price">2,00€</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="drink-cat-label" data-de="🍷 Wein & Sekt" data-en="🍷 Wine">🍷 Wein & Sekt</div>
|
||
<div class="drink-buttons">
|
||
<button class="drink-btn" onclick="bookDrink(this,'Rotwein 0,2l','🍷',3.50)">
|
||
<div class="drink-btn-left"><span class="drink-btn-emoji">🍷</span><span class="drink-btn-name" data-de="Rotwein 0,2l" data-en="Red Wine 0.2l">Rotwein 0,2l</span></div>
|
||
<span class="drink-btn-price">3,50€</span>
|
||
</button>
|
||
<button class="drink-btn" onclick="bookDrink(this,'Sekt 0,1l','🥂',4.00)">
|
||
<div class="drink-btn-left"><span class="drink-btn-emoji">🥂</span><span class="drink-btn-name" data-de="Sekt 0,1l" data-en="Sparkling 0.1l">Sekt 0,1l</span></div>
|
||
<span class="drink-btn-price">4,00€</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="drink-cat-label" data-de="🥤 Softdrinks" data-en="🥤 Soft Drinks">🥤 Softdrinks</div>
|
||
<div class="drink-buttons">
|
||
<button class="drink-btn" onclick="bookDrink(this,'Cola 0,3l','🥤',2.00)">
|
||
<div class="drink-btn-left"><span class="drink-btn-emoji">🥤</span><span class="drink-btn-name">Cola 0,3l</span></div>
|
||
<span class="drink-btn-price">2,00€</span>
|
||
</button>
|
||
<button class="drink-btn" onclick="bookDrink(this,'Wasser 0,5l','💧',1.50)">
|
||
<div class="drink-btn-left"><span class="drink-btn-emoji">💧</span><span class="drink-btn-name" data-de="Wasser 0,5l" data-en="Water 0.5l">Wasser 0,5l</span></div>
|
||
<span class="drink-btn-price">1,50€</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="drink-cat-label" data-de="🥃 Schnaps" data-en="🥃 Spirits">🥃 Schnaps</div>
|
||
<div class="drink-buttons">
|
||
<button class="drink-btn" onclick="bookDrink(this,'Korn 2cl','🥃',1.50)">
|
||
<div class="drink-btn-left"><span class="drink-btn-emoji">🥃</span><span class="drink-btn-name" data-de="Korn 2cl" data-en="Schnapps 2cl">Korn 2cl</span></div>
|
||
<span class="drink-btn-price">1,50€</span>
|
||
</button>
|
||
<button class="drink-btn" onclick="bookDrink(this,'Obstler 2cl','🥃',2.00)">
|
||
<div class="drink-btn-left"><span class="drink-btn-emoji">🥃</span><span class="drink-btn-name" data-de="Obstler 2cl" data-en="Brandy 2cl">Obstler 2cl</span></div>
|
||
<span class="drink-btn-price">2,00€</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- RIGHT: SUMMARY -->
|
||
<div class="content-col">
|
||
<div class="summary-card">
|
||
<div class="summary-header">
|
||
<div class="summary-title" data-de="Aktueller Deckel" data-en="Current Tab">Aktueller Deckel</div>
|
||
</div>
|
||
<div class="selected-member-display">
|
||
<div class="sel-avatar" id="selAvatar" style="background:linear-gradient(135deg,#f97316,#f59e0b)">MK</div>
|
||
<div>
|
||
<div class="sel-name" id="selName">Max Kellner</div>
|
||
<div class="sel-since" data-de="Mitglied seit Jan 2024" data-en="Member since Jan 2024">Mitglied seit Jan 2024</div>
|
||
</div>
|
||
</div>
|
||
<div class="summary-total">
|
||
<div class="total-label" data-de="Offener Betrag" data-en="Open balance">Offener Betrag</div>
|
||
<div class="total-amount" id="totalAmount">32,50€</div>
|
||
<div class="total-sub" id="bookingCount" data-de="14 Buchungen diesen Monat" data-en="14 bookings this month">14 Buchungen diesen Monat</div>
|
||
</div>
|
||
<div class="booking-log">
|
||
<div class="log-title" data-de="Heute gebucht" data-en="Booked today">Heute gebucht</div>
|
||
<div id="logList">
|
||
<div class="log-item"><div><span class="log-drink">🍺 Pils 0,5l</span></div><div style="text-align:right"><div class="log-price">2,50€</div><div class="log-time">18:32</div></div></div>
|
||
<div class="log-item"><div><span class="log-drink">🍺 Weizen 0,5l</span></div><div style="text-align:right"><div class="log-price">3,00€</div><div class="log-time">17:15</div></div></div>
|
||
</div>
|
||
</div>
|
||
<div class="summary-actions">
|
||
<button class="btn-pay btn-pay-primary" data-de="✓ Als bezahlt markieren" data-en="✓ Mark as paid">✓ Als bezahlt markieren</button>
|
||
<button class="btn-pay btn-pay-ghost" data-de="📄 Rechnung erstellen" data-en="📄 Create invoice">📄 Rechnung erstellen</button>
|
||
<a href="profil.html"><button class="btn-pay btn-pay-ghost" style="border:none;background:none;color:var(--orange);font-family:'Poppins',sans-serif;font-weight:600;font-size:0.85rem;cursor:pointer" data-de="Profil ansehen →" data-en="View profile →">Profil ansehen →</button></a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ALL OPEN TABS -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title" data-de="Alle offenen Deckel" data-en="All open tabs">Alle offenen Deckel</div>
|
||
<span style="font-size:0.8rem;font-weight:700;color:var(--red)" id="totalOpen">104,50€ <span data-de="gesamt" data-en="total">gesamt</span></span>
|
||
</div>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th data-de="Mitglied" data-en="Member">Mitglied</th>
|
||
<th data-de="Betrag" data-en="Amount">Betrag</th>
|
||
<th></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr style="background:rgba(249,115,22,0.04)">
|
||
<td style="font-weight:600">Max Kellner</td>
|
||
<td style="font-weight:700;color:var(--red)">32,50€</td>
|
||
<td><button class="btn-sm btn-sm-ghost" style="font-size:0.72rem" data-de="Markieren" data-en="Mark">Markieren</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td style="font-weight:600">Lisa Wagner</td>
|
||
<td style="font-weight:700;color:var(--red)">54,00€</td>
|
||
<td><button class="btn-sm btn-sm-ghost" style="font-size:0.72rem" data-de="Markieren" data-en="Mark">Markieren</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td style="font-weight:600">Anna Schneider</td>
|
||
<td style="font-weight:700;color:var(--red)">18,00€</td>
|
||
<td><button class="btn-sm btn-sm-ghost" style="font-size:0.72rem" data-de="Markieren" data-en="Mark">Markieren</button></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
let currentLang = 'de';
|
||
let currentTotal = 32.50;
|
||
let bookings = 14;
|
||
|
||
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 selectMember(el, name, initials, color, balance, hasOpen) {
|
||
document.querySelectorAll('.member-chip').forEach(c => c.classList.remove('selected'));
|
||
el.classList.add('selected');
|
||
document.getElementById('selAvatar').textContent = initials;
|
||
document.getElementById('selAvatar').style.background = `linear-gradient(135deg,#${color},#f59e0b)`;
|
||
document.getElementById('selName').textContent = name;
|
||
const amt = parseFloat(balance.replace(',','.').replace('€',''));
|
||
currentTotal = isNaN(amt) ? 0 : amt;
|
||
document.getElementById('totalAmount').textContent = balance;
|
||
document.getElementById('totalAmount').style.color = hasOpen ? 'var(--red)' : 'var(--green)';
|
||
}
|
||
|
||
function bookDrink(btn, name, emoji, price) {
|
||
btn.classList.add('booked');
|
||
setTimeout(() => btn.classList.remove('booked'), 400);
|
||
currentTotal += price;
|
||
bookings++;
|
||
const priceStr = currentTotal.toFixed(2).replace('.',',') + '€';
|
||
document.getElementById('totalAmount').textContent = priceStr;
|
||
document.getElementById('totalAmount').style.color = 'var(--red)';
|
||
const now = new Date();
|
||
const time = now.getHours() + ':' + String(now.getMinutes()).padStart(2,'0');
|
||
const item = document.createElement('div');
|
||
item.className = 'log-item';
|
||
item.innerHTML = `<div><span class="log-drink">${emoji} ${name}<span class="badge-new">NEU</span></span></div><div style="text-align:right"><div class="log-price">${price.toFixed(2).replace('.',',')}€</div><div class="log-time">${time}</div></div>`;
|
||
document.getElementById('logList').prepend(item);
|
||
setTimeout(() => item.querySelector('.badge-new')?.remove(), 3000);
|
||
document.getElementById('bookingCount').textContent = `${bookings} Buchungen diesen Monat`;
|
||
}
|
||
|
||
// Live clock
|
||
function updateTime() {
|
||
const now = new Date();
|
||
document.getElementById('timeDisplay').textContent = now.toLocaleTimeString('de-DE', {hour:'2-digit',minute:'2-digit'});
|
||
}
|
||
updateTime();
|
||
setInterval(updateTime, 10000);
|
||
</script>
|
||
</body>
|
||
</html>
|