forked from bizzycola/qrcode-generator
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
74 lines (66 loc) · 3.1 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
<!DOCTYPE html>
<html>
<head>
<title>QR Code Generator</title>
<link href="lib/tailwind.min.css" rel="stylesheet" type="text/css" />
<style>
html,
body,
#app {
height: 100vh;
margin: 0;
padding: 0;
font-family: 'Inter', sans-serif;
}
</style>
</head>
<body>
<div class="w-full h-full bg-gray-800 absolute flex flex-row justify-center items-center">
<div class="bg-gray-300 m-auto shadow-lg p-5 rounded">
<div class="flex flex-col justify-center w-full h-full items-center">
<div class="flex flex-row items-center h-10 rounded border-gray-900 bg-gray-800 border-1 text-white ">
<a class="flex-2 p-2 block flex flex-row items-center justify-center hover:bg-gray-700 h-full" href="https://github.com/zxing/zxing/wiki/Barcode-Contents" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true" role="img" width="1em" height="1em"
preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
<g fill="none">
<path
d="M13 22h-3v-3h3v3zm0-5h-3v-.007c0-1.65 0-3.075.672-4.073a6.304 6.304 0 0 1 1.913-1.62c.334-.214.649-.417.914-.628a3.712 3.712 0 0 0 1.332-3.824A3.033 3.033 0 0 0 9 8H6a6 6 0 0 1 6-6a6.04 6.04 0 0 1 5.434 3.366a6.017 6.017 0 0 1-.934 6.3c-.453.502-.96.95-1.514 1.337a7.248 7.248 0 0 0-1.316 1.167A4.23 4.23 0 0 0 13 17z"
fill="currentColor" />
</g>
</svg>
</a>
<input type="text" placeholder="Content"
class="h-full pr-4 pl-1 flex-1 text-current bg-transparent focus:outline-none" id="linkBox"
value="https://google.com">
<button class="h-full flex-2 pr-2 pl-2 border-l-gray-900 border-l-1 hover:bg-gray-700"
id="genBtn">Generate</button>
</div>
<div id="qrcode" class="m-2" style="border: 10px solid white;"></div>
</div>
</div>
</div>
<script src="lib/qrcode.min.js"></script>
<script>
window.onload = () => {
// Check query params
const params = new Proxy(new URLSearchParams(window.location.search), {
get: (searchParams, prop) => searchParams.get(prop),
});
let btn = document.getElementById("genBtn")
let link = document.getElementById("linkBox")
let qr = document.getElementById("qrcode");
var gen = new QRCode(qr)
btn.onclick = () => {
gen.makeCode(link.value)
}
const qlink = params.link
if(qlink && qlink.trim() !== '') {
link.value = qlink
console.log('link', qlink)
gen.makeCode(qlink)
}
}
</script>
</body>
</html>