Infrastructure/site
Archived
2
1
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

Add dipole and base64

Browse Source
This commit is contained in:
Tyler Perkins 2022-11-25 22:43:35 -05:00
parent 74525b1222
commit 57a219cac9
11 changed files with 378 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/common/common.css
View File

@ -7,14 +7,14 @@ body {
}
h1, h2, h3, h4 {
font-family: 'Molengo', Georgia, Times, serif;
font-family: 'Lekton', Helvetica, Arial, sans-serif;
font-size: 56px;
line-height: 80px;
text-shadow: 1px 1px 1px grey;
color: white;
}
p, a, li, tr, td, span {
p, a, li, tr, td, span, noscript {
font-family: 'Lekton', Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 25px;

BIN
src/img/base64.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 996 KiB

BIN
src/img/dipole.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 786 KiB

59
src/utilities/base64.css Normal file
View 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
View 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
View 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
View 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
View 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
View 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
View 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;
}

44
src/utilities/index.php
View File

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