// ==UserScript==
// @name         网页深色模式
// @namespace    https://vivix.vip/
// @version      1.0
// @description  1.系统开启深色模式2.刷新页面使得页面加上滤镜3.鼠标移动到页面左边 中间 拖动滑块调整亮度4.当然有其他可替代品
// @author       飞丶宇
// @match        *://*/*
// @grant        none
// @run-at       document-start
// ==/UserScript==

(function() {
    'use strict';
    
    const STORAGE_KEY = 'perplexity.webBrightness';
    
    const isDarkPreferred = () => window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
    if (!isDarkPreferred()) {
        return;
    }

    const overlay = document.createElement('div');
    overlay.style.cssText = `
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background-color: rgba(0,0,0,0.30);
        pointer-events: none;
        z-index: 999999;
        mix-blend-mode: multiply;
        transition: opacity 0.25s ease;
        opacity: 1;
    `;
    document.documentElement.appendChild(overlay);

    const panel = document.createElement('div');
    panel.style.cssText = `
        position: fixed;
        top: 50%; left: 0;
        transform: translateY(-50%);
        width: 40px;
        height: 240px;
        border-radius: 8px;
        background: rgba(18,18,18,0.85);
        box-shadow: 0 6px 20px rgba(0,0,0,0.4);
        display: flex; align-items: center; justify-content: center;
        padding: 6px;
        transition: opacity 0.25s ease, transform 0.25s ease;
        opacity: 0;
        z-index: 999999;
        user-select: none;
        cursor: default;
        color: #e8e8e8;
    `;

    const track = document.createElement('div');
    track.style.cssText = `
        width: 16px;
        height: 180px;
        border-radius: 8px;
        background: #2a2a2a;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: ns-resize;
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
        writing-mode: vertical-rl;
    `;

    const progress = document.createElement('div');
    progress.style.cssText = `
        position: absolute;
        left: 0; bottom: 0;
        width: 100%; height: 0%;
        border-radius: 8px;
        background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0.25));
        pointer-events: none;
    `;

    const handle = document.createElement('div');
    handle.style.cssText = `
        position: absolute;
        left: 50%;
        top: 0;
        width: 28px;
        height: 28px;
        transform: translate(-50%, -50%);
        border-radius: 14px; /* 180° 圆头效果接近圆形 */
        background: radial-gradient(circle at 30% 30%, #ffffff 0%, #e0e0e0 40%, #c7c7c7 100%);
        border: 1px solid rgba(0,0,0,0.18);
        box-shadow: 0 2px 6px rgba(0,0,0,0.4);
        cursor: grab;
    `;

    track.appendChild(progress);
    track.appendChild(handle);
    panel.appendChild(track);
    document.documentElement.appendChild(panel);

    let dragging = false;
    let brightness = 0.30;
    const minB = 0.0;
    const maxB = 0.65;

    const applyBrightness = (b) => {
        brightness = Math.max(minB, Math.min(maxB, b));
        overlay.style.backgroundColor = `rgba(0,0,0,${brightness})`;
        const p = Math.max(0, Math.min(100, Math.round((brightness - minB) / (maxB - minB) * 100)));
        progress.style.height = `${p}%`;

        try {
            localStorage.setItem(STORAGE_KEY, String(brightness));
        } catch (e) {}

        const t = (brightness - 0.30) / (maxB - 0.30);
        const rect = track.getBoundingClientRect();
        const y = rect.height * (1 - Math.max(0, Math.min(1, t)));
        handle.style.top = `${y}px`;
      };

    try {
        const saved = localStorage.getItem(STORAGE_KEY);
        if (saved !== null) {
            const v = parseFloat(saved);
            if (!isNaN(v)) {
                applyBrightness(v);
            } else {
                applyBrightness(0.30);
            }
        } else {
            applyBrightness(0.30);
        }
    } catch (e) {
        applyBrightness(0.30);
    }

    panel.addEventListener('mouseenter', () => {
        panel.style.opacity = '1';
        panel.style.transform = 'translateY(-50%)';
    });
    panel.addEventListener('mouseleave', () => {
        panel.style.opacity = '0';
        panel.style.transform = 'translateY(-50%)';
    });

    const updateFromPointer = (clientY) => {
        const rect = track.getBoundingClientRect();
        const y = Math.min(Math.max(clientY - rect.top, 0), rect.height);
        const t = 1 - (y / rect.height);
        const newB = 0.30 + t * (maxB - 0.30);
        const constrained = Math.max(0.30, Math.min(maxB, newB));
        applyBrightness(constrained);
    };

    handle.addEventListener('mousedown', (e) => {
        dragging = true;
        const onMove = (ev) => updateFromPointer(ev.clientY);
        const up = () => {
            dragging = false;
            window.removeEventListener('mousemove', onMove);
            window.removeEventListener('mouseup', up);
        };
        window.addEventListener('mousemove', onMove);
        window.addEventListener('mouseup', up);
        e.preventDefault();
    });

    window.addEventListener('load', () => {
        panel.style.opacity = '0';
        panel.style.transform = 'translateY(-50%)';
    });
})();