<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>비밀번호 생성 및 암호화</title>
<style>
body {
font-family: ‘Roboto’, sans-serif;
background-color: #f4f4f4;
color: #333;
}
.container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
border-radius: 5px;
box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
background-color: #fff;
}
h1 {
text-align:center ;
padding :10px ;
color :#555 ;
}
.form-group{
margin-bottom :20px ;
}
label{
display:block ;
font-weight:bold ;
margin-bottom :5px ;
}
input[type=”text”],
input[type=”password”] {
width:100% ;
padding :10px ;
font-size :16 px ;
border-radius :5 px ;
border :1 px solid #ddd;
}
button{
width :100% ;
padding :15 px;
font-size :16 px;
border-radius =10 px;
border =none;
}
button:hover {opacity=0.8;}
.button {
font-weight:bold ;
width=100% ;
height=60%;
border-radius=12%;
background-color=#f2f2f2;
}
.button1{
font-weight:bold ;
width=100% ;
height=40%;
border-radius=12%;
background-color=#f2f2f2;
}
#btn-download{
margin-top:auto ;
margin-bottom:auto ;
}
</style>
https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js
<script>
function generatePassword() {
var passwordLength = parseInt(document.getElementById(‘password-length’).value);
var includeUppercase = document.getElementById(‘include-uppercase’).checked;
var includeLowercase = document.getElementById(‘include-lowercase’).checked;
var includeNumbers = document.getElementById(‘include-numbers’).checked;
var includeSymbols = document.getElementById(‘include-symbols’).checked;
// 비밀번호 생성 로직
var characters = ”;
if (includeUppercase) characters += ‘ABCDEFGHIJKLMNOPQRSTUVWXYZ’;
if (includeLowercase) characters += ‘abcdefghijklmnopqrstuvwxyz’;
if (includeNumbers) characters += ‘0123456789’;
if (includeSymbols) characters += ‘!@#$%^&*()_+~`|}{[]\:;?><,./-=’;
var password = ”;
for (let i = 0; i < passwordLength; i++) {
password += characters.charAt(Math.floor(Math.random() * characters.length));
document.getElementById(“passward”).innerHTML = password
}
// AES-128 암호화
var secretKey = document.getElementById(‘secret-key’).value.trim();
const encryptedPassword = CryptoJS.AES.encrypt(password, secretKey).toString();
// 다운로드 파일 생성
const siteName = document.getElementById(‘site-name’).value.trim();
const dataToDownload =
`Site Name: ${siteName}
Encrypted Password:
${encryptedPassword}`;
const element = document.createElement(‘a’);
element.setAttribute(
‘href’,
‘data:text/plain;charset=utf-8,’ + encodeURIComponent(dataToDownload)
);
element.setAttribute(
‘download’,
`${siteName}_encrypted_password.txt`
);
element.style.display =’none’ ;
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
</script>
</head>
<body>
<div class=”container”>
<h1>비밀번호 생성 및 암호화</h1>
<div class=”form-group”>
<label for=”secret-key”>비밀키:</label>
<input type=”text” id=”secret-key” placeholder=”” required />
</div>
<div class=”form-group”>
<label for=”site-name”>사이트명:</label>
<input type=”text” id =”site-name” placeholder=”” required />
</div>
<div class =”form-group”>
<label for =”password-length”> 비밀번호 길이 :</label>
<select id =”password-length”>
<option value= “8”>8자리 </option>
<option value= “12”>12자리 </option>
<option value= “16”>16자리 </option>
<option value= “20”>20자리 </option>
</select>
<div class =”form-group”>
<input type= “checkbox” id =”include-uppercase” checked /> 대문자 포함
<input type= “checkbox” id =”include-lowercase”/> 소문자 포함
<input type= “checkbox” id =”include-numbers”/> 숫자 포함
<input type= “checkbox” id =”include-symbols”/> 특수문자 포함
<button onclick=’generatePassword()’ style =’cursor:pointer;’ >생성 및 다운로드 </button>
<button onclick=’history.go(0)’ style =’cursor:pointer;’ >다시하기 </button>
<button onclick=’location.href=”./”‘ style =’cursor:pointer;’ >새로고침 </button>
<br><br>
<p id=’passward’></p>
Aesencypt 