From 83cef1824b0f2573e46581dbecee42f4e133f160 Mon Sep 17 00:00:00 2001 From: Ricardo Band Date: Sun, 17 Aug 2025 15:11:40 +0200 Subject: [PATCH] now multi lingual --- index.html | 97 ++++++++++++++++++++++++++++++++++++++++++++++------- js/index.js | 64 ++++++++++++++++++++++++++++++++++- 2 files changed, 147 insertions(+), 14 deletions(-) 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