fix: resolve design issues from refs audit
This commit is contained in:
+286
-245
@@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"generatedAt": "2026-08-28T11:58:18.224Z",
|
"generatedAt": "2026-08-28T14:54:53.564Z",
|
||||||
"ours": "http://127.0.0.1:5179/preview/demo",
|
"ours": "http://127.0.0.1:5179/preview/demo",
|
||||||
"ref": "C:\\+XBOCTuK\\+life_projects\\easy-png-tools\\refs-html\\demo.html",
|
"ref": "C:\\+XBOCTuK\\+life_projects\\easy-png-tools\\refs-html\\demo.html",
|
||||||
"tokenDiffs": {
|
"tokenDiffs": {
|
||||||
@@ -161,7 +161,123 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(2)>div:nth-child(4)>button:nth-child(1)",
|
"path": "body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(1)",
|
||||||
|
"tag": "a",
|
||||||
|
"text": "Workspace",
|
||||||
|
"deltas": {
|
||||||
|
"fontSize": {
|
||||||
|
"ours": "12px",
|
||||||
|
"ref": "10px"
|
||||||
|
},
|
||||||
|
"letterSpacing": {
|
||||||
|
"ours": "0.48px",
|
||||||
|
"ref": "normal"
|
||||||
|
},
|
||||||
|
"rect": {
|
||||||
|
"ours": {
|
||||||
|
"x": 513,
|
||||||
|
"y": 24,
|
||||||
|
"w": 69,
|
||||||
|
"h": 15
|
||||||
|
},
|
||||||
|
"ref": {
|
||||||
|
"x": 792,
|
||||||
|
"y": 26,
|
||||||
|
"w": 49,
|
||||||
|
"h": 12
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(2)",
|
||||||
|
"tag": "a",
|
||||||
|
"text": "Catalog",
|
||||||
|
"deltas": {
|
||||||
|
"fontSize": {
|
||||||
|
"ours": "12px",
|
||||||
|
"ref": "10px"
|
||||||
|
},
|
||||||
|
"letterSpacing": {
|
||||||
|
"ours": "0.48px",
|
||||||
|
"ref": "normal"
|
||||||
|
},
|
||||||
|
"rect": {
|
||||||
|
"ours": {
|
||||||
|
"x": 600,
|
||||||
|
"y": 24,
|
||||||
|
"w": 54,
|
||||||
|
"h": 15
|
||||||
|
},
|
||||||
|
"ref": {
|
||||||
|
"x": 864,
|
||||||
|
"y": 26,
|
||||||
|
"w": 39,
|
||||||
|
"h": 12
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(3)",
|
||||||
|
"tag": "a",
|
||||||
|
"text": "Gradient",
|
||||||
|
"deltas": {
|
||||||
|
"fontSize": {
|
||||||
|
"ours": "12px",
|
||||||
|
"ref": "10px"
|
||||||
|
},
|
||||||
|
"letterSpacing": {
|
||||||
|
"ours": "0.48px",
|
||||||
|
"ref": "normal"
|
||||||
|
},
|
||||||
|
"rect": {
|
||||||
|
"ours": {
|
||||||
|
"x": 672,
|
||||||
|
"y": 24,
|
||||||
|
"w": 61,
|
||||||
|
"h": 15
|
||||||
|
},
|
||||||
|
"ref": {
|
||||||
|
"x": 924,
|
||||||
|
"y": 26,
|
||||||
|
"w": 44,
|
||||||
|
"h": 12
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(4)",
|
||||||
|
"tag": "a",
|
||||||
|
"text": "Background remover",
|
||||||
|
"deltas": {
|
||||||
|
"fontSize": {
|
||||||
|
"ours": "12px",
|
||||||
|
"ref": "10px"
|
||||||
|
},
|
||||||
|
"letterSpacing": {
|
||||||
|
"ours": "0.48px",
|
||||||
|
"ref": "normal"
|
||||||
|
},
|
||||||
|
"rect": {
|
||||||
|
"ours": {
|
||||||
|
"x": 751,
|
||||||
|
"y": 24,
|
||||||
|
"w": 138,
|
||||||
|
"h": 15
|
||||||
|
},
|
||||||
|
"ref": {
|
||||||
|
"x": 990,
|
||||||
|
"y": 26,
|
||||||
|
"w": 99,
|
||||||
|
"h": 12
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(3)>div:nth-child(4)>button:nth-child(1)",
|
||||||
"tag": "button",
|
"tag": "button",
|
||||||
"text": "RU",
|
"text": "RU",
|
||||||
"deltas": {
|
"deltas": {
|
||||||
@@ -172,7 +288,7 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(2)>div:nth-child(4)>button:nth-child(2)",
|
"path": "body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(3)>div:nth-child(4)>button:nth-child(2)",
|
||||||
"tag": "button",
|
"tag": "button",
|
||||||
"text": "EN",
|
"text": "EN",
|
||||||
"deltas": {
|
"deltas": {
|
||||||
@@ -251,7 +367,7 @@
|
|||||||
"text": "Build your image pipeline.",
|
"text": "Build your image pipeline.",
|
||||||
"deltas": {
|
"deltas": {
|
||||||
"lineHeight": {
|
"lineHeight": {
|
||||||
"ours": "normal",
|
"ours": "51.84px",
|
||||||
"ref": "57.6px"
|
"ref": "57.6px"
|
||||||
},
|
},
|
||||||
"rect": {
|
"rect": {
|
||||||
@@ -259,7 +375,7 @@
|
|||||||
"x": 58,
|
"x": 58,
|
||||||
"y": 155,
|
"y": 155,
|
||||||
"w": 474,
|
"w": 474,
|
||||||
"h": 150
|
"h": 104
|
||||||
},
|
},
|
||||||
"ref": {
|
"ref": {
|
||||||
"x": 58,
|
"x": 58,
|
||||||
@@ -278,7 +394,7 @@
|
|||||||
"rect": {
|
"rect": {
|
||||||
"ours": {
|
"ours": {
|
||||||
"x": 58,
|
"x": 58,
|
||||||
"y": 321,
|
"y": 275,
|
||||||
"w": 474,
|
"w": 474,
|
||||||
"h": 51
|
"h": 51
|
||||||
},
|
},
|
||||||
@@ -299,7 +415,7 @@
|
|||||||
"rect": {
|
"rect": {
|
||||||
"ours": {
|
"ours": {
|
||||||
"x": 597,
|
"x": 597,
|
||||||
"y": 347,
|
"y": 300,
|
||||||
"w": 66,
|
"w": 66,
|
||||||
"h": 14
|
"h": 14
|
||||||
},
|
},
|
||||||
@@ -320,7 +436,7 @@
|
|||||||
"rect": {
|
"rect": {
|
||||||
"ours": {
|
"ours": {
|
||||||
"x": 671,
|
"x": 671,
|
||||||
"y": 347,
|
"y": 300,
|
||||||
"w": 40,
|
"w": 40,
|
||||||
"h": 14
|
"h": 14
|
||||||
},
|
},
|
||||||
@@ -338,10 +454,6 @@
|
|||||||
"tag": "span",
|
"tag": "span",
|
||||||
"text": "PROCESSING PIPELINE",
|
"text": "PROCESSING PIPELINE",
|
||||||
"deltas": {
|
"deltas": {
|
||||||
"fontWeight": {
|
|
||||||
"ours": "500",
|
|
||||||
"ref": "400"
|
|
||||||
},
|
|
||||||
"letterSpacing": {
|
"letterSpacing": {
|
||||||
"ours": "1px",
|
"ours": "1px",
|
||||||
"ref": "1.2px"
|
"ref": "1.2px"
|
||||||
@@ -357,7 +469,7 @@
|
|||||||
"rect": {
|
"rect": {
|
||||||
"ours": {
|
"ours": {
|
||||||
"x": 58,
|
"x": 58,
|
||||||
"y": 428,
|
"y": 382,
|
||||||
"w": 154,
|
"w": 154,
|
||||||
"h": 12
|
"h": 12
|
||||||
},
|
},
|
||||||
@@ -378,7 +490,7 @@
|
|||||||
"rect": {
|
"rect": {
|
||||||
"ours": {
|
"ours": {
|
||||||
"x": 175,
|
"x": 175,
|
||||||
"y": 451,
|
"y": 405,
|
||||||
"w": 36,
|
"w": 36,
|
||||||
"h": 13
|
"h": 13
|
||||||
},
|
},
|
||||||
@@ -392,20 +504,32 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(1)>div:nth-child(1)>span:nth-child(2)",
|
"path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>article:nth-child(1)>div:nth-child(1)>span:nth-child(1)",
|
||||||
"tag": "span",
|
"tag": "span",
|
||||||
"text": "01",
|
"text": "01",
|
||||||
"deltas": {
|
"deltas": {
|
||||||
|
"fontSize": {
|
||||||
|
"ours": "22px",
|
||||||
|
"ref": "11px"
|
||||||
|
},
|
||||||
|
"fontWeight": {
|
||||||
|
"ours": "600",
|
||||||
|
"ref": "400"
|
||||||
|
},
|
||||||
"padding": {
|
"padding": {
|
||||||
"ours": "0px",
|
"ours": "0px",
|
||||||
"ref": "17px 0px 0px 15px"
|
"ref": "17px 0px 0px 15px"
|
||||||
},
|
},
|
||||||
|
"lineHeight": {
|
||||||
|
"ours": "22px",
|
||||||
|
"ref": "normal"
|
||||||
|
},
|
||||||
"rect": {
|
"rect": {
|
||||||
"ours": {
|
"ours": {
|
||||||
"x": 95,
|
"x": 74,
|
||||||
"y": 504,
|
"y": 464,
|
||||||
"w": 13,
|
"w": 26,
|
||||||
"h": 14
|
"h": 22
|
||||||
},
|
},
|
||||||
"ref": {
|
"ref": {
|
||||||
"x": 59,
|
"x": 59,
|
||||||
@@ -417,7 +541,7 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(1)>div:nth-child(1)>span:nth-child(3)",
|
"path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>article:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>span:nth-child(1)",
|
||||||
"tag": "span",
|
"tag": "span",
|
||||||
"text": "BACKGROUND",
|
"text": "BACKGROUND",
|
||||||
"deltas": {
|
"deltas": {
|
||||||
@@ -427,9 +551,9 @@
|
|||||||
},
|
},
|
||||||
"rect": {
|
"rect": {
|
||||||
"ours": {
|
"ours": {
|
||||||
"x": 116,
|
"x": 117,
|
||||||
"y": 504,
|
"y": 455,
|
||||||
"w": 72,
|
"w": 171,
|
||||||
"h": 13
|
"h": 13
|
||||||
},
|
},
|
||||||
"ref": {
|
"ref": {
|
||||||
@@ -442,18 +566,14 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(1)>div:nth-child(1)>span:nth-child(4)",
|
"path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>article:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>h2:nth-child(2)",
|
||||||
"tag": "span",
|
"tag": "h2",
|
||||||
"text": "Gradient background",
|
"text": "Gradient background",
|
||||||
"deltas": {
|
"deltas": {
|
||||||
"margin": {
|
|
||||||
"ours": "0px",
|
|
||||||
"ref": "5px 0px 18px"
|
|
||||||
},
|
|
||||||
"rect": {
|
"rect": {
|
||||||
"ours": {
|
"ours": {
|
||||||
"x": 196,
|
"x": 117,
|
||||||
"y": 501,
|
"y": 473,
|
||||||
"w": 171,
|
"w": 171,
|
||||||
"h": 19
|
"h": 19
|
||||||
},
|
},
|
||||||
@@ -467,17 +587,25 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>button:nth-child(1)",
|
"path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>article:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(3)>div:nth-child(2)>button:nth-child(1)",
|
||||||
"tag": "button",
|
"tag": "button",
|
||||||
"text": "100",
|
"text": "100%",
|
||||||
"deltas": {
|
"deltas": {
|
||||||
|
"color": {
|
||||||
|
"ours": "rgb(255, 255, 255)",
|
||||||
|
"ref": "rgb(23, 33, 43)"
|
||||||
|
},
|
||||||
|
"backgroundColor": {
|
||||||
|
"ours": "rgb(23, 105, 210)",
|
||||||
|
"ref": "rgba(0, 0, 0, 0)"
|
||||||
|
},
|
||||||
"padding": {
|
"padding": {
|
||||||
"ours": "0px 11.2px",
|
"ours": "0px 11.2px",
|
||||||
"ref": "0px"
|
"ref": "0px"
|
||||||
},
|
},
|
||||||
"letterSpacing": {
|
"letterSpacing": {
|
||||||
"ours": "0.6px",
|
"ours": "0.6px",
|
||||||
"ref": "normal"
|
"ref": "0.8px"
|
||||||
},
|
},
|
||||||
"display": {
|
"display": {
|
||||||
"ours": "flex",
|
"ours": "flex",
|
||||||
@@ -485,134 +613,47 @@
|
|||||||
},
|
},
|
||||||
"rect": {
|
"rect": {
|
||||||
"ours": {
|
"ours": {
|
||||||
"x": 491,
|
"x": 518,
|
||||||
"y": 590,
|
"y": 552,
|
||||||
"w": 42,
|
"w": 49,
|
||||||
"h": 30
|
"h": 30
|
||||||
},
|
},
|
||||||
"ref": {
|
"ref": {
|
||||||
"x": 520,
|
"x": 680,
|
||||||
"y": 567,
|
"y": 546,
|
||||||
"w": 46,
|
"w": 25,
|
||||||
"h": 30
|
"h": 12
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>button:nth-child(2)",
|
"path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>article:nth-child(2)>div:nth-child(1)>span:nth-child(1)",
|
||||||
"tag": "button",
|
|
||||||
"text": "75",
|
|
||||||
"deltas": {
|
|
||||||
"padding": {
|
|
||||||
"ours": "0px 11.2px",
|
|
||||||
"ref": "0px"
|
|
||||||
},
|
|
||||||
"letterSpacing": {
|
|
||||||
"ours": "0.6px",
|
|
||||||
"ref": "normal"
|
|
||||||
},
|
|
||||||
"display": {
|
|
||||||
"ours": "flex",
|
|
||||||
"ref": "block"
|
|
||||||
},
|
|
||||||
"rect": {
|
|
||||||
"ours": {
|
|
||||||
"x": 533,
|
|
||||||
"y": 590,
|
|
||||||
"w": 37,
|
|
||||||
"h": 30
|
|
||||||
},
|
|
||||||
"ref": {
|
|
||||||
"x": 566,
|
|
||||||
"y": 567,
|
|
||||||
"w": 46,
|
|
||||||
"h": 30
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>button:nth-child(3)",
|
|
||||||
"tag": "button",
|
|
||||||
"text": "50",
|
|
||||||
"deltas": {
|
|
||||||
"padding": {
|
|
||||||
"ours": "0px 11.2px",
|
|
||||||
"ref": "0px"
|
|
||||||
},
|
|
||||||
"letterSpacing": {
|
|
||||||
"ours": "0.6px",
|
|
||||||
"ref": "normal"
|
|
||||||
},
|
|
||||||
"display": {
|
|
||||||
"ours": "flex",
|
|
||||||
"ref": "block"
|
|
||||||
},
|
|
||||||
"rect": {
|
|
||||||
"ours": {
|
|
||||||
"x": 569,
|
|
||||||
"y": 590,
|
|
||||||
"w": 37,
|
|
||||||
"h": 30
|
|
||||||
},
|
|
||||||
"ref": {
|
|
||||||
"x": 612,
|
|
||||||
"y": 567,
|
|
||||||
"w": 46,
|
|
||||||
"h": 30
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>button:nth-child(4)",
|
|
||||||
"tag": "button",
|
|
||||||
"text": "25",
|
|
||||||
"deltas": {
|
|
||||||
"padding": {
|
|
||||||
"ours": "0px 11.2px",
|
|
||||||
"ref": "0px"
|
|
||||||
},
|
|
||||||
"letterSpacing": {
|
|
||||||
"ours": "0.6px",
|
|
||||||
"ref": "normal"
|
|
||||||
},
|
|
||||||
"display": {
|
|
||||||
"ours": "flex",
|
|
||||||
"ref": "block"
|
|
||||||
},
|
|
||||||
"rect": {
|
|
||||||
"ours": {
|
|
||||||
"x": 606,
|
|
||||||
"y": 590,
|
|
||||||
"w": 37,
|
|
||||||
"h": 30
|
|
||||||
},
|
|
||||||
"ref": {
|
|
||||||
"x": 658,
|
|
||||||
"y": 567,
|
|
||||||
"w": 46,
|
|
||||||
"h": 30
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(2)>div:nth-child(1)>span:nth-child(2)",
|
|
||||||
"tag": "span",
|
"tag": "span",
|
||||||
"text": "02",
|
"text": "02",
|
||||||
"deltas": {
|
"deltas": {
|
||||||
|
"fontSize": {
|
||||||
|
"ours": "22px",
|
||||||
|
"ref": "11px"
|
||||||
|
},
|
||||||
|
"fontWeight": {
|
||||||
|
"ours": "600",
|
||||||
|
"ref": "400"
|
||||||
|
},
|
||||||
"padding": {
|
"padding": {
|
||||||
"ours": "0px",
|
"ours": "0px",
|
||||||
"ref": "17px 0px 0px 15px"
|
"ref": "17px 0px 0px 15px"
|
||||||
},
|
},
|
||||||
|
"lineHeight": {
|
||||||
|
"ours": "22px",
|
||||||
|
"ref": "normal"
|
||||||
|
},
|
||||||
"rect": {
|
"rect": {
|
||||||
"ours": {
|
"ours": {
|
||||||
"x": 95,
|
"x": 74,
|
||||||
"y": 655,
|
"y": 624,
|
||||||
"w": 13,
|
"w": 26,
|
||||||
"h": 14
|
"h": 22
|
||||||
},
|
},
|
||||||
"ref": {
|
"ref": {
|
||||||
"x": 59,
|
"x": 59,
|
||||||
@@ -624,7 +665,7 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(2)>div:nth-child(1)>span:nth-child(3)",
|
"path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>article:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>span:nth-child(1)",
|
||||||
"tag": "span",
|
"tag": "span",
|
||||||
"text": "TRANSFORM",
|
"text": "TRANSFORM",
|
||||||
"deltas": {
|
"deltas": {
|
||||||
@@ -634,9 +675,9 @@
|
|||||||
},
|
},
|
||||||
"rect": {
|
"rect": {
|
||||||
"ours": {
|
"ours": {
|
||||||
"x": 116,
|
"x": 117,
|
||||||
"y": 656,
|
"y": 615,
|
||||||
"w": 65,
|
"w": 153,
|
||||||
"h": 13
|
"h": 13
|
||||||
},
|
},
|
||||||
"ref": {
|
"ref": {
|
||||||
@@ -649,18 +690,14 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(2)>div:nth-child(1)>span:nth-child(4)",
|
"path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>article:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>h2:nth-child(2)",
|
||||||
"tag": "span",
|
"tag": "h2",
|
||||||
"text": "Remove background",
|
"text": "Remove background",
|
||||||
"deltas": {
|
"deltas": {
|
||||||
"margin": {
|
|
||||||
"ours": "0px",
|
|
||||||
"ref": "5px 0px 18px"
|
|
||||||
},
|
|
||||||
"rect": {
|
"rect": {
|
||||||
"ours": {
|
"ours": {
|
||||||
"x": 189,
|
"x": 117,
|
||||||
"y": 653,
|
"y": 633,
|
||||||
"w": 153,
|
"w": 153,
|
||||||
"h": 19
|
"h": 19
|
||||||
},
|
},
|
||||||
@@ -674,20 +711,32 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(3)>div:nth-child(1)>span:nth-child(2)",
|
"path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>article:nth-child(3)>div:nth-child(1)>span:nth-child(1)",
|
||||||
"tag": "span",
|
"tag": "span",
|
||||||
"text": "03",
|
"text": "03",
|
||||||
"deltas": {
|
"deltas": {
|
||||||
|
"fontSize": {
|
||||||
|
"ours": "22px",
|
||||||
|
"ref": "11px"
|
||||||
|
},
|
||||||
|
"fontWeight": {
|
||||||
|
"ours": "600",
|
||||||
|
"ref": "400"
|
||||||
|
},
|
||||||
"padding": {
|
"padding": {
|
||||||
"ours": "0px",
|
"ours": "0px",
|
||||||
"ref": "17px 0px 0px 15px"
|
"ref": "17px 0px 0px 15px"
|
||||||
},
|
},
|
||||||
|
"lineHeight": {
|
||||||
|
"ours": "22px",
|
||||||
|
"ref": "normal"
|
||||||
|
},
|
||||||
"rect": {
|
"rect": {
|
||||||
"ours": {
|
"ours": {
|
||||||
"x": 95,
|
"x": 74,
|
||||||
"y": 769,
|
"y": 746,
|
||||||
"w": 13,
|
"w": 26,
|
||||||
"h": 14
|
"h": 22
|
||||||
},
|
},
|
||||||
"ref": {
|
"ref": {
|
||||||
"x": 59,
|
"x": 59,
|
||||||
@@ -699,7 +748,7 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(3)>div:nth-child(1)>span:nth-child(3)",
|
"path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>article:nth-child(3)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>span:nth-child(1)",
|
||||||
"tag": "span",
|
"tag": "span",
|
||||||
"text": "STYLE",
|
"text": "STYLE",
|
||||||
"deltas": {
|
"deltas": {
|
||||||
@@ -709,9 +758,9 @@
|
|||||||
},
|
},
|
||||||
"rect": {
|
"rect": {
|
||||||
"ours": {
|
"ours": {
|
||||||
"x": 116,
|
"x": 117,
|
||||||
"y": 770,
|
"y": 737,
|
||||||
"w": 36,
|
"w": 99,
|
||||||
"h": 13
|
"h": 13
|
||||||
},
|
},
|
||||||
"ref": {
|
"ref": {
|
||||||
@@ -724,18 +773,14 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(3)>div:nth-child(1)>span:nth-child(4)",
|
"path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>article:nth-child(3)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>h2:nth-child(2)",
|
||||||
"tag": "span",
|
"tag": "h2",
|
||||||
"text": "Add outline",
|
"text": "Add outline",
|
||||||
"deltas": {
|
"deltas": {
|
||||||
"margin": {
|
|
||||||
"ours": "0px",
|
|
||||||
"ref": "5px 0px 18px"
|
|
||||||
},
|
|
||||||
"rect": {
|
"rect": {
|
||||||
"ours": {
|
"ours": {
|
||||||
"x": 160,
|
"x": 117,
|
||||||
"y": 767,
|
"y": 755,
|
||||||
"w": 99,
|
"w": 99,
|
||||||
"h": 19
|
"h": 19
|
||||||
},
|
},
|
||||||
@@ -749,20 +794,32 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(4)>div:nth-child(1)>span:nth-child(2)",
|
"path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>article:nth-child(4)>div:nth-child(1)>span:nth-child(1)",
|
||||||
"tag": "span",
|
"tag": "span",
|
||||||
"text": "04",
|
"text": "04",
|
||||||
"deltas": {
|
"deltas": {
|
||||||
|
"fontSize": {
|
||||||
|
"ours": "22px",
|
||||||
|
"ref": "11px"
|
||||||
|
},
|
||||||
|
"fontWeight": {
|
||||||
|
"ours": "600",
|
||||||
|
"ref": "400"
|
||||||
|
},
|
||||||
"padding": {
|
"padding": {
|
||||||
"ours": "0px",
|
"ours": "0px",
|
||||||
"ref": "17px 0px 0px 15px"
|
"ref": "17px 0px 0px 15px"
|
||||||
},
|
},
|
||||||
|
"lineHeight": {
|
||||||
|
"ours": "22px",
|
||||||
|
"ref": "normal"
|
||||||
|
},
|
||||||
"rect": {
|
"rect": {
|
||||||
"ours": {
|
"ours": {
|
||||||
"x": 95,
|
"x": 74,
|
||||||
"y": 911,
|
"y": 896,
|
||||||
"w": 13,
|
"w": 26,
|
||||||
"h": 14
|
"h": 22
|
||||||
},
|
},
|
||||||
"ref": {
|
"ref": {
|
||||||
"x": 59,
|
"x": 59,
|
||||||
@@ -774,18 +831,14 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(4)>div:nth-child(1)>span:nth-child(4)",
|
"path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>article:nth-child(4)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>h2:nth-child(2)",
|
||||||
"tag": "span",
|
"tag": "h2",
|
||||||
"text": "Round corners",
|
"text": "Round corners",
|
||||||
"deltas": {
|
"deltas": {
|
||||||
"margin": {
|
|
||||||
"ours": "0px",
|
|
||||||
"ref": "5px 0px 18px"
|
|
||||||
},
|
|
||||||
"rect": {
|
"rect": {
|
||||||
"ours": {
|
"ours": {
|
||||||
"x": 160,
|
"x": 117,
|
||||||
"y": 909,
|
"y": 905,
|
||||||
"w": 117,
|
"w": 117,
|
||||||
"h": 19
|
"h": 19
|
||||||
},
|
},
|
||||||
@@ -799,7 +852,7 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(4)>div:nth-child(2)>div:nth-child(2)>label:nth-child(2)>span:nth-child(1)",
|
"path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>article:nth-child(4)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>label:nth-child(2)>span:nth-child(1)",
|
||||||
"tag": "span",
|
"tag": "span",
|
||||||
"text": "Preserve aspect ratio",
|
"text": "Preserve aspect ratio",
|
||||||
"deltas": {
|
"deltas": {
|
||||||
@@ -817,8 +870,8 @@
|
|||||||
},
|
},
|
||||||
"rect": {
|
"rect": {
|
||||||
"ours": {
|
"ours": {
|
||||||
"x": 399,
|
"x": 422,
|
||||||
"y": 986,
|
"y": 973,
|
||||||
"w": 129,
|
"w": 129,
|
||||||
"h": 18
|
"h": 18
|
||||||
},
|
},
|
||||||
@@ -836,10 +889,6 @@
|
|||||||
"tag": "span",
|
"tag": "span",
|
||||||
"text": "PIPELINE OUTPUTS",
|
"text": "PIPELINE OUTPUTS",
|
||||||
"deltas": {
|
"deltas": {
|
||||||
"fontWeight": {
|
|
||||||
"ours": "500",
|
|
||||||
"ref": "400"
|
|
||||||
},
|
|
||||||
"letterSpacing": {
|
"letterSpacing": {
|
||||||
"ours": "1px",
|
"ours": "1px",
|
||||||
"ref": "1.2px"
|
"ref": "1.2px"
|
||||||
@@ -856,7 +905,7 @@
|
|||||||
"ours": {
|
"ours": {
|
||||||
"x": 799,
|
"x": 799,
|
||||||
"y": 178,
|
"y": 178,
|
||||||
"w": 93,
|
"w": 94,
|
||||||
"h": 24
|
"h": 24
|
||||||
},
|
},
|
||||||
"ref": {
|
"ref": {
|
||||||
@@ -877,7 +926,7 @@
|
|||||||
"ours": {
|
"ours": {
|
||||||
"x": 799,
|
"x": 799,
|
||||||
"y": 209,
|
"y": 209,
|
||||||
"w": 93,
|
"w": 94,
|
||||||
"h": 36
|
"h": 36
|
||||||
},
|
},
|
||||||
"ref": {
|
"ref": {
|
||||||
@@ -912,7 +961,7 @@
|
|||||||
},
|
},
|
||||||
"rect": {
|
"rect": {
|
||||||
"ours": {
|
"ours": {
|
||||||
"x": 1090,
|
"x": 1097,
|
||||||
"y": 240,
|
"y": 240,
|
||||||
"w": 36,
|
"w": 36,
|
||||||
"h": 13
|
"h": 13
|
||||||
@@ -931,20 +980,16 @@
|
|||||||
"tag": "span",
|
"tag": "span",
|
||||||
"text": "DIMENSIONS",
|
"text": "DIMENSIONS",
|
||||||
"deltas": {
|
"deltas": {
|
||||||
"fontSize": {
|
|
||||||
"ours": "10px",
|
|
||||||
"ref": "9px"
|
|
||||||
},
|
|
||||||
"letterSpacing": {
|
"letterSpacing": {
|
||||||
"ours": "1px",
|
"ours": "0.9px",
|
||||||
"ref": "normal"
|
"ref": "normal"
|
||||||
},
|
},
|
||||||
"rect": {
|
"rect": {
|
||||||
"ours": {
|
"ours": {
|
||||||
"x": 1150,
|
"x": 1157,
|
||||||
"y": 215,
|
"y": 216,
|
||||||
"w": 70,
|
"w": 63,
|
||||||
"h": 13
|
"h": 11
|
||||||
},
|
},
|
||||||
"ref": {
|
"ref": {
|
||||||
"x": 1073,
|
"x": 1073,
|
||||||
@@ -985,20 +1030,16 @@
|
|||||||
"tag": "span",
|
"tag": "span",
|
||||||
"text": "FORMAT",
|
"text": "FORMAT",
|
||||||
"deltas": {
|
"deltas": {
|
||||||
"fontSize": {
|
|
||||||
"ours": "10px",
|
|
||||||
"ref": "9px"
|
|
||||||
},
|
|
||||||
"letterSpacing": {
|
"letterSpacing": {
|
||||||
"ours": "1px",
|
"ours": "0.9px",
|
||||||
"ref": "normal"
|
"ref": "normal"
|
||||||
},
|
},
|
||||||
"rect": {
|
"rect": {
|
||||||
"ours": {
|
"ours": {
|
||||||
"x": 1150,
|
"x": 1157,
|
||||||
"y": 239,
|
"y": 240,
|
||||||
"w": 42,
|
"w": 38,
|
||||||
"h": 13
|
"h": 11
|
||||||
},
|
},
|
||||||
"ref": {
|
"ref": {
|
||||||
"x": 1159,
|
"x": 1159,
|
||||||
@@ -1039,20 +1080,16 @@
|
|||||||
"tag": "span",
|
"tag": "span",
|
||||||
"text": "SIZE",
|
"text": "SIZE",
|
||||||
"deltas": {
|
"deltas": {
|
||||||
"fontSize": {
|
|
||||||
"ours": "10px",
|
|
||||||
"ref": "9px"
|
|
||||||
},
|
|
||||||
"letterSpacing": {
|
"letterSpacing": {
|
||||||
"ours": "1px",
|
"ours": "0.9px",
|
||||||
"ref": "normal"
|
"ref": "normal"
|
||||||
},
|
},
|
||||||
"rect": {
|
"rect": {
|
||||||
"ours": {
|
"ours": {
|
||||||
"x": 1150,
|
"x": 1157,
|
||||||
"y": 264,
|
"y": 265,
|
||||||
"w": 28,
|
"w": 25,
|
||||||
"h": 13
|
"h": 11
|
||||||
},
|
},
|
||||||
"ref": {
|
"ref": {
|
||||||
"x": 1246,
|
"x": 1246,
|
||||||
@@ -1114,13 +1151,13 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>span:nth-child(2)",
|
"path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>span:nth-child(1)",
|
||||||
"tag": "span",
|
"tag": "span",
|
||||||
"text": "original.png · 1200 × 800",
|
"text": "original.png · 1200 × 800",
|
||||||
"deltas": {
|
"deltas": {
|
||||||
"rect": {
|
"rect": {
|
||||||
"ours": {
|
"ours": {
|
||||||
"x": 1213,
|
"x": 814,
|
||||||
"y": 704,
|
"y": 704,
|
||||||
"w": 135,
|
"w": 135,
|
||||||
"h": 11
|
"h": 11
|
||||||
@@ -1164,13 +1201,13 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(2)>div:nth-child(2)>span:nth-child(2)",
|
"path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(2)>div:nth-child(2)>span:nth-child(1)",
|
||||||
"tag": "span",
|
"tag": "span",
|
||||||
"text": "gradient applied",
|
"text": "gradient applied",
|
||||||
"deltas": {
|
"deltas": {
|
||||||
"rect": {
|
"rect": {
|
||||||
"ours": {
|
"ours": {
|
||||||
"x": 1262,
|
"x": 814,
|
||||||
"y": 1137,
|
"y": 1137,
|
||||||
"w": 86,
|
"w": 86,
|
||||||
"h": 11
|
"h": 11
|
||||||
@@ -1214,13 +1251,13 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>div:nth-child(2)>span:nth-child(2)",
|
"path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>div:nth-child(2)>span:nth-child(1)",
|
||||||
"tag": "span",
|
"tag": "span",
|
||||||
"text": "background removed",
|
"text": "background removed",
|
||||||
"deltas": {
|
"deltas": {
|
||||||
"rect": {
|
"rect": {
|
||||||
"ours": {
|
"ours": {
|
||||||
"x": 1251,
|
"x": 814,
|
||||||
"y": 1569,
|
"y": 1569,
|
||||||
"w": 97,
|
"w": 97,
|
||||||
"h": 11
|
"h": 11
|
||||||
@@ -1264,13 +1301,13 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(4)>div:nth-child(2)>div:nth-child(2)>span:nth-child(2)",
|
"path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(4)>div:nth-child(2)>div:nth-child(2)>span:nth-child(1)",
|
||||||
"tag": "span",
|
"tag": "span",
|
||||||
"text": "outline added",
|
"text": "outline added",
|
||||||
"deltas": {
|
"deltas": {
|
||||||
"rect": {
|
"rect": {
|
||||||
"ours": {
|
"ours": {
|
||||||
"x": 1278,
|
"x": 814,
|
||||||
"y": 2002,
|
"y": 2002,
|
||||||
"w": 70,
|
"w": 70,
|
||||||
"h": 11
|
"h": 11
|
||||||
@@ -1314,13 +1351,13 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(5)>div:nth-child(2)>div:nth-child(2)>span:nth-child(2)",
|
"path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(5)>div:nth-child(2)>div:nth-child(2)>span:nth-child(1)",
|
||||||
"tag": "span",
|
"tag": "span",
|
||||||
"text": "ready · PNG-24",
|
"text": "ready · PNG-24",
|
||||||
"deltas": {
|
"deltas": {
|
||||||
"rect": {
|
"rect": {
|
||||||
"ours": {
|
"ours": {
|
||||||
"x": 1272,
|
"x": 814,
|
||||||
"y": 2434,
|
"y": 2434,
|
||||||
"w": 76,
|
"w": 76,
|
||||||
"h": 11
|
"h": 11
|
||||||
@@ -1362,24 +1399,28 @@
|
|||||||
"AUTO",
|
"AUTO",
|
||||||
"Gradient color",
|
"Gradient color",
|
||||||
"DIRECTION",
|
"DIRECTION",
|
||||||
"135°",
|
"135 °",
|
||||||
"OPACITY",
|
"OPACITY",
|
||||||
|
"75%",
|
||||||
|
"50%",
|
||||||
|
"25%",
|
||||||
"Automatic subject detection enabled",
|
"Automatic subject detection enabled",
|
||||||
"Outline width",
|
"Outline width",
|
||||||
"2px",
|
"2 px",
|
||||||
"Outline color",
|
"Outline color",
|
||||||
"Corner radius",
|
"Corner radius",
|
||||||
"18px"
|
"18 px",
|
||||||
|
"v0.1.0",
|
||||||
|
"© 2026"
|
||||||
],
|
],
|
||||||
"onlyRef": [
|
"onlyRef": [
|
||||||
"/ \n WORKSPACE",
|
"/ \n WORKSPACE",
|
||||||
"Workspace",
|
|
||||||
"Catalog",
|
|
||||||
"Gradient",
|
|
||||||
"Background remover",
|
|
||||||
"COLOR",
|
"COLOR",
|
||||||
"135\n °",
|
"135\n °",
|
||||||
"100%",
|
"100",
|
||||||
|
"75",
|
||||||
|
"50",
|
||||||
|
"25",
|
||||||
"2\n px",
|
"2\n px",
|
||||||
"18\n px",
|
"18\n px",
|
||||||
"v2.4.0",
|
"v2.4.0",
|
||||||
@@ -1388,8 +1429,8 @@
|
|||||||
"counts": {
|
"counts": {
|
||||||
"tokenLight": 10,
|
"tokenLight": 10,
|
||||||
"tokenDark": 16,
|
"tokenDark": 16,
|
||||||
"elements": 46,
|
"elements": 47,
|
||||||
"onlyOurs": 13,
|
"onlyOurs": 18,
|
||||||
"onlyRef": 12
|
"onlyRef": 11
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
+129
-118
@@ -2,14 +2,14 @@
|
|||||||
|
|
||||||
vs C:\+XBOCTuK\+life_projects\easy-png-tools\refs-html\demo.html
|
vs C:\+XBOCTuK\+life_projects\easy-png-tools\refs-html\demo.html
|
||||||
|
|
||||||
_2026-08-28T11:58:18.224Z_
|
_2026-08-28T14:54:53.564Z_
|
||||||
|
|
||||||
## Сводка
|
## Сводка
|
||||||
|
|
||||||
- Токены light: **10** расх.
|
- Токены light: **10** расх.
|
||||||
- Токены dark: **16** расх.
|
- Токены dark: **16** расх.
|
||||||
- Элементы (стиль/геометрия): **46** расх.
|
- Элементы (стиль/геометрия): **47** расх.
|
||||||
- Только у нас: 13, только в рефе: 12
|
- Только у нас: 18, только в рефе: 11
|
||||||
|
|
||||||
## Токены — Light
|
## Токены — Light
|
||||||
|
|
||||||
@@ -47,7 +47,7 @@ _2026-08-28T11:58:18.224Z_
|
|||||||
| `--radius-lg` | — | .5rem |
|
| `--radius-lg` | — | .5rem |
|
||||||
| `--text-sm` | — | .875rem |
|
| `--text-sm` | — | .875rem |
|
||||||
|
|
||||||
## Расхождения элементов (топ 46)
|
## Расхождения элементов (топ 47)
|
||||||
|
|
||||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>span:nth-child(1)` — "/"
|
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>span:nth-child(1)` — "/"
|
||||||
- **fontFamily**: `"IBM Plex Mono", monospace` → `"IBM Plex Sans", sans-serif`
|
- **fontFamily**: `"IBM Plex Mono", monospace` → `"IBM Plex Sans", sans-serif`
|
||||||
@@ -59,71 +59,86 @@ _2026-08-28T11:58:18.224Z_
|
|||||||
- **display**: `inline` → `block`
|
- **display**: `inline` → `block`
|
||||||
- **rect**: `165,124 7x13` → `1348,20 4x24`
|
- **rect**: `165,124 7x13` → `1348,20 4x24`
|
||||||
|
|
||||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>span:nth-child(1)` — "PROCESSING PIPELINE"
|
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>article:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(3)>div:nth-child(2)>button:nth-child(1)` — "100%"
|
||||||
- **fontWeight**: `500` → `400`
|
- **color**: `rgb(255, 255, 255)` → `rgb(23, 33, 43)`
|
||||||
- **letterSpacing**: `1px` → `1.2px`
|
- **backgroundColor**: `rgb(23, 105, 210)` → `rgba(0, 0, 0, 0)`
|
||||||
- **lineHeight**: `12px` → `normal`
|
- **padding**: `0px 11.2px` → `0px`
|
||||||
- **display**: `block` → `inline`
|
- **letterSpacing**: `0.6px` → `0.8px`
|
||||||
- **rect**: `58,428 154x12` → `58,400 127x12`
|
- **display**: `flex` → `block`
|
||||||
|
- **rect**: `518,552 49x30` → `680,546 25x12`
|
||||||
|
|
||||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>span:nth-child(1)` — "PIPELINE OUTPUTS"
|
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>article:nth-child(1)>div:nth-child(1)>span:nth-child(1)` — "01"
|
||||||
- **fontWeight**: `500` → `400`
|
- **fontSize**: `22px` → `11px`
|
||||||
- **letterSpacing**: `1px` → `1.2px`
|
- **fontWeight**: `600` → `400`
|
||||||
- **lineHeight**: `12px` → `normal`
|
- **padding**: `0px` → `17px 0px 0px 15px`
|
||||||
- **display**: `block` → `inline`
|
- **lineHeight**: `22px` → `normal`
|
||||||
- **rect**: `799,178 93x24` → `799,188 54x36`
|
- **rect**: `74,464 26x22` → `59,466 46x150`
|
||||||
|
|
||||||
|
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>article:nth-child(2)>div:nth-child(1)>span:nth-child(1)` — "02"
|
||||||
|
- **fontSize**: `22px` → `11px`
|
||||||
|
- **fontWeight**: `600` → `400`
|
||||||
|
- **padding**: `0px` → `17px 0px 0px 15px`
|
||||||
|
- **lineHeight**: `22px` → `normal`
|
||||||
|
- **rect**: `74,624 26x22` → `59,628 46x136`
|
||||||
|
|
||||||
|
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>article:nth-child(3)>div:nth-child(1)>span:nth-child(1)` — "03"
|
||||||
|
- **fontSize**: `22px` → `11px`
|
||||||
|
- **fontWeight**: `600` → `400`
|
||||||
|
- **padding**: `0px` → `17px 0px 0px 15px`
|
||||||
|
- **lineHeight**: `22px` → `normal`
|
||||||
|
- **rect**: `74,746 26x22` → `59,776 46x150`
|
||||||
|
|
||||||
|
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>article:nth-child(4)>div:nth-child(1)>span:nth-child(1)` — "04"
|
||||||
|
- **fontSize**: `22px` → `11px`
|
||||||
|
- **fontWeight**: `600` → `400`
|
||||||
|
- **padding**: `0px` → `17px 0px 0px 15px`
|
||||||
|
- **lineHeight**: `22px` → `normal`
|
||||||
|
- **rect**: `74,896 26x22` → `59,938 46x142`
|
||||||
|
|
||||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>button:nth-child(2)>span:nth-child(2)>span:nth-child(1)` — "1.2 MB"
|
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>button:nth-child(2)>span:nth-child(2)>span:nth-child(1)` — "1.2 MB"
|
||||||
- **fontSize**: `10px` → `11px`
|
- **fontSize**: `10px` → `11px`
|
||||||
- **color**: `rgb(255, 255, 255)` → `rgb(23, 33, 43)`
|
- **color**: `rgb(255, 255, 255)` → `rgb(23, 33, 43)`
|
||||||
- **margin**: `0px` → `5px 0px 0px`
|
- **margin**: `0px` → `5px 0px 0px`
|
||||||
- **display**: `inline` → `block`
|
- **display**: `inline` → `block`
|
||||||
- **rect**: `1090,240 36x13` → `1246,291 79x13`
|
- **rect**: `1097,240 36x13` → `1246,291 79x13`
|
||||||
|
|
||||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>button:nth-child(1)` — "100"
|
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>span:nth-child(1)` — "PROCESSING PIPELINE"
|
||||||
- **padding**: `0px 11.2px` → `0px`
|
- **letterSpacing**: `1px` → `1.2px`
|
||||||
- **letterSpacing**: `0.6px` → `normal`
|
- **lineHeight**: `12px` → `normal`
|
||||||
- **display**: `flex` → `block`
|
- **display**: `block` → `inline`
|
||||||
- **rect**: `491,590 42x30` → `520,567 46x30`
|
- **rect**: `58,382 154x12` → `58,400 127x12`
|
||||||
|
|
||||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>button:nth-child(2)` — "75"
|
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>article:nth-child(4)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>label:nth-child(2)>span:nth-child(1)` — "Preserve aspect ratio"
|
||||||
- **padding**: `0px 11.2px` → `0px`
|
|
||||||
- **letterSpacing**: `0.6px` → `normal`
|
|
||||||
- **display**: `flex` → `block`
|
|
||||||
- **rect**: `533,590 37x30` → `566,567 46x30`
|
|
||||||
|
|
||||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>button:nth-child(3)` — "50"
|
|
||||||
- **padding**: `0px 11.2px` → `0px`
|
|
||||||
- **letterSpacing**: `0.6px` → `normal`
|
|
||||||
- **display**: `flex` → `block`
|
|
||||||
- **rect**: `569,590 37x30` → `612,567 46x30`
|
|
||||||
|
|
||||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>button:nth-child(4)` — "25"
|
|
||||||
- **padding**: `0px 11.2px` → `0px`
|
|
||||||
- **letterSpacing**: `0.6px` → `normal`
|
|
||||||
- **display**: `flex` → `block`
|
|
||||||
- **rect**: `606,590 37x30` → `658,567 46x30`
|
|
||||||
|
|
||||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(4)>div:nth-child(2)>div:nth-child(2)>label:nth-child(2)>span:nth-child(1)` — "Preserve aspect ratio"
|
|
||||||
- **fontSize**: `13.6px` → `16px`
|
- **fontSize**: `13.6px` → `16px`
|
||||||
- **lineHeight**: `normal` → `24px`
|
- **lineHeight**: `normal` → `24px`
|
||||||
- **display**: `block` → `inline`
|
- **display**: `block` → `inline`
|
||||||
- **rect**: `399,986 129x18` → `432,1021 156x17`
|
- **rect**: `422,973 129x18` → `432,1021 156x17`
|
||||||
|
|
||||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(1)>span:nth-child(1)` — "DIMENSIONS"
|
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>span:nth-child(1)` — "PIPELINE OUTPUTS"
|
||||||
- **fontSize**: `10px` → `9px`
|
- **letterSpacing**: `1px` → `1.2px`
|
||||||
- **letterSpacing**: `1px` → `normal`
|
- **lineHeight**: `12px` → `normal`
|
||||||
- **rect**: `1150,215 70x13` → `1073,271 79x10`
|
- **display**: `block` → `inline`
|
||||||
|
- **rect**: `799,178 94x24` → `799,188 54x36`
|
||||||
|
|
||||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>span:nth-child(1)` — "FORMAT"
|
### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(1)` — "Workspace"
|
||||||
- **fontSize**: `10px` → `9px`
|
- **fontSize**: `12px` → `10px`
|
||||||
- **letterSpacing**: `1px` → `normal`
|
- **letterSpacing**: `0.48px` → `normal`
|
||||||
- **rect**: `1150,239 42x13` → `1159,271 79x10`
|
- **rect**: `513,24 69x15` → `792,26 49x12`
|
||||||
|
|
||||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(3)>span:nth-child(1)` — "SIZE"
|
### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(2)` — "Catalog"
|
||||||
- **fontSize**: `10px` → `9px`
|
- **fontSize**: `12px` → `10px`
|
||||||
- **letterSpacing**: `1px` → `normal`
|
- **letterSpacing**: `0.48px` → `normal`
|
||||||
- **rect**: `1150,264 28x13` → `1246,271 79x10`
|
- **rect**: `600,24 54x15` → `864,26 39x12`
|
||||||
|
|
||||||
|
### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(3)` — "Gradient"
|
||||||
|
- **fontSize**: `12px` → `10px`
|
||||||
|
- **letterSpacing**: `0.48px` → `normal`
|
||||||
|
- **rect**: `672,24 61x15` → `924,26 44x12`
|
||||||
|
|
||||||
|
### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(4)` — "Background remover"
|
||||||
|
- **fontSize**: `12px` → `10px`
|
||||||
|
- **letterSpacing**: `0.48px` → `normal`
|
||||||
|
- **rect**: `751,24 138x15` → `990,26 99x12`
|
||||||
|
|
||||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>span:nth-child(1)` — "SOURCE"
|
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>span:nth-child(1)` — "SOURCE"
|
||||||
- **fontSize**: `10px` → `9px`
|
- **fontSize**: `10px` → `9px`
|
||||||
@@ -150,104 +165,96 @@ _2026-08-28T11:58:18.224Z_
|
|||||||
- **letterSpacing**: `0.8px` → `normal`
|
- **letterSpacing**: `0.8px` → `normal`
|
||||||
- **rect**: `806,2047 550x13` → `808,1378 59x10`
|
- **rect**: `806,2047 550x13` → `808,1378 59x10`
|
||||||
|
|
||||||
### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(2)>div:nth-child(4)>button:nth-child(2)` — "EN"
|
### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(3)>div:nth-child(4)>button:nth-child(2)` — "EN"
|
||||||
- **letterSpacing**: `0.6px` → `normal`
|
- **letterSpacing**: `0.6px` → `normal`
|
||||||
- **rect**: `1349,19 32x25` → `1352,20 29x24`
|
- **rect**: `1349,19 32x25` → `1352,20 29x24`
|
||||||
|
|
||||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>h1:nth-child(2)` — "Build your image pipeline."
|
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>h1:nth-child(2)` — "Build your image pipeline."
|
||||||
- **lineHeight**: `normal` → `57.6px`
|
- **lineHeight**: `51.84px` → `57.6px`
|
||||||
- **rect**: `58,155 474x150` → `58,154 482x115`
|
- **rect**: `58,155 474x104` → `58,154 482x115`
|
||||||
|
|
||||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(1)>div:nth-child(1)>span:nth-child(2)` — "01"
|
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>article:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>span:nth-child(1)` — "BACKGROUND"
|
||||||
- **padding**: `0px` → `17px 0px 0px 15px`
|
|
||||||
- **rect**: `95,504 13x14` → `59,466 46x150`
|
|
||||||
|
|
||||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(1)>div:nth-child(1)>span:nth-child(3)` — "BACKGROUND"
|
|
||||||
- **display**: `block` → `inline`
|
- **display**: `block` → `inline`
|
||||||
- **rect**: `116,504 72x13` → `143,489 67x12`
|
- **rect**: `117,455 171x13` → `143,489 67x12`
|
||||||
|
|
||||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(1)>div:nth-child(1)>span:nth-child(4)` — "Gradient background"
|
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>article:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>span:nth-child(1)` — "TRANSFORM"
|
||||||
- **margin**: `0px` → `5px 0px 18px`
|
|
||||||
- **rect**: `196,501 171x19` → `143,510 157x18`
|
|
||||||
|
|
||||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(2)>div:nth-child(1)>span:nth-child(2)` — "02"
|
|
||||||
- **padding**: `0px` → `17px 0px 0px 15px`
|
|
||||||
- **rect**: `95,655 13x14` → `59,628 46x136`
|
|
||||||
|
|
||||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(2)>div:nth-child(1)>span:nth-child(3)` — "TRANSFORM"
|
|
||||||
- **display**: `block` → `inline`
|
- **display**: `block` → `inline`
|
||||||
- **rect**: `116,656 65x13` → `143,651 60x12`
|
- **rect**: `117,615 153x13` → `143,651 60x12`
|
||||||
|
|
||||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(2)>div:nth-child(1)>span:nth-child(4)` — "Remove background"
|
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>article:nth-child(3)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>span:nth-child(1)` — "STYLE"
|
||||||
- **margin**: `0px` → `5px 0px 18px`
|
|
||||||
- **rect**: `189,653 153x19` → `143,672 140x18`
|
|
||||||
|
|
||||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(3)>div:nth-child(1)>span:nth-child(2)` — "03"
|
|
||||||
- **padding**: `0px` → `17px 0px 0px 15px`
|
|
||||||
- **rect**: `95,769 13x14` → `59,776 46x150`
|
|
||||||
|
|
||||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(3)>div:nth-child(1)>span:nth-child(3)` — "STYLE"
|
|
||||||
- **display**: `block` → `inline`
|
- **display**: `block` → `inline`
|
||||||
- **rect**: `116,770 36x13` → `143,799 34x12`
|
- **rect**: `117,737 99x13` → `143,799 34x12`
|
||||||
|
|
||||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(3)>div:nth-child(1)>span:nth-child(4)` — "Add outline"
|
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(1)>span:nth-child(1)` — "DIMENSIONS"
|
||||||
- **margin**: `0px` → `5px 0px 18px`
|
- **letterSpacing**: `0.9px` → `normal`
|
||||||
- **rect**: `160,767 99x19` → `143,820 91x18`
|
- **rect**: `1157,216 63x11` → `1073,271 79x10`
|
||||||
|
|
||||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(4)>div:nth-child(1)>span:nth-child(2)` — "04"
|
|
||||||
- **padding**: `0px` → `17px 0px 0px 15px`
|
|
||||||
- **rect**: `95,911 13x14` → `59,938 46x142`
|
|
||||||
|
|
||||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>div:nth-child(4)>div:nth-child(1)>span:nth-child(4)` — "Round corners"
|
|
||||||
- **margin**: `0px` → `5px 0px 18px`
|
|
||||||
- **rect**: `160,909 117x19` → `143,982 107x18`
|
|
||||||
|
|
||||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(1)>span:nth-child(2)` — "1200 × 800 px"
|
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(1)>span:nth-child(2)` — "1200 × 800 px"
|
||||||
- **margin**: `0px` → `5px 0px 0px`
|
- **margin**: `0px` → `5px 0px 0px`
|
||||||
- **rect**: `1236,214 86x14` → `1073,291 79x13`
|
- **rect**: `1236,214 86x14` → `1073,291 79x13`
|
||||||
|
|
||||||
|
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>span:nth-child(1)` — "FORMAT"
|
||||||
|
- **letterSpacing**: `0.9px` → `normal`
|
||||||
|
- **rect**: `1157,240 38x11` → `1159,271 79x10`
|
||||||
|
|
||||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>span:nth-child(2)` — "PNG-24"
|
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>span:nth-child(2)` — "PNG-24"
|
||||||
- **margin**: `0px` → `5px 0px 0px`
|
- **margin**: `0px` → `5px 0px 0px`
|
||||||
- **rect**: `1282,238 40x14` → `1159,291 79x13`
|
- **rect**: `1282,238 40x14` → `1159,291 79x13`
|
||||||
|
|
||||||
|
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(3)>span:nth-child(1)` — "SIZE"
|
||||||
|
- **letterSpacing**: `0.9px` → `normal`
|
||||||
|
- **rect**: `1157,265 25x11` → `1246,271 79x10`
|
||||||
|
|
||||||
### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(1)>span:nth-child(2)` — "easy-png-tools"
|
### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(1)>span:nth-child(2)` — "easy-png-tools"
|
||||||
- **rect**: `98,23 118x18` → `98,23 108x17`
|
- **rect**: `98,23 118x18` → `98,23 108x17`
|
||||||
|
|
||||||
### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(2)>div:nth-child(4)>button:nth-child(1)` — "RU"
|
### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(3)>div:nth-child(4)>button:nth-child(1)` — "RU"
|
||||||
- **letterSpacing**: `0.6px` → `normal`
|
- **letterSpacing**: `0.6px` → `normal`
|
||||||
|
|
||||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>p:nth-child(3)` — "Chain simple tools together. Every chang"
|
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>p:nth-child(3)` — "Chain simple tools together. Every chang"
|
||||||
- **rect**: `58,321 474x51` → `58,285 482x51`
|
- **rect**: `58,275 474x51` → `58,285 482x51`
|
||||||
|
|
||||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>span:nth-child(2)` — "source.png"
|
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>span:nth-child(2)` — "source.png"
|
||||||
- **rect**: `597,347 66x14` → `606,311 60x13`
|
- **rect**: `597,300 66x14` → `606,311 60x13`
|
||||||
|
|
||||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>b:nth-child(3)` — "1.8 MB"
|
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>b:nth-child(3)` — "1.8 MB"
|
||||||
- **rect**: `671,347 40x14` → `674,311 36x13`
|
- **rect**: `671,300 40x14` → `674,311 36x13`
|
||||||
|
|
||||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>strong:nth-child(2)>em:nth-child(1)` — "• LIVE"
|
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>strong:nth-child(2)>em:nth-child(1)` — "• LIVE"
|
||||||
- **rect**: `175,451 36x13` → `173,425 33x12`
|
- **rect**: `175,405 36x13` → `173,425 33x12`
|
||||||
|
|
||||||
|
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>article:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>h2:nth-child(2)` — "Gradient background"
|
||||||
|
- **rect**: `117,473 171x19` → `143,510 157x18`
|
||||||
|
|
||||||
|
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>article:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>h2:nth-child(2)` — "Remove background"
|
||||||
|
- **rect**: `117,633 153x19` → `143,672 140x18`
|
||||||
|
|
||||||
|
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>article:nth-child(3)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>h2:nth-child(2)` — "Add outline"
|
||||||
|
- **rect**: `117,755 99x19` → `143,820 91x18`
|
||||||
|
|
||||||
|
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>article:nth-child(4)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>h2:nth-child(2)` — "Round corners"
|
||||||
|
- **rect**: `117,905 117x19` → `143,982 107x18`
|
||||||
|
|
||||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>strong:nth-child(2)` — "Visual history"
|
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>strong:nth-child(2)` — "Visual history"
|
||||||
- **rect**: `799,209 93x36` → `799,233 87x34`
|
- **rect**: `799,209 94x36` → `799,233 87x34`
|
||||||
|
|
||||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>span:nth-child(1)` — "PNG"
|
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>span:nth-child(1)` — "PNG"
|
||||||
- **rect**: `1067,496 28x19` → `923,478 27x18`
|
- **rect**: `1067,496 28x19` → `923,478 27x18`
|
||||||
|
|
||||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>span:nth-child(2)` — "original.png · 1200 × 800"
|
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>span:nth-child(1)` — "original.png · 1200 × 800"
|
||||||
- **rect**: `1213,704 135x11` → `942,663 124x10`
|
- **rect**: `814,704 135x11` → `942,663 124x10`
|
||||||
|
|
||||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(2)>div:nth-child(2)>span:nth-child(2)` — "gradient applied"
|
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(2)>div:nth-child(2)>span:nth-child(1)` — "gradient applied"
|
||||||
- **rect**: `1262,1137 86x11` → `1275,663 79x10`
|
- **rect**: `814,1137 86x11` → `1275,663 79x10`
|
||||||
|
|
||||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>div:nth-child(2)>span:nth-child(2)` — "background removed"
|
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>div:nth-child(2)>span:nth-child(1)` — "background removed"
|
||||||
- **rect**: `1251,1569 97x11` → `977,1021 89x10`
|
- **rect**: `814,1569 97x11` → `977,1021 89x10`
|
||||||
|
|
||||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(4)>div:nth-child(2)>div:nth-child(2)>span:nth-child(2)` — "outline added"
|
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(4)>div:nth-child(2)>div:nth-child(2)>span:nth-child(1)` — "outline added"
|
||||||
- **rect**: `1278,2002 70x11` → `1290,1021 64x10`
|
- **rect**: `814,2002 70x11` → `1290,1021 64x10`
|
||||||
|
|
||||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(5)>div:nth-child(2)>div:nth-child(2)>span:nth-child(2)` — "ready · PNG-24"
|
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(5)>div:nth-child(2)>div:nth-child(2)>span:nth-child(1)` — "ready · PNG-24"
|
||||||
- **rect**: `1272,2434 76x11` → `997,1378 69x10`
|
- **rect**: `814,2434 76x11` → `997,1378 69x10`
|
||||||
|
|
||||||
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>p:nth-child(3)` — "Output is generated in-browser. Your fil"
|
### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>p:nth-child(3)` — "Output is generated in-browser. Your fil"
|
||||||
- **rect**: `799,2489 565x17` → `799,1425 565x17`
|
- **rect**: `799,2489 565x17` → `799,1425 565x17`
|
||||||
@@ -259,27 +266,31 @@ _2026-08-28T11:58:18.224Z_
|
|||||||
- `AUTO`
|
- `AUTO`
|
||||||
- `Gradient color`
|
- `Gradient color`
|
||||||
- `DIRECTION`
|
- `DIRECTION`
|
||||||
- `135°`
|
- `135 °`
|
||||||
- `OPACITY`
|
- `OPACITY`
|
||||||
|
- `75%`
|
||||||
|
- `50%`
|
||||||
|
- `25%`
|
||||||
- `Automatic subject detection enabled`
|
- `Automatic subject detection enabled`
|
||||||
- `Outline width`
|
- `Outline width`
|
||||||
- `2px`
|
- `2 px`
|
||||||
- `Outline color`
|
- `Outline color`
|
||||||
- `Corner radius`
|
- `Corner radius`
|
||||||
- `18px`
|
- `18 px`
|
||||||
|
- `v0.1.0`
|
||||||
|
- `© 2026`
|
||||||
|
|
||||||
## Только в рефе (структурно)
|
## Только в рефе (структурно)
|
||||||
|
|
||||||
- `/
|
- `/
|
||||||
WORKSPACE`
|
WORKSPACE`
|
||||||
- `Workspace`
|
|
||||||
- `Catalog`
|
|
||||||
- `Gradient`
|
|
||||||
- `Background remover`
|
|
||||||
- `COLOR`
|
- `COLOR`
|
||||||
- `135
|
- `135
|
||||||
°`
|
°`
|
||||||
- `100%`
|
- `100`
|
||||||
|
- `75`
|
||||||
|
- `50`
|
||||||
|
- `25`
|
||||||
- `2
|
- `2
|
||||||
px`
|
px`
|
||||||
- `18
|
- `18
|
||||||
|
|||||||
+10
-1
@@ -47,7 +47,16 @@ const waitFor = async (url, ms = 60000) => {
|
|||||||
try {
|
try {
|
||||||
const r = await fetch(url);
|
const r = await fetch(url);
|
||||||
if (r.ok) return;
|
if (r.ok) return;
|
||||||
} catch {}
|
// Сервер уже отвечает, но страница упала (4xx/5xx) — ждать 200
|
||||||
|
// бессмысленно: сообщаем явно вместо таймаута "dev server not up".
|
||||||
|
if (r.status >= 400) {
|
||||||
|
throw new Error(
|
||||||
|
`route ${url} returned HTTP ${r.status} (server is up, page failed to render)`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
if (e instanceof Error && e.message.includes("returned HTTP")) throw e;
|
||||||
|
}
|
||||||
await new Promise((r) => setTimeout(r, 500));
|
await new Promise((r) => setTimeout(r, 500));
|
||||||
}
|
}
|
||||||
throw new Error("dev server not up: " + url);
|
throw new Error("dev server not up: " + url);
|
||||||
|
|||||||
@@ -21,7 +21,7 @@
|
|||||||
}
|
}
|
||||||
.meta-caption {
|
.meta-caption {
|
||||||
font-family: var(--font-mono);
|
font-family: var(--font-mono);
|
||||||
font-size: 10px;
|
font-size: 9px;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 0.1em;
|
letter-spacing: 0.1em;
|
||||||
color: var(--muted);
|
color: var(--muted);
|
||||||
|
|||||||
@@ -20,7 +20,7 @@
|
|||||||
font-family: var(--font-mono);
|
font-family: var(--font-mono);
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
font-weight: 500;
|
font-weight: 400;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 0.1em;
|
letter-spacing: 0.1em;
|
||||||
color: var(--muted);
|
color: var(--muted);
|
||||||
|
|||||||
@@ -29,7 +29,12 @@
|
|||||||
<Field {label}>
|
<Field {label}>
|
||||||
<div class="slider-field">
|
<div class="slider-field">
|
||||||
<input type="range" {min} {max} {step} {value} oninput={handle} />
|
<input type="range" {min} {max} {step} {value} oninput={handle} />
|
||||||
<span class="slider-value">{value}{suffix}</span>
|
<span class="slider-value">
|
||||||
|
{value}
|
||||||
|
{#if suffix}
|
||||||
|
{suffix}
|
||||||
|
{/if}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</Field>
|
</Field>
|
||||||
|
|
||||||
|
|||||||
@@ -6,59 +6,88 @@
|
|||||||
index: number;
|
index: number;
|
||||||
title?: string;
|
title?: string;
|
||||||
type?: string;
|
type?: string;
|
||||||
|
tools?: Snippet;
|
||||||
children?: Snippet;
|
children?: Snippet;
|
||||||
onremove?: () => void;
|
onremove?: () => void;
|
||||||
}
|
}
|
||||||
let { index, title, type, children, onremove }: Props = $props();
|
|
||||||
|
let { index, title, type, tools, children, onremove }: Props = $props();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="step-card">
|
<article class="step-card">
|
||||||
<div class="step-heading">
|
<div class="step-rail">
|
||||||
<span class="drag" aria-hidden="true"><GripVertical size={16} /></span>
|
|
||||||
<span class="step-index">{index.toString().padStart(2, "0")}</span>
|
<span class="step-index">{index.toString().padStart(2, "0")}</span>
|
||||||
{#if type}<span class="step-type">{type}</span>{/if}
|
<span class="drag" aria-hidden="true"><GripVertical size={16} /></span>
|
||||||
{#if title}<span class="step-title">{title}</span>{/if}
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="step-remove"
|
|
||||||
aria-label="Remove step"
|
|
||||||
onclick={() => onremove?.()}
|
|
||||||
>
|
|
||||||
<X size={16} />
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
{#if children}
|
<div class="step-body">
|
||||||
<div class="step-body">{@render children()}</div>
|
<div class="step-heading">
|
||||||
{/if}
|
<div class="step-heading-text">
|
||||||
</div>
|
{#if type}<span class="step-type">{type}</span>{/if}
|
||||||
|
{#if title}<h2 class="step-title">{title}</h2>{/if}
|
||||||
|
</div>
|
||||||
|
<div class="step-tools">
|
||||||
|
{#if tools}{@render tools()}{/if}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="step-remove"
|
||||||
|
aria-label="Remove step"
|
||||||
|
onclick={() => onremove?.()}
|
||||||
|
>
|
||||||
|
<X size={16} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{#if children}
|
||||||
|
<div class="step-content">{@render children()}</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.step-card {
|
.step-card {
|
||||||
|
display: flex;
|
||||||
border: 1px solid var(--line);
|
border: 1px solid var(--line);
|
||||||
border-radius: var(--radius);
|
border-radius: var(--radius);
|
||||||
background: var(--panel);
|
background: var(--panel);
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
.step-heading {
|
.step-rail {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
flex-direction: column;
|
||||||
gap: 0.5rem;
|
align-items: flex-start;
|
||||||
padding: 0.5rem 0.75rem;
|
gap: 10px;
|
||||||
border-bottom: 1px solid var(--line);
|
min-width: 46px;
|
||||||
|
padding: 17px 0 17px 15px;
|
||||||
|
border-right: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
.step-index {
|
||||||
|
font: 600 22px var(--font-mono);
|
||||||
|
line-height: 1;
|
||||||
|
color: var(--blue);
|
||||||
}
|
}
|
||||||
.drag {
|
.drag {
|
||||||
color: var(--muted);
|
color: var(--muted);
|
||||||
cursor: grab;
|
cursor: grab;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
}
|
}
|
||||||
.step-index {
|
.step-body {
|
||||||
font-family: var(--font-mono);
|
flex: 1;
|
||||||
font-size: 11px;
|
min-width: 0;
|
||||||
color: var(--blue);
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
.step-title {
|
.step-heading {
|
||||||
font: 600 15px var(--font-mono);
|
display: flex;
|
||||||
color: var(--foreground);
|
align-items: flex-start;
|
||||||
margin: 0;
|
justify-content: space-between;
|
||||||
|
gap: 0.5rem;
|
||||||
|
padding: 0.5rem 0.75rem;
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
.step-heading-text {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-width: 0;
|
||||||
}
|
}
|
||||||
.step-type {
|
.step-type {
|
||||||
color: var(--muted);
|
color: var(--muted);
|
||||||
@@ -66,8 +95,17 @@
|
|||||||
letter-spacing: 0.12em;
|
letter-spacing: 0.12em;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
.step-title {
|
||||||
|
margin: 5px 0 18px;
|
||||||
|
font: 600 15px var(--font-mono);
|
||||||
|
color: var(--foreground);
|
||||||
|
}
|
||||||
|
.step-tools {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
.step-remove {
|
.step-remove {
|
||||||
margin-left: auto;
|
|
||||||
border: none;
|
border: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: var(--muted);
|
color: var(--muted);
|
||||||
@@ -77,7 +115,7 @@
|
|||||||
.step-remove:hover {
|
.step-remove:hover {
|
||||||
color: var(--danger);
|
color: var(--danger);
|
||||||
}
|
}
|
||||||
.step-body {
|
.step-content {
|
||||||
padding: 0.75rem;
|
padding: 0.75rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import IconButton from "./IconButton.svelte";
|
import IconButton from "./IconButton.svelte";
|
||||||
import StatusDot from "./StatusDot.svelte";
|
import StatusDot from "./StatusDot.svelte";
|
||||||
|
import { resolve } from "$app/paths";
|
||||||
import { CircleHelp, Moon, Sun } from "@lucide/svelte";
|
import { CircleHelp, Moon, Sun } from "@lucide/svelte";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
@@ -14,13 +15,19 @@
|
|||||||
let lang = $state("RU");
|
let lang = $state("RU");
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<header class="topbar">
|
<header class="topbar">
|
||||||
<div class="brand">
|
<div class="brand">
|
||||||
<span class="brand-mark">EP</span>
|
<span class="brand-mark">EP</span>
|
||||||
<span>easy-png-tools</span>
|
<span>easy-png-tools</span>
|
||||||
{#if crumb}<span class="version">{crumb}</span>{/if}
|
{#if crumb}<span class="version">{crumb}</span>{/if}
|
||||||
</div>
|
</div>
|
||||||
<div class="top-actions">
|
<nav class="nav">
|
||||||
|
<a href={resolve("/preview/demo")}>Workspace</a>
|
||||||
|
<a href={resolve("/preview/list-tools")}>Catalog</a>
|
||||||
|
<a href={resolve("/preview/tools/linear-gradient-png")}>Gradient</a>
|
||||||
|
<a href={resolve("/preview/tools/remove-background-png")}>Background remover</a>
|
||||||
|
</nav>
|
||||||
|
<div class="top-actions">
|
||||||
<span class="status"><StatusDot /> AUTO PIPELINE</span>
|
<span class="status"><StatusDot /> AUTO PIPELINE</span>
|
||||||
<IconButton
|
<IconButton
|
||||||
icon={CircleHelp}
|
icon={CircleHelp}
|
||||||
@@ -85,6 +92,21 @@
|
|||||||
letter-spacing: 0.12em;
|
letter-spacing: 0.12em;
|
||||||
color: var(--blue);
|
color: var(--blue);
|
||||||
}
|
}
|
||||||
|
.nav {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 18px;
|
||||||
|
margin-left: 24px;
|
||||||
|
}
|
||||||
|
.nav a {
|
||||||
|
color: var(--muted);
|
||||||
|
font: 12px var(--font-mono);
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.nav a:hover {
|
||||||
|
color: var(--foreground);
|
||||||
|
}
|
||||||
.top-actions {
|
.top-actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import "$lib/styles/design2.css";
|
|
||||||
import type { Snippet } from "svelte";
|
|
||||||
import { page } from "$app/stores";
|
import { page } from "$app/stores";
|
||||||
import AppShell from "$lib/components/kit/AppShell.svelte";
|
import AppShell from "$lib/components/kit/AppShell.svelte";
|
||||||
import TopBar from "$lib/components/kit/TopBar.svelte";
|
import TopBar from "$lib/components/kit/TopBar.svelte";
|
||||||
|
import "$lib/styles/design2.css";
|
||||||
|
import type { Snippet } from "svelte";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
children: Snippet;
|
children: Snippet;
|
||||||
@@ -47,4 +47,25 @@
|
|||||||
<div class="preview-root" data-theme={theme}>
|
<div class="preview-root" data-theme={theme}>
|
||||||
<TopBar {theme} {crumb} ontoggle={toggle} />
|
<TopBar {theme} {crumb} ontoggle={toggle} />
|
||||||
<AppShell>{@render children()}</AppShell>
|
<AppShell>{@render children()}</AppShell>
|
||||||
|
<footer class="preview-footer">
|
||||||
|
<span class="version">v0.1.0</span>
|
||||||
|
<span class="copy">© 2026</span>
|
||||||
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.preview-footer {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 1rem;
|
||||||
|
padding: 16px clamp(20px, 4vw, 64px);
|
||||||
|
border-top: 1px solid var(--line);
|
||||||
|
font: 10px var(--font-mono);
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
.preview-footer .version {
|
||||||
|
color: var(--blue);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -91,7 +91,9 @@
|
|||||||
title="Gradient background"
|
title="Gradient background"
|
||||||
onremove={() => {}}
|
onremove={() => {}}
|
||||||
>
|
>
|
||||||
<div class="step-tools"><Badge tone="success">AUTO</Badge></div>
|
{#snippet tools()}
|
||||||
|
<Badge tone="success">AUTO</Badge>
|
||||||
|
{/snippet}
|
||||||
<FieldGrid>
|
<FieldGrid>
|
||||||
<ColorField label="Gradient color" bind:value={gradColor} />
|
<ColorField label="Gradient color" bind:value={gradColor} />
|
||||||
<SliderField
|
<SliderField
|
||||||
@@ -106,10 +108,10 @@
|
|||||||
<Segmented
|
<Segmented
|
||||||
bind:value={opacity}
|
bind:value={opacity}
|
||||||
options={[
|
options={[
|
||||||
{ value: "100", label: "100" },
|
{ value: "100", label: "100%" },
|
||||||
{ value: "75", label: "75" },
|
{ value: "75", label: "75%" },
|
||||||
{ value: "50", label: "50" },
|
{ value: "50", label: "50%" },
|
||||||
{ value: "25", label: "25" },
|
{ value: "25", label: "25%" },
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@@ -122,12 +124,16 @@
|
|||||||
title="Remove background"
|
title="Remove background"
|
||||||
onremove={() => {}}
|
onremove={() => {}}
|
||||||
>
|
>
|
||||||
<div class="step-tools"><Badge tone="success">AUTO</Badge></div>
|
{#snippet tools()}
|
||||||
|
<Badge tone="success">AUTO</Badge>
|
||||||
|
{/snippet}
|
||||||
<div class="transform-note">Automatic subject detection enabled</div>
|
<div class="transform-note">Automatic subject detection enabled</div>
|
||||||
</StepCard>
|
</StepCard>
|
||||||
|
|
||||||
<StepCard index={3} type="STYLE" title="Add outline" onremove={() => {}}>
|
<StepCard index={3} type="STYLE" title="Add outline" onremove={() => {}}>
|
||||||
<div class="step-tools"><Badge tone="success">AUTO</Badge></div>
|
{#snippet tools()}
|
||||||
|
<Badge tone="success">AUTO</Badge>
|
||||||
|
{/snippet}
|
||||||
<FieldGrid compact>
|
<FieldGrid compact>
|
||||||
<SliderField
|
<SliderField
|
||||||
label="Outline width"
|
label="Outline width"
|
||||||
@@ -146,7 +152,9 @@
|
|||||||
title="Round corners"
|
title="Round corners"
|
||||||
onremove={() => {}}
|
onremove={() => {}}
|
||||||
>
|
>
|
||||||
<div class="step-tools"><Badge tone="success">AUTO</Badge></div>
|
{#snippet tools()}
|
||||||
|
<Badge tone="success">AUTO</Badge>
|
||||||
|
{/snippet}
|
||||||
<FieldGrid compact>
|
<FieldGrid compact>
|
||||||
<SliderField
|
<SliderField
|
||||||
label="Corner radius"
|
label="Corner radius"
|
||||||
@@ -234,11 +242,6 @@
|
|||||||
gap: 10px;
|
gap: 10px;
|
||||||
padding-top: 14px;
|
padding-top: 14px;
|
||||||
}
|
}
|
||||||
.step-tools {
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.control-block {
|
.control-block {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|||||||
@@ -54,6 +54,7 @@
|
|||||||
margin: 0 0 16px;
|
margin: 0 0 16px;
|
||||||
font-size: clamp(36px, 4vw, 64px);
|
font-size: clamp(36px, 4vw, 64px);
|
||||||
font-weight: 650;
|
font-weight: 650;
|
||||||
|
line-height: 0.9;
|
||||||
letter-spacing: -0.06em;
|
letter-spacing: -0.06em;
|
||||||
color: var(--foreground);
|
color: var(--foreground);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user