Peter
293 lines
9.5 KiB
HTML
293 lines
9.5 KiB
HTML
<!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>
|