169 lines
7.6 KiB
Text
169 lines
7.6 KiB
Text
<!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="Hero with cape">
|
|
<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="Hero with cape" />
|
|
|
|
<!-- icons and color -->
|
|
<meta name="theme-color" content="#ffffff">
|
|
<meta name="theme-scheme" content="light dark">
|
|
<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="" 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>
|
|
|
|
<!-- "fr": "🇫🇷" -->
|
|
<script type="application/json" id="i18n-data">
|