457 lines
25 KiB
HTML
457 lines
25 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8"/>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||
<title>Super Admin – 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; --darker: #0c0a09; --light: #fffbef;
|
||
--card: #ffffff; --gray: #78716c; --border: #e7e5e4;
|
||
--sidebar: #1c1917; --sidebar-w: 240px;
|
||
--green: #22c55e; --blue: #3b82f6;
|
||
}
|
||
body { font-family: 'Poppins', sans-serif; background: #f5f5f4; color: var(--dark); display: flex; min-height: 100vh; }
|
||
|
||
/* SIDEBAR */
|
||
.sidebar {
|
||
width: var(--sidebar-w); background: var(--sidebar); color: #fff;
|
||
position: fixed; top: 0; left: 0; bottom: 0; overflow-y: auto;
|
||
display: flex; flex-direction: column; z-index: 50;
|
||
}
|
||
.sidebar-brand { padding: 24px 20px; border-bottom: 1px solid #292524; display: flex; align-items: center; gap: 10px; }
|
||
.sidebar-brand .logo-icon {
|
||
width: 36px; height: 36px; border-radius: 9px;
|
||
background: linear-gradient(135deg, var(--orange), var(--amber));
|
||
display: flex; align-items: center; justify-content: center; font-size: 18px;
|
||
}
|
||
.sidebar-brand span { font-weight: 800; font-size: 1.1rem; }
|
||
.sidebar-badge {
|
||
font-size: 0.65rem; background: var(--red); color: #fff; padding: 2px 7px;
|
||
border-radius: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px;
|
||
}
|
||
.sidebar-section { padding: 20px 12px 8px; }
|
||
.sidebar-section-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: #78716c; padding: 0 8px; margin-bottom: 6px; }
|
||
.sidebar-link {
|
||
display: flex; align-items: center; gap: 10px; padding: 10px 12px;
|
||
border-radius: 9px; text-decoration: none; color: #a8a29e; font-size: 0.9rem;
|
||
font-weight: 500; transition: all .2s; cursor: pointer; border: none; background: none;
|
||
width: 100%; font-family: 'Poppins', sans-serif;
|
||
}
|
||
.sidebar-link:hover { background: #292524; color: #fff; }
|
||
.sidebar-link.active { background: rgba(249,115,22,0.2); color: var(--orange); }
|
||
.sidebar-link .icon { font-size: 1.1rem; width: 22px; text-align: center; }
|
||
.sidebar-bottom { margin-top: auto; padding: 16px 12px; border-top: 1px solid #292524; }
|
||
.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 9px; }
|
||
.avatar {
|
||
width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center;
|
||
justify-content: center; font-weight: 700; font-size: 0.85rem; flex-shrink: 0;
|
||
}
|
||
.avatar-orange { background: linear-gradient(135deg, var(--orange), var(--amber)); color: #fff; }
|
||
.user-info .name { font-size: 0.88rem; font-weight: 600; color: #fff; }
|
||
.user-info .role { font-size: 0.75rem; color: #78716c; }
|
||
|
||
/* MAIN */
|
||
.main { margin-left: var(--sidebar-w); flex: 1; display: flex; flex-direction: column; min-height: 100vh; }
|
||
.topbar {
|
||
background: #fff; border-bottom: 1px solid var(--border);
|
||
padding: 0 32px; height: 64px; display: flex; align-items: center;
|
||
justify-content: space-between; position: sticky; top: 0; z-index: 40;
|
||
}
|
||
.topbar-title { font-size: 1.1rem; font-weight: 700; }
|
||
.topbar-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.8rem; cursor: pointer; color: var(--gray); transition: all .2s;
|
||
}
|
||
.lang-toggle:hover { border-color: var(--orange); color: var(--orange); }
|
||
.content { padding: 32px; flex: 1; }
|
||
|
||
/* STATS */
|
||
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 32px; }
|
||
.stat-card {
|
||
background: #fff; border-radius: 14px; padding: 24px;
|
||
border: 1px solid var(--border); display: flex; align-items: center; gap: 18px;
|
||
}
|
||
.stat-icon {
|
||
width: 52px; height: 52px; border-radius: 12px;
|
||
display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0;
|
||
}
|
||
.bg-orange { background: rgba(249,115,22,0.12); }
|
||
.bg-amber { background: rgba(245,158,11,0.12); }
|
||
.bg-green { background: rgba(34,197,94,0.12); }
|
||
.bg-red { background: rgba(220,38,38,0.1); }
|
||
.bg-blue { background: rgba(59,130,246,0.1); }
|
||
.stat-val { font-size: 1.9rem; font-weight: 800; color: var(--dark); }
|
||
.stat-label { font-size: 0.82rem; color: var(--gray); font-weight: 500; }
|
||
.stat-delta { font-size: 0.78rem; font-weight: 600; margin-top: 2px; }
|
||
.delta-up { color: var(--green); }
|
||
.delta-down { color: var(--red); }
|
||
|
||
/* CARD */
|
||
.card { background: #fff; border-radius: 14px; border: 1px solid var(--border); overflow: hidden; }
|
||
.card-header { padding: 20px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
|
||
.card-title { font-size: 1rem; font-weight: 700; }
|
||
.card-body { padding: 0; }
|
||
|
||
/* TABLE */
|
||
table { width: 100%; border-collapse: collapse; }
|
||
thead th { padding: 12px 20px; text-align: left; font-size: 0.78rem; 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); transition: background .15s; }
|
||
tbody tr:last-child { border-bottom: none; }
|
||
tbody tr:hover { background: #fafaf9; }
|
||
tbody td { padding: 14px 20px; font-size: 0.9rem; vertical-align: middle; }
|
||
.tenant-name { display: flex; align-items: center; gap: 12px; }
|
||
.tenant-avatar {
|
||
width: 36px; height: 36px; border-radius: 9px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-weight: 800; font-size: 0.85rem; color: #fff; flex-shrink: 0;
|
||
}
|
||
.t1 { background: linear-gradient(135deg, #f97316, #f59e0b); }
|
||
.t2 { background: linear-gradient(135deg, #3b82f6, #8b5cf6); }
|
||
.t3 { background: linear-gradient(135deg, #22c55e, #16a34a); }
|
||
.t4 { background: linear-gradient(135deg, #ec4899, #f43f5e); }
|
||
.t5 { background: linear-gradient(135deg, #06b6d4, #3b82f6); }
|
||
.t6 { background: linear-gradient(135deg, #a78bfa, #7c3aed); }
|
||
.tenant-info .tname { font-weight: 600; font-size: 0.92rem; }
|
||
.tenant-info .tid { font-size: 0.78rem; color: var(--gray); }
|
||
.badge {
|
||
display: inline-flex; align-items: center; gap: 5px;
|
||
padding: 3px 10px; border-radius: 20px; font-size: 0.75rem; 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-amber { background: rgba(245,158,11,0.12); color: #d97706; }
|
||
.badge-gray { background: #f5f5f4; color: var(--gray); }
|
||
.plan-tag { font-size: 0.78rem; font-weight: 600; padding: 2px 10px; border-radius: 20px; }
|
||
.plan-pro { background: rgba(249,115,22,0.12); color: var(--orange); }
|
||
.plan-starter { background: #f5f5f4; color: var(--gray); }
|
||
.action-btns { display: flex; gap: 6px; }
|
||
.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-primary:hover { background: #ea6c0a; }
|
||
.btn-sm-ghost { background: var(--border); color: var(--dark); }
|
||
.btn-sm-ghost:hover { background: #d6d3d1; }
|
||
.btn-sm-danger { background: rgba(220,38,38,0.1); color: var(--red); }
|
||
.btn-sm-danger:hover { background: rgba(220,38,38,0.2); }
|
||
|
||
/* GRID 2 col */
|
||
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
|
||
|
||
/* CHART PLACEHOLDER */
|
||
.chart-placeholder {
|
||
height: 180px; background: linear-gradient(135deg, #fff7ed, #fef3c7);
|
||
border-radius: 10px; display: flex; align-items: center; justify-content: center;
|
||
color: var(--amber); font-size: 0.9rem; font-weight: 600; margin: 20px;
|
||
border: 2px dashed rgba(245,158,11,0.3);
|
||
}
|
||
|
||
/* ADD TENANT 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: 20px; padding: 36px; width: 100%; max-width: 440px;
|
||
position: relative; box-shadow: 0 24px 60px rgba(0,0,0,0.2); animation: slideUp .3s ease;
|
||
}
|
||
@keyframes slideUp { from { opacity:0; transform: translateY(16px); } to { opacity:1; transform: translateY(0); } }
|
||
.modal-close {
|
||
position: absolute; top: 14px; right: 14px; width: 30px; height: 30px;
|
||
border-radius: 50%; background: var(--border); border: none; cursor: pointer; font-size: 1rem;
|
||
display: flex; align-items: center; justify-content: center;
|
||
}
|
||
.modal h2 { font-size: 1.3rem; font-weight: 800; margin-bottom: 20px; }
|
||
.form-group { margin-bottom: 14px; }
|
||
.form-group label { display: block; font-size: 0.83rem; font-weight: 600; margin-bottom: 5px; }
|
||
.form-group input, .form-group select {
|
||
width: 100%; padding: 10px 13px; border: 2px solid var(--border); border-radius: 9px;
|
||
font-family: 'Poppins', sans-serif; font-size: 0.93rem; outline: none; transition: border .2s;
|
||
}
|
||
.form-group input:focus, .form-group select:focus { border-color: var(--orange); }
|
||
.btn-primary {
|
||
background: linear-gradient(135deg, var(--orange), var(--amber)); border: none;
|
||
border-radius: 9px; padding: 11px 22px; font-family: 'Poppins', sans-serif;
|
||
font-weight: 700; font-size: 0.93rem; color: #fff; cursor: pointer; width: 100%; margin-top: 6px;
|
||
box-shadow: 0 4px 14px rgba(249,115,22,0.3);
|
||
}
|
||
.breadcrumb { font-size: 0.82rem; color: var(--gray); margin-bottom: 20px; display: flex; align-items: center; gap: 6px; }
|
||
.breadcrumb a { color: var(--orange); text-decoration: none; font-weight: 500; }
|
||
|
||
@media (max-width: 1100px) { .stats-grid { grid-template-columns: repeat(2,1fr); } }
|
||
@media (max-width: 768px) {
|
||
.sidebar { width: 60px; }
|
||
.sidebar-brand span, .sidebar-section-label, .sidebar-link span, .sidebar-badge, .user-info { display: none; }
|
||
.main { margin-left: 60px; }
|
||
.stats-grid { grid-template-columns: 1fr 1fr; }
|
||
.grid-2 { grid-template-columns: 1fr; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- SIDEBAR -->
|
||
<aside class="sidebar">
|
||
<div class="sidebar-brand">
|
||
<div class="logo-icon">🍺</div>
|
||
<div>
|
||
<div style="font-weight:800;font-size:1rem">DeckelApp</div>
|
||
<div class="sidebar-badge">Super Admin</div>
|
||
</div>
|
||
</div>
|
||
<div class="sidebar-section">
|
||
<div class="sidebar-section-label" data-de="Übersicht" data-en="Overview">Übersicht</div>
|
||
<a class="sidebar-link active" href="superadmin.html"><span class="icon">📊</span><span data-de="Dashboard" data-en="Dashboard">Dashboard</span></a>
|
||
<a class="sidebar-link" href="#"><span class="icon">🏢</span><span data-de="Alle Tenants" data-en="All Tenants">Alle Tenants</span></a>
|
||
<a class="sidebar-link" href="#"><span class="icon">👤</span><span data-de="Alle Nutzer" data-en="All Users">Alle Nutzer</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="Abonnements" data-en="Subscriptions">Abonnements</span></a>
|
||
<a class="sidebar-link" href="#"><span class="icon">📈</span><span data-de="Statistiken" data-en="Statistics">Statistiken</span></a>
|
||
<a class="sidebar-link" href="#"><span class="icon">⚙️</span><span data-de="Einstellungen" data-en="Settings">Einstellungen</span></a>
|
||
<a class="sidebar-link" href="#"><span class="icon">🔔</span><span data-de="Benachrichtigungen" data-en="Notifications">Benachrichtigungen</span></a>
|
||
</div>
|
||
<div class="sidebar-section">
|
||
<div class="sidebar-section-label" data-de="Navigation" data-en="Navigation">Navigation</div>
|
||
<a class="sidebar-link" href="admin.html"><span class="icon">🛠️</span><span data-de="Tenant Admin" data-en="Tenant Admin">Tenant Admin</span></a>
|
||
<a class="sidebar-link" href="index.html"><span class="icon">🌐</span><span data-de="Landing Page" data-en="Landing Page">Landing Page</span></a>
|
||
</div>
|
||
<div class="sidebar-bottom">
|
||
<div class="sidebar-user">
|
||
<div class="avatar avatar-orange">SA</div>
|
||
<div class="user-info">
|
||
<div class="name">Stefan Admin</div>
|
||
<div class="role">Super Admin</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- MAIN -->
|
||
<div class="main">
|
||
<div class="topbar">
|
||
<div>
|
||
<div class="topbar-title" data-de="Super Admin Dashboard" data-en="Super Admin Dashboard">Super Admin Dashboard</div>
|
||
</div>
|
||
<div class="topbar-right">
|
||
<button class="lang-toggle" onclick="toggleLang()" id="langBtn">EN</button>
|
||
<button class="btn-sm btn-sm-primary" onclick="openModal()" data-de="+ Tenant anlegen" data-en="+ Add Tenant">+ Tenant anlegen</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content">
|
||
<div class="breadcrumb">
|
||
<a href="index.html">DeckelApp</a> › <span data-de="Super Admin" data-en="Super Admin">Super Admin</span>
|
||
</div>
|
||
|
||
<!-- STATS -->
|
||
<div class="stats-grid">
|
||
<div class="stat-card">
|
||
<div class="stat-icon bg-orange">🏢</div>
|
||
<div>
|
||
<div class="stat-val">24</div>
|
||
<div class="stat-label" data-de="Aktive Tenants" data-en="Active Tenants">Aktive Tenants</div>
|
||
<div class="stat-delta delta-up">↑ 3 <span data-de="diesen Monat" data-en="this month">diesen Monat</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-icon bg-amber">👥</div>
|
||
<div>
|
||
<div class="stat-val">1.248</div>
|
||
<div class="stat-label" data-de="Gesamte Nutzer" data-en="Total Users">Gesamte Nutzer</div>
|
||
<div class="stat-delta delta-up">↑ 87 <span data-de="diesen Monat" data-en="this month">diesen Monat</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-icon bg-green">💰</div>
|
||
<div>
|
||
<div class="stat-val">2.840€</div>
|
||
<div class="stat-label" data-de="Monatsumsatz" data-en="Monthly Revenue">Monatsumsatz</div>
|
||
<div class="stat-delta delta-up">↑ 12% <span data-de="vs. Vormonat" data-en="vs. last month">vs. Vormonat</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-icon bg-red">⚠️</div>
|
||
<div>
|
||
<div class="stat-val">2</div>
|
||
<div class="stat-label" data-de="Gesperrte Tenants" data-en="Suspended Tenants">Gesperrte Tenants</div>
|
||
<div class="stat-delta delta-down" data-de="Handlungsbedarf" data-en="Action required">Handlungsbedarf</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- TENANT TABLE -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title" data-de="Alle Tenants" data-en="All Tenants">Alle Tenants</div>
|
||
<button class="btn-sm btn-sm-primary" onclick="openModal()" data-de="+ Neu anlegen" data-en="+ Add new">+ Neu anlegen</button>
|
||
</div>
|
||
<div class="card-body">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th data-de="Verein" data-en="Club">Verein</th>
|
||
<th data-de="Plan" data-en="Plan">Plan</th>
|
||
<th data-de="Mitglieder" data-en="Members">Mitglieder</th>
|
||
<th data-de="Monatsumsatz" data-en="Revenue">Monatsumsatz</th>
|
||
<th data-de="Status" data-en="Status">Status</th>
|
||
<th data-de="Erstellt" data-en="Created">Erstellt</th>
|
||
<th data-de="Aktionen" data-en="Actions">Aktionen</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><div class="tenant-name"><div class="tenant-avatar t1">SC</div><div class="tenant-info"><div class="tname">SC Biertrinker e.V.</div><div class="tid">#T-001</div></div></div></td>
|
||
<td><span class="plan-tag plan-pro">Pro</span></td>
|
||
<td>84</td>
|
||
<td>29€</td>
|
||
<td><span class="badge badge-green">✓ <span data-de="Aktiv" data-en="Active">Aktiv</span></span></td>
|
||
<td>Jan 2025</td>
|
||
<td><div class="action-btns"><button class="btn-sm btn-sm-primary" onclick="location.href='admin.html'" data-de="Öffnen" data-en="Open">Öffnen</button><button class="btn-sm btn-sm-danger" data-de="Sperren" data-en="Suspend">Sperren</button></div></td>
|
||
</tr>
|
||
<tr>
|
||
<td><div class="tenant-name"><div class="tenant-avatar t2">TV</div><div class="tenant-info"><div class="tname">TV Zapfhahn 1923</div><div class="tid">#T-002</div></div></div></td>
|
||
<td><span class="plan-tag plan-pro">Pro</span></td>
|
||
<td>156</td>
|
||
<td>29€</td>
|
||
<td><span class="badge badge-green">✓ <span data-de="Aktiv" data-en="Active">Aktiv</span></span></td>
|
||
<td>Feb 2025</td>
|
||
<td><div class="action-btns"><button class="btn-sm btn-sm-primary" onclick="location.href='admin.html'" data-de="Öffnen" data-en="Open">Öffnen</button><button class="btn-sm btn-sm-danger" data-de="Sperren" data-en="Suspend">Sperren</button></div></td>
|
||
</tr>
|
||
<tr>
|
||
<td><div class="tenant-name"><div class="tenant-avatar t3">SV</div><div class="tenant-info"><div class="tname">SV Hopfen & Malz</div><div class="tid">#T-003</div></div></div></td>
|
||
<td><span class="plan-tag plan-starter">Starter</span></td>
|
||
<td>18</td>
|
||
<td>0€</td>
|
||
<td><span class="badge badge-green">✓ <span data-de="Aktiv" data-en="Active">Aktiv</span></span></td>
|
||
<td>Mär 2025</td>
|
||
<td><div class="action-btns"><button class="btn-sm btn-sm-primary" onclick="location.href='admin.html'" data-de="Öffnen" data-en="Open">Öffnen</button><button class="btn-sm btn-sm-danger" data-de="Sperren" data-en="Suspend">Sperren</button></div></td>
|
||
</tr>
|
||
<tr>
|
||
<td><div class="tenant-name"><div class="tenant-avatar t4">FC</div><div class="tenant-info"><div class="tname">FC Durstlöscher</div><div class="tid">#T-004</div></div></div></td>
|
||
<td><span class="plan-tag plan-pro">Pro</span></td>
|
||
<td>203</td>
|
||
<td>29€</td>
|
||
<td><span class="badge badge-red">✕ <span data-de="Gesperrt" data-en="Suspended">Gesperrt</span></span></td>
|
||
<td>Apr 2025</td>
|
||
<td><div class="action-btns"><button class="btn-sm btn-sm-ghost" data-de="Entsperren" data-en="Unsuspend">Entsperren</button><button class="btn-sm btn-sm-danger" data-de="Löschen" data-en="Delete">Löschen</button></div></td>
|
||
</tr>
|
||
<tr>
|
||
<td><div class="tenant-name"><div class="tenant-avatar t5">BV</div><div class="tenant-info"><div class="tname">BV Goldener Hahn</div><div class="tid">#T-005</div></div></div></td>
|
||
<td><span class="plan-tag plan-starter">Starter</span></td>
|
||
<td>12</td>
|
||
<td>0€</td>
|
||
<td><span class="badge badge-amber">⏳ <span data-de="Testphase" data-en="Trial">Testphase</span></span></td>
|
||
<td>Mär 2025</td>
|
||
<td><div class="action-btns"><button class="btn-sm btn-sm-primary" onclick="location.href='admin.html'" data-de="Öffnen" data-en="Open">Öffnen</button><button class="btn-sm btn-sm-danger" data-de="Sperren" data-en="Suspend">Sperren</button></div></td>
|
||
</tr>
|
||
<tr>
|
||
<td><div class="tenant-name"><div class="tenant-avatar t6">TK</div><div class="tenant-info"><div class="tname">TK Dorfkrug 1987</div><div class="tid">#T-006</div></div></div></td>
|
||
<td><span class="plan-tag plan-pro">Pro</span></td>
|
||
<td>67</td>
|
||
<td>29€</td>
|
||
<td><span class="badge badge-green">✓ <span data-de="Aktiv" data-en="Active">Aktiv</span></span></td>
|
||
<td>Jan 2025</td>
|
||
<td><div class="action-btns"><button class="btn-sm btn-sm-primary" onclick="location.href='admin.html'" data-de="Öffnen" data-en="Open">Öffnen</button><button class="btn-sm btn-sm-danger" data-de="Sperren" data-en="Suspend">Sperren</button></div></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- BOTTOM GRID -->
|
||
<div class="grid-2">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title" data-de="Wachstum (letzte 6 Monate)" data-en="Growth (last 6 months)">Wachstum (letzte 6 Monate)</div>
|
||
</div>
|
||
<div class="chart-placeholder">📈 <span data-de="Chart-Platzhalter (z.B. Chart.js)" data-en="Chart placeholder (e.g. Chart.js)">Chart-Platzhalter (z.B. Chart.js)</span></div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title" data-de="Letzte Aktivitäten" data-en="Recent Activity">Letzte Aktivitäten</div>
|
||
</div>
|
||
<div style="padding:16px 20px">
|
||
<div style="display:flex;flex-direction:column;gap:14px">
|
||
<div style="display:flex;align-items:center;gap:12px;font-size:0.88rem">
|
||
<span style="font-size:1.3rem">🏢</span>
|
||
<div><div style="font-weight:600" data-de="Neuer Tenant registriert" data-en="New tenant registered">Neuer Tenant registriert</div><div style="color:var(--gray);font-size:0.78rem">BV Goldener Hahn · <span data-de="vor 2 Std." data-en="2h ago">vor 2 Std.</span></div></div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:12px;font-size:0.88rem">
|
||
<span style="font-size:1.3rem">💳</span>
|
||
<div><div style="font-weight:600" data-de="Zahlung eingegangen" data-en="Payment received">Zahlung eingegangen</div><div style="color:var(--gray);font-size:0.78rem">TV Zapfhahn 1923 · 29€ · <span data-de="heute" data-en="today">heute</span></div></div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:12px;font-size:0.88rem">
|
||
<span style="font-size:1.3rem">🔴</span>
|
||
<div><div style="font-weight:600" data-de="Tenant gesperrt" data-en="Tenant suspended">Tenant gesperrt</div><div style="color:var(--gray);font-size:0.78rem">FC Durstlöscher · <span data-de="gestern" data-en="yesterday">gestern</span></div></div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:12px;font-size:0.88rem">
|
||
<span style="font-size:1.3rem">👤</span>
|
||
<div><div style="font-weight:600" data-de="87 neue Mitglieder" data-en="87 new members">87 neue Mitglieder</div><div style="color:var(--gray);font-size:0.78rem"><span data-de="Diese Woche · alle Tenants" data-en="This week · all tenants">Diese Woche · alle Tenants</span></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ADD TENANT MODAL -->
|
||
<div class="modal-overlay" id="modalOverlay" onclick="closeModalOutside(event)">
|
||
<div class="modal">
|
||
<button class="modal-close" onclick="closeModal()">✕</button>
|
||
<h2 data-de="Neuen Tenant anlegen" data-en="Add New Tenant">Neuen Tenant anlegen</h2>
|
||
<div class="form-group">
|
||
<label data-de="Vereinsname" data-en="Club Name">Vereinsname</label>
|
||
<input type="text" placeholder="z.B. SV Musterverein e.V." />
|
||
</div>
|
||
<div class="form-group">
|
||
<label data-de="Admin E-Mail" data-en="Admin Email">Admin E-Mail</label>
|
||
<input type="email" placeholder="admin@verein.de" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label data-de="Plan" data-en="Plan">Plan</label>
|
||
<select>
|
||
<option data-de="Starter (kostenlos)" data-en="Starter (free)">Starter (kostenlos)</option>
|
||
<option data-de="Pro (29€ / Monat)" data-en="Pro (€29 / month)">Pro (29€ / Monat)</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label data-de="Status" data-en="Status">Status</label>
|
||
<select>
|
||
<option data-de="Aktiv" data-en="Active">Aktiv</option>
|
||
<option data-de="Testphase" data-en="Trial">Testphase</option>
|
||
<option data-de="Gesperrt" data-en="Suspended">Gesperrt</option>
|
||
</select>
|
||
</div>
|
||
<button class="btn-primary" data-de="Tenant erstellen" data-en="Create Tenant">Tenant erstellen</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 closeModalOutside(e) { if (e.target === document.getElementById('modalOverlay')) closeModal(); }
|
||
</script>
|
||
</body>
|
||
</html>
|