mirror of
https://github.com/zyqunix/tools.git
synced 2025-07-06 06:20:30 +02:00
add base64 encoder/decoder
This commit is contained in:
parent
825c90e3b1
commit
a0cff01c36
3 changed files with 87 additions and 0 deletions
27
base64/index.html
Normal file
27
base64/index.html
Normal file
|
@ -0,0 +1,27 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Base64 Encoder/Decoder</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<link rel="shortcut icon" href="https://rimgo.pussthecat.org/RFbdMMB.png" type="image/x-icon">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Base64 Encoder/Decoder</h1>
|
||||||
|
<div class="card">
|
||||||
|
<h2>Base64 Encoder</h2>
|
||||||
|
<textarea id="encodeInput" rows="5" cols="50" placeholder="Enter text to encode"></textarea>
|
||||||
|
<textarea id="encodeOutput" rows="5" cols="50" readonly placeholder="Encoded Base64 result"></textarea>
|
||||||
|
<button id="encode">Encode</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h2>Base64 Decoder</h2>
|
||||||
|
<textarea id="decodeInput" rows="5" cols="50" placeholder="Enter Base64 to decode"></textarea>
|
||||||
|
<textarea id="decodeOutput" rows="5" cols="50" readonly placeholder="Decoded result"></textarea>
|
||||||
|
<button id="decode">Decode</button>
|
||||||
|
</div>
|
||||||
|
<script src="index.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
23
base64/index.js
Normal file
23
base64/index.js
Normal file
|
@ -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);
|
37
base64/style.css
Normal file
37
base64/style.css
Normal file
|
@ -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;
|
||||||
|
}
|
Loading…
Add table
Add a link
Reference in a new issue