Add dipole and base64
This commit is contained in:
parent
74525b1222
commit
57a219cac9
@ -7,14 +7,14 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
h1, h2, h3, h4 {
|
h1, h2, h3, h4 {
|
||||||
font-family: 'Molengo', Georgia, Times, serif;
|
font-family: 'Lekton', Helvetica, Arial, sans-serif;
|
||||||
font-size: 56px;
|
font-size: 56px;
|
||||||
line-height: 80px;
|
line-height: 80px;
|
||||||
text-shadow: 1px 1px 1px grey;
|
text-shadow: 1px 1px 1px grey;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
p, a, li, tr, td, span {
|
p, a, li, tr, td, span, noscript {
|
||||||
font-family: 'Lekton', Helvetica, Arial, sans-serif;
|
font-family: 'Lekton', Helvetica, Arial, sans-serif;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 25px;
|
line-height: 25px;
|
||||||
|
|||||||
BIN
src/img/base64.png
Normal file
BIN
src/img/base64.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 996 KiB |
BIN
src/img/dipole.png
Normal file
BIN
src/img/dipole.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 786 KiB |
59
src/utilities/base64.css
Normal file
59
src/utilities/base64.css
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
.base-title {
|
||||||
|
width: 100vw;
|
||||||
|
height: 20vh;
|
||||||
|
|
||||||
|
display: grid;
|
||||||
|
align-content: center;
|
||||||
|
justify-content: center;
|
||||||
|
justify-items: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
margin-top: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.base-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;
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.base-buttons {
|
||||||
|
display: inline;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 768px){
|
||||||
|
.base-buttons {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
overflow-x: hidden;
|
||||||
|
|
||||||
|
}
|
||||||
25
src/utilities/base64.js
Normal file
25
src/utilities/base64.js
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
$(function(ready){
|
||||||
|
$('#input').change(function() {
|
||||||
|
let input = $('#input').val();
|
||||||
|
localStorage.setItem('base_input', input);
|
||||||
|
});
|
||||||
|
$('#encode').click(function() {
|
||||||
|
let input = $('#input').val();
|
||||||
|
let encoded = btoa(input);
|
||||||
|
$('#output').val(encoded);
|
||||||
|
});
|
||||||
|
$('#decode').click(function() {
|
||||||
|
let input = $('#input').val();
|
||||||
|
let decoded = atob(input);
|
||||||
|
$('#output').val(decoded);
|
||||||
|
});
|
||||||
|
})
|
||||||
|
|
||||||
|
$(document).ready(function() {
|
||||||
|
let last_input = localStorage.getItem('base_input');
|
||||||
|
if(last_input != null) {
|
||||||
|
$('#input').val(last_input);
|
||||||
|
}
|
||||||
|
$('#input').change();
|
||||||
|
});
|
||||||
|
|
||||||
31
src/utilities/base64.php
Normal file
31
src/utilities/base64.php
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<?php include '../common/include.php' ?>
|
||||||
|
<title>Tyler Perkins - Home</title>
|
||||||
|
<link rel="stylesheet" href="./base64.css">
|
||||||
|
<script src="base64.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<?php include '../common/header.php' ?>
|
||||||
|
|
||||||
|
<div class="base-title">
|
||||||
|
<h1>Base64 Converter</h1>
|
||||||
|
<noscript style="color:red;">This requires javascript</noscript>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="base-body">
|
||||||
|
<textarea id="input" placeholder="Your input here..."></textarea>
|
||||||
|
<div class="base-buttons">
|
||||||
|
<button id="decode">Decode</button>
|
||||||
|
<button id="encode">Encode</button>
|
||||||
|
</div>
|
||||||
|
<textarea id="output" readonly placeholder="Output will appear here..."></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<?php include '../common/footer.php' ?>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
|
||||||
|
</html>
|
||||||
78
src/utilities/dipole.css
Normal file
78
src/utilities/dipole.css
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
.dipole-title {
|
||||||
|
width: 100vw;
|
||||||
|
height: 20vh;
|
||||||
|
|
||||||
|
display: grid;
|
||||||
|
align-content: center;
|
||||||
|
justify-content: center;
|
||||||
|
justify-items: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
margin-top: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dipole-body{
|
||||||
|
width: 90vw;
|
||||||
|
min-height: 80vh;
|
||||||
|
background: rgba(11,11,12,0.3);
|
||||||
|
margin: 0px 5vw ;
|
||||||
|
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 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: 25% 1fr 1fr;
|
||||||
|
justify-items: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#freq {
|
||||||
|
float: right;
|
||||||
|
display: inline;
|
||||||
|
vertical-align: center;
|
||||||
|
max-height: 2em;
|
||||||
|
background: rgba(11,11,12,1);
|
||||||
|
border-color: white;
|
||||||
|
border-style: dashed;
|
||||||
|
color: white;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 768px){
|
||||||
|
|
||||||
|
|
||||||
|
.results-block {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-block {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
margin-bottom: 25vh;
|
||||||
|
justify-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dipole-title {
|
||||||
|
margin-top: 45px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#freq {
|
||||||
|
max-width: 75vw;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
26
src/utilities/dipole.js
Normal file
26
src/utilities/dipole.js
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
$(function(ready){
|
||||||
|
$('#freq').change(function() {
|
||||||
|
let freq = $('#freq').val();
|
||||||
|
localStorage.setItem('freq', freq);
|
||||||
|
|
||||||
|
$('#total_len_cm').text(14300 / freq + ' cm');
|
||||||
|
$('#total_len_ft').text(468 / freq + ' ft');
|
||||||
|
|
||||||
|
$('#leg_len_cm').text(((14300 / freq) / 2) + ' cm');
|
||||||
|
$('#leg_len_ft').text(((468 / freq) / 2) + ' ft');
|
||||||
|
|
||||||
|
$('#mono_len_cm').text(((14300 / freq) / 2) + ' cm');
|
||||||
|
$('#mono_len_ft').text(((468 / freq) / 2) + ' ft');
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
|
})
|
||||||
|
|
||||||
|
$(document).ready(function() {
|
||||||
|
let last_freq = localStorage.getItem('freq');
|
||||||
|
if(last_freq != null) {
|
||||||
|
$('#freq').val(last_freq);
|
||||||
|
}
|
||||||
|
$('#freq').change();
|
||||||
|
});
|
||||||
41
src/utilities/dipole.php
Normal file
41
src/utilities/dipole.php
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<?php include '../common/include.php' ?>
|
||||||
|
<title>Tyler Perkins - Home</title>
|
||||||
|
<link rel="stylesheet" href="./dipole.css">
|
||||||
|
<script src="dipole.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<?php include '../common/header.php' ?>
|
||||||
|
|
||||||
|
<div class="dipole-title">
|
||||||
|
<h1>Dipole Calculator</h1>
|
||||||
|
<noscript style="color:red;">This requires javascript</noscript>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="dipole-body">
|
||||||
|
<div class="title-block">
|
||||||
|
<h3 style="display:inline; vertical-align: center;">Frequency (Mhz)</h3>
|
||||||
|
<input type="text" id="freq" placeholder="137" value="137">
|
||||||
|
</div>
|
||||||
|
<div class="results-block">
|
||||||
|
<p>Total length of dipole</p>
|
||||||
|
<p id="total_len_cm"></p>
|
||||||
|
<p id="total_len_ft"></p>
|
||||||
|
<p>Length of leg</p>
|
||||||
|
<p id="leg_len_cm"></p>
|
||||||
|
<p id="leg_len_ft"></p>
|
||||||
|
<p>Length of monopole</p>
|
||||||
|
<p id="mono_len_cm"></p>
|
||||||
|
<p id="mono_len_ft"></p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<?php include '../common/footer.php' ?>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
|
||||||
|
</html>
|
||||||
73
src/utilities/index.css
Normal file
73
src/utilities/index.css
Normal file
@ -0,0 +1,73 @@
|
|||||||
|
.utilities-title {
|
||||||
|
width: 100vw;
|
||||||
|
height: 20vh;
|
||||||
|
|
||||||
|
display: grid;
|
||||||
|
align-content: center;
|
||||||
|
justify-content: center;
|
||||||
|
justify-items: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
margin-top: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.utilities-grid {
|
||||||
|
width: 90vw;
|
||||||
|
min-height: 80vh;
|
||||||
|
background: rgba(11,11,12,0.3);
|
||||||
|
margin: 0px 5vw ;
|
||||||
|
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.utilities-item {
|
||||||
|
max-width: 100%;
|
||||||
|
padding: 5%;
|
||||||
|
max-height: 35vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fill-div {
|
||||||
|
display:grid;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
text-decoration: none;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
justify-items: center;
|
||||||
|
padding: 15px;
|
||||||
|
transition: 300ms;
|
||||||
|
text-decoration: underline 0.1em rgba(255,255,255,0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.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);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.optional-img {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
float:right;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 768px){
|
||||||
|
.optional-img {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fill-div {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
width: initial;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
@ -1 +1,43 @@
|
|||||||
<p>kek</p>
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<?php include '../common/include.php' ?>
|
||||||
|
<title>Tyler Perkins - Utilities</title>
|
||||||
|
<link rel="stylesheet" href="./index.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<?php include '../common/header.php' ?>
|
||||||
|
|
||||||
|
<div class="utilities-title">
|
||||||
|
<h1>Utilities</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="utilities-grid">
|
||||||
|
<div class="utilities-item">
|
||||||
|
<a href="dipole.php" class="fill-div">
|
||||||
|
<div>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<img src="/img/dipole.png" class="optional-img" alt="Stablediffusion: dipole antenna with a blue sky in the background">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="utilities-item">
|
||||||
|
<a href="base64.php" class="fill-div">
|
||||||
|
<div>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
|
||||||
|
<?php include '../common/footer.php' ?>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user