Sparx Maths Enhancements with Dark Mode

Adds productivity tools and dark mode for Sparx Maths platform.
换行
// ==UserScript==
// @name         Sparx Maths Enhancements with Dark Mode
// @namespace    http://tampermonkey.net/
// @version      2.0
// @description  Adds productivity tools and dark mode for Sparx Maths platform.
// @author       CyphrNX
// @match        *://*.sparxmaths.uk/*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    // Inject CSS for custom styles (e.g., timer, dark mode)
    const style = document.createElement('style');
    style.id = 'custom-style';
    style.innerHTML = `
        #custom-timer {
            position: fixed;
            top: 20px;
            right: 20px;
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 10px 20px;
            border-radius: 10px;
            font-size: 16px;
            z-index: 9999;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        .highlighted {
            background-color: yellow !important;
            border: 2px solid red !important;
        }
        .dark-mode {
            background-color: #1e1e1e !important;
            color: #d4d4d4 !important;
        }
        .dark-mode input, .dark-mode textarea {
            background-color: #2d2d2d !important;
            color: #ffffff !important;
            border: 1px solid #555 !important;
        }
        .dark-mode button {
            background-color: #444 !important;
            color: #fff !important;
            border: 1px solid #555 !important;
        }
        .dark-mode a {
            color: #79b8ff !important;
        }
    `;
    document.head.appendChild(style);

    // Add dark mode toggle button
    const darkModeButton = document.createElement('button');
    darkModeButton.innerText = 'Toggle Dark Mode';
    darkModeButton.style.position = 'fixed';
    darkModeButton.style.top = '20px';
    darkModeButton.style.left = '20px';
    darkModeButton.style.zIndex = '9999';
    darkModeButton.style.padding = '10px 20px';
    darkModeButton.style.background = '#333';
    darkModeButton.style.color = '#fff';
    darkModeButton.style.border = 'none';
    darkModeButton.style.borderRadius = '5px';
    darkModeButton.style.cursor = 'pointer';
    darkModeButton.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.2)';
    document.body.appendChild(darkModeButton);

    let darkModeEnabled = false;

    // Toggle dark mode
    darkModeButton.addEventListener('click', () => {
        darkModeEnabled = !darkModeEnabled;

        if (darkModeEnabled) {
            document.documentElement.classList.add('dark-mode');
        } else {
            document.documentElement.classList.remove('dark-mode');
        }
    });

    // Highlight key elements
    function highlightImportantElements() {
        const question = document.querySelector('.question-text'); // Adjust selector based on Sparx
        const inputs = document.querySelectorAll('input[type="text"], textarea');

        if (question) {
            question.classList.add('highlighted');
        }
        inputs.forEach((input) => {
            input.classList.add('highlighted');
        });
    }
    highlightImportantElements();

    // Add a session timer
    const timer = document.createElement('div');
    timer.id = 'custom-timer';
    timer.innerText = 'Session Timer: 0:00';
    document.body.appendChild(timer);

    let seconds = 0;
    setInterval(() => {
        seconds++;
        const minutes = Math.floor(seconds / 60);
        const secs = seconds % 60;
        timer.innerText = `Session Timer: ${minutes}:${secs < 10 ? '0' : ''}${secs}`;
    }, 1000);
})();