Increase error correction level

CNAME

@@ -0,0 +1 @@
+onlyqr.0n8.de

README.md

@@ -0,0 +1,18 @@
+# OnlyQR - SVG QR Code Generator
+
+A simplified, SVG-only QR code generator based on QRCode.js. This lightweight library generates clean, scalable SVG QR.
+
+Try it out at [OnlyQR Demo](https://onlyqr.0n8.de).
+
+## Changes from Original QRCode.js
+
+- Removed Canvas and Table rendering methods
+- SVG is now the default and only rendering method
+- Simplified codebase with reduced file size
+- Modern web interface included
+- Automatic sizing based on QR code complexity
+
+## Credits
+
+Based on [QRCode.js by davidshimjs](https://github.com/davidshimjs/qrcodejs)
+

app.js

@@ -0,0 +1,327 @@
+/* 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 optimizeSVG(svg) {
+    // Parse the existing SVG to extract the QR data
+    const uses = svg.querySelectorAll('use');
+    const qrData = [];
+    let maxX = 0, maxY = 0;
+    
+    // Extract positions from use elements
+    uses.forEach(use => {
+      const x = parseInt(use.getAttribute('x') || '0');
+      const y = parseInt(use.getAttribute('y') || '0');
+      if (!qrData[y]) qrData[y] = [];
+      qrData[y][x] = true;
+      maxX = Math.max(maxX, x);
+      maxY = Math.max(maxY, y);
+    });
+    
+    // Get the color from the original template
+    const template = svg.querySelector('#template, rect[id]');
+    const color = template ? template.getAttribute('fill') || '#000' : '#000';
+    
+    // Create optimized SVG
+    const optimizedSVG = createOptimizedSVG(qrData, maxX + 1, maxY + 1, color);
+    
+    // Replace the old SVG with the optimized one
+    svg.parentNode.replaceChild(optimizedSVG, svg);
+    
+    return optimizedSVG;
+  }
+
+  function createOptimizedSVG(qrData, width, height, color) {
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+    svg.setAttribute('viewBox', `0 0 ${width} ${height}`);
+    svg.setAttribute('width', width * 10);
+    svg.setAttribute('height', height * 10);
+    
+    // Create defs section with reusable cell (no fill - will inherit)
+    const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
+    const cellTemplate = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+    cellTemplate.setAttribute('id', 'cell');
+    cellTemplate.setAttribute('width', '1');
+    cellTemplate.setAttribute('height', '1');
+    defs.appendChild(cellTemplate);
+    svg.appendChild(defs);
+    
+    // Create main group with fill color
+    const mainGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    mainGroup.setAttribute('fill', color);
+    svg.appendChild(mainGroup);
+    
+    // Create optimized structure
+    for (let y = 0; y < height; y++) {
+      if (!qrData[y]) continue;
+      
+      // Find consecutive cells and group them
+      let x = 0;
+      while (x < width) {
+        if (qrData[y][x]) {
+          // Count consecutive cells
+          let consecutiveCount = 1;
+          while (x + consecutiveCount < width && qrData[y][x + consecutiveCount]) {
+            consecutiveCount++;
+          }
+          
+          if (consecutiveCount > 1) {
+            // Use a single rect for multiple consecutive cells (inherits fill from group)
+            const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+            rect.setAttribute('x', x);
+            rect.setAttribute('y', y);
+            rect.setAttribute('width', consecutiveCount);
+            rect.setAttribute('height', '1');
+            mainGroup.appendChild(rect);
+          } else {
+            // Use individual use elements for single cells (inherits fill from group)
+            const use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
+            use.setAttribute('href', '#cell');
+            use.setAttribute('x', x);
+            use.setAttribute('y', y);
+            mainGroup.appendChild(use);
+          }
+          
+          x += consecutiveCount;
+        } else {
+          x++;
+        }
+      }
+    }
+    
+    return svg;
+  }
+
+  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);
+    
+    // Wait for the QR code to be generated, then optimize it
+    setTimeout(() => {
+      const svg = document.querySelector('#qrcode svg');
+      if (svg) {
+        optimizeSVG(svg);
+      }
+    }, 10);
+  }
+
+  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;
+    }
+    
+    // Trigger glitter effect on QR code
+    triggerQRGlitterEffect();
+    
+    // Small delay to show the effect before download
+    setTimeout(function() {
+      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);
+    }, 300);
+  }
+
+  function getRandomGlitterColor() {
+    const colors = [
+      '#FFD700', // Gold
+      '#FF69B4', // Hot Pink
+      '#00CED1', // Dark Turquoise
+      '#FF6347', // Tomato
+      '#9370DB', // Medium Purple
+      '#32CD32', // Lime Green
+      '#FF1493', // Deep Pink
+      '#00BFFF', // Deep Sky Blue
+      '#FFA500', // Orange
+      '#DA70D6', // Orchid
+      '#ADFF2F', // Green Yellow
+      '#FF4500', // Orange Red
+      '#7B68EE', // Medium Slate Blue
+      '#00FF7F', // Spring Green
+      '#DC143C', // Crimson
+      '#40E0D0'  // Turquoise
+    ];
+    return colors[Math.floor(Math.random() * colors.length)];
+  }
+
+  function createGlitter(container) {
+    const glitter = document.createElement('div');
+    glitter.className = 'glitter';
+    
+    // Random position within button
+    const x = Math.random() * container.offsetWidth;
+    const y = Math.random() * container.offsetHeight;
+    
+    glitter.style.left = x + 'px';
+    glitter.style.top = y + 'px';
+    
+    // Random color
+    const color = getRandomGlitterColor();
+    glitter.style.background = color;
+    glitter.style.boxShadow = `0 0 6px ${color}, 0 0 12px ${color}, 0 0 18px ${color}`;
+    
+    // Random animation type
+    const animations = ['anim1', 'anim2', 'anim3'];
+    const randomAnim = animations[Math.floor(Math.random() * animations.length)];
+    glitter.classList.add(randomAnim);
+    
+    // Random delay
+    glitter.style.animationDelay = Math.random() * 0.5 + 's';
+    
+    container.appendChild(glitter);
+    
+    // Remove glitter after animation
+    setTimeout(() => {
+      if (glitter.parentNode) {
+        glitter.parentNode.removeChild(glitter);
+      }
+    }, 2000);
+  }
+
+  function startGlitterEffect(button) {
+    const container = button.querySelector('.glitter-container');
+    if (!container) return;
+    
+    // Create multiple glitter particles
+    for (let i = 0; i < 3; i++) {
+      setTimeout(() => createGlitter(container), i * 200);
+    }
+  }
+
+  function createQRGlitter(container) {
+    const glitter = document.createElement('div');
+    glitter.className = 'qr-glitter';
+    
+    // Random position within QR code area
+    const x = Math.random() * container.offsetWidth;
+    const y = Math.random() * container.offsetHeight;
+    
+    glitter.style.left = x + 'px';
+    glitter.style.top = y + 'px';
+    
+    // Random color
+    const color = getRandomGlitterColor();
+    glitter.style.background = color;
+    glitter.style.boxShadow = `0 0 8px ${color}, 0 0 16px ${color}, 0 0 24px ${color}`;
+    
+    // Random animation type
+    const animations = ['anim1', 'anim2', 'anim3'];
+    const randomAnim = animations[Math.floor(Math.random() * animations.length)];
+    glitter.classList.add(randomAnim);
+    
+    // Random delay
+    glitter.style.animationDelay = Math.random() * 0.3 + 's';
+    
+    container.appendChild(glitter);
+    
+    // Remove glitter after animation
+    setTimeout(() => {
+      if (glitter.parentNode) {
+        glitter.parentNode.removeChild(glitter);
+      }
+    }, 2500);
+  }
+
+  function triggerQRGlitterEffect() {
+    const qrcode = document.getElementById('qrcode');
+    let container = qrcode.querySelector('.qr-glitter-container');
+    
+    // Create container if it doesn't exist
+    if (!container) {
+      container = document.createElement('div');
+      container.className = 'qr-glitter-container';
+      qrcode.appendChild(container);
+    }
+    
+    // Create multiple waves of glitter
+    for (let wave = 0; wave < 3; wave++) {
+      setTimeout(() => {
+        for (let i = 0; i < 5; i++) {
+          setTimeout(() => createQRGlitter(container), i * 100);
+        }
+      }, wave * 300);
+    }
+  }
+
+  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");
+
+    // Create glitter container for download button
+    const glitterContainer = document.createElement('div');
+    glitterContainer.className = 'glitter-container';
+    downloadButton.appendChild(glitterContainer);
+
+    // 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 events
+    downloadButton.addEventListener('click', downloadSVG);
+    
+    // Glitter effect on hover
+    let glitterInterval;
+    downloadButton.addEventListener('mouseenter', function() {
+      startGlitterEffect(downloadButton);
+      glitterInterval = setInterval(() => {
+        startGlitterEffect(downloadButton);
+      }, 600);
+    });
+    
+    downloadButton.addEventListener('mouseleave', function() {
+      if (glitterInterval) {
+        clearInterval(glitterInterval);
+        glitterInterval = null;
+      }
+    });
+  }
+
+  // Initialize when DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initializeApp);
+  } else {
+    initializeApp();
+  }
+})();

index.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <title>QR Code Generator</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
+  <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+  <div class="container">
+    <h1>QR Code Generator</h1>
+
+    <div class="input-group">
+      <input id="text" type="text" value="" placeholder="Enter text to generate ..." autofocus />
+      <input id="color" type="color" value="#004c93" title="Choose QR code color" />
+      <button id="download">Download SVG</button>
+    </div>
+
+    <div class="qr-container">
+      <div id="qrcode"></div>
+    </div>
+
+    <div class="footer-credits">
+      Made by <a href="https://github.com/BerriJ" target="_blank">BerriJ</a>
+      with ❤️ using <a href="https://github.com/davidshimjs/qrcodejs" target="_blank">QRCode.js.</a><br>
+      <a href="https://git.0n8.de/BerriJ/onlyqr" target="_blank" class="source-link">
+        Source:
+        <svg width="16" height="16" viewBox="0 0 640 640" style="fill:#609926;" aria-hidden="true">
+          <path d="M622.7,149.8c-4.1-4.1-9.6-4-9.6-4s-117.2,6.6-177.9,8c-13.3,0.3-26.5,0.6-39.6,0.7c0,39.1,0,78.2,0,117.2
+                    c-5.5-2.6-11.1-5.3-16.6-7.9c0-36.4-0.1-109.2-0.1-109.2c-29,0.4-89.2-2.2-89.2-2.2s-141.4-7.1-156.8-8.5
+                    c-9.8-0.6-22.5-2.1-39,1.5c-8.7,1.8-33.5,7.4-53.8,26.9C-4.9,212.4,6.6,276.2,8,285.8c1.7,11.7,6.9,44.2,31.7,72.5
+                    c45.8,56.1,144.4,54.8,144.4,54.8s12.1,28.9,30.6,55.5c25,33.1,50.7,58.9,75.7,62c63,0,188.9-0.1,188.9-0.1s12,0.1,28.3-10.3
+                    c14-8.5,26.5-23.4,26.5-23.4s12.9-13.8,30.9-45.3c5.5-9.7,10.1-19.1,14.1-28c0,0,55.2-117.1,55.2-231.1
+                    C633.2,157.9,624.7,151.8,622.7,149.8z M125.6,353.9c-25.9-8.5-36.9-18.7-36.9-18.7S69.6,321.8,60,295.4
+                    c-16.5-44.2-1.4-71.2-1.4-71.2s8.4-22.5,38.5-30c13.8-3.7,31-3.1,31-3.1s7.1,59.4,15.7,94.2c7.2,29.2,24.8,77.7,24.8,77.7
+                    S142.5,359.9,125.6,353.9z M425.9,461.5c0,0-6.1,14.5-19.6,15.4c-5.8,0.4-10.3-1.2-10.3-1.2s-0.3-0.1-5.3-2.1l-112.9-55
+                    c0,0-10.9-5.7-12.8-15.6c-2.2-8.1,2.7-18.1,2.7-18.1L322,273c0,0,4.8-9.7,12.2-13c0.6-0.3,2.3-1,4.5-1.5c8.1-2.1,18,2.8,18,2.8
+                    l110.7,53.7c0,0,12.6,5.7,15.3,16.2c1.9,7.4-0.5,14-1.8,17.2C474.6,363.8,425.9,461.5,425.9,461.5z" />
+          <path d="M326.8,380.1c-8.2,0.1-15.4,5.8-17.3,13.8c-1.9,8,2,16.3,9.1,20c7.7,4,17.5,1.8,22.7-5.4
+                    c5.1-7.1,4.3-16.9-1.8-23.1l24-49.1c1.5,0.1,3.7,0.2,6.2-0.5c4.1-0.9,7.1-3.6,7.1-3.6c4.2,1.8,8.6,3.8,13.2,6.1
+                    c4.8,2.4,9.3,4.9,13.4,7.3c0.9,0.5,1.8,1.1,2.8,1.9c1.6,1.3,3.4,3.1,4.7,5.5c1.9,5.5-1.9,14.9-1.9,14.9
+                    c-2.3,7.6-18.4,40.6-18.4,40.6c-8.1-0.2-15.3,5-17.7,12.5c-2.6,8.1,1.1,17.3,8.9,21.3c7.8,4,17.4,1.7,22.5-5.3
+                    c5-6.8,4.6-16.3-1.1-22.6c1.9-3.7,3.7-7.4,5.6-11.3c5-10.4,13.5-30.4,13.5-30.4c0.9-1.7,5.7-10.3,2.7-21.3
+                    c-2.5-11.4-12.6-16.7-12.6-16.7c-12.2-7.9-29.2-15.2-29.2-15.2s0-4.1-1.1-7.1c-1.1-3.1-2.8-5.1-3.9-6.3c4.7-9.7,9.4-19.3,14.1-29
+                    c-4.1-2-8.1-4-12.2-6.1c-4.8,9.8-9.7,19.7-14.5,29.5c-6.7-0.1-12.9,3.5-16.1,9.4c-3.4,6.3-2.7,14.1,1.9,19.8
+                    C343.2,346.5,335,363.3,326.8,380.1z" />
+        </svg>
+      </a>
+    </div>
+  </div>
+
+  <script src="jquery.min.js"></script>
+  <script src="qrcode.js"></script>
+  <script src="app.js"></script>
+</body>
+
+</html>

qrcode.js

@@ -183,8 +183,6 @@ var QRCode;
 			var _htOption = this._htOption;
 			var _el = this._el;
 			var nCount = oQRCode.getModuleCount();
-			var nWidth = Math.floor(_htOption.width / nCount);
-			var nHeight = Math.floor(_htOption.height / nCount);
 
 			this.clear();
 
@@ -195,11 +193,11 @@ var QRCode;
 				return el;
 			}
 
-			var svg = makeSVG("svg" , {'viewBox': '0 0 ' + String(nCount) + " " + String(nCount), 'width': '100%', 'height': '100%', 'fill': _htOption.colorLight});
+      var svg = makeSVG("svg", {
+        'viewBox': '0 0 ' + String(nCount) + " " + String(nCount), 'width': String(10 * nCount), 'height': String(10 * nCount)
+      });
 			svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");
 			_el.appendChild(svg);
-
-			svg.appendChild(makeSVG("rect", {"fill": _htOption.colorLight, "width": "100%", "height": "100%"}));
 			svg.appendChild(makeSVG("rect", {"fill": _htOption.colorDark, "width": "1", "height": "1", "id": "template"}));
 
 			for (var row = 0; row < nCount; row++) {
@@ -212,6 +210,7 @@ var QRCode;
 				}
 			}
 		};
+		
 		Drawing.prototype.clear = function () {
 			while (this._el.hasChildNodes())
 				this._el.removeChild(this._el.lastChild);
@@ -219,244 +218,10 @@ var QRCode;
 		return Drawing;
 	})();
 
-	var useSVG = document.documentElement.tagName.toLowerCase() === "svg";
+	var useSVG = true;
 
-	// Drawing in DOM by using Table tag
+	// Always use SVG rendering by default
-	var Drawing = useSVG ? svgDrawer : !_isSupportCanvas() ? (function () {
+	var Drawing = svgDrawer;
-		var Drawing = function (el, htOption) {
-			this._el = el;
-			this._htOption = htOption;
-		};
-			
-		/**
-		 * Draw the QRCode
-		 * 
-		 * @param {QRCode} oQRCode
-		 */
-		Drawing.prototype.draw = function (oQRCode) {
-            var _htOption = this._htOption;
-            var _el = this._el;
-			var nCount = oQRCode.getModuleCount();
-			var nWidth = Math.floor(_htOption.width / nCount);
-			var nHeight = Math.floor(_htOption.height / nCount);
-			var aHTML = ['<table style="border:0;border-collapse:collapse;">'];
-			
-			for (var row = 0; row < nCount; row++) {
-				aHTML.push('<tr>');
-				
-				for (var col = 0; col < nCount; col++) {
-					aHTML.push('<td style="border:0;border-collapse:collapse;padding:0;margin:0;width:' + nWidth + 'px;height:' + nHeight + 'px;background-color:' + (oQRCode.isDark(row, col) ? _htOption.colorDark : _htOption.colorLight) + ';"></td>');
-				}
-				
-				aHTML.push('</tr>');
-			}
-			
-			aHTML.push('</table>');
-			_el.innerHTML = aHTML.join('');
-			
-			// Fix the margin values as real size.
-			var elTable = _el.childNodes[0];
-			var nLeftMarginTable = (_htOption.width - elTable.offsetWidth) / 2;
-			var nTopMarginTable = (_htOption.height - elTable.offsetHeight) / 2;
-			
-			if (nLeftMarginTable > 0 && nTopMarginTable > 0) {
-				elTable.style.margin = nTopMarginTable + "px " + nLeftMarginTable + "px";	
-			}
-		};
-		
-		/**
-		 * Clear the QRCode
-		 */
-		Drawing.prototype.clear = function () {
-			this._el.innerHTML = '';
-		};
-		
-		return Drawing;
-	})() : (function () { // Drawing in Canvas
-		function _onMakeImage() {
-			this._elImage.src = this._elCanvas.toDataURL("image/png");
-			this._elImage.style.display = "block";
-			this._elCanvas.style.display = "none";			
-		}
-		
-		// Android 2.1 bug workaround
-		// http://code.google.com/p/android/issues/detail?id=5141
-		if (this._android && this._android <= 2.1) {
-	    	var factor = 1 / window.devicePixelRatio;
-	        var drawImage = CanvasRenderingContext2D.prototype.drawImage; 
-	    	CanvasRenderingContext2D.prototype.drawImage = function (image, sx, sy, sw, sh, dx, dy, dw, dh) {
-	    		if (("nodeName" in image) && /img/i.test(image.nodeName)) {
-		        	for (var i = arguments.length - 1; i >= 1; i--) {
-		            	arguments[i] = arguments[i] * factor;
-		        	}
-	    		} else if (typeof dw == "undefined") {
-	    			arguments[1] *= factor;
-	    			arguments[2] *= factor;
-	    			arguments[3] *= factor;
-	    			arguments[4] *= factor;
-	    		}
-	    		
-	        	drawImage.apply(this, arguments); 
-	    	};
-		}
-		
-		/**
-		 * Check whether the user's browser supports Data URI or not
-		 * 
-		 * @private
-		 * @param {Function} fSuccess Occurs if it supports Data URI
-		 * @param {Function} fFail Occurs if it doesn't support Data URI
-		 */
-		function _safeSetDataURI(fSuccess, fFail) {
-            var self = this;
-            self._fFail = fFail;
-            self._fSuccess = fSuccess;
-
-            // Check it just once
-            if (self._bSupportDataURI === null) {
-                var el = document.createElement("img");
-                var fOnError = function() {
-                    self._bSupportDataURI = false;
-
-                    if (self._fFail) {
-                        self._fFail.call(self);
-                    }
-                };
-                var fOnSuccess = function() {
-                    self._bSupportDataURI = true;
-
-                    if (self._fSuccess) {
-                        self._fSuccess.call(self);
-                    }
-                };
-
-                el.onabort = fOnError;
-                el.onerror = fOnError;
-                el.onload = fOnSuccess;
-                el.src = "data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="; // the Image contains 1px data.
-                return;
-            } else if (self._bSupportDataURI === true && self._fSuccess) {
-                self._fSuccess.call(self);
-            } else if (self._bSupportDataURI === false && self._fFail) {
-                self._fFail.call(self);
-            }
-		};
-		
-		/**
-		 * Drawing QRCode by using canvas
-		 * 
-		 * @constructor
-		 * @param {HTMLElement} el
-		 * @param {Object} htOption QRCode Options 
-		 */
-		var Drawing = function (el, htOption) {
-    		this._bIsPainted = false;
-    		this._android = _getAndroid();
-		
-			this._htOption = htOption;
-			this._elCanvas = document.createElement("canvas");
-			this._elCanvas.width = htOption.width;
-			this._elCanvas.height = htOption.height;
-			el.appendChild(this._elCanvas);
-			this._el = el;
-			this._oContext = this._elCanvas.getContext("2d");
-			this._bIsPainted = false;
-			this._elImage = document.createElement("img");
-			this._elImage.alt = "Scan me!";
-			this._elImage.style.display = "none";
-			this._el.appendChild(this._elImage);
-			this._bSupportDataURI = null;
-		};
-			
-		/**
-		 * Draw the QRCode
-		 * 
-		 * @param {QRCode} oQRCode 
-		 */
-		Drawing.prototype.draw = function (oQRCode) {
-            var _elImage = this._elImage;
-            var _oContext = this._oContext;
-            var _htOption = this._htOption;
-            
-			var nCount = oQRCode.getModuleCount();
-			var nWidth = _htOption.width / nCount;
-			var nHeight = _htOption.height / nCount;
-			var nRoundedWidth = Math.round(nWidth);
-			var nRoundedHeight = Math.round(nHeight);
-
-			_elImage.style.display = "none";
-			this.clear();
-			
-			for (var row = 0; row < nCount; row++) {
-				for (var col = 0; col < nCount; col++) {
-					var bIsDark = oQRCode.isDark(row, col);
-					var nLeft = col * nWidth;
-					var nTop = row * nHeight;
-					_oContext.strokeStyle = bIsDark ? _htOption.colorDark : _htOption.colorLight;
-					_oContext.lineWidth = 1;
-					_oContext.fillStyle = bIsDark ? _htOption.colorDark : _htOption.colorLight;					
-					_oContext.fillRect(nLeft, nTop, nWidth, nHeight);
-					
-					// 안티 앨리어싱 방지 처리
-					_oContext.strokeRect(
-						Math.floor(nLeft) + 0.5,
-						Math.floor(nTop) + 0.5,
-						nRoundedWidth,
-						nRoundedHeight
-					);
-					
-					_oContext.strokeRect(
-						Math.ceil(nLeft) - 0.5,
-						Math.ceil(nTop) - 0.5,
-						nRoundedWidth,
-						nRoundedHeight
-					);
-				}
-			}
-			
-			this._bIsPainted = true;
-		};
-			
-		/**
-		 * Make the image from Canvas if the browser supports Data URI.
-		 */
-		Drawing.prototype.makeImage = function () {
-			if (this._bIsPainted) {
-				_safeSetDataURI.call(this, _onMakeImage);
-			}
-		};
-			
-		/**
-		 * Return whether the QRCode is painted or not
-		 * 
-		 * @return {Boolean}
-		 */
-		Drawing.prototype.isPainted = function () {
-			return this._bIsPainted;
-		};
-		
-		/**
-		 * Clear the QRCode
-		 */
-		Drawing.prototype.clear = function () {
-			this._oContext.clearRect(0, 0, this._elCanvas.width, this._elCanvas.height);
-			this._bIsPainted = false;
-		};
-		
-		/**
-		 * @private
-		 * @param {Number} nNumber
-		 */
-		Drawing.prototype.round = function (nNumber) {
-			if (!nNumber) {
-				return nNumber;
-			}
-			
-			return Math.floor(nNumber * 1000) / 1000;
-		};
-		
-		return Drawing;
-	})();
 
 	/**
 	 * Get the type by string length
@@ -529,7 +294,6 @@ var QRCode;
 	 * @param {Number} [vOption.width=256]
 	 * @param {Number} [vOption.height=256]
 	 * @param {String} [vOption.colorDark="#000000"]
-	 * @param {String} [vOption.colorLight="#ffffff"]
 	 * @param {QRCode.CorrectLevel} [vOption.correctLevel=QRCode.CorrectLevel.H] [L|M|Q|H] 
 	 */
 	QRCode = function (el, vOption) {
@@ -538,7 +302,6 @@ var QRCode;
 			height : 256,
 			typeNumber : 4,
 			colorDark : "#000000",
-			colorLight : "#ffffff",
 			correctLevel : QRErrorCorrectLevel.H
 		};
 		
@@ -559,14 +322,9 @@ var QRCode;
 			el = document.getElementById(el);
 		}
 		
-		if (this._htOption.useSVG) {
-			Drawing = svgDrawer;
-		}
-		
-		this._android = _getAndroid();
 		this._el = el;
 		this._oQRCode = null;
-		this._oDrawing = new Drawing(this._el, this._htOption);
+		this._oDrawing = new svgDrawer(this._el, this._htOption);
 		
 		if (this._htOption.text) {
 			this.makeCode(this._htOption.text);	
@@ -584,20 +342,6 @@ var QRCode;
 		this._oQRCode.make();
 		this._el.title = sText;
 		this._oDrawing.draw(this._oQRCode);
-		this.makeImage();
-	};
-	
-	/**
-	 * Make the Image from Canvas element
-	 * - It occurs automatically
-	 * - Android below 3 doesn't support Data-URI spec.
-	 * 
-	 * @private
-	 */
-	QRCode.prototype.makeImage = function () {
-		if (typeof this._oDrawing.makeImage == "function" && (!this._android || this._android >= 3)) {
-			this._oDrawing.makeImage();
-		}
 	};
 	
 	/**

styles.css

@@ -0,0 +1,335 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.container {
+  background: white;
+  border-radius: 20px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+  padding: 40px;
+  max-width: 600px;
+  width: 100%;
+  text-align: center;
+}
+
+h1 {
+  color: #333;
+  margin-bottom: 30px;
+  font-size: 2.5em;
+  font-weight: 300;
+}
+
+.input-group {
+  margin-bottom: 25px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+  align-items: center;
+  justify-content: center;
+}
+
+#text {
+  flex: 1;
+  min-width: 250px;
+  padding: 15px 20px;
+  border: 2px solid #e1e8ed;
+  border-radius: 25px;
+  font-size: 16px;
+  outline: none;
+  transition: border-color 0.3s ease;
+}
+
+#text:focus {
+  border-color: #4a5568;
+}
+
+#color {
+  width: 60px;
+  height: 50px;
+  border: none;
+  border-radius: 25px;
+  cursor: pointer;
+  outline: none;
+}
+
+#download {
+  background: linear-gradient(45deg, #4a5568, #2d3748);
+  color: white;
+  border: none;
+  padding: 15px 25px;
+  border-radius: 25px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+#download:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+}
+
+.glitter-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  overflow: hidden;
+  border-radius: 25px;
+}
+
+.glitter {
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  pointer-events: none;
+  opacity: 0;
+}
+
+@keyframes glitter1 {
+  0% {
+    opacity: 0;
+    transform: translateY(0) translateX(0) scale(0);
+  }
+
+  50% {
+    opacity: 1;
+    transform: translateY(-20px) translateX(10px) scale(1);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateY(-40px) translateX(20px) scale(0);
+  }
+}
+
+@keyframes glitter2 {
+  0% {
+    opacity: 0;
+    transform: translateY(0) translateX(0) scale(0) rotate(0deg);
+  }
+
+  50% {
+    opacity: 1;
+    transform: translateY(-15px) translateX(-15px) scale(1.2) rotate(180deg);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateY(-30px) translateX(-30px) scale(0) rotate(360deg);
+  }
+}
+
+@keyframes glitter3 {
+  0% {
+    opacity: 0;
+    transform: translateY(0) translateX(0) scale(0);
+  }
+
+  30% {
+    opacity: 1;
+    transform: translateY(-10px) translateX(5px) scale(0.8);
+  }
+
+  70% {
+    opacity: 1;
+    transform: translateY(-25px) translateX(-5px) scale(1.1);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateY(-35px) translateX(-10px) scale(0);
+  }
+}
+
+.glitter.anim1 {
+  animation: glitter1 1.5s ease-out infinite;
+}
+
+.glitter.anim2 {
+  animation: glitter2 1.8s ease-out infinite;
+}
+
+.glitter.anim3 {
+  animation: glitter3 1.2s ease-out infinite;
+}
+
+.qr-container {
+  margin: 30px 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #f8f9fa;
+  border-radius: 15px;
+  padding: 20px;
+  overflow: visible;
+  position: relative;
+}
+
+#qrcode {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+
+#qrcode svg {
+  max-width: 100%;
+  max-height: none;
+  width: auto;
+  height: auto;
+  border-radius: 10px;
+  background: white;
+  padding: 10px;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+  display: block;
+}
+
+.qr-glitter-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  overflow: visible;
+  z-index: 10;
+}
+
+.qr-glitter {
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  pointer-events: none;
+  opacity: 0;
+}
+
+@keyframes qrGlitter1 {
+  0% {
+    opacity: 0;
+    transform: translateY(0) translateX(0) scale(0);
+  }
+
+  50% {
+    opacity: 1;
+    transform: translateY(-30px) translateX(15px) scale(1);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateY(-60px) translateX(30px) scale(0);
+  }
+}
+
+@keyframes qrGlitter2 {
+  0% {
+    opacity: 0;
+    transform: translateY(0) translateX(0) scale(0) rotate(0deg);
+  }
+
+  50% {
+    opacity: 1;
+    transform: translateY(-25px) translateX(-20px) scale(1.3) rotate(180deg);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateY(-50px) translateX(-40px) scale(0) rotate(360deg);
+  }
+}
+
+@keyframes qrGlitter3 {
+  0% {
+    opacity: 0;
+    transform: translateY(0) translateX(0) scale(0);
+  }
+
+  30% {
+    opacity: 1;
+    transform: translateY(-15px) translateX(8px) scale(0.9);
+  }
+
+  70% {
+    opacity: 1;
+    transform: translateY(-35px) translateX(-8px) scale(1.2);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateY(-55px) translateX(-15px) scale(0);
+  }
+}
+
+.qr-glitter.anim1 {
+  animation: qrGlitter1 2s ease-out;
+}
+
+.qr-glitter.anim2 {
+  animation: qrGlitter2 2.2s ease-out;
+}
+
+.qr-glitter.anim3 {
+  animation: qrGlitter3 1.8s ease-out;
+}
+
+.footer {
+  margin-top: 20px;
+  color: #666;
+  font-size: 14px;
+}
+
+.footer-credits {
+  margin-top: 10px;
+  font-size: 12px;
+  color: #999;
+}
+
+.footer-credits a {
+  color: #667;
+  text-decoration: none;
+}
+
+.source-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+}
+
+@media (max-width: 480px) {
+  .container {
+    padding: 25px;
+    margin: 10px;
+  }
+
+  h1 {
+    font-size: 2em;
+    margin-bottom: 20px;
+  }
+
+  .input-group {
+    flex-direction: column;
+  }
+
+  #text {
+    min-width: 100%;
+  }
+}