Increase error correction level

.gitignore

@@ -1,4 +0,0 @@
-.DS_Store
-
-.idea
-.project

CNAME

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

README.md

@@ -1,46 +1,18 @@
-# QRCode.js
-QRCode.js is javascript library for making QRCode. QRCode.js supports Cross-browser with HTML5 Canvas and table tag in DOM.
-QRCode.js has no dependencies.
+# OnlyQR - SVG QR Code Generator
 
-## Basic Usages
-```
-<div id="qrcode"></div>
-<script type="text/javascript">
-new QRCode(document.getElementById("qrcode"), "http://jindo.dev.naver.com/collie");
-</script>
-```
+A simplified, SVG-only QR code generator based on QRCode.js. This lightweight library generates clean, scalable SVG QR.
 
-or with some options
+Try it out at [OnlyQR Demo](https://onlyqr.0n8.de).
 
-```
-<div id="qrcode"></div>
-<script type="text/javascript">
-var qrcode = new QRCode(document.getElementById("qrcode"), {
-	text: "http://jindo.dev.naver.com/collie",
-	width: 128,
-	height: 128,
-	colorDark : "#000000",
-	colorLight : "#ffffff",
-	correctLevel : QRCode.CorrectLevel.H
-});
-</script>
-```
+## Changes from Original QRCode.js
 
-and you can use some methods
+- 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
 
-```
-qrcode.clear(); // clear the code.
-qrcode.makeCode("http://naver.com"); // make another code.
-```
+## Credits
 
-## Browser Compatibility
-IE6~10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile, ETC.
-
-## License
-MIT License
-
-## Contact
-twitter @davidshimjs
-
-[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/davidshimjs/qrcodejs/trend.png)](https://bitdeli.com/free "Bitdeli Badge")
+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-svg.html

@@ -1,229 +0,0 @@
-<!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" />
-  <script type="text/javascript" src="jquery.min.js"></script>
-  <script type="text/javascript" src="qrcode.js"></script>
-  <style>
-    * {
-      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;
-    }
-
-    #download:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
-    }
-
-    .qr-container {
-      margin: 30px 0;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      background: #f8f9fa;
-      border-radius: 15px;
-      padding: 20px;
-      overflow: visible;
-    }
-
-    #qrcode {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-
-    #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;
-    }
-
-    .footer {
-      margin-top: 20px;
-      color: #666;
-      font-size: 14px;
-    }
-
-    @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%;
-      }
-    }
-  </style>
-</head>
-
-<body>
-  <div class="container">
-    <h1>QR Code Generator</h1>
-
-    <div class="input-group">
-      <input id="text" type="text" value="https://git.0n8.de/BerriJ/onlyqr"
-        placeholder="Enter text or URL to generate QR code" />
-      <input id="color" type="color" value="#004c93" title="Choose QR code color" />
-      <button id="download" onclick="downloadSVG()">Download SVG</button>
-    </div>
-
-    <div class="qr-container">
-      <div id="qrcode"></div>
-    </div>
-
-    <div class="footer">
-      Enter any text or URL above to generate a QR code
-    </div>
-
-    <div class="footer" style="margin-top: 10px; font-size: 12px; color: #999;">
-      Made with ❤️ using <a href="https://github.com/davidshimjs/qrcodejs" target="_blank"
-        style="color: #667; text-decoration: none;">QRCode.js by davidshimjs</a>
-    </div>
-  </div>
-
-  <script type="text/javascript">
-    var qrcode = new QRCode(document.getElementById("qrcode"), {
-      colorDark: "#004c93"
-    });
-
-    function makeCode() {
-      var elText = document.getElementById("text");
-      var elColor = document.getElementById("color");
-
-      if (!elText.value) {
-        alert("Please enter some text");
-        elText.focus();
-        return;
-      }
-
-      qrcode._htOption.colorDark = elColor.value;
-      qrcode.makeCode(elText.value);
-    }
-
-    makeCode();
-
-    $("#text").
-      on("blur", function () {
-        makeCode();
-      }).
-      on("keydown", function (e) {
-        if (e.keyCode == 13) {
-          makeCode();
-        }
-      });
-
-    $("#color").on("change", function () {
-      makeCode();
-    });
-
-    function downloadSVG() {
-      var svg = document.querySelector('#qrcode svg');
-      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);
-    }
-  </script>
-</body>
-
-</html>

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

@@ -193,11 +193,11 @@ var QRCode;
 				return el;
 			}
 
-			var svg = makeSVG("svg" , {'viewBox': '0 0 ' + String(nCount) + " " + String(nCount), 'width': String(10 * nCount), 'height': String(10 * nCount), '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++) {
@@ -294,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) {
@@ -303,8 +302,7 @@ var QRCode;
 			height : 256,
 			typeNumber : 4,
 			colorDark : "#000000",
-			colorLight : "rgba(0,0,0,0)",
-			correctLevel : QRErrorCorrectLevel.M
+			correctLevel : QRErrorCorrectLevel.H
 		};
 		
 		if (typeof vOption === 'string') {

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%;
+  }
+}