From b88c952be19b396e54b322095245d1a628484f74 Mon Sep 17 00:00:00 2001
From: pluja <codeberg@r3d.red>
Date: Tue, 7 May 2024 23:12:35 +0200
Subject: [PATCH] optimize html code, reduce number of divs, improve some
 styling

---
 src/frontend/templates/index.html             |  28 ++---
 .../templates/partials/service_card.html      |  59 ++++------
 .../templates/partials/service_icons.html     | 109 +++++++++---------
 src/frontend/templates/service.html           |   2 +-
 4 files changed, 90 insertions(+), 108 deletions(-)

diff --git a/src/frontend/templates/index.html b/src/frontend/templates/index.html
index 4582d54..420aab7 100644
--- a/src/frontend/templates/index.html
+++ b/src/frontend/templates/index.html
@@ -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}}
 
 
diff --git a/src/frontend/templates/partials/service_card.html b/src/frontend/templates/partials/service_card.html
index 78715f2..25fcfea 100644
--- a/src/frontend/templates/partials/service_card.html
+++ b/src/frontend/templates/partials/service_card.html
@@ -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>
diff --git a/src/frontend/templates/partials/service_icons.html b/src/frontend/templates/partials/service_icons.html
index e5c017d..16ca81b 100644
--- a/src/frontend/templates/partials/service_icons.html
+++ b/src/frontend/templates/partials/service_icons.html
@@ -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>
\ No newline at end of file
+<!-- 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>
\ No newline at end of file
diff --git a/src/frontend/templates/service.html b/src/frontend/templates/service.html
index 337fa67..dce4ea7 100644
--- a/src/frontend/templates/service.html
+++ b/src/frontend/templates/service.html
@@ -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>