Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ const secretInput = document.getElementById('secret-input');
+ const fireButton = document.getElementById('fire-button');
+ const qrSection = document.getElementById('qr-section');
+ const qrCodeDiv = document.getElementById('qr-code');
+
+ fireButton.addEventListener('click', async () => {
+ const secret = secretInput.value.trim();
+ if (!secret) return;
+
+ // Disable input and button
+ secretInput.disabled = true;
+ fireButton.disabled = true;
+
+ try {
+ // Generate QR code
+ const qrCode = await generateQRCode(secret);
+ qrCodeDiv.innerHTML = qrCode;
+ qrSection.classList.add('visible');
+
+ // Clear and disable the input
+ secretInput.value = '';
+ } catch (error) {
+ console.error('Error generating QR code:', error);
+ alert('Failed to generate QR code. Please try again.');
+ }
+ });
+
+ async function generateQRCode(text) {
+ const qrCode = new QRCode(qrCodeDiv, {
+ text: text,
+ width: 200,
+ height: 200,
+ colorDark: "#000000",
+ colorLight: "#ffffff",
+ correctLevel: QRCode.CorrectLevel.H
+ });
+
+ return qrCode._el.innerHTML;
+ }
+
+ // Simple QRCode implementation
+ class QRCode {
+ constructor(element, options) {
+ this._el = element;
+ this._options = options;
+ this._generate();
+ }
+
+ _generate() {
+ const size = this._options.width;
+ const text = this._options.text;
+ const darkColor = this._options.colorDark;
+ const lightColor = this._options.colorLight;
+
+ // Create a simple QR code representation
+ const canvas = document.createElement('canvas');
+ canvas.width = size;
+ canvas.height = size;
+ const ctx = canvas.getContext('2d');
+
+ // Fill background
+ ctx.fillStyle = lightColor;
+ ctx.fillRect(0, 0, size, size);
+
+ // Draw QR code pattern
+ ctx.fillStyle = darkColor;
+ for (let i = 0; i < text.length; i++) {
+ const x = (i % 20) * 10;
+ const y = Math.floor(i / 20) * 10;
+ ctx.fillRect(x, y, 8, 8);
+ }
+
+ this._el.appendChild(canvas);
+ }
+ }
+ });