|
|
<!DOCTYPE html> |
|
|
<html lang="vi"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Bộ Gõ CVNSS 4.0 - Chế độ Spacebar</title> |
|
|
<style> |
|
|
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f0f2f5; display: flex; justify-content: center; padding-top: 50px; min-height: 100vh; margin: 0; } |
|
|
.container { background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); width: 800px; max-width: 95%; position: relative; } |
|
|
h1 { text-align: center; color: #2c3e50; margin-bottom: 25px; font-size: 24px; } |
|
|
|
|
|
.controls { background: #eef2f6; padding: 15px; border-radius: 8px; display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; margin-bottom: 20px; border: 1px solid #d1d9e6; } |
|
|
.radio-group { display: flex; align-items: center; cursor: pointer; font-weight: 500; color: #444; transition: 0.2s; } |
|
|
.radio-group:hover { color: #007bff; } |
|
|
.radio-group input { margin-right: 8px; accent-color: #007bff; transform: scale(1.2); } |
|
|
.highlight { color: #d63384; font-weight: bold; } |
|
|
|
|
|
.editor-wrapper { position: relative; } |
|
|
textarea { width: 100%; height: 250px; padding: 15px; font-size: 18px; line-height: 1.6; border: 2px solid #e0e0e0; border-radius: 8px; box-sizing: border-box; resize: vertical; outline: none; transition: border-color 0.3s; font-family: 'Courier New', Courier, monospace; } |
|
|
textarea:focus { border-color: #007bff; } |
|
|
|
|
|
.btn-copy { |
|
|
position: absolute; top: 10px; right: 10px; |
|
|
background-color: #007bff; color: white; border: none; |
|
|
padding: 8px 16px; border-radius: 6px; cursor: pointer; |
|
|
font-size: 14px; font-weight: 600; transition: background 0.2s; |
|
|
display: flex; align-items: center; gap: 5px; opacity: 0.8; |
|
|
} |
|
|
.btn-copy:hover { background-color: #0056b3; opacity: 1; } |
|
|
.btn-copy:active { transform: scale(0.98); } |
|
|
|
|
|
.note { margin-top: 15px; font-size: 0.95em; color: #555; background: #fff3cd; padding: 10px; border-left: 4px solid #ffc107; border-radius: 4px; } |
|
|
code { background: #eee; padding: 2px 5px; border-radius: 4px; font-family: monospace; color: #d63384; font-weight: bold; } |
|
|
|
|
|
|
|
|
#toast { visibility: hidden; min-width: 250px; margin-left: -125px; background-color: #333; color: #fff; text-align: center; border-radius: 4px; padding: 16px; position: fixed; z-index: 1; left: 50%; bottom: 30px; font-size: 17px; opacity: 0; transition: opacity 0.5s, bottom 0.5s; } |
|
|
#toast.show { visibility: visible; opacity: 1; bottom: 50px; } |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<div class="container"> |
|
|
<h1>Soạn Thảo CVNSS 4.0 Pro</h1> |
|
|
|
|
|
<div class="controls"> |
|
|
<label class="radio-group"><input type="radio" name="inputMethod" value="0" onclick="changeMode(0)"> Tắt</label> |
|
|
<label class="radio-group"><input type="radio" name="inputMethod" value="1" onclick="changeMode(1)"> Telex</label> |
|
|
<label class="radio-group"><input type="radio" name="inputMethod" value="2" onclick="changeMode(2)"> VNI</label> |
|
|
<label class="radio-group"><input type="radio" name="inputMethod" value="5" onclick="changeMode(5)" checked> <span class="highlight">CVNSS 4.0</span></label> |
|
|
</div> |
|
|
|
|
|
<div class="editor-wrapper"> |
|
|
<textarea id="editor" placeholder="Gõ văn bản tại đây (Ví dụ: caf -> Space -> cách)..." spellcheck="false"></textarea> |
|
|
<button class="btn-copy" onclick="copyText()"> |
|
|
<span>📄 Copy</span> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="note" id="instruction"> |
|
|
Đang chọn chế độ: <b>CVNSS 4.0</b>. <br> |
|
|
Cơ chế: Gõ mã thô (ví dụ <code>caf</code>), sau đó bấm <b>Phím Cách (Space)</b> để chuyển thành tiếng Việt. |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="toast">Đã sao chép vào bộ nhớ tạm!</div> |
|
|
|
|
|
<script src="vietuni-cvnss.js"></script> |
|
|
|
|
|
<script> |
|
|
window.onload = function() { |
|
|
var textArea = document.getElementById('editor'); |
|
|
if (typeof initTyper === 'function') { |
|
|
initTyper(textArea); |
|
|
setTypingMode(5); |
|
|
} else { |
|
|
alert("Lỗi: Không tìm thấy file vietuni-cvnss.js!"); |
|
|
} |
|
|
}; |
|
|
|
|
|
function changeMode(mode) { |
|
|
setTypingMode(mode); |
|
|
var note = document.getElementById('instruction'); |
|
|
if(mode == 5) note.innerHTML = "Chế độ: <b>CVNSS 4.0</b>. Gõ từ (vd: <code>baf</code>) rồi bấm <b>Space</b> để ra <code>bác</code>."; |
|
|
else if(mode == 1) note.innerHTML = "Chế độ: <b>Telex</b>. Gõ dấu kiểu Telex (<code>aa</code> -> <code>â</code>, <code>s</code> -> sắc)."; |
|
|
else if(mode == 2) note.innerHTML = "Chế độ: <b>VNI</b>. Gõ dấu số (<code>a1</code> -> <code>á</code>)."; |
|
|
else note.innerHTML = "Đã tắt bộ gõ tiếng Việt."; |
|
|
|
|
|
document.getElementById('editor').focus(); |
|
|
} |
|
|
|
|
|
function copyText() { |
|
|
var textArea = document.getElementById("editor"); |
|
|
textArea.select(); |
|
|
textArea.setSelectionRange(0, 99999); |
|
|
navigator.clipboard.writeText(textArea.value).then(function() { |
|
|
showToast(); |
|
|
}, function(err) { |
|
|
alert('Không thể copy: ' + err); |
|
|
}); |
|
|
} |
|
|
|
|
|
function showToast() { |
|
|
var x = document.getElementById("toast"); |
|
|
x.className = "show"; |
|
|
setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000); |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
