Add ip detector logic

Add file site to footer
Add image for json
2022-12-01 17:56:59 -05:00 · 2022-11-26 21:52:01 -05:00 · 2022-11-26 15:59:25 -05:00 · 2022-11-26 14:52:15 -05:00 · 2022-11-26 14:48:26 -05:00 · 2022-11-26 14:45:13 -05:00
19 changed files with 445 additions and 32 deletions
--- a/README.md
+++ b/README.md
@ -17,9 +17,9 @@ be much better this time around
 Features
 --------

-* [ ] Basic home/about me page
-* [ ] Contact info
+* [X] Basic home/about me page
+* [X] Contact info
 * [ ] Links to projects
 * [ ] Posts w/ a tagging system
-* [ ] Some javascript utilities
+* [X] Some javascript utilities

--- a/src/404.php
+++ b/src/404.php
@ -1,12 +1,12 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <?php include 'common/include.php' ?>
+    <?php include '/common/include.php' ?>
    <title>Tyler Perkins - 404</title>
    <link rel="stylesheet" href="error.css">
 </head>
 <body>
-    <?php include 'common/header.php' ?>
+    <?php include '/common/header.php' ?>

    <div class="error-div top-fade">
        <div class="error-message">
@ -19,6 +19,6 @@
        </div>
    </div>

-    <?php include 'common/footer.php' ?>
+    <?php include '/common/footer.php' ?>
 </body>
 </html>
--- a/src/common/common.css
+++ b/src/common/common.css
@ -37,6 +37,32 @@ button:hover {

 }

+.common-title {
+    width: 100vw;
+    height: 20vh;
+
+    display: grid;
+    align-content: center;
+    justify-content: center;
+    justify-items: center;
+    align-items: center;
+
+    margin-top: 25px;
+}
+
+textarea {
+    max-height: 20em;
+
+    vertical-align: center;
+    background: rgba(11,11,12,1);
+    border-color: white;
+    border-style: dashed;
+    color: white;
+    max-width: 100%;
+
+    margin: 0px;
+}
+
 html {
    scroll-behavior: smooth;
 }
--- a/src/common/footer.php
+++ b/src/common/footer.php
@ -9,7 +9,6 @@
                    <a href="https://www.linkedin.com/in/tyler-perkins-xyz/" target="_blank" rel="noopener noreferrer">LinkedIn</a>
                    <a href="https://github.com/Clortox" target="_blank" rel="noopener noreferrer">Github</a>
                    <a href="https://wireless2.fcc.gov/UlsApp/UlsSearch/license.jsp?licKey=4524190" target="_blank" rel="noopener noreferrer">Ham Radio</a>
-
                </div>
            </div>
            <div style="width: 85%;" class="footer-middle-block">
@ -19,7 +18,7 @@
                <div class="footer-link-list">
                    <a href="https://git.clortox.com" target="_blank" rel="noopener noreferrer">Git</a>
                    <a href="https://wiki.clortox.com" target="_blank" rel="noopener noreferrer">Wiki</a>
-
+                    <a href="https://files.clortox.com" target="_blank" rel="noopener noreferrer">Files</a>
                </div>
            </div>
        </div>
--- a/src/common/include.php
+++ b/src/common/include.php
@ -2,6 +2,7 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="author" content="Tyler Perkins">
+<meta name="description" content="Tyler Perkin's Portfolio Website">

 <!-- Fonts and styles -->
 <link rel="stylesheet" href="/common/common.css">
--- a/src/img/json.png
+++ b/src/img/json.png
--- a/src/img/qrcode.png
+++ b/src/img/qrcode.png
--- a/src/index.css
+++ b/src/index.css
@ -15,6 +15,22 @@
    border-bottom: 5px dashed white;
 }

+.tagline-link p {
+    text-decoration: underline 0.15em rgba(255,255,255,0);
+    transition: 300ms;
+}
+
+.tagline-link:hover p {
+    text-decoration: underline 0.15em rgba(255,255,255,1);
+}
+
+.clickable-div {
+    display:block;
+    height: 100%;
+    width: 100%;
+    text-decoration: none;
+}
+
 .single-column {
    grid-template-columns: 1fr !important;
 }
--- a/src/index.php
+++ b/src/index.php
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
    <?php include 'common/include.php' ?>
    <title>Tyler Perkins - Home</title>
@ -9,10 +9,22 @@
    <?php include 'common/header.php' ?>

    <div class="centered top-fade">
-        <div class="index-item single-column">
+        <!--<a class="clickable-div" href="about.php"> -->
+            <div class="index-item single-column tagline-link">
                <h1>Hi, I'm Tyler</h1>
                <p>I'm a software developer and tinkerer</p>
+                <?php
+                    $remote_addr = $_SERVER['REMOTE_ADDR'];
+                    $forwarded_addr = $_SERVER['REMOTE_ADDR'];
+
+                    $home_addr = gethostbyname("gluttony.clortox.com");
+                    if($remote_addr == $home_addr)
+                        echo "<p>Hello from within the home network!</p>"
+
+
+                ?>
            </div>
+        <!--</a>-->
    </div>
    <div class="centered">
        <div class="index-item soft-background articles-box">
--- a/src/utilities/base64.css
+++ b/src/utilities/base64.css
@ -23,19 +23,6 @@
    padding: 10px;
 }

-textarea {
-    max-height: 20em;
-
-    vertical-align: center;
-    background: rgba(11,11,12,1);
-    border-color: white;
-    border-style: dashed;
-    color: white;
-    max-width: 100%;
-
-    margin: 0px;
-}
-
 #output {
    margin-top: -17vh;
 }
@ -51,6 +38,10 @@ textarea {

    }

+    .base-title {
+        margin-top: 3em;
+    }
+
 }

 body {
--- a/src/utilities/base64.js
+++ b/src/utilities/base64.js
@ -20,6 +20,5 @@ $(document).ready(function() {
    if(last_input != null) {
        $('#input').val(last_input);
    }
-    $('#input').change();
 });

--- a/src/utilities/index.css
+++ b/src/utilities/index.css
@ -40,8 +40,6 @@
 }

 .fill-div:hover {
-    #background: rgba(44,44,48,0.5);
-    #background: rgba(22,22,24,1);
    background: rgba(0,0,0,1);
    text-decoration: underline 0.1em rgba(255,255,255,1);

--- a/src/utilities/index.php
+++ b/src/utilities/index.php
@ -15,7 +15,7 @@
    <div class="utilities-grid">
        <div class="utilities-item">
            <a href="dipole.php" class="fill-div">
-                <div>
+                <div style="justify-self: left;">
                    <h3>Dipole Calculator</h3>
                    <p>Utility to help you tune a dipole given a target frequency</p>
                    <noscript style="color:red;">This requires javascript</noscript>
@ -25,14 +25,34 @@
        </div>
        <div class="utilities-item">
            <a href="base64.php" class="fill-div">
-                <div>
-                    <h3>Base64 Encode/Decode</h3>
+                <div style="justify-self: left;">
+                    <h3>Base64 Encode Decode</h3>
                    <p>Encode/Decode base64 text</p>
                    <noscript style="color:red;">This requires javascript</noscript>
                </div>
                <img src="/img/base64.png" class="optional-img" alt="Stablediffusion: With base64 text on a black background">
            </a>
        </div>
+        <div class="utilities-item">
+            <a href="json.php" class="fill-div">
+                <div style="justify-self: left;">
+                    <h3>JSON Beautifier</h3>
+                    <p>Make ugly JSON pretty</p>
+                    <noscript style="color:red;">This requires javascript</noscript>
+                </div>
+                <img src="/img/json.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/qrcode.png" class="optional-img" alt="Qrcode to this website">
+            </a>
+        </div>
    </div>


--- a/src/utilities/json.css
+++ b/src/utilities/json.css
@ -0,0 +1,48 @@
+.json-title{
+    width: 100vw;
+    height: 20vh;
+
+    display: grid;
+    align-content: center;
+    justify-content: center;
+    justify-items: center;
+    align-items: center;
+
+    margin-top: 25px;
+}
+
+.json-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;
+
+}
+
+.json-buttons {
+    display: inline;
+    text-align: center;
+    margin-top: 15px;
+}
+
+#output {
+    margin-top: -17vh;
+    max-height: 45em;
+}
+
+@media only screen and (max-width: 768px){
+    .json-title {
+        margin-top: 3em;
+
+    }
+
+}
+
+body {
+    overflow-x: hidden;
+}
--- a/src/utilities/json.js
+++ b/src/utilities/json.js
@ -0,0 +1,28 @@
+$(function(ready){
+    $('#input').change(function() {
+        let input = $('#input').val();
+        localStorage.setItem('json', input);
+    });
+    $('#pretty').click(function() {
+        let input = $('#input').val();
+        let encoded = "";
+        try {
+            let parsed = JSON.parse(input);
+            encoded = JSON.stringify(parsed, null, 4);
+        } catch(error) {
+            console.log(error);
+            encoded = error;
+        }
+
+        $('#output').val(encoded);
+    });
+})
+
+$(document).ready(function() {
+    let last_input = localStorage.getItem('json');
+    if(last_input != null) {
+        $('#input').val(last_input);
+    }
+    $('#pretty').click();
+});
+
--- a/src/utilities/json.php
+++ b/src/utilities/json.php
@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <?php include '../common/include.php' ?>
+    <title>Tyler Perkins - JSON</title>
+    <link rel="stylesheet" href="./json.css">
+    <script src="json.js"></script>
+</head>
+<body>
+    <?php include '../common/header.php' ?>
+
+    <div class="json-title">
+        <h1>Json Beautifier</h1>
+        <noscript style="color:red;">This requires javascript</noscript>
+    </div>
+
+    <div class="json-body">
+        <textarea id="input" placeholder="Your input here..."></textarea>
+        <div class="json-buttons">
+            <button id="pretty">Make pretty</button>
+        </div>
+        <textarea id="output" readonly placeholder="Output will appear here..."></textarea>
+    </div>
+
+
+    <?php include '../common/footer.php' ?>
+</body>
+
+
+</html>
--- a/src/utilities/qrcode.css
+++ 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;
+}
--- a/src/utilities/qrcode.js
+++ 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();
+});
--- a/src/utilities/qrcode.php
+++ b/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>Size</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>
Author	SHA1	Message	Date
Tyler Perkins	d1700f7592	Add ip detector logic	2022-12-01 17:56:59 -05:00
Tyler Perkins	47848efb30	Add file site to footer	2022-11-26 21:52:01 -05:00
Tyler Perkins	9b40a69551	Add image for json	2022-11-26 15:59:25 -05:00
Tyler Perkins	0085c3ae88	Fix 404 page pointing to wrong css	2022-11-26 14:52:15 -05:00
Tyler Perkins	fd3b45af7a	Add qrcode image	2022-11-26 14:48:26 -05:00
Tyler Perkins	7241c0e32a	Add qr code generator	2022-11-26 14:45:13 -05:00
Tyler Perkins	80b052d654	Auto pretty json on load	2022-11-25 23:43:29 -05:00
Tyler Perkins	2b9f635c80	Add improvments for lighthouse score	2022-11-25 23:40:11 -05:00
Tyler Perkins	c1ab07f342	Add json prettieir	2022-11-25 23:29:34 -05:00
Tyler Perkins	cc75f4d035	Fix encode/decode text	2022-11-25 22:48:01 -05:00