Design wieder auf hell geändert

admin.php

@@ -24,9 +24,9 @@ if ($show_login):
     <meta charset="UTF-8">
     <title>Admin Login</title>
     <style>
-        body { font-family: 'Segoe UI', sans-serif; background: #121212; color: white; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; }
-        .login-box { background: #1e1e1e; padding: 40px; border-radius: 12px; border: 1px solid #e67e22; text-align: center; width: 300px; }
-        input { width: 100%; padding: 12px; margin: 15px 0; border-radius: 5px; border: 1px solid #444; background: #2a2a2a; color: white; box-sizing: border-box; }
+        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; }
         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>
@@ -89,45 +89,54 @@ $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: #121212; color: #e0e0e0; padding: 20px; }
-        .container { max-width: 1400px; margin: 0 auto; }
-        .alert { padding: 15px; border-radius: 8px; margin-bottom: 20px; font-weight: bold; text-align: center; }
-        .alert-success { background: #27ae60; color: white; }
-        .alert-error { background: #e74c3c; color: white; }
+        body { font-family: 'Segoe UI', sans-serif; background: #f4f7f6; color: #333; padding: 20px; scroll-behavior: smooth; }
+        .container { max-width: 1400px; margin: 0 auto; position: relative; }
         
-        .admin-card { background: #1e1e1e; padding: 20px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); margin-bottom: 30px; border: 1px solid #333; }
-        table { width: 100%; border-collapse: collapse; margin-top: 20px; table-layout: fixed; }
-        th, td { padding: 10px; border-bottom: 1px solid #333; text-align: left; overflow: hidden; }
-        th { color: #e67e22; font-size: 0.9em; text-transform: uppercase; }
-        input, select { padding: 8px; border: 1px solid #444; border-radius: 6px; width: 100%; box-sizing: border-box; background: #2a2a2a; color: white; font-size: 0.95em; }
+        /* Alerts */
+        .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; }
+        
+        .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 Tabelle */
         .col-img { width: 60px; }
-        .col-titel { width: auto; } /* Nimmt den Rest */
-        .col-ean { width: 140px; }
+        .col-titel { width: auto; } 
+        .col-ean { width: 130px; }
         .col-typ { width: 160px; }
         .col-lvl { width: 150px; }
-        .col-url { width: 200px; }
+        .col-url { width: 180px; }
         .col-akt { width: 100px; text-align: center; }
 
-        .lvl-unknown { background: #d35400 !important; color: white; }
-        .btn { padding: 10px 15px; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; color: white; text-decoration: none; display: inline-block; }
+        .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-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: #333; display: block; margin: 0 auto; }
+        .img-preview { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; background: #eee; display: block; margin: 0 auto; border: 1px solid #ddd; }
     </style>
 </head>
-<body>
+<body id="top">
 
 <div class="container">
     <div style="display:flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
-        <h1>🛠 Stammdaten Verwaltung</h1>
+        <h1 style="color: #2c3e50;">🛠 Stammdaten Verwaltung</h1>
         <div>
             <a href="index.php" class="btn btn-nav">Dashboard</a>
-            <a href="admin.php?logout=1" class="btn btn-del">Logout</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>
 
@@ -136,7 +145,7 @@ $typen = $pdo->query("SELECT * FROM game_typen ORDER BY bezeichnung ASC")->fetch
     <?php endif; ?>
 
     <div class="admin-card">
-        <h3>🆕 Neues Spiel hinzufügen</h3>
+        <h3 style="margin-top:0; color: #2c3e50;">🆕 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>
@@ -153,14 +162,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">
+                <input type="text" name="new_bild_url" placeholder="Bild-URL (Optional)">
             </div>
             <button type="submit" name="add_new_game" class="btn btn-add">Spiel in Datenbank speichern</button>
         </form>
     </div>
 
-    <div class="admin-card">
-        <h3>📋 Aktueller Bestand</h3>
+    <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>
             <thead>
                 <tr>
@@ -180,7 +189,7 @@ $typen = $pdo->query("SELECT * FROM game_typen ORDER BY bezeichnung ASC")->fetch
                 <tr>
                     <form method="POST">
                         <input type="hidden" name="spiel_id" value="<?= $sp['id'] ?>">
-                        <td class="col-img"><img src="<?= htmlspecialchars($sp['bild_url']) ?>" class="img-preview" alt="Cover"></td>
+                        <td class="col-img"><img src="<?= htmlspecialchars($sp['bild_url']) ?>" class="img-preview" alt="Cover" onerror="this.src='https://via.placeholder.com/40?text=?';"></td>
                         <td class="col-titel"><input type="text" name="titel" value="<?= htmlspecialchars($sp['titel']) ?>"></td>
                         <td class="col-ean"><input type="text" name="ean" value="<?= htmlspecialchars($sp['ean']) ?>"></td>
                         <td class="col-typ">
@@ -210,13 +219,34 @@ $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>
+
 <script>
+    // Erfolgsmeldung sanft ausblenden
     setTimeout(() => { 
         const msg = document.getElementById('msg-box');
-        if(msg) msg.style.display = 'none';
+        if(msg) {
+            msg.style.transition = 'opacity 0.5s';
+            msg.style.opacity = '0';
+            setTimeout(() => { msg.style.display = 'none'; }, 500);
+        }
     }, 3000);
+
+    // Floating Button Logik
+    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";
+        }
+    };
 </script>
 
 </body>