-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
130 lines (106 loc) · 6.64 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
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
<html>
<head>
<title>
QR Code Generator
</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="w-full h-screen px-40 py-20 bg-gradient-to-b from-blue-600 to-white">
<div class="w-full h-[550px] border rounded-3xl bg-white p-3"> <!--This is the white bezel-->
<div class="w-full h-full border rounded-2xl bg-blue-100 p-3 md:flex space-x-2"> <!--This is the blue background div-->
<div class="w-[10%] h-full rounded-xl flex-col space-y-6 p-2"> <!--This is the div for navigation of different qr code makers-->
<div class="w-full h-[13%] border-2 border-white bg-white rounded-full "> <!--This is the div for adding image-->
<img src="static/img/my-image.jpeg" alt="my image" class="rounded-full">
</div>
<div class="w-full h-[80%] border-2 border-white bg-white rounded-full flex-col space-y-5 p-2 pt-5">
<div class="w-10 h-10 rounded-full bg-blue-600"></div>
<div class="w-10 h-10 rounded-full bg-blue-600"></div>
<div class="w-10 h-10 rounded-full bg-blue-600"></div>
<div class="w-10 h-10 rounded-full bg-blue-600"></div>
<div class="w-10 h-10 rounded-full bg-blue-600"></div>
<div class="w-10 h-10 rounded-full bg-blue-600"></div>
</div>
</div>
<div class="w-[50%] h-full rounded-xl"> <!--This is the div where there is the text field for adding links and text-->
<div class="py-24 px-4 flex-col space-y-10">
<p class="text-5xl font-semibold font-sans text-blue-700">Enter your text</p>
<div class="flex space-x-5 p-2">
<input type="text" class="bg-white w-[80%] border-white border-2 p-2 rounded-xl" id="text-input">
<button class="w-[20%] bg-blue-600 text-white text-2xl font-mono font-bold rounded-xl ring" id="generate-button">-></button>
</div>
<div></div>
</div>
</div>
<div class="w-[40%] h-full border-2 border-blue-800 bg-blue-800 rounded-xl space-y-5 flex-col p-4"> <!--This is the div where the qr code is displayex-->
<div class="w-full h-56 p-4 flex justify-center"> <!--This div stores the qr code-->
<div class="w-52 h-52 rounded-xl flex justify-center p-4" id="qrcode" style="background-color: white;"> <!--This is the div that gets updated with the new qr code image!!-->
<img src="static/img/qrcode.png" alt="qr code" class="rounded-xl border-2 border-white">
</div>
</div>
<div class="w-full h-32 px-3">
<div class="w-full h-full bg-white/30 rounded-xl flex-col p-2">
<p class="text-white font-semibold">Background color</p>
<div class="flex justify-between py-6 px-2">
<button type="button" class="w-10 h-10 border border-white bg-yellow-500 rounded-xl" onclick="document.getElementById('qrcode').style.background = 'bg-yellow-500'"></button>
<button type="button" class="w-10 h-10 border border-white bg-blue-500 rounded-xl"></button>
<button type="button" class="w-10 h-10 border border-white bg-green-500 rounded-xl"></button>
<button type="button" class="w-10 h-10 border border-white bg-black rounded-xl"></button>
</div>
</div>
</div>
<div class="w-full h-16 flex justify-between px-4 py-1">
<!-- <button type="button" class="text-white text-xl font-mono font-bold px-8 rounded-3xl bg-yellow-500">↓ JPG</button> -->
<button type="button" class="text-white text-xl w-full font-mono font-bold px-6 py-3 rounded-3xl bg-sky-400 flex justify-center" id="png-download-button">
<img src="static/img/download-svgrepo-com.svg" alt="download image" class="text-white w-6 mx-1 fill-white"> PNG</button>
</div>
</div>
</div>
</div>
</div>
<script src="qrcode.min.js"></script>
<script>
// Get references to the input field, button, and QR code div
const inputField = document.getElementById('text-input');
const generateButton = document.getElementById('generate-button');
const qrCodeDiv = document.getElementById('qrcode');
// Add click event listener to the generate button
generateButton.addEventListener('click', generateQRCode);
// Function to generate the QR code
function generateQRCode() {
// Get the text value from the input field
const text = inputField.value;
// Clear the previous QR code, if any
qrCodeDiv.innerHTML = '';
// Create the QR code using qrcode.js
const qrCode = new QRCode(qrCodeDiv, {
text: text,
width: 300,
height: 300,
});
}
const pngDownloadButton = document.getElementById('png-download-button');
pngDownloadButton.addEventListener('click', downloadQRCodePNG);
function downloadQRCodePNG() {
const text = inputField.value;
qrCodeDiv.innerHTML = '';
const qrCode = new QRCode(qrCodeDiv, {
text: text,
width: 300,
height: 300,
});
const canvas = document.createElement('canvas');
canvas.width = qrCodeDiv.offsetWidth;
canvas.height = qrCodeDiv.offsetHeight;
const context = canvas.getContext('2d');
qrCode.drawToCanvas(0, 0, canvas.width, canvas.height);
const dataURL = canvas.toDataURL('image/png');
const link = document.createElement('a');
link.href = dataURL;
link.download = 'qrcode.png';
link.click();
}
// qrcode.make("hello");
</script>
</body>
</html>