Carsten Graf
340e22a815
- Replace emoji flags with SVG-based country flags - German flag: Black-Red-Gold (official colors) - USA flag: Red-White-Blue with stars - Dynamic flag switching on language change - Applied to both dashboard and leaderboard - Database achievements now support English translations - Extended achievements table with name_en and description_en columns - Updated API routes to return English translations - Simplified frontend translation system to use database translations
144 lines
6.9 KiB
HTML
144 lines
6.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Timer Leaderboard</title>
|
|
<link rel="icon" type="image/x-icon" href="/pictures/favicon.ico">
|
|
<script src="/js/page-tracking.js"></script>
|
|
<script src="/js/cookie-utils.js"></script>
|
|
<link rel="stylesheet" href="/css/leaderboard.css">
|
|
</head>
|
|
<body>
|
|
<!-- Notification Bubble -->
|
|
<div class="notification-bubble" id="notificationBubble">
|
|
<div class="notification-content">
|
|
<div class="notification-icon">🏁</div>
|
|
<div class="notification-text">
|
|
<div class="notification-title" id="notificationTitle" data-de="Neue Zeit!" data-en="New Time!">New Time!</div>
|
|
<div class="notification-subtitle" id="notificationSubtitle" data-de="Ein neuer Rekord wurde erstellt" data-en="A new record has been created">A new record has been created</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="main-container">
|
|
<!-- Language Selector -->
|
|
<div class="language-selector">
|
|
<select id="languageSelect" onchange="changeLanguage()">
|
|
<option value="de" data-flag="🇩🇪">Deutsch</option>
|
|
<option value="en" data-flag="🇺🇸">English</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Admin Login Button -->
|
|
<div class="mobile-nav-buttons">
|
|
<a href="/login" class="admin-login-btn" id="adminLoginBtn">🔐 Login</a>
|
|
<a href="/dashboard" class="dashboard-btn" id="dashboardBtn" style="display: none;">📊 Dashboard</a>
|
|
<button class="logout-btn" id="logoutBtn" onclick="logout()" style="display: none;">🚪 Logout</button>
|
|
</div>
|
|
|
|
<div class="header-section">
|
|
<h1 class="main-title">NINJACROSS LEADERBOARD</h1>
|
|
<p class="tagline" data-de="Die ultimative NinjaCross-Rangliste" data-en="The ultimate NinjaCross leaderboard">The ultimate NinjaCross leaderboard</p>
|
|
</div>
|
|
|
|
<div class="dashboard-grid">
|
|
<div class="control-panel">
|
|
<div class="control-group">
|
|
<label class="control-label" data-de="Standort" data-en="Location">Location</label>
|
|
<div class="location-control">
|
|
<select class="custom-select location-select" id="locationSelect">
|
|
<option value="">📍 Please select location</option>
|
|
<!-- Locations are loaded dynamically -->
|
|
</select>
|
|
<button class="location-btn" id="findLocationBtn" onclick="findNearestLocation()" title="Find nearest location" data-de="📍 Mein Standort" data-en="📍 My Location">
|
|
📍 My Location
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="control-group">
|
|
<label class="control-label" data-de="Zeitraum" data-en="Time Period">Time Period</label>
|
|
<div class="time-tabs">
|
|
<button class="time-tab" data-period="today">
|
|
<span class="tab-icon">📅</span>
|
|
<span class="tab-text" data-de="Heute" data-en="Today">Today</span>
|
|
</button>
|
|
<button class="time-tab" data-period="week">
|
|
<span class="tab-icon">📊</span>
|
|
<span class="tab-text" data-de="Diese Woche" data-en="This Week">This Week</span>
|
|
</button>
|
|
<button class="time-tab" data-period="month">
|
|
<span class="tab-icon">📈</span>
|
|
<span class="tab-text" data-de="Dieser Monat" data-en="This Month">This Month</span>
|
|
</button>
|
|
<button class="time-tab active" data-period="all">
|
|
<span class="tab-icon">♾️</span>
|
|
<span class="tab-text" data-de="Alle Zeiten" data-en="All Times">All Times</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="refresh-btn pulse-animation" onclick="loadData()" data-de="⚡ Live Update" data-en="⚡ Live Update">
|
|
⚡ Live Update
|
|
</button>
|
|
</div>
|
|
|
|
<div class="stats-panel">
|
|
<div class="stats-grid">
|
|
<div class="stat-card">
|
|
<div class="stat-value" id="totalPlayers">0</div>
|
|
<div class="stat-label" data-de="Teilnehmer" data-en="Participants">Participants</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-value" id="bestTime">--:--</div>
|
|
<div class="stat-label" data-de="Rekordzeit" data-en="Record Time">Record Time</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-value" id="totalRecords">0</div>
|
|
<div class="stat-label" data-de="Läufe" data-en="Runs">Runs</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="leaderboard-container">
|
|
<div class="leaderboard-header">
|
|
<div class="active-filters" id="currentSelection">
|
|
📍 Please select location • ♾️ All Times
|
|
</div>
|
|
<div class="last-sync" id="lastUpdated">
|
|
Last Sync: Loading...
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rankings-list" id="rankingList">
|
|
<!-- Rankings will be inserted here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<div class="footer-content">
|
|
<div class="footer-links">
|
|
<a href="/impressum.html" class="footer-link" data-de="Impressum" data-en="Imprint">Imprint</a>
|
|
<a href="/datenschutz.html" class="footer-link" data-de="Datenschutz" data-en="Privacy">Privacy</a>
|
|
<button id="cookie-settings-footer" class="footer-link cookie-settings-btn" data-de="Cookie-Einstellungen" data-en="Cookie Settings">Cookie Settings</button>
|
|
</div>
|
|
<div class="footer-text">
|
|
<p data-de="© 2024 NinjaCross. Alle Rechte vorbehalten." data-en="© 2024 NinjaCross. All rights reserved.">© 2024 NinjaCross. All rights reserved.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- External Libraries -->
|
|
<script src="https://unpkg.com/@supabase/supabase-js@2"></script>
|
|
<script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
|
|
|
|
<!-- Application JavaScript -->
|
|
<script src="/js/cookie-consent.js"></script>
|
|
<script src="/js/leaderboard.js"></script>
|
|
</body>
|
|
</html>
|