Git-Mirrors
/
kycnot.me
mirror of https://codeberg.org/pluja/kycnot.me
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

optimize html code, reduce number of divs, improve some styling

This commit is contained in:
pluja 2024-05-07 23:12:35 +02:00
parent 4da4416cd9
commit b88c952be1
No known key found for this signature in database
4 changed files with 90 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/frontend/templates/index.html
View File

@ -1,14 +1,17 @@
{{if .Announcement}}
<div class="flex justify-center items-center mt-4 w-full">
<a target="_blank" href="{{.Announcement.Link}}"
class="flex justify-center items-center p-2 mx-auto space-x-2 max-w-sm rounded-lg border {{if .Announcement.Warning}}border-yellow-900{{else}} border-lime-900{{end}} bg-black/30">
<a target="_blank" href="{{.Announcement.Link}}"
class="flex flex-col justify-center items-center p-2 mx-auto space-x-2 max-w-sm rounded-lg border transition duration-200 {{if .Announcement.Warning}}border-yellow-900 hover:border-yellow-700{{else}} hover:border-lime-700 border-lime-900{{end}} bg-black/30">
<span class="flex justify-center items-center font-bold">
{{if .Announcement.Warning}}
<svg xmlns="http://www.w3.org/2000/svg" class="text-yellow-600 size-5" 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="M12 1.67c.955 0 1.845 .467 2.39 1.247l.105 .16l8.114 13.548a2.914 2.914 0 0 1 -2.307 4.363l-.195 .008h-16.225a2.914 2.914 0 0 1 -2.582 -4.2l.099 -.185l8.11 -13.538a2.914 2.914 0 0 1 2.491 -1.403zm.01 13.33l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -7a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z" stroke-width="0" fill="currentColor" />
<svg xmlns="http://www.w3.org/2000/svg" class="mr-1.5 text-yellow-600 size-5" 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="M12 1.67c.955 0 1.845 .467 2.39 1.247l.105 .16l8.114 13.548a2.914 2.914 0 0 1 -2.307 4.363l-.195 .008h-16.225a2.914 2.914 0 0 1 -2.582 -4.2l.099 -.185l8.11 -13.538a2.914 2.914 0 0 1 2.491 -1.403zm.01 13.33l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -7a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z"
stroke-width="0" fill="currentColor" />
</svg>
{{else}}
<svg xmlns="http://www.w3.org/2000/svg" class="text-lime-600 size-5" viewBox="0 0 24 24" stroke-width="1.5"
<svg xmlns="http://www.w3.org/2000/svg" class="mr-1.5 text-lime-600 size-5" 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" />
<circle cx="12" cy="12" r="9" />
@ -16,13 +19,10 @@
<polyline points="11 12 12 12 12 16 13 16" />
</svg>
{{end}}
<div class="flex flex-col justify-center items-center text-center">
<span class="font-bold">{{.Announcement.Title}}</span>
<span class="text-xs lowercase">{{.Announcement.Body}}</span>
</div>
</a>
</div>
{{.Announcement.Title}}
</span>
<span class="text-xs lowercase">{{.Announcement.Body}}</span>
</a>
{{end}}

59
src/frontend/templates/partials/service_card.html
View File

@ -1,31 +1,22 @@
{{/* 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>
<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" />
<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">
<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"
stroke-width="0"
fill="currentColor"
></path>
</svg>
{{end}} {{.Name}}
</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>
{{end}}
<div class="flex flex-col justify-center items-center text-lg font-bold text-white md:text-xl">
<span class="flex items-center pb-1 w-full text-base font-bold">
<svg xmlns="http://www.w3.org/2000/svg" class="inline 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"
stroke-width="0" fill="currentColor"></path>
</svg>
<span class="flex-1 capitalize whitespace-nowrap ms-3">{{.Name}}</span>
<span
class="px-2 py-1 text-xs font-bold uppercase border rounded
{{if ge .Score 10}}
class="inline-flex justify-center items-center px-2 py-0.5 text-xs font-medium rounded ms-3
{{if ge .Score 10}}
bg-green-900 border-green-800
{{else if gt .Score 8}}
bg-green-800 border-green-700
@ -40,24 +31,18 @@
{{else}}
bg-red-900 border-red-800
{{end}}
text-white/70"
>
{{.Score}}
</span>
</div>
text-white/70">{{.Score}}</span>
</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>
</div>
<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>
{{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>
{{end}} {{partial "partials/service_icons" .}}
</div>
<div class="flex justify-center items-center mt-4 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>
{{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>
{{end}} {{partial "partials/service_icons" .}}
</div>
</div>
</a>

109
src/frontend/templates/partials/service_icons.html
View File

@ -1,59 +1,56 @@
<div class="grid grid-cols-5">
<!-- Monero -->
<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>
<path d="M4 16h4v-7l4 4l4 -4v7h4"></path>
</svg>
</span>
<!-- Monero -->
<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>
<path d="M4 16h4v-7l4 4l4 -4v7h4"></path>
</svg>
</span>
<!-- Bitcoin -->
<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>
<path d="M9 8h4.09c1.055 0 1.91 .895 1.91 2s-.855 2 -1.91 2c1.055 0 1.91 .895 1.91 2s-.855 2 -1.91 2h-4.09"></path>
<path d="M10 12h4"></path>
<path d="M10 7v10v-9"></path>
<path d="M13 7v1"></path>
<path d="M13 16v1"></path>
</svg>
</span>
<!-- Bitcoin -->
<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>
<path d="M9 8h4.09c1.055 0 1.91 .895 1.91 2s-.855 2 -1.91 2c1.055 0 1.91 .895 1.91 2s-.855 2 -1.91 2h-4.09"></path>
<path d="M10 12h4"></path>
<path d="M10 7v10v-9"></path>
<path d="M13 7v1"></path>
<path d="M13 16v1"></path>
</svg>
</span>
<!-- Lightning -->
<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>
</svg>
</span>
<!-- Lightning -->
<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>
</svg>
</span>
<!-- Cash -->
<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>
<path d="M9 14v4c0 1.656 2.686 3 6 3s6 -1.344 6 -3v-4"></path>
<path d="M3 6c0 1.072 1.144 2.062 3 2.598s4.144 .536 6 0c1.856 -.536 3 -1.526 3 -2.598c0 -1.072 -1.144 -2.062 -3 -2.598s-4.144 -.536 -6 0c-1.856 .536 -3 1.526 -3 2.598z"></path>
<path d="M3 6v10c0 .888 .772 1.45 2 2"></path>
<path d="M3 11c0 .888 .772 1.45 2 2"></path>
</svg>
</span>
<!-- Fiat -->
<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>
<path d="M3 10l18 0"></path>
<path d="M5 6l7 -3l7 3"></path>
<path d="M4 10l0 11"></path>
<path d="M20 10l0 11"></path>
<path d="M8 14l0 3"></path>
<path d="M12 14l0 3"></path>
<path d="M16 14l0 3"></path>
</svg>
</span>
</div>
<!-- Cash -->
<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>
<path d="M9 14v4c0 1.656 2.686 3 6 3s6 -1.344 6 -3v-4"></path>
<path d="M3 6c0 1.072 1.144 2.062 3 2.598s4.144 .536 6 0c1.856 -.536 3 -1.526 3 -2.598c0 -1.072 -1.144 -2.062 -3 -2.598s-4.144 -.536 -6 0c-1.856 .536 -3 1.526 -3 2.598z"></path>
<path d="M3 6v10c0 .888 .772 1.45 2 2"></path>
<path d="M3 11c0 .888 .772 1.45 2 2"></path>
</svg>
</span>
<!-- Fiat -->
<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>
<path d="M3 10l18 0"></path>
<path d="M5 6l7 -3l7 3"></path>
<path d="M4 10l0 11"></path>
<path d="M20 10l0 11"></path>
<path d="M8 14l0 3"></path>
<path d="M12 14l0 3"></path>
<path d="M16 14l0 3"></path>
</svg>
</span>

2
src/frontend/templates/service.html
View File

@ -183,7 +183,7 @@
</div>-->
<!-- Icons -->
<a href="/about#icons" class="max-w-md text-xs"> {{partial "partials/service_icons" .Service}} </a>
<a href="/about#icons" class="flex justify-center items-center mt-4 max-w-md text-xs"> {{partial "partials/service_icons" .Service}} </a>
<!-- Description -->
<p class="p-4 max-w-lg text-sm rounded-lg border md:text-base border-white/20 bg-gray-500/10">{{if ne .Service.Description ""}} {{.Service.Description | safe}} {{else}} This {{.Service.Type}} does not have a description. {{end}}</p>