nt document.getElementById(`${tabId}-content`).style.display = 'block'; // Update tab styling Object.values(tabElements).forEach(tab => { tab.style.backgroundColor = 'transparent'; }); tabElements[tabId].style.backgroundColor = 'rgba(255, 255, 255, 0.2)'; } return { keystrokeDisplay, pingDisplay, urlInput, fpsDisplay, reactionDisplay, mouseTracker }; }; // Track keystrokes const handleKeyDown = (event) => { const keystrokeDisplay = document.getElementById('keystroke-display'); if (!keystrokeDisplay) return; const key = event.key === ' ' ? 'Space' : event.key; const keyElement = document.createElement('span'); keyElement.textContent = `${key} `; keyElement.style.cssText = ` display: inline-block; background-color: rgba(255, 255, 255, 0.2); padding: 2px 5px; margin: 2px; border-radius: 3px; `; keystrokeDisplay.appendChild(keyElement); keystrokeDisplay.scrollTop = keystrokeDisplay.scrollHeight; // Limit the number of displayed keystrokes if (keystrokeDisplay.childNodes.length > 15) { keystrokeDisplay.removeChild(keystrokeDisplay.childNodes[0]); } }; // Ping website const pingWebsite = async () => { const pingDisplay = document.getElementById('ping-display'); const urlInput = document.getElementById('ping-url'); if (!pingDisplay || !urlInput) return; const url = urlInput.value; if (!url) { pingDisplay.textContent = 'Please enter a URL'; return; } try { pingDisplay.textContent = 'Pinging...'; const startTime = performance.now(); // Use fetch with a timeout to ping the website const controller = new AbortController(); const timeoutId = setTimeout(() => controller.abort(), 10000); await fetch(url, { mode: 'no-cors', cache: 'no-store', signal: controller.signal }); clearTimeout(timeoutId); const endTime = performance.now(); const pingTime = Math.round(endTime - startTime); // Display ping result with color based on ping time let color = 'green'; if (pingTime > 300) color = 'orange'; if (pingTime > 600) color = 'red'; pingDisplay.innerHTML = `Ping to ${url}: ${pingTime}ms`; } catch (error) { pingDisplay.innerHTML = `Error pinging ${url}: ${error.name === 'AbortError' ? 'Timeout' : error.message}`; } }; // FPS counter let fpsAnimationFrame; let frameCount = 0; let lastTime = performance.now(); const updateFPS = () => { const fpsDisplay = document.getElementById('fps-display'); if (!fpsDisplay) return; frameCount++; const currentTime = performance.now(); if (currentTime - lastTime >= 1000) { const fps = Math.round(frameCount * 1000 / (currentTime - lastTime)); // Color based on FPS let color = 'green'; if (fps < 60) color = 'orange'; if (fps < 30) color = 'red'; fpsDisplay.innerHTML = `FPS: ${fps}`; frameCount = 0; lastTime = currentTime; } fpsAnimationFrame = requestAnimationFrame(updateFPS); }; // Reaction time tester let reactionStartTime; let reactionState = 'idle'; function startReactionTest() { const reactionDisplay = document.getElementById('reaction-display'); if (!reactionDisplay) return; if (reactionState === 'idle') { reactionDisplay.textContent = 'Wait for green...'; reactionDisplay.style.backgroundColor = 'red'; reactionState = 'waiting'; // Random delay between 1-5 seconds const delay = 1000 + Math.random() * 4000; setTimeout(() => { if (reactionState === 'waiting') { reactionDisplay.textContent = 'CLICK NOW!'; reactionDisplay.style.backgroundColor = 'green'; reactionStartTime = performance.now(); reactionState = 'testing'; } }, delay); } else if (reactionState === 'waiting') { // Clicked too early reactionDisplay.textContent = 'Too early! Click to try again.'; reactionDispl