forked from emran-alhaddad/qrcode-generator
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
78 lines (73 loc) · 3.29 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fancy QR Code Generator</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');
body {
font-family: 'Poppins', sans-serif;
}
</style>
</head>
<body class="bg-gradient-to-br from-purple-400 to-indigo-600 min-h-screen flex items-center justify-center p-4">
<div class="bg-white rounded-lg shadow-2xl p-8 max-w-md w-full">
<h1 class="text-3xl font-bold text-center mb-6 text-indigo-700">Fancy QR Code Generator</h1>
<div class="mb-6">
<label for="url" class="block text-sm font-medium text-gray-700 mb-2">Enter URL</label>
<input type="url" id="url" placeholder="https://example.com"
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
</div>
<button id="generate"
class="w-full bg-indigo-600 text-white font-semibold py-2 px-4 rounded-md hover:bg-indigo-700 transition duration-300 ease-in-out transform hover:scale-105">
Generate QR Code
</button>
<div id="qrcode" class="mt-8 flex justify-center"></div>
<div id="download-container" class="mt-4 text-center hidden">
<a id="download" download="qrcode.png"
class="inline-block bg-green-500 text-white font-semibold py-2 px-4 rounded-md hover:bg-green-600 transition duration-300 ease-in-out transform hover:scale-105">
Download QR Code
</a>
</div>
</div>
<script>
const urlInput = document.getElementById('url');
const generateBtn = document.getElementById('generate');
const qrcodeContainer = document.getElementById('qrcode');
const downloadContainer = document.getElementById('download-container');
const downloadLink = document.getElementById('download');
let qr = null;
generateBtn.addEventListener('click', () => {
const url = urlInput.value;
if (url) {
if (qr) {
qr.clear();
qrcodeContainer.innerHTML = '';
}
qr = new QRCode(qrcodeContainer, {
text: url,
width: 200,
height: 200,
colorDark: "#5a67d8",
colorLight: "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});
// Show download button after QR code is generated
setTimeout(() => {
const img = qrcodeContainer.querySelector('img');
downloadLink.href = img.src;
downloadContainer.classList.remove('hidden');
}, 100);
}
});
urlInput.addEventListener('keyup', (e) => {
if (e.key === 'Enter') {
generateBtn.click();
}
});
</script>
</body>
</html>