forked from pballett/whatfreewords
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
133 lines (124 loc) · 4.18 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
<!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>
</head>
<body>
<script src="lib/openLayers/ol.js"></script>
<script src="geocode.js"></script>
<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 items-center absolute top-16 bottom-0 left-0 right-0 h-12 lg:h-14 w-96 p-3 flex-nowrap bg-white flex-row justify-between z-10"
style="max-width: 95vw; overflow-x: clip; white-space: nowrap; display: flex;"
>
<span class="text-lg sm:text-xl lg:text-xl">
<span class="text-red-500 font-medium">/|/ </span>
<span id="words">woodworking.android.creaky</span>
</span>
<div class="controls flex-row flex gap-1">
<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;"
>
<div class="searchbox p-3 flex flex-row justify-between border-b">
<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
onclick="Search()"
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
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>
</div>
<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>