Spaces:
Running
Running
File size: 8,361 Bytes
9db3b5f | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 | <!DOCTYPE html>
<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> |