|
|
@@ -24,17 +24,21 @@ if ($show_login):
|
|
|
<meta charset="UTF-8">
|
|
|
<title>Admin Login</title>
|
|
|
<style>
|
|
|
- body { font-family: 'Segoe UI', sans-serif; background: #f4f7f6; color: #333; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; }
|
|
|
- .login-box { background: white; padding: 40px; border-radius: 12px; border: 1px solid #ddd; box-shadow: 0 4px 15px rgba(0,0,0,0.1); text-align: center; width: 300px; }
|
|
|
- input { width: 100%; padding: 12px; margin: 15px 0; border-radius: 5px; border: 1px solid #ccc; background: #fff; color: #333; box-sizing: border-box; }
|
|
|
+ :root { --bg: #f4f7f6; --card: #ffffff; --text: #333; --border: #ddd; }
|
|
|
+ .dark-theme { --bg: #121212; --card: #1e1e1e; --text: #e0e0e0; --border: #333; }
|
|
|
+ body { font-family: 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; }
|
|
|
+ .login-box { background: var(--card); padding: 40px; border-radius: 12px; border: 1px solid var(--border); box-shadow: 0 4px 15px rgba(0,0,0,0.1); text-align: center; width: 300px; }
|
|
|
+ input { width: 100%; padding: 12px; margin: 15px 0; border-radius: 5px; border: 1px solid var(--border); background: var(--card); color: var(--text); box-sizing: border-box; }
|
|
|
button { background: #e67e22; color: white; border: none; padding: 12px; border-radius: 5px; cursor: pointer; width: 100%; font-weight: bold; }
|
|
|
- .error { color: #e74c3c; font-size: 0.9em; }
|
|
|
</style>
|
|
|
+ <script>
|
|
|
+ if (localStorage.getItem('theme') === 'dark') document.documentElement.classList.add('dark-theme');
|
|
|
+ </script>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="login-box">
|
|
|
<h2>🔐 Admin Login</h2>
|
|
|
- <?php if(isset($login_error)) echo "<div class='error'>$login_error</div>"; ?>
|
|
|
+ <?php if(isset($login_error)) echo "<div style='color:red;'>$login_error</div>"; ?>
|
|
|
<form method="POST">
|
|
|
<input type="password" name="pw" placeholder="Passwort" autofocus required>
|
|
|
<button type="submit" name="login_auth">Einloggen</button>
|
|
|
@@ -89,53 +93,62 @@ $typen = $pdo->query("SELECT * FROM game_typen ORDER BY bezeichnung ASC")->fetch
|
|
|
<meta charset="UTF-8">
|
|
|
<title>EXIT Admin - Stammdaten</title>
|
|
|
<style>
|
|
|
- body { font-family: 'Segoe UI', sans-serif; background: #f4f7f6; color: #333; padding: 20px; scroll-behavior: smooth; }
|
|
|
+ /* THEME VARIABLEN */
|
|
|
+ :root {
|
|
|
+ --bg: #f4f7f6; --card: #ffffff; --text: #333; --border: #ddd;
|
|
|
+ --header-bg: #f8f9fa; --input-bg: #fff; --unknown-bg: #fff3e0;
|
|
|
+ }
|
|
|
+ .dark-theme {
|
|
|
+ --bg: #121212; --card: #1e1e1e; --text: #e0e0e0; --border: #333;
|
|
|
+ --header-bg: #252525; --input-bg: #2a2a2a; --unknown-bg: #4d2b00;
|
|
|
+ }
|
|
|
+
|
|
|
+ body { font-family: 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); padding: 20px; scroll-behavior: smooth; transition: background 0.3s, color 0.3s; }
|
|
|
.container { max-width: 1400px; margin: 0 auto; position: relative; }
|
|
|
|
|
|
- /* Alerts */
|
|
|
+ /* Theme Switcher Button */
|
|
|
+ .theme-toggle { background: var(--card); border: 1px solid var(--border); color: var(--text); padding: 8px 12px; border-radius: 20px; cursor: pointer; font-size: 1.2rem; margin-right: 10px; transition: 0.3s; }
|
|
|
+ .theme-toggle:hover { transform: scale(1.1); }
|
|
|
+
|
|
|
+ /* Admin Layout */
|
|
|
.alert { padding: 15px; border-radius: 8px; margin-bottom: 20px; font-weight: bold; text-align: center; position: sticky; top: 10px; z-index: 1000; border: 1px solid transparent; }
|
|
|
- .alert-success { background: #d4edda; color: #155724; border-color: #c3e6cb; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
|
|
|
- .alert-error { background: #f8d7da; color: #721c24; border-color: #f5c6cb; }
|
|
|
+ .alert-success { background: #d4edda; color: #155724; border-color: #c3e6cb; }
|
|
|
+ .dark-theme .alert-success { background: #1b4332; color: #74c69d; }
|
|
|
+
|
|
|
+ .admin-card { background: var(--card); padding: 20px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); margin-bottom: 30px; border: 1px solid var(--border); }
|
|
|
+ table { width: 100%; border-collapse: collapse; margin-top: 20px; table-layout: fixed; background: var(--card); }
|
|
|
+ th { background: var(--header-bg); color: var(--text); padding: 12px 10px; text-align: left; font-size: 0.85em; text-transform: uppercase; border-bottom: 2px solid var(--border); }
|
|
|
+ td { padding: 10px; border-bottom: 1px solid var(--border); }
|
|
|
+
|
|
|
+ input, select { padding: 8px; border: 1px solid var(--border); border-radius: 6px; width: 100%; box-sizing: border-box; background: var(--input-bg); color: var(--text); font-size: 0.95em; }
|
|
|
|
|
|
- .admin-card { background: white; padding: 20px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); margin-bottom: 30px; border: 1px solid #eee; }
|
|
|
- table { width: 100%; border-collapse: collapse; margin-top: 20px; table-layout: fixed; background: white; }
|
|
|
- th, td { padding: 12px 10px; border-bottom: 1px solid #f0f0f0; text-align: left; overflow: hidden; }
|
|
|
- th { background: #f8f9fa; color: #555; font-size: 0.85em; text-transform: uppercase; letter-spacing: 1px; border-top: 1px solid #eee; }
|
|
|
- input, select { padding: 8px; border: 1px solid #ddd; border-radius: 6px; width: 100%; box-sizing: border-box; background: #fff; color: #333; font-size: 0.95em; transition: border-color 0.2s; }
|
|
|
- input:focus, select:focus { border-color: #e67e22; outline: none; }
|
|
|
+ /* Spaltenbreiten */
|
|
|
+ .col-img { width: 60px; } .col-titel { width: auto; } .col-ean { width: 130px; } .col-typ { width: 160px; } .col-lvl { width: 150px; } .col-url { width: 180px; } .col-akt { width: 100px; text-align: center; }
|
|
|
+
|
|
|
+ .lvl-unknown { background: var(--unknown-bg) !important; color: #e67e22 !important; }
|
|
|
|
|
|
- /* Spaltenbreiten Tabelle */
|
|
|
- .col-img { width: 60px; }
|
|
|
- .col-titel { width: auto; }
|
|
|
- .col-ean { width: 130px; }
|
|
|
- .col-typ { width: 160px; }
|
|
|
- .col-lvl { width: 150px; }
|
|
|
- .col-url { width: 180px; }
|
|
|
- .col-akt { width: 100px; text-align: center; }
|
|
|
-
|
|
|
- .lvl-unknown { background: #fff3e0 !important; border-color: #ffb74d !important; color: #e65100 !important; }
|
|
|
- .btn { padding: 10px 15px; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; color: white; text-decoration: none; display: inline-block; font-size: 0.9em; transition: opacity 0.2s; }
|
|
|
- .btn:hover { opacity: 0.85; }
|
|
|
+ .btn { padding: 10px 15px; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; color: white; text-decoration: none; display: inline-block; font-size: 0.9em; }
|
|
|
.btn-add { background: #27ae60; width: 100%; margin-top: 10px; }
|
|
|
.btn-save { background: #2980b9; }
|
|
|
.btn-del { background: #c0392b; }
|
|
|
.btn-nav { background: #e67e22; }
|
|
|
- .btn-scroll { background: #7f8c8d; margin-left: 5px; }
|
|
|
|
|
|
- /* Floating Button */
|
|
|
- #scrollToTop { position: fixed; bottom: 30px; right: 30px; background: #34495e; color: white; width: 45px; height: 45px; border-radius: 50%; border: none; cursor: pointer; display: none; font-size: 20px; z-index: 1000; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
|
|
|
-
|
|
|
- .img-preview { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; background: #eee; display: block; margin: 0 auto; border: 1px solid #ddd; }
|
|
|
+ #scrollToTop { position: fixed; bottom: 30px; right: 30px; background: #e67e22; color: white; width: 45px; height: 45px; border-radius: 50%; border: none; cursor: pointer; display: none; z-index: 1000; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
|
|
|
+ .img-preview { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; border: 1px solid var(--border); background: #eee; }
|
|
|
</style>
|
|
|
+ <script>
|
|
|
+ // Theme sofort beim Laden anwenden (verhindert weißes Flackern)
|
|
|
+ if (localStorage.getItem('theme') === 'dark') document.documentElement.classList.add('dark-theme');
|
|
|
+ </script>
|
|
|
</head>
|
|
|
<body id="top">
|
|
|
|
|
|
<div class="container">
|
|
|
<div style="display:flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
|
|
|
- <h1 style="color: #2c3e50;">🛠 Stammdaten Verwaltung</h1>
|
|
|
- <div>
|
|
|
+ <h1>🛠 Stammdaten</h1>
|
|
|
+ <div style="display: flex; align-items: center;">
|
|
|
+ <button onclick="toggleTheme()" class="theme-toggle" id="theme-icon">🌙</button>
|
|
|
<a href="index.php" class="btn btn-nav">Dashboard</a>
|
|
|
- <button onclick="window.scrollTo(0, document.body.scrollHeight);" class="btn btn-scroll">⬇ Nach unten</button>
|
|
|
<a href="admin.php?logout=1" class="btn btn-del" style="margin-left:15px;">Logout</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -145,7 +158,7 @@ $typen = $pdo->query("SELECT * FROM game_typen ORDER BY bezeichnung ASC")->fetch
|
|
|
<?php endif; ?>
|
|
|
|
|
|
<div class="admin-card">
|
|
|
- <h3 style="margin-top:0; color: #2c3e50;">🆕 Neues Spiel hinzufügen</h3>
|
|
|
+ <h3>🆕 Neues Spiel hinzufügen</h3>
|
|
|
<form method="POST">
|
|
|
<div style="display: grid; grid-template-columns: 3fr 1fr 1.2fr 1.2fr 2fr; gap: 10px;">
|
|
|
<input type="text" name="new_titel" placeholder="Spieltitel" required>
|
|
|
@@ -162,15 +175,14 @@ $typen = $pdo->query("SELECT * FROM game_typen ORDER BY bezeichnung ASC")->fetch
|
|
|
<option value="Fortgeschrittene">Fortgeschrittene</option>
|
|
|
<option value="Profi">Profi</option>
|
|
|
</select>
|
|
|
- <input type="text" name="new_bild_url" placeholder="Bild-URL (Optional)">
|
|
|
+ <input type="text" name="new_bild_url" placeholder="Bild-URL">
|
|
|
</div>
|
|
|
- <button type="submit" name="add_new_game" class="btn btn-add">Spiel in Datenbank speichern</button>
|
|
|
+ <button type="submit" name="add_new_game" class="btn btn-add">In Datenbank speichern</button>
|
|
|
</form>
|
|
|
</div>
|
|
|
|
|
|
<div class="admin-card" style="padding: 0; overflow: hidden;">
|
|
|
- <h3 style="padding: 20px 20px 0 20px; margin-bottom: 10px; color: #2c3e50;">📋 Aktueller Bestand</h3>
|
|
|
- <table>
|
|
|
+ <table id="bestand-table">
|
|
|
<thead>
|
|
|
<tr>
|
|
|
<th class="col-img">Bild</th>
|
|
|
@@ -210,8 +222,8 @@ $typen = $pdo->query("SELECT * FROM game_typen ORDER BY bezeichnung ASC")->fetch
|
|
|
</td>
|
|
|
<td class="col-url"><input type="text" name="bild_url" value="<?= htmlspecialchars($sp['bild_url']) ?>"></td>
|
|
|
<td class="col-akt">
|
|
|
- <button type="submit" name="update_game" class="btn btn-save" title="Speichern">💾</button>
|
|
|
- <button type="submit" name="delete_game" class="btn btn-del" onclick="return confirm('Wirklich löschen?')" title="Löschen">🗑</button>
|
|
|
+ <button type="submit" name="update_game" class="btn btn-save">💾</button>
|
|
|
+ <button type="submit" name="delete_game" class="btn btn-del" onclick="return confirm('Löschen?')">🗑</button>
|
|
|
</td>
|
|
|
</form>
|
|
|
</tr>
|
|
|
@@ -219,33 +231,32 @@ $typen = $pdo->query("SELECT * FROM game_typen ORDER BY bezeichnung ASC")->fetch
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
-
|
|
|
- <div id="page-bottom" style="padding-bottom: 60px; text-align: center; color: #999; font-size: 0.85em;">
|
|
|
- — Ende der Sammlungs-Liste —
|
|
|
- </div>
|
|
|
</div>
|
|
|
|
|
|
-<button id="scrollToTop" onclick="window.scrollTo(0,0);" title="Nach oben">▲</button>
|
|
|
+<button id="scrollToTop" onclick="window.scrollTo(0,0);">▲</button>
|
|
|
|
|
|
<script>
|
|
|
- // Erfolgsmeldung sanft ausblenden
|
|
|
+ // THEME LOGIK
|
|
|
+ function toggleTheme() {
|
|
|
+ const isDark = document.documentElement.classList.toggle('dark-theme');
|
|
|
+ localStorage.setItem('theme', isDark ? 'dark' : 'light');
|
|
|
+ document.getElementById('theme-icon').innerText = isDark ? '☀️' : '🌙';
|
|
|
+ }
|
|
|
+
|
|
|
+ // Icon beim Laden anpassen
|
|
|
+ if (localStorage.getItem('theme') === 'dark') {
|
|
|
+ document.getElementById('theme-icon').innerText = '☀️';
|
|
|
+ }
|
|
|
+
|
|
|
+ // Alerts ausblenden
|
|
|
setTimeout(() => {
|
|
|
const msg = document.getElementById('msg-box');
|
|
|
- if(msg) {
|
|
|
- msg.style.transition = 'opacity 0.5s';
|
|
|
- msg.style.opacity = '0';
|
|
|
- setTimeout(() => { msg.style.display = 'none'; }, 500);
|
|
|
- }
|
|
|
+ if(msg) { msg.style.transition = 'opacity 0.5s'; msg.style.opacity = '0'; }
|
|
|
}, 3000);
|
|
|
|
|
|
- // Floating Button Logik
|
|
|
+ // Scroll Button
|
|
|
window.onscroll = function() {
|
|
|
- const btn = document.getElementById("scrollToTop");
|
|
|
- if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
|
|
|
- btn.style.display = "block";
|
|
|
- } else {
|
|
|
- btn.style.display = "none";
|
|
|
- }
|
|
|
+ document.getElementById("scrollToTop").style.display = (window.scrollY > 300) ? "block" : "none";
|
|
|
};
|
|
|
</script>
|
|
|
|
erdo