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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>London pub search</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="icon"
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🍺</text></svg>"
/>
<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="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>
<a href="/about.html" class="absolute top-2 right-2 cursor-pointer">ℹ️</a>
</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 h-72" id="bottom">
<!-- 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="" />
</li>
<li class="p-2 bg-amber-600 rounded-2xl select--polygon">
<img src="/images/polygon.svg" alt="" />
</li>
</ul>
<div class="w-full h-full bg-neutral-800 rounded-t-2xl px-5 py-3 flex flex-col overflow-y-auto pt-2">
<!-- <div class="h-1 w-20 bg-neutral-200 rounded-full mb-5 mr-auto ml-auto"></div> -->
<div class="text-center text-2xl mb-5 cursor-pointer" id="toggle">―</div>
<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>
<div class="flex justify-between items-center mb-3">
<h2 class="font-semibold text-lg">Pubs</h2>
<i class="text-sm pub-count"></i>
</div>
<div id="hits"></div>
</div>
</div>
</main>
<div id="searchbox"></div>
<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>
|
