<!
DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Szyfrator</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
h1 {
text-align: center;
}
textarea {
width: 100%;
height: 100px;
margin-bottom: 20px;
padding: 10px;
font-size: 16px;
}
button {
width: 100%;
padding: 10px;
font-size: 18px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<h1>Szyfrator</h1>
<textarea id="inputText" placeholder="Wpisz wiadomość do
szyfrowania..."></textarea>
<button onclick="encryptMessage()">Szyfruj</button>
<button onclick="decryptMessage()">Odszyfruj</button>
<h3>Wynik:</h3>
<textarea id="outputText" readonly></textarea>
<script>
const charMap = {
'a': 'gh1', 'b': 'x7z', 'c': 'd9l', 'd': 'q0e', 'e': 'v8t', 'f': 'm2r',
'g': 'y5w', 'h': 'k3n', 'i': 'z1b', 'j': 'u9s', 'k': 'p4x', 'l': 'j8m',
'm': 'r0c', 'n': 'w6d', 'o': 't7f', 'p': 'b2h', 'q': 'l5v', 'r': 'a0u',
's': 'c1e', 't': 's9z', 'u': 'h4q', 'v': 'e3g', 'w': 'n7y', 'x': 'i2k',
'y': 'o8j', 'z': 'f6a'
};
const reverseMap = Object.fromEntries(Object.entries(charMap).map(([key,
value]) => [value, key]));
function encryptMessage() {
let text = document.getElementById("inputText").value.toLowerCase();
let encrypted = '';
let count = 0;
for (let i = 0; i < text.length; i++) {
let char = text[i];
if (charMap[char]) {
encrypted += charMap[char] + '00';
count++;
if (count % 2 === 0) encrypted += 'ff';
}
}
document.getElementById("outputText").value = encrypted;
}
function decryptMessage() {
let text = document.getElementById("inputText").value.toLowerCase();
let decrypted = '';
let parts = text.split('00');
parts.forEach(part => {
if (reverseMap[part] && part !== 'ff') {
decrypted += reverseMap[part];
}
});
document.getElementById("outputText").value = decrypted;
}
</script>
</body>
</html>
