feat: fix list tools page to correspond refs
This commit is contained in:
+1552
-712
File diff suppressed because it is too large
Load Diff
+162
-122
@@ -1,15 +1,15 @@
|
|||||||
# DOM audit (phase A)
|
# DOM audit (phase A)
|
||||||
|
|
||||||
_2026-08-29T02:19:33.867Z_
|
_2026-08-29T02:33:28.258Z_
|
||||||
|
|
||||||
## Сводка
|
## Сводка
|
||||||
|
|
||||||
| route | ref | added | removed | tag | text |
|
| route | ref | added | removed | tag | text |
|
||||||
|---|---|---|---|---|---|
|
|---|---|---|---|---|---|
|
||||||
| `/preview/demo` | demo.html | 0 | 0 | 0 | 0 |
|
| `/preview/demo` | demo.html | 0 | 0 | 0 | 0 |
|
||||||
| `/preview/list-tools` | list-tools.html | 78 | 22 | 5 | 1 |
|
| `/preview/list-tools` | list-tools.html | 150 | 80 | 0 | 1 |
|
||||||
| `/preview/tools/linear-gradient-png` | gradient.html | 6 | 7 | 2 | 2 |
|
| `/preview/tools/linear-gradient-png` | gradient.html | 5 | 6 | 2 | 1 |
|
||||||
| `/preview/tools/remove-background-png` | background-remover.html | 8 | 7 | 2 | 2 |
|
| `/preview/tools/remove-background-png` | background-remover.html | 7 | 6 | 2 | 1 |
|
||||||
|
|
||||||
## /preview/demo (vs demo.html)
|
## /preview/demo (vs demo.html)
|
||||||
|
|
||||||
@@ -22,127 +22,170 @@ _расхождений нет_
|
|||||||
|
|
||||||
## /preview/list-tools (vs list-tools.html)
|
## /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 > div:2 > div:1 > div:2 > b:1` **added** (`b` "130" · 1 узл.)
|
||||||
- `body > main:1 > header:1 > a:1 > span:3` **removed** (`span` "/ CATALOG" · 1 узл.)
|
- `body > main:1 > div:2 > div:1 > div:2 > span:2` **text**: ours `TOOLSAVAILABLE` → ref `TOOLS AVAILABLE`
|
||||||
- `body > main:1 > header:1 > div:3 > span:1` **text**: ours `AUTO PIPELINE` → ref `LOCAL MODE / READY`
|
- `body > main:1 > div:2 > div:1 > div:2 > b:1` **removed** (`b` "32" · 1 узл.)
|
||||||
- `body > main:1 > section:2` **tag**: ours `section` → ref `div`
|
- `body > main:1 > div:2 > div:3 > section:1 > div:1 > i:2` **added** (`i` "21 TOOLS" · 1 узл.)
|
||||||
- `body > main:1 > section:2 > header:1` **added** (`header` · 4 узл.)
|
- `body > main:1 > div:2 > div:3 > section:1 > div:1 > i:2` **removed** (`i` "05 TOOLS" · 1 узл.)
|
||||||
- `body > main:1 > section:2 > section:2` **tag**: ours `section` → ref `div`
|
- `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 > section:2 > section:2 > header:1` **added** (`header` · 4 узл.)
|
- `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 > section:2 > section:2 > div:2 > a:1` **added** (`a` · 7 узл.)
|
- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:1 > span:4` **added** (`span` · 2 узл.)
|
||||||
- `body > main:1 > section:2 > section:2 > div:2 > a:2` **added** (`a` · 7 узл.)
|
- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:1 > svg:4` **removed** (`svg` · 1 узл.)
|
||||||
- `body > main:1 > section:2 > section:2 > div:2 > a:3` **added** (`a` · 7 узл.)
|
- `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 > section:2 > section:2 > div:2 > a:4` **added** (`a` · 7 узл.)
|
- `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 > section:2 > section:2 > div:2 > a:5` **added** (`a` · 7 узл.)
|
- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:2 > span:4` **added** (`span` · 2 узл.)
|
||||||
- `body > main:1 > section:2 > section:2 > div:2 > a:6` **added** (`a` · 7 узл.)
|
- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:2 > svg:4` **removed** (`svg` · 1 узл.)
|
||||||
- `body > main:1 > section:2 > section:2 > div:2 > a:7` **added** (`a` · 7 узл.)
|
- `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 > section:2 > section:2 > div:2 > a:8` **added** (`a` · 7 узл.)
|
- `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 > section:2 > section:2 > div:2 > a:9` **added** (`a` · 7 узл.)
|
- `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 > section:2 > section:2 > div:2 > a:10` **added** (`a` · 7 узл.)
|
- `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 > section:2 > section:2 > div:2 > a:11` **added** (`a` · 7 узл.)
|
- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:3 > span:4` **added** (`span` · 2 узл.)
|
||||||
- `body > main:1 > section:2 > section:2 > div:2 > a:12` **added** (`a` · 7 узл.)
|
- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:3 > svg:4` **removed** (`svg` · 1 узл.)
|
||||||
- `body > main:1 > section:2 > section:2 > div:2 > a:13` **added** (`a` · 7 узл.)
|
- `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 > section:2 > section:2 > div:2 > a:14` **added** (`a` · 7 узл.)
|
- `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 > section:2 > section:2 > div:2 > a:15` **added** (`a` · 7 узл.)
|
- `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 > section:2 > section:2 > div:2 > a:16` **added** (`a` · 7 узл.)
|
- `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 > section:2 > section:2 > div:2 > a:17` **added** (`a` · 7 узл.)
|
- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:4 > span:4` **added** (`span` · 2 узл.)
|
||||||
- `body > main:1 > section:2 > section:2 > div:2 > a:18` **added** (`a` · 7 узл.)
|
- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:4 > svg:4` **removed** (`svg` · 1 узл.)
|
||||||
- `body > main:1 > section:2 > section:2 > div:2 > a:19` **added** (`a` · 7 узл.)
|
- `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 > section:2 > section:2 > div:2 > a:20` **added** (`a` · 7 узл.)
|
- `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 > section:2 > section:2 > div:2 > a:21` **added** (`a` · 7 узл.)
|
- `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 > section:2 > section:2 > div:2 > div:1` **removed** (`div` "EASY-PNG-TOOLS / CATALOG" · 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 > section:2 > section:2 > div:2 > h1:2` **removed** (`h1` "Tool catalog" · 1 узл.)
|
- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:5 > span:4` **added** (`span` · 2 узл.)
|
||||||
- `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 > div:2 > div:3 > section:1 > div:2 > a:5 > svg:4` **removed** (`svg` · 1 узл.)
|
||||||
- `body > main:1 > section:2 > section:2 > div:2` **removed** (`div` · 4 узл.)
|
- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:6` **added** (`a` · 9 узл.)
|
||||||
- `body > main:1 > section:2 > section:3` **tag**: ours `section` → ref `div`
|
- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:7` **added** (`a` · 9 узл.)
|
||||||
- `body > main:1 > section:2 > section:3 > header:1` **added** (`header` · 4 узл.)
|
- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:8` **added** (`a` · 9 узл.)
|
||||||
- `body > main:1 > section:2 > section:3 > div:2 > a:1` **added** (`a` · 7 узл.)
|
- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:9` **added** (`a` · 9 узл.)
|
||||||
- `body > main:1 > section:2 > section:3 > div:2 > a:2` **added** (`a` · 7 узл.)
|
- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:10` **added** (`a` · 9 узл.)
|
||||||
- `body > main:1 > section:2 > section:3 > div:2 > a:3` **added** (`a` · 7 узл.)
|
- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:11` **added** (`a` · 9 узл.)
|
||||||
- `body > main:1 > section:2 > section:3 > div:2 > a:4` **added** (`a` · 7 узл.)
|
- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:12` **added** (`a` · 9 узл.)
|
||||||
- `body > main:1 > section:2 > section:3 > div:2 > a:5` **added** (`a` · 7 узл.)
|
- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:13` **added** (`a` · 9 узл.)
|
||||||
- `body > main:1 > section:2 > section:3 > div:2 > a:6` **added** (`a` · 7 узл.)
|
- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:14` **added** (`a` · 9 узл.)
|
||||||
- `body > main:1 > section:2 > section:3 > div:2 > a:7` **added** (`a` · 7 узл.)
|
- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:15` **added** (`a` · 9 узл.)
|
||||||
- `body > main:1 > section:2 > section:3 > div:2 > a:8` **added** (`a` · 7 узл.)
|
- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:16` **added** (`a` · 9 узл.)
|
||||||
- `body > main:1 > section:2 > section:3 > div:2 > a:9` **added** (`a` · 7 узл.)
|
- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:17` **added** (`a` · 9 узл.)
|
||||||
- `body > main:1 > section:2 > section:3 > div:2 > a:10` **added** (`a` · 7 узл.)
|
- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:18` **added** (`a` · 9 узл.)
|
||||||
- `body > main:1 > section:2 > section:3 > div:2 > a:11` **added** (`a` · 7 узл.)
|
- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:19` **added** (`a` · 9 узл.)
|
||||||
- `body > main:1 > section:2 > section:3 > div:2 > a:12` **added** (`a` · 7 узл.)
|
- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:20` **added** (`a` · 9 узл.)
|
||||||
- `body > main:1 > section:2 > section:3 > div:2 > a:13` **added** (`a` · 7 узл.)
|
- `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:21` **added** (`a` · 9 узл.)
|
||||||
- `body > main:1 > section:2 > section:3 > div:2 > a:14` **added** (`a` · 7 узл.)
|
- `body > main:1 > div:2 > div:3 > section:2 > div:1 > i:2` **added** (`i` "21 TOOLS" · 1 узл.)
|
||||||
- `body > main:1 > section:2 > section:3 > div:2 > a:15` **added** (`a` · 7 узл.)
|
- `body > main:1 > div:2 > div:3 > section:2 > div:1 > i:2` **removed** (`i` "05 TOOLS" · 1 узл.)
|
||||||
- `body > main:1 > section:2 > section:3 > div:2 > a:16` **added** (`a` · 7 узл.)
|
- `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 > section:2 > section:3 > div:2 > a:17` **added** (`a` · 7 узл.)
|
- `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 > section:2 > section:3 > div:2 > a:18` **added** (`a` · 7 узл.)
|
- `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 > section:2 > section:3 > div:2 > a:19` **added** (`a` · 7 узл.)
|
- `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 > section:2 > section:3 > div:2 > a:20` **added** (`a` · 7 узл.)
|
- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:1 > span:4` **added** (`span` · 2 узл.)
|
||||||
- `body > main:1 > section:2 > section:3 > div:2 > a:21` **added** (`a` · 7 узл.)
|
- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:1 > svg:4` **removed** (`svg` · 1 узл.)
|
||||||
- `body > main:1 > section:2 > section:3 > div:2 > svg:1` **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 > section:2 > section:3 > div:2 > button:2` **removed** (`button` "ALL" · 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 > section:2 > section:3 > div:2 > button:3` **removed** (`button` "CONVERT" · 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 > section:2 > section:3 > div:2 > button:4` **removed** (`button` "TRANSPARENCY" · 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 > section:2 > section:3 > div:2 > button:5` **removed** (`button` "COLOR" · 1 узл.)
|
- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:2 > span:4` **added** (`span` · 2 узл.)
|
||||||
- `body > main:1 > section:2 > section:3 > div:2 > button:6` **removed** (`button` "GEOMETRY" · 1 узл.)
|
- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:2 > svg:4` **removed** (`svg` · 1 узл.)
|
||||||
- `body > main:1 > section:2 > section:3 > div:2 > button:7` **removed** (`button` "FILTERS" · 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 > section:2 > section:3 > div:2 > button:8` **removed** (`button` "ANALYZE" · 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 > section:2 > section:3 > label:1` **removed** (`label` · 3 узл.)
|
- `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 > section:2 > section:4` **tag**: ours `section` → ref `div`
|
- `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 > section:2 > section:4 > header:1` **added** (`header` · 4 узл.)
|
- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:3 > span:4` **added** (`span` · 2 узл.)
|
||||||
- `body > main:1 > section:2 > section:4 > div:2` **tag**: ours `div` → ref `section`
|
- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:3 > svg:4` **removed** (`svg` · 1 узл.)
|
||||||
- `body > main:1 > section:2 > section:4 > div:2 > a:1` **added** (`a` · 7 узл.)
|
- `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 > section:2 > section:4 > div:2 > a:2` **added** (`a` · 7 узл.)
|
- `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 > section:2 > section:4 > div:2 > a:3` **added** (`a` · 7 узл.)
|
- `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 > section:2 > section:4 > div:2 > a:4` **added** (`a` · 7 узл.)
|
- `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 > section:2 > section:4 > div:2 > a:5` **added** (`a` · 7 узл.)
|
- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:4 > span:4` **added** (`span` · 2 узл.)
|
||||||
- `body > main:1 > section:2 > section:4 > div:2 > a:6` **added** (`a` · 7 узл.)
|
- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:4 > svg:4` **removed** (`svg` · 1 узл.)
|
||||||
- `body > main:1 > section:2 > section:4 > div:2 > a:7` **added** (`a` · 7 узл.)
|
- `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 > section:2 > section:4 > div:2 > a:8` **added** (`a` · 7 узл.)
|
- `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 > section:2 > section:4 > div:2 > a:9` **added** (`a` · 7 узл.)
|
- `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 > section:2 > section:4 > div:2 > a:10` **added** (`a` · 7 узл.)
|
- `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 > section:2 > section:4 > div:2 > a:11` **added** (`a` · 7 узл.)
|
- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:5 > span:4` **added** (`span` · 2 узл.)
|
||||||
- `body > main:1 > section:2 > section:4 > div:2 > a:12` **added** (`a` · 7 узл.)
|
- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:5 > svg:4` **removed** (`svg` · 1 узл.)
|
||||||
- `body > main:1 > section:2 > section:4 > div:2 > a:13` **added** (`a` · 7 узл.)
|
- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:6` **added** (`a` · 9 узл.)
|
||||||
- `body > main:1 > section:2 > section:4 > div:2 > a:14` **added** (`a` · 7 узл.)
|
- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:7` **added** (`a` · 9 узл.)
|
||||||
- `body > main:1 > section:2 > section:4 > div:2 > a:15` **added** (`a` · 7 узл.)
|
- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:8` **added** (`a` · 9 узл.)
|
||||||
- `body > main:1 > section:2 > section:4 > div:2 > a:16` **added** (`a` · 7 узл.)
|
- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:9` **added** (`a` · 9 узл.)
|
||||||
- `body > main:1 > section:2 > section:4 > div:2 > a:17` **added** (`a` · 7 узл.)
|
- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:10` **added** (`a` · 9 узл.)
|
||||||
- `body > main:1 > section:2 > section:4 > div:2 > a:18` **added** (`a` · 7 узл.)
|
- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:11` **added** (`a` · 9 узл.)
|
||||||
- `body > main:1 > section:2 > section:4 > div:2 > a:19` **added** (`a` · 7 узл.)
|
- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:12` **added** (`a` · 9 узл.)
|
||||||
- `body > main:1 > section:2 > section:4 > div:2 > a:20` **added** (`a` · 7 узл.)
|
- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:13` **added** (`a` · 9 узл.)
|
||||||
- `body > main:1 > section:2 > section:4 > div:2 > a:21` **added** (`a` · 7 узл.)
|
- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:14` **added** (`a` · 9 узл.)
|
||||||
- `body > main:1 > section:2 > section:4 > div:2 > a:22` **added** (`a` · 7 узл.)
|
- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:15` **added** (`a` · 9 узл.)
|
||||||
- `body > main:1 > section:2 > section:4 > div:2 > a:23` **added** (`a` · 7 узл.)
|
- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:16` **added** (`a` · 9 узл.)
|
||||||
- `body > main:1 > section:2 > section:4 > div:2 > a:24` **added** (`a` · 7 узл.)
|
- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:17` **added** (`a` · 9 узл.)
|
||||||
- `body > main:1 > section:2 > section:4 > div:2 > a:25` **added** (`a` · 7 узл.)
|
- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:18` **added** (`a` · 9 узл.)
|
||||||
- `body > main:1 > section:2 > section:4 > div:2 > div:1` **removed** (`div` · 3 узл.)
|
- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:19` **added** (`a` · 9 узл.)
|
||||||
- `body > main:1 > section:2 > section:4 > div:2 > div:2` **removed** (`div` · 41 узл.)
|
- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:20` **added** (`a` · 9 узл.)
|
||||||
- `body > main:1 > section:2 > section:4 > section:2` **removed** (`section` · 45 узл.)
|
- `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:21` **added** (`a` · 9 узл.)
|
||||||
- `body > main:1 > section:2 > section:4 > section:3` **removed** (`section` · 45 узл.)
|
- `body > main:1 > div:2 > div:3 > section:3 > div:1 > i:2` **added** (`i` "25 TOOLS" · 1 узл.)
|
||||||
- `body > main:1 > section:2 > section:4 > section:4` **removed** (`section` · 45 узл.)
|
- `body > main:1 > div:2 > div:3 > section:3 > div:1 > i:2` **removed** (`i` "05 TOOLS" · 1 узл.)
|
||||||
- `body > main:1 > section:2 > section:4 > section:5` **removed** (`section` · 37 узл.)
|
- `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 > section:2 > section:4 > section:6` **removed** (`section` · 37 узл.)
|
- `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 > section:2 > section:5` **added** (`section` · 132 узл.)
|
- `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 > section:2 > section:6` **added** (`section` · 62 узл.)
|
- `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 > section:2 > section:7` **added** (`section` · 27 узл.)
|
- `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:1 > span:4` **added** (`span` · 2 узл.)
|
||||||
- `body > main:1 > section:2 > section:8` **added** (`section` · 97 узл.)
|
- `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:1 > svg:4` **removed** (`svg` · 1 узл.)
|
||||||
- `body > main:1 > section:2 > section:9` **added** (`section` · 153 узл.)
|
- `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 > section:2 > footer:4` **removed** (`footer` "ALL OPERATIONS RUN LOCALLY YOUR FILES NEVER LEAVE THIS DEVICE" · 2 узл.)
|
- `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 > footer:3` **added** (`footer` · 6 узл.)
|
- `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)
|
## /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` **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` **text**: ours `` → ref `PNG PROCESSING SINGLE TOOL`
|
||||||
- `body > main:1 > div:2 > section:1 > section:1` **added** (`section` · 145 узл.)
|
- `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)
|
## /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` **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` **text**: ours `` → ref `PNG PROCESSING SINGLE TOOL`
|
||||||
- `body > main:1 > div:2 > section:1 > section:1` **added** (`section` · 138 узл.)
|
- `body > main:1 > div:2 > section:1 > section:1` **added** (`section` · 138 узл.)
|
||||||
|
|||||||
@@ -0,0 +1,51 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { Snippet } from "svelte";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
label: string;
|
||||||
|
count: number;
|
||||||
|
children: Snippet;
|
||||||
|
}
|
||||||
|
let { label, count, children }: Props = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<section class="catalog-group">
|
||||||
|
<div class="group-title">
|
||||||
|
<span>{label}</span>
|
||||||
|
<i>{count} <!-- --> TOOLS</i>
|
||||||
|
</div>
|
||||||
|
<div class="tool-cards">
|
||||||
|
{@render children()}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.catalog-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
.group-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 1rem;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
.group-title span {
|
||||||
|
font: 12px var(--font-mono);
|
||||||
|
letter-spacing: 0.14em;
|
||||||
|
color: var(--foreground);
|
||||||
|
}
|
||||||
|
.group-title i {
|
||||||
|
font: 10px var(--font-mono);
|
||||||
|
font-style: normal;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
.tool-cards {
|
||||||
|
display: grid;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,66 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
interface Props {
|
||||||
|
total: number;
|
||||||
|
}
|
||||||
|
let { total }: Props = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="catalog-head">
|
||||||
|
<div>
|
||||||
|
<div class="eyebrow">EASY-PNG-TOOLS / CATALOG</div>
|
||||||
|
<h1>Tool catalog</h1>
|
||||||
|
<p>
|
||||||
|
Focused utilities for working with PNG. Inspect, transform, and export —
|
||||||
|
locally in your browser.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="catalog-total">
|
||||||
|
<b>{total}</b>
|
||||||
|
<span>TOOLS<br />AVAILABLE</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.catalog-head {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-end;
|
||||||
|
gap: 1.5rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.eyebrow {
|
||||||
|
font: 12px var(--font-mono);
|
||||||
|
letter-spacing: 0.18em;
|
||||||
|
color: var(--muted);
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--foreground);
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
margin: 0.5rem 0 0;
|
||||||
|
max-width: 56ch;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
.catalog-total {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-end;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
.catalog-total b {
|
||||||
|
font: 700 2rem var(--font-mono);
|
||||||
|
color: var(--foreground);
|
||||||
|
}
|
||||||
|
.catalog-total span {
|
||||||
|
font: 10px var(--font-mono);
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
color: var(--muted);
|
||||||
|
text-align: right;
|
||||||
|
margin-top: 0.35rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,93 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { Search, Filter } from "@lucide/svelte";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
query: string;
|
||||||
|
category: string;
|
||||||
|
}
|
||||||
|
let { query = $bindable(), category = $bindable() }: Props = $props();
|
||||||
|
|
||||||
|
const FILTERS = [
|
||||||
|
{ value: "all", label: "ALL" },
|
||||||
|
{ value: "convert", label: "CONVERT" },
|
||||||
|
{ value: "alpha", label: "TRANSPARENCY" },
|
||||||
|
{ value: "color", label: "COLOR" },
|
||||||
|
{ value: "geometry", label: "GEOMETRY" },
|
||||||
|
{ value: "filters", label: "FILTERS" },
|
||||||
|
{ value: "analyze", label: "ANALYZE" },
|
||||||
|
];
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="catalog-toolbar">
|
||||||
|
<label class="catalog-search">
|
||||||
|
<Search size={16} />
|
||||||
|
<input
|
||||||
|
aria-label="Search tools"
|
||||||
|
placeholder="Search tools..."
|
||||||
|
bind:value={query}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="catalog-filters">
|
||||||
|
<Filter size={15} />
|
||||||
|
{#each FILTERS as f (f.value)}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class:active={category === f.value}
|
||||||
|
onclick={() => (category = f.value)}>{f.label}</button
|
||||||
|
>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.catalog-toolbar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 1rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: 1.25rem 0;
|
||||||
|
}
|
||||||
|
.catalog-search {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
padding: 0.5rem 0.75rem;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
background: var(--panel);
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
.catalog-search input {
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
outline: none;
|
||||||
|
color: var(--foreground);
|
||||||
|
font: 12px var(--font-mono);
|
||||||
|
}
|
||||||
|
.catalog-search input::placeholder {
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
.catalog-filters {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.4rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
.catalog-filters button {
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
background: transparent;
|
||||||
|
color: var(--muted);
|
||||||
|
font: 10px var(--font-mono);
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
padding: 0.4rem 0.6rem;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.catalog-filters button.active {
|
||||||
|
background: var(--blue);
|
||||||
|
color: #fff;
|
||||||
|
border-color: var(--blue);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -2,6 +2,7 @@
|
|||||||
import { ArrowUpRight } from "@lucide/svelte";
|
import { ArrowUpRight } from "@lucide/svelte";
|
||||||
import type { Component } from "svelte";
|
import type { Component } from "svelte";
|
||||||
import Icon from "./Icon.svelte";
|
import Icon from "./Icon.svelte";
|
||||||
|
import { resolve } from "$app/paths";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
title: string;
|
title: string;
|
||||||
@@ -13,25 +14,26 @@
|
|||||||
let { title, href, description, index, icon }: Props = $props();
|
let { title, href, description, index, icon }: Props = $props();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
|
<a class="tool-card" href={resolve(href)}>
|
||||||
<a class="tool-card" {href}>
|
{#if icon}<span class="tool-icon"><Icon {icon} size={19} /></span>{/if}
|
||||||
{#if icon}<span class="tool-icon"><Icon {icon} size={18} /></span>{/if}
|
<span class="tool-copy">
|
||||||
|
<strong>{title}</strong>
|
||||||
|
{#if description}<span>{description}</span>{/if}
|
||||||
|
</span>
|
||||||
<span class="tool-index">
|
<span class="tool-index">
|
||||||
{index !== undefined ? index.toString().padStart(2, "0") : ""}
|
{index !== undefined ? index.toString().padStart(2, "0") : ""}
|
||||||
</span>
|
</span>
|
||||||
<span class="tool-copy">
|
|
||||||
<span class="tool-title">{title}</span>
|
|
||||||
{#if description}<span class="tool-desc">{description}</span>{/if}
|
|
||||||
</span>
|
|
||||||
<span class="tool-arrow"><ArrowUpRight size={16} /></span>
|
<span class="tool-arrow"><ArrowUpRight size={16} /></span>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.tool-card {
|
.tool-card {
|
||||||
display: flex;
|
display: grid;
|
||||||
|
grid-template-columns: 42px minmax(0, 1fr) 24px 18px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.75rem;
|
gap: 14px;
|
||||||
padding: 0.75rem 1rem;
|
min-height: 106px;
|
||||||
|
padding: 16px;
|
||||||
border: 1px solid var(--line);
|
border: 1px solid var(--line);
|
||||||
border-radius: var(--radius);
|
border-radius: var(--radius);
|
||||||
background: var(--panel);
|
background: var(--panel);
|
||||||
@@ -42,32 +44,42 @@
|
|||||||
border-color: var(--blue);
|
border-color: var(--blue);
|
||||||
}
|
}
|
||||||
.tool-icon {
|
.tool-icon {
|
||||||
|
width: 42px;
|
||||||
|
height: 42px;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
background: color-mix(in srgb, var(--blue) 12%, transparent);
|
||||||
color: var(--blue);
|
color: var(--blue);
|
||||||
display: inline-flex;
|
border-radius: var(--radius);
|
||||||
}
|
|
||||||
.tool-index {
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
font-size: 11px;
|
|
||||||
color: var(--muted);
|
|
||||||
}
|
}
|
||||||
.tool-copy {
|
.tool-copy {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 2px;
|
gap: 2px;
|
||||||
flex: 1;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
.tool-title {
|
.tool-copy strong {
|
||||||
font-weight: 600;
|
font: 600 13px var(--font-mono);
|
||||||
font-size: 0.9rem;
|
color: var(--foreground);
|
||||||
}
|
}
|
||||||
.tool-desc {
|
.tool-copy span {
|
||||||
font-size: 0.8rem;
|
font: 12px/1.5 var(--font-mono);
|
||||||
color: var(--muted);
|
color: var(--muted);
|
||||||
}
|
}
|
||||||
|
.tool-index {
|
||||||
|
font: 10px var(--font-mono);
|
||||||
|
color: var(--muted);
|
||||||
|
align-self: start;
|
||||||
|
}
|
||||||
.tool-arrow {
|
.tool-arrow {
|
||||||
color: var(--muted);
|
color: var(--blue);
|
||||||
|
opacity: 0;
|
||||||
|
transition:
|
||||||
|
opacity 0.12s ease,
|
||||||
|
transform 0.12s ease;
|
||||||
}
|
}
|
||||||
.tool-card:hover .tool-arrow {
|
.tool-card:hover .tool-arrow {
|
||||||
color: var(--blue);
|
opacity: 1;
|
||||||
|
transform: translate(2px, -2px);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -7,10 +7,11 @@
|
|||||||
interface Props {
|
interface Props {
|
||||||
theme: "light" | "dark";
|
theme: "light" | "dark";
|
||||||
crumb?: string;
|
crumb?: string;
|
||||||
|
status?: string;
|
||||||
ontoggle: () => void;
|
ontoggle: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
let { theme, crumb, ontoggle }: Props = $props();
|
let { theme, crumb, status = "AUTO PIPELINE", ontoggle }: Props = $props();
|
||||||
|
|
||||||
let lang = $state("RU");
|
let lang = $state("RU");
|
||||||
</script>
|
</script>
|
||||||
@@ -28,7 +29,7 @@
|
|||||||
<a href={resolve("/preview/tools/remove-background-png")}>Background remover</a>
|
<a href={resolve("/preview/tools/remove-background-png")}>Background remover</a>
|
||||||
</nav>
|
</nav>
|
||||||
<div class="top-actions">
|
<div class="top-actions">
|
||||||
<span class="status"><StatusDot /> AUTO PIPELINE</span>
|
<span class="status"><StatusDot /> {status}</span>
|
||||||
<IconButton
|
<IconButton
|
||||||
icon={CircleHelp}
|
icon={CircleHelp}
|
||||||
label="Help"
|
label="Help"
|
||||||
|
|||||||
@@ -32,29 +32,41 @@
|
|||||||
});
|
});
|
||||||
|
|
||||||
let crumb = $derived(toCrumb($page.url.pathname));
|
let crumb = $derived(toCrumb($page.url.pathname));
|
||||||
|
let status = $derived(toStatus($page.url.pathname));
|
||||||
|
|
||||||
|
const CRUMB: Record<string, string> = {
|
||||||
|
"/preview/demo": "WORKSPACE",
|
||||||
|
"/preview/list-tools": "CATALOG",
|
||||||
|
"/preview/tools/linear-gradient-png": "GRADIENT",
|
||||||
|
"/preview/tools/remove-background-png": "BACKGROUND REMOVER",
|
||||||
|
};
|
||||||
|
|
||||||
|
const STATUS: Record<string, string> = {
|
||||||
|
"/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 {
|
function toCrumb(path: string): string {
|
||||||
const seg = path
|
return "/ " + (CRUMB[path] ?? path.split("/").filter(Boolean).pop()?.toUpperCase() ?? "PREVIEW");
|
||||||
.replace(/^\/preview/, "")
|
}
|
||||||
.replace(/^\//, "")
|
|
||||||
.split("/")
|
function toStatus(path: string): string {
|
||||||
.filter(Boolean);
|
return STATUS[path] ?? "AUTO PIPELINE";
|
||||||
const map: Record<string, string> = { demo: "WORKSPACE" };
|
|
||||||
const label = seg.length
|
|
||||||
? seg.map((s) => map[s] ?? s.toUpperCase()).join(" / ")
|
|
||||||
: "PREVIEW";
|
|
||||||
return "/ " + label;
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<main class="preview-root" data-theme={theme}>
|
<main class="preview-root" data-theme={theme}>
|
||||||
<TopBar {theme} {crumb} ontoggle={toggle} />
|
<TopBar {theme} {crumb} {status} ontoggle={toggle} />
|
||||||
{@render children()}
|
{@render children()}
|
||||||
<footer class="preview-footer">
|
{#if $page.url.pathname !== "/preview/list-tools"}
|
||||||
<span>easy-png-tools <b>v2.4.0</b></span>
|
<footer class="preview-footer">
|
||||||
<span><Link2 size={13} /> pipeline is local-only</span>
|
<span>easy-png-tools <b>v2.4.0</b></span>
|
||||||
<span>© 2024</span>
|
<span><Link2 size={13} /> pipeline is local-only</span>
|
||||||
</footer>
|
<span>© 2024</span>
|
||||||
|
</footer>
|
||||||
|
{/if}
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|||||||
@@ -1,89 +1,88 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { TOOLS } from "$lib/registry";
|
import { TOOLS } from "$lib/registry";
|
||||||
import { CATEGORIES, type CategoryId } from "$lib/categories";
|
import { CATEGORIES, type CategoryId } from "$lib/categories";
|
||||||
import Panel from "$lib/components/kit/Panel.svelte";
|
import { TOOL_ICONS } from "$lib/tools/tool-icons";
|
||||||
import PanelHeading from "$lib/components/kit/PanelHeading.svelte";
|
import CatalogHeader from "$lib/components/kit/CatalogHeader.svelte";
|
||||||
|
import CatalogToolbar from "$lib/components/kit/CatalogToolbar.svelte";
|
||||||
|
import CatalogGroup from "$lib/components/kit/CatalogGroup.svelte";
|
||||||
import ToolCard from "$lib/components/kit/ToolCard.svelte";
|
import ToolCard from "$lib/components/kit/ToolCard.svelte";
|
||||||
|
|
||||||
const TITLES: Record<CategoryId, string> = {
|
const LABELS: Record<CategoryId, string> = {
|
||||||
convert: "Convert",
|
convert: "CONVERT",
|
||||||
alpha: "Alpha & transparency",
|
alpha: "TRANSPARENCY",
|
||||||
color: "Color",
|
color: "COLOR",
|
||||||
geometry: "Geometry",
|
geometry: "GEOMETRY",
|
||||||
filters: "Filters",
|
filters: "FILTERS",
|
||||||
text: "Text",
|
text: "TEXT",
|
||||||
analyze: "Analyze",
|
analyze: "ANALYZE",
|
||||||
generate: "Generate",
|
generate: "GENERATE",
|
||||||
};
|
};
|
||||||
|
|
||||||
const groups = CATEGORIES.map((cat) => ({
|
let query = $state("");
|
||||||
id: cat,
|
let category = $state<string>("all");
|
||||||
title: TITLES[cat],
|
|
||||||
tools: TOOLS.filter((t) => t.category === cat),
|
const groups = $derived(
|
||||||
}));
|
CATEGORIES.map((cat) => ({
|
||||||
|
id: cat,
|
||||||
|
label: LABELS[cat],
|
||||||
|
tools: TOOLS.filter(
|
||||||
|
(t) =>
|
||||||
|
t.category === cat &&
|
||||||
|
(category === "all" || category === cat) &&
|
||||||
|
(query.trim() === "" ||
|
||||||
|
t.title.toLowerCase().includes(query.trim().toLowerCase()) ||
|
||||||
|
t.description.toLowerCase().includes(query.trim().toLowerCase())),
|
||||||
|
),
|
||||||
|
})).filter((g) => g.tools.length > 0),
|
||||||
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section class="catalog">
|
<div class="catalog-page">
|
||||||
<header class="cat-head">
|
<CatalogHeader total={TOOLS.length} />
|
||||||
<span class="cat-eyebrow">CATALOG</span>
|
<CatalogToolbar bind:query bind:category />
|
||||||
<h1 class="cat-title">All tools</h1>
|
<div class="catalog-groups">
|
||||||
<p class="cat-lede">
|
{#each groups as group (group.id)}
|
||||||
Каталог всех PNG-инструментов, сгруппированный по назначению.
|
<CatalogGroup label={group.label} count={group.tools.length}>
|
||||||
</p>
|
{#each group.tools as tool, i (tool.id)}
|
||||||
</header>
|
|
||||||
|
|
||||||
{#each groups as group (group.id)}
|
|
||||||
<Panel>
|
|
||||||
<PanelHeading title={group.title} eyebrow={group.id} />
|
|
||||||
<div class="cat-grid">
|
|
||||||
{#each group.tools as tool (tool.id)}
|
|
||||||
<ToolCard
|
<ToolCard
|
||||||
title={tool.title}
|
title={tool.title}
|
||||||
href="/preview/tools/{tool.id}"
|
href={`/preview/tools/${tool.id}`}
|
||||||
description={tool.description}
|
description={tool.description}
|
||||||
|
index={i + 1}
|
||||||
|
icon={TOOL_ICONS[tool.id]}
|
||||||
/>
|
/>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</CatalogGroup>
|
||||||
</Panel>
|
{/each}
|
||||||
{/each}
|
</div>
|
||||||
</section>
|
<footer class="catalog-footer">
|
||||||
|
ALL OPERATIONS RUN LOCALLY <span>•</span> YOUR FILES NEVER LEAVE THIS DEVICE
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.catalog {
|
.catalog-page {
|
||||||
max-width: none;
|
padding: 60px clamp(24px, 4vw, 72px) 72px;
|
||||||
margin: 0 auto;
|
|
||||||
padding: 2.5rem clamp(24px, 4vw, 72px) 4rem;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1.25rem;
|
|
||||||
}
|
}
|
||||||
.cat-head {
|
.catalog-groups {
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
.cat-eyebrow {
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
font-size: 12px;
|
|
||||||
letter-spacing: 0.18em;
|
|
||||||
color: var(--muted);
|
|
||||||
}
|
|
||||||
.cat-title {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 2rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--foreground);
|
|
||||||
}
|
|
||||||
.cat-lede {
|
|
||||||
margin: 0;
|
|
||||||
max-width: 56ch;
|
|
||||||
color: var(--muted);
|
|
||||||
font-size: 0.95rem;
|
|
||||||
}
|
|
||||||
.cat-grid {
|
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
gap: 0.75rem;
|
gap: 56px 28px;
|
||||||
padding: 0.75rem 1rem 1rem;
|
}
|
||||||
|
.catalog-footer {
|
||||||
|
display: flex;
|
||||||
|
gap: 1.5rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-top: 56px;
|
||||||
|
padding-top: 24px;
|
||||||
|
border-top: 1px solid var(--line);
|
||||||
|
font: 10px var(--font-mono);
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
@media (max-width: 800px) {
|
||||||
|
.catalog-groups {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user