From 7241c0e32ae564051f708fe6fb81a38b8c9b6d81 Mon Sep 17 00:00:00 2001 From: Tyler Perkins Date: Sat, 26 Nov 2022 14:45:13 -0500 Subject: [PATCH] Add qr code generator --- src/utilities/base64.css | 4 ++ src/utilities/index.php | 10 ++++ src/utilities/json.css | 7 +++ src/utilities/qrcode.css | 119 +++++++++++++++++++++++++++++++++++++++ src/utilities/qrcode.js | 65 +++++++++++++++++++++ src/utilities/qrcode.php | 61 ++++++++++++++++++++ 6 files changed, 266 insertions(+) create mode 100644 src/utilities/qrcode.css create mode 100644 src/utilities/qrcode.js create mode 100644 src/utilities/qrcode.php diff --git a/src/utilities/base64.css b/src/utilities/base64.css index 375bdd4..643d629 100644 --- a/src/utilities/base64.css +++ b/src/utilities/base64.css @@ -38,6 +38,10 @@ } + .base-title { + margin-top: 3em; + } + } body { diff --git a/src/utilities/index.php b/src/utilities/index.php index d40335e..b6007be 100644 --- a/src/utilities/index.php +++ b/src/utilities/index.php @@ -43,6 +43,16 @@ Stablediffusion: JSON text on a black background +
+ +
+

QRCode Generator

+

Generate QRCodes for links, WiFi, and more

+ +
+ Stablediffusion: Cyberpunk neon qrcode + +
diff --git a/src/utilities/json.css b/src/utilities/json.css index 205982e..f3fbb8d 100644 --- a/src/utilities/json.css +++ b/src/utilities/json.css @@ -35,6 +35,13 @@ max-height: 45em; } +@media only screen and (max-width: 768px){ + .json-title { + margin-top: 3em; + + } + +} body { overflow-x: hidden; diff --git a/src/utilities/qrcode.css b/src/utilities/qrcode.css new file mode 100644 index 0000000..eac96b6 --- /dev/null +++ b/src/utilities/qrcode.css @@ -0,0 +1,119 @@ +.qrcode-title { + width: 100vw; + height: 20vh; + + display: grid; + align-content: center; + justify-content: center; + justify-items: center; + align-items: center; + + margin-top: 25px; +} + +.qrcode-body { + width: 90vw; + min-height: 80vh; + background: rgba(11,11,12,0.3); + margin: 0px 5vw ; + + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 1fr 1fr 1fr; + padding: 10px; +} + +.title-block { + display: grid; + grid-template-columns: 40% 60%; + max-height: 75px; + align-items: center; +} + +.results-block { + display: grid; + grid-template-columns: 40% 60%; + justify-items: center; +} + +.result-code-wrapper { + width: 256px; + height: 256px; + border-color: white; + border-style: dashed; + +} + +.inline-option{ + display: grid; + grid-template-columns: 1fr 1fr; + max-height: 75px; + align-items: center; + grid-gap: 35px; +} + +.inline-option p { + display: inline; + vertical-align: center; +} + +.inline-option input { + float: right; + display: inline; + vertical-align: center; + max-height: 2em; + background: rgba(11,11,12,1); + border-color: white; + border-style: dashed; + color: white; + font-family: 'Lekton', Helvetica, Arial, sans-serif; +} + +.inline-option select { + float: right; + display: inline; + vertical-align: center; + max-height: 2em; + background: rgba(11,11,12,1); + border-color: white; + border-style: dashed; + color: white; + font-family: 'Lekton', Helvetica, Arial, sans-serif; +} + +#input { + float: right; + display: inline; + vertical-align: center; + max-height: 2em; + background: rgba(11,11,12,1); + border-color: white; + border-style: dashed; + color: white; + font-family: 'Lekton', Helvetica, Arial, sans-serif; +} + +@media only screen and (max-width: 768px){ + .results-block { + grid-template-columns: 1fr; + margin-top: -10vh; + } + + .title-block { + grid-template-columns: 1fr; + } + + .qrcode-body { + height: 100%; + margin-bottom: -50vh; + } + + .qrcode-title { + margin-top: 3em; + } +} + + +body { + overflow-x: hidden; +} diff --git a/src/utilities/qrcode.js b/src/utilities/qrcode.js new file mode 100644 index 0000000..d9dc1fa --- /dev/null +++ b/src/utilities/qrcode.js @@ -0,0 +1,65 @@ +function reRender() { + let input_url = $('#input').val(); + let input_size = $('#input_size').val(); + let input_corr = $('#input_correction').val(); + let input_radius = $('#input_radius').val(); + let input_padding = $('#input_padding').val(); + + + + + + //first save to localStorage + localStorage.setItem('qrcode_url', input_url); + localStorage.setItem('qrcode_size', input_size); + localStorage.setItem('qrcode_radius', input_radius); + localStorage.setItem('qrcode_padding', input_padding); + localStorage.setItem('qrcode_corr', input_corr); + + $('.result-code-wrapper').css('width', input_size); + $('.result-code-wrapper').css('height', input_size); + + $('#qrcode-result').empty(); + + $('#qrcode-result').qrcode({ + size: input_size, + text: input_url, + redner: 'image', + ecLevel: input_corr, + radius: input_radius, + quiet: input_padding, + }); +} + +$(function(ready){ + $('#input').change(reRender); + $('#input_size').change(reRender); + $('#input_radius').change(reRender); + $('#input_padding').change(reRender); + $('#input_correction').change(reRender); +}) + +$(document).ready(function() { + let last_url = localStorage.getItem('qrcode_url'); + if(last_url != null) { + $('#input').val(last_url); + } + let last_size = localStorage.getItem('qrcode_size'); + if(last_size != null) { + $('#input_size').val(last_size); + } + let last_radius = localStorage.getItem('qrcode_radius'); + if(last_radius != null) { + $('#input_radius').val(last_radius); + } + let last_correction = localStorage.getItem('qrcode_corr'); + if(last_correction != null) { + $('#input_correction').val(last_correction); + } + let last_padding = localStorage.getItem('qrcode_padding'); + if(last_padding != null) { + $('#input_padding').val(last_padding); + } + + $('#input').change(); +}); diff --git a/src/utilities/qrcode.php b/src/utilities/qrcode.php new file mode 100644 index 0000000..7159a5c --- /dev/null +++ b/src/utilities/qrcode.php @@ -0,0 +1,61 @@ + + + + + Tyler Perkins - QRCode + + + + + + + +
+

QRCode Generator

+ +
+ +
+
+

String to encode

+ +
+ +
+
+
+
+
+
+

Width

+ +
+
+

Radius

+ +
+
+

Padding

+ +
+
+

Error Correction Level

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