From b695f5d58c2e78f7d076d175ae819811b874cfe1 Mon Sep 17 00:00:00 2001 From: Ku6epXBOCTuK Date: Sat, 29 Aug 2026 07:54:45 +0500 Subject: [PATCH] feat: add preview catalog and catalog group and header --- web/audit/dom-report.json | 1631 +---------------- web/audit/dom-report.md | 161 +- .../lib/components/kit/CatalogGroup.svelte | 2 +- .../lib/components/kit/CatalogHeader.svelte | 2 +- web/src/lib/components/kit/ToolCard.svelte | 2 +- web/src/lib/preview/catalog.ts | 217 +++ .../routes/preview/list-tools/+page.svelte | 27 +- 7 files changed, 239 insertions(+), 1803 deletions(-) create mode 100644 web/src/lib/preview/catalog.ts diff --git a/web/audit/dom-report.json b/web/audit/dom-report.json index 49a0c37..228128a 100644 --- a/web/audit/dom-report.json +++ b/web/audit/dom-report.json @@ -1,5 +1,5 @@ { - "generatedAt": "2026-08-29T02:33:28.256Z", + "generatedAt": "2026-08-29T02:50:59.952Z", "reports": [ { "route": "/preview/demo", @@ -17,1631 +17,14 @@ { "route": "/preview/list-tools", "ref": "list-tools.html", - "deltas": [ - { - "path": "body > main:1 > div:2 > div:1 > div:2 > b:1", - "type": "added", - "tag": "b", - "text": "130", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:1 > div:2 > span:2", - "type": "textMismatch", - "ours": "TOOLSAVAILABLE", - "ref": "TOOLS AVAILABLE" - }, - { - "path": "body > main:1 > div:2 > div:1 > div:2 > b:1", - "type": "removed", - "tag": "b", - "text": "32", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:1 > div:1 > i:2", - "type": "added", - "tag": "i", - "text": "21 TOOLS", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:1 > div:1 > i:2", - "type": "removed", - "tag": "i", - "text": "05 TOOLS", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:1 > span:2 > span:2", - "type": "added", - "tag": "span", - "text": "Opens a JPEG and saves it as lossless PNG. Transparency, if present, is preserved.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:1 > span:2 > span:2", - "type": "removed", - "tag": "span", - "text": "Re-encode JPEG files as lossless PNG while preserving transparency.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:1 > span:4", - "type": "added", - "tag": "span", - "text": "", - "nodes": 2 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:1 > svg:4", - "type": "removed", - "tag": "svg", - "text": "", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:2 > span:2 > span:2", - "type": "added", - "tag": "span", - "text": "Re-encodes a WebP image into universal PNG.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:2 > span:2 > span:2", - "type": "removed", - "tag": "span", - "text": "Turn WebP images into a universal PNG format for any workflow.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:2 > span:4", - "type": "added", - "tag": "span", - "text": "", - "nodes": 2 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:2 > svg:4", - "type": "removed", - "tag": "svg", - "text": "", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:3 > span:2 > strong:1", - "type": "added", - "tag": "strong", - "text": "Convert GIF to PNG", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:3 > span:2 > span:2", - "type": "added", - "tag": "span", - "text": "Extracts the first frame of a GIF animation and saves it as PNG.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:3 > span:2 > strong:1", - "type": "removed", - "tag": "strong", - "text": "PNG to Base64", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:3 > span:2 > span:2", - "type": "removed", - "tag": "span", - "text": "Encode an image as a base64 string for embedding in code or styles.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:3 > span:4", - "type": "added", - "tag": "span", - "text": "", - "nodes": 2 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:3 > svg:4", - "type": "removed", - "tag": "svg", - "text": "", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:4 > span:2 > strong:1", - "type": "added", - "tag": "strong", - "text": "Convert BMP to PNG", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:4 > span:2 > span:2", - "type": "added", - "tag": "span", - "text": "Re-encodes BMP into compact lossless PNG.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:4 > span:2 > strong:1", - "type": "removed", - "tag": "strong", - "text": "PNG to Data URI", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:4 > span:2 > span:2", - "type": "removed", - "tag": "span", - "text": "Build a complete data URI ready for HTML and CSS.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:4 > span:4", - "type": "added", - "tag": "span", - "text": "", - "nodes": 2 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:4 > svg:4", - "type": "removed", - "tag": "svg", - "text": "", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:5 > span:2 > strong:1", - "type": "added", - "tag": "strong", - "text": "Convert ICO to PNG", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:5 > span:2 > span:2", - "type": "added", - "tag": "span", - "text": "Turns an .ico icon into a regular PNG of the chosen size.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:5 > span:2 > strong:1", - "type": "removed", - "tag": "strong", - "text": "Convert PNG to JPG", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:5 > span:2 > span:2", - "type": "removed", - "tag": "span", - "text": "Composite transparency over a selected backdrop and export JPEG.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:5 > span:4", - "type": "added", - "tag": "span", - "text": "", - "nodes": 2 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:5 > svg:4", - "type": "removed", - "tag": "svg", - "text": "", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:6", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:7", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:8", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:9", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:10", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:11", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:12", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:13", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:14", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:15", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:16", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:17", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:18", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:19", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:20", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:21", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:2 > div:1 > i:2", - "type": "added", - "tag": "i", - "text": "21 TOOLS", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:2 > div:1 > i:2", - "type": "removed", - "tag": "i", - "text": "05 TOOLS", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:1 > span:2 > strong:1", - "type": "added", - "tag": "strong", - "text": "Circle Mask PNG", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:1 > span:2 > span:2", - "type": "added", - "tag": "span", - "text": "Cuts the image into a circle. Diameter is set as a share of the smaller side.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:1 > span:2 > strong:1", - "type": "removed", - "tag": "strong", - "text": "Remove background PNG", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:1 > span:2 > span:2", - "type": "removed", - "tag": "span", - "text": "Remove a solid background by color, tolerance, or edge-connected regions.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:1 > span:4", - "type": "added", - "tag": "span", - "text": "", - "nodes": 2 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:1 > svg:4", - "type": "removed", - "tag": "svg", - "text": "", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:2 > span:2 > strong:1", - "type": "added", - "tag": "strong", - "text": "Square Mask PNG", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:2 > span:2 > span:2", - "type": "added", - "tag": "span", - "text": "Cuts the image into a rectangle with sides as a share of the smaller side.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:2 > span:2 > strong:1", - "type": "removed", - "tag": "strong", - "text": "Extract alpha mask", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:2 > span:2 > span:2", - "type": "removed", - "tag": "span", - "text": "Turn the alpha channel into a clean black-and-white mask.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:2 > span:4", - "type": "added", - "tag": "span", - "text": "", - "nodes": 2 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:2 > svg:4", - "type": "removed", - "tag": "svg", - "text": "", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:3 > span:2 > strong:1", - "type": "added", - "tag": "strong", - "text": "Star Mask PNG", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:3 > span:2 > span:2", - "type": "added", - "tag": "span", - "text": "Cuts the image into an n-pointed star with adjustable inner radius and rotation.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:3 > span:2 > strong:1", - "type": "removed", - "tag": "strong", - "text": "Round corners PNG", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:3 > span:2 > span:2", - "type": "removed", - "tag": "span", - "text": "Clip the image corners by a precise radius percentage.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:3 > span:4", - "type": "added", - "tag": "span", - "text": "", - "nodes": 2 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:3 > svg:4", - "type": "removed", - "tag": "svg", - "text": "", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:4 > span:2 > strong:1", - "type": "added", - "tag": "strong", - "text": "Wavy Mask PNG", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:4 > span:2 > span:2", - "type": "added", - "tag": "span", - "text": "Cuts the image into a wavy-edged circle: radius is modulated by a sine with chosen amplitude and frequency.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:4 > span:2 > strong:1", - "type": "removed", - "tag": "strong", - "text": "Outline PNG", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:4 > span:2 > span:2", - "type": "removed", - "tag": "span", - "text": "Add a colored ring around opaque content with adjustable thickness.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:4 > span:4", - "type": "added", - "tag": "span", - "text": "", - "nodes": 2 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:4 > svg:4", - "type": "removed", - "tag": "svg", - "text": "", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:5 > span:2 > strong:1", - "type": "added", - "tag": "strong", - "text": "Remove alpha channel PNG", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:5 > span:2 > span:2", - "type": "added", - "tag": "span", - "text": "Composites the image over a white background and saves without transparency.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:5 > span:2 > strong:1", - "type": "removed", - "tag": "strong", - "text": "Change PNG opacity", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:5 > span:2 > span:2", - "type": "removed", - "tag": "span", - "text": "Multiply the alpha channel while keeping the original colors unchanged.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:5 > span:4", - "type": "added", - "tag": "span", - "text": "", - "nodes": 2 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:5 > svg:4", - "type": "removed", - "tag": "svg", - "text": "", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:6", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:7", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:8", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:9", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:10", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:11", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:12", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:13", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:14", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:15", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:16", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:17", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:18", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:19", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:20", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:21", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:3 > div:1 > i:2", - "type": "added", - "tag": "i", - "text": "25 TOOLS", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:3 > div:1 > i:2", - "type": "removed", - "tag": "i", - "text": "05 TOOLS", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:1 > span:2 > strong:1", - "type": "added", - "tag": "strong", - "text": "Split PNG into HSL", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:1 > span:2 > span:2", - "type": "added", - "tag": "span", - "text": "Decomposes the image into Hue, Saturation and Lightness components.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:1 > span:2 > strong:1", - "type": "removed", - "tag": "strong", - "text": "Create gradient PNG", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:1 > span:2 > span:2", - "type": "removed", - "tag": "span", - "text": "Generate a smooth transition between two colors with direction controls.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:1 > span:4", - "type": "added", - "tag": "span", - "text": "", - "nodes": 2 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:1 > svg:4", - "type": "removed", - "tag": "svg", - "text": "", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:2 > span:2 > strong:1", - "type": "added", - "tag": "strong", - "text": "Split PNG into HSV", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:2 > span:2 > span:2", - "type": "added", - "tag": "span", - "text": "Decomposes the image into Hue, Saturation and Value (brightness) components.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:2 > span:2 > strong:1", - "type": "removed", - "tag": "strong", - "text": "Grayscale PNG", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:2 > span:2 > span:2", - "type": "removed", - "tag": "span", - "text": "Convert the image to luminance-based shades of gray.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:2 > span:4", - "type": "added", - "tag": "span", - "text": "", - "nodes": 2 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:2 > svg:4", - "type": "removed", - "tag": "svg", - "text": "", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:3 > span:2 > strong:1", - "type": "added", - "tag": "strong", - "text": "Split PNG into HSI", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:3 > span:2 > span:2", - "type": "added", - "tag": "span", - "text": "Decomposes the image into Hue, Saturation and Intensity components.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:3 > span:2 > strong:1", - "type": "removed", - "tag": "strong", - "text": "Invert colors PNG", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:3 > span:2 > span:2", - "type": "removed", - "tag": "span", - "text": "Invert every color channel while leaving alpha untouched.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:3 > span:4", - "type": "added", - "tag": "span", - "text": "", - "nodes": 2 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:3 > svg:4", - "type": "removed", - "tag": "svg", - "text": "", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:4 > span:2 > strong:1", - "type": "added", - "tag": "strong", - "text": "Convert PNG to CMYK Colors", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:4 > span:2 > span:2", - "type": "added", - "tag": "span", - "text": "Decomposes the image into print-style Cyan, Magenta, Yellow and Key (black) components.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:4 > span:2 > strong:1", - "type": "removed", - "tag": "strong", - "text": "Brightness & contrast", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:4 > span:2 > span:2", - "type": "removed", - "tag": "span", - "text": "Adjust brightness and contrast across a controlled range.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:4 > span:4", - "type": "added", - "tag": "span", - "text": "", - "nodes": 2 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:4 > svg:4", - "type": "removed", - "tag": "svg", - "text": "", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:5 > span:2 > strong:1", - "type": "added", - "tag": "strong", - "text": "Convert PNG to YCbCr Colors", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:5 > span:2 > span:2", - "type": "added", - "tag": "span", - "text": "Decomposes the image into Luma (Y) and Blue-difference / Red-difference chroma components.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:5 > span:2 > strong:1", - "type": "removed", - "tag": "strong", - "text": "Temperature PNG", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:5 > span:2 > span:2", - "type": "removed", - "tag": "span", - "text": "Make an image warmer or cooler with a single precise control.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:5 > span:4", - "type": "added", - "tag": "span", - "text": "", - "nodes": 2 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:5 > svg:4", - "type": "removed", - "tag": "svg", - "text": "", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:6", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:7", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:8", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:9", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:10", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:11", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:12", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:13", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:14", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:15", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:16", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:17", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:18", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:19", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:20", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:21", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:22", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:23", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:24", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:25", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:4 > div:1 > i:2", - "type": "added", - "tag": "i", - "text": "18 TOOLS", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:4 > div:1 > i:2", - "type": "removed", - "tag": "i", - "text": "05 TOOLS", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:1 > span:2 > span:2", - "type": "added", - "tag": "span", - "text": "Scales the image with bilinear interpolation. With aspect kept, one side defines the scale; if both are set, the image fits inside them.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:1 > span:2 > span:2", - "type": "removed", - "tag": "span", - "text": "Scale an image with bilinear interpolation and optional aspect lock.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:1 > span:4", - "type": "added", - "tag": "span", - "text": "", - "nodes": 2 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:1 > svg:4", - "type": "removed", - "tag": "svg", - "text": "", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:2 > span:2 > span:2", - "type": "added", - "tag": "span", - "text": "Cuts out a rectangular area. Coordinates and sizes may go beyond the image — the area is clipped to the intersection.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:2 > span:2 > span:2", - "type": "removed", - "tag": "span", - "text": "Cut a rectangular area with exact coordinates and dimensions.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:2 > span:4", - "type": "added", - "tag": "span", - "text": "", - "nodes": 2 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:2 > svg:4", - "type": "removed", - "tag": "svg", - "text": "", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:3 > span:2 > span:2", - "type": "added", - "tag": "span", - "text": "Rotates by 90°, 180° or 270° clockwise without quality loss.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:3 > span:2 > span:2", - "type": "removed", - "tag": "span", - "text": "Rotate by 90, 180, or 270 degrees without quality loss.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:3 > span:4", - "type": "added", - "tag": "span", - "text": "", - "nodes": 2 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:3 > svg:4", - "type": "removed", - "tag": "svg", - "text": "", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:4 > span:2 > span:2", - "type": "added", - "tag": "span", - "text": "Mirrors horizontally or vertically without quality loss.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:4 > span:2 > span:2", - "type": "removed", - "tag": "span", - "text": "Mirror the image horizontally or vertically.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:4 > span:4", - "type": "added", - "tag": "span", - "text": "", - "nodes": 2 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:4 > svg:4", - "type": "removed", - "tag": "svg", - "text": "", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:5 > span:2 > span:2", - "type": "added", - "tag": "span", - "text": "Expands the canvas on all sides by the chosen number of pixels.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:5 > span:2 > span:2", - "type": "removed", - "tag": "span", - "text": "Expand the canvas on all sides by a chosen number of pixels.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:5 > span:4", - "type": "added", - "tag": "span", - "text": "", - "nodes": 2 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:5 > svg:4", - "type": "removed", - "tag": "svg", - "text": "", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:6", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:7", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:8", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:9", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:10", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:11", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:12", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:13", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:14", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:15", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:16", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:17", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:18", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:5 > div:1 > i:2", - "type": "added", - "tag": "i", - "text": "8 TOOLS", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:5 > div:1 > i:2", - "type": "removed", - "tag": "i", - "text": "04 TOOLS", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:1 > span:2 > span:2", - "type": "added", - "tag": "span", - "text": "Gaussian blur: three passes of separable box blur — fast at any radius. Transparent edges do not darken.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:1 > span:2 > span:2", - "type": "removed", - "tag": "span", - "text": "Apply a fast Gaussian-style blur with transparent edge handling.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:1 > span:4", - "type": "added", - "tag": "span", - "text": "", - "nodes": 2 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:1 > svg:4", - "type": "removed", - "tag": "svg", - "text": "", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:2 > span:2 > span:2", - "type": "added", - "tag": "span", - "text": "Emphasizes edges with a sharpening kernel; strength sets the blend with the original. 0% means no change.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:2 > span:2 > span:2", - "type": "removed", - "tag": "span", - "text": "Emphasize edges with an adjustable sharpening kernel.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:2 > span:4", - "type": "added", - "tag": "span", - "text": "", - "nodes": 2 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:2 > svg:4", - "type": "removed", - "tag": "svg", - "text": "", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:3 > span:2 > span:2", - "type": "added", - "tag": "span", - "text": "Smoothly darkens the edges of the image, leaving the center untouched.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:3 > span:2 > span:2", - "type": "removed", - "tag": "span", - "text": "Smoothly darken the image edges while preserving the center.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:3 > span:4", - "type": "added", - "tag": "span", - "text": "", - "nodes": 2 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:3 > svg:4", - "type": "removed", - "tag": "svg", - "text": "", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:4 > span:2 > strong:1", - "type": "added", - "tag": "strong", - "text": "Pixelate PNG", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:4 > span:2 > span:2", - "type": "added", - "tag": "span", - "text": "Averages every blockSize×blockSize area into one color — classic mosaic.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:4 > span:2 > strong:1", - "type": "removed", - "tag": "strong", - "text": "JPEG artifacts", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:4 > span:2 > span:2", - "type": "removed", - "tag": "span", - "text": "Simulate low-quality JPEG recompression for testing.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:4 > span:4", - "type": "added", - "tag": "span", - "text": "", - "nodes": 2 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:4 > svg:4", - "type": "removed", - "tag": "svg", - "text": "", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:5", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:6", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:7", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:8", - "type": "added", - "tag": "a", - "text": "", - "nodes": 9 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:6 > div:1 > span:1", - "type": "added", - "tag": "span", - "text": "TEXT", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:6 > div:1 > i:2", - "type": "added", - "tag": "i", - "text": "3 TOOLS", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:6 > div:1 > span:1", - "type": "removed", - "tag": "span", - "text": "ANALYZE", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:6 > div:1 > i:2", - "type": "removed", - "tag": "i", - "text": "04 TOOLS", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:1 > span:2 > strong:1", - "type": "added", - "tag": "strong", - "text": "Add text to PNG", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:1 > span:2 > span:2", - "type": "added", - "tag": "span", - "text": "Draws a text label on the image: font, size, color, bold, position on a 3×3 grid and an optional backing plate.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:1 > span:2 > strong:1", - "type": "removed", - "tag": "strong", - "text": "PNG info", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:1 > span:2 > span:2", - "type": "removed", - "tag": "span", - "text": "Inspect dimensions, alpha presence, and unique color count.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:1 > span:4", - "type": "added", - "tag": "span", - "text": "", - "nodes": 2 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:1 > svg:4", - "type": "removed", - "tag": "svg", - "text": "", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:2 > span:2 > strong:1", - "type": "added", - "tag": "strong", - "text": "Date stamp PNG", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:2 > span:2 > span:2", - "type": "added", - "tag": "span", - "text": "Stamps the current date and time using a format string (YYYY MM DD hh mm ss tokens). Same styling options as Add text.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:2 > span:2 > strong:1", - "type": "removed", - "tag": "strong", - "text": "Check grayscale", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:2 > span:2 > span:2", - "type": "removed", - "tag": "span", - "text": "Report whether the image contains only shades of gray.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:2 > span:4", - "type": "added", - "tag": "span", - "text": "", - "nodes": 2 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:2 > svg:4", - "type": "removed", - "tag": "svg", - "text": "", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:3 > span:2 > strong:1", - "type": "added", - "tag": "strong", - "text": "Watermark Tile PNG", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:3 > span:2 > span:2", - "type": "added", - "tag": "span", - "text": "Covers the image with a repeating diagonal semi-transparent text tile — a protection watermark.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:3 > span:2 > strong:1", - "type": "removed", - "tag": "strong", - "text": "Check transparency", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:3 > span:2 > span:2", - "type": "removed", - "tag": "span", - "text": "Detect transparent and semi-transparent pixels.", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:3 > span:4", - "type": "added", - "tag": "span", - "text": "", - "nodes": 2 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:3 > svg:4", - "type": "removed", - "tag": "svg", - "text": "", - "nodes": 1 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:4", - "type": "removed", - "tag": "a", - "text": "", - "nodes": 8 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:7", - "type": "added", - "tag": "section", - "text": "", - "nodes": 122 - }, - { - "path": "body > main:1 > div:2 > div:3 > section:8", - "type": "added", - "tag": "section", - "text": "", - "nodes": 194 - } - ], + "deltas": [], "counts": { - "added": 150, - "removed": 80, + "added": 0, + "removed": 0, "tagMismatch": 0, - "textMismatch": 1, - "nodesAdded": 1043, - "nodesRemoved": 87 + "textMismatch": 0, + "nodesAdded": 0, + "nodesRemoved": 0 } }, { diff --git a/web/audit/dom-report.md b/web/audit/dom-report.md index 13b6d0a..1ee9408 100644 --- a/web/audit/dom-report.md +++ b/web/audit/dom-report.md @@ -1,13 +1,13 @@ # DOM audit (phase A) -_2026-08-29T02:33:28.258Z_ +_2026-08-29T02:50:59.953Z_ ## Сводка | route | ref | added | removed | tag | text | |---|---|---|---|---|---| | `/preview/demo` | demo.html | 0 | 0 | 0 | 0 | -| `/preview/list-tools` | list-tools.html | 150 | 80 | 0 | 1 | +| `/preview/list-tools` | list-tools.html | 0 | 0 | 0 | 0 | | `/preview/tools/linear-gradient-png` | gradient.html | 5 | 6 | 2 | 1 | | `/preview/tools/remove-background-png` | background-remover.html | 7 | 6 | 2 | 1 | @@ -22,162 +22,11 @@ _расхождений нет_ ## /preview/list-tools (vs list-tools.html) -- added: **150** (≈1043 узл.), removed: **80** (≈87 узл.), tag: **0**, text: **1** +- added: **0** (≈0 узл.), removed: **0** (≈0 узл.), tag: **0**, text: **0** -### Расхождения (топ 150) +### Расхождения (топ 0) -- `body > main:1 > div:2 > div:1 > div:2 > b:1` **added** (`b` "130" · 1 узл.) -- `body > main:1 > div:2 > div:1 > div:2 > span:2` **text**: ours `TOOLSAVAILABLE` → ref `TOOLS AVAILABLE` -- `body > main:1 > div:2 > div:1 > div:2 > b:1` **removed** (`b` "32" · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:1 > div:1 > i:2` **added** (`i` "21 TOOLS" · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:1 > div:1 > i:2` **removed** (`i` "05 TOOLS" · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:1 > span:2 > span:2` **added** (`span` "Opens a JPEG and saves it as lossless PNG. Transparency, if present, is preserved." · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:1 > span:2 > span:2` **removed** (`span` "Re-encode JPEG files as lossless PNG while preserving transparency." · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:1 > span:4` **added** (`span` · 2 узл.) -- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:1 > svg:4` **removed** (`svg` · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:2 > span:2 > span:2` **added** (`span` "Re-encodes a WebP image into universal PNG." · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:2 > span:2 > span:2` **removed** (`span` "Turn WebP images into a universal PNG format for any workflow." · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:2 > span:4` **added** (`span` · 2 узл.) -- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:2 > svg:4` **removed** (`svg` · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:3 > span:2 > strong:1` **added** (`strong` "Convert GIF to PNG" · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:3 > span:2 > span:2` **added** (`span` "Extracts the first frame of a GIF animation and saves it as PNG." · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:3 > span:2 > strong:1` **removed** (`strong` "PNG to Base64" · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:3 > span:2 > span:2` **removed** (`span` "Encode an image as a base64 string for embedding in code or styles." · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:3 > span:4` **added** (`span` · 2 узл.) -- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:3 > svg:4` **removed** (`svg` · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:4 > span:2 > strong:1` **added** (`strong` "Convert BMP to PNG" · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:4 > span:2 > span:2` **added** (`span` "Re-encodes BMP into compact lossless PNG." · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:4 > span:2 > strong:1` **removed** (`strong` "PNG to Data URI" · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:4 > span:2 > span:2` **removed** (`span` "Build a complete data URI ready for HTML and CSS." · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:4 > span:4` **added** (`span` · 2 узл.) -- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:4 > svg:4` **removed** (`svg` · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:5 > span:2 > strong:1` **added** (`strong` "Convert ICO to PNG" · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:5 > span:2 > span:2` **added** (`span` "Turns an .ico icon into a regular PNG of the chosen size." · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:5 > span:2 > strong:1` **removed** (`strong` "Convert PNG to JPG" · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:5 > span:2 > span:2` **removed** (`span` "Composite transparency over a selected backdrop and export JPEG." · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:5 > span:4` **added** (`span` · 2 узл.) -- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:5 > svg:4` **removed** (`svg` · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:6` **added** (`a` · 9 узл.) -- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:7` **added** (`a` · 9 узл.) -- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:8` **added** (`a` · 9 узл.) -- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:9` **added** (`a` · 9 узл.) -- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:10` **added** (`a` · 9 узл.) -- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:11` **added** (`a` · 9 узл.) -- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:12` **added** (`a` · 9 узл.) -- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:13` **added** (`a` · 9 узл.) -- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:14` **added** (`a` · 9 узл.) -- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:15` **added** (`a` · 9 узл.) -- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:16` **added** (`a` · 9 узл.) -- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:17` **added** (`a` · 9 узл.) -- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:18` **added** (`a` · 9 узл.) -- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:19` **added** (`a` · 9 узл.) -- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:20` **added** (`a` · 9 узл.) -- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:21` **added** (`a` · 9 узл.) -- `body > main:1 > div:2 > div:3 > section:2 > div:1 > i:2` **added** (`i` "21 TOOLS" · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:2 > div:1 > i:2` **removed** (`i` "05 TOOLS" · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:1 > span:2 > strong:1` **added** (`strong` "Circle Mask PNG" · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:1 > span:2 > span:2` **added** (`span` "Cuts the image into a circle. Diameter is set as a share of the smaller side." · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:1 > span:2 > strong:1` **removed** (`strong` "Remove background PNG" · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:1 > span:2 > span:2` **removed** (`span` "Remove a solid background by color, tolerance, or edge-connected regions." · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:1 > span:4` **added** (`span` · 2 узл.) -- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:1 > svg:4` **removed** (`svg` · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:2 > span:2 > strong:1` **added** (`strong` "Square Mask PNG" · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:2 > span:2 > span:2` **added** (`span` "Cuts the image into a rectangle with sides as a share of the smaller side." · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:2 > span:2 > strong:1` **removed** (`strong` "Extract alpha mask" · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:2 > span:2 > span:2` **removed** (`span` "Turn the alpha channel into a clean black-and-white mask." · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:2 > span:4` **added** (`span` · 2 узл.) -- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:2 > svg:4` **removed** (`svg` · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:3 > span:2 > strong:1` **added** (`strong` "Star Mask PNG" · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:3 > span:2 > span:2` **added** (`span` "Cuts the image into an n-pointed star with adjustable inner radius and rotation." · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:3 > span:2 > strong:1` **removed** (`strong` "Round corners PNG" · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:3 > span:2 > span:2` **removed** (`span` "Clip the image corners by a precise radius percentage." · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:3 > span:4` **added** (`span` · 2 узл.) -- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:3 > svg:4` **removed** (`svg` · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:4 > span:2 > strong:1` **added** (`strong` "Wavy Mask PNG" · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:4 > span:2 > span:2` **added** (`span` "Cuts the image into a wavy-edged circle: radius is modulated by a sine with chosen amplitude and frequency." · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:4 > span:2 > strong:1` **removed** (`strong` "Outline PNG" · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:4 > span:2 > span:2` **removed** (`span` "Add a colored ring around opaque content with adjustable thickness." · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:4 > span:4` **added** (`span` · 2 узл.) -- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:4 > svg:4` **removed** (`svg` · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:5 > span:2 > strong:1` **added** (`strong` "Remove alpha channel PNG" · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:5 > span:2 > span:2` **added** (`span` "Composites the image over a white background and saves without transparency." · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:5 > span:2 > strong:1` **removed** (`strong` "Change PNG opacity" · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:5 > span:2 > span:2` **removed** (`span` "Multiply the alpha channel while keeping the original colors unchanged." · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:5 > span:4` **added** (`span` · 2 узл.) -- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:5 > svg:4` **removed** (`svg` · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:6` **added** (`a` · 9 узл.) -- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:7` **added** (`a` · 9 узл.) -- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:8` **added** (`a` · 9 узл.) -- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:9` **added** (`a` · 9 узл.) -- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:10` **added** (`a` · 9 узл.) -- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:11` **added** (`a` · 9 узл.) -- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:12` **added** (`a` · 9 узл.) -- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:13` **added** (`a` · 9 узл.) -- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:14` **added** (`a` · 9 узл.) -- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:15` **added** (`a` · 9 узл.) -- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:16` **added** (`a` · 9 узл.) -- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:17` **added** (`a` · 9 узл.) -- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:18` **added** (`a` · 9 узл.) -- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:19` **added** (`a` · 9 узл.) -- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:20` **added** (`a` · 9 узл.) -- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:21` **added** (`a` · 9 узл.) -- `body > main:1 > div:2 > div:3 > section:3 > div:1 > i:2` **added** (`i` "25 TOOLS" · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:3 > div:1 > i:2` **removed** (`i` "05 TOOLS" · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:1 > span:2 > strong:1` **added** (`strong` "Split PNG into HSL" · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:1 > span:2 > span:2` **added** (`span` "Decomposes the image into Hue, Saturation and Lightness components." · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:1 > span:2 > strong:1` **removed** (`strong` "Create gradient PNG" · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:1 > span:2 > span:2` **removed** (`span` "Generate a smooth transition between two colors with direction controls." · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:1 > span:4` **added** (`span` · 2 узл.) -- `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:1 > svg:4` **removed** (`svg` · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:2 > span:2 > strong:1` **added** (`strong` "Split PNG into HSV" · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:2 > span:2 > span:2` **added** (`span` "Decomposes the image into Hue, Saturation and Value (brightness) components." · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:2 > span:2 > strong:1` **removed** (`strong` "Grayscale PNG" · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:2 > span:2 > span:2` **removed** (`span` "Convert the image to luminance-based shades of gray." · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:2 > span:4` **added** (`span` · 2 узл.) -- `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:2 > svg:4` **removed** (`svg` · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:3 > span:2 > strong:1` **added** (`strong` "Split PNG into HSI" · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:3 > span:2 > span:2` **added** (`span` "Decomposes the image into Hue, Saturation and Intensity components." · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:3 > span:2 > strong:1` **removed** (`strong` "Invert colors PNG" · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:3 > span:2 > span:2` **removed** (`span` "Invert every color channel while leaving alpha untouched." · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:3 > span:4` **added** (`span` · 2 узл.) -- `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:3 > svg:4` **removed** (`svg` · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:4 > span:2 > strong:1` **added** (`strong` "Convert PNG to CMYK Colors" · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:4 > span:2 > span:2` **added** (`span` "Decomposes the image into print-style Cyan, Magenta, Yellow and Key (black) components." · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:4 > span:2 > strong:1` **removed** (`strong` "Brightness & contrast" · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:4 > span:2 > span:2` **removed** (`span` "Adjust brightness and contrast across a controlled range." · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:4 > span:4` **added** (`span` · 2 узл.) -- `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:4 > svg:4` **removed** (`svg` · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:5 > span:2 > strong:1` **added** (`strong` "Convert PNG to YCbCr Colors" · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:5 > span:2 > span:2` **added** (`span` "Decomposes the image into Luma (Y) and Blue-difference / Red-difference chroma components." · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:5 > span:2 > strong:1` **removed** (`strong` "Temperature PNG" · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:5 > span:2 > span:2` **removed** (`span` "Make an image warmer or cooler with a single precise control." · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:5 > span:4` **added** (`span` · 2 узл.) -- `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:5 > svg:4` **removed** (`svg` · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:6` **added** (`a` · 9 узл.) -- `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:7` **added** (`a` · 9 узл.) -- `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:8` **added** (`a` · 9 узл.) -- `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:9` **added** (`a` · 9 узл.) -- `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:10` **added** (`a` · 9 узл.) -- `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:11` **added** (`a` · 9 узл.) -- `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:12` **added** (`a` · 9 узл.) -- `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:13` **added** (`a` · 9 узл.) -- `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:14` **added** (`a` · 9 узл.) -- `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:15` **added** (`a` · 9 узл.) -- `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:16` **added** (`a` · 9 узл.) -- `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:17` **added** (`a` · 9 узл.) -- `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:18` **added** (`a` · 9 узл.) -- `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:19` **added** (`a` · 9 узл.) -- `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:20` **added** (`a` · 9 узл.) -- `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:21` **added** (`a` · 9 узл.) -- `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:22` **added** (`a` · 9 узл.) -- `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:23` **added** (`a` · 9 узл.) -- `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:24` **added** (`a` · 9 узл.) -- `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:25` **added** (`a` · 9 узл.) -- `body > main:1 > div:2 > div:3 > section:4 > div:1 > i:2` **added** (`i` "18 TOOLS" · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:4 > div:1 > i:2` **removed** (`i` "05 TOOLS" · 1 узл.) -- `body > main:1 > div:2 > div:3 > section:4 > div:2 > a:1 > span:2 > span:2` **added** (`span` "Scales the image with bilinear interpolation. With aspect kept, one side defines the scale; if both are set, the image fits inside them." · 1 узл.) - -_…и ещё 81 (см. json)_ +_расхождений нет_ ## /preview/tools/linear-gradient-png (vs gradient.html) diff --git a/web/src/lib/components/kit/CatalogGroup.svelte b/web/src/lib/components/kit/CatalogGroup.svelte index 421b5ae..414610f 100644 --- a/web/src/lib/components/kit/CatalogGroup.svelte +++ b/web/src/lib/components/kit/CatalogGroup.svelte @@ -12,7 +12,7 @@
{label} - {count} TOOLS + {count.toString().padStart(2, "0")} TOOLS
{@render children()} diff --git a/web/src/lib/components/kit/CatalogHeader.svelte b/web/src/lib/components/kit/CatalogHeader.svelte index e1de803..017c722 100644 --- a/web/src/lib/components/kit/CatalogHeader.svelte +++ b/web/src/lib/components/kit/CatalogHeader.svelte @@ -16,7 +16,7 @@
{total} - TOOLS
AVAILABLE + TOOLS
AVAILABLE
diff --git a/web/src/lib/components/kit/ToolCard.svelte b/web/src/lib/components/kit/ToolCard.svelte index 8c8f503..fafa6d1 100644 --- a/web/src/lib/components/kit/ToolCard.svelte +++ b/web/src/lib/components/kit/ToolCard.svelte @@ -23,7 +23,7 @@ {index !== undefined ? index.toString().padStart(2, "0") : ""} - +