update: better dark / white mode
This commit is contained in:
Bruno Eckhardt committed
1 parent
d661800d1f
commit
fc942e77fe
3 files changed
+420
-198
No files matched your search
@@ -120,8 +120,7 @@ if (isset($_POST['generate_pdf']) && count($berichteArray) > 0) {
|
||||
|
||||
<?php if ($pdfFile): ?>
|
||||
<div class="overtime-result">
|
||||
PDF erfolgreich erstellt! <br>
|
||||
<a href="<?= htmlspecialchars($pdfFile) ?>" target="_blank">Hier öffnen</a>
|
||||
<?= htmlspecialchars(basename($pdfFile)) ?> erfolgreich erstellt!
|
||||
</div>
|
||||
<?php elseif(isset($_POST['generate_pdf'])): ?>
|
||||
<div class="overtime-result negative">
|
||||
@@ -144,23 +143,20 @@ if (isset($_POST['generate_pdf']) && count($berichteArray) > 0) {
|
||||
<code><?= htmlspecialchars($woche['end_date']) ?></code>
|
||||
<?php if($exists): ?>
|
||||
<span style="color:green;">(PDF vorhanden)</span>
|
||||
<a href="<?= htmlspecialchars('/static/' . $pdfName) ?>" target="_blank">Ansehen</a>
|
||||
<a href="<?= htmlspecialchars('/static/' . $pdfName) ?>" download class="btn btn-success">
|
||||
Download
|
||||
</a>
|
||||
|
||||
|
||||
<?php else: ?>
|
||||
<span style="color:red;">(noch keine PDF)</span>
|
||||
<form method="post" style="display:inline;">
|
||||
<input type="hidden" name="start_date" value="<?= htmlspecialchars($woche['start_date']) ?>">
|
||||
<input type="hidden" name="end_date" value="<?= htmlspecialchars($woche['end_date']) ?>">
|
||||
<button type="submit" name="generate_pdf" style="
|
||||
background-color:#007bff;
|
||||
color:white;
|
||||
border:none;
|
||||
border-radius:5px;
|
||||
cursor:pointer;
|
||||
transition:0.2s;
|
||||
" onmouseover="this.style.backgroundColor='#0056b3';"
|
||||
onmouseout="this.style.backgroundColor='#007bff';">
|
||||
<button type="submit" name="generate_pdf" class="btn btn-primary">
|
||||
PDF erzeugen
|
||||
</button>
|
||||
|
||||
</form>
|
||||
<?php endif; ?>
|
||||
|
||||
|
||||
@@ -109,172 +109,57 @@ unset($_SESSION['status_message']);
|
||||
<meta charset="UTF-8">
|
||||
<title>Admin Site Control</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background: #0b0b0b;
|
||||
color: #eee;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.main {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.admin-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
|
||||
gap: 20px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.admin-card {
|
||||
background: #161616;
|
||||
border: 1px solid #333;
|
||||
border-radius: 10px;
|
||||
padding: 18px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.admin-card.new-item {
|
||||
border: 1px dashed #28a745;
|
||||
background: #1a231a;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
select {
|
||||
width: 100%;
|
||||
margin: 8px 0;
|
||||
padding: 10px;
|
||||
background: #222;
|
||||
border: 1px solid #444;
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
input[type="color"] {
|
||||
width: 100%;
|
||||
height: 45px;
|
||||
border: 1px solid #444;
|
||||
background: #222;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
margin: 8px 0;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.status-msg {
|
||||
background: #28a745;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.save-bar {
|
||||
position: sticky;
|
||||
bottom: -20px;
|
||||
background: #0b0b0b;
|
||||
padding: 25px;
|
||||
border-top: 1px solid #333;
|
||||
text-align: center;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.btn-save {
|
||||
background: #007bff;
|
||||
color: white;
|
||||
padding: 14px 80px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.btn-add {
|
||||
background: #28a745;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 1px solid #333;
|
||||
padding-bottom: 12px;
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
.badge {
|
||||
background: #333;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.8rem;
|
||||
color: #aaa;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="dark-mode">
|
||||
<body class="<?= ($_SESSION['dark_mode'] ?? false) ? 'dark-mode' : '' ?>">
|
||||
<div class="main">
|
||||
<?php if (!($_SESSION['logged_in'] ?? false)): ?>
|
||||
<div
|
||||
style="margin: auto; width: 320px; padding: 40px; background: #161616; border-radius: 12px; border: 1px solid #333;">
|
||||
<form method="post">
|
||||
<h2>🔐 Login</h2>
|
||||
<input type="password" name="password" placeholder="Passwort" required>
|
||||
<button type="submit"
|
||||
style="width:100%; padding:12px; background:#007bff; border:none; color:white; border-radius:5px; cursor:pointer; margin-top:10px;">Einloggen</button>
|
||||
</form>
|
||||
<div class="login-container">
|
||||
<div class="login-box">
|
||||
<form method="post">
|
||||
<h2>🔐 Login</h2>
|
||||
<?php if(isset($error)): ?>
|
||||
<div class="status-msg" style="background:#dc3545; color:#fff;"><?= htmlspecialchars($error) ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<input type="password" name="password" placeholder="Passwort" required>
|
||||
<button type="submit">Einloggen</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<div class="content">
|
||||
<?php if($message): ?><div class="status-msg"><?= $message ?></div><?php endif; ?>
|
||||
<?php if($message): ?><div class="status-msg"><?= htmlspecialchars($message) ?></div><?php endif; ?>
|
||||
|
||||
<form method="post">
|
||||
|
||||
<h2>📦 Sidebar Gruppen <button type="button" class="btn-add" onclick="addNew('serviceGroup')">+ Neue
|
||||
Gruppe</button></h2>
|
||||
<!-- Sidebar Gruppen -->
|
||||
<h2>📦 Sidebar Gruppen
|
||||
<button type="button" class="btn-add" onclick="addNew('serviceGroup')">+ Neue Gruppe</button>
|
||||
</h2>
|
||||
<div class="admin-grid" id="container-serviceGroup">
|
||||
<?php foreach ($serviceGroups as $id => $group): ?>
|
||||
<div class="admin-card">
|
||||
<div style="margin-bottom:10px;"><span class="badge">ID: <?= htmlspecialchars($id) ?></span>
|
||||
</div>
|
||||
<span class="badge">ID: <?= htmlspecialchars($id) ?></span>
|
||||
<input type="text" name="serviceGroups[<?= $id ?>][label]"
|
||||
value="<?= htmlspecialchars($group['label']) ?>" placeholder="Anzeigename">
|
||||
<label><input type="checkbox" name="serviceGroups[<?= $id ?>][defaultOpen]"
|
||||
<?= ($group['defaultOpen'] ?? false) ? 'checked' : '' ?>> Offen</label>
|
||||
<label>
|
||||
<input type="checkbox" name="serviceGroups[<?= $id ?>][defaultOpen]"
|
||||
<?= ($group['defaultOpen'] ?? false) ? 'checked' : '' ?>>
|
||||
Offen
|
||||
</label>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
|
||||
<h2>🖥 Sidebar Services <button type="button" class="btn-add" onclick="addNew('service')">+ Neuer
|
||||
Service</button></h2>
|
||||
<!-- Sidebar Services -->
|
||||
<h2>🖥 Sidebar Services
|
||||
<button type="button" class="btn-add" onclick="addNew('service')">+ Neuer Service</button>
|
||||
</h2>
|
||||
<div class="admin-grid" id="container-service">
|
||||
<?php foreach ($services as $id => $s): ?>
|
||||
<div class="admin-card">
|
||||
<div style="margin-bottom:10px;"><span class="badge">Datei:
|
||||
<?= htmlspecialchars($id) ?>.php</span></div>
|
||||
<span class="badge">Datei: <?= htmlspecialchars($id) ?>.php</span>
|
||||
<input type="text" name="services[<?= $id ?>][name]" value="<?= htmlspecialchars($s['name']) ?>"
|
||||
placeholder="Name">
|
||||
<label>Sidebar-Gruppe:</label>
|
||||
@@ -282,35 +167,51 @@ unset($_SESSION['status_message']);
|
||||
<?php foreach ($serviceGroups as $gid => $g): ?>
|
||||
<option value="<?= $gid ?>"
|
||||
<?= (isset($g['services']) && in_array($id, $g['services'])) ? 'selected' : '' ?>>
|
||||
<?= htmlspecialchars($g['label']) ?></option>
|
||||
<?= htmlspecialchars($g['label']) ?>
|
||||
</option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
<label><input type="checkbox" name="services[<?= $id ?>][active]"
|
||||
<?= ($s['active'] ?? false) ? 'checked' : '' ?>> Aktiv</label> |
|
||||
<label><input type="checkbox" name="services[<?= $id ?>][adminOnly]"
|
||||
<?= ($s['adminOnly'] ?? false) ? 'checked' : '' ?>>Nur Admins</label>
|
||||
<label>
|
||||
<input type="checkbox" name="services[<?= $id ?>][active]"
|
||||
<?= ($s['active'] ?? false) ? 'checked' : '' ?>>
|
||||
Aktiv
|
||||
</label>
|
||||
|
|
||||
<label>
|
||||
<input type="checkbox" name="services[<?= $id ?>][adminOnly]"
|
||||
<?= ($s['adminOnly'] ?? false) ? 'checked' : '' ?>>
|
||||
Nur Admins
|
||||
</label>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
|
||||
<h2>🎨 Dashboard Kategorien <button type="button" class="btn-add" onclick="addNew('linkGroup')">+ Neue
|
||||
Kategorie</button></h2>
|
||||
<!-- Dashboard Kategorien -->
|
||||
<h2>🎨 Dashboard Kategorien
|
||||
<button type="button" class="btn-add" onclick="addNew('linkGroup')">+ Neue Kategorie</button>
|
||||
</h2>
|
||||
<div class="admin-grid" id="container-linkGroup">
|
||||
<?php foreach ($linkGroups as $id => $lg): ?>
|
||||
<div class="admin-card">
|
||||
<div style="margin-bottom:10px;"><span class="badge">ID: <?= htmlspecialchars($id) ?></span>
|
||||
</div>
|
||||
<span class="badge">ID: <?= htmlspecialchars($id) ?></span>
|
||||
<input type="text" name="linkGroups[<?= $id ?>][label]"
|
||||
value="<?= htmlspecialchars($lg['label']) ?>" placeholder="Gruppen-Label">
|
||||
<label>Farbe:</label>
|
||||
<input type="color" name="linkGroups[<?= $id ?>][color]"
|
||||
value="<?= $lg['color'] ?? '#3498db' ?>">
|
||||
<label>
|
||||
<input type="checkbox" name="linkGroups[<?= $id ?>][defaultOpen]"
|
||||
<?= ($lg['defaultOpen'] ?? false) ? 'checked' : '' ?>>
|
||||
Offen
|
||||
</label>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
|
||||
<h2>🔘 Dashboard Kacheln <button type="button" class="btn-add" onclick="addNew('linkButton')">+ Neue
|
||||
Kachel</button></h2>
|
||||
<!-- Dashboard Kacheln -->
|
||||
<h2>🔘 Dashboard Kacheln
|
||||
<button type="button" class="btn-add" onclick="addNew('linkButton')">+ Neue Kachel</button>
|
||||
</h2>
|
||||
<div class="admin-grid" id="container-linkButton">
|
||||
<?php foreach ($linkButtons as $key => $btn): ?>
|
||||
<div class="admin-card">
|
||||
@@ -322,21 +223,31 @@ unset($_SESSION['status_message']);
|
||||
<select name="linkButtons[<?= $key ?>][group]">
|
||||
<?php foreach ($linkGroups as $id => $lg): ?>
|
||||
<option value="<?= $id ?>" <?= ($btn['group'] == $id) ? 'selected' : '' ?>>
|
||||
<?= htmlspecialchars($lg['label']) ?></option>
|
||||
<?= htmlspecialchars($lg['label']) ?>
|
||||
</option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
<div style="margin-top:5px;">
|
||||
<label><input type="checkbox" name="linkButtons[<?= $key ?>][newTab]"
|
||||
<?= ($btn['newTab'] ?? false) ? 'checked' : '' ?>> Neuer Tab</label> |
|
||||
<label><input type="checkbox" name="linkButtons[<?= $key ?>][adminOnly]"
|
||||
<?= ($btn['adminOnly'] ?? false) ? 'checked' : '' ?>>Nur Admins</label>
|
||||
<label>
|
||||
<input type="checkbox" name="linkButtons[<?= $key ?>][newTab]"
|
||||
<?= ($btn['newTab'] ?? false) ? 'checked' : '' ?>>
|
||||
Neuer Tab
|
||||
</label>
|
||||
|
|
||||
<label>
|
||||
<input type="checkbox" name="linkButtons[<?= $key ?>][adminOnly]"
|
||||
<?= ($btn['adminOnly'] ?? false) ? 'checked' : '' ?>>
|
||||
Nur Admins
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
|
||||
<div class="save-bar"><button type="submit" name="save" class="btn-save">💾 Gesamte Konfiguration
|
||||
speichern</button></div>
|
||||
<div class="save-bar">
|
||||
<button type="submit" name="save" class="btn-save">💾 Gesamte Konfiguration speichern</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
@@ -349,31 +260,38 @@ unset($_SESSION['status_message']);
|
||||
const card = document.createElement('div');
|
||||
card.className = 'admin-card new-item';
|
||||
|
||||
let html =
|
||||
`<div style="margin-bottom:10px;"><span class="badge" style="background:#28a745;color:white;">Neu hinzufügen</span></div>`;
|
||||
let html = `<div><span class="badge">Neu hinzufügen</span></div>`;
|
||||
|
||||
if (type === 'serviceGroup') {
|
||||
html +=
|
||||
`<input type="text" name="serviceGroups[${tempId}][new_id]" placeholder="ID (z.B. media)">
|
||||
<input type="text" name="serviceGroups[${tempId}][label]" placeholder="Name">
|
||||
<label><input type="checkbox" name="serviceGroups[${tempId}][defaultOpen]" checked> Ausgeklappt</label>`;
|
||||
`<input type="text" name="serviceGroups[${tempId}][new_id]" placeholder="ID">
|
||||
<input type="text" name="serviceGroups[${tempId}][label]" placeholder="Name">
|
||||
<label><input type="checkbox" name="serviceGroups[${tempId}][defaultOpen]" checked> Ausgeklappt</label>`;
|
||||
} else if (type === 'service') {
|
||||
html += `<input type="text" name="services[${tempId}][new_id]" placeholder="Datei ohne .php (z.B. plex)">
|
||||
<input type="text" name="services[${tempId}][name]" placeholder="Anzeigename">
|
||||
<label>Gruppe:</label><select name="services[${tempId}][targetGroup]">
|
||||
<?php foreach ($serviceGroups as $gid => $gl): ?><option value="<?= $gid ?>"><?= $gl['label'] ?></option><?php endforeach; ?></select>
|
||||
<label><input type="checkbox" name="services[${tempId}][active]" checked> Aktiv</label>`;
|
||||
html += `<input type="text" name="services[${tempId}][new_id]" placeholder="Datei ohne .php">
|
||||
<input type="text" name="services[${tempId}][name]" placeholder="Anzeigename">
|
||||
<label>Gruppe:</label>
|
||||
<select name="services[${tempId}][targetGroup]">
|
||||
<?php foreach ($serviceGroups as $gid => $gl): ?>
|
||||
<option value="<?= $gid ?>"><?= $gl['label'] ?></option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
<label><input type="checkbox" name="services[${tempId}][active]" checked> Aktiv</label>`;
|
||||
} else if (type === 'linkGroup') {
|
||||
html += `<input type="text" name="linkGroups[${tempId}][new_id]" placeholder="ID (z.B. social)">
|
||||
<input type="text" name="linkGroups[${tempId}][label]" placeholder="Label">
|
||||
<input type="color" name="linkGroups[${tempId}][color]" value="#3498db">`;
|
||||
html += `<input type="text" name="linkGroups[${tempId}][new_id]" placeholder="ID">
|
||||
<input type="text" name="linkGroups[${tempId}][label]" placeholder="Label">
|
||||
<input type="color" name="linkGroups[${tempId}][color]" value="#3498db">`;
|
||||
} else if (type === 'linkButton') {
|
||||
html += `<input type="text" name="linkButtons[${tempId}][label]" placeholder="Anzeigename">
|
||||
<input type="text" name="linkButtons[${tempId}][url]" placeholder="https://...">
|
||||
<label>Kategorie:</label><select name="linkButtons[${tempId}][group]">
|
||||
<?php foreach ($linkGroups as $gid => $gl): ?><option value="<?= $gid ?>"><?= $gl['label'] ?></option><?php endforeach; ?></select>
|
||||
<label><input type="checkbox" name="linkButtons[${tempId}][newTab]" checked> Tab</label> |
|
||||
<label><input type="checkbox" name="linkButtons[${tempId}][adminOnly]">Nur Admins</label>`;
|
||||
<input type="text" name="linkButtons[${tempId}][url]" placeholder="https://...">
|
||||
<label>Kategorie:</label>
|
||||
<select name="linkButtons[${tempId}][group]">
|
||||
<?php foreach ($linkGroups as $gid => $gl): ?>
|
||||
<option value="<?= $gid ?>"><?= $gl['label'] ?></option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
<label><input type="checkbox" name="linkButtons[${tempId}][newTab]" checked> Tab</label>
|
||||
| <label><input type="checkbox" name="linkButtons[${tempId}][adminOnly]"> Nur Admins</label>`;
|
||||
}
|
||||
|
||||
card.innerHTML = html;
|
||||
@@ -385,4 +303,5 @@ unset($_SESSION['status_message']);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
+313
-6
@@ -128,6 +128,11 @@ body.dark-mode #darkModeToggle {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
body.dark-mode .group-title:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
|
||||
.group-services {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
@@ -280,14 +285,57 @@ body.dark-mode .overtime-container input {
|
||||
}
|
||||
|
||||
.overtime-result {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
min-width: 300px;
|
||||
max-width: 90%;
|
||||
|
||||
text-align: center;
|
||||
font-size: 1.3rem;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
padding: 12px 20px;
|
||||
border-radius: 8px;
|
||||
|
||||
background-color: #e0f7e0;
|
||||
color: #155724;
|
||||
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
z-index: 9999;
|
||||
|
||||
opacity: 0;
|
||||
animation: fadeInOut 4s ease forwards;
|
||||
}
|
||||
|
||||
.overtime-result.negative {
|
||||
background-color: #f8d7da;
|
||||
color: #721c24;
|
||||
}
|
||||
|
||||
@keyframes fadeInOut {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, 20px);
|
||||
}
|
||||
|
||||
10% {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
90% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, 20px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
body.dark-mode .overtime-result {
|
||||
background-color: #333;
|
||||
}
|
||||
@@ -312,24 +360,34 @@ body.dark-mode .overtime-result.negative {
|
||||
|
||||
/* Einzelne Gruppe */
|
||||
.link-group {
|
||||
background: #121212;
|
||||
background: #ffffff;
|
||||
border-radius: 10px;
|
||||
padding: 15px;
|
||||
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
body.dark-mode .link-group {
|
||||
background: #1e1e1e;
|
||||
}
|
||||
|
||||
|
||||
/* Gruppen-Überschrift */
|
||||
.link-group h3 {
|
||||
padding: 10px;
|
||||
color: white;
|
||||
color: #222;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 15px;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
body.dark-mode .link-group h3 {
|
||||
color: #f0f0f0;
|
||||
}
|
||||
|
||||
|
||||
/* Links untereinander */
|
||||
.group-links {
|
||||
display: flex;
|
||||
@@ -366,3 +424,252 @@ body.dark-mode .overtime-result.negative {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
width: 160px;
|
||||
/* feste gleiche Breite */
|
||||
padding: 8px 12px;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
text-align: center;
|
||||
transition: background-color 0.2s ease, transform 0.1s ease;
|
||||
font-size: 14px;
|
||||
/* margin: 10px 8px 5px 0; */
|
||||
margin-left: 10px;
|
||||
margin-top: 5px;
|
||||
/* Abstand zwischen Buttons */
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #007bff;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background-color: #28a745;
|
||||
}
|
||||
|
||||
.btn-success:hover {
|
||||
background-color: #218838;
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
/* ===== Farben / Dark-Light Mode Variablen ===== */
|
||||
:root {
|
||||
--bg: #f5f5f5;
|
||||
--text: #111;
|
||||
--card-bg: #fff;
|
||||
--card-border: #ccc;
|
||||
--input-bg: #fff;
|
||||
--input-border: #ccc;
|
||||
--input-text: #111;
|
||||
--btn-bg: #007bff;
|
||||
--btn-text: #fff;
|
||||
--btn-add-bg: #28a745;
|
||||
--btn-add-text: #fff;
|
||||
--badge-bg: #eee;
|
||||
--badge-text: #333;
|
||||
--status-bg: #28a745;
|
||||
--status-text: #155724;
|
||||
}
|
||||
|
||||
body.dark-mode {
|
||||
--bg: #0b0b0b;
|
||||
--text: #eee;
|
||||
--card-bg: #161616;
|
||||
--card-border: #333;
|
||||
--input-bg: #222;
|
||||
--input-border: #444;
|
||||
--input-text: #fff;
|
||||
--btn-bg: #007bff;
|
||||
--btn-text: #fff;
|
||||
--btn-add-bg: #28a745;
|
||||
--btn-add-text: #fff;
|
||||
--badge-bg: #333;
|
||||
--badge-text: #aaa;
|
||||
--status-bg: #28a745;
|
||||
--status-text: #155724;
|
||||
}
|
||||
|
||||
/* ===== Grundlayout ===== */
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.main {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* ===== Admin Grid / Cards ===== */
|
||||
.admin-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
|
||||
gap: 20px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.admin-card {
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--card-border);
|
||||
border-radius: 10px;
|
||||
padding: 18px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.admin-card.new-item {
|
||||
border: 1px dashed var(--btn-add-bg);
|
||||
}
|
||||
|
||||
/* ===== Inputs / Selects ===== */
|
||||
input[type="text"],
|
||||
select {
|
||||
width: 100%;
|
||||
margin: 8px 0;
|
||||
padding: 10px;
|
||||
background: var(--input-bg);
|
||||
border: 1px solid var(--input-border);
|
||||
color: var(--input-text);
|
||||
border-radius: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
input[type="color"] {
|
||||
width: 100%;
|
||||
height: 45px;
|
||||
border: 1px solid var(--input-border);
|
||||
background: var(--input-bg);
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
margin: 8px 0;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
/* ===== Buttons ===== */
|
||||
.btn-save {
|
||||
background: var(--btn-bg);
|
||||
color: var(--btn-text);
|
||||
padding: 14px 80px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.btn-add {
|
||||
background: var(--btn-add-bg);
|
||||
color: var(--btn-add-text);
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
/* ===== Badges / Status ===== */
|
||||
.badge {
|
||||
background: var(--badge-bg);
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.8rem;
|
||||
color: var(--badge-text);
|
||||
}
|
||||
|
||||
.status-msg {
|
||||
background: var(--status-bg);
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
color: var(--status-text);
|
||||
}
|
||||
|
||||
/* ===== Headings / Save Bar ===== */
|
||||
h2 {
|
||||
border-bottom: 1px solid var(--card-border);
|
||||
padding-bottom: 12px;
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: var(--btn-bg);
|
||||
}
|
||||
|
||||
.save-bar {
|
||||
position: sticky;
|
||||
bottom: -20px;
|
||||
background: var(--bg);
|
||||
padding: 25px;
|
||||
border-top: 1px solid var(--card-border);
|
||||
text-align: center;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
/* ===== Login Container ===== */
|
||||
.login-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.login-box {
|
||||
background: var(--card-bg);
|
||||
padding: 30px 35px;
|
||||
border-radius: 8px;
|
||||
width: 320px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.login-box input {
|
||||
background: var(--input-bg);
|
||||
border: 1px solid var(--input-border);
|
||||
color: var(--input-text);
|
||||
}
|
||||
|
||||
.login-box button {
|
||||
background: var(--btn-bg);
|
||||
color: var(--btn-text);
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.login-box button:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* ===== Responsive ===== */
|
||||
@media (max-width: 600px) {
|
||||
.admin-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user