From fc3a8e69f2d5e22466936b7675329e7be8758155 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9E=D0=BB=D0=B5=D0=B3?= Date: Mon, 27 Jan 2025 16:09:06 +0300 Subject: [PATCH] upgraded qrReaderResult --- app.js | 33 ++++++++++++++++++++-- index.html | 81 +++++++++++++++++++++++++++++++++++------------------- style.css | 80 ++++++++++++++++++++++++++--------------------------- 3 files changed, 122 insertions(+), 72 deletions(-) diff --git a/app.js b/app.js index 9a8cfc6..3d06e6c 100644 --- 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 index d263708..9a2629f 100644 --- a/index.html +++ b/index.html @@ -17,38 +17,61 @@ - -
- -
-
-
-
- + + +
+
+

New QR_CODE detected!

+
+ lasdcaldskmldavkjnladjkvnakldsjvcnadskljvcnsdkljn
+ lasdcaldskmldavkjnladjkvnakldsjvcnadskljvcnsdkljn
+ lasdcaldskmldavkjnladjkvnakldsjvcnadskljvcnsdkljn
+ lasdcaldskmldavkjnladjkvnakldsjvcnadskljvcnsdkljn
+ lasdcaldskmldavkjnladjkvnakldsjvcnadskljvcnsdkljn
+ lasdcaldskmldavkjnladjkvnakldsjvcnadskljvcnsdkljn
+ lasdcaldskmldavkjnladjkvnakldsjvcnadskljvcnsdkljn
+ lasdcaldskmldavkjnladjkvnakldsjvcnadskljvcnsdkljn
+ lasdcaldskmldavkjnladjkvnakldsjvcnadskljvcnsdkljn
+ lasdcaldskmldavkjnladjkvnakldsjvcnadskljvcnsdkljn
+ lasdcaldskmldavkjnladjkvnakldsjvcnadskljvcnsdkljn
+ lasdcaldskmldavkjnladjkvnakldsjvcnadskljvcnsdkljn
+ lasdcaldskmldavkjnladjkvnakldsjvcnadskljvcnsdkljn
+ lasdcaldskmldavkjnladjkvnakldsjvcnadskljvcnsdkljn
+ lasdcaldskmldavkjnladjkvnakldsjvcnadskljvcnsdkljn
+ lasdcaldskmldavkjnladjkvnakldsjvcnadskljvcnsdkljn
+ lasdcaldskmldavkjnladjkvnakldsjvcnadskljvcnsdkljn
+ lasdcaldskmldavkjnladjkvnakldsjvcnadskljvcnsdkljn
+ lasdcaldskmldavkjnladjkvnakldsjvcnadskljvcnsdkljn
+ lasdcaldskmldavkjnladjkvnakldsjvcnadskljvcnsdkljn
+ lasdcaldskmldavkjnladjkvnakldsjvcnadskljvcnsdkljn
+ lasdcaldskmldavkjnladjkvnakldsjvcnadskljvcnsdkljn
+ lasdcaldskmldavkjnladjkvnakldsjvcnadskljvcnsdkljn
+ lasdcaldskmldavkjnladjkvnakldsjvcnadskljvcnsdkljn
-
- +
+ diff --git a/style.css b/style.css index 642f80f..3a0729e 100644 --- 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,12 +53,7 @@ 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; } @@ -91,17 +61,13 @@ html, body { 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; }