| <!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> |
