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.
当前为
// ==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://greasyfork.org/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();
}
}
});
})();