1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
|
<!DOCTYPE html>
<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>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="/src/index.css" />
<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>
</head>
<!--
neutral-800 - dark bg
neutral-200 - text
zinc-800 - less dark bg
amber-600 - accent
-->
<body class="relative text-neutral-200 bg-neutral-800 font-['Montserrat']">
<header class="py-4 text-center bg-neutral-800 rounded-b-lg shadow-2xl">
<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>
<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">
<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="" />
</li>
<li class="p-2 bg-amber-600 rounded-2xl select--polygon">
<img src="/images/polygon.svg" alt="" />
</li>
<li class="p-2 bg-amber-600 rounded-2xl select--ip">
<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="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"
>
<label for="searchbar"
><svg fill="#E5E5E5" height="15px" width="15px" viewBox="0 0 488.4 488.4">
<g>
<g>
<path
d="M0,203.25c0,112.1,91.2,203.2,203.2,203.2c51.6,0,98.8-19.4,134.7-51.2l129.5,129.5c2.4,2.4,5.5,3.6,8.7,3.6
s6.3-1.2,8.7-3.6c4.8-4.8,4.8-12.5,0-17.3l-129.6-129.5c31.8-35.9,51.2-83,51.2-134.7c0-112.1-91.2-203.2-203.2-203.2
S0,91.15,0,203.25z M381.9,203.25c0,98.5-80.2,178.7-178.7,178.7s-178.7-80.2-178.7-178.7s80.2-178.7,178.7-178.7
S381.9,104.65,381.9,203.25z"
/>
</g>
</g></svg
></label>
<input
type="text"
placeholder="Search for pub"
class="h-full w-full p-4 bg-transparent focus-visible:outline-none"
id="searchbar"
/>
</div>
<h2 class="font-semibold text-lg mb-3">Pubs</h2>
<div id="hits"></div>
</div>
</div>
</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>
</body>
</html>
|
