-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
145 lines (132 loc) · 4.55 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Phrase Encryptor</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
<style>
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
</style>
</head>
<body class="min-h-screen flex items-center justify-center">
<div class="bg-white p-8 rounded-xl shadow-2xl w-96">
<h1 class="text-2xl font-bold mb-4 text-center text-purple-600">Femboy Encryptor/Decryptor</h1>
<textarea
id="inputText"
class="w-full p-2 border rounded mb-4 resize-none"
rows="4"
placeholder="Enter your phrase..."
></textarea>
<div class="flex space-x-2 mb-4">
<button
id="encryptBtn"
class="w-1/2 bg-purple-600 text-white py-2 rounded hover:bg-purple-700 transition duration-300"
>
Encrypt
</button>
<button
id="decryptBtn"
class="w-1/2 bg-green-600 text-white py-2 rounded hover:bg-green-700 transition duration-300"
>
Decrypt
</button>
</div>
<div
id="outputContainer"
class="mt-4 p-2 border rounded bg-gray-100 hidden"
>
<h2
id="outputTitle"
class="font-semibold mb-2 text-purple-600"
>Result:</h2>
<p
id="outputText"
class="break-words"
></p>
</div>
</div>
<script>
const ENCRYPTION_MAP = {
'A': ':3',
'B': '3:::',
'C': '3:3:',
'D': '3::',
'E': ':',
'F': '::3:',
'G': '33:',
'H': '::::',
'I': '::',
'J': ':333',
'K': '3:3',
'L': ':3::',
'M': '33',
'N': '3:',
'O': '333',
'P': ':33:',
'Q': '33:3',
'R': ':3:',
'S': ':::',
'T': '3',
'U': '::3',
'V': ':::3',
'W': ':33',
'X': '3::3',
'Y': '3:33',
'Z': '33::'
};
const DECRYPTION_MAP = Object.fromEntries(
Object.entries(ENCRYPTION_MAP).map(([key, value]) => [value, key])
);
const inputText = document.getElementById('inputText');
const encryptBtn = document.getElementById('encryptBtn');
const decryptBtn = document.getElementById('decryptBtn');
const outputContainer = document.getElementById('outputContainer');
const outputText = document.getElementById('outputText');
const outputTitle = document.getElementById('outputTitle');
function encrypt(text) {
return text.toUpperCase().split(' ').map(word => {
return word.split('').map(char => {
return ENCRYPTION_MAP[char] || char;
}).join(' ');
}).join(' - ');
}
function decrypt(text) {
return text.split(' - ').map(word => {
const codes = word.split(' ');
return codes.map(code => {
return DECRYPTION_MAP[code] || code;
}).join('');
}).join(' ');
}
encryptBtn.addEventListener('click', () => {
const input = inputText.value;
if (input.trim() === '') {
alert('Please enter a phrase to encrypt');
return;
}
const encrypted = encrypt(input);
outputText.textContent = encrypted;
outputTitle.textContent = 'Encrypted Phrase:';
outputContainer.classList.remove('hidden');
});
decryptBtn.addEventListener('click', () => {
const input = inputText.value;
if (input.trim() === '') {
alert('Please enter a phrase to decrypt');
return;
}
try {
const decrypted = decrypt(input);
outputText.textContent = decrypted;
outputTitle.textContent = 'Decrypted Phrase:';
outputContainer.classList.remove('hidden');
} catch (error) {
alert('Invalid encryption format');
}
});
</script>
</body>
</html>