Git-Mirrors/kycnot.me
1
0
Fork 0
mirror of https://codeberg.org/pluja/kycnot.me synced 2025-03-26 19:08:09 -04:00
Code Issues Packages Projects Releases Wiki Activity

styling improvements

Browse Source
This commit is contained in:
pluja 2024-02-19 09:29:05 +01:00
parent 65b3dc4265
commit fb3021b959
3 changed files with 176 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

170
src/frontend/templates/about.html
View File

@ -1,10 +1,4 @@
<style>
article {
margin-left: 1rem;
margin-right: 1rem;
font-size: 1rem;
}
article p {
margin-bottom: 1rem;
font-size: 1.05rem;
@ -48,21 +42,6 @@
content: "~ ";
}
ul {
margin-top: 0.3rem;
margin-bottom: 0.5rem;
padding-left: 1rem;
list-style: square;
}
li {
margin-bottom: 0.15rem;
}
li a {
text-decoration: none;
}
article blockquote {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
@ -94,10 +73,10 @@
}
</style>
<div id="main" class="flex flex-col justify-center items-center my-8">
<div id="main" class="flex flex-col justify-center items-center">
<div class="p-4 w-full max-w-4xl">
<div
class="space-x-1 text-sm font-bold text-center text-lime-500 lowercase font-samo"
class="space-x-1 text-xs font-bold text-center text-lime-500 lowercase md:text-sm font-samo"
>
<a href="#why">Why</a>
·
@ -124,8 +103,9 @@
<a href="#disclaimer">disclaimer</a>
</div>
</div>
<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">
<article class="max-w-5xl font-inter">
<div class="p-2 m-2 rounded-xl bg-gray-500/10">
<h2 id="why" class="font-bold text-lime-400">why kycnot.me?</h2>
<p>
Cryptocurrencies were created to revolutionize the way we pay for goods
@ -151,9 +131,7 @@
</p>
</div>
<div class="my-4 w-full border border-t border-white/20"></div>
<div class="px-4 py-2 m-2 rounded-xl bg-gray-500/10">
<div class="p-2 m-2 rounded-xl bg-gray-500/10">
<h2 id="what" class="font-bold text-lime-400">what's KYC?</h2>
<div class="space-y-2">
<p>
@ -198,17 +176,15 @@
</div>
<h3 id="other-acronyms-of-interest">other acronyms of interest</h3>
<ul>
<li><strong>AML</strong>: Anti-Money Laundering</li>
<li><strong>CFT</strong>: Combating the Financing of Terrorism</li>
<li><strong>SoF</strong>: Source of Funds</li>
<li><strong>ToS</strong>: Terms of Service</li>
</ul>
<div class="[&>span]:block space-y-2">
<span><strong>AML</strong>: Anti-Money Laundering</span>
<span><strong>CFT</strong>: Combating the Financing of Terrorism</span>
<span><strong>SoF</strong>: Source of Funds</span>
<span><strong>ToS</strong>: Terms of Service</span>
</div>
</div>
<div class="my-4 w-full border border-t border-white/20"></div>
<div class="px-4 py-2 m-2 rounded-xl bg-gray-500/10">
<div class="p-2 m-2 rounded-xl bg-gray-500/10">
<h2 id="btcxmr">why only Bitcoin and Monero?</h2>
<p>
<strong>Bitcoin</strong>: it is the most well-known cryptocurrency. It's
@ -226,9 +202,7 @@
</p>
</div>
<div class="my-4 w-full border border-t border-white/20"></div>
<div class="px-4 py-2 m-2 rounded-xl bg-gray-500/10">
<div class="p-2 m-2 rounded-xl bg-gray-500/10">
<h2 id="listings">listings</h2>
<h3 id="request">request</h3>
<p>
@ -271,24 +245,24 @@
see 3 possible filters:
</p>
<ul>
<li>
<div class="[&>span]:block space-y-2">
<span>
<b>Type filter</b>: Lets you choose between seeing all the listings
(default), only exchanges, or only services.
</li>
<li>
</span>
<span>
<b>Search bar</b>: The search bar is the most powerful filter. You can
use it to perform a full-text search on the listings. The search will
look for the text you enter in the name, description, keywords and
category. The search is not case-sensitive.
</li>
<li>
</span>
<span>
<b>Currency filter</b>: Lets you choose between seeing all the
listings (default), only listings that accept a certain currency. If
you choose more than one option, it will show all the listings that
accept all of the selected currencies.
</li>
</ul>
</span>
</div>
<h3 id="levels">kyc Levels</h3>
@ -357,9 +331,7 @@
</p>
</div>
<div class="my-4 w-full border border-t border-white/20"></div>
<div class="px-4 py-2 m-2 rounded-xl bg-gray-500/10">
<div class="p-2 m-2 rounded-xl bg-gray-500/10">
<h2 id="tos">terms of service auto-reviews</h2>
<p>
@ -382,9 +354,7 @@
</p>
</div>
<div class="my-4 w-full border border-t border-white/20"></div>
<div class="px-4 py-2 m-2 rounded-xl bg-gray-500/10">
<div class="p-2 m-2 rounded-xl bg-gray-500/10">
<h2 id="support">support this project</h2>
<p>
@ -393,8 +363,8 @@
>, you can donate using the following methods:
</p>
<ul class="py-3 space-y-6 list-none">
<li>
<div class="[&>span]:block space-y-2">
<span>
<span class="flex items-center space-x-2">
<svg
xmlns="http://www.w3.org/2000/svg"
@ -468,8 +438,8 @@
alt="Monero address QR code"
/>
</details>
</li>
<li>
</span>
<span>
<span class="flex items-center space-x-2">
<svg
xmlns="http://www.w3.org/2000/svg"
@ -536,8 +506,8 @@
alt="Bitcoin Address QR Code"
/>
</details>
</li>
<li>
</span>
<span>
<span class="flex items-center space-x-2">
<svg
xmlns="http://www.w3.org/2000/svg"
@ -562,8 +532,8 @@
>Tip via Lightning Network</a
>
</span>
</li>
</ul>
</span>
</div>
<p class="px-4 text-sm text-white/60">
Note: I fund this project entirely on my own, as an independent
@ -578,9 +548,7 @@
</p>
</div>
<div class="my-4 w-full border border-t border-white/20"></div>
<div class="px-4 py-2 m-2 rounded-xl bg-gray-500/10">
<div class="p-2 m-2 rounded-xl bg-gray-500/10">
<h2 id="contact">contact</h2>
<p>
Due to misuse and the inability to manage them effectively, I have
@ -595,34 +563,32 @@
messaging option.
</p>
<ul>
<li>
<div class="[&>span]:block space-y-2">
<span>
<a
target="_blank"
rel="noreferrer"
href="https://fosstodon.org/@kycnotme"
>🦣 Mastodon</a
>
</li>
<li>
</span>
<span>
<a
target="_blank"
rel="noreferrer"
href="https://njump.me/npub188x98j0r7l2fszeph6j7hj99h8xl07n989pskk5zd69d2fcksetq5mgcqf"
>🪶 Nostr</a
>
</li>
<li>
</span>
<span>
<a target="_blank" rel="noreferrer" href="https://lemmy.world/u/pluja"
>🐭 Lemmy</a
>
</li>
</ul>
</span>
</div>
</div>
<div class="my-4 w-full border border-t border-white/20"></div>
<div class="px-4 py-2 m-2 rounded-xl bg-gray-500/10">
<div class="p-2 m-2 rounded-xl bg-gray-500/10">
<h2 id="comments">(nostr) comments</h2>
<p>
@ -652,9 +618,7 @@
</p>
</div>
<div class="my-4 w-full border border-t border-white/20"></div>
<div class="px-4 py-2 m-2 rounded-xl bg-gray-500/10">
<div class="p-2 m-2 rounded-xl bg-gray-500/10">
<h2 id="transparency">transparency</h2>
<p>
@ -663,27 +627,25 @@
achieve this:
</p>
<ul>
<li>
<div class="[&>span]:block space-y-2">
<span>
<a href="https://github.com/pluja/kycnotme">Open Source Code</a> - A
commit history, and full disclosure of the scoring algorithm is
provided.
</li>
<li>
Public comment section on each page, available on
</span>
<span>
Pubspanc comment section on each page, available on
<a target="_blank" href="https://usenostr.org">Nostr</a>.
</li>
<li>Endpoint to download the full database</li>
<li>
</span>
<span>Endpoint to download the full database</span>
<span>
Open scoring algorithm. All services go under the same algorithm,
meaning that the score is not subjective.
</li>
</ul>
</span>
</div>
</div>
<div class="my-4 w-full border border-t border-white/20"></div>
<div class="px-4 py-2 m-2 rounded-xl bg-gray-500/10">
<div class="p-2 m-2 rounded-xl bg-gray-500/10">
<h2 id="privacy">privacy</h2>
<p>
@ -701,24 +663,22 @@
</p>
<p>Only things that <b>require</b> JavaScript to be enabled are:</p>
<ul>
<li>
<div class="[&>span]:block space-y-2">
<span>
<b>Requests</b>: The Proof-Of-Work captcha, that I coded myself, needs
JavaScript for the verfication. The code is public, and you can read
it yourself on the repo.
</li>
<li>
</span>
<span>
<b>Comments</b>: The comment section on each of the services, needs
JavaScript since it needs to fetch and post to Nostr. The code that
makes this interaction is also fully open source and can be reviewed
in the repo as well.
</li>
</ul>
</span>
</div>
</div>
<div class="my-4 w-full border border-t border-white/20"></div>
<div class="px-4 py-2 m-2 rounded-xl bg-gray-500/10">
<div class="p-2 m-2 rounded-xl bg-gray-500/10">
<h2 id="api">api</h2>
<p>KYCnot.me offers a public API to get its data.</p>
@ -745,9 +705,7 @@
</p>
</div>
<div class="my-4 w-full border border-t border-white/20"></div>
<div class="px-4 py-2 m-2 rounded-xl bg-gray-500/10">
<div class="p-2 m-2 rounded-xl bg-gray-500/10">
<h2 id="referrals">referrals</h2>
<p>
@ -780,9 +738,7 @@
</p>
</div>
<div class="my-4 w-full border border-t border-white/20"></div>
<div class="px-4 py-2 m-2 rounded-xl bg-gray-500/10">
<div class="p-2 m-2 rounded-xl bg-gray-500/10">
<h2 id="disclaimer">disclaimer</h2>
<p>

146
src/frontend/templates/partials/kyc_level.html
View File

@ -1,48 +1,118 @@
<div class="flex flex-col justify-center max-w-lg p-4 text-sm border rounded-lg md:text-base
<div
class="flex flex-col justify-center max-w-lg p-4 text-sm border rounded-lg md:text-base
{{if eq . 0}} border-green-500/20 bg-green-500/10
{{else if eq . 1}} border-lime-300/40 bg-lime-300/10
{{else if eq . 2}} border-amber-700/40 bg-amber-600/20
{{else if eq . 3}} border-red-600/40 bg-red-600/20
{{end}}
">
<h2 class="flex items-center space-x-2 text-lg font-bold">
{{if eq . 0}}
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-green-600 circle-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="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z" stroke-width="0" fill="currentColor"></path>
</svg>
{{else if eq . 1}}
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-lime-400/70 circle-check" 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 12l2 2l4 -4"></path>
</svg>
{{else if eq . 2}}
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-amber-600 alert-triangle-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 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"></path>
</svg>
{{else if eq . 3}}
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-red-600 alert-octagon-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="M14.897 1a4 4 0 0 1 2.664 1.016l.165 .156l4.1 4.1a4 4 0 0 1 1.168 2.605l.006 .227v5.794a4 4 0 0 1 -1.016 2.664l-.156 .165l-4.1 4.1a4 4 0 0 1 -2.603 1.168l-.227 .006h-5.795a3.999 3.999 0 0 1 -2.664 -1.017l-.165 -.156l-4.1 -4.1a4 4 0 0 1 -1.168 -2.604l-.006 -.227v-5.794a4 4 0 0 1 1.016 -2.664l.156 -.165l4.1 -4.1a4 4 0 0 1 2.605 -1.168l.227 -.006h5.793zm-2.887 14l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -8a1 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"></path>
</svg>
{{end}}
<span>
KYC LEVEL <b>{{.}}</b>
</span>
</h2>
"
>
<h2 class="flex items-center space-x-2 text-lg font-bold">
{{if eq . 0}}
<p class="mt-2 text-sm">The exchange ToS <b class="font-bold">do not mention</b> that it will ever request the user for a KYC verification.</p>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-5 h-5 text-green-600 circle-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="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"
stroke-width="0"
fill="currentColor"
></path>
</svg>
{{else if eq . 1}}
<p class="mt-2 text-sm">KYC is <b class="font-bold">not mentioned</b>, but this service <b class="font-bold">reserves the right to share data</b> with representatives of the authorities, block funds or reject transactions.</p>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-5 h-5 text-lime-400/70 circle-check"
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 12l2 2l4 -4"></path>
</svg>
{{else if eq . 2}}
<p class="mt-2 text-sm">The exchange <b class="font-bold">may request KYC from any user at any time</b>, typically triggered by an automated flag system, leading to a temporary block of funds.</p>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-5 h-5 text-amber-600 alert-triangle-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 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"
></path>
</svg>
{{else if eq . 3}}
<p class="mt-2 text-sm">KYC is <b class="font-bold">mandatory to use some features</b>. A non-KYCed user can be required to verify their identity at any time or any moment for any reason.</p>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-5 h-5 text-red-600 alert-octagon-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="M14.897 1a4 4 0 0 1 2.664 1.016l.165 .156l4.1 4.1a4 4 0 0 1 1.168 2.605l.006 .227v5.794a4 4 0 0 1 -1.016 2.664l-.156 .165l-4.1 4.1a4 4 0 0 1 -2.603 1.168l-.227 .006h-5.795a3.999 3.999 0 0 1 -2.664 -1.017l-.165 -.156l-4.1 -4.1a4 4 0 0 1 -1.168 -2.604l-.006 -.227v-5.794a4 4 0 0 1 1.016 -2.664l.156 -.165l4.1 -4.1a4 4 0 0 1 2.605 -1.168l.227 -.006h5.793zm-2.887 14l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -8a1 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"
></path>
</svg>
{{end}}
</div>
<span> KYC LEVEL <b>{{.}}</b> </span>
</h2>
{{if eq . 0}}
<p class="mt-2 text-sm">
The exchange ToS <b class="font-bold">do not mention</b> that it will ever
request the user for a KYC verification.
</p>
{{else if eq . 1}}
<p class="mt-2 text-sm">
KYC is <b class="font-bold">not mentioned</b>, but this service
<b class="font-bold">reserves the right to share data</b> with
representatives of the authorities, block funds or reject transactions.
</p>
{{else if eq . 2}}
<p class="mt-2 text-sm">
The exchange
<b class="font-bold">may request KYC from any user at any time</b>,
typically triggered by an automated flag system, leading to a temporary
block of funds.
</p>
{{else if eq . 3}}
<p class="mt-2 text-sm">
KYC is <b class="font-bold">mandatory to use some features</b>. A non-KYCed
user can be required to verify their identity at any time or any moment for
any reason.
</p>
{{end}}
</div>

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

@ -36,12 +36,12 @@
<!-- Service Header -->
<div class="flex justify-center items-center space-x-4">
<img
class="w-14 h-14 rounded-full bg-white/25"
class="rounded-full size-10 md:size-14 bg-white/25"
src="/api/g/picture/{{.Service.ID}}"
alt=""
/>
<span class="flex justify-center items-center capitalize">
<span class="text-3xl font-bold">{{.Service.Name}}</span>
<span class="text-xl font-bold md:text-2xl">{{.Service.Name}}</span>
{{if .Service.Verified}}
<a href="/about#verified">
<svg
@ -70,9 +70,9 @@
<!-- Links -->
<div
class="flex justify-center items-center mt-4 font-bold text-md md:text-md"
class="flex justify-center items-center mt-4 text-sm font-bold md:text-md"
>
<div class="flex justify-center items-center">
<div class="flex flex-wrap justify-center items-center">
<a
href="{{randomElem .Service.Urls}}{{.Service.Referral}}"
target="_blank"
@ -192,7 +192,7 @@
{{end}}
<a
href="#discuss"
class="flex 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 bg-zinc-900 hover:border-lime-600 hover:text-lime-600"
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"