Spaces:
Running
Running
| <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Quantum QR Studio - QR Code Generator & Scanner</title> | |
| <!-- Tailwind CSS CDN --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <!-- Font Awesome CDN --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> | |
| <!-- Google Fonts (Poppins & Fira Code) --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Fira+Code&display=swap" rel="stylesheet"> | |
| <!-- QR Code Styling Library --> | |
| <script src="https://unpkg.com/qr-code-styling@1.6.0/lib/qr-code-styling.js"></script> | |
| <!-- ZXing JS Scanner Library --> | |
| <script src="https://unpkg.com/@zxing/library@latest/umd/index.min.js"></script> | |
| <style> | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #0f172a; /* bg-slate-900 */ | |
| } | |
| .mono { font-family: 'Fira Code', monospace; } | |
| ::-webkit-scrollbar { width: 8px; } | |
| ::-webkit-scrollbar-track { background: #1e293b; } | |
| ::-webkit-scrollbar-thumb { background: #475569; border-radius: 10px; } | |
| ::-webkit-scrollbar-thumb:hover { background: #64748b; } | |
| .tab-btn.active { | |
| background-color: #0ea5e9; /* bg-sky-500 */ | |
| color: white; | |
| } | |
| .fade-in { animation: fadeIn 0.5s ease-in-out; } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| </style> | |
| </head> | |
| <body class="text-slate-200"> | |
| <div class="container mx-auto p-4 md:p-8 max-w-7xl"> | |
| <header class="text-center mb-8"> | |
| <h1 class="text-4xl md:text-5xl font-bold text-white">Quantum <span class="text-sky-400">QR</span> Studio</h1> | |
| <p class="text-slate-400 mt-2">The ultimate client-side toolkit for QR Codes.</p> | |
| </header> | |
| <!-- Tabs Navigation --> | |
| <div class="mb-6 bg-slate-800 p-2 rounded-xl flex justify-center gap-2 max-w-sm mx-auto"> | |
| <button class="tab-btn w-full py-2 px-4 rounded-lg font-semibold transition active" data-tab="generator"> | |
| <i class="fas fa-qrcode mr-2"></i>Generator | |
| </button> | |
| <button class="tab-btn w-full py-2 px-4 rounded-lg font-semibold transition" data-tab="scanner"> | |
| <i class="fas fa-camera mr-2"></i>Scanner | |
| </button> | |
| </div> | |
| <main> | |
| <!-- Generator Tab --> | |
| <div id="generator-tab" class="tab-content fade-in"> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Left Side: Controls --> | |
| <div class="lg:col-span-2 bg-slate-800/70 p-6 rounded-2xl"> | |
| <!-- QR Type Selector --> | |
| <div class="mb-4"> | |
| <label for="qr-type" class="block text-sm font-bold mb-2 text-sky-400">QR CODE TYPE</label> | |
| <select id="qr-type" class="w-full p-3 bg-slate-700 rounded-lg border-2 border-slate-600 focus:border-sky-500 focus:outline-none"> | |
| <option value="url">URL</option> | |
| <option value="text">Text</option> | |
| <option value="wifi">Wi-Fi Network</option> | |
| <option value="vcard">vCard (Contact)</option> | |
| <option value="sms">SMS</option> | |
| <option value="phone">Phone Number</option> | |
| <option value="email">Email</option> | |
| <option value="upi">UPI Payment</option> | |
| </select> | |
| </div> | |
| <div id="form-container" class="space-y-4"></div> | |
| <details class="mt-6 bg-slate-900/50 rounded-lg"> | |
| <summary class="p-3 cursor-pointer font-semibold text-white">Advanced Customization</summary> | |
| <div class="p-4 border-t border-slate-700 grid sm:grid-cols-2 gap-4"> | |
| <!-- Manual Color Pickers --> | |
| <input type="color" id="dot-color" value="#000000" title="Dot Color" class="w-full h-10 p-1 bg-slate-700 rounded-lg"> | |
| <input type="color" id="bg-color" value="#ffffff" title="Background Color" class="w-full h-10 p-1 bg-slate-700 rounded-lg"> | |
| <!-- Error Correction --> | |
| <select id="error-correction" class="w-full p-2 bg-slate-700 rounded-lg border-2 border-slate-600"> | |
| <option value="L">Error Correction: Low</option> | |
| <option value="M" selected>Error Correction: Medium</option> | |
| <option value="Q">Error Correction: Quartile</option> | |
| <option value="H">Error Correction: High</option> | |
| </select> | |
| <!-- Logo Upload --> | |
| <div class="relative"> | |
| <input type="file" id="logo-upload" accept="image/png, image/jpeg" class="hidden"> | |
| <button onclick="document.getElementById('logo-upload').click()" class="w-full p-2 bg-slate-700 rounded-lg">Upload Logo</button> | |
| </div> | |
| <!-- ADDED: Randomize Colors Button --> | |
| <button id="random-color-btn" class="sm:col-span-2 w-full bg-gradient-to-r from-purple-500 to-pink-500 text-white font-bold py-2 px-4 rounded-lg transition-transform hover:scale-105"> | |
| <i class="fas fa-palette mr-2"></i>Randomize Colors | |
| </button> | |
| </div> | |
| </details> | |
| </div> | |
| <!-- Right Side: QR Preview --> | |
| <div class="bg-slate-800/70 p-6 rounded-2xl flex flex-col items-center justify-center"> | |
| <div id="qr-code-container" class="bg-slate-700 p-4 rounded-lg mb-4"> | |
| <div id="qr-code"></div> | |
| </div> | |
| <p class="text-slate-400 text-sm mb-4">QR code updates in real-time</p> | |
| <div class="w-full space-y-3"> | |
| <!-- CHANGED: Only JPG download is available now --> | |
| <button id="download-jpg" class="w-full bg-sky-500 hover:bg-sky-600 text-white font-bold py-3 rounded-lg text-lg"> | |
| <i class="fas fa-download mr-2"></i>Download JPG | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Scanner Tab --> | |
| <div id="scanner-tab" class="tab-content hidden fade-in"> | |
| <div class="max-w-2xl mx-auto bg-slate-800/70 p-6 rounded-2xl text-center"> | |
| <video id="scanner-video" class="w-full rounded-lg mb-4 hidden aspect-video"></video> | |
| <div id="permission-prompt" class="mb-4"> | |
| <p class="mb-4">Allow camera access to start scanning.</p> | |
| <button id="start-scan-btn" class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg"><i class="fas fa-video mr-2"></i>Use Camera</button> | |
| </div> | |
| <p class="text-slate-400 my-4">OR</p> | |
| <input type="file" id="scan-file-upload" class="hidden" accept="image/*"> | |
| <button onclick="document.getElementById('scan-file-upload').click()" class="bg-slate-700 hover:bg-slate-600 text-white font-bold py-2 px-4 rounded-lg"><i class="fas fa-upload mr-2"></i>Upload Image</button> | |
| <div id="scan-result" class="mt-6 text-left bg-slate-900 p-4 rounded-lg hidden break-words"></div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <!-- JavaScript Logic --> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const qrCodeEl = document.getElementById('qr-code'); | |
| const qrTypeSelect = document.getElementById('qr-type'); | |
| const formContainer = document.getElementById('form-container'); | |
| const qrCode = new QRCodeStyling({ | |
| width: 250, | |
| height: 250, | |
| data: 'https://github.com/AmitK-1234', | |
| image: '', | |
| dotsOptions: { color: '#000000', type: 'rounded' }, | |
| backgroundOptions: { color: '#ffffff' }, | |
| imageOptions: { crossOrigin: 'anonymous', margin: 5 }, | |
| cornersSquareOptions: { type: 'extra-rounded' }, | |
| cornersDotOptions: { type: 'dot' }, | |
| qrOptions: { errorCorrectionLevel: 'M' } | |
| }); | |
| qrCode.append(qrCodeEl); | |
| const tabButtons = document.querySelectorAll('.tab-btn'); | |
| const tabContents = document.querySelectorAll('.tab-content'); | |
| let activeStream = null; | |
| tabButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| tabButtons.forEach(btn => btn.classList.remove('active')); | |
| button.classList.add('active'); | |
| if (activeStream) stopScan(); | |
| const tabId = button.dataset.tab; | |
| tabContents.forEach(content => { | |
| content.id === `${tabId}-tab` ? content.classList.remove('hidden') : content.classList.add('hidden'); | |
| }); | |
| }); | |
| }); | |
| const forms = { | |
| url: `<input type="url" id="data" class="qr-input w-full p-3 bg-slate-700 rounded-lg" placeholder="https://example.com">`, | |
| text: `<textarea id="data" class="qr-input w-full p-3 bg-slate-700 rounded-lg" rows="4" placeholder="Enter any text"></textarea>`, | |
| wifi: `<input type="text" id="wifi-ssid" class="qr-input w-full p-3 bg-slate-700 rounded-lg" placeholder="Network Name (SSID)"><input type="password" id="wifi-pass" class="qr-input w-full p-3 bg-slate-700 rounded-lg" placeholder="Password"><select id="wifi-enc" class="qr-input w-full p-3 bg-slate-700 rounded-lg"><option value="WPA">WPA/WPA2</option><option value="WEP">WEP</option><option value="nopass">No Password</option></select>`, | |
| vcard: `<input type="text" id="vcard-name" class="qr-input w-full p-3 bg-slate-700 rounded-lg" placeholder="Full Name"><input type="tel" id="vcard-tel" class="qr-input w-full p-3 bg-slate-700 rounded-lg" placeholder="Phone Number"><input type="email" id="vcard-email" class="qr-input w-full p-3 bg-slate-700 rounded-lg" placeholder="Email Address">`, | |
| sms: `<input type="tel" id="sms-tel" class="qr-input w-full p-3 bg-slate-700 rounded-lg" placeholder="Recipient Phone Number"><textarea id="sms-body" class="qr-input w-full p-3 bg-slate-700 rounded-lg" rows="3" placeholder="SMS Message"></textarea>`, | |
| phone: `<input type="tel" id="data" class="qr-input w-full p-3 bg-slate-700 rounded-lg" placeholder="+1234567890">`, | |
| email: `<input type="email" id="email-addr" class="qr-input w-full p-3 bg-slate-700 rounded-lg" placeholder="Recipient Email"><input type="text" id="email-subj" class="qr-input w-full p-3 bg-slate-700 rounded-lg" placeholder="Subject">`, | |
| upi: `<input type="text" id="upi-id" class="qr-input w-full p-3 bg-slate-700 rounded-lg" placeholder="yourname@bank"><input type="text" id="upi-name" class="qr-input w-full p-3 bg-slate-700 rounded-lg" placeholder="Payee Name">` | |
| }; | |
| const renderForm = (type) => { formContainer.innerHTML = forms[type]; updateQRCode(); }; | |
| const getQRData = () => { | |
| let data = ' '; | |
| try { | |
| const type = qrTypeSelect.value; | |
| switch(type) { | |
| case 'url': case 'text': data = document.getElementById('data').value || ' '; break; | |
| case 'phone': data = `tel:${document.getElementById('data').value || ''}`; break; | |
| case 'wifi': data = `WIFI:T:${document.getElementById('wifi-enc').value};S:${document.getElementById('wifi-ssid').value};P:${document.getElementById('wifi-pass').value};;`; break; | |
| case 'vcard': data = `BEGIN:VCARD\nVERSION:3.0\nN:${document.getElementById('vcard-name').value}\nTEL:${document.getElementById('vcard-tel').value}\nEMAIL:${document.getElementById('vcard-email').value}\nEND:VCARD`; break; | |
| case 'sms': data = `SMSTO:${document.getElementById('sms-tel').value}:${document.getElementById('sms-body').value}`; break; | |
| case 'email': data = `mailto:${document.getElementById('email-addr').value}?subject=${encodeURIComponent(document.getElementById('email-subj').value)}`; break; | |
| case 'upi': data = `upi://pay?pa=${document.getElementById('upi-id').value}&pn=${encodeURIComponent(document.getElementById('upi-name').value)}&cu=INR`; break; | |
| } | |
| } catch (e) {} | |
| return data; | |
| }; | |
| const updateQRCode = () => qrCode.update({ data: getQRData() }); | |
| qrTypeSelect.addEventListener('change', () => renderForm(qrTypeSelect.value)); | |
| formContainer.addEventListener('input', updateQRCode); | |
| const dotColorPicker = document.getElementById('dot-color'); | |
| const bgColorPicker = document.getElementById('bg-color'); | |
| dotColorPicker.addEventListener('input', (e) => qrCode.update({ dotsOptions: { color: e.target.value } })); | |
| bgColorPicker.addEventListener('input', (e) => qrCode.update({ backgroundOptions: { color: e.target.value } })); | |
| document.getElementById('error-correction').addEventListener('change', (e) => qrCode.update({ qrOptions: { errorCorrectionLevel: e.target.value } })); | |
| document.getElementById('logo-upload').addEventListener('change', (e) => { | |
| const file = e.target.files[0]; | |
| if (file) qrCode.update({ image: URL.createObjectURL(file) }); | |
| }); | |
| document.getElementById('download-jpg').addEventListener('click', () => qrCode.download({ name: 'quantum-qr', extension: 'jpeg' })); | |
| // ADDED: Random Color Palettes and Logic | |
| const colorPalettes = [ | |
| { dots: '#4a044e', background: '#fbeaff', cornersSquare: '#210023', cornersDot: '#701a75' }, | |
| { dots: '#006d77', background: '#edf6f9', cornersSquare: '#013a40', cornersDot: '#83c5be' }, | |
| { dots: '#d90429', background: '#ffffff', cornersSquare: '#2b2d42', cornersDot: '#ef233c' }, | |
| { dots: '#1d3557', background: '#f1faee', cornersSquare: '#1d3557', cornersDot: '#457b9d' }, | |
| { dots: '#6a040f', background: '#fff3b0', cornersSquare: '#370617', cornersDot: '#9d0208' }, | |
| { dots: '#3a5a40', background: '#ffffff', cornersSquare: '#1a2a1f', cornersDot: '#588157' }, | |
| ]; | |
| document.getElementById('random-color-btn').addEventListener('click', () => { | |
| const palette = colorPalettes[Math.floor(Math.random() * colorPalettes.length)]; | |
| dotColorPicker.value = palette.dots; | |
| bgColorPicker.value = palette.background; | |
| qrCode.update({ | |
| dotsOptions: { color: palette.dots }, | |
| backgroundOptions: { color: palette.background }, | |
| cornersSquareOptions: { color: palette.cornersSquare }, | |
| cornersDotOptions: { color: palette.cornersDot } | |
| }); | |
| }); | |
| // --- QR Code Scanner Logic --- | |
| const videoEl = document.getElementById('scanner-video'); | |
| const startScanBtn = document.getElementById('start-scan-btn'); | |
| const scanResultEl = document.getElementById('scan-result'); | |
| const permissionPromptEl = document.getElementById('permission-prompt'); | |
| const codeReader = new ZXing.BrowserMultiFormatReader(); | |
| const startScan = async () => { | |
| try { | |
| const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } }); | |
| activeStream = stream; | |
| videoEl.srcObject = stream; | |
| videoEl.classList.remove('hidden'); | |
| permissionPromptEl.classList.add('hidden'); | |
| scanResultEl.classList.add('hidden'); | |
| codeReader.decodeFromStream(stream, videoEl, (result, err) => { | |
| if (result) { | |
| displayScanResult(result.getText()); | |
| stopScan(); | |
| } | |
| }); | |
| } catch (err) { | |
| alert('Could not access camera. Please check permissions.'); | |
| } | |
| }; | |
| const stopScan = () => { | |
| if (activeStream) { | |
| activeStream.getTracks().forEach(track => track.stop()); | |
| activeStream = null; | |
| } | |
| codeReader.reset(); | |
| videoEl.classList.add('hidden'); | |
| permissionPromptEl.classList.remove('hidden'); | |
| }; | |
| document.getElementById('scan-file-upload').addEventListener('change', (e) => { | |
| const file = e.target.files[0]; | |
| if (!file) return; | |
| const reader = new FileReader(); | |
| reader.onload = (event) => { | |
| const img = new Image(); | |
| img.onload = () => { | |
| codeReader.decodeFromImageElement(img) | |
| .then(result => displayScanResult(result.getText())) | |
| .catch(err => { | |
| alert('Could not decode QR code from the uploaded image. Please try a clearer, standard QR code.'); | |
| }); | |
| }; | |
| img.src = event.target.result; | |
| }; | |
| reader.readAsDataURL(file); | |
| }); | |
| const displayScanResult = (text) => { | |
| let content = ''; | |
| if (text.startsWith('http')) { | |
| content = `<strong>URL:</strong> <a href="${text}" target="_blank" class="text-sky-400 hover:underline">${text}</a>`; | |
| } else if (text.startsWith('WIFI:')) { | |
| content = `<strong>Wi-Fi Network:</strong><br><span class="mono">${text}</span>`; | |
| } else if (text.startsWith('mailto:')) { | |
| content = `<strong>Email:</strong> <a href="${text}" class="text-sky-400 hover:underline">${text.substring(7)}</a>`; | |
| } else { | |
| content = `<strong>Text:</strong><br><p class="mono">${text}</p>`; | |
| } | |
| scanResultEl.innerHTML = content; | |
| scanResultEl.classList.remove('hidden'); | |
| }; | |
| startScanBtn.addEventListener('click', startScan); | |
| renderForm('url'); | |
| }); | |
| </script> | |
| </body> | |
| </html> |