diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 82 |
1 files changed, 46 insertions, 36 deletions
@@ -2,9 +2,8 @@ <html lang="en"> <head> <meta charset="UTF-8" /> - <link rel="icon" type="image/svg+xml" href="/vite.svg" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> - <title>Vite App</title> + <title>London pub search</title> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link @@ -60,34 +59,19 @@ amber-600 - accent --> <body class="relative text-neutral-200 bg-neutral-800 font-['Montserrat']"> - <header class="top-0 w-full h-[64px] left-0 fixed py-4 text-center bg-neutral-800 rounded-b-lg shadow-2xl z-50"> + <header class="top-0 w-full h-[64px] left-0 py-4 text-center bg-neutral-800 rounded-b-lg shadow-2xl z-50"> <h1 class="text-lg font-semibold">London Pub Search <span class="text-2xl">🍻</span></h1> - <!-- - <div> - Shape can be <span class="select--rectangle">Rectangular</span> or a - <span class="select--polygon">Polygon</span> - </div> - --> - - <!-- - <div> - Try around your - <span class="select--ip relative" - >location<span - class="ip-loader hidden animate-ping h-2 w-2 bg-blue-500 rounded-full absolute top-0 -right-2" - ></span - ></span> - </div> - </div> - --></header> + <a href="/about.html" class="absolute top-2 right-2 cursor-pointer">ℹ️</a> + </header> - <main class="relative mt-[65px]"> + <main class="relative"> <div class="absolute top-0 z-50 h-10 w-full bg-gradient-to-br from-neutral-800 to-transparent"></div> <div id="map"></div> <!-- Bottom bar (it's double wrapped to allow for overflor-y to not effect the controls) --> - <div class="fixed bottom-0 w-full"> + <div class="fixed bottom-0 w-full h-72"> + <!-- Controls --> <ul class="absolute right-2 bottom-full flex flex-col gap-2 pb-2" id="#controls"> <li class="p-2 bg-amber-600 rounded-2xl select--rectangle"> <img src="/images/rectangle.svg" alt="" /> @@ -95,18 +79,10 @@ <li class="p-2 bg-amber-600 rounded-2xl select--polygon"> <img src="/images/polygon.svg" alt="" /> </li> - <li class="relative p-2 bg-amber-600 rounded-2xl select--ip"> - <div - class="ip-loader hidden absolute top-0 left-0 animate-ping h-4 w-4 rounded-full bg-sky-400 opacity-75" - ></div> - <img src="/images/pin.svg" alt="" /> - </li> </ul> - <div class="w-full bg-neutral-800 rounded-t-2xl h-64 px-5 py-3 flex flex-col overflow-y-auto"> - <!-- Controls --> + <div class="w-full h-full bg-neutral-800 rounded-t-2xl px-5 py-3 flex flex-col overflow-y-auto"> <div class="h-1 w-20 bg-neutral-200 rounded-full mb-5 mr-auto ml-auto"></div> - <!-- Search bar--> <div class="flex items-center mb-5 bg-[#373737] rounded-lg pl-4 has-[input:focus-visible]:outline has-[input:focus-visible]:outline-2 has-[input:focus-visible]:outline-offset-2 has-[input:focus-visible]:outline-amber-100" > @@ -141,9 +117,43 @@ </main> <div id="searchbox"></div> - <!-- prettier-ignore --> - <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))}) - ({key: "AIzaSyCtS6CiOrG95FhroSUdDJJokItndcMkrgc", v: "weekly"});</script> - <script type="module" src="/src/refactor.js"></script> + <script> + ((g) => { + var h, + a, + k, + p = 'The Google Maps JavaScript API', + c = 'google', + l = 'importLibrary', + q = '__ib__', + m = document, + b = window; + b = b[c] || (b[c] = {}); + var d = b.maps || (b.maps = {}), + r = new Set(), + e = new URLSearchParams(), + u = () => + h || + (h = new Promise(async (f, n) => { + await (a = m.createElement('script')); + e.set('libraries', [...r] + ''); + for (k in g) + e.set( + k.replace(/[A-Z]/g, (t) => '_' + t[0].toLowerCase()), + g[k] + ); + e.set('callback', c + '.maps.' + q); + a.src = `https://maps.${c}apis.com/maps/api/js?` + e; + d[q] = f; + a.onerror = () => (h = n(Error(p + ' could not load.'))); + a.nonce = m.querySelector('script[nonce]')?.nonce || ''; + m.head.append(a); + })); + d[l] + ? console.warn(p + ' only loads once. Ignoring:', g) + : (d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n))); + })({ key: 'AIzaSyCtS6CiOrG95FhroSUdDJJokItndcMkrgc', v: 'weekly' }); + </script> + <script type="module" src="/src/main.js"></script> </body> </html> |