Skip to content

Commit ea662ed

Browse files
utdevnputdevnp
committed
Initial commit
0 parents  commit ea662ed

File tree

1 file changed

+168
-0
lines changed

1 file changed

+168
-0
lines changed

‎index.html‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>64 Magic</title>
7+
<!-- Bootstrap CSS -->
8+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
9+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
10+
<style>
11+
body {
12+
font-family: Arial, sans-serif;
13+
padding: 20px;
14+
background-color: #dedede7a;
15+
}
16+
.container {
17+
max-width: 900px;
18+
margin: 0 auto;
19+
}
20+
.row {
21+
display: flex;
22+
gap: 20px;
23+
}
24+
.copy-btn {
25+
cursor: pointer;
26+
padding: 8px 16px;
27+
background-color: #007BFF;
28+
color: white;
29+
border: none;
30+
border-radius: 4px;
31+
}
32+
.copy-btn:hover {
33+
background-color: #0056b3;
34+
}
35+
.action-btn {
36+
background-color: #28a745;
37+
color: white;
38+
}
39+
.action-btn:hover {
40+
background-color: #218838;
41+
}
42+
textarea {
43+
width: 100%;
44+
min-height: 100vh;
45+
}
46+
.col-md-6 {
47+
flex: 1;
48+
}
49+
</style>
50+
</head>
51+
<body>
52+
<div class="container-fluid">
53+
<div class="row">
54+
<!-- Left Side: Input Textarea -->
55+
56+
<div class="col-md-6">
57+
<div class="d-flex flex-row-reverse gap-2">
58+
<div>
59+
<button class="btn btn-success" id="encryptBtn"><i class="bi bi-arrow-right"></i></button>
60+
</div>
61+
<div>
62+
<button class="btn btn-light" onclick="copyToClipboard('inputText')"><i class="bi bi-copy"></i></button>
63+
</div>
64+
</div>
65+
<div class="mt-2">
66+
<textarea id="inputText" rows="25" class="form-control w-100" placeholder="Enter string here"></textarea>
67+
<p id="inputSize">0 bytes</p>
68+
</div>
69+
70+
71+
</div>
72+
<!-- Right Side: Output Textarea -->
73+
<div class="col-md-6">
74+
<div class="d-flex flex-row-reverse gap-2 ">
75+
<div class="me-2">
76+
<button class="btn btn-success" id="decryptBtn"><i class="bi bi-arrow-left"></i></button>
77+
</div>
78+
<div>
79+
<button class="btn btn-light" onclick="copyToClipboard('outputText')"><i class="bi bi-copy"></i></button>
80+
</div>
81+
</div>
82+
<div class="mt-2">
83+
<textarea id="outputText" rows="25" class="form-control w-100" placeholder="64 Magic will appear here "></textarea>
84+
<p id="outputSize">0 bytes</p>
85+
</div>
86+
</div>
87+
</div>
88+
89+
90+
</div>
91+
92+
<!-- Bootstrap JS and dependencies (optional) -->
93+
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
94+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
95+
96+
<script>
97+
98+
// Handle Encryption (Encoding)
99+
document.getElementById('encryptBtn').addEventListener('click', () => {
100+
const inputText = document.getElementById('inputText').value.trim();
101+
getSize("outputText", "outputSize");
102+
// If the input is a regular string, encode it to Base64
103+
if (inputText && !isBase64(inputText)) {
104+
const encodedText = btoa(inputText);
105+
document.getElementById('outputText').value = encodedText;
106+
} else {
107+
alert('Please enter a valid .env string for encoding.');
108+
}
109+
});
110+
111+
// Handle Decryption (Decoding)
112+
document.getElementById('decryptBtn').addEventListener('click', () => {
113+
const inputText = document.getElementById('outputText').value.trim();
114+
getSize("inputText", "inputSize");
115+
getSize("outputText", "outputSize");
116+
// If the input is Base64, decode it
117+
if (isBase64(inputText)) {
118+
try {
119+
const decodedText = atob(inputText);
120+
document.getElementById('inputText').value = decodedText;
121+
} catch (error) {
122+
alert('Invalid Base64 string.');
123+
}
124+
} else {
125+
alert('Please enter a valid Base64 string to decode.');
126+
}
127+
});
128+
129+
document.getElementById("inputText").addEventListener("change", ()=> {
130+
getSize("inputText", "inputSize");
131+
getSize("outputText", "outputSize");
132+
})
133+
134+
document.getElementById("outputText").addEventListener("change", ()=> {
135+
getSize("inputText", "inputSize");
136+
getSize("outputText", "outputSize");
137+
})
138+
function getSize(fieldId, sizeId) {
139+
const input = document.getElementById(fieldId).value;
140+
const result = calculateStringSize(input);
141+
document.getElementById(sizeId).innerHTML = `${result} bytes`;
142+
}
143+
144+
// Function to check if a string is valid Base64
145+
function isBase64(str) {
146+
try {
147+
return btoa(atob(str)) === str;
148+
} catch (err) {
149+
return false;
150+
}
151+
}
152+
153+
// Calculate string
154+
function calculateStringSize(str) {
155+
const blob = new Blob([str]);
156+
return blob.size;
157+
}
158+
159+
// Function to copy the output text to clipboard
160+
function copyToClipboard(id) {
161+
const textArea = document.getElementById(id);
162+
textArea.select();
163+
document.execCommand('copy');
164+
alert('Copied to clipboard!');
165+
}
166+
</script>
167+
</body>
168+
</html>

0 commit comments

Comments
 (0)