☰

Làm đẹp các biểu mẫu web với độ dốc tuyệt đẹp

Tự động áp dụng độ chuyển màu cho tất cả các cột của bảng để làm đẹp nó

Tính đến 06-09-2024. Xem phiên bản mới nhất.

// ==UserScript==
// @name:zh-CN 绚丽渐变美化网页表格
// @description:zh-CN  自动为表格所有列应用颜色渐变来美化
// @name Beautify web forms with gorgeous gradients
// @description  Automatically apply color gradients to all columns of the table to beautify it
// @name:ar تجميل نماذج الويب بتدرجات رائعة
// @description:ar  تطبيق التدرجات اللونية تلقائيًا على كافة أعمدة الجدول لتجميله
// @name:bg Разкрасете уеб формуляри с великолепни градиенти
// @description:bg  Автоматично прилагайте цветови градиенти към всички колони на таблицата, за да я разкрасите
// @name:cs Zkrášlete webové formuláře nádhernými přechody
// @description:cs  Automaticky aplikujte barevné přechody na všechny sloupce tabulky, abyste ji zkrášlili
// @name:da Forskønne webformularer med smukke gradienter
// @description:da  Anvend automatisk farvegradienter til alle kolonner i tabellen for at forskønne den
// @name:de Verschönern Sie Webformulare mit wunderschönen Farbverläufen
// @description:de  Wenden Sie automatisch Farbverläufe auf alle Spalten der Tabelle an, um diese zu verschönern
// @name:el Ομορφύνετε φόρμες ιστού με υπέροχες διαβαθμίσεις
// @description:el  Εφαρμόστε αυτόματα διαβαθμίσεις χρώματος σε όλες τις στήλες του πίνακα για να τον ομορφύνετε
// @name:en Beautify web forms with gorgeous gradients
// @description:en  Automatically apply color gradients to all columns of the table to beautify it
// @name:eo Beligu TTT-formojn per belegaj gradientoj
// @description:eo  Aŭtomate apliku kolorgradientojn al ĉiuj kolumnoj de la tabelo por plibeligi ĝin
// @name:es Embellezca los formularios web con magníficos degradados
// @description:es  Aplique automáticamente degradados de color a todas las columnas de la tabla para embellecerla
// @name:fi Kaunista verkkolomakkeita upeilla liukuväreillä
// @description:fi  Käytä värigradientteja automaattisesti kaikkiin taulukon sarakkeisiin kaunistaaksesi sitä
// @name:fr Embellissez les formulaires Web avec de superbes dégradés
// @description:fr  Appliquez automatiquement des dégradés de couleurs à toutes les colonnes du tableau pour l’embellir
// @name:he יפות טפסי אינטרנט עם מעברי צבע מדהימים
// @description:he  החל באופן אוטומטי מעברי צבע על כל העמודות של הטבלה כדי לייפות אותה
// @name:hr Uljepšajte web obrasce prekrasnim gradijentima
// @description:hr  Automatski primijenite prijelaze boja na sve stupce tablice kako biste je uljepšali
// @name:hu Szépítse a webes űrlapokat gyönyörű színátmenetekkel
// @description:hu  Automatikusan alkalmazza a színátmeneteket a táblázat összes oszlopára a szebbé tétel érdekében
// @name:id Percantik formulir web dengan gradien menawan
// @description:id  Terapkan gradien warna secara otomatis ke semua kolom tabel untuk mempercantiknya
// @name:it Abbellisci i moduli web con splendidi gradienti
// @description:it  Applica automaticamente sfumature di colore a tutte le colonne della tabella per abbellirla
// @name:ja ゴージャスなグラデーションで Web フォームを美しくする
// @description:ja  表のすべての列に色のグラデーションを自動的に適用して、表を美しくします。
// @name:ka გაალამაზეთ ვებ ფორმები მშვენიერი გრადიენტებით
// @description:ka  ავტომატურად გამოიყენეთ ფერის გრადიენტები ცხრილის ყველა სვეტზე მის გასალამაზებლად
// @name:ko 화려한 그라데이션으로 웹 양식을 아름답게 꾸미세요
// @description:ko  테이블의 모든 열에 색상 그라디언트를 자동으로 적용하여 아름답게 만듭니다.
// @name:nl Verfraai webformulieren met prachtige verlopen
// @description:nl  Pas automatisch kleurovergangen toe op alle kolommen van de tabel om deze te verfraaien
// @name:nb Forskjønn nettskjemaer med nydelige gradienter
// @description:nb  Bruk fargegradienter automatisk på alle kolonnene i tabellen for å forskjønne den
// @name:pl Upiększ formularze internetowe wspaniałymi gradientami
// @description:pl  Automatycznie zastosuj gradienty kolorów do wszystkich kolumn tabeli, aby ją upiększyć
// @name:pt-BR Embeleze formulários da web com lindos gradientes
// @description:pt-BR  Aplique automaticamente gradientes de cores a todas as colunas da tabela para embelezá-la
// @name:ro Înfrumusețați formularele web cu degrade superbe
// @description:ro  Aplicați automat degrade de culoare tuturor coloanelor tabelului pentru a-l înfrumuseța
// @name:ru Украсьте веб-формы великолепными градиентами
// @description:ru  Автоматически применяйте цветовые градиенты ко всем столбцам таблицы, чтобы украсить ее.
// @name:sk Skrášlite webové formuláre nádhernými prechodmi
// @description:sk  Automaticky aplikujte farebné prechody na všetky stĺpce tabuľky, aby ste ju skrášlili
// @name:sr Улепшајте веб форме прекрасним градијентима
// @description:sr  Аутоматски примените градијенте боја на све колоне табеле да бисте је улепшали
// @name:sv Försköna webbformulär med underbara gradienter
// @description:sv  Använd automatiskt färggradienter på alla kolumner i tabellen för att försköna den
// @name:th ตกแต่งเว็บฟอร์มด้วยการไล่ระดับสีที่งดงาม
// @description:th  ใช้การไล่ระดับสีกับคอลัมน์ทั้งหมดของตารางโดยอัตโนมัติเพื่อตกแต่งให้สวยงาม
// @name:tr Web formlarını muhteşem degradelerle güzelleştirin
// @description:tr  Tabloyu güzelleştirmek için tablonun tüm sütunlarına otomatik olarak renk geçişleri uygulayın
// @name:ug ئېسىل رېشاتكىلار بىلەن تور شەكىللىرىنى گۈزەللەشتۈرۈڭ
// @description:ug  ئۇنى گۈزەللەشتۈرۈش ئۈچۈن جەدۋەلنىڭ بارلىق ئىستونلىرىغا ئاپتوماتىك گىرىم بويۇملىرىنى ئاپتوماتىك ئىشلىتىڭ
// @name:uk Прикрашайте веб-форми чудовими градієнтами
// @description:uk  Автоматично застосовуйте градієнти кольорів до всіх стовпців таблиці, щоб прикрасити її
// @name:vi Làm đẹp các biểu mẫu web với độ dốc tuyệt đẹp
// @description:vi  Tự động áp dụng độ chuyển màu cho tất cả các cột của bảng để làm đẹp nó
// @name:zh-TW 絢麗漸層美化網頁表格
// @description:zh-TW  自動為表格所有欄位套用色彩漸層來美化
// @name:zh-HK 絢麗漸層美化網頁表格
// @description:zh-HK  自動為表格所有欄位套用色彩漸層來美化
// @name:fr-CA Embellissez les formulaires Web avec de superbes dégradés
// @description:fr-CA  Appliquez automatiquement des dégradés de couleurs à toutes les colonnes du tableau pour l’embellir
// @grant        none
// @match        *://*/*
// @author       Yearly,人民的勤务员 <[email protected]>
// @namespace    https://github.com/ChinaGodMan/UserScripts
// @supportURL              https://github.com/ChinaGodMan/UserScripts/issues
// @homepageURL   https://github.com/ChinaGodMan/UserScripts
// @license      MIT
// @icon         data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAwIiBoZWlnaHQ9IjgwMCIgdmlld0JveD0iMCAwIDExIDExIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGZpbGw9IiM0NEMiIGQ9Ik0wIDBoNHYzSDB6Ii8+PHBhdGggZmlsbD0iIzRDNCIgZD0iTTAgNGg0djNIMHoiLz48cGF0aCBmaWxsPSIjQzQ0IiBkPSJNMCA4aDR2M0gweiIvPjxwYXRoIGZpbGw9IiM0Q0MiIGQ9Ik01IDBoMTF2M0g1eiIvPjxwYXRoIGZpbGw9IiNDQzQiIGQ9Ik01IDRoMTF2M0g1eiIvPjxwYXRoIGZpbGw9IiNDNEMiIGQ9Ik01IDhoMTF2M0g1eiIvPjwvc3ZnPg==
// @compatible     chrome
// @compatible     firefox
// @compatible     edge
// @compatible     opera
// @compatible     safari
// @version 1.0.0.2
// @Created         2024-09-06 05:02:49
// @modified        2024-09-06 05:02:49
// ==/UserScript==
(function () {
    'use strict'

    const DEBOUNCE_DELAY = 300
    const POLL_INTERVAL = 1000
    const HUE_RANGE = 120
    const SATURATION = '80%'
    const LIGHTNESS = '88%'

    function extractFirstFloat(str) {
        const match = str.match(/[-+]?\d*\.?\d+/)
        return match ? parseFloat(match[0]) : NaN
    }

    function applyGradient(table, column) {
        const values = Array.from(table.rows)
            .map(row => row.cells[column])
            .filter(cell => cell)
            .map(cell => extractFirstFloat(cell.textContent || cell.innerText))
            .filter(val => !isNaN(val))

        if (values.length === 0) return

        const min = Math.min(...values)
        const max = Math.max(...values)
        if (min === max) return

        const headerCell = table.rows[0]?.cells[column]
        if (!headerCell) return

        headerCell.gradient_fill_increase = !headerCell.gradient_fill_increase
        const isIncreasing = headerCell.gradient_fill_increase

        Array.from(table.rows).forEach(row => {
            const cell = row.cells[column]
            if (!cell) return

            const value = extractFirstFloat(cell.textContent || cell.innerText)
            if (isNaN(value)) return

            const hue = isIncreasing
                ? HUE_RANGE - ((value - min) / (max - min)) * HUE_RANGE
                : ((value - min) / (max - min)) * HUE_RANGE

            cell.style.backgroundColor = `hsl(${hue}, ${SATURATION}, ${LIGHTNESS})`
        })
    }

    function debounce(func, delay) {
        let timeoutId
        return function (...args) {
            clearTimeout(timeoutId)
            timeoutId = setTimeout(() => func.apply(this, args), delay)
        }
    }

    function initializeTable(table) {
        if (table.hasAttribute('data-gradient-initialized')) return
        table.setAttribute('data-gradient-initialized', 'true')

        table.addEventListener('click', debounce(event => {
            const column = event.target.cellIndex
            if (column !== undefined) {
                applyGradient(table, column)
            }
        }, DEBOUNCE_DELAY))
    }

    function initializeTables() {
        document.querySelectorAll('table:not([data-gradient-initialized])').forEach(initializeTable)
    }

    // Initial call and setup interval
    initializeTables()
    setInterval(initializeTables, POLL_INTERVAL)
})()