Spaces:

CVNSS
/

sapnhap3321

Running

App Files Files Community

CVNSS commited on Jul 4, 2025

Commit

6cf2aac

verified ·

1 Parent(s): 0439ae0

Update index.html

Browse files

Files changed (1) hide show

index.html +104 -178

index.html CHANGED Viewed

@@ -2,203 +2,129 @@
 <html lang="vi">
 <head>
   <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-  <title>Tra cứu phường/xã cũ mới sáp nhập | Tất cả tỉnh Việt Nam</title>
-  <meta name="description" content="Tìm kiếm thông tin phường/xã nhanh và chính xác tại Việt Nam. Lọc theo tỉnh/thành phố và từ khóa tên phường xã. Hiển thị 3321 kết quả." />
-  <meta name="keywords" content="tìm kiếm phường xã, danh sách phường xã, tra cứu địa danh, Tất cả tỉnh Việt Nam" />
-  <link rel="canonical" href="https://huggingface.co/spaces/CVNSS/sapnhap3321" />
-  <!-- Open Graph -->
-  <meta property="og:title" content="Tra cứu, tìm kiếm phường/xã cũ mới sau sáp nhập" />
-  <meta property="og:description" content="Tra cứu phường/xã trên toàn quốc theo tỉnh và từ khóa nhanh chóng." />
-  <meta property="og:type" content="website" />
-  <meta property="og:url" content="https://huggingface.co/spaces/CVNSS/sapnhap3321" />
-  <meta property="og:image" content="https://huggingface.co/spaces/CVNSS/sapnhap3321/thumbnail.png" />
-  <meta property="og:locale" content="vi_VN" />
-  <!-- Twitter Card -->
-  <meta name="twitter:card" content="summary_large_image" />
-  <meta name="twitter:title" content="Tìm kiếm phường/xã Việt Nam" />
-  <meta name="twitter:description" content="Tra cứu phường/xã trên toàn quốc theo tỉnh và từ khóa nhanh chóng." />
-  <meta name="twitter:image" content="https://huggingface.co/spaces/CVNSS/sapnhap3321/thumbnail.png" />
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
   <style>
-    body { padding-top: 2rem; background-color: #f8f9fa; }
-    .search-card { border-radius: 1rem; box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1); }
-    .list-group-item { border: none; border-radius: 0.5rem; margin-bottom: 0.5rem; transition: background .3s; }
-    .list-group-item:hover { background-color: #e9ecef; }
-    .merge-list small { color: #6c757d; }
-    .footer { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #dee2e6; font-size: 0.85rem; color: #6c757d; }
-    .footer a { color: #0d6efd; text-decoration: none; }
-    .footer a:hover { text-decoration: underline; }
-    @media (max-width: 575.98px) {
-      .card-title { font-size: 1.4rem; }
-      .footer { font-size: 0.8rem; }
-      .list-group-item h6 { font-size: 0.95rem; }
-      .pagination .page-item { flex: 1 1 auto; }
-      .pagination .page-link { text-align: center; }
-    }
   </style>
 </head>
 <body>
-  <div class="container-sm px-3 px-md-5 d-flex flex-column min-vh-100">
     <div class="card search-card mb-4">
       <div class="card-body">
-        <h1 class="card-title text-center mb-4">Tra cứu phường/xã sau sáp nhập</h1>
-        <form id="searchForm" class="mb-0">
-          <div class="row g-2">
-            <div class="col-md-3 col-12">
-              <select id="province" class="form-select">
-                <option value="all" selected>Tất cả tỉnh</option>
-              </select>
-            </div>
-            <div class="col-md-7 col-12">
-              <input id="q" type="text" class="form-control" placeholder="Nhập tên phường/xã mới hoặc cũ...(có thể để trống)" autofocus>
-            </div>
-            <div class="col-md-2 col-12">
-              <button class="btn btn-primary w-100">Tìm kiếm</button>
-            </div>
           </div>
-        </form>
       </div>
     </div>
-    <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-1 mb-2">
-      <h5 class="mb-0 text-secondary">
-        <span id="listTitle">Danh sách phường/xã</span>
-      </h5>
-      <small class="text-muted" id="counterInfo"></small>
-    </div>
-    <ul class="list-group mt-1 mb-3" id="listGroup"></ul>
-    <nav aria-label="Page navigation">
-      <ul class="pagination justify-content-center flex-wrap flex-md-nowrap" id="pagination"></ul>
-    </nav>
-    <div class="footer text-center mt-auto mb-1">
-      <span>Phát triển bởi <a href="https://www.facebook.com/quyphamdev/" target="_blank">Phạm Vương Quý</a> | Dữ liệu & UX bởi CVNSS/ChatGPT 2025</span>
     </div>
   </div>
-<script>
-// === CONFIG ===
-const DATA_URL = "wards_merge_2025.json"; // Đảm bảo upload file này!
-// ==============
-let DATA = [], provinces = [], curPage = 1, perPage = 8, q = "", province = "all";
-let lastQ = "", lastProvince = "all";
-function uniq(a) { return [...new Set(a)]; }
-function normalize(str) {
-  return (str||"").normalize("NFC").toLowerCase().replace(/[\u0300-\u036f]/g,"");
-}
-function renderProvinces() {
-  let sel = document.getElementById("province");
-  provinces = uniq(DATA.map(d=>`${d.province_id}|${d.province}`));
-  provinces.sort((a,b) => a.split('|')[1].localeCompare(b.split('|')[1]));
-  provinces.forEach(s=>{
-    let [id, name] = s.split("|");
-    sel.innerHTML += `<option value="${id}">${name}</option>`;
-  });
-}
-function filterData() {
-  let qNorm = normalize(q);
-  let filtered = DATA.filter(d => {
-    let byProvince = (province==="all" || d.province_id===province);
-    if (!qNorm) return byProvince;
-    // Tìm trong phường xã mới, tỉnh, merged_from (tên cũ/quận/huyện cũ)
-    let haystack = [
-      d.ward_new, d.province,
-      ...(Array.isArray(d.merged_from)?d.merged_from: [d.merged_from])
-    ].join(" ").toLowerCase();
-    return byProvince && haystack.normalize("NFC").includes(qNorm);
-  });
-  return filtered;
-}
-function renderList() {
-  let filtered = filterData();
-  let total = filtered.length;
-  let totalPage = Math.max(1, Math.ceil(total/perPage));
-  if (curPage > totalPage) curPage = totalPage;
-  let start = (curPage-1)*perPage, end = start+perPage;
-  let showing = filtered.slice(start, end);
-  let group = document.getElementById("listGroup");
-  group.innerHTML = showing.map(d=>{
-    let merged = (Array.isArray(d.merged_from) ? d.merged_from : [d.merged_from]).filter(Boolean).join(", ");
-    return `
-      <li class="list-group-item">
-        <div class="d-flex justify-content-between align-items-start">
-          <div>
-            <h6 class="mb-1">${d.ward_new||""}</h6>
-            <small class="text-muted">${d.province||""}</small>
-            <div class="merge-list mt-1"><small>Sáp nhập từ: ${merged||"<i>Không rõ</i>"}</small></div>
-          </div>
-        </div>
-      </li>`;
-  }).join("");
-  // Pagination
-  let pagi = document.getElementById("pagination");
-  pagi.innerHTML = "";
-  if (totalPage > 1) {
-    let html = "";
-    html += `<li class="page-item${curPage==1?' disabled':''}"><a class="page-link" href="#" data-page="1">« Đầu</a></li>`;
-    html += `<li class="page-item${curPage==1?' disabled':''}"><a class="page-link" href="#" data-page="${curPage-1}">‹ Trước</a></li>`;
-    let pageNums = [];
-    for (let i=Math.max(1,curPage-2); i<=Math.min(totalPage,curPage+2); ++i) pageNums.push(i);
-    if (pageNums[0] > 1) html += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
-    pageNums.forEach(i=> html += `<li class="page-item${i==curPage?' active':''}"><a class="page-link" href="#" data-page="${i}">${i}</a></li>`);
-    if (pageNums[pageNums.length-1] < totalPage) html += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
-    html += `<li class="page-item${curPage==totalPage?' disabled':''}"><a class="page-link" href="#" data-page="${curPage+1}">Tiếp ›</a></li>`;
-    html += `<li class="page-item${curPage==totalPage?' disabled':''}"><a class="page-link" href="#" data-page="${totalPage}">Cuối »</a></li>`;
-    pagi.innerHTML = html;
-  }
-  // Info
-  let info = document.getElementById("counterInfo");
-  info.innerHTML = `Đang hiển thị <strong>${start+1}–${Math.min(end,total)}</strong> trong tổng số <strong>${total}</strong>`;
-  // Update title
-  document.getElementById("listTitle").innerHTML =
-    `Danh sách phường/xã (Trang ${curPage} / ${Math.ceil(total/perPage)})`;
-}
-// Event
-document.addEventListener("DOMContentLoaded",()=>{
-  fetch(DATA_URL).then(r=>r.json()).then(data=>{
-    DATA = data;
-    renderProvinces();
-    renderList();
-  });
-  document.getElementById("searchForm").onsubmit = function(e) {
-    e.preventDefault();
-    q = document.getElementById("q").value.trim();
-    province = document.getElementById("province").value;
-    curPage = 1;
-    renderList();
-  };
-  document.getElementById("pagination").onclick = function(e) {
-    let t = e.target;
-    if (t.tagName === "A" && t.dataset.page) {
-      e.preventDefault();
-      let newPage = +t.dataset.page;
-      if (newPage > 0) { curPage = newPage; renderList(); }
-    }
-  };
-  document.getElementById("province").onchange = function() {
-    province = this.value;
-    curPage = 1;
-    renderList();
-  };
-  document.getElementById("q").oninput = function() {
-    if (this.value.length > 2 || this.value.length === 0) {
-      q = this.value.trim();
-      curPage = 1;
-      renderList();
     }
-  }
-});
-</script>
 </body>
 </html>

 <html lang="vi">
 <head>
   <meta charset="UTF-8">
+  <title>Tra cứu Xã/Phường cũ mới sau sáp nhập (2025)</title>
+  <meta name="viewport" content="width=device-width,initial-scale=1">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
   <style>
+    body { background: #f8f9fa; }
+    .search-card { border-radius: 1rem; box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);}
+    .result-card { border-radius: 0.7rem; box-shadow: 0 0.3rem 0.6rem rgba(0,0,0,0.07);}
+    .list-group-item { border: none; border-radius: 0.5rem; margin-bottom: 0.4rem; }
+    .footer { margin-top: 2rem; font-size: 0.9rem; color: #888;}
   </style>
 </head>
 <body>
+  <div class="container py-4">
     <div class="card search-card mb-4">
       <div class="card-body">
+        <h2 class="mb-3 text-center">Tra cứu xã/phường cũ mới sau sáp nhập 2025</h2>
+        <div class="row g-3">
+          <div class="col-md-6">
+            <label class="form-label">Tìm theo <b>Xã/Phường mới</b> hoặc <b>Tỉnh/Thành</b>:</label>
+            <input type="text" id="inputNew" class="form-control" placeholder="Nhập tên xã/phường mới hoặc tỉnh">
+          </div>
+          <div class="col-md-6">
+            <label class="form-label">Tìm theo <b>Xã/Phường trước sáp nhập</b>:</label>
+            <input type="text" id="inputOld" class="form-control" placeholder="Nhập tên xã/phường cũ (có thể một phần)">
           </div>
+        </div>
+        <small class="text-muted mt-2 d-block">Có thể nhập một phần tên (không cần phân biệt hoa/thường, dấu/không dấu).</small>
       </div>
     </div>
+    <div id="result" class="mt-3"></div>
+    <div class="footer text-center mt-5">
+      &copy; 2025 | Tra cứu xã/phường Việt Nam sau sáp nhập.<br>
+      Code bởi ChatGPT và bạn Long Ngo. Dữ liệu đóng góp cộng đồng.
     </div>
   </div>
+  <script>
+    // Dán dữ liệu JSON trực tiếp vào đây (hoặc fetch từ file, nếu host cho phép)
+    const data =
+    // ----- BẮT ĐẦU CHÉP JSON Ở ĐÂY -----
+    [
+      {"province":"An Giang","ward_new":"An Biên","ward_old":"Thị trấn Thứ Ba, Xã Đông Yên, Xã Hưng Yên"},
+      {"province":"An Giang","ward_new":"An Châu","ward_old":"Thị trấn An Châu, Xã Hòa Bình Thạnh, Xã Vĩnh Thành"},
+      // ... CHÉP CẢ FILE JSON Ở ĐÂY (do CORS, không fetch được từ HuggingFace Static Assets)
+    ];
+    // ----- KẾT THÚC CHÉP JSON Ở ĐÂY -----
+    function removeAccent(str) {
+      return str.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
+    }
+    function searchData() {
+      const valNew = removeAccent(document.getElementById('inputNew').value.trim());
+      const valOld = removeAccent(document.getElementById('inputOld').value.trim());
+      let html = "";
+      // Nếu cả 2 trường đều rỗng
+      if (!valNew && !valOld) {
+        html = '<div class="alert alert-info">Nhập tên xã/phường mới hoặc cũ để tra cứu.</div>';
+        document.getElementById('result').innerHTML = html;
+        return;
+      }
+      // Nếu chỉ điền trường mới hoặc tỉnh
+      if (valNew) {
+        const result = data.filter(row =>
+          removeAccent(row.ward_new).includes(valNew) ||
+          removeAccent(row.province).includes(valNew)
+        );
+        html = `<div class="card result-card p-3 mb-3"><b>Kết quả tìm theo xã/phường mới hoặc tỉnh:</b> (${result.length} kết quả)</div>`;
+        if (result.length === 0) html += `<div class="alert alert-warning">Không tìm thấy kết quả.</div>`;
+        result.forEach(row => {
+          html += `<div class="list-group mb-1">
+            <div class="list-group-item">
+              <b>${row.ward_new}</b> <span class="badge bg-secondary">${row.province}</span><br>
+              <small class="text-muted">Sáp nhập từ: ${row.ward_old}</small>
+            </div>
+          </div>`;
+        });
+      }
+      // Nếu chỉ điền trường cũ
+      if (valOld && !valNew) {
+        const result = data.filter(row =>
+          removeAccent(row.ward_old).includes(valOld)
+        );
+        html = `<div class="card result-card p-3 mb-3"><b>Kết quả tìm theo xã/phường cũ:</b> (${result.length} kết quả)</div>`;
+        if (result.length === 0) html += `<div class="alert alert-warning">Không tìm thấy kết quả.</div>`;
+        result.forEach(row => {
+          html += `<div class="list-group mb-1">
+            <div class="list-group-item">
+              <b>${row.ward_new}</b> <span class="badge bg-secondary">${row.province}</span><br>
+              <small class="text-muted">Sáp nhập từ: ${row.ward_old}</small>
+            </div>
+          </div>`;
+        });
+      }
+      // Nếu điền cả hai trường: tìm đồng thời cả 2 chiều (AND logic)
+      if (valNew && valOld) {
+        const result = data.filter(row =>
+          (removeAccent(row.ward_new).includes(valNew) || removeAccent(row.province).includes(valNew))
+          && removeAccent(row.ward_old).includes(valOld)
+        );
+        html = `<div class="card result-card p-3 mb-3"><b>Kết quả lọc nâng cao:</b> (${result.length} kết quả)</div>`;
+        if (result.length === 0) html += `<div class="alert alert-warning">Không tìm thấy kết quả.</div>`;
+        result.forEach(row => {
+          html += `<div class="list-group mb-1">
+            <div class="list-group-item">
+              <b>${row.ward_new}</b> <span class="badge bg-secondary">${row.province}</span><br>
+              <small class="text-muted">Sáp nhập từ: ${row.ward_old}</small>
+            </div>
+          </div>`;
+        });
+      }
+      document.getElementById('result').innerHTML = html;
     }
+    document.getElementById('inputNew').addEventListener('input', searchData);
+    document.getElementById('inputOld').addEventListener('input', searchData);
+    // Nếu bạn muốn tải dữ liệu từ file .json trên HuggingFace Spaces, hãy dùng fetch và nhớ đặt file vào public/static (nếu HF cho phép CORS)
+    // fetch('vn_wards_2025.json').then(r=>r.json()).then(d=>data = d)
+  </script>
 </body>
 </html>