From a015cf69171c9e101b80ed5c1bf8b04d51154427 Mon Sep 17 00:00:00 2001 From: Harshad Dudhabarve <166581826+nota63@users.noreply.github.com> Date: Wed, 15 May 2024 12:37:04 +0530 Subject: [PATCH] Add files via upload --- index.html | 56 ++++++ script.js | 53 ++++++ styles.css | 518 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 627 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 styles.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..9334389 --- /dev/null +++ b/index.html @@ -0,0 +1,56 @@ + + + + + + QR Code Generator + + + +
+

QR Code Generator

+ + + +
+ +
+
+ + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..abce46f --- /dev/null +++ b/script.js @@ -0,0 +1,53 @@ +function generateQR() { + const inputText = document.getElementById('inputText').value; + const inputFile = document.getElementById('inputFile').files[0]; + const qrcodeContainer = document.getElementById('qrcode'); + qrcodeContainer.innerHTML = ''; + + if (inputText.trim() !== '' || inputFile) { + if (inputFile) { + const reader = new FileReader(); + reader.onload = function(event) { + const base64Image = event.target.result; + createQRCode(base64Image); + }; + reader.readAsDataURL(inputFile); + } else { + createQRCode(inputText); + } + } else { + alert('Please enter a valid text or URL, or select an image.'); + } +} + +function createQRCode(data) { + const qrcodeContainer = document.getElementById('qrcode'); + const downloadLink = document.getElementById('downloadLink'); + + const qrCode = new QRCode(qrcodeContainer, { + text: data, + width: 200, + height: 200, + colorDark: "#000", + colorLight: "#ffffff", + correctLevel: QRCode.CorrectLevel.H + }); + + qrcodeContainer.style.opacity = 1; + + downloadLink.style.display = 'block'; + + const qrCanvas = qrcodeContainer.querySelector('canvas'); + const qrDataUrl = qrCanvas.toDataURL('image/png'); + downloadLink.href = qrDataUrl; + + showNotification('QR Code generated successfully!'); +} + +function showNotification(message) { + const notification = document.getElementById('notification'); + notification.innerText = message; + setTimeout(() => { + notification.innerText = ''; + }, 5000); +} diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..d07ab7f --- /dev/null +++ b/styles.css @@ -0,0 +1,518 @@ +body { + font-family: Arial, sans-serif; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + background-color: #f0f0f0; +} + +.container { + text-align: center; + background-color: white; + padding: 20px; + border-radius: 10px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +input { + width: 80%; + padding: 10px; + margin-bottom: 20px; + border: 1px solid #ccc; + border-radius: 5px; +} + +#qrcode { + margin-top: 20px; + opacity: 0; + transition: opacity 3s; +} + +.qrcode img { + border: 5px solid #007bff; + border-radius: 10px; +} + +#notification { + margin-top: 20px; + color: green; + font-weight: bold; +} + +a { + display: block; + margin-top: 20px; + padding: 10px 20px; + border: none; + background-color: #28a745; + color: white; + border-radius: 5px; + text-decoration: none; +} + +a:hover { + background-color: #218838; +} + +/* Stylish button styles */ +.button { + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + gap: 10px; + font-size: 14px; + background-image: linear-gradient(#3470fa, #313ed7); + color: white; + border: solid 2px #0618db; + height: 50px; + padding: 0px 20px; + border-radius: 5px; + font-weight: 600; + transform: scale(0.89); + position: relative; +} + +.button:not(:hover) .hide, +.button:not(:hover) .icon::before, +.button:not(:hover) .icon::after { + opacity: 0; + visibility: hidden; + transform: scale(1.4); +} + +.hide { + transition: all 0.2s ease; +} + +.button:active { + background-image: linear-gradient(#313ed7, #3470fa); + border-color: #313ed7; +} + +.icon { + position: relative; +} + +.icon::before { + content: ""; + position: absolute; + left: 0; + top: 0; + width: 6px; + height: 6px; + transform: translate(-50%, -50%); + background-color: rgb(255, 0, 170); + border-radius: 100%; +} + +.icon::after { + content: ""; + position: absolute; + right: 0; + bottom: 0; + transform: translate(-19%, -60%); + width: 100px; + height: 33px; + background-color: transparent; + border-radius: 12px 22px 2px 2px; + border-right: solid 2px rgb(255, 0, 170); + border-top: solid 2px transparent; +} + +.icon .text-icon { + color: rgb(255, 0, 170); + position: absolute; + font-size: 12px; + left: -37px; + top: -38px; +} + +.icon svg { + width: 20px; + height: 20px; + border: solid 2px transparent; + display: flex; +} + +.button:hover .icon svg { + border: solid 2px rgba(255, 0, 170, 0.692); +} + +.padding-left { + position: absolute; + width: 20px; + height: 2px; + background-color: rgb(255, 0, 170); + left: 0; + top: 50%; + transform: translateY(-50%); +} + +.padding-left:before { + content: ""; + width: 2px; + height: 10px; + background-color: rgb(255, 0, 170); + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); +} + +.padding-left:after { + content: ""; + width: 2px; + height: 10px; + background-color: rgb(255, 0, 170); + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); +} + +.padding-left-line { + position: absolute; + width: 30px; + height: 2px; + background-color: rgb(255, 0, 170); + left: -24px; + top: 11px; + transform: rotate(-50deg); +} + +.padding-left-line::before { + content: ""; + position: absolute; + left: 0; + top: 0; + width: 6px; + height: 6px; + transform: translate(-50%, -50%); + background-color: rgb(255, 0, 170); + border-radius: 100%; +} + +.padding-left-text { + color: rgb(255, 0, 170); + font-size: 12px; + position: absolute; + white-space: nowrap; + transform: rotate(50deg); + bottom: 30px; + left: -67px; +} + +.padding-right { + position: absolute; + width: 20px; + height: 2px; + background-color: rgb(255, 0, 170); + right: 0; + top: 50%; + transform: translateY(-50%); +} + +.padding-right:before { + content: ""; + width: 2px; + height: 10px; + background-color: rgb(255, 0, 170); + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); +} + +.padding-right:after { + content: ""; + width: 2px; + height: 10px; + background-color: rgb(255, 0, 170); + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); +} + +.padding-right-line { + position: absolute; + width: 30px; + height: 2px; + background-color: rgb(255, 0, 170); + right: -24px; + top: 11px; + transform: rotate(50deg); +} + +.padding-right-line::before { + content: ""; + position: absolute; + left: 30px; + top: 0; + width: 6px; + height: 6px; + transform: translate(-50%, -50%); + background-color: rgb(255, 0, 170); + border-radius: 100%; +} + +.padding-right-text { + color: rgb(255, 0, 170); + font-size: 12px; + position: absolute; + white-space: nowrap; + transform: rotate(-50deg); + bottom: 33px; + left: 18px; +} + +.background { + position: absolute; +} + +.background::before { + content: ""; + position: absolute; + right: 27px; + bottom: -70px; + width: 100px; + height: 53px; + background-color: transparent; + border-radius: 0px 0px 22px 22px; + border-right: solid 2px rgb(255, 0, 170); + border-bottom: solid 2px transparent; +} + +.background::after { + content: ""; + position: absolute; + right: 25px; + bottom: -20px; + width: 6px; + height: 6px; + background-color: rgb(255, 0, 170); + border-radius: 100%; +} + +.background-text { + position: absolute; + color: rgb(255, 0, 170); + font-size: 12px; + bottom: -70px; + left: -115px; +} + +.border { + position: absolute; + right: 0; + top: 0; +} + +.border:before { + content: ""; + width: 15px; + height: 15px; + border: solid 2px rgb(255, 0, 170); + position: absolute; + right: 0%; + top: 0; + transform: translate(50%, -50%); + border-radius: 100%; +} + +.border:after { + content: ""; + width: 2px; + height: 25px; + background-color: rgb(255, 0, 170); + position: absolute; + right: -10px; + top: -15px; + transform: translate(50%, -50%) rotate(60deg); +} + +.border .border-text { + position: absolute; + color: rgb(255, 0, 170); + font-size: 12px; + right: -112px; + top: -30px; + white-space: nowrap; +} +body { + font-family: Arial, sans-serif; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + background-color: #f0f0f0; +} + +.container { + text-align: center; + background-color: white; + padding: 20px; + border-radius: 10px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +input[type="text"] { + width: 80%; + padding: 10px; + margin-bottom: 20px; + border: 1px solid #ccc; + border-radius: 5px; +} + +input[type="file"] { + display: block; + margin: 10px auto; +} + +#qrcode { + margin-top: 20px; + opacity: 0; + transition: opacity 3s; +} + +.qrcode img { + border: 5px solid #007bff; + border-radius: 10px; +} + +#notification { + margin-top: 20px; + color: green; + font-weight: bold; +} + +a { + display: block; + margin-top: 20px; + padding: 10px 20px; + border: none; + background-color: #28a745; + color: white; + border-radius: 5px; + text-decoration: none; +} + +a:hover { + background-color: #218838; +} + +/* Stylish button styles */ +.button { + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + gap: 10px; + font-size: 14px; + background-image: linear-gradient(#3470fa, #313ed7); + color: white; + border: solid 2px #0618db; + height: 50px; + padding: 0px 20px; + border-radius: 5px; + font-weight: 600; + transform: scale(0.89); + position: relative; +} + +.button:not(:hover) .hide, +.button:not(:hover) .icon::before, +.button:not(:hover) .icon::after { + opacity: 0; + visibility: hidden; + transform: scale(1.4); +} + +.hide { + transition: all 0.2s ease; +} + +.button:active { + background-image: linear-gradient(#313ed7, #3470fa); + border-color: #313ed7; +} + +.icon { + position: relative; +} + +.icon::before { + content: ""; + position: absolute; + left: 0; + top: 0; + width: 6px; + height: 6px; + transform: translate(-50%, -50%); + background-color: rgb(255, 0, 170); + border-radius: 100%; +} + +.icon::after { + content: ""; + position: absolute; + right: 0; + bottom: 0; + transform: translate(-19%, -60%); + width: 100px; + height: 33px; + background-color: transparent; + border-radius: 12px 22px 2px 2px; + border-right: solid 2px rgb(255, 0, 170); + border-top: solid 2px transparent; +} + +.icon .text-icon { + color: rgb(255, 0, 170); + position: absolute; + font-size: 12px; + left: -37px; + top: -38px; +} + +.icon svg { + width: 20px; + height: 20px; + border: solid 2px transparent; + display: flex; +} + +.button:hover .icon svg { + border: solid 2px rgba(255, 0, 170, 0.692); +} + +.padding-left { + position: absolute; + width: 20px; + height: 2px; + background-color: rgb(255, 0, 170); + left: 0; + top: 50%; + transform: translateY(-50%); +} + +.padding-left:before { + content: ""; + width: 2px; + height: 10px; + background-color: rgb(255, 0, 170); + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); +} + +.padding-left:after { + content: ""; + width: 2px; + height: 10px; + background-color: rgb(255,