Ctrl+K
-
1.52 kB
initial commit
-
219 Bytes
Gere somente o Gerador de QRCode, excluída as informações de contato: <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Gerador de QRCode</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script> <script src="https://cdn.tailwindcss.com"></script> <style> @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .fade-in { animation: fadeIn 0.5s ease; } .custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; } .custom-scrollbar::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; } .custom-scrollbar::-webkit-scrollbar-thumb { background: #888; border-radius: 3px; } .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #555; } .gradient-text { background: linear-gradient(135deg, #333 0%, #666 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } </style> </head> <body class="bg-gray-100 min-h-screen p-5"> <div class="max-w-6xl mx-auto"> <!-- Header --> <header class="text-center mb-10"> <div class="w-16 h-16 bg-gradient-to-br from-gray-800 to-gray-600 mx-auto mb-5 rounded-xl flex items-center justify-center shadow-lg"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-8 h-8 fill-white"> <path d="M3,11H5V13H3V11M11,5H13V9H11V5M9,11H13V15H9V11M15,11H17V13H15V11M19,11H21V13H19V11M5,5H9V9H5V5M3,19H5V21H3V19M5,19H9V21H5V19M11,19H13V21H11V19M15,19H17V21H15V19M19,19H21V21H19V19M15,5H21V11H15V5M17,7H19V9H17V7M21,15H19V17H21V15M21,19H19V21H21V19M3,5H5V9H3V5M7,5H9V7H7V5M3,15H9V21H3V15M5,17H7V19H5V17Z"/> </svg> </div> <h1 class="text-4xl md:text-5xl font-extrabold mb-2 gradient-text">Gerador de QRCode</h1> <p class="text-gray-600 text-lg">Gere códigos QR para URLs, texto e informações de contato</p> </header> <!-- Main Card --> <div class="bg-white rounded-2xl shadow-xl overflow-hidden"> <!-- Tab Navigation --> <div class="flex border-b border-gray-200"> <button class="flex-1 py-5 px-4 bg-transparent border-none cursor-pointer text-sm md:text-base font-semibold text-gray-500 hover:bg-gray-50 hover:text-gray-800 transition-colors duration-300 flex items-center justify-center gap-2 tab-btn active" data-tab="url"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5 fill-current"> <path d="M10.59,13.41C11,13.8 11,14.4 10.59,14.81C10.2,15.2 9.6,15.2 9.19,14.81L7.77,13.39L9.19,12C9.6,11.6 10.2,11.6 10.59,12C11,12.4 11,13 10.59,13.41M13.41,9.19C13.8,8.8 14.4,8.8 14.81,9.19C15.2,9.6 15.2,10.2 14.81,10.59L13.39,12L14.81,13.41C15.2,13.8 15.2,14.4 14.81,14.81C14.4,15.2 13.8,15.2 13.41,14.81L12,13.39L10.59,14.81C10.2,15.2 9.6,15.2 9.19,14.81C8.8,14.4 8.8,13.8 9.19,13.41L10.59,12L9.19,10.59C8.8,10.2 8.8,9.6 9.19,9.19C9.6,8.8 10.2,8.8 10.59,9.19L12,10.59L13.41,9.19M15.5,4L14.5,0L7.5,0L6.5,4H2V6H4.12L5.5,19L18.5,19L19.88,6H22V4H15.5Z"/> </svg> URL </button> <button class="flex-1 py-5 px-4 bg-transparent border-none cursor-pointer text-sm md:text-base font-semibold text-gray-500 hover:bg-gray-50 hover:text-gray-800 transition-colors duration-300 flex items-center justify-center gap-2 tab-btn" data-tab="text"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5 fill-current"> <path d="M12,3C13.73,3 16.39,3.71 18.5,5.3C19.29,5.9 20,6.5 20,7.5C20,8.5 19.29,9.1 18.5,9.7C16.39,11.29 13.73,12 12,12C10.27,12 7.61,11.29 5.5,9.7C4.71,9.1 4,8.5 4,7.5C4,6.5 4.71,5.9 5.5,5.3C7.61,3.71 10.27,3 12,3M18.5,12.3C19.29,12.9 20,13.5 20,14.5C20,15.5 19.29,16.1 18.5,16.7C16.39,18.29 13.73,19 12,19C10.27,19 7.61,18.29 5.5,16.7C4.71,16.1 4,15.5 4,14.5C4,13.5 4.71,12.9 5.5,12.3L5.5,12.3M18.5,17.3C19.29,17.9 20,18.5 20,19.5C20,20.5 19.29,21.1 18.5,21.7C16.39,23.29 13.73,24 12,24C10.27,24 7.61,23.29 5.5,21.7C4.71,21.1 4,20.5 4,19.5C4,18.5 4.71,17.9 5.5,17.3V17.3Z"/> </svg> Texto </button> <button class="flex-1 py-5 px-4 bg-transparent border-none cursor-pointer text-sm md:text-base font-semibold text-gray-500 hover:bg-gray-50 hover:text-gray-800 transition-colors duration-300 flex items-center justify-center gap-2 tab-btn" data-tab="contact"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5 fill-current"> <path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"/> </svg> Contato </button> </div> <!-- Content --> <div class="p-6 md:p-10"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> <!-- Input Section --> <div class="space-y-6"> <!-- URL Tab --> <div class="tab-content active" id="url-tab"> <h2 class="text-2xl font-bold text-gray-800 mb-6">Inserir URL</h2> <div class="space-y-2"> <label class="block font-semibold text-gray-800">URL do Site</label> <input type="url" id="url-input" class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:outline-none focus:border-gray-800 focus:ring-1 focus:ring-gray-300 transition-all" placeholder="exemplo.com ou https://exemplo.com"> <p class="text-sm text-gray-500">Insira uma URL de site. Se não incluir http://, adicionaremos https:// automaticamente.</p> </div> </div> <!-- Text Tab --> <div class="tab-content" id="text-tab"> <h2 class="text-2xl font-bold text-gray-800 mb-6">Inserir Texto</h2> <div class="space-y-2"> <label class="block font-semibold text-gray-800">Conteúdo de Texto</label> <textarea id="text-input" class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:outline-none focus:border-gray-800 focus:ring-1 focus:ring-gray-300 transition-all min-h-[120px]" placeholder="Digite qualquer texto para gerar código QR..."></textarea> </div> </div> <!-- Contact Tab --> <div class="tab-content" id="contact-tab"> <h2 class="text-2xl font-bold text-gray-800 mb-6">Informações de Contato</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="space-y-2"> <label class="block font-semibold text-gray-800">Nome</label> <input type="text" id="contact-first-name" class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:outline-none focus:border-gray-800 focus:ring-1 focus:ring-gray-300 transition-all" placeholder="João"> </div> <div class="space-y-2"> <label class="block font-semibold text-gray-800">Sobrenome</label> <input type="text" id="contact-last-name" class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:outline-none focus:border-gray-800 focus:ring-1 focus:ring-gray-300 transition-all" placeholder="Silva"> </div> </div> <div class="space-y-2 mt-4"> <label class="block font-semibold text-gray-800">Telefone</label> <input type="tel" id="contact-phone" class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:outline-none focus:border-gray-800 focus:ring-1 focus:ring-gray-300 transition-all" placeholder="+55 (11) 99999-9999"> </div> <div class="space-y-2 mt-4"> <label class="block font-semibold text-gray-800">E-mail</label> <input type="email" id="contact-email" class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:outline-none focus:border-gray-800 focus:ring-1 focus:ring-gray-300 transition-all" placeholder="[email protected]"> </div> <div class="space-y-2 mt-4"> <label class="block font-semibold text-gray-800">Organização</label> <input type="text" id="contact-organization" class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:outline-none focus:border-gray-800 focus:ring-1 focus:ring-gray-300 transition-all" placeholder="Nome da Empresa"> </div> <div class="space-y-2 mt-4"> <label class="block font-semibold text-gray-800">Site</label> <input type="url" id="contact-url" class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:outline-none focus:border-gray-800 focus:ring-1 focus:ring-gray-300 transition-all" placeholder="https://exemplo.com"> </div> </div> <button onclick="clearAllFields()" class="w-full py-3 px-6 bg-gray-100 hover:bg-gray-200 text-gray-600 font-semibold rounded-xl transition-colors duration-300 flex items-center justify-center gap-2 mt-6"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5 fill-current"> <path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"/> </svg> Limpar Todos os Campos </button> </div> <!-- QR Section --> <div class="space-y-6"> <h2 class="text-2xl font-bold text-gray-800">Código QR Gerado</h2> <div class="bg-gray-50 rounded-xl p-6 md:p-10 flex flex-col items-center justify-center"> <div id="qr-placeholder" class="py-12 md:py-16 text-center"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-16 h-16 mx-auto mb-4 fill-gray-300"> <path d="M3,11H5V13H3V11M11,5H13V9H11V5M9,11H13V15H9V11M15,11H17V13H15V11M19,11H21V13H19V11M5,5H9V9H5V5M3,19H5V21H3V19M5,19H9V21H5V19M11,19H13V21H11V19M15,19H17V21H15V19M19,19H21V21H19V19M15,5H21V11H15V5M17,7H19V9H17V7M21,15H19V17H21V15M21,19H19V21H21V19M3,5H5V9H3V5M7,5H9V7H7V5M3,15H9V21H3V15M5,17H7V19H5V17Z"/> </svg> <p class="text-gray-400">Preencha o formulário para gerar seu código QR</p> </div> <div id="qr-result" class="hidden"> <canvas id="qr-canvas" class="max-w-[300px] h-auto rounded-xl shadow-lg bg-white p-4 fade-in"></canvas> <p class="text-gray-600 mt-4">Escaneie este código QR com seu dispositivo</p> </div> </div> <div id="action-buttons" class="flex flex-col sm:flex-row gap-4 hidden"> <button onclick="downloadQR()" class="flex-1 py-3 px-6 bg-gradient-to-br from-gray-800 to-gray-600 hover:from-gray-700 hover:to-gray-500 text-white font-semibold rounded-xl transition-all duration-300 hover:shadow-md flex items-center justify-center gap-2"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5 fill-current"> <path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z"/> </svg> Download </button> <button onclick="copyData()" class="flex-1 py-3 px-6 bg-gray-100 hover:bg-gray-200 text-gray-800 font-semibold rounded-xl transition-colors duration-300 flex items-center justify-center gap-2"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5 fill-current"> <path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/> </svg> <span id="copy-text">Copiar Dados</span> </button> </div> <div id="data-preview" class="hidden"> <h3 class="font-semibold text-gray-800 mb-2">Dados do Código QR:</h3> <div id="data-content" class="bg-gray-50 rounded-lg p-4 font-mono text-sm text-gray-600 max-h-40 overflow-y-auto custom-scrollbar whitespace-pre-wrap break-all"></div> </div> </div> </div> </div> </div> <!-- Footer --> <footer class="text-center mt-10 text-gray-500 text-sm"> <p>Gere códigos QR instantaneamente • Nenhum dado armazenado • Gratuito</p> </footer> </div> <script> let currentTab = 'url'; let currentQRData = ''; // Inicialização document.addEventListener('DOMContentLoaded', function() { setupTabs(); setupEventListeners(); }); function setupTabs() { const tabBtns = document.querySelectorAll('.tab-btn'); const tabContents = document.querySelectorAll('.tab-content'); tabBtns.forEach(btn => { btn.addEventListener('click', () => { const tabId = btn.getAttribute('data-tab'); // Remove active class from all buttons and contents tabBtns.forEach(b => b.classList.remove('active')); tabContents.forEach(c => c.classList.remove('active')); // Add active class to clicked button and corresponding content btn.classList.add('active'); document.getElementById(tabId + '-tab').classList.add('active'); currentTab = tabId; generateQR(); }); }); } function setupEventListeners() { // URL input document.getElementById('url-input').addEventListener('input', generateQR); // Text input document.getElementById('text-input').addEventListener('input', generateQR); // Contact inputs const contactInputs = ['contact-first-name', 'contact-last-name', 'contact-phone', 'contact-email', 'contact-organization', 'contact-url']; contactInputs.forEach(id => { document.getElementById(id).addEventListener('input', generateQR); }); } function formatUrl(url) { if (!url.trim()) return ''; if (!url.startsWith('http://') && !url.startsWith('https://')) { return 'https://' + url; } return url; } function generateVCard() { const firstName = document.getElementById('contact-first-name').value; const lastName = document.getElementById('contact-last-name').value; const phone = document.getElementById('contact-phone').value; const email = document.getElementById('contact-email').value; const organization = document.getElementById('contact-organization').value; const url = document.getElementById('contact-url').value; if (!firstName && !lastName && !phone && !email) { return ''; } const vcard = `BEGIN:VCARD VERSION:3.0 FN:${firstName} ${lastName} N:${lastName};${firstName};;; ORG:${organization} TEL:${phone} EMAIL:${email} URL:${url} END:VCARD`; return vcard; } function generateQR() { let data = ''; switch (currentTab) { case 'url': data = formatUrl(document.getElementById('url-input').value); break; case 'text': data = document.getElementById('text-input').value; break; case 'contact': data = generateVCard(); break; } currentQRData = data; if (!data.trim()) { showPlaceholder(); return; } try { const canvas = document.getElementById('qr-canvas'); const qr = new QRious({ element: canvas, value: data, size: 300, background: 'white', foreground: 'black', level: 'M' }); showQRResult(); updateDataPreview(data); } catch (error) { console.error('Erro ao gerar código QR:', error); showPlaceholder(); } } function showPlaceholder() { document.getElementById('qr-placeholder').classList.remove('hidden'); document.getElementById('qr-result').classList.add('hidden'); document.getElementById('action-buttons').classList.add('hidden'); document.getElementById('data-preview').classList.add('hidden'); } function showQRResult() { document.getElementById('qr-placeholder').classList.add('hidden'); document.getElementById('qr-result').classList.remove('hidden'); document.getElementById('action-buttons').classList.remove('hidden'); document.getElementById('data-preview').classList.remove('hidden'); } function updateDataPreview(data) { document.getElementById('data-content').textContent = data; } function downloadQR() { if (!currentQRData) return; const canvas = document.getElementById('qr-canvas'); const link = document.createElement('a'); link.download = `qr-code-${currentTab}.png`; link.href = canvas.toDataURL(); link.click(); } async function copyData() { if (!currentQRData) return; try { await navigator.clipboard.writeText(currentQRData); const copyText = document.getElementById('copy-text'); const originalText = copyText.textContent; copyText.textContent = 'Copiado!'; copyText.classList.add('text-green-600'); setTimeout(() => { copyText.textContent = originalText; copyText.classList.remove('text-green-600'); }, 2000); } catch (err) { console.error('Erro ao copiar texto:', err); alert('Erro ao copiar texto para a área de transferência'); } } function clearAllFields() { // Clear URL document.getElementById('url-input').value = ''; // Clear text document.getElementById('text-input').value = ''; // Clear contact fields document.getElementById('contact-first-name').value = ''; document.getElementById('contact-last-name').value = ''; document.getElementById('contact-phone').value = ''; document.getElementById('contact-email').value = ''; document.getElementById('contact-organization').value = ''; document.getElementById('contact-url').value = ''; currentQRData = ''; showPlaceholder(); } </script> </body> </html> - Initial Deployment
-
16.6 kB
Update index.html
-
388 Bytes
initial commit