Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ // Login Modal
+ const loginBtn = document.getElementById('loginBtn');
+ const loginModal = document.getElementById('loginModal');
+ const closeBtn = document.querySelector('.close-btn');
+
+ loginBtn.addEventListener('click', () => {
+ loginModal.showModal();
+ });
+
+ closeBtn.addEventListener('click', () => {
+ loginModal.close();
+ });
+
+ // Sample data for demonstration
+ const sampleData = {
+ totalProgress: 65,
+ leaderboards: {
+ daily: [
+ { name: 'User1', score: 8 },
+ { name: 'User2', score: 6 },
+ { name: 'User3', score: 5 }
+ ],
+ weekly: [
+ { name: 'User2', score: 25 },
+ { name: 'User1', score: 22 },
+ { name: 'User4', score: 20 }
+ ],
+ monthly: [
+ { name: 'User3', score: 95 },
+ { name: 'User2', score: 88 },
+ { name: 'User1', score: 82 }
+ ],
+ total: [
+ { name: 'User2', score: 356 },
+ { name: 'User3', score: 342 },
+ { name: 'User1', score: 315 }
+ ]
+ }
+ };
+
+ // Update progress bar
+ const progressBar = document.querySelector('.progress');
+ const progressText = document.getElementById('progressPercent');
+ progressBar.style.width = `${sampleData.totalProgress}%`;
+ progressText.textContent = sampleData.totalProgress;
+
+ // Update leaderboards
+ function updateLeaderboard(boardId, data) {
+ const board = document.getElementById(boardId);
+ board.innerHTML = data
+ .map((user, index) => `
+
+ ${index + 1}. ${user.name} - ${user.score} points
+
+ `)
+ .join('');
+ }
+
+ updateLeaderboard('dailyBoard', sampleData.leaderboards.daily);
+ updateLeaderboard('weeklyBoard', sampleData.leaderboards.weekly);
+ updateLeaderboard('monthlyBoard', sampleData.leaderboards.monthly);
+ updateLeaderboard('totalBoard', sampleData.leaderboards.total);
+ });
