Spaces:

CVNSS
/

Bilacode

Running

App Files Files Community

CVNSS commited on Jul 16, 2025

Commit

783e73e

verified ·

1 Parent(s): b4d39de

Update index.html

Browse files

Files changed (1) hide show

index.html +235 -18

index.html CHANGED Viewed

@@ -1,19 +1,236 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!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>
+    // Chặn realtime ký tự lạ khi gõ/dán vào textarea (giữ input sạch)
+    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);
+    }
+    // Hỗ trợ CBOR chuẩn mọi độ dài: <24, <256, <65536 ký tự
+    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>