From efa4821accebc0efaea1d5efc3d51a14fcd60c02 Mon Sep 17 00:00:00 2001 From: Marcus Noble Date: Tue, 13 Oct 2020 17:30:35 +0100 Subject: [PATCH] Initial release --- Dockerfile | 3 +++ README.md | 24 ------------------------ index.html | 31 +++++++++++++++++++++++++++++++ script.js | 14 ++++++++++++++ style.css | 42 ++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 90 insertions(+), 24 deletions(-) create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/Dockerfile b/Dockerfile index e69de29..0d2acdb 100644 --- a/Dockerfile +++ b/Dockerfile @@ -0,0 +1,3 @@ +FROM nginx:latest +WORKDIR /usr/share/nginx/html +ADD index.html style.css script.js ./ diff --git a/README.md b/README.md index 5925391..a4b8fc4 100644 --- a/README.md +++ b/README.md @@ -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. diff --git a/index.html b/index.html new file mode 100644 index 0000000..3bcd3a6 --- /dev/null +++ b/index.html @@ -0,0 +1,31 @@ + + + + + + + Base64 Encode / Decode + + + + +

+ Base64 Encode / Decode +

+
+
+

+ Encoded +

+ +
+ +
+

+ Decoded +

+ +
+
+ + diff --git a/script.js b/script.js new file mode 100644 index 0000000..41baa71 --- /dev/null +++ b/script.js @@ -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!!!" + } +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..9e2d597 --- /dev/null +++ b/style.css @@ -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; + } +}