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;
+ }
+}