Restyled page

This commit is contained in:
Marcus Noble 2021-03-21 10:53:05 +00:00
parent 9dfd1e2c16
commit 495c599d25
7 changed files with 105 additions and 82 deletions

View File

@ -1,3 +1,3 @@
FROM nginx:latest FROM nginx:latest
WORKDIR /usr/share/nginx/html WORKDIR /usr/share/nginx/html
ADD index.html style.css script.js ./ ADD index.html ./

View File

@ -67,7 +67,7 @@ ci:
.PHONY: release # Release the latest version of the application .PHONY: release # Release the latest version of the application
release: release:
@echo "⚠️ 'release' unimplemented" @kubectl --namespace base64 set image deployment base64 web=docker.cluster.fun/averagemarcus/base64:$(SHA)
.PHONY: help # Show this list of commands .PHONY: help # Show this list of commands
help: help:

View File

@ -1,10 +1,20 @@
# base64 ![Base64 Encode / Decode](logo.png)
Web app to base64 encode and decode Web app to base64 encode and decode
Available at https://base64.cluster.fun/
## Building from source
With Docker:
```sh
make docker-build
```
## Contributing ## Contributing
If you find a bug or have an idea for a new feature please raise an issue to discuss it. If you find a bug or have an idea for a new feature please [raise an issue](issues/new) to discuss it.
Pull requests are welcomed but please try and follow similar code style as the rest of the project and ensure all tests and code checkers are passing. Pull requests are welcomed but please try and follow similar code style as the rest of the project and ensure all tests and code checkers are passing.

View File

@ -1,31 +1,100 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html>
<head> <head>
<meta charset="utf-8"> <meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Base64 Encode / Decode</title> <title>Base64 Encode / Decode</title>
<link rel="stylesheet" href="/style.css">
<script src="/script.js" defer></script> <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 512 512'%3E%3Cg%3E%3Cpath d='M120.5 192.5a23.3 23.3 0 0042.2-8.4l25.9-130.4a23.3 23.3 0 00-18.3-27.3L40 .4a23.3 23.3 0 00-24 35.8l44.3 66.1a249 249 0 0096.2 381.8 23.2 23.2 0 0030.6-12 23.3 23.3 0 00-12-30.6 202.4 202.4 0 01-87.3-298l32.7 49z' fill='%2371cad1'/%3E%3Cpath d='M451.7 409.7a249 249 0 00-96.2-381.8A23.3 23.3 0 00337 70.5a202.4 202.4 0 0187.3 298l-32.7-49a23.3 23.3 0 00-42.2 8.4l-25.9 130.4a23.3 23.3 0 0018.3 27.3l130.3 26a23.3 23.3 0 0023.3-36.7l-43.6-65.2z' fill='%23ef71a8'/%3E%3C/g%3E%3C/svg%3E">
<meta property="og:title" content="Base64 Encode / Decode">
<meta property="og:site_name" content="Base64 Encode / Decode">
<meta property="og:url" content="https://base64.cluster.fun">
<meta property="og:description" content="Web app to base64 encode and decode">
<meta property="og:type" content="website">
<meta property="og:image" content="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSItNTAwIC0xMDAgMTUxMiA3MTIiID4KICA8Zz4KICAgIDxwYXRoIGQ9Ik0xMjAuNSAxOTIuNWEyMy4zIDIzLjMgMCAwMDQyLjItOC40bDI1LjktMTMwLjRhMjMuMyAyMy4zIDAgMDAtMTguMy0yNy4zTDQwIC40YTIzLjMgMjMuMyAwIDAwLTI0IDM1LjhsNDQuMyA2Ni4xYTI0OSAyNDkgMCAwMDk2LjIgMzgxLjggMjMuMiAyMy4yIDAgMDAzMC42LTEyIDIzLjMgMjMuMyAwIDAwLTEyLTMwLjYgMjAyLjQgMjAyLjQgMCAwMS04Ny4zLTI5OGwzMi43IDQ5eiIgZmlsbD0iIzcxY2FkMSIvPgogICAgPHBhdGggZD0iTTQ1MS43IDQwOS43YTI0OSAyNDkgMCAwMC05Ni4yLTM4MS44QTIzLjMgMjMuMyAwIDAwMzM3IDcwLjVhMjAyLjQgMjAyLjQgMCAwMTg3LjMgMjk4bC0zMi43LTQ5YTIzLjMgMjMuMyAwIDAwLTQyLjIgOC40bC0yNS45IDEzMC40YTIzLjMgMjMuMyAwIDAwMTguMyAyNy4zbDEzMC4zIDI2YTIzLjMgMjMuMyAwIDAwMjMuMy0zNi43bC00My42LTY1LjJ6IiBmaWxsPSIjZWY3MWE4Ii8+CiAgPC9nPgo8L3N2Zz4K">
<meta name="twitter:card" content="summary" />
<meta name="twitter:creator" content="@Marcus_Noble_" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.css">
<link rel="stylesheet" href="https://githubraw.com/AverageMarcus/milligram/master/dist/milligram.min.css">
<style>
body {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
}
textarea {
height: 50vh;
}
</style>
</head> </head>
<body> <body>
<h1> <div class="container">
<h1 class="heading-fancy">
Base64 Encode / Decode Base64 Encode / Decode
<svg style="height:50px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512"><g><path d="M120.5 192.5a23.3 23.3 0 0042.2-8.4l25.9-130.4a23.3 23.3 0 00-18.3-27.3L40 .4a23.3 23.3 0 00-24 35.8l44.3 66.1a249 249 0 0096.2 381.8 23.2 23.2 0 0030.6-12 23.3 23.3 0 00-12-30.6 202.4 202.4 0 01-87.3-298l32.7 49z" fill="#71cad1"/><path d="M451.7 409.7a249 249 0 00-96.2-381.8A23.3 23.3 0 00337 70.5a202.4 202.4 0 0187.3 298l-32.7-49a23.3 23.3 0 00-42.2 8.4l-25.9 130.4a23.3 23.3 0 0018.3 27.3l130.3 26a23.3 23.3 0 0023.3-36.7l-43.6-65.2z" fill="#ef71a8"/></g></svg>
</h1> </h1>
<div class="main">
<div class="encoded"> <blockquote>
<h2> Encodes and decodes between text and base64 as you type
Encoded </blockquote>
</h2>
<div class="row">
<div class="column">
<h2>Encoded</h2>
<textarea id="encoded"></textarea> <textarea id="encoded"></textarea>
</div> </div>
<button>🔄</button>
<div class="decoded"> <div class="column">
<h2> <h2>Decoded</h2>
Decoded
</h2>
<textarea id="decoded"></textarea> <textarea id="decoded"></textarea>
</div> </div>
</div> </div>
<div>
Source code available on <a href="https://github.com/AverageMarcus/base64" target="_blank" rel="noopener noreferrer">GitHub</a>, <a href="https://gitlab.com/AverageMarcus/base64" target="_blank" rel="noopener noreferrer">GitLab</a>, <a href="https://bitbucket.org/AverageMarcus/base64/" target="_blank" rel="noopener noreferrer">Bitbucket</a> & <a href="https://git.cluster.fun/AverageMarcus/base64" target="_blank" rel="noopener noreferrer">my own Gitea server</a>.
</div>
</div>
<div class="container">
<div class="row">
<div class="column column-60 column-offset-20">
<footer>
Made with
<svg height="20" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 449.3 449.3" xmlns:xlink="http://www.w3.org/1999/xlink"><title>love</title><g><path d="M0 162.7c1.5-7.7 2.7-15.4 4.5-23A125.5 125.5 0 0132 88a136.3 136.3 0 0162.7-40.6c8.3-2.9 17.7-3.2 26.6-3.7a134 134 0 0155.6 6.6c14.9 5.7 30 11 41 23.6 17-20 36.4-36.3 60-46.4 12-5.2 25.7-6.9 38.7-9.4a79.4 79.4 0 0140.3 3.2 96.4 96.4 0 0143.2 26 209.8 209.8 0 0137.8 55.4 133.2 133.2 0 0111 65.7c-3.2 42.2-21 79-41.5 114.8a431.2 431.2 0 01-47.6 64.3c-19.6 23-39.7 45.7-59.6 68.5-3.7 4.3-7.2 9-11.7 12.4-7.3 5.4-15.9 4.9-23.8 1.5-21.9-9.2-43.8-18.5-65.3-28.5a520.1 520.1 0 01-98-58.7c-28.2-21.5-55.5-44.3-74-75.3a183.8 183.8 0 01-25-61.4c-1-6.2-1.6-12.6-2.4-18.8v-24.5zM138 281l2.5.1c0 2.1.3 4.3 0 6.3l-9 55.5c-.3 1.6 0 4.2 1 5 5.8 4.1 11.8 7.8 17.9 11.8l11-59.7 2.5.3c3.7 21.6-6.3 42-7.6 63.5l19.4 9.6c.5-18 2.2-35 6.9-51.6 1.3 4 1.5 8 1.2 12-.7 11.2-1 22.5-2.6 33.7-1 7.3 1.9 10.6 8 13.3 27 11.7 54.1 23.5 81 35.7 5.5 2.5 8.8 1.5 12.6-2.9 12.5-14.4 25.7-28.1 38-42.7 17.2-20.2 34.5-40.5 50.5-61.7 29.5-39.2 52.7-81.7 61-131 3.6-21.7 2-43-5.6-63.5a176 176 0 00-33.9-54.5 84.8 84.8 0 00-38-26 91.2 91.2 0 00-44.2-2.5c-13 2-25.6 5.1-37.2 12.3a208.6 208.6 0 00-45.9 37c-5.7 6.3-7.8 6.4-15 1.4-5.7-4-11-8.8-17.2-11.9-15.1-7.5-30.7-14.4-48-14.9-13.7-.4-28-2-41.2 1-36 8.4-62.7 30-80.3 62.8a111 111 0 00-11.7 56.6c.3 10 1.4 20 2.2 29.9 7-18.9 11-38.3 19.7-56.3.6 3 .6 6 0 8.7l-14.5 53.2c-.7 2.6-2 5.7-1.2 8 2.7 8.4 6.2 16.6 9.4 24.8 0-20 13.7-63.9 21.8-66.8 0 .6.3 1.1.2 1.6a11936 11936 0 01-17 64c-.3 1.4-1.6 2.6-2.9 4.5l9.7 17a573 573 0 0120-67.3l2.9.7c-1 5-1.5 10-2.8 14.9-4.7 17.2-9.6 34.3-14.2 51.5-.7 2.5-1.5 6-.3 7.8 3.6 5.6 8 10.7 12.4 16.1 1.8-8.6 3.1-16.6 5.2-24.4 3.1-11.5 6.6-22.9 10.2-34.3.8-2.6 2.7-5 4-7.4l2 .8c-.1 1.6-.1 3.4-.5 5l-12.2 47.4c-4.6 17.9-4.3 18.9 7.8 29.4 2.2 1.8 4.5 3.5 7 5.3 3.7-31 12.5-64.7 18.4-68-.3 3.5-.3 6.6-.9 9.6l-12.7 58.8c-.3 1.2-.7 3-.1 3.5 4.7 4.4 9.6 8.6 14.5 12.9 3.5-21.4 7.6-41.7 13.6-61.6 3.4 8.7.6 17-.8 25.2-1.9 11.6-4.5 23.1-6.5 34.7-.4 2.3-.4 6 1 7 4.8 4.2 10.3 7.4 16 11.3 3.9-21.5 5.5-42.6 12.6-62.5z"/><path d="M323.2 180.5a24 24 0 01-24.5-19.7c-2-9.7.7-20.2 15-27 16.6-7.8 38.3 2.3 41.6 19.5 1.2 6.6-1.6 12.1-6 16.3a35.1 35.1 0 01-26 11z"/><path d="M138.9 167.1a31 31 0 0125 12.7 22 22 0 01-13.6 34.9 29.9 29.9 0 01-31-9.9c-6-7-7.6-15.3-4.1-24.1 3.7-9.5 12-12 21-13.5.8-.2 1.8 0 2.7 0z"/><path d="M233.2 202c-18.5-.4-33.7-13.6-34-29.7 0-4.2.4-8 5.4-8.7 4.5-.7 6.6 2.3 8 6 2.3 6.6 5.5 12.4 12.4 15.4 7.5 3.2 14 1.5 20.4-3.3 6.2-4.7 6.4-11 4.7-17.5-1.4-5.2.4-8.4 4.7-10.2 4.3-1.7 9 1.3 10.9 6.2 7.2 19.8-5.7 34.6-22.8 40.2-3 1-6.5 1-9.7 1.6z"/><path d="M201.2 384.7c-.9-2-2.7-4.2-2.5-6.2 1.2-14 2.8-28.1 4.4-42.2 0-.9.7-1.7 1-2.6l2.6 1.1-3.1 49.1-2.4.8z"/><path d="M222 387.4c-4.8-5.7-5-15-1-37.8 3.1 3 4 30.5 1 37.8z"/><path d="M240.9 361.7l-1.4 20.2c-4.8-3.3-4.6-11.9-.2-20.4l1.6.2z"/><path d="M257.4 380.4c-4.1-5.2-3.7-9.7 1-14.7l-1 14.7z"/></g></svg>
by <a href="https://marcusnoble.co.uk" class="fancy-link">Marcus Noble</a>
</footer>
</div>
</div>
</div>
<script>
function decode(e) {
try {
document.getElementById("decoded").value = atob(e.target.value);
} catch (ex) {
document.getElementById("decoded").value = "⚠️ INVALID!!!"
}
}
function encode(e) {
try {
document.getElementById("encoded").value = btoa(e.target.value);
} catch (ex) {
document.getElementById("decoded").value = "⚠️ INVALID!!!"
}
}
document.getElementById("encoded").addEventListener("change", decode);
document.getElementById("encoded").addEventListener("keyup", decode);
document.getElementById("decoded").addEventListener("change", encode);
document.getElementById("decoded").addEventListener("keyup", encode);
</script>
</body> </body>
</html> </html>

BIN
logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 68 KiB

View File

@ -1,14 +0,0 @@
document.getElementById("encoded").addEventListener("change", function() {
try {
document.getElementById("decoded").value = atob(this.value);
} catch (ex) {
document.getElementById("decoded").value = "⚠️ INVALID!!!"
}
});
document.getElementById("decoded").addEventListener("change", function() {
try {
document.getElementById("encoded").value = btoa(this.value);
} catch (ex) {
document.getElementById("decoded").value = "⚠️ INVALID!!!"
}
});

View File

@ -1,42 +0,0 @@
body {
font-family: helvetica, arial, sans-serif;
margin: 0;
padding: 0;
width: 100%;
text-align: center;
background-color: #dbe3e5;
background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2392aca0' fill-opacity='0.4'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.main {
display:flex;
width: 100%;
justify-content: space-evenly;
}
textarea {
width: 40vw;
height: 50vh;
background-color: #ffffffbb;
font-size: 1.5em;
border: none;
padding: 4px;
}
button {
height: 50px;
align-self: center;
font-size: 3em;
background: none;
border: none;
}
@media(max-width: 700px) {
.main {
flex-direction: column;
}
textarea {
width: 90vw;
}
}