☰

Brightness, Contrast, Saturation, and Blur Control

Adjust brightness, contrast, saturation, and blur of a webpage with a draggable and user-friendly UI. Settings persist across page reloads.

Mint 2025.02.07.. Lásd a legutóbbi verzió

// ==UserScript==
// @name         Brightness, Contrast, Saturation, and Blur Control
// @namespace    http://your.namespace.here/
// @version      2.0
// @description  Adjust brightness, contrast, saturation, and blur of a webpage with a draggable and user-friendly UI. Settings persist across page reloads.
// @author       tae
// @match        *://*/*
// @grant        none
// @run-at       document-end
// ==/UserScript==

(function () {
    'use strict';

    window.addEventListener('load', () => {
        if (document.querySelector('.filter-control-toggle')) return;

        const LOCAL_STORAGE_KEY = 'filter-settings';

        // Load filter values from localStorage
        const loadFilters = () => {
            const settings = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY)) || { brightness: 95, contrast: 92, saturation: 90, blur: 0 };
            return settings;
        };

        // Save filter values to localStorage
        const saveFilters = (settings) => {
            localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(settings));
        };

        let { brightness, contrast, saturation, blur } = loadFilters();

        // Create toggle button
        const toggleButton = document.createElement('button');
        toggleButton.textContent = 'Filters';
        toggleButton.className = 'filter-control-toggle';
        toggleButton.style.cssText = `
            position: fixed;
            top: 2px;
            left: 2px;
            background-color: #333;
            color: white;
            border: none;
            padding: 5px 10px;
            z-index: 2147483647;
            border-radius: 5px;
            cursor: pointer;
        `;
        document.body.appendChild(toggleButton);

        // Create control panel
        const controlPanel = document.createElement('div');
        controlPanel.className = 'filter-control-panel';
        controlPanel.style.cssText = `
            position: fixed;
            top: 5px;
            left: 10px;
            background-color: rgba(0, 0, 0, 0.85);
            color: white;
            padding: 15px;
            z-index: 2147483646;
            border-radius: 10px;
            width: 150px;
            font-family: Arial, sans-serif;
            display: none;
            overflow: hidden;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
        `;
        document.body.appendChild(controlPanel);

        // Show/hide control panel
        toggleButton.addEventListener('click', () => {
            controlPanel.style.display = controlPanel.style.display === 'none' ? 'block' : 'none';
        });

        // Make control panel draggable
        makeDraggable(controlPanel);

        function makeDraggable(element) {
            let isDragging = false, startX, startY, initialLeft, initialTop;

            element.addEventListener('mousedown', (event) => {
                isDragging = true;
                startX = event.clientX;
                startY = event.clientY;
                initialLeft = element.offsetLeft;
                initialTop = element.offsetTop;
                event.preventDefault();
            });

            document.addEventListener('mousemove', (event) => {
                if (isDragging) {
                    const deltaX = event.clientX - startX;
                    const deltaY = event.clientY - startY;
                    element.style.left = `${Math.max(0, initialLeft + deltaX)}px`;
                    element.style.top = `${Math.max(0, initialTop + deltaY)}px`;
                }
            });

            document.addEventListener('mouseup', () => {
                isDragging = false;
            });
        }

        // Create slider function
        const createSlider = (labelText, defaultValue, min, max, step, onChange) => {
            const container = document.createElement('div');
            container.style.marginBottom = '10x';

            const label = document.createElement('label');
            label.textContent = `${labelText}: ${defaultValue}`;
            label.style.display = 'block';
            label.style.marginBottom = '5px';
            container.appendChild(label);

            const slider = document.createElement('input');
            slider.type = 'range';
            slider.value = defaultValue;
            slider.min = min;
            slider.max = max;
            slider.step = step;
            slider.style.width = '100%';

            // Stop propagation of the mousedown event
            slider.addEventListener('mousedown', (e) => {
                e.stopPropagation();
            });

            slider.oninput = (e) => {
                const value = e.target.value;
                label.textContent = `${labelText}: ${value}`;
                onChange(value);
            };
            container.appendChild(slider);

            controlPanel.appendChild(container);
            return slider;
        };

        // Apply filters
        const updateFilters = () => {
            document.documentElement.style.filter = `brightness(${brightness}%) contrast(${contrast}%) saturate(${saturation}%) blur(${blur}px)`;
        };

        // Create sliders
        createSlider('Brightness', brightness, 50, 150, 1, (value) => {
            brightness = value;
            saveFilters({ brightness, contrast, saturation, blur });
            updateFilters();
        });
        createSlider('Contrast', contrast, 50, 150, 1, (value) => {
            contrast = value;
            saveFilters({ brightness, contrast, saturation, blur });
            updateFilters();
        });
        createSlider('Saturation', saturation, 50, 150, 1, (value) => {
            saturation = value;
            saveFilters({ brightness, contrast, saturation, blur });
            updateFilters();
        });
        createSlider('Blur', blur, 0, 10, 0.1, (value) => {
            blur = value;
            saveFilters({ brightness, contrast, saturation, blur });
            updateFilters();
        });

        // Initialize filters
        updateFilters();
    });
})();