Achivement System
This commit is contained in:
@@ -120,6 +120,67 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Achievements Section -->
|
||||
<div class="achievements-section">
|
||||
<div class="achievements-header">
|
||||
<h2>🏆 Meine Achievements</h2>
|
||||
<p>Sammele Punkte und erreiche neue Meilensteine!</p>
|
||||
</div>
|
||||
|
||||
<!-- Achievement Stats -->
|
||||
<div class="achievement-stats" id="achievementStats" style="display: none;">
|
||||
<div class="stat-card achievement-stat">
|
||||
<div class="stat-number" id="totalPoints">0</div>
|
||||
<div class="stat-label">Gesamtpunkte</div>
|
||||
</div>
|
||||
<div class="stat-card achievement-stat">
|
||||
<div class="stat-number" id="completedAchievements">0</div>
|
||||
<div class="stat-label">Abgeschlossen</div>
|
||||
</div>
|
||||
<div class="stat-card achievement-stat">
|
||||
<div class="stat-number" id="achievementsToday">0</div>
|
||||
<div class="stat-label">Heute erreicht</div>
|
||||
</div>
|
||||
<div class="stat-card achievement-stat">
|
||||
<div class="stat-number" id="completionPercentage">0%</div>
|
||||
<div class="stat-label">Fortschritt</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Achievement Categories -->
|
||||
<div class="achievement-categories" id="achievementCategories" style="display: none;">
|
||||
<div class="category-tabs">
|
||||
<button class="category-tab active" onclick="showAchievementCategory('all')" data-category="all">Alle</button>
|
||||
<button class="category-tab" onclick="showAchievementCategory('consistency')" data-category="consistency">Konsistenz</button>
|
||||
<button class="category-tab" onclick="showAchievementCategory('improvement')" data-category="improvement">Verbesserung</button>
|
||||
<button class="category-tab" onclick="showAchievementCategory('seasonal')" data-category="seasonal">Saisonal</button>
|
||||
<button class="category-tab" onclick="showAchievementCategory('monthly')" data-category="monthly">Monatlich</button>
|
||||
</div>
|
||||
|
||||
<div class="achievements-grid" id="achievementsGrid">
|
||||
<!-- Achievements will be populated here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Achievement Loading State -->
|
||||
<div id="achievementsLoading" class="achievements-loading" style="display: none;">
|
||||
<div class="spinner"></div>
|
||||
<p>Lade deine Achievements...</p>
|
||||
</div>
|
||||
|
||||
<!-- Achievement Not Available State -->
|
||||
<div id="achievementsNotAvailable" class="achievements-not-available" style="display: none;">
|
||||
<div class="not-available-content">
|
||||
<div class="not-available-icon">🏆</div>
|
||||
<h3>Achievements noch nicht verfügbar</h3>
|
||||
<p>Um Achievements zu sammeln, musst du zuerst deine RFID-Karte mit deinem Account verknüpfen und einige Läufe absolvieren.</p>
|
||||
<button class="btn btn-primary" onclick="showRFIDSettings()">
|
||||
🏷️ RFID jetzt verknüpfen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user