Spaces:

CVNSS
/

tool

Running

App Files Files Community

CVNSS commited on Jun 9, 2025

Commit

e4ba47a

verified ·

1 Parent(s): c8768b2

Update index.html

Browse files

Files changed (1) hide show

index.html +155 -225

index.html CHANGED Viewed

@@ -1,225 +1,155 @@
-<!DOCTYPE html>
-<html lang="vi">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Bộ chuyển đổi CQN ⇄ CVNSS 4.0 (offline) - Tối ưu</title>
-  <style>
-    body {
-      font-family: Segoe UI, Arial, Helvetica, sans-serif; /* Cập nhật font chữ hiện đại hơn */
-      background: #f4f6f8; /* Màu nền nhẹ nhàng hơn */
-      margin: 30px;
-      text-align: center;
-      color: #333;
-    }
-    h1 {
-      margin-bottom: 24px;
-      font-size: 28px; /* Tăng kích thước tiêu đề */
-      color: #2c3e50; /* Màu tiêu đề đậm hơn */
-    }
-    .wrap {
-      display: flex;
-      gap: 25px;
-      flex-wrap: wrap;
-      justify-content: center;
-      margin-bottom: 20px; /* Thêm khoảng cách dưới */
-    }
-    textarea {
-      width: 420px; /* Điều chỉnh kích thước */
-      height: 280px;
-      padding: 15px;
-      font-size: 16px;
-      border: 1px solid #dcdcdc; /* Viền nhẹ hơn */
-      border-radius: 8px; /* Bo góc ít hơn một chút */
-      resize: vertical; /* Cho phép thay đổi chiều cao */
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-      box-sizing: border-box;
-      transition: border-color 0.2s, box-shadow 0.2s; /* Thêm hiệu ứng chuyển tiếp */
-    }
-    textarea:focus {
-      border-color: #3498db; /* Màu viền khi focus nổi bật hơn */
-      box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2); /* Thêm hiệu ứng bóng mờ khi focus */
-      outline: none;
-    }
-    .controls { /* Đổi tên từ btn-row cho rõ ràng hơn */
-      display: flex;
-      gap: 15px;
-      justify-content: center;
-      align-items: center; /* Căn giữa các item theo chiều dọc */
-      margin-top: 15px;
-    }
-    button, .mode-select {
-      padding: 10px 20px; /* Đồng nhất padding */
-      font-size: 15px;
-      border-radius: 6px;
-      cursor: pointer;
-      transition: transform 0.1s, background-color 0.2s, box-shadow 0.2s; /* Cập nhật transition */
-    }
-    button {
-      min-width: 120px; /* Tăng chiều rộng tối thiểu */
-      border: none;
-      color: #fff;
-      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-    }
-    button:hover {
-      filter: brightness(1.1);
-      box-shadow: 0 4px 8px rgba(0,0,0,0.15);
-    }
-    button:active {
-      transform: scale(0.97);
-      filter: brightness(1);
-    }
-    .copy {
-      background-color: #3498db; /* Xanh dương */
-    }
-    .reset {
-      background-color: #e74c3c; /* Đỏ */
-    }
-    .mode-select {
-      border: 1px solid #dcdcdc;
-      background-color: #fff;
-      min-width: 180px; /* Cho select rộng hơn một chút */
-    }
-    .mode-select:focus {
-      border-color: #3498db;
-      box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
-      outline: none;
-    }
-    .status-message { /* Kiểu cho thông báo lỗi/thành công */
-        margin-top: 15px;
-        font-size: 14px;
-        min-height: 20px; /* Giữ không gian cho thông báo */
-    }
-    .status-success { color: #27ae60; }
-    .status-error   { color: #c0392b; }
-  </style>
-</head>
-<body>
-  <h1>Công cụ CVNSS4.0 ⇄ Chữ Quốc ngữ</h1>
-  <div class="wrap">
-    <textarea id="inputText" placeholder="Nhập văn bản (CQN, CVN hoặc CVSS)" aria-label="Văn bản đầu vào"></textarea>
-    <textarea id="outputText" placeholder="Kết quả chuyển đổi" readonly aria-label="Văn bản kết quả"></textarea>
-  </div>
-  <div class="controls">
-    <select id="mode" class="mode-select" aria-label="Chọn chế độ chuyển đổi">
-      <option value="cqn">CQN → CVN/CVSS</option>
-      <option value="cvn">CVN → CQN/CVSS</option>
-      <option value="cvss">CVSS → CQN/CVN</option>
-    </select>
-    <button class="copy" onclick="copyText()">Sao chép</button>
-    <button class="reset" onclick="resetAll()">Đặt lại</button>
-  </div>
-  <div id="statusMessage" class="status-message"></div>
-  <script src="cvnss4.0-converter.js"></script>
-  <script>
-    const inputBox = document.getElementById("inputText");
-    const outputBox = document.getElementById("outputText");
-    const modeSelect = document.getElementById("mode");
-    const statusMessageEl = document.getElementById("statusMessage");
-    let convertTimeout; // Di chuyển khai báo timeout ra ngoài debounce
-    let guard = false;
-    // Hàm debounce để tối ưu hóa sự kiện input và select
-    function debounce(fn, delay) {
-      return function (...args) {
-        clearTimeout(convertTimeout);
-        convertTimeout = setTimeout(() => fn.apply(this, args), delay); // Sử dụng apply để giữ context
-      };
-    }
-    // Hàm hiển thị thông báo
-    function showStatus(message, type = "success") {
-        statusMessageEl.textContent = message;
-        statusMessageEl.className = `status-message status-${type}`;
-        setTimeout(() => { statusMessageEl.textContent = ""; statusMessageEl.className = "status-message";}, 3000);
-    }
-    // Hàm chuyển đổi văn bản
-    function convertText() {
-      if (guard) return;
-      guard = true; // Bảo vệ chống gọi lại liên tục (dù debounce đã giảm thiểu)
-      const input = inputBox.value;
-      const mode = modeSelect.value;
-      try {
-        if (!input.trim()) { // Nếu input rỗng hoặc chỉ có khoảng trắng
-            outputBox.value = "";
-            guard = false;
-            return;
-        }
-        const result = CVNSSConverter.convert(input, mode);
-        // Logic hiển thị kết quả dựa trên mode
-        // Các lựa chọn trong select của bạn là:
-        // CQN → CVN/CVSS: Hiển thị CVN là chính, có thể cung cấp thêm CVSS
-        // CVN → CQN/CVSS: Hiển thị CQN là chính, có thể cung cấp thêm CVSS
-        // CVSS → CQN/CVN: Hiển thị CQN là chính, có thể cung cấp thêm CVN
-        // Hiện tại, ta sẽ hiển thị kết quả đầu tiên được gợi ý.
-        if (mode === "cqn") {
-          outputBox.value = result.cvn;
-          // Để hiển thị cả hai: outputBox.value = `CVN: ${result.cvn}\n\nCVSS: ${result.cvss}`;
-        } else if (mode === "cvn") {
-          outputBox.value = result.cqn;
-          // Để hiển thị cả hai: outputBox.value = `CQN: ${result.cqn}\n\nCVSS: ${result.cvss}`;
-        } else if (mode === "cvss") {
-          outputBox.value = result.cqn;
-          // Để hiển thị cả hai: outputBox.value = `CQN: ${result.cqn}\n\nCVN: ${result.cvn}`;
-        }
-      } catch (error) {
-        console.error("Lỗi chuyển đổi:", error);
-        outputBox.value = ""; // Xóa output nếu có lỗi
-        showStatus("Lỗi: " + error.message, "error");
-      } finally {
-        guard = false;
-      }
-    }
-    // Gắn sự kiện input và change với debounce
-    const debouncedConvert = debounce(convertText, 250); // Giảm nhẹ delay
-    inputBox.addEventListener("input", debouncedConvert);
-    modeSelect.addEventListener("change", debouncedConvert); // Áp dụng debounce cho cả select
-    // Hàm sao chép nâng cao với Clipboard API và fallback
-    async function copyText() {
-      if (!outputBox.value.trim()) {
-        showStatus("Không có nội dung để sao chép.", "error");
-        return;
-      }
-      try {
-        if (navigator.clipboard && navigator.clipboard.writeText) {
-          await navigator.clipboard.writeText(outputBox.value);
-          showStatus("Đã sao chép vào clipboard!");
-        } else {
-          // Fallback cho trình duyệt cũ hơn hoặc môi trường không an toàn (non-HTTPS)
-          outputBox.select(); // Chọn văn bản trong textarea
-          outputBox.setSelectionRange(0, 99999); // Đối với mobile
-          document.execCommand("copy");
-          showStatus("Đã sao chép (sử dụng phương pháp cũ)!");
-        }
-      } catch (err) {
-        console.error("Lỗi khi sao chép: ", err);
-        showStatus("Lỗi khi sao chép: " + err.message, "error");
-      }
-    }
-    // Hàm đặt lại
-    function resetAll() {
-      inputBox.value = "";
-      outputBox.value = "";
-      modeSelect.value = "cqn"; // Giữ lại giá trị mặc định
-      statusMessageEl.textContent = "";
-      statusMessageEl.className = "status-message";
-      inputBox.focus();
-    }
-    // Khởi tạo chuyển đổi nếu có sẵn giá trị trong input khi tải trang (tùy chọn)
-    // if (inputBox.value.trim()) {
-    //   convertText();
-    // }
-  </script>
-</body>
-</html>

+<!DOCTYPE html>
+<html lang="vi">
+<head>
+  <meta charset="UTF-8">
+  <title>CVNSS 4.0 ⇄ Chữ Quốc ngữ</title>
+  <style>
+    body {
+      font-family: Segoe UI, Arial, Helvetica, sans-serif;
+      background: #f4f6f8;
+      margin: 30px;
+      text-align: center;
+      color: #333;
+    }
+    h1 {
+      margin-bottom: 18px;
+      font-size: 26px;
+      color: #2c3e50;
+    }
+    .wrap {
+      display: flex;
+      gap: 24px;
+      flex-wrap: wrap;
+      justify-content: center;
+      margin-bottom: 14px;
+    }
+    textarea {
+      width: 400px;
+      height: 210px;
+      padding: 12px;
+      font-size: 16px;
+      border: 1px solid #dcdcdc;
+      border-radius: 8px;
+      resize: vertical;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
+      box-sizing: border-box;
+    }
+    textarea:focus {
+      border-color: #3498db;
+      box-shadow: 0 0 0 2px rgba(52,152,219,0.12);
+      outline: none;
+    }
+    .controls {
+      display: flex;
+      gap: 12px;
+      justify-content: center;
+      margin-top: 6px;
+    }
+    button, .mode-select {
+      padding: 8px 18px;
+      font-size: 15px;
+      border-radius: 6px;
+      cursor: pointer;
+      border: 1px solid #dcdcdc;
+    }
+    button {
+      color: #fff;
+      background-color: #3498db;
+      border: none;
+      min-width: 90px;
+      transition: filter 0.15s;
+    }
+    button:hover { filter: brightness(1.1);}
+    button:active { filter: brightness(0.98);}
+    .reset { background: #e74c3c;}
+    .mode-select { background: #fff; min-width: 180px;}
+    .mode-select:focus {
+      border-color: #3498db;
+      box-shadow: 0 0 0 2px rgba(52,152,219,0.09);
+      outline: none;
+    }
+    .status-message {
+      margin-top: 12px;
+      font-size: 13px;
+      min-height: 20px;
+    }
+    .status-success { color: #27ae60;}
+    .status-error { color: #c0392b;}
+  </style>
+</head>
+<body>
+  <h1>CVNSS 4.0 ⇄ Chữ Quốc ngữ</h1>
+  <div class="wrap">
+    <textarea id="inputText" placeholder="Nhập văn bản (CVNSS hoặc CQN)"></textarea>
+    <textarea id="outputText" placeholder="Kết quả chuyển đổi" readonly></textarea>
+  </div>
+  <div class="controls">
+    <select id="mode" class="mode-select">
+      <option value="cvn">CVNSS 4.0 → Chữ Quốc ngữ</option>
+      <option value="cqn">Chữ Quốc ngữ → CVNSS 4.0</option>
+    </select>
+    <button onclick="copyText()">Sao chép</button>
+    <button class="reset" onclick="resetAll()">Đặt lại</button>
+  </div>
+  <div id="statusMessage" class="status-message"></div>
+  <script src="cvnss4.0-converter.js"></script>
+  <script>
+    const inputBox = document.getElementById("inputText");
+    const outputBox = document.getElementById("outputText");
+    const modeSelect = document.getElementById("mode");
+    const statusMessageEl = document.getElementById("statusMessage");
+    function convertText() {
+      const input = inputBox.value;
+      const mode = modeSelect.value;
+      if (!input.trim()) {
+        outputBox.value = "";
+        return;
+      }
+      try {
+        const result = CVNSSConverter.convert(input, mode);
+        // Hiển thị kết quả tương ứng với hướng chuyển đổi
+        outputBox.value = mode === "cvn" ? result.cqn : result.cvn;
+      } catch (e) {
+        outputBox.value = "";
+        showStatus("Lỗi chuyển đổi: " + e.message, "error");
+      }
+    }
+    inputBox.addEventListener("input", convertText);
+    modeSelect.addEventListener("change", convertText);
+    async function copyText() {
+      if (!outputBox.value.trim()) {
+        showStatus("Không có nội dung để sao chép.", "error");
+        return;
+      }
+      try {
+        await navigator.clipboard.writeText(outputBox.value);
+        showStatus("Đã sao chép vào clipboard!", "success");
+      } catch {
+        outputBox.select();
+        document.execCommand("copy");
+        showStatus("Đã sao chép (cách cũ)!", "success");
+      }
+    }
+    function resetAll() {
+      inputBox.value = "";
+      outputBox.value = "";
+      modeSelect.value = "cvn";
+      statusMessageEl.textContent = "";
+      inputBox.focus();
+    }
+    function showStatus(message, type="success") {
+      statusMessageEl.textContent = message;
+      statusMessageEl.className = `status-message status-${type}`;
+      setTimeout(() => { statusMessageEl.textContent = ""; }, 2000);
+    }
+  </script>
+</body>
+</html>