forked from pballett/whatfreewords
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
137 lines (128 loc) · 4.08 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>What Free Words</title>
<link
href="lib/tailwind.css"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="lib/openLayers/ol.css"
type="text/css"
/>
<link
rel="stylesheet"
href="style.css"
type="text/css"
/>
<script src="https://kit.fontawesome.com/bc15aa5425.js" crossorigin="anonymous"></script>
<script src="lib/openLayers/ol.js"></script>
<script src="geocode.js"></script>
</head>
<body>
<div
class="
header
flex
justify-between
w-full
content-center
items-center
font-medium
py-3
bg-cyan-900
text-white">
<div class="logo text-xl ml-3.5">What Free Words</div>
<nav class="links font-normal">
<a href="https://github.com/pballett/whatfreewords" clas="px-5">GitHub</a>
<a href="#" class="px-5">About</a>
</nav>
</div>
<div
id="infoBox"
class="shadow-md absolute top-16 left-0 z-10 bg-white flex items-center p-3"
style="width: auto; max-width: 95vw; white-space: nowrap; overflow: hidden;"
>
<span class="text-lg sm:text-xl lg:text-xl truncate">
<span class="text-red-500 font-medium font-mono tracking-tighter">/|/ </span>
<span id="words" class="truncate">woodworking.android.creaky</span>
</span>
<div class="controls flex gap-1 ml-4">
<button
onclick="shareWords()"
class="bg-yellow-300 hover:bg-yellow-200 font-medium hover:shadow duration-100 w-8 h-8 active:shadow-md"
>
<i class="fa-solid fa-copy"></i>
</button>
<button
onclick="TogglePopup()"
class="bg-yellow-300 hover:bg-yellow-200 font-medium hover:shadow duration-100 w-8 h-8 active:shadow-md"
>
<i class="fa-solid fa-magnifying-glass"></i>
</button>
</div>
</div>
<div
id="searchBox"
class="shadow-md absolute top-16 bottom-0 left-0 right-0 h-52 w-96 flex-nowrap overflow-clip flex-col bg-white z-10"
style="max-width: 95vw; overflow-x: clip; white-space: nowrap; display: none;"
>
<form
class="searchbox p-3 flex flex-row justify-between border-b"
onsubmit="Search(); return false;"
>
<input
id="searchInput"
type="text"
placeholder="Search"
class="text-lg hover:border-gray-400 focus:border-gray-500 outline-none w-3/4 px-2"
/>
<div class="controls flex-row flex gap-1">
<button
type="submit"
class="bg-yellow-300 hover:bg-yellow-200 font-medium hover:shadow duration-100 active:shadow-md w-8 h-8"
>
<i class="fa-solid fa-arrow-left"></i>
</button>
<button
type="button"
onclick="TogglePopup()"
class="bg-yellow-300 hover:bg-yellow-200 font-medium hover:shadow duration-100 active:shadow-md w-8 h-8"
>
<i class="fa-solid fa-xmark"></i>
</button>
</div>
</form>
<div class="searchResults bg-gray-100 flex-grow flex flex-col h-0">
<div id="searchResults" class="overflow-y-auto overflow-x-hidden">
<div
class="border-b-2 border-gray-300 py-2.5 px-4 duration-100 hover:bg-gray-200 active:bg-gray-300"
>
placeholder
</div>
</div>
<div
id="searchPlaceholder"
class="not-hidden flex-grow flex-col justify-center flex text-center"
>
Search for any place or word address e.g.
<div class="examples pt-3 flex flex-col gap-2">
<div>Pechers'kyi District, Kyyiv</div>
<div>/|/scramble.gaps.cobbled</div>
</div>
</div>
</div>
</div>
<div id="map" class="flex-grow overflow-hidden"></div>
<div id="marker">
<img
src="https://cdn.mapmarker.io/api/v1/pin?size=35&background=%23D33115&color=%23FFFFFF&voffset=0&hoffset=0"
/>
</div>
<script src="script.js"></script>
</body>
</html>