Upload 6 files

README.md

@@ -9,7 +9,7 @@ license: mit
 short_description: نظام استعلام المنشآت الصناعية
 ---
 
-# نظام استعلام المنشآت الصناعية
+# شاشة استعلام
 
 واجهة عربية ثابتة للاستعلام عن المنشآت حسب المنطقة والمدينة الصناعية، مع بحث مباشر باسم المنشأة أو السجل التجاري.
 
@@ -24,11 +24,11 @@ short_description: نظام استعلام المنشآت الصناعية
 
 - إذا كانت الخانة تحتوي على إحداثيات رقمية، يظهر رابط مباشر إلى خرائط Google.
 - إذا كانت الخانة فارغة، لا يظهر حقل الإحداثيات.
-- إذا كانت الخانة تحتوي على نص تواصل ورقم جوال، تظهر أزرار اتصال وواتساب ونسخ رسالة جاهزة.
+- إذا كانت الخانة تحتوي على نص تواصل ورقم جوال، تظهر باسم "إفادة مدن" مع أزرار نسخ الرقم وواتساب ونسخ رسالة مقترحة.
 
 ## تحديث البيانات
 
-رمز الدخول الافتراضي في النسخة الحالية هو `1234`.
+رمز الدخول الافتراضي في النسخة الحالية هو `20302030`.
 
 لتحديث ملف البيانات المشفر:
 

app.js

@@ -9,6 +9,7 @@ const loginError = document.getElementById("loginError");
 const togglePassword = document.getElementById("togglePassword");
 const logoutButton = document.getElementById("logoutButton");
 const regionSelect = document.getElementById("regionSelect");
+const regionButtons = document.getElementById("regionButtons");
 const citySelect = document.getElementById("citySelect");
 const searchInput = document.getElementById("searchInput");
 const clearFiltersButton = document.getElementById("clearFiltersButton");
@@ -27,7 +28,7 @@ const toast = document.getElementById("toast");
 
 const PAGE_SIZE = 24;
 const CONTACT_MESSAGE = (name) =>
-  `مرحبا استاذ\nاتواصل معاك لمعرف موقع (${name || "العينة"})\nهل ممكن تزودني بموقع العينة كرما`;
+  `السلام عليكم ورحمة الله وبركاته\n\nأستاذي الكريم،\nنأمل تزويدنا بموقع منشأة (${name || "العينة"})، وذلك لاستكمال بيانات الزيارة الميدانية.\n\nشاكرين لكم تعاونكم.`;
 
 let rows = [];
 let visibleRows = [];
@@ -88,6 +89,27 @@ function setOptions(select, values, placeholder) {
   values.forEach((value) => select.add(new Option(value, value)));
 }
 
+function updateRegionButtonState() {
+  regionButtons.querySelectorAll(".region-choice").forEach((button) => {
+    const isActive = button.dataset.region === regionSelect.value;
+    button.classList.toggle("active", isActive);
+    button.setAttribute("aria-checked", String(isActive));
+  });
+}
+
+function setRegion(region, scrollToControls = false) {
+  regionSelect.value = region;
+  updateRegionButtonState();
+  const cities = uniqueSorted(rows.filter((row) => row.region === region).map((row) => row.city));
+  setOptions(citySelect, cities, "اختر المدينة الصناعية");
+  citySelect.disabled = !region;
+  citySelect.value = "";
+  applyFilters();
+  if (scrollToControls) {
+    window.scrollTo({ top: document.querySelector(".controls-panel").offsetTop - 16, behavior: "smooth" });
+  }
+}
+
 function showToast(message) {
   clearTimeout(toastTimer);
   toast.textContent = message;
@@ -120,6 +142,12 @@ function phoneDigits(value) {
   return `966${digits}`;
 }
 
+function localPhoneNumber(value) {
+  const digits = phoneDigits(value);
+  if (!digits) return "";
+  return digits.startsWith("966") ? `0${digits.slice(3)}` : digits;
+}
+
 function isCoordinate(value) {
   return /^[-+]?\d{1,2}(?:\.\d+)?\s*,\s*[-+]?\d{1,3}(?:\.\d+)?$/.test(String(value ?? "").trim());
 }
@@ -165,7 +193,7 @@ function createCoordinatesBlock(row) {
   item.className = "detail-item coordinates-detail";
   const label = document.createElement("span");
   label.className = "detail-label";
-  label.textContent = "الإحداثيات";
+  label.textContent = isCoordinate(value) ? "الإحداثيات" : "إفادة مدن";
   item.append(label);
 
   if (isCoordinate(value)) {
@@ -189,15 +217,25 @@ function createCoordinatesBlock(row) {
     const message = CONTACT_MESSAGE(row.establishmentName);
     const actions = document.createElement("div");
     actions.className = "contact-actions";
+    const copyPhoneButton = document.createElement("button");
+    copyPhoneButton.type = "button";
+    copyPhoneButton.className = "action-link";
+    copyPhoneButton.append(
+      createSvgIcon("M8 8h11v11H8z M5 16H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"),
+      document.createTextNode("نسخ الرقم"),
+    );
+    copyPhoneButton.addEventListener("click", () =>
+      copyText(localPhoneNumber(value), "تم نسخ الرقم"),
+    );
     actions.append(
-      createActionLink("اتصال", `tel:+${phone}`, "M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.6a2 2 0 0 1-.4 2.1L8.1 9.6a16 16 0 0 0 6.3 6.3l1.2-1.2a2 2 0 0 1 2.1-.4c.8.3 1.7.5 2.6.6a2 2 0 0 1 1.7 2Z"),
+      copyPhoneButton,
       createActionLink("واتساب", `https://wa.me/${phone}?text=${encodeURIComponent(message)}`, "M20.5 11.5a8.5 8.5 0 0 1-12.6 7.4L3 20l1.2-4.7A8.5 8.5 0 1 1 20.5 11.5Z M8.6 8.7c.2 3.3 2.7 5.8 6 6.2"),
     );
     const copyButton = document.createElement("button");
     copyButton.type = "button";
     copyButton.className = "action-link";
-    copyButton.append(createSvgIcon("M8 8h11v11H8z M5 16H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"), document.createTextNode("نسخ الرسالة"));
-    copyButton.addEventListener("click", () => copyText(message, "تم نسخ الرسالة الجاهزة"));
+    copyButton.append(createSvgIcon("M8 8h11v11H8z M5 16H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"), document.createTextNode("نسخ رسالة مقترحة"));
+    copyButton.addEventListener("click", () => copyText(message, "تم نسخ الرسالة المقترحة"));
     actions.append(copyButton);
     item.append(actions);
   }
@@ -288,20 +326,34 @@ function applyFilters() {
 function initializeDashboard(data) {
   rows = data.rows || [];
   totalCounter.textContent = `${rows.length} منشأة`;
-  setOptions(regionSelect, data.regions || uniqueSorted(rows.map((row) => row.region)), "اختر المنطقة");
+  const regions = data.regions || uniqueSorted(rows.map((row) => row.region));
+  setOptions(regionSelect, regions, "اختر المنطقة");
   const regionCounts = new Map();
   rows.forEach((row) => regionCounts.set(row.region, (regionCounts.get(row.region) || 0) + 1));
+  regionButtons.replaceChildren(
+    ...regions.map((region) => {
+      const button = document.createElement("button");
+      button.type = "button";
+      button.className = "region-choice";
+      button.dataset.region = region;
+      button.setAttribute("role", "radio");
+      button.setAttribute("aria-checked", "false");
+      const name = document.createElement("span");
+      name.textContent = region;
+      const count = document.createElement("strong");
+      count.textContent = regionCounts.get(region) || 0;
+      button.append(name, count);
+      button.addEventListener("click", () => setRegion(region));
+      return button;
+    }),
+  );
   regionStats.replaceChildren(
-    ...(data.regions || uniqueSorted(rows.map((row) => row.region))).map((region) => {
+    ...regions.map((region) => {
       const chip = document.createElement("button");
       chip.type = "button";
       chip.className = "region-stat";
       chip.innerHTML = `<span>${region}</span><strong>${regionCounts.get(region) || 0}</strong>`;
-      chip.addEventListener("click", () => {
-        regionSelect.value = region;
-        regionSelect.dispatchEvent(new Event("change"));
-        window.scrollTo({ top: document.querySelector(".controls-panel").offsetTop - 84, behavior: "smooth" });
-      });
+      chip.addEventListener("click", () => setRegion(region, true));
       return chip;
     }),
   );
@@ -314,7 +366,7 @@ function performLogout() {
   rows = [];
   visibleRows = [];
   searchInput.value = "";
-  regionSelect.value = "";
+  setRegion("");
   citySelect.value = "";
   dashboardView.hidden = true;
   loginView.hidden = false;
@@ -352,23 +404,14 @@ togglePassword.addEventListener("click", () => {
 
 logoutButton.addEventListener("click", performLogout);
 
-regionSelect.addEventListener("change", () => {
-  const cities = uniqueSorted(rows.filter((row) => row.region === regionSelect.value).map((row) => row.city));
-  setOptions(citySelect, cities, "اختر المدينة الصناعية");
-  citySelect.disabled = !regionSelect.value;
-  citySelect.value = "";
-  applyFilters();
-});
+regionSelect.addEventListener("change", () => setRegion(regionSelect.value));
 
 citySelect.addEventListener("change", applyFilters);
 searchInput.addEventListener("input", applyFilters);
 loadMoreButton.addEventListener("click", () => renderVisibleRows());
 clearFiltersButton.addEventListener("click", () => {
-  regionSelect.value = "";
   searchInput.value = "";
-  setOptions(citySelect, [], "اختر المدينة الصناعية");
-  citySelect.disabled = true;
-  applyFilters();
+  setRegion("");
   showToast("تم مسح الاختيارات");
 });
 

generate-data.mjs

@@ -2,7 +2,7 @@ import fs from "node:fs/promises";
 import crypto from "node:crypto";
 import { FileBlob, SpreadsheetFile } from "@oai/artifact-tool";
 
-const [inputPath, outputPath, password = "1234"] = process.argv.slice(2);
+const [inputPath, outputPath, password = "20302030"] = process.argv.slice(2);
 
 const CITY_INFO = new Map([
   ["المدينة الصناعية الأولى بالدمام", { region: "منطقة الدمام", city: "الصناعية الأولى بالدمام" }],

index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="theme-color" content="#0f4c5c" />
     <meta name="robots" content="noindex, nofollow" />
-    <title>نظام استعلام المنشآت الصناعية</title>
+    <title>شاشة استعلام</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
@@ -21,9 +21,9 @@
           <div class="brand-mark" aria-hidden="true">
             <svg viewBox="0 0 24 24"><path d="M4 20V8l8-4 8 4v12H4Z" /><path d="M8 20v-7h8v7" /></svg>
           </div>
-          <p class="eyebrow">بوابة الاستعلام</p>
-          <h1>نظام استعلام المنشآت الصناعية</h1>
-          <p class="login-description">أدخل رمز الدخول لعرض بيانات المنشآت والمواقع وبيانات التواصل.</p>
+          <p class="eyebrow">نظام الاستعلام</p>
+          <h1>شاشة استعلام</h1>
+          <p class="login-description">أدخل رمز الدخول للمتابعة.</p>
 
           <label for="password">رمز الدخول</label>
           <div class="password-field">
@@ -48,7 +48,7 @@
             </div>
             <div>
               <p>نظام الاستعلام</p>
-              <h1>المنشآت الصناعية</h1>
+              <h1>شاشة استعلام</h1>
             </div>
           </div>
           <button id="logoutButton" class="secondary-button compact" type="button">
@@ -71,12 +71,12 @@
 
           <section class="controls-panel">
             <div class="filters-grid">
-              <div class="field-group">
-                <label for="regionSelect">المنطقة</label>
-                <div class="select-wrap">
-                  <select id="regionSelect"><option value="">اختر المنطقة</option></select>
-                  <svg viewBox="0 0 24 24"><path d="m7 10 5 5 5-5" /></svg>
-                </div>
+              <div class="field-group region-group">
+                <span class="field-label">المنطقة</span>
+                <div id="regionButtons" class="region-buttons" role="radiogroup" aria-label="اختيار المنطقة"></div>
+                <select id="regionSelect" class="region-select-hidden" aria-hidden="true" tabindex="-1">
+                  <option value="">اختر المنطقة</option>
+                </select>
               </div>
 
               <div class="field-group">
@@ -130,7 +130,7 @@
       </section>
     </main>
 
-    <footer>إعداد نظام الاستعلام</footer>
+    <footer>إعداد نوف الناصر</footer>
     <div id="toast" class="toast" role="status" aria-live="polite"></div>
 
     <script src="data.js"></script>

style.css

@@ -852,8 +852,8 @@ select:focus-visible {
 }
 
 .controls-panel {
-  position: sticky;
-  top: 86px;
+  position: static;
+  top: auto;
   z-index: 15;
   border-color: rgba(217, 227, 232, 0.92);
 }
@@ -1094,3 +1094,115 @@ select:focus-visible {
     transform: translateY(0);
   }
 }
+
+/* Region buttons replace the region dropdown */
+.login-card label,
+.field-group label,
+.field-label {
+  display: block;
+  margin-bottom: 8px;
+  color: #34495a;
+  font-weight: 700;
+}
+
+.filters-grid {
+  grid-template-columns: minmax(220px, 1fr) minmax(300px, 1.35fr);
+}
+
+.region-group {
+  grid-column: 1 / -1;
+}
+
+.region-select-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.region-buttons {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.region-choice {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  min-width: 0;
+  min-height: 54px;
+  padding: 10px 13px;
+  color: #315161;
+  text-align: right;
+  background: #fbfdfe;
+  border: 1px solid #d2dfe6;
+  border-radius: 8px;
+  font-weight: 800;
+  transition: transform 0.18s, color 0.18s, background 0.18s, border-color 0.18s, box-shadow 0.18s;
+}
+
+.region-choice:hover {
+  background: #eef7f9;
+  border-color: #bcd8df;
+  transform: translateY(-1px);
+}
+
+.region-choice.active {
+  color: #fff;
+  background: linear-gradient(145deg, var(--primary), #177b72);
+  border-color: transparent;
+  box-shadow: 0 12px 26px rgba(15, 76, 92, 0.16);
+}
+
+.region-choice span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.region-choice strong {
+  flex: 0 0 auto;
+  min-width: 34px;
+  padding: 3px 8px;
+  color: var(--accent);
+  text-align: center;
+  background: var(--accent-soft);
+  border-radius: 8px;
+}
+
+.region-choice.active strong {
+  color: var(--primary-dark);
+  background: #d9fff4;
+}
+
+@media (max-width: 900px) {
+  .filters-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .region-buttons {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 560px) {
+  .filters-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .region-buttons {
+    grid-template-columns: 1fr;
+  }
+
+  .region-choice {
+    min-height: 48px;
+  }
+}