fix git url

Italiano

See merge request XenGi/bezahlbrudi!1

.gitignore

@@ -1,4 +1,5 @@
 tmp/
+index.html
 
 # Created by https://www.toptal.com/developers/gitignore/api/linux,windows,macos,direnv,vim,webstorm+all
 # Edit at https://www.toptal.com/developers/gitignore?templates=linux,windows,macos,direnv,vim,webstorm+all

.gitlab-ci.yml

@@ -1,21 +1,17 @@
-image: debian:stable
+image: alpine:latest
 
 before_script:
-  - apt update
+  - apk add --no-cache make curl unzip jq
-  - apt install -y make curl unzip
 
 pages:
   script:
-    - make
+    - make all
-    - mkdir -p public/{css,js}
+    - mkdir -p public/css public/js public/img
-    - cp index.html public/index.html
+    - cp index.html sticker.png site.webmanifest favicon.ico public/
-    - cp css/bulma.min.css public/css/bulma.min.css
+    - cp css/bulma.min.css public/css/
-    - cp js/index.js public/js/index.js
+    - cp js/index.js js/service-worker.js js/qr-creator.min.js js/qr-creator.min.js.map public/js/
-    - cp js/qr-creator.min.js public/js/qr-creator.min.js
-    - cp site.webmanifest public/site.webmanifest
-    - cp favicon.ico public/favicon.ico
     - cp -r img public/
-    - cp sticker.png /public/img/sticker.png
+    
   artifacts:
     paths:
       - public

Makefile

@@ -1,20 +1,28 @@
-all: bulma qr-creator
+BULMA_RELEASE=$(shell curl -Ls "https://api.github.com/repos/jgthms/bulma/releases/latest" | jq -r '.tag_name')
+
+all: bulma qr-creator index.html
 
 .PHONY: bulma
 bulma:
 	mkdir -p tmp
-	curl -Lsf https://github.com/jgthms/bulma/releases/download/1.0.2/bulma-1.0.2.zip -o tmp/bulma.zip
+	curl -Lsf https://github.com/jgthms/bulma/releases/download/${BULMA_RELEASE}/bulma-${BULMA_RELEASE}.zip -o tmp/bulma.zip
 	unzip -o -d tmp/ tmp/bulma.zip
 	mkdir -p css
 	cp tmp/bulma/css/bulma.css css/bulma.css
 	cp tmp/bulma/css/bulma.css.map css/bulma.css.map
 	cp tmp/bulma/css/bulma.min.css css/bulma.min.css
 
+# https://nimiq.github.io/qr-creator/
 .PHONY: qr-creator
 qr-creator:
-	curl -Lsf https://cdn.jsdelivr.net/npm/qr-creator/dist/qr-creator.min.js -o js/qr-creator.min.js
+	curl -Lsf https://unpkg.com/qr-creator@1.0.0/dist/qr-creator.es6.min.js -o js/qr-creator.es6.min.js
-	curl -Lsf https://raw.githubusercontent.com/nimiq/qr-creator/refs/heads/master/src/qr-creator.js -o js/qr-creator.js
+	curl -Lsf https://unpkg.com/qr-creator@1.0.0/dist/qr-creator.min.js -o js/qr-creator.min.js
+	curl -Lsf https://unpkg.com/qr-creator@1.0.0/dist/qr-creator.min.js.map -o js/qr-creator.min.js.map
+
+index.html: index.html.pre i18n.json index.html.post
+	cat index.html.pre i18n.json index.html.post > index.html
 
 .PHONY: install
-install:
+install: index.html
-	rsync -var --progress ./css ./js ./index.html ./site.webmanifest mariko:/srv/www/bezahlbrudi.jetzt/
+	rsync -var --progress ./img ./css ./js ./index.html ./site.webmanifest ./sticker.png mariko:/srv/www/bezahlbrudi.jetzt/
+

README.md

@@ -1,16 +1,28 @@
-![Screenshot](https://gitlab.com/XenGi/bezahlbrudi/-/raw/main/screenshot.png?ref_type=heads "Screenshot")
+![Hero in cape](https://gitlab.com/XenGi/bezahlbrudi/-/raw/main/img/icon-512.png?ref_type=heads "Hero in cape")
 
 # BezahlBrudi
 
-In an effort to reduce the usage of Paypal, I created this simple web app. It can generate GiroCodes that can be used to easily transfer money between friends by showing a QR code that can be scanned by most banking apps. It will import all necessary infos for a normal SEPA bank transfer. No third parties involved, only the banks of the friends who want to exchange money.
+In an effort to reduce the usage of Paypal, I created this simple web app. It can generate GiroCodes that can be used to easily transfer money between friends by showing a QR code that can be scanned by most banking apps. It will import all necessary infos for a normal SEPA bank transfer. No third parties involved, only the banks of the people who want to exchange money.
 
 # How to use
 
-Simple visit the webpage under [BezahlBrudi.jetzt](https://bezahlbrudi.jetzt), and put in the details. The QR code will be generated automatically. You can choose to save your details in a cookie, so you don't have to input your bank details every time.
+Simple visit the webpage under [BezahlBrudi.jetzt](https://bezahlbrudi.jetzt), and put in your details. The QR code will be generated automatically as you type. You can choose to save your details in your browsers local storage, so you don't have to input your bank details every time.
+
+# Installation
+
+BezahlBrudi is a Progressive Web Application (PWA) that can be installed on your phone. It is a little different depending on the Browser and your OS.
+
+| OS      | Browser  | Home Screen Shortcut | App Launcher | How to install |
+| ------- | -------- | -------------------- | ------------ | -------------- |
+| Android | Chrome   | ✅ | ✅ | Tap the <kbd>Install as App</kbd> button or under the <kbd>&#x22EE;</kbd> menu, press <kbd>Install app</kbd> |
+| Android | Vanadium | ✅ | ❌ | Under the <kbd>&#x22EE;</kbd> menu, press <kbd>Install app</kbd> |
+| Android | Firefox  | ✅ | ❌ | Under the <kbd>&#x22EE;</kbd> menu, press <kbd>Add app to Home screen</kbd> |
+| iOS     | Safari   | ✅ | ✅ | Under the <kbd>Share</kbd> menu, press <kbd>Add to Home Screen</kbd> |
+| iOS     | Firefox  | ✅ | ✅ | Under the <kbd>&#x2261;</kbd> menu, press <kbd>Share</kbd>, then <kbd>Add to Home screen</kbd> |
 
 # Data privacy
 
-The web app doesn't store any data of the sender, the receiver or the transaction outside of your machine. Everything runs locally in your browser. The `RememberMe` function uses a cookie that expires after 180 days.
+The web app doesn't store any data of the sender, the receiver or the transaction outside of your machine. Everything runs locally in your browser. The `Remember Data` function uses your browsers local storage, so it's not even using cookies.
 
 # Dev notes
 
@@ -35,6 +47,8 @@ _The app will skip lines 9, 10 and 12._
 
 ## Valid chars for SEPA "Verwendungszweck"
 
+This also depends on your bank. Some banks allow more characters.
+
 ```
 a-zA-Z0-9/?:\(\).,'\+-[:space:]
 ```
@@ -42,4 +56,3 @@ a-zA-Z0-9/?:\(\).,'\+-[:space:]
 ---
 
 Build with ❤️ and 🍝.
-

css/bulma.css

@@ -1,5 +1,5 @@
 @charset "UTF-8";
-/*! bulma.io v1.0.2 | MIT License | github.com/jgthms/bulma */
+/*! bulma.io v1.0.4 | MIT License | github.com/jgthms/bulma */
 /* Bulma Utilities */
 :root {
   --bulma-control-radius: var(--bulma-radius);
@@ -90,7 +90,7 @@
   --bulma-white-on-scheme: hsla(var(--bulma-white-h), var(--bulma-white-s), var(--bulma-white-on-scheme-l), 1);
   --bulma-black: hsla(var(--bulma-black-h), var(--bulma-black-s), var(--bulma-black-l), 1);
   --bulma-black-base: hsla(var(--bulma-black-h), var(--bulma-black-s), var(--bulma-black-l), 1);
-  --bulma-black-rgb: 9, 10, 12;
+  --bulma-black-rgb: 8.772, 9.6764, 11.628;
   --bulma-black-h: 221deg;
   --bulma-black-s: 14%;
   --bulma-black-l: 4%;
@@ -100,7 +100,7 @@
   --bulma-black-on-scheme: hsla(var(--bulma-black-h), var(--bulma-black-s), var(--bulma-black-on-scheme-l), 1);
   --bulma-light: hsla(var(--bulma-light-h), var(--bulma-light-s), var(--bulma-light-l), 1);
   --bulma-light-base: hsla(var(--bulma-light-h), var(--bulma-light-s), var(--bulma-light-l), 1);
-  --bulma-light-rgb: 243, 244, 246;
+  --bulma-light-rgb: 243.372, 244.2764, 246.228;
   --bulma-light-h: 221deg;
   --bulma-light-s: 14%;
   --bulma-light-l: 96%;
@@ -110,7 +110,7 @@
   --bulma-light-on-scheme: hsla(var(--bulma-light-h), var(--bulma-light-s), var(--bulma-light-on-scheme-l), 1);
   --bulma-dark: hsla(var(--bulma-dark-h), var(--bulma-dark-s), var(--bulma-dark-l), 1);
   --bulma-dark-base: hsla(var(--bulma-dark-h), var(--bulma-dark-s), var(--bulma-dark-l), 1);
-  --bulma-dark-rgb: 46, 51, 61;
+  --bulma-dark-rgb: 46.053, 50.8011, 61.047;
   --bulma-dark-h: 221deg;
   --bulma-dark-s: 14%;
   --bulma-dark-l: 21%;
@@ -120,7 +120,7 @@
   --bulma-dark-on-scheme: hsla(var(--bulma-dark-h), var(--bulma-dark-s), var(--bulma-dark-on-scheme-l), 1);
   --bulma-text: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-l), 1);
   --bulma-text-base: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-l), 1);
-  --bulma-text-rgb: 64, 70, 84;
+  --bulma-text-rgb: 63.597, 70.1539, 84.303;
   --bulma-text-h: 221deg;
   --bulma-text-s: 14%;
   --bulma-text-l: 29%;
@@ -226,7 +226,7 @@
   --bulma-text-on-scheme: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-on-scheme-l), 1);
   --bulma-primary: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l), 1);
   --bulma-primary-base: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l), 1);
-  --bulma-primary-rgb: 0, 209, 178;
+  --bulma-primary-rgb: 0, 209.1, 177.735;
   --bulma-primary-h: 171deg;
   --bulma-primary-s: 100%;
   --bulma-primary-l: 41%;
@@ -332,7 +332,7 @@
   --bulma-primary-on-scheme: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-on-scheme-l), 1);
   --bulma-link: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l), 1);
   --bulma-link-base: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l), 1);
-  --bulma-link-rgb: 66, 88, 255;
+  --bulma-link-rgb: 66.3, 88.315, 255;
   --bulma-link-h: 233deg;
   --bulma-link-s: 100%;
   --bulma-link-l: 63%;
@@ -385,7 +385,7 @@
   --bulma-link-40-invert-l: var(--bulma-link-95-l);
   --bulma-link-40-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-40-invert-l), 1);
   --bulma-link-45: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-45-l), 1);
-  --bulma-link-45-invert-l: var(--bulma-link-100-l);
+  --bulma-link-45-invert-l: var(--bulma-link-95-l);
   --bulma-link-45-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-45-invert-l), 1);
   --bulma-link-50: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-50-l), 1);
   --bulma-link-50-invert-l: var(--bulma-link-100-l);
@@ -415,7 +415,7 @@
   --bulma-link-90-invert-l: var(--bulma-link-35-l);
   --bulma-link-90-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-90-invert-l), 1);
   --bulma-link-95: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-95-l), 1);
-  --bulma-link-95-invert-l: var(--bulma-link-40-l);
+  --bulma-link-95-invert-l: var(--bulma-link-45-l);
   --bulma-link-95-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-95-invert-l), 1);
   --bulma-link-100: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-100-l), 1);
   --bulma-link-100-invert-l: var(--bulma-link-50-l);
@@ -438,7 +438,7 @@
   --bulma-link-on-scheme: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-on-scheme-l), 1);
   --bulma-info: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l), 1);
   --bulma-info-base: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l), 1);
-  --bulma-info-rgb: 102, 209, 255;
+  --bulma-info-rgb: 102, 209.1, 255;
   --bulma-info-h: 198deg;
   --bulma-info-s: 100%;
   --bulma-info-l: 70%;
@@ -544,7 +544,7 @@
   --bulma-info-on-scheme: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-on-scheme-l), 1);
   --bulma-success: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-l), 1);
   --bulma-success-base: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-l), 1);
-  --bulma-success-rgb: 72, 199, 142;
+  --bulma-success-rgb: 71.6295, 198.6705, 141.50205;
   --bulma-success-h: 153deg;
   --bulma-success-s: 53%;
   --bulma-success-l: 53%;
@@ -582,7 +582,7 @@
   --bulma-success-15-invert-l: var(--bulma-success-75-l);
   --bulma-success-15-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-15-invert-l), 1);
   --bulma-success-20: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-20-l), 1);
-  --bulma-success-20-invert-l: var(--bulma-success-90-l);
+  --bulma-success-20-invert-l: var(--bulma-success-95-l);
   --bulma-success-20-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-20-invert-l), 1);
   --bulma-success-25: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-25-l), 1);
   --bulma-success-25-invert-l: var(--bulma-success-100-l);
@@ -624,7 +624,7 @@
   --bulma-success-85-invert-l: var(--bulma-success-15-l);
   --bulma-success-85-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-85-invert-l), 1);
   --bulma-success-90: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-90-l), 1);
-  --bulma-success-90-invert-l: var(--bulma-success-20-l);
+  --bulma-success-90-invert-l: var(--bulma-success-15-l);
   --bulma-success-90-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-90-invert-l), 1);
   --bulma-success-95: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-95-l), 1);
   --bulma-success-95-invert-l: var(--bulma-success-20-l);
@@ -636,7 +636,7 @@
   --bulma-success-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-invert-l), 1);
   --bulma-success-light-l: var(--bulma-success-90-l);
   --bulma-success-light: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-light-l), 1);
-  --bulma-success-light-invert-l: var(--bulma-success-20-l);
+  --bulma-success-light-invert-l: var(--bulma-success-15-l);
   --bulma-success-light-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-light-invert-l), 1);
   --bulma-success-dark-l: var(--bulma-success-10-l);
   --bulma-success-dark: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-dark-l), 1);
@@ -650,7 +650,7 @@
   --bulma-success-on-scheme: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-on-scheme-l), 1);
   --bulma-warning: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-l), 1);
   --bulma-warning-base: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-l), 1);
-  --bulma-warning-rgb: 255, 183, 15;
+  --bulma-warning-rgb: 255, 183.09, 15.3;
   --bulma-warning-h: 42deg;
   --bulma-warning-s: 100%;
   --bulma-warning-l: 53%;
@@ -756,7 +756,7 @@
   --bulma-warning-on-scheme: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-on-scheme-l), 1);
   --bulma-danger: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-l), 1);
   --bulma-danger-base: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-l), 1);
-  --bulma-danger-rgb: 255, 102, 133;
+  --bulma-danger-rgb: 255, 102, 132.6;
   --bulma-danger-h: 348deg;
   --bulma-danger-s: 100%;
   --bulma-danger-l: 70%;
@@ -991,7 +991,7 @@
     --bulma-white-on-scheme: hsla(var(--bulma-white-h), var(--bulma-white-s), var(--bulma-white-on-scheme-l), 1);
     --bulma-black: hsla(var(--bulma-black-h), var(--bulma-black-s), var(--bulma-black-l), 1);
     --bulma-black-base: hsla(var(--bulma-black-h), var(--bulma-black-s), var(--bulma-black-l), 1);
-    --bulma-black-rgb: 9, 10, 12;
+    --bulma-black-rgb: 8.772, 9.6764, 11.628;
     --bulma-black-h: 221deg;
     --bulma-black-s: 14%;
     --bulma-black-l: 4%;
@@ -1001,7 +1001,7 @@
     --bulma-black-on-scheme: hsla(var(--bulma-black-h), var(--bulma-black-s), var(--bulma-black-on-scheme-l), 1);
     --bulma-light: hsla(var(--bulma-light-h), var(--bulma-light-s), var(--bulma-light-l), 1);
     --bulma-light-base: hsla(var(--bulma-light-h), var(--bulma-light-s), var(--bulma-light-l), 1);
-    --bulma-light-rgb: 243, 244, 246;
+    --bulma-light-rgb: 243.372, 244.2764, 246.228;
     --bulma-light-h: 221deg;
     --bulma-light-s: 14%;
     --bulma-light-l: 96%;
@@ -1011,7 +1011,7 @@
     --bulma-light-on-scheme: hsla(var(--bulma-light-h), var(--bulma-light-s), var(--bulma-light-on-scheme-l), 1);
     --bulma-dark: hsla(var(--bulma-dark-h), var(--bulma-dark-s), var(--bulma-dark-l), 1);
     --bulma-dark-base: hsla(var(--bulma-dark-h), var(--bulma-dark-s), var(--bulma-dark-l), 1);
-    --bulma-dark-rgb: 46, 51, 61;
+    --bulma-dark-rgb: 46.053, 50.8011, 61.047;
     --bulma-dark-h: 221deg;
     --bulma-dark-s: 14%;
     --bulma-dark-l: 21%;
@@ -1021,7 +1021,7 @@
     --bulma-dark-on-scheme: hsla(var(--bulma-dark-h), var(--bulma-dark-s), var(--bulma-dark-on-scheme-l), 1);
     --bulma-text: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-l), 1);
     --bulma-text-base: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-l), 1);
-    --bulma-text-rgb: 64, 70, 84;
+    --bulma-text-rgb: 63.597, 70.1539, 84.303;
     --bulma-text-h: 221deg;
     --bulma-text-s: 14%;
     --bulma-text-l: 29%;
@@ -1127,7 +1127,7 @@
     --bulma-text-on-scheme: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-on-scheme-l), 1);
     --bulma-primary: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l), 1);
     --bulma-primary-base: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l), 1);
-    --bulma-primary-rgb: 0, 209, 178;
+    --bulma-primary-rgb: 0, 209.1, 177.735;
     --bulma-primary-h: 171deg;
     --bulma-primary-s: 100%;
     --bulma-primary-l: 41%;
@@ -1233,7 +1233,7 @@
     --bulma-primary-on-scheme: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-on-scheme-l), 1);
     --bulma-link: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l), 1);
     --bulma-link-base: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l), 1);
-    --bulma-link-rgb: 66, 88, 255;
+    --bulma-link-rgb: 66.3, 88.315, 255;
     --bulma-link-h: 233deg;
     --bulma-link-s: 100%;
     --bulma-link-l: 63%;
@@ -1286,7 +1286,7 @@
     --bulma-link-40-invert-l: var(--bulma-link-95-l);
     --bulma-link-40-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-40-invert-l), 1);
     --bulma-link-45: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-45-l), 1);
-    --bulma-link-45-invert-l: var(--bulma-link-100-l);
+    --bulma-link-45-invert-l: var(--bulma-link-95-l);
     --bulma-link-45-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-45-invert-l), 1);
     --bulma-link-50: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-50-l), 1);
     --bulma-link-50-invert-l: var(--bulma-link-100-l);
@@ -1316,7 +1316,7 @@
     --bulma-link-90-invert-l: var(--bulma-link-35-l);
     --bulma-link-90-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-90-invert-l), 1);
     --bulma-link-95: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-95-l), 1);
-    --bulma-link-95-invert-l: var(--bulma-link-40-l);
+    --bulma-link-95-invert-l: var(--bulma-link-45-l);
     --bulma-link-95-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-95-invert-l), 1);
     --bulma-link-100: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-100-l), 1);
     --bulma-link-100-invert-l: var(--bulma-link-50-l);
@@ -1339,7 +1339,7 @@
     --bulma-link-on-scheme: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-on-scheme-l), 1);
     --bulma-info: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l), 1);
     --bulma-info-base: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l), 1);
-    --bulma-info-rgb: 102, 209, 255;
+    --bulma-info-rgb: 102, 209.1, 255;
     --bulma-info-h: 198deg;
     --bulma-info-s: 100%;
     --bulma-info-l: 70%;
@@ -1445,7 +1445,7 @@
     --bulma-info-on-scheme: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-on-scheme-l), 1);
     --bulma-success: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-l), 1);
     --bulma-success-base: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-l), 1);
-    --bulma-success-rgb: 72, 199, 142;
+    --bulma-success-rgb: 71.6295, 198.6705, 141.50205;
     --bulma-success-h: 153deg;
     --bulma-success-s: 53%;
     --bulma-success-l: 53%;
@@ -1483,7 +1483,7 @@
     --bulma-success-15-invert-l: var(--bulma-success-75-l);
     --bulma-success-15-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-15-invert-l), 1);
     --bulma-success-20: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-20-l), 1);
-    --bulma-success-20-invert-l: var(--bulma-success-90-l);
+    --bulma-success-20-invert-l: var(--bulma-success-95-l);
     --bulma-success-20-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-20-invert-l), 1);
     --bulma-success-25: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-25-l), 1);
     --bulma-success-25-invert-l: var(--bulma-success-100-l);
@@ -1525,7 +1525,7 @@
     --bulma-success-85-invert-l: var(--bulma-success-15-l);
     --bulma-success-85-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-85-invert-l), 1);
     --bulma-success-90: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-90-l), 1);
-    --bulma-success-90-invert-l: var(--bulma-success-20-l);
+    --bulma-success-90-invert-l: var(--bulma-success-15-l);
     --bulma-success-90-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-90-invert-l), 1);
     --bulma-success-95: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-95-l), 1);
     --bulma-success-95-invert-l: var(--bulma-success-20-l);
@@ -1537,7 +1537,7 @@
     --bulma-success-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-invert-l), 1);
     --bulma-success-light-l: var(--bulma-success-90-l);
     --bulma-success-light: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-light-l), 1);
-    --bulma-success-light-invert-l: var(--bulma-success-20-l);
+    --bulma-success-light-invert-l: var(--bulma-success-15-l);
     --bulma-success-light-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-light-invert-l), 1);
     --bulma-success-dark-l: var(--bulma-success-10-l);
     --bulma-success-dark: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-dark-l), 1);
@@ -1551,7 +1551,7 @@
     --bulma-success-on-scheme: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-on-scheme-l), 1);
     --bulma-warning: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-l), 1);
     --bulma-warning-base: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-l), 1);
-    --bulma-warning-rgb: 255, 183, 15;
+    --bulma-warning-rgb: 255, 183.09, 15.3;
     --bulma-warning-h: 42deg;
     --bulma-warning-s: 100%;
     --bulma-warning-l: 53%;
@@ -1657,7 +1657,7 @@
     --bulma-warning-on-scheme: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-on-scheme-l), 1);
     --bulma-danger: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-l), 1);
     --bulma-danger-base: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-l), 1);
-    --bulma-danger-rgb: 255, 102, 133;
+    --bulma-danger-rgb: 255, 102, 132.6;
     --bulma-danger-h: 348deg;
     --bulma-danger-s: 100%;
     --bulma-danger-l: 70%;
@@ -1786,7 +1786,7 @@
   :root {
     --bulma-white-on-scheme-l: 100%;
     --bulma-white-on-scheme: hsla(var(--bulma-white-h), var(--bulma-white-s), var(--bulma-white-on-scheme-l), 1);
-    --bulma-black-on-scheme-l: 0%;
+    --bulma-black-on-scheme-l: -51%;
     --bulma-black-on-scheme: hsla(var(--bulma-black-h), var(--bulma-black-s), var(--bulma-black-on-scheme-l), 1);
     --bulma-light-on-scheme-l: 96%;
     --bulma-light-on-scheme: hsla(var(--bulma-light-h), var(--bulma-light-s), var(--bulma-light-on-scheme-l), 1);
@@ -1909,7 +1909,7 @@
   --bulma-white-on-scheme: hsla(var(--bulma-white-h), var(--bulma-white-s), var(--bulma-white-on-scheme-l), 1);
   --bulma-black: hsla(var(--bulma-black-h), var(--bulma-black-s), var(--bulma-black-l), 1);
   --bulma-black-base: hsla(var(--bulma-black-h), var(--bulma-black-s), var(--bulma-black-l), 1);
-  --bulma-black-rgb: 9, 10, 12;
+  --bulma-black-rgb: 8.772, 9.6764, 11.628;
   --bulma-black-h: 221deg;
   --bulma-black-s: 14%;
   --bulma-black-l: 4%;
@@ -1919,7 +1919,7 @@
   --bulma-black-on-scheme: hsla(var(--bulma-black-h), var(--bulma-black-s), var(--bulma-black-on-scheme-l), 1);
   --bulma-light: hsla(var(--bulma-light-h), var(--bulma-light-s), var(--bulma-light-l), 1);
   --bulma-light-base: hsla(var(--bulma-light-h), var(--bulma-light-s), var(--bulma-light-l), 1);
-  --bulma-light-rgb: 243, 244, 246;
+  --bulma-light-rgb: 243.372, 244.2764, 246.228;
   --bulma-light-h: 221deg;
   --bulma-light-s: 14%;
   --bulma-light-l: 96%;
@@ -1929,7 +1929,7 @@
   --bulma-light-on-scheme: hsla(var(--bulma-light-h), var(--bulma-light-s), var(--bulma-light-on-scheme-l), 1);
   --bulma-dark: hsla(var(--bulma-dark-h), var(--bulma-dark-s), var(--bulma-dark-l), 1);
   --bulma-dark-base: hsla(var(--bulma-dark-h), var(--bulma-dark-s), var(--bulma-dark-l), 1);
-  --bulma-dark-rgb: 46, 51, 61;
+  --bulma-dark-rgb: 46.053, 50.8011, 61.047;
   --bulma-dark-h: 221deg;
   --bulma-dark-s: 14%;
   --bulma-dark-l: 21%;
@@ -1939,7 +1939,7 @@
   --bulma-dark-on-scheme: hsla(var(--bulma-dark-h), var(--bulma-dark-s), var(--bulma-dark-on-scheme-l), 1);
   --bulma-text: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-l), 1);
   --bulma-text-base: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-l), 1);
-  --bulma-text-rgb: 64, 70, 84;
+  --bulma-text-rgb: 63.597, 70.1539, 84.303;
   --bulma-text-h: 221deg;
   --bulma-text-s: 14%;
   --bulma-text-l: 29%;
@@ -2045,7 +2045,7 @@
   --bulma-text-on-scheme: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-on-scheme-l), 1);
   --bulma-primary: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l), 1);
   --bulma-primary-base: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l), 1);
-  --bulma-primary-rgb: 0, 209, 178;
+  --bulma-primary-rgb: 0, 209.1, 177.735;
   --bulma-primary-h: 171deg;
   --bulma-primary-s: 100%;
   --bulma-primary-l: 41%;
@@ -2151,7 +2151,7 @@
   --bulma-primary-on-scheme: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-on-scheme-l), 1);
   --bulma-link: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l), 1);
   --bulma-link-base: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l), 1);
-  --bulma-link-rgb: 66, 88, 255;
+  --bulma-link-rgb: 66.3, 88.315, 255;
   --bulma-link-h: 233deg;
   --bulma-link-s: 100%;
   --bulma-link-l: 63%;
@@ -2204,7 +2204,7 @@
   --bulma-link-40-invert-l: var(--bulma-link-95-l);
   --bulma-link-40-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-40-invert-l), 1);
   --bulma-link-45: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-45-l), 1);
-  --bulma-link-45-invert-l: var(--bulma-link-100-l);
+  --bulma-link-45-invert-l: var(--bulma-link-95-l);
   --bulma-link-45-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-45-invert-l), 1);
   --bulma-link-50: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-50-l), 1);
   --bulma-link-50-invert-l: var(--bulma-link-100-l);
@@ -2234,7 +2234,7 @@
   --bulma-link-90-invert-l: var(--bulma-link-35-l);
   --bulma-link-90-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-90-invert-l), 1);
   --bulma-link-95: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-95-l), 1);
-  --bulma-link-95-invert-l: var(--bulma-link-40-l);
+  --bulma-link-95-invert-l: var(--bulma-link-45-l);
   --bulma-link-95-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-95-invert-l), 1);
   --bulma-link-100: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-100-l), 1);
   --bulma-link-100-invert-l: var(--bulma-link-50-l);
@@ -2257,7 +2257,7 @@
   --bulma-link-on-scheme: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-on-scheme-l), 1);
   --bulma-info: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l), 1);
   --bulma-info-base: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l), 1);
-  --bulma-info-rgb: 102, 209, 255;
+  --bulma-info-rgb: 102, 209.1, 255;
   --bulma-info-h: 198deg;
   --bulma-info-s: 100%;
   --bulma-info-l: 70%;
@@ -2363,7 +2363,7 @@
   --bulma-info-on-scheme: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-on-scheme-l), 1);
   --bulma-success: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-l), 1);
   --bulma-success-base: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-l), 1);
-  --bulma-success-rgb: 72, 199, 142;
+  --bulma-success-rgb: 71.6295, 198.6705, 141.50205;
   --bulma-success-h: 153deg;
   --bulma-success-s: 53%;
   --bulma-success-l: 53%;
@@ -2401,7 +2401,7 @@
   --bulma-success-15-invert-l: var(--bulma-success-75-l);
   --bulma-success-15-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-15-invert-l), 1);
   --bulma-success-20: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-20-l), 1);
-  --bulma-success-20-invert-l: var(--bulma-success-90-l);
+  --bulma-success-20-invert-l: var(--bulma-success-95-l);
   --bulma-success-20-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-20-invert-l), 1);
   --bulma-success-25: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-25-l), 1);
   --bulma-success-25-invert-l: var(--bulma-success-100-l);
@@ -2443,7 +2443,7 @@
   --bulma-success-85-invert-l: var(--bulma-success-15-l);
   --bulma-success-85-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-85-invert-l), 1);
   --bulma-success-90: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-90-l), 1);
-  --bulma-success-90-invert-l: var(--bulma-success-20-l);
+  --bulma-success-90-invert-l: var(--bulma-success-15-l);
   --bulma-success-90-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-90-invert-l), 1);
   --bulma-success-95: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-95-l), 1);
   --bulma-success-95-invert-l: var(--bulma-success-20-l);
@@ -2455,7 +2455,7 @@
   --bulma-success-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-invert-l), 1);
   --bulma-success-light-l: var(--bulma-success-90-l);
   --bulma-success-light: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-light-l), 1);
-  --bulma-success-light-invert-l: var(--bulma-success-20-l);
+  --bulma-success-light-invert-l: var(--bulma-success-15-l);
   --bulma-success-light-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-light-invert-l), 1);
   --bulma-success-dark-l: var(--bulma-success-10-l);
   --bulma-success-dark: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-dark-l), 1);
@@ -2469,7 +2469,7 @@
   --bulma-success-on-scheme: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-on-scheme-l), 1);
   --bulma-warning: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-l), 1);
   --bulma-warning-base: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-l), 1);
-  --bulma-warning-rgb: 255, 183, 15;
+  --bulma-warning-rgb: 255, 183.09, 15.3;
   --bulma-warning-h: 42deg;
   --bulma-warning-s: 100%;
   --bulma-warning-l: 53%;
@@ -2575,7 +2575,7 @@
   --bulma-warning-on-scheme: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-on-scheme-l), 1);
   --bulma-danger: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-l), 1);
   --bulma-danger-base: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-l), 1);
-  --bulma-danger-rgb: 255, 102, 133;
+  --bulma-danger-rgb: 255, 102, 132.6;
   --bulma-danger-h: 348deg;
   --bulma-danger-s: 100%;
   --bulma-danger-l: 70%;
@@ -2737,7 +2737,7 @@
 .theme-dark {
   --bulma-white-on-scheme-l: 100%;
   --bulma-white-on-scheme: hsla(var(--bulma-white-h), var(--bulma-white-s), var(--bulma-white-on-scheme-l), 1);
-  --bulma-black-on-scheme-l: 0%;
+  --bulma-black-on-scheme-l: -51%;
   --bulma-black-on-scheme: hsla(var(--bulma-black-h), var(--bulma-black-s), var(--bulma-black-on-scheme-l), 1);
   --bulma-light-on-scheme-l: 96%;
   --bulma-light-on-scheme: hsla(var(--bulma-light-h), var(--bulma-light-s), var(--bulma-light-on-scheme-l), 1);
@@ -3776,6 +3776,7 @@ a.box:active {
 }
 .button.is-outlined {
   --bulma-button-border-width: max(1px, 0.0625em);
+  --bulma-loading-color: hsl(var(--bulma-button-h), var(--bulma-button-s), var(--bulma-button-l));
   background-color: transparent;
   border-color: hsl(var(--bulma-button-h), var(--bulma-button-s), var(--bulma-button-l));
   color: hsl(var(--bulma-button-h), var(--bulma-button-s), var(--bulma-button-l));
@@ -3784,6 +3785,10 @@ a.box:active {
   --bulma-button-border-width: max(2px, 0.125em);
   --bulma-button-outer-shadow-alpha: 1;
 }
+.button.is-outlined[disabled], fieldset[disabled] .button.is-outlined {
+  background-color: transparent;
+  box-shadow: none;
+}
 .button.is-inverted {
   background-color: hsl(var(--bulma-button-h), var(--bulma-button-s), calc(var(--bulma-button-color-l) + var(--bulma-button-background-l-delta)));
   color: hsl(var(--bulma-button-h), var(--bulma-button-s), var(--bulma-button-background-l));
@@ -5441,6 +5446,7 @@ button.tag:active,
   --bulma-input-border-width: var(--bulma-control-border-width);
   --bulma-input-border-l: var(--bulma-border-l);
   --bulma-input-border-l-delta: 0%;
+  --bulma-input-border-color: hsl(var(--bulma-input-h), var(--bulma-input-s), calc(var(--bulma-input-border-l) + var(--bulma-input-border-l-delta)));
   --bulma-input-hover-border-l-delta: var(--bulma-hover-border-l-delta);
   --bulma-input-active-border-l-delta: var(--bulma-active-border-l-delta);
   --bulma-input-focus-h: var(--bulma-focus-h);
@@ -5467,7 +5473,7 @@ button.tag:active,
 
 .select select, .input, .textarea {
   background-color: hsl(var(--bulma-input-h), var(--bulma-input-s), calc(var(--bulma-input-background-l) + var(--bulma-input-background-l-delta)));
-  border-color: hsl(var(--bulma-input-h), var(--bulma-input-s), calc(var(--bulma-input-border-l) + var(--bulma-input-border-l-delta)));
+  border-color: var(--bulma-input-border-color);
   border-radius: var(--bulma-input-radius);
   color: hsl(var(--bulma-input-h), var(--bulma-input-s), var(--bulma-input-color-l));
 }
@@ -13154,6 +13160,9 @@ label.panel-block:hover {
   --bulma-hero-body-padding-small: 1.5rem;
   --bulma-hero-body-padding-medium: 9rem 4.5rem;
   --bulma-hero-body-padding-large: 18rem 6rem;
+  --bulma-hero-gradient-h-offset: 5deg;
+  --bulma-hero-gradient-s-offset: 10%;
+  --bulma-hero-gradient-l-offset: 5%;
 }
 
 .hero {
@@ -21032,6 +21041,10 @@ has-background-danger.is-hoverable:active {
   font-weight: 700 !important;
 }
 
+.has-text-weight-extrabold {
+  font-weight: 800 !important;
+}
+
 .is-family-primary {
   font-family: "Inter", "SF Pro", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", "Helvetica", "Arial", sans-serif !important;
 }

i18n.json

@@ -0,0 +1,178 @@
+{
+  "_flags": {
+    "de": "🇩🇪",
+    "ch": "🇨🇭",
+    "en": "🇬🇧",
+    "es": "🇪🇸",
+    "fr": "🇫🇷",
+    "gr": "🇬🇷",
+    "it": "🇮🇹",
+    "pl": "🇵🇱",
+    "tr": "🇹🇷"
+  },
+  "subtitle": {
+    "de": "Geld überweisen ohne Drittanbieter",
+    "ch": "Gäld überwise ohni Drittparteiä",
+    "en": "Transfer money without any 3rd parties",
+    "es": "Transfiere dinero sin intermediarios",
+    "fr": "Transférez de l'argent sans intermédiaires",
+    "gr": "Μεταφορά χρημάτων χωρίς τη μεσολάβηση τρίτων",
+    "it": "Inviare denaro senza ricorrere a servizi terzi",
+    "pl": "Przelewaj pieniądze bez pośredników",
+    "tr": "Üçüncü taraflar olmadan para transferi yapın"
+  },
+  "explain": {
+    "de": "Trag deine Daten ein und scanne den QR Code einfach mit deiner Banking-App. Probier es aus!",
+    "ch": "Trag dini Date i und scann de QR-Code mit dinere Banking-App. Probier’s us!",
+    "en": "Simply fill in your details and scan the QR code with your banking app. Give it a try!",
+    "es": "Rellena el formulario con tus datos y escanea el código QR con la app de tu banco. ¡Prueba!",
+    "fr": "Saisissez simplement vos informations et scannez le code QR avec votre application bancaire. Essayez !",
+    "gr": "Απλά συμπληρώστε τα στοιχεία σας και σκανάρετε τον QR κωδικό μέσω της eBanking εφαρμογής σας. Δοκιμάστε το!",
+    "it": "Inserisci i tuoi dati e scansiona il codice QR con la tua app bancaria. Provalo!",
+    "pl": "Po prostu wprowadź swoje dane i zeskanuj kod QR aplikacją bankową. Spróbuj!",
+    "tr": "Verilerini gir ve QR kodunu bankacılık uygulamanla kolayca tara. Dene!"
+  },
+  "name": {
+    "de": "Empfänger Name",
+    "ch": "Name vom Empfänger",
+    "en": "Receiver Name",
+    "es": "Nombre del beneficiario",
+    "fr": "Nom du bénéficiaire",
+    "gr": "Όνομα Δικαιούχου",
+    "it": "Nome del destinatario",
+    "pl": "Nazwa odbiorcy",
+    "tr": "Alıcının adı"
+  },
+  "iban": {
+    "de": "Empfänger IBAN",
+    "ch": "IBAN vom Empfänger",
+    "en": "Receiver IBAN",
+    "es": "IBAN del beneficiario",
+    "fr": "IBAN du bénéficiaire",
+    "gr": "IBAN Δικαιούχου",
+    "it": "Codice IBAN del destinatario",
+    "pl": "IBAN odbiorcy",
+    "tr": "Alıcının IBAN numarası"
+  },
+  "bic": {
+    "de": "Empfänger BIC",
+    "ch": "BIC vom Empfänger",
+    "en": "Receiver BIC",
+    "es": "BIC del beneficiario",
+    "fr": "BIC du bénéficiaire",
+    "gr": "BIC Δικαιούχου",
+    "it": "Codice BIC del destinatario",
+    "pl": "BIC odbiorcy",
+    "tr": "Alıcının BIC kodu"
+  },
+  "bic-help": {
+    "de": "Nur nötig wenn Sender oder Empfänger IBAN außerhalb der EU ist",
+    "ch": "Nur nötig, wenn IBAN vom Absender oder Empfänger usserhalb vo de EU isch",
+    "en": "Only needed if the Sender or Receiver IBAN is outside the EU",
+    "es": "Solo es necesario si el IBAN del beneficiario o del remitente no pertenece a la UE",
+    "fr": "Uniquement nécessaire si l’IBAN de l’émetteur ou du bénéficiaire est en dehors de l’UE",
+    "gr": "Χρειάζεται μόνο όταν ο Εντολέας ή ο Δικαιούχος βρίσκονται εκτός της Ε.Ε.",
+    "it": "Necessario solo se l'IBAN del mittente o del destinatario è al di fuori dell'UE.",
+    "pl": "Wymagane tylko, jeśli IBAN nadawcy lub odbiorcy znajduje się poza UE",
+    "tr": "Sadece gönderenin veya alıcının IBAN'ı AB dışındaysa gereklidir"
+  },
+  "amount": {
+    "de": "Betrag",
+    "ch": "Betrag",
+    "en": "Amount",
+    "es": "Cantidad",
+    "fr": "Montant",
+    "gr": "Ποσό",
+    "it": "Somma",
+    "pl": "Kwota",
+    "tr": "Miktar"
+  },
+  "purpose": {
+    "de": "Verwendungszweck",
+    "ch": "Zweck",
+    "en": "Purpose",
+    "es": "Concepto",
+    "fr": "Motif du virement",
+    "gr": "Αιτιολογία",
+    "it": "Causale",
+    "pl": "Tytuł przelewu",
+    "tr": "kullanım amacı"
+  },
+  "purpose-example": {
+    "de": "Bierchen!",
+    "ch": "Es Cafi!",
+    "en": "Beers!",
+    "es": "Tapas!",
+    "fr": "Fromage et vin!",
+    "gr": "Τσιπουρομεζέδες!",
+    "it": "Pizza!",
+    "pl": "Kawa!",
+    "tr": "Çay!"
+  },
+  "remember": {
+    "de": "Daten merken",
+    "ch": "Date merke",
+    "en": "Remember data",
+    "es": "Recordar datos",
+    "fr": "Mémoriser les données",
+    "gr": "Απομνημόνευση στοιχείων",
+    "it": "Ricorda dati",
+    "pl": "Zapamiętaj dane",
+    "tr": "Verileri hatırla"
+  },
+  "disclaimer": {
+    "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.",
+    "ch": "Dr Quellcode isch lizenziert unter <a href=\"https://opensource.org/license/mit\">MIT</a>, du finds ihn <a href=\"https://gitlab.com/xengi/bezahlbrudi/\">da</a>.<br/>Die Site speichert kei Date usserhalb vom Browser, nöd einisch Cookies. D’Funktion «Date merke» speichert im Local Storage vom Browser.<br/>Die Site bieted kei Finanzdienstleistige ah. Si isch nume en QR-Code-Generator.",
+    "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.",
+    "es": "El código fuente tiene licencia <a href=\"https://opensource.org/license/mit\">MIT</a>, puede encontrar detalles <a href=\"https://gitlab.com/xengi/bezahlbrudi/\">aquí</a>.<br/>Esta página no guarda ningún dato fuera del navegador o en las cookies. La función \"Recordar datos\" guarda los datos en el almacenamiento local del navegador (local storage).<br/>Esta página web no proporciona servicios financieros. Es un simple generador de códigos QR.",
+    "fr": "Le code source est sous licence <a href=\"https://opensource.org/license/mit\">MIT</a>, vous pouvez le trouver <a href=\"https://gitlab.com/xengi/bezahlbrudi/\">ici</a>.<br/>Ce site n’enregistre aucune donnée en dehors de votre navigateur, pas même de cookies. La fonction «Mémoriser les données» stocke vos informations dans le stockage local du navigateur.<br/>Ce site ne fournit aucun service financier. Il s’agit simplement d’un générateur de codes QR.",
+    "gr": "Ο πηγαίος κώδικας διατίθεται με άδεια χρήσης <a href=\"https://opensource.org/license/mit\">MIT</a> και μπορείτε να τον βρείτε <a href=\"https://gitlab.com/xengi/bezahlbrudi/\">εδώ</a>.<br/>Αυτός ο ιστότοπος δεν αποθηκεύει κανένα δεδομένο εκτός του προγράμματος περιήγησής σας, ούτε καν cookies. Η λειτουργία «Απομνημόνευση στοιχείων» αποθηκεύει τα δεδομένα σας στον τοπικό χώρο αποθήκευσης του προγράμματος περιήγησής σας.<br/>Ο ιστότοπος αυτός δεν παρέχει καμία χρηματοπιστωτική υπηρεσία. Πρόκειται για μια απλή γεννήτρια QR κωδικών.",
+    "it": "Il codice sorgente è concesso in licenza <a href=\"https://opensource.org/license/mit\">MIT</a>, lo puoi trovare <a href=\"https://gitlab.com/xengi/bezahlbrudi/\">qui</a>.<br/>Questo sito non memorizza dati al di  fuori del tuo browser, nemmeno i cookie. La funzione “Ricorda dati” memorizza i dati nella memoria locale del browser.<br/>Questo sito non offre servizi finanziari. È solo un generatore di codici QR.",
+    "pl": "Kod źródłowy jest objęty licencją <a href=\"https://opensource.org/license/mit\">MIT</a>, możesz go znaleźć <a href=\"https://gitlab.com/xengi/bezahlbrudi/\">tutaj</a>.<br/>Ta strona nie przechowuje żadnych danych poza Twoją przeglądarką, nawet plików cookie. Funkcja „Zapamiętaj dane” zapisuje dane w pamięci lokalnej przeglądarki.<br/>Ta strona nie świadczy usług finansowych. To tylko prosty generator kodów QR.",
+    "tr": "Kaynak kodu <a href=\"https://opensource.org/license/mit\">MIT</a> lisansı altındadır, <a href=\"https://gitlab.com/xengi/bezahlbrudi/\">buradan</a> ulaşabilirsiniz.<br/>Bu site, tarayıcınız dışında hiçbir veri, hatta Cookies bile saklamaz. “Verileri hatırla” işlevi, verileri tarayıcının \"Local Storage\" alanında saklar.<br/>Bu site finansal hizmetler sunmaz. Sadece bir QR Kod Oluşturucu'dur."
+  },
+  "help-name": {
+    "de": "Namen dürfen maximal 70 Zeichen lang sein.",
+    "ch": "Dr Name darf höchstens 70 Zeichä lang sii.",
+    "en": "Name can have 70 characters max.",
+    "es": "El nombre puede tener hasta un máximo de 70 caracteres",
+    "fr": "Le nom peut contenir au maximum 70 caractères.",
+    "gr": "Το πεδίο «Όνομα» μπορεί να περιέχει έως 70 χαρακτήρες.",
+    "it": "Il nome può avere al massimo 70 caratteri.",
+    "pl": "Nazwa może mieć maksymalnie 70 znaków.",
+    "tr": "Ad en fazla 70 karakter olabilir."
+  },
+  "help-bic": {
+    "de": "BIC ist ungültig.",
+    "ch": "De BIC isch ungültig.",
+    "en": "BIC is invalid.",
+    "es": "BIC inválido.",
+    "fr": "Le BIC est invalide.",
+    "gr": "Το πεδίο «BIC» είναι εσφαλμένο.",
+    "it": "Il BIC non è valido.",
+    "pl": "BIC jest nieprawidłowy.",
+    "tr": "BIC geçersiz."
+  },
+  "help-iban": {
+    "de": "IBAN ist ungültig.",
+    "ch": "De IBAN isch ungültig.",
+    "en": "IBAN is invalid.",
+    "es": "IBAN inválido.",
+    "fr": "L’IBAN est invalide.",
+    "gr": "Το πεδίο «IBAN» είναι εσφαλμένο.",
+    "it": "L'IBAN non è valido.",
+    "pl": "IBAN jest nieprawidłowy.",
+    "tr": "IBAN geçersiz."
+  },
+  "help-purpose": {
+    "de": "Verwendungszweck darf maximal 140 Zeichen lang sein und nur die Zeichen A-Z, a-z, 0-9, /?:().,'+- und Leerzeichen enthalten.",
+    "ch": "Dr Zweck darf höchstens 140 Zeichä lang sii und nume A-Z, a-z, 0-9, /?:().,'+- und Lärespäzi enthaltä.",
+    "en": "Purpose can have 140 characters max and only include A-Z, a-z, 0-9, /?:().,'+- and spaces.",
+    "es": "El concepto puede tener hasta un máximo de 140 caracteres y solo puede incluir letras, símbolos y espacios: A-Z, a-z, 0-9, /?:().,'+-",
+    "fr": "Le motif du virement peut contenir au maximum 140 caractères et uniquement les caractères A-Z, a-z, 0-9, /?:().,'+- et espaces.",
+    "gr": "Το πεδίο «Αιτιολογία» μπορεί να περιέχει έως και 140 χαρακτήρες και να περιέχει μόνο τα γράμματα: A-Z, a-z, αριθμούς: 0-9, τα σύμβολα: /?:().,'+- καθώς και κενά.",
+    "it": "La causale può avere al massimo 140 caratteri e può includere solo i caratteri A-Z, a-z, 0-9, /?:().,'+- e spazi.",
+    "pl": "Tytuł przelewu może mieć maksymalnie 140 znaków i może zawierać tylko znaki A-Z, a-z, 0-9, /?:().,'+- oraz spacje.",
+    "tr": "Kullanım amacı en fazla 140 karakter olabilir ve yalnızca A-Z, a-z, 0-9, /?:().,'+- ve boşluk içerebilir."
+  }
+}

index.html.post

@@ -0,0 +1,5 @@
+</script>
+<script src="js/index.js"></script>
+</body>
+</html>
+

index.html.pre

@@ -5,6 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="robots" content="index, follow">
 
+    <!-- bezahlbrudi is reachable via HTTP/3, TLS1.3 and IPv6. Only the hottest tech for my brudis! -->
+    <!-- try it with: curl -6 --tlsv1.3 --http3-only https://bezahlbrudi.jetzt -->
+
     <!-- mobile app and bookmarks -->
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="mobile-web-app-capable" content="yes">
@@ -20,21 +23,23 @@
     <!-- 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:url" content="https://bezahlbrudi.jetzt">
-    <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 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:url" content="https://bezahlbrudi.jetzt/?src=twitter">
-    <meta name="twitter:image:src" content="https://bezahlbrudi.jetzt/img/sticker.png" />
+    <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" />
+    <meta name="twitter:image:alt" content="Hero with cape">
 
     <!-- icons and color -->
-    <meta name="theme-color" content="#ff0000">
+    <meta name="theme-color" content="#ffffff">
-    <meta name="theme-scheme" content="dark light">
+    <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>
@@ -51,16 +56,41 @@
         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">&#x1F1EC;&#x1F1E7; 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>
+        <h1 class="title">&#x1F9B8; BezahlBrudi</h1>
-        <p class="subtitle">Transfer money without any 3rd parties</p>
+        <p class="subtitle" data-i18n="subtitle"></p>
-        <p>The QR code can be scanned by most banking apps. Give it a try!</p>
+        <p data-i18n="explain"></p>
     </div>
 </section>
 
@@ -69,15 +99,15 @@
         <div class="columns">
             <div class="column">
                 <div id="name" class="field">
-                    <label for="input-name" class="label">Receiver Name</label>
+                    <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>
+                        <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">Receiver IBAN</label>
+                    <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>
@@ -85,16 +115,16 @@
                 </div>
 
                 <div id="bic" class="field">
-                    <label for="input-bic" class="label">Receiver BIC</label>
+                    <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">Only needed if the Sender and/or Receiver IBAN is outside the EU</p>
+                    <p class="help" data-i18n="bic-help"></p>
                 </div>
 
                 <div id="amount" class="field">
-                    <label for="input-amount" class="label">Amount</label>
+                    <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>&euro;</b></span>
@@ -103,7 +133,7 @@
                 </div>
 
                 <div id="purpose" class="field">
-                    <label for="input-purpose" class="label">Purpose</label>
+                    <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>
@@ -113,7 +143,7 @@
                 <div class="field">
                     <label class="checkbox">
                         <input id="rememberme" type="checkbox" />
-                        Remember me
+                        <span data-i18n="remember"></span>
                     </label>
                 </div>
             </div>
@@ -130,14 +160,14 @@
 <footer class="footer">
     <div class="content has-text-centered">
         <p>
-            <strong>BezahlBrudi v1.0.6</strong> by <a href="https://xengi.de">XenGi</a>.
+            <strong>BezahlBrudi v1.2.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>.
+            <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://git.xengi.de/xengi/bezahlbrudi/">here</a>.
                 <br/>
-            This site doesn't store any data outside your browser. This site doesn't provide any financial services. It is a simple QR code generator.
+                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 src="js/index.js"></script>
+<!-- "fr": "&#x1F1EB;&#x1F1F7;" -->
-</body>
+<script type="application/json" id="i18n-data">
-</html>

js/index.js

@@ -1,30 +1,64 @@
-getCookie = () => {
+// bulma hamburger menu
-  let name = "brudi=";
+document.addEventListener('DOMContentLoaded', () => {
-  let decodedCookie = decodeURIComponent(document.cookie);
+  // Get all "navbar-burger" elements
-  let ca = decodedCookie.split(';');
+  const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
-  for(let i = 0; i <ca.length; i++) {
+  // Add a click event on each of them
-    let c = ca[i];
+  $navbarBurgers.forEach(el => {
-    while (c.charAt(0) === ' ') {
+    el.addEventListener('click', () => {
-      c = c.substring(1);
+      // Get the target from the "data-target" attribute
-    }
+      const target = el.dataset.target;
-    if (c.indexOf(name) === 0) {
+      const $target = document.getElementById(target);
-      return JSON.parse(c.substring(name.length, c.length));
+      // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
-    }
+      el.classList.toggle('is-active');
-  }
+      $target.classList.toggle('is-active');
-  return "";
+    });
+  });
+});
+
+// language selector
+document.getElementById("current-language").addEventListener("click", (e) => {
+    e.preventDefault();
+    document.getElementById("language-dropdown").classList.toggle("is-active");
+});
+
+const i18n = JSON.parse(document.getElementById("i18n-data").textContent);
+const i18nSupported = Object.keys(i18n._flags)
+
+// build language selector
+const langSelector = document.getElementById("language-selector")
+for (const l of i18nSupported) {
+  const a = document.createElement("a");
+  a.classList.add("navbar-item");
+  a.innerHTML = `${i18n._flags[l]} ${l.toUpperCase()}`;
+  a.href = "#";
+  a.addEventListener("click", (e) => {
+    changeLanguage(e.target.textContent.slice(-2).toLowerCase());
+    document.getElementById("language-dropdown").classList.remove("is-active");
+  });
+  langSelector.appendChild(a);
 }
 
-setCookie = () => {
+changeLanguage = (l) => {
-  const d = new Date();
+  const lang = i18nSupported.includes(l) ? l : "en";
-  d.setTime(d.getTime() + (180*24*60*60*1000)); // 180 days
+  console.log(`Switching language to ${lang}`);
-  const data = JSON.stringify({
+  document.querySelectorAll("[data-i18n]").forEach(el => {
+    el.innerHTML = i18n[el.dataset.i18n][lang];
+  });
+  document.getElementById("current-language").innerHTML = `${i18n._flags[lang]} ${lang.toUpperCase()}`;
+  document.getElementById("input-purpose").placeholder = i18n["purpose-example"][lang];
+  document.documentElement.lang = lang;
+  saveFormData();
+};
+
+saveFormData = () => {
+  localStorage.setItem("bezahlbrudiFormData", JSON.stringify({
     name: document.querySelector("#name input").value,
     iban: document.querySelector("#iban input").value.toUpperCase(),
     bic: document.querySelector("#bic input").value.toUpperCase(),
     amount: parseFloat(document.querySelector("#amount input").value).toFixed(2),
-    purpose: document.querySelector("#purpose input").value
+    purpose: document.querySelector("#purpose input").value,
-  });
+    lang: document.getElementById("current-language").textContent.slice(-2).toLowerCase()
-  document.cookie = `brudi=${data};expires=${d.toUTCString()};path=/;SameSite=Strict;Secure`;
+  }));
 }
 
 // Field data checks
@@ -162,10 +196,9 @@ document.querySelector("#purpose input").addEventListener("input", (event) => {
 // Remember inputs
 document.querySelector("#rememberme").addEventListener("change", (event) => {
   if (event.target.checked) {
-    console.log("Save Name, IBAN and BIC to cookie..");
+    saveFormData();
-    setCookie();
   } else {
-    console.log("Remove Cookie..");
+    localStorage.clear();
   }
 })
 
@@ -229,20 +262,33 @@ ${document.querySelector("#purpose input").value}
     }
 
     if (document.querySelector("#rememberme").checked) {
-      setCookie()
+      saveFormData();
     }
   }
 }
 
-// Fill in form from cookie
+// Fill in form from local storage
-const cookie = getCookie();
+const savedData = localStorage.getItem("bezahlbrudiFormData");
-if (cookie !== "") {
+if (savedData) {
-  document.querySelector("#name input").value = cookie.name;
+  const formData = JSON.parse(savedData);
-  document.querySelector("#iban input").value = cookie.iban;
+  document.querySelector("#name input").value = formData["name"];
-  document.querySelector("#bic input").value = cookie.bic;
+  document.querySelector("#iban input").value = formData["iban"];
-  document.querySelector("#amount input").value = cookie.amount;
+  document.querySelector("#bic input").value = formData["bic"];
-  document.querySelector("#purpose input").value = cookie.purpose;
+  document.querySelector("#amount input").value = formData["amount"];
+  document.querySelector("#purpose input").value = formData["purpose"];
   document.querySelector("#rememberme").checked = true;
+  changeLanguage(formData["lang"]);
+} else {
+  // get browser language
+  let lang = "en"; // default fallback
+  for (const l of navigator.languages) {
+    const base = l.split("-")[0];
+    if (i18nSupported.includes(base)) {
+      lang = base;
+      break;
+    }
+  }
+  changeLanguage(lang);
 }
 
 // Validate all fields to set css properties
@@ -254,3 +300,9 @@ validatePurpose(document.querySelector("#purpose input"));
 
 // generate qr code on first visit
 regenerate();
+
+if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('/js/service-worker.js')
+    .catch(err => console.error('Service Worker registration failed:', err));
+}
+

js/qr-creator.es6.min.js

@@ -0,0 +1,29 @@
+/*
+ jquery-qrcode v0.14.0 - https://larsjung.de/jquery-qrcode/ */
+'use strict';let G=null;class H{}H.render=function(w,B){G(w,B)};self.QrCreator=H;
+(function(w){function B(t,c,a,e){var b={},h=w(a,c);h.u(t);h.J();e=e||0;var r=h.h(),d=h.h()+2*e;b.text=t;b.level=c;b.version=a;b.O=d;b.a=function(b,a){b-=e;a-=e;return 0>b||b>=r||0>a||a>=r?!1:h.a(b,a)};return b}function C(t,c,a,e,b,h,r,d,g,x){function u(b,a,f,c,d,r,g){b?(t.lineTo(a+r,f+g),t.arcTo(a,f,c,d,h)):t.lineTo(a,f)}r?t.moveTo(c+h,a):t.moveTo(c,a);u(d,e,a,e,b,-h,0);u(g,e,b,c,b,0,-h);u(x,c,b,c,a,h,0);u(r,c,a,e,a,0,h)}function z(t,c,a,e,b,h,r,d,g,x){function u(b,a,c,d){t.moveTo(b+c,a);t.lineTo(b,
+a);t.lineTo(b,a+d);t.arcTo(b,a,b+c,a,h)}r&&u(c,a,h,h);d&&u(e,a,-h,h);g&&u(e,b,-h,-h);x&&u(c,b,h,-h)}function A(t,c){var a=c.fill;if("string"===typeof a)t.fillStyle=a;else{var e=a.type,b=a.colorStops;a=a.position.map((b)=>Math.round(b*c.size));if("linear-gradient"===e)var h=t.createLinearGradient.apply(t,a);else if("radial-gradient"===e)h=t.createRadialGradient.apply(t,a);else throw Error("Unsupported fill");b.forEach(([b,a])=>{h.addColorStop(b,a)});t.fillStyle=h}}function y(t,c){a:{var a=c.text,e=
+c.v,b=c.N,h=c.K,r=c.P;b=Math.max(1,b||1);for(h=Math.min(40,h||40);b<=h;b+=1)try{var d=B(a,e,b,r);break a}catch(J){}d=void 0}if(!d)return null;a=t.getContext("2d");c.background&&(a.fillStyle=c.background,a.fillRect(c.left,c.top,c.size,c.size));e=d.O;h=c.size/e;a.beginPath();for(r=0;r<e;r+=1)for(b=0;b<e;b+=1){var g=a,x=c.left+b*h,u=c.top+r*h,p=r,q=b,f=d.a,k=x+h,m=u+h,D=p-1,E=p+1,n=q-1,l=q+1,y=Math.floor(Math.min(.5,Math.max(0,c.R))*h),v=f(p,q),I=f(D,n),w=f(D,q);D=f(D,l);var F=f(p,l);l=f(E,l);q=f(E,
+q);E=f(E,n);p=f(p,n);x=Math.round(x);u=Math.round(u);k=Math.round(k);m=Math.round(m);v?C(g,x,u,k,m,y,!w&&!p,!w&&!F,!q&&!F,!q&&!p):z(g,x,u,k,m,y,w&&p&&I,w&&F&&D,q&&F&&l,q&&p&&E)}A(a,c);a.fill();return t}var v={minVersion:1,maxVersion:40,ecLevel:"L",left:0,top:0,size:200,fill:"#000",background:null,text:"no text",radius:.5,quiet:0};G=function(t,c){var a={};Object.assign(a,v,t);a.N=a.minVersion;a.K=a.maxVersion;a.v=a.ecLevel;a.left=a.left;a.top=a.top;a.size=a.size;a.fill=a.fill;a.background=a.background;
+a.text=a.text;a.R=a.radius;a.P=a.quiet;if(c instanceof HTMLCanvasElement){if(c.width!==a.size||c.height!==a.size)c.width=a.size,c.height=a.size;c.getContext("2d").clearRect(0,0,c.width,c.height);y(c,a)}else t=document.createElement("canvas"),t.width=a.size,t.height=a.size,a=y(t,a),c.appendChild(a)}})(function(){function w(c){var a=C.s(c);return{S:function(){return 4},b:function(){return a.length},write:function(c){for(var b=0;b<a.length;b+=1)c.put(a[b],8)}}}function B(){var c=[],a=0,e={B:function(){return c},
+c:function(b){return 1==(c[Math.floor(b/8)]>>>7-b%8&1)},put:function(b,h){for(var a=0;a<h;a+=1)e.m(1==(b>>>h-a-1&1))},f:function(){return a},m:function(b){var h=Math.floor(a/8);c.length<=h&&c.push(0);b&&(c[h]|=128>>>a%8);a+=1}};return e}function C(c,a){function e(b,h){for(var a=-1;7>=a;a+=1)if(!(-1>=b+a||d<=b+a))for(var c=-1;7>=c;c+=1)-1>=h+c||d<=h+c||(r[b+a][h+c]=0<=a&&6>=a&&(0==c||6==c)||0<=c&&6>=c&&(0==a||6==a)||2<=a&&4>=a&&2<=c&&4>=c?!0:!1)}function b(b,a){for(var f=d=4*c+17,k=Array(f),m=0;m<
+f;m+=1){k[m]=Array(f);for(var p=0;p<f;p+=1)k[m][p]=null}r=k;e(0,0);e(d-7,0);e(0,d-7);f=y.G(c);for(k=0;k<f.length;k+=1)for(m=0;m<f.length;m+=1){p=f[k];var q=f[m];if(null==r[p][q])for(var n=-2;2>=n;n+=1)for(var l=-2;2>=l;l+=1)r[p+n][q+l]=-2==n||2==n||-2==l||2==l||0==n&&0==l}for(f=8;f<d-8;f+=1)null==r[f][6]&&(r[f][6]=0==f%2);for(f=8;f<d-8;f+=1)null==r[6][f]&&(r[6][f]=0==f%2);f=y.w(h<<3|a);for(k=0;15>k;k+=1)m=!b&&1==(f>>k&1),r[6>k?k:8>k?k+1:d-15+k][8]=m,r[8][8>k?d-k-1:9>k?15-k:14-k]=m;r[d-8][8]=!b;if(7<=
+c){f=y.A(c);for(k=0;18>k;k+=1)m=!b&&1==(f>>k&1),r[Math.floor(k/3)][k%3+d-8-3]=m;for(k=0;18>k;k+=1)m=!b&&1==(f>>k&1),r[k%3+d-8-3][Math.floor(k/3)]=m}if(null==g){b=t.I(c,h);f=B();for(k=0;k<x.length;k+=1)m=x[k],f.put(4,4),f.put(m.b(),y.f(4,c)),m.write(f);for(k=m=0;k<b.length;k+=1)m+=b[k].j;if(f.f()>8*m)throw Error("code length overflow. ("+f.f()+">"+8*m+")");for(f.f()+4<=8*m&&f.put(0,4);0!=f.f()%8;)f.m(!1);for(;!(f.f()>=8*m);){f.put(236,8);if(f.f()>=8*m)break;f.put(17,8)}var u=0;m=k=0;p=Array(b.length);
+q=Array(b.length);for(n=0;n<b.length;n+=1){var v=b[n].j,w=b[n].o-v;k=Math.max(k,v);m=Math.max(m,w);p[n]=Array(v);for(l=0;l<p[n].length;l+=1)p[n][l]=255&f.B()[l+u];u+=v;l=y.C(w);v=z(p[n],l.b()-1).l(l);q[n]=Array(l.b()-1);for(l=0;l<q[n].length;l+=1)w=l+v.b()-q[n].length,q[n][l]=0<=w?v.c(w):0}for(l=f=0;l<b.length;l+=1)f+=b[l].o;f=Array(f);for(l=u=0;l<k;l+=1)for(n=0;n<b.length;n+=1)l<p[n].length&&(f[u]=p[n][l],u+=1);for(l=0;l<m;l+=1)for(n=0;n<b.length;n+=1)l<q[n].length&&(f[u]=q[n][l],u+=1);g=f}b=g;f=
+-1;k=d-1;m=7;p=0;a=y.F(a);for(q=d-1;0<q;q-=2)for(6==q&&--q;;){for(n=0;2>n;n+=1)null==r[k][q-n]&&(l=!1,p<b.length&&(l=1==(b[p]>>>m&1)),a(k,q-n)&&(l=!l),r[k][q-n]=l,--m,-1==m&&(p+=1,m=7));k+=f;if(0>k||d<=k){k-=f;f=-f;break}}}var h=A[a],r=null,d=0,g=null,x=[],u={u:function(b){b=w(b);x.push(b);g=null},a:function(b,a){if(0>b||d<=b||0>a||d<=a)throw Error(b+","+a);return r[b][a]},h:function(){return d},J:function(){for(var a=0,h=0,c=0;8>c;c+=1){b(!0,c);var d=y.D(u);if(0==c||a>d)a=d,h=c}b(!1,h)}};return u}
+function z(c,a){if("undefined"==typeof c.length)throw Error(c.length+"/"+a);var e=function(){for(var b=0;b<c.length&&0==c[b];)b+=1;for(var r=Array(c.length-b+a),d=0;d<c.length-b;d+=1)r[d]=c[d+b];return r}(),b={c:function(b){return e[b]},b:function(){return e.length},multiply:function(a){for(var h=Array(b.b()+a.b()-1),c=0;c<b.b();c+=1)for(var g=0;g<a.b();g+=1)h[c+g]^=v.i(v.g(b.c(c))+v.g(a.c(g)));return z(h,0)},l:function(a){if(0>b.b()-a.b())return b;for(var c=v.g(b.c(0))-v.g(a.c(0)),h=Array(b.b()),
+g=0;g<b.b();g+=1)h[g]=b.c(g);for(g=0;g<a.b();g+=1)h[g]^=v.i(v.g(a.c(g))+c);return z(h,0).l(a)}};return b}C.s=function(c){for(var a=[],e=0;e<c.length;e++){var b=c.charCodeAt(e);128>b?a.push(b):2048>b?a.push(192|b>>6,128|b&63):55296>b||57344<=b?a.push(224|b>>12,128|b>>6&63,128|b&63):(e++,b=65536+((b&1023)<<10|c.charCodeAt(e)&1023),a.push(240|b>>18,128|b>>12&63,128|b>>6&63,128|b&63))}return a};var A={L:1,M:0,Q:3,H:2},y=function(){function c(b){for(var a=0;0!=b;)a+=1,b>>>=1;return a}var a=[[],[6,18],
+[6,22],[6,26],[6,30],[6,34],[6,22,38],[6,24,42],[6,26,46],[6,28,50],[6,30,54],[6,32,58],[6,34,62],[6,26,46,66],[6,26,48,70],[6,26,50,74],[6,30,54,78],[6,30,56,82],[6,30,58,86],[6,34,62,90],[6,28,50,72,94],[6,26,50,74,98],[6,30,54,78,102],[6,28,54,80,106],[6,32,58,84,110],[6,30,58,86,114],[6,34,62,90,118],[6,26,50,74,98,122],[6,30,54,78,102,126],[6,26,52,78,104,130],[6,30,56,82,108,134],[6,34,60,86,112,138],[6,30,58,86,114,142],[6,34,62,90,118,146],[6,30,54,78,102,126,150],[6,24,50,76,102,128,154],
+[6,28,54,80,106,132,158],[6,32,58,84,110,136,162],[6,26,54,82,110,138,166],[6,30,58,86,114,142,170]],e={w:function(b){for(var a=b<<10;0<=c(a)-c(1335);)a^=1335<<c(a)-c(1335);return(b<<10|a)^21522},A:function(b){for(var a=b<<12;0<=c(a)-c(7973);)a^=7973<<c(a)-c(7973);return b<<12|a},G:function(b){return a[b-1]},F:function(b){switch(b){case 0:return function(b,a){return 0==(b+a)%2};case 1:return function(b){return 0==b%2};case 2:return function(b,a){return 0==a%3};case 3:return function(b,a){return 0==
+(b+a)%3};case 4:return function(b,a){return 0==(Math.floor(b/2)+Math.floor(a/3))%2};case 5:return function(b,a){return 0==b*a%2+b*a%3};case 6:return function(b,a){return 0==(b*a%2+b*a%3)%2};case 7:return function(b,a){return 0==(b*a%3+(b+a)%2)%2};default:throw Error("bad maskPattern:"+b);}},C:function(b){for(var a=z([1],0),c=0;c<b;c+=1)a=a.multiply(z([1,v.i(c)],0));return a},f:function(b,a){if(4!=b||1>a||40<a)throw Error("mode: "+b+"; type: "+a);return 10>a?8:16},D:function(b){for(var a=b.h(),c=0,
+d=0;d<a;d+=1)for(var g=0;g<a;g+=1){for(var e=0,t=b.a(d,g),p=-1;1>=p;p+=1)if(!(0>d+p||a<=d+p))for(var q=-1;1>=q;q+=1)0>g+q||a<=g+q||(0!=p||0!=q)&&t==b.a(d+p,g+q)&&(e+=1);5<e&&(c+=3+e-5)}for(d=0;d<a-1;d+=1)for(g=0;g<a-1;g+=1)if(e=0,b.a(d,g)&&(e+=1),b.a(d+1,g)&&(e+=1),b.a(d,g+1)&&(e+=1),b.a(d+1,g+1)&&(e+=1),0==e||4==e)c+=3;for(d=0;d<a;d+=1)for(g=0;g<a-6;g+=1)b.a(d,g)&&!b.a(d,g+1)&&b.a(d,g+2)&&b.a(d,g+3)&&b.a(d,g+4)&&!b.a(d,g+5)&&b.a(d,g+6)&&(c+=40);for(g=0;g<a;g+=1)for(d=0;d<a-6;d+=1)b.a(d,g)&&!b.a(d+
+1,g)&&b.a(d+2,g)&&b.a(d+3,g)&&b.a(d+4,g)&&!b.a(d+5,g)&&b.a(d+6,g)&&(c+=40);for(g=e=0;g<a;g+=1)for(d=0;d<a;d+=1)b.a(d,g)&&(e+=1);return c+=Math.abs(100*e/a/a-50)/5*10}};return e}(),v=function(){for(var c=Array(256),a=Array(256),e=0;8>e;e+=1)c[e]=1<<e;for(e=8;256>e;e+=1)c[e]=c[e-4]^c[e-5]^c[e-6]^c[e-8];for(e=0;255>e;e+=1)a[c[e]]=e;return{g:function(b){if(1>b)throw Error("glog("+b+")");return a[b]},i:function(b){for(;0>b;)b+=255;for(;256<=b;)b-=255;return c[b]}}}(),t=function(){function c(b,c){switch(c){case A.L:return a[4*
+(b-1)];case A.M:return a[4*(b-1)+1];case A.Q:return a[4*(b-1)+2];case A.H:return a[4*(b-1)+3]}}var a=[[1,26,19],[1,26,16],[1,26,13],[1,26,9],[1,44,34],[1,44,28],[1,44,22],[1,44,16],[1,70,55],[1,70,44],[2,35,17],[2,35,13],[1,100,80],[2,50,32],[2,50,24],[4,25,9],[1,134,108],[2,67,43],[2,33,15,2,34,16],[2,33,11,2,34,12],[2,86,68],[4,43,27],[4,43,19],[4,43,15],[2,98,78],[4,49,31],[2,32,14,4,33,15],[4,39,13,1,40,14],[2,121,97],[2,60,38,2,61,39],[4,40,18,2,41,19],[4,40,14,2,41,15],[2,146,116],[3,58,36,
+2,59,37],[4,36,16,4,37,17],[4,36,12,4,37,13],[2,86,68,2,87,69],[4,69,43,1,70,44],[6,43,19,2,44,20],[6,43,15,2,44,16],[4,101,81],[1,80,50,4,81,51],[4,50,22,4,51,23],[3,36,12,8,37,13],[2,116,92,2,117,93],[6,58,36,2,59,37],[4,46,20,6,47,21],[7,42,14,4,43,15],[4,133,107],[8,59,37,1,60,38],[8,44,20,4,45,21],[12,33,11,4,34,12],[3,145,115,1,146,116],[4,64,40,5,65,41],[11,36,16,5,37,17],[11,36,12,5,37,13],[5,109,87,1,110,88],[5,65,41,5,66,42],[5,54,24,7,55,25],[11,36,12,7,37,13],[5,122,98,1,123,99],[7,73,
+45,3,74,46],[15,43,19,2,44,20],[3,45,15,13,46,16],[1,135,107,5,136,108],[10,74,46,1,75,47],[1,50,22,15,51,23],[2,42,14,17,43,15],[5,150,120,1,151,121],[9,69,43,4,70,44],[17,50,22,1,51,23],[2,42,14,19,43,15],[3,141,113,4,142,114],[3,70,44,11,71,45],[17,47,21,4,48,22],[9,39,13,16,40,14],[3,135,107,5,136,108],[3,67,41,13,68,42],[15,54,24,5,55,25],[15,43,15,10,44,16],[4,144,116,4,145,117],[17,68,42],[17,50,22,6,51,23],[19,46,16,6,47,17],[2,139,111,7,140,112],[17,74,46],[7,54,24,16,55,25],[34,37,13],[4,
+151,121,5,152,122],[4,75,47,14,76,48],[11,54,24,14,55,25],[16,45,15,14,46,16],[6,147,117,4,148,118],[6,73,45,14,74,46],[11,54,24,16,55,25],[30,46,16,2,47,17],[8,132,106,4,133,107],[8,75,47,13,76,48],[7,54,24,22,55,25],[22,45,15,13,46,16],[10,142,114,2,143,115],[19,74,46,4,75,47],[28,50,22,6,51,23],[33,46,16,4,47,17],[8,152,122,4,153,123],[22,73,45,3,74,46],[8,53,23,26,54,24],[12,45,15,28,46,16],[3,147,117,10,148,118],[3,73,45,23,74,46],[4,54,24,31,55,25],[11,45,15,31,46,16],[7,146,116,7,147,117],
+[21,73,45,7,74,46],[1,53,23,37,54,24],[19,45,15,26,46,16],[5,145,115,10,146,116],[19,75,47,10,76,48],[15,54,24,25,55,25],[23,45,15,25,46,16],[13,145,115,3,146,116],[2,74,46,29,75,47],[42,54,24,1,55,25],[23,45,15,28,46,16],[17,145,115],[10,74,46,23,75,47],[10,54,24,35,55,25],[19,45,15,35,46,16],[17,145,115,1,146,116],[14,74,46,21,75,47],[29,54,24,19,55,25],[11,45,15,46,46,16],[13,145,115,6,146,116],[14,74,46,23,75,47],[44,54,24,7,55,25],[59,46,16,1,47,17],[12,151,121,7,152,122],[12,75,47,26,76,48],
+[39,54,24,14,55,25],[22,45,15,41,46,16],[6,151,121,14,152,122],[6,75,47,34,76,48],[46,54,24,10,55,25],[2,45,15,64,46,16],[17,152,122,4,153,123],[29,74,46,14,75,47],[49,54,24,10,55,25],[24,45,15,46,46,16],[4,152,122,18,153,123],[13,74,46,32,75,47],[48,54,24,14,55,25],[42,45,15,32,46,16],[20,147,117,4,148,118],[40,75,47,7,76,48],[43,54,24,22,55,25],[10,45,15,67,46,16],[19,148,118,6,149,119],[18,75,47,31,76,48],[34,54,24,34,55,25],[20,45,15,61,46,16]],e={I:function(b,a){var e=c(b,a);if("undefined"==
+typeof e)throw Error("bad rs block @ typeNumber:"+b+"/errorCorrectLevel:"+a);b=e.length/3;a=[];for(var d=0;d<b;d+=1)for(var g=e[3*d],h=e[3*d+1],t=e[3*d+2],p=0;p<g;p+=1){var q=t,f={};f.o=h;f.j=q;a.push(f)}return a}};return e}();return C}());
+export default QrCreator;
+//# sourceMappingURL=qr-creator.min.js.map

js/service-worker.js

@@ -0,0 +1,4 @@
+self.addEventListener('fetch', event => {
+  event.respondWith(fetch(event.request));
+});
+

site.webmanifest

@@ -1,15 +1,26 @@
 {
+  "id": "https://bezahlbrudi.jetzt",
+  "scope": "https://bezahlbrudi.jetzt",
   "name": "BezahlBrudi",
   "short_name": "BezahlBrudi",
+  "description": "Webapp that generates GiroCodes so that you can easily exchange money with friends and family without involving third party financial services",
+  "categories": ["finance", "utilities"],
+  "start_url": "/",
   "icons": [
     {
-      "src": "/img/web-app-manifest-192x192.png",
+      "src": "/img/icon-96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/img/icon-192.png",
       "sizes": "192x192",
       "type": "image/png",
       "purpose": "maskable"
     },
     {
-      "src": "/img/web-app-manifest-512x512.png",
+      "src": "/img/icon-512.png",
       "sizes": "512x512",
       "type": "image/png",
       "purpose": "maskable"
@@ -17,5 +28,5 @@
   ],
   "theme_color": "#ffffff",
   "background_color": "#ffffff",
-  "display": "standalone"
+  "display": "fullscreen"
 }