Update IbanGenerator and UUIDGenerator styles, Updated standalone style

Update extra.css, nibblepoker.min.css, and 2 more files...

data/strings/en/iban-generator.yml

@@ -9,12 +9,18 @@ meta.description.light: "Web application that allows you to generate IBANs in bu
 country.label: "Country"
 
 option.count: "IBAN Count"
-option.human.readable: "Format for readability"
-option.prefer.numbers: "Prefer numbers over letters"
 option.for.each: "Generate <i>X</i> for each country"
 option.sepa.enable: "Enable SEPA countries"
 option.non-sepa.enable: "Enable non-SEPA countries"
 
+option.prefer.random: "Do not prefer letters nor numbers"
+option.prefer.numbers: "Prefer numbers over letters"
+option.prefer.letters: "Prefer letters over numbers"
+
+option.human.format.none: "No formatting"
+option.human.format.standard: "Use recommended spacing"
+option.human.format.4by4: "Use 4 character-wide spacing"
+
 license.1: "The code for this project is released in the public domain."
 license.2: "The original source code can be found on <a href=\"https://github.com/aziascreations/Web-NibblePoker\">GitHub</a>."
 license.3: "Data from Swift's 

data/strings/fr/iban-generator.yml

@@ -9,12 +9,18 @@ meta.description.light: "Application web qui vous permet de générer des IBANs
 country.label: "Pays"
 
 option.count: "Nombre d'IBAN"
-option.human.readable: "Formatter pour lecture"
-option.prefer.numbers: "Favoriser les nombres aux lettres"
 option.for.each: "Générer <i>X</i> pour chaque pays"
 option.sepa.enable: "Activer les pays SEPA"
 option.non-sepa.enable: "Activer les pays non-SEPA"
 
+option.prefer.random: "Pas de favorisation des lettres ou nombres"
+option.prefer.numbers: "Favoriser les nombres aux lettres"
+option.prefer.letters: "Favoriser les lettres aux nombres"
+
+option.human.format.none: "Aucun formatage"
+option.human.format.standard: "Utiliser le format standard des pays"
+option.human.format.4by4: "Formater en segments de 4 caractères"
+
 license.1: "Le code de ce projet est publié dans le domaine public."
 license.2: "Le code source original peut être trouvé sur <a href=\"https://github.com/aziascreations/Web-NibblePoker\">GitHub</a>."
 license.3: "Les données du 

static/resources/NibblePoker/applets/iban-generator/iban-generator.mjs

@@ -30,10 +30,20 @@ import {initCore} from "../../js/nibblepoker-core.mjs";
 
     /** @type {HTMLInputElement} */
     const eOptionCount = document.querySelector("input#iban-generator-option-count");
-    /** @type {HTMLInputElement} */
+
-    const eOptionPrettyPrint = document.querySelector("input#iban-generator-option-pretty");
+    ///** @type {HTMLInputElement} */
+    //const eOptionPreferRandom = document.querySelector("input#iban-generator-option-prefer-random");
     /** @type {HTMLInputElement} */
     const eOptionPreferNumbers = document.querySelector("input#iban-generator-option-prefer-numbers");
+    /** @type {HTMLInputElement} */
+    const eOptionPreferLetters = document.querySelector("input#iban-generator-option-prefer-letters");
+
+    /** @type {HTMLInputElement} */
+    const eOptionFormatNone = document.querySelector("input#iban-generator-option-format-none");
+    /** @type {HTMLInputElement} */
+    const eOptionFormatStandard = document.querySelector("input#iban-generator-option-format-standard");
+    /** @type {HTMLInputElement} */
+    const eOptionFormat4By4 = document.querySelector("input#iban-generator-option-format-4by4");
 
     /** @type {HTMLElement} */
     const eGenerateButton = document.querySelector("#iban-generator-generate");
@@ -75,14 +85,14 @@ import {initCore} from "../../js/nibblepoker-core.mjs";
 
     /** @returns {number} */
     function getDesiredCount() {
-        return getInputCount(eOptionCount, 1, 1000);
+        return getInputCount(eOptionCount, 1, 10000);
     }
 
     function changeDesiredCount(difference = 0) {
         if(difference !== 0) {
-            eOptionCount.value = getDesiredCount(eOptionCount, 1, 1000) + difference;
+            eOptionCount.value = getDesiredCount(eOptionCount, 1, 10000) + difference;
         }
-        eOptionCount.value = getDesiredCount(eOptionCount, 1, 1000);
+        eOptionCount.value = getDesiredCount(eOptionCount, 1, 10000);
     }
 
     window.onload = function () {
@@ -108,12 +118,28 @@ import {initCore} from "../../js/nibblepoker-core.mjs";
             let desiredCount = getDesiredCount();
 
             let preferNumbers = eOptionPreferNumbers.checked;
-            let prettyIban = eOptionPrettyPrint.checked;
+            let preferLetters = eOptionPreferLetters.checked;
+
+            let ibanFormat = (
+                eOptionFormatNone.checked ? 0 : (
+                    eOptionFormatStandard.checked ? 1 : (
+                        eOptionFormat4By4.checked ? 2 : 0
+                    )
+                )
+            );
 
             /** @type {IbanSpecification[]} */
             let targetSpecs;
             if(eOptionForEach.checked) {
                 targetSpecs = Object.values(countriesSpecs);
+
+                // BUGFIX: Removing unwanted specs.
+                if(!eOptionEnableSepa.checked) {
+                    targetSpecs = targetSpecs.filter(ibanSpec => !ibanSpec.isSepa);
+                }
+                if(!eOptionEnableNonSepa.checked) {
+                    targetSpecs = targetSpecs.filter(ibanSpec => ibanSpec.isSepa);
+                }
             } else {
                 targetSpecs = [countriesSpecs[eOptionCountry.value]];
             }
@@ -123,15 +149,27 @@ import {initCore} from "../../js/nibblepoker-core.mjs";
                     return;
                 }
                 for(let i = 0; i < desiredCount; i++) {
-                    if(prettyIban) {
+                    if(ibanFormat === 1) {
+                        // standard
                         lastIBANs.push(
                             spec.getFormattedIban(
-                                new StandardIban(spec.countryCode, spec.generateRandomBban(preferNumbers), spec).toString()
+                                new StandardIban(spec.countryCode, spec.generateRandomBban(preferNumbers, preferLetters), spec)
+                                    .toString()
                             )
                         );
-                    } else {
+                    } else if(ibanFormat === 2) {
+                        // 4-by-4
                         lastIBANs.push(
-                            new StandardIban(spec.countryCode, spec.generateRandomBban(preferNumbers), spec).toString()
+                            new StandardIban(spec.countryCode, spec.generateRandomBban(preferNumbers, preferLetters), spec)
+                                .toString()
+                                .match(/.{1,4}/g)
+                                .join(' ')
+                        );
+                    } else {
+                        // none
+                        lastIBANs.push(
+                            new StandardIban(spec.countryCode, spec.generateRandomBban(preferNumbers, preferLetters), spec)
+                                .toString()
                         );
                     }
                 }

static/resources/NibblePoker/css/extra.css

@@ -15,22 +15,6 @@ input[type=file].np-file-input-drop {
     cursor: pointer;
 }
 
-/* Nicer checkboxes, move to CSS 8 */
-input[type=checkbox] {
-    text-align: center;
-    padding: 0;
-
-    &:before {
-        content: "✘";
-    }
-
-    &:checked {
-        &:before {
-            content: "✔";
-        }
-    }
-}
-
 /* Top margin trimmer for heading renderer */
 
 

static/resources/NibblePoker/libs/iban.mjs

@@ -269,7 +269,7 @@ export class IbanSpecification {
         return iban.match(/.{1,4}/g).join(' ');
     }
 
-    generateRandomBban(preferNumbers = false) {
+    generateRandomBban(preferNumbers = false, preferLetters = false) {
         let returnedBban = "";
         let patternParts = ("_" + this.bbanFormat + "0").split("!");
 
@@ -291,7 +291,11 @@ export class IbanSpecification {
                     if(preferNumbers) {
                         elementChoices = charsN;
                     } else {
-                        elementChoices = charsC;
+                        if(preferLetters) {
+                             elementChoices = charsA;
+                        } else {
+                             elementChoices = charsC;
+                        }
                     }
                     break;
                 case 'a':

templates/applets/iban-generator.jinja

@@ -2,17 +2,12 @@
 <!-- {{ render_h2(l10n("disclaimer.title", applet_data.id, user_lang)) }} -->
 
 <label for="iban-generator-option-enable-sepa" class="mr-xxs">{{ l10n("option.sepa.enable", "iban-generator", user_lang) }}:</label>
-<input id="iban-generator-option-enable-sepa" class="r-m border" type="checkbox" checked>
+<input id="iban-generator-option-enable-sepa" class="r-m border cb-pretty" type="checkbox" checked>
 
 <br>
 
 <label for="iban-generator-option-enable-non-sepa" class="mr-xxs">{{ l10n("option.non-sepa.enable", "iban-generator", user_lang) }}:</label>
-<input id="iban-generator-option-enable-non-sepa" class="r-m border" type="checkbox" checked>
+<input id="iban-generator-option-enable-non-sepa" class="r-m border cb-pretty" type="checkbox" checked>
-
-<br>
-
-<label for="iban-generator-option-foreach" class="mr-xxs">{{ l10n("option.for.each", "iban-generator", user_lang) }}:</label>
-<input id="iban-generator-option-foreach" class="r-m border" type="checkbox">
 
 <hr class="subtle">
 
@@ -113,17 +108,45 @@
 <br>
 
 <label for="iban-generator-option-count" class="mr-xs">{{ l10n("option.count", "iban-generator", user_lang) }}:</label>
-<input id="iban-generator-option-count" class="p-xxs border r-s" type="number" value="4" min="1" max="1000">
+<input id="iban-generator-option-count" class="p-xxs border r-s" type="number" value="4" min="1" max="10000">
 
 <br>
 
-<label for="iban-generator-option-pretty" class="mr-xxs">{{ l10n("option.human.readable", "iban-generator", user_lang) }}:</label>
+<label for="iban-generator-option-foreach" class="mr-xxs">{{ l10n("option.for.each", "iban-generator", user_lang) }}:</label>
-<input id="iban-generator-option-pretty" class="r-m border" type="checkbox" checked>
+<input id="iban-generator-option-foreach" class="r-m border cb-pretty" type="checkbox">
+
+<hr class="subtle">
+
+
+<input type="radio" id="iban-generator-option-prefer-random" name="iban_charset" value="0" class="radio-solid border mr-xxs radio-unchecked-subtle" checked>
+<label for="iban-generator-option-prefer-random">{{ l10n("option.prefer.random", "iban-generator", user_lang) }}</label>
 
 <br>
 
-<label for="iban-generator-option-prefer-numbers" class="mr-xxs">{{ l10n("option.prefer.numbers", "iban-generator", user_lang) }}:</label>
+<input type="radio" id="iban-generator-option-prefer-numbers" name="iban_charset" value="0" class="radio-solid border mr-xxs radio-unchecked-subtle">
-<input id="iban-generator-option-prefer-numbers" class="r-m border" type="checkbox">
+<label for="iban-generator-option-prefer-numbers">{{ l10n("option.prefer.numbers", "iban-generator", user_lang) }}</label>
+
+<br>
+
+<input type="radio" id="iban-generator-option-prefer-letters" name="iban_charset" value="0" class="radio-solid border mr-xxs radio-unchecked-subtle">
+<label for="iban-generator-option-prefer-letters">{{ l10n("option.prefer.letters", "iban-generator", user_lang) }}</label>
+
+<hr class="subtle">
+
+
+<input type="radio" id="iban-generator-option-format-none" name="iban_format" value="none" class="radio-solid border mr-xxs radio-unchecked-subtle" checked>
+<label for="iban-generator-option-format-none">{{ l10n("option.human.format.none", "iban-generator", user_lang) }}</label>
+
+<br>
+
+<input type="radio" id="iban-generator-option-format-standard" name="iban_format" value="standard" class="radio-solid border mr-xxs radio-unchecked-subtle">
+<label for="iban-generator-option-format-standard">{{ l10n("option.human.format.standard", "iban-generator", user_lang) }}</label>
+
+<br>
+
+<input type="radio" id="iban-generator-option-format-4by4" name="iban_format" value="4by4" class="radio-solid border mr-xxs radio-unchecked-subtle">
+<label for="iban-generator-option-format-4by4">{{ l10n("option.human.format.4by4", "iban-generator", user_lang) }}</label>
+
 
 
 <hr class="subtle">

templates/applets/uuid-generator.jinja

@@ -12,12 +12,12 @@
 <br>
 
 <label for="uuid-generator-option-hyphens" class="mr-xxs">{{ l10n("option.hyphen", "uuid-generator", user_lang) }}:</label>
-<input id="uuid-generator-option-hyphens" class="r-m border" type="checkbox" checked>
+<input id="uuid-generator-option-hyphens" class="r-m border cb-pretty" type="checkbox" checked>
 
 <br>
 
 <label for="uuid-generator-option-guid-brackets" class="mr-xxs">{{ l10n("option.guid_brackets", "uuid-generator", user_lang) }}:</label>
-<input id="uuid-generator-option-guid-brackets" class="r-m border" type="checkbox">
+<input id="uuid-generator-option-guid-brackets" class="r-m border cb-pretty" type="checkbox">
 
 <hr class="subtle">