Beautify web forms with gorgeous gradients

Automatically apply color gradients to all columns of the table to beautify it

Author
人民的勤务员
Daily installs
1
Total installs
83
Ratings
1 0 0
Version
1.0.0.9
Created
2024-09-05
Updated
2024-10-20
Compatibility
Compatible with Firefox Compatible with Chrome Compatible with Opera Compatible with Safari Compatible with Edge
License
MIT
Applies to
All sites
简体中文 | English
👆️访问GitHub 上的自述文件以获得更好的体验。

Beautify web forms with gorgeous gradients

「 Automatically apply color gradients to all columns of the table to beautify it 」

Views

Download:Github | ⭐Greasy Fork

Update record

🛠️ Beautify web forms with gorgeous gradients Change log

📅 2024/9/6 05:41 - Ver 1.0.0.0

Revise: Change to automatic gradient color.....


Gorgeous Gradient Table Beautification Script

This script automatically applies gradient colors to all tables on a webpage, based on the numerical values in each column. It enhances the visual appeal of the table without any manual clicks or operations by the user.

Features

  1. Automatic Gradient Application: The script scans tables on the page and automatically applies gradient colors to each column based on the data, without requiring user intervention.
  2. Data-Driven Gradients: Colors are generated based on the minimum and maximum values in each column, with greater color variation for larger or smaller values.
  3. Continuous Monitoring: The script checks the page every second to automatically apply gradients to any new tables that are loaded.
  4. Gradient Color Configuration: Colors are based on the HSL color model, with adjustable parameters for hue range (HUE_RANGE), saturation (SATURATION), and lightness (LIGHTNESS).

Key Parameters

  • HUE_RANGE: Sets the hue range for the gradient color, with a default value of 120 degrees, representing a gradient from green to red.
  • SATURATION: Controls the color saturation, with a default of 80% for a vibrant color effect.
  • LIGHTNESS: Controls the color lightness, with a default of 88% to ensure a soft and non-straining color gradient.

Core Logic

  1. extractFirstFloat: Extracts the first floating-point number from the cell's text, ignoring non-numeric content to ensure only numerical values are used for gradient calculation.
  2. applyGradient: Automatically calculates the minimum and maximum values for each column and generates corresponding gradient background colors.
  3. initializeTables: Periodically checks for tables on the page and applies gradient colors to any new or uninitialized tables.

Use Cases

This script is suitable for any webpage containing tables, automatically applying gradient colors to enhance data visualization and make it easier to distinguish data differences.

Project & Feedback

colorful-table-2.png colorful-table.png

🔍You may be looking for web related scripts

Help

Recommended browsers and script managers:

  • Greasemonkey + Waterfox
  • Tampermonkey/Violentmonkey + Firefox
  • Tampermonkey/Violentmonkey + Chrome
  • Userscripts + ios Safari
  • Violentmonkey/KiWiBrowser + Android

If you need to know more about how to install userscripts,click meView graphic teaching!

View all publish scripts

🔍you may be looking forChatGPTRelated scripts

🔍You may be looking for web related scripts

🔍你可能在找GitHub相关脚本

  • GitHub Submit information display web view: This script will GitHub The submission information on HTML view,to see submission details more clearly。It will automatically submit the information list、The commit header and latest commit information are converted to HTML Format,Provide better visual effects and user experience。
  • GitHub warehouse quick jump assistant: 🤠 GitHub warehouse quick jump assistant, specially designed to help users quickly access their own warehouses on GitHub. It generates a button at the top of the navigation bar. Click to expand all your repositories and easily jump to your own GitHub repository page without using GitHub’s secondary menu.
  • GitHub File list beautifier: GitHub File List Beautifier is a user script,used to enhance GitHub Display effect of files in warehouse。It can add colors to files and folders,and replace the file type icons with small images,Makes the code base easier to browse and manage。Add colors and icons to files by type,Display small images in place of file type icons in repository source tree
  • Github List of code languages show all: Expand Github List of languages on the repository,Show each language,Instead of hiding small parts in“other”Down
  • GitHub Automatically confirm device authorization: existGitHubThe authorization page automatically enters the authorization code and automatically confirms it.。
  • GitHub folder downloader: Add a download button,Allows easy downloading of specific GitHub folder。
  • Github Copy original file URL with download files: Add button at the end of each file line,to copy the original file URL and download files
  • 🤠 Github enhanced assistant warehouse display size: 🤠 Warehouse display size: On GitHub’s code search, warehouse search, issue page, user warehouse list and repository page, the size of the warehouse will be displayed next to the warehouse name, allowing users to quickly understand the scale of the warehouse and optimize their selection. Inactive development warning: If a repository has not been updated in the past six months, the system will add a prompt at the top of the repository to remind users that the repository is inactive and display the time of the last update. This helps users determine the activity and maintenance status of the warehouse. Quick jump within the warehouse: When browsing the warehouse, the user can easily view the list of all warehouses of the user, providing an entrance to quickly jump to different warehouses. Users can quickly find and access other projects of interest, improving work efficiency. Usage scenarios: Developers: By displaying the warehouse size and active warnings, you can quickly filter out suitable libraries for development and avoid using projects that are no longer maintained. Project Manager: Through the quick jump function, it is easy to manage and coordinate multiple projects and improve work efficiency. Learners: When learning new technologies, they can more easily find relevant open source projects and quickly check the activity and scale of the projects. 🤠
  • GitHub Sort by date: Change file sorting to descending by date,Conveniently view the latest updated files。

🔍you may be looking forGoogleRelated scripts

🔍you may be looking forGreasyForkRelated scripts

🔍You may be looking for adult scripts

🔍You may be looking for automatic translation

  • foreign language terminator: Recognize non-Chinese characters,If the length is greater than5And the translated text does not contain Chinese,Then translate and replace the original text to Chinese
  • web page translation——Automatically translated to Chinese: Give the lower right corner of each non-Chinese web page(Can be adjusted to the lower left corner)add agoogleTranslate icon,This version is a Chinese translation version,Only translate foreign languages ​​into Chinese,Add automatic translation