Write the docs and create the styling for it

This commit is contained in:
Aljaz S
2021-11-16 21:14:14 +01:00
parent b6aefe9ce4
commit da655729ac
2 changed files with 171 additions and 0 deletions

120
src/index.html Normal file
View File

@@ -0,0 +1,120 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UPN-QR | Open generator for UPN QR codes</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<section>
<h1>About</h1>
<p>
This API was developed for personal use, but modified and later released for public use.
It is an unofficial application with the sole purpose of simplifying QR code generation for universal payment ordes (<a href="https://upn-qr.si">https://upn-qr.si</a>).
The application does not keep any long-term logs.
</p>
</section>
<section>
<h1>Terms of usage</h1>
<p>Because <a href="https://www.upn-qr.si/" target="_blank">upn-qr.si</a> prohobits the generation and use of UPN-QR codes by any unapthorized party, you must be <a href="https://upn-qr.si/sl/izdajatelji">authorized</a> in order to use this application and publish the content that it generates.</p>
</section>
<section>
<h1>API</h1>
<a href="#api-qrcode"><h4 id="api-qrcode">1. <code>/api/qrcode</code></h4></a>
<p>Following the specification from official documentation - <a href="https://www.upn-qr.si/uploads/files/NavodilaZaProgramerjeUPNQR.pdf">NavodilaZaProgramerjeUPNQR.pdf</a>, section 4. - "Vsebina kode QR"</p>
<br>
<div>
<b>Query parameters:</b>
<a href="#api-qrcode-payer_name"><h5 id="api-qrcode-payer_name"><code>payer_name</code></h5></a>
<div>
Regex: <code>^[a-zA-Z0-9ČŠŽĐ](?:[A-Z0-9 ČŠŽĐ]{0,31}[A-Z0-9ČŠŽĐ])?$/i</code>
<br>
Demo: <a href="https://regex101.com/r/t9EaM3/1">regex101.com/r/t9EaM3/1</a>
</div>
<a href="#api-qrcode-payer_address"><h5 id="api-qrcode-payer_address"><code>payer_address</code></h5></a>
<div>
Regex: <code>^[a-zA-Z0-9ČŠŽĐ](?:[A-Z0-9 ČŠŽĐ]{0,31}[A-Z0-9ČŠŽĐ])?$/i</code>
<br>
Demo: <a href="https://regex101.com/r/JA4wmM/1">regex101.com/r/JA4wmM/1</a>
</div>
<a href="#api-qrcode-payer_city"><h5 id="api-qrcode-payer_city"><code>payer_city</code></h5></a>
<div>
Regex: <code>^[a-zA-Z0-9ČŠŽĐ](?:[A-Z0-9 ČŠŽĐ]{0,31}[A-Z0-9ČŠŽĐ])?$/i</code>
<br>
Demo: <a href="https://regex101.com/r/pK3oEm/1">regex101.com/r/5QMpTn/1</a>
</div>
<a href="#api-qrcode-payer_amount"><h5 id="api-qrcode-payer_amount"><code>payer_amount</code></h5></a>
<div>
Regex: <code>^(?=.{11}$)[0]{1,11}[1-9]{0,11}$</code>
<br>
Demo: <a href="https://regex101.com/r/kbIqwu/1">regex101.com/r/kbIqwu/1</a>
</div>
<a href="#api-qrcode-purpose_code"><h5 id="api-qrcode-purpose_code"><code>purpose_code</code></h5></a>
<div>
Regex: <code>^[A-Z]{4}$</code>
<br>
Demo: <a href="https://regex101.com/r/TsiZQJ/1">regex101.com/r/TsiZQJ/1</a>
<br>
Default: OTHR
</div>
<a href="#api-qrcode-payment_purpose"><h5 id="api-qrcode-payment_purpose"><code>payment_purpose</code></h5></a>
<div>
Regex: <code>^[A-Z0-9ČŠŽĐ](?:[A-Z0-9 ČŠŽĐ]{0,40}[A-Z0-9ČŠŽĐ])?$</code>
<br>
Demo: <a href="https://regex101.com/r/y7kUXP/1">regex101.com/r/y7kUXP/1</a>
</div>
<a href="#api-qrcode-iban"><h5 id="api-qrcode-iban"><code>iban</code></h5></a>
<div>
Regex: <code>^[A-Z]{2}\d{17}$</code>
<br>
Demo: <a href="https://regex101.com/r/8bXDvh/1">regex101.com/r/8bXDvh/1</a>
</div>
<a href="#api-qrcode-reference"><h5 id="api-qrcode-reference"><code>reference</code></h5></a>
<div>
Regex: <code>^[A-Z]{2}[0-9\-]{1,24}$</code>
<br>
Demo: <a href="https://regex101.com/r/2tSYMw/1">regex101.com/r/2tSYMw/1</a>
</div>
<a href="#api-qrcode-issuer_name"><h5 id="api-qrcode-issuer_name"><code>issuer_name</code></h5></a>
<div>
Regex: <code>^[a-zA-Z0-9ČŠŽĐ](?:[A-Z0-9 ČŠŽĐ]{0,31}[A-Z0-9ČŠŽĐ])?$/i</code>
<br>
Demo: <a href="https://regex101.com/r/DFjB0D/1">regex101.com/r/DFjB0D/1</a>
</div>
<a href="#api-qrcode-issuer_address"><h5 id="api-qrcode-issuer_address"><code>issuer_address</code></h5></a>
<div>
Regex: <code>^[a-zA-Z0-9ČŠŽĐ](?:[A-Z0-9 ČŠŽĐ]{0,31}[A-Z0-9ČŠŽĐ])?$/i</code>
<br>
Demo: <a href="https://regex101.com/r/5oKk0T/1">regex101.com/r/5oKk0T/1</a>
</div>
<a href="#api-qrcode-issuer_city"><h5 id="api-qrcode-issuer_city"><code>issuer_city</code></h5></a>
<div>
Regex: <code>^[a-zA-Z0-9ČŠŽĐ](?:[A-Z0-9 ČŠŽĐ]{0,31}[A-Z0-9ČŠŽĐ])?$/i</code>
<br>
Demo: <a href="https://regex101.com/r/JfuNU1/1">regex101.com/r/JfuNU1/1</a>
</div>
<!-- <h5><code>query</code></h5>
<div>
Regex: <code></code>
<br>
Demo: <a href=""></a>
</div> -->
</div>
</section>
</body>
</html>

51
src/style.css Normal file
View File

@@ -0,0 +1,51 @@
body,
html {
margin: 0;
padding: 0;
max-width: 100vw;
overflow-x: hidden;
--c-dark: #202124;
--c-darkish: #303134;
--c-primary: #e8eaed;
--c-accent: #C58AF9;
}
html {
padding: 0 0;
width: 100vw;
display: grid;
grid-template-columns: auto minmax(50vw, 550px) auto;
background-color: var(--c-dark);
}
body {
grid-column: 2;
padding: 15px;
margin: 30px 10px;
display: grid;
grid-template-columns: auto;
grid-auto-rows: auto;
row-gap: 2rem;
border-radius: 1rem;
background-color: var(--c-darkish);
color: var(--c-primary);
font-family: monospace;
font-size: 16px;
line-height: 1.6em;
}
a {
color: var(--c-accent);
text-decoration: none;
}
code {
background-color: var(--c-dark);
padding: 6px 4px 2px 4px;
word-break: break-all;
}
section div {
padding-left: 25px;
}