diff --git a/web/audit/dom-report.json b/web/audit/dom-report.json
index 05c35ef..49a0c37 100644
--- a/web/audit/dom-report.json
+++ b/web/audit/dom-report.json
@@ -1,5 +1,5 @@
{
- "generatedAt": "2026-08-29T02:19:33.865Z",
+ "generatedAt": "2026-08-29T02:33:28.256Z",
"reports": [
{
"route": "/preview/demo",
@@ -19,775 +19,1635 @@
"ref": "list-tools.html",
"deltas": [
{
- "path": "body > main:1 > header:1 > a:1 > span:3",
+ "path": "body > main:1 > div:2 > div:1 > div:2 > b:1",
"type": "added",
- "tag": "span",
- "text": "/ LIST-TOOLS",
+ "tag": "b",
+ "text": "130",
"nodes": 1
},
{
- "path": "body > main:1 > header:1 > a:1 > span:3",
- "type": "removed",
- "tag": "span",
- "text": "/ CATALOG",
- "nodes": 1
- },
- {
- "path": "body > main:1 > header:1 > div:3 > span:1",
+ "path": "body > main:1 > div:2 > div:1 > div:2 > span:2",
"type": "textMismatch",
- "ours": "AUTO PIPELINE",
- "ref": "LOCAL MODE / READY"
+ "ours": "TOOLSAVAILABLE",
+ "ref": "TOOLS AVAILABLE"
},
{
- "path": "body > main:1 > section:2",
- "type": "tagMismatch",
- "ours": "section",
- "ref": "div"
- },
- {
- "path": "body > main:1 > section:2 > header:1",
- "type": "added",
- "tag": "header",
- "text": "",
- "nodes": 4
- },
- {
- "path": "body > main:1 > section:2 > section:2",
- "type": "tagMismatch",
- "ours": "section",
- "ref": "div"
- },
- {
- "path": "body > main:1 > section:2 > section:2 > header:1",
- "type": "added",
- "tag": "header",
- "text": "",
- "nodes": 4
- },
- {
- "path": "body > main:1 > section:2 > section:2 > div:2 > a:1",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:2 > div:2 > a:2",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:2 > div:2 > a:3",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:2 > div:2 > a:4",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:2 > div:2 > a:5",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:2 > div:2 > a:6",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:2 > div:2 > a:7",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:2 > div:2 > a:8",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:2 > div:2 > a:9",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:2 > div:2 > a:10",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:2 > div:2 > a:11",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:2 > div:2 > a:12",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:2 > div:2 > a:13",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:2 > div:2 > a:14",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:2 > div:2 > a:15",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:2 > div:2 > a:16",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:2 > div:2 > a:17",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:2 > div:2 > a:18",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:2 > div:2 > a:19",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:2 > div:2 > a:20",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:2 > div:2 > a:21",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:2 > div:2 > div:1",
+ "path": "body > main:1 > div:2 > div:1 > div:2 > b:1",
"type": "removed",
- "tag": "div",
- "text": "EASY-PNG-TOOLS / CATALOG",
+ "tag": "b",
+ "text": "32",
"nodes": 1
},
{
- "path": "body > main:1 > section:2 > section:2 > div:2 > h1:2",
- "type": "removed",
- "tag": "h1",
- "text": "Tool catalog",
+ "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 > section:2 > section:2 > div:2 > p:3",
+ "path": "body > main:1 > div:2 > div:3 > section:1 > div:1 > i:2",
"type": "removed",
- "tag": "p",
- "text": "Focused utilities for working with PNG. Inspect, transform, and export — locally in your browser.",
+ "tag": "i",
+ "text": "05 TOOLS",
"nodes": 1
},
{
- "path": "body > main:1 > section:2 > section:2 > div:2",
+ "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": "div",
- "text": "",
- "nodes": 4
+ "tag": "span",
+ "text": "Re-encode JPEG files as lossless PNG while preserving transparency.",
+ "nodes": 1
},
{
- "path": "body > main:1 > section:2 > section:3",
- "type": "tagMismatch",
- "ours": "section",
- "ref": "div"
- },
- {
- "path": "body > main:1 > section:2 > section:3 > header:1",
+ "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:1 > span:4",
"type": "added",
- "tag": "header",
+ "tag": "span",
"text": "",
- "nodes": 4
+ "nodes": 2
},
{
- "path": "body > main:1 > section:2 > section:3 > div:2 > a:1",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:3 > div:2 > a:2",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:3 > div:2 > a:3",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:3 > div:2 > a:4",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:3 > div:2 > a:5",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:3 > div:2 > a:6",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:3 > div:2 > a:7",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:3 > div:2 > a:8",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:3 > div:2 > a:9",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:3 > div:2 > a:10",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:3 > div:2 > a:11",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:3 > div:2 > a:12",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:3 > div:2 > a:13",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:3 > div:2 > a:14",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:3 > div:2 > a:15",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:3 > div:2 > a:16",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:3 > div:2 > a:17",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:3 > div:2 > a:18",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:3 > div:2 > a:19",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:3 > div:2 > a:20",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:3 > div:2 > a:21",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:3 > div:2 > svg:1",
+ "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 > section:2 > section:3 > div:2 > button:2",
- "type": "removed",
- "tag": "button",
- "text": "ALL",
+ "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 > section:2 > section:3 > div:2 > button:3",
+ "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:2 > span:2 > span:2",
"type": "removed",
- "tag": "button",
- "text": "CONVERT",
+ "tag": "span",
+ "text": "Turn WebP images into a universal PNG format for any workflow.",
"nodes": 1
},
{
- "path": "body > main:1 > section:2 > section:3 > div:2 > button:4",
+ "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": "button",
- "text": "TRANSPARENCY",
+ "tag": "svg",
+ "text": "",
"nodes": 1
},
{
- "path": "body > main:1 > section:2 > section:3 > div:2 > button:5",
- "type": "removed",
- "tag": "button",
- "text": "COLOR",
+ "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 > section:2 > section:3 > div:2 > button:6",
- "type": "removed",
- "tag": "button",
- "text": "GEOMETRY",
+ "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 > section:2 > section:3 > div:2 > button:7",
+ "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:3 > span:2 > strong:1",
"type": "removed",
- "tag": "button",
- "text": "FILTERS",
+ "tag": "strong",
+ "text": "PNG to Base64",
"nodes": 1
},
{
- "path": "body > main:1 > section:2 > section:3 > div:2 > button:8",
+ "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:3 > span:2 > span:2",
"type": "removed",
- "tag": "button",
+ "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 > section:2 > section:3 > label:1",
+ "path": "body > main:1 > div:2 > div:3 > section:6 > div:1 > i:2",
"type": "removed",
- "tag": "label",
- "text": "",
- "nodes": 3
+ "tag": "i",
+ "text": "04 TOOLS",
+ "nodes": 1
},
{
- "path": "body > main:1 > section:2 > section:4",
- "type": "tagMismatch",
- "ours": "section",
- "ref": "div"
- },
- {
- "path": "body > main:1 > section:2 > section:4 > header:1",
+ "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:1 > span:2 > strong:1",
"type": "added",
- "tag": "header",
- "text": "",
- "nodes": 4
+ "tag": "strong",
+ "text": "Add text to PNG",
+ "nodes": 1
},
{
- "path": "body > main:1 > section:2 > section:4 > div:2",
- "type": "tagMismatch",
- "ours": "div",
- "ref": "section"
- },
- {
- "path": "body > main:1 > section:2 > section:4 > div:2 > a:1",
+ "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:1 > span:2 > span:2",
"type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
+ "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 > section:2 > section:4 > div:2 > a:2",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:4 > div:2 > a:3",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:4 > div:2 > a:4",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:4 > div:2 > a:5",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:4 > div:2 > a:6",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:4 > div:2 > a:7",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:4 > div:2 > a:8",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:4 > div:2 > a:9",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:4 > div:2 > a:10",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:4 > div:2 > a:11",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:4 > div:2 > a:12",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:4 > div:2 > a:13",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:4 > div:2 > a:14",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:4 > div:2 > a:15",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:4 > div:2 > a:16",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:4 > div:2 > a:17",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:4 > div:2 > a:18",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:4 > div:2 > a:19",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:4 > div:2 > a:20",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:4 > div:2 > a:21",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:4 > div:2 > a:22",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:4 > div:2 > a:23",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:4 > div:2 > a:24",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:4 > div:2 > a:25",
- "type": "added",
- "tag": "a",
- "text": "",
- "nodes": 7
- },
- {
- "path": "body > main:1 > section:2 > section:4 > div:2 > div:1",
+ "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:1 > span:2 > strong:1",
"type": "removed",
- "tag": "div",
- "text": "",
- "nodes": 3
+ "tag": "strong",
+ "text": "PNG info",
+ "nodes": 1
},
{
- "path": "body > main:1 > section:2 > section:4 > div:2 > div:2",
+ "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:1 > span:2 > span:2",
"type": "removed",
- "tag": "div",
- "text": "",
- "nodes": 41
+ "tag": "span",
+ "text": "Inspect dimensions, alpha presence, and unique color count.",
+ "nodes": 1
},
{
- "path": "body > main:1 > section:2 > section:4 > section:2",
- "type": "removed",
- "tag": "section",
- "text": "",
- "nodes": 45
- },
- {
- "path": "body > main:1 > section:2 > section:4 > section:3",
- "type": "removed",
- "tag": "section",
- "text": "",
- "nodes": 45
- },
- {
- "path": "body > main:1 > section:2 > section:4 > section:4",
- "type": "removed",
- "tag": "section",
- "text": "",
- "nodes": 45
- },
- {
- "path": "body > main:1 > section:2 > section:4 > section:5",
- "type": "removed",
- "tag": "section",
- "text": "",
- "nodes": 37
- },
- {
- "path": "body > main:1 > section:2 > section:4 > section:6",
- "type": "removed",
- "tag": "section",
- "text": "",
- "nodes": 37
- },
- {
- "path": "body > main:1 > section:2 > section:5",
+ "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:1 > span:4",
"type": "added",
- "tag": "section",
+ "tag": "span",
"text": "",
- "nodes": 132
- },
- {
- "path": "body > main:1 > section:2 > section:6",
- "type": "added",
- "tag": "section",
- "text": "",
- "nodes": 62
- },
- {
- "path": "body > main:1 > section:2 > section:7",
- "type": "added",
- "tag": "section",
- "text": "",
- "nodes": 27
- },
- {
- "path": "body > main:1 > section:2 > section:8",
- "type": "added",
- "tag": "section",
- "text": "",
- "nodes": 97
- },
- {
- "path": "body > main:1 > section:2 > section:9",
- "type": "added",
- "tag": "section",
- "text": "",
- "nodes": 153
- },
- {
- "path": "body > main:1 > section:2 > footer:4",
- "type": "removed",
- "tag": "footer",
- "text": "ALL OPERATIONS RUN LOCALLY YOUR FILES NEVER LEAVE THIS DEVICE",
"nodes": 2
},
{
- "path": "body > main:1 > footer:3",
- "type": "added",
- "tag": "footer",
+ "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:1 > svg:4",
+ "type": "removed",
+ "tag": "svg",
"text": "",
- "nodes": 6
+ "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
}
],
"counts": {
- "added": 78,
- "removed": 22,
- "tagMismatch": 5,
+ "added": 150,
+ "removed": 80,
+ "tagMismatch": 0,
"textMismatch": 1,
- "nodesAdded": 963,
- "nodesRemoved": 274
+ "nodesAdded": 1043,
+ "nodesRemoved": 87
}
},
{
"route": "/preview/tools/linear-gradient-png",
"ref": "gradient.html",
"deltas": [
- {
- "path": "body > main:1 > header:1 > a:1 > span:3",
- "type": "added",
- "tag": "span",
- "text": "/ TOOLS / LINEAR-GRADIENT-PNG",
- "nodes": 1
- },
- {
- "path": "body > main:1 > header:1 > a:1 > span:3",
- "type": "removed",
- "tag": "span",
- "text": "/ GRADIENT",
- "nodes": 1
- },
- {
- "path": "body > main:1 > header:1 > div:3 > span:1",
- "type": "textMismatch",
- "ours": "AUTO PIPELINE",
- "ref": "LIVE PREVIEW"
- },
{
"path": "body > main:1 > div:2 > section:1",
"type": "tagMismatch",
@@ -885,38 +1745,18 @@
}
],
"counts": {
- "added": 6,
- "removed": 7,
+ "added": 5,
+ "removed": 6,
"tagMismatch": 2,
- "textMismatch": 2,
- "nodesAdded": 155,
- "nodesRemoved": 73
+ "textMismatch": 1,
+ "nodesAdded": 154,
+ "nodesRemoved": 72
}
},
{
"route": "/preview/tools/remove-background-png",
"ref": "background-remover.html",
"deltas": [
- {
- "path": "body > main:1 > header:1 > a:1 > span:3",
- "type": "added",
- "tag": "span",
- "text": "/ TOOLS / REMOVE-BACKGROUND-PNG",
- "nodes": 1
- },
- {
- "path": "body > main:1 > header:1 > a:1 > span:3",
- "type": "removed",
- "tag": "span",
- "text": "/ BACKGROUND REMOVER",
- "nodes": 1
- },
- {
- "path": "body > main:1 > header:1 > div:3 > span:1",
- "type": "textMismatch",
- "ours": "AUTO PIPELINE",
- "ref": "AUTO PROCESSING"
- },
{
"path": "body > main:1 > div:2 > section:1",
"type": "tagMismatch",
@@ -1028,12 +1868,12 @@
}
],
"counts": {
- "added": 8,
- "removed": 7,
+ "added": 7,
+ "removed": 6,
"tagMismatch": 2,
- "textMismatch": 2,
- "nodesAdded": 153,
- "nodesRemoved": 78
+ "textMismatch": 1,
+ "nodesAdded": 152,
+ "nodesRemoved": 77
}
}
]
diff --git a/web/audit/dom-report.md b/web/audit/dom-report.md
index 9a09720..13b6d0a 100644
--- a/web/audit/dom-report.md
+++ b/web/audit/dom-report.md
@@ -1,15 +1,15 @@
# DOM audit (phase A)
-_2026-08-29T02:19:33.867Z_
+_2026-08-29T02:33:28.258Z_
## Сводка
| route | ref | added | removed | tag | text |
|---|---|---|---|---|---|
| `/preview/demo` | demo.html | 0 | 0 | 0 | 0 |
-| `/preview/list-tools` | list-tools.html | 78 | 22 | 5 | 1 |
-| `/preview/tools/linear-gradient-png` | gradient.html | 6 | 7 | 2 | 2 |
-| `/preview/tools/remove-background-png` | background-remover.html | 8 | 7 | 2 | 2 |
+| `/preview/list-tools` | list-tools.html | 150 | 80 | 0 | 1 |
+| `/preview/tools/linear-gradient-png` | gradient.html | 5 | 6 | 2 | 1 |
+| `/preview/tools/remove-background-png` | background-remover.html | 7 | 6 | 2 | 1 |
## /preview/demo (vs demo.html)
@@ -22,127 +22,170 @@ _расхождений нет_
## /preview/list-tools (vs list-tools.html)
-- added: **78** (≈963 узл.), removed: **22** (≈274 узл.), tag: **5**, text: **1**
+- added: **150** (≈1043 узл.), removed: **80** (≈87 узл.), tag: **0**, text: **1**
-### Расхождения (топ 106)
+### Расхождения (топ 150)
-- `body > main:1 > header:1 > a:1 > span:3` **added** (`span` "/ LIST-TOOLS" · 1 узл.)
-- `body > main:1 > header:1 > a:1 > span:3` **removed** (`span` "/ CATALOG" · 1 узл.)
-- `body > main:1 > header:1 > div:3 > span:1` **text**: ours `AUTO PIPELINE` → ref `LOCAL MODE / READY`
-- `body > main:1 > section:2` **tag**: ours `section` → ref `div`
-- `body > main:1 > section:2 > header:1` **added** (`header` · 4 узл.)
-- `body > main:1 > section:2 > section:2` **tag**: ours `section` → ref `div`
-- `body > main:1 > section:2 > section:2 > header:1` **added** (`header` · 4 узл.)
-- `body > main:1 > section:2 > section:2 > div:2 > a:1` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:2 > div:2 > a:2` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:2 > div:2 > a:3` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:2 > div:2 > a:4` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:2 > div:2 > a:5` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:2 > div:2 > a:6` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:2 > div:2 > a:7` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:2 > div:2 > a:8` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:2 > div:2 > a:9` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:2 > div:2 > a:10` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:2 > div:2 > a:11` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:2 > div:2 > a:12` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:2 > div:2 > a:13` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:2 > div:2 > a:14` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:2 > div:2 > a:15` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:2 > div:2 > a:16` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:2 > div:2 > a:17` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:2 > div:2 > a:18` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:2 > div:2 > a:19` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:2 > div:2 > a:20` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:2 > div:2 > a:21` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:2 > div:2 > div:1` **removed** (`div` "EASY-PNG-TOOLS / CATALOG" · 1 узл.)
-- `body > main:1 > section:2 > section:2 > div:2 > h1:2` **removed** (`h1` "Tool catalog" · 1 узл.)
-- `body > main:1 > section:2 > section:2 > div:2 > p:3` **removed** (`p` "Focused utilities for working with PNG. Inspect, transform, and export — locally in your browser." · 1 узл.)
-- `body > main:1 > section:2 > section:2 > div:2` **removed** (`div` · 4 узл.)
-- `body > main:1 > section:2 > section:3` **tag**: ours `section` → ref `div`
-- `body > main:1 > section:2 > section:3 > header:1` **added** (`header` · 4 узл.)
-- `body > main:1 > section:2 > section:3 > div:2 > a:1` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:3 > div:2 > a:2` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:3 > div:2 > a:3` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:3 > div:2 > a:4` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:3 > div:2 > a:5` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:3 > div:2 > a:6` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:3 > div:2 > a:7` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:3 > div:2 > a:8` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:3 > div:2 > a:9` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:3 > div:2 > a:10` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:3 > div:2 > a:11` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:3 > div:2 > a:12` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:3 > div:2 > a:13` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:3 > div:2 > a:14` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:3 > div:2 > a:15` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:3 > div:2 > a:16` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:3 > div:2 > a:17` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:3 > div:2 > a:18` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:3 > div:2 > a:19` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:3 > div:2 > a:20` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:3 > div:2 > a:21` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:3 > div:2 > svg:1` **removed** (`svg` · 1 узл.)
-- `body > main:1 > section:2 > section:3 > div:2 > button:2` **removed** (`button` "ALL" · 1 узл.)
-- `body > main:1 > section:2 > section:3 > div:2 > button:3` **removed** (`button` "CONVERT" · 1 узл.)
-- `body > main:1 > section:2 > section:3 > div:2 > button:4` **removed** (`button` "TRANSPARENCY" · 1 узл.)
-- `body > main:1 > section:2 > section:3 > div:2 > button:5` **removed** (`button` "COLOR" · 1 узл.)
-- `body > main:1 > section:2 > section:3 > div:2 > button:6` **removed** (`button` "GEOMETRY" · 1 узл.)
-- `body > main:1 > section:2 > section:3 > div:2 > button:7` **removed** (`button` "FILTERS" · 1 узл.)
-- `body > main:1 > section:2 > section:3 > div:2 > button:8` **removed** (`button` "ANALYZE" · 1 узл.)
-- `body > main:1 > section:2 > section:3 > label:1` **removed** (`label` · 3 узл.)
-- `body > main:1 > section:2 > section:4` **tag**: ours `section` → ref `div`
-- `body > main:1 > section:2 > section:4 > header:1` **added** (`header` · 4 узл.)
-- `body > main:1 > section:2 > section:4 > div:2` **tag**: ours `div` → ref `section`
-- `body > main:1 > section:2 > section:4 > div:2 > a:1` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:4 > div:2 > a:2` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:4 > div:2 > a:3` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:4 > div:2 > a:4` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:4 > div:2 > a:5` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:4 > div:2 > a:6` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:4 > div:2 > a:7` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:4 > div:2 > a:8` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:4 > div:2 > a:9` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:4 > div:2 > a:10` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:4 > div:2 > a:11` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:4 > div:2 > a:12` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:4 > div:2 > a:13` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:4 > div:2 > a:14` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:4 > div:2 > a:15` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:4 > div:2 > a:16` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:4 > div:2 > a:17` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:4 > div:2 > a:18` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:4 > div:2 > a:19` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:4 > div:2 > a:20` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:4 > div:2 > a:21` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:4 > div:2 > a:22` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:4 > div:2 > a:23` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:4 > div:2 > a:24` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:4 > div:2 > a:25` **added** (`a` · 7 узл.)
-- `body > main:1 > section:2 > section:4 > div:2 > div:1` **removed** (`div` · 3 узл.)
-- `body > main:1 > section:2 > section:4 > div:2 > div:2` **removed** (`div` · 41 узл.)
-- `body > main:1 > section:2 > section:4 > section:2` **removed** (`section` · 45 узл.)
-- `body > main:1 > section:2 > section:4 > section:3` **removed** (`section` · 45 узл.)
-- `body > main:1 > section:2 > section:4 > section:4` **removed** (`section` · 45 узл.)
-- `body > main:1 > section:2 > section:4 > section:5` **removed** (`section` · 37 узл.)
-- `body > main:1 > section:2 > section:4 > section:6` **removed** (`section` · 37 узл.)
-- `body > main:1 > section:2 > section:5` **added** (`section` · 132 узл.)
-- `body > main:1 > section:2 > section:6` **added** (`section` · 62 узл.)
-- `body > main:1 > section:2 > section:7` **added** (`section` · 27 узл.)
-- `body > main:1 > section:2 > section:8` **added** (`section` · 97 узл.)
-- `body > main:1 > section:2 > section:9` **added** (`section` · 153 узл.)
-- `body > main:1 > section:2 > footer:4` **removed** (`footer` "ALL OPERATIONS RUN LOCALLY YOUR FILES NEVER LEAVE THIS DEVICE" · 2 узл.)
-- `body > main:1 > footer:3` **added** (`footer` · 6 узл.)
+- `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)
-- added: **6** (≈155 узл.), removed: **7** (≈73 узл.), tag: **2**, text: **2**
+- added: **5** (≈154 узл.), removed: **6** (≈72 узл.), tag: **2**, text: **1**
-### Расхождения (топ 17)
+### Расхождения (топ 14)
-- `body > main:1 > header:1 > a:1 > span:3` **added** (`span` "/ TOOLS / LINEAR-GRADIENT-PNG" · 1 узл.)
-- `body > main:1 > header:1 > a:1 > span:3` **removed** (`span` "/ GRADIENT" · 1 узл.)
-- `body > main:1 > header:1 > div:3 > span:1` **text**: ours `AUTO PIPELINE` → ref `LIVE PREVIEW`
- `body > main:1 > div:2 > section:1` **tag**: ours `section` → ref `div`
- `body > main:1 > div:2 > section:1` **text**: ours `` → ref `PNG PROCESSING SINGLE TOOL`
- `body > main:1 > div:2 > section:1 > section:1` **added** (`section` · 145 узл.)
@@ -161,13 +204,10 @@ _расхождений нет_
## /preview/tools/remove-background-png (vs background-remover.html)
-- added: **8** (≈153 узл.), removed: **7** (≈78 узл.), tag: **2**, text: **2**
+- added: **7** (≈152 узл.), removed: **6** (≈77 узл.), tag: **2**, text: **1**
-### Расхождения (топ 19)
+### Расхождения (топ 16)
-- `body > main:1 > header:1 > a:1 > span:3` **added** (`span` "/ TOOLS / REMOVE-BACKGROUND-PNG" · 1 узл.)
-- `body > main:1 > header:1 > a:1 > span:3` **removed** (`span` "/ BACKGROUND REMOVER" · 1 узл.)
-- `body > main:1 > header:1 > div:3 > span:1` **text**: ours `AUTO PIPELINE` → ref `AUTO PROCESSING`
- `body > main:1 > div:2 > section:1` **tag**: ours `section` → ref `div`
- `body > main:1 > div:2 > section:1` **text**: ours `` → ref `PNG PROCESSING SINGLE TOOL`
- `body > main:1 > div:2 > section:1 > section:1` **added** (`section` · 138 узл.)
diff --git a/web/src/lib/components/kit/CatalogGroup.svelte b/web/src/lib/components/kit/CatalogGroup.svelte
new file mode 100644
index 0000000..421b5ae
--- /dev/null
+++ b/web/src/lib/components/kit/CatalogGroup.svelte
@@ -0,0 +1,51 @@
+
+
+
+
+ {label}
+ {count} TOOLS
+
+
+ {@render children()}
+
+
+
+
diff --git a/web/src/lib/components/kit/CatalogHeader.svelte b/web/src/lib/components/kit/CatalogHeader.svelte
new file mode 100644
index 0000000..e1de803
--- /dev/null
+++ b/web/src/lib/components/kit/CatalogHeader.svelte
@@ -0,0 +1,66 @@
+
+
+
+
+
EASY-PNG-TOOLS / CATALOG
+
Tool catalog
+
+ Focused utilities for working with PNG. Inspect, transform, and export —
+ locally in your browser.
+
+
+
+ {total}
+ TOOLS
AVAILABLE
+
+
- AUTO PIPELINE
+ {status}
= {
+ "/preview/demo": "WORKSPACE",
+ "/preview/list-tools": "CATALOG",
+ "/preview/tools/linear-gradient-png": "GRADIENT",
+ "/preview/tools/remove-background-png": "BACKGROUND REMOVER",
+ };
+
+ const STATUS: Record = {
+ "/preview/demo": "AUTO PIPELINE",
+ "/preview/list-tools": "LOCAL MODE / READY",
+ "/preview/tools/linear-gradient-png": "LIVE PREVIEW",
+ "/preview/tools/remove-background-png": "AUTO PROCESSING",
+ };
function toCrumb(path: string): string {
- const seg = path
- .replace(/^\/preview/, "")
- .replace(/^\//, "")
- .split("/")
- .filter(Boolean);
- const map: Record = { demo: "WORKSPACE" };
- const label = seg.length
- ? seg.map((s) => map[s] ?? s.toUpperCase()).join(" / ")
- : "PREVIEW";
- return "/ " + label;
+ return "/ " + (CRUMB[path] ?? path.split("/").filter(Boolean).pop()?.toUpperCase() ?? "PREVIEW");
+ }
+
+ function toStatus(path: string): string {
+ return STATUS[path] ?? "AUTO PIPELINE";
}
-
+
{@render children()}
-
+ {#if $page.url.pathname !== "/preview/list-tools"}
+
+ {/if}