Useless Things Series: Brightness Overlay with Slider

Add an overlay to the entire webpage with a brightness slider positioned at the center below the screen. The brightness slider appears and disappears when 'alt b' or 'alt c' is clicked, respectively. Color Temperature Presets and Color Finder to adjust the brightness color.
安装此脚本 ?
提问、发表评价，或者举报这个脚本。
Wrap lines
// ==UserScript==
// @name         Useless Things Series: Brightness Overlay with Slider
// @namespace    http://tampermonkey.net/
// @version      2.0
// @description  Add an overlay to the entire webpage with a brightness slider positioned at the center below the screen. The brightness slider appears and disappears when 'alt b' or 'alt c' is clicked, respectively. Color Temperature Presets and Color Finder to adjust the brightness color.
// @match        *://*/*
// @grant        none
// @license      MIT
// @namespace https://gf.qytechs.cn/users/1126616
// ==/UserScript==

(function() {
    'use strict';

    let overlayVisible = false;
    let brightnessSliderVisible = false;
    const defaultBrightnessValue = 50; // Default to neutral grey
    let brightnessValue = localStorage.getItem('brightness') || defaultBrightnessValue;
    let defaultColor = localStorage.getItem('color') || defaultColorValue;

    let defaultColorValue = '#808080'; // Default color set to grey

    // Create overlay element
    const overlay = document.createElement('div');
    overlay.style.position = 'fixed';
    overlay.style.top = 0;
    overlay.style.left = 0;
    overlay.style.width = '100%';
    overlay.style.height = '100%';
    overlay.style.backgroundColor = `rgba(0, 0, 0, ${1 - brightnessValue / 100})`;
    overlay.style.zIndex = 9999;
    overlay.style.display = 'none';

    // Create brightness slider element
    const brightnessSlider = document.createElement('input');
    brightnessSlider.type = 'range';
    brightnessSlider.min = '0';
    brightnessSlider.max = '100';
    brightnessSlider.value = brightnessValue;
    brightnessSlider.style.width = '80%';
    brightnessSlider.style.margin = '20px auto';
    brightnessSlider.style.position = 'fixed';
    brightnessSlider.style.bottom = '50px';
    brightnessSlider.style.left = '50%';
    brightnessSlider.style.transform = 'translateX(-50%)';
    brightnessSlider.style.zIndex = 10000;
    brightnessSlider.style.background = 'linear-gradient(to right, #333, #fff)';
    brightnessSlider.style.borderRadius = '5px';
    brightnessSlider.style.border = 'none';
    brightnessSlider.style.padding = '5px';
    brightnessSlider.style.boxShadow = '0 2px 5px rgba(0, 0, 0, 0.3)';
    brightnessSlider.style.display = 'none';

    // Create color picker element
    const colorPicker = document.createElement('input');
    colorPicker.type = 'color';
    colorPicker.value = defaultColor;
    colorPicker.style.position = 'fixed';
    colorPicker.style.bottom = '100px';
    colorPicker.style.left = '50%';
    colorPicker.style.transform = 'translateX(-50%)';
    colorPicker.style.zIndex = 10000;
    colorPicker.style.display = 'none'; // Hide by default

    // Create color temperature selector element
    const colorTemperatureSelector = document.createElement('select');
    colorTemperatureSelector.style.position = 'fixed';
    colorTemperatureSelector.style.bottom = '150px';
    colorTemperatureSelector.style.left = '50%';
    colorTemperatureSelector.style.transform = 'translateX(-50%)';
    colorTemperatureSelector.style.zIndex = 10000;
    colorTemperatureSelector.style.display = 'none'; // Hide by default
    // Add a default option with the name "Color Temperature"
    const defaultOption = document.createElement('option');
    defaultOption.value = 'color_temperature';
    defaultOption.text = 'Color Temperature';
    colorTemperatureSelector.appendChild(defaultOption);

    // Array of color options
    const colorOptions = ['#ffddad', '#ffb6b9', '#fab1a0', '#f9cb40', '#a0e7e5', '#cfd8dc', '#82b1ff', '#b388ff', '#f48fb1', '#81c784'];

    // Append overlay, slider, and color picker to the body
    document.body.appendChild(overlay);
    document.body.appendChild(brightnessSlider);
    document.body.appendChild(colorPicker);
    document.body.appendChild(colorTemperatureSelector);


    // Function to update brightness and color
    function updateBrightnessAndColor(value, color) {
        const backgroundColor = `rgba(${parseInt(color.slice(1, 3), 16)}, ${parseInt(color.slice(3, 5), 16)}, ${parseInt(color.slice(5, 7), 16)}, ${1 - value / 100})`;
        overlay.style.backgroundColor = backgroundColor;
        localStorage.setItem('brightness', value);
        localStorage.setItem('color', color);
    }

    // Event listener for slider input
    brightnessSlider.addEventListener('input', function() {
        const brightnessValue = this.value;
        const color = colorPicker.value;
        updateBrightnessAndColor(brightnessValue, color);
        // Reset the auto-hide timeout whenever the slider is interacted with
        resetAutoHideTimeout();
    });

    // Event listener for color picker input
    colorPicker.addEventListener('input', function() {
        const brightnessValue = brightnessSlider.value;
        const color = this.value;
        updateBrightnessAndColor(brightnessValue, color);
        resetAutoHideTimeout();
    });

    // Event listener for color temperature selector change
    colorTemperatureSelector.addEventListener('change', function() {
        const selectedColor = this.value;
        // Update the color picker value to match the selected preset color
        colorPicker.value = selectedColor;
        // Retrieve the current brightness value from the slider
        const brightnessValue = brightnessSlider.value;
        // Update brightness and color based on the selected preset color
        updateBrightnessAndColor(brightnessValue, selectedColor);
        // Reset the auto-hide timeout
        resetAutoHideTimeout();
    });

    // Function to create and append color options to the color picker
    colorOptions.forEach(color => {
        const option = document.createElement('option');
        option.value = color;
        option.style.backgroundColor = color; // Set background color of option
        colorTemperatureSelector.appendChild(option);
    });

    // Variable to hold timeout for automatic slider disappearance
    let autoHideTimeout;

    // Function to reset the auto-hide timeout
    function resetAutoHideTimeout() {
        // Clear the existing timeout
        clearTimeout(autoHideTimeout);
        // Set a new timeout to hide slider after 3 seconds if user is not adjusting it
        autoHideTimeout = setTimeout(() => {
            brightnessSlider.style.display = 'none';
            brightnessSliderVisible = false;
            colorPicker.style.display = 'none';
            colorTemperatureSelector.style.display = 'none';
        }, 5000);
    }

    // Show or hide the slider, color picker, and color temperature selector when 'c' is pressed
    document.addEventListener('keydown', function(event) {
        if (event.altKey && event.key === 'c') {
            if (brightnessSliderVisible) {
                brightnessSlider.style.display = 'none';
                brightnessSliderVisible = false;
            } else {
                brightnessSlider.style.display = 'block';
                brightnessSliderVisible = true;
            }
            if (colorPicker.style.display === 'none') {
                colorPicker.style.display = 'block';
                // Reset the auto-hide timeout for color picker
                resetAutoHideTimeout();
            } else {
                colorPicker.style.display = 'none';
            }
            if (colorTemperatureSelector.style.display === 'none') {
                colorTemperatureSelector.style.display = 'block';
                // Reset the auto-hide timeout for color temperature selector
                resetAutoHideTimeout();
            } else {
                colorTemperatureSelector.style.display = 'none';
            }
        }
    });

    // Show or hide everything when 'b' is pressed
    document.addEventListener('keydown', function(event) {
        if (event.altKey && event.key === 'b') {
            if (overlayVisible) {
                overlay.style.display = 'none';
                brightnessSlider.style.display = 'none';
                colorPicker.style.display = 'none';
                overlayVisible = false;
                brightnessSliderVisible = false;
                colorTemperatureSelector.style.display = 'none';

            } else {
                overlay.style.display = 'block';
                brightnessSlider.style.display = 'block';
                colorPicker.style.display = 'block';
                overlayVisible = true;
                brightnessSliderVisible = true;
                colorTemperatureSelector.style.display = 'block';
                // Reset the auto-hide timeout for slider and color picker
                resetAutoHideTimeout();
            }
        }
    });

})();
欢迎访问Greasy Fork镜像
