AverageMarcus/base64
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Initial release

Browse Source
This commit is contained in:
Marcus Noble 2020-10-13 17:30:35 +01:00
parent 5e05861934
commit efa4821acc
5 changed files with 90 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
Dockerfile
View File

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

24
README.md
View File

@ -2,30 +2,6 @@
Web app to base64 encode and decode
## Features
## Install
```sh
```
## Building from source
With Docker:
```sh
make docker-build
```
Standalone:
```sh
make build
```
## Resources
## Contributing
If you find a bug or have an idea for a new feature please [raise an issue](/AverageMarcus/base64/issues/new) to discuss it.

31
index.html Normal file
View File

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Base64 Encode / Decode</title>
<link rel="stylesheet" href="/style.css">
<script src="/script.js" defer></script>
</head>
<body>
<h1>
Base64 Encode / Decode
</h1>
<div class="main">
<div class="encoded">
<h2>
Encoded
</h2>
<textarea id="encoded"></textarea>
</div>
<button>🔄</button>
<div class="decoded">
<h2>
Decoded
</h2>
<textarea id="decoded"></textarea>
</div>
</div>
</body>
</html>

14
script.js Normal file
View File

@ -0,0 +1,14 @@
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!!!"
}
});

42
style.css Normal file
View File

@ -0,0 +1,42 @@
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;
}
}