update frontend files

src/frontend/static/css/input.css

@@ -1,3 +1,13 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+@font-face {
+    font-family: 'inter';
+    src: url('../fonts/inter.ttf') format('truetype');
+}
+
+@font-face {
+    font-family: 'samo';
+    src: url('../fonts/samo.ttf') format('truetype');
+}

src/frontend/templates/about.html

@@ -5,10 +5,6 @@
     font-size: 1rem;
   }
 
-  #main {
-    font-family: sans-serif;
-  }
-
   article p {
     margin-bottom: 1rem;
     font-size: 1.05rem;
@@ -31,6 +27,7 @@
     margin-top: 1rem;
     margin-bottom: 0.3rem;
     font-weight: bold;
+    font-family: samo;
     color: rgb(163 230 53);
   }
 
@@ -81,7 +78,7 @@
     font-weight: bold;
     border-left: 3px solid #89f333;
     color: #d3cccc;
-    font-family: monospace;
+    font-family: samo;
     max-width: 100%;
     overflow: scorll;
     padding: 1em 1em;
@@ -100,7 +97,7 @@
 <div id="main" class="flex flex-col justify-center items-center my-8">
   <div class="p-4 w-full max-w-4xl">
     <div
-      class="space-x-1 text-xs font-bold text-center text-lime-500 lowercase"
+      class="space-x-1 text-sm font-bold text-center text-lime-500 lowercase font-samo"
     >
       <a href="#why">Why</a>
       ·
@@ -127,7 +124,7 @@
       <a href="#disclaimer">disclaimer</a>
     </div>
   </div>
-  <article class="md:p-4 md:max-w-5xl">
+  <article class="md:p-4 md:max-w-5xl font-inter">
     <div class="px-4 py-2 m-2 rounded-xl bg-gray-500/10">
       <h2 id="why" class="font-bold text-lime-400">why kycnot.me?</h2>
       <p>
@@ -393,7 +390,7 @@
       <p>
         If you like this project, or
         <a target="_blank" href="https://pluja.dev">any of my other projects</a
-        >, you can make donations using the following methods:
+        >, you can donate using the following methods:
       </p>
 
       <ul class="py-3 space-y-6 list-none">
@@ -430,7 +427,7 @@
           <code>{{.Xmr}}</code>
 
           <details class="my-2 rounded-lg cursor-pointer">
-            <summary class="flex items-center space-x-1 text-sm font-bold">
+            <summary class="flex items-center space-x-1 text-sm text-white/60">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="w-5 h-5 icon icon-tabler icon-tabler-qrcode"
@@ -463,7 +460,7 @@
                 <path d="M17 17l3 0" />
                 <path d="M20 17l0 3" />
               </svg>
-              <span> Click for QR Code </span>
+              <span class="underline"> Click for QR Code </span>
             </summary>
             <img
               class="my-4"
@@ -498,7 +495,7 @@
           <code>{{.Btc}}</code>
 
           <details class="my-2 rounded-lg cursor-pointer">
-            <summary class="flex items-center space-x-1 text-sm font-bold">
+            <summary class="flex items-center space-x-1 text-sm text-white/60">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="w-5 h-5 icon icon-tabler icon-tabler-qrcode"
@@ -531,7 +528,7 @@
                 <path d="M17 17l3 0" />
                 <path d="M20 17l0 3" />
               </svg>
-              <span> Click for QR Code </span>
+              <span class="underline"> Click for QR Code </span>
             </summary>
             <img
               class="my-4"
@@ -557,8 +554,12 @@
               <path stroke="none" d="M0 0h24v24H0z" fill="none" />
               <path d="M13 3l0 7l6 0l-8 11l0 -7l-6 0l8 -11" />
             </svg>
-            <a target="_blank" rel="noreferrer" href="{{.Lnn}}"
+            <a
-              >Lightning Network</a
+              target="_blank"
+              rel="noreferrer"
+              class="underline"
+              href="{{.Lnn}}"
+              >Tip via Lightning Network</a
             >
           </span>
         </li>
@@ -567,12 +568,13 @@
       <p class="px-4 text-sm text-white/60">
         Note: I fund this project entirely on my own, as an independent
         individual without sponsors or alternative revenue streams, I rely
-        solely on <b>donations</b> and <b>referrals</b> (if you choose to use
+        solely on <b>donations</b> and
-        them). I am committed to maintaining the project's independence and
+        <b><a class="text-sm text-white/60" href="#referrals">referrals</a></b>
-        integrity, thus I do not accept bribes or sponsorships. Please note that
+        (if you choose to use them). I am committed to maintaining the project's
-        donations should not be made with the expectation of receiving personal
+        independence and integrity, thus I do not accept bribes or sponsorships.
-        benefits for your service/product. If you did, I'll be happy to return
+        Please note that donations should not be made with the expectation of
-        the donation to you.
+        receiving personal benefits for your service/product. If you did, I'll
+        be happy to return the donation to you.
       </p>
     </div>
 
@@ -630,8 +632,8 @@
       </p>
 
       <p>
-        <a href="https://usenostr.org" target="_blank"
+        <a href="/nostr"
-          >> Visit this page for a simple and quick introduction to Nostr.</a
+          >Click here for a quick guide on how to use Nostr comments.</a
         >
       </p>
 
@@ -673,7 +675,7 @@
         </li>
         <li>Endpoint to download the full database</li>
         <li>
-          Open scoring algorithmg. All services go under the same algorithm,
+          Open scoring algorithm. All services go under the same algorithm,
           meaning that the score is not subjective.
         </li>
       </ul>
@@ -752,9 +754,9 @@
 
       <p>
         <span>
-          I use referrals to help fund the site. The default website link is the
+          I use referrals to help cover the site costs. The default website link
-          referral, if there is any. But there's always a referral-free option,
+          is the referral, if there is any. But there's always a referral-free
-          that is shown with a
+          option, that is shown with a
         </span>
         <svg
           xmlns="http://www.w3.org/2000/svg"

src/frontend/templates/layouts/main.html

@@ -4,28 +4,36 @@
 <head>
     <meta charset='utf-8'>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="Find NON-KYC exchanges and services to use and spend your crypto anonymously.">
+    <meta name="description" content="Find the best NON-KYC exchanges and services to use and spend your crypto anonymously.">
     <meta name="keywords"
         content="KYC, AML, Bitcoin, Crypto, Cryptocurrency, Exchange, Exchanges, Service, Services, Anonymous, Anonymity, Privacy, Pseudonymity, Pseudonymous, Non-KYC, No-KYC, No KYC, Monero, XMR, BTC">
     <meta property="og:title" content="KYCNOT.ME" />
     <meta property="og:description"
-        content="Find NON-KYC exchanges and services to use and spend your crypto anonymously." />
+        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="thumbnail" content="https://kycnot.me/static/img/logos/banner.webp">
     <meta name="twitter:image" content="https://kycnot.me/static/img/logos/banner.webp">
     <meta property="og:url" content="https://kycnot.me" />
+
+    <!-- Mastodon Verification -->
+    <link rel="me" href="https://fosstodon.org/@kycnotme">
+    
+    <!-- Disgus Configuration -->
+    <!-- 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.snort.social" />
+    <meta property="nostr:relay" content="wss://relay.plebstr.com" />
+    <!-- CSS -->
+    <link rel="stylesheet" href="/static/disgus/disgus.css">
+
+    <!-- Site Config -->
+    <title>{{.Title}} - KYCnot.me</title>
     <link rel='stylesheet' href='/static/css/style.css'>
     <link rel="shortcut icon" href="/static/assets/favicon.webp" type="image/x-icon">
-    <link rel="me" href="https://fosstodon.org/@kycnotme">
-    <!-- PROVIDE the pubkey so it can be tagged for responses/alerts -->
-    <meta property="nostr:pubkey" content="npub1tuta00sz4wvvzymqcfq42cqhxal6puqpylxs4yf0z28z3ryvfh9qkqmv92" />
-    <!-- CAN provide multiple relays -->
-    <meta property="nostr:relay" content="wss://relay.damus.io" />
-    <!-- MUST PROVIDE CSS -->
-    <link rel="stylesheet" href="/static/disgus/disgus.css">
-    <title>{{.Title}} - KYCnot.me</title>
 </head>
 
 <style>
@@ -34,7 +42,7 @@
     }
 </style>
 
-<body class="h-full font-mono text-gray-200 bg-fixed bg-black bg-center bg-cover" style="background-image: url('/static/assets/gradient.webp');">    
+<body class="h-full text-gray-200 bg-fixed bg-black bg-center bg-cover font-samo" style="background-image: url('/static/assets/gradient.webp');">    
     {{if .Error}}
     <div class="px-4 py-3 text-neutral-100 bg-error">
         <p class="text-sm font-bold text-center">

src/frontend/templates/nostr.html

@@ -0,0 +1,218 @@
+<style>
+  article {
+    margin-left: 1rem;
+    margin-right: 1rem;
+    font-size: 1rem;
+  }
+
+  article p {
+    margin-bottom: 1rem;
+    font-size: 1.05rem;
+  }
+
+  p {
+    margin-top: 1rem;
+  }
+
+  article a {
+    color: rgb(163 230 53);
+    text-decoration: underline;
+    text-underline-offset: 0.2rem;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4 {
+    margin-top: 1rem;
+    margin-bottom: 0.3rem;
+    font-weight: bold;
+    font-family: samo;
+    color: rgb(163 230 53);
+  }
+
+  h1 {
+    font-size: 3rem;
+  }
+
+  h2 {
+    font-size: 1.2rem;
+  }
+
+  h3 {
+    margin-top: 1.1em;
+    font-size: 1rem;
+  }
+
+  h3::before {
+    content: "~ ";
+  }
+
+  ul {
+    margin-top: 0.3rem;
+    margin-bottom: 0.5rem;
+    padding-left: 1rem;
+    list-style: square;
+  }
+
+  li {
+    margin-bottom: 0.15rem;
+  }
+
+  article a {
+    text-decoration: none;
+  }
+
+  article blockquote {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+    padding-left: 1rem;
+    border-left: 0.3rem solid rgb(163 230 53);
+    color: rgb(142, 146, 150);
+  }
+
+  code {
+    background: #2b282872;
+    border: 1px solid #494242;
+    border-radius: 0.2rem;
+    font-weight: bold;
+    border-left: 3px solid #89f333;
+    color: #d3cccc;
+    font-family: samo;
+    max-width: 100%;
+    overflow: scorll;
+    padding: 1em 1em;
+    display: block;
+    word-wrap: break-word;
+    max-width: 90vw;
+    margin-top: 1em;
+  }
+
+  hr {
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+  }
+</style>
+
+<div id="main" class="flex flex-col justify-center items-center my-8">
+  <article class="md:p-4 md:max-w-5xl font-inter">
+    <div class="px-4 py-2 m-2 rounded-xl bg-gray-500/10">
+      <h2 id="why" class="font-bold text-lime-400">
+        how to use the nostr comments?
+      </h2>
+      <p>
+        Start by reading
+        <a target="_blank" href="https://usenostr.org" target="_blank"
+          >the nostr basics</a
+        >
+        to understand how Nostr works.
+      </p>
+
+      <h3 id="creating an account" class="pt-4 w-full border-t border-white/20">
+        creating an account
+      </h3>
+
+      <p>
+        Creating a Nostr account is as easy as generating a private key. From
+        the private key, your public key will be derived. The public key acts as
+        your <b>username</b>.
+      </p>
+
+      <p>
+        In this guide, we will use
+        <a
+          target="_blank"
+          href="https://github.com/nostr-protocol/nips/blob/master/07.md"
+          >Browser Signer Extensions</a
+        >
+        to generate the private key, these act as a vault for your private key,
+        and Nostr apps will interact with the extension, issuing sign requests.
+        This way, your private key never leaves your computer local storage.
+      </p>
+
+      <p>
+        For this, I recommend you use
+        <a target="_blank" href="https://github.com/reyamir/nostr-connect"
+          >Nostr Connect</a
+        >
+        extension. Install it on
+        <a
+          target="_blank"
+          href="https://chromewebstore.google.com/detail/nostr-connect/ampjiinddmggbhpebhaegmjkbbeofoaj"
+          >Chrome</a
+        >
+        or
+        <a
+          target="_blank"
+          href="https://addons.mozilla.org/en-US/firefox/addon/nostr-connect/"
+          >Firefox</a
+        >. You can also find a list of available Signers
+        <a
+          target="_blank"
+          href="https://github.com/aljazceru/awesome-nostr#nip-07-browser-extensions"
+          >here</a
+        >.
+      </p>
+
+      <p>
+        Then, open the extension, generate a private key and click save. That's
+        all, you are now part of Nostr.
+      </p>
+
+      <p>Other ways to generate a key:</p>
+
+      <ul>
+        <li>
+          Use key mining tools like
+          <a target="_blank" href="https://github.com/grunch/rana">rana</a>.
+        </li>
+        <li>
+          Use
+          <a target="_blank" href="https://github.com/fiatjaf/noscl"
+            >nostr CLI</a
+          >
+        </li>
+        <li>
+          Use platforms like
+          <a target="_blank" href="https://primal.net">primal</a>,
+          <a target="_blank" href="https://snort.social/">snort</a> or
+          <a target="_blank" href="https://coracle.social/">coracle</a>.
+        </li>
+      </ul>
+
+      <h3
+        id="configure your profile"
+        class="pt-4 w-full border-t border-white/20"
+      >
+        configure your profile
+      </h3>
+
+      <p>
+        Visit
+        <a target="_blank" href="https://metadata.nostr.com/"
+          >Nostr Profile Manager</a
+        >
+        and configure your profile:
+      </p>
+
+      <ul>
+        <li>Configure the Metadata fields.</li>
+        <li>
+          Add some relays. Check out
+          <a target="_blank" href="https://nostr.watch">nostr.watch</a> for a
+          list of relays.
+        </li>
+      </ul>
+
+      <h3 id="logging in" class="pt-4 w-full border-t border-white/20">
+        logging in
+      </h3>
+
+      <p>
+        After your account is set up, you will be able to log in to any platform
+        that uses the Nostr protocol. Go to any kycnot.me service page, and try
+        to log into the comment section.
+      </p>
+    </div>
+  </article>
+</div>

src/frontend/templates/service.html

@@ -364,7 +364,7 @@
 
 <!-- Comments -->
 <section
-  class="flex flex-col justify-center items-center p-4 pb-12"
+  class="flex flex-col justify-center items-center p-4 mb-16"
   id="discuss"
 >
   <a href="/about#nostr-comments" target="_blank" class="text-xl font-bold">
@@ -397,7 +397,7 @@
     own research.
   </p>
   <!-- div with the ID disgus where you would like to display the comments & form -->
-  <div id="disgus" class="max-w-xl">
+  <div id="disgus" class="w-full max-w-xl">
     <noscript>
       <p class="font-bold text-center text-yellow-300">
         You must have JavaScript enabled to see and use comments. It just will

src/tailwind.config.js

@@ -1,8 +1,13 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./src/**/*.{html,js,gohtml}"],
+  content: ["./**/*.{html,js,gohtml}"],
   theme: {
-    extend: {},
+    extend: {
+      fontFamily: {
+        'samo': ['samo', 'monospace'],
+        'inter': ['inter', 'sans-serif'],
+      },
+    },
   },
   plugins: [
     require('@tailwindcss/typography'),