From 5b8583cf85f9c15bd363c697f9b65b6eb4786b3c Mon Sep 17 00:00:00 2001
From: Alexander Wainwright <code@figtree.dev>
Date: Thu, 18 Dec 2025 19:13:50 +1000
Subject: [PATCH] Add resolution indicator

---
 index.html | 5 ++++-
 script.js  | 3 +++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 8d02f37..2ee70bc 100644
--- a/index.html
+++ b/index.html
@@ -140,7 +140,10 @@
 
         <section class="pane preview-pane">
             <div class="sticky-wrapper">
-
+                <div style="display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:0.5rem;">
+                    <span style="font-family:var(--font-mono); font-weight:700; font-size:0.8rem;">PREVIEW</span>
+                    <span id="resolution-display" style="font-family:var(--font-mono); font-size:0.7rem; opacity:0.6;">256 x 256 px</span>
+                </div>
                 <div id="qr-container"> </div>
 
                 <button id="btn-download" disabled>DOWNLOAD PNG</button>
diff --git a/script.js b/script.js
index ed7e292..d315532 100644
--- a/script.js
+++ b/script.js
@@ -160,6 +160,9 @@ document.addEventListener('DOMContentLoaded', () => {
         if (size < 64) size = 64;
         if (size > 4000) size = 4000;
 
+        const resDisplay = document.getElementById('resolution-display');
+        if (resDisplay) resDisplay.textContent = `${size} x ${size} px`;
+
         try {
             const instance = new QRCode(qrContainer, {
                 text: textData,