Update index.html

index.html

@@ -1,23 +1,557 @@
+# =======================
+# 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>
+<title>روابط الخرائط</title>
 <style>
-    body {
-        font-family: Arial, sans-serif;
-        text-align: center;
-        margin-top: 100px;
-        background-color: #f8f9fa;
-        color: #333;
-    }
-    h1 {
-        color: red;
-    }
+  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>
 </head>
 <body>
-    <h1>🚧 جاري تعديل الكود 🚧</h1>
-    <p>الصفحة تحت المعالجة حالياً، يرجى العودة لاحقاً.</p>
+  <h1>اختر صفحة الباحث</h1>
+  <ul>{list_items}</ul>
+  <div class="footer">تصميم وإعداد نوف الناصر</div>
 </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)