FIX: Admin-Dashboard Route hinzugefügt und Docker Port auf 80
This commit is contained in:
Peter
@@ -0,0 +1,292 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Reservierung Admin</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #0f172a;
|
||||
--card: #1e293b;
|
||||
--text: #f1f5f9;
|
||||
--text-muted: #94a3b8;
|
||||
--accent: #00d4aa;
|
||||
--accent-dark: #00b894;
|
||||
--danger: #ef4444;
|
||||
--warning: #f59e0b;
|
||||
--success: #10b981;
|
||||
}
|
||||
|
||||
[data-theme="purple"] {
|
||||
--accent: #8b5cf6;
|
||||
--accent-dark: #7c3aed;
|
||||
}
|
||||
|
||||
[data-theme="orange"] {
|
||||
--accent: #f97316;
|
||||
--accent-dark: #ea580c;
|
||||
}
|
||||
|
||||
[data-theme="blue"] {
|
||||
--accent: #3b82f6;
|
||||
--accent-dark: #2563eb;
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 260px;
|
||||
background: var(--card);
|
||||
position: fixed;
|
||||
height: 100vh;
|
||||
border-right: 1px solid #334155;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--accent);
|
||||
margin-bottom: 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--text-muted);
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.nav-item:hover, .nav-item.active {
|
||||
background: var(--accent);
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.main {
|
||||
margin-left: 260px;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 2rem;
|
||||
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--card);
|
||||
border-radius: 16px;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
border: 1px solid #334155;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.625rem 1.25rem;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--accent);
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 212, 170, 0.4);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.form-group input, .form-group select {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #334155;
|
||||
border-radius: 8px;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.theme-selector {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.theme-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.theme-btn.active {
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
.theme-green { background: linear-gradient(135deg, #00d4aa, #00b894); }
|
||||
.theme-purple { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
|
||||
.theme-orange { background: linear-gradient(135deg, #f97316, #ea580c); }
|
||||
.theme-blue { background: linear-gradient(135deg, #3b82f6, #2563eb); }
|
||||
|
||||
.grid-2 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.sidebar { width: 100%; position: relative; height: auto; }
|
||||
.main { margin-left: 0; }
|
||||
.grid-2 { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body data-theme="green">
|
||||
<aside class="sidebar">
|
||||
<div class="logo">🍽️ Admin</div>
|
||||
<nav>
|
||||
<div class="nav-item active" onclick="showTab('dashboard')">📊 Dashboard</div>
|
||||
<div class="nav-item" onclick="showTab('rooms')">🏛️ Räume</div>
|
||||
<div class="nav-item" onclick="showTab('smtp')">📧 E-Mail</div>
|
||||
<div class="nav-item" onclick="showTab('llm')">🤖 LLM</div>
|
||||
<div class="nav-item" onclick="showTab('settings')">⚙️ Einstellungen</div>
|
||||
<div class="nav-item" onclick="logout()">🚪 Abmelden</div>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<main class="main">
|
||||
<div class="header">
|
||||
<h1>Dashboard</h1>
|
||||
<div class="theme-selector">
|
||||
<div class="theme-btn theme-green active" onclick="setTheme('green')"></div>
|
||||
<div class="theme-btn theme-purple" onclick="setTheme('purple')"></div>
|
||||
<div class="theme-btn theme-orange" onclick="setTheme('orange')"></div>
|
||||
<div class="theme-btn theme-blue" onclick="setTheme('blue')"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="content">
|
||||
<!-- Dashboard -->
|
||||
<div class="card">
|
||||
<div class="card-title">📊 Statistiken</div>
|
||||
<div class="grid-2">
|
||||
<div>
|
||||
<h3 style="font-size: 2rem; color: var(--accent)">12</h3>
|
||||
<p style="color: var(--text-muted)">Heutige Reservierungen</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 style="font-size: 2rem; color: var(--accent)">48</h3>
|
||||
<p style="color: var(--text-muted)">Gäste heute</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-title">📧 SMTP Konfiguration</div>
|
||||
<div class="grid-2">
|
||||
<div class="form-group">
|
||||
<label>SMTP Server</label>
|
||||
<input type="text" id="smtpHost" placeholder="smtp.gmail.com">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Port</label>
|
||||
<input type="number" id="smtpPort" value="587">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Benutzername</label>
|
||||
<input type="text" id="smtpUser" placeholder="email@domain.de">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Passwort</label>
|
||||
<input type="password" id="smtpPass" placeholder="••••••••">
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary" onclick="saveSMTP()">💾 Speichern</button>
|
||||
<button class="btn btn-primary" onclick="testSMTP()" style="margin-left: 0.5rem;">🧪 Testen</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
function setTheme(theme) {
|
||||
document.body.setAttribute('data-theme', theme);
|
||||
document.querySelectorAll('.theme-btn').forEach(btn => btn.classList.remove('active'));
|
||||
document.querySelector(`.theme-${theme}`).classList.add('active');
|
||||
localStorage.setItem('theme', theme);
|
||||
}
|
||||
|
||||
function showTab(tab) {
|
||||
document.querySelectorAll('.nav-item').forEach(el => el.classList.remove('active'));
|
||||
event.target.classList.add('active');
|
||||
// TODO: Tab content switching
|
||||
}
|
||||
|
||||
function logout() {
|
||||
fetch('/api/admin/logout', {method: 'POST'}).then(() => location.href = '/');
|
||||
}
|
||||
|
||||
function saveSMTP() {
|
||||
const data = {
|
||||
host: document.getElementById('smtpHost').value,
|
||||
port: parseInt(document.getElementById('smtpPort').value),
|
||||
user: document.getElementById('smtpUser').value,
|
||||
password: document.getElementById('smtpPass').value
|
||||
};
|
||||
fetch('/api/admin/smtp', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify(data)
|
||||
}).then(r => r.ok ? alert('Gespeichert!') : alert('Fehler!'));
|
||||
}
|
||||
|
||||
// Theme laden
|
||||
const savedTheme = localStorage.getItem('theme') || 'green';
|
||||
setTheme(savedTheme);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user