ICS2

Running

App Files Files Community

stat2025 commited on 14 days ago

Commit

59856af

verified ·

1 Parent(s): 0211fb5

Upload 6 files

Browse files

Files changed (3) hide show

app.js +10 -15
index.html +1 -5
style.css +175 -41

app.js CHANGED Viewed

@@ -22,8 +22,6 @@ const noResults = document.getElementById("noResults");
 const loadMoreWrap = document.getElementById("loadMoreWrap");
 const loadMoreButton = document.getElementById("loadMoreButton");
 const loadMoreMeta = document.getElementById("loadMoreMeta");
-const totalCounter = document.getElementById("totalCounter");
-const regionStats = document.getElementById("regionStats");
 const toast = document.getElementById("toast");
 const PAGE_SIZE = 24;
@@ -174,6 +172,14 @@ function isCoordinate(value) {
   return /^[-+]?\d{1,2}(?:\.\d+)?\s*,\s*[-+]?\d{1,3}(?:\.\d+)?$/.test(String(value ?? "").trim());
 }
 function createSvgIcon(path) {
   const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   svg.setAttribute("viewBox", "0 0 24 24");
@@ -328,14 +334,14 @@ function applyFilters() {
     return matchesRegion && matchesCity;
   });
-  visibleRows = scopedRows.filter((row) => {
     if (!query) return Boolean(city || region);
     return (
       normalize(row.establishmentName).includes(query) ||
       normalize(row.commercialRecord).includes(query) ||
       normalize(row.cityClarification).includes(query)
     );
-  });
   const shouldShow = visibleRows.length > 0 || city || region || query;
   emptyState.hidden = shouldShow;
@@ -349,7 +355,6 @@ function applyFilters() {
 function initializeDashboard(data) {
   rows = data.rows || [];
-  totalCounter.textContent = `${rows.length} منشأة`;
   const regions = data.regions || uniqueSorted(rows.map((row) => row.region));
   setOptions(regionSelect, regions, "اختر المنطقة");
   const regionCounts = new Map();
@@ -371,16 +376,6 @@ function initializeDashboard(data) {
       return button;
     }),
   );
-  regionStats.replaceChildren(
-    ...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", () => setRegion(region, true));
-      return chip;
-    }),
-  );
   setOptions(citySelect, [], "اختر المدينة الصناعية");
   citySelect.disabled = true;
   restoreFilterState();

 const loadMoreWrap = document.getElementById("loadMoreWrap");
 const loadMoreButton = document.getElementById("loadMoreButton");
 const loadMoreMeta = document.getElementById("loadMoreMeta");
 const toast = document.getElementById("toast");
 const PAGE_SIZE = 24;
   return /^[-+]?\d{1,2}(?:\.\d+)?\s*,\s*[-+]?\d{1,3}(?:\.\d+)?$/.test(String(value ?? "").trim());
 }
+function hasLocationInfo(row) {
+  return Boolean(String(row.coordinates ?? "").trim());
+}
+function sortRowsByLocationInfo(items) {
+  return [...items].sort((a, b) => Number(hasLocationInfo(b)) - Number(hasLocationInfo(a)));
+}
 function createSvgIcon(path) {
   const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   svg.setAttribute("viewBox", "0 0 24 24");
     return matchesRegion && matchesCity;
   });
+  visibleRows = sortRowsByLocationInfo(scopedRows.filter((row) => {
     if (!query) return Boolean(city || region);
     return (
       normalize(row.establishmentName).includes(query) ||
       normalize(row.commercialRecord).includes(query) ||
       normalize(row.cityClarification).includes(query)
     );
+  }));
   const shouldShow = visibleRows.length > 0 || city || region || query;
   emptyState.hidden = shouldShow;
 function initializeDashboard(data) {
   rows = data.rows || [];
   const regions = data.regions || uniqueSorted(rows.map((row) => row.region));
   setOptions(regionSelect, regions, "اختر المنطقة");
   const regionCounts = new Map();
       return button;
     }),
   );
   setOptions(citySelect, [], "اختر المدينة الصناعية");
   citySelect.disabled = true;
   restoreFilterState();

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <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>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -63,10 +63,6 @@
               <p class="eyebrow">لوحة الاستعلام</p>
               <h2>اختر المنطقة والمدينة الصناعية أو ابحث باسم المنشأة مباشرة</h2>
             </div>
-            <div class="summary-side">
-              <div id="totalCounter" class="counter-pill">0 منشأة</div>
-              <div id="regionStats" class="region-stats" aria-label="ملخص المناطق"></div>
-            </div>
           </section>
           <section class="controls-panel">

   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#4137A8" />
     <meta name="robots" content="noindex, nofollow" />
     <title>شاشة استعلام</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
               <p class="eyebrow">لوحة الاستعلام</p>
               <h2>اختر المنطقة والمدينة الصناعية أو ابحث باسم المنشأة مباشرة</h2>
             </div>
           </section>
           <section class="controls-panel">

style.css CHANGED Viewed

@@ -1,17 +1,20 @@
 :root {
-  --ink: #1d2935;
-  --muted: #667789;
-  --line: #d9e3e8;
-  --page: #f4f7f8;
   --surface: #ffffff;
-  --primary: #0f4c5c;
-  --primary-dark: #0a3440;
-  --accent: #1b8a6b;
-  --accent-soft: #e6f5ef;
-  --warning: #8a5a13;
-  --warning-soft: #fff5df;
-  --danger: #b43d4f;
-  --shadow: 0 10px 28px rgba(28, 53, 68, 0.08);
 }
 * {
@@ -285,10 +288,11 @@ p {
 .summary-panel {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   gap: 18px;
-  padding: 22px;
   border-top: 4px solid var(--primary);
 }
 .summary-panel h2 {
@@ -540,7 +544,7 @@ select:disabled {
 }
 .map-detail::before {
-  background: #168a5b;
 }
 .statement-detail {
@@ -549,7 +553,7 @@ select:disabled {
 }
 .statement-detail::before {
-  background: #227997;
 }
 .map-detail .detail-label,
@@ -563,23 +567,23 @@ select:disabled {
 }
 .map-detail .detail-label {
-  color: #116343;
   background: #dff4e9;
 }
 .statement-detail .detail-label {
-  color: #17647d;
   background: #dff0f6;
 }
 .map-detail .action-link {
-  color: #116343;
   background: #ffffff;
   border-color: #b7e3ca;
 }
 .statement-detail .action-link {
-  color: #17647d;
   background: #ffffff;
   border-color: #bddce8;
 }
@@ -844,32 +848,26 @@ select:focus-visible {
 }
 .summary-panel {
-  align-items: stretch;
-  min-height: 150px;
   padding: 24px;
   border-top: 0;
-  border-right: 5px solid var(--primary);
 }
 .summary-copy {
   display: flex;
   flex-direction: column;
   justify-content: center;
   min-width: 0;
 }
 .summary-panel h2 {
-  max-width: 760px;
-  font-size: 27px;
-}
-.summary-side {
-  flex: 0 0 min(380px, 42%);
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 12px;
-  min-width: 280px;
 }
 .counter-pill {
@@ -1027,12 +1025,6 @@ select:focus-visible {
     flex-direction: column;
   }
-  .summary-side {
-    flex-basis: auto;
-    width: 100%;
-    min-width: 0;
-  }
   .controls-panel {
     position: static;
   }
@@ -1055,7 +1047,7 @@ select:focus-visible {
   .summary-panel {
     min-height: auto;
     padding: 18px;
-    border-right-width: 4px;
   }
   .summary-panel h2 {
@@ -1281,3 +1273,145 @@ select:focus-visible {
     min-height: 48px;
   }
 }

 :root {
+  --ink: #1CADE4;
+  --muted: #5C6E88;
+  --line: #d7e2ee;
+  --page: #f5f8fb;
   --surface: #ffffff;
+  --primary: #4137A8;
+  --primary-dark: #1CADE4;
+  --accent: #00B050;
+  --accent-soft: #e8f8f0;
+  --accent-alt: #42BA97;
+  --info: #27CED7;
+  --purple: #7030A0;
+  --warning: #5C6E88;
+  --warning-soft: #fff7d1;
+  --danger: #F5544A;
+  --shadow: 0 10px 28px rgba(92, 110, 136, 0.11);
 }
 * {
 .summary-panel {
   display: flex;
   align-items: center;
+  justify-content: center;
   gap: 18px;
+  padding: 28px 24px;
   border-top: 4px solid var(--primary);
+  text-align: center;
 }
 .summary-panel h2 {
 }
 .map-detail::before {
+  background: var(--accent);
 }
 .statement-detail {
 }
 .statement-detail::before {
+  background: var(--info);
 }
 .map-detail .detail-label,
 }
 .map-detail .detail-label {
+  color: var(--primary-dark);
   background: #dff4e9;
 }
 .statement-detail .detail-label {
+  color: var(--primary-dark);
   background: #dff0f6;
 }
 .map-detail .action-link {
+  color: var(--primary-dark);
   background: #ffffff;
   border-color: #b7e3ca;
 }
 .statement-detail .action-link {
+  color: var(--primary-dark);
   background: #ffffff;
   border-color: #bddce8;
 }
 }
 .summary-panel {
+  align-items: center;
+  min-height: 128px;
   padding: 24px;
   border-top: 0;
+  border-right: 0;
+  border-bottom: 4px solid var(--primary);
 }
 .summary-copy {
   display: flex;
   flex-direction: column;
   justify-content: center;
+  align-items: center;
   min-width: 0;
+  width: 100%;
 }
 .summary-panel h2 {
+  max-width: 820px;
+  font-size: 28px;
 }
 .counter-pill {
     flex-direction: column;
   }
   .controls-panel {
     position: static;
   }
   .summary-panel {
     min-height: auto;
     padding: 18px;
+    border-bottom-width: 4px;
   }
   .summary-panel h2 {
     min-height: 48px;
   }
 }
+/* Identity color system */
+body {
+  background:
+    linear-gradient(180deg, rgba(65, 55, 168, 0.07) 0, rgba(65, 55, 168, 0) 260px),
+    linear-gradient(180deg, #fbfcfd 0%, var(--page) 100%);
+}
+.eyebrow,
+.results-meta,
+.sample-index {
+  color: var(--accent);
+}
+.login-card::before {
+  background: linear-gradient(90deg, var(--accent), var(--primary));
+}
+.brand-mark,
+.primary-button,
+.region-choice.active {
+  background: linear-gradient(145deg, var(--primary), var(--primary-dark));
+}
+.primary-button:hover,
+.action-link:hover,
+.secondary-button:hover {
+  background: var(--primary-dark);
+  border-color: var(--primary-dark);
+}
+.topbar {
+  border-bottom-color: rgba(92, 110, 136, 0.18);
+}
+.summary-panel {
+  border-bottom-color: var(--primary);
+}
+.sample-card-header {
+  border-right-color: var(--accent);
+}
+.status-badge {
+  color: #5C6E88;
+  background: #fff4bf;
+  border-color: #FFC000;
+}
+.map-detail {
+  background: rgba(0, 176, 80, 0.08);
+  border-color: rgba(0, 176, 80, 0.28) !important;
+}
+.map-detail::before {
+  background: var(--accent);
+}
+.map-detail .detail-label {
+  color: #1CADE4;
+  background: rgba(0, 176, 80, 0.13);
+}
+.map-detail .action-link {
+  color: #1CADE4;
+  border-color: rgba(0, 176, 80, 0.32);
+}
+.statement-detail {
+  background: rgba(39, 206, 215, 0.1);
+  border-color: rgba(39, 206, 215, 0.35) !important;
+}
+.statement-detail::before {
+  background: var(--info);
+}
+.statement-detail .detail-label {
+  color: #1CADE4;
+  background: rgba(39, 206, 215, 0.16);
+}
+.statement-detail .action-link {
+  color: #1CADE4;
+  border-color: rgba(39, 206, 215, 0.42);
+}
+.action-link,
+.secondary-button,
+.clear-filters-button {
+  color: var(--primary-dark);
+  background: #ffffff;
+  border-color: rgba(39, 206, 215, 0.34);
+}
+.clear-filters-button:hover {
+  color: #ffffff;
+  background: var(--danger);
+  border-color: var(--danger);
+}
+.region-choice {
+  color: var(--primary-dark);
+  border-color: rgba(39, 206, 215, 0.28);
+}
+.region-choice:hover {
+  background: rgba(39, 206, 215, 0.08);
+  border-color: var(--info);
+}
+.region-choice strong,
+.region-choice.active strong {
+  color: var(--primary-dark);
+  background: rgba(0, 176, 80, 0.14);
+}
+.region-choice.active {
+  color: #ffffff;
+}
+.region-choice.active strong {
+  background: #ffffff;
+}
+.password-field input:focus,
+.search-wrap input:focus,
+.select-wrap select:focus {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(65, 55, 168, 0.13);
+}
+button:focus-visible,
+a:focus-visible,
+input:focus-visible,
+select:focus-visible {
+  outline-color: rgba(65, 55, 168, 0.28);
+}
+.toast {
+  background: var(--primary-dark);
+}