Add json prettieir

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

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

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);
 

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,7 +25,7 @@
         </div>
         <div class="utilities-item">
             <a href="base64.php" class="fill-div">
-                <div>
+                <div style="justify-self: left;">
                     <h3>Base64 Encode Decode</h3>
                     <p>Encode/Decode base64 text</p>
                     <noscript style="color:red;">This requires javascript</noscript>
@@ -33,6 +33,16 @@
                 <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/base64.png" class="optional-img" alt="Stablediffusion: JSON text on a black background">
+            </a>
+        </div>
     </div>
 
 

src/utilities/json.css

@@ -0,0 +1,41 @@
+.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;
+}
+
+
+body {
+    overflow-x: hidden;
+}

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);
+    }
+    $('#input').change();
+});
+

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>