Git-Mirrors/kycnot.me
1
0
Fork 0
mirror of https://codeberg.org/pluja/kycnot.me synced 2025-01-22 12:21:11 -05:00
Code Issues Packages Projects Releases Wiki Activity

🎨 style(index.html): improve styling and semantics of filter buttons and search input field

Browse Source 
💄 style(index.html): update border color and opacity of filter buttons to improve visibility

🔧 chore(index.html): update placeholder text color and opacity of search input field for better user experience
This commit is contained in:
pluja 2023-10-31 09:39:45 +01:00
parent 99809bd979
commit 0e42b2ae56
1 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/web/templates/index.html
View File

@ -8,27 +8,27 @@
<!-- Filters -->
<div class="text-center text-gray-500">
<a href="/">
<span class="p-1.5 rounded-xl backdrop-blur-md bg-opacity-70 {{if eq "" .Filters.Type}}bg-lime-500 text-zinc-900 {{else}} border border-gray-500 {{end}} font-bold text-xs">Exchanges</span>
<span class="p-1 {{if eq "exchange" .Filters.Type}}border-b border-lime-500/60 text-lime-500{{end}} text-xs">Exchanges</span>
</a>
<a href="/?t=service">
<span class="p-1.5 rounded-xl backdrop-blur-md bg-opacity-70 {{if eq "service" .Filters.Type}}bg-lime-500 text-zinc-900 {{else}} border border-gray-500 {{end}} font-bold text-xs">Services</span>
<span class="p-1 {{if eq "service" .Filters.Type}}border-b border-lime-500/60 text-lime-500{{end}} text-xs">Services</span>
</a>
<a href="/?t=all">
<span class="p-1.5 rounded-xl backdrop-blur-md bg-opacity-70 {{if eq "all" .Filters.Type}}bg-lime-500 text-zinc-900 {{else}} border border-gray-500 {{end}} font-bold text-xs">All</span>
<span class="p-1 {{if eq "all" .Filters.Type}}border-b border-lime-500/60 text-lime-500{{end}} text-xs">All</span>
</a>
</div>
<form action="/">
<input type="hidden" name="t" id="t" value="{{.Filters.Type}}"/>
<div class="flex items-center justify-center mt-6">
<input class="text-xs bg-transparent border rounded-lg border-lime-600 text-lime-600" placeholder="Search anything..." value="{{.Filters.Query}}" type="text" name="q" id="q">
<input class="text-xs bg-transparent border rounded-lg border-lime-500/60 text-lime-500 placeholder-white/30" placeholder="Search anything..." value="{{.Filters.Query}}" type="text" name="q" id="q">
</div>
<div class="flex items-center justify-center pt-4 space-x-2">
<span class="flex flex-col items-center justify-center">
<label class="text-xs uppercase" for="btc">btc</label>
<input
class="bg-transparent rounded-full outline-none appearance-none focus:ring-0 border-lime-500 text-lime-500"
class="bg-transparent rounded-full outline-none appearance-none focus:ring-0 border-lime-500/60 text-lime-500"
type="checkbox"
{{if eq "on" .Filters.Btc}}checked{{end}}
name="btc"
@ -38,7 +38,7 @@
<span class="flex flex-col items-center justify-center">
<label class="text-xs uppercase" for="xmr">xmr</label>
<input
class="bg-transparent rounded-full outline-none appearance-none focus:ring-0 border-lime-500 text-lime-500"
class="bg-transparent rounded-full outline-none appearance-none focus:ring-0 border-lime-500/60 text-lime-500"
type="checkbox"
{{if eq "on" .Filters.Xmr}}checked{{end}}
name="xmr"
@ -48,7 +48,7 @@
<span class="flex flex-col items-center justify-center">
<label class="text-xs uppercase" for="ln">ln</label>
<input
class="bg-transparent rounded-full outline-none appearance-none focus:ring-0 border-lime-500 text-lime-500"
class="bg-transparent rounded-full outline-none appearance-none focus:ring-0 border-lime-500/60 text-lime-500"
type="checkbox"
{{if eq "on" .Filters.Ln}}checked{{end}}
name="ln"
@ -58,7 +58,7 @@
<span class="flex flex-col items-center justify-center">
<label class="text-xs uppercase" for="fiat">fiat</label>
<input
class="bg-transparent rounded-full outline-none appearance-none focus:ring-0 border-lime-500 text-lime-500"
class="bg-transparent rounded-full outline-none appearance-none focus:ring-0 border-lime-500/60 text-lime-500"
type="checkbox"
{{if eq "on" .Filters.Fiat}}checked{{end}}
name="fiat"
@ -68,14 +68,14 @@
<span class="flex flex-col items-center justify-center">
<label class="text-xs uppercase" for="cash">cash</label>
<input
class="bg-transparent rounded-full outline-none appearance-none focus:ring-0 border-lime-500 text-lime-500"
class="bg-transparent rounded-full outline-none appearance-none focus:ring-0 border-lime-500/60 text-lime-500"
type="checkbox"
{{if eq "on" .Filters.Cash}}checked{{end}}
name="cash"
id="cash"
>
</span>
<button class="p-1 text-xs font-bold uppercase border rounded-lg bg-none border-lime-500" type="submit">filter</button>
<button class="p-1 text-xs font-bold uppercase border rounded-lg bg-none border-lime-500/60" type="submit">filter</button>
</div>
</form>
<!-- End Filters -->