From 3b85aa8cd47c96f88b7c5a62f6d3d02282e447c5 Mon Sep 17 00:00:00 2001
From: Carsten Graf <reptil1990@me.com>
Date: Wed, 3 Sep 2025 11:23:24 +0200
Subject: [PATCH] Progress

---
 public/index.html | 985 +++++++++++++++++++++++++++++++---------------
 routes/public.js  | 104 +++++
 2 files changed, 773 insertions(+), 316 deletions(-)
diff --git a/public/index.html b/public/index.html
index f3baf69..adaba13 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,11 +1,12 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="de">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Ninja Server - Times Display</title>
-    <script src="https://unpkg.com/@supabase/supabase-js@2"></script>
+    <title>Timer Leaderboard</title>
     <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
         * {
             margin: 0;
             padding: 0;
@@ -13,265 +14,504 @@
         }
 
         body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            font-family: 'Inter', sans-serif;
+            background: #0a0a0f;
+            color: #ffffff;
+            min-height: 100vh;
+            background-image: 
+                radial-gradient(circle at 20% 80%, #1a1a2e 0%, transparent 50%),
+                radial-gradient(circle at 80% 20%, #16213e 0%, transparent 50%),
+                radial-gradient(circle at 40% 40%, #0f3460 0%, transparent 50%);
+        }
+
+        .main-container {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 2rem;
             min-height: 100vh;
         }
 
-        .header {
-            background: rgba(255, 255, 255, 0.95);
-            backdrop-filter: blur(10px);
-            padding: 1rem 2rem;
-            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
+        .header-section {
+            text-align: center;
+            margin-bottom: 3rem;
         }
 
-        .logo h1 {
-            color: #333;
-            font-size: 1.8rem;
+        .main-title {
+            font-size: 4rem;
             font-weight: 700;
+            background: linear-gradient(135deg, #00d4ff, #ff6b35, #ffd700);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 0.5rem;
+            letter-spacing: -0.02em;
         }
 
-        .nav-buttons {
+        .tagline {
+            font-size: 1.2rem;
+            color: #8892b0;
+            font-weight: 300;
+        }
+
+        .dashboard-grid {
+            display: grid;
+            grid-template-columns: 1fr 2fr;
+            gap: 2rem;
+            margin-bottom: 2rem;
+        }
+
+        .control-panel {
+            background: rgba(15, 23, 42, 0.8);
+            border: 1px solid #1e293b;
+            border-radius: 1rem;
+            padding: 2rem;
+            backdrop-filter: blur(20px);
+        }
+
+        .control-group {
+            margin-bottom: 1.5rem;
+        }
+
+        .control-label {
+            display: block;
+            margin-bottom: 0.5rem;
+            font-size: 0.9rem;
+            font-weight: 500;
+            color: #cbd5e1;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+        }
+
+        .custom-select {
+            width: 100%;
+            padding: 1rem;
+            background: #1e293b;
+            border: 2px solid #334155;
+            border-radius: 0.75rem;
+            color: #ffffff;
+            font-size: 1rem;
+            font-family: inherit;
+            transition: all 0.2s ease;
+        }
+
+        .custom-select:focus {
+            outline: none;
+            border-color: #00d4ff;
+            box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1);
+        }
+
+        .refresh-btn {
+            width: 100%;
+            padding: 1rem;
+            background: linear-gradient(135deg, #00d4ff, #0891b2);
+            border: none;
+            border-radius: 0.75rem;
+            color: white;
+            font-weight: 600;
+            font-size: 1rem;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+        }
+
+        .refresh-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 25px rgba(0, 212, 255, 0.3);
+        }
+
+        .stats-panel {
+            background: rgba(15, 23, 42, 0.8);
+            border: 1px solid #1e293b;
+            border-radius: 1rem;
+            padding: 2rem;
+            backdrop-filter: blur(20px);
+        }
+
+        .stats-grid {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 1.5rem;
+            height: 100%;
+        }
+
+        .stat-card {
+            text-align: center;
+            padding: 1rem;
+            background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(255, 107, 53, 0.1));
+            border-radius: 0.75rem;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .stat-value {
+            font-size: 2.5rem;
+            font-weight: 700;
+            color: #00d4ff;
+            margin-bottom: 0.25rem;
+        }
+
+        .stat-label {
+            font-size: 0.8rem;
+            color: #8892b0;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+        }
+
+        .leaderboard-container {
+            background: rgba(15, 23, 42, 0.8);
+            border: 1px solid #1e293b;
+            border-radius: 1rem;
+            backdrop-filter: blur(20px);
+            overflow: hidden;
+        }
+
+        .leaderboard-header {
+            padding: 2rem;
+            background: linear-gradient(135deg, #1e293b, #0f172a);
+            border-bottom: 1px solid #334155;
+        }
+
+        .active-filters {
+            font-size: 1.5rem;
+            font-weight: 600;
+            color: #ffffff;
+            margin-bottom: 0.5rem;
+        }
+
+        .last-sync {
+            font-size: 0.9rem;
+            color: #64748b;
+        }
+
+        .rankings-list {
+            max-height: 600px;
+            overflow-y: auto;
+        }
+
+        .rankings-list::-webkit-scrollbar {
+            width: 6px;
+        }
+
+        .rankings-list::-webkit-scrollbar-track {
+            background: #1e293b;
+        }
+
+        .rankings-list::-webkit-scrollbar-thumb {
+            background: #475569;
+            border-radius: 3px;
+        }
+
+        .rank-entry {
+            display: grid;
+            grid-template-columns: 80px 1fr auto auto;
+            align-items: center;
+            padding: 1.5rem 2rem;
+            border-bottom: 1px solid rgba(51, 65, 85, 0.5);
+            transition: all 0.2s ease;
+            position: relative;
+        }
+
+        .rank-entry:hover {
+            background: rgba(0, 212, 255, 0.05);
+            border-left: 4px solid #00d4ff;
+        }
+
+        .rank-entry:last-child {
+            border-bottom: none;
+        }
+
+        .position {
+            font-size: 2rem;
+            font-weight: 700;
+            text-align: center;
+        }
+
+        .position.gold {
+            color: #ffd700;
+            text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
+        }
+
+        .position.silver {
+            color: #c0c0c0;
+            text-shadow: 0 0 20px rgba(192, 192, 192, 0.3);
+        }
+
+        .position.bronze {
+            color: #cd7f32;
+            text-shadow: 0 0 20px rgba(205, 127, 50, 0.3);
+        }
+
+        .player-data {
+            padding-left: 1rem;
+        }
+
+        .player-name {
+            font-size: 1.3rem;
+            font-weight: 600;
+            color: #ffffff;
+            margin-bottom: 0.25rem;
+        }
+
+        .player-meta {
+            font-size: 0.9rem;
+            color: #8892b0;
             display: flex;
             gap: 1rem;
             align-items: center;
         }
 
-        .btn {
-            padding: 0.5rem 1rem;
-            border: none;
-            border-radius: 8px;
-            font-size: 0.9rem;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            text-decoration: none;
-            display: inline-block;
+        .location-tag {
+            background: rgba(0, 212, 255, 0.2);
+            color: #00d4ff;
+            padding: 0.25rem 0.5rem;
+            border-radius: 0.25rem;
+            font-size: 0.8rem;
+            font-weight: 500;
         }
 
-        .btn-admin {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
+        .time-result {
+            font-family: 'Courier New', monospace;
+            font-size: 2.5rem;
+            font-weight: 700;
+            color: #ffffff;
+            text-align: right;
         }
 
-        .btn-admin:hover {
-            transform: translateY(-1px);
-            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
-        }
-
-        .btn-dashboard {
-            background: #28a745;
-            color: white;
-        }
-
-        .btn-dashboard:hover {
-            background: #218838;
-            transform: translateY(-1px);
-        }
-
-        .btn-logout {
-            background: #dc3545;
-            color: white;
-        }
-
-        .btn-logout:hover {
-            background: #c82333;
-            transform: translateY(-1px);
-        }
-
-        .container {
-            max-width: 1200px;
-            margin: 2rem auto;
-            padding: 0 2rem;
-        }
-
-        .welcome-card {
-            background: white;
-            border-radius: 20px;
-            padding: 2rem;
-            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
-            margin-bottom: 2rem;
-            text-align: center;
-        }
-
-        .welcome-card h2 {
-            color: #333;
+        .trophy-icon {
             font-size: 2rem;
+            margin-left: 1rem;
+        }
+
+        .empty-state {
+            text-align: center;
+            padding: 4rem 2rem;
+            color: #64748b;
+        }
+
+        .empty-icon {
+            font-size: 4rem;
             margin-bottom: 1rem;
         }
 
-        .welcome-card p {
-            color: #666;
-            font-size: 1.1rem;
+        .empty-title {
+            font-size: 1.5rem;
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+            color: #8892b0;
+        }
+
+        .empty-description {
+            font-size: 1rem;
             line-height: 1.6;
         }
 
-        .times-section {
-            background: white;
-            border-radius: 20px;
-            padding: 2rem;
-            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
-            margin-bottom: 2rem;
-        }
-
-        .times-section h3 {
-            color: #333;
-            font-size: 1.5rem;
-            margin-bottom: 1.5rem;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-        }
-
-        .times-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: 1.5rem;
-        }
-
-        .time-card {
-            background: #f8f9fa;
-            border-radius: 15px;
-            padding: 1.5rem;
-            border-left: 4px solid #667eea;
-            transition: transform 0.3s ease;
-        }
-
-        .time-card:hover {
-            transform: translateY(-2px);
-        }
-
-        .time-card h4 {
-            color: #333;
-            margin-bottom: 0.5rem;
-            font-size: 1.1rem;
-        }
-
-        .time-card p {
-            color: #666;
-            margin-bottom: 0.25rem;
-            font-size: 0.9rem;
-        }
-
-        .time-value {
-            font-size: 1.2rem;
-            font-weight: bold;
-            color: #667eea;
-        }
-
-        .loading {
-            text-align: center;
-            padding: 2rem;
-            color: #666;
-        }
-
-        .spinner {
-            border: 3px solid #f3f3f3;
-            border-top: 3px solid #667eea;
-            border-radius: 50%;
-            width: 40px;
-            height: 40px;
-            animation: spin 1s linear infinite;
-            margin: 0 auto 1rem;
-        }
-
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-
-        .no-data {
-            text-align: center;
-            padding: 2rem;
-            color: #666;
-            font-style: italic;
-        }
-
-        .user-info {
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            color: #666;
-            font-size: 0.9rem;
-        }
-
-        .user-avatar {
-            width: 30px;
-            height: 30px;
-            border-radius: 50%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            display: flex;
-            align-items: center;
-            justify-content: center;
+        /* Admin Login Button */
+        .admin-login-btn {
+            position: fixed;
+            top: 2rem;
+            right: 2rem;
+            padding: 0.75rem 1.5rem;
+            background: linear-gradient(135deg, #ff6b35, #f7931e);
+            border: none;
+            border-radius: 0.75rem;
             color: white;
-            font-weight: bold;
-            font-size: 0.8rem;
+            font-weight: 600;
+            font-size: 0.9rem;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            text-decoration: none;
+            display: inline-block;
+            z-index: 1000;
+        }
+
+        .admin-login-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 25px rgba(255, 107, 53, 0.3);
+        }
+
+        .dashboard-btn {
+            position: fixed;
+            top: 2rem;
+            right: 2rem;
+            padding: 0.75rem 1.5rem;
+            background: linear-gradient(135deg, #00d4ff, #0891b2);
+            border: none;
+            border-radius: 0.75rem;
+            color: white;
+            font-weight: 600;
+            font-size: 0.9rem;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            text-decoration: none;
+            display: inline-block;
+            z-index: 1000;
+        }
+
+        .dashboard-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 25px rgba(0, 212, 255, 0.3);
+        }
+
+        .logout-btn {
+            position: fixed;
+            top: 2rem;
+            right: 8rem;
+            padding: 0.75rem 1.5rem;
+            background: linear-gradient(135deg, #dc3545, #c82333);
+            border: none;
+            border-radius: 0.75rem;
+            color: white;
+            font-weight: 600;
+            font-size: 0.9rem;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            text-decoration: none;
+            display: inline-block;
+            z-index: 1000;
+        }
+
+        .logout-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 25px rgba(220, 53, 69, 0.3);
+        }
+
+        @media (max-width: 1024px) {
+            .dashboard-grid {
+                grid-template-columns: 1fr;
+            }
+
+            .stats-grid {
+                grid-template-columns: repeat(3, 1fr);
+            }
         }
 
         @media (max-width: 768px) {
-            .header {
+            .main-title {
+                font-size: 2.5rem;
+            }
+
+            .rank-entry {
+                grid-template-columns: 60px 1fr auto;
                 padding: 1rem;
-                flex-direction: column;
+                gap: 0.5rem;
+            }
+
+            .trophy-icon {
+                display: none;
+            }
+
+            .time-result {
+                font-size: 1.5rem;
+            }
+
+            .stats-grid {
+                grid-template-columns: 1fr;
                 gap: 1rem;
             }
 
-            .nav-buttons {
-                flex-wrap: wrap;
-                justify-content: center;
+            .player-meta {
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 0.5rem;
             }
 
-            .container {
-                padding: 0 1rem;
+            .admin-login-btn, .dashboard-btn, .logout-btn {
+                top: 1rem;
+                right: 1rem;
+                padding: 0.5rem 1rem;
+                font-size: 0.8rem;
             }
 
-            .times-grid {
-                grid-template-columns: 1fr;
+            .logout-btn {
+                right: 6rem;
             }
         }
+
+        .pulse-animation {
+            animation: pulse 2s infinite;
+        }
+
+        @keyframes pulse {
+            0% { opacity: 1; }
+            50% { opacity: 0.7; }
+            100% { opacity: 1; }
+        }
     </style>
 </head>
 <body>
-    <div class="header">
-        <div class="logo">
-            <h1>🥷 Ninja Server</h1>
-        </div>
-        <div class="nav-buttons">
-            <div id="userInfo" class="user-info" style="display: none;">
-                <div class="user-avatar" id="userAvatar">U</div>
-                <span id="userEmail">user@example.com</span>
-            </div>
-            <a href="login.html" class="btn btn-admin" id="adminLoginBtn">Admin Login</a>
-            <a href="dashboard.html" class="btn btn-dashboard" id="dashboardBtn" style="display: none;">Dashboard</a>
-            <button class="btn btn-logout" id="logoutBtn" onclick="logout()" style="display: none;">Logout</button>
-        </div>
-    </div>
+    <div class="main-container">
+        <!-- Admin Login Button -->
+        <a href="login.html" class="admin-login-btn" id="adminLoginBtn">🔐 Admin Login</a>
+        <a href="dashboard.html" class="dashboard-btn" id="dashboardBtn" style="display: none;">📊 Dashboard</a>
+        <button class="logout-btn" id="logoutBtn" onclick="logout()" style="display: none;">🚪 Logout</button>
 
-    <div class="container">
-        <div class="welcome-card">
-            <h2>Welcome to Ninja Server! 🥷</h2>
-            <p>View the latest times and performance data from our ninja training sessions.</p>
+        <div class="header-section">
+            <h1 class="main-title">SPEEDRUN ARENA</h1>
+            <p class="tagline">Die ultimative Timer-Rangliste</p>
         </div>
 
-        <div class="times-section">
-            <h3>⏱️ Latest Times</h3>
-            <div id="loading" class="loading">
-                <div class="spinner"></div>
-                <p>Loading times...</p>
+        <div class="dashboard-grid">
+            <div class="control-panel">
+                <div class="control-group">
+                    <label class="control-label">Standort</label>
+                    <select class="custom-select" id="locationSelect">
+                        <option value="all">🌍 Alle Standorte</option>
+                        <!-- Standorte werden dynamisch geladen -->
+                    </select>
+                </div>
+
+                <div class="control-group">
+                    <label class="control-label">Zeitraum</label>
+                    <select class="custom-select" id="periodSelect">
+                        <option value="today">📅 Heute</option>
+                        <option value="week">📊 Diese Woche</option>
+                        <option value="month">📈 Dieser Monat</option>
+                        <option value="all">♾️ Alle Zeiten</option>
+                    </select>
+                </div>
+
+                <button class="refresh-btn pulse-animation" onclick="loadData()">
+                    ⚡ Live Update
+                </button>
             </div>
-            <div id="timesContent" style="display: none;">
-                <div class="times-grid" id="timesGrid">
-                    <!-- Times will be loaded here -->
+
+            <div class="stats-panel">
+                <div class="stats-grid">
+                    <div class="stat-card">
+                        <div class="stat-value" id="totalPlayers">0</div>
+                        <div class="stat-label">Teilnehmer</div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-value" id="bestTime">--:--</div>
+                        <div class="stat-label">Rekordzeit</div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-value" id="totalRecords">0</div>
+                        <div class="stat-label">Läufe</div>
+                    </div>
                 </div>
             </div>
-            <div id="noData" class="no-data" style="display: none;">
-                No times available yet. Check back later!
+        </div>
+
+        <div class="leaderboard-container">
+            <div class="leaderboard-header">
+                <div class="active-filters" id="currentSelection">
+                    🌍 Alle Standorte • 📅 Heute
+                </div>
+                <div class="last-sync" id="lastUpdated">
+                    Letzter Sync: Loading...
+                </div>
+            </div>
+            
+            <div class="rankings-list" id="rankingList">
+                <!-- Rankings werden hier eingefügt -->
             </div>
         </div>
     </div>
 
+    <!-- Supabase CDN -->
+    <script src="https://unpkg.com/@supabase/supabase-js@2"></script>
+    
     <script>
         // Supabase configuration
         const SUPABASE_URL = 'https://lfxlplnypzvjrhftaoog.supabase.co';
@@ -286,108 +526,21 @@
                 const { data: { session } } = await supabase.auth.getSession();
                 
                 if (session) {
-                    // User is logged in, show user info and dashboard button
-                    displayUserInfo(session.user);
-                    showAuthenticatedUI();
+                    // User is logged in, show dashboard button
+                    document.getElementById('adminLoginBtn').style.display = 'none';
+                    document.getElementById('dashboardBtn').style.display = 'inline-block';
+                    document.getElementById('logoutBtn').style.display = 'inline-block';
                 } else {
                     // User is not logged in, show admin login button
-                    showPublicUI();
+                    document.getElementById('adminLoginBtn').style.display = 'inline-block';
+                    document.getElementById('dashboardBtn').style.display = 'none';
+                    document.getElementById('logoutBtn').style.display = 'none';
                 }
             } catch (error) {
                 console.error('Error checking auth:', error);
-                showPublicUI();
             }
         }
 
-        // Display user information
-        function displayUserInfo(user) {
-            const userEmail = document.getElementById('userEmail');
-            const userAvatar = document.getElementById('userAvatar');
-            
-            userEmail.textContent = user.email;
-            userAvatar.textContent = user.email.charAt(0).toUpperCase();
-        }
-
-        // Show UI for authenticated users
-        function showAuthenticatedUI() {
-            document.getElementById('userInfo').style.display = 'flex';
-            document.getElementById('adminLoginBtn').style.display = 'none';
-            document.getElementById('dashboardBtn').style.display = 'inline-block';
-            document.getElementById('logoutBtn').style.display = 'inline-block';
-        }
-
-        // Show UI for public users
-        function showPublicUI() {
-            document.getElementById('userInfo').style.display = 'none';
-            document.getElementById('adminLoginBtn').style.display = 'inline-block';
-            document.getElementById('dashboardBtn').style.display = 'none';
-            document.getElementById('logoutBtn').style.display = 'none';
-        }
-
-        // Load times from local database
-        async function loadTimes() {
-            try {
-                // Fetch times from local database
-                const response = await fetch('/api/times');
-                if (!response.ok) {
-                    throw new Error('Failed to fetch times');
-                }
-                
-                const times = await response.json();
-
-                if (times && times.length > 0) {
-                    displayTimes(times);
-                } else {
-                    showNoData();
-                }
-            } catch (error) {
-                console.error('Error loading times:', error);
-                showNoData();
-            }
-        }
-
-        // Display times in the grid
-        function displayTimes(times) {
-            const timesGrid = document.getElementById('timesGrid');
-            timesGrid.innerHTML = '';
-
-            times.forEach(time => {
-                const timeCard = document.createElement('div');
-                timeCard.className = 'time-card';
-                
-                // Format time from recorded_time object
-                let timeString = 'N/A';
-                if (time.recorded_time) {
-                    const { minutes, seconds, milliseconds } = time.recorded_time;
-                    timeString = `${minutes}:${seconds.toString().padStart(2, '0')}.${milliseconds}`;
-                }
-                
-                const userName = time.player ? 
-                    `${time.player.firstname || ''} ${time.player.lastname || ''}`.trim() || 'Unknown Player' : 
-                    'Unknown Player';
-                const locationName = time.location ? time.location.name : 'Unknown Location';
-                const createdAt = new Date(time.created_at).toLocaleString();
-
-                timeCard.innerHTML = `
-                    <h4>${userName}</h4>
-                    <p><strong>Time:</strong> <span class="time-value">${timeString}</span></p>
-                    <p><strong>Location:</strong> ${locationName}</p>
-                    <p><strong>Date:</strong> ${createdAt}</p>
-                `;
-
-                timesGrid.appendChild(timeCard);
-            });
-
-            document.getElementById('loading').style.display = 'none';
-            document.getElementById('timesContent').style.display = 'block';
-        }
-
-        // Show no data message
-        function showNoData() {
-            document.getElementById('loading').style.display = 'none';
-            document.getElementById('noData').style.display = 'block';
-        }
-
         // Logout function
         async function logout() {
             try {
@@ -395,7 +548,6 @@
                 if (error) {
                     console.error('Error logging out:', error);
                 } else {
-                    // Refresh the page to update UI
                     window.location.reload();
                 }
             } catch (error) {
@@ -403,24 +555,225 @@
             }
         }
 
-        // Listen for auth state changes
-        supabase.auth.onAuthStateChange((event, session) => {
-            if (event === 'SIGNED_OUT') {
-                showPublicUI();
-            } else if (event === 'SIGNED_IN' && session) {
-                displayUserInfo(session.user);
-                showAuthenticatedUI();
+        // Load locations from database
+        async function loadLocations() {
+            try {
+                const response = await fetch('/public-api/locations');
+                if (!response.ok) {
+                    throw new Error('Failed to fetch locations');
+                }
+                
+                const responseData = await response.json();
+                const locations = responseData.data || responseData; // Handle both formats
+                const locationSelect = document.getElementById('locationSelect');
+                
+                // Clear existing options except "Alle Standorte"
+                locationSelect.innerHTML = '<option value="all">🌍 Alle Standorte</option>';
+                
+                // Add locations from database
+                locations.forEach(location => {
+                    const option = document.createElement('option');
+                    option.value = location.name;
+                    option.textContent = `📍 ${location.name}`;
+                    locationSelect.appendChild(option);
+                });
+                
+            } catch (error) {
+                console.error('Error loading locations:', error);
             }
-        });
+        }
+
+        // Load data from local database via MCP
+        async function loadData() {
+            try {
+                const location = document.getElementById('locationSelect').value;
+                const period = document.getElementById('periodSelect').value;
+                
+                // Build query parameters
+                const params = new URLSearchParams();
+                if (location && location !== 'all') {
+                    params.append('location', location);
+                }
+                if (period && period !== 'all') {
+                    params.append('period', period);
+                }
+                
+                // Fetch times with player and location data from local database
+                const response = await fetch(`/public-api/times-with-details?${params.toString()}`);
+                if (!response.ok) {
+                    throw new Error('Failed to fetch times');
+                }
+                
+                const times = await response.json();
+                
+                // Convert to the format expected by the leaderboard
+                const leaderboardData = times.map(time => {
+                    const { minutes, seconds, milliseconds } = time.recorded_time;
+                    const timeString = `${minutes}:${seconds.toString().padStart(2, '0')}.${milliseconds}`;
+                    const playerName = time.player ? 
+                        `${time.player.firstname} ${time.player.lastname}` : 
+                        'Unknown Player';
+                    const locationName = time.location ? time.location.name : 'Unknown Location';
+                    const date = new Date(time.created_at).toISOString().split('T')[0];
+                    
+                    return {
+                        name: playerName,
+                        time: timeString,
+                        date: date,
+                        location: locationName
+                    };
+                });
+
+                // Sort by time (fastest first)
+                leaderboardData.sort((a, b) => {
+                    const timeA = timeToSeconds(a.time);
+                    const timeB = timeToSeconds(b.time);
+                    return timeA - timeB;
+                });
+
+                updateLeaderboard(leaderboardData);
+                updateStats(leaderboardData);
+                updateCurrentSelection();
+                
+            } catch (error) {
+                console.error('Error loading data:', error);
+                // Fallback to sample data if API fails
+                loadSampleData();
+            }
+        }
+
+        // Fallback sample data based on real database data
+        function loadSampleData() {
+            const sampleData = [
+                { name: "Carsten Graf", time: "01:28.945", date: "2025-08-30", location: "Ulm Donaubad" },
+                { name: "Carsten Graf", time: "01:30.945", date: "2025-08-30", location: "Ulm Donaubad" },
+                { name: "Max Mustermann", time: "01:50.945", date: "2025-08-30", location: "Ulm Donaubad" },
+                { name: "Carsten Graf", time: "02:50.945", date: "2025-08-31", location: "Test" },
+                { name: "Max Mustermann", time: "02:50.945", date: "2025-08-31", location: "Test" },
+                { name: "Carsten Graf", time: "01:10.945", date: "2025-09-02", location: "Test" },
+                { name: "Carsten Graf", time: "01:11.945", date: "2025-09-02", location: "Test" },
+                { name: "Carsten Graf", time: "01:11.945", date: "2025-09-02", location: "Ulm Donaubad" }
+            ];
+            
+            updateLeaderboard(sampleData);
+            updateStats(sampleData);
+            updateCurrentSelection();
+        }
+
+        function timeToSeconds(timeStr) {
+            const [minutes, seconds] = timeStr.split(':');
+            return parseFloat(minutes) * 60 + parseFloat(seconds);
+        }
+
+        function updateStats(data) {
+            const totalPlayers = new Set(data.map(item => item.name)).size;
+            const bestTime = data.length > 0 ? data[0].time : '--:--';
+            const totalRecords = data.length;
+            
+            document.getElementById('totalPlayers').textContent = totalPlayers;
+            document.getElementById('bestTime').textContent = bestTime;
+            document.getElementById('totalRecords').textContent = totalRecords;
+        }
+
+        function updateCurrentSelection() {
+            const location = document.getElementById('locationSelect').value;
+            const period = document.getElementById('periodSelect').value;
+            
+            // Get the display text from the selected option
+            const locationSelect = document.getElementById('locationSelect');
+            const selectedLocationOption = locationSelect.options[locationSelect.selectedIndex];
+            const locationDisplay = selectedLocationOption ? selectedLocationOption.textContent : '🌍 Alle Standorte';
+            
+            const periodIcons = {
+                'today': '📅 Heute',
+                'week': '📊 Diese Woche',
+                'month': '📈 Dieser Monat',
+                'all': '♾️ Alle Zeiten'
+            };
+            
+            document.getElementById('currentSelection').textContent = 
+                `${locationDisplay} • ${periodIcons[period]}`;
+            
+            document.getElementById('lastUpdated').textContent = 
+                `Letzter Sync: ${new Date().toLocaleTimeString('de-DE')}`;
+        }
+
+        function updateLeaderboard(data) {
+            const rankingList = document.getElementById('rankingList');
+            
+            if (data.length === 0) {
+                rankingList.innerHTML = `
+                    <div class="empty-state">
+                        <div class="empty-icon">🏁</div>
+                        <div class="empty-title">Keine Rekorde gefunden</div>
+                        <div class="empty-description">
+                            Für diese Filtereinstellungen liegen noch keine Zeiten vor.<br>
+                            Versuche es mit einem anderen Zeitraum oder Standort.
+                        </div>
+                    </div>
+                `;
+                return;
+            }
+            
+            rankingList.innerHTML = data.map((player, index) => {
+                const rank = index + 1;
+                let positionClass = '';
+                let trophy = '';
+                
+                if (rank === 1) {
+                    positionClass = 'gold';
+                    trophy = '👑';
+                } else if (rank === 2) {
+                    positionClass = 'silver';  
+                    trophy = '🥈';
+                } else if (rank === 3) {
+                    positionClass = 'bronze';
+                    trophy = '🥉';
+                } else if (rank <= 10) {
+                    trophy = '⭐';
+                }
+                
+                const formatDate = new Date(player.date).toLocaleDateString('de-DE', {
+                    day: '2-digit',
+                    month: 'short'
+                });
+                
+                return `
+                    <div class="rank-entry">
+                        <div class="position ${positionClass}">#${rank}</div>
+                        <div class="player-data">
+                            <div class="player-name">${player.name}</div>
+                            <div class="player-meta">
+                                <span class="location-tag">${player.location}</span>
+                                <span>🗓️ ${formatDate}</span>
+                            </div>
+                        </div>
+                        <div class="time-result">${player.time}</div>
+                        ${trophy ? `<div class="trophy-icon">${trophy}</div>` : '<div class="trophy-icon"></div>'}
+                    </div>
+                `;
+            }).join('');
+        }
+
+        // Event Listener
+        document.getElementById('locationSelect').addEventListener('change', loadData);
+        document.getElementById('periodSelect').addEventListener('change', loadData);
 
         // Initialize page
         async function init() {
             await checkAuth();
-            await loadTimes();
+            await loadLocations();
+            await loadData();
         }
 
         // Start the application
         init();
+
+        // Auto-refresh
+        setInterval(loadData, 45000);
+
+        // Smooth scroll für bessere UX
+        document.querySelector('.rankings-list').style.scrollBehavior = 'smooth';
     </script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/routes/public.js b/routes/public.js
index 41dfe14..179daf1 100644
--- a/routes/public.js
+++ b/routes/public.js
@@ -72,5 +72,109 @@ router.get('/times', async (req, res) => {
     }
 });
 
+// Public route to get all times with player and location details for leaderboard
+router.get('/times-with-details', async (req, res) => {
+    try {
+        const { location, period } = req.query;
+        
+        // Build WHERE clause for location filter
+        let locationFilter = '';
+        if (location && location !== 'all') {
+            locationFilter = `AND l.name ILIKE '%${location}%'`;
+        }
+        
+        // Build WHERE clause for date filter
+        let dateFilter = '';
+        const now = new Date();
+        if (period === 'today') {
+            const today = now.toISOString().split('T')[0];
+            dateFilter = `AND DATE(t.created_at) = '${today}'`;
+        } else if (period === 'week') {
+            const weekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000).toISOString().split('T')[0];
+            dateFilter = `AND DATE(t.created_at) >= '${weekAgo}'`;
+        } else if (period === 'month') {
+            const monthAgo = new Date(now.getFullYear(), now.getMonth(), 1).toISOString().split('T')[0];
+            dateFilter = `AND DATE(t.created_at) >= '${monthAgo}'`;
+        }
+        
+        // Get all times with player and location details, ordered by time (fastest first)
+        const result = await pool.query(`
+            SELECT 
+                t.id,
+                EXTRACT(EPOCH FROM t.recorded_time) as recorded_time_seconds,
+                t.created_at,
+                json_build_object(
+                    'id', p.id,
+                    'firstname', p.firstname,
+                    'lastname', p.lastname,
+                    'rfiduid', p.rfiduid
+                ) as player,
+                json_build_object(
+                    'id', l.id,
+                    'name', l.name,
+                    'latitude', l.latitude,
+                    'longitude', l.longitude
+                ) as location
+            FROM times t
+            LEFT JOIN players p ON t.player_id = p.id
+            LEFT JOIN locations l ON t.location_id = l.id
+            WHERE 1=1 ${locationFilter} ${dateFilter}
+            ORDER BY t.recorded_time ASC
+            LIMIT 50
+        `);
+        
+        // Convert seconds to minutes:seconds.milliseconds format
+        const formattedResults = result.rows.map(row => {
+            const totalSeconds = parseFloat(row.recorded_time_seconds);
+            const minutes = Math.floor(totalSeconds / 60);
+            const seconds = Math.floor(totalSeconds % 60);
+            const milliseconds = Math.floor((totalSeconds % 1) * 1000);
+            
+            return {
+                ...row,
+                recorded_time: {
+                    minutes: minutes,
+                    seconds: seconds,
+                    milliseconds: milliseconds
+                }
+            };
+        });
+        
+        res.json(formattedResults);
+        
+    } catch (error) {
+        console.error('❌ Fehler beim Abrufen der Zeiten mit Details:', error);
+        res.status(500).json({
+            success: false,
+            message: 'Fehler beim Abrufen der Zeiten mit Details',
+            error: error.message
+        });
+    }
+});
+
+// Public route to get all locations for filter dropdown
+router.get('/locations', async (req, res) => {
+    try {
+        const result = await pool.query(`
+            SELECT id, name, latitude, longitude
+            FROM locations
+            ORDER BY name ASC
+        `);
+        
+        res.json({
+            success: true,
+            data: result.rows
+        });
+        
+    } catch (error) {
+        console.error('❌ Fehler beim Abrufen der Standorte:', error);
+        res.status(500).json({
+            success: false,
+            message: 'Fehler beim Abrufen der Standorte',
+            error: error.message
+        });
+    }
+});
+
 
 module.exports = router;
