7806e3f31c
Two follow-ups on the light-mode acid work: 1) Every hardcoded #d6ff3d and rgba(214,255,61,X) in the browser chrome and every addon panel now goes through var(--acid), so the light-mode BCH-teal (#0AC18E) takes effect everywhere — not just where var(--acid) was already used. Hex-with-alpha (#d6ff3d55 etc.) converts to color-mix(); rgba() converts to rgb(from var(--acid)…) for the same alpha with the current --acid hue. Chromium 128+ supports both. Files touched: chrome / settings / error / home / approval / bchwallet / siawallet / screenshot (html + css). Screenshot editor.js's #d6ff3d stays — that's the drawing colour swatch, not UI chrome. 2) The Theseus button (.logo) and update chip (.upchip) become dark BCH-navy chips (#253A49 background, #F8FDFF text) in light mode. Previously the .logo hardcoded #d6ff3d text on a bright-acid tint — invisible on a light toolbar. The dark chip stands out and gives the light theme a distinct accent using the BCH secondary from whybitcoincash.com's palette.
114 lines
5.3 KiB
HTML
114 lines
5.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Screenshot editor</title>
|
|
<link rel="stylesheet" href="editor.css">
|
|
</head>
|
|
<body>
|
|
<div class="toolbar" id="toolbar">
|
|
<span class="name" id="name">screenshot</span>
|
|
<span class="sep"></span>
|
|
|
|
<!-- Tool selector. Each button carries data-tool; buttons for the
|
|
drawing shapes and crop go here. -->
|
|
<button class="tool active" data-tool="select" title="Select / no tool">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 2l10 5-4 1-1 4z"/></svg>
|
|
</button>
|
|
<button class="tool" data-tool="crop" title="Crop">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 1v11h11M1 4h11v11"/></svg>
|
|
</button>
|
|
<button class="tool" data-tool="arrow" title="Arrow">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M3 13L13 3M13 3H8M13 3v5"/></svg>
|
|
</button>
|
|
<button class="tool" data-tool="rect" title="Rectangle">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2.5" y="3.5" width="11" height="9"/></svg>
|
|
</button>
|
|
<button class="tool" data-tool="ellipse" title="Ellipse">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><ellipse cx="8" cy="8" rx="5.5" ry="4"/></svg>
|
|
</button>
|
|
<button class="tool" data-tool="pen" title="Pen (freehand)">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M2 14c1-3 3-6 6-8s5-3 6-3l-3 4c-2 1-4 3-6 4s-2 2-3 3z"/></svg>
|
|
</button>
|
|
<button class="tool" data-tool="text" title="Text label">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 3h10M8 3v10M6 13h4"/></svg>
|
|
</button>
|
|
<button class="tool" data-tool="blur" title="Blur / mosaic redaction">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
<rect x="2.5" y="2.5" width="11" height="11"/>
|
|
<path d="M5 6h1M8 6h1M11 6h1M5 9h1M8 9h1M11 9h1M5 12h1M8 12h1M11 12h1"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<span class="sep"></span>
|
|
|
|
<!-- Palette -->
|
|
<button class="swatch active" data-color="var(--acid)" style="background:var(--acid)" title="Acid"></button>
|
|
<button class="swatch" data-color="#ff3b30" style="background:#ff3b30" title="Red"></button>
|
|
<button class="swatch" data-color="#ff9500" style="background:#ff9500" title="Orange"></button>
|
|
<button class="swatch" data-color="#ffcc00" style="background:#ffcc00" title="Yellow"></button>
|
|
<button class="swatch" data-color="#0a84ff" style="background:#0a84ff" title="Blue"></button>
|
|
<button class="swatch" data-color="#bf5af2" style="background:#bf5af2" title="Purple"></button>
|
|
<button class="swatch" data-color="#ffffff" style="background:#ffffff" title="White"></button>
|
|
<button class="swatch" data-color="#000000" style="background:#000000" title="Black"></button>
|
|
|
|
<span class="sep"></span>
|
|
|
|
<!-- Stroke width -->
|
|
<button class="width" data-width="2" title="Thin">
|
|
<span class="dot" style="width:4px;height:4px"></span>
|
|
</button>
|
|
<button class="width active" data-width="4" title="Medium">
|
|
<span class="dot" style="width:7px;height:7px"></span>
|
|
</button>
|
|
<button class="width" data-width="8" title="Thick">
|
|
<span class="dot" style="width:10px;height:10px"></span>
|
|
</button>
|
|
|
|
<span class="sep"></span>
|
|
|
|
<button class="tool" id="undo" title="Undo (Ctrl+Z)" disabled>
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M3 8c0-3 2-5 5-5s5 2 5 5-2 5-5 5"/><path d="M6 5L3 8l3 3"/></svg>
|
|
</button>
|
|
<button class="tool" id="redo" title="Redo (Ctrl+Shift+Z)" disabled>
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M13 8c0-3-2-5-5-5S3 5 3 8s2 5 5 5"/><path d="M10 5l3 3-3 3"/></svg>
|
|
</button>
|
|
|
|
<span class="spacer"></span>
|
|
|
|
<button class="tool wide" id="apply-crop" title="Apply the current crop rectangle" hidden>
|
|
<span>Apply crop</span>
|
|
</button>
|
|
<button class="tool wide" id="cancel-crop" title="Cancel crop" hidden>
|
|
<span>Cancel</span>
|
|
</button>
|
|
|
|
<button class="tool wide" id="copy" title="Copy PNG to clipboard">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="4" y="4" width="9" height="10"/><path d="M3 12V3h9"/></svg>
|
|
<span>Copy</span>
|
|
</button>
|
|
<button class="tool wide" id="save" title="Save PNG">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 2v9M4 7l4 4 4-4M2 14h12"/></svg>
|
|
<span>Save</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="board" id="board">
|
|
<div class="stage" id="stage" data-tool="select">
|
|
<!-- committed pixels (the "real" image after every applied edit) -->
|
|
<canvas id="committed"></canvas>
|
|
<!-- live preview during a drag (arrow / rect / etc.) -->
|
|
<canvas id="draw" class="draw"></canvas>
|
|
<!-- crop / blur selection rectangle chrome -->
|
|
<canvas id="overlay" class="overlay"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hint" id="hint"></div>
|
|
<div class="toast" id="toast"></div>
|
|
|
|
<a id="download-link" style="display:none"></a>
|
|
|
|
<script src="editor.js"></script>
|
|
</body>
|
|
</html>
|