☰

Wizardebop

⚒ Advanced Acellus Mod/Custom Pack ⚒

目前為 2025-02-04 提交的版本，檢視 最新版本。

// ==UserScript==
// @name Wizardebop
// @author Type Stuff
// @description ⚒ Advanced Acellus Mod/Custom Pack ⚒
// @version 10.5
// @match https://admin192a.acellus.com/student/*
// @license MIT
// @match https://admin192c.acellus.com/student/*
// @run-at document-start
// @grant none
// @namespace https://greasyfork.org/users/1394549
// @icon https://i.pinimg.com/originals/44/66/ec/4466ecf1a7b1cfb3c40a014386e2fa57.png
// ==/UserScript==

(function () {
    'use strict';

    // Add styles for the settings menu, overlay, visual effects, and animated wallpapers.
    const style = document.createElement('style');
    style.innerHTML = `
        @keyframes animated-wallpaper {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        @keyframes snowfall {
            0% { transform: translateY(-10px); }
            100% { transform: translateY(100vh); }
        }

        @keyframes raindrop {
            0% { transform: translateY(-50px); opacity: 0.7; }
            100% { transform: translateY(100vh); opacity: 1; }
        }

        @keyframes floating-emoji {
            0% { transform: translateY(0); opacity: 1; }
            50% { transform: translateY(-30px); opacity: 0.8; }
            100% { transform: translateY(0); opacity: 1; }
        }

        @keyframes color-particles {
            0% { transform: translateX(0) translateY(0); opacity: 1; }
            100% { transform: translateX(200px) translateY(200px); opacity: 0; }
        }

        #settings-button {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #28a745;
            color: white;
            border: none;
            border-radius: 5px;
            padding: 10px 20px;
            cursor: pointer;
            font-size: 16px;
            z-index: 1002;
            transition: background-color 0.3s ease;
        }

        #settings-button:hover {
            background-color: #218838;
        }

        #settings-menu {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 75%;
            max-width: 900px;
            max-height: 80%; /* Limit height to 80% of the viewport */
            overflow-y: auto; /* Enable vertical scroll */
            background: linear-gradient(45deg, #ffd700, #ff69b4, #e0e0e0, #f0e68c);
            background-size: 200% 200%;
            animation: animated-wallpaper 8s ease infinite;
            border-radius: 15px;
            padding: 0;
            box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.3);
            z-index: 1001;
            display: none;
            overflow: hidden;
        }

        .settings-content {
            display: flex;
            width: 100%;
            height: 100%;
            border-radius: 15px;
        }

        .settings-categories {
            width: 25%;
            background-color: rgba(200, 200, 200, 0.9);
            padding: 20px 15px;
            box-sizing: border-box;
            margin: 0;
            border-top-left-radius: 15px;
            border-bottom-left-radius: 15px;
            transition: background-color 0.3s ease;
        }

        .settings-details {
            width: 75%;
            padding: 20px;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            background-color: transparent;
        }

        #settings-menu h2 {
            margin-top: 0;
            color: #333;
        }

        .settings-categories button {
            width: 100%;
            padding: 12px;
            margin: 8px 0;
            border: none;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 8px;
            cursor: pointer;
            text-align: left;
            color: #333;
            font-weight: bold;
            transition: background-color 0.3s ease, transform 0.2s ease;
        }

        .settings-categories button:hover {
            background-color: #007bff;
            color: white;
            transform: scale(1.05);
        }

        .category-menu {
            padding: 10px;
            background: rgba(249, 249, 249, 0.8);
            border-radius: 10px;
            display: none;
        }

        #overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6);
            display: none;
            z-index: 1000;
            backdrop-filter: blur(8px);
        }

        #close-settings {
            background: none;
            border: none;
            color: #ffffff;
            font-size: 1.5rem;
            position: absolute;
            top: 15px;
            right: 15px;
            cursor: pointer;
            transition: color 0.3s ease;
        }

        #close-settings:hover {
            color: #555;
        }

        #close-settings::before {
            content: '✖';
        }

        /* Dark Mode Styles */
        body.dark-mode {
            background-color: #121212;
            color: #e0e0e0;
        }

        .dark-mode #settings-menu {
            background: linear-gradient(45deg, #2f2f2f, #0e4c92, #00bcd4, #008080, #454545, #1c1c1c, #274472, #026873, #123456, #0a0a0a);
            background-size: 200% 200%;
            animation: animated-wallpaper 8s ease infinite;
        }

        .dark-mode .settings-categories {
            background-color: rgba(80, 80, 80, 0.7);
        }

        .dark-mode .settings-categories button {
            background-color: #333333;
            color: #e0e0e0;
        }

        .dark-mode .settings-categories button:hover {
            background-color: #555555;
            color: #ffffff;
        }

        .dark-mode .category-menu {
            background: rgba(68, 68, 68, 0.8);
            color: #e0e0e0;
        }

        .dark-mode #close-settings {
            color: #8b0000;
        }

        .dark-mode #close-settings:hover {
            color: #ff6347;
        }

        #apply-appearance {
            margin-top: 15px;
            padding: 10px;
            background-color: #007bff;
            color: #ffffff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        #apply-appearance:hover {
            background-color: #0056b3;
        }

        .gradient-option {
            display: inline-block;
            width: 80px;
            height: 50px;
            margin: 5px;
            border-radius: 8px;
            cursor: pointer;
            border: 2px solid transparent;
            transition: border-color 0.3s ease;
        }

        .gradient-option:hover {
            border-color: #007bff;
        }

        #wallpaper-preview {
            margin-top: 10px;
            display: flex;
            flex-wrap: wrap;
        }

        .gradient-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: 200% 200%;
            animation: animated-wallpaper 20s ease infinite;
            z-index: -1;
        }

        .snowflake, .raindrop, .star, .firefly, .emoji, .particle {
            position: fixed;
            top: -10px;
            font-size: 20px;
            color: white;
            z-index: 1005;
        }

        .snowflake {
            animation: snowfall 10s linear infinite;
        }

        .raindrop {
            animation: raindrop 5s linear infinite;
            font-size: 12px;
            color: #00bfff;
        }

        .star {
            animation: twinkling 3s infinite alternate;
            color: #fffacd;
            font-size: 10px;
        }

        .firefly {
            background-color: yellow;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            animation: twinkling 2s infinite alternate;
        }

        .emoji {
            animation: floating-emoji 4s infinite alternate;
            font-size: 30px;
        }

        .particle {
            animation: color-particles 6s linear infinite;
            background-color: #ff4081;
            border-radius: 50%;
            width: 10px;
            height: 10px;
        }

        #clock-widget {
            position: fixed;
            top: 20px;
            left: 20px;
            background-color: #333;
            color: #fff;
            padding: 10px 20px;
            border-radius: 8px;
            font-family: Arial, sans-serif;
            font-size: 18px;
            z-index: 1005;
            user-select: none;
            cursor: grab; /* Indicate it's draggable */
        }
    `;
    document.head.appendChild(style);

    // Create the settings button, menu, gradient options, and clock.
    const settingsButton = document.createElement('button');
    settingsButton.id = 'settings-button';
    settingsButton.innerHTML = 'Settings';
    document.body.appendChild(settingsButton);

    const settingsMenu = document.createElement('div');
    settingsMenu.id = 'settings-menu';
    settingsMenu.innerHTML = `
        <div class="settings-content">
            <div class="settings-categories">
                <button class="category-btn" data-category="general">General</button>
                <button class="category-btn" data-category="appearance">Appearance</button>
                <button class="category-btn" data-category="wallpaper">Wallpaper</button>
                <button class="category-btn" data-category="effects">Effects</button>
                <button class="category-btn" data-category="widgets">Widgets</button>
            </div>
            <div class="settings-details">
                <div class="category-menu" id="general-menu">
                    <label><input type="checkbox" id="enable-notifications"> Enable Notifications</label><br>
                    <label><input type="checkbox" id="auto-save-progress"> Auto-Save Progress</label><br>
                    <label><input type="checkbox" id="focus-mode"> Enable Focus Mode</label><br>
                    <label><input type="checkbox" id="auto-dark-mode"> Enable Auto Dark Mode</label><br>
                    <label><input type="checkbox" id="disable-animations"> Disable Animations</label><br>
                    <button id="apply-general">Apply General Settings</button>
                </div>
                <div class="category-menu" id="appearance-menu">
                    <h2>Appearance Settings</h2>
                    <label>Theme:
                        <select id="theme-selector">
                            <option value="light">Light</option>
                            <option value="dark">Dark</option>
                        </select>
                    </label><br>
                    <label>Gradient Speed:
                        <input type="range" id="gradient-speed" min="5" max="30" step="1" value="20">
                    </label><br>
                    <label><input type="checkbox" id="enable-animations"> Enable Animations</label><br>
                    <label><input type="checkbox" id="enable-background-blur"> Enable Background Blur</label><br>
                    <button id="apply-appearance">Apply</button>
                </div>
                <div class="category-menu" id="wallpaper-menu">
                    <h2>Wallpaper Settings</h2>
                    <label>Custom Wallpaper (Image/GIF URL):
                        <input type="text" id="custom-wallpaper-url" placeholder="Enter image or gif URL" />
                    </label><br>
                    <div id="wallpaper-preview">
                        <!-- Gradient options will be appended here -->
                    </div>
                </div>
                <div class="category-menu" id="effects-menu">
                    <h2>Visual Effects</h2>
                    <label><input type="checkbox" id="enable-snowfall"> Enable Snowfall Effect</label><br>
                    <label><input type="checkbox" id="enable-rain"> Enable Minecraft-Like Rain Effect</label><br>
                    <label><input type="checkbox" id="enable-stars"> Enable Twinkling Stars Effect</label><br>
                    <label><input type="checkbox" id="enable-fireflies"> Enable Fireflies Effect</label><br>
                    <label><input type="checkbox" id="enable-floating-emojis"> Enable Floating Emojis</label><br>
                    <label><input type="checkbox" id="enable-particles"> Enable Color Particles</label><br>
                    <button id="apply-effects">Apply Effects</button>
                </div>
                <div class="category-menu" id="widgets-menu">
                    <h2>Widgets</h2>
                    <label><input type="checkbox" id="enable-clock-widget"> Enable Clock Widget</label><br>
                    <button id="apply-widgets">Apply Widgets</button>
                </div>
            </div>
        </div>
        <button id="close-settings"></button>
    `;
    document.body.appendChild(settingsMenu);
    settingsMenu.style.display = 'none';

    const overlay = document.createElement('div');
    overlay.id = 'overlay';
    document.body.appendChild(overlay);
    overlay.style.display = 'none';

    // Clock widget
    const clockWidget = document.createElement('div');
    clockWidget.id = 'clock-widget';
    document.body.appendChild(clockWidget);
    clockWidget.style.display = 'none';

    // Update clock every second
    setInterval(() => {
        const now = new Date();
        clockWidget.textContent = now.toLocaleTimeString();
    }, 1000);

    // Make the clock widget draggable
    clockWidget.onmousedown = function (event) {
        event.preventDefault();
        let shiftX = event.clientX - clockWidget.getBoundingClientRect().left;
        let shiftY = event.clientY - clockWidget.getBoundingClientRect().top;

        function moveAt(pageX, pageY) {
            clockWidget.style.left = pageX - shiftX + 'px';
            clockWidget.style.top = pageY - shiftY + 'px';
        }

        function onMouseMove(event) {
            moveAt(event.pageX, event.pageY);
        }

        document.addEventListener('mousemove', onMouseMove);

        clockWidget.onmouseup = function () {
            document.removeEventListener('mousemove', onMouseMove);
            clockWidget.onmouseup = null;
        };
    };

    clockWidget.ondragstart = function () {
        return false;
    };

    // New General Productivity Settings Functions
    function applyFocusMode(enable) {
        if (enable) {
            document.body.style.filter = "blur(0)"; // Reset blurs
            document.querySelectorAll('.distracting-element').forEach(el => el.style.display = 'none');
        } else {
            document.querySelectorAll('.distracting-element').forEach(el => el.style.display = '');
        }
    }

    function autoDarkMode() {
        const now = new Date();
        const hour = now.getHours();
        if (hour >= 18 || hour < 6) {
            document.body.classList.add('dark-mode');
        } else {
            document.body.classList.remove('dark-mode');
        }
    }

    function applyAutoDarkMode(enable) {
        if (enable) {
            setInterval(autoDarkMode, 60000); // Check every minute
            autoDarkMode(); // Apply immediately
        }
    }

    function applyDisableAnimations(enable) {
        if (enable) {
            document.querySelectorAll("*").forEach(el => {
                el.style.animation = "none";
                el.style.transition = "none";
            });
        }
    }

    // Event listeners for general settings
    document.getElementById('apply-general').addEventListener('click', () => {
        const focusMode = document.getElementById('focus-mode').checked;
        const autoDarkModeEnabled = document.getElementById('auto-dark-mode').checked;
        const disableAnimations = document.getElementById('disable-animations').checked;

        saveSetting('focus-mode', focusMode);
        saveSetting('auto-dark-mode', autoDarkModeEnabled);
        saveSetting('disable-animations', disableAnimations);

        applyFocusMode(focusMode);
        applyAutoDarkMode(autoDarkModeEnabled);
        applyDisableAnimations(disableAnimations);
    });

    // Function to save settings to localStorage.
    const saveSetting = (id, value) => {
        localStorage.setItem(id, value);
    };

    // Apply all initial settings based on saved values.
    const applySavedSettings = () => {
        const focusMode = localStorage.getItem('focus-mode') === 'true';
        const autoDarkModeEnabled = localStorage.getItem('auto-dark-mode') === 'true';
        const disableAnimations = localStorage.getItem('disable-animations') === 'true';

        document.getElementById('focus-mode').checked = focusMode;
        document.getElementById('auto-dark-mode').checked = autoDarkModeEnabled;
        document.getElementById('disable-animations').checked = disableAnimations;

        applyFocusMode(focusMode);
        applyAutoDarkMode(autoDarkModeEnabled);
        applyDisableAnimations(disableAnimations);
    };

    // Apply saved general settings upon script initialization
    applySavedSettings();

    // Remaining functions and event listeners follow...
    // All other event listeners and settings functionality remain intact as requested
    // This includes applying effects, animations, clock, wallpaper customization, and the menu operations.

    document.getElementById('apply-appearance').addEventListener('click', () => {
        const customWallpaperUrl = document.getElementById('custom-wallpaper-url').value;
        saveSetting('custom-wallpaper-url', customWallpaperUrl); // Save custom wallpaper URL
        applyCustomWallpaper(customWallpaperUrl);
        applyTheme();

        const blur = document.getElementById('enable-background-blur').checked;
        const gradientSpeed = document.getElementById('gradient-speed').value;

        saveSetting('enable-background-blur', blur);
        saveSetting('gradient-speed', gradientSpeed);

        const gradientBg = document.querySelector('.gradient-bg');
        if (gradientBg) {
            gradientBg.style.animationDuration = `${gradientSpeed}s`;
        }

        if (blur) {
            document.body.style.backdropFilter = 'blur(8px)';
        } else {
            document.body.style.backdropFilter = '';
        }
    });

    document.getElementById('apply-effects').addEventListener('click', () => {
        const snowfall = document.getElementById('enable-snowfall').checked;
        const rain = document.getElementById('enable-rain').checked;
        const stars = document.getElementById('enable-stars').checked;
        const fireflies = document.getElementById('enable-fireflies').checked;
        const floatingEmojis = document.getElementById('enable-floating-emojis').checked;
        const particles = document.getElementById('enable-particles').checked;

        saveSetting('enable-snowfall', snowfall);
        saveSetting('enable-rain', rain);
        saveSetting('enable-stars', stars);
        saveSetting('enable-fireflies', fireflies);
        saveSetting('enable-floating-emojis', floatingEmojis);
        saveSetting('enable-particles', particles);

        toggleEffect('snowflake', snowfall);
        toggleEffect('raindrop', rain);
        toggleEffect('star', stars);
        toggleEffect('firefly', fireflies);
        toggleEffect('emoji', floatingEmojis);
        toggleEffect('particle', particles);
    });

    document.getElementById('apply-widgets').addEventListener('click', () => {
        const clockEnabled = document.getElementById('enable-clock-widget').checked;

        saveSetting('enable-clock-widget', clockEnabled);

        clockWidget.style.display = clockEnabled ? 'block' : 'none';
    });

    // Gradient options expanded for user customization
    const gradients = [
        'linear-gradient(90deg, #ff7e5f, #feb47b)',
        'linear-gradient(90deg, #6a11cb, #2575fc)',
        'linear-gradient(90deg, #43cea2, #185a9d)',
        'linear-gradient(90deg, #ff9a9e, #fad0c4)',
        'linear-gradient(90deg, #a1c4fd, #c2e9fb)',
        'linear-gradient(90deg, #667eea, #764ba2)',
        'linear-gradient(90deg, #89f7fe, #66a6ff)',
        // Add additional gradients as desired
    ];

    const wallpaperPreview = document.getElementById('wallpaper-preview');
    gradients.forEach((gradient) => {
        const gradientDiv = document.createElement('div');
        gradientDiv.className = 'gradient-option';
        gradientDiv.style.background = gradient;
        gradientDiv.dataset.gradient = gradient;
        gradientDiv.addEventListener('click', () => {
            applyAnimatedGradient(gradient);
            saveSetting('selected-gradient', gradient); // Save selected gradient
        });
        wallpaperPreview.appendChild(gradientDiv);
    });

    function applyAnimatedGradient(gradient) {
        let gradientBg = document.querySelector('.gradient-bg');
        if (!gradientBg) {
            gradientBg = document.createElement('div');
            gradientBg.className = 'gradient-bg';
            document.body.appendChild(gradientBg);
        }
        gradientBg.style.background = gradient;
    }

    // Open and close settings menu functions
    function openSettingsMenu() {
        overlay.style.display = 'block';
        settingsMenu.style.display = 'flex';
    }

    function closeSettingsMenu() {
        overlay.style.display = 'none';
        settingsMenu.style.display = 'none';
        document.querySelectorAll('.category-menu').forEach(menu => {
            menu.style.display = 'none';
        });
    }

    // Event listeners for settings button and menu actions.
    settingsButton.addEventListener('click', () => {
        const code = prompt('Enter the password:');
        if (code === '123') {
            openSettingsMenu();
        } else {
            alert('Incorrect password');
        }
    });

    overlay.addEventListener('click', closeSettingsMenu);
    document.getElementById('close-settings').addEventListener('click', closeSettingsMenu);

    document.querySelectorAll('.category-btn').forEach(button => {
        button.addEventListener('click', (e) => {
            const category = e.target.getAttribute('data-category');
            const menu = document.getElementById(`${category}-menu`);
            document.querySelectorAll('.category-menu').forEach(menu => {
                menu.style.display = 'none';
            });
            if (menu) {
                menu.style.display = 'block';
            }
        });
    });

    // Function to apply the custom wallpaper setting to the main background
    function applyCustomWallpaper(url) {
        let gradientBg = document.querySelector('.gradient-bg');
        if (gradientBg) gradientBg.remove();

        if (url) {
            document.body.style.backgroundImage = `url('${url}')`;
            document.body.style.backgroundPosition = 'center';
            document.body.style.backgroundRepeat = 'no-repeat';
            document.body.style.backgroundSize = 'cover';
        } else {
            document.body.style.backgroundImage = '';
        }
    }

    // Apply theme settings
    function applyTheme() {
        const theme = document.getElementById('theme-selector').value;
        saveSetting('theme-selector', theme); // Save theme to localStorage
        if (theme === 'dark') {
            document.body.classList.add('dark-mode');
        } else {
            document.body.classList.remove('dark-mode');
        }
    }

    // Effect toggle functionality
    function toggleEffect(type, enable) {
        let effectIntervals = {};

        if (enable) {
            if (!effectIntervals[type]) {
                effectIntervals[type] = setInterval(() => createEffect(type), 500);
            }
        } else {
            clearInterval(effectIntervals[type]);
            delete effectIntervals[type];
            document.querySelectorAll(`.${type}`).forEach(el => el.remove());
        }
    }

    function createEffect(type) {
        const effectElement = document.createElement('div');
        effectElement.className = type;
        if (type === 'snowflake') {
            effectElement.textContent = '❄';
        } else if (type === 'raindrop') {
            effectElement.textContent = '|';
        } else if (type === 'star') {
            effectElement.textContent = '★';
        } else if (type === 'emoji') {
            effectElement.textContent = ['🌟', '✨', '❤️', '😊', '🔥', '🌈'][Math.floor(Math.random() * 6)];
        }
        effectElement.style.left = Math.random() * window.innerWidth + 'px';
        effectElement.style.animationDuration = Math.random() * 5 + 5 + 's';
        document.body.appendChild(effectElement);

        setTimeout(() => effectElement.remove(), 10000);
    }

    // Apply all initial appearance settings based on saved values.
    const applyAppearanceSettings = () => {
        const theme = localStorage.getItem('theme-selector');
        if (theme) {
            document.getElementById('theme-selector').value = theme;
            applyTheme();
        }

        const customWallpaperUrl = localStorage.getItem('custom-wallpaper-url');
        if (customWallpaperUrl) {
            document.getElementById('custom-wallpaper-url').value = customWallpaperUrl;
            applyCustomWallpaper(customWallpaperUrl);
        }

        const selectedGradient = localStorage.getItem('selected-gradient');
        if (selectedGradient) {
            applyAnimatedGradient(selectedGradient);
        }

        const gradientSpeed = localStorage.getItem('gradient-speed');
        if (gradientSpeed) {
            document.getElementById('gradient-speed').value = gradientSpeed;
            const gradientBg = document.querySelector('.gradient-bg');
            if (gradientBg) {
                gradientBg.style.animationDuration = `${gradientSpeed}s`;
            }
        }

        const snowfall = localStorage.getItem('enable-snowfall') === 'true';
        const rain = localStorage.getItem('enable-rain') === 'true';
        const stars = localStorage.getItem('enable-stars') === 'true';
        const blur = localStorage.getItem('enable-background-blur') === 'true';
        const fireflies = localStorage.getItem('enable-fireflies') === 'true';
        const floatingEmojis = localStorage.getItem('enable-floating-emojis') === 'true';
        const particles = localStorage.getItem('enable-particles') === 'true';
        const clockEnabled = localStorage.getItem('enable-clock-widget') === 'true';

        document.getElementById('enable-snowfall').checked = snowfall;
        document.getElementById('enable-rain').checked = rain;
        document.getElementById('enable-stars').checked = stars;
        document.getElementById('enable-background-blur').checked = blur;
        document.getElementById('enable-fireflies').checked = fireflies;
        document.getElementById('enable-floating-emojis').checked = floatingEmojis;
        document.getElementById('enable-particles').checked = particles;
        document.getElementById('enable-clock-widget').checked = clockEnabled;

        clockWidget.style.display = clockEnabled ? 'block' : 'none';

        toggleEffect('snowflake', snowfall);
        toggleEffect('raindrop', rain);
        toggleEffect('star', stars);
        toggleEffect('firefly', fireflies);
        toggleEffect('emoji', floatingEmojis);
        toggleEffect('particle', particles);

        if (blur) {
            document.body.style.backdropFilter = 'blur(8px)';
        }
    };

    applyAppearanceSettings();

    // Add event listeners for checkboxes to save their state.
    document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
        checkbox.addEventListener('change', function () {
            saveSetting(this.id, this.checked);
        });
    });

    // Ensure changes to the theme are reflected immediately when the user changes the theme.
    document.getElementById('theme-selector').addEventListener('change', applyTheme);
})();