Add files via upload

nota63 · May 15, 2024 · a015cf6 · a015cf6
commit a015cf6
Show file tree

Hide file tree

Showing 3 changed files with 627 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>QR Code Generator</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="container">
+        <h1>QR Code Generator</h1>
+        <input type="text" id="inputText" placeholder="Enter text or URL">
+        <input type="file" id="inputFile" accept="image/*">
+        <button class="button" onclick="generateQR()">
+            <div class="icon">
+                <span class="text-icon hide">Icon</span>
+                <svg
+                  class="css-i6dzq1"
+                  stroke-linejoin="round"
+                  stroke-linecap="round"
+                  fill="none"
+                  stroke-width="2"
+                  stroke="currentColor"
+                  height="24"
+                  width="24"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path>
+                </svg>
+            </div>
+            <span class="title"> Generate QR </span>
+            <div class="padding-left hide">
+                <div class="padding-left-line">
+                    <span class="padding-left-text">Left Padding</span>
+                </div>
+            </div>
+            <div class="padding-right hide">
+                <div class="padding-right-line">
+                    <span class="padding-right-text">Right Padding</span>
+                </div>
+            </div>
+            <div class="background hide">
+                <span class="background-text">Background</span>
+            </div>
+            <div class="border hide">
+                <span class="border-text">Border Radius</span>
+            </div>
+        </button>
+        <div id="qrcode" class="qrcode"></div>
+        <a id="downloadLink" style="display: none;" download="generated_qr.png">Download QR Code</a>
+        <div id="notification"></div>
+    </div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,53 @@
+function generateQR() {
+    const inputText = document.getElementById('inputText').value;
+    const inputFile = document.getElementById('inputFile').files[0];
+    const qrcodeContainer = document.getElementById('qrcode');
+    qrcodeContainer.innerHTML = '';
+
+    if (inputText.trim() !== '' || inputFile) {
+        if (inputFile) {
+            const reader = new FileReader();
+            reader.onload = function(event) {
+                const base64Image = event.target.result;
+                createQRCode(base64Image);
+            };
+            reader.readAsDataURL(inputFile);
+        } else {
+            createQRCode(inputText);
+        }
+    } else {
+        alert('Please enter a valid text or URL, or select an image.');
+    }
+}
+
+function createQRCode(data) {
+    const qrcodeContainer = document.getElementById('qrcode');
+    const downloadLink = document.getElementById('downloadLink');
+
+    const qrCode = new QRCode(qrcodeContainer, {
+        text: data,
+        width: 200,
+        height: 200,
+        colorDark: "#000",
+        colorLight: "#ffffff",
+        correctLevel: QRCode.CorrectLevel.H
+    });
+
+    qrcodeContainer.style.opacity = 1;
+
+    downloadLink.style.display = 'block';
+
+    const qrCanvas = qrcodeContainer.querySelector('canvas');
+    const qrDataUrl = qrCanvas.toDataURL('image/png');
+    downloadLink.href = qrDataUrl;
+
+    showNotification('QR Code generated successfully!');
+}
+
+function showNotification(message) {
+    const notification = document.getElementById('notification');
+    notification.innerText = message;
+    setTimeout(() => {
+        notification.innerText = '';
+    }, 5000);
+}