Skip to content

Commit c27cdf7

Browse files
M3hankM3hank
authored
Add files via upload
1 parent c2b04ff commit c27cdf7

File tree

3 files changed

+138
-0
lines changed

3 files changed

+138
-0
lines changed

‎CodeCipher/M3hank/index.html

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Encoder & Decoder</title>
8+
<link rel="stylesheet" href="styles.css">
9+
</head>
10+
11+
<body>
12+
<div class="container">
13+
<h2>CodeCipher</h2>
14+
<textarea id="input" placeholder="Enter your text here..."></textarea>
15+
16+
<div class="buttons">
17+
<button onclick="convert('encode', 'uri')">URL Encode</button>
18+
<button onclick="convert('decode', 'uri')">URL Decode</button>
19+
<button onclick="convert('encode', 'base64')">Base64 Encode</button>
20+
<button onclick="convert('decode', 'base64')">Base64 Decode</button>
21+
<button onclick="convert('encode', 'html')">HTML Entity Encode</button>
22+
<button onclick="convert('decode', 'html')">HTML Entity Decode</button>
23+
<button onclick="convert('encode', 'unicode')">Unicode Escape</button>
24+
<button onclick="convert('decode', 'unicode')">Unicode Unescape</button>
25+
<button onclick="convert('encode', 'hex')">Hex Encode</button>
26+
<button onclick="convert('decode', 'hex')">Hex Decode</button>
27+
<button onclick="convert('encode', 'binary')">Binary Encode</button>
28+
<button onclick="convert('decode', 'binary')">Binary Decode</button>
29+
</div>
30+
31+
<textarea id="output" readonly placeholder="Output will appear here..."></textarea>
32+
<div class="author">
33+
Made by M3hank
34+
</div>
35+
</body>
36+
</html>
37+
</div>
38+
<script src="scripts.js"></script>
39+
</body>
40+
41+
</html>

‎CodeCipher/M3hank/scripts.js

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
/**
2+
* Encoder & Decoder Script
3+
* Author: M3hank
4+
*/
5+
6+
function convert(type, method) {
7+
const input = document.getElementById('input').value;
8+
let output = '';
9+
10+
switch (method) {
11+
case 'uri':
12+
output = (type === 'encode') ? encodeURIComponent(input) : decodeURIComponent(input);
13+
break;
14+
case 'base64':
15+
output = (type === 'encode') ? btoa(unescape(encodeURIComponent(input))) : decodeURIComponent(escape(atob(input)));
16+
break;
17+
case 'html':
18+
const textArea = document.createElement('textarea');
19+
if (type === 'encode') {
20+
textArea.innerText = input;
21+
output = textArea.innerHTML;
22+
} else {
23+
textArea.innerHTML = input;
24+
output = textArea.value;
25+
}
26+
break;
27+
case 'unicode':
28+
output = (type === 'encode') ? input.split('').map(char => '\\u' + char.charCodeAt(0).toString(16).padStart(4, '0')).join('') : input.replace(/\\u([\d\w]{4})/gi, (match, grp) => String.fromCharCode(parseInt(grp, 16)));
29+
break;
30+
case 'hex':
31+
output = (type === 'encode') ? Array.from(input).map(ch => ch.charCodeAt(0).toString(16)).join('') : String.fromCharCode(...input.match(/.{1,2}/g).map(byte => parseInt(byte, 16)));
32+
break;
33+
case 'binary':
34+
output = (type === 'encode') ? Array.from(input).map(ch => ch.charCodeAt(0).toString(2).padStart(8, '0')).join('') : String.fromCharCode(...input.match(/.{1,8}/g).map(byte => parseInt(byte, 2)));
35+
break;
36+
}
37+
38+
document.getElementById('output').value = output;
39+
}

‎CodeCipher/M3hank/styles.css

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
/*
2+
* Encoder & Decoder Styles
3+
* Author: M3hank
4+
*/
5+
6+
body {
7+
font-family: 'Arial', sans-serif;
8+
background-color: #f4f4f4;
9+
padding: 40px;
10+
}
11+
12+
.container {
13+
background-color: #fff;
14+
padding: 30px;
15+
border-radius: 8px;
16+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
17+
max-width: 600px;
18+
margin: 0 auto;
19+
}
20+
21+
.dropdown {
22+
padding: 10px 15px;
23+
border-radius: 5px;
24+
border: 1px solid #e0e0e0;
25+
width: 100%;
26+
margin-bottom: 15px;
27+
}
28+
29+
textarea {
30+
width: 100%;
31+
padding: 15px;
32+
border-radius: 5px;
33+
border: 1px solid #e0e0e0;
34+
margin-bottom: 15px;
35+
resize: vertical;
36+
}
37+
38+
.btn {
39+
background-color: #007bff;
40+
color: #fff;
41+
padding: 10px 15px;
42+
border: none;
43+
border-radius: 5px;
44+
cursor: pointer;
45+
transition: background-color 0.3s;
46+
}
47+
48+
.btn:hover {
49+
background-color: #0056b3;
50+
}
51+
52+
.author {
53+
font-size: 1.2em;
54+
text-align: center;
55+
margin-top: 20px;
56+
color: black;
57+
font-weight: bold;
58+
}

0 commit comments

Comments
 (0)