147 lines
6.7 KiB
HTML
147 lines
6.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="robots" content="index, follow">
|
|
|
|
<!-- mobile app and bookmarks -->
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-title" content="BezahlBrudi">
|
|
<meta name="application-name" content="BezahlBrudi">
|
|
|
|
<!-- seo data -->
|
|
<meta name="description" lang="en" content="Webapp that generates GiroCodes (EPC QR-Code) so that you can easily exchange money with friends and family without involving third party financial services">
|
|
<meta name="keywords" lang="en" content="giro, sepa, money, finance">
|
|
<meta name="author" content="XenGi">
|
|
<link rel="canonical" href="https://bezahlbrudi.jetzt">
|
|
|
|
<!-- social media -->
|
|
<meta property="og:title" content="BezahlBrudi">
|
|
<meta property="og:description" content="Webapp that generates GiroCodes (EPC QR-Code) so that you can easily exchange money with friends and family without involving third party financial services">
|
|
<meta property="og:image" content="https://bezahlbrudi.jetzt/img/sticker.png">
|
|
<meta property="og:image:alt" content="Guy in a blue suit and cape presenting a smartphone showing a QR code pointing to the BezahlBrudi webapp">
|
|
<meta name="twitter:title" content="BezahlBrudi">
|
|
<meta name="twitter:description" content="Webapp that generates GiroCodes (EPC QR-Code) so that you can easily exchange money with friends and family without involving third party financial services">
|
|
<meta name="twitter:url" content="https://bezahlbrudi.jetzt/?src=twitter" />
|
|
<meta name="twitter:image:src" content="https://bezahlbrudi.jetzt/img/sticker.png" />
|
|
<meta name="twitter:image:alt" content="Guy in a blue suit and cape presenting a smartphone showing a QR code pointing to the BezahlBrudi webapp" />
|
|
|
|
<!-- icons and color -->
|
|
<meta name="theme-color" content="#000000">
|
|
<meta name="theme-scheme" content="dark light">
|
|
<link rel="icon" type="image/png" sizes="96x96" href="/img/favicon-96x96.png">
|
|
<link rel="icon" type="image/svg+xml" sizes="any" href="/img/favicon.svg">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/img/apple-touch-icon.png">
|
|
<link rel="shortcut icon" href="/favicon.ico">
|
|
<!-- PWA -->
|
|
<link rel="manifest" href="/site.webmanifest">
|
|
|
|
<title>BezahlBrudi</title>
|
|
|
|
<style>
|
|
/* Chrome, Safari, Edge, Opera */
|
|
input::-webkit-outer-spin-button,
|
|
input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Firefox */
|
|
input[type=number] {
|
|
-moz-appearance: textfield;
|
|
}
|
|
div#qr-code canvas {
|
|
max-width: 100%;
|
|
}
|
|
</style>
|
|
<link rel="stylesheet" href="css/bulma.min.css">
|
|
<script src="js/qr-creator.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<section class="section">
|
|
<div class="container">
|
|
<h1 class="title">🦸 BezahlBrudi</h1>
|
|
<p class="subtitle">Transfer money without any 3rd parties</p>
|
|
<p>The QR code can be scanned by most banking apps. Give it a try!</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="columns">
|
|
<div class="column">
|
|
<div id="name" class="field">
|
|
<label for="input-name" class="label">Receiver Name</label>
|
|
<div class="control has-icons-right">
|
|
<input id="input-name" class="input" type="text" placeholder="Receiver Name" value="" maxlength="70" required>
|
|
<span class="icon is-small is-right"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="iban" class="field">
|
|
<label for="input-iban" class="label">Receiver IBAN</label>
|
|
<div class="control has-icons-right">
|
|
<input id="input-iban" class="input" type="text" value="" required>
|
|
<span class="icon is-small is-right"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="bic" class="field">
|
|
<label for="input-bic" class="label">Receiver BIC</label>
|
|
<div class="control has-icons-right">
|
|
<input id="input-bic" class="input" type="text" value="">
|
|
<span class="icon is-small is-right"></span>
|
|
</div>
|
|
<p class="help">Only needed if the Sender and/or Receiver IBAN is outside the EU</p>
|
|
</div>
|
|
|
|
<div id="amount" class="field">
|
|
<label for="input-amount" class="label">Amount</label>
|
|
<div class="control has-icons-left has-icons-right">
|
|
<input id="input-amount" class="input" type="number" min="0.00" step="0.01" value="0.00" pattern="[0-9]+.[0-9]{2}" placeholder="0.00" required>
|
|
<span class="icon is-small is-left"><b>€</b></span>
|
|
<span class="icon is-small is-right"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="purpose" class="field">
|
|
<label for="input-purpose" class="label">Purpose</label>
|
|
<div class="control has-icons-right">
|
|
<input id="input-purpose" class="input" type="text" placeholder="Pizza night!" value="" maxlength="140" required>
|
|
<span class="icon is-small is-right"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="checkbox">
|
|
<input id="rememberme" type="checkbox" />
|
|
Remember me
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column">
|
|
<figure class="image is-square">
|
|
<div id="qr-code"></div>
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="footer">
|
|
<div class="content has-text-centered">
|
|
<p>
|
|
<strong>BezahlBrudi v1.1.0</strong> by <a href="https://xengi.de">XenGi</a>.
|
|
The source code is licensed <a href="https://opensource.org/license/mit">MIT</a>. Find the source code on <a href="https://gitlab.com/xengi/bezahlbrudi/">GitLab</a>.
|
|
<br/>
|
|
This site doesn't store any data outside your browser, not even cookies. The "Remember me" function stores your data in your browsers local storage. This site doesn't provide any financial services. It is a simple QR code generator.
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="js/index.js"></script>
|
|
</body>
|
|
</html>
|