diff --git a/index.html b/index.html
index 242124b..3743bfb 100644
--- a/index.html
+++ b/index.html
@@ -127,9 +127,21 @@
+
-
+
+
+
+
+ ERROR: CAPACITY EXCEEDED
+
+ REDUCE TEXT OR
LOWER ECC LEVEL
+
+
+ `;
+ downloadBtn.disabled = true;
+ downloadBtn.textContent = "GENERATION FAILED";
}
}
+ // --- 5. THE COORDINATOR ---
+
+ function handleInput() {
+ console.log("Input detected. Text length:", getDataString().length);
+ const text = getDataString();
+ console.log(text)
+
+ // 1. Instant Feedback
+ updateCapacityGauge(text);
+
+ // 2. Delayed Heavy Lifting
+ clearTimeout(debounceTimer);
+ debounceTimer = setTimeout(() => {
+ generateQR(text);
+ }, 300);
+ }
+
+ // Force Immediate Update (for Config changes)
+ function forceUpdate() {
+ const text = getDataString();
+ updateCapacityGauge(text);
+ generateQR(text);
+ }
+
// --- EVENT LISTENERS ---
- // 1. Inputs triggering update
+ // Config Changes (Require Rebuild)
[optEcc, optSize, optFg, optBg].forEach(el => {
el.addEventListener('input', () => {
+ // Debounce the rebuild slightly
clearTimeout(debounceTimer);
- debounceTimer = setTimeout(createQRInstance, 100);
+ debounceTimer = setTimeout(() => {
+ qrcodeObj = null;
+ forceUpdate();
+ }, 100);
});
});
- // Format Change
- fmtRadios.forEach(r => {
- r.addEventListener('change', updateQR);
- });
+ // Format Change (Instant)
+ fmtRadios.forEach(r => r.addEventListener('change', forceUpdate));
- // Mode Switch
+ // Mode Switch (Instant)
modeSelector.addEventListener('change', (e) => {
const newMode = e.target.value;
document.querySelectorAll('.input-form').forEach(f => f.classList.remove('active'));
document.getElementById(`form-${newMode}`).classList.add('active');
- updateQR();
+ forceUpdate();
});
- // Data Entry
+ // DATA ENTRY (The optimized path)
document.querySelectorAll('.input-form').forEach(form => {
- form.addEventListener('input', () => {
- clearTimeout(debounceTimer);
- debounceTimer = setTimeout(updateQR, 300);
- });
+ form.addEventListener('input', handleInput);
});
- // 2. Download Logic
+ // Download
downloadBtn.addEventListener('click', () => {
const format = getFormat();
-
if (format === 'png') {
- // PNG Download
const img = qrContainer.querySelector('img');
if (img && img.src) {
const link = document.createElement('a');
@@ -213,28 +287,25 @@ document.addEventListener('DOMContentLoaded', () => {
link.download = `qr-manifesto-${Date.now()}.png`;
document.body.appendChild(link);
link.click();
- document.body.removeChild(link);
+ link.remove();
}
} else {
- // SVG Download
const svgEl = qrContainer.querySelector('svg');
if (svgEl) {
- // Serialize the SVG DOM to a string
const serializer = new XMLSerializer();
const svgString = serializer.serializeToString(svgEl);
const blob = new Blob([svgString], {type: 'image/svg+xml;charset=utf-8'});
const url = URL.createObjectURL(blob);
-
const link = document.createElement('a');
link.href = url;
link.download = `qr-manifesto-${Date.now()}.svg`;
document.body.appendChild(link);
link.click();
- document.body.removeChild(link);
+ link.remove();
}
}
});
- // Init
- createQRInstance();
+ // Initial Start
+ forceUpdate();
});
diff --git a/style.css b/style.css
index 4ce8b91..67c844e 100644
--- a/style.css
+++ b/style.css
@@ -445,3 +445,26 @@ input[type="radio"]:checked {
input[type="radio"]:focus {
outline: none;
}
+
+/* In-Box Error Message */
+.qr-error-msg {
+ color: red;
+ font-family: var(--font-mono);
+ font-weight: 700;
+ text-align: center;
+ text-transform: uppercase;
+ font-size: 0.9rem;
+ line-height: 1.4;
+
+ /* Brutalist Box inside the Box */
+ border: 2px solid red;
+ padding: 1rem;
+ background-color: #fff;
+ width: 80%; /* Don't touch the edges */
+}
+
+/* Ensure the container keeps its shape even when showing error */
+#qr-container {
+ /* Existing styles... */
+ position: relative; /* Just in case */
+}