Ku6epXBOCTuK/easy-png-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: fix list tools page to correspond refs

Browse Source
This commit is contained in:
Ku6epXBOCTuK
2026-08-29 07:44:41 +05:00
parent d29ec73322
commit 7578a185b6
9 changed files with 2059 additions and 945 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/audit/dom-report.json
+1552 -712
View File
File diff suppressed because it is too large Load Diff
web/audit/dom-report.md
+162 -122
View File
@@ -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 узл.)
web/src/lib/components/kit/CatalogGroup.svelte
+51
View File
@@ -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>
web/src/lib/components/kit/CatalogHeader.svelte
+66
View File
@@ -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>
web/src/lib/components/kit/CatalogToolbar.svelte
+93
View File
@@ -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>
web/src/lib/components/kit/ToolCard.svelte
+36 -24
View File
@@ -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>
web/src/lib/components/kit/TopBar.svelte
+3 -2
View File
@@ -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"
web/src/routes/preview/+layout.svelte
+28 -16
View File
@@ -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>
web/src/routes/preview/list-tools/+page.svelte
+68 -69
View File
@@ -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>