QR Code generator

2025-02-01 13:40:55 +02:00
parent d413a8a70b
commit 11f4af41b0
1 changed files with 125 additions and 0 deletions
--- a/QRCode.html
+++ b/QRCode.html
@ -0,0 +1,125 @@
+<!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>
+    <script src="https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs/qrcode.min.js"></script>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            background-color: #f0f0f0;
+        }
+
+        .container {
+            background-color: white;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+
+        .input-group {
+            margin-bottom: 15px;
+        }
+
+        label {
+            display: block;
+            margin-bottom: 5px;
+            font-weight: bold;
+        }
+
+        input, textarea {
+            width: 100%;
+            padding: 8px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            box-sizing: border-box;
+        }
+
+        button {
+            background-color: #4CAF50;
+            color: white;
+            padding: 10px 20px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 16px;
+        }
+
+        button:hover {
+            background-color: #45a049;
+        }
+
+        #qrcode {
+            margin-top: 20px;
+            text-align: center;
+        }
+
+        #qrLabel {
+            margin-top: 10px;
+            text-align: center;
+            font-weight: bold;
+        }
+
+        @media (max-width: 600px) {
+            body {
+                padding: 10px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>QR Code Generator</h1>
+        
+        <div class="input-group">
+            <label for="content">Content:</label>
+            <textarea id="content" rows="4" placeholder="Enter text or URL to encode"></textarea>
+        </div>
+
+        <div class="input-group">
+            <label for="label">Label:</label>
+            <input type="text" id="label" placeholder="Enter label for the QR code">
+        </div>
+
+        <button onclick="generateQR()">Generate QR Code</button>
+
+        <div id="qrcode"></div>
+        <div id="qrLabel"></div>
+    </div>
+
+    <script>
+        function generateQR() {
+            // Clear previous QR code
+            const qrcodeDiv = document.getElementById('qrcode');
+            qrcodeDiv.innerHTML = '';
+            
+            // Get input values
+            const content = document.getElementById('content').value;
+            const label = document.getElementById('label').value;
+
+            if (!content) {
+                alert('Please enter content for the QR code');
+                return;
+            }
+
+            // Create QR code
+            new QRCode(qrcodeDiv, {
+                text: content,
+                width: 256,
+                height: 256,
+                colorDark: '#000000',
+                colorLight: '#ffffff',
+                correctLevel: QRCode.CorrectLevel.H
+            });
+
+            // Update label
+            const labelDiv = document.getElementById('qrLabel');
+            labelDiv.textContent = label || '';
+        }
+    </script>
+</body>
+</html>