Pets: click a thumbnail to see the photo full size

The thumbnails are 110px squares cropped square, which is too small to check
the thing they exist to record — the collar, the eye colour, the markings that
have to survive into the video.

pets.html

@@ -155,7 +155,9 @@ function petCard(p) {
     ? shots.map(function (s) {
         return '<figure style="margin:0">'
           + '<img src="' + esc(s.url) + '" alt="' + esc(p.name + " " + s.kind) + '" '
-          + 'style="width:100%;aspect-ratio:1;object-fit:cover;border-radius:9px;border:1px solid var(--line);display:block">'
+          + 'data-full="' + esc(s.url) + '" data-cap="' + esc(p.name + " · " + s.kind) + '" '
+          + 'title="Click to see it full size" '
+          + 'style="width:100%;aspect-ratio:1;object-fit:cover;border-radius:9px;border:1px solid var(--line);display:block;cursor:zoom-in">'
           + '<figcaption style="font:11px/1.5 var(--mono);color:var(--muted);margin-top:5px;display:flex;justify-content:space-between;gap:6px">'
           + '<span>' + esc(s.kind) + '</span>'
           + '<button type="button" data-del="' + esc(s.id) + '" style="background:none;border:0;color:var(--muted);cursor:pointer;text-decoration:underline;font:inherit">remove</button>'
@@ -239,6 +241,31 @@ function resetForm() {
 }
 document.getElementById("cancel").addEventListener("click", resetForm);
 
+// A 110px square crop is too small to check the collar, the eye colour or the
+// markings — which is exactly what these photographs exist to record.
+function showFull(src, caption) {
+  var back = document.createElement("div");
+  back.setAttribute("role", "dialog");
+  back.setAttribute("aria-label", caption || "Photo");
+  back.style.cssText = "position:fixed;inset:0;background:rgba(6,8,12,.9);z-index:9999;"
+    + "display:flex;flex-direction:column;align-items:center;justify-content:center;"
+    + "gap:14px;padding:26px;cursor:zoom-out";
+  back.innerHTML = '<img src="' + esc(src) + '" alt="' + esc(caption || "") + '" '
+    + 'style="max-width:min(100%,900px);max-height:82vh;border-radius:12px;'
+    + 'border:1px solid var(--line);display:block;background:#000">'
+    + '<p style="margin:0;color:#c9cedb;font:13px/1.5 var(--mono);text-align:center">'
+    + esc(caption || "") + '<br><span style="opacity:.65">click anywhere, or press Escape, to close</span></p>';
+
+  function close() {
+    document.removeEventListener("keydown", onKey);
+    if (back.parentNode) back.parentNode.removeChild(back);
+  }
+  function onKey(e) { if (e.key === "Escape") close(); }
+  back.addEventListener("click", close);
+  document.addEventListener("keydown", onKey);
+  document.body.appendChild(back);
+}
+
 document.getElementById("list").addEventListener("click", async function (e) {
   var ed = e.target.closest("[data-edit]");
   if (ed) {
@@ -258,6 +285,11 @@ document.getElementById("list").addEventListener("click", async function (e) {
     document.getElementById("formcard").scrollIntoView({ behavior: "smooth", block: "start" });
     return;
   }
+  var full = e.target.closest("[data-full]");
+  if (full) {
+    showFull(full.getAttribute("data-full"), full.getAttribute("data-cap"));
+    return;
+  }
   var del = e.target.closest("[data-del]");
   if (del) {
     if (!confirm("Remove this photo?")) return;