Add qr code generator

src/utilities/base64.css

@@ -38,6 +38,10 @@
 
     }
 
+    .base-title {
+        margin-top: 3em;
+    }
+
 }
 
 body {

src/utilities/index.php

@@ -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>
 
 

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;

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;
+}

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();
+});

src/utilities/qrcode.php

@@ -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>