Spaces:

CVNSS
/

sapnhap3321

Running

App Files Files Community

CVNSS commited on Jul 4, 2025

Commit

0439ae0

verified ·

1 Parent(s): 7226c1a

Update index.html

Browse files

Files changed (1) hide show

index.html +177 -83

index.html CHANGED Viewed

@@ -2,109 +2,203 @@
 <html lang="vi">
 <head>
   <meta charset="UTF-8">
-  <title>Tra cứu 2 chiều Xã/Phường 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: #f6fafd; font-family: Arial, sans-serif;}
-    .filter-box { background: #fff; padding: 16px; border-radius: 10px; box-shadow: 0 2px 8px #0001; margin-bottom: 18px; }
-    .sticky-th th { position: sticky; top: 0; background: #f3f3f3; }
-    .small { font-size: 13px; }
-    .table-sm th, .table-sm td { padding: .4rem .5rem; }
-    @media (max-width: 900px) {
-      .table { font-size: 12px; }
-      .filter-box { padding: 6px; }
     }
   </style>
 </head>
 <body>
-<div class="container py-4">
-  <h3 class="mb-3 text-primary">🔎 Tra cứu 2 chiều Xã/Phường sáp nhập 2025</h3>
-  <div class="filter-box row g-2 align-items-end mb-2">
-    <div class="col-md-3 col-6">
-      <label class="form-label small">Tỉnh/Thành mới</label>
-      <select id="province_new" class="form-select form-select-sm"><option value="">-- Tất cả --</option></select>
-    </div>
-    <div class="col-md-3 col-6">
-      <label class="form-label small">Xã/Phường mới</label>
-      <input id="ward_new" type="text" class="form-control form-control-sm" placeholder="Tìm xã/phường mới">
     </div>
-    <div class="col-md-3 col-6">
-      <label class="form-label small">Tỉnh/Thành cũ</label>
-      <select id="province_old" class="form-select form-select-sm"><option value="">-- Tất cả --</option></select>
     </div>
-    <div class="col-md-3 col-6">
-      <label class="form-label small">Xã/Phường cũ</label>
-      <input id="ward_old" type="text" class="form-control form-control-sm" placeholder="Tìm xã/phường cũ">
     </div>
   </div>
-  <div style="max-height:68vh;overflow:auto">
-    <table class="table table-bordered table-hover table-sm align-middle mb-0">
-      <thead class="sticky-th">
-        <tr class="table-light small">
-          <th>Tỉnh/Thành mới</th>
-          <th>Xã/Phường mới</th>
-          <th>Tỉnh/Thành cũ</th>
-          <th>Xã/Phường cũ</th>
-        </tr>
-      </thead>
-      <tbody id="result_tbody"></tbody>
-    </table>
-  </div>
-  <div class="small text-secondary mt-2">Tìm kiếm 2 chiều, lọc theo bất kỳ trường nào (tỉnh/xã mới hoặc cũ).<br>Đảm bảo file <b>wards_2025_full.json</b> đã upload cùng thư mục.<br><b>Tip:</b> Bạn có thể tìm hoặc copy toàn bộ bảng để dùng cho nghiệp vụ đối chiếu.</div>
-</div>
 <script>
-let DATA = [];
-const dataUrl = "wards_2025_full.json"; // Đảm bảo upload file này cùng thư mục Spaces!
-function unique(arr) {
-  return [...new Set(arr)].filter(Boolean).sort((a,b) => a.localeCompare(b));
 }
-fetch(dataUrl).then(r => r.json()).then(data => {
-  DATA = data;
-  initFilters();
-  renderTable(DATA);
-});
-function initFilters() {
-  const selNew = document.getElementById('province_new');
-  const selOld = document.getElementById('province_old');
-  const provinces_new = unique(DATA.map(d => d.province_new));
-  const provinces_old = unique(DATA.map(d => d.province_old));
-  provinces_new.forEach(p => selNew.appendChild(new Option(p, p)));
-  provinces_old.forEach(p => selOld.appendChild(new Option(p, p)));
-  ['province_new','province_old','ward_new','ward_old'].forEach(id => {
-    document.getElementById(id).addEventListener('input', filterTable);
   });
 }
-function filterTable() {
-  let p_new = document.getElementById('province_new').value.trim();
-  let p_old = document.getElementById('province_old').value.trim();
-  let w_new = document.getElementById('ward_new').value.trim().toLowerCase();
-  let w_old = document.getElementById('ward_old').value.trim().toLowerCase();
-  let rs = DATA.filter(d =>
-    (!p_new || d.province_new === p_new) &&
-    (!p_old || d.province_old === p_old) &&
-    (!w_new || (d.ward_new && d.ward_new.toLowerCase().includes(w_new))) &&
-    (!w_old || (d.ward_old && d.ward_old.toLowerCase().includes(w_old)))
-  );
-  renderTable(rs);
 }
-function renderTable(list) {
-  const tbody = document.getElementById('result_tbody');
-  tbody.innerHTML = list.length === 0
-    ? `<tr><td colspan="4" class="text-center text-danger">Không tìm thấy kết quả</td></tr>`
-    : list.map(d=>`
-      <tr>
-        <td>${d.province_new||""}</td>
-        <td>${d.ward_new||""}</td>
-        <td>${d.province_old||""}</td>
-        <td>${d.ward_old||""}</td>
-      </tr>`).join("");
 }
 </script>
 </body>
 </html>

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