diff --git a/index.html b/index.html index b402406..84f090b 100644 --- a/index.html +++ b/index.html @@ -60,11 +60,33 @@ + +

BezahlBrudi

-

Transfer money without any 3rd parties

-

The QR code can be scanned by most banking apps. Give it a try!

+

+

@@ -73,7 +95,7 @@
- +
@@ -81,7 +103,7 @@
- +
@@ -89,16 +111,16 @@
- +
-

Only needed if the Sender and/or Receiver IBAN is outside the EU

+

- +
€ @@ -107,7 +129,7 @@
- +
@@ -117,7 +139,7 @@
@@ -134,14 +156,63 @@

- BezahlBrudi v1.1.0 by XenGi. - The source code is licensed MIT. Find the source code on GitLab. -
- 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. + BezahlBrudi v1.2.0 by XenGi. + + The source code is licensed under MIT, you can find it here. +
+ 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.

+ diff --git a/js/index.js b/js/index.js index 0b8076c..32a520c 100644 --- a/js/index.js +++ b/js/index.js @@ -1,10 +1,60 @@ +// bulma hamburger menu +document.addEventListener('DOMContentLoaded', () => { + // Get all "navbar-burger" elements + const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0); + // Add a click event on each of them + $navbarBurgers.forEach(el => { + el.addEventListener('click', () => { + // Get the target from the "data-target" attribute + const target = el.dataset.target; + const $target = document.getElementById(target); + // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu" + el.classList.toggle('is-active'); + $target.classList.toggle('is-active'); + }); + }); +}); + +// 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); +} + +changeLanguage = (l) => { + const lang = i18nSupported.includes(l) ? l : "en"; + document.querySelectorAll("[data-i18n]").forEach(el => { + el.innerHTML = i18n[el.dataset.i18n][lang]; + }); + document.getElementById("current-language").innerHTML = `${i18n._flags[lang]} ${lang.toUpperCase()}`; + console.log(`Switching language to ${lang}`); +}; + 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() })); } @@ -224,6 +274,18 @@ if (savedData) { 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