Free Premium QR Code Generator 2025

Free Premium QR Code Generator 2025 Free Premium QR Code Generator 2025 Free Premium QR Code Generator 2025 Advanced Premium QR Code Generator 2025 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"; // Global variables for Firebase services let app, db, auth; let userId = null; let isAuthReady = false; // Function to initialize Firebase const initFirebase = async () => { try { // Get global variables provided by the canvas environment const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id'; const firebaseConfig = JSON.parse(typeof __firebase_config !== 'undefined' ? __firebase_config : '{}'); const initialAuthToken = typeof __initial_auth_token !== 'undefined' ? __initial_auth_token : null; // Initialize app and services app = initializeApp(firebaseConfig); auth = getAuth(app); db = getFirestore(app); // Sign in with custom token or anonymously if not available if (initialAuthToken) { await signInWithCustomToken(auth, initialAuthToken); } else { await signInAnonymously(auth); } // Listen for authentication state changes onAuthStateChanged(auth, (user) => { if (user) { userId = user.uid; isAuthReady = true; console.log("Firebase Auth State Changed: User is signed in with UID:", userId); // Start listeners for history and analytics after authentication setupHistoryListener(); setupAnalyticsListener(); } else { userId = null; isAuthReady = true; console.log("Firebase Auth State Changed: User is signed out."); } }); } catch (error) { console.error("Error initializing Firebase:", error); } }; // --- History and Analytics Functions --- const setupHistoryListener = () => { if (!isAuthReady || !db || !userId) return; // Path for private user history const historyPath = `artifacts/${typeof __app_id !== 'undefined' ? __app_id : 'default-app-id'}/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. Generate a QR code to save it!'; return; } querySnapshot.forEach((doc) => { const data = doc.data(); const item = document.createElement('div'); item.className = "p-4 bg-gray-200 rounded-lg shadow-inner flex items-center justify-between"; item.innerHTML = ` Type: ${data.type} Data: ${data.content} ${data.timestamp ? new Date(data.timestamp.toDate()).toLocaleString() : '...'} `; historyList.appendChild(item); }); }, (error) => { console.error("Error fetching history:", error); document.getElementById('history-list').innerHTML = 'Failed to load history.'; }); }; const setupAnalyticsListener = () => { if (!isAuthReady || !db || !userId) return; const analyticsDocRef = doc(db, `artifacts/${typeof __app_id !== 'undefined' ? __app_id : 'default-app-id'}/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; }, (error) => { console.error("Error fetching analytics:", error); document.getElementById('analytics-section').innerHTML = 'Failed to load analytics.'; }); }; const updateAnalytics = async (field) => { if (!isAuthReady || !db) return; const analyticsDocRef = doc(db, `artifacts/${typeof __app_id !== 'undefined' ? __app_id : 'default-app-id'}/public/data/analytics`, "global"); try { // Use increment() from the Firestore library await setDoc(analyticsDocRef, { [field]: increment(1) }, { merge: true }); } catch (error) { console.error("Error updating analytics:", error); } }; const saveToHistory = async (type, content) => { if (!isAuthReady || !db || !userId) return; const historyPath = `artifacts/${typeof __app_id !== 'undefined' ? __app_id : 'default-app-id'}/users/${userId}/qr_history`; try { await addDoc(collection(db, historyPath), { type, content, timestamp: serverTimestamp() }); } catch (error) { console.error("Error saving history:", error); } }; // Expose functions to the global scope for use in the HTML/JS window.initFirebase = initFirebase; window.updateAnalytics = updateAnalytics; window.saveToHistory = saveToHistory; body { font-family: 'Inter', sans-serif; background-color: #f0f4f8; /* Very light blue-gray background */ } .shining-bg { background: linear-gradient(135deg, #e3f2fd 0%, #fffde7 100%); /* Light blue to light yellow gradient */ } .sky-blue-btn { background-color: #008cff; /* A stronger blue */ color: #fff; font-weight: bold; box-shadow: 0 4px 6px -1px rgba(0, 140, 255, 0.5), 0 2px 4px -1px rgba(0, 140, 255, 0.3); transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } .sky-blue-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 10px -1px rgba(0, 140, 255, 0.7), 0 4px 6px -1px rgba(0, 140, 255, 0.5); } .yellow-btn { background-color: #ffc107; /* A bright yellow */ color: #1f2937; font-weight: bold; box-shadow: 0 4px 6px -1px rgba(255, 193, 7, 0.5), 0 2px 4px -1px rgba(255, 193, 7, 0.3); transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } .yellow-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 10px -1px rgba(255, 193, 7, 0.7), 0 4px 6px -1px rgba(255, 193, 7, 0.5); } .pulse-animation { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } /* New animation for QR code reveal */ .qr-reveal-animation { opacity: 0; transform: scale(0.9); animation: fadeInScale 0.5s ease-out forwards; } @keyframes fadeInScale { to { opacity: 1; transform: scale(1); } } /* Custom scrollbar for better mobile feel */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #e5e7eb; } ::-webkit-scrollbar-thumb { background: #00BFFF; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #0099cc; } QR Code Generator 2025 Create advanced, custom QR codes for your business and life. URL Text V-Card Email Phone SMS Website URL: Your Text: V-Card Details Email Address: Subject (Optional): Body (Optional): Phone Number: Phone Number: Message: Generate QR Code Download or Share PNG SVG PDF Get Shareable Link Share: Generate Another Global Analytics 0 QR Codes Generated 0 Total Downloads Your History Loading history... Developed by Majid Farooq majidfarooq295@gmail.com × // Global variables for the tool let qrcodeInstance = null; let qrData = ''; let qrDataType = 'url'; let shareUrl = ''; let qrCanvas = null; // Wait for the window to load before initializing Firebase and the UI window.onload = () => { initFirebase(); showInitialState(); }; // --- UI Functions --- function showMessage(text) { const msgBox = document.getElementById('message-box'); const msgText = document.getElementById('message-text'); msgText.innerHTML = text; msgBox.classList.remove('hidden', '-translate-y-full'); msgBox.classList.add('translate-y-0'); setTimeout(hideMessage, 5000); } function hideMessage() { const msgBox = document.getElementById('message-box'); msgBox.classList.remove('translate-y-0'); msgBox.classList.add('-translate-y-full'); setTimeout(() => { msgBox.classList.add('hidden'); }, 500); } function showInitialState() { document.getElementById('input-section').classList.remove('hidden'); document.getElementById('qr-output-section').classList.remove('hidden'); document.getElementById('output-controls').classList.add('hidden'); const qrcodeDiv = document.getElementById('qrcode'); qrcodeDiv.innerHTML = ''; qrCanvas = null; } function showGeneratedState() { document.getElementById('input-section').classList.add('hidden'); document.getElementById('qr-output-section').classList.remove('hidden'); document.getElementById('output-controls').classList.remove('hidden'); } function setActiveTab(type) { const tabs = document.querySelectorAll('#tool-container button[data-type]'); tabs.forEach(tab => { tab.classList.remove('bg-sky-500', 'text-white', 'font-semibold'); tab.classList.add('text-gray-600'); }); const selectedTab = document.querySelector(`button[data-type="${type}"]`); selectedTab.classList.add('bg-sky-500', 'text-white', 'font-semibold'); selectedTab.classList.remove('text-gray-600'); const forms = document.querySelectorAll('.input-form'); forms.forEach(form => form.classList.add('hidden')); document.getElementById(`form-${type}`).classList.remove('hidden'); qrDataType = type; } // --- Main Tool Logic --- 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 name = document.getElementById('vcard-name').value.trim(); const phone = document.getElementById('vcard-phone').value.trim(); const email = document.getElementById('vcard-email').value.trim(); if (!name && !phone && !email) { return ''; } const vcardContent = `BEGIN:VCARD\nVERSION:3.0\nN:${name}\nFN:${name}\nTEL:${phone}\nEMAIL:${email}\nEND:VCARD`; return vcardContent; case 'email': const emailAddress = document.getElementById('email-input').value.trim(); const subject = document.getElementById('email-subject').value.trim(); const body = document.getElementById('email-body').value.trim(); if (!emailAddress) return ''; let emailContent = `mailto:${emailAddress}`; const params = []; if (subject) params.push(`subject=${encodeURIComponent(subject)}`); if (body) params.push(`body=${encodeURIComponent(body)}`); if (params.length > 0) emailContent += `?${params.join('&')}`; return emailContent; case 'phone': const phoneNumber = document.getElementById('phone-input').value.trim(); return `tel:${phoneNumber}`; case 'sms': const smsPhone = document.getElementById('sms-phone').value.trim(); const smsBody = document.getElementById('sms-body').value.trim(); if (!smsPhone) return ''; return `sms:${smsPhone}?body=${encodeURIComponent(smsBody)}`; default: return ''; } } function generateQRCode() { qrData = getQrData(); if (!qrData) { showMessage("Please enter some data to generate a QR code."); return; } const qrcodeDiv = document.getElementById('qrcode'); qrcodeDiv.innerHTML = ''; // Create a new div element to hold the QR code, which qrcodejs will render into const qrHolderDiv = document.createElement('div'); // Add a class for the new reveal animation qrHolderDiv.classList.add('qr-reveal-animation'); qrcodeDiv.appendChild(qrHolderDiv); // Generate the QR code using the library qrcodeInstance = new QRCode(qrHolderDiv, { text: qrData, width: 256, height: 256, colorDark: "#000000", colorLight: "#ffffff", correctLevel: QRCode.CorrectLevel.H }); // Wait for the QR code to be rendered to the canvas setTimeout(() => { qrCanvas = qrcodeDiv.querySelector('canvas'); if (qrCanvas) { showGeneratedState(); // Set the shareable link for social media buttons shareUrl = `${window.location.origin}${window.location.pathname}?data=${encodeURIComponent(qrData)}`; // Save to history and update analytics window.saveToHistory(qrDataType, qrData); window.updateAnalytics('generations'); } else { showMessage("Failed to generate QR code. Please try again."); } }, 100); // Small delay to ensure canvas is ready } function downloadQRCode(type) { if (!qrCanvas) { showMessage("Please generate a QR code first."); return; } window.updateAnalytics('downloads'); const link = document.createElement('a'); document.body.appendChild(link); link.style.display = 'none'; if (type === 'png') { const dataURL = qrCanvas.toDataURL('image/png'); link.href = dataURL; link.download = `qrcode-${Date.now()}.png`; link.click(); } else if (type === 'svg') { // Manually create SVG string from the QR code modules for reliable download const modules = qrcodeInstance._oQRCode.modules; const size = 256; const moduleSize = size / modules.length; const darkColor = '#000000'; const lightColor = '#FFFFFF'; let svgContent = ''; // Build the SVG rects from the QR code's grid data for (let y = 0; y < modules.length; y++) { for (let x = 0; x < modules[y].length; x++) { if (modules[y][x]) { // If it's a dark module svgContent += ``; } } } const svgString = ` ${svgContent} `; // Create a Blob and download it const blob = new Blob([svgString], { type: 'image/svg+xml' }); const url = URL.createObjectURL(blob); link.href = url; link.download = `qrcode-${Date.now()}.svg`; link.click(); URL.revokeObjectURL(url); // Clean up the URL object } else if (type === 'pdf') { const { jsPDF } = window.jspdf; const pdf = new jsPDF({ orientation: "portrait", unit: "mm", format: "a4" }); const imgWidth = 80; const imgHeight = 80; const xPos = (pdf.internal.pageSize.getWidth() - imgWidth) / 2; const yPos = (pdf.internal.pageSize.getHeight() - imgHeight) / 2; const dataURL = qrCanvas.toDataURL('image/png'); pdf.addImage(dataURL, 'PNG', xPos, yPos, imgWidth, imgHeight); pdf.save(`qrcode-${Date.now()}.pdf`); } document.body.removeChild(link); } function shareSocialMedia(platform) { if (!shareUrl) { showMessage("Please generate a QR code first."); return; } let url; const message = "Check out the QR code I generated with this tool!"; const encodedShareUrl = encodeURIComponent(shareUrl); const encodedMessage = encodeURIComponent(message); switch (platform) { case 'facebook': url = `https://www.facebook.com/sharer/sharer.php?u=${encodedShareUrl}&quote=${encodedMessage}`; break; case 'twitter': url = `https://twitter.com/intent/tweet?url=${encodedShareUrl}&text=${encodedMessage}`; break; case 'linkedin': url = `https://www.linkedin.com/shareArticle?mini=true&url=${encodedShareUrl}&title=QR%20Code%20Generator&summary=${encodedMessage}`; break; case 'whatsapp': url = `https://wa.me/?text=${encodedMessage}%20${encodedShareUrl}`; break; default: return; } window.open(url, '_blank', 'noopener,noreferrer'); } // --- Event Listeners --- document.getElementById('generate-btn').addEventListener('click', generateQRCode); document.getElementById('reset-btn').addEventListener('click', showInitialState); document.getElementById('download-png-btn').addEventListener('click', () => downloadQRCode('png')); document.getElementById('download-svg-btn').addEventListener('click', () => downloadQRCode('svg')); document.getElementById('download-pdf-btn').addEventListener('click', () => downloadQRCode('pdf')); document.getElementById('share-link-btn').addEventListener('click', () => { const tempInput = document.createElement('textarea'); tempInput.value = shareUrl; document.body.appendChild(tempInput); tempInput.select(); document.execCommand('copy'); document.body.removeChild(tempInput); showMessage("Shareable link copied to clipboard!"); }); document.getElementById('share-facebook-btn').addEventListener('click', () => shareSocialMedia('facebook')); document.getElementById('share-twitter-btn').addEventListener('click', () => shareSocialMedia('twitter')); document.getElementById('share-linkedin-btn').addEventListener('click', () => shareSocialMedia('linkedin')); document.getElementById('share-whatsapp-btn').addEventListener('click', () => shareSocialMedia('whatsapp')); document.getElementById('tab-url').addEventListener('click', () => setActiveTab('url')); document.getElementById('tab-text').addEventListener('click', () => setActiveTab('text')); document.getElementById('tab-card').addEventListener('click', () => setActiveTab('vcard')); document.getElementById('tab-email').addEventListener('click', () => setActiveTab('email')); document.getElementById('tab-phone').addEventListener('click', () => setActiveTab('phone')); document.getElementById('tab-sms').addEventListener('click', () => setActiveTab('sms'));