From a0cff01c36c5afb376b6a5c71875a3b3696377c7 Mon Sep 17 00:00:00 2001
From: zyqunix <117040076+zyqunix@users.noreply.github.com>
Date: Mon, 7 Apr 2025 20:21:23 +0200
Subject: [PATCH] add base64 encoder/decoder
---
base64/index.html | 27 +++++++++++++++++++++++++++
base64/index.js | 23 +++++++++++++++++++++++
base64/style.css | 37 +++++++++++++++++++++++++++++++++++++
3 files changed, 87 insertions(+)
create mode 100644 base64/index.html
create mode 100644 base64/index.js
create mode 100644 base64/style.css
diff --git a/base64/index.html b/base64/index.html
new file mode 100644
index 0000000..006be92
--- /dev/null
+++ b/base64/index.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+ Base64 Encoder/Decoder
+
+
+
+
+ Base64 Encoder/Decoder
+
+
Base64 Encoder
+
+
+
+
+
+
+
Base64 Decoder
+
+
+
+
+
+
+
diff --git a/base64/index.js b/base64/index.js
new file mode 100644
index 0000000..085fa3c
--- /dev/null
+++ b/base64/index.js
@@ -0,0 +1,23 @@
+const decodeElem = document.getElementById('decodeInput');
+const encodeElem = document.getElementById('encodeInput');
+const decodeOut = document.getElementById('decodeOutput');
+const encodeOut = document.getElementById('encodeOutput');
+
+function encodeBase64() {
+ const input = encodeElem.value;
+ const encoded = btoa(input);
+ encodeOut.value = encoded;
+}
+
+function decodeBase64() {
+ const input = decodeElem.value;
+ try {
+ const decoded = atob(input);
+ decodeOut.value = decoded;
+ } catch {
+ decodeOut.value = 'Invalid Base64 input';
+ }
+}
+
+document.getElementById('encode').addEventListener('click', encodeBase64);
+document.getElementById('decode').addEventListener('click', decodeBase64);
diff --git a/base64/style.css b/base64/style.css
new file mode 100644
index 0000000..019d7d2
--- /dev/null
+++ b/base64/style.css
@@ -0,0 +1,37 @@
+@import url(/global.css);
+
+div {
+ margin-bottom: 50px;
+}
+
+textarea {
+ resize: none;
+ background-color: #2a2a2a;
+ color: #f0f0f0;
+ border: 2px solid #2c2c2c;
+ margin-bottom: 25px;
+ border-radius: 5px;
+ outline: none;
+}
+
+textarea[readonly] {
+ background-color: #282828;
+ color: #999;
+}
+
+button {
+ margin: 5px 0 50px 0;
+ width: 50%;
+ height: 15%;
+ background-color: #2a2a2a;
+ color: #f0f0f0;
+ border: 2px solid #2c2c2c;
+ cursor: pointer;
+ border-radius: 5px;
+ font-size: 16px;
+}
+
+button:hover {
+ background-color: #2c2c2c;
+ border: 2px solid #2e2e2e;
+}