fix social banner

src/frontend/templates/layouts/main.html

@@ -12,9 +12,9 @@
         content="Find the best NON-KYC exchanges and services to use and spend your crypto anonymously." />
     <meta property="og:type" content="website" />
     <meta http-equiv="onion-location" content="http://kycnotmezdiftahfmc34pqbpicxlnx3jbf5p7jypge7gdvduu7i6qjqd.onion/" />
-    <meta property="og:image" content="https://kycnot.me/static/img/logos/banner.webp" />
+    <meta property="og:image" content="https://kycnot.me/static/assets/banner.webp" />
-    <meta property="thumbnail" content="https://kycnot.me/static/img/logos/banner.webp">
+    <meta property="thumbnail" content="https://kycnot.me/static/assets/banner.webp">
-    <meta name="twitter:image" content="https://kycnot.me/static/img/logos/banner.webp">
+    <meta name="twitter:image" content="https://kycnot.me/static/assets/banner.webp">
     <meta property="og:url" content="https://kycnot.me" />
 
     <!-- Mastodon Verification -->

src/frontend/templates/request_service.html

@@ -1,11 +1,13 @@
 <section class="flex flex-col items-center w-full py-8">
     <h2 class="text-2xl font-bold">Request a service</h2>
-    <small class="opacity-70">*This form requires JavaScript, <a class="text-lime-600" href="/about#request">read more here</a>.</small>
+    <small class="opacity-70">*This form requires JavaScript, <a class="text-lime-600" href="/about#request">read more
+            here</a>.</small>
 
     <form action="/new/service" method="POST" class="max-w-lg my-6 space-y-4 font-mono">
         <div class="flex flex-col">
             <label class="font-bold" for="type">Service Type</label>
-            <select name="type" id="type" required class="p-2 text-white uppercase border rounded-lg bg-opacity-30 bg-zinc-900 border-white/30">
+            <select name="type" id="type" required
+                class="p-2 text-white uppercase border rounded-lg bg-opacity-30 bg-zinc-900 border-white/30">
                 <option selected value="exchange">exchange</option>
                 <option value="service">service</option>
             </select>
@@ -13,7 +15,8 @@
 
         <div id="category-container" class="flex flex-col">
             <label class="font-bold" for="category">Service Category</label>
-            <select name="category" id="category" required class="p-2 text-white capitalize border rounded-lg bg-opacity-30 bg-zinc-900 border-white/30">
+            <select name="category" id="category" required
+                class="p-2 text-white capitalize border rounded-lg bg-opacity-30 bg-zinc-900 border-white/30">
                 <option value="aggregator">aggregator</option>
                 <option value="atm">physical atm</option>
                 <option value="cloud">cloud storage</option>
@@ -28,45 +31,61 @@
                 <option value="vps">server hosting (vps)</option>
             </select>
         </div>
-        
+
         <div class="flex flex-col">
             <label class="font-bold" for="name">Service Name</label>
-            <input class="p-2 text-white border rounded-lg placeholder-white/30 bg-opacity-30 bg-zinc-900 border-white/30" placeholder="Awesome exchange" type="text" name="name" id="name" required>
+            <input
+                class="p-2 text-white border rounded-lg placeholder-white/30 bg-opacity-30 bg-zinc-900 border-white/30"
+                placeholder="Awesome exchange" type="text" name="name" id="name" required>
         </div>
 
         <div class="flex flex-col">
             <label class="font-bold" for="description">Description</label>
-            <textarea class="p-2 font-mono text-white border rounded-lg placeholder-white/30 bg-opacity-30 bg-zinc-900 border-white/30" name="description" id="description" placeholder="concise description about what the service is. max 500 characters." cols="30" rows="5" required minlength="60" maxlength="500"></textarea>
+            <textarea
+                class="p-2 font-mono text-white border rounded-lg placeholder-white/30 bg-opacity-30 bg-zinc-900 border-white/30"
+                name="description" id="description"
+                placeholder="concise description about what the service is. max 500 characters." cols="30" rows="5"
+                required minlength="60" maxlength="500"></textarea>
         </div>
-        
+
-        
+
         <div class="flex flex-col">
             <label class="font-bold" for="urls">Service URL(s)</label>
             <small class="text-white/30">*If more than one, separate with commas.</small>
-            <input class="p-2 text-white border rounded-lg placeholder-white/30 bg-opacity-30 bg-zinc-900 border-white/30" type="text" name="urls" id="urls" required placeholder="https://example.com">
+            <input
+                class="p-2 text-white border rounded-lg placeholder-white/30 bg-opacity-30 bg-zinc-900 border-white/30"
+                type="text" name="urls" id="urls" required placeholder="https://example.com">
         </div>
-        
+
         <div class="flex flex-col">
             <label class="font-bold" for="logo_url">Logo URL</label>
-            <input class="p-2 text-white border rounded-lg placeholder-white/30 bg-opacity-30 bg-zinc-900 border-white/30" type="text" name="logo_url" id="logo_url" placeholder="https://i.imgur.com/wwwHfCN.jpeg" required>
+            <input
+                class="p-2 text-white border rounded-lg placeholder-white/30 bg-opacity-30 bg-zinc-900 border-white/30"
+                type="text" name="logo_url" id="logo_url" placeholder="https://i.imgur.com/wwwHfCN.jpeg" required>
         </div>
-        
+
         <div class="flex flex-col">
             <label class="font-bold" for="tos_urls">ToS URL(s)</label>
             <small class="text-white/30">*If more than one, separate with commas.</small>
-            <input class="p-2 text-white border rounded-lg placeholder-white/30 bg-opacity-30 bg-zinc-900 border-white/30" type="text" name="tos_urls" id="tos_urls" required placeholder="https://example.com/terms">
+            <input
+                class="p-2 text-white border rounded-lg placeholder-white/30 bg-opacity-30 bg-zinc-900 border-white/30"
+                type="text" name="tos_urls" id="tos_urls" required placeholder="https://example.com/terms">
         </div>
-        
+
         <div class="flex flex-col">
             <label class="font-bold" for="onion_urls">Tor Onion URL(s)</label>
             <small class="text-white/30">*If more than one, separate with commas.</small>
-            <input class="p-2 text-white border rounded-lg placeholder-white/30 bg-opacity-30 bg-zinc-900 border-white/30" type="text" name="onion_urls" id="onion_urls" placeholder="http://zbiowkw...onion">
+            <input
+                class="p-2 text-white border rounded-lg placeholder-white/30 bg-opacity-30 bg-zinc-900 border-white/30"
+                type="text" name="onion_urls" id="onion_urls" placeholder="http://zbiowkw...onion">
         </div>
-        
+
         <div class="flex flex-col">
             <label class="font-bold" for="tags">Keywords</label>
             <small class="text-white/30">*If more than one, separate with commas.</small>
-            <input class="p-2 text-white border rounded-lg placeholder-white/30 bg-opacity-30 bg-zinc-900 border-white/30" type="text" name="tags" id="tags" required placeholder="private,p2p, fast">
+            <input
+                class="p-2 text-white border rounded-lg placeholder-white/30 bg-opacity-30 bg-zinc-900 border-white/30"
+                type="text" name="tags" id="tags" required placeholder="private,p2p, fast">
         </div>
 
         <div class="flex flex-col items-center justify-center pt-4 space-x-2">
@@ -75,52 +94,32 @@
                 <span class="flex flex-col items-center justify-center">
                     <label class="text-xs uppercase" for="btc">Bitcoin</label>
                     <input
-                        class="rounded-full outline-none appearance-none bg-opacity-30 bg-zinc-900 focus:ring-0 border-lime-500 text-lime-500" 
+                        class="rounded-full outline-none appearance-none bg-opacity-30 bg-zinc-900 focus:ring-0 border-lime-500 text-lime-500"
-                        type="checkbox"
+                        type="checkbox" {{if eq "on" .Filters.Btc}}checked{{end}} name="btc" id="btc">
-                        {{if eq "on" .Filters.Btc}}checked{{end}}
-                        name="btc" 
-                        id="btc"
-                    >
                 </span>
                 <span class="flex flex-col items-center justify-center">
                     <label class="text-xs uppercase" for="xmr">MONERO</label>
-                    <input 
+                    <input
-                        class="rounded-full outline-none appearance-none bg-opacity-30 bg-zinc-900 focus:ring-0 border-lime-500 text-lime-500" 
+                        class="rounded-full outline-none appearance-none bg-opacity-30 bg-zinc-900 focus:ring-0 border-lime-500 text-lime-500"
-                        type="checkbox"
+                        type="checkbox" {{if eq "on" .Filters.Xmr}}checked{{end}} name="xmr" id="xmr">
-                        {{if eq "on" .Filters.Xmr}}checked{{end}}
-                        name="xmr" 
-                        id="xmr"
-                    >
                 </span>
                 <span class="flex flex-col items-center justify-center">
                     <label class="text-xs uppercase" for="ln">LIGHTNING</label>
-                    <input 
+                    <input
-                        class="rounded-full outline-none appearance-none bg-opacity-30 bg-zinc-900 focus:ring-0 border-lime-500 text-lime-500" 
+                        class="rounded-full outline-none appearance-none bg-opacity-30 bg-zinc-900 focus:ring-0 border-lime-500 text-lime-500"
-                        type="checkbox"
+                        type="checkbox" {{if eq "on" .Filters.Ln}}checked{{end}} name="ln" id="ln">
-                        {{if eq "on" .Filters.Ln}}checked{{end}}
-                        name="ln" 
-                        id="ln"
-                    >
                 </span>
                 <span class="flex flex-col items-center justify-center">
                     <label class="text-xs uppercase" for="fiat">FIAT</label>
-                    <input 
+                    <input
-                        class="rounded-full outline-none appearance-none bg-opacity-30 bg-zinc-900 focus:ring-0 border-lime-500 text-lime-500" 
+                        class="rounded-full outline-none appearance-none bg-opacity-30 bg-zinc-900 focus:ring-0 border-lime-500 text-lime-500"
-                        type="checkbox" 
+                        type="checkbox" {{if eq "on" .Filters.Fiat}}checked{{end}} name="fiat" id="fiat">
-                        {{if eq "on" .Filters.Fiat}}checked{{end}}
-                        name="fiat" 
-                        id="fiat"
-                    >
                 </span>
                 <span class="flex flex-col items-center justify-center">
                     <label class="text-xs uppercase" for="cash">CASH</label>
-                    <input 
+                    <input
-                        class="rounded-full outline-none appearance-none bg-opacity-30 bg-zinc-900 focus:ring-0 border-lime-500 text-lime-500" 
+                        class="rounded-full outline-none appearance-none bg-opacity-30 bg-zinc-900 focus:ring-0 border-lime-500 text-lime-500"
-                        type="checkbox" 
+                        type="checkbox" {{if eq "on" .Filters.Cash}}checked{{end}} name="cash" id="cash">
-                        {{if eq "on" .Filters.Cash}}checked{{end}}
-                        name="cash" 
-                        id="cash"
-                    >
                 </span>
             </div>
         </div>
@@ -130,35 +129,40 @@
 
             <label class="flex flex-row items-center p-2 border rounded-lg border-white/10" for="kyclevel0">
                 <input type="radio" name="kyc_level" id="kyclevel0" value="0">
-                <p class="ml-3"><b class="text-lime-400">Level 0</b>: No KYC ever. The ToS do not mention nor enforce any KYC/AML verification.</p>
+                <p class="ml-3"><b class="text-lime-400">Level 0</b>: No KYC ever. The ToS do not mention nor enforce
+                    any KYC/AML verification.</p>
             </label>
             <label class="flex flex-row items-center p-2 border rounded-lg border-white/10" for="kyclevel1">
                 <input type="radio" name="kyc_level" id="kyclevel1" value="1">
-                <p class="ml-3"><b class="text-lime-400">Level 1</b>: No KYC/AML procedures are mentioned as such, however the service reserves the right to share acquired data with authorities, block funds or reject transactions.</p>
+                <p class="ml-3"><b class="text-lime-400">Level 1</b>: No KYC/AML procedures are mentioned as such,
+                    however the service reserves the right to share acquired data with authorities, block funds or
+                    reject transactions.</p>
             </label>
             <label class="flex flex-row items-center p-2 border rounded-lg border-white/10" for="kyclevel2">
                 <input type="radio" name="kyc_level" id="kyclevel2" value="2" checked>
-                <p class="ml-3"><b class="text-lime-400">Level 2</b>: KYC is not mandatory, but the service can require KYC from any user at any time, and it may block funds. This could occur, for example, if a transaccion is flagged suspicious.</p>
+                <p class="ml-3"><b class="text-lime-400">Level 2</b>: KYC is not mandatory, but the service can require
+                    KYC from any user at any time, and it may block funds. This could occur, for example, if a
+                    transaction is flagged suspicious.</p>
             </label>
             <label class="flex flex-row items-center p-2 border rounded-lg border-white/10" for="kyclevel3">
                 <input type="radio" name="kyc_level" id="kyclevel3" value="3">
-                <p class="ml-3"><b class="text-lime-400">Level 3</b>: KYC is mandatory to use certain features of the platform. Non-KYC users can be asked to verify their identity at any time, for any reason and may have their service restricted or revoked.</p>
+                <p class="ml-3"><b class="text-lime-400">Level 3</b>: KYC is mandatory to use certain features of the
+                    platform. Non-KYC users can be asked to verify their identity at any time, for any reason and may
+                    have their service restricted or revoked.</p>
             </label>
         </div>
-        
+
         <h3 class="font-bold">Attributes</h3>
         <small class="text-white/50">* Scrollable. You must check at least 3</small>
         <div class="max-w-lg p-4 mx-4 mb-4 space-y-2 overflow-scroll border rounded-lg h-52 border-white/10">
             {{range .Attributes}}
-                <span class="block p-1 border-b border-white/10">
+            <span class="block p-1 border-b border-white/10">
-                    <input type="checkbox" id="{{.ID}}" name="attributes" value="{{.ID}}">
+                <input type="checkbox" id="{{.ID}}" name="attributes" value="{{.ID}}">
-                    <label class="ml-1 
+                <label class="ml-1 
-                                {{if eq .Rating "info"}}text-blue-400/80{{end}}
+                                {{if eq .Rating " info"}}text-blue-400/80{{end}} {{if eq .Rating "good"
-                                {{if eq .Rating "good"}}text-green-400/80{{end}}
+                    }}text-green-400/80{{end}} {{if eq .Rating "warn" }}text-yellow-400/80{{end}} {{if eq .Rating "bad"
-                                {{if eq .Rating "warn"}}text-yellow-400/80{{end}}
+                    }}text-red-400/80{{end}} " for=" {{.ID}}">{{.Title}}</label>
-                                {{if eq .Rating "bad"}}text-red-400/80{{end}}
+            </span>
-                                " for="{{.ID}}">{{.Title}}</label>
-                </span>
             {{end}}
         </div>
         <noscript>
@@ -166,13 +170,41 @@
                 You need to enable JavaScript to complete this form.
             </p>
         </noscript>
-        <div id="start-pow" class="flex items-center justify-center px-4 py-2 mt-2 mb-4 space-x-2 font-bold uppercase bg-blue-900 rounded-lg cursor-pointer" data-pow="{{.Pow.Id}}" data-pow-c="{{.Pow.Challenge}}" data-pow-d="{{.Pow.Difficulty}}">
+        <div id="start-pow"
+            class="flex items-center justify-center px-4 py-2 mt-2 mb-4 space-x-2 font-bold uppercase bg-blue-900 rounded-lg cursor-pointer"
+            data-pow="{{.Pow.Id}}" data-pow-c="{{.Pow.Challenge}}" data-pow-d="{{.Pow.Difficulty}}">
             <input type="text" name="pow-nonce" id="pow-nonce" hidden required value="">
             <input type="text" name="pow-id" id="pow-id" hidden required value="{{.Pow.Id}}">
-            <svg id="pow-spinner" class="hidden text-white fill-white" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_ZCsl{animation:spinner_qV4G 1.2s cubic-bezier(0.52,.6,.25,.99) infinite}.spinner_gaIW{animation-delay:.6s}@keyframes spinner_qV4G{0%{r:0;opacity:1}100%{r:11px;opacity:0}}</style><circle class="spinner_ZCsl" cx="12" cy="12" r="0"/><circle class="spinner_ZCsl spinner_gaIW" cx="12" cy="12" r="0"/></svg>
+            <svg id="pow-spinner" class="hidden text-white fill-white" width="24" height="24" viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg">
+                <style>
+                    .spinner_ZCsl {
+                        animation: spinner_qV4G 1.2s cubic-bezier(0.52, .6, .25, .99) infinite
+                    }
+
+                    .spinner_gaIW {
+                        animation-delay: .6s
+                    }
+
+                    @keyframes spinner_qV4G {
+                        0% {
+                            r: 0;
+                            opacity: 1
+                        }
+
+                        100% {
+                            r: 11px;
+                            opacity: 0
+                        }
+                    }
+                </style>
+                <circle class="spinner_ZCsl" cx="12" cy="12" r="0" />
+                <circle class="spinner_ZCsl spinner_gaIW" cx="12" cy="12" r="0" />
+            </svg>
             <span id="pow-text">🧠 I'm Human</span>
         </div>
-        <button id="submit-btn" class="hidden w-full px-4 py-2 my-4 space-x-2 font-bold uppercase rounded-lg cursor-pointer bg-lime-900">
+        <button id="submit-btn"
+            class="hidden w-full px-4 py-2 my-4 space-x-2 font-bold uppercase rounded-lg cursor-pointer bg-lime-900">
             Submit
         </button>
     </form>

src/frontend/templates/service.html

@@ -198,7 +198,7 @@
     <div class="mb-5 space-y-1.5 max-w-lg">
       {{range .Service.Comments}}
       <p
-        class="block px-3 py-1.5 text-sm font-bold text-center rounded-lg border transition duration-300 border-amber-300/30 bg-amber-300/10 hover:bg-amber-300/20 hover:border-amber-100/50">
+        class="block px-3 py-1.5 text-sm font-bold rounded-lg border transition duration-300 border-amber-300/30 bg-amber-300/10 hover:bg-amber-300/20 hover:border-amber-100/50">
         {{ . | safe }}</p>
       {{end}}
     </div>