{"id":328,"date":"2025-12-06T19:58:47","date_gmt":"2025-12-06T19:58:47","guid":{"rendered":"https:\/\/ict-alive.co.uk\/?page_id=328"},"modified":"2025-12-07T21:02:08","modified_gmt":"2025-12-07T21:02:08","slug":"leaderboard-2","status":"publish","type":"page","link":"https:\/\/ict-alive.co.uk\/?page_id=328","title":{"rendered":"Leaderboard"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n \n \n Hackathon Leaderboard<\/title>\n <style>\n \/* Reset for Elementor - only target our specific elements *\/\n #hackathon-leaderboard {\n margin: 0;\n padding: 20px;\n width: 100%;\n background-color: ;\n color: #fff;\n font-family: 'Segoe UI', 'Roboto', 'Arial', sans-serif;\n box-sizing: border-box;\n position: relative;\n min-height: auto;\n }\n \n #hackathon-leaderboard * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n \/* Fix body styles for Elementor *\/\n #hackathon-leaderboard .container {\n width: 100%;\n max-width: 1200px;\n margin: 0 auto;\n padding: 20px;\n display: block;\n }\n\n #hackathon-leaderboard .header {\n text-align: center;\n margin-bottom: 40px;\n position: relative;\n padding-bottom: 20px;\n }\n\n #hackathon-leaderboard .header::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 200px;\n height: 3px;\n background: linear-gradient(90deg, transparent, #D4AF37, transparent);\n }\n\n #hackathon-leaderboard .header h1 {\n font-size: 2.8rem;\n margin-bottom: 10px;\n color: #fff;\n text-transform: uppercase;\n letter-spacing: 2px;\n text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);\n background: linear-gradient(to right, #D4AF37, #FFD700, #D4AF37);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n display: block;\n }\n\n #hackathon-leaderboard .header p {\n color: #ccc;\n font-size: 1.1rem;\n max-width: 600px;\n margin: 0 auto;\n line-height: 1.6;\n }\n\n \/* Sync Status *\/\n #hackathon-leaderboard .sync-status {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 15px;\n background: rgba(40, 40, 40, 0.5);\n border-radius: 8px;\n margin-bottom: 20px;\n border-left: 4px solid #D4AF37;\n }\n\n #hackathon-leaderboard .sync-message {\n flex: 1;\n font-size: 0.95rem;\n color: #FFD700;\n }\n\n #hackathon-leaderboard .loading {\n width: 20px;\n height: 20px;\n border: 2px solid #aaa;\n border-radius: 50%;\n border-top-color: #FFD700;\n animation: spin 1s linear infinite;\n }\n\n @keyframes spin {\n to { transform: rotate(360deg); }\n }\n\n \/* Admin Controls *\/\n #hackathon-leaderboard .admin-controls {\n display: none;\n background-color: rgba(0, 0, 0, 1);\n border: 1px solid #D4AF37;\n border-radius: 10px;\n padding: 20px;\n margin-bottom: 30px;\n width: 100%;\n box-shadow: 0 5px 15px rgba(212, 175, 55, 0.2);\n }\n\n #hackathon-leaderboard .admin-controls.active {\n display: block;\n animation: fadeIn 0.5s ease;\n }\n\n #hackathon-leaderboard .admin-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n padding-bottom: 15px;\n border-bottom: 1px solid #D4AF37;\n }\n\n #hackathon-leaderboard .admin-header h2 {\n color: #FFD700;\n font-size: 1.5rem;\n }\n\n #hackathon-leaderboard .admin-actions {\n display: flex;\n gap: 10px;\n }\n\n #hackathon-leaderboard .admin-btn {\n background-color: #8B7500;\n color: #FFD700;\n border: none;\n padding: 8px 16px;\n border-radius: 5px;\n cursor: pointer;\n font-weight: 600;\n transition: all 0.3s ease;\n font-family: inherit;\n font-size: inherit;\n }\n\n #hackathon-leaderboard .admin-btn:hover {\n background-color: #D4AF37;\n color: #000;\n transform: translateY(-2px);\n box-shadow: 0 5px 10px rgba(212, 175, 55, 0.3);\n }\n\n #hackathon-leaderboard .admin-btn.secondary {\n background-color: #333;\n color: #FFD700;\n }\n\n #hackathon-leaderboard .admin-btn.secondary:hover {\n background-color: #444;\n color: #FFF;\n }\n\n #hackathon-leaderboard .admin-form {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr auto;\n gap: 15px;\n margin-bottom: 20px;\n }\n\n @media (max-width: 768px) {\n #hackathon-leaderboard .admin-form {\n grid-template-columns: 1fr;\n }\n }\n\n #hackathon-leaderboard .form-group {\n display: flex;\n flex-direction: column;\n }\n\n #hackathon-leaderboard .form-group label {\n margin-bottom: 5px;\n color: #FFD700;\n font-size: 0.9rem;\n }\n\n #hackathon-leaderboard .form-group input {\n padding: 10px;\n border-radius: 5px;\n border: 1px solid #444;\n background-color: #222;\n color: #FFD700;\n font-size: 1rem;\n font-family: inherit;\n }\n\n #hackathon-leaderboard .form-group input:focus {\n outline: none;\n border-color: #D4AF37;\n box-shadow: 0 0 5px rgba(212, 175, 55, 0.5);\n }\n\n #hackathon-leaderboard .form-group input::placeholder {\n color: #666;\n }\n\n \/* Admin Login *\/\n #hackathon-leaderboard .admin-login {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.95);\n display: none;\n justify-content: center;\n align-items: center;\n z-index: 999999;\n }\n\n #hackathon-leaderboard .admin-login.active {\n display: flex;\n animation: fadeIn 0.5s ease;\n }\n\n #hackathon-leaderboard .login-box {\n background-color: #111;\n border-radius: 15px;\n padding: 40px;\n width: 90%;\n max-width: 400px;\n border: 2px solid #D4AF37;\n box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);\n }\n\n #hackathon-leaderboard .login-box h2 {\n color: #FFD700;\n margin-bottom: 10px;\n text-align: center;\n }\n\n #hackathon-leaderboard .login-box p {\n color: #ccc;\n margin-bottom: 20px;\n text-align: center;\n font-size: 0.9rem;\n }\n\n #hackathon-leaderboard .login-form .form-group {\n margin-bottom: 20px;\n }\n\n #hackathon-leaderboard .login-btn {\n width: 100%;\n padding: 12px;\n background-color: #8B7500;\n color: #FFD700;\n border: none;\n border-radius: 5px;\n font-weight: 600;\n font-size: 1rem;\n cursor: pointer;\n transition: all 0.3s ease;\n font-family: inherit;\n }\n\n #hackathon-leaderboard .login-btn:hover {\n background-color: #D4AF37;\n color: #000;\n transform: translateY(-2px);\n box-shadow: 0 5px 10px rgba(212, 175, 55, 0.3);\n }\n\n #hackathon-leaderboard .login-error {\n color: #FFD700;\n margin-top: 10px;\n text-align: center;\n font-size: 0.9rem;\n display: none;\n }\n\n #hackathon-leaderboard .login-error.active {\n display: block;\n }\n\n \/* Leaderboard *\/\n #hackathon-leaderboard .leaderboard-container {\n width: 100%;\n overflow: hidden;\n border-radius: 16px;\n box-shadow: 0 10px 30px rgba(212, 175, 55, 0.2);\n background-color: #111;\n margin-bottom: 30px;\n transition: all 0.3s ease;\n border: 1px solid rgba(212, 175, 55, 0.1);\n }\n\n #hackathon-leaderboard .leaderboard-container:hover {\n box-shadow: 0 15px 40px rgba(212, 175, 55, 0.25);\n }\n\n #hackathon-leaderboard table {\n width: 100%;\n border-collapse: collapse;\n background-color: #111;\n display: table;\n }\n\n #hackathon-leaderboard thead {\n background: linear-gradient(90deg, #8B7500, #D4AF37, #8B7500);\n background-size: 200% 100%;\n animation: gradient-shift 3s ease infinite;\n }\n\n @keyframes gradient-shift {\n 0% { background-position: 0% 50%; }\n 50% { background-position: 100% 50%; }\n 100% { background-position: 0% 50%; }\n }\n\n #hackathon-leaderboard th {\n padding: 20px 15px;\n text-align: left;\n font-weight: 700;\n font-size: 1.1rem;\n letter-spacing: 1px;\n text-transform: uppercase;\n color: #000;\n position: relative;\n }\n\n #hackathon-leaderboard th:not(:last-child)::after {\n content: '';\n position: absolute;\n right: 0;\n top: 20%;\n height: 60%;\n width: 1px;\n background-color: rgba(0, 0, 0, 0.2);\n }\n\n #hackathon-leaderboard tbody tr {\n border-bottom: 1px solid #222;\n transition: all 0.25s ease;\n display: table-row;\n }\n\n #hackathon-leaderboard tbody tr:nth-child(even) {\n background-color: #0a0a0a;\n }\n\n #hackathon-leaderboard tbody tr:nth-child(odd) {\n background-color: #111;\n }\n\n #hackathon-leaderboard tbody tr:hover {\n background-color: rgba(212, 175, 55, 0.05);\n transform: translateX(5px);\n box-shadow: 0 5px 15px rgba(212, 175, 55, 0.1);\n }\n\n #hackathon-leaderboard td {\n padding: 18px 15px;\n color: #fff;\n font-size: 1rem;\n vertical-align: middle;\n display: table-cell;\n }\n\n #hackathon-leaderboard .rank {\n font-weight: 700;\n font-size: 1.2rem;\n text-align: center;\n width: 80px;\n color: #FFD700;\n }\n\n #hackathon-leaderboard .team-name {\n font-weight: 600;\n letter-spacing: 0.5px;\n color: #fff;\n }\n\n #hackathon-leaderboard .score {\n font-weight: 600;\n color: #D4AF37;\n }\n\n #hackathon-leaderboard .total-points {\n font-weight: 700;\n color: #FFD700;\n font-size: 1.1rem;\n }\n\n \/* Admin edit buttons *\/\n #hackathon-leaderboard .edit-actions {\n display: flex;\n gap: 8px;\n justify-content: flex-end;\n width: 120px;\n }\n\n #hackathon-leaderboard .edit-btn, \n #hackathon-leaderboard .delete-btn {\n background: none;\n border: none;\n cursor: pointer;\n font-size: 1.2rem;\n transition: all 0.3s ease;\n width: 36px;\n height: 36px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: inherit;\n }\n\n #hackathon-leaderboard .edit-btn {\n color: #D4AF37;\n }\n\n #hackathon-leaderboard .edit-btn:hover {\n background-color: rgba(212, 175, 55, 0.2);\n transform: scale(1.1);\n }\n\n #hackathon-leaderboard .delete-btn {\n color: #FFD700;\n }\n\n #hackathon-leaderboard .delete-btn:hover {\n background-color: rgba(255, 215, 0, 0.2);\n transform: scale(1.1);\n }\n\n \/* Rank-specific styling *\/\n #hackathon-leaderboard .rank-1 .rank {\n color: #FFD700;\n text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);\n }\n\n #hackathon-leaderboard .rank-2 .rank {\n color: #C0C0C0;\n text-shadow: 0 0 8px rgba(192, 192, 192, 0.5);\n }\n\n #hackathon-leaderboard .rank-3 .rank {\n color: #CD7F32;\n text-shadow: 0 0 8px rgba(205, 127, 50, 0.5);\n }\n\n #hackathon-leaderboard .medal {\n display: inline-block;\n margin-right: 8px;\n font-size: 1.2rem;\n }\n\n #hackathon-leaderboard .medal-gold {\n color: #FFD700;\n }\n\n #hackathon-leaderboard .medal-silver {\n color: #C0C0C0;\n }\n\n #hackathon-leaderboard .medal-bronze {\n color: #CD7F32;\n }\n\n \/* Admin Access Button *\/\n #hackathon-leaderboard .admin-access-btn {\n position: fixed;\n bottom: 20px;\n right: 20px;\n background-color: #8B7500;\n color: #FFD700;\n border: none;\n border-radius: 50%;\n width: 60px;\n height: 60px;\n font-size: 1.5rem;\n cursor: pointer;\n z-index: 99999;\n box-shadow: 0 5px 15px rgba(139, 117, 0, 0.5);\n transition: all 0.3s ease;\n font-family: inherit;\n }\n\n #hackathon-leaderboard .admin-access-btn:hover {\n background-color: #D4AF37;\n color: #000;\n transform: scale(1.1);\n box-shadow: 0 8px 20px rgba(212, 175, 55, 0.6);\n }\n\n #hackathon-leaderboard .footer {\n text-align: center;\n margin-top: 30px;\n color: #666;\n font-size: 0.9rem;\n padding: 15px;\n border-top: 1px solid #222;\n width: 100%;\n max-width: 1200px;\n }\n\n \/* Message *\/\n #hackathon-leaderboard .message {\n padding: 12px 20px;\n border-radius: 5px;\n margin-bottom: 20px;\n animation: slideIn 0.3s ease;\n }\n\n @keyframes slideIn {\n from { transform: translateY(-10px); opacity: 0; }\n to { transform: translateY(0); opacity: 1; }\n }\n\n #hackathon-leaderboard .message-success {\n background-color: rgba(212, 175, 55, 0.1);\n border-left: 3px solid #D4AF37;\n color: #FFD700;\n }\n\n #hackathon-leaderboard .message-error {\n background-color: rgba(212, 175, 55, 0.1);\n border-left: 3px solid #FFD700;\n color: #FFD700;\n }\n\n \/* Responsive styles *\/\n @media (max-width: 768px) {\n #hackathon-leaderboard .container {\n padding: 10px;\n }\n \n #hackathon-leaderboard .header h1 {\n font-size: 2rem;\n }\n \n #hackathon-leaderboard .header p {\n font-size: 1rem;\n padding: 0 10px;\n }\n \n #hackathon-leaderboard th, \n #hackathon-leaderboard td {\n padding: 15px 10px;\n font-size: 0.9rem;\n }\n \n #hackathon-leaderboard .rank {\n width: 60px;\n font-size: 1.1rem;\n }\n \n #hackathon-leaderboard .leaderboard-container {\n border-radius: 12px;\n }\n \n #hackathon-leaderboard table {\n display: block;\n overflow-x: auto;\n }\n \n #hackathon-leaderboard .edit-actions {\n width: 100px;\n }\n }\n\n @media (max-width: 480px) {\n #hackathon-leaderboard .header h1 {\n font-size: 1.6rem;\n }\n \n #hackathon-leaderboard th, \n #hackathon-leaderboard td {\n padding: 12px 8px;\n font-size: 0.85rem;\n }\n \n #hackathon-leaderboard th {\n font-size: 0.9rem;\n }\n \n #hackathon-leaderboard .rank {\n width: 50px;\n font-size: 1rem;\n }\n \n #hackathon-leaderboard .admin-form {\n grid-template-columns: 1fr;\n }\n }\n\n \/* Animations *\/\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n\n #hackathon-leaderboard tbody tr {\n animation: fadeIn 0.5s ease forwards;\n opacity: 0;\n }\n\n #hackathon-leaderboard tbody tr:nth-child(1) { animation-delay: 0.1s; }\n #hackathon-leaderboard tbody tr:nth-child(2) { animation-delay: 0.2s; }\n #hackathon-leaderboard tbody tr:nth-child(3) { animation-delay: 0.3s; }\n #hackathon-leaderboard tbody tr:nth-child(4) { animation-delay: 0.4s; }\n #hackathon-leaderboard tbody tr:nth-child(5) { animation-delay: 0.5s; }\n #hackathon-leaderboard tbody tr:nth-child(6) { animation-delay: 0.6s; }\n #hackathon-leaderboard tbody tr:nth-child(7) { animation-delay: 0.7s; }\n #hackathon-leaderboard tbody tr:nth-child(8) { animation-delay: 0.8s; }\n <\/style>\n<\/head>\n<body>\n <!-- Main container with specific ID for targeting -->\n <div id=\"hackathon-leaderboard\">\n <div class=\"container\">\n <!-- Sync Status -->\n <div class=\"sync-status\" id=\"syncStatus\">\n <div class=\"loading\"><\/div>\n <div class=\"sync-message\" id=\"syncMessage\">Syncing with Google Sheets...<\/div>\n <\/div>\n\n <!-- Header -->\n <div class=\"header\">\n <h1>Hackathon Leaderboard<\/h1>\n <p>Real-time ranking of teams across all devices<\/p>\n <\/div>\n\n <!-- Admin Controls Panel (Hidden by default) -->\n <div class=\"admin-controls\" id=\"adminControls\">\n <div class=\"admin-header\">\n <h2>Admin Controls<\/h2>\n <div class=\"admin-actions\">\n <button class=\"admin-btn secondary\" id=\"refreshBtn\">\ud83d\udd04 Refresh Now<\/button>\n <button class=\"admin-btn\" id=\"logoutBtn\">Logout Admin<\/button>\n <\/div>\n <\/div>\n \n <div class=\"admin-form\">\n <div class=\"form-group\">\n <label for=\"teamName\">Team Name<\/label>\n <input type=\"text\" id=\"teamName\" placeholder=\"Enter team name\" maxlength=\"50\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"innovationScore\">Innovation Score<\/label>\n <input type=\"number\" id=\"innovationScore\" placeholder=\"0-10\" min=\"0\" max=\"10\" step=\"0.1\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"totalPoints\">Total Points<\/label>\n <input type=\"number\" id=\"totalPoints\" placeholder=\"Total points\" min=\"0\" step=\"1\">\n <\/div>\n <div class=\"form-group\">\n <label> <\/label>\n <button class=\"admin-btn\" id=\"addTeamBtn\">Add New Team<\/button>\n <\/div>\n <\/div>\n <div style=\"color: #FFD700; font-size: 0.9rem; text-align: center; margin-top: 15px;\">\n <p>Note: Teams must be added directly to Google Sheet for cross-device sync<\/p>\n <p><a href=\"https:\/\/docs.google.com\/spreadsheets\/d\/1Z48UIRSHLrr2gQwRjyCg2R0clSnQlh2pYdGCOf8kYMc\/edit\" \n target=\"_blank\" \n style=\"color: #FFD700; text-decoration: underline;\">\n \ud83d\udcca Edit Google Sheet\n <\/a><\/p>\n <\/div>\n <\/div>\n\n <!-- Message Container -->\n <div id=\"messageContainer\"><\/div>\n\n <!-- Leaderboard Table -->\n <div class=\"leaderboard-container\">\n <table id=\"leaderboard-table\">\n <thead>\n <tr>\n <th class=\"rank-header\">Rank<\/th>\n <th class=\"team-header\">Team Name<\/th>\n <th class=\"innovation-header\">Innovation Score<\/th>\n <th class=\"total-header\">Total Points<\/th>\n <th class=\"actions-header\" style=\"width: 120px; text-align: center;\">Actions<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"leaderboard-body\">\n <!-- Table rows will be generated by JavaScript -->\n <\/tbody>\n <\/table>\n <\/div>\n\n <div class=\"footer\">\n <p>Leaderboard syncs from Google Sheets \u2022 Auto-refresh every 30 seconds<\/p>\n <p>Last updated: <span id=\"update-time\"><\/span><\/p>\n <\/div>\n <\/div>\n\n <!-- Admin Login Modal -->\n <div class=\"admin-login\" id=\"adminLogin\">\n <div class=\"login-box\">\n <h2>Admin Access<\/h2>\n <p>Enter admin access code to edit leaderboard<\/p>\n <form class=\"login-form\" id=\"loginForm\">\n <div class=\"form-group\">\n <label for=\"accessCode\">Access Code<\/label>\n <input type=\"password\" id=\"accessCode\" placeholder=\"Enter access code\" autocomplete=\"off\">\n <\/div>\n <button type=\"submit\" class=\"login-btn\">Login as Admin<\/button>\n <div class=\"login-error\" id=\"loginError\">Invalid access code. Please try again.<\/div>\n <\/form>\n <\/div>\n <\/div>\n\n <!-- Admin Access Button (Floating) -->\n <button class=\"admin-access-btn\" id=\"adminAccessBtn\" title=\"Admin Access\">\ud83d\udd10<\/button>\n <\/div>\n\n <script>\n \/\/ ============================================\n \/\/ CONFIGURATION - YOUR GOOGLE SHEET EMBEDDED\n \/\/ ============================================\n const GOOGLE_SHEET_ID = \"1Z48UIRSHLrr2gQwRjyCg2R0clSnQlh2pYdGCOf8kYMc\"; \/\/ Your embedded Sheet ID\n const GOOGLE_SHEET_URL = `https:\/\/docs.google.com\/spreadsheets\/d\/${GOOGLE_SHEET_ID}\/gviz\/tq?tqx=out:json`;\n const ADMIN_CODE = \"hack2024\"; \/\/ Admin access code\n const SYNC_INTERVAL = 30000; \/\/ Sync every 30 seconds\n \n \/\/ ============================================\n \/\/ STATE\n \/\/ ============================================\n let teamsData = [];\n let isAdmin = false;\n let isSyncing = false;\n \n \/\/ ============================================\n \/\/ DOM ELEMENTS\n \/\/ ============================================\n const syncStatus = document.getElementById('syncStatus');\n const syncMessage = document.getElementById('syncMessage');\n const messageContainer = document.getElementById('messageContainer');\n \n \/\/ ============================================\n \/\/ UTILITY FUNCTIONS\n \/\/ ============================================\n function updateDateTime() {\n const now = new Date();\n const options = { \n year: 'numeric', \n month: 'short', \n day: 'numeric',\n hour: '2-digit',\n minute: '2-digit',\n second: '2-digit'\n };\n document.getElementById('update-time').textContent = now.toLocaleDateString('en-US', options);\n }\n\n function getMedal(rank) {\n switch(rank) {\n case 1: return '<span class=\"medal medal-gold\">\ud83e\udd47<\/span>';\n case 2: return '<span class=\"medal medal-silver\">\ud83e\udd48<\/span>';\n case 3: return '<span class=\"medal medal-bronze\">\ud83e\udd49<\/span>';\n default: return '';\n }\n }\n\n function showMessage(message, type = 'success', duration = 5000) {\n const messageEl = document.createElement('div');\n messageEl.className = `message message-${type}`;\n messageEl.innerHTML = `\n <span>${message}<\/span>\n <button style=\"background:none;border:none;color:inherit;cursor:pointer;margin-left:10px;\" \n onclick=\"this.parentElement.remove()\">\u00d7<\/button>\n `;\n messageContainer.appendChild(messageEl);\n \n if (duration > 0) {\n setTimeout(() => {\n if (messageEl.parentElement) messageEl.remove();\n }, duration);\n }\n }\n\n function updateSyncStatus(message, loading = false) {\n syncStatus.style.display = 'flex';\n syncMessage.textContent = message;\n syncStatus.querySelector('.loading').style.display = loading ? 'block' : 'none';\n }\n\n \/\/ ============================================\n \/\/ GOOGLE SHEETS FUNCTIONS\n \/\/ ============================================\n async function fetchTeamsFromGoogleSheet() {\n if (isSyncing) return;\n \n isSyncing = true;\n updateSyncStatus('\ud83d\udd04 Syncing with Google Sheets...', true);\n \n try {\n const response = await fetch(GOOGLE_SHEET_URL);\n \n if (!response.ok) {\n throw new Error('Cannot access Google Sheet');\n }\n \n const text = await response.text();\n const json = JSON.parse(text.substring(47).slice(0, -2));\n const rows = json.table.rows || [];\n \n \/\/ Process rows (skip header row if exists)\n const newTeams = rows.slice(1).map(row => {\n const cells = row.c;\n return {\n id: cells[0]?.v || Date.now(),\n team: cells[1]?.v || 'Unknown Team',\n innovation: parseFloat(cells[2]?.v || 0),\n total: parseInt(cells[3]?.v || 0),\n timestamp: cells[4]?.v || new Date().toISOString()\n };\n }).filter(team => team.team !== 'Unknown Team' && team.team.trim() !== '');\n \n \/\/ Sort by total points\n newTeams.sort((a, b) => b.total - a.total);\n \n \/\/ Update teams\n teamsData = newTeams;\n \n updateSyncStatus(`\u2713 ${teamsData.length} teams loaded`, false);\n populateLeaderboard();\n \n } catch (error) {\n console.error('Error fetching from Google Sheet:', error);\n updateSyncStatus('\u26a0\ufe0f Sync failed', false);\n showMessage('Error loading data from Google Sheet', 'error');\n \n \/\/ Show sample data if sheet is empty\n if (teamsData.length === 0) {\n teamsData = [\n {\"team\": \"Team Alpha\", \"innovation\": 8.5, \"total\": 42, \"id\": 1},\n {\"team\": \"Team Beta\", \"innovation\": 7.0, \"total\": 39, \"id\": 2},\n {\"team\": \"Team Gamma\", \"innovation\": 9.1, \"total\": 47, \"id\": 3}\n ];\n populateLeaderboard();\n }\n } finally {\n isSyncing = false;\n \n \/\/ Hide sync status after 3 seconds\n setTimeout(() => {\n syncStatus.style.display = 'none';\n }, 3000);\n }\n }\n\n \/\/ ============================================\n \/\/ CORE FUNCTIONS\n \/\/ ============================================\n function populateLeaderboard() {\n \/\/ Sort teams by total points descending\n const sortedTeams = [...teamsData].sort((a, b) => b.total - a.total);\n \n const tbody = document.getElementById('leaderboard-body');\n tbody.innerHTML = '';\n \n \/\/ Create table rows for each team\n sortedTeams.forEach((team, index) => {\n const rank = index + 1;\n const row = document.createElement('tr');\n row.className = `rank-${rank}`;\n row.dataset.id = team.id;\n \n \/\/ Add medal for top 3 teams\n const medal = getMedal(rank);\n \n \/\/ Create edit and delete buttons if admin mode is active\n const actions = isAdmin ? \n `<td class=\"edit-actions\">\n <button class=\"edit-btn\" onclick=\"editTeam(${team.id})\" title=\"Edit team\">\u270f\ufe0f<\/button>\n <button class=\"delete-btn\" onclick=\"deleteTeam(${team.id})\" title=\"Delete team\">\ud83d\uddd1\ufe0f<\/button>\n <\/td>` : \n `<td class=\"edit-actions\"><\/td>`;\n \n row.innerHTML = `\n <td class=\"rank\">${medal} ${rank}<\/td>\n <td class=\"team-name\">${team.team}<\/td>\n <td class=\"score\">${team.innovation.toFixed(1)}<\/td>\n <td class=\"total-points\">${team.total}<\/td>\n ${actions}\n `;\n \n tbody.appendChild(row);\n });\n \n updateDateTime();\n }\n\n function toggleAdminControls(show) {\n const adminControls = document.getElementById('adminControls');\n if (show) {\n adminControls.classList.add('active');\n document.querySelector('.actions-header').style.display = 'table-cell';\n } else {\n adminControls.classList.remove('active');\n document.querySelector('.actions-header').style.display = 'none';\n }\n populateLeaderboard();\n }\n\n \/\/ Admin functions\n window.editTeam = function(teamId) {\n const team = teamsData.find(t => t.id === teamId);\n if (!team) return;\n \n const newTeamName = prompt('Enter new team name:', team.team);\n if (newTeamName === null) return;\n \n const newInnovation = parseFloat(prompt('Enter new innovation score (0-10):', team.innovation));\n if (isNaN(newInnovation) || newInnovation < 0 || newInnovation > 10) {\n alert('Invalid innovation score. Must be between 0 and 10.');\n return;\n }\n \n const newTotal = parseInt(prompt('Enter new total points:', team.total));\n if (isNaN(newTotal) || newTotal < 0) {\n alert('Invalid total points. Must be a positive number.');\n return;\n }\n \n \/\/ Show instructions for updating Google Sheet\n const sheetUrl = `https:\/\/docs.google.com\/spreadsheets\/d\/${GOOGLE_SHEET_ID}\/edit`;\n alert(`To update team in Google Sheet:\\n\\n1. Open: ${sheetUrl}\\n2. Find the team \"${team.team}\"\\n3. Update columns:\\n - Team Name: ${newTeamName}\\n - Innovation: ${newInnovation}\\n - Total: ${newTotal}\\n\\nChanges will appear on all devices after next sync.`);\n \n \/\/ Update locally for immediate feedback\n team.team = newTeamName.trim();\n team.innovation = newInnovation;\n team.total = newTotal;\n populateLeaderboard();\n };\n\n window.deleteTeam = function(teamId) {\n const team = teamsData.find(t => t.id === teamId);\n if (!team) return;\n \n if (!confirm(`Are you sure you want to delete \"${team.team}\"?`)) return;\n \n \/\/ Show instructions for deleting from Google Sheet\n const sheetUrl = `https:\/\/docs.google.com\/spreadsheets\/d\/${GOOGLE_SHEET_ID}\/edit`;\n alert(`To delete team from Google Sheet:\\n\\n1. Open: ${sheetUrl}\\n2. Find the row with \"${team.team}\"\\n3. Delete the entire row\\n\\nTeam will be removed on all devices after next sync.`);\n \n \/\/ Remove locally for immediate feedback\n teamsData = teamsData.filter(t => t.id !== teamId);\n populateLeaderboard();\n };\n\n function addNewTeam() {\n const teamName = document.getElementById('teamName').value.trim();\n const innovationScore = parseFloat(document.getElementById('innovationScore').value);\n const totalPoints = parseInt(document.getElementById('totalPoints').value);\n \n \/\/ Validation\n if (!teamName || teamName.length < 2) {\n alert('Please enter a valid team name (at least 2 characters)');\n return;\n }\n \n if (isNaN(innovationScore) || innovationScore < 0 || innovationScore > 10) {\n alert('Please enter a valid innovation score (0-10)');\n return;\n }\n \n if (isNaN(totalPoints) || totalPoints < 0) {\n alert('Please enter valid total points (positive number)');\n return;\n }\n \n \/\/ Show instructions for adding to Google Sheet\n const sheetUrl = `https:\/\/docs.google.com\/spreadsheets\/d\/${GOOGLE_SHEET_ID}\/edit`;\n const instructions = `To add team to Google Sheet:\\n\\n1. Open: ${sheetUrl}\\n\\n2. Add this row at the BOTTOM:\\n Column A: ${Date.now()}\\n Column B: ${teamName}\\n Column C: ${innovationScore}\\n Column D: ${totalPoints}\\n Column E: ${new Date().toISOString()}\\n\\nTeam will appear on all devices after next sync.`;\n \n alert(instructions);\n \n \/\/ Add locally for immediate feedback\n const newTeam = {\n id: Date.now(),\n team: teamName,\n innovation: innovationScore,\n total: totalPoints,\n timestamp: new Date().toISOString()\n };\n \n teamsData.push(newTeam);\n \n \/\/ Clear form\n document.getElementById('teamName').value = '';\n document.getElementById('innovationScore').value = '';\n document.getElementById('totalPoints').value = '';\n \n populateLeaderboard();\n showMessage('Team added locally. Add to Google Sheet for cross-device sync.', 'success');\n }\n\n \/\/ ============================================\n \/\/ EVENT LISTENERS\n \/\/ ============================================\n document.addEventListener('DOMContentLoaded', function() {\n \/\/ Initial load\n fetchTeamsFromGoogleSheet();\n \n \/\/ Start auto-sync\n setInterval(fetchTeamsFromGoogleSheet, SYNC_INTERVAL);\n \n \/\/ Check admin session\n const session = sessionStorage.getItem('hackathon_admin');\n isAdmin = session === 'true';\n toggleAdminControls(isAdmin);\n \n \/\/ Admin login button\n document.getElementById('adminAccessBtn').addEventListener('click', () => {\n document.getElementById('adminLogin').classList.add('active');\n document.getElementById('accessCode').focus();\n });\n \n \/\/ Admin login form\n document.getElementById('loginForm').addEventListener('submit', function(e) {\n e.preventDefault();\n const accessCode = document.getElementById('accessCode').value.trim();\n \n if (accessCode === ADMIN_CODE) {\n isAdmin = true;\n sessionStorage.setItem('hackathon_admin', 'true');\n document.getElementById('adminLogin').classList.remove('active');\n toggleAdminControls(true);\n showMessage('Admin access granted!', 'success');\n } else {\n document.getElementById('loginError').classList.add('active');\n }\n });\n \n \/\/ Add team button\n document.getElementById('addTeamBtn').addEventListener('click', addNewTeam);\n \n \/\/ Logout button\n document.getElementById('logoutBtn').addEventListener('click', () => {\n isAdmin = false;\n sessionStorage.removeItem('hackathon_admin');\n toggleAdminControls(false);\n showMessage('Admin access revoked', 'success');\n });\n \n \/\/ Refresh button\n document.getElementById('refreshBtn').addEventListener('click', () => {\n fetchTeamsFromGoogleSheet();\n showMessage('Refreshing data...', 'success');\n });\n \n \/\/ Close admin login when clicking outside\n document.getElementById('adminLogin').addEventListener('click', function(e) {\n if (e.target === this) {\n this.classList.remove('active');\n document.getElementById('loginError').classList.remove('active');\n document.getElementById('accessCode').value = '';\n }\n });\n \n \/\/ Manual sync (double-click sync status)\n syncStatus.addEventListener('dblclick', () => {\n fetchTeamsFromGoogleSheet();\n showMessage('Manual sync started...', 'success');\n });\n \n \/\/ Allow Enter key in form fields\n document.getElementById('teamName').addEventListener('keypress', function(e) {\n if (e.key === 'Enter') addNewTeam();\n });\n \n document.getElementById('innovationScore').addEventListener('keypress', function(e) {\n if (e.key === 'Enter') addNewTeam();\n });\n \n document.getElementById('totalPoints').addEventListener('keypress', function(e) {\n if (e.key === 'Enter') addNewTeam();\n });\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Hackathon Leaderboard Syncing with Google Sheets… Hackathon Leaderboard Real-time ranking of teams across all devices Admin Controls \ud83d\udd04 Refresh Now Logout Admin Team Name Innovation Score Total Points   Add New Team Note: Teams must be added directly to Google Sheet for cross-device sync \ud83d\udcca Edit Google Sheet Rank Team Name Innovation Score Total Points…<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-328","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ict-alive.co.uk\/index.php?rest_route=\/wp\/v2\/pages\/328","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ict-alive.co.uk\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ict-alive.co.uk\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ict-alive.co.uk\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ict-alive.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=328"}],"version-history":[{"count":42,"href":"https:\/\/ict-alive.co.uk\/index.php?rest_route=\/wp\/v2\/pages\/328\/revisions"}],"predecessor-version":[{"id":504,"href":"https:\/\/ict-alive.co.uk\/index.php?rest_route=\/wp\/v2\/pages\/328\/revisions\/504"}],"wp:attachment":[{"href":"https:\/\/ict-alive.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=328"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}