Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>QR Code Generator | Modern Tool</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.1/build/qrcode.min.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6e8efb, #a777e3); | |
| } | |
| .qr-container { | |
| transition: all 0.3s ease; | |
| } | |
| .qr-container:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .download-btn { | |
| transition: all 0.2s ease; | |
| } | |
| .download-btn:hover { | |
| transform: scale(1.05); | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-out forwards; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen gradient-bg flex flex-col items-center justify-center p-4"> | |
| <div class="w-full max-w-md mx-auto"> | |
| <div class="text-center mb-8"> | |
| <h1 class="text-3xl font-bold text-white mb-2">QR Code Generator</h1> | |
| <p class="text-white opacity-80">Convert any URL or text into a scannable QR code instantly</p> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-2xl overflow-hidden qr-container"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <i class="fas fa-link text-purple-500 mr-2"></i> | |
| <label for="qr-input" class="block text-sm font-medium text-gray-700">Enter URL or Text</label> | |
| </div> | |
| <div class="flex"> | |
| <input type="text" id="qr-input" placeholder="https://example.com or any text" | |
| class="flex-1 min-w-0 block w-full px-3 py-2 rounded-l-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"> | |
| <button id="generate-btn" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-r-md text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 transition-colors"> | |
| Generate | |
| </button> | |
| </div> | |
| <div class="mt-4 flex items-center"> | |
| <input type="color" id="color-picker" value="#000000" class="w-8 h-8 border border-gray-300 rounded cursor-pointer"> | |
| <label for="color-picker" class="ml-2 text-sm text-gray-600">QR Color</label> | |
| <div class="ml-4 flex items-center"> | |
| <input type="range" id="size-slider" min="100" max="300" value="200" class="w-24"> | |
| <span id="size-value" class="ml-2 text-sm text-gray-600">200px</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-6 bg-gray-50 border-t border-gray-200 flex flex-col items-center"> | |
| <div id="qr-code" class="mb-4 p-4 bg-white rounded-lg border border-gray-200 fade-in hidden"> | |
| <!-- QR code will appear here --> | |
| </div> | |
| <div id="error-message" class="text-red-500 text-sm mb-4 hidden"> | |
| Please enter some text or URL to generate QR code | |
| </div> | |
| <button id="download-btn" class="download-btn inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 hidden"> | |
| <i class="fas fa-download mr-2"></i> Download QR Code | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-6 text-center text-white text-sm opacity-70"> | |
| <p>Scan QR codes with your smartphone camera or any QR scanner app</p> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const qrInput = document.getElementById('qr-input'); | |
| const generateBtn = document.getElementById('generate-btn'); | |
| const qrCodeDiv = document.getElementById('qr-code'); | |
| const errorMessage = document.getElementById('error-message'); | |
| const downloadBtn = document.getElementById('download-btn'); | |
| const colorPicker = document.getElementById('color-picker'); | |
| const sizeSlider = document.getElementById('size-slider'); | |
| const sizeValue = document.getElementById('size-value'); | |
| let currentQRCodeUrl = ''; | |
| // Update size display | |
| sizeSlider.addEventListener('input', function() { | |
| sizeValue.textContent = `${this.value}px`; | |
| }); | |
| generateBtn.addEventListener('click', generateQRCode); | |
| qrInput.addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') generateQRCode(); | |
| }); | |
| downloadBtn.addEventListener('click', function() { | |
| if (!currentQRCodeUrl) return; | |
| const link = document.createElement('a'); | |
| link.href = currentQRCodeUrl; | |
| link.download = 'qr-code.png'; | |
| document.body.appendChild(link); | |
| link.click(); | |
| document.body.removeChild(link); | |
| }); | |
| function generateQRCode() { | |
| const inputText = qrInput.value.trim(); | |
| const color = colorPicker.value; | |
| const size = parseInt(sizeSlider.value); | |
| if (!inputText) { | |
| errorMessage.classList.remove('hidden'); | |
| qrCodeDiv.classList.add('hidden'); | |
| downloadBtn.classList.add('hidden'); | |
| return; | |
| } | |
| errorMessage.classList.add('hidden'); | |
| // Clear previous QR code | |
| qrCodeDiv.innerHTML = ''; | |
| // Generate new QR code | |
| QRCode.toDataURL(inputText, { | |
| color: { | |
| dark: color, | |
| light: '#ffffff' | |
| }, | |
| width: size, | |
| margin: 1 | |
| }, function(err, url) { | |
| if (err) { | |
| console.error(err); | |
| return; | |
| } | |
| currentQRCodeUrl = url; | |
| const img = document.createElement('img'); | |
| img.src = url; | |
| img.alt = 'QR Code'; | |
| img.className = 'mx-auto'; | |
| qrCodeDiv.appendChild(img); | |
| qrCodeDiv.classList.remove('hidden'); | |
| downloadBtn.classList.remove('hidden'); | |
| // Add fade-in effect | |
| qrCodeDiv.classList.add('fade-in'); | |
| setTimeout(() => { | |
| qrCodeDiv.classList.remove('fade-in'); | |
| }, 500); | |
| }); | |
| } | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=MarkTheArtist/qr-code-generator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |