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

Improve donation section: non-js modals

Browse source
This commit is contained in:
pluja 2021-09-20 21:46:54 +02:00
parent dad5ec8d11
commit 479b770b2b
3 changed files with 142 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

23
kycnot.py
View file

@ -13,8 +13,8 @@ from random import randrange
import ruamel.yaml
import datetime
import os.path
import httpx
import qrcode
import httpx
import os
import re
@ -62,6 +62,7 @@ async def about(request):
r = httpx.get(
"https://codeberg.org/schylza/schylza/raw/branch/main/SUPPORT.md")
donations = yaml.load(r.content)
await generate_donations_qrcodes(donations)
return html(template.render(date=date, title="KYC? Not me!",
subtitle="About KYCNOT.ME",
support=donations))
@ -164,6 +165,26 @@ async def gns(request):
return text('POST request - {}'.format(request.json))
return(html(template.render()))
async def generate_donations_qrcodes(donations):
qr = qrcode.QRCode()
qr.add_data(donations['xmr'])
qr.make(fit=True)
xmr = qr.make_image(fill_color="white", back_color=(26, 26, 26))
qr = qrcode.QRCode()
qr.add_data(donations['btc'])
qr.make(fit=True)
btc = qr.make_image(fill_color="white", back_color=(26, 26, 26))
qr = qrcode.QRCode()
qr.add_data(donations['nano'])
qr.make(fit=True)
nano = qr.make_image(fill_color="white", back_color=(26, 26, 26))
xmr.save("static/img/qrcodes/xmr.png")
btc.save("static/img/qrcodes/btc.png")
nano.save("static/img/qrcodes/nano.png")
async def get_trustpilot_info(service):
r = httpx.get(
f"https://www.trustpilot.com/review/{service['url'].replace('https://', '')[:-1]}")

2
requirements.txt
View file

@ -18,8 +18,10 @@ MarkupSafe==2.0.1
mccabe==0.6.1
multidict==5.1.0
petname==2.6
Pillow==8.3.2
pylint==2.8.3
PyYAML==5.4.1
qrcode==7.3
rfc3986==1.5.0
ruamel.appconfig==0.5.5
ruamel.std.argparse==0.8.3

122
templates/about.html
View file

@ -229,11 +229,50 @@
<h3>Donate</h3>
<p>
Thank you for considering making a donation. Donations help me with server
and domain costs and also are an incentive to keep up with the project :)
and domain costs and also are an incentive to keep up with my projects :)
</p>
<pre>Monero: {{support['xmr']}}</pre>
<pre>Bitcoin: {{support['btc']}}</pre>
<pre>Nano: {{support['nano']}}</pre>
<div class="crypto-donations-container">
<div class="donation-block">
<a class="butn" href="#open-modal-xmr"><i class="fas fa-qrcode"></i> Donate Monero </a>
<div id="open-modal-xmr" class="modal-window">
<div>
<a href="#support" title="Close" class="modal-close"><i class="fa fa-times"></i></a>
<h1>Monero</h1>
<img width="256" src="/static/img/qrcodes/xmr.png"></img>
<pre>{{support['xmr']}}</pre>
<small>This modal DOES NOT require Javascript.</small>
</div>
</div>
</div>
<div class="donation-block">
<a class="butn" href="#open-modal-btc"><i class="fas fa-qrcode"></i> Donate Bitcoin </a>
<div id="open-modal-btc" class="modal-window">
<div>
<a href="#support" title="Close" class="modal-close"><i class="fa fa-times"></i></a>
<h1>Bitcoin</h1>
<img width="256" src="/static/img/qrcodes/btc.png"></img>
<pre>{{support['btc']}}</pre>
<small>This modal DOES NOT require Javascript.</small>
</div>
</div>
</div>
<div class="donation-block">
<a class="butn" href="#open-modal-nano"><i class="fas fa-qrcode"></i> Donate Nano </a>
<div id="open-modal-nano" class="modal-window">
<div>
<a href="#support" title="Close" class="modal-close"><i class="fa fa-times"></i></a>
<h1>Nano</h1>
<img width="256" src="/static/img/qrcodes/nano.png"></img>
<pre>{{support['nano']}}</pre>
<small>This modal DOES NOT require Javascript.</small>
</div>
</div>
</div>
</div>
<p>
Or you can donate with FIAT too:
@ -253,6 +292,81 @@
width: 75vw;
padding: 15px;
}
.modal-window {
position: fixed;
background-color: rgba(255, 255, 255, 0.25);
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999;
visibility: hidden;
opacity: 0;
pointer-events: none;
transition: all 0.3s;
}
.modal-window:target {
visibility: visible;
opacity: 1;
pointer-events: auto;
}
.modal-window > div {
width: 300px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 1em;
background: rgb(26, 26, 26);
}
.modal-window header {
font-weight: bold;
}
.modal-window h1 {
font-size: 150%;
margin: 0 0 15px;
}
.modal-close {
color: #aaa;
line-height: 50px;
font-size: 80%;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 70px;
text-decoration: none;
}
.modal-close:hover {
color: black;
}
.modal-window > div {
border-radius: 1rem;
}
.modal-window div:not(:last-of-type) {
margin-bottom: 15px;
}
.butn {
font-size: medium;
padding: .1em .5em;
border-radius: .1rem;
text-decoration: none;
}
.butn i {
padding-right: 0.3em;
}
small{
font-size: 9px;
color: rgb(53, 52, 52);
}
.crypto-donations-container{
padding: 1.5rem;
padding-left: 0;
}
</style>
{% endblock %}