Add qr code generator
This commit is contained in:
parent
80b052d654
commit
7241c0e32a
@ -38,6 +38,10 @@
|
||||
|
||||
}
|
||||
|
||||
.base-title {
|
||||
margin-top: 3em;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
body {
|
||||
|
||||
@ -43,6 +43,16 @@
|
||||
<img src="/img/base64.png" class="optional-img" alt="Stablediffusion: JSON text on a black background">
|
||||
</a>
|
||||
</div>
|
||||
<div class="utilities-item">
|
||||
<a href="qrcode.php" class="fill-div">
|
||||
<div style="justify-self: left;">
|
||||
<h3>QRCode Generator</h3>
|
||||
<p>Generate QRCodes for links, WiFi, and more</p>
|
||||
<noscript style="color:red;">This requires javascript</noscript>
|
||||
</div>
|
||||
<img src="/img/base64.png" class="optional-img" alt="Stablediffusion: Cyberpunk neon qrcode">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@ -35,6 +35,13 @@
|
||||
max-height: 45em;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px){
|
||||
.json-title {
|
||||
margin-top: 3em;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
|
||||
119
src/utilities/qrcode.css
Normal file
119
src/utilities/qrcode.css
Normal file
@ -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;
|
||||
}
|
||||
65
src/utilities/qrcode.js
Normal file
65
src/utilities/qrcode.js
Normal file
@ -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();
|
||||
});
|
||||
61
src/utilities/qrcode.php
Normal file
61
src/utilities/qrcode.php
Normal file
@ -0,0 +1,61 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<?php include '../common/include.php' ?>
|
||||
<title>Tyler Perkins - QRCode</title>
|
||||
<link rel="stylesheet" href="./qrcode.css">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/lrsjng.jquery-qrcode/0.18.0/jquery-qrcode.min.js" integrity="sha512-P9oNnyfvOZrY1H0D5js+UcLZr+vLkX50glCUlpJAd/RL84+KBtGI4yvH5YVM5TejD+jbURwQq3C/7hgYWOo8bQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script src="qrcode.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<?php include '../common/header.php' ?>
|
||||
|
||||
<div class="qrcode-title">
|
||||
<h1>QRCode Generator</h1>
|
||||
<noscript style="color:red;">This requires javascript</noscript>
|
||||
</div>
|
||||
|
||||
<div class="qrcode-body">
|
||||
<div class="title-block">
|
||||
<h3 style="display:inline; vertical-align: center;">String to encode</h3>
|
||||
<input type="text" id="input" placeholder="https://www.clortox.com">
|
||||
</div>
|
||||
|
||||
<div class="results-block">
|
||||
<div class="result-code-wrapper">
|
||||
<div id="qrcode-result"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="inline-option">
|
||||
<p>Width</p>
|
||||
<input type="number" id="input_size" value="256" placeholder="256">
|
||||
</div>
|
||||
<div class="inline-option">
|
||||
<p>Radius</p>
|
||||
<input type="number" id="input_radius" value="0.1" placeholder="0.1" min="0" max="1" step="0.05">
|
||||
</div>
|
||||
<div class="inline-option">
|
||||
<p>Padding</p>
|
||||
<input type="number" id="input_padding" value="0" placeholder="0" pattern="\d*">
|
||||
</div>
|
||||
<div class="inline-option">
|
||||
<p>Error Correction Level</p>
|
||||
<select name="Correction" id="input_correction">
|
||||
<option value="L">Low</option>
|
||||
<option value="M">Medium</option>
|
||||
<option value="Q">Quality</option>
|
||||
<option value="H">High</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<?php include '../common/footer.php' ?>
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user