diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..780b388
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,11 @@
+# Webtools
+
+This is a static site for a set of tools available on the web. The root of the site is located in "site", with index.html holding a list of available tools. Within each subdirectory of "site" is a separate tool. Each tool is self-contained with it's own index.html, CSS and JavaScript. Multipes of these files can be added if necessary. Note that each HTML has a standard header, with a typical title convension and importing "pico.min.css".
+
+Some tools can include a WASM file for more complex tasks. The WASM targets are built from Go files, with each cmd located as a sub directory in the "cmds" directory. Each one is built as a standalone WASM target.
+
+To build:
+
+- Run `build.wasm` to build the WASM targets. Additional targets will need to be added to this Make target
+- Run `build` to build both the WASM and prepare the site. The site will be available in a "target" directory.
+- Run `dev` to build the site and run a dev HTML server to test the site on port 8000. The dev server can be killed by sending a SIGINT signal.
diff --git a/Makefile b/Makefile
index d9bdbe1..d3f1b85 100644
--- a/Makefile
+++ b/Makefile
@@ -14,6 +14,7 @@ build.wasm:
GOOS=js GOARCH=wasm go build -o target/wasm/clocks.wasm ./cmds/clocks
GOOS=js GOARCH=wasm go build -o target/wasm/gotemplate.wasm ./cmds/gotemplate
GOOS=js GOARCH=wasm go build -o target/wasm/timestamps.wasm ./cmds/timestamps
+ GOOS=js GOARCH=wasm go build -o target/wasm/android-icons.wasm ./cmds/android-icons
cp $(GOROOT)/lib/wasm/wasm_exec.js target/wasm/.
.Phony: build.site
diff --git a/cmds/android-icons/main.go b/cmds/android-icons/main.go
new file mode 100644
index 0000000..cb3ddc8
--- /dev/null
+++ b/cmds/android-icons/main.go
@@ -0,0 +1,144 @@
+//go:build js
+
+package main
+
+import (
+ "archive/zip"
+ "bytes"
+ "encoding/base64"
+ "fmt"
+ "image"
+ "image/png"
+ "strings"
+ "syscall/js"
+
+ "golang.org/x/image/draw"
+)
+
+type density struct {
+ dir string
+ size int
+}
+
+var densities = []density{
+ {"mipmap-mdpi", 48},
+ {"mipmap-hdpi", 72},
+ {"mipmap-xhdpi", 96},
+ {"mipmap-xxhdpi", 144},
+ {"mipmap-xxxhdpi", 192},
+}
+
+func main() {
+ js.Global().Set("prepareZip", js.FuncOf(prepareZip))
+ <-make(chan struct{})
+}
+
+func prepareZip(this js.Value, args []js.Value) interface{} {
+ // args[0] is an array of {name: string, data: string (base64 PNG data)}
+ files := args[0]
+ length := files.Length()
+
+ if length == 0 {
+ js.Global().Call("alert", "No files selected.")
+ return nil
+ }
+
+ var buf bytes.Buffer
+ zw := zip.NewWriter(&buf)
+
+ for i := 0; i < length; i++ {
+ file := files.Index(i)
+ name := file.Get("name").String()
+ dataURL := file.Get("data").String()
+
+ // Strip data URL prefix (data:image/png;base64,)
+ commaIdx := strings.Index(dataURL, ",")
+ if commaIdx < 0 {
+ setStatus(fmt.Sprintf("Invalid data for %s", name))
+ return nil
+ }
+ b64Data := dataURL[commaIdx+1:]
+
+ imgData, err := base64.StdEncoding.DecodeString(b64Data)
+ if err != nil {
+ setStatus(fmt.Sprintf("Failed to decode %s: %v", name, err))
+ return nil
+ }
+
+ src, err := png.Decode(bytes.NewReader(imgData))
+ if err != nil {
+ setStatus(fmt.Sprintf("Failed to decode PNG %s: %v", name, err))
+ return nil
+ }
+
+ // Strip extension from name for the base name
+ baseName := name
+ if strings.HasSuffix(strings.ToLower(baseName), ".png") {
+ baseName = baseName[:len(baseName)-4]
+ }
+
+ for _, d := range densities {
+ resized := resizeImage(src, d.size)
+
+ var pngBuf bytes.Buffer
+ if err := png.Encode(&pngBuf, resized); err != nil {
+ setStatus(fmt.Sprintf("Failed to encode %s/%s.png: %v", d.dir, baseName, err))
+ return nil
+ }
+
+ path := fmt.Sprintf("%s/%s.png", d.dir, baseName)
+ w, err := zw.Create(path)
+ if err != nil {
+ setStatus(fmt.Sprintf("Failed to create zip entry %s: %v", path, err))
+ return nil
+ }
+ if _, err := w.Write(pngBuf.Bytes()); err != nil {
+ setStatus(fmt.Sprintf("Failed to write zip entry %s: %v", path, err))
+ return nil
+ }
+ }
+ }
+
+ if err := zw.Close(); err != nil {
+ setStatus(fmt.Sprintf("Failed to finalize zip: %v", err))
+ return nil
+ }
+
+ // Convert zip bytes to a JS Uint8Array and trigger download
+ zipBytes := buf.Bytes()
+ jsArray := js.Global().Get("Uint8Array").New(len(zipBytes))
+ js.CopyBytesToJS(jsArray, zipBytes)
+
+ // Create Blob and download
+ blobParts := js.Global().Get("Array").New()
+ blobParts.Call("push", jsArray)
+ blobOpts := js.Global().Get("Object").New()
+ blobOpts.Set("type", "application/zip")
+ blob := js.Global().Get("Blob").New(blobParts, blobOpts)
+
+ url := js.Global().Get("URL").Call("createObjectURL", blob)
+ anchor := js.Global().Get("document").Call("createElement", "a")
+ anchor.Set("href", url)
+ anchor.Set("download", "android-icons.zip")
+ js.Global().Get("document").Get("body").Call("appendChild", anchor)
+ anchor.Call("click")
+ anchor.Call("remove")
+ js.Global().Get("URL").Call("revokeObjectURL", url)
+
+ setStatus(fmt.Sprintf("Done! Prepared icons for %d image(s).", length))
+ return nil
+}
+
+func resizeImage(src image.Image, size int) image.Image {
+ dst := image.NewNRGBA(image.Rect(0, 0, size, size))
+ draw.CatmullRom.Scale(dst, dst.Bounds(), src, src.Bounds(), draw.Over, nil)
+ return dst
+}
+
+func setStatus(msg string) {
+ querySelector("#status").Set("innerText", msg)
+}
+
+func querySelector(query string) js.Value {
+ return js.Global().Get("document").Call("querySelector", query)
+}
diff --git a/go.mod b/go.mod
index 7f220ff..4e30240 100644
--- a/go.mod
+++ b/go.mod
@@ -1,5 +1,8 @@
module github.com/lmika/webtools
-go 1.24.3
+go 1.25.0
-require github.com/alecthomas/participle/v2 v2.1.4 // indirect
+require (
+ github.com/alecthomas/participle/v2 v2.1.4 // indirect
+ golang.org/x/image v0.37.0 // indirect
+)
diff --git a/go.sum b/go.sum
index bff288a..8e1c4f0 100644
--- a/go.sum
+++ b/go.sum
@@ -1,2 +1,4 @@
github.com/alecthomas/participle/v2 v2.1.4 h1:W/H79S8Sat/krZ3el6sQMvMaahJ+XcM9WSI2naI7w2U=
github.com/alecthomas/participle/v2 v2.1.4/go.mod h1:8tqVbpTX20Ru4NfYQgZf4mP18eXPTBViyMWiArNEgGI=
+golang.org/x/image v0.37.0 h1:ZiRjArKI8GwxZOoEtUfhrBtaCN+4b/7709dlT6SSnQA=
+golang.org/x/image v0.37.0/go.mod h1:/3f6vaXC+6CEanU4KJxbcUZyEePbyKbaLoDOe4ehFYY=
diff --git a/site/android-icons/index.html b/site/android-icons/index.html
new file mode 100644
index 0000000..d30965e
--- /dev/null
+++ b/site/android-icons/index.html
@@ -0,0 +1,34 @@
+
+
+
+
+
+ Android Icon Resizer - Tools
+
+
+
+
+
+
+
+
+
+
+
+
+
Circle Crop Preview
+
+
+
+
+
+
+
+
+
+
diff --git a/site/android-icons/main.js b/site/android-icons/main.js
new file mode 100644
index 0000000..056050b
--- /dev/null
+++ b/site/android-icons/main.js
@@ -0,0 +1,136 @@
+import "/wasm/wasm_exec.js";
+
+const go = new Go();
+let wasmReady = false;
+
+WebAssembly.instantiateStreaming(fetch("/wasm/android-icons.wasm"), go.importObject)
+ .then((result) => {
+ go.run(result.instance);
+ wasmReady = true;
+ });
+
+const fileInput = document.getElementById("file-input");
+const previewArea = document.getElementById("preview-area");
+const prepareBtn = document.getElementById("prepare-btn");
+const statusEl = document.getElementById("status");
+const circlePreview = document.getElementById("circle-preview");
+const circleCanvas = document.getElementById("circle-canvas");
+
+let loadedFiles = [];
+
+function renderCirclePreview() {
+ if (loadedFiles.length === 0) {
+ circlePreview.style.display = "none";
+ return;
+ }
+
+ const nameLower = (f) => f.name.toLowerCase();
+
+ let bgFile = loadedFiles.find((f) => /back/.test(nameLower(f)));
+ let fgFile = loadedFiles.find((f) => !/back/.test(nameLower(f)) && !/mono/.test(nameLower(f)));
+
+ // Fallbacks: if only one image or no "back" image, use the first file
+ if (!bgFile && !fgFile) {
+ bgFile = loadedFiles[0];
+ } else if (!bgFile) {
+ bgFile = fgFile;
+ fgFile = null;
+ }
+
+ const size = 192;
+ circleCanvas.width = size;
+ circleCanvas.height = size;
+ const ctx = circleCanvas.getContext("2d");
+ ctx.clearRect(0, 0, size, size);
+
+ // Clip to circle
+ ctx.save();
+ ctx.beginPath();
+ ctx.arc(size / 2, size / 2, size / 2, 0, Math.PI * 2);
+ ctx.closePath();
+ ctx.clip();
+
+ const drawLayer = (src) => {
+ return new Promise((resolve) => {
+ const img = new Image();
+ img.onload = () => {
+ ctx.drawImage(img, 0, 0, size, size);
+ resolve();
+ };
+ img.onerror = resolve;
+ img.src = src;
+ });
+ };
+
+ drawLayer(bgFile.data).then(() => {
+ if (fgFile && fgFile !== bgFile) {
+ return drawLayer(fgFile.data);
+ }
+ }).then(() => {
+ ctx.restore();
+
+ // Draw border ring
+ ctx.beginPath();
+ ctx.arc(size / 2, size / 2, size / 2 - 1.5, 0, Math.PI * 2);
+ ctx.closePath();
+ ctx.strokeStyle = "rgba(128, 128, 128, 0.5)";
+ ctx.lineWidth = 3;
+ ctx.stroke();
+
+ circlePreview.style.display = "block";
+ });
+}
+
+fileInput.addEventListener("change", () => {
+ const files = Array.from(fileInput.files);
+ loadedFiles = [];
+ previewArea.innerHTML = "";
+ circlePreview.style.display = "none";
+
+ if (files.length === 0) {
+ prepareBtn.disabled = true;
+ return;
+ }
+
+ files.forEach((file) => {
+ const reader = new FileReader();
+ reader.onload = (e) => {
+ const dataURL = e.target.result;
+ loadedFiles.push({ name: file.name, data: dataURL });
+
+ const item = document.createElement("div");
+ item.className = "preview-item";
+
+ const img = document.createElement("img");
+ img.src = dataURL;
+
+ const label = document.createElement("span");
+ label.textContent = file.name;
+
+ item.appendChild(img);
+ item.appendChild(label);
+ previewArea.appendChild(item);
+
+ if (loadedFiles.length === files.length) {
+ prepareBtn.disabled = false;
+ renderCirclePreview();
+ }
+ };
+ reader.readAsDataURL(file);
+ });
+});
+
+prepareBtn.addEventListener("click", () => {
+ if (!wasmReady) {
+ statusEl.textContent = "WASM module is still loading, please wait...";
+ return;
+ }
+ if (loadedFiles.length === 0) {
+ return;
+ }
+ statusEl.textContent = "Preparing...";
+ // Pass file data to Go WASM
+ setTimeout(() => {
+ prepareZip(loadedFiles);
+ }, 50);
+});
diff --git a/site/android-icons/style.css b/site/android-icons/style.css
new file mode 100644
index 0000000..1aea483
--- /dev/null
+++ b/site/android-icons/style.css
@@ -0,0 +1,54 @@
+#preview-area {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1rem;
+ margin: 1rem 0;
+}
+
+.preview-item {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 0.25rem;
+}
+
+.preview-item img {
+ width: 96px;
+ height: 96px;
+ object-fit: contain;
+ border: 1px solid var(--pico-muted-border-color);
+ border-radius: 4px;
+ background: repeating-conic-gradient(#eee 0% 25%, #fff 0% 50%) 50% / 16px 16px;
+}
+
+.preview-item span {
+ font-size: 0.8rem;
+ color: var(--pico-muted-color);
+ word-break: break-all;
+ max-width: 96px;
+ text-align: center;
+}
+
+.actions {
+ margin: 1rem 0;
+}
+
+#circle-preview {
+ display: none;
+ margin: 1rem 0;
+}
+
+#circle-preview h3 {
+ margin-bottom: 0.5rem;
+}
+
+#circle-canvas {
+ background: repeating-conic-gradient(#eee 0% 25%, #fff 0% 50%) 50% / 16px 16px;
+ border-radius: 50%;
+ box-shadow: 0 0 0 3px var(--pico-muted-border-color);
+}
+
+#status {
+ margin-top: 0.5rem;
+ font-style: italic;
+}
diff --git a/site/gradient-image/index.html b/site/gradient-image/index.html
new file mode 100644
index 0000000..2c1179c
--- /dev/null
+++ b/site/gradient-image/index.html
@@ -0,0 +1,50 @@
+
+
+
+
+
+ Gradient Image - Tools
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/site/gradient-image/main.js b/site/gradient-image/main.js
new file mode 100644
index 0000000..4271b7e
--- /dev/null
+++ b/site/gradient-image/main.js
@@ -0,0 +1,70 @@
+const PREVIEW_SIZE = 256;
+
+const fromColorEl = document.getElementById("from-color");
+const toColorEl = document.getElementById("to-color");
+const gradientTypeEl = document.getElementById("gradient-type");
+const rotationEl = document.getElementById("rotation");
+const rotationValueEl = document.getElementById("rotation-value");
+const imageSizeEl = document.getElementById("image-size");
+const canvas = document.getElementById("preview-canvas");
+const downloadBtn = document.getElementById("download-btn");
+
+function drawGradient(ctx, size) {
+ const fromColor = fromColorEl.value;
+ const toColor = toColorEl.value;
+ const type = gradientTypeEl.value;
+ const rotation = parseInt(rotationEl.value);
+
+ const cx = size / 2;
+ const cy = size / 2;
+
+ let gradient;
+ if (type === "radial") {
+ const radius = size / 2;
+ gradient = ctx.createRadialGradient(cx, cy, 0, cx, cy, radius);
+ } else {
+ const angle = (rotation * Math.PI) / 180;
+ const len = size / 2;
+ const dx = Math.cos(angle) * len;
+ const dy = Math.sin(angle) * len;
+ gradient = ctx.createLinearGradient(cx - dx, cy - dy, cx + dx, cy + dy);
+ }
+
+ gradient.addColorStop(0, fromColor);
+ gradient.addColorStop(1, toColor);
+
+ ctx.fillStyle = gradient;
+ ctx.fillRect(0, 0, size, size);
+}
+
+function renderPreview() {
+ canvas.width = PREVIEW_SIZE;
+ canvas.height = PREVIEW_SIZE;
+ const ctx = canvas.getContext("2d");
+ drawGradient(ctx, PREVIEW_SIZE);
+}
+
+function download() {
+ const size = parseInt(imageSizeEl.value);
+ const offscreen = document.createElement("canvas");
+ offscreen.width = size;
+ offscreen.height = size;
+ const ctx = offscreen.getContext("2d");
+ drawGradient(ctx, size);
+
+ const link = document.createElement("a");
+ link.download = `gradient-${size}x${size}.png`;
+ link.href = offscreen.toDataURL("image/png");
+ link.click();
+}
+
+fromColorEl.addEventListener("input", renderPreview);
+toColorEl.addEventListener("input", renderPreview);
+gradientTypeEl.addEventListener("input", renderPreview);
+rotationEl.addEventListener("input", () => {
+ rotationValueEl.textContent = rotationEl.value;
+ renderPreview();
+});
+downloadBtn.addEventListener("click", download);
+
+renderPreview();
diff --git a/site/gradient-image/style.css b/site/gradient-image/style.css
new file mode 100644
index 0000000..bfe7c47
--- /dev/null
+++ b/site/gradient-image/style.css
@@ -0,0 +1,22 @@
+.controls {
+ display: flex;
+ flex-direction: column;
+}
+
+.preview {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 1rem;
+}
+
+#preview-canvas {
+ width: 256px;
+ height: 256px;
+ border: 1px solid var(--pico-muted-border-color);
+ border-radius: 4px;
+}
+
+#download-btn {
+ width: 100%;
+}
diff --git a/site/image-inner-resize/index.html b/site/image-inner-resize/index.html
new file mode 100644
index 0000000..521be20
--- /dev/null
+++ b/site/image-inner-resize/index.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+ Image Inner Resize - Tools
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/site/image-inner-resize/main.js b/site/image-inner-resize/main.js
new file mode 100644
index 0000000..a22fc52
--- /dev/null
+++ b/site/image-inner-resize/main.js
@@ -0,0 +1,57 @@
+const fileInput = document.getElementById("file-input");
+const scaleEl = document.getElementById("scale");
+const scaleValueEl = document.getElementById("scale-value");
+const canvas = document.getElementById("preview-canvas");
+const downloadBtn = document.getElementById("download-btn");
+
+let sourceImage = null;
+
+function render() {
+ if (!sourceImage) return;
+
+ const w = sourceImage.naturalWidth;
+ const h = sourceImage.naturalHeight;
+ const scale = parseInt(scaleEl.value) / 100;
+
+ canvas.width = w;
+ canvas.height = h;
+ const ctx = canvas.getContext("2d");
+ ctx.clearRect(0, 0, w, h);
+
+ const sw = w * scale;
+ const sh = h * scale;
+ const sx = (w - sw) / 2;
+ const sy = (h - sh) / 2;
+
+ ctx.drawImage(sourceImage, sx, sy, sw, sh);
+}
+
+fileInput.addEventListener("change", () => {
+ const file = fileInput.files[0];
+ if (!file) return;
+
+ const reader = new FileReader();
+ reader.onload = (e) => {
+ const img = new Image();
+ img.onload = () => {
+ sourceImage = img;
+ downloadBtn.disabled = false;
+ render();
+ };
+ img.src = e.target.result;
+ };
+ reader.readAsDataURL(file);
+});
+
+scaleEl.addEventListener("input", () => {
+ scaleValueEl.textContent = scaleEl.value;
+ render();
+});
+
+downloadBtn.addEventListener("click", () => {
+ if (!sourceImage) return;
+ const link = document.createElement("a");
+ link.download = "resized.png";
+ link.href = canvas.toDataURL("image/png");
+ link.click();
+});
diff --git a/site/image-inner-resize/style.css b/site/image-inner-resize/style.css
new file mode 100644
index 0000000..dbaa0f5
--- /dev/null
+++ b/site/image-inner-resize/style.css
@@ -0,0 +1,23 @@
+.controls {
+ display: flex;
+ flex-direction: column;
+}
+
+.preview {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 1rem;
+}
+
+#preview-canvas {
+ max-width: 100%;
+ max-height: 512px;
+ border: 1px solid var(--pico-muted-border-color);
+ border-radius: 4px;
+ background: repeating-conic-gradient(#eee 0% 25%, #fff 0% 50%) 50% / 16px 16px;
+}
+
+#download-btn {
+ width: 100%;
+}
diff --git a/site/index.html b/site/index.html
index 23d989a..437258e 100644
--- a/site/index.html
+++ b/site/index.html
@@ -31,6 +31,9 @@
Mental Arithmatic Game
Neon Snake: vibe-coded by Google Gemini
Hex Color Converter
+ Android Icon Resizer
+ Gradient Image
+ Image Inner Resize