Design optimiert

gespielte_spiele.php

@@ -2,6 +2,7 @@
 include 'db_config.php'; 
 
 // --- 1. DATEN LADEN ---
+// Alle Spieler (Teams) für den Filter laden
 $allTeams = $pdo->query("SELECT * FROM spieler ORDER BY name ASC")->fetchAll();
 
 // Filter-Logik
@@ -16,6 +17,7 @@ if ($teamFilter > 0) {
     $sql .= " WHERE s.id = $teamFilter";
 }
 
+// Sortierung nach Titel
 $sql .= " ORDER BY sp.titel ASC";
 $stmt = $pdo->query($sql);
 $playedGames = $stmt->fetchAll();
@@ -28,15 +30,16 @@ $playedGames = $stmt->fetchAll();
     <style>
         :root { 
             --bg: #f4f7f6; --card: #ffffff; --text: #333; --border: #ddd; --accent: #e67e22;
+            --muted: #888;
         }
         .dark-theme { 
-            --bg: #121212cf; --card: #1e1e1e; --text: #ffffff; --border: #333; 
+            --bg: #121212cf; --card: #1e1e1e; --text: #ffffff; --border: #333; --muted: #aaa;
         }
 
         body { font-family: 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); padding: 20px; transition: 0.3s; }
         .container { max-width: 1200px; margin: 0 auto; }
 
-        /* HEADER ANALOG ZU ADMIN/INDEX */
+        /* HEADER */
         header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; border-bottom: 2px solid var(--accent); padding-bottom: 10px; }
         h1 { color: var(--accent); margin: 0; font-size: 1.8rem; }
         
@@ -45,7 +48,7 @@ $playedGames = $stmt->fetchAll();
 
         /* FILTER BAR */
         .filter-bar { background: var(--card); padding: 15px; border-radius: 12px; border: 1px solid var(--border); margin-bottom: 25px; display: flex; align-items: center; gap: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
-        select { padding: 8px 15px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); cursor: pointer; width: auto; }
+        select { padding: 8px 15px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); cursor: pointer; }
 
         /* GRID & CARDS */
         .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
@@ -53,9 +56,15 @@ $playedGames = $stmt->fetchAll();
         .item img { width: 100%; height: 180px; object-fit: cover; background: #2a2a2a; border-bottom: 1px solid var(--border); }
         
         .stats { padding: 15px; }
-        .team-badge { font-size: 0.7em; background: var(--accent); color: white; padding: 2px 10px; border-radius: 10px; margin-bottom: 8px; display: inline-block; text-transform: uppercase; letter-spacing: 0.5px; }
-        .game-title { font-weight: bold; display: block; margin-bottom: 10px; font-size: 1.1em; min-height: 2.2em; display: flex; align-items: center; justify-content: center; }
         
+        /* TYPOGRAFIE & REIHENFOLGE */
+        .game-title { font-weight: bold; display: block; margin-bottom: 12px; font-size: 1.1em; min-height: 2.2em; display: flex; align-items: center; justify-content: center; color: var(--text); line-height: 1.2; }
+        
+        .team-info-container { margin-bottom: 15px; }
+        .team-label { font-size: 0.7em; color: var(--muted); display: block; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; }
+        .team-name-text { font-size: 0.9em; color: var(--text); opacity: 0.9; font-weight: 500; }
+        
+        /* ERGEBNIS ZEILE */
         .result-row { display: flex; justify-content: space-around; font-size: 0.85em; border-top: 1px solid var(--border); padding-top: 10px; margin-top: 5px; }
         .res-item span { display: block; opacity: 0.6; font-size: 0.75em; margin-bottom: 2px; }
         .res-item b { color: var(--accent); font-size: 1em; }
@@ -99,9 +108,13 @@ $playedGames = $stmt->fetchAll();
             <div class="item">
                 <img src="<?= htmlspecialchars($game['bild_url']) ?>" onerror="this.src='https://via.placeholder.com/240x180?text=EXIT+Spiel'">
                 <div class="stats">
-                    <span class="team-badge"><?= htmlspecialchars($game['team_name']) ?></span>
                     <span class="game-title"><?= htmlspecialchars($game['titel']) ?></span>
                     
+                    <div class="team-info-container">
+                        <span class="team-label">Gelöst von</span>
+                        <span class="team-name-text"><?= htmlspecialchars($game['team_name']) ?></span>
+                    </div>
+                    
                     <div class="result-row">
                         <div class="res-item"><span>Zeit</span><b><?= $game['zeit'] ?> Min.</b></div>
                         <div class="res-item"><span>Hilfe</span><b><?= $game['hilfe'] ?></b></div>

gespielte_spiele.php_bak

@@ -0,0 +1,140 @@
+<?php
+include 'db_config.php'; 
+
+// --- 1. DATEN LADEN ---
+$allTeams = $pdo->query("SELECT * FROM spieler ORDER BY name ASC")->fetchAll();
+
+// Filter-Logik
+$teamFilter = isset($_GET['team_id']) ? (int)$_GET['team_id'] : 0;
+
+$sql = "SELECT sp.*, sc.zeit, sc.hilfe, sc.sterne, s.name as team_name 
+        FROM spiele sp
+        JOIN scores sc ON sp.id = sc.spiel_id
+        JOIN spieler s ON sc.spieler_id = s.id";
+
+if ($teamFilter > 0) {
+    $sql .= " WHERE s.id = $teamFilter";
+}
+
+$sql .= " ORDER BY sp.titel ASC";
+$stmt = $pdo->query($sql);
+$playedGames = $stmt->fetchAll();
+?>
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <title>EXIT - Gelöste Abenteuer</title>
+    <style>
+        :root { 
+            --bg: #f4f7f6; --card: #ffffff; --text: #333; --border: #ddd; --accent: #e67e22;
+            --muted: #888;
+        }
+        .dark-theme { 
+            --bg: #121212cf; --card: #1e1e1e; --text: #ffffff; --border: #333; --muted: #aaa;
+        }
+
+        body { font-family: 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); padding: 20px; transition: 0.3s; }
+        .container { max-width: 1200px; margin: 0 auto; }
+
+        header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; border-bottom: 2px solid var(--accent); padding-bottom: 10px; }
+        h1 { color: var(--accent); margin: 0; font-size: 1.8rem; }
+        
+        .btn-nav { background: var(--accent); color: white; text-decoration: none; padding: 10px 15px; border-radius: 8px; font-weight: bold; font-size: 0.9em; display: inline-block; border: none; cursor: pointer; }
+        .theme-toggle { background: none; border: none; font-size: 1.5rem; cursor: pointer; padding: 0; line-height: 1; }
+
+        .filter-bar { background: var(--card); padding: 15px; border-radius: 12px; border: 1px solid var(--border); margin-bottom: 25px; display: flex; align-items: center; gap: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
+        select { padding: 8px 15px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); cursor: pointer; }
+
+        .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
+        .item { background: var(--card); border-radius: 12px; text-align: center; border: 1px solid var(--border); box-shadow: 0 4px 15px rgba(0,0,0,0.1); overflow: hidden; }
+        .item img { width: 100%; height: 180px; object-fit: cover; background: #2a2a2a; border-bottom: 1px solid var(--border); }
+        
+        .stats { padding: 15px; }
+        
+        .game-title { font-weight: bold; display: block; margin-bottom: 12px; font-size: 1.1em; min-height: 2.2em; display: flex; align-items: center; justify-content: center; color: var(--text); line-height: 1.2; }
+        
+        /* TEAMNAMEN DEZENTER GESTALTET */
+        .team-info-container { margin-bottom: 15px; }
+        .team-label { font-size: 0.7em; color: var(--muted); display: block; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; }
+        .team-name-text { font-size: 0.9em; color: var(--text); opacity: 0.9; font-weight: 500; }
+        
+        .result-row { display: flex; justify-content: space-around; font-size: 0.85em; border-top: 1px solid var(--border); padding-top: 10px; margin-top: 5px; }
+        .res-item span { display: block; opacity: 0.6; font-size: 0.75em; margin-bottom: 2px; }
+        .res-item b { color: var(--accent); font-size: 1em; }
+
+        @media (max-width: 600px) {
+            header { flex-direction: column; gap: 15px; text-align: center; }
+            .filter-bar { flex-direction: column; align-items: stretch; }
+        }
+    </style>
+    <script>
+        if (localStorage.getItem('theme') === 'dark') document.documentElement.classList.add('dark-theme');
+    </script>
+</head>
+<body>
+
+<div class="container">
+    <header>
+        <h1>📂 Gelöste Abenteuer</h1>
+        <div style="display: flex; align-items: center; gap: 15px;">
+            <button onclick="toggleTheme()" class="theme-toggle" id="theme-icon">🌙</button>
+            <a href="index.php" class="btn-nav">Dashboard</a>
+        </div>
+    </header>
+
+    <div class="filter-bar">
+        <strong>Filter nach Team:</strong>
+        <form id="filterForm" method="GET">
+            <select name="team_id" onchange="this.form.submit()">
+                <option value="0">-- Alle Teams --</option>
+                <?php foreach ($allTeams as $t): ?>
+                    <option value="<?= $t['id'] ?>" <?= $teamFilter == $t['id'] ? 'selected' : '' ?>>
+                        <?= htmlspecialchars($t['name']) ?>
+                    </option>
+                <?php endforeach; ?>
+            </select>
+        </form>
+    </div>
+
+    <div class="grid">
+        <?php foreach ($playedGames as $game): ?>
+            <div class="item">
+                <img src="<?= htmlspecialchars($game['bild_url']) ?>" onerror="this.src='https://via.placeholder.com/240x180?text=EXIT+Spiel'">
+                <div class="stats">
+                    <span class="game-title"><?= htmlspecialchars($game['titel']) ?></span>
+                    
+                    <div class="team-info-container">
+                        <span class="team-label">Gespielt von</span>
+                        <span class="team-name-text"><?= htmlspecialchars($game['team_name']) ?></span>
+                    </div>
+                    
+                    <div class="result-row">
+                        <div class="res-item"><span>Zeit</span><b><?= $game['zeit'] ?> Min.</b></div>
+                        <div class="res-item"><span>Hilfe</span><b><?= $game['hilfe'] ?></b></div>
+                        <div class="res-item"><span>Sterne</span><b>⭐ <?= $game['sterne'] ?></b></div>
+                    </div>
+                </div>
+            </div>
+        <?php endforeach; ?>
+    </div>
+
+    <?php if (empty($playedGames)): ?>
+        <p style="text-align: center; margin-top: 50px; opacity: 0.5;">Hier wurden noch keine Abenteuer gelöst.</p>
+    <?php endif; ?>
+</div>
+
+<script>
+    const themeIcon = document.getElementById('theme-icon');
+    function toggleTheme() {
+        const isDark = document.documentElement.classList.toggle('dark-theme');
+        localStorage.setItem('theme', isDark ? 'dark' : 'light');
+        themeIcon.innerText = isDark ? '☀️' : '🌙';
+    }
+
+    if (localStorage.getItem('theme') === 'dark') {
+        themeIcon.innerText = '☀️';
+    }
+</script>
+</body>
+</html>