upgraded qrReaderResult

JeBance · Jan 27, 2025 · fc3a8e6 · fc3a8e6
1 parent dfb15e1
commit fc3a8e6
Show file tree

Hide file tree

Showing 3 changed files with 122 additions and 72 deletions.
diff --git a/app.js b/app.js
@@ -67,7 +67,7 @@ const printContent = (decodedText, decodedResult) => {
 		resultHeader.innerHTML = '';
 		resultContent.innerHTML = '';
 
-		let h = document.createElement('h');
+		let h = document.createElement('h1');
 		h.textContent = 'New ' + decodedResult.result.format.formatName + ' detected!';
 		resultHeader.append(h);
 
@@ -86,7 +86,36 @@ const shareContent = () => {
 		navigator.share({
 			title: scanResult.result.format.formatName,
 			text: scanResult.result.text
-		}).then(() => alert('Successful share'))
+		})
+		.then(() => alert('Successful share'))
 		.catch((e) => console.log('Error sharing', e));
 	}
 }
+
+const copyContent = () => {
+	navigator.clipboard.writeText(scanResult.result.text)
+		.then(() => alert('Successful copy'))
+		.catch((e) => console.log('Error copying', e));
+	}
+}
+
+const actionOnClick = (elem) => {
+	try {
+
+		switch(elem.id) {
+			case 'share':
+				shareContent();
+				break;
+
+			case 'copy':
+				copyContent();
+				break;
+
+			default:
+				break;
+		}
+
+	} catch(e) {
+		console.log(e);
+	}
+}
diff --git a/index.html b/index.html
@@ -17,38 +17,61 @@
 		<script src="app.js" defer></script>
 	</head>
 
-	<body>
-		<div id="wraper">
-			<div id="header">QR code scanner</div>
-			<div id="qrReader"></div>
-			<div id="qrReaderResult">
-				<div id="resultHeader" class="header"></div>
-				<div id="resultContent" class="content"></div>
-				<div id="resultShare" class="share">
-					<svg id="share" class="svg" aria-hidden="true" viewBox="0 0 227.216 227.216" version="1.1" xml:space="preserve">
-					<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
-					<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
-					<g id="SVGRepo_iconCarrier">
-					<path d="M175.897,141.476c-13.249,0-25.11,6.044-32.98,15.518l-51.194-29.066c1.592-4.48,2.467-9.297,2.467-14.317 c0-5.019-0.875-9.836-2.467-14.316l51.19-29.073c7.869,9.477,19.732,15.523,32.982,15.523c23.634,0,42.862-19.235,42.862-42.879 C218.759,19.229,199.531,0,175.897,0C152.26,0,133.03,19.229,133.03,42.865c0,5.02,0.874,9.838,2.467,14.319L84.304,86.258 c-7.869-9.472-19.729-15.514-32.975-15.514c-23.64,0-42.873,19.229-42.873,42.866c0,23.636,19.233,42.865,42.873,42.865 c13.246,0,25.105-6.042,32.974-15.513l51.194,29.067c-1.593,4.481-2.468,9.3-2.468,14.321c0,23.636,19.23,42.865,42.867,42.865 c23.634,0,42.862-19.23,42.862-42.865C218.759,160.71,199.531,141.476,175.897,141.476z M175.897,15 c15.363,0,27.862,12.5,27.862,27.865c0,15.373-12.499,27.879-27.862,27.879c-15.366,0-27.867-12.506-27.867-27.879 C148.03,27.5,160.531,15,175.897,15z M51.33,141.476c-15.369,0-27.873-12.501-27.873-27.865c0-15.366,12.504-27.866,27.873-27.866 c15.363,0,27.861,12.5,27.861,27.866C79.191,128.975,66.692,141.476,51.33,141.476z M175.897,212.216 c-15.366,0-27.867-12.501-27.867-27.865c0-15.37,12.501-27.875,27.867-27.875c15.363,0,27.862,12.505,27.862,27.875 C203.759,199.715,191.26,212.216,175.897,212.216z"></path>
-					</g></svg>
-
-					<svg id="copy" class="svg" aria-hidden="true" viewBox="0 0 20 20" fill="none">
-					<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
-					<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
-					<g id="SVGRepo_iconCarrier">
-					<path fill-rule="evenodd" d="M4 2a2 2 0 00-2 2v9a2 2 0 002 2h2v2a2 2 0 002 2h9a2 2 0 002-2V8a2 2 0 00-2-2h-2V4a2 2 0 00-2-2H4zm9 4V4H4v9h2V8a2 2 0 012-2h5zM8 8h9v9H8V8z"></path>
-					</g></svg>
-				</div>
+	<body class="flex center row">
+		<div id="header" class="flex center row">QR code scanner</div>
+		<div id="qrReader" class="flex center row"></div>
+		<div id="qrReaderResult">
+			<div id="resultHeader" class="header flex center row"><h1>New QR_CODE detected!</h1></div>
+			<div id="resultContent" class="content flex center row">
+				lasdcaldskmldavkjnladjkvnakldsjvcnadskljvcnsdkljn<br>
+				lasdcaldskmldavkjnladjkvnakldsjvcnadskljvcnsdkljn<br>
+				lasdcaldskmldavkjnladjkvnakldsjvcnadskljvcnsdkljn<br>
+				lasdcaldskmldavkjnladjkvnakldsjvcnadskljvcnsdkljn<br>
+				lasdcaldskmldavkjnladjkvnakldsjvcnadskljvcnsdkljn<br>
+				lasdcaldskmldavkjnladjkvnakldsjvcnadskljvcnsdkljn<br>
+				lasdcaldskmldavkjnladjkvnakldsjvcnadskljvcnsdkljn<br>
+				lasdcaldskmldavkjnladjkvnakldsjvcnadskljvcnsdkljn<br>
+				lasdcaldskmldavkjnladjkvnakldsjvcnadskljvcnsdkljn<br>
+				lasdcaldskmldavkjnladjkvnakldsjvcnadskljvcnsdkljn<br>
+				lasdcaldskmldavkjnladjkvnakldsjvcnadskljvcnsdkljn<br>
+				lasdcaldskmldavkjnladjkvnakldsjvcnadskljvcnsdkljn<br>
+				lasdcaldskmldavkjnladjkvnakldsjvcnadskljvcnsdkljn<br>
+				lasdcaldskmldavkjnladjkvnakldsjvcnadskljvcnsdkljn<br>
+				lasdcaldskmldavkjnladjkvnakldsjvcnadskljvcnsdkljn<br>
+				lasdcaldskmldavkjnladjkvnakldsjvcnadskljvcnsdkljn<br>
+				lasdcaldskmldavkjnladjkvnakldsjvcnadskljvcnsdkljn<br>
+				lasdcaldskmldavkjnladjkvnakldsjvcnadskljvcnsdkljn<br>
+				lasdcaldskmldavkjnladjkvnakldsjvcnadskljvcnsdkljn<br>
+				lasdcaldskmldavkjnladjkvnakldsjvcnadskljvcnsdkljn<br>
+				lasdcaldskmldavkjnladjkvnakldsjvcnadskljvcnsdkljn<br>
+				lasdcaldskmldavkjnladjkvnakldsjvcnadskljvcnsdkljn<br>
+				lasdcaldskmldavkjnladjkvnakldsjvcnadskljvcnsdkljn<br>
+				lasdcaldskmldavkjnladjkvnakldsjvcnadskljvcnsdkljn<br>
 			</div>
-			<div id="shade" class="hide" onclick="qrReaderResult.animation()"></div>
-			<div id="footer">
-				<a href="https://github.com/JeBance/qrcodeScanner/" target="_blank">
-				<svg id="github" class="svg" aria-hidden="true" viewBox="0 0 16 16" version="1.1" data-view-component="true">
-				<path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
-				</svg></a>
-				<button id="a2hs">Install</button>
+			<div id="resultShare" class="footer flex center row">
+				<svg id="share" class="svg" aria-hidden="true" viewBox="0 0 227.216 227.216" version="1.1" xml:space="preserve" onclick="actionOnClick(this)">
+				<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+				<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+				<g id="SVGRepo_iconCarrier">
+				<path d="M175.897,141.476c-13.249,0-25.11,6.044-32.98,15.518l-51.194-29.066c1.592-4.48,2.467-9.297,2.467-14.317 c0-5.019-0.875-9.836-2.467-14.316l51.19-29.073c7.869,9.477,19.732,15.523,32.982,15.523c23.634,0,42.862-19.235,42.862-42.879 C218.759,19.229,199.531,0,175.897,0C152.26,0,133.03,19.229,133.03,42.865c0,5.02,0.874,9.838,2.467,14.319L84.304,86.258 c-7.869-9.472-19.729-15.514-32.975-15.514c-23.64,0-42.873,19.229-42.873,42.866c0,23.636,19.233,42.865,42.873,42.865 c13.246,0,25.105-6.042,32.974-15.513l51.194,29.067c-1.593,4.481-2.468,9.3-2.468,14.321c0,23.636,19.23,42.865,42.867,42.865 c23.634,0,42.862-19.23,42.862-42.865C218.759,160.71,199.531,141.476,175.897,141.476z M175.897,15 c15.363,0,27.862,12.5,27.862,27.865c0,15.373-12.499,27.879-27.862,27.879c-15.366,0-27.867-12.506-27.867-27.879 C148.03,27.5,160.531,15,175.897,15z M51.33,141.476c-15.369,0-27.873-12.501-27.873-27.865c0-15.366,12.504-27.866,27.873-27.866 c15.363,0,27.861,12.5,27.861,27.866C79.191,128.975,66.692,141.476,51.33,141.476z M175.897,212.216 c-15.366,0-27.867-12.501-27.867-27.865c0-15.37,12.501-27.875,27.867-27.875c15.363,0,27.862,12.505,27.862,27.875 C203.759,199.715,191.26,212.216,175.897,212.216z"></path>
+				</g></svg>
+
+				<svg id="copy" class="svg" aria-hidden="true" viewBox="0 0 20 20" fill="none" onclick="actionOnClick(this)">
+				<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+				<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+				<g id="SVGRepo_iconCarrier">
+				<path fill-rule="evenodd" d="M4 2a2 2 0 00-2 2v9a2 2 0 002 2h2v2a2 2 0 002 2h9a2 2 0 002-2V8a2 2 0 00-2-2h-2V4a2 2 0 00-2-2H4zm9 4V4H4v9h2V8a2 2 0 012-2h5zM8 8h9v9H8V8z"></path>
+				</g></svg>
 			</div>
 		</div>
+		<div id="shade" class="hide" onclick="qrReaderResult.animation()"></div>
+		<div id="footer" class="flex center row space-between">
+			<a href="https://github.com/JeBance/qrcodeScanner/" target="_blank">
+			<svg id="github" class="svg" aria-hidden="true" viewBox="0 0 16 16" version="1.1" data-view-component="true">
+			<path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
+			</svg></a>
+			<button id="a2hs">Install</button>
+		</div>
 	</body>
 
 </html>
diff --git a/style.css b/style.css
@@ -25,32 +25,12 @@ html, body {
 	font-family: system-ui;
 	touch-action: none;
 	overflow: hidden;
-}
-
-#wraper {
-	width: 100%;
-	height: 100%;
-	display: flex;
-	position: fixed;
-	overflow: hidden;
-	flex-direction: column;
-	flex-wrap: nowrap;
-	align-content: center;
-	justify-content: center;
-	align-items: center;
 	background:  var(--color-black);
 }
 
 #qrReader {
-	width: 100%;
 	min-width: 600px;	/* for mobile phone: 360px */
 	max-width: 600px;
-	display: flex;
-	align-items: center;
-	align-content: center;
-	justify-content: center;
-	flex-wrap: nowrap;
-	flex-direction: column;
 }
 
 #header {
@@ -61,12 +41,7 @@ html, body {
 	top: 0;
 	left: 50%;
 	margin-left: -180px;
-	display: flex;
 	position: absolute;
-	align-items: center;
-	justify-content: center;
-	flex-wrap: nowrap;
-	flex-direction: column;
 	color:  var(--color-white);
 	z-index: 2;
 }
@@ -78,30 +53,21 @@ html, body {
 	margin-top: -80px;
 	left: 50%;
 	margin-left: -180px;
-	display: flex;
 	position: absolute;
-	align-items: center;
-	justify-content: space-between;
-	flex-wrap: nowrap;
-	flex-direction: row;
 	z-index: 2;
 }
 
 #qrReaderResult {
 	top: 100%;
 	width: 100%;
 	height: 400px;
-	padding: 20px;
-	font-size: 10px;
-	overflow-y: scroll;
 	display: flex;
 	position: absolute;
-	-ms-overflow-style: none;
-	scrollbar-width: none;
-	align-items: flex-start;
-	justify-content: flex-start;
+	align-items: center;
+	justify-content: center;
 	flex-wrap: nowrap;
 	flex-direction: column;
+	border-radius: 20px 20px 0 0;
 	color: var(--color-grey);
 	background:  var(--color-carbon);
 	z-index: 3;
@@ -171,17 +137,49 @@ button:active {
 	background: var(--color-grey);
 }
 
+.flex {
+	display: flex;
+	flex-wrap: nowrap;
+}
+
+.center {
+	align-items: center;
+	align-content: center;
+	justify-content: center;
+}
+
+.row {
+	flex-direction: row;
+}
+
+.column {
+	flex-direction: column;
+}
+
+.space-between {
+	justify-content: space-between;
+}
+
 .header {
 	width: 100%;
-	height: 80px;
+	min-height: 60px;
 }
 
 .content {
-	width: 100%;
-	height: inherit;
+	width: 90%;
+	height: 260px;
+	font-size: 16px;
+	padding: 10px;
+	-ms-overflow-style: none;
+	scrollbar-width: none;
+	overflow-x: hidden;
+	overflow-y: scroll;
+	align-items: flex-start;
+	border-radius: 20px;
+	background: var(--color-black);
 }
 
-.share {
+.footer {
 	width: 100%;
 	height: 80px;
 }