Sparx Maths Enhancements with Dark Mode

Sparx Maths Enhancements

Adds productivity tools and enhancements for Sparx Maths platform.
目前為 2025-01-28 提交的版本，檢視最新版本。
安裝腳本 ?
Wrap lines
// ==UserScript==
// @name         Sparx Maths Enhancements
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Adds productivity tools and enhancements 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.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;
        }
        .custom-buttons {
            position: fixed;
            bottom: 20px;
            left: 20px;
            z-index: 9999;
            display: flex;
            gap: 10px;
        }
        .custom-buttons button {
            padding: 10px 20px;
            font-size: 14px;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        .custom-buttons button:hover {
            background: #0056b3;
        }
    `;
    document.head.appendChild(style);

    // 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);

    // Highlight key elements (e.g., question and input fields)
    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 dark mode toggle
    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;
    darkModeButton.addEventListener('click', () => {
        darkModeEnabled = !darkModeEnabled;
        document.body.classList.toggle('dark-mode', darkModeEnabled);
    });

    // Add quick navigation buttons
    const buttonsContainer = document.createElement('div');
    buttonsContainer.className = 'custom-buttons';

    const backButton = document.createElement('button');
    backButton.innerText = 'Back';
    backButton.onclick = () => {
        window.history.back(); // Navigate back
    };

    const refreshButton = document.createElement('button');
    refreshButton.innerText = 'Refresh';
    refreshButton.onclick = () => {
        location.reload(); // Refresh the page
    };

    const nextButton = document.createElement('button');
    nextButton.innerText = 'Next Section';
    nextButton.onclick = () => {
        alert('This button can be customised to navigate to the next section.'); // Replace with custom logic
    };

    buttonsContainer.appendChild(backButton);
    buttonsContainer.appendChild(refreshButton);
    buttonsContainer.appendChild(nextButton);
    document.body.appendChild(buttonsContainer);
})();
欢迎访问Greasy Fork镜像
