Add 3D pop-out effect and adjustable image filters (brightness, contrast, saturation) using plus/minus buttons in a unified panel.
目前為
// ==UserScript==
// @name Unified 3D & Filter Controls with Button Adjustments
// @namespace http://your.namespace.here/
// @version 2.1
// @description Add 3D pop-out effect and adjustable image filters (brightness, contrast, saturation) using plus/minus buttons in a unified panel.
// @author tae (modified)
// @match *://*/*
// @grant none
// @run-at document-end
// ==/UserScript==
(function () {
'use strict';
window.addEventListener('load', () => {
if (document.querySelector('.control-toggle-btn')) return;
// Global filter values
let is3D = false, brightness = 0, contrast = 0, saturation = 0;
// Create Main Toggle Button for the Control Panel
const controlToggleButton = document.createElement('button');
controlToggleButton.textContent = 'Filters & 3D';
controlToggleButton.className = 'control-toggle-btn';
controlToggleButton.style.cssText =
"position: fixed; top: 10px; right: 10px; background-color: #333; color: white; border: none; padding: 8px 12px; font-size: 14px; z-index: 2147483647; border-radius: 5px; cursor: pointer; box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3); transition: background 0.2s ease-in-out;";
document.body.appendChild(controlToggleButton);
// Create Unified Control Panel
const controlPanel = document.createElement('div');
controlPanel.className = 'control-panel';
controlPanel.style.cssText =
"position: fixed; top: 50px; right: 10px; background-color: rgba(0, 0, 0, 0.85); color: white; padding: 15px; z-index: 2147483646; border-radius: 10px; width: 200px; font-family: Arial, sans-serif; display: none; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);";
document.body.appendChild(controlPanel);
// Toggle panel visibility
controlToggleButton.addEventListener('click', () => {
controlPanel.style.display = controlPanel.style.display === 'none' ? 'block' : 'none';
});
// Create 3D Toggle Button inside the Panel
const toggle3DButton = document.createElement('button');
toggle3DButton.textContent = 'Enable 3D';
toggle3DButton.style.cssText =
"width: 100%; background-color: #444; color: white; border: none; padding: 8px; border-radius: 5px; cursor: pointer; margin-bottom: 10px;";
controlPanel.appendChild(toggle3DButton);
function update3DEffect() {
document.querySelectorAll('img, video, .thumbnail').forEach(el => {
if (is3D) {
el.style.transform = 'perspective(1200px) translateZ(50px) rotateX(15deg) rotateY(15deg)';
el.style.transition = 'transform 0.2s ease-out';
} else {
el.style.transform = 'none';
}
});
}
toggle3DButton.addEventListener('click', () => {
is3D = !is3D;
update3DEffect();
toggle3DButton.textContent = is3D ? 'Disable 3D' : 'Enable 3D';
toggle3DButton.style.backgroundColor = is3D ? '#d9534f' : '#444'; // Red when enabled
});
update3DEffect(); // Ensure initial state is correct
// Update CSS filters based on current values
function updateFilters() {
document.documentElement.style.filter =
`brightness(${100 + brightness}%) contrast(${100 + contrast}%) saturate(${100 + saturation}%)`;
}
// Create button controls for filters
function createButtonControl(labelText, currentValue, min, max, step, onChange) {
const container = document.createElement('div');
container.style.marginBottom = '10px';
const label = document.createElement('span');
label.textContent = `${labelText}: ${currentValue}`;
label.style.display = 'block';
label.style.marginBottom = '3px';
// Container for the - and + buttons
const buttonContainer = document.createElement('div');
buttonContainer.style.display = 'flex';
buttonContainer.style.justifyContent = 'space-between';
const minusButton = document.createElement('button');
minusButton.textContent = '–'; // en-dash for a nice minus sign
minusButton.style.flex = '1';
minusButton.style.marginRight = '5px';
minusButton.addEventListener('click', () => {
currentValue = Math.max(min, currentValue - step);
label.textContent = `${labelText}: ${currentValue}`;
onChange(currentValue);
});
const plusButton = document.createElement('button');
plusButton.textContent = '+';
plusButton.style.flex = '1';
plusButton.style.marginLeft = '5px';
plusButton.addEventListener('click', () => {
currentValue = Math.min(max, currentValue + step);
label.textContent = `${labelText}: ${currentValue}`;
onChange(currentValue);
});
buttonContainer.appendChild(minusButton);
buttonContainer.appendChild(plusButton);
container.appendChild(label);
container.appendChild(buttonContainer);
controlPanel.appendChild(container);
}
// Add filter controls using plus/minus buttons
createButtonControl('Brightness', brightness, -50, 50, 5, (value) => {
brightness = value;
updateFilters();
});
createButtonControl('Contrast', contrast, -50, 50, 5, (value) => {
contrast = value;
updateFilters();
});
createButtonControl('Saturation', saturation, -50, 50, 5, (value) => {
saturation = value;
updateFilters();
});
// Make the panel draggable
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;
});
}
makeDraggable(controlPanel);
});
})();