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;
} style:/* 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;
    }
}