Advanced Premium QR code generator

import { initializeApp } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-app.js"; import { getAuth, signInAnonymously, signInWithCustomToken, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-auth.js"; import { getFirestore, doc, getDoc, setDoc, collection, query, onSnapshot, orderBy, serverTimestamp, addDoc, updateDoc, increment } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-firestore.js"; let app, db, auth; let userId = null; let isAuthReady = false; const initFirebase = async () => { try { // Configuration for stijob.org.pk const firebaseConfig = { // INSERT YOUR FIREBASE CONFIG HERE IF YOU HAVE ONE // apiKey: "...", // authDomain: "...", // projectId: "...", }; // Only initialize if config is present, otherwise mock for UI demo if (Object.keys(firebaseConfig).length > 0) { app = initializeApp(firebaseConfig); auth = getAuth(app); db = getFirestore(app); await signInAnonymously(auth); onAuthStateChanged(auth, (user) => { if (user) { userId = user.uid; isAuthReady = true; setupHistoryListener(); setupAnalyticsListener(); } }); } else { console.log("Firebase config missing - running in offline/demo mode"); } } catch (error) { console.error("Error initializing Firebase:", error); } }; // --- History and Analytics Functions (Safe Mode) --- const setupHistoryListener = () => { if (!isAuthReady || !db || !userId) return; const historyPath = `artifacts/qr-generator/users/${userId}/qr_history`; const q = collection(db, historyPath); onSnapshot(q, (querySnapshot) => { const historyList = document.getElementById('history-list'); historyList.innerHTML = ''; if (querySnapshot.empty) { historyList.innerHTML = 'No history yet.'; return; } querySnapshot.forEach((doc) => { const data = doc.data(); const item = document.createElement('div'); item.className = "p-3 bg-gray-100 rounded flex items-center justify-between mb-2"; item.innerHTML = ` ${data.type} ${data.content} `; historyList.appendChild(item); }); }); }; const setupAnalyticsListener = () => { if (!isAuthReady || !db) return; const analyticsDocRef = doc(db, `artifacts/qr-generator/public/data/analytics`, "global"); onSnapshot(analyticsDocRef, (docSnap) => { const analytics = docSnap.exists() ? docSnap.data() : { generations: 0, downloads: 0 }; document.getElementById('generation-count').textContent = analytics.generations || 0; document.getElementById('download-count').textContent = analytics.downloads || 0; }); }; const updateAnalytics = async (field) => { if (!isAuthReady || !db) return; const analyticsDocRef = doc(db, `artifacts/qr-generator/public/data/analytics`, "global"); try { await setDoc(analyticsDocRef, { [field]: increment(1) }, { merge: true }); } catch (error) { console.error(error); } }; const saveToHistory = async (type, content) => { if (!isAuthReady || !db || !userId) return; const historyPath = `artifacts/qr-generator/users/${userId}/qr_history`; try { await addDoc(collection(db, historyPath), { type, content, timestamp: serverTimestamp() }); } catch (error) { console.error(error); } }; window.initFirebase = initFirebase; window.updateAnalytics = updateAnalytics; window.saveToHistory = saveToHistory; /* Scoped Styles for the Tool */ #qr-tool-wrapper { font-family: 'Inter', sans-serif; line-height: 1.5; } #qr-tool-wrapper .shining-bg { background: linear-gradient(135deg, #e3f2fd 0%, #fffde7 100%); } #qr-tool-wrapper .sky-blue-btn { background-color: #008cff; color: #fff; font-weight: bold; box-shadow: 0 4px 6px -1px rgba(0, 140, 255, 0.5); transition: all 0.2s ease-in-out; } #qr-tool-wrapper .sky-blue-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 10px -1px rgba(0, 140, 255, 0.7); } #qr-tool-wrapper .yellow-btn { background-color: #ffc107; color: #1f2937; font-weight: bold; box-shadow: 0 4px 6px -1px rgba(255, 193, 7, 0.5); transition: all 0.2s ease-in-out; } #qr-tool-wrapper .yellow-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 10px -1px rgba(255, 193, 7, 0.7); } .pulse-animation { animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } } .qr-reveal-animation { opacity: 0; transform: scale(0.9); animation: fadeInScale 0.5s ease-out forwards; } @keyframes fadeInScale { to { opacity: 1; transform: scale(1); } } Premium QR Generator Create custom QR codes instantly. URL Text V-Card Email Phone SMS Website URL Content Generate QR Code PNG SVG PDF Create New Code Global Usage 0 Generated 0 Downloads Recent History History loads here... Official Bank Account (IBAN) PK40HABB0001947100292703 Developed by Majid Farooq Notification // --- Tool Logic --- let qrcodeInstance = null; let qrData = ''; let qrDataType = 'url'; let qrCanvas = null; window.onload = () => { if(window.initFirebase) window.initFirebase(); showInitialState(); }; function setActiveTab(type) { // Reset Tabs document.querySelectorAll('#qr-tool-wrapper button[id^="tab-"]').forEach(btn => { btn.classList.remove('bg-sky-500', 'text-white'); btn.classList.add('text-gray-600', 'hover:bg-white'); }); // Set Active const activeBtn = document.getElementById(`tab-${type}`); activeBtn.classList.remove('text-gray-600', 'hover:bg-white'); activeBtn.classList.add('bg-sky-500', 'text-white'); // Toggle Forms document.querySelectorAll('.input-form').forEach(f => f.classList.add('hidden')); document.getElementById(`form-${type}`).classList.remove('hidden'); qrDataType = type; } function getQrData() { switch (qrDataType) { case 'url': return document.getElementById('url-input').value.trim(); case 'text': return document.getElementById('text-input').value.trim(); case 'vcard': const n = document.getElementById('vcard-name').value; const p = document.getElementById('vcard-phone').value; const e = document.getElementById('vcard-email').value; return (n||p||e) ? `BEGIN:VCARD\nVERSION:3.0\nN:${n}\nTEL:${p}\nEMAIL:${e}\nEND:VCARD` : ''; case 'email': const mail = document.getElementById('email-input').value; return mail ? `mailto:${mail}?subject=${document.getElementById('email-subject').value}` : ''; case 'phone': return `tel:${document.getElementById('phone-input').value}`; case 'sms': return `sms:${document.getElementById('sms-phone').value}?body=${document.getElementById('sms-body').value}`; default: return ''; } } document.getElementById('generate-btn').addEventListener('click', () => { qrData = getQrData(); if (!qrData) { showMessage("Please enter data"); return; } const container = document.getElementById('qrcode'); container.innerHTML = ''; // Visual container for animation const holder = document.createElement('div'); holder.className = 'qr-reveal-animation'; container.appendChild(holder); qrcodeInstance = new QRCode(holder, { text: qrData, width: 200, height: 200, colorDark: "#000000", colorLight: "#ffffff", correctLevel: QRCode.CorrectLevel.H }); setTimeout(() => { qrCanvas = container.querySelector('canvas'); if(qrCanvas) { document.getElementById('output-controls').classList.remove('hidden'); document.getElementById('input-section').classList.add('hidden'); // Mobile UX if(window.window.innerWidth > 1024) document.getElementById('input-section').classList.remove('hidden'); // Keep inputs on desktop if(window.saveToHistory) window.saveToHistory(qrDataType, qrData); if(window.updateAnalytics) window.updateAnalytics('generations'); } }, 100); }); document.getElementById('reset-btn').addEventListener('click', showInitialState); function showInitialState() { document.getElementById('input-section').classList.remove('hidden'); document.getElementById('output-controls').classList.add('hidden'); document.getElementById('qrcode').innerHTML = 'Preview'; } function copyIBAN() { const iban = document.getElementById('iban-code').innerText; navigator.clipboard.writeText(iban).then(() => { showMessage("IBAN Copied!"); }); } function showMessage(msg) { const box = document.getElementById('message-box'); document.getElementById('message-text').innerText = msg; box.classList.remove('translate-y-20'); setTimeout(() => box.classList.add('translate-y-20'), 3000); } window.downloadQRCode = (type) => { if(!qrCanvas) return; if(window.updateAnalytics) window.updateAnalytics('downloads'); const link = document.createElement('a'); if(type === 'png') { link.href = qrCanvas.toDataURL("image/png"); link.download = "qrcode.png"; } else if (type === 'pdf') { const { jsPDF } = window.jspdf; const doc = new jsPDF(); doc.addImage(qrCanvas.toDataURL("image/png"), 'PNG', 15, 40, 180, 180); doc.save("qrcode.pdf"); return; } link.click(); };