Spaces:
Running
Running
criar uma webapp que gera qrcodes de links e textos, não precisa salvar nada em banco de dados, deve somente gerar os qrcodes na tela para o usuário salvar no formatdo PNG com fundo branco ou transparente. o visual da home deve ser com textos e fontes grandes e cores agradáveis. não salvar nada em banco de dados, não será necessário login de usuário, Não será necessário integrações externas.
bc1d1af verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>QR Generator Pro</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script> | |
| </head> | |
| <body class="bg-blue-50 min-h-screen flex flex-col"> | |
| <header class="bg-white shadow-sm py-6"> | |
| <div class="container mx-auto px-4"> | |
| <h1 class="text-3xl md:text-4xl font-bold text-center text-blue-600">QR Generator Pro</h1> | |
| <p class="text-center text-neutral-600 mt-2">Create beautiful QR codes instantly</p> | |
| </div> | |
| </header> | |
| <main class="flex-grow container mx-auto px-4 py-8"> | |
| <div class="max-w-2xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6"> | |
| <div class="mb-6"> | |
| <label for="content" class="block text-lg font-medium text-neutral-700 mb-2">Enter Text or URL</label> | |
| <textarea | |
| id="content" | |
| rows="4" | |
| class="w-full px-4 py-3 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-lg" | |
| placeholder="Type your text or paste a URL here..."></textarea> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> | |
| <div> | |
| <label class="block text-lg font-medium text-neutral-700 mb-2">Size</label> | |
| <select id="size" class="w-full px-4 py-3 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-lg"> | |
| <option value="200">Small (200px)</option> | |
| <option value="300" selected>Medium (300px)</option> | |
| <option value="400">Large (400px)</option> | |
| <option value="500">Extra Large (500px)</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-lg font-medium text-neutral-700 mb-2">Background</label> | |
| <select id="background" class="w-full px-4 py-3 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-lg"> | |
| <option value="white">White</option> | |
| <option value="transparent">Transparent</option> | |
| </select> | |
| </div> | |
| </div> | |
| <button id="generateBtn" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-4 px-6 rounded-lg text-lg transition duration-300 ease-in-out transform hover:scale-105"> | |
| Generate QR Code | |
| </button> | |
| <div id="qrResult" class="mt-10 items-center justify-center hidden"> | |
| <div class="flex justify-center mb-6"> | |
| <div id="qrcode" class="border-4 border-neutral-200 rounded-lg p-4 bg-white inline-block"></div> | |
| </div> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> | |
| <button id="downloadPng" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg text-lg transition duration-300 flex items-center justify-center"> | |
| <i data-feather="download" class="mr-2"></i> Download PNG | |
| </button> | |
| <button id="newQr" class="bg-neutral-600 hover:bg-neutral-700 text-white font-bold py-3 px-6 rounded-lg text-lg transition duration-300 flex items-center justify-center"> | |
| <i data-feather="plus" class="mr-2"></i> New QR Code | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <footer class="bg-white border-t border-neutral-200 py-6 mt-8"> | |
| <div class="container mx-auto px-4 text-center text-neutral-600"> | |
| <p>© 2023 QR Generator Pro. All rights reserved.</p> | |
| </div> | |
| </footer> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |