<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h2>Trình Tạo Username</h2>
<input type="text" id="fullName" placeholder="Nhập: Trần Công Tuấn" onkeyup="if(event.keyCode === 13) processName()">
<button onclick="processName()">Tạo kết quả</button>
<div id="resultBox" class="result">
<p>Họ & Đệm: <span id="displayHo" class="value"></span></p>
<p>Tên: <span id="displayTen" class="value"></span></p>
<div class="username-box">
<span>Username: </span>
<span id="displayUser" class="value" style="font-size: 1.2rem; color: #d93025;"></span>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
body { font-family: 'Segoe UI', Arial, sans-serif; display: flex; justify-content: center; padding-top: 50px; background-color: #f0f2f5; }
.container { background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.1); width: 100%; max-width: 450px; }
h2 { text-align: center; color: #1a73e8; margin-bottom: 20px; }
input { width: 100%; padding: 12px; margin: 10px 0; border: 2px solid #eee; border-radius: 8px; box-sizing: border-box; font-size: 16px; transition: border 0.3s; }
input:focus { border-color: #1a73e8; outline: none; }
button { width: 100%; padding: 12px; background-color: #1a73e8; color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 16px; font-weight: bold; }
button:hover { background-color: #1557b0; }
.result { margin-top: 20px; padding: 15px; border-radius: 8px; background-color: #f8f9fa; border-left: 5px solid #1a73e8; display: none; }
.result p { margin: 8px 0; font-size: 1rem; color: #444; }
.value { color: #000; font-weight: bold; font-family: 'Courier New', Courier, monospace; }
.username-box { background: #e7f3ff; padding: 10px; border-radius: 4px; margin-top: 10px; text-align: center; border: 1px dashed #1a73e8; }
// Hàm loại bỏ dấu tiếng Việt và chuyển sang chữ thường
function removeVietnameseTones(str) {
str = str.toLowerCase();
str = str.replace(/à|á|ạ|ả|ã|â|ầ|ấ|ậ|ẩ|ẫ|ă|ằ|ắ|ặ|ẳ|ẵ/g, "a");
str = str.replace(/è|é|ẹ|ẻ|ẽ|ê|ề|ế|ệ|ể|ễ/g, "e");
str = str.replace(/ì|í|ị|ỉ|ĩ/g, "i");
str = str.replace(/ò|ó|ọ|ỏ|õ|ô|ồ|ố|ộ|ổ|ỗ|ơ|ờ|ớ|ợ|ở|ỡ/g, "o");
str = str.replace(/ù|ú|ụ|ủ|ũ|ư|ừ|ứ|ự|ử|ữ/g, "u");
str = str.replace(/ỳ|ý|ỵ|ỷ|ỹ/g, "y");
str = str.replace(/đ/g, "d");
// Loại bỏ các ký tự đặc biệt khác
str = str.replace(/[^a-z0-9\s]/g, "");
return str;
}
function processName() {
const rawName = document.getElementById('fullName').value.trim();
if (!rawName) return;
// 1. Tách Họ và Tên (giữ nguyên dấu để hiển thị)
const parts = rawName.split(/\s+/);
if (parts.length < 2) {
alert("Vui lòng nhập đầy đủ cả họ và tên!");
return;
}
const tenGoc = parts.pop();
const hoGoc = parts.join(" ");
// 2. Tạo Username (không dấu)
// Lấy tên chính không dấu
const tenKhongDau = removeVietnameseTones(tenGoc);
// Lấy các chữ cái đầu của họ và đệm không dấu
const kyTuDauHoDem = parts.map(word => {
const cleanWord = removeVietnameseTones(word);
return cleanWord.charAt(0);
}).join("");
const username = `${tenKhongDau}.${kyTuDauHoDem}`;
// 3. Hiển thị
document.getElementById('displayHo').innerText = hoGoc;
document.getElementById('displayTen').innerText = tenGoc;
document.getElementById('displayUser').innerText = username;
document.getElementById('resultBox').style.display = "block";
}