-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
241 lines (203 loc) · 9.53 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<!-- Basic Meta Tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="icon" type="image/x-icon" href="./key-fill.svg">
<!-- Title Tag (SEO) -->
<title>64 Magic - Convert and Compress Strings to Base64</title>
<!-- Meta Description (SEO) -->
<meta name="description"
content="64 Magic is a tool that allows you to convert normal strings to Base64 encoding and compress them for efficient storage or transmission.">
<!-- Meta Tags for SEO -->
<meta name="keywords"
content="Base64, Compression, String Encoder, Base64 Converter, Data Compression, Text Converter">
<!-- Open Graph Meta Tags (For Facebook and LinkedIn sharing) -->
<meta property="og:title" content="64 Magic - Convert and Compress Strings to Base64">
<meta property="og:description"
content="64 Magic is a tool that lets you convert any string to Base64 encoding and compress it for more efficient storage. Perfect for handling long strings with ease.">
<meta property="og:image" content="https://utdevnp.github.io/64magic/key-fill.svg">
<meta property="og:url" content="https://utdevnp.github.io/64magic/">
<meta property="og:type" content="website">
<!-- Twitter Meta Tags (For Twitter Card) -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="64 Magic - Convert and Compress Strings to Base64">
<meta name="twitter:description"
content="64 Magic allows you to convert any text to Base64 encoding and compress it for efficient transmission.">
<meta name="twitter:image" content="https://utdevnp.github.io/64magic/key-fill.svg">
<meta name="twitter:url" content="https://utdevnp.github.io/64magic/">
<!-- Author Meta Tag -->
<meta name="author" content="Utshab Luitel">
<!-- Robots Meta Tag -->
<meta name="robots" content="index, follow">
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #dedede7a;
}
.container {
max-width: 900px;
margin: 0 auto;
}
.row {
display: flex;
gap: 20px;
}
.copy-btn {
cursor: pointer;
padding: 8px 16px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 4px;
}
.copy-btn:hover {
background-color: #0056b3;
}
.action-btn {
background-color: #28a745;
color: white;
}
.action-btn:hover {
background-color: #218838;
}
textarea {
width: 100%;
min-height: 100vh;
}
.col-md-6 {
flex: 1;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-12 justify-align-center justify-item-center">
<h1 class="text-center"><i class="bi bi-key-fill text-primary" style="font-size: 56px;"></i></h1>
<p class="text-center"><strong>64 Magic</strong> </br>is a simple yet powerful tool that converts
regular strings into Base64 encoding and applies compression for more efficient storage or
transmission. It ensures that large or sensitive text data can be safely encoded and reduced in
size, making it ideal for transferring or storing long strings in a compact format.</p>
</div>
<div class="col-md-6">
<div class="d-flex flex-row-reverse gap-2">
<div>
<button class="btn btn-success btn-block" id="encryptBtn"><i
class="bi bi-arrow-right"></i></button>
</div>
<div>
<button class="btn btn-light" id="inputCopy" data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-trigger="manual" title="Copied!"
onclick="copyToClipboard('inputText', 'inputCopy')"><i class="bi bi-copy"></i></button>
</div>
</div>
<div class="mt-2">
<textarea id="inputText" rows="25" class="form-control w-100"
placeholder="Enter string here"></textarea>
<small class="text-denger" id="inputError"></small>
</div>
</div>
<!-- Right Side: Output Textarea -->
<div class="col-md-6">
<div class="d-flex flex-row-reverse gap-2 ">
<div class="me-2">
<button class="btn btn-success btn-block" id="decryptBtn"><i
class="bi bi-arrow-left"></i></button>
</div>
<div>
<button class="btn btn-light" id="outCopy" data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-trigger="manual" title="Copied!"
onclick="copyToClipboard('outputText', 'outCopy')"><i class="bi bi-copy"></i></button>
</div>
</div>
<div class="mt-2">
<textarea id="outputText" rows="25" class="form-control w-100"
placeholder="64 Magic string will appear here, or you can put magic string"></textarea>
</div>
</div>
<p class=" text-center "><small class="text-danger mt-2" id="outputError"></small></p>
</div>
<p class="text-center mt-2">Build in an hour and made with <i class="bi bi-heart-fill text-danger"></i></p>
</div>
<!-- Bootstrap JS and dependencies (optional) -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pako/2.0.4/pako.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
function validation(pass = true) {
if (pass) {
document.getElementById("outputText").style.border = "1px solid green";
document.getElementById("inputText").style.border = "1px solid green";
} else {
document.getElementById("outputText").style.border = "1px solid red";
document.getElementById("inputText").style.border = "1px solid red";
}
}
// Handle Encryption (Encoding)
document.getElementById('encryptBtn').addEventListener('click', async () => {
const inputText = document.getElementById('inputText').value.trim();
try {
document.getElementById('outputText').value = await base64Encrypt(inputText);
validation();
} catch (error) {
validation(false)
document.getElementById("inputError").innerText = "Unable to validate string ...";
}
});
// Handle Decryption (Decoding)
document.getElementById('decryptBtn').addEventListener('click', async () => {
const inputText = document.getElementById('outputText').value.trim();
try {
document.getElementById('inputText').value = await base64Decrypt(inputText);
validation()
} catch (error) {
document.getElementById("outputError").classList.add("outputText");
validation(false)
document.getElementById("outputError").innerText = "Invalid Base64 string. Please enter valid base64 and try again...";
}
});
async function getSize(fieldId, sizeId) {
const input = await document.getElementById(fieldId).value;
const result = await calculateStringSize(input);
if (result) {
document.getElementById(sizeId).innerText = `${result} bytes`;
}
}
// Base64 Encoding (Encrypt) Function
function base64Encrypt(str) {
return btoa(str);
}
// Base64 Decoding (Decrypt) Function
function base64Decrypt(base64Str) {
return atob(base64Str)
}
// Calculate string
async function calculateStringSize(str) {
const blob = new Blob([str]);
return await blob.size;
}
// Function to copy the output text to clipboard
function copyToClipboard(id, btnId) {
const textArea = document.getElementById(id);
const copyBtn = document.getElementById(btnId);
const tooltip = new bootstrap.Tooltip(copyBtn, { trigger: "manual" });
navigator.clipboard.writeText(textArea.value).then(() => {
tooltip.show();
setTimeout(() => {
tooltip.hide();
}, 500);
});
}
</script>
</body>
</html>