Update index.html

index.html

@@ -1,557 +1,74 @@
-# =======================
-# 1) المتطلبات والرفع
-# =======================
-import os, zipfile, hashlib, json
-import pandas as pd
-import folium
-from folium.plugins import LocateControl
-from google.colab import files
-
-print("↥ ارفع ملف Excel...")
-uploaded = files.upload()
-excel_file = list(uploaded.keys())[0]
-print(f"تم الرفع: {excel_file}")
-
-# =======================
-# 2) قراءة الملف وتوحيد الأعمدة
-# =======================
-df = pd.read_excel(excel_file)
-df.columns = df.columns.str.strip()
-print("الأعمدة:", df.columns.tolist())
-
-required_cols = ["رقم الباحث", "اسم الباحث", "اسم الحارة"]
-for c in required_cols:
-    if c not in df.columns:
-        raise ValueError(f"الملف لا يحتوي على العمود: {c}")
-
-df["researcher_id"] = df["رقم الباحث"].astype(str).str.strip()
-df["researcher_name"] = df["اسم الباحث"].astype(str).fillna("").str.strip()
-
-df["hara"] = df["اسم الحارة"].astype(str).fillna("غير محدد").str.strip()
-df.loc[df["hara"].eq(""), "hara"] = "غير محدد"
-
-rename_map = {}
-if "اسم المنشأة" in df.columns: rename_map["اسم المنشأة"] = "est"
-if "x" in df.columns: rename_map["x"] = "lon"
-if "y" in df.columns: rename_map["y"] = "lat"
-if "lon" in df.columns: rename_map["lon"] = "lon"
-if "lat" in df.columns: rename_map["lat"] = "lat"
-df = df.rename(columns=rename_map)
-
-if "lon" not in df.columns or "lat" not in df.columns:
-    raise ValueError("يجب وجود إحداثيات: (x,y) أو (lon,lat)")
-
-df["lon"] = pd.to_numeric(df["lon"], errors="coerce")
-df["lat"] = pd.to_numeric(df["lat"], errors="coerce")
-
-df["est"] = df.get("est", "بدون اسم").astype(str).fillna("بدون اسم").str.strip()
-df.loc[df["est"].eq(""), "est"] = "بدون اسم"
-
-# =======================
-# 3) مجلد الخرج
-# =======================
-OUT_DIR = "pages"
-os.makedirs(OUT_DIR, exist_ok=True)
-pages = []
-
-# =======================
-# 4) أدوات مساعدة
-# =======================
-FOLIUM_COLORS = [
-    "red","blue","green","purple","orange","darkred","lightred","beige",
-    "darkblue","darkgreen","cadetblue","darkpurple","pink","lightblue",
-    "lightgreen","gray","black","lightgray"
-]
-CSS_COLOR_MAP = {
-    "red":"#dc3545","blue":"#0d6efd","green":"#198754","purple":"#6f42c1","orange":"#fd7e14",
-    "darkred":"#8b0000","lightred":"#ff6b6b","beige":"#f5f5dc","darkblue":"#003f88",
-    "darkgreen":"#0b6623","cadetblue":"#5f9ea0","darkpurple":"#4b0082","pink":"#d63384",
-    "lightblue":"#74c0fc","lightgreen":"#8ce99a","gray":"#6c757d","black":"#212529","lightgray":"#ced4da"
-}
-
-def stable_folium_color(text: str) -> str:
-    t = (text or "غير محدد").strip() or "غير محدد"
-    h = hashlib.md5(t.encode("utf-8")).hexdigest()
-    return FOLIUM_COLORS[int(h[:8], 16) % len(FOLIUM_COLORS)]
-
-def make_footer_html():
-    return """
-    <div style="
-        position: fixed;
-        bottom: 8px; left: 8px;
-        background: rgba(255,255,255,0.85);
-        padding: 6px 10px;
-        border-radius: 10px;
-        font-size: 13px;
-        direction: rtl;
-        z-index: 9999;
-        box-shadow: 0 1px 8px rgba(0,0,0,0.15);
-        font-family: Arial, sans-serif;
-    ">
-      تصميم وإعداد <b>نوف الناصر</b>
-    </div>
-    """
-
-def make_stats_panel_bottom_right(title, total, hara_counts, css_color_map):
-    top3 = " | ".join([f"<b>{h}</b>: {int(c)}" for h, c in hara_counts.head(3).items()]) if len(hara_counts) else "—"
-    legend = ""
-    for h in hara_counts.index[:10]:
-        legend += f"""
-        <div style="display:flex;gap:6px;align-items:center;margin:4px 0;">
-          <span style="width:12px;height:12px;border-radius:50%;
-          background:{css_color_map.get(h,'#6c757d')};display:inline-block;border:1px solid rgba(0,0,0,0.2);"></span>
-          <span style="font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px;">{h}</span>
-          <span style="font-size:12px;color:#666;">({int(hara_counts[h])})</span>
-        </div>"""
-    more = ""
-    if len(hara_counts) > 10:
-        more = f"<div style='font-size:12px;color:#666;margin-top:6px;'>+ {len(hara_counts)-10} حارات أخرى</div>"
-
-    return f"""
-    <style>
-      .stats-box {{
-        position: fixed;
-        bottom: 14px;
-        right: 14px;
-        width: 300px;
-        background: rgba(255,255,255,0.92);
-        border-radius: 14px;
-        box-shadow: 0 2px 14px rgba(0,0,0,0.2);
-        z-index: 9999;
-        font-family: Arial, sans-serif;
-        overflow: hidden;
-      }}
-      .stats-head {{
-        padding:10px 12px;
-        font-weight:700;
-        font-size:14px;
-        border-bottom:1px solid rgba(0,0,0,0.08);
-        direction:rtl;
-        display:flex;
-        justify-content:space-between;
-        align-items:center;
-        gap:10px;
-      }}
-      .stats-title {{
-        white-space:nowrap;
-        overflow:hidden;
-        text-overflow:ellipsis;
-        max-width: 210px;
-      }}
-      .toggle {{
-        cursor:pointer;
-        background:rgba(0,0,0,0.06);
-        border-radius:10px;
-        padding:4px 8px;
-        font-size:12px;
-      }}
-      .stats-body {{
-        padding:10px 12px;
-        direction:rtl;
-        font-size:13px;
-        line-height:1.8;
-      }}
-      .legend {{
-        max-height: 180px;
-        overflow:auto;
-        padding-right: 2px;
-        margin-top: 8px;
-      }}
-      .stats-fab {{
-        position: fixed;
-        bottom: 14px;
-        right: 14px;
-        z-index: 9999;
-        display:none;
-        cursor:pointer;
-        background: rgba(255,255,255,0.92);
-        padding: 10px 12px;
-        border-radius: 14px;
-        box-shadow: 0 2px 14px rgba(0,0,0,0.2);
-        font-family: Arial, sans-serif;
-        font-size: 13px;
-        direction: rtl;
-      }}
-      hr {{
-        border:none;
-        border-top:1px solid rgba(0,0,0,0.08);
-        margin:10px 0;
-      }}
-    </style>
-
-    <div id="statsFab" class="stats-fab">إظهار الإحصاءات</div>
-
-    <div id="statsBox" class="stats-box">
-      <div class="stats-head">
-        <span class="stats-title">{title}</span>
-        <span class="toggle" id="hideStats">إخفاء</span>
-      </div>
-      <div class="stats-body" id="statsBody">
-        <b>عدد المواقع:</b> {int(total)}<br>
-        <b>عدد الحارات:</b> {int(len(hara_counts))}<br>
-        <b>الأكثر:</b> {top3}
-        <hr>
-        <b>تلوين حسب الحارة</b>
-        <div class="legend">
-          {legend}
-          {more}
-        </div>
-      </div>
-    </div>
-
-    <script>
-      (function(){{
-        const box = document.getElementById('statsBox');
-        const fab = document.getElementById('statsFab');
-        const hide = document.getElementById('hideStats');
-
-        hide.addEventListener('click', function(){{
-          box.style.display = 'none';
-          fab.style.display = 'block';
-        }});
-
-        fab.addEventListener('click', function(){{
-          box.style.display = 'block';
-          fab.style.display = 'none';
-        }});
-      }})();
-    </script>
-    """
-
-def make_search_control_js(map_var_name: str, items_json: str, position: str = "bottomleft"):
-    """
-    بحث جزئي + قائمة نتائج (Leaflet Control).
-    position: topleft / topright / bottomleft / bottomright
-    """
-    return f"""
-    <style>
-      .leaflet-control.est-search-control {{
-        background: rgba(255,255,255,0.92);
-        box-shadow: 0 2px 14px rgba(0,0,0,0.20);
-        border-radius: 14px;
-        padding: 10px 10px;
-        width: 320px;
-        direction: rtl;
-        font-family: Arial, sans-serif;
-      }}
-      .est-search-control input {{
-        width: 100%;
-        border: 1px solid rgba(0,0,0,0.15);
-        border-radius: 10px;
-        padding: 10px 12px;
-        font-size: 13px;
-        outline: none;
-      }}
-      .est-search-meta {{
-        margin-top: 6px;
-        font-size: 12px;
-        color: #666;
-        display:flex;
-        justify-content:space-between;
-        gap:8px;
-      }}
-      .est-results {{
-        margin-top: 8px;
-        max-height: 180px;
-        overflow: auto;
-        border-top: 1px solid rgba(0,0,0,0.08);
-        padding-top: 6px;
-      }}
-      .est-item {{
-        cursor: pointer;
-        padding: 8px 10px;
-        border-radius: 10px;
-        font-size: 13px;
-        line-height: 1.4;
-      }}
-      .est-item:hover {{
-        background: rgba(0,0,0,0.06);
-      }}
-      .est-badge {{
-        font-size: 12px;
-        color: #333;
-      }}
-      .est-clear {{
-        cursor:pointer;
-        user-select:none;
-        font-size:12px;
-        color:#0b6efd;
-      }}
-    </style>
-
-    <script>
-      (function(){{
-        const map = {map_var_name};
-        // items: list of objects (title, lat, lon, markerVar)
-        const items = {items_json};
-
-        function norm(s){{
-          if(!s) return "";
-          s = (""+s).toLowerCase();
-
-          // إزالة التشكيل
-          s = s.replace(/[\\u064B-\\u065F]/g, "");
-          // تطبيع عربي
-          s = s.replace(/[إأآا]/g, "ا")
-               .replace(/ى/g, "ي")
-               .replace(/ة/g, "ه")
-               .replace(/ؤ/g, "و")
-               .replace(/ئ/g, "ي")
-               .replace(/ـ/g, "");
-          // مسافات
-          s = s.replace(/\\s+/g, " ").trim();
-          return s;
-        }}
-
-        const SearchControl = L.Control.extend({{
-          options: {{ position: '{position}' }},
-          onAdd: function(){{
-            const div = L.DomUtil.create('div', 'leaflet-control est-search-control');
-            div.innerHTML = `
-              <input id="estQ" type="text" placeholder="ابحث باسم المنشأة (جزء من الاسم)..." />
-              <div class="est-search-meta">
-                <span id="estCount" class="est-badge"></span>
-                <span id="estClear" class="est-clear">مسح</span>
-              </div>
-              <div id="estResults" class="est-results"></div>
-            `;
-            L.DomEvent.disableClickPropagation(div);
-            L.DomEvent.disableScrollPropagation(div);
-            return div;
-          }}
-        }});
-
-        map.addControl(new SearchControl());
-
-        function renderResults(hits){{
-          const results = document.getElementById('estResults');
-          const count = document.getElementById('estCount');
-          results.innerHTML = "";
-
-          if(!hits.length){{
-            count.textContent = "لا توجد نتائج";
-            return;
-          }}
-
-          count.textContent = "النتائج: " + hits.length;
-
-          for(const h of hits.slice(0, 50)){{
-            const el = document.createElement('div');
-            el.className = 'est-item';
-            el.textContent = h.title;
-            el.onclick = function(){{
-              try {{
-                const mv = window[h.markerVar];
-                if(mv && mv.getLatLng){{
-                  map.setView(mv.getLatLng(), Math.max(map.getZoom(), 17), {{animate:true}});
-                  if(mv.openPopup) mv.openPopup();
-                }} else {{
-                  map.setView([h.lat, h.lon], Math.max(map.getZoom(), 17), {{animate:true}});
-                }}
-              }} catch(e) {{}}
-            }};
-            results.appendChild(el);
-          }}
-        }}
-
-        function search(q){{
-          const nq = norm(q);
-          if(!nq) return [];
-          const hits = [];
-          for(const it of items){{
-            if(norm(it.title).includes(nq)) hits.push(it);
-          }}
-          return hits;
-        }}
-
-        setTimeout(function(){{
-          const input = document.getElementById('estQ');
-          const clearBtn = document.getElementById('estClear');
-
-          input.addEventListener('input', function(){{
-            renderResults(search(this.value));
-          }});
-
-          input.addEventListener('keydown', function(e){{
-            if(e.key === 'Enter'){{
-              const hits = search(this.value);
-              renderResults(hits);
-              if(hits.length){{
-                try {{
-                  const mv = window[hits[0].markerVar];
-                  if(mv && mv.getLatLng){{
-                    map.setView(mv.getLatLng(), Math.max(map.getZoom(), 17), {{animate:true}});
-                    if(mv.openPopup) mv.openPopup();
-                  }}
-                }} catch(e) {{}}
-              }}
-            }}
-          }});
-
-          clearBtn.addEventListener('click', function(){{
-            input.value = "";
-            document.getElementById('estResults').innerHTML = "";
-            document.getElementById('estCount').textContent = "";
-          }});
-        }}, 0);
-      }})();
-    </script>
-    """
-
-# =======================
-# 5) إنشاء صفحات الباحثين
-# =======================
-ids = sorted(pd.to_numeric(df["researcher_id"], errors="coerce").dropna().astype(int).unique())
-
-for idx, rid in enumerate(ids, 1):
-    g = df[df["researcher_id"] == str(rid)].copy()
-    g_valid = g.dropna(subset=["lat", "lon"]).copy()
-
-    name_s = g["researcher_name"].replace("", pd.NA).dropna()
-    title = f"{(name_s.iloc[0] if len(name_s) else 'باحث')} - {rid}"
-
-    if g_valid.empty:
-        html_empty = f"""
-        <html lang='ar' dir='rtl'>
-        <head><meta charset='utf-8'/></head>
-        <body style='font-family:Arial;text-align:center;margin-top:50px'>
-        <h3>لا توجد إحداثيات صالحة ({title})</h3>
-        <div style='margin-top:20px;color:#666;'>تصميم وإعداد نوف الناصر</div>
-        </body>
-        </html>
-        """
-        with open(os.path.join(OUT_DIR, f"{idx:02d}.html"), "w", encoding="utf-8") as f:
-            f.write(html_empty)
-        pages.append((f"{idx:02d}", title))
-        continue
-
-    # خريطة بدون tiles افتراضيًا
-    m = folium.Map(
-        location=[g_valid["lat"].mean(), g_valid["lon"].mean()],
-        zoom_start=13,
-        tiles=None,
-        control_scale=True
-    )
-
-    # طبقات الخرائط
-    folium.TileLayer("OpenStreetMap", name="خريطة الشارع").add_to(m)
-    folium.TileLayer(
-        tiles="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
-        attr="&copy; Esri",
-        name="أقمار صناعية (Esri)",
-        overlay=False,
-        control=True
-    ).add_to(m)
-
-    LocateControl(auto_start=False, flyTo=True).add_to(m)
-
-    # إحصاءات الحارات + ألوان
-    hara_counts = g_valid["hara"].value_counts()
-    hara_to_folium = {h: stable_folium_color(h) for h in hara_counts.index}
-    hara_to_css = {h: CSS_COLOR_MAP.get(hara_to_folium[h], "#6c757d") for h in hara_counts.index}
-
-    m.get_root().html.add_child(
-        folium.Element(make_stats_panel_bottom_right(title, len(g_valid), hara_counts, hara_to_css))
-    )
-
-    # رسم النقاط + تجهيز بيانات البحث
-    bounds = []
-    search_items = []  # [{title, lat, lon, markerVar}]
-    for _, r in g_valid.iterrows():
-        lat, lon = float(r["lat"]), float(r["lon"])
-        bounds.append([lat, lon])
-
-        hara = (r.get("hara") or "غير محدد").strip() or "غير محدد"
-        marker_color = hara_to_folium.get(hara, "gray")
-        est_name = str(r.get("est", "بدون اسم")).strip() or "بدون اسم"
-
-        link = f"https://www.google.com/maps?q={lat},{lon}"
-        popup_html = f"""
-        <div style="direction:rtl;font-family:Arial;line-height:1.7;">
-          <b>{est_name}</b><br>
-          السجل التجاري: {r.get('السجل التجاري','-')}<br>
-          المنطقة: {r.get('اسم المنطقة','-')}<br>
-          الحارة: {r.get('اسم الحارة','-')}<br>
-          <a href="{link}" target="_blank">فتح في خرائط جوجل</a>
-        </div>
-        """
-
-        marker = folium.Marker(
-            location=[lat, lon],
-            tooltip=est_name,
-            popup=folium.Popup(popup_html, max_width=320),
-            icon=folium.Icon(color=marker_color, icon="info-sign")
-        ).add_to(m)
-
-        search_items.append({
-            "title": est_name,
-            "lat": lat,
-            "lon": lon,
-            "markerVar": marker.get_name()
-        })
-
-    if bounds:
-        m.fit_bounds(bounds, padding=(30, 30))
-
-    # LayerControl لتبديل نوع الخريطة
-    folium.LayerControl(collapsed=False).add_to(m)
-
-    # إضافة مربع البحث (أسفل اليسار) + بحث جزئي
-    items_json = json.dumps(search_items, ensure_ascii=False)
-    m.get_root().html.add_child(
-        folium.Element(make_search_control_js(m.get_name(), items_json, position="bottomleft"))
-    )
-
-    # فوتر
-    m.get_root().html.add_child(folium.Element(make_footer_html()))
-
-    # حفظ
-    fname = f"{idx:02d}.html"
-    m.save(os.path.join(OUT_DIR, fname))
-    pages.append((f"{idx:02d}", title))
-
-print(f"✓ تم إنشاء {len(pages)} صفحة داخل: {OUT_DIR}")
-
-# =======================
-# 6) صفحة الفهرس
-# =======================
-list_items = "".join([
-    f'<li><a href="{num}.html" target="_blank">{num} — {title}</a></li>'
-    for num, title in pages
-])
-
-index_html = f"""
 <!DOCTYPE html>
 <html lang="ar" dir="rtl">
 <head>
-<meta charset="utf-8"/>
-<title>روابط الخرائط</title>
-<style>
-  body {{ font-family: Arial, sans-serif; margin: 24px; }}
-  h1 {{ margin-bottom: 10px; }}
-  ul {{ line-height: 1.9; }}
-  a {{ color: #0b6efd; text-decoration: none; }}
-  a:hover {{ text-decoration: underline; }}
-  .footer {{ margin-top: 28px; color:#666; }}
-</style>
+  <meta charset="utf-8"/>
+  <title>اختر الصفحة</title>
+  <style>
+    body { font-family: Arial, sans-serif; margin: 20px; }
+    h1 { margin-bottom: 10px; }
+    ul { line-height: 1.9; }
+    a  { color:#0b6efd; text-decoration:none; }
+    a:hover { text-decoration:underline; }
+    .btn {
+      padding: 8px 12px; background: #28a745; color: #fff; border: 0;
+      border-radius: 6px; cursor: pointer; margin-bottom: 12px;
+    }
+    .mini { font-size: 12px; color:#666; margin-right:8px; }
+  </style>
+
+  <script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>
 </head>
 <body>
-  <h1>اختر صفحة الباحث</h1>
-  <ul>{list_items}</ul>
-  <div class="footer">تصميم وإعداد نوف الناصر</div>
+
+  <h1>اختر الصفحة</h1>
+
+  <button class="btn" onclick="exportAllToExcel()">تحميل قائمة الروابط (Excel)</button>
+  <span class="mini">تصميم وإعداد نوف الناصر</span>
+
+  <ul id="pages-list"></ul>
+
+  <script>
+    const FOLDER = 'BCS';
+    const TOTAL_PAGES = 61;
+
+    function pageUrl(n) {
+      const two = String(n).padStart(2, '0');
+      const base = location.origin + location.pathname.replace(/[^/]*$/, '');
+      return `${base}${FOLDER}/${two}.html`;
+    }
+
+    // إنشاء القائمة على الصفحة
+    (function buildList() {
+      const ul = document.getElementById('pages-list');
+      for (let i = 1; i <= TOTAL_PAGES; i++) {
+        const li = document.createElement('li');
+        const a  = document.createElement('a');
+        a.href = `${FOLDER}/${String(i).padStart(2,'0')}.html`;
+        a.target = '_blank';
+        a.textContent = `صفحة ${i}`;
+        li.appendChild(a);
+        ul.appendChild(li);
+      }
+    })();
+
+    // تصدير للإكسل بحيث كلمة "اضغط هنا" هي الرابط
+    function exportAllToExcel() {
+      const rows = [];
+      for (let i = 1; i <= TOTAL_PAGES; i++) {
+        const link = pageUrl(i);
+        rows.push({
+          'الصفحة': `صفحة ${i}`,
+          'الرابط': { t: "s", v: "اضغط هنا", l: { Target: link } }
+        });
+      }
+
+      const ws = XLSX.utils.json_to_sheet([]);
+      XLSX.utils.sheet_add_json(ws, rows, { origin: "A1", skipHeader: false });
+
+      const wb = XLSX.utils.book_new();
+      XLSX.utils.book_append_sheet(wb, ws, 'links');
+      XLSX.writeFile(wb, 'روابط_الصفحات.xlsx');
+    }
+  </script>
 </body>
 </html>
-"""
-with open(os.path.join(OUT_DIR, "index.html"), "w", encoding="utf-8") as f:
-    f.write(index_html)
-
-# =======================
-# 7) ضغط وتنزيل
-# =======================
-zip_name = "خرائط_الباحثين.zip"
-with zipfile.ZipFile(zip_name, "w", zipfile.ZIP_DEFLATED) as z:
-    for fn in os.listdir(OUT_DIR):
-        z.write(os.path.join(OUT_DIR, fn), arcname=fn)
-
-print(f"✓ تم إنشاء الملف المضغوط: {zip_name}")
-files.download(zip_name)