-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
246 lines (236 loc) · 36 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
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
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
<!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>NameGen</title>
<!-- Primary Meta Tags -->
<title>NameGen — Name Generated Mini App</title>
<meta name="title" content="NameGen — Name Generated Mini App">
<meta name="description" content="A little algorithmic buddy to help us come up with a name">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://word-generator.vercel.app/">
<meta property="og:title" content="NameGen — Name Generated Mini App">
<meta property="og:description" content="A little algorithmic buddy to help us come up with a name">
<meta property="og:image" content="https://i.hizliresim.com/m211bba.png">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://word-generator.vercel.app/">
<meta property="twitter:title" content="NameGen — Name Generated Mini App">
<meta property="twitter:description" content="A little algorithmic buddy to help us come up with a name">
<meta property="twitter:image" content="https://i.hizliresim.com/m211bba.png">
<!--favicon-->
<meta name="msapplication-TileImage" content="./img/favicon.png"> <!-- Windows 8 -->
<meta name="msapplication-TileColor" content="#99CEFE" /> <!-- Windows 8 color -->
<!--[if IE]><link rel="shortcut icon" href="images/favicons/favicon.ico"><![endif]-->
<link rel="icon" type="image/png" href="./img/favicon.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="./img/favicon.png"><!-- iPad Retina-->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="./img/favicon.png">
<!--iPhone Retina -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="./img/favicon.png"><!-- iPad 1 e 2 -->
<link rel="apple-touch-icon-precomposed" href="./img/favicon.png"><!-- iPhone, iPod e Android 2.2+ -->
<!--link-->
<link rel="stylesheet" href="./css/tailwind.css">
<link rel="stylesheet" href="./css/style.css">
<script defer src="./js/index.js"></script>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
</head>
<body x-data="data()">
<div class="h-full w-full overflow-hidden fixed">
<div class="w-56 h-56 absolute top-24 left-48 bg-blue-400 rounded-full"></div>
<div class="w-36 h-36 absolute bottom-52 left-64 bg-blue-700 rounded-full hidden sm:block"></div>
<div class="w-24 h-24 absolute top-20 right-36 bg-blue-500 rounded-full"></div>
<div class="w-64 h-64 absolute bottom-10 right-24 bg-blue-600 rounded-full hidden sm:block"></div>
<div class="w-48 h-48 absolute bottom-1/2 right-1/2 bg-blue-300 rounded-full"></div>
</div>
<div id="back" class="backdrop w-full h-full z-10">
<div aria-live="assertive" x-show="copyalert" class="z-20 fixed inset-0 flex items-end px-4 py-6 pointer-events-none sm:p-6 sm:items-start" style="display: none;">
<div class="w-full flex flex-col items-center space-y-4 sm:items-end">
<div x-show="copyalert" x-transition:enter="transform ease-out duration-300 transition" x-transition:enter-start="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2" x-transition:enter-end="translate-y-0 opacity-100 sm:translate-x-0" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="relative max-w-sm w-full bg-white shadow-lg rounded-t-lg sm:rounded-t-none sm:rounded-b-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden">
<div id="progress" class="progress absolute w-full bottom-0 sm:top-0 bg-green-400"></div>
<div class="p-4">
<div class="flex items-start">
<div class="flex-shrink-0">
<!-- Heroicon name: outline/check-circle -->
<svg class="h-6 w-6 text-green-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div class="ml-3 w-0 flex-1 pt-0.5">
<p class="text-sm font-medium text-gray-900">
Successfully Copy!
</p>
<p class="mt-1 text-sm text-gray-500">
Selected <span class="font-medium text-gray-800 capitalize" id="name">NameOne</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="w-full h-full flex flex-col justify-between overflow-y-auto">
<div class="h-24 sm:h-48 w-full flex justify-center items-center flex-shrink-0">
<a href="https://github.com/unitythemaker/name-generator/" target="_blank">
<svg class="h-8" viewBox="0 0 132 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M11.7901 0C5.27608 0 0 5.29749 0 11.838C0 17.0763 3.37494 21.5007 8.0615 23.0692C8.65101 23.1728 8.8721 22.8177 8.8721 22.5069C8.8721 22.2258 8.85735 21.2935 8.85735 20.3021C5.89507 20.8496 5.12871 19.577 4.89291 18.9112C4.76026 18.5708 4.1855 17.5202 3.68443 17.239C3.27175 17.0171 2.68225 16.4696 3.66969 16.4548C4.59816 16.44 5.26136 17.313 5.48242 17.6682C6.54353 19.4586 8.23836 18.9555 8.9163 18.6448C9.01946 17.8753 9.32896 17.3574 9.66792 17.0615C7.0446 16.7655 4.3034 15.7445 4.3034 11.2165C4.3034 9.9291 4.76026 8.86368 5.51188 8.03502C5.39398 7.73907 4.98132 6.52568 5.62978 4.89794C5.62978 4.89794 6.61722 4.58721 8.8721 6.11135C9.81531 5.84498 10.8174 5.71183 11.8196 5.71183C12.8218 5.71183 13.824 5.84498 14.7672 6.11135C17.022 4.57241 18.0094 4.89794 18.0094 4.89794C18.6579 6.52568 18.2452 7.73907 18.1273 8.03502C18.879 8.86368 19.3358 9.91429 19.3358 11.2165C19.3358 15.7593 16.5799 16.7655 13.9566 17.0615C14.384 17.4314 14.7524 18.1417 14.7524 19.2515C14.7524 20.8348 14.7377 22.1074 14.7377 22.5069C14.7377 22.8177 14.9587 23.1876 15.5482 23.0692C17.8888 22.2758 19.9226 20.7654 21.3634 18.7507C22.8042 16.736 23.5796 14.3183 23.5803 11.838C23.5803 5.29749 18.3042 0 11.7901 0Z"
fill="black" />
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="11" y="2">
<path
d="M15.6716 2.51709H131.981V24L11.3496 23.1277C17.588 22.3053 26.166 11.2523 15.6716 2.51709Z"
fill="#C4C4C4" />
</mask>
<g mask="url(#mask0)">
<path
d="M32.2306 18.4723C30.9069 18.4723 29.7219 18.1732 28.6762 17.5751C27.6436 16.977 26.8362 16.1329 26.2536 15.043C25.671 13.9398 25.3799 12.6638 25.3799 11.215C25.3799 9.76617 25.671 8.49678 26.2536 7.40686C26.8362 6.30364 27.6436 5.45297 28.6762 4.85484C29.7219 4.25671 30.9069 3.95764 32.2306 3.95764C33.5543 3.95764 34.7326 4.25671 35.7651 4.85484C36.8109 5.45297 37.625 6.30364 38.2076 7.40686C38.7901 8.49678 39.0813 9.76617 39.0813 11.215C39.0813 12.6638 38.7901 13.9398 38.2076 15.043C37.625 16.1329 36.8109 16.977 35.7651 17.5751C34.7326 18.1732 33.5543 18.4723 32.2306 18.4723ZM32.2306 16.638C33.2631 16.638 34.1436 16.4054 34.8716 15.9402C35.5996 15.4617 36.1424 14.817 36.4999 14.0062C36.8704 13.1821 37.0559 12.2517 37.0559 11.215C37.0559 10.1782 36.8704 9.25441 36.4999 8.44362C36.1424 7.61952 35.5996 6.97489 34.8716 6.50967C34.1436 6.03116 33.2631 5.79191 32.2306 5.79191C31.198 5.79191 30.3176 6.03116 29.5896 6.50967C28.8616 6.97489 28.312 7.61952 27.9414 8.44362C27.584 9.25441 27.4053 10.1782 27.4053 11.215C27.4053 12.2517 27.584 13.1821 27.9414 14.0062C28.312 14.817 28.8616 15.4617 29.5896 15.9402C30.3176 16.4054 31.198 16.638 32.2306 16.638ZM45.1913 8.22431C46.0516 8.22431 46.7997 8.45028 47.4352 8.90219C48.0837 9.34082 48.5802 9.9456 48.9244 10.7165C49.2685 11.4874 49.4407 12.3514 49.4407 13.3084C49.4407 14.2787 49.2752 15.1493 48.9443 15.9203C48.6266 16.6779 48.15 17.2827 47.5146 17.7346C46.8792 18.1732 46.1047 18.3925 45.1913 18.3925C44.5162 18.3925 43.9006 18.2729 43.3446 18.0337C42.7886 17.7944 42.3517 17.4488 42.034 16.9969V23.0181H40.2469V8.42369H41.6369L41.8355 9.77945C42.656 8.74269 43.7747 8.22431 45.1913 8.22431ZM44.8537 16.7975C45.714 16.7975 46.3892 16.4918 46.8792 15.8804C47.3689 15.2557 47.6139 14.3983 47.6139 13.3084C47.6139 12.2185 47.3689 11.3678 46.8792 10.7564C46.3892 10.1317 45.714 9.81932 44.8537 9.81932C44.0063 9.81932 43.3049 10.1184 42.7489 10.7165C42.206 11.3147 41.9347 12.1786 41.9347 13.3084C41.9347 14.4781 42.206 15.3553 42.7489 15.9402C43.2915 16.5117 43.9932 16.7975 44.8537 16.7975ZM55.2715 18.3925C54.1595 18.3925 53.2064 18.1666 52.4121 17.7147C51.631 17.2494 51.0352 16.6247 50.6249 15.8405C50.2147 15.0563 50.0094 14.1857 50.0094 13.2287C50.0094 12.3115 50.1948 11.4742 50.5654 10.7165C50.9494 9.9456 51.4987 9.34082 52.2135 8.90219C52.9415 8.45028 53.7954 8.22431 54.7751 8.22431C56.0194 8.22431 57.0256 8.58984 57.7934 9.32088C58.5745 10.0519 58.9649 11.0621 58.9649 12.3514C58.9649 12.6837 58.9384 13.0027 58.8855 13.3084H51.8362C51.9554 14.5712 52.3394 15.4683 52.9879 16C53.6365 16.5317 54.4705 16.7975 55.4899 16.7975C56.5094 16.7975 57.4426 16.6048 58.2898 16.2193L58.5281 17.6349C57.4029 18.14 56.3172 18.3925 55.2715 18.3925ZM57.1182 12.0723C57.1182 11.3678 56.9196 10.8162 56.5225 10.4175C56.1254 10.0187 55.5296 9.81932 54.7354 9.81932C53.9676 9.81932 53.3652 10.012 52.9284 10.3975C52.4915 10.7697 52.1805 11.3279 51.9951 12.0723H57.1182ZM64.8766 8.22431C67.5243 8.22431 68.8481 9.75286 68.8481 12.81V18.1932H67.0609V12.81C67.0609 11.7599 66.8623 11.0023 66.4652 10.5371C66.0815 10.0586 65.4326 9.81932 64.5192 9.81932C63.9369 9.81932 63.4072 9.92567 62.9306 10.1383C62.4541 10.351 62.0966 10.67 61.8584 11.0953V18.1932H60.0712V8.42369H61.4612L61.6598 9.46045C62.1761 8.99522 62.6924 8.67622 63.2086 8.50344C63.7383 8.31734 64.2943 8.22431 64.8766 8.22431ZM78.5822 18.4723C77.7614 18.4723 76.9274 18.3793 76.0803 18.1932C75.2329 18.0204 74.5513 17.8143 74.035 17.5751L74.2931 15.5614C74.9549 15.8804 75.703 16.1595 76.537 16.3988C77.371 16.638 78.1983 16.7576 79.0191 16.7576C79.9457 16.7576 80.6605 16.5915 81.1637 16.2592C81.6799 15.9136 81.9381 15.4019 81.9381 14.724C81.9381 14.2189 81.8056 13.8002 81.541 13.4679C81.2893 13.1223 80.912 12.8366 80.4091 12.6106C79.9191 12.3713 79.2308 12.1188 78.344 11.853C77.4437 11.5871 76.6958 11.3014 76.1001 10.9956C75.5044 10.6899 75.0211 10.2712 74.6505 9.73957C74.2931 9.20791 74.1144 8.53666 74.1144 7.72587C74.1144 6.59607 74.5446 5.68557 75.4051 4.9944C76.2788 4.30324 77.5033 3.95764 79.0787 3.95764C79.9258 3.95764 80.7268 4.05068 81.4814 4.23677C82.2491 4.42286 82.9175 4.64881 83.4869 4.91465L83.2884 6.92836C82.547 6.48973 81.8321 6.17073 81.1438 5.97135C80.4553 5.77197 79.7404 5.67228 78.9992 5.67228C78.1387 5.67228 77.4504 5.83178 76.9341 6.15079C76.431 6.46979 76.1795 6.96158 76.1795 7.62618C76.1795 8.07809 76.292 8.45028 76.5171 8.74269C76.7554 9.0351 77.093 9.28766 77.5298 9.50032C77.9667 9.6997 78.5755 9.91901 79.3567 10.1583C80.9187 10.6368 82.0835 11.2083 82.8515 11.8729C83.6192 12.5242 84.0032 13.428 84.0032 14.5844C84.0032 15.8073 83.5465 16.7643 82.6331 17.4555C81.7197 18.1333 80.3694 18.4723 78.5822 18.4723ZM89.384 18.3925C88.3912 18.3925 87.5308 18.1732 86.8026 17.7346C86.0746 17.2827 85.5186 16.6712 85.1346 15.9003C84.7508 15.1294 84.5587 14.2654 84.5587 13.3084C84.5587 12.3514 84.7508 11.4874 85.1346 10.7165C85.5186 9.9456 86.0746 9.34082 86.8026 8.90219C87.5308 8.45028 88.3912 8.22431 89.384 8.22431C90.3637 8.22431 91.2176 8.45028 91.9456 8.90219C92.687 9.34082 93.2497 9.9456 93.6334 10.7165C94.0174 11.4874 94.2093 12.3514 94.2093 13.3084C94.2093 14.2654 94.0174 15.1294 93.6334 15.9003C93.2497 16.6712 92.687 17.2827 91.9456 17.7346C91.2176 18.1732 90.3637 18.3925 89.384 18.3925ZM89.384 16.7975C90.3371 16.7975 91.0719 16.4918 91.5881 15.8804C92.1178 15.269 92.3824 14.4116 92.3824 13.3084C92.3824 12.2052 92.1178 11.3479 91.5881 10.7365C91.0719 10.125 90.3371 9.81932 89.384 9.81932C88.4309 9.81932 87.6897 10.125 87.16 10.7365C86.6437 11.3479 86.3856 12.2052 86.3856 13.3084C86.3856 14.4116 86.6437 15.269 87.16 15.8804C87.6897 16.4918 88.4309 16.7975 89.384 16.7975ZM103.34 8.42369V18.1932H101.751L101.553 17.1165C101.235 17.5551 100.858 17.8808 100.421 18.0935C99.9971 18.2928 99.4741 18.3925 98.8521 18.3925C97.687 18.3925 96.7934 18.0403 96.1714 17.3358C95.5623 16.6181 95.258 15.5414 95.258 14.1059V8.42369H97.0451V13.6075C97.0451 14.6708 97.2238 15.4683 97.5813 16C97.9518 16.5317 98.5277 16.7975 99.3088 16.7975C99.772 16.7975 100.202 16.7045 100.6 16.5184C101.01 16.3323 101.328 16.0598 101.553 15.7009V8.42369H103.34ZM105.076 8.42369H106.545L106.763 10.0386C107.267 9.41392 107.743 8.95535 108.193 8.66294C108.657 8.37053 109.14 8.22431 109.643 8.22431C109.802 8.22431 109.954 8.24425 110.099 8.28412L109.921 10.258C109.749 10.2181 109.55 10.1981 109.325 10.1981C108.835 10.1981 108.372 10.3111 107.935 10.5371C107.498 10.7497 107.18 11.0023 106.982 11.2947V18.1932H105.076V8.42369ZM114.879 18.3925C113.82 18.3925 112.907 18.1732 112.139 17.7346C111.384 17.296 110.815 16.6978 110.431 15.9402C110.047 15.1693 109.855 14.312 109.855 13.3682C109.855 11.8264 110.286 10.5836 111.146 9.63988C112.02 8.69616 113.311 8.22431 115.018 8.22431C116.024 8.22431 116.911 8.41703 117.679 8.8025L117.401 10.3776C116.593 10.0054 115.786 9.81932 114.979 9.81932C113.919 9.81932 113.105 10.125 112.536 10.7365C111.967 11.3346 111.682 12.1853 111.682 13.2885C111.682 14.3917 111.954 15.2557 112.496 15.8804C113.052 16.5051 113.867 16.8175 114.939 16.8175C115.799 16.8175 116.627 16.6181 117.421 16.2193L117.659 17.6548C117.368 17.8542 116.964 18.027 116.448 18.1732C115.945 18.3194 115.422 18.3925 114.879 18.3925ZM123.264 18.3925C122.152 18.3925 121.199 18.1666 120.405 17.7147C119.624 17.2494 119.028 16.6247 118.618 15.8405C118.207 15.0563 118.002 14.1857 118.002 13.2287C118.002 12.3115 118.187 11.4742 118.558 10.7165C118.942 9.9456 119.491 9.34082 120.206 8.90219C120.934 8.45028 121.788 8.22431 122.768 8.22431C124.012 8.22431 125.018 8.58984 125.786 9.32088C126.567 10.0519 126.958 11.0621 126.958 12.3514C126.958 12.6837 126.931 13.0027 126.878 13.3084H119.829C119.948 14.5712 120.332 15.4683 120.981 16C121.629 16.5317 122.463 16.7975 123.483 16.7975C124.502 16.7975 125.435 16.6048 126.282 16.2193L126.521 17.6349C125.396 18.14 124.31 18.3925 123.264 18.3925ZM125.111 12.0723C125.111 11.3678 124.912 10.8162 124.515 10.4175C124.118 10.0187 123.522 9.81932 122.728 9.81932C121.96 9.81932 121.358 10.012 120.921 10.3975C120.484 10.7697 120.173 11.3279 119.988 12.0723H125.111Z"
fill="black" />
</g>
</svg>
</a>
</div>
<div class="h-96 sm:h-auto w-full flex flex-col justify-center items-center justify-center gap-8 flex-shrink-0" style="height:500px;">
<div class="flex flex-col items-center justify-center gap-2 z-10">
<svg class="w-24" viewBox="0 0 81 62" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M37.0768 20.7644L41.0782 7.8631C41.5767 6.25558 42.6449 4.88529 44.0821 4.00942C45.1654 3.34923 46.4095 3 47.6781 3H77L74.2963 14.5045H56.2369C54.6892 14.5045 53.1854 15.0183 51.9613 15.9653C50.7734 16.8844 49.9133 18.1617 49.5084 19.608L43.8796 39.713L46.7523 48.003H53.8495L55.5633 41.5209C56.2342 38.9835 54.3208 36.4985 51.6962 36.4985H51.1458L53.8495 25.6707H61.6517C63.9829 25.6707 66.1876 26.7311 67.6429 28.5524C69.1695 30.463 69.6933 32.9871 69.053 35.3474L62.6366 59H39.1481L25.7986 22.9637L15.9977 59H4L19.2083 3H30.6991L37.0768 20.7644Z"
fill="#99CEFE" />
<path
d="M37.0768 20.7644L41.0782 7.8631C41.5767 6.25558 42.6449 4.88529 44.0821 4.00942V4.00942C45.1654 3.34923 46.4095 3 47.6781 3H77L74.2963 14.5045H56.2369C54.6892 14.5045 53.1854 15.0183 51.9613 15.9653V15.9653C50.7734 16.8844 49.9133 18.1617 49.5084 19.608L43.8796 39.713M43.8796 39.713L30.6991 3H19.2083L4 59H15.9977L25.7986 22.9637L39.1481 59H62.6366L69.053 35.3474C69.6933 32.9871 69.1695 30.463 67.6429 28.5524V28.5524C66.1876 26.7311 63.9829 25.6707 61.6517 25.6707H53.8495L51.1458 36.4985H51.6962C54.3208 36.4985 56.2342 38.9835 55.5633 41.5209L53.8495 48.003H46.7523L43.8796 39.713Z"
stroke="white" stroke-width="5" />
</svg>
<svg class="h-6 sm:block hidden" viewBox="0 0 158 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M11.92 15H9.64L2.78 4.62V15H0.5V1.08H2.78L9.64 11.44V1.08H11.92V15ZM13.4541 9.44C13.4541 8.33333 13.6807 7.35333 14.1341 6.5C14.6007 5.64667 15.2274 4.98667 16.0141 4.52C16.8141 4.04 17.6941 3.8 18.6541 3.8C19.5207 3.8 20.2741 3.97333 20.9141 4.32C21.5674 4.65333 22.0874 5.07333 22.4741 5.58V3.98H24.7741V15H22.4741V13.36C22.0874 13.88 21.5607 14.3133 20.8941 14.66C20.2274 15.0067 19.4674 15.18 18.6141 15.18C17.6674 15.18 16.8007 14.94 16.0141 14.46C15.2274 13.9667 14.6007 13.2867 14.1341 12.42C13.6807 11.54 13.4541 10.5467 13.4541 9.44ZM22.4741 9.48C22.4741 8.72 22.3141 8.06 21.9941 7.5C21.6874 6.94 21.2807 6.51333 20.7741 6.22C20.2674 5.92667 19.7207 5.78 19.1341 5.78C18.5474 5.78 18.0007 5.92667 17.4941 6.22C16.9874 6.5 16.5741 6.92 16.2541 7.48C15.9474 8.02667 15.7941 8.68 15.7941 9.44C15.7941 10.2 15.9474 10.8667 16.2541 11.44C16.5741 12.0133 16.9874 12.4533 17.4941 12.76C18.0141 13.0533 18.5607 13.2 19.1341 13.2C19.7207 13.2 20.2674 13.0533 20.7741 12.76C21.2807 12.4667 21.6874 12.04 21.9941 11.48C22.3141 10.9067 22.4741 10.24 22.4741 9.48ZM40.4088 3.8C41.2754 3.8 42.0488 3.98 42.7288 4.34C43.4221 4.7 43.9621 5.23333 44.3488 5.94C44.7488 6.64667 44.9488 7.5 44.9488 8.5V15H42.6888V8.84C42.6888 7.85333 42.4421 7.1 41.9488 6.58C41.4554 6.04667 40.7821 5.78 39.9288 5.78C39.0754 5.78 38.3954 6.04667 37.8888 6.58C37.3954 7.1 37.1488 7.85333 37.1488 8.84V15H34.8888V8.84C34.8888 7.85333 34.6421 7.1 34.1488 6.58C33.6554 6.04667 32.9821 5.78 32.1288 5.78C31.2754 5.78 30.5954 6.04667 30.0888 6.58C29.5954 7.1 29.3488 7.85333 29.3488 8.84V15H27.0688V3.98H29.3488V5.24C29.7221 4.78667 30.1954 4.43333 30.7688 4.18C31.3421 3.92667 31.9554 3.8 32.6088 3.8C33.4888 3.8 34.2754 3.98667 34.9688 4.36C35.6621 4.73333 36.1954 5.27333 36.5688 5.98C36.9021 5.31333 37.4221 4.78667 38.1288 4.4C38.8354 4 39.5954 3.8 40.4088 3.8ZM57.25 9.22C57.25 9.63333 57.2233 10.0067 57.17 10.34H48.75C48.8167 11.22 49.1433 11.9267 49.73 12.46C50.3167 12.9933 51.0367 13.26 51.89 13.26C53.1167 13.26 53.9833 12.7467 54.49 11.72H56.95C56.6167 12.7333 56.01 13.5667 55.13 14.22C54.2633 14.86 53.1833 15.18 51.89 15.18C50.8367 15.18 49.89 14.9467 49.05 14.48C48.2233 14 47.57 13.3333 47.09 12.48C46.6233 11.6133 46.39 10.6133 46.39 9.48C46.39 8.34667 46.6167 7.35333 47.07 6.5C47.5367 5.63333 48.1833 4.96667 49.01 4.5C49.85 4.03333 50.81 3.8 51.89 3.8C52.93 3.8 53.8567 4.02667 54.67 4.48C55.4833 4.93333 56.1167 5.57333 56.57 6.4C57.0233 7.21333 57.25 8.15333 57.25 9.22ZM54.87 8.5C54.8567 7.66 54.5567 6.98667 53.97 6.48C53.3833 5.97333 52.6567 5.72 51.79 5.72C51.0033 5.72 50.33 5.97333 49.77 6.48C49.21 6.97333 48.8767 7.64667 48.77 8.5H54.87ZM73.3491 5.1C72.9891 4.40667 72.4891 3.88667 71.8491 3.54C71.2091 3.18 70.4691 3 69.6291 3C68.7091 3 67.8891 3.20667 67.1691 3.62C66.4491 4.03333 65.8824 4.62 65.4691 5.38C65.0691 6.14 64.8691 7.02 64.8691 8.02C64.8691 9.02 65.0691 9.90667 65.4691 10.68C65.8824 11.44 66.4491 12.0267 67.1691 12.44C67.8891 12.8533 68.7091 13.06 69.6291 13.06C70.8691 13.06 71.8757 12.7133 72.6491 12.02C73.4224 11.3267 73.8957 10.3867 74.0691 9.2H68.8491V7.38H76.5091V9.16C76.3624 10.24 75.9757 11.2333 75.3491 12.14C74.7357 13.0467 73.9291 13.7733 72.9291 14.32C71.9424 14.8533 70.8424 15.12 69.6291 15.12C68.3224 15.12 67.1291 14.82 66.0491 14.22C64.9691 13.6067 64.1091 12.76 63.4691 11.68C62.8424 10.6 62.5291 9.38 62.5291 8.02C62.5291 6.66 62.8424 5.44 63.4691 4.36C64.1091 3.28 64.9691 2.44 66.0491 1.84C67.1424 1.22667 68.3357 0.919999 69.6291 0.919999C71.1091 0.919999 72.4224 1.28667 73.5691 2.02C74.7291 2.74 75.5691 3.76667 76.0891 5.1H73.3491ZM88.1578 9.22C88.1578 9.63333 88.1311 10.0067 88.0778 10.34H79.6578C79.7245 11.22 80.0511 11.9267 80.6378 12.46C81.2245 12.9933 81.9445 13.26 82.7978 13.26C84.0245 13.26 84.8911 12.7467 85.3978 11.72H87.8578C87.5245 12.7333 86.9178 13.5667 86.0378 14.22C85.1711 14.86 84.0911 15.18 82.7978 15.18C81.7445 15.18 80.7978 14.9467 79.9578 14.48C79.1311 14 78.4778 13.3333 77.9978 12.48C77.5311 11.6133 77.2978 10.6133 77.2978 9.48C77.2978 8.34667 77.5245 7.35333 77.9778 6.5C78.4445 5.63333 79.0911 4.96667 79.9178 4.5C80.7578 4.03333 81.7178 3.8 82.7978 3.8C83.8378 3.8 84.7645 4.02667 85.5778 4.48C86.3911 4.93333 87.0245 5.57333 87.4778 6.4C87.9311 7.21333 88.1578 8.15333 88.1578 9.22ZM85.7778 8.5C85.7645 7.66 85.4645 6.98667 84.8778 6.48C84.2911 5.97333 83.5645 5.72 82.6978 5.72C81.9111 5.72 81.2378 5.97333 80.6778 6.48C80.1178 6.97333 79.7845 7.64667 79.6778 8.5H85.7778ZM95.2616 3.8C96.1282 3.8 96.9016 3.98 97.5816 4.34C98.2749 4.7 98.8149 5.23333 99.2016 5.94C99.5882 6.64667 99.7816 7.5 99.7816 8.5V15H97.5216V8.84C97.5216 7.85333 97.2749 7.1 96.7816 6.58C96.2882 6.04667 95.6149 5.78 94.7616 5.78C93.9082 5.78 93.2282 6.04667 92.7216 6.58C92.2282 7.1 91.9816 7.85333 91.9816 8.84V15H89.7016V3.98H91.9816V5.24C92.3549 4.78667 92.8282 4.43333 93.4016 4.18C93.9882 3.92667 94.6082 3.8 95.2616 3.8ZM112.09 9.22C112.09 9.63333 112.063 10.0067 112.01 10.34H103.59C103.657 11.22 103.983 11.9267 104.57 12.46C105.157 12.9933 105.877 13.26 106.73 13.26C107.957 13.26 108.823 12.7467 109.33 11.72H111.79C111.457 12.7333 110.85 13.5667 109.97 14.22C109.103 14.86 108.023 15.18 106.73 15.18C105.677 15.18 104.73 14.9467 103.89 14.48C103.063 14 102.41 13.3333 101.93 12.48C101.463 11.6133 101.23 10.6133 101.23 9.48C101.23 8.34667 101.457 7.35333 101.91 6.5C102.377 5.63333 103.023 4.96667 103.85 4.5C104.69 4.03333 105.65 3.8 106.73 3.8C107.77 3.8 108.697 4.02667 109.51 4.48C110.323 4.93333 110.957 5.57333 111.41 6.4C111.863 7.21333 112.09 8.15333 112.09 9.22ZM109.71 8.5C109.697 7.66 109.397 6.98667 108.81 6.48C108.223 5.97333 107.497 5.72 106.63 5.72C105.843 5.72 105.17 5.97333 104.61 6.48C104.05 6.97333 103.717 7.64667 103.61 8.5H109.71ZM115.914 5.58C116.247 5.02 116.687 4.58667 117.234 4.28C117.794 3.96 118.454 3.8 119.214 3.8V6.16H118.634C117.74 6.16 117.06 6.38667 116.594 6.84C116.14 7.29333 115.914 8.08 115.914 9.2V15H113.634V3.98H115.914V5.58ZM119.849 9.44C119.849 8.33333 120.076 7.35333 120.529 6.5C120.996 5.64667 121.623 4.98667 122.409 4.52C123.209 4.04 124.089 3.8 125.049 3.8C125.916 3.8 126.669 3.97333 127.309 4.32C127.963 4.65333 128.483 5.07333 128.869 5.58V3.98H131.169V15H128.869V13.36C128.483 13.88 127.956 14.3133 127.289 14.66C126.623 15.0067 125.863 15.18 125.009 15.18C124.063 15.18 123.196 14.94 122.409 14.46C121.623 13.9667 120.996 13.2867 120.529 12.42C120.076 11.54 119.849 10.5467 119.849 9.44ZM128.869 9.48C128.869 8.72 128.709 8.06 128.389 7.5C128.083 6.94 127.676 6.51333 127.169 6.22C126.663 5.92667 126.116 5.78 125.529 5.78C124.943 5.78 124.396 5.92667 123.889 6.22C123.383 6.5 122.969 6.92 122.649 7.48C122.343 8.02667 122.189 8.68 122.189 9.44C122.189 10.2 122.343 10.8667 122.649 11.44C122.969 12.0133 123.383 12.4533 123.889 12.76C124.409 13.0533 124.956 13.2 125.529 13.2C126.116 13.2 126.663 13.0533 127.169 12.76C127.676 12.4667 128.083 12.04 128.389 11.48C128.709 10.9067 128.869 10.24 128.869 9.48ZM136.124 5.84V11.94C136.124 12.3533 136.217 12.6533 136.404 12.84C136.604 13.0133 136.937 13.1 137.404 13.1H138.804V15H137.004C135.977 15 135.191 14.76 134.644 14.28C134.097 13.8 133.824 13.02 133.824 11.94V5.84H132.524V3.98H133.824V1.24H136.124V3.98H138.804V5.84H136.124ZM144.985 15.18C143.945 15.18 143.005 14.9467 142.165 14.48C141.325 14 140.665 13.3333 140.185 12.48C139.705 11.6133 139.465 10.6133 139.465 9.48C139.465 8.36 139.712 7.36667 140.205 6.5C140.699 5.63333 141.372 4.96667 142.225 4.5C143.079 4.03333 144.032 3.8 145.085 3.8C146.139 3.8 147.092 4.03333 147.945 4.5C148.799 4.96667 149.472 5.63333 149.965 6.5C150.459 7.36667 150.705 8.36 150.705 9.48C150.705 10.6 150.452 11.5933 149.945 12.46C149.439 13.3267 148.745 14 147.865 14.48C146.999 14.9467 146.039 15.18 144.985 15.18ZM144.985 13.2C145.572 13.2 146.119 13.06 146.625 12.78C147.145 12.5 147.565 12.08 147.885 11.52C148.205 10.96 148.365 10.28 148.365 9.48C148.365 8.68 148.212 8.00667 147.905 7.46C147.599 6.9 147.192 6.48 146.685 6.2C146.179 5.92 145.632 5.78 145.045 5.78C144.459 5.78 143.912 5.92 143.405 6.2C142.912 6.48 142.519 6.9 142.225 7.46C141.932 8.00667 141.785 8.68 141.785 9.48C141.785 10.6667 142.085 11.5867 142.685 12.24C143.299 12.88 144.065 13.2 144.985 13.2ZM154.539 5.58C154.873 5.02 155.313 4.58667 155.859 4.28C156.419 3.96 157.079 3.8 157.839 3.8V6.16H157.259C156.366 6.16 155.686 6.38667 155.219 6.84C154.766 7.29333 154.539 8.08 154.539 9.2V15H152.259V3.98H154.539V5.58Z"
fill="#180148" fill-opacity="0.2" />
</svg>
</div>
<div class="h-full w-full flex flex-col items-center">
<div class="flex flex-col gap-4 h-64 max-w-max" x-show="tab == 'tab1' || tab == 'tab2' || tab == 'tab3'"
x-transition:enter="ease-inout-quart duration-300"
x-transition:enter-start="opacity-0 scale-95 absolute"
x-transition:enter-end="opacity-100 scale-100" x-transition:leave="ease-inout-quart duration-300"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-95 absolute">
<div class="flex items-center sm:item-start gap-5 transform sm:translate-x-5">
<input type="text" placeholder="Min Length" id="minLen"
class="w-64 sm:w-96 text-sm max-w-lg focus:outline-none rounded-md font-normal px-4 h-10"
style="box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.04); letter-spacing: -0.035em;">
<button x-show="tab == 'tab1'" @click="tab = 'tab2'"
x-transition:enter="ease-inout-quart duration-900"
x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
x-transition:leave="ease-inout-quart duration-200"
x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95"
type="button"
class="w-10 h-10 rounded-full inline-flex justify-center items-center active:opacity-50 sm:active:opacity-50 sm:hover:opacity-50 transition transform"
style="box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.04); background: #99CEFE;">
<svg class="w-4" viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13 6.5H1M8.33333 1L13 6.5L8.33333 1ZM13 6.5L8.33333 12L13 6.5Z" stroke="white"
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
<div class="flex gap-5 transform sm:translate-x-5" x-show="tab == 'tab2' || tab == 'tab3'"
x-transition:enter="ease-inout-quart duration-300" x-transition:enter-start="opacity-0 scale-95"
x-transition:enter-end="opacity-100 scale-100"
x-transition:leave="ease-inout-quart duration-200"
x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95"
style="display: none;">
<input type="text" placeholder="Max Length" id="maxLen"
class="w-64 sm:w-96 text-sm max-w-lg focus:outline-none rounded-md font-normal px-4 h-10"
style="box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.04); letter-spacing: -0.035em;">
<button x-show="tab == 'tab2'" @click="tab = 'tab3'"
x-transition:enter="ease-inout-quart duration-900"
x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
x-transition:leave="ease-inout-quart duration-200"
x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95"
type="button"
class="w-10 h-10 rounded-full inline-flex justify-center items-center active:opacity-50 sm:active:opacity-50 sm:hover:opacity-50 transition transform"
style="box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.04); background: #99CEFE;">
<svg class="w-4" viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13 6.5H1M8.33333 1L13 6.5L8.33333 1ZM13 6.5L8.33333 12L13 6.5Z" stroke="white"
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
<div class="flex gap-5 transform sm:translate-x-5" x-show="tab == 'tab3'"
x-transition:enter="ease-inout-quart duration-300" x-transition:enter-start="opacity-0 scale-95"
x-transition:enter-end="opacity-100 scale-100"
x-transition:leave="ease-inout-quart duration-200"
x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95"
style="display: none;">
<input type="text" placeholder="Starts with..." id="startsWith"
class="w-64 sm:w-96 text-sm max-w-lg focus:outline-none rounded-md font-normal px-4 h-10"
style="box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.04); letter-spacing: -0.035em;">
<button @click="tab = 'list'" type="button"
class="w-10 h-10 rounded-full inline-flex justify-center items-center active:opacity-50 sm:active:opacity-50 sm:hover:opacity-50 transition transform text-white"
style="box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.04); background: #99fed7;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3"
d="M5 13l4 4L19 7" />
</svg>
</button>
</div>
</div>
<div class="w-full max-w-sm" x-show="tab == 'list'" :class="tab == 'list' ? 'h-64' : 'h-0'"
x-transition:enter="ease-inout-quart duration-300"
x-transition:enter-start="opacity-0 scale-95 absolute"
x-transition:enter-end="opacity-100 scale-100" x-transition:leave="ease-inout-quart duration-300"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-95 absolute" style="display: none;">
<ul id="content" class="space-y-3 w-full px-5 sm:px-0">
<li class="transition ease-inout-quart duration-500 transform scale-100 sm:hover:scale-110 group w-full max-w-sm bg-white overflow-hidden flex items-center justify-between rounded-md px-6 py-3"
style="box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.04);">
<span class="transition ease-inout-quart text-gray-500 group-hover:text-gray-800 capitalize">???</span>
<button >
class="transition text-gray-300 active:text-gray-800 sm:hover:text-gray-800">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20"
fill="currentColor">
<path
d="M9 2a2 2 0 00-2 2v8a2 2 0 002 2h6a2 2 0 002-2V6.414A2 2 0 0016.414 5L14 2.586A2 2 0 0012.586 2H9z" />
<path d="M3 8a2 2 0 012-2v10h8a2 2 0 01-2 2H5a2 2 0 01-2-2V8z" />
</svg>
</button>
</li>
</ul>
<div class="w-full flex space-x-4 justify-center pt-5">
<button @click="tab = 'tab1'"
class="transition h-10 w-10 rounded-full inline-flex justify-center items-center active:opacity-50 sm:active:opacity-100 sm:hover:opacity-50 text-white"
style="background: #fe9999;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10 19l-7-7m0 0l7-7m-7 7h18" />
</svg>
</button>
<button >
class="transition h-10 w-10 rounded-full inline-flex justify-center items-center active:opacity-50 sm:active:opacity-100 sm:hover:opacity-50 text-white"
style="background: #feef99;">
<svg class="w-4 h-4" viewBox="0 0 16 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M8 3V0L4 4L8 8V5C11.31 5 14 7.69 14 11C14 13.97 11.83 16.43 9 16.91V18.93C12.95 18.44 16 15.08 16 11C16 6.58 12.42 3 8 3ZM2 11C2 9.35 2.67 7.85 3.76 6.76L2.34 5.34C0.841394 6.84245 -0.000132851 8.87793 1.57312e-08 11C1.57312e-08 15.08 3.05 18.44 7 18.93V16.91C4.17 16.43 2 13.97 2 11Z"
fill="currentColor" />
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="h-24 w-full flex flex-col-reverse gap-2 sm:gap-0 sm:flex-row items-end justify-center sm:justify-between py-5 flex-shrink-0">
<div class="sm:w-56 hidden sm:block"></div>
<div class="w-full text-gray-400 flex justify-center text-sm">Powered By <a target="_blank"
href="https://github.com/unitythemaker"
class="mx-1 text-black hover:text-gray-700">UnityTheMaker</a> & <a target="_blank"
href="https://github.com/0fatihyildiz" class="mx-1 text-black hover:text-gray-700">0fatihyildiz</a>
</div>
<div class="w-full flex justify-center items-end sm:block sm:w-56 text-gray-400">
<a href="#" class="whitespace-no-wrap cursor-not-allowed text-sm">API DOCS <span class="text-gray-800 font-medium">SOON</span></a>
</div>
</div>
</div>
</div>
</body>
</html>
You can’t perform that action at this time.