BetterTriangulet with Theme-Aware Overlay, Titan Close X, and Reset

Adds BetterTriangulet panel with plugin modal, theme-colored overlay, Titan X close, and Reset Data
当前为 2025-07-05 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         BetterTriangulet with Theme-Aware Overlay, Titan Close X, and Reset
// @version      1.15
// @description  Adds BetterTriangulet panel with plugin modal, theme-colored overlay, Titan X close, and Reset Data
// @match        https://tri.pengpowers.xyz/*
// @grant        none
// @namespace https://gf.qytechs.cn/users/1479014
// ==/UserScript==

(function () {
    'use strict';

    // Load Titan One font
    const titanFont = document.createElement("link");
    titanFont.href = "https://fonts.googleapis.com/css2?family=Titan+One&display=swap";
    titanFont.rel = "stylesheet";
    document.head.appendChild(titanFont);

    function createOverlayBox() {
        const profileBody = document.querySelector('.arts__profileBody___eNPbH-camelCase');
        if (!profileBody) return;

        const existingOverlay = document.getElementById('profileBodyOverlayBox');
        if (existingOverlay) existingOverlay.remove();

        const rect = profileBody.getBoundingClientRect();
        const overlay = document.createElement('div');
        overlay.id = 'profileBodyOverlayBox';

        Object.assign(overlay.style, {
            position: 'absolute',
            top: `${rect.top + window.scrollY}px`,
            left: `${rect.left + window.scrollX}px`,
            width: `${rect.width}px`,
            height: `${rect.height}px`,
            zIndex: '9998',
            color: 'inherit'
        });

        const theme = localStorage.getItem("theme");
        const themeColors = {
            Purple: '#4d136b',
            Green: '#265b09',
            Blue: '#132a6b',
            Red: '#6b1313',
            Orange: '#6b3b13',
            Yellow: '#6b6a13',
            Pink: '#6b134a',
            White: '#e6e6e6',
            Black: '#000000'
        };

        overlay.style.backgroundColor = themeColors[theme] || 'var(--container)';
        document.body.appendChild(overlay);
    }

    function removeOverlayBox() {
        const existingOverlay = document.getElementById('profileBodyOverlayBox');
        if (existingOverlay) existingOverlay.remove();
    }

    function createModal() {
        const profileBody = document.querySelector(".arts__profileBody___eNPbH-camelCase");
        if (!profileBody) return;

        const existingModal = document.getElementById("betterTrianguletModalOverlay");
        if (existingModal) existingModal.remove();

        createOverlayBox();

        const modalOverlay = document.createElement("div");
        modalOverlay.id = "betterTrianguletModalOverlay";

        Object.assign(modalOverlay.style, {
            position: "absolute",
            top: profileBody.offsetTop + "px",
            left: profileBody.offsetLeft + "px",
            width: profileBody.offsetWidth + "px",
            height: profileBody.offsetHeight + "px",
            zIndex: "9999",
            backgroundColor: "var(--container)",
            color: "inherit",
            borderRadius: "0.5vw",
            overflowY: "auto",
            padding: "2vw",
            fontFamily: "Nunito, sans-serif",
            display: "flex",
            flexDirection: "column",
            boxSizing: "border-box",
        });

        const closeBtn = document.createElement("div");
        closeBtn.textContent = "X";
        Object.assign(closeBtn.style, {
            position: "absolute",
            top: "1vw",
            right: "1.2vw",
            fontFamily: "'Titan One', sans-serif",
            fontSize: "2.5vw",
            color: "#ff4d4d",
            cursor: "pointer",
            userSelect: "none",
            zIndex: "10000",
            transition: "transform 0.15s ease-in-out"
        });

        closeBtn.onmouseenter = () => {
            closeBtn.style.transform = "scale(1.2)";
        };
        closeBtn.onmouseleave = () => {
            closeBtn.style.transform = "scale(1)";
        };

        closeBtn.onclick = () => {
            modalOverlay.remove();
            removeOverlayBox();
        };

        const title = document.createElement("div");
        title.textContent = "Plugin Manager";
        Object.assign(title.style, {
            fontSize: "2vw",
            fontWeight: "800",
            marginBottom: "1vw",
            color: "var(--accent)",
            userSelect: "none",
        });

        const content = document.createElement("div");
        content.textContent = "This is where plugin options will go!";
        Object.assign(content.style, {
            fontSize: "1.2vw",
            flexGrow: "1",
            marginBottom: "2vw",
            whiteSpace: "pre-wrap",
        });

        modalOverlay.appendChild(closeBtn);
        modalOverlay.appendChild(title);
        modalOverlay.appendChild(content);

        profileBody.parentElement.appendChild(modalOverlay);
    }

    function injectPanel() {
        const mainContainer = document.querySelector(".styles__mainContainer___4TLvi-camelCase");
        if (!mainContainer || document.getElementById("betterTrianguletBox")) return;

        const container = document.createElement("div");
        container.className = "styles__infoContainer___2uI-S-camelCase";
        container.id = "betterTrianguletBox";

        const headerRow = document.createElement("div");
        headerRow.className = "styles__headerRow___1tdPa-camelCase";

        const icon = document.createElement("i");
        icon.className = "fas fa-code styles__headerIcon___1ykdN-camelCase";
        icon.setAttribute("aria-hidden", "true");

        const headerText = document.createElement("div");
        headerText.className = "styles__infoHeader___1lsZY-camelCase";
        headerText.textContent = "BetterTriangulet";

        headerRow.appendChild(icon);
        headerRow.appendChild(headerText);

        const pluginDiv = document.createElement("div");

        // Manage Plugins
        const pluginText = document.createElement("text");
        pluginText.className = "styles__link___5UR6_-camelCase";
        pluginText.id = "managePlugins";
        pluginText.textContent = "Manage Plugins";
        pluginText.style.cursor = "pointer";
        pluginText.style.textDecoration = "underline";
        pluginText.style.display = "block";

        pluginText.onclick = () => {
            if (!document.getElementById("betterTrianguletModalOverlay")) {
                createModal();
            }
        };
        pluginDiv.appendChild(pluginText);

        // Reset Data
        const resetText = document.createElement("text");
        resetText.className = "styles__link___5UR6_-camelCase";
        resetText.textContent = "Reset Data";
        resetText.style.cursor = "pointer";
        resetText.style.textDecoration = "underline";
        resetText.style.display = "block";
        resetText.style.marginTop = "0.5vw";

        resetText.onclick = () => {
            if (confirm("Are you sure you want to clear all localStorage data?")) {
                localStorage.clear();
                location.reload();
            }
        };
        pluginDiv.appendChild(resetText);

        container.appendChild(headerRow);
        container.appendChild(pluginDiv);
        mainContainer.appendChild(container);
    }

    function waitForSettings() {
        const settingsHeader = [...document.querySelectorAll("div")].find(el =>
            el.textContent.trim() === "Settings" &&
            el.className.includes("styles__header___")
        );
        if (settingsHeader) {
            injectPanel();
        } else {
            setTimeout(waitForSettings, 250);
        }
    }

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