File size: 5,930 Bytes
5741bb9 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 | <!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 notification */
#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); // Mặc định bật CVNSS
} 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> |