:root {--color-dark-brown: #2A2522;--color-burgundy: #591C1C;--color-deep-red: #732424;--color-gold: #C4A484;--color-parchment: #F5E6D3; --color-shadow: rgba(0, 0, 0, 0.4);--color-highlight: rgba(196, 164, 132, 0.1);--color-border: #463835;--gradient-dark: linear-gradient(to bottom, #2A2522, #1A1512);--gradient-header: linear-gradient(to bottom, #732424, #591C1C);--color-text-primary: #F5E6D3;--color-text-secondary: #C4A484;--color-text-muted: #8B7355;}body {background: var(--color-dark-brown);color: var(--color-text-primary);font-family: 'Times New Roman', serif;}.header {background: var(--gradient-header);border-bottom: 1px solid var(--color-gold);}.card {background: var(--gradient-dark);border: 1px solid var(--color-border);box-shadow: 0 4px 8px var(--color-shadow);}.card-header {background: var(--color-burgundy);color: var(--color-gold);}a {color: var(--color-text-secondary);text-decoration: none;transition: color 0.3s ease;}a:hover {color: var(--color-gold);}.btn {background: var(--color-burgundy);color: var(--color-text-primary);border: 1px solid var(--color-gold);transition: all 0.3s ease;}.btn:hover {background: var(--color-deep-red);box-shadow: 0 0 10px var(--color-highlight);}.input {background: var(--gradient-dark);border: 1px solid var(--color-border);color: var(--color-text-primary);}.input:focus {border-color: var(--color-gold);box-shadow: 0 0 5px var(--color-highlight);}.table {background: var(--gradient-dark);border: 1px solid var(--color-border);}.table th {background: var(--color-burgundy);color: var(--color-gold);}.table td {border-bottom: 1px solid var(--color-border);}::-webkit-scrollbar {width: 10px;background: var(--color-dark-brown);}::-webkit-scrollbar-thumb {background: var(--color-burgundy);border-radius: 5px;}::-webkit-scrollbar-thumb:hover {background: var(--color-deep-red);}.magic-border {position: relative;overflow: hidden;}.magic-border::after {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg,transparent,var(--color-highlight),transparent);animation: shine 2s infinite;}@keyframes shine {to {left: 100%;}}h1, h2, h3, h4, h5, h6 {color: var(--color-gold);font-family: 'Times New Roman', serif;text-shadow: 1px 1px 2px var(--color-shadow);}<?phpsession_start();require_once 'includes/db.php';// Wenn bereits eingeloggt, zum Dashboard weiterleitenif (isset($_SESSION['user_id'])) {header('Location: dashboard.php');exit;}// Function to validate code formatfunction validateCode($code) {return preg_match('/^[a-zA-Z0-9]+$/', $code);}// Function to determine code type based on lengthfunction getCodeType($code) {$length = strlen($code);if ($length === 34) return 'admin';if ($length === 23) return 'teacher';if ($length === 13) return 'user';return null;}// Scoreboard-Daten laden$scoreboardQuery = "SELECT name, points,RANK() OVER (ORDER BY points DESC) as rankFROM users WHERE type = 'user' AND status = 'aktiv'ORDER BY points DESC LIMIT 10";$scoreboard = $pdo->query($scoreboardQuery)->fetchAll();$error = '';if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['code'])) {$code = trim($_POST['code']);if (!validateCode($code)) {$error = 'Der Code darf nur Buchstaben und Zahlen enthalten.';} else {$codeType = getCodeType($code);if (!$codeType) {$error = 'Ungültiger Code-Format.';} else {$stmt = $pdo->prepare("SELECT * FROM users WHERE code = ? AND status = 'aktiv'");$stmt->execute([$code]);$user = $stmt->fetch();if ($user) {$_SESSION['user_id'] = $user['id'];$_SESSION['user_type'] = $user['type'];$_SESSION['user_name'] = $user['name'];header('Location: dashboard.php');exit;} else {$error = 'Ungültiger Code oder Account gesperrt.';}}}}?><!DOCTYPE html><html lang="de"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Studentenverzeichnis</title><link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"><style>.medal {display: inline-block;width: 24px;height: 24px;margin-right: 8px;}@keyframes shine {0% { transform: scale(1); filter: brightness(100%); }50% { transform: scale(1.05); filter: brightness(120%); }100% { transform: scale(1); filter: brightness(100%); }}.rank-1 .medal { animation: shine 2s infinite; }.rank-2 .medal { animation: shine 2.5s infinite; }.rank-3 .medal { animation: shine 3s infinite; }.scoreboard-row {transition: all 0.3s ease;}.scoreboard-row:hover {transform: translateX(10px);background-color: rgba(255, 255, 255, 0.1);}</style></head><body class="bg-gradient-to-br from-blue-900 via-blue-800 to-indigo-900 min-h-screen"><div class="container mx-auto px-4 py-12"><div class="max-w-md mx-auto mb-16"><!-- Login Box --><div class="bg-white/10 backdrop-blur-md rounded-xl shadow-2xl p-8 border border-white/20"><h1 class="text-3xl font-bold text-center mb-8 text-white">Studentenverzeichnis</h1><?php if ($error): ?><div class="bg-red-500/20 backdrop-blur border border-red-500/50 text-red-100 px-4 py-3 rounded mb-4 flex items-center"><svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/></svg><?php echo htmlspecialchars($error); ?></div><?php endif; ?><form method="POST" class="space-y-6"><div><inputtype="text"id="code"name="code"class="w-full px-4 py-3 rounded-lg bg-white/5 border border-white/10 text-white placeholder-white/50 focus:border-blue-400 focus:ring-blue-400 font-mono"placeholder="Zugangscode eingeben"pattern="[A-Za-z0-9]+"requiredautocomplete="off"></div><button type="submit" class="w-full py-3 px-4 rounded-lg bg-blue-500 hover:bg-blue-600 text-white font-medium transition-colors duration-200 transform hover:scale-105">Einloggen</button></form></div></div><!-- Ersetze den Scoreboard-Teil im HTML mit: --><!-- Scoreboard --><div class="max-w-2xl mx-auto"><h2 class="text-2xl font-bold text-center text-white mb-6">Top 10 Studenten</h2><div class="bg-white/10 backdrop-blur-md rounded-xl shadow-2xl border border-white/20 overflow-hidden"><div class="divide-y divide-white/10"><?php foreach ($scoreboard as $index => $student): ?><div class="scoreboard-row p-4 flex items-center justify-between hover:bg-white/5"><div class="flex items-center flex-1"><span class="w-12 text-xl text-center"><?php if ($student['points'] < 0) {echo "😢";} else {switch ($student['rank']) {case 1:echo "🥇";break;case 2:echo "🥈";break;case 3:echo "🥉";break;case 4:echo "4️⃣";break;case 5:echo "5️⃣";break;case 6:echo "6️⃣";break;case 7:echo "7️⃣";break;case 8:echo "8️⃣";break;case 9:echo "9️⃣";break;case 10:echo "🔟";break;default:echo "<span class='text-white/50'>" . $student['rank'] . ".</span>";}}?></span><span class="ml-2 text-white text-lg font-medium"><?php echo htmlspecialchars($student['name']); ?></span></div><div class="text-right"><span class="inline-flex items-center px-4 py-1.5 rounded-full text-sm font-medium<?php echo $student['points'] >= 0 ? 'bg-green-500/20 text-green-100' : 'bg-red-900 text-red-100 border border-red-700'; ?>"><?php echo $student['points']; ?> Punkte</span></div></div><?php endforeach; ?><?php if (empty($scoreboard)): ?><div class="p-8 text-center text-white/50">Noch keine Einträge vorhanden</div><?php endif; ?></div></div></div></div></body></html>.login-container {background: linear-gradient(to bottom right, var(--color-primary), var(--color-background));border: 1px solid var(--color-overlay-light);box-shadow: 0 4px 30px var(--color-overlay-dark);}.login-input {background: var(--color-overlay-light);border: 1px solid var(--color-overlay-light);color: var(--color-text);}.login-button {background: var(--color-secondary);color: var(--color-text);transition: all 0.3s ease;}.login-button:hover {background: var(--color-accent);}.scoreboard-container {background: linear-gradient(135deg,var(--color-primary) 0%,var(--color-background) 100%);border: 1px solid var(--color-overlay-light);}.scoreboard-row {border-bottom: 1px solid var(--color-overlay-light);transition: all 0.3s ease;}.scoreboard-row:hover {background: var(--color-overlay-light);}.points-positive {background: var(--color-success);color: var(--color-text);}.points-negative {background: var(--color-error);color: var(--color-text);border: 1px solid rgba(139, 0, 0, 0.5);}.rank-medal {font-size: 1.5rem;margin-right: 1rem;}