reptil1990/Ninjaserver
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add bilingual support (German/English) with language selector

Browse Source 
- Added language selector in top-left corner
- Implemented data attributes for all translatable text
- Created language management system with localStorage persistence
- Updated all JavaScript functions to support both languages
- Added translations for notifications, error messages, and UI elements
- Maintained existing functionality while adding language switching
This commit is contained in:
Carsten Graf
2025-09-10 18:42:56 +02:00
parent c84d38b48f
commit 936db67ba4
6 changed files with 239 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
public/index.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="de">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -15,13 +15,21 @@
<div class="notification-content">
<div class="notification-icon">🏁</div>
<div class="notification-text">
<div class="notification-title" id="notificationTitle">Neue Zeit!</div>
<div class="notification-subtitle" id="notificationSubtitle">Ein neuer Rekord wurde erstellt</div>
<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">🇩🇪 Deutsch</option>
<option value="en">🇺🇸 English</option>
</select>
</div>
<!-- Admin Login Button -->
<div class="mobile-nav-buttons">
<a href="/login" class="admin-login-btn" id="adminLoginBtn">🔐 Login</a>
@@ -31,47 +39,47 @@
<div class="header-section">
<h1 class="main-title">NINJACROSS LEADERBOARD</h1>
<p class="tagline">Die ultimative NinjaCross-Rangliste</p>
<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">Standort</label>
<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="">📍 Bitte Standort auswählen</option>
<!-- Standorte werden dynamisch geladen -->
<option value="">📍 Please select location</option>
<!-- Locations are loaded dynamically -->
</select>
<button class="location-btn" id="findLocationBtn" onclick="findNearestLocation()" title="Nächstgelegenen Standort finden">
📍 Mein Standort
<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">Zeitraum</label>
<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">Heute</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">Diese Woche</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">Dieser Monat</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">Alle Zeiten</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()">
<button class="refresh-btn pulse-animation" onclick="loadData()" data-de="⚡ Live Update" data-en="⚡ Live Update">
⚡ Live Update
</button>
</div>
@@ -80,15 +88,15 @@
<div class="stats-grid">
<div class="stat-card">
<div class="stat-value" id="totalPlayers">0</div>
<div class="stat-label">Teilnehmer</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">Rekordzeit</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">Läufe</div>
<div class="stat-label" data-de="Läufe" data-en="Runs">Runs</div>
</div>
</div>
</div>
@@ -97,15 +105,15 @@
<div class="leaderboard-container">
<div class="leaderboard-header">
<div class="active-filters" id="currentSelection">
📍 Bitte Standort auswählen • ♾️ Alle Zeiten
📍 Please select location • ♾️ All Times
</div>
<div class="last-sync" id="lastUpdated">
Letzter Sync: Loading...
Last Sync: Loading...
</div>
</div>
<div class="rankings-list" id="rankingList">
<!-- Rankings werden hier eingefügt -->
<!-- Rankings will be inserted here -->
</div>
</div>
</div>
@@ -114,12 +122,12 @@
<footer class="footer">
<div class="footer-content">
<div class="footer-links">
<a href="/impressum.html" class="footer-link">Impressum</a>
<a href="/datenschutz.html" class="footer-link">Datenschutz</a>
<button id="cookie-settings-footer" class="footer-link cookie-settings-btn">Cookie-Einstellungen</button>
<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>&copy; 2024 NinjaCross. Alle Rechte vorbehalten.</p>
<p data-de="&copy; 2024 NinjaCross. Alle Rechte vorbehalten." data-en="&copy; 2024 NinjaCross. All rights reserved.">&copy; 2024 NinjaCross. All rights reserved.</p>
</div>
</div>
</footer>