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
+
+
+
+
+
Download QR Code
+
+
+
+
+
+
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,