From c133bea0077304f12cf55f51555784f90fb3fe55 Mon Sep 17 00:00:00 2001
From: "russell@unturf.com" <russell@unturf.com>
Date: Thu, 26 Feb 2026 23:23:00 -0500
Subject: [PATCH] Add click-to-zoom lightbox for diagrams on all pages

---
 eight-forms-of-capital/index.html        |  1 +
 js/diagram-zoom.js                       | 35 ++++++++++++++++++++++++
 let-us-define-a-permacomputer/index.html |  1 +
 single-use-plastics/index.html           |  1 +
 4 files changed, 38 insertions(+)
 create mode 100644 js/diagram-zoom.js

diff --git a/eight-forms-of-capital/index.html b/eight-forms-of-capital/index.html
index 0f530b3..4589b5c 100644
--- a/eight-forms-of-capital/index.html
+++ b/eight-forms-of-capital/index.html
@@ -328,6 +328,7 @@ Diagrams generated from DOT source files included in this repository.
   <center>Russell Ballestrini | unturf. &copy; 2025</center>
 </footer>
 
+<script src="/js/diagram-zoom.js"></script>
 <script src="https://uncloseai.com/uncloseai.js" type="module"></script>
 </body>
 </html>
diff --git a/js/diagram-zoom.js b/js/diagram-zoom.js
new file mode 100644
index 0000000..78242ee
--- /dev/null
+++ b/js/diagram-zoom.js
@@ -0,0 +1,35 @@
+// Click-to-zoom for .diagram img elements
+// Creates a fullscreen overlay with the diagram, click or Escape to close
+(function () {
+  var overlay = document.createElement('div');
+  overlay.id = 'diagram-overlay';
+  overlay.style.cssText =
+    'display:none;position:fixed;top:0;left:0;width:100%;height:100%;' +
+    'background:rgba(0,0,0,0.9);z-index:9999;cursor:zoom-out;' +
+    'justify-content:center;align-items:center;padding:2em;';
+
+  var img = document.createElement('img');
+  img.style.cssText = 'max-width:95%;max-height:95%;object-fit:contain;';
+  overlay.appendChild(img);
+
+  document.body.appendChild(overlay);
+
+  overlay.addEventListener('click', function () {
+    overlay.style.display = 'none';
+  });
+
+  document.addEventListener('keydown', function (e) {
+    if (e.key === 'Escape' && overlay.style.display === 'flex') {
+      overlay.style.display = 'none';
+    }
+  });
+
+  document.querySelectorAll('.diagram img').forEach(function (el) {
+    el.style.cursor = 'zoom-in';
+    el.addEventListener('click', function () {
+      img.src = el.src;
+      img.alt = el.alt;
+      overlay.style.display = 'flex';
+    });
+  });
+})();
diff --git a/let-us-define-a-permacomputer/index.html b/let-us-define-a-permacomputer/index.html
index 36fb1b2..894b6b0 100644
--- a/let-us-define-a-permacomputer/index.html
+++ b/let-us-define-a-permacomputer/index.html
@@ -322,6 +322,7 @@ something, you are likely clicking a link!
   <script src="https://dohliam.github.io/dropin-minimal-css/switcher.js" type="text/javascript"></script>
   -->
 
+<script src="/js/diagram-zoom.js"></script>
 <script src="https://uncloseai.com/uncloseai.js" type="module"></script>
 </body>
 </html>
diff --git a/single-use-plastics/index.html b/single-use-plastics/index.html
index 583a7e0..bd08117 100644
--- a/single-use-plastics/index.html
+++ b/single-use-plastics/index.html
@@ -183,6 +183,7 @@ Grow food not lawn. Grow glass not plastic. Grow what cycles.
   <center>Russell Ballestrini | unturf. &copy; 2025</center>
 </footer>
 
+<script src="/js/diagram-zoom.js"></script>
 <script src="https://uncloseai.com/uncloseai.js" type="module"></script>
 </body>
 </html>