-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
60 lines (54 loc) · 2.97 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Static QR CodeGEN V_0.1</title>
<!This Static QR Code-Generator can make QR Code of any Text or Link. You will get the QR Code in Image format. We will make it using HTML CSS and JavaScript. Still coming up Generate fully customized QR Codes, with color & shape, logo and keep track of how many people scan your QR Codes, from where and on what date.>
<link rel="stylesheet" href="QRcode.css">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
<body>
<CENTER>
<a href="https://naga-juna.github.io/Static-QR-Code-Generator"><img src="https://raw.githubusercontent.com/NAGA-JUNA/Static-QR-Code-Generator/main/logo.png" alt="Vist Here"/></a>
</CENTER>
<div class="container">
<div class="animate__zoomOut">Enter Your Text or URL</div>
<input type="text" placeholder="Text or URL" id="qrText">
<div id="imgbox">
<img src="" id="qrImage">
</div>
<button onclick="generateQR()">Generate QR code</button>
<div class="mt-2 mt-lg-0 d-flex flex-items-center">
<a aria-label="Homepage" title="GitHub" class="footer-octicon mr-2" href="https://github.com/NAGA-JUNA">
<svg aria-hidden="true" height="24" viewBox="0 0 16 16" version="1.1" width="24" data-view-component="true" class="octicon octicon-mark-github">
<path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path>
</svg>
</a> <span>
<a><b>© 2023 Develop by <a aria-label="Homepage" title="GitHub" class="footer-octicon mr-2" href="https://www.linkedin.com/in/nagajuna/">NAGARJUNA Y.</b></a>
</span>
</div>
</div>
<script>
let imgbox = document.getElementById("imgbox");
let qrImage = document.getElementById("qrImage");
let qrText = document.getElementById("qrText");
function generateQR(){
if(qrText.value.length > 0){
qrImage.src = "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=" +qrText.value;
imgbox.classList.add("show-img");
}
else{
qrText.classList.add('error');
setTimeout(()=>{
qrText.classList.remove('error')
},1000)
}
}
</script>
</body>
</html>