feat: add qr scanner and reader

index.html

@@ -16,6 +16,7 @@
     <meta property="og:image" content="https://qr-generator.muathye.com/icon-512x512.png">
     <title>QR Code Generator - Free QR Code Generator Online</title>
     <link href="tailwind.min.css" rel="stylesheet">
+    <script src="html5-qrcode.min.js"></script>
     <link rel="manifest" href="manifest.json">
     <script type="application/ld+json">
         {
@@ -43,22 +44,35 @@
             Powered by <a href="https://muathye.com" target="_blank"
                 class="text-blue-500 hover:underline">muathye.com</a>
         </p>
-        <textarea  id="text-input" class="w-full p-2 mb-4 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Enter text to generate QR code"></textarea>
+        <textarea id="text-input"
+            class="w-full p-2 mb-4 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
+            placeholder="Enter text to generate QR code"></textarea>
 
         <!-- Color Pickers -->
         <div class="mb-4 flex items-center space-x-4">
             <div class="flex">
                 <label for="foreground-color" class="inilne mr-1 text-gray-700">Foreground Color:</label>
-                <input type="color" id="foreground-color" value="#000000" class="inline p-1 border border-gray-300 rounded">
+                <input type="color" id="foreground-color" value="#000000"
+                    class="inline p-1 border border-gray-300 rounded">
             </div>
             <div class="flex">
                 <label for="background-color" class="inilne mr-1 text-gray-700">Background Color:</label>
-                <input type="color" id="background-color" value="#FFFFFF" class="inline p-1 border border-gray-300 rounded">
+                <input type="color" id="background-color" value="#FFFFFF"
+                    class="inline p-1 border border-gray-300 rounded">
             </div>
         </div>
         <button id="generate-btn"
             class="text-gray-900 bg-gradient-to-r from-red-200 via-red-300 to-yellow-200 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-red-100 dark:focus:ring-red-400 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2 w-full mb-4">Generate
             QR Code</button>
+        <button id="scan-qr-btn"
+            class="text-white bg-blue-500 hover:bg-blue-700 font-medium rounded-lg text-sm px-5 py-2.5 text-center w-full mb-4">
+            Scan QR Code
+        </button>
+        <input type="file" id="qr-file" accept="image/*" class="w-full mb-4" value="Or upload QR to scan">
+
+        <div id="qr-reader" style="width: 100%; display: none;"></div>
+        <p id="qr-result" class="text-center text-sm text-gray-700 mt-2"></p>
+
         <div id="qr-container" class="flex justify-center mb-4">
             <canvas id="qr-code" class="mt-4"></canvas>
         </div>
@@ -96,7 +110,7 @@
                 });
         }
     </script>
-    
+
 </body>
 
 </html>