218 lines
9.8 KiB
HTML
218 lines
9.8 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/icon-512.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/icon-512.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>
|
|
<nav class="navbar" role="navigation" aria-label="main navigation">
|
|
<div class="navbar-brand">
|
|
<a role="button" class="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false">
|
|
<span aria-hidden="true"></span>
|
|
<span aria-hidden="true"></span>
|
|
<span aria-hidden="true"></span>
|
|
<span aria-hidden="true"></span>
|
|
</a><!--/.navbar-burger-->
|
|
</div><!--/.navbar-brand-->
|
|
|
|
<div class="navbar-menu" id="navMenu">
|
|
<div class="navbar-end">
|
|
<div class="navbar-item has-dropdown" id="language-dropdown">
|
|
<a class="navbar-link" id="current-language">🇬🇧 EN</a>
|
|
<div class="navbar-dropdown" id="language-selector">
|
|
<!-- language items filled from js -->
|
|
</div><!--/.navbar-dropdown-->
|
|
</div><!--/.navbar-item .has-dropdown .is-hoverable-->
|
|
</div><!--/.navbar-end-->
|
|
</div><!--/.navbar-menu-->
|
|
</nav><!--/.navbar-->
|
|
|
|
<section class="section">
|
|
<div class="container">
|
|
<h1 class="title">🦸 BezahlBrudi</h1>
|
|
<p class="subtitle" data-i18n="subtitle"></p>
|
|
<p data-i18n="explain"></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" data-i18n="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" data-i18n="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" data-i18n="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" data-i18n="bic-help"></p>
|
|
</div>
|
|
|
|
<div id="amount" class="field">
|
|
<label for="input-amount" class="label" data-i18n="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" data-i18n="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" />
|
|
<span data-i18n="remember"></span>
|
|
</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.2.0</strong> by <a href="https://xengi.de">XenGi</a>.
|
|
<span data-i18n="disclaimer">
|
|
The source code is licensed under <a href="https://opensource.org/license/mit">MIT</a>, you can find it <a href="https://gitlab.com/xengi/bezahlbrudi/">here</a>.
|
|
<br/>
|
|
This site doesn't store any data outside your browser, not even cookies. The "Remember data" function stores your data in your browsers local storage. This site doesn't provide any financial services. It is a simple QR code generator.</span>
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script type="application/json" id="i18n-data">
|
|
{
|
|
"_flags": {
|
|
"en": "🇬🇧",
|
|
"de": "🇩🇪"
|
|
},
|
|
"subtitle": {
|
|
"en": "Transfer money without any 3rd parties",
|
|
"de": "Geld überweisen ohne Drittanbieter"
|
|
},
|
|
"explain": {
|
|
"en": "Simply fill in your details and scan the QR code with your banking app. Give it a try!",
|
|
"de": "Trag deine Daten ein und scanne den QR Code einfach mit deiner Banking-App. Probier es aus!"
|
|
},
|
|
"name": {
|
|
"en": "Receiver Name",
|
|
"de": "Empfänger Name"
|
|
},
|
|
"iban": {
|
|
"en": "Receiver IBAN",
|
|
"de": "Empfänger IBAN"
|
|
},
|
|
"bic": {
|
|
"en": "Receiver BIC",
|
|
"de": "Empfänger BIC"
|
|
},
|
|
"bic-help": {
|
|
"en": "Only needed if the Sender or Receiver IBAN is outside the EU",
|
|
"de": "Nur nötig wenn Sender oder Empfänger IBAN außerhalb der EU ist"
|
|
},
|
|
"amount": {
|
|
"en": "Amount",
|
|
"de": "Betrag"
|
|
},
|
|
"purpose": {
|
|
"en": "Purpose",
|
|
"de": "Verwendungszweck"
|
|
},
|
|
"remember": {
|
|
"en": "Remember data",
|
|
"de": "Daten merken"
|
|
},
|
|
"disclaimer": {
|
|
"en": "The source code is licensed under <a href=\"https://opensource.org/license/mit\">MIT</a>, you can find it <a href=\"https://gitlab.com/xengi/bezahlbrudi/\">here</a>.<br/>This site doesn't store any data outside your browser, not even cookies. The \"Remember data\" function stores your data in your browsers local storage.<br/>This site doesn't provide any financial services. It is a simple QR code generator.",
|
|
"de": "Der Quellcode ist lizensiert unter <a href=\"https://opensource.org/license/mit\">MIT</a>, du kannst ihn <a href=\"https://gitlab.com/xengi/bezahlbrudi/\">hier</a> finden.<br/>Diese Seite speichert keine Daten außerhalb deines Browsers, noch nicht einmal Cookies. Die \"Daten merken\" Funktion speichert Daten im Local Storage des Browsers.<br/>Diese Seite bietet keine Finanzdienstleistungen an. Sie ist lediglich ein QR Code Generator."
|
|
}
|
|
}
|
|
</script>
|
|
<script src="js/index.js"></script>
|
|
</body>
|
|
</html>
|