<!DOCTYPE html>
<html>
<head>
<title>Web-based Encryption Tool</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js"></script>
</head>
<body>
<h1>Web-based Encryption Tool</h1>
<label for="plaintext">Plaintext:</label>
<br>
<textarea id="plaintext" rows="5" cols="50"></textarea>
<br>
<label for="key">Encryption Key:</label>
<br>
<input type="text" id="key">
<br>
<button onclick="encrypt()">Encrypt</button>
<button onclick="decrypt()">Decrypt</button>
<br>
<label for="ciphertext">Ciphertext:</label>
<br>
<textarea id="ciphertext" rows="5" cols="50"></textarea>
<script>
function encrypt() {
var plaintext = document.getElementById("plaintext").value;
var key = document.getElementById("key").value;
var ciphertext = CryptoJS.AES.encrypt(plaintext, key).toString();
document.getElementById("ciphertext").value = ciphertext;
}
function decrypt() {
var ciphertext = document.getElementById("ciphertext").value;
var key = document.getElementById("key").value;
var bytes = CryptoJS.AES.decrypt(ciphertext, key);
var plaintext = bytes.toString(CryptoJS.enc.Utf8);
document.getElementById("plaintext").value = plaintext;
}
</script>
</body>
</html>
