From f7a10cf20ba6fbdce809df82b7164392e466dc42 Mon Sep 17 00:00:00 2001
From: ashley <iamashley@duck.com>
Date: Sun, 17 Aug 2025 12:48:29 +0200
Subject: [PATCH] Update html/map.ejs

---
 html/map.ejs | 380 ++++++++++++++++++++++++---------------------------
 1 file changed, 178 insertions(+), 202 deletions(-)
diff --git a/html/map.ejs b/html/map.ejs
index 4fd278d1..9fe6e6aa 100644
--- a/html/map.ejs
+++ b/html/map.ejs
@@ -1,221 +1,197 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
+  <meta charset="utf-8" />
   <title>PokeMaps Beta</title>
-  <link href="/css/yt-ukraine.svg" rel="icon" />
+  <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
+  <meta name="color-scheme" content="dark light" />
+  <link rel="icon" href="/css/yt-ukraine.svg" />
   <style>
-    div {
-      display: none;
+    :root{--vh:100vh;--pad:12px;--radius:14px;--fg:#fff;--bg:rgba(0,0,0,.6);--glass:blur(12px)}
+    *{box-sizing:border-box}
+    html,body{height:100%;margin:0}
+    body{background:#000;font:14px/1.4 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial;color:var(--fg)}
+    .app{position:fixed;inset:0;display:grid;grid-template-rows:auto 1fr}
+    .bar{position:relative;z-index:5;display:flex;gap:8px;align-items:center;padding:8px var(--pad);backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);background:var(--bg)}
+    .search{position:relative;flex:1;min-width:0}
+    .search input{width:100%;padding:10px 12px;border-radius:10px;border:1px solid #333;background:#111;color:#fff;outline:none}
+    .suggest{position:absolute;top: calc(100% + 6px);left:0;right:0;max-height:42vh;overflow:auto;margin:0;padding:6px 0;list-style:none;border:1px solid #333;border-radius:10px;background:#0b0b0b;display:none}
+    .suggest li{padding:10px 12px;cursor:pointer;border-top:1px solid #111}
+    .suggest li:first-child{border-top:none}
+    .suggest li:active{background:#1a1a1a}
+    .btns{display:flex;gap:8px;white-space:nowrap}
+    .btn{border:0;border-radius:10px;background:#222;color:#fff;padding:10px 12px}
+    .mapwrap{position:relative;height:calc(var(--vh) - 56px);overflow:hidden}
+    iframe#map{position:absolute;inset:0;border:0;width:100%;height:100%}
+    .marker{position:absolute;left:50%;top:50%;width:20px;height:20px;border-radius:50%;transform:translate(-50%,-50%);background:#e53935;box-shadow:0 0 0 3px rgba(229,57,53,.35);z-index:3;pointer-events:none}
+    .brand{position:absolute;bottom:10px;left:10px;padding:6px 10px;font-size:18px;font-weight:600;background:var(--bg);backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);border-radius:10px;z-index:4;pointer-events:none}
+    .fab{position:fixed;right:16px;bottom:16px;z-index:6;width:56px;height:56px;border-radius:50%;border:0;background:#111;color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.45);font-size:28px;line-height:0}
+    @media (min-width: 768px){
+      .bar{padding:10px 14px}
+      .brand{font-size:20px}
+    }
+    @media (prefers-reduced-motion: reduce){
+      *{animation:none !important;transition:none !important}
     }
   </style>
 </head>
 <body>
-  <p>
-    loading..... please wait lol
-  </p>
-  <iframe id="myFrame" style="width: 100%; height: 100%; top: 0px; bottom: 0px; left: 0px; right: 0px; position: fixed; border: none; margin: 0; padding: 0; overflow: auto;"></iframe>
- 
- 
-    <script type="text/javascript">
-<!--//--><![CDATA[//><!-- 
-/**
- * @licstart The following is the entire license notice for the JavaScript
- * code in this page.
- *
- *  Copyright (C) 2021-2025 POKETUBE (https://github.com/iamashley0/poketube)
- *
- * The JavaScript code in this page is free software: you can redistribute
- * it and/or modify it under the terms of the GNU General Public License
- * (GNU GPL) as published by the Free Software Foundation, either version 3
- * of the License, or (at your option) any later version.  The code is
- * distributed WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU GPL
- * for more details.
- *
- * As additional permission under GNU GPL version 3 section 7, you may
- * distribute non-source (e.g., minimized or compacted) forms of that code
- * without the copy of the GNU GPL normally required by section 4, provided
- * you include this license notice and a URL through which recipients can
- * access the Corresponding Source.
- *
- * @licend The above is the entire license notice for the JavaScript code
- * in this page.
- */
-
-//--><!]]>
-</script>
-<script>(function(){
-  const _0x5a3c=[
-    "P2Jib3g9LTE2NS43NjE3MTg3NTAwMDAwMyUyQy0zLjg2NDI1NDYxNTcyMTM5NiUyQzMwLjQxMDE1NjI1MDAwMDAwNCUyQzcyLjQ0ODc5MTU1NzMwNjcyJmxheWVyPW1hcG5paw==",
-    "aHR0cHM6Ly93d3cub3BlbnN0cmVldG1hcC5vcmcvZXhwb3J0L2VtYmVkLmh0bWw=",
-    "d3d3Lm9wZW5zdHJlZXRtYXAub3Jn"
-  ];
-
-  function _0x99f2(i){ return atob(_0x5a3c[i]); }
-
-  function updateMap(lat, lon) {
-    const delta = 0.25;
-    const bbox = `?bbox=${lon-delta},${lat-delta},${lon+delta},${lat+delta}&layer=mapnik`;
-    const newURL = _0x99f2(1) + bbox;
-    const iframe = document.querySelector('iframe');
-    if (iframe) {
-      iframe.src = newURL;
-      window.history.pushState({}, '', newURL);
-    }
-    const marker = document.getElementById('map-marker');
-    if (marker) marker.remove();
-    const newMarker = document.createElement('div');
-    newMarker.id = 'map-marker';
-    newMarker.style = 'position:absolute;width:20px;height:20px;background:red;border-radius:50%;transform:translate(-50%,-50%);z-index:9998;pointer-events:none;left:50%;top:50%';
-    document.body.appendChild(newMarker);
-  }
-
-  function copyCoordinates() {
-    const marker = document.getElementById('map-marker');
-    if (!marker) return alert('No coordinates to copy.');
-    navigator.clipboard.writeText(window.location.href).then(() => {
-      alert('Current map link copied to clipboard!');
-    });
-  }
-
-  function locateAndUpdate() {
-    if (!navigator.geolocation) {
-      alert('Geolocation is not supported by your browser.');
-      return;
-    }
-    navigator.geolocation.getCurrentPosition(
-      pos => {
-        updateMap(pos.coords.latitude, pos.coords.longitude);
-      },
-      err => {
-        alert('Unable to retrieve location: ' + err.message);
-      },
-      { enableHighAccuracy: true, timeout: 10000, maximumAge: 0 }
-    );
-  }
-
-  function _0x4f2a(){
-    const bbox = _0x99f2(0);
-    const base = _0x99f2(1);
-    const url = base + bbox;
-    const iframe = document.querySelector('iframe');
-    if (!iframe) return setTimeout(_0x4f2a, 100);
-    iframe.src = url;
-
-    iframe.addEventListener('load',()=>{
-      try {
-        const doc = iframe.contentDocument || iframe.contentWindow.document;
-        Array.from(doc.querySelectorAll('a')).forEach(a=>a.addEventListener('click',_linkHandler));
-        Array.from(doc.querySelectorAll('*')).forEach(el=>{
-          const bg = el.style.backgroundImage;
-          if(bg.includes('//dka575ofm4ao0.cloudfront.net')){
-            el.style.backgroundImage = bg.replace(/\/\/dka575ofm4ao0\.cloudfront\.net/g,
-              m=>`https://p.poketube.fun/https://dka575ofm4ao0.cloudfront.net`);
-          }
-        });
-      } catch(e) {
-        console.warn('Cross-origin access denied, skipping DOM manipulation.');
-      }
-    });
-
-    window.history = new Proxy(window.history,{
-      get(target, prop){
-        if(prop === 'pushState') return (...args)=>{
-          const iframe = document.querySelector('iframe');
-          if(iframe && args[2]) iframe.src = args[2];
-          return target.pushState.apply(target, args);
-        };
-        return Reflect.get(target, prop);
-      }
-    });
-
-    window.addEventListener('popstate',()=>{
-      const iframe = document.querySelector('iframe');
-      if (iframe) iframe.src = location.href;
-    });
-  }
-
-  function _linkHandler(e){
-    const h = e.target.href;
-    const iframe = document.querySelector('iframe');
-    if(!iframe) return;
-    if(h.includes(_0x99f2(2))){
-      e.preventDefault();
-      iframe.src = h;
-      window.history.pushState({}, '', h);
-    } else {
-      window.location.href = h;
-    }
-  }
-
-  const form = document.createElement('form');
-  form.style = 'position:absolute;top:10px;right:10px;z-index:9999;background:rgba(0,0,0,0.5);backdrop-filter:blur(12px);padding:10px 12px;border-radius:12px;box-shadow:0 4px 10px rgba(0,0,0,0.4);font-family:sans-serif;min-width:220px;';
-  form.innerHTML = `
-    <input id="searchBox" type="text" placeholder="Search..." style="padding:6px 10px;width:180px;font-size:14px;border:1px solid #444;border-radius:6px;background:#222;color:#fff">
-    <ul id="suggestions" style="list-style:none;margin:6px 0 0;padding:0;max-height:180px;overflow:auto;background:#111;border:1px solid #333;border-radius:6px;display:none;position:relative;z-index:10000;color:#fff;"></ul>
-    <div style="margin-top:10px;display:flex;gap:6px;flex-wrap:wrap">
-      <button id="locate-btn" type="button" style="flex:1;padding:4px 6px;font-size:12px;background:#333;color:#fff;border:none;border-radius:6px">📍 Locate</button>
-      <button type="button" style="flex:1;padding:4px 6px;font-size:12px;background:#333;color:#fff;border:none;border-radius:6px" onclick="copyCoordinates()">📋 Copy</button>
-      <button type="button" style="flex:1;padding:4px 6px;font-size:12px;background:#333;color:#fff;border:none;border-radius:6px" onclick="location.reload()">🔁 Reset</button>
+  <div class="app" id="app">
+    <div class="bar">
+      <div class="search">
+        <form id="form" autocomplete="off">
+          <input id="q" type="text" inputmode="search" placeholder="Search places…" aria-autocomplete="list" aria-expanded="false" aria-controls="suggestions" />
+        </form>
+        <ul id="suggestions" class="suggest" role="listbox"></ul>
+      </div>
+      <div class="btns">
+        <button class="btn" id="locate" type="button">📍 Locate</button>
+        <button class="btn" id="copy" type="button">📋 Copy</button>
+        <button class="btn" id="reset" type="button">🔁 Reset</button>
+      </div>
     </div>
-  `;
 
-  document.body.appendChild(form);
-  document.getElementById('locate-btn').addEventListener('click', locateAndUpdate);
+    <div class="mapwrap" id="mapwrap">
+      <iframe id="map" title="Map"></iframe>
+      <div class="marker" aria-hidden="true"></div>
+      <div class="brand">PokeMaps</div>
+    </div>
+  </div>
 
-  const input = form.querySelector('#searchBox');
-  const suggestions = form.querySelector('#suggestions');
+  <button class="fab" id="fab" title="More Tools">+</button>
 
-  input.addEventListener('input', () => {
-    const query = input.value.trim();
-    if (!query) return suggestions.style.display = 'none';
-    fetch(`https://nominatim.openstreetmap.org/search?q=${encodeURIComponent(query)}&format=json&limit=5`)
-      .then(res => res.json())
-      .then(data => {
-        suggestions.innerHTML = '';
-        data.forEach(place => {
-          const li = document.createElement('li');
-          li.textContent = place.display_name;
-          li.style = 'padding:6px 10px;cursor:pointer;border-bottom:1px solid #222;font-size:13px;background:#111';
-          li.addEventListener('click', () => {
-            input.value = place.display_name;
-            suggestions.style.display = 'none';
-            updateMap(parseFloat(place.lat), parseFloat(place.lon));
-          });
-          suggestions.appendChild(li);
-        });
-        suggestions.style.display = 'block';
-      });
-  });
+  <script>
+    ;(()=> {
+      const OSM_EMBED="https://www.openstreetmap.org/export/embed.html"
+      const OSM_HOST="www.openstreetmap.org"
+      const NOMINATIM="https://nominatim.openstreetmap.org/search"
+      const LAYER="mapnik"
+      const DEFAULT={lat:30.41015625,lon:72.44879155730672,delta:.25}
+      const S=sel=>document.querySelector(sel)
+      const map=S("#map"), wrap=S("#mapwrap"), q=S("#q"), sug=S("#suggestions")
+      const locateBtn=S("#locate"), copyBtn=S("#copy"), resetBtn=S("#reset"), fab=S("#fab")
+      let aborter=null, lastQuery="", state={lat:DEFAULT.lat,lon:DEFAULT.lon,delta:DEFAULT.delta}
 
-  form.addEventListener('submit', e => {
-    e.preventDefault();
-    const q = input.value.trim();
-    if(!q) return;
-    fetch(`https://nominatim.openstreetmap.org/search?q=${encodeURIComponent(q)}&format=json&limit=1`)
-      .then(res => res.json())
-      .then(data => {
-        if(data[0]){
-          updateMap(parseFloat(data[0].lat), parseFloat(data[0].lon));
+      const setVH=()=>{const vh=window.innerHeight*0.01;document.documentElement.style.setProperty("--vh",`${vh*100}px`)}
+      setVH(); addEventListener("resize",()=>{setVH()},{passive:true})
+
+      const clamp=(n,min,max)=>Math.min(Math.max(n,min),max)
+      const cleanStr=s=>s.replace(/\s+/g," ").trim()
+      const bboxFrom=(lat,lon,d)=>({
+        left:(lon-d).toFixed(6),
+        bottom:(lat-d).toFixed(6),
+        right:(lon+d).toFixed(6),
+        top:(lat+d).toFixed(6)
+      })
+      const embedURL=({lat,lon,delta})=>{
+        const b=bboxFrom(lat,lon,delta)
+        return `${OSM_EMBED}?bbox=${b.left}%2C${b.bottom}%2C${b.right}%2C${b.top}&layer=${encodeURIComponent(LAYER)}`
+      }
+      const appURL=({lat,lon,delta})=>{
+        const p=new URLSearchParams({lat:lat.toFixed(6),lon:lon.toFixed(6),delta:delta.toFixed(4)})
+        return `${location.origin}${location.pathname}?${p.toString()}`
+      }
+      const parseURL=()=>{
+        const sp=new URLSearchParams(location.search)
+        const lat=parseFloat(sp.get("lat")), lon=parseFloat(sp.get("lon")), delta=parseFloat(sp.get("delta"))
+        if(Number.isFinite(lat)&&Number.isFinite(lon)) state.lat=clamp(lat,-90,90), state.lon=clamp(lon,-180,180)
+        if(Number.isFinite(delta)&&delta>0&&delta<45) state.delta=delta
+      }
+
+      const apply=push=>{
+        map.src=embedURL(state)
+        if(push) history.pushState(state,"",appURL(state))
+      }
+
+      const centerOn=(lat,lon,{push=true}={})=>{
+        state.lat=clamp(lat,-90,90)
+        state.lon=clamp(lon,-180,180)
+        apply(push)
+      }
+
+      const reset=()=>{
+        state={...DEFAULT}
+        q.value=""
+        sug.style.display="none"; q.setAttribute("aria-expanded","false")
+        apply(true)
+      }
+
+      const copyLink=async()=>{
+        try{
+          await navigator.clipboard.writeText(appURL(state))
+          alert("Map link copied!")
+        }catch{ alert("Could not copy.")}
+      }
+
+      const locate=()=>{
+        if(!("geolocation" in navigator)){ alert("Geolocation not supported."); return }
+        navigator.geolocation.getCurrentPosition(
+          pos=>centerOn(pos.coords.latitude,pos.coords.longitude,{push:true}),
+          err=>alert("Unable to retrieve location: "+err.message),
+          {enableHighAccuracy:true,timeout:10000,maximumAge:0}
+        )
+      }
+
+      const debounced=(fn,ms=250)=>{let t;return(...a)=>{clearTimeout(t);t=setTimeout(()=>fn(...a),ms)}}
+      const searchPlaces=debounced(async term=>{
+        term=cleanStr(term); if(!term){sug.style.display="none"; q.setAttribute("aria-expanded","false"); return}
+        if(aborter) aborter.abort()
+        aborter=new AbortController()
+        try{
+          const url=`${NOMINATIM}?q=${encodeURIComponent(term)}&format=json&limit=7&addressdetails=0&accept-language=en`
+          const r=await fetch(url,{signal:aborter.signal,headers:{}}) 
+          if(!r.ok) throw new Error("HTTP "+r.status)
+          const data=await r.json()
+          sug.innerHTML=""
+          data.forEach((p,i)=>{
+            const li=document.createElement("li")
+            li.role="option"; li.id="opt"+i
+            li.textContent=p.display_name
+            li.onclick=()=>{ q.value=p.display_name; sug.style.display="none"; q.setAttribute("aria-expanded","false"); centerOn(parseFloat(p.lat),parseFloat(p.lon),{push:true}) }
+            sug.appendChild(li)
+          })
+          sug.style.display=data.length?"block":"none"; q.setAttribute("aria-expanded", String(!!data.length))
+        }catch(e){
+          if(e.name!=="AbortError"){ sug.style.display="none"; q.setAttribute("aria-expanded","false") }
         }
-      });
-  });
+      },200)
 
-  const fab = document.createElement('button');
-  fab.textContent = '+';
-  fab.style = 'position:fixed;bottom:20px;right:20px;width:48px;height:48px;font-size:24px;background:#111;color:#fff;border:none;border-radius:50%;box-shadow:0 2px 10px rgba(0,0,0,0.4);cursor:pointer;z-index:9999';
-  fab.title = 'More Tools';
-  fab.onclick = () => alert('More features coming soon!');
-  document.body.appendChild(fab);
+      q.addEventListener("input",e=>{
+        const v=e.target.value
+        if(v===lastQuery) return
+        lastQuery=v
+        searchPlaces(v)
+      },{passive:true})
 
-  const branding = document.createElement('div');
-  branding.textContent = 'PokeMaps';
-  branding.style = 'position: absolute; bottom: 10px; left: 10px; padding: 6px 10px; font-size: 31px; font-weight: 500; background: rgba(0, 0, 0, 0.6); color: white; border-radius: 6px; font-family: sans-serif; backdrop-filter: blur(6px); z-index: 9999; pointer-events: none;display: block;';
-  document.body.appendChild(branding);
+      S("#form").addEventListener("submit",async e=>{
+        e.preventDefault()
+        const term=cleanStr(q.value); if(!term) return
+        try{
+          const r=await fetch(`${NOMINATIM}?q=${encodeURIComponent(term)}&format=json&limit=1`)
+          const d=await r.json()
+          if(d[0]) centerOn(parseFloat(d[0].lat),parseFloat(d[0].lon),{push:true})
+        }catch{}
+      })
 
-  _0x4f2a();
-})();
+      locateBtn.onclick=locate
+      copyBtn.onclick=copyLink
+      resetBtn.onclick=reset
+      fab.onclick=()=>alert("More features coming soon!")
 
-</script><script src="/static/data-mobile.js"></script>
+      addEventListener("popstate",e=>{
+        if(e.state && typeof e.state.lat==="number"){ state=e.state; apply(false) }
+        else { parseURL(); apply(false) }
+      })
+
+      addEventListener("click",e=>{
+        const t=e.target
+        if(t.tagName==="A" && t.href.includes(OSM_HOST)){ e.preventDefault(); map.src=t.href; history.pushState(state,"",t.href) }
+      },{capture:true})
+
+      parseURL(); apply(false)
+    })();
+  </script>
+
+  <script src="/static/data-mobile.js" defer></script>
 </body>
-</html>
+</html>
\ No newline at end of file
