Bestätigung der Score-Speicherung eingebaut, umleiteitung nach speichern gefixt

index.php

@@ -6,7 +6,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['add_player'])) {
     $sql = "INSERT IGNORE INTO spieler (name) VALUES (?)";
     $stmt = $pdo->prepare($sql);
     $stmt->execute([$_POST['neuer_spieler_name']]);
-    header("Location: " . $_SERVER['PHP_SELF']);
+    header("Location: index.php?success=player");
     exit;
 }
 
@@ -21,7 +21,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['add_score'])) {
         (int)$_POST['hilfe'], 
         (int)$_POST['sterne']
     ]);
-    header("Location: " . $_SERVER['PHP_SELF']);
+    header("Location: index.php?success=score");
     exit;
 }
 
@@ -50,7 +50,7 @@ $allScores = $pdo->query($sqlScores)->fetchAll();
         /* THEME VARIABLEN */
         :root { 
             --bg: #f4f7f6; --card: #ffffff; --text: #333; --border: #ddd; --accent: #e67e22;
-            --input-bg: #fff; --footer-bg: #f1f1f1;
+            --input-bg: #fff; --footer-bg: #f1f1f1; --success: #27ae60;
         }
         .dark-theme { 
             --bg: #121212cf; --card: #1e1e1e; --text: #e0e0e0; --border: #333;
@@ -60,49 +60,23 @@ $allScores = $pdo->query($sqlScores)->fetchAll();
         body { font-family: 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); margin: 0; padding-bottom: 120px; transition: 0.3s; }
         .container { max-width: 1200px; margin: auto; padding: 20px; }
         
-        header { 
-            display: flex; 
-            justify-content: space-between; 
-            align-items: center; 
-            margin-bottom: 25px; 
-            border-bottom: 1px solid var(--border);
-            padding-bottom: 15px;
+        /* Bestätigungs-Banner */
+        .alert { 
+            background: var(--success); color: white; padding: 15px; border-radius: 8px; 
+            margin-bottom: 20px; text-align: center; font-weight: bold;
+            animation: fadeOut 1s forwards; animation-delay: 3s;
         }
+        @keyframes fadeOut { from {opacity: 1;} to {opacity: 0; visibility: hidden;} }
+
+        header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; border-bottom: 1px solid var(--border); padding-bottom: 15px; }
         h1 { color: var(--accent); margin: 0; font-size: 1.6em; }
 
-        .theme-toggle { 
-            background: var(--card); 
-            border: 1px solid var(--border); 
-            color: var(--text); 
-            width: 42px; 
-            height: 34px; 
-            padding: 0; 
-            border-radius: 10px; 
-            cursor: pointer; 
-            font-size: 1.1rem; 
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: 0.3s;
-            flex-shrink: 0;
-        }
-        .theme-toggle:hover { border-color: var(--accent); }
+        .theme-toggle { background: var(--card); border: 1px solid var(--border); color: var(--text); width: 42px; height: 34px; border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.3s; }
 
-        /* Swiper & Modern Progress Bar */
         .swiper { width: 100%; padding-top: 10px; padding-bottom: 40px; }
         .swiper-slide { width: 320px; height: auto; }
-        
-        /* Stylen des Fortschrittsbalkens */
-        .swiper-pagination-progressbar {
-            background: var(--border) !important;
-            height: 4px !important;
-            border-radius: 2px;
-            top: 0 !important; /* Balken sitzt oben am Swiper */
-        }
-        .swiper-pagination-progressbar-fill {
-            background: var(--accent) !important;
-            border-radius: 2px;
-        }
+        .swiper-pagination-progressbar { background: var(--border) !important; height: 4px !important; top: 0 !important; }
+        .swiper-pagination-progressbar-fill { background: var(--accent) !important; }
 
         .card { background: var(--card); border-radius: 12px; border: 1px solid var(--border); overflow: hidden; height: 100%; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
         .card img { width: 100%; height: 180px; object-fit: cover; opacity: 0.9; }
@@ -124,16 +98,18 @@ $allScores = $pdo->query($sqlScores)->fetchAll();
         .form-section, .info-section { background: var(--card); padding: 20px; border-radius: 12px; border: 1px solid var(--border); }
         .highlight-border { border-color: var(--accent); }
         
-        input, select { width: 100%; padding: 10px; background: var(--input-bg); border: 1px solid var(--border); color: var(--text); border-radius: 5px; box-sizing: border-box; margin-bottom: 10px; }
+        /* Archiv-Link Styling */
+        .info-section a { color: var(--accent); text-decoration: none; display: block; padding: 10px; border: 1px dashed var(--border); border-radius: 8px; text-align: center; transition: 0.2s; }
+        .info-section a:hover { background: var(--bg); border-color: var(--accent); }
+
+        input, select { width: 100%; padding: 10px; background: var(--input-bg); border: 1px solid var(--border); color: var(--text); border-radius: 5px; margin-bottom: 10px; box-sizing: border-box; }
         button { background: var(--accent); color: white; border: none; padding: 12px; border-radius: 5px; cursor: pointer; font-weight: bold; width: 100%; }
 
         .footer-nav { position: fixed; bottom: 0; left: 0; width: 100%; background: var(--footer-bg); border-top: 2px solid var(--accent); padding: 15px 0; display: flex; justify-content: center; gap: 20px; z-index: 1000; flex-wrap: wrap; }
         .footer-nav a { color: var(--accent); text-decoration: none; font-weight: bold; font-size: 0.8em; padding: 5px 10px; border: 1px solid transparent; transition: 0.3s; }
         .footer-nav a:hover { border-color: var(--accent); border-radius: 5px; }
         
-        .info-section a { color: var(--accent); text-decoration: none; display: block; padding: 10px; border: 1px dashed var(--border); border-radius: 8px; text-align: center; }
-
-        #playerModal { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--card); padding: 30px; border-radius: 12px; border: 1px solid var(--accent); z-index: 2000; box-shadow: 0 0 50px rgba(0,0,0,0.5); color: var(--text); }
+        #playerModal { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--card); padding: 30px; border-radius: 12px; border: 1px solid var(--accent); z-index: 2000; color: var(--text); box-shadow: 0 0 50px rgba(0,0,0,0.5); }
         .overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 1500; }
     </style>
     <script>
@@ -143,6 +119,12 @@ $allScores = $pdo->query($sqlScores)->fetchAll();
 <body>
 
 <div class="container">
+    <?php if (isset($_GET['success'])): ?>
+        <div class="alert" id="success-alert">
+            <?= $_GET['success'] === 'score' ? '✅ Score erfolgreich gespeichert!' : '👤 Neuer Spieler angelegt!' ?>
+        </div>
+    <?php endif; ?>
+
     <header>
         <h1>🏆 EXIT Highscores</h1>
         <button onclick="toggleTheme()" class="theme-toggle" id="theme-icon">🌙</button>
@@ -150,17 +132,15 @@ $allScores = $pdo->query($sqlScores)->fetchAll();
 
     <div class="swiper mySwiper">
         <div class="swiper-pagination"></div>
-
         <div class="swiper-wrapper">
             <?php foreach ($exitGames as $game): 
                 $lvl_class = (empty($game['level']) || strtolower($game['level']) == 'unknown') ? 'unknown' : $game['level'];
-                $lvl_display = ($lvl_class == 'unknown') ? 'Unbekannt' : $game['level'];
             ?>
                 <div class="swiper-slide">
                     <div class="card">
                         <img src="<?= htmlspecialchars($game['bild_url']) ?>" alt="Cover" onerror="this.src='https://via.placeholder.com/320x180?text=Kein+Bild'">
                         <div class="content">
-                            <span class="badge level-<?= $lvl_class ?>"><?= htmlspecialchars($lvl_display) ?></span>
+                            <span class="badge level-<?= $lvl_class ?>"><?= htmlspecialchars($game['level'] ?: 'Unbekannt') ?></span>
                             <h2><?= htmlspecialchars($game['titel']) ?></h2>
                             <table class="stats">
                                 <?php 
@@ -186,13 +166,13 @@ $allScores = $pdo->query($sqlScores)->fetchAll();
     <div class="bottom-section">
         <div class="info-section">
             <h2>📜 Archiv</h2>
-            <p style="font-size: 0.8em; opacity: 0.6;">Bereits gelöste Abenteuer einsehen.</p>
+            <p style="font-size: 0.8em; opacity: 0.6; margin-bottom: 15px;">Bereits gelöste Abenteuer einsehen.</p>
             <a href="gespielte_spiele.php">📂 Übersicht gespielte Spiele</a>
         </div>
 
         <div class="form-section highlight-border">
             <h2>🎯 Ergebnis eintragen</h2>
-            <form method="POST">
+            <form method="POST" action="index.php">
                 <select name="spiel_id" required>
                     <?php foreach ($exitGames as $game): ?>
                         <option value="<?= $game['id'] ?>"><?= htmlspecialchars($game['titel']) ?></option>
@@ -225,8 +205,8 @@ $allScores = $pdo->query($sqlScores)->fetchAll();
 <div class="overlay" id="overlay" onclick="toggleModal()"></div>
 <div id="playerModal">
     <h2>👤 Team/Spieler anlegen</h2>
-    <form method="POST">
-        <input type="text" name="neuer_spieler_name" placeholder="Name (z.B. Die Füchse)" required>
+    <form method="POST" action="index.php">
+        <input type="text" name="neuer_spieler_name" placeholder="Name" required>
         <button type="submit" name="add_player">Anlegen</button>
         <button type="button" onclick="toggleModal()" style="background: #666; margin-top: 10px;">Abbrechen</button>
     </form>
@@ -234,40 +214,25 @@ $allScores = $pdo->query($sqlScores)->fetchAll();
 
 <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
 <script>
-    // Theme-Logik
+    const themeIcon = document.getElementById('theme-icon');
     function toggleTheme() {
         const isDark = document.documentElement.classList.toggle('dark-theme');
         localStorage.setItem('theme', isDark ? 'dark' : 'light');
-        updateIcon(isDark);
+        themeIcon.innerText = isDark ? '☀️' : '🌙';
     }
+    if (localStorage.getItem('theme') === 'dark') themeIcon.innerText = '☀️';
 
-    function updateIcon(isDark) {
-        document.getElementById('theme-icon').innerText = isDark ? '☀️' : '🌙';
-    }
-
-    if (localStorage.getItem('theme') === 'dark') updateIcon(true);
-
-    // Swiper Initialisierung mit Progressbar
-    const swiper = new Swiper(".mySwiper", {
-        slidesPerView: "auto",
-        spaceBetween: 20,
-        centeredSlides: false,
-        grabCursor: true,
-        pagination: {
-            el: ".swiper-pagination",
-            type: "progressbar", // Die Lösung für das "Punkte"-Problem
-        },
+    new Swiper(".mySwiper", {
+        slidesPerView: "auto", spaceBetween: 20, grabCursor: true, pagination: { el: ".swiper-pagination", type: "progressbar" },
     });
 
-    // Modal
     function toggleModal() {
-        const modal = document.getElementById('playerModal');
-        const overlay = document.getElementById('overlay');
-        const isVisible = modal.style.display === 'block';
-        modal.style.display = isVisible ? 'none' : 'block';
-        overlay.style.display = isVisible ? 'none' : 'block';
+        const m = document.getElementById('playerModal');
+        const o = document.getElementById('overlay');
+        const vis = m.style.display === 'block';
+        m.style.display = vis ? 'none' : 'block';
+        o.style.display = vis ? 'none' : 'block';
     }
 </script>
-
 </body>
 </html>