| <!DOCTYPE html> |
| <html lang="vi"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>CVNSS4.0 ⇄ Bila Hex/Nhị phân | Chưa hỗ trợ chuỗi dài</title> |
| <style> |
| body { background: #1e2232; font-family: 'Fira Mono', monospace; margin: 0; } |
| .container { max-width: 760px; margin: 44px auto; background: #181f29; border-radius: 16px; |
| box-shadow: 0 3px 18px #000c; padding: 32px 24px 24px 24px;} |
| h2 { color: #e0e7ef; font-weight: 500; margin-bottom: 8px;} |
| label { font-weight: bold; color: #38bdf8; margin-top: 12px; display: block;} |
| textarea { width: 100%; font-size: 1em; background: #1e293b; color: #f1f5f9; |
| border-radius: 7px; padding: 12px; border: 1px solid #334155; |
| margin-bottom: 14px; min-height: 48px; resize: vertical;} |
| button { background: #38bdf8; color: #020617; border: none; border-radius: 8px; |
| padding: 11px 20px; font-size: 1em; font-family: inherit; font-weight: 600; |
| margin: 7px 13px 7px 0; box-shadow: 0 1px 5px #0891b2aa; transition: 0.12s;} |
| button:hover { background: #0ea5e9; color: #fff;} |
| .outblock { background: #222b38; border-radius: 8px; margin-top: 12px; margin-bottom: 10px; } |
| .outlabel { color: #6ee7b7; font-size: 0.99em; padding: 8px 0 2px 2px; } |
| .output { color: #e5e5e5; background: none; padding: 8px 8px 4px 8px; font-size: 1.08em; |
| word-break: break-all; font-family: 'Fira Mono', monospace; min-height: 16px;} |
| .error { color: #f87171; font-weight: bold; padding: 7px 0 0 0;} |
| .note { color: #a5b4fc; font-size: 0.97em; margin-top: 12px;} |
| .byline { text-align: right; margin-top: 26px; color: #64748b; font-size: 0.97em;} |
| @media (max-width: 800px) { .container {padding: 10px; max-width: 99vw;} } |
| ::selection { background: #38bdf888; } |
| </style> |
| </head> |
| <body> |
| <div class="container"> |
| <h2>CVNSS4.0 ⇄ Bila Hex/Nhị phân<br> Hiện chỉ hỗ trợ khoảng 30 ký tự để test</h2> |
|
|
| <label for="ascii">CVNSS4.0:</label> |
| <textarea id="ascii" placeholder="Nhập chữ cái, số, dấu cách... Chuỗi dài cỡ 50 ký tự đều được!"></textarea> |
| <button onclick="asciiToCBOR()">CVNSS4.0 → Bila</button> |
| <button onclick="clearAll()">Xoá</button> |
| <div class="error" id="err_ascii"></div> |
|
|
| <div class="outblock"> |
| <div class="outlabel">Bila Hex:</div> |
| <div class="output" id="cborhex"></div> |
| <div class="outlabel">Bila Nhị phân:</div> |
| <div class="output" id="cborbin"></div> |
| </div> |
|
|
| <label for="cborhex_in">Bila Hex:</label> |
| <textarea id="cborhex_in" placeholder="Nhập mã Hex hợp lệ (header 78xx, 79xxxx, ... không giới hạn độ dài)"></textarea> |
| <button onclick="cborHexToAscii()">Bila Hex → CVNSS4.0</button> |
| <div class="error" id="err_hex"></div> |
|
|
| <label for="cborbin_in">Bila Nhị phân:</label> |
| <textarea id="cborbin_in" placeholder="Nhập mã Nhị phân hợp lệ"></textarea> |
| <button onclick="cborBinToAscii()">Bila Nhị phân → CVNSS4.0</button> |
| <div class="error" id="err_bin"></div> |
|
|
| <div class="outblock"> |
| <div class="outlabel">Kết quả:</div> |
| <div class="output" id="ascii_out"></div> |
| </div> |
|
|
| <div class="note"> |
| • Nhập/dán tối đa 30-40 ký tự.<br> |
| • Tự động loại ký tự không hợp lệ (chỉ giữ A–Z, a–z, 0–9, dấu cách).<br> |
| • Mã Hex dài sẽ tự động dùng header 78xx, 79xxxx theo chuẩn RFC7049.<br> |
| • Kết quả chưa tương thích sẽ báo lỗi, lấy ký tự CVNSS4.0 (<a href="https://chuvnsongsong.com/" target="_blank" style="color:#38bdf8">Chữ VN Song Song 4.0</a>). |
| </div> |
| <div class="byline">© Long Ngo, 2025 – Bản demo đang thử nghiệm</div> |
| </div> |
| <script> |
| |
| document.getElementById('ascii').addEventListener('input', function() { |
| let clean = this.value.replace(/[^A-Za-z0-9 ]+/g, ''); |
| if(this.value !== clean) { |
| this.value = clean; |
| document.getElementById('err_ascii').textContent = '❌ Đã tự động loại bỏ ký tự không hợp lệ!'; |
| } else { |
| document.getElementById('err_ascii').textContent = ''; |
| } |
| }); |
| |
| function cleanASCII(s) { |
| return s.replace(/[\r\n\t\u200B-\u200D\uFEFF]/g, ""); |
| } |
| function checkValidASCII(s) { |
| return /^[A-Za-z0-9 ]+$/.test(s); |
| } |
| |
| |
| function asciiToCBOR() { |
| let t = document.getElementById('ascii').value; |
| document.getElementById('err_ascii').textContent = ""; |
| if (!t) return showCBOR('', ''); |
| let tclean = cleanASCII(t); |
| if (!checkValidASCII(tclean)) { |
| let wrong = tclean.replace(/[A-Za-z0-9 ]/g, ""); |
| document.getElementById('err_ascii').textContent = |
| '❌ Chỉ cho phép A–Z, a–z, 0–9, dấu cách! Ký tự lỗi: [' + wrong.split("").join(" ") + ']'; |
| showCBOR('', ''); |
| return; |
| } |
| let encoder = new TextEncoder(); |
| let bytes = encoder.encode(tclean); |
| let hex = "", b = ""; |
| if (bytes.length < 24) { |
| hex = (0x60 + bytes.length).toString(16); |
| } else if (bytes.length < 256) { |
| hex = "78" + bytes.length.toString(16).padStart(2, "0"); |
| } else if (bytes.length < 65536) { |
| hex = "79" + bytes.length.toString(16).padStart(4, "0"); |
| } else { |
| document.getElementById('err_ascii').textContent = '❌ Chuỗi quá dài (tối đa 65.535 ký tự)!'; |
| showCBOR('', ''); |
| return; |
| } |
| hex += Array.from(bytes).map(x => x.toString(16).padStart(2, "0")).join(''); |
| b = hex.match(/.{1,2}/g).map(x => parseInt(x, 16).toString(2).padStart(8, '0')).join(''); |
| showCBOR(hex, b); |
| } |
| |
| function cborHexToAscii() { |
| let hex = document.getElementById('cborhex_in').value |
| .replace(/[^0-9a-fA-F]/g, '') |
| .toLowerCase(); |
| document.getElementById('err_hex').textContent = ""; |
| if (!hex) return showAscii(''); |
| if (hex.length % 2 !== 0) { |
| document.getElementById('err_hex').textContent = '❌ Hex phải có số ký tự chẵn!'; |
| showAscii(''); |
| return; |
| } |
| if (!/^[0-9a-f]+$/.test(hex)) { |
| document.getElementById('err_hex').textContent = '❌ Hex không hợp lệ!'; |
| showAscii(''); |
| return; |
| } |
| try { |
| let idx=0, l=0, fb=parseInt(hex.substr(idx,2),16); idx+=2; |
| if ((fb&0xe0)===0x60) l=fb&0x1f; |
| else if(fb===0x78) { l=parseInt(hex.substr(idx,2),16); idx+=2; } |
| else if(fb===0x79) { l=parseInt(hex.substr(idx,4),16); idx+=4; } |
| else { document.getElementById('err_hex').textContent = '❌ Không đúng mã string'; showAscii(''); return; } |
| let bh = hex.substr(idx, l*2); |
| if (bh.length<l*2) { |
| document.getElementById('err_hex').textContent = '❌ Thiếu bytes, cần ' + (l*2) + ' ký tự hex, chỉ có ' + bh.length; |
| showAscii(''); |
| return; |
| } |
| let bs=[]; |
| for(let i=0;i<bh.length;i+=2) bs.push(parseInt(bh.substr(i,2),16)); |
| let s; |
| try { |
| s = new TextDecoder().decode(new Uint8Array(bs)); |
| } catch (e) { |
| document.getElementById('err_hex').textContent = '❌ Không thể giải mã UTF-8: ' + e.message; |
| showAscii(''); |
| return; |
| } |
| let clean = cleanASCII(s); |
| if (!checkValidASCII(clean)) { |
| let wrong = clean.replace(/[A-Za-z0-9 ]/g, ""); |
| document.getElementById('err_hex').textContent = |
| '❌ Dữ liệu nhập không hợp lệ (chỉ cho A–Z, a–z, 0–9, dấu cách)! Ký tự lỗi: [' + |
| wrong.split("").join(" ") + ']'; |
| showAscii(''); |
| return; |
| } |
| showAscii(clean); |
| } catch (err) { |
| document.getElementById('err_hex').textContent = '❌ Lỗi giải mã: ' + err.message; |
| showAscii(''); |
| } |
| } |
| |
| function cborBinToAscii() { |
| let bin = document.getElementById('cborbin_in').value.trim().replace(/\s+/g,''); |
| document.getElementById('err_bin').textContent = ""; |
| if (!bin) return showAscii(''); |
| if (!/^[01]+$/.test(bin)) { document.getElementById('err_bin').textContent = '❌ Nhị phân không hợp lệ!'; showAscii(''); return; } |
| if (bin.length%8!==0) { document.getElementById('err_bin').textContent = '❌ Chuỗi phải là bội số 8!'; showAscii(''); return; } |
| try { |
| let idx=0, l=0, fb=parseInt(bin.substr(idx,8),2); idx+=8; |
| if ((fb&0xe0)===0x60) l=fb&0x1f; |
| else if(fb===0x78) { l=parseInt(bin.substr(idx,8),2); idx+=8; } |
| else if(fb===0x79) { l=parseInt(bin.substr(idx,16),2); idx+=16; } |
| else { document.getElementById('err_bin').textContent = '❌ Không đúng CBOR string'; showAscii(''); return; } |
| let bs=[]; |
| for(let i=0;i<l;i++) { |
| if(idx+8>bin.length) { document.getElementById('err_bin').textContent = '❌ Thiếu bytes'; showAscii(''); return; } |
| bs.push(parseInt(bin.substr(idx,8),2)); idx+=8; |
| } |
| let s; |
| try { |
| s = new TextDecoder().decode(new Uint8Array(bs)); |
| } catch (e) { |
| document.getElementById('err_bin').textContent = '❌ Không thể giải mã UTF-8: ' + e.message; |
| showAscii(''); |
| return; |
| } |
| let clean = cleanASCII(s); |
| if (!checkValidASCII(clean)) { |
| let wrong = clean.replace(/[A-Za-z0-9 ]/g, ""); |
| document.getElementById('err_bin').textContent = |
| '❌ Dữ liệu nhập không hợp lệ (chỉ cho A–Z, a–z, 0–9, dấu cách)! Ký tự lỗi: [' + |
| wrong.split("").join(" ") + ']'; |
| showAscii(''); |
| return; |
| } |
| showAscii(clean); |
| } catch (err) { |
| document.getElementById('err_bin').textContent = '❌ Lỗi giải mã: ' + err.message; |
| showAscii(''); |
| } |
| } |
| |
| function showCBOR(hex, bin) { |
| document.getElementById('cborhex').textContent = hex; |
| document.getElementById('cborbin').textContent = bin; |
| document.getElementById('ascii_out').textContent = ""; |
| } |
| function showAscii(ascii) { |
| document.getElementById('ascii_out').textContent = ascii; |
| } |
| function clearAll() { |
| document.getElementById('ascii').value = ''; |
| document.getElementById('cborhex_in').value = ''; |
| document.getElementById('cborbin_in').value = ''; |
| document.getElementById('err_ascii').textContent = ''; |
| document.getElementById('err_hex').textContent = ''; |
| document.getElementById('err_bin').textContent = ''; |
| showCBOR('', ''); |
| showAscii(''); |
| } |
| </script> |
| </body> |
| </html> |
|
|
