-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
83 lines (75 loc) · 2.58 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
79
80
81
82
83
<!DOCTYPE html>
<html>
<head>
<title>QR Code Generator</title>
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@latest/dist/tailwind.min.css">
</head>
<style>
/* Center container */
.flex {
display: flex;
}
.justify-center {
justify-content: center;
}
.items-center {
align-items: center;
}
/* Add margin between QR code image and canvas */
.mb-4 {
margin-bottom: 1rem;
}
</style>
<body>
<div class="bg-gray-100 flex justify-center items-center h-screen">
<div class="shadow-md rounded-lg bg-white p-4">
<h1 class="text-2xl font-bold mb-2">QR Code Generator</h1>
<label for="url" class="text-lg font-medium mb-2 block">Enter URL:</label>
<input type="text" id="url" name="url" value="https://dr.dk" class="w-full p-2 border border-gray-400 rounded-md mb-2">
<div class="flex justify-center items-center mb-4">
<img id="qr-code" src="https://chart.googleapis.com/chart?cht=qr&chs=200x200&chl=https%3A%2F%2Fdr.dk" alt="QR code">
<canvas id="qr-canvas" width="200" height="200" class="ml-4"></canvas>
</div>
<button id="download-button" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mb-4">
Download QR code
</button>
<div class="text-center">
<p class="text-gray-500 text-sm">Scan the QR code to visit the website</p>
</div>
</div>
</div>
</body>
<script>
// Get DOM elements
const inputField = document.getElementById('url');
const qrCode = document.getElementById('qr-code');
const qrCanvas = document.getElementById('qr-canvas');
const downloadButton = document.getElementById('download-button');
// Listen for changes to the URL field
inputField.addEventListener('input', function() {
// Generate QR code image URL
const url = inputField.value.trim();
const qrCodeUrl = `https://chart.googleapis.com/chart?cht=qr&chs=200x200&chl=${encodeURIComponent(url)}`;
// Update QR code image and canvas
qrCode.src = qrCodeUrl;
const ctx = qrCanvas.getContext('2d');
const img = new Image();
img.src = qrCodeUrl;
img.addEventListener('load', function() {
ctx.drawImage(img, 0, 0, 200, 200);
});
});
// Listen for download button click
downloadButton.addEventListener('click', function() {
const url = inputField.value.trim();
const filename = `QR_${url.replace(/[\W_]+/g, "_")}.png`;
const downloadLink = document.createElement('a');
downloadLink.setAttribute('download', filename);
qrCanvas.toBlob(function(blob) {
const url = URL.createObjectURL(blob);
downloadLink.setAttribute('href', url);
downloadLink.click();
});
});
</script>
</html>