diff --git a/QRCode/psykatsamanta/download.png b/QRCode/psykatsamanta/download.png new file mode 100644 index 000000000..fc000925f Binary files /dev/null and b/QRCode/psykatsamanta/download.png differ diff --git a/QRCode/psykatsamanta/index.html b/QRCode/psykatsamanta/index.html new file mode 100644 index 000000000..ceaaf2578 --- /dev/null +++ b/QRCode/psykatsamanta/index.html @@ -0,0 +1,50 @@ + + + + + + + + + QR-Code-Reader-Generator + + +
+
+
+ + image not available +
+ +

Upload Your QR Code Here

+
+
+
+ +
+ + +
+
+
+
+
+
+

Paste a URL or enter text here to create QR Code

+
+ + +
+
+ QR Code Not Available + +
+
+
+ + + diff --git a/QRCode/psykatsamanta/script.js b/QRCode/psykatsamanta/script.js new file mode 100644 index 000000000..1d73374de --- /dev/null +++ b/QRCode/psykatsamanta/script.js @@ -0,0 +1,107 @@ +let container1 = document.getElementById("container1"); +let form = container1.querySelector("form"); +let fileInput = form.querySelector("input"); +let infoText = form.querySelector("p"); +let QRData = container1.querySelector("textarea"); +let QRImg = form.querySelector("img"); +let copyBtn = document.getElementById("copy"); +let resetBtn = document.getElementById("reset"); + +form.onclick = () => { + fileInput.click(); +}; + +fileInput.onchange = (e) => { + let file = e.target.files[0]; + if (!file) { + return; + } + let formData = new FormData(); + formData.append("file", file); + fetchRequest(formData, file); +}; + +let fetchRequest = (formData, file) => { + infoText.innerText = "QR Code is uploading ...."; + fetch("http://api.qrserver.com/v1/read-qr-code/", { + method: "POST", + body: formData, + }) + .then((res) => res.json()) + .then((result) => { + result = result[0].symbol[0].data; + infoText.innerText = result + ? "Upload QR Code To Scan" + : "Couldn't Scan QR Code"; + if (!result) { + return; + } + QRData.innerText = result; + QRImg.src = URL.createObjectURL(file); + container1.classList.add("active"); + }) + .catch(() => { + QRData.innerText = "Couldn't Scan The QR Code"; + }); +}; + +copyBtn.onclick = () => { + let text = QRData.textContent; + navigator.clipboard.writeText(text); + copyBtn.style.background = "#2532a5"; + copyBtn.style.color = "#fff"; + setTimeout(() => { + copyBtn.style.background = "#fff"; + copyBtn.style.color = "#3744bd"; + }, 100); +}; + +resetBtn.onclick = () => { + resetBtn.style.background = "#2532a5"; + resetBtn.style.color = "#fff"; + setTimeout(() => { + resetBtn.style.background = "#fff"; + resetBtn.style.color = "#3744bd"; + }, 100); + container1.classList.remove("active"); +}; + +let container2 = document.getElementById("container2"); +let QRText = container2.querySelector(".form input"); +let generateBtn = document.getElementById("generate"); +let qrImg = container2.querySelector(".qr-code img"); +let downloadBtn = document.getElementById("download"); + +generateBtn.onclick = () => { + let QRValue = QRText.value; + if (!QRValue) { + return; + } + qrImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${QRValue}`; + qrImg.onload = () => { + container2.classList.add("activate"); + }; +}; + +downloadBtn.onclick = () => { + let ImageURL = `https://api.qrserver.com/v1/create-qr-code/?size=500x500&data=${QRText.value}`; + //Fetching the response as a blob + fetch(ImageURL) + .then((res) => res.blob()) + .then((file) => { + //URL.createObjectURL() creates a url of passed object + let tempURL = URL.createObjectURL(file); + //Create a anchor element + let aTag = document.createElement("a"); + //Set its url as the tempurl + aTag.href = tempURL; + //Set the name of the downloaded file as filename + aTag.download = file.type; + document.body.appendChild(aTag); + // console.log(file); + // console.log(aTag.download); + //Clicking the aTag so that the file download + aTag.click(); + aTag.remove(); + }); +}; diff --git a/QRCode/psykatsamanta/style.css b/QRCode/psykatsamanta/style.css new file mode 100644 index 000000000..baa32c3eb --- /dev/null +++ b/QRCode/psykatsamanta/style.css @@ -0,0 +1,215 @@ +@import url("https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Dancing+Script&family=Poppins&display=swap"); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Poppins", sans-serif; +} + +body { + position: relative; + height: 100vh; + background-color: #e3f2fd; + display: flex; + justify-content: center; + align-items: center; +} + +.reader, +.generator { + position: relative; + width: 50vw; +} + +#container1 { + position: absolute; + height: 230px; + width: 400px; + background-color: #8675e7; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border-radius: 7px; + box-shadow: 10px 10px 10px -5px rgba(0, 0, 0, 0.3); + padding: 15px; + transition: height 0.2s ease; +} + +#container1.active { + height: 450px; +} + +form { + position: relative; + height: 200px; + background-color: #fff; + border-radius: 7px; + display: flex; + justify-content: center; + align-items: center; + text-align: center; + cursor: pointer; +} + +#container1.active form { + pointer-events: none; +} + +form img { + position: relative; + height: 180px; + width: 180px; + display: none; +} + +#container1.active form img { + display: block; +} + +#container1.active form .upload { + position: relative; + display: none; +} + +form .upload i { + font-size: 3rem; + color: #878dc7; +} + +form .upload p { + font-size: 18px; + margin-top: 10px; + color: #878dc7; +} + +.content { + margin-top: 15px; + /* background-color: red; */ + height: 200px; + border-radius: 5px; + display: flex; + flex-direction: column; + justify-content: space-between; + opacity: 0; + user-select: none; +} + +#container1.active .content { + opacity: 1; + pointer-events: auto; + transition: opacity 0.5s 0.05s ease; +} + +.content textarea { + width: 100%; + height: 70%; + resize: none; + border-radius: 5px; + background-color: transparent; + padding: 7px; + font-size: 15px; + color: #fff; + border: 1px solid #fff; +} + +.content .button { + display: flex; + justify-content: space-between; + align-items: center; +} + +.content .button button { + padding: 10px; + width: calc(100% / 2 - 15px); + outline: none; + border: none; + background-color: #fff; + font-size: 16px; + color: #3744bd; + cursor: pointer; +} + +#container2 { + position: absolute; + width: 350px; + height: 190px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: #fff; + padding: 15px; + border-radius: 7px; + box-shadow: 10px 10px 10px -5px rgba(0, 0, 0, 0.3); + transition: height 0.2s ease; +} + +#container2.activate { + height: 480px; +} + +#container2 p { + position: relative; + font-size: 16px; + font-weight: bold; +} + +#container2 .form { + margin: 10px 0px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +#container2 .form input { + width: 100%; + padding: 8px; + font-size: 16px; + outline: none; + border: 1px solid #000; + border-radius: 5px; + margin-bottom: 5px; + background-color: transparent; +} + +#container2 .form button, +#container2 .qr-code button { + width: 100%; + margin: 10px 0px; + height: 40px; + font-size: 16px; + color: #fff; + background: #4754c5; + outline: none; + border: none; + cursor: pointer; + border-radius: 5px; +} + +#container2 .qr-code button { + margin-top: 25px; +} + +#container2 .qr-code img { + height: 200px; + width: 200px; +} + +#container2 .qr-code { + position: relative; + /* background-color: #fff; */ + display: flex; + justify-content: center; + align-items: center; + opacity: 0; + user-select: none; + padding: 10px; + flex-direction: column; +} + +#container2.activate .qr-code { + pointer-events: auto; + opacity: 1; + transition: opacity 0.5s 0.05s ease; +} \ No newline at end of file