diff --git a/app.js b/app.js
new file mode 100644
index 0000000..3c5dc63
--- /dev/null
+++ b/app.js
@@ -0,0 +1,80 @@
+/* filepath: /home/jonathan/git/onlyqr/app.js */
+(function() {
+ 'use strict';
+
+ // Initialize QR code generator
+ var qrcode = new QRCode(document.getElementById("qrcode"), {
+ colorDark: "#004c93"
+ });
+
+ var debounceTimer;
+
+ function makeCode() {
+ var elText = document.getElementById("text");
+ var elColor = document.getElementById("color");
+ var text = elText.value || "https://git.0n8.de/BerriJ/onlyqr";
+
+ qrcode._htOption.colorDark = elColor.value;
+ qrcode.makeCode(text);
+ }
+
+ function debouncedMakeCode() {
+ clearTimeout(debounceTimer);
+ debounceTimer = setTimeout(makeCode, 20);
+ }
+
+ function downloadSVG() {
+ var svg = document.querySelector('#qrcode svg');
+ if (!svg) {
+ alert('No QR code to download. Please generate a QR code first.');
+ return;
+ }
+
+ var svgData = new XMLSerializer().serializeToString(svg);
+ var svgBlob = new Blob([svgData], { type: "image/svg+xml;charset=utf-8" });
+ var svgUrl = URL.createObjectURL(svgBlob);
+
+ var downloadLink = document.createElement("a");
+ downloadLink.href = svgUrl;
+ downloadLink.download = "qrcode.svg";
+ document.body.appendChild(downloadLink);
+ downloadLink.click();
+ document.body.removeChild(downloadLink);
+ URL.revokeObjectURL(svgUrl);
+ }
+
+ function initializeApp() {
+ // Generate initial QR code
+ makeCode();
+
+ // Focus the input field
+ document.getElementById("text").focus();
+
+ // Set up event listeners
+ var textInput = document.getElementById("text");
+ var colorInput = document.getElementById("color");
+ var downloadButton = document.getElementById("download");
+
+ // Text input events
+ textInput.addEventListener('input', debouncedMakeCode);
+ textInput.addEventListener('blur', makeCode);
+ textInput.addEventListener('keydown', function(e) {
+ if (e.keyCode === 13) {
+ makeCode();
+ }
+ });
+
+ // Color input events
+ colorInput.addEventListener('change', makeCode);
+
+ // Download button event
+ downloadButton.addEventListener('click', downloadSVG);
+ }
+
+ // Initialize when DOM is ready
+ if (document.readyState === 'loading') {
+ document.addEventListener('DOMContentLoaded', initializeApp);
+ } else {
+ initializeApp();
+ }
+})();
\ No newline at end of file
diff --git a/index.html b/index.html
index 6ed8a2e..12d0a2c 100644
--- a/index.html
+++ b/index.html
@@ -5,148 +5,7 @@
QR Code Generator
-
-
-
+
@@ -154,86 +13,47 @@
QR Code Generator
-
+
-
+
-
-
-
-
+
+
+