mirror of
https://github.com/Ku6epXBOCTuK/easy-png-tools.git
synced 2026-09-14 13:36:36 +00:00
2972 lines
88 KiB
HTML
2972 lines
88 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru" class="bg-background">
|
|
<head>
|
|
<meta charSet="utf-8"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
|
<style>
|
|
@layer properties {
|
|
@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
|
|
*,:before,:after,::backdrop {
|
|
--tw-border-style:solid;
|
|
--tw-font-weight:initial;
|
|
--tw-shadow:0 0 #0000;
|
|
--tw-shadow-color:initial;
|
|
--tw-shadow-alpha:100%;
|
|
--tw-inset-shadow:0 0 #0000;
|
|
--tw-inset-shadow-color:initial;
|
|
--tw-inset-shadow-alpha:100%;
|
|
--tw-ring-color:initial;
|
|
--tw-ring-shadow:0 0 #0000;
|
|
--tw-inset-ring-color:initial;
|
|
--tw-inset-ring-shadow:0 0 #0000;
|
|
--tw-ring-inset:initial;
|
|
--tw-ring-offset-width:0px;
|
|
--tw-ring-offset-color:#fff;
|
|
--tw-ring-offset-shadow:0 0 #0000;
|
|
--tw-outline-style:solid;
|
|
--tw-blur:initial;
|
|
--tw-brightness:initial;
|
|
--tw-contrast:initial;
|
|
--tw-grayscale:initial;
|
|
--tw-hue-rotate:initial;
|
|
--tw-invert:initial;
|
|
--tw-opacity:initial;
|
|
--tw-saturate:initial;
|
|
--tw-sepia:initial;
|
|
--tw-drop-shadow:initial;
|
|
--tw-drop-shadow-color:initial;
|
|
--tw-drop-shadow-alpha:100%;
|
|
--tw-drop-shadow-size:initial;
|
|
--tw-translate-x:0;
|
|
--tw-translate-y:0;
|
|
--tw-translate-z:0;
|
|
--tw-animation-delay:0s;
|
|
--tw-animation-direction:normal;
|
|
--tw-animation-duration:initial;
|
|
--tw-animation-fill-mode:none;
|
|
--tw-animation-iteration-count:1;
|
|
--tw-enter-blur:0;
|
|
--tw-enter-opacity:1;
|
|
--tw-enter-rotate:0;
|
|
--tw-enter-scale:1;
|
|
--tw-enter-translate-x:0;
|
|
--tw-enter-translate-y:0;
|
|
--tw-exit-blur:0;
|
|
--tw-exit-opacity:1;
|
|
--tw-exit-rotate:0;
|
|
--tw-exit-scale:1;
|
|
--tw-exit-translate-x:0;
|
|
--tw-exit-translate-y:0
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
@layer theme {
|
|
:root,:host {
|
|
--font-sans:"IBM Plex Sans", sans-serif;
|
|
--font-mono:"IBM Plex Mono", monospace;
|
|
--spacing:.25rem;
|
|
--text-xs:.75rem;
|
|
--text-xs--line-height:calc(1 / .75);
|
|
--text-sm:.875rem;
|
|
--text-sm--line-height:calc(1.25 / .875);
|
|
--font-weight-medium:500;
|
|
--radius-md:.375rem;
|
|
--radius-lg:.5rem;
|
|
--default-transition-duration:.15s;
|
|
--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);
|
|
--default-font-family:"IBM Plex Sans", sans-serif;
|
|
--default-mono-font-family:"IBM Plex Mono", monospace
|
|
}
|
|
|
|
}
|
|
@layer base {
|
|
*,:after,:before,::backdrop {
|
|
box-sizing:border-box;
|
|
border:0 solid;
|
|
margin:0;
|
|
padding:0
|
|
}
|
|
::file-selector-button {
|
|
box-sizing:border-box;
|
|
border:0 solid;
|
|
margin:0;
|
|
padding:0
|
|
}
|
|
html,:host {
|
|
-webkit-text-size-adjust:100%;
|
|
tab-size:4;
|
|
line-height:1.5;
|
|
font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
|
|
font-feature-settings:var(--default-font-feature-settings,normal);
|
|
font-variation-settings:var(--default-font-variation-settings,normal);
|
|
-webkit-tap-highlight-color:transparent
|
|
}
|
|
hr {
|
|
height:0;
|
|
color:inherit;
|
|
border-top-width:1px
|
|
}
|
|
abbr:where([title]) {
|
|
-webkit-text-decoration:underline dotted;
|
|
text-decoration:underline dotted
|
|
}
|
|
h1,h2,h3,h4,h5,h6 {
|
|
font-size:inherit;
|
|
font-weight:inherit
|
|
}
|
|
a {
|
|
color:inherit;
|
|
-webkit-text-decoration:inherit;
|
|
-webkit-text-decoration:inherit;
|
|
-webkit-text-decoration:inherit;
|
|
-webkit-text-decoration:inherit;
|
|
text-decoration:inherit
|
|
}
|
|
b,strong {
|
|
font-weight:bolder
|
|
}
|
|
code,kbd,samp,pre {
|
|
font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
|
|
font-feature-settings:var(--default-mono-font-feature-settings,normal);
|
|
font-variation-settings:var(--default-mono-font-variation-settings,normal);
|
|
font-size:1em
|
|
}
|
|
small {
|
|
font-size:80%
|
|
}
|
|
sub,sup {
|
|
vertical-align:baseline;
|
|
font-size:75%;
|
|
line-height:0;
|
|
position:relative
|
|
}
|
|
sub {
|
|
bottom:-.25em
|
|
}
|
|
sup {
|
|
top:-.5em
|
|
}
|
|
table {
|
|
text-indent:0;
|
|
border-color:inherit;
|
|
border-collapse:collapse
|
|
}
|
|
:-moz-focusring:where(:not(iframe)) {
|
|
outline:auto
|
|
}
|
|
progress {
|
|
vertical-align:baseline
|
|
}
|
|
summary {
|
|
display:list-item
|
|
}
|
|
ol,ul,menu {
|
|
list-style:none
|
|
}
|
|
img,svg,video,canvas,audio,iframe,embed,object {
|
|
vertical-align:middle;
|
|
display:block
|
|
}
|
|
img,video {
|
|
max-width:100%;
|
|
height:auto
|
|
}
|
|
button,input,select,optgroup,textarea {
|
|
font:inherit;
|
|
font-feature-settings:inherit;
|
|
font-variation-settings:inherit;
|
|
letter-spacing:inherit;
|
|
color:inherit;
|
|
opacity:1;
|
|
background-color:#0000;
|
|
border-radius:0
|
|
}
|
|
::file-selector-button {
|
|
font:inherit;
|
|
font-feature-settings:inherit;
|
|
font-variation-settings:inherit;
|
|
letter-spacing:inherit;
|
|
color:inherit;
|
|
opacity:1;
|
|
background-color:#0000;
|
|
border-radius:0
|
|
}
|
|
:where(select:is([multiple],[size])) optgroup {
|
|
font-weight:bolder
|
|
}
|
|
:where(select:is([multiple],[size])) optgroup option {
|
|
padding-inline-start:20px
|
|
}
|
|
::file-selector-button {
|
|
margin-inline-end:4px
|
|
}
|
|
::placeholder {
|
|
opacity:1
|
|
}
|
|
@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
|
|
::placeholder {
|
|
color:currentColor
|
|
}
|
|
@supports (color:color-mix(in lab, red, red)) {
|
|
::placeholder {
|
|
color:color-mix(in oklab, currentcolor 50%, transparent)
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
textarea {
|
|
resize:vertical
|
|
}
|
|
::-webkit-search-decoration {
|
|
-webkit-appearance:none
|
|
}
|
|
::-webkit-date-and-time-value {
|
|
min-height:1lh;
|
|
text-align:inherit
|
|
}
|
|
::-webkit-datetime-edit {
|
|
display:inline-flex
|
|
}
|
|
::-webkit-datetime-edit-fields-wrapper {
|
|
padding:0
|
|
}
|
|
::-webkit-datetime-edit {
|
|
padding-block:0
|
|
}
|
|
::-webkit-datetime-edit-year-field {
|
|
padding-block:0
|
|
}
|
|
::-webkit-datetime-edit-month-field {
|
|
padding-block:0
|
|
}
|
|
::-webkit-datetime-edit-day-field {
|
|
padding-block:0
|
|
}
|
|
::-webkit-datetime-edit-hour-field {
|
|
padding-block:0
|
|
}
|
|
::-webkit-datetime-edit-minute-field {
|
|
padding-block:0
|
|
}
|
|
::-webkit-datetime-edit-second-field {
|
|
padding-block:0
|
|
}
|
|
::-webkit-datetime-edit-millisecond-field {
|
|
padding-block:0
|
|
}
|
|
::-webkit-datetime-edit-meridiem-field {
|
|
padding-block:0
|
|
}
|
|
::-webkit-calendar-picker-indicator {
|
|
line-height:1
|
|
}
|
|
:-moz-ui-invalid {
|
|
box-shadow:none
|
|
}
|
|
button,input:where([type=button],[type=reset],[type=submit]) {
|
|
appearance:button
|
|
}
|
|
::file-selector-button {
|
|
appearance:button
|
|
}
|
|
::-webkit-inner-spin-button {
|
|
height:auto
|
|
}
|
|
::-webkit-outer-spin-button {
|
|
height:auto
|
|
}
|
|
[hidden]:where(:not([hidden=until-found])) {
|
|
display:none!important
|
|
}
|
|
|
|
}
|
|
@layer components;
|
|
@layer utilities {
|
|
.inline-flex {
|
|
display:inline-flex
|
|
}
|
|
.size-6 {
|
|
width:calc(var(--spacing) * 6);
|
|
height:calc(var(--spacing) * 6)
|
|
}
|
|
.size-7 {
|
|
width:calc(var(--spacing) * 7);
|
|
height:calc(var(--spacing) * 7)
|
|
}
|
|
.size-8 {
|
|
width:calc(var(--spacing) * 8);
|
|
height:calc(var(--spacing) * 8)
|
|
}
|
|
.size-9 {
|
|
width:calc(var(--spacing) * 9);
|
|
height:calc(var(--spacing) * 9)
|
|
}
|
|
.h-6 {
|
|
height:calc(var(--spacing) * 6)
|
|
}
|
|
.h-7 {
|
|
height:calc(var(--spacing) * 7)
|
|
}
|
|
.h-8 {
|
|
height:calc(var(--spacing) * 8)
|
|
}
|
|
.h-9 {
|
|
height:calc(var(--spacing) * 9)
|
|
}
|
|
.shrink-0 {
|
|
flex-shrink:0
|
|
}
|
|
.items-center {
|
|
align-items:center
|
|
}
|
|
.justify-center {
|
|
justify-content:center
|
|
}
|
|
.gap-1 {
|
|
gap:var(--spacing)
|
|
}
|
|
.gap-1\.5 {
|
|
gap:calc(var(--spacing) * 1.5)
|
|
}
|
|
.rounded-\[min\(var\(--radius-md\)\,10px\)\] {
|
|
border-radius:min(var(--radius-md), 10px)
|
|
}
|
|
.rounded-\[min\(var\(--radius-md\)\,12px\)\] {
|
|
border-radius:min(var(--radius-md), 12px)
|
|
}
|
|
.rounded-lg {
|
|
border-radius:var(--radius-lg)
|
|
}
|
|
.border {
|
|
border-style:var(--tw-border-style);
|
|
border-width:1px
|
|
}
|
|
.border-border {
|
|
border-color:var(--line)
|
|
}
|
|
.border-transparent {
|
|
border-color:#0000
|
|
}
|
|
.bg-background {
|
|
background-color:var(--background)
|
|
}
|
|
.bg-clip-padding {
|
|
background-clip:padding-box
|
|
}
|
|
.px-2 {
|
|
padding-inline:calc(var(--spacing) * 2)
|
|
}
|
|
.px-2\.5 {
|
|
padding-inline:calc(var(--spacing) * 2.5)
|
|
}
|
|
.text-sm {
|
|
font-size:var(--text-sm);
|
|
line-height:var(--tw-leading,var(--text-sm--line-height))
|
|
}
|
|
.text-xs {
|
|
font-size:var(--text-xs);
|
|
line-height:var(--tw-leading,var(--text-xs--line-height))
|
|
}
|
|
.text-\[0\.8rem\] {
|
|
font-size:.8rem
|
|
}
|
|
.font-medium {
|
|
--tw-font-weight:var(--font-weight-medium);
|
|
font-weight:var(--font-weight-medium)
|
|
}
|
|
.whitespace-nowrap {
|
|
white-space:nowrap
|
|
}
|
|
.underline-offset-4 {
|
|
text-underline-offset:4px
|
|
}
|
|
.antialiased {
|
|
-webkit-font-smoothing:antialiased;
|
|
-moz-osx-font-smoothing:grayscale
|
|
}
|
|
.ring {
|
|
--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
|
|
box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
|
|
}
|
|
.outline {
|
|
outline-style:var(--tw-outline-style);
|
|
outline-width:1px
|
|
}
|
|
.blur {
|
|
--tw-blur:blur(8px);
|
|
filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)
|
|
}
|
|
.grayscale {
|
|
--tw-grayscale:grayscale(100%);
|
|
filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)
|
|
}
|
|
.transition {
|
|
transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;
|
|
transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));
|
|
transition-duration:var(--tw-duration,var(--default-transition-duration))
|
|
}
|
|
.transition-all {
|
|
transition-property:all;
|
|
transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));
|
|
transition-duration:var(--tw-duration,var(--default-transition-duration))
|
|
}
|
|
.outline-none {
|
|
--tw-outline-style:none;
|
|
outline-style:none
|
|
}
|
|
.select-none {
|
|
-webkit-user-select:none;
|
|
user-select:none
|
|
}
|
|
@media (hover:hover) {
|
|
.hover\:text-foreground:hover {
|
|
color:var(--foreground)
|
|
}
|
|
.hover\:underline:hover {
|
|
text-decoration-line:underline
|
|
}
|
|
|
|
}
|
|
.focus-visible\:ring-3:focus-visible {
|
|
--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
|
|
box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
|
|
}
|
|
.active\:not-aria-\[haspopup\]\:translate-y-px:active:not([aria-haspopup]) {
|
|
--tw-translate-y:1px;
|
|
translate:var(--tw-translate-x) var(--tw-translate-y)
|
|
}
|
|
.disabled\:pointer-events-none:disabled {
|
|
pointer-events:none
|
|
}
|
|
.disabled\:opacity-50:disabled {
|
|
opacity:.5
|
|
}
|
|
:where([data-slot=button-group]) .in-data-\[slot\=button-group\]\:rounded-lg {
|
|
border-radius:var(--radius-lg)
|
|
}
|
|
.has-data-\[icon\=inline-end\]\:pr-1\.5:has([data-icon=inline-end]) {
|
|
padding-right:calc(var(--spacing) * 1.5)
|
|
}
|
|
.has-data-\[icon\=inline-end\]\:pr-2:has([data-icon=inline-end]) {
|
|
padding-right:calc(var(--spacing) * 2)
|
|
}
|
|
.has-data-\[icon\=inline-start\]\:pl-1\.5:has([data-icon=inline-start]) {
|
|
padding-left:calc(var(--spacing) * 1.5)
|
|
}
|
|
.has-data-\[icon\=inline-start\]\:pl-2:has([data-icon=inline-start]) {
|
|
padding-left:calc(var(--spacing) * 2)
|
|
}
|
|
.aria-expanded\:text-foreground[aria-expanded=true] {
|
|
color:var(--foreground)
|
|
}
|
|
.aria-invalid\:ring-3[aria-invalid=true] {
|
|
--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
|
|
box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
|
|
}
|
|
.\[\&_svg\]\:pointer-events-none svg {
|
|
pointer-events:none
|
|
}
|
|
.\[\&_svg\]\:shrink-0 svg {
|
|
flex-shrink:0
|
|
}
|
|
.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3 svg:not([class*=size-]) {
|
|
width:calc(var(--spacing) * 3);
|
|
height:calc(var(--spacing) * 3)
|
|
}
|
|
.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3\.5 svg:not([class*=size-]) {
|
|
width:calc(var(--spacing) * 3.5);
|
|
height:calc(var(--spacing) * 3.5)
|
|
}
|
|
.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*=size-]) {
|
|
width:calc(var(--spacing) * 4);
|
|
height:calc(var(--spacing) * 4)
|
|
}
|
|
|
|
}
|
|
@property --tw-animation-delay {
|
|
syntax:"*";
|
|
inherits:false;
|
|
initial-value:0s
|
|
}
|
|
@property --tw-animation-direction {
|
|
syntax:"*";
|
|
inherits:false;
|
|
initial-value:normal
|
|
}
|
|
@property --tw-animation-duration {
|
|
syntax:"*";
|
|
inherits:false
|
|
}
|
|
@property --tw-animation-fill-mode {
|
|
syntax:"*";
|
|
inherits:false;
|
|
initial-value:none
|
|
}
|
|
@property --tw-animation-iteration-count {
|
|
syntax:"*";
|
|
inherits:false;
|
|
initial-value:1
|
|
}
|
|
@property --tw-enter-blur {
|
|
syntax:"*";
|
|
inherits:false;
|
|
initial-value:0
|
|
}
|
|
@property --tw-enter-opacity {
|
|
syntax:"*";
|
|
inherits:false;
|
|
initial-value:1
|
|
}
|
|
@property --tw-enter-rotate {
|
|
syntax:"*";
|
|
inherits:false;
|
|
initial-value:0
|
|
}
|
|
@property --tw-enter-scale {
|
|
syntax:"*";
|
|
inherits:false;
|
|
initial-value:1
|
|
}
|
|
@property --tw-enter-translate-x {
|
|
syntax:"*";
|
|
inherits:false;
|
|
initial-value:0
|
|
}
|
|
@property --tw-enter-translate-y {
|
|
syntax:"*";
|
|
inherits:false;
|
|
initial-value:0
|
|
}
|
|
@property --tw-exit-blur {
|
|
syntax:"*";
|
|
inherits:false;
|
|
initial-value:0
|
|
}
|
|
@property --tw-exit-opacity {
|
|
syntax:"*";
|
|
inherits:false;
|
|
initial-value:1
|
|
}
|
|
@property --tw-exit-rotate {
|
|
syntax:"*";
|
|
inherits:false;
|
|
initial-value:0
|
|
}
|
|
@property --tw-exit-scale {
|
|
syntax:"*";
|
|
inherits:false;
|
|
initial-value:1
|
|
}
|
|
@property --tw-exit-translate-x {
|
|
syntax:"*";
|
|
inherits:false;
|
|
initial-value:0
|
|
}
|
|
@property --tw-exit-translate-y {
|
|
syntax:"*";
|
|
inherits:false;
|
|
initial-value:0
|
|
}
|
|
:root {
|
|
--lightningcss-light:initial;
|
|
--lightningcss-dark: ;
|
|
color-scheme:light;
|
|
--background:#eef1f4;
|
|
--foreground:#17212b;
|
|
--panel:#f8fafb;
|
|
--line:#cbd3da;
|
|
--muted:#6d7883;
|
|
--blue:#1769d2;
|
|
--cyan:#00a8c7;
|
|
--amber:#bd7411;
|
|
--radius:4px
|
|
}
|
|
* {
|
|
box-sizing:border-box;
|
|
border-color:var(--line)
|
|
}
|
|
html {
|
|
background:var(--background)
|
|
}
|
|
body {
|
|
background:var(--background);
|
|
color:var(--foreground);
|
|
font-family:var(--font-sans);
|
|
margin:0
|
|
}
|
|
button,input {
|
|
font:inherit
|
|
}
|
|
button {
|
|
cursor:pointer
|
|
}
|
|
.app-shell {
|
|
background-color:var(--background);
|
|
background-image:linear-gradient(#dce2e7 1px,#0000 1px),linear-gradient(90deg,#dce2e7 1px,#0000 1px);
|
|
background-size:32px 32px;
|
|
min-height:100vh
|
|
}
|
|
.dark-mode {
|
|
--background:#11171d;
|
|
--foreground:#e8eef2;
|
|
--panel:#182129;
|
|
--line:#33414c;
|
|
--muted:#91a0ac;
|
|
--blue:#54a2ff;
|
|
background-image:linear-gradient(#1e2a3447 1px,#0000 1px),linear-gradient(90deg,#1e2a3447 1px,#0000 1px)
|
|
}
|
|
.topbar,.brand,.top-actions,.language,.status,.title-row,.pipeline-head,.step-heading,.step-tools,.pipeline-footer,.preview-top,.footer {
|
|
align-items:center;
|
|
display:flex
|
|
}
|
|
.topbar {
|
|
border-bottom:1px solid var(--line);
|
|
background:var(--panel);
|
|
justify-content:space-between;
|
|
height:64px;
|
|
padding:0 clamp(20px,4vw,64px)
|
|
}
|
|
.topbar>.brand {
|
|
color:var(--foreground);
|
|
text-decoration:none
|
|
}
|
|
.top-nav {
|
|
align-items:center;
|
|
gap:22px;
|
|
margin-left:auto;
|
|
margin-right:28px;
|
|
display:flex
|
|
}
|
|
.top-nav a {
|
|
color:var(--muted);
|
|
font:10px var(--font-mono);
|
|
white-space:nowrap;
|
|
text-decoration:none
|
|
}
|
|
.top-nav a:hover,.top-nav a.active {
|
|
color:var(--blue)
|
|
}
|
|
.brand {
|
|
font:600 14px var(--font-mono);
|
|
gap:10px
|
|
}
|
|
.brand-mark {
|
|
background:var(--blue);
|
|
color:#fff;
|
|
place-items:center;
|
|
width:30px;
|
|
height:30px;
|
|
font-size:11px;
|
|
display:grid
|
|
}
|
|
.version,.label,.step-type,.eyebrow {
|
|
font:10px var(--font-mono);
|
|
letter-spacing:.12em;
|
|
color:var(--muted)
|
|
}
|
|
.version,.eyebrow {
|
|
color:var(--blue)
|
|
}
|
|
.top-actions {
|
|
gap:16px
|
|
}
|
|
.status {
|
|
color:var(--muted);
|
|
font:10px var(--font-mono);
|
|
letter-spacing:.08em;
|
|
gap:7px
|
|
}
|
|
.status i,.auto-note i {
|
|
background:#25a96a;
|
|
border-radius:50%;
|
|
width:6px;
|
|
height:6px
|
|
}
|
|
.icon-btn {
|
|
color:var(--muted);
|
|
background:0 0;
|
|
border:0;
|
|
place-items:center;
|
|
padding:6px;
|
|
display:grid
|
|
}
|
|
.language {
|
|
border:1px solid var(--line)
|
|
}
|
|
.language button {
|
|
color:var(--muted);
|
|
font:10px var(--font-mono);
|
|
background:0 0;
|
|
border:0;
|
|
padding:6px 9px
|
|
}
|
|
.language .active {
|
|
background:var(--foreground);
|
|
color:var(--background)
|
|
}
|
|
.page-grid {
|
|
grid-template-columns:minmax(0,1.05fr) minmax(520px,.95fr);
|
|
align-items:start;
|
|
gap:56px;
|
|
width:100%;
|
|
max-width:none;
|
|
margin:auto;
|
|
padding:60px clamp(24px,4vw,72px) 72px;
|
|
display:grid
|
|
}
|
|
.preview-panel {
|
|
min-width:0;
|
|
margin-top:0;
|
|
position:sticky;
|
|
top:24px
|
|
}
|
|
.preview-meta {
|
|
gap:24px;
|
|
display:flex
|
|
}
|
|
.preview-meta div {
|
|
gap:5px;
|
|
display:grid
|
|
}
|
|
.preview-meta span {
|
|
font:10px var(--font-mono);
|
|
color:var(--muted)
|
|
}
|
|
.preview-meta b {
|
|
font:600 11px var(--font-mono)
|
|
}
|
|
.workspace,.preview-panel {
|
|
min-width:0
|
|
}
|
|
.preview-stack {
|
|
grid-template-columns:repeat(2,minmax(0,1fr));
|
|
gap:18px;
|
|
width:100%;
|
|
min-width:0;
|
|
display:grid
|
|
}
|
|
.preview-tile {
|
|
width:100%;
|
|
min-width:0;
|
|
overflow:hidden
|
|
}
|
|
.history-toggle {
|
|
border:1px solid var(--line);
|
|
width:100%;
|
|
color:var(--muted);
|
|
font:10px var(--font-mono);
|
|
letter-spacing:.04em;
|
|
background:0 0;
|
|
justify-content:center;
|
|
align-items:center;
|
|
gap:8px;
|
|
margin-top:18px;
|
|
padding:11px 14px;
|
|
display:flex
|
|
}
|
|
.history-toggle:hover {
|
|
color:var(--foreground);
|
|
background:var(--panel)
|
|
}
|
|
.top-toggle {
|
|
width:auto;
|
|
margin:0;
|
|
padding:8px 10px
|
|
}
|
|
.history-toggle .rotated {
|
|
transform:rotate(180deg)
|
|
}
|
|
.tile-canvas {
|
|
width:100%;
|
|
min-width:0;
|
|
min-height:clamp(300px,22vw,430px);
|
|
overflow:hidden
|
|
}
|
|
.image-preview {
|
|
min-width:0;
|
|
max-width:100%;
|
|
overflow:hidden
|
|
}
|
|
.eyebrow {
|
|
margin-bottom:18px
|
|
}
|
|
.eyebrow span {
|
|
color:var(--muted);
|
|
margin:0 7px
|
|
}
|
|
.title-row {
|
|
justify-content:space-between;
|
|
align-items:flex-end;
|
|
gap:30px;
|
|
margin-bottom:56px
|
|
}
|
|
h1 {
|
|
letter-spacing:-.06em;
|
|
max-width:700px;
|
|
margin:0 0 16px;
|
|
font-size:clamp(36px,4vw,64px);
|
|
font-weight:650;
|
|
line-height:1
|
|
}
|
|
.lede {
|
|
color:var(--muted);
|
|
max-width:550px;
|
|
margin:0;
|
|
line-height:1.6
|
|
}
|
|
.file-chip {
|
|
white-space:nowrap;
|
|
border:1px solid var(--line);
|
|
background:var(--panel);
|
|
font:11px var(--font-mono);
|
|
color:var(--muted);
|
|
align-items:center;
|
|
gap:8px;
|
|
padding:10px 12px;
|
|
display:flex
|
|
}
|
|
.file-chip b {
|
|
color:var(--blue);
|
|
font-weight:500
|
|
}
|
|
.pipeline-head {
|
|
border-bottom:1px solid var(--line);
|
|
justify-content:space-between;
|
|
padding-bottom:12px
|
|
}
|
|
.pipeline-head strong,.preview-top strong {
|
|
font:600 14px var(--font-mono);
|
|
margin-top:5px;
|
|
display:block
|
|
}
|
|
.pipeline-head em {
|
|
color:#25a96a;
|
|
font-size:10px;
|
|
font-style:normal
|
|
}
|
|
.add-btn,.reset-btn {
|
|
color:var(--blue);
|
|
background:0 0;
|
|
border:0;
|
|
align-items:center;
|
|
gap:7px;
|
|
font-size:12px;
|
|
display:flex
|
|
}
|
|
.steps-list {
|
|
gap:10px;
|
|
padding-top:14px;
|
|
display:grid
|
|
}
|
|
.step-card {
|
|
border:1px solid var(--line);
|
|
background:var(--panel);
|
|
grid-template-columns:46px 20px 1fr;
|
|
min-height:138px;
|
|
display:grid
|
|
}
|
|
.step-index {
|
|
font:11px var(--font-mono);
|
|
color:var(--blue);
|
|
padding:17px 0 0 15px
|
|
}
|
|
.drag {
|
|
color:var(--line);
|
|
margin-top:17px
|
|
}
|
|
.step-body {
|
|
padding:15px 18px 18px
|
|
}
|
|
.step-heading {
|
|
justify-content:space-between;
|
|
gap:15px
|
|
}
|
|
.step-heading h2 {
|
|
font:600 15px var(--font-mono);
|
|
margin:5px 0 18px
|
|
}
|
|
.step-tools {
|
|
gap:13px
|
|
}
|
|
.step-tools button {
|
|
color:var(--muted);
|
|
background:0 0;
|
|
border:0
|
|
}
|
|
.check {
|
|
color:#238354;
|
|
font:10px var(--font-mono);
|
|
align-items:center;
|
|
gap:4px;
|
|
display:flex
|
|
}
|
|
.controls {
|
|
grid-template-columns:1.1fr 1fr 1.2fr;
|
|
gap:16px;
|
|
display:grid
|
|
}
|
|
.controls.compact {
|
|
grid-template-columns:1fr 1fr
|
|
}
|
|
.control-block label {
|
|
color:var(--muted);
|
|
font:10px var(--font-mono);
|
|
letter-spacing:.08em;
|
|
justify-content:space-between;
|
|
margin-bottom:8px;
|
|
display:flex
|
|
}
|
|
.control-block output {
|
|
color:var(--foreground)
|
|
}
|
|
.color-field {
|
|
border:1px solid var(--line);
|
|
align-items:center;
|
|
gap:8px;
|
|
height:32px;
|
|
padding:0 8px;
|
|
display:flex
|
|
}
|
|
.swatch {
|
|
border:1px solid var(--line);
|
|
width:14px;
|
|
height:14px
|
|
}
|
|
.swatch.dark {
|
|
background:#16202b
|
|
}
|
|
.color-field input {
|
|
min-width:0;
|
|
color:var(--foreground);
|
|
font:11px var(--font-mono);
|
|
background:0 0;
|
|
border:0;
|
|
outline:0;
|
|
flex:1
|
|
}
|
|
.control-block input[type=range] {
|
|
width:100%;
|
|
accent-color:var(--blue)
|
|
}
|
|
.segmented {
|
|
border:1px solid var(--line);
|
|
height:32px;
|
|
display:flex
|
|
}
|
|
.segmented button {
|
|
border:0;
|
|
border-right:1px solid var(--line);
|
|
color:var(--muted);
|
|
font:10px var(--font-mono);
|
|
background:0 0;
|
|
flex:1
|
|
}
|
|
.segmented .selected {
|
|
background:var(--blue);
|
|
color:#fff
|
|
}
|
|
.transform-note,.auto-note {
|
|
color:var(--muted);
|
|
font:11px var(--font-mono);
|
|
align-items:center;
|
|
gap:8px;
|
|
display:flex
|
|
}
|
|
.pipeline-footer {
|
|
justify-content:space-between;
|
|
padding-top:18px
|
|
}
|
|
.auto-note {
|
|
color:var(--muted)
|
|
}
|
|
.auto-note i {
|
|
display:inline-block
|
|
}
|
|
.preview-panel {
|
|
border:1px solid var(--line);
|
|
background:var(--panel);
|
|
align-self:start;
|
|
padding:18px;
|
|
position:sticky;
|
|
top:24px
|
|
}
|
|
.preview-top {
|
|
border-bottom:1px solid var(--line);
|
|
justify-content:space-between;
|
|
padding-bottom:15px
|
|
}
|
|
.preview-stack {
|
|
grid-template-columns:1fr 1fr;
|
|
gap:12px;
|
|
padding:16px 0;
|
|
display:grid
|
|
}
|
|
.preview-tile {
|
|
border:1px solid var(--line);
|
|
background:var(--background)
|
|
}
|
|
.preview-tile.active {
|
|
border-color:var(--blue)
|
|
}
|
|
.tile-canvas {
|
|
aspect-ratio:1.35;
|
|
background-color:#e4e8eb;
|
|
background-image:linear-gradient(45deg,#d2d8dc 25%,#0000 25%),linear-gradient(-45deg,#d2d8dc 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#d2d8dc 75%),linear-gradient(-45deg,#0000 75%,#d2d8dc 75%);
|
|
background-position:0 0,0 7px,7px -7px,-7px 0;
|
|
background-size:14px 14px;
|
|
place-items:center;
|
|
padding:16px;
|
|
display:grid
|
|
}
|
|
.image-preview {
|
|
aspect-ratio:1.5;
|
|
color:#16202b;
|
|
width:80%;
|
|
font:600 10px var(--font-mono);
|
|
flex-direction:column;
|
|
justify-content:center;
|
|
align-items:center;
|
|
gap:5px;
|
|
display:flex
|
|
}
|
|
.sample-icon {
|
|
border:1px solid;
|
|
padding:3px 5px;
|
|
font-size:9px
|
|
}
|
|
.tile-label {
|
|
border-top:1px solid var(--line);
|
|
font:9px var(--font-mono);
|
|
color:var(--blue);
|
|
justify-content:space-between;
|
|
gap:8px;
|
|
padding:8px;
|
|
display:flex
|
|
}
|
|
.tile-label b {
|
|
color:var(--muted);
|
|
text-align:right;
|
|
font-weight:400
|
|
}
|
|
.preview-meta {
|
|
border-top:1px solid var(--line);
|
|
grid-template-columns:repeat(3,1fr);
|
|
gap:8px;
|
|
padding-top:14px;
|
|
display:grid
|
|
}
|
|
.preview-meta span {
|
|
color:var(--muted);
|
|
font:9px var(--font-mono);
|
|
display:block
|
|
}
|
|
.preview-meta b {
|
|
font:11px var(--font-mono);
|
|
margin-top:5px;
|
|
display:block
|
|
}
|
|
.download-btn {
|
|
background:var(--blue);
|
|
color:#fff;
|
|
width:100%;
|
|
height:42px;
|
|
font:11px var(--font-mono);
|
|
border:0;
|
|
justify-content:center;
|
|
align-items:center;
|
|
gap:9px;
|
|
margin-top:18px;
|
|
display:flex
|
|
}
|
|
.preview-note {
|
|
color:var(--muted);
|
|
margin:12px 0 0;
|
|
font-size:11px;
|
|
line-height:1.5
|
|
}
|
|
.footer {
|
|
border-top:1px solid var(--line);
|
|
color:var(--muted);
|
|
font:10px var(--font-mono);
|
|
justify-content:space-between;
|
|
padding:16px clamp(20px,4vw,72px)
|
|
}
|
|
.footer span {
|
|
align-items:center;
|
|
gap:7px;
|
|
display:flex
|
|
}
|
|
.footer b {
|
|
color:var(--blue);
|
|
font-weight:400
|
|
}
|
|
@media (max-width:1200px) {
|
|
.page-grid {
|
|
grid-template-columns:minmax(0,1fr) minmax(420px,.9fr);
|
|
gap:32px
|
|
}
|
|
|
|
}
|
|
.dark-mode .app-shell {
|
|
background-image:linear-gradient(#1e2a3447 1px,#0000 1px),linear-gradient(90deg,#1e2a3447 1px,#0000 1px)
|
|
}
|
|
.dark-mode .tile-canvas {
|
|
background-color:#202a31;
|
|
background-image:linear-gradient(45deg,#29343c 25%,#0000 25%),linear-gradient(-45deg,#29343c 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#29343c 75%),linear-gradient(-45deg,#0000 75%,#29343c 75%)
|
|
}
|
|
.dark-mode .image-preview {
|
|
color:#16202b
|
|
}
|
|
@media (max-width:800px) {
|
|
.topbar {
|
|
flex-wrap:wrap;
|
|
gap:12px;
|
|
height:auto;
|
|
min-height:64px;
|
|
padding:12px 16px
|
|
}
|
|
.top-nav {
|
|
order:3;
|
|
gap:12px;
|
|
width:100%;
|
|
margin:0;
|
|
padding-bottom:2px;
|
|
overflow:auto
|
|
}
|
|
.top-nav a {
|
|
font-size:9px
|
|
}
|
|
.status {
|
|
display:none
|
|
}
|
|
.page-grid {
|
|
padding:36px 16px 48px;
|
|
display:block
|
|
}
|
|
.title-row {
|
|
margin-bottom:40px;
|
|
display:block
|
|
}
|
|
.file-chip {
|
|
width:max-content;
|
|
margin-top:22px
|
|
}
|
|
.controls,.controls.compact {
|
|
grid-template-columns:1fr
|
|
}
|
|
.preview-panel {
|
|
margin-top:36px;
|
|
position:static
|
|
}
|
|
.footer {
|
|
flex-wrap:wrap;
|
|
gap:12px;
|
|
padding:0 16px 20px
|
|
}
|
|
.footer span:last-child {
|
|
display:none
|
|
}
|
|
|
|
}
|
|
@media (max-width:1100px) {
|
|
.preview-stack {
|
|
grid-template-columns:repeat(3,minmax(220px,1fr))
|
|
}
|
|
|
|
}
|
|
.preview-actions {
|
|
flex-wrap:wrap;
|
|
justify-content:flex-end
|
|
}
|
|
.download-btn {
|
|
white-space:nowrap
|
|
}
|
|
@media (max-width:800px) {
|
|
.preview-top {
|
|
flex-direction:column;
|
|
align-items:flex-start;
|
|
gap:18px
|
|
}
|
|
.preview-actions {
|
|
justify-content:space-between;
|
|
width:100%
|
|
}
|
|
.preview-meta {
|
|
gap:14px
|
|
}
|
|
.preview-stack {
|
|
grid-template-columns:repeat(2,minmax(0,1fr))
|
|
}
|
|
.tile-canvas {
|
|
min-height:260px
|
|
}
|
|
|
|
}
|
|
@media (max-width:480px) {
|
|
.preview-stack {
|
|
grid-template-columns:1fr
|
|
}
|
|
.preview-meta {
|
|
justify-content:space-between;
|
|
width:100%
|
|
}
|
|
.title-row h1 {
|
|
font-size:40px
|
|
}
|
|
.pipeline-footer {
|
|
flex-direction:column;
|
|
align-items:flex-start;
|
|
gap:12px
|
|
}
|
|
|
|
}
|
|
.tool-page {
|
|
width:100%;
|
|
padding:60px clamp(24px,4vw,72px) 72px
|
|
}
|
|
.tool-title {
|
|
justify-content:space-between;
|
|
align-items:end;
|
|
gap:32px;
|
|
margin-bottom:48px;
|
|
display:flex
|
|
}
|
|
.tool-title h1 {
|
|
margin-bottom:14px
|
|
}
|
|
.tool-status {
|
|
color:#25a96a;
|
|
font:10px var(--font-mono);
|
|
white-space:nowrap;
|
|
align-items:center;
|
|
gap:8px;
|
|
display:flex
|
|
}
|
|
.tool-status i,.auto-note i {
|
|
background:#25a96a;
|
|
border-radius:50%;
|
|
width:6px;
|
|
height:6px
|
|
}
|
|
.gradient-layout {
|
|
grid-template-columns:minmax(360px,.7fr) minmax(0,1.3fr);
|
|
align-items:start;
|
|
gap:56px;
|
|
display:grid
|
|
}
|
|
.settings-panel,.gradient-preview {
|
|
background:var(--panel);
|
|
border:1px solid var(--line)
|
|
}
|
|
.panel-heading,.preview-toolbar {
|
|
border-bottom:1px solid var(--line);
|
|
justify-content:space-between;
|
|
align-items:center;
|
|
padding:18px 20px;
|
|
display:flex
|
|
}
|
|
.panel-heading strong,.preview-toolbar strong {
|
|
font:600 14px var(--font-mono);
|
|
margin-top:5px;
|
|
display:block
|
|
}
|
|
.setting-group {
|
|
border-bottom:1px solid var(--line);
|
|
padding:22px 20px
|
|
}
|
|
.setting-group label {
|
|
font:10px var(--font-mono);
|
|
letter-spacing:.1em;
|
|
color:var(--muted);
|
|
justify-content:space-between;
|
|
margin-bottom:12px;
|
|
display:flex
|
|
}
|
|
.setting-group output {
|
|
color:var(--blue)
|
|
}
|
|
.color-row {
|
|
align-items:center;
|
|
gap:10px;
|
|
display:flex
|
|
}
|
|
.color-row .color-field {
|
|
flex:1
|
|
}
|
|
.stop-arrow {
|
|
color:var(--muted)
|
|
}
|
|
.gradient-bar {
|
|
border:1px solid var(--line);
|
|
height:14px;
|
|
margin-top:14px
|
|
}
|
|
.direction-grid {
|
|
grid-template-columns:repeat(4,1fr);
|
|
gap:6px;
|
|
margin-top:14px;
|
|
display:grid
|
|
}
|
|
.direction-grid button,.secondary-btn {
|
|
border:1px solid var(--line);
|
|
color:var(--muted);
|
|
font:10px var(--font-mono);
|
|
background:0 0;
|
|
padding:8px 6px
|
|
}
|
|
.direction-grid button.selected,.secondary-btn:hover {
|
|
background:var(--foreground);
|
|
color:var(--background)
|
|
}
|
|
.wide {
|
|
width:100%
|
|
}
|
|
.settings-footer {
|
|
justify-content:space-between;
|
|
align-items:center;
|
|
padding:16px 20px;
|
|
display:flex
|
|
}
|
|
.large-canvas {
|
|
background-color:#202a31;
|
|
background-image:linear-gradient(45deg,#29343c 25%,#0000 25%),linear-gradient(-45deg,#29343c 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#29343c 75%),linear-gradient(-45deg,#0000 75%,#29343c 75%);
|
|
background-position:0 0,0 14px,14px -14px,-14px 0;
|
|
background-size:28px 28px;
|
|
padding:24px
|
|
}
|
|
.gradient-art {
|
|
color:#fff;
|
|
min-height:clamp(420px,42vw,680px);
|
|
font:12px var(--font-mono);
|
|
place-content:center;
|
|
justify-items:center;
|
|
display:grid
|
|
}
|
|
.art-mark {
|
|
border:1px solid #ffffffa6;
|
|
place-items:center;
|
|
width:70px;
|
|
height:70px;
|
|
margin-bottom:12px;
|
|
font-size:16px;
|
|
display:grid
|
|
}
|
|
.code-block {
|
|
padding:16px 20px
|
|
}
|
|
.code-block>div {
|
|
justify-content:space-between;
|
|
align-items:center;
|
|
display:flex
|
|
}
|
|
.code-block pre {
|
|
background:var(--background);
|
|
color:var(--blue);
|
|
font:12px/1.6 var(--font-mono);
|
|
white-space:pre-wrap;
|
|
margin:12px 0 0;
|
|
padding:14px
|
|
}
|
|
.preview-actions {
|
|
align-items:center;
|
|
gap:10px;
|
|
display:flex
|
|
}
|
|
.secondary-btn {
|
|
align-items:center;
|
|
gap:8px;
|
|
display:flex
|
|
}
|
|
.dark-mode .large-canvas {
|
|
background-color:#202a31
|
|
}
|
|
.remover-layout {
|
|
grid-template-columns:minmax(360px,.62fr) minmax(0,1.38fr);
|
|
align-items:start;
|
|
gap:56px;
|
|
display:grid
|
|
}
|
|
.remover-preview {
|
|
background:var(--panel);
|
|
border:1px solid var(--line);
|
|
min-width:0
|
|
}
|
|
.comparison-grid {
|
|
grid-template-columns:repeat(2,minmax(0,1fr));
|
|
gap:18px;
|
|
padding:20px;
|
|
display:grid
|
|
}
|
|
.image-card {
|
|
min-width:0
|
|
}
|
|
.image-label {
|
|
font:10px var(--font-mono);
|
|
color:var(--muted);
|
|
justify-content:space-between;
|
|
margin-bottom:10px;
|
|
display:flex
|
|
}
|
|
.image-label span {
|
|
color:var(--blue)
|
|
}
|
|
.image-label b {
|
|
font-weight:400
|
|
}
|
|
.remover-canvas {
|
|
border:1px solid var(--line);
|
|
place-items:center;
|
|
min-height:clamp(360px,30vw,560px);
|
|
display:grid;
|
|
position:relative;
|
|
overflow:hidden
|
|
}
|
|
.source-canvas {
|
|
background:#e8eef2
|
|
}
|
|
.subject {
|
|
color:#ffffffd9;
|
|
width:74%;
|
|
height:68%;
|
|
font:600 14px var(--font-mono);
|
|
text-shadow:0 1px 2px #17212b;
|
|
place-items:center;
|
|
transition:all .2s;
|
|
display:grid
|
|
}
|
|
.subject-source {
|
|
transform:rotate(-3deg)
|
|
}
|
|
.canvas-size {
|
|
font:9px var(--font-mono);
|
|
color:var(--muted);
|
|
position:absolute;
|
|
bottom:9px;
|
|
right:10px
|
|
}
|
|
.result-meta {
|
|
border-top:1px solid var(--line);
|
|
font:10px var(--font-mono);
|
|
color:var(--muted);
|
|
gap:24px;
|
|
padding:16px 20px;
|
|
display:flex
|
|
}
|
|
.result-meta b {
|
|
color:var(--foreground);
|
|
margin-left:6px;
|
|
font-weight:600
|
|
}
|
|
.processed {
|
|
color:#25a96a;
|
|
font:10px var(--font-mono);
|
|
align-items:center;
|
|
gap:5px;
|
|
display:flex
|
|
}
|
|
.color-reference,.range-hints {
|
|
color:var(--muted);
|
|
font:10px var(--font-mono);
|
|
justify-content:space-between;
|
|
margin-top:10px;
|
|
display:flex
|
|
}
|
|
.color-reference {
|
|
justify-content:flex-start;
|
|
gap:8px
|
|
}
|
|
.color-reference span {
|
|
border:1px solid var(--line);
|
|
width:9px;
|
|
height:9px
|
|
}
|
|
.native-color {
|
|
width:30px;
|
|
border:0!important;
|
|
padding:0!important
|
|
}
|
|
.toggle-group label {
|
|
cursor:pointer;
|
|
align-items:center
|
|
}
|
|
.toggle-group input {
|
|
display:none
|
|
}
|
|
.toggle {
|
|
border:1px solid var(--line);
|
|
width:32px;
|
|
height:18px;
|
|
position:relative
|
|
}
|
|
.toggle:after {
|
|
content:"";
|
|
background:var(--muted);
|
|
width:10px;
|
|
height:10px;
|
|
transition:transform .2s;
|
|
position:absolute;
|
|
top:3px;
|
|
left:3px
|
|
}
|
|
.toggle-group input:checked+.toggle {
|
|
background:var(--blue);
|
|
border-color:var(--blue)
|
|
}
|
|
.toggle-group input:checked+.toggle:after {
|
|
background:#fff;
|
|
transform:translate(14px)
|
|
}
|
|
.toggle-group p {
|
|
color:var(--muted);
|
|
margin:8px 0 0;
|
|
font-size:12px;
|
|
line-height:1.5
|
|
}
|
|
.catalog-nav {
|
|
border-bottom:1px solid var(--line);
|
|
justify-content:space-between;
|
|
align-items:center;
|
|
gap:24px;
|
|
margin:-64px 0 64px;
|
|
padding:18px 0;
|
|
display:flex
|
|
}
|
|
.catalog-brand {
|
|
color:var(--foreground);
|
|
font:600 14px var(--font-mono);
|
|
text-decoration:none
|
|
}
|
|
.catalog-nav nav {
|
|
gap:24px;
|
|
display:flex
|
|
}
|
|
.catalog-nav nav a,.catalog-nav-status {
|
|
color:var(--muted);
|
|
font:10px var(--font-mono);
|
|
text-decoration:none
|
|
}
|
|
.catalog-nav nav a:hover,.catalog-nav nav a.current {
|
|
color:var(--blue)
|
|
}
|
|
.catalog-nav-status {
|
|
color:#25a96a
|
|
}
|
|
.catalog-page {
|
|
width:100%;
|
|
max-width:none;
|
|
margin:0;
|
|
padding:60px clamp(24px,4vw,72px) 72px
|
|
}
|
|
.catalog-head {
|
|
border-bottom:1px solid var(--line);
|
|
justify-content:space-between;
|
|
align-items:flex-end;
|
|
gap:40px;
|
|
padding-bottom:42px;
|
|
display:flex
|
|
}
|
|
.catalog-head h1 {
|
|
margin:12px 0 14px
|
|
}
|
|
.catalog-head p {
|
|
max-width:660px;
|
|
color:var(--muted);
|
|
font:14px/1.6 var(--font-mono);
|
|
margin:0
|
|
}
|
|
.catalog-total {
|
|
color:var(--muted);
|
|
font:10px/1.4 var(--font-mono);
|
|
text-align:right;
|
|
align-items:center;
|
|
gap:14px;
|
|
display:flex
|
|
}
|
|
.catalog-total b {
|
|
color:var(--blue);
|
|
font:400 clamp(48px,5vw,76px)/.9 var(--font-mono);
|
|
letter-spacing:-.08em
|
|
}
|
|
.catalog-toolbar {
|
|
justify-content:space-between;
|
|
align-items:center;
|
|
gap:24px;
|
|
padding:24px 0 42px;
|
|
display:flex
|
|
}
|
|
.catalog-search {
|
|
border:1px solid var(--line);
|
|
width:min(420px,100%);
|
|
color:var(--muted);
|
|
align-items:center;
|
|
gap:12px;
|
|
padding:12px 14px;
|
|
display:flex
|
|
}
|
|
.catalog-search input {
|
|
width:100%;
|
|
color:var(--foreground);
|
|
font:12px var(--font-mono);
|
|
background:0 0;
|
|
border:0;
|
|
outline:0
|
|
}
|
|
.catalog-filters {
|
|
color:var(--muted);
|
|
flex-wrap:wrap;
|
|
align-items:center;
|
|
gap:6px;
|
|
display:flex
|
|
}
|
|
.catalog-filters button {
|
|
color:var(--muted);
|
|
font:10px var(--font-mono);
|
|
background:0 0;
|
|
border:1px solid #0000;
|
|
padding:8px 10px
|
|
}
|
|
.catalog-filters button:hover,.catalog-filters button.active {
|
|
border-color:var(--blue);
|
|
color:var(--blue)
|
|
}
|
|
.catalog-groups {
|
|
grid-template-columns:repeat(2,minmax(0,1fr));
|
|
gap:56px 28px;
|
|
display:grid
|
|
}
|
|
.catalog-group {
|
|
min-width:0
|
|
}
|
|
.group-title {
|
|
border-bottom:1px solid var(--line);
|
|
color:var(--foreground);
|
|
font:600 11px var(--font-mono);
|
|
letter-spacing:.12em;
|
|
justify-content:space-between;
|
|
align-items:center;
|
|
padding-bottom:12px;
|
|
display:flex
|
|
}
|
|
.group-title i {
|
|
color:var(--muted);
|
|
font:10px var(--font-mono);
|
|
font-style:normal
|
|
}
|
|
.tool-cards {
|
|
gap:10px;
|
|
padding-top:14px;
|
|
display:grid
|
|
}
|
|
.tool-card {
|
|
border:1px solid var(--line);
|
|
background:var(--panel);
|
|
min-height:106px;
|
|
color:var(--foreground);
|
|
grid-template-columns:42px minmax(0,1fr) 24px 18px;
|
|
align-items:center;
|
|
gap:14px;
|
|
padding:16px;
|
|
text-decoration:none;
|
|
transition:border-color .18s,transform .18s,background .18s;
|
|
display:grid
|
|
}
|
|
.tool-card:hover {
|
|
border-color:var(--blue);
|
|
background:var(--panel-strong);
|
|
transform:translateY(-2px)
|
|
}
|
|
.tool-icon {
|
|
background:var(--blue);
|
|
place-items:center;
|
|
width:42px;
|
|
height:42px;
|
|
display:grid
|
|
}
|
|
@supports (color:color-mix(in lab, red, red)) {
|
|
.tool-icon {
|
|
background:color-mix(in srgb,var(--blue) 12%,transparent)
|
|
}
|
|
|
|
}
|
|
.tool-icon {
|
|
color:var(--blue)
|
|
}
|
|
.tool-copy {
|
|
gap:8px;
|
|
min-width:0;
|
|
display:grid
|
|
}
|
|
.tool-copy strong {
|
|
font:600 13px var(--font-mono)
|
|
}
|
|
.tool-copy span {
|
|
color:var(--muted);
|
|
font:12px/1.5 var(--font-mono)
|
|
}
|
|
.tool-index {
|
|
color:var(--muted);
|
|
font:10px var(--font-mono);
|
|
align-self:start
|
|
}
|
|
.tool-arrow {
|
|
color:var(--blue);
|
|
opacity:0;
|
|
transition:opacity .18s,transform .18s
|
|
}
|
|
.tool-card:hover .tool-arrow {
|
|
opacity:1;
|
|
transform:translate(2px,-2px)
|
|
}
|
|
.catalog-empty {
|
|
border:1px dashed var(--line);
|
|
color:var(--muted);
|
|
font:12px var(--font-mono);
|
|
align-items:center;
|
|
gap:10px;
|
|
padding:40px;
|
|
display:flex
|
|
}
|
|
.catalog-footer {
|
|
border-top:1px solid var(--line);
|
|
color:var(--muted);
|
|
font:10px var(--font-mono);
|
|
margin-top:64px;
|
|
padding-top:20px
|
|
}
|
|
.catalog-footer span {
|
|
color:var(--blue);
|
|
margin:0 8px
|
|
}
|
|
@media (max-width:800px) {
|
|
.catalog-nav {
|
|
margin:-36px 0 36px
|
|
}
|
|
.catalog-nav-status {
|
|
display:none
|
|
}
|
|
.catalog-nav nav {
|
|
gap:14px
|
|
}
|
|
.catalog-page {
|
|
padding:36px 16px 48px
|
|
}
|
|
.catalog-head {
|
|
flex-direction:column;
|
|
align-items:flex-start;
|
|
gap:24px
|
|
}
|
|
.catalog-total {
|
|
text-align:left
|
|
}
|
|
.catalog-toolbar {
|
|
flex-direction:column;
|
|
align-items:stretch;
|
|
padding-bottom:30px
|
|
}
|
|
.catalog-search {
|
|
width:100%
|
|
}
|
|
.catalog-groups {
|
|
grid-template-columns:1fr;
|
|
gap:36px
|
|
}
|
|
.tool-card {
|
|
grid-template-columns:38px minmax(0,1fr) 18px;
|
|
gap:12px;
|
|
min-height:96px
|
|
}
|
|
.tool-icon {
|
|
width:38px;
|
|
height:38px
|
|
}
|
|
.tool-index {
|
|
display:none
|
|
}
|
|
.tool-arrow {
|
|
opacity:1
|
|
}
|
|
.tool-page {
|
|
padding:36px 16px 48px
|
|
}
|
|
.tool-title {
|
|
display:block
|
|
}
|
|
.tool-status {
|
|
margin-top:22px
|
|
}
|
|
.gradient-layout,.remover-layout {
|
|
grid-template-columns:1fr;
|
|
gap:24px
|
|
}
|
|
.gradient-preview,.remover-preview {
|
|
order:-1
|
|
}
|
|
.gradient-art {
|
|
min-height:340px
|
|
}
|
|
.preview-toolbar {
|
|
flex-direction:column;
|
|
align-items:flex-start;
|
|
gap:16px
|
|
}
|
|
.preview-actions {
|
|
justify-content:flex-end;
|
|
width:100%
|
|
}
|
|
.comparison-grid {
|
|
grid-template-columns:1fr
|
|
}
|
|
.remover-canvas {
|
|
min-height:300px
|
|
}
|
|
.result-meta {
|
|
flex-wrap:wrap;
|
|
gap:12px 18px
|
|
}
|
|
|
|
}
|
|
@property --tw-border-style {
|
|
syntax:"*";
|
|
inherits:false;
|
|
initial-value:solid
|
|
}
|
|
@property --tw-font-weight {
|
|
syntax:"*";
|
|
inherits:false
|
|
}
|
|
@property --tw-shadow {
|
|
syntax:"*";
|
|
inherits:false;
|
|
initial-value:0 0 #0000
|
|
}
|
|
@property --tw-shadow-color {
|
|
syntax:"*";
|
|
inherits:false
|
|
}
|
|
@property --tw-shadow-alpha {
|
|
syntax:"<percentage>";
|
|
inherits:false;
|
|
initial-value:100%
|
|
}
|
|
@property --tw-inset-shadow {
|
|
syntax:"*";
|
|
inherits:false;
|
|
initial-value:0 0 #0000
|
|
}
|
|
@property --tw-inset-shadow-color {
|
|
syntax:"*";
|
|
inherits:false
|
|
}
|
|
@property --tw-inset-shadow-alpha {
|
|
syntax:"<percentage>";
|
|
inherits:false;
|
|
initial-value:100%
|
|
}
|
|
@property --tw-ring-color {
|
|
syntax:"*";
|
|
inherits:false
|
|
}
|
|
@property --tw-ring-shadow {
|
|
syntax:"*";
|
|
inherits:false;
|
|
initial-value:0 0 #0000
|
|
}
|
|
@property --tw-inset-ring-color {
|
|
syntax:"*";
|
|
inherits:false
|
|
}
|
|
@property --tw-inset-ring-shadow {
|
|
syntax:"*";
|
|
inherits:false;
|
|
initial-value:0 0 #0000
|
|
}
|
|
@property --tw-ring-inset {
|
|
syntax:"*";
|
|
inherits:false
|
|
}
|
|
@property --tw-ring-offset-width {
|
|
syntax:"<length>";
|
|
inherits:false;
|
|
initial-value:0
|
|
}
|
|
@property --tw-ring-offset-color {
|
|
syntax:"*";
|
|
inherits:false;
|
|
initial-value:#fff
|
|
}
|
|
@property --tw-ring-offset-shadow {
|
|
syntax:"*";
|
|
inherits:false;
|
|
initial-value:0 0 #0000
|
|
}
|
|
@property --tw-outline-style {
|
|
syntax:"*";
|
|
inherits:false;
|
|
initial-value:solid
|
|
}
|
|
@property --tw-blur {
|
|
syntax:"*";
|
|
inherits:false
|
|
}
|
|
@property --tw-brightness {
|
|
syntax:"*";
|
|
inherits:false
|
|
}
|
|
@property --tw-contrast {
|
|
syntax:"*";
|
|
inherits:false
|
|
}
|
|
@property --tw-grayscale {
|
|
syntax:"*";
|
|
inherits:false
|
|
}
|
|
@property --tw-hue-rotate {
|
|
syntax:"*";
|
|
inherits:false
|
|
}
|
|
@property --tw-invert {
|
|
syntax:"*";
|
|
inherits:false
|
|
}
|
|
@property --tw-opacity {
|
|
syntax:"*";
|
|
inherits:false
|
|
}
|
|
@property --tw-saturate {
|
|
syntax:"*";
|
|
inherits:false
|
|
}
|
|
@property --tw-sepia {
|
|
syntax:"*";
|
|
inherits:false
|
|
}
|
|
@property --tw-drop-shadow {
|
|
syntax:"*";
|
|
inherits:false
|
|
}
|
|
@property --tw-drop-shadow-color {
|
|
syntax:"*";
|
|
inherits:false
|
|
}
|
|
@property --tw-drop-shadow-alpha {
|
|
syntax:"<percentage>";
|
|
inherits:false;
|
|
initial-value:100%
|
|
}
|
|
@property --tw-drop-shadow-size {
|
|
syntax:"*";
|
|
inherits:false
|
|
}
|
|
@property --tw-translate-x {
|
|
syntax:"*";
|
|
inherits:false;
|
|
initial-value:0
|
|
}
|
|
@property --tw-translate-y {
|
|
syntax:"*";
|
|
inherits:false;
|
|
initial-value:0
|
|
}
|
|
@property --tw-translate-z {
|
|
syntax:"*";
|
|
inherits:false;
|
|
initial-value:0
|
|
}
|
|
</style>
|
|
<meta name="theme-color" content="#eef1f4"/>
|
|
<meta name="color-scheme" content="light"/>
|
|
<title>easy-png-tools / Demo
|
|
</title>
|
|
<meta name="description" content="Technical workspace for building PNG processing pipelines."/>
|
|
<meta name="generator" content="easy-png-tools"/>
|
|
</head>
|
|
<body class="antialiased">
|
|
<div hidden="">
|
|
<!--$-->
|
|
<!--/$-->
|
|
</div>
|
|
<main class="app-shell">
|
|
<header class="topbar">
|
|
<a class="brand" href="/">
|
|
<span class="brand-mark">EP
|
|
</span>
|
|
<span>easy-png-tools
|
|
</span>
|
|
<span class="version">/
|
|
<!-- -->CATALOG
|
|
</span>
|
|
</a>
|
|
<nav class="top-nav" aria-label="Primary navigation">
|
|
<a class="" href="/">Workspace
|
|
</a>
|
|
<a class="active" href="/easy-png-tools/list-tools">Catalog
|
|
</a>
|
|
<a class="" href="/easy-png-tools/gradient">Gradient
|
|
</a>
|
|
<a class="" href="/easy-png-tools/background-remover">Background remover
|
|
</a>
|
|
</nav>
|
|
<div class="top-actions">
|
|
<span class="status">
|
|
<i>
|
|
</i>
|
|
<!-- -->LOCAL MODE / READY
|
|
</span>
|
|
<button class="icon-btn" aria-label="Help">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-question-mark" aria-hidden="true">
|
|
<circle cx="12" cy="12" r="10">
|
|
</circle>
|
|
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3">
|
|
</path>
|
|
<path d="M12 17h.01">
|
|
</path>
|
|
</svg>
|
|
</button>
|
|
<button class="icon-btn" aria-label="Toggle theme">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-moon" aria-hidden="true">
|
|
<path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401">
|
|
</path>
|
|
</svg>
|
|
</button>
|
|
<div class="language">
|
|
<button class="active">RU
|
|
</button>
|
|
<span>/
|
|
</span>
|
|
<button>EN
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<div class="catalog-page">
|
|
<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>32
|
|
</b>
|
|
<span>TOOLS
|
|
<br/>AVAILABLE
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="catalog-toolbar">
|
|
<label class="catalog-search">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search" aria-hidden="true">
|
|
<path d="m21 21-4.34-4.34">
|
|
</path>
|
|
<circle cx="11" cy="11" r="8">
|
|
</circle>
|
|
</svg>
|
|
<input aria-label="Search tools" placeholder="Search tools..." value=""/>
|
|
</label>
|
|
<div class="catalog-filters">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-funnel" aria-hidden="true">
|
|
<path d="M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z">
|
|
</path>
|
|
</svg>
|
|
<button class="active">ALL
|
|
</button>
|
|
<button class="">CONVERT
|
|
</button>
|
|
<button class="">TRANSPARENCY
|
|
</button>
|
|
<button class="">COLOR
|
|
</button>
|
|
<button class="">GEOMETRY
|
|
</button>
|
|
<button class="">FILTERS
|
|
</button>
|
|
<button class="">ANALYZE
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="catalog-groups">
|
|
<section class="catalog-group">
|
|
<div class="group-title">
|
|
<span>CONVERT
|
|
</span>
|
|
<i>05
|
|
<!-- --> TOOLS
|
|
</i>
|
|
</div>
|
|
<div class="tool-cards">
|
|
<a class="tool-card" href="/easy-png-tools/gradient">
|
|
<span class="tool-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
|
|
<path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
|
|
</path>
|
|
<path d="M14 2v5a1 1 0 0 0 1 1h5">
|
|
</path>
|
|
<circle cx="10" cy="12" r="2">
|
|
</circle>
|
|
<path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
|
|
</path>
|
|
</svg>
|
|
</span>
|
|
<span class="tool-copy">
|
|
<strong>Convert JPG to PNG
|
|
</strong>
|
|
<span>Re-encode JPEG files as lossless PNG while preserving transparency.
|
|
</span>
|
|
</span>
|
|
<span class="tool-index">01
|
|
</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
|
|
<path d="M7 7h10v10">
|
|
</path>
|
|
<path d="M7 17 17 7">
|
|
</path>
|
|
</svg>
|
|
</a>
|
|
<a class="tool-card" href="#">
|
|
<span class="tool-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
|
|
<path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
|
|
</path>
|
|
<path d="M14 2v5a1 1 0 0 0 1 1h5">
|
|
</path>
|
|
<circle cx="10" cy="12" r="2">
|
|
</circle>
|
|
<path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
|
|
</path>
|
|
</svg>
|
|
</span>
|
|
<span class="tool-copy">
|
|
<strong>Convert WebP to PNG
|
|
</strong>
|
|
<span>Turn WebP images into a universal PNG format for any workflow.
|
|
</span>
|
|
</span>
|
|
<span class="tool-index">02
|
|
</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
|
|
<path d="M7 7h10v10">
|
|
</path>
|
|
<path d="M7 17 17 7">
|
|
</path>
|
|
</svg>
|
|
</a>
|
|
<a class="tool-card" href="#">
|
|
<span class="tool-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
|
|
<path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
|
|
</path>
|
|
<path d="M14 2v5a1 1 0 0 0 1 1h5">
|
|
</path>
|
|
<circle cx="10" cy="12" r="2">
|
|
</circle>
|
|
<path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
|
|
</path>
|
|
</svg>
|
|
</span>
|
|
<span class="tool-copy">
|
|
<strong>PNG to Base64
|
|
</strong>
|
|
<span>Encode an image as a base64 string for embedding in code or styles.
|
|
</span>
|
|
</span>
|
|
<span class="tool-index">03
|
|
</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
|
|
<path d="M7 7h10v10">
|
|
</path>
|
|
<path d="M7 17 17 7">
|
|
</path>
|
|
</svg>
|
|
</a>
|
|
<a class="tool-card" href="#">
|
|
<span class="tool-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
|
|
<path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
|
|
</path>
|
|
<path d="M14 2v5a1 1 0 0 0 1 1h5">
|
|
</path>
|
|
<circle cx="10" cy="12" r="2">
|
|
</circle>
|
|
<path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
|
|
</path>
|
|
</svg>
|
|
</span>
|
|
<span class="tool-copy">
|
|
<strong>PNG to Data URI
|
|
</strong>
|
|
<span>Build a complete data URI ready for HTML and CSS.
|
|
</span>
|
|
</span>
|
|
<span class="tool-index">04
|
|
</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
|
|
<path d="M7 7h10v10">
|
|
</path>
|
|
<path d="M7 17 17 7">
|
|
</path>
|
|
</svg>
|
|
</a>
|
|
<a class="tool-card" href="#">
|
|
<span class="tool-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
|
|
<path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
|
|
</path>
|
|
<path d="M14 2v5a1 1 0 0 0 1 1h5">
|
|
</path>
|
|
<circle cx="10" cy="12" r="2">
|
|
</circle>
|
|
<path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
|
|
</path>
|
|
</svg>
|
|
</span>
|
|
<span class="tool-copy">
|
|
<strong>Convert PNG to JPG
|
|
</strong>
|
|
<span>Composite transparency over a selected backdrop and export JPEG.
|
|
</span>
|
|
</span>
|
|
<span class="tool-index">05
|
|
</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
|
|
<path d="M7 7h10v10">
|
|
</path>
|
|
<path d="M7 17 17 7">
|
|
</path>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
<section class="catalog-group">
|
|
<div class="group-title">
|
|
<span>TRANSPARENCY
|
|
</span>
|
|
<i>05
|
|
<!-- --> TOOLS
|
|
</i>
|
|
</div>
|
|
<div class="tool-cards">
|
|
<a class="tool-card" href="/easy-png-tools/background-remover">
|
|
<span class="tool-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
|
|
<path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
|
|
</path>
|
|
<path d="M14 2v5a1 1 0 0 0 1 1h5">
|
|
</path>
|
|
<circle cx="10" cy="12" r="2">
|
|
</circle>
|
|
<path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
|
|
</path>
|
|
</svg>
|
|
</span>
|
|
<span class="tool-copy">
|
|
<strong>Remove background PNG
|
|
</strong>
|
|
<span>Remove a solid background by color, tolerance, or edge-connected regions.
|
|
</span>
|
|
</span>
|
|
<span class="tool-index">01
|
|
</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
|
|
<path d="M7 7h10v10">
|
|
</path>
|
|
<path d="M7 17 17 7">
|
|
</path>
|
|
</svg>
|
|
</a>
|
|
<a class="tool-card" href="#">
|
|
<span class="tool-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
|
|
<path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
|
|
</path>
|
|
<path d="M14 2v5a1 1 0 0 0 1 1h5">
|
|
</path>
|
|
<circle cx="10" cy="12" r="2">
|
|
</circle>
|
|
<path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
|
|
</path>
|
|
</svg>
|
|
</span>
|
|
<span class="tool-copy">
|
|
<strong>Extract alpha mask
|
|
</strong>
|
|
<span>Turn the alpha channel into a clean black-and-white mask.
|
|
</span>
|
|
</span>
|
|
<span class="tool-index">02
|
|
</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
|
|
<path d="M7 7h10v10">
|
|
</path>
|
|
<path d="M7 17 17 7">
|
|
</path>
|
|
</svg>
|
|
</a>
|
|
<a class="tool-card" href="#">
|
|
<span class="tool-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
|
|
<path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
|
|
</path>
|
|
<path d="M14 2v5a1 1 0 0 0 1 1h5">
|
|
</path>
|
|
<circle cx="10" cy="12" r="2">
|
|
</circle>
|
|
<path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
|
|
</path>
|
|
</svg>
|
|
</span>
|
|
<span class="tool-copy">
|
|
<strong>Round corners PNG
|
|
</strong>
|
|
<span>Clip the image corners by a precise radius percentage.
|
|
</span>
|
|
</span>
|
|
<span class="tool-index">03
|
|
</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
|
|
<path d="M7 7h10v10">
|
|
</path>
|
|
<path d="M7 17 17 7">
|
|
</path>
|
|
</svg>
|
|
</a>
|
|
<a class="tool-card" href="#">
|
|
<span class="tool-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
|
|
<path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
|
|
</path>
|
|
<path d="M14 2v5a1 1 0 0 0 1 1h5">
|
|
</path>
|
|
<circle cx="10" cy="12" r="2">
|
|
</circle>
|
|
<path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
|
|
</path>
|
|
</svg>
|
|
</span>
|
|
<span class="tool-copy">
|
|
<strong>Outline PNG
|
|
</strong>
|
|
<span>Add a colored ring around opaque content with adjustable thickness.
|
|
</span>
|
|
</span>
|
|
<span class="tool-index">04
|
|
</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
|
|
<path d="M7 7h10v10">
|
|
</path>
|
|
<path d="M7 17 17 7">
|
|
</path>
|
|
</svg>
|
|
</a>
|
|
<a class="tool-card" href="#">
|
|
<span class="tool-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
|
|
<path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
|
|
</path>
|
|
<path d="M14 2v5a1 1 0 0 0 1 1h5">
|
|
</path>
|
|
<circle cx="10" cy="12" r="2">
|
|
</circle>
|
|
<path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
|
|
</path>
|
|
</svg>
|
|
</span>
|
|
<span class="tool-copy">
|
|
<strong>Change PNG opacity
|
|
</strong>
|
|
<span>Multiply the alpha channel while keeping the original colors unchanged.
|
|
</span>
|
|
</span>
|
|
<span class="tool-index">05
|
|
</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
|
|
<path d="M7 7h10v10">
|
|
</path>
|
|
<path d="M7 17 17 7">
|
|
</path>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
<section class="catalog-group">
|
|
<div class="group-title">
|
|
<span>COLOR
|
|
</span>
|
|
<i>05
|
|
<!-- --> TOOLS
|
|
</i>
|
|
</div>
|
|
<div class="tool-cards">
|
|
<a class="tool-card" href="/easy-png-tools/gradient">
|
|
<span class="tool-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
|
|
<path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
|
|
</path>
|
|
<path d="M14 2v5a1 1 0 0 0 1 1h5">
|
|
</path>
|
|
<circle cx="10" cy="12" r="2">
|
|
</circle>
|
|
<path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
|
|
</path>
|
|
</svg>
|
|
</span>
|
|
<span class="tool-copy">
|
|
<strong>Create gradient PNG
|
|
</strong>
|
|
<span>Generate a smooth transition between two colors with direction controls.
|
|
</span>
|
|
</span>
|
|
<span class="tool-index">01
|
|
</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
|
|
<path d="M7 7h10v10">
|
|
</path>
|
|
<path d="M7 17 17 7">
|
|
</path>
|
|
</svg>
|
|
</a>
|
|
<a class="tool-card" href="#">
|
|
<span class="tool-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
|
|
<path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
|
|
</path>
|
|
<path d="M14 2v5a1 1 0 0 0 1 1h5">
|
|
</path>
|
|
<circle cx="10" cy="12" r="2">
|
|
</circle>
|
|
<path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
|
|
</path>
|
|
</svg>
|
|
</span>
|
|
<span class="tool-copy">
|
|
<strong>Grayscale PNG
|
|
</strong>
|
|
<span>Convert the image to luminance-based shades of gray.
|
|
</span>
|
|
</span>
|
|
<span class="tool-index">02
|
|
</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
|
|
<path d="M7 7h10v10">
|
|
</path>
|
|
<path d="M7 17 17 7">
|
|
</path>
|
|
</svg>
|
|
</a>
|
|
<a class="tool-card" href="#">
|
|
<span class="tool-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
|
|
<path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
|
|
</path>
|
|
<path d="M14 2v5a1 1 0 0 0 1 1h5">
|
|
</path>
|
|
<circle cx="10" cy="12" r="2">
|
|
</circle>
|
|
<path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
|
|
</path>
|
|
</svg>
|
|
</span>
|
|
<span class="tool-copy">
|
|
<strong>Invert colors PNG
|
|
</strong>
|
|
<span>Invert every color channel while leaving alpha untouched.
|
|
</span>
|
|
</span>
|
|
<span class="tool-index">03
|
|
</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
|
|
<path d="M7 7h10v10">
|
|
</path>
|
|
<path d="M7 17 17 7">
|
|
</path>
|
|
</svg>
|
|
</a>
|
|
<a class="tool-card" href="#">
|
|
<span class="tool-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
|
|
<path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
|
|
</path>
|
|
<path d="M14 2v5a1 1 0 0 0 1 1h5">
|
|
</path>
|
|
<circle cx="10" cy="12" r="2">
|
|
</circle>
|
|
<path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
|
|
</path>
|
|
</svg>
|
|
</span>
|
|
<span class="tool-copy">
|
|
<strong>Brightness & contrast
|
|
</strong>
|
|
<span>Adjust brightness and contrast across a controlled range.
|
|
</span>
|
|
</span>
|
|
<span class="tool-index">04
|
|
</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
|
|
<path d="M7 7h10v10">
|
|
</path>
|
|
<path d="M7 17 17 7">
|
|
</path>
|
|
</svg>
|
|
</a>
|
|
<a class="tool-card" href="#">
|
|
<span class="tool-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
|
|
<path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
|
|
</path>
|
|
<path d="M14 2v5a1 1 0 0 0 1 1h5">
|
|
</path>
|
|
<circle cx="10" cy="12" r="2">
|
|
</circle>
|
|
<path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
|
|
</path>
|
|
</svg>
|
|
</span>
|
|
<span class="tool-copy">
|
|
<strong>Temperature PNG
|
|
</strong>
|
|
<span>Make an image warmer or cooler with a single precise control.
|
|
</span>
|
|
</span>
|
|
<span class="tool-index">05
|
|
</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
|
|
<path d="M7 7h10v10">
|
|
</path>
|
|
<path d="M7 17 17 7">
|
|
</path>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
<section class="catalog-group">
|
|
<div class="group-title">
|
|
<span>GEOMETRY
|
|
</span>
|
|
<i>05
|
|
<!-- --> TOOLS
|
|
</i>
|
|
</div>
|
|
<div class="tool-cards">
|
|
<a class="tool-card" href="#">
|
|
<span class="tool-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
|
|
<path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
|
|
</path>
|
|
<path d="M14 2v5a1 1 0 0 0 1 1h5">
|
|
</path>
|
|
<circle cx="10" cy="12" r="2">
|
|
</circle>
|
|
<path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
|
|
</path>
|
|
</svg>
|
|
</span>
|
|
<span class="tool-copy">
|
|
<strong>Resize PNG
|
|
</strong>
|
|
<span>Scale an image with bilinear interpolation and optional aspect lock.
|
|
</span>
|
|
</span>
|
|
<span class="tool-index">01
|
|
</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
|
|
<path d="M7 7h10v10">
|
|
</path>
|
|
<path d="M7 17 17 7">
|
|
</path>
|
|
</svg>
|
|
</a>
|
|
<a class="tool-card" href="#">
|
|
<span class="tool-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
|
|
<path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
|
|
</path>
|
|
<path d="M14 2v5a1 1 0 0 0 1 1h5">
|
|
</path>
|
|
<circle cx="10" cy="12" r="2">
|
|
</circle>
|
|
<path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
|
|
</path>
|
|
</svg>
|
|
</span>
|
|
<span class="tool-copy">
|
|
<strong>Crop PNG
|
|
</strong>
|
|
<span>Cut a rectangular area with exact coordinates and dimensions.
|
|
</span>
|
|
</span>
|
|
<span class="tool-index">02
|
|
</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
|
|
<path d="M7 7h10v10">
|
|
</path>
|
|
<path d="M7 17 17 7">
|
|
</path>
|
|
</svg>
|
|
</a>
|
|
<a class="tool-card" href="#">
|
|
<span class="tool-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
|
|
<path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
|
|
</path>
|
|
<path d="M14 2v5a1 1 0 0 0 1 1h5">
|
|
</path>
|
|
<circle cx="10" cy="12" r="2">
|
|
</circle>
|
|
<path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
|
|
</path>
|
|
</svg>
|
|
</span>
|
|
<span class="tool-copy">
|
|
<strong>Rotate PNG
|
|
</strong>
|
|
<span>Rotate by 90, 180, or 270 degrees without quality loss.
|
|
</span>
|
|
</span>
|
|
<span class="tool-index">03
|
|
</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
|
|
<path d="M7 7h10v10">
|
|
</path>
|
|
<path d="M7 17 17 7">
|
|
</path>
|
|
</svg>
|
|
</a>
|
|
<a class="tool-card" href="#">
|
|
<span class="tool-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
|
|
<path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
|
|
</path>
|
|
<path d="M14 2v5a1 1 0 0 0 1 1h5">
|
|
</path>
|
|
<circle cx="10" cy="12" r="2">
|
|
</circle>
|
|
<path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
|
|
</path>
|
|
</svg>
|
|
</span>
|
|
<span class="tool-copy">
|
|
<strong>Flip PNG
|
|
</strong>
|
|
<span>Mirror the image horizontally or vertically.
|
|
</span>
|
|
</span>
|
|
<span class="tool-index">04
|
|
</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
|
|
<path d="M7 7h10v10">
|
|
</path>
|
|
<path d="M7 17 17 7">
|
|
</path>
|
|
</svg>
|
|
</a>
|
|
<a class="tool-card" href="#">
|
|
<span class="tool-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
|
|
<path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
|
|
</path>
|
|
<path d="M14 2v5a1 1 0 0 0 1 1h5">
|
|
</path>
|
|
<circle cx="10" cy="12" r="2">
|
|
</circle>
|
|
<path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
|
|
</path>
|
|
</svg>
|
|
</span>
|
|
<span class="tool-copy">
|
|
<strong>Add padding to PNG
|
|
</strong>
|
|
<span>Expand the canvas on all sides by a chosen number of pixels.
|
|
</span>
|
|
</span>
|
|
<span class="tool-index">05
|
|
</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
|
|
<path d="M7 7h10v10">
|
|
</path>
|
|
<path d="M7 17 17 7">
|
|
</path>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
<section class="catalog-group">
|
|
<div class="group-title">
|
|
<span>FILTERS
|
|
</span>
|
|
<i>04
|
|
<!-- --> TOOLS
|
|
</i>
|
|
</div>
|
|
<div class="tool-cards">
|
|
<a class="tool-card" href="#">
|
|
<span class="tool-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
|
|
<path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
|
|
</path>
|
|
<path d="M14 2v5a1 1 0 0 0 1 1h5">
|
|
</path>
|
|
<circle cx="10" cy="12" r="2">
|
|
</circle>
|
|
<path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
|
|
</path>
|
|
</svg>
|
|
</span>
|
|
<span class="tool-copy">
|
|
<strong>Blur PNG
|
|
</strong>
|
|
<span>Apply a fast Gaussian-style blur with transparent edge handling.
|
|
</span>
|
|
</span>
|
|
<span class="tool-index">01
|
|
</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
|
|
<path d="M7 7h10v10">
|
|
</path>
|
|
<path d="M7 17 17 7">
|
|
</path>
|
|
</svg>
|
|
</a>
|
|
<a class="tool-card" href="#">
|
|
<span class="tool-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
|
|
<path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
|
|
</path>
|
|
<path d="M14 2v5a1 1 0 0 0 1 1h5">
|
|
</path>
|
|
<circle cx="10" cy="12" r="2">
|
|
</circle>
|
|
<path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
|
|
</path>
|
|
</svg>
|
|
</span>
|
|
<span class="tool-copy">
|
|
<strong>Sharpen PNG
|
|
</strong>
|
|
<span>Emphasize edges with an adjustable sharpening kernel.
|
|
</span>
|
|
</span>
|
|
<span class="tool-index">02
|
|
</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
|
|
<path d="M7 7h10v10">
|
|
</path>
|
|
<path d="M7 17 17 7">
|
|
</path>
|
|
</svg>
|
|
</a>
|
|
<a class="tool-card" href="#">
|
|
<span class="tool-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
|
|
<path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
|
|
</path>
|
|
<path d="M14 2v5a1 1 0 0 0 1 1h5">
|
|
</path>
|
|
<circle cx="10" cy="12" r="2">
|
|
</circle>
|
|
<path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
|
|
</path>
|
|
</svg>
|
|
</span>
|
|
<span class="tool-copy">
|
|
<strong>Vignette PNG
|
|
</strong>
|
|
<span>Smoothly darken the image edges while preserving the center.
|
|
</span>
|
|
</span>
|
|
<span class="tool-index">03
|
|
</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
|
|
<path d="M7 7h10v10">
|
|
</path>
|
|
<path d="M7 17 17 7">
|
|
</path>
|
|
</svg>
|
|
</a>
|
|
<a class="tool-card" href="#">
|
|
<span class="tool-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
|
|
<path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
|
|
</path>
|
|
<path d="M14 2v5a1 1 0 0 0 1 1h5">
|
|
</path>
|
|
<circle cx="10" cy="12" r="2">
|
|
</circle>
|
|
<path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
|
|
</path>
|
|
</svg>
|
|
</span>
|
|
<span class="tool-copy">
|
|
<strong>JPEG artifacts
|
|
</strong>
|
|
<span>Simulate low-quality JPEG recompression for testing.
|
|
</span>
|
|
</span>
|
|
<span class="tool-index">04
|
|
</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
|
|
<path d="M7 7h10v10">
|
|
</path>
|
|
<path d="M7 17 17 7">
|
|
</path>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
<section class="catalog-group">
|
|
<div class="group-title">
|
|
<span>ANALYZE
|
|
</span>
|
|
<i>04
|
|
<!-- --> TOOLS
|
|
</i>
|
|
</div>
|
|
<div class="tool-cards">
|
|
<a class="tool-card" href="#">
|
|
<span class="tool-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
|
|
<path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
|
|
</path>
|
|
<path d="M14 2v5a1 1 0 0 0 1 1h5">
|
|
</path>
|
|
<circle cx="10" cy="12" r="2">
|
|
</circle>
|
|
<path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
|
|
</path>
|
|
</svg>
|
|
</span>
|
|
<span class="tool-copy">
|
|
<strong>PNG info
|
|
</strong>
|
|
<span>Inspect dimensions, alpha presence, and unique color count.
|
|
</span>
|
|
</span>
|
|
<span class="tool-index">01
|
|
</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
|
|
<path d="M7 7h10v10">
|
|
</path>
|
|
<path d="M7 17 17 7">
|
|
</path>
|
|
</svg>
|
|
</a>
|
|
<a class="tool-card" href="#">
|
|
<span class="tool-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
|
|
<path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
|
|
</path>
|
|
<path d="M14 2v5a1 1 0 0 0 1 1h5">
|
|
</path>
|
|
<circle cx="10" cy="12" r="2">
|
|
</circle>
|
|
<path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
|
|
</path>
|
|
</svg>
|
|
</span>
|
|
<span class="tool-copy">
|
|
<strong>Check grayscale
|
|
</strong>
|
|
<span>Report whether the image contains only shades of gray.
|
|
</span>
|
|
</span>
|
|
<span class="tool-index">02
|
|
</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
|
|
<path d="M7 7h10v10">
|
|
</path>
|
|
<path d="M7 17 17 7">
|
|
</path>
|
|
</svg>
|
|
</a>
|
|
<a class="tool-card" href="#">
|
|
<span class="tool-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
|
|
<path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
|
|
</path>
|
|
<path d="M14 2v5a1 1 0 0 0 1 1h5">
|
|
</path>
|
|
<circle cx="10" cy="12" r="2">
|
|
</circle>
|
|
<path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
|
|
</path>
|
|
</svg>
|
|
</span>
|
|
<span class="tool-copy">
|
|
<strong>Check transparency
|
|
</strong>
|
|
<span>Detect transparent and semi-transparent pixels.
|
|
</span>
|
|
</span>
|
|
<span class="tool-index">03
|
|
</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
|
|
<path d="M7 7h10v10">
|
|
</path>
|
|
<path d="M7 17 17 7">
|
|
</path>
|
|
</svg>
|
|
</a>
|
|
<a class="tool-card" href="#">
|
|
<span class="tool-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
|
|
<path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
|
|
</path>
|
|
<path d="M14 2v5a1 1 0 0 0 1 1h5">
|
|
</path>
|
|
<circle cx="10" cy="12" r="2">
|
|
</circle>
|
|
<path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
|
|
</path>
|
|
</svg>
|
|
</span>
|
|
<span class="tool-copy">
|
|
<strong>PNG orientation
|
|
</strong>
|
|
<span>Classify the image as portrait, landscape, or square.
|
|
</span>
|
|
</span>
|
|
<span class="tool-index">04
|
|
</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
|
|
<path d="M7 7h10v10">
|
|
</path>
|
|
<path d="M7 17 17 7">
|
|
</path>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<footer class="catalog-footer">ALL OPERATIONS RUN LOCALLY
|
|
<span>•
|
|
</span> YOUR FILES NEVER LEAVE THIS DEVICE
|
|
</footer>
|
|
</div>
|
|
</main>
|
|
<!--$-->
|
|
<!--/$-->
|
|
<!--$!-->
|
|
<template data-dgst="BAILOUT_TO_CLIENT_SIDE_RENDERING">
|
|
</template>
|
|
<!--/$-->
|
|
|
|
<script>
|
|
(function () {
|
|
var btn = document.querySelector('button[aria-label="Toggle theme"]');
|
|
var shell = document.querySelector('.app-shell');
|
|
if (!btn || window.__themeToggleInjected) return;
|
|
window.__themeToggleInjected = true;
|
|
btn.addEventListener('click', function () {
|
|
document.documentElement.classList.toggle('dark-mode');
|
|
if (shell) shell.classList.toggle('dark-mode');
|
|
});
|
|
})();
|
|
</script>
|
|
|
|
</body>
|
|
</html> |