index: <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Piyush Bhardwaj</title>
    <!-- Link to external CSS -->
    <link rel="stylesheet" href="styles.css">
    <!-- Font Awesome for social media icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Google Fonts for better typography -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
    <!-- Particles Background -->
    <div id="particles-js"></div>

    <div class="container">
        <header>
            <h1>Piyush Bhardwaj</h1>
            <h2>Welcome to my personal website!</h2>
        </header>

        <section id="about">
            <h3>About Me</h3>
            <p>I'm a 15-year-old lad from New Delhi who was brought and raised in Haryana.</p>
            <!-- You can extend this paragraph with more details about yourself -->
        </section>

        <section id="hobbies-section">
            <button id="hobbies-button">My Hobbies</button>
        </section>

        <!-- Hobbies Modal -->
        <div id="hobbies-modal" class="modal">
            <div class="modal-content">
                <span class="close" id="close-hobbies">&times;</span>
                <h3>My Hobbies</h3>
                <ul class="hobbies-list">
                    <li class="hobby-item" data-detail="Geopolitics involves the study of the effects of geography on international politics and relations. I enjoy analyzing global events and understanding the underlying geopolitical strategies.">Geopolitics</li>
                    <li class="hobby-item" data-detail="Politics is the process by which groups of people make decisions. I'm passionate about understanding political systems and participating in discussions about policy and governance.">Politics</li>
                    <li class="hobby-item" data-detail="Artificial Intelligence fascinates me as it bridges the gap between technology and human intelligence. I love experimenting with AI models and staying updated with the latest advancements.">Artificial Intelligence</li>
                    <li class="hobby-item" data-detail="Web Development allows me to create and design websites. I enjoy coding, designing user interfaces, and making interactive web applications.">Web Development</li>
                    <li class="hobby-item" data-detail="Science is a broad field that satisfies my curiosity about how the world works. I enjoy reading scientific journals and conducting simple experiments.">Science</li>
                </ul>
            </div>
        </div>

        <!-- Detailed Hobby Modal -->
        <div id="detail-modal" class="modal">
            <div class="modal-content">
                <span class="close" id="close-detail">&times;</span>
                <h3 id="detail-title">Detail</h3>
                <p id="detail-text">Detailed information about the hobby.</p>
            </div>
        </div>

        <!-- Minigames Section -->
        <section id="minigames-section">
            <h3>Minigames</h3>
            <div class="games-container">
                <div class="game-card">
                    <h4>Color Clicker</h4>
                    <button class="game-button" data-game="color-clicker">Play</button>
                </div>
                <div class="game-card">
                    <h4>Trivia Quiz</h4>
                    <button class="game-button" data-game="trivia-quiz">Play</button>
                </div>
                <div class="game-card">
                    <h4>Reaction Tester</h4>
                    <button class="game-button" data-game="reaction-tester">Play</button>
                </div>
                <div class="game-card">
                    <h4>Typing Speed Test</h4>
                    <button class="game-button" data-game="typing-speed-test">Play</button>
                </div>
            </div>
        </section>

        <!-- Minigame Modals -->
        <!-- Color Clicker Modal -->
        <div id="color-clicker-modal" class="game-modal">
            <div class="game-modal-content">
                <span class="close game-close">&times;</span>
                <h3>Color Clicker</h3>
                <label for="color-clicker-timer">Select Timer:</label>
                <select id="color-clicker-timer">
                    <option value="5">5 Seconds</option>
                    <option value="10" selected>10 Seconds</option>
                    <option value="30">30 Seconds</option>
                    <option value="custom">Custom</option>
                </select>
                <input type="number" id="custom-timer-input" placeholder="Enter seconds" style="display: none;" min="1">
                <p>Click the button as many times as you can within the selected time!</p>
                <button id="color-clicker-button">Click Me!</button>
                <p>Clicks Per Second (CPS): <span id="color-clicker-cps">0</span></p>
                <p>High CPS: <span id="color-clicker-highscore">0</span></p>
            </div>
        </div>

        <!-- Trivia Quiz Modal -->
        <div id="trivia-quiz-modal" class="game-modal">
            <div class="game-modal-content">
                <span class="close game-close">&times;</span>
                <h3>Trivia Quiz</h3>
                <div id="quiz-container">
                    <p id="quiz-question">Fetching question...</p>
                    <div id="quiz-options">
                        <!-- Options will be generated here -->
                    </div>
                    <button id="retry-quiz" style="display:none;">Retry</button>
                    <button id="next-question" style="display:none;">Next</button>
                </div>
                <p>Score: <span id="quiz-score">0</span></p>
                <p>Streak: <span id="quiz-streak">0</span></p>
                <p>High Score: <span id="quiz-highscore">0</span></p>
            </div>
        </div>

        <!-- Reaction Tester Modal -->
        <div id="reaction-tester-modal" class="game-modal">
            <div class="game-modal-content">
                <span class="close game-close">&times;</span>
                <h3>Reaction Tester</h3>
                <p id="reaction-instruction">Wait for the color to change, then click as fast as you can!</p>
                <div id="reaction-box" class="reaction-box">Wait...</div>
                <p>Reaction Time: <span id="reaction-time">0</span> ms</p>
                <p>Best Time: <span id="reaction-besttime">0</span> ms</p>
                <p id="reaction-funfact"></p>
            </div>
        </div>

        <!-- Typing Speed Test Modal -->
        <div id="typing-speed-test-modal" class="game-modal">
            <div class="game-modal-content">
                <span class="close game-close">&times;</span>
                <h3>Typing Speed Test</h3>
                <p id="typing-text">Loading text...</p>
                <textarea id="typing-input" rows="4" placeholder="Start typing here..." disabled></textarea>
                <button id="typing-start">Start Test</button>
                <button id="typing-submit" style="display:none;">Submit</button>
                <p>Time Left: <span id="typing-timer">60</span> seconds</p>
                <p>Words Per Minute (WPM): <span id="typing-wpm">0</span></p>
                <p>Accuracy: <span id="typing-accuracy">0</span>%</p>
                <p>High WPM: <span id="typing-highwpm">0</span></p>
            </div>
        </div>

        <!-- Contact Me Section -->
        <section id="contact">
            <h3>Contact Me</h3>
            <div class="social-media">
                <a href="https://github.com/yourhandle" target="_blank"><i class="fab fa-github"></i></a>
                <a href="https://instagram.com/yourhandle" target="_blank"><i class="fab fa-instagram"></i></a>
                <a href="mailto:<PRESIDIO_ANONYMIZED_EMAIL_ADDRESS>"><i class="fas fa-envelope"></i></a>
            </div>
        </section>

        <!-- High Scores Section -->
        <section id="high-scores">
            <h3>High Scores</h3>
            <div class="scores-container">
                <div class="score-card">
                    <h4>Color Clicker</h4>
                    <p>High CPS: <span id="hs-color-clicker">0</span></p>
                </div>
                <div class="score-card">
                    <h4>Trivia Quiz</h4>
                    <p>High Score: <span id="hs-trivia-quiz">0</span></p>
                </div>
                <div class="score-card">
                    <h4>Reaction Tester</h4>
                    <p>Best Time: <span id="hs-reaction-tester">0</span> ms</p>
                </div>
                <div class="score-card">
                    <h4>Typing Speed Test</h4>
                    <p>High WPM: <span id="hs-typing-speed-test">0</span></p>
                </div>
            </div>
        </section>
    </div>

    <!-- Particles.js library for background effects -->
    <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
    <!-- Link to external JS -->
    <script src="script.js"></script>
</body>
</html> script:// Particles.js Configuration
particlesJS("particles-js", {
    "particles": {
        "number": {
            "value": 80,
            "density": { "enable": true, "value_area": 700 }
        },
        "color": { "value": "#2980b9" },
        "shape": {
            "type": "circle",
            "stroke": { "width": 0, "color": "#000000" },
        },
        "opacity": {
            "value": 0.5,
            "random": false,
        },
        "size": {
            "value": 3,
            "random": true,
        },
        "move": {
            "enable": true,
            "speed": 2,
        }
    },
    "interactivity": {
        "detect_on": "canvas",
        "events": {
            "onhover": { "enable": false },
            "onclick": { "enable": false },
            "resize": true
        }
    },
    "retina_detect": true
});

// Modal Handling
const hobbiesButton = document.getElementById('hobbies-button');
const hobbiesModal = document.getElementById('hobbies-modal');
const closeHobbies = document.getElementById('close-hobbies');
const hobbyItems = document.querySelectorAll('.hobby-item');
const detailModal = document.getElementById('detail-modal');
const closeDetail = document.getElementById('close-detail');
const detailTitle = document.getElementById('detail-title');
const detailText = document.getElementById('detail-text');

// Open Hobbies Modal
hobbiesButton.onclick = () => {
    hobbiesModal.style.display = 'block';
};

// Close Hobbies Modal
closeHobbies.onclick = () => {
    hobbiesModal.style.display = 'none';
};

// Open Detail Modal on Hover (Fixed to prevent blinking)
hobbyItems.forEach(item => {
    item.addEventListener('mouseover', () => {
        const title = item.textContent;
        const detail = item.getAttribute('data-detail');
        detailTitle.textContent = title;
        detailText.textContent = detail;
        detailModal.style.display = 'block';
    });

    item.addEventListener('mouseout', () => {
        detailModal.style.display = 'none';
    });
});

// Close Detail Modal
closeDetail.onclick = () => {
    detailModal.style.display = 'none';
};

// Close modals when clicking outside of them
window.onclick = function(event) {
    if (event.target === hobbiesModal) {
        hobbiesModal.style.display = 'none';
    }
    if (event.target === detailModal) {
        detailModal.style.display = 'none';
    }

    // Close game modals
    const gameModals = document.querySelectorAll('.game-modal');
    gameModals.forEach(modal => {
        if (event.target === modal) {
            modal.style.display = 'none';
        }
    });
}

// High Scores Initialization
const highScores = {
    'color-clicker': 0,
    'trivia-quiz': 0,
    'reaction-tester': 0, // Lower is better
    'typing-speed-test': 0
};

// Load High Scores from Local Storage
window.onload = () => {
    for (let game in highScores) {
        const storedScore = localStorage.getItem(`highscore-${game}`);
        if (storedScore) {
            highScores[game] = game === 'reaction-tester' ? parseInt(storedScore) : parseInt(storedScore);
        }
    }
    updateHighScoresDisplay();
}

// Update High Scores Display
function updateHighScoresDisplay() {
    document.getElementById('hs-color-clicker').textContent = highScores['color-clicker'];
    document.getElementById('hs-trivia-quiz').textContent = highScores['trivia-quiz'];
    document.getElementById('hs-reaction-tester').textContent = highScores['reaction-tester'] !== 0 ? highScores['reaction-tester'] : 'N/A';
    document.getElementById('hs-typing-speed-test').textContent = highScores['typing-speed-test'];

    // Also update individual game modals
    document.getElementById('color-clicker-highscore').textContent = highScores['color-clicker'];
    document.getElementById('quiz-highscore').textContent = highScores['trivia-quiz'];
    document.getElementById('reaction-besttime').textContent = highScores['reaction-tester'] !== 0 ? highScores['reaction-tester'] : 'N/A';
    document.getElementById('typing-highwpm').textContent = highScores['typing-speed-test'];
}

// Save High Score to Local Storage
function saveHighScore(game, score) {
    if (game === 'reaction-tester') {
        if (highScores[game] === 0 || score < highScores[game]) {
            highScores[game] = score;
            localStorage.setItem(`highscore-${game}`, score);
            updateHighScoresDisplay();
        }
    } else if (game === 'color-clicker' || game === 'trivia-quiz' || game === 'typing-speed-test') {
        if (score > highScores[game]) {
            highScores[game] = score;
            localStorage.setItem(`highscore-${game}`, score);
            updateHighScoresDisplay();
        }
    }
}

// Minigames Handling
const gameButtons = document.querySelectorAll('.game-button');
const gameModals = document.querySelectorAll('.game-modal');
const gameCloses = document.querySelectorAll('.game-close');

gameButtons.forEach(button => {
    button.addEventListener('click', () => {
        const game = button.getAttribute('data-game');
        document.getElementById(`${game}-modal`).style.display = 'block';
        if (game === 'color-clicker') startColorClicker();
        if (game === 'trivia-quiz') startTriviaQuiz();
        if (game === 'reaction-tester') startReactionTester();
        if (game === 'typing-speed-test') startTypingSpeedTest();
    });
});

gameCloses.forEach(close => {
    close.addEventListener('click', () => {
        gameModals.forEach(modal => modal.style.display = 'none');
    });
});

// ==================================================================================
// Color Clicker Game
// ==================================================================================
let colorClickerInterval;
let colorClickerScore = 0;
let colorClickerTimer = 10;
const colorClickerButton = document.getElementById('color-clicker-button');
const colorClickerCPSSpan = document.getElementById('color-clicker-cps');
const colorClickerHighScoreSpan = document.getElementById('color-clicker-highscore');
const colorClickerTimerSelect = document.getElementById('color-clicker-timer');
const customTimerInput = document.getElementById('custom-timer-input');

let clickTimes = [];

// Handle Timer Selection
colorClickerTimerSelect.addEventListener('change', () => {
    if (colorClickerTimerSelect.value === 'custom') {
        customTimerInput.style.display = 'block';
    } else {
        customTimerInput.style.display = 'none';
    }
});

// Start Color Clicker Game
function startColorClicker() {
    // Reset score and click times
    colorClickerScore = 0;
    clickTimes = [];
    colorClickerCPSSpan.textContent = '0';

    // Determine timer
    const selectedTimer = colorClickerTimerSelect.value;
    if (selectedTimer === 'custom') {
        const customTime = parseInt(customTimerInput.value);
        if (isNaN(customTime) || customTime <= 0) {
            alert('Please enter a valid custom time in seconds.');
            document.getElementById('color-clicker-modal').style.display = 'none';
            return;
        }
        colorClickerTimer = customTime;
    } else {
        colorClickerTimer = parseInt(selectedTimer);
    }

    // Reset timer display
    const timerElement = document.getElementById('color-clicker-timer-display');
    if (timerElement) {
        timerElement.remove();
    }

    // Disable Submit if any
    colorClickerButton.disabled = false;
    colorClickerButton.textContent = 'Click Me!';
    colorClickerButton.style.backgroundColor = '#e74c3c';
    colorClickerButton.style.cursor = 'pointer';

    // Start countdown
    let timeLeft = colorClickerTimer;
    const modalContent = document.querySelector('#color-clicker-modal .game-modal-content');

    const newTimerElement = document.createElement('p');
    newTimerElement.id = 'color-clicker-timer-display';
    newTimerElement.textContent = `Time Left: ${timeLeft} seconds`;
    modalContent.appendChild(newTimerElement);

    // Update visual countdown
    colorClickerInterval = setInterval(() => {
        timeLeft--;
        newTimerElement.textContent = `Time Left: ${timeLeft} seconds`;

        // Change text color and button background intensity
        const percentageLeft = timeLeft / colorClickerTimer;
        if (percentageLeft > 0.5) {
            newTimerElement.style.color = '#27ae60'; // Green
        } else if (percentageLeft > 0.2) {
            newTimerElement.style.color = '#f39c12'; // Orange
        } else {
            newTimerElement.style.color = '#e74c3c'; // Red
        }

        // Change button background intensity
        const intensity = 0.5 + (percentageLeft * 0.5); // Scale between 0.5 and 1
        colorClickerButton.style.backgroundColor = `rgba(231, 76, 60, ${intensity})`;

        if (timeLeft <= 0) {
            endColorClickerGame();
        }
    }, 1000);

    // Handle Clicks
    colorClickerButton.onclick = () => {
        colorClickerScore++;
        clickTimes.push(new Date().getTime());
        calculateCPS();
    };
}

// Calculate CPS
function calculateCPS() {
    const currentTime = new Date().getTime();
    // Remove clicks older than 1 second
    clickTimes = clickTimes.filter(time => currentTime - time <= 1000);
    const cps = clickTimes.length;
    colorClickerCPSSpan.textContent = cps;
}

// End Color Clicker Game
function endColorClickerGame() {
    clearInterval(colorClickerInterval);
    colorClickerButton.disabled = true;
    colorClickerButton.textContent = 'Time Up!';
    colorClickerButton.style.backgroundColor = '#95a5a6';
    colorClickerButton.style.cursor = 'not-allowed';

    // Calculate average CPS
    let totalCPS = 0;
    clickTimes.forEach(time => {
        totalCPS += 1; // Each click within the last second counts as 1 CPS
    });
    const averageCPS = totalCPS;

    colorClickerCPSSpan.textContent = averageCPS;

    // Update High Score
    saveHighScore('color-clicker', averageCPS);

    // Flash background briefly
    document.body.style.backgroundColor = '#2ecc71';
    setTimeout(() => {
        document.body.style.backgroundColor = '#f0f4f8';
    }, 500);
}

// ==================================================================================
// Trivia Quiz Game
// ==================================================================================
let currentQuizQuestion = {};
let quizScore = 0;
let quizStreak = 0;
const quizQuestionElement = document.getElementById('quiz-question');
const quizOptionsContainer = document.getElementById('quiz-options');
const nextQuestionBtn = document.getElementById('next-question');
const retryQuizBtn = document.getElementById('retry-quiz');
const quizScoreSpan = document.getElementById('quiz-score');
const quizStreakSpan = document.getElementById('quiz-streak');
const quizHighScoreSpan = document.getElementById('quiz-highscore');

// Start Trivia Quiz
function startTriviaQuiz() {
    quizScore = 0;
    quizStreak = 0;
    quizScoreSpan.textContent = quizScore;
    quizStreakSpan.textContent = quizStreak;
    fetchNextQuestion();
}

// Fetch Next Question from Open Trivia DB API
async function fetchNextQuestion() {
    quizOptionsContainer.innerHTML = 'Loading question...';
    quizQuestionElement.textContent = 'Fetching question...';
    try {
        const response = await fetch('https://opentdb.com/api.php?amount=1&type=multiple');
        const data = await response.json();
        if (data.response_code === 0 && data.results.length > 0) {
            currentQuizQuestion = data.results[0];
            displayQuizQuestion();
        } else {
            throw new Error('No questions available');
        }
    } catch (error) {
        console.error('Error fetching trivia questions:', error);
        quizQuestionElement.textContent = 'Failed to load question.';
        addRetryButton();
    }
}

// Display Quiz Question
function displayQuizQuestion() {
    quizQuestionElement.innerHTML = decodeHTML(currentQuizQuestion.question);
    const options = [...currentQuizQuestion.incorrect_answers];
    options.push(currentQuizQuestion.correct_answer);
    shuffleArray(options);
    quizOptionsContainer.innerHTML = '';
    options.forEach(option => {
        const button = document.createElement('button');
        button.classList.add('quiz-option');
        button.innerHTML = decodeHTML(option);
        button.onclick = () => selectQuizOption(option);
        quizOptionsContainer.appendChild(button);
    });
}

// Select Quiz Option
function selectQuizOption(selectedOption) {
    const correctAnswer = decodeHTML(currentQuizQuestion.correct_answer);
    const allOptions = document.querySelectorAll('.quiz-option');
    allOptions.forEach(button => {
        button.disabled = true;
        if (button.textContent === correctAnswer) {
            button.style.backgroundColor = '#27ae60'; // Correct answer
        } else if (button.textContent === decodeHTML(selectedOption)) {
            button.style.backgroundColor = '#e74c3c'; // Incorrect selection
        }
    });

    if (selectedOption === correctAnswer) {
        quizScore++;
        quizStreak++;
        quizScoreSpan.textContent = quizScore;
        quizStreakSpan.textContent = quizStreak;
    } else {
        quizStreak = 0;
        quizStreakSpan.textContent = quizStreak;
    }

    // Update High Score
    saveHighScore('trivia-quiz', quizScore);

    nextQuestionBtn.style.display = 'block';
}

// Next Question
nextQuestionBtn.onclick = () => {
    nextQuestionBtn.style.display = 'none';
    fetchNextQuestion();
}

// Add Retry Button
function addRetryButton() {
    retryQuizBtn.style.display = 'block';
}

retryQuizBtn.onclick = () => {
    retryQuizBtn.style.display = 'none';
    startTriviaQuiz();
}

// Decode HTML entities
function decodeHTML(html) {
    const txt = document.createElement('textarea');
    txt.innerHTML = html;
    return txt.value;
}

// Shuffle array in place
function shuffleArray(array) {
    for (let i = array.length -1; i >0; i--){
        const j = Math.floor(Math.random() * (i+1));
        [array[i], array[j]] = [array[j], array[i]];
    }
    return array;
}

// ==================================================================================
// Reaction Tester Game
// ==================================================================================
let reactionStartTime, reactionEndTime;
let reactionTimeout;
const reactionBox = document.getElementById('reaction-box');
const reactionInstruction = document.getElementById('reaction-instruction');
const reactionTimeSpan = document.getElementById('reaction-time');
const reactionBestTimeSpan = document.getElementById('reaction-besttime');
const reactionFunFact = document.getElementById('reaction-funfact');

// Start Reaction Tester
function startReactionTester() {
    reactionTimeSpan.textContent = '0';
    reactionFunFact.textContent = '';
    reactionInstruction.textContent = 'Wait for the color to change, then click as fast as you can!';
    reactionBox.style.backgroundColor = '#e74c3c';
    reactionBox.textContent = 'Wait...';
    reactionBox.style.cursor = 'default';
    reactionEndTime = 0;
    reactionBox.onclick = () => {
        if (reactionStartTime) {
            reactionEndTime = new Date().getTime();
            const reactionTime = reactionEndTime - reactionStartTime;
            reactionTimeSpan.textContent = reactionTime;
            reactionBox.style.backgroundColor = '#2980b9';
            reactionBox.textContent = 'Start Again';
            reactionBox.style.cursor = 'pointer';
            saveHighScore('reaction-tester', reactionTime);
            displayFunFact(reactionTime);
            reactionBox.onclick = startReactionTester;
        } else {
            // Clicked too early
            clearTimeout(reactionTimeout);
            alert('Too soon! Click to try again.');
            reactionInstruction.textContent = 'Too soon! Wait for the color to change, then click.';
            reactionBox.style.backgroundColor = '#e74c3c';
            reactionBox.textContent = 'Wait...';
            reactionBox.style.cursor = 'default';
            reactionBox.onclick = startReactionTester;
        }
    };

    // Set random timeout between 2 to 5 seconds
    const randomDelay = Math.floor(Math.random() * 3000) + 2000;
    reactionTimeout = setTimeout(() => {
        reactionStartTime = new Date().getTime();
        reactionBox.style.backgroundColor = '#27ae60';
        reactionBox.textContent = 'Click!';
        reactionBox.style.cursor = 'pointer';
    }, randomDelay);
}

// Display Fun Fact based on reaction time
function displayFunFact(reactionTime) {
    const facts = [
        { threshold: 200, fact: "Amazing! You're as swift as a peregrine falcon's dive." },
        { threshold: 300, fact: "Great job! Almost as fast as a cheetah." },
        { threshold: 400, fact: "Good speed! Comparable to a sloth's deliberate pace." },
        { threshold: Infinity, fact: "Keep practicing to be even quicker!" }
    ];

    for (let fact of facts) {
        if (reactionTime <= fact.threshold) {
            reactionFunFact.textContent = fact.fact;
            break;
        }
    }

    // Add average human reaction time as a fact
    reactionFunFact.textContent += " Average human reaction time is around 250 milliseconds.";
}

// ==================================================================================
// Typing Speed Test Game
// ==================================================================================
let typingTimerInterval;
let typingTimeLeft = 60;
let typingStartTime;
let typingWordsTyped = 0;
let typingCorrectChars = 0;
let typingTotalChars = 0;
let typingSampleText = '';
let typingBestWPM = 0;
let typingAccuracy = 0;
let typingSubmitted = false;

const typingTextElement = document.getElementById('typing-text');
const typingInput = document.getElementById('typing-input');
const typingStartBtn = document.getElementById('typing-start');
const typingSubmitBtn = document.getElementById('typing-submit');
const typingTimerSpan = document.getElementById('typing-timer');
const typingWPMSpan = document.getElementById('typing-wpm');
const typingAccuracySpan = document.getElementById('typing-accuracy');
const typingHighWPMSpan = document.getElementById('typing-highwpm');

// Sample Texts
const sampleTexts = [
    "The quick brown fox jumps over the lazy dog.",
    "Artificial Intelligence is transforming the world.",
    "Web development is both challenging and rewarding.",
    "Geopolitics plays a crucial role in international relations.",
    "Science uncovers the mysteries of the universe."
    // Add more sample texts as desired
];

// Start Typing Speed Test
function startTypingSpeedTest() {
    // Reset variables
    typingWordsTyped = 0;
    typingCorrectChars = 0;
    typingTotalChars = 0;
    typingAccuracy = 0;
    typingWPMSpan.textContent = '0';
    typingAccuracySpan.textContent = '0';
    typingInput.value = '';
    typingInput.disabled = false;
    typingSubmitBtn.style.display = 'none';
    typingStartBtn.style.display = 'none';
    typingSampleText = getRandomText();
    typingTextElement.textContent = typingSampleText;
    typingTimeLeft = 60;
    typingTimerSpan.textContent = typingTimeLeft;
    typingSubmitted = false;

    // Reset high WPM display
    typingHighWPMSpan.textContent = highScores['typing-speed-test'] !== 0 ? highScores['typing-speed-test'] : '0';

    // Start Timer
    typingTimerInterval = setInterval(() => {
        typingTimeLeft--;
        typingTimerSpan.textContent = typingTimeLeft;
        if (typingTimeLeft <= 0) {
            endTypingSpeedTest();
        }
    }, 1000);

    // Enable input
    typingInput.disabled = false;
    typingInput.focus();

    // Set event listeners
    typingInput.value = '';
    typingInput.addEventListener('input', handleTypingInput);
}

// Get Random Sample Text
function getRandomText() {
    const index = Math.floor(Math.random() * sampleTexts.length);
    return sampleTexts[index];
}

// Handle Typing Input
function handleTypingInput() {
    const input = typingInput.value;
    typingCorrectChars = 0;
    typingTotalChars = input.length;

    for (let i = 0; i < input.length; i++) {
        if (input[i] === typingSampleText[i]) {
            typingCorrectChars++;
        }
    }

    typingWordsTyped = input.trim().split(/\s+/).length;
    typingAccuracy = typingTotalChars === 0 ? 0 : ((typingCorrectChars / typingTotalChars) * 100).toFixed(2);
    typingAccuracySpan.textContent = typingAccuracy;
}

// End Typing Speed Test
function endTypingSpeedTest() {
    clearInterval(typingTimerInterval);
    typingInput.disabled = true;
    typingSubmitBtn.style.display = 'block';
    typingStartBtn.style.display = 'block';

    typingSubmitBtn.onclick = calculateTypingResults;
}

// Calculate Typing Results
function calculateTypingResults() {
    if (typingSubmitted) return;
    typingSubmitted = true;

    const wpm = Math.floor(typingWordsTyped * (60 / (60 - typingTimeLeft)));
    typingWPMSpan.textContent = wpm;
    typingAccuracySpan.textContent = typingAccuracy;

    // Update High WPM
    if (wpm > highScores['typing-speed-test']) {
        saveHighScore('typing-speed-test', wpm);
    }

    alert(`Test Completed!\nWPM: ${wpm}\nAccuracy: ${typingAccuracy}%`);
}

// ==================================================================================
// Utility Functions
// ==================================================================================

// Function to shuffle array in place
function shuffleArray(array) {
    for (let i = array.length -1; i >0; i--){
        const j = Math.floor(Math.random() * (i+1));
        [array[i], array[j]] = [array[j], array[i]];
    }
    return array;
} stylle:/* General Styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: #f0f4f8;
    color: #333;
    line-height: 1.6;
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
}

.container {
    max-width: 1000px;
    margin: auto;
    padding: 20px;
    position: relative;
    z-index: 1;
}

/* Particles Background */
#particles-js {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 0;
    top: 0;
    left: 0;
}

/* Header Styles */
header {
    text-align: center;
    padding: 100px 0 40px 0;
}

header h1 {
    font-size: 3.5em;
    color: #2c3e50;
    text-shadow: 2px 2px #bdc3c7;
}

header h2 {
    font-size: 1.5em;
    color: #34495e;
    margin-top: 10px;
}

/* About Section */
#about {
    margin: 40px 0;
}

#about h3 {
    font-size: 2em;
    color: #2c3e50;
    margin-bottom: 10px;
    border-bottom: 2px solid #bdc3c7;
    display: inline-block;
    padding-bottom: 5px;
}

#about p {
    font-size: 1.1em;
    color: #555;
    margin-top: 10px;
}

/* Hobbies Button */
#hobbies-section {
    text-align: center;
    margin: 30px 0;
}

#hobbies-button {
    padding: 15px 30px;
    font-size: 1.2em;
    background-color: #2980b9;
    color: #fff;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

#hobbies-button:hover {
    background-color: #1f618d;
    transform: scale(1.05);
}

/* Modal Styles */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 100; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
    padding-top: 60px;
}

.modal-content {
    background-color: #fff;
    margin: 5% auto;
    padding: 30px;
    border: 1px solid #888;
    width: 80%;
    max-width: 600px;
    border-radius: 10px;
    position: relative;
    animation: fadeIn 0.5s;
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1;}
}

.close {
    color: #aaa;
    position: absolute;
    top: 15px;
    right: 25px;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
}

/* Hobbies List */
.hobbies-list {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.hobby-item {
    padding: 15px 20px;
    margin: 10px 0;
    background-color: #ecf0f1;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    position: relative;
    overflow: hidden;
}

.hobby-item::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-color: #2980b9;
    transform: rotate(45deg) scale(0);
    transition: transform 0.3s ease;
    z-index: 0;
}

.hobby-item:hover::before {
    transform: rotate(45deg) scale(1);
}

.hobby-item:hover {
    color: #fff;
    transform: scale(1.02);
}

.hobby-item span {
    position: relative;
    z-index: 1;
}

/* Detailed Hobby Modal */
#detail-modal h3 {
    color: #2980b9;
}

/* Minigames Section */
#minigames-section {
    margin: 50px 0;
}

#minigames-section h3 {
    font-size: 2em;
    color: #2c3e50;
    margin-bottom: 20px;
    border-bottom: 2px solid #bdc3c7;
    display: inline-block;
    padding-bottom: 5px;
}

.games-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.game-card {
    background-color: #ecf0f1;
    padding: 20px;
    border-radius: 10px;
    width: 250px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.game-card:hover {
    background-color: #d0d7de;
    transform: translateY(-5px);
}

.game-card h4 {
    margin-bottom: 15px;
    color: #2980b9;
}

.game-button {
    padding: 10px 20px;
    font-size: 1em;
    background-color: #3498db;
    color: #fff;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.game-button:hover {
    background-color: #2980b9;
    transform: scale(1.05);
}

/* Game Modals */
.game-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 200; /* Sit on top of other modals */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
    padding-top: 60px;
}

.game-modal-content {
    background-color: #fff;
    margin: 5% auto;
    padding: 30px;
    border: 2px solid #2980b9;
    width: 90%;
    max-width: 700px;
    border-radius: 15px;
    position: relative;
    animation: zoomIn 0.5s;
}

@keyframes zoomIn {
    from {transform: scale(0.7);}
    to {transform: scale(1);}
}

/* Game Styles */

/* Color Clicker */
#color-clicker-timer {
    padding: 8px;
    margin: 10px 0 20px 0;
    font-size: 1em;
    border-radius: 5px;
    border: 1px solid #ccc;
    width: 200px;
}

#custom-timer-input {
    padding: 8px;
    margin-bottom: 20px;
    font-size: 1em;
    border-radius: 5px;
    border: 1px solid #ccc;
    width: 200px;
}

#color-clicker-button {
    padding: 15px 30px;
    font-size: 1.2em;
    background-color: #e74c3c;
    color: #fff;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-bottom: 20px;
}

#color-clicker-button:hover {
    background-color: #c0392b;
    transform: scale(1.05);
}

#color-clicker-cps,
#quiz-score,
#quiz-streak,
#quiz-highscore,
#reaction-time,
#reaction-besttime,
#typing-wpm,
#typing-accuracy,
#typing-highwpm {
    font-weight: bold;
    color: #27ae60;
}

#color-clicker-highscore,
#quiz-highscore,
#memory-highscore,
#reaction-besttime,
#typing-highwpm {
    font-weight: bold;
    color: #e67e22;
}

/* Quiz Options */
.quiz-option {
    background-color: #2980b9;
    color: #fff;
    padding: 10px 15px;
    margin: 10px 0;
    border: none;
    border-radius: 8px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.quiz-option:hover {
    background-color: #1f618d;
    transform: scale(1.02);
}

#next-question,
#retry-quiz {
    padding: 10px 20px;
    font-size: 1em;
    background-color: #27ae60;
    color: #fff;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-top: 20px;
}

#next-question:hover,
#retry-quiz:hover {
    background-color: #1e8449;
    transform: scale(1.05);
}

/* Reaction Tester */
.reaction-box {
    width: 200px;
    height: 200px;
    background-color: #e74c3c;
    margin: 20px auto;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5em;
    transition: background-color 0.3s ease;
}

/* Typing Speed Test */
#typing-text {
    font-size: 1.2em;
    margin-bottom: 15px;
}

#typing-input {
    width: 100%;
    padding: 10px;
    font-size: 1em;
    border: 2px solid #2980b9;
    border-radius: 5px;
    resize: none;
    margin-bottom: 15px;
}

#typing-start {
    padding: 10px 20px;
    font-size: 1em;
    background-color: #27ae60;
    color: #fff;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

#typing-start:hover {
    background-color: #1e8449;
    transform: scale(1.05);
}

#typing-submit {
    padding: 10px 20px;
    font-size: 1em;
    background-color: #27ae60;
    color: #fff;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-top: 10px;
}

#typing-submit:hover {
    background-color: #1e8449;
    transform: scale(1.05);
}

#typing-timer,
#typing-wpm,
#typing-accuracy,
#typing-highwpm {
    font-weight: bold;
    color: #27ae60;
}

/* High Scores Section */
#high-scores {
    text-align: center;
    margin: 40px 0;
    padding-bottom: 40px;
}

#high-scores h3 {
    font-size: 2em;
    color: #2c3e50;
    margin-bottom: 20px;
    border-bottom: 2px solid #bdc3c7;
    display: inline-block;
    padding-bottom: 5px;
}

.scores-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.score-card {
    background-color: #ecf0f1;
    padding: 15px 20px;
    border-radius: 8px;
    width: 200px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.score-card:hover {
    background-color: #d0d7de;
    transform: translateY(-3px);
}

.score-card h4 {
    margin-bottom: 10px;
    color: #2980b9;
}

/* Contact Section */
#contact {
    text-align: center;
    margin: 40px 0;
    padding-bottom: 40px;
}

#contact h3 {
    font-size: 2em;
    color: #2c3e50;
    margin-bottom: 20px;
    border-bottom: 2px solid #bdc3c7;
    display: inline-block;
    padding-bottom: 5px;
}

.social-media a {
    color: #2980b9;
    margin: 0 15px;
    font-size: 2.5em;
    transition: color 0.3s ease, transform 0.2s ease;
}

.social-media a:hover {
    color: #1f618d;
    transform: scale(1.1);
}

/* Responsive Design */
@media (max-width: 768px) {
    .games-container {
        flex-direction: column;
        align-items: center;
    }

    .game-card {
        width: 80%;
    }
}

@media (max-width: 600px) {
    header h1 {
        font-size: 2.5em;
    }

    header h2 {
        font-size: 1.2em;
    }

    .modal-content, .game-modal-content {
        width: 95%;
    }

    #reaction-box {
        width: 150px;
        height: 150px;
    }
} When hovering over any of my hobby in hobby section, the hovering effct gets wierd and starts blinking the page so fix it. In colour clicker, the time should only start upont clicking "click her". Optimise the trivia sections connection as it hits errors a lot. If you spam click reaction time button, it spits out randoms numbers which effect the high score, so fix it and add more tips and make it more accurate. The CPS should not be counted realtime, instead clicks should be counted then divided by time should give CPS. In Typing speed test, disable copy and paste and reduce the time to 10 seconds. Make it more accurate and it should have an end button (or hit enter). Add more original, unique, well thought and fun games