add tooltips and other styling improvements

This commit is contained in:
pluja 2024-03-04 16:22:05 +01:00
parent 090c82d011
commit 564e092bef
5 changed files with 24 additions and 51 deletions

File diff suppressed because one or more lines are too long

View File

@ -24,11 +24,15 @@
<!-- pubkey so it can be tagged for responses/alerts -->
<meta property="nostr:pubkey" content="npub1tuta00sz4wvvzymqcfq42cqhxal6puqpylxs4yf0z28z3ryvfh9qkqmv92" />
<!-- Nostr publish relays -->
<meta property="nostr:relay" content="wss://relay.damus.io" />
<meta property="nostr:relay" content="wss://relay.exit.pub" />
<meta property="nostr:relay" content="wss://relay.snort.social" />
<meta property="nostr:relay" content="wss://relay.plebstr.com" />
<meta property="nostr:relay" content="wss://relay.camelus.app" />
<meta property="nostr:relay" content="wss://bitcoiner.social" />
<meta property="nostr:relay" content="wss://purplerelay.com" />
<!-- CSS -->
<link rel="stylesheet" href="/static/disgus/disgus.css">
<link rel="stylesheet" href="/static/css/balloon.min.css">
<!-- Site Config -->
<title>{{.Title}} - KYCnot.me</title>

View File

@ -1,32 +1,15 @@
{{/* service_card.html */}}
<a href="/service/{{.Name}}" class="w-full max-w-md">
<div
class="flex flex-col justify-between p-4 bg-gray-700 bg-opacity-30 rounded-lg border border-transparent shadow-lg backdrop-blur-md transition duration-500 hover:border-lime-600/70"
>
<div class="flex flex-col justify-between p-4 bg-gray-700 bg-opacity-30 rounded-lg border border-transparent shadow-lg backdrop-blur-md transition duration-500 hover:border-lime-600/70">
<div>
<div class="flex items-center">
<img
src="/api/g/picture/{{.ID}}"
alt="{{.Name}} logo"
class="mr-4 w-12 h-12 rounded-full bg-white/10"
/>
<img src="/api/g/picture/{{.ID}}" alt="{{.Name}} logo" class="mr-4 w-12 h-12 rounded-full bg-white/10" />
<div class="flex flex-col justify-center items-center">
<div class="text-lg font-bold text-white md:text-xl">
<div class="flex justify-between items-center">
<span class="flex justify-center items-center capitalize">
{{if .Verified}}
<svg
xmlns="http://www.w3.org/2000/svg"
class="mr-1 w-5 h-5 text-blue-400/80 discount-check-filled"
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<svg xmlns="http://www.w3.org/2000/svg" class="mr-1 w-5 h-5 text-blue-400/80 discount-check-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M12.01 2.011a3.2 3.2 0 0 1 2.113 .797l.154 .145l.698 .698a1.2 1.2 0 0 0 .71 .341l.135 .008h1a3.2 3.2 0 0 1 3.195 3.018l.005 .182v1c0 .27 .092 .533 .258 .743l.09 .1l.697 .698a3.2 3.2 0 0 1 .147 4.382l-.145 .154l-.698 .698a1.2 1.2 0 0 0 -.341 .71l-.008 .135v1a3.2 3.2 0 0 1 -3.018 3.195l-.182 .005h-1a1.2 1.2 0 0 0 -.743 .258l-.1 .09l-.698 .697a3.2 3.2 0 0 1 -4.382 .147l-.154 -.145l-.698 -.698a1.2 1.2 0 0 0 -.71 -.341l-.135 -.008h-1a3.2 3.2 0 0 1 -3.195 -3.018l-.005 -.182v-1a1.2 1.2 0 0 0 -.258 -.743l-.09 -.1l-.697 -.698a3.2 3.2 0 0 1 -.147 -4.382l.145 -.154l.698 -.698a1.2 1.2 0 0 0 .341 -.71l.008 -.135v-1l.005 -.182a3.2 3.2 0 0 1 3.013 -3.013l.182 -.005h1a1.2 1.2 0 0 0 .743 -.258l.1 -.09l.698 -.697a3.2 3.2 0 0 1 2.269 -.944zm3.697 7.282a1 1 0 0 0 -1.414 0l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.32 1.497l2 2l.094 .083a1 1 0 0 0 1.32 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"
@ -38,11 +21,7 @@
</span>
{{if isNew .Created}}
<span
class="px-1 py-1 text-xs font-bold uppercase rounded border border-white/30 bg-white/20 text-white/70"
>
NEW
</span>
<span class="px-1 py-1 text-xs font-bold uppercase rounded border border-white/30 bg-white/20 text-white/70"> NEW </span>
{{end}}
<span
class="px-2 py-1 text-xs font-bold uppercase border rounded
@ -66,10 +45,7 @@
{{.Score}}
</span>
</div>
<span
class="block pr-1 mt-2 text-xs font-normal text-opacity-60 text-white/60"
>{{shortText .Description | safe}}</span
>
<span class="block pr-1 mt-2 text-xs font-normal text-opacity-60 text-white/60">{{shortText .Description | safe}}</span>
</div>
</div>
</div>
@ -77,17 +53,9 @@
<div class="mt-4">
<div class="flex justify-center items-center text-xs">
{{if eq .Type "exchange"}}
<span
class="px-2 py-1 mr-1 text-xs font-bold uppercase rounded border text-white/70 bg-zinc-900 border-zinc-700"
>
{{.Type}}
</span>
<span class="px-2 py-1 mr-1 text-xs font-bold uppercase rounded border text-white/70 bg-zinc-900 border-zinc-700"> {{.Type}} </span>
{{else}}
<span
class="px-2 py-1 mr-1 text-xs font-bold uppercase rounded border text-white/70 bg-zinc-900 border-zinc-700"
>
{{.Category}}
</span>
<span class="px-2 py-1 mr-1 text-xs font-bold uppercase rounded border text-white/70 bg-zinc-900 border-zinc-700"> {{.Category}} </span>
{{end}} {{partial "partials/service_icons" .}}
</div>
</div>

View File

@ -1,7 +1,7 @@
<div class="grid grid-cols-5">
<!-- Monero -->
<span class="px-2 py-1 m-1 text-center text-white border rounded bg-zinc-900 border-zinc-700">
<span aria-label="XMR" data-balloon-pos="up" class="px-2 py-1 m-1 text-center text-white rounded border bg-zinc-900 border-zinc-700">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 {{if .Xmr}}text-orange-400/70{{else}} text-white/20 {{end}} tabler-coin-monero" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
@ -10,7 +10,7 @@
</span>
<!-- Bitcoin -->
<span class="px-2 py-1 m-1 text-center text-white border rounded bg-zinc-900 border-zinc-700">
<span aria-label="BTC" data-balloon-pos="up" class="px-2 py-1 m-1 text-center text-white rounded border bg-zinc-900 border-zinc-700">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 {{if .Btc}} text-amber-400/70 {{else}} text-white/20 {{end}} coin-bitcoin" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
@ -23,7 +23,7 @@
</span>
<!-- Lightning -->
<span class="px-2 py-1 m-1 text-center text-white border rounded bg-zinc-900 border-zinc-700">
<span aria-label="LN" data-balloon-pos="up" class="px-2 py-1 m-1 text-center text-white rounded border bg-zinc-900 border-zinc-700">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 {{if .Lightning}} text-sky-400/70 {{else}} text-white/20 {{end}} bolt" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M13 3l0 7l6 0l-8 11l0 -7l-6 0l8 -11"></path>
@ -31,7 +31,7 @@
</span>
<!-- Cash -->
<span class="px-2 py-1 m-1 text-center text-white border rounded bg-zinc-900 border-zinc-700">
<span aria-label="CASH" data-balloon-pos="up" class="px-2 py-1 m-1 text-center text-white rounded border bg-zinc-900 border-zinc-700">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 {{if .Cash}} text-yellow-300/70 {{else}} text-white/20 {{end}}" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M9 14c0 1.657 2.686 3 6 3s6 -1.343 6 -3s-2.686 -3 -6 -3s-6 1.343 -6 3z"></path>
@ -43,7 +43,7 @@
</span>
<!-- Fiat -->
<span class="px-2 py-1 m-1 text-center text-white border rounded bg-zinc-900 border-zinc-700">
<span aria-label="FIAT" data-balloon-pos="up" class="px-2 py-1 m-1 text-center text-white rounded border bg-zinc-900 border-zinc-700">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 {{if .Fiat}}text-green-400/70{{else}} text-white/20 {{end}} building-bank" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M3 21l18 0"></path>

View File

@ -22,7 +22,7 @@
<span class="flex justify-center items-center capitalize">
<span class="text-xl font-bold md:text-2xl">{{.Service.Name}}</span>
{{if .Service.Verified}}
<a href="/about#verified">
<a aria-label="Verified" data-balloon-pos="up" href="/about#verification">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 ml-1 {{if .Service.Verified}}text-blue-400/80{{else}} text-white/20 {{end}} discount-check-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
@ -61,8 +61,8 @@
</a>
{{if ne .Service.Referral ""}}
<a href="{{randomElem .Service.Urls}}" class="flex justify-center items-center px-2 py-1 text-center text-gray-300 rounded-r border border-gray-600 transition duration-300 bg-zinc-900 hover:border-lime-600 hover:text-lime-600">
<svg xmlns="http://www.w3.org/2000/svg" class="size-5 link-off" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<a aria-label="No Referral" data-balloon-pos="up" href="{{randomElem .Service.Urls}}" class="flex justify-center items-center px-1 py-1 text-center text-gray-300 rounded-r border border-gray-600 transition duration-300 md:px-2 bg-zinc-900 hover:border-lime-600 hover:text-lime-600">
<svg xmlns="http://www.w3.org/2000/svg" class="size-4 link-off" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M9 15l3 -3m2 -2l1 -1" />
<path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
@ -94,8 +94,8 @@
{{end}}
{{if ne .Service.Referral ""}}
<a href="{{randomElem .Service.OnionUrls}}" class="flex justify-center items-center px-2 py-1 text-center text-purple-600 rounded-r border border-purple-900 transition duration-300 bg-zinc-900 hover:border-lime-600 hover:text-lime-600">
<svg xmlns="http://www.w3.org/2000/svg" class="size-5 link-off" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<a aria-label="No Referral" data-balloon-pos="up" href="{{randomElem .Service.OnionUrls}}" class="flex justify-center items-center px-1 py-1 text-center text-purple-600 rounded-r border border-purple-900 transition duration-300 md:px-2 bg-zinc-900 hover:border-lime-600 hover:text-lime-600">
<svg xmlns="http://www.w3.org/2000/svg" class="size-4 link-off" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M9 15l3 -3m2 -2l1 -1" />
<path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
@ -124,7 +124,7 @@
</a>
{{end}}
<a href="#discuss" class="hidden justify-center items-center px-2 py-1 m-1 space-x-2 text-center text-sky-400 rounded border border-sky-700 transition duration-300 md:flex bg-zinc-900 hover:border-lime-600 hover:text-lime-600">
<a aria-label="Discuss service" data-balloon-pos="up" href="#discuss" class="hidden justify-center items-center px-2 py-1 m-1 space-x-2 text-center text-sky-400 rounded border border-sky-700 transition duration-300 md:flex bg-zinc-900 hover:border-lime-600 hover:text-lime-600">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 messages" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M21 14l-3 -3h-7a1 1 0 0 1 -1 -1v-6a1 1 0 0 1 1 -1h9a1 1 0 0 1 1 1v10"></path>