Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>QRGen | Text to QR Code Generator</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/qrcode.min.js"></script> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%); | |
| } | |
| .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.3s ease; | |
| } | |
| .download-btn:hover { | |
| transform: scale(1.05); | |
| } | |
| .glow { | |
| box-shadow: 0 0 15px rgba(167, 119, 227, 0.5); | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen bg-gray-50"> | |
| <header class="gradient-bg text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-qrcode text-3xl"></i> | |
| <h1 class="text-2xl font-bold">QRGen</h1> | |
| </div> | |
| <nav> | |
| <ul class="flex space-x-6"> | |
| <li><a href="#" class="hover:underline">Home</a></li> | |
| <li><a href="#" class="hover:underline">Features</a></li> | |
| <li><a href="#" class="hover:underline">About</a></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="container mx-auto px-4 py-12"> | |
| <section class="text-center mb-16"> | |
| <h2 class="text-4xl font-bold text-gray-800 mb-4">Text to QR Code Generator</h2> | |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto">Convert any text or URL into a QR code instantly. Free, fast, and easy to use!</p> | |
| </section> | |
| <section class="flex flex-col lg:flex-row gap-8 items-center justify-center"> | |
| <div class="w-full lg:w-1/2 bg-white rounded-xl shadow-lg p-8 qr-container"> | |
| <div class="mb-6"> | |
| <label for="qr-text" class="block text-gray-700 font-medium mb-2">Enter Text or URL</label> | |
| <div class="relative"> | |
| <textarea id="qr-text" rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="Type your text or URL here..."></textarea> | |
| <div class="absolute right-3 bottom-3 flex space-x-2"> | |
| <button id="clear-btn" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-trash-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 font-medium mb-2">QR Code Options</label> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label for="qr-size" class="block text-sm text-gray-600 mb-1">Size (px)</label> | |
| <select id="qr-size" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"> | |
| <option value="100">100x100</option> | |
| <option value="150">150x150</option> | |
| <option value="200" selected>200x200</option> | |
| <option value="250">250x250</option> | |
| <option value="300">300x300</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="qr-color" class="block text-sm text-gray-600 mb-1">Color</label> | |
| <input type="color" id="qr-color" value="#000000" class="w-full h-10 border border-gray-300 rounded-lg cursor-pointer"> | |
| </div> | |
| </div> | |
| </div> | |
| <button id="generate-btn" class="w-full gradient-bg text-white font-bold py-3 px-4 rounded-lg hover:opacity-90 transition duration-300 flex items-center justify-center space-x-2"> | |
| <i class="fas fa-qrcode"></i> | |
| <span>Generate QR Code</span> | |
| </button> | |
| </div> | |
| <div class="w-full lg:w-1/2 bg-white rounded-xl shadow-lg p-8 qr-container flex flex-col items-center"> | |
| <div id="qr-result" class="mb-6 p-4 border-2 border-dashed border-gray-200 rounded-lg flex items-center justify-center"> | |
| <p class="text-gray-500">Your QR code will appear here</p> | |
| </div> | |
| <div id="download-section" class="hidden w-full"> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> | |
| <button id="download-png" class="download-btn bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg flex items-center space-x-2"> | |
| <i class="fas fa-download"></i> | |
| <span>PNG</span> | |
| </button> | |
| <button id="download-svg" class="download-btn bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-4 rounded-lg flex items-center space-x-2"> | |
| <i class="fas fa-download"></i> | |
| <span>SVG</span> | |
| </button> | |
| <button id="download-jpg" class="download-btn bg-purple-500 hover:bg-purple-600 text-white font-medium py-2 px-4 rounded-lg flex items-center space-x-2"> | |
| <i class="fas fa-download"></i> | |
| <span>JPG</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="mt-20"> | |
| <h3 class="text-2xl font-bold text-center text-gray-800 mb-8">How It Works</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition duration-300"> | |
| <div class="text-purple-500 text-4xl mb-4"> | |
| <i class="fas fa-keyboard"></i> | |
| </div> | |
| <h4 class="text-xl font-semibold mb-2">1. Enter Your Text</h4> | |
| <p class="text-gray-600">Type or paste any text, URL, or contact information you want to encode into a QR code.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition duration-300"> | |
| <div class="text-purple-500 text-4xl mb-4"> | |
| <i class="fas fa-sliders-h"></i> | |
| </div> | |
| <h4 class="text-xl font-semibold mb-2">2. Customize Options</h4> | |
| <p class="text-gray-600">Adjust the size and color of your QR code to match your preferences or branding.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition duration-300"> | |
| <div class="text-purple-500 text-4xl mb-4"> | |
| <i class="fas fa-qrcode pulse"></i> | |
| </div> | |
| <h4 class="text-xl font-semibold mb-2">3. Generate & Download</h4> | |
| <p class="text-gray-600">Create your QR code instantly and download it in PNG, SVG, or JPG format.</p> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="gradient-bg text-white py-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <h3 class="text-xl font-bold">QRGen</h3> | |
| <p class="text-purple-100">The easiest way to create QR codes</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="hover:text-purple-200"><i class="fab fa-twitter text-xl"></i></a> | |
| <a href="#" class="hover:text-purple-200"><i class="fab fa-github text-xl"></i></a> | |
| <a href="#" class="hover:text-purple-200"><i class="fab fa-linkedin text-xl"></i></a> | |
| </div> | |
| </div> | |
| <div class="border-t border-purple-300 mt-6 pt-6 text-center text-purple-100"> | |
| <p>© 2023 QRGen. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const qrText = document.getElementById('qr-text'); | |
| const qrResult = document.getElementById('qr-result'); | |
| const generateBtn = document.getElementById('generate-btn'); | |
| const clearBtn = document.getElementById('clear-btn'); | |
| const qrSize = document.getElementById('qr-size'); | |
| const qrColor = document.getElementById('qr-color'); | |
| const downloadPng = document.getElementById('download-png'); | |
| const downloadSvg = document.getElementById('download-svg'); | |
| const downloadJpg = document.getElementById('download-jpg'); | |
| const downloadSection = document.getElementById('download-section'); | |
| let currentQRCode = null; | |
| // Generate QR code | |
| generateBtn.addEventListener('click', function() { | |
| const text = qrText.value.trim(); | |
| const size = parseInt(qrSize.value); | |
| const color = qrColor.value; | |
| if (!text) { | |
| alert('Please enter some text or URL to generate QR code'); | |
| return; | |
| } | |
| qrResult.innerHTML = ''; | |
| QRCode.toCanvas(text, { | |
| width: size, | |
| color: { | |
| dark: color, | |
| light: '#ffffff' | |
| }, | |
| margin: 2 | |
| }, function(err, canvas) { | |
| if (err) { | |
| console.error(err); | |
| qrResult.innerHTML = '<p class="text-red-500">Error generating QR code</p>'; | |
| return; | |
| } | |
| currentQRCode = canvas; | |
| qrResult.appendChild(canvas); | |
| downloadSection.classList.remove('hidden'); | |
| // Add glow effect | |
| canvas.classList.add('glow'); | |
| setTimeout(() => { | |
| canvas.classList.remove('glow'); | |
| }, 2000); | |
| }); | |
| }); | |
| // Clear input | |
| clearBtn.addEventListener('click', function() { | |
| qrText.value = ''; | |
| }); | |
| // Download PNG | |
| downloadPng.addEventListener('click', function() { | |
| if (!currentQRCode) return; | |
| const link = document.createElement('a'); | |
| link.download = 'qr-code.png'; | |
| link.href = currentQRCode.toDataURL('image/png'); | |
| link.click(); | |
| }); | |
| // Download SVG | |
| downloadSvg.addEventListener('click', function() { | |
| const text = qrText.value.trim(); | |
| if (!text) return; | |
| QRCode.toString(text, { | |
| type: 'svg', | |
| color: { | |
| dark: qrColor.value, | |
| light: '#ffffff' | |
| }, | |
| margin: 2 | |
| }, function(err, svg) { | |
| if (err) { | |
| console.error(err); | |
| return; | |
| } | |
| const blob = new Blob([svg], {type: 'image/svg+xml'}); | |
| const url = URL.createObjectURL(blob); | |
| const link = document.createElement('a'); | |
| link.download = 'qr-code.svg'; | |
| link.href = url; | |
| link.click(); | |
| URL.revokeObjectURL(url); | |
| }); | |
| }); | |
| // Download JPG | |
| downloadJpg.addEventListener('click', function() { | |
| if (!currentQRCode) return; | |
| const link = document.createElement('a'); | |
| link.download = 'qr-code.jpg'; | |
| link.href = currentQRCode.toDataURL('image/jpeg', 0.9); | |
| link.click(); | |
| }); | |
| // Example QR code on page load | |
| QRCode.toCanvas('https://example.com', { | |
| width: 150, | |
| margin: 2 | |
| }, function(err, canvas) { | |
| if (err) return; | |
| qrResult.innerHTML = ''; | |
| qrResult.appendChild(canvas); | |
| qrText.value = 'https://example.com'; | |
| }); | |
| }); | |
| </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=shubham6924/text-to-qr" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |