https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js

* {
@font-face { font-family:’GmarketSansMedium’;src:url(‘https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff’)format(‘woff’);font-weight: normal; font-style: normal; }
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
display: flex;
flex-direction: column;
align-items: center;
height: 20cm;
}

.navigator {
width: 100%;
height: 10%;
background-color: #f0f0f0;
border-bottom: 1px solid #000;
}

.container {
margin-top: 4%;
width: 100%;
height: 50%;
display: flex;
justify-content: space-around;
padding: 2%;
}

.fieldset {
width: 80%;
height: 100%;
border-radius:10pt;
display: flex;
flex-direction: column;
justify-content: space-between;
border0 0px solid #000;
border-color:#e1e1e1; border-style:solid; border-width:1px; box-shadow:0 2px 6px rgba(0,0,0,0.1);
}

.button {
height: 15%;
width: 100%;
background-color: transparent;
border: 0px;
padding-left: 3%;
padding-right: 3%;
display: flex;
align-items: center; /* Add this property */
justify-content: space-between; /* Modify this property */
}
#copyimg {
width: 70%; height: 70%; object-fit: cover;}

.input {
width: 100%;
height: 70%;
border: 1px solid #ddd;
border-right: 0;
border-left: 0;
.space { width: 70%; height: auto; display: inline-block; } }

input:focus{outline: none;}
textarea:focus{outline:none;}

button {
outline: none;
border-color:#e1e1e1;border-style:solid;
}
.custom-btn {
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
}

/* 15 */
.btn-15 {
background: #000;
color: #fff;
z-index: 1;
}
.btn-15:after {
position: absolute;
content: “”;
width: 0;
height: 100%;
top: 0;
right: 0;
z-index: -1;
background: #e0e5ec;
transition: all 0.3s ease;
border-bottom-right-radius: 10pt
}
.btn-15:hover {
color: #000;
}
.btn-15:hover:after {
left: 0;
width: 100%;
}
.btn-15:active {
top:2px
}

document.addEventListener(“mouseup”, function(event) {

var obj = document.getElementById(“inputContainer”);

if (!obj.contains(event.target)) {

resetColor();
}

else {

changeColor();

}

});

function changeColor(){
var target=document.getElementById(“inputContainer”);
target.style.borderColor=”rgb(0,255,255)”;
}

function resetColor(){
var target=document.getElementById(“inputContainer”);
target.style.borderColor=”#e1e1e1″;
}

document.addEventListener(“mouseup”, function(event) {

var obj = document.getElementById(“change”);

if (obj.contains(event.target)) {

changeColor1();

}

});

function changeColor1(){
var target=document.getElementById(“change”);
target.style.color=”rgb(0,255,255)”;
}

function resetColor1(){
var target=document.getElementById(“change”);
target.style.color=”#e1e1e1″;
}

document.getElementById(‘runButton’).addEventListener(‘click’, function() {
var inputName = document.getElementById(‘inputName’).innerText;
var secretKey = document.getElementById(‘secretKey’).value;
if(inputName === “원문”) {
let plainText = document.getElementById(‘inputText’).value;

let cipherText = CryptoJS.AES.encrypt(plainText, secretKey).toString();

document.getElementById(‘result’).value = cipherText;
}else if(inputName===”암호문”){
let cipherText = document.getElementById(‘inputText’).value;

let bytes = CryptoJS.AES.decrypt(cipherText, secretKey);

let originalText = bytes.toString(CryptoJS.enc.Utf8);

document.getElementById(‘result’).value = originalText;
}
});

document.getElementById(‘change’).addEventListener(‘click’, function() {
var inputName = document.getElementById(‘inputName’);
var resultName = document.getElementById(‘resultName’);
if(inputName.innerText === “원문”) {
inputName.innerText = “암호문”;
resultName.innerText = “원문”;
document.getElementById(‘runButton’).textContent = “암호화”;
} else {
inputName.innerText = “원문”;
resultName.innerText = “암호문”;
document.getElementById(‘runButton’).textContent = “복호화”;
}
});

function myFunction() {
/* Get the text field */
var copyText = document.getElementById(“result”);
window.navigator.clipboard.writeText(copyText.value)

}
function download() {
var text = document.getElementById(“result”).value;
var element = document.createElement(‘a’);
element.setAttribute(‘href’, ‘data:text/plain;charset=utf-8,’ + encodeURIComponent(text));
element.setAttribute(‘download’, “hi.txt”);

element.style.display = ‘none’;
document.body.appendChild(element);

element.click();

document.body.removeChild(element);
}