Revamped site's common scripts, Many pages slightly broken

Update commons.yml, excel-password-remover.yml, and 31 more files...

data/strings/en/commons.yml

@@ -64,10 +64,13 @@ none.fp: None
 
 eula.short: EULA
 eula.long: End-user license agreement (EULA)
+disclaimer.responsability: Disclaimer
+disclaimer.warning: Disclaimer
 
 dont.ask.again: "Don't ask again"
 
-file.drop.upload: "Choose file(s)"
+file.drop.upload.single: "Choose file"
+file.drop.upload.multiple: "Choose file(s)"
 file.drop.clear: "Clear selection"
 file.drop.label.single: "Choose or drop a file:"
 file.drop.label.multiple: "Choose or drop files:"

data/strings/en/excel-password-remover.yml

@@ -37,10 +37,10 @@ links.title: Links
 content.link.demo: Demo hosted on GitHub
 
 
-eula.1: "This tool is for use only with files you have permission to unlock.<br>
+eula.1: "This tool should only be used with files you have the express permission to unlock."
-If you don’t have authorization, contact the appropriate authority.<br>
+eula.2: "All password removal is done locally in your browser, and <span class='t-bold'>no data is sent online</span>.<br>
-You are responsible for how you use this tool."
+The original password cannot be revealed as it’s secure by design and not stored in plain text; it simply gets removed."
-eula.2: "No data is sent online, as everything happens in your browser with JavaScript.<br>
+eula.3: "By using this tool, you accept full responsibility, and that it is provided “as is” without any warranty."
-However, do not use this tool for sensitive files unless you have permission from the relevant authorities to avoid legal issues."
+
-eula.3: "The tool doesn't reveal the original password, as it’s secure and not stored in plain text; it simply removes it."
+file.selection.title: "File Selection"
-eula.4: "By using this tool, you accept full responsibility, and it is provided “as is”, without any warranty."
+file.selection.1: "Drop your excel file(s) here or click on the buttons."

data/strings/fr/commons.yml

@@ -64,10 +64,13 @@ none.fp: Aucunes
 
 eula.short: CLUF
 eula.long: Contrat de licence utilisateur final (CLUF)
+disclaimer.responsability: Clause de non-responsabilité
+disclaimer.warning: Avertissement
 
 dont.ask.again: "Ne plus demander"
 
-file.drop.upload: "Ajouter fichier(s)"
+file.drop.upload.single: "Ajouter fichier"
+file.drop.upload.multiple: "Ajouter fichier(s)"
 file.drop.clear: "Vider la séléction"
 file.drop.label.single: "Choisissez ou déposez un fichier:"
 file.drop.label.multiple: "Choisissez ou déposez des fichiers:"

data/strings/fr/excel-password-remover.yml

@@ -31,3 +31,11 @@ usage.p1: >-
 demo.title: Vidéo de démonstration
 links.title: Liens
 content.link.demo: Démo hébergée sur GitHub
+
+eula.1 : "Cet outil ne doit être utilisé qu'avec des fichiers pour lesquels vous avez l'autorisation de les déverrouiller."
+eula.2 : "Toute suppression de mot de passe se fait localement dans votre navigateur, et <span class='t-bold'>aucune donnée n'est envoyée via Internet</span>.<br>
+Le mot de passe original ne peut pas être révélé car il est sécurisé par Excel et n'est pas stocké en texte clair ; il est simplement supprimé."
+eula.3 : "En utilisant cet outil, vous acceptez l'entière responsabilité de vos action, et le fait qu'il est fourni “tel quel” sans aucune garantie."
+
+file.selection.title : "Sélection de fichier(s)"
+file.selection.1 : "Déposez vos fichiers Excel ici ou cliquez sur les boutons."

data/tools/.excel-password-remover.yml

@@ -1,30 +0,0 @@
-metadata:
-  head:
-    title_key: "meta.title"
-    description_key: "meta.description"
-  opengraph:
-    title_key: "meta.title"
-    description_key: "meta.description"
-    type: null
-    url: null
-    image_url: "/resources/NibblePoker/images/tools/excel-password-remover/excel-password-remover.png"
-    image_type: null
-  twitter:
-    title_key: "meta.title"
-    description_key: "meta.description"
-  index:
-    priority: 100
-    enable: true
-    title_key: "meta.title"
-    preamble_key: "meta.description"
-    image_url: "/resources/NibblePoker/images/tools/excel-password-remover/excel-password-remover.png"
-    image_alt_key: ""
-  general:
-    icon: "fab fa-python"
-    title_key: "meta.title"
-    subtitle_key: "article.subtitle"
-    tags:
-      - "undefined"
-resources:
-  scripts:
-    - "epr_main.js"

data/tools/excel-password-remover.yml

@@ -24,7 +24,7 @@ tools:
         image_url: "/resources/NibblePoker/images/tools/excel-password-remover/excel-password-remover.png"
         image_alt_key: ""
       general:
-        icon: "fab fa-python"
+        icon: "fad fa-table-cells-column-unlock"
         title_key: "meta.title"
         subtitle_key: "article.subtitle"
         tags:

scripts/compile-js-site.cmd

@@ -15,27 +15,37 @@ echo Minifying nibblepoker.js
 pushd %CD%
 cd %~dp0\..\static\resources\NibblePoker\js\
 echo ^> static\resources\NibblePoker\js\nibblepoker.js
-call "%~dp0node_modules\.bin\rollup" nibblepoker.mjs --file nibblepoker.js
+call "%~dp0node_modules\.bin\rollup" nibblepoker-default.mjs --file nibblepoker-default.js
-call "%~dp0node_modules\.bin\terser" nibblepoker.js -c -m -o nibblepoker.min.js
+call "%~dp0node_modules\.bin\terser" nibblepoker-default.js -c -m -o nibblepoker-default.min.js
-echo ^> static\resources\NibblePoker\js\nibblepoker-code.js
+
+echo ^> static\resources\NibblePoker\js\nibblepoker-code.mjs
+call "%~dp0node_modules\.bin\rollup" nibblepoker-code.mjs --file nibblepoker-code.js
 call "%~dp0node_modules\.bin\terser" nibblepoker-code.js -c -m -o nibblepoker-code.min.js
-echo ^> static\resources\NibblePoker\js\nibblepoker-contributors.js
+
+echo ^> static\resources\NibblePoker\js\nibblepoker-contributors.mjs
+call "%~dp0node_modules\.bin\rollup" nibblepoker-contributors.mjs --file nibblepoker-contributors.js
 call "%~dp0node_modules\.bin\terser" nibblepoker-contributors.js -c -m -o nibblepoker-contributors.min.js
+
 echo ^> static\resources\NibblePoker\js\nibblepoker-debug.js
+call "%~dp0node_modules\.bin\rollup" nibblepoker-debug.mjs --file nibblepoker-debug.js
 call "%~dp0node_modules\.bin\terser" nibblepoker-debug.js -c -m -o nibblepoker-debug.min.js
+
 echo ^> static\resources\NibblePoker\js\nibblepoker-splide.js
+call "%~dp0node_modules\.bin\rollup" nibblepoker-splide.mjs --file nibblepoker-splide.js
 call "%~dp0node_modules\.bin\terser" nibblepoker-splide.js -c -m -o nibblepoker-splide.min.js
 popd
 
-:js-svgtopng-minify
+
-echo Minifying SVG-to-PNG
+:js-applet-excel-password-remover
+echo Minifying Excel Password Remover
 pushd %CD%
-cd %~dp0\..\static\resources\NibblePoker\tools\svg-to-png\
+cd %~dp0\..\static\resources\NibblePoker\applets\excel-password-remover\
-echo ^> static\resources\NibblePoker\tools\svg-to-png\svg-to-png.mjs
+echo ^> static\resources\NibblePoker\applets\excel-password-remover\excel-password-remover.mjs
-call "%~dp0node_modules\.bin\rollup" svg-to-png.mjs --file svg-to-png.js
+call "%~dp0node_modules\.bin\rollup" excel-password-remover.mjs --file excel-password-remover.js
-call "%~dp0node_modules\.bin\terser" svg-to-png.js -c -m -o svg-to-png.min.js
+call "%~dp0node_modules\.bin\terser" excel-password-remover.js -c -m -o excel-password-remover.min.js
 popd
 
+
 :js-uuidgenerator-minify
 echo Minifying UUID Generator
 pushd %CD%

static/resources/NibblePoker/applets/excel-password-remover/excel-password-remover.mjs

@@ -1,30 +1,53 @@
+import {initCore} from "../../js/nibblepoker-core.mjs"
+
 const excelFileRegex = /^.*\.xls[xm]$/gi;
 const excelWorksheetRegex = /^xl\/worksheets\/.*.xml$/gi;
 
+/**
+ * Checks if the given filename appears to be for an Excel file.
+ * @param fileName {string} Filename to be checked
+ * @returns {boolean} `true` if it appears to be an Excel file, `false` otherwise.
+ */
+function isExcelExtension(fileName) {
+    return fileName.match(excelFileRegex) !== null;
+}
+
+// Tool-centric stuff
+{
+    initCore();
+
     var outputZip;
     var outputZipFilename = "default-filename.error.zip";
     var filesTotalCount = 0;
     var filesProcessedCount = 0;
     var passwordsRemoved = 0;
 
-// Tool-centric stuff
-{
     /** @type {string} */
     const appletId = "excel-password-remover";
 
-    ///** @type {HTMLElement} */
+    /** @type {HTMLElement} */
-    //const eEulaContainer = document.querySelector(`#${appletId}-eula`);
+    const eEulaContainer = document.querySelector(`#${appletId}-eula`);
     ///** @type {HTMLInputElement} */
     //const eEulaDontAskAgainOption = document.querySelector(`input#${appletId}-eula-remember`);
     ///** @type {HTMLButtonElement} */
     //const eEulaAcceptButton = document.querySelector(`button#${appletId}-eula-accept`);
 
+    /** @type {HTMLInputElement} */
+    const eFileInput = document.querySelector(`input[type=file]#${appletId}-input-file`);
+
     /*function acceptTerms() {
         document.getElementById("warning").hidden = true;
         document.getElementById("file-select").hidden = false;
     }*/
 
     window.onload = function () {
+
+		eFileInput.addEventListener('change', function(e) {
+            let fileCount = e.target.files.length;
+
+            console.log(fileCount);
+        });
+
         /*console.log(eEulaContainer);
         console.log(eEulaDontAskAgainOption);
         console.log(eEulaAcceptButton);

static/resources/NibblePoker/js/nibblepoker-code.mjs

@@ -0,0 +1,68 @@
+document.addEventListener("DOMContentLoaded", () => {
+	// Highlights the code blocks when included on a page.
+	// This command is separated in its own file since highlight.js isn't on every page and because I can't use JS
+	//   in a script element without using an external .js file.
+	Array.from(document.getElementsByClassName("code")).forEach(eCodeContainer => {
+		let language = null;
+		
+		eCodeContainer.classList.forEach(cCodeContainer => {
+			if(cCodeContainer.startsWith("language-")) {
+				language = cCodeContainer;
+			}
+		});
+		
+		if(language !== null) {
+			Array.from(eCodeContainer.children).forEach(eCodeLine => {
+				if(eCodeLine.classList.contains("code-line")) {
+					eCodeLine.classList.add(language);
+					hljs.highlightElement(eCodeLine);
+				}
+			});
+		}
+	});
+
+	// Adding the action to copy the code to elements with the "js-code-copy" class.
+	// The search works by searching the closest parent with the "code" class or that is a "code" element, and then
+	//   reading each of its children with the "code-line" class.
+	Array.from(document.getElementsByClassName("js-code-copy")).forEach(eCodeCopyButton => {
+		let eParentCodeBlock = eCodeCopyButton;
+		
+		while(eParentCodeBlock != null &&!eParentCodeBlock.classList.contains("code") &&
+		eParentCodeBlock.nodeName.toLowerCase() !== "code") {
+			eParentCodeBlock = eParentCodeBlock.parentElement;
+		}
+		
+		if(eParentCodeBlock != null) {
+			let code = "";
+			
+			Array.from(eParentCodeBlock.children).forEach(eCodeLine => {
+				if(eCodeLine.classList.contains("code-line")) {
+					code += eCodeLine.textContent + "\n"
+				}
+			});
+			
+			eCodeCopyButton.onclick = function() {
+				const eCodeCopySpans = eCodeCopyButton.querySelectorAll("span");
+				
+				navigator.clipboard.writeText(code);
+				
+				if(eCodeCopySpans.length < 2) {
+					return;
+				}
+				
+				const eSpanCopy = eCodeCopySpans[0];
+				const eSpanCopied = eCodeCopySpans[1];
+				
+				eSpanCopy.hidden = true;
+				eSpanCopied.hidden = false;
+				
+				fadeOut(eSpanCopied, 600).then(r => {
+					eSpanCopy.hidden = false;
+					eSpanCopied.hidden = true;
+				});
+			};
+			
+			eCodeCopyButton.hidden = false;
+		}
+	});
+});

static/resources/NibblePoker/js/nibblepoker-contributors.mjs

@@ -0,0 +1,64 @@
+{
+	const rootSoundDirectory = "/resources/NibblePoker/sounds/"
+	
+	class CatData {
+		constructor(meows, purrs) {
+			this.meowSounds = meows;
+			this.purrSounds = purrs;
+		}
+	}
+	
+	const kittyData = {
+		"kitty-kiki": new CatData(
+			["meow-test-01.ogg"],
+			["kiki-ronron-01.ogg"]
+		),
+		"kitty-maki": new CatData(
+			["meow-test-02.ogg"],
+			[]
+		),
+	}
+	
+	document.addEventListener("DOMContentLoaded", () => {
+		for(const [eId, catData] of Object.entries(kittyData)) {
+			const eHovered = document.getElementById(eId);
+			
+			const audioPurr = (catData.purrSounds.length > 0) ? new Audio() : null;
+			
+			if(eHovered !== null) {
+				eHovered.addEventListener('mouseover', function() {
+					// Playing the meow sound
+					if(catData.meowSounds.length > 0) {
+						const meowIndex = Math.floor(Math.random() * catData.meowSounds.length);
+						const audioMeow = new Audio(rootSoundDirectory + catData.meowSounds[meowIndex]);
+						audioMeow.volume = 0.1;
+						try {
+							audioMeow.play();
+						} catch(DOMException) {
+						}
+					}
+					
+					// Playing the purr sound
+					if(audioPurr !== null) {
+						const purrIndex = Math.floor(Math.random() * catData.purrSounds.length);
+						audioPurr.src = rootSoundDirectory + catData.purrSounds[purrIndex];
+						audioPurr.volume = 0.075;
+						try {
+							audioPurr.load();
+							audioPurr.loop = true;
+							audioPurr.play();
+						} catch(DOMException) {
+						}
+					}
+				});
+				
+				eHovered.addEventListener('mouseout', function() {
+					// Stopping the purring sound
+					if(audioPurr !== null) {
+						audioPurr.pause();
+					}
+				});
+			}
+		}
+	});
+}

static/resources/NibblePoker/js/nibblepoker-core.mjs

@@ -1,58 +1,20 @@
-// NibblePoker - Mandatory Scripts
+// NibblePoker - Core Scripts
 // Author: Herwin Bozet (@NibblePoker)
 // License: Public Domain (This code)
-// Remark: This modules contains all the scripts that are globally required on this website
+// Remark:
+//  * This module contains all the scripts that are globally required on this website
 
-import {fadeIn} from "./nibblepoker-ui"
+export let isSidebarVisible = true;
 
-/*class CpuArchitecture {
+export function initCore() {
-	constructor(id, name) {
+    const eSidebarToggleButton = document.getElementById("sidebar-toggle-footer");
-		this.id = id;
-		this.name = name;
-	}
-}
-
-const CpuArchitectures = {
-	Unknown: new CpuArchitecture(0, "?"),
-	x86: new CpuArchitecture(1, "x86"),
-	x64: new CpuArchitecture(2, "x64"),
-	ArmGeneric: new CpuArchitecture(3, "ARM"),
-	Arm64: new CpuArchitecture(4, "ARM64"),
-	RiscV: new CpuArchitecture(5, "RISC-V"),
-}
-
-function getCpuArchitecture(userAgent = navigator.userAgent) {
-	if(userAgent.includes("x64")) {
-		return CpuArchitectures.x64;
-	} else if(userAgent.includes("x86")) {
-		return CpuArchitectures.x86;
-	} else if(userAgent.includes("ARM")) {
-		return CpuArchitectures.ArmGeneric;
-	} else if(userAgent.includes("ARM64")) {
-		return CpuArchitectures.Arm64;
-	} else if(userAgent.includes("RISC-V")) {
-		return CpuArchitectures.RiscV;
-	}
-	return CpuArchitectures.Unknown;
-}*/
-
-let isSidebarVisible = true;
-let eContentModal = document.getElementById("modal-content");
-let eContentModalInner = document.getElementById("modal-content-inner");
-
-function showContentModal(eContent) {
-	eContentModalInner.appendChild(eContent);
-	fadeIn(eContentModal, 175).then(r => {
-		// We don't care about what happens afterward...
-	});
-}
-
-document.addEventListener("DOMContentLoaded", () => {
     const eSidebar = document.getElementById("sidebar");
 	const eMain = document.getElementById("main");
 
 	// TODO: Emit an event to help Splide re-align after the sidebar has changed state.
-	document.getElementById("sidebar-toggle-footer").onclick = function() {
+
+	if(eSidebarToggleButton !== null && eSidebar !== null && eMain !== null) {
+		eSidebarToggleButton.onclick = function() {
 			if(isSidebarVisible) {
 				eSidebar.classList.add("retracted");
 				eMain.classList.add("expanded");
@@ -62,6 +24,7 @@ document.addEventListener("DOMContentLoaded", () => {
 			}
 			isSidebarVisible = !isSidebarVisible;
 		};
+	}
 
 	//showContentModal(eContentModal);
 
@@ -165,4 +128,4 @@ document.addEventListener("DOMContentLoaded", () => {
 			}
 		});
 	});
-});
+}

static/resources/NibblePoker/js/nibblepoker-debug.mjs

@@ -0,0 +1,27 @@
+const idButtonBorder = "test-toggle-borders";
+
+const classBorderActive = "debug";
+const classBorderInactive = "_debug";
+
+function swapDebugClasses() {
+	const activeElements = document.querySelectorAll('.' + classBorderActive);
+	const inactiveElements = document.querySelectorAll('.' + classBorderInactive);
+	
+	activeElements.forEach(element => {
+		element.classList.remove(classBorderActive);
+		element.classList.add(classBorderInactive);
+	});
+	
+	inactiveElements.forEach(element => {
+		element.classList.remove(classBorderInactive);
+		element.classList.add(classBorderActive);
+	});
+}
+
+document.addEventListener("DOMContentLoaded", function() {
+	// Adding the action to the border button
+	const eBorderButton = document.getElementById(idButtonBorder);
+	if(eBorderButton !== null) {
+		eBorderButton.addEventListener("click", swapDebugClasses);
+	}
+});

static/resources/NibblePoker/js/nibblepoker-default.mjs

@@ -0,0 +1,11 @@
+// NibblePoker - Default Main Script
+// Author: Herwin Bozet (@NibblePoker)
+// License: Public Domain (This code)
+// Remark:
+//  * This module is used on all static pages that aren't dynamically generated
+
+import {initCore} from "./nibblepoker-core.mjs"
+
+document.addEventListener("DOMContentLoaded", () => {
+    initCore();
+});

static/resources/NibblePoker/js/nibblepoker-leftovers.mjs

@@ -0,0 +1,48 @@
+// NibblePoker - Leftovers
+// Author: Herwin Bozet (@NibblePoker)
+// License: Public Domain (This code)
+
+import {fadeIn} from "./nibblepoker-ui"
+
+//export cloneTemplate;
+
+/*class CpuArchitecture {
+	constructor(id, name) {
+		this.id = id;
+		this.name = name;
+	}
+}
+
+const CpuArchitectures = {
+	Unknown: new CpuArchitecture(0, "?"),
+	x86: new CpuArchitecture(1, "x86"),
+	x64: new CpuArchitecture(2, "x64"),
+	ArmGeneric: new CpuArchitecture(3, "ARM"),
+	Arm64: new CpuArchitecture(4, "ARM64"),
+	RiscV: new CpuArchitecture(5, "RISC-V"),
+}
+
+function getCpuArchitecture(userAgent = navigator.userAgent) {
+	if(userAgent.includes("x64")) {
+		return CpuArchitectures.x64;
+	} else if(userAgent.includes("x86")) {
+		return CpuArchitectures.x86;
+	} else if(userAgent.includes("ARM")) {
+		return CpuArchitectures.ArmGeneric;
+	} else if(userAgent.includes("ARM64")) {
+		return CpuArchitectures.Arm64;
+	} else if(userAgent.includes("RISC-V")) {
+		return CpuArchitectures.RiscV;
+	}
+	return CpuArchitectures.Unknown;
+}*/
+
+let eContentModal = document.getElementById("modal-content");
+let eContentModalInner = document.getElementById("modal-content-inner");
+
+function showContentModal(eContent) {
+	eContentModalInner.appendChild(eContent);
+	fadeIn(eContentModal, 175).then(r => {
+		// We don't care about what happens afterward...
+	});
+}

static/resources/NibblePoker/js/nibblepoker-splide.mjs

@@ -0,0 +1,18 @@
+// Creating the galleries with SplideJs
+
+window.addEventListener('load', function() {
+	try {
+		new Splide( '.splide', {
+			perPage: 2,
+			cover: true,
+			heightRatio: 0.4,
+			breakpoints: {
+				768: {
+					perPage: 1,
+				},
+			},
+		}).mount();
+	} catch(err) {
+		console.log("Unable to setup Splide !");
+	}
+});

static/resources/NibblePoker/js/nibblepoker-template.mjs

@@ -0,0 +1,48 @@
+// NibblePoker - Template Utilities
+// Author: Herwin Bozet (@NibblePoker)
+// License: Public Domain (This code)
+
+/**
+ * @param eTemplate {HTMLTemplateElement | string} The template to be cloned, or its ID.
+ * @param subParts {Object.<string, Node | string | number | boolean>}
+ * @param ignoreMissingParts {bool}
+ * @returns {Promise<DocumentFragment>}
+ */
+export function cloneTemplate(eTemplate,
+                              subParts,
+                              ignoreMissingParts) {
+    if (typeof eTemplate === 'string' || eTemplate instanceof String) {
+        eTemplate = document.getElementById(eTemplate);
+    }
+    return new Promise((resolve, reject) => {
+        if(eTemplate == null) {
+            reject("The given template couldn't be found !");
+        } else {
+            /** @type {DocumentFragment} */
+            let eClone = document.importNode(eTemplate.content, true);
+
+            for (const key in subParts) {
+                if (subParts.hasOwnProperty(key)) {
+                    const value = subParts[key];
+
+                    let ePart = eClone.getElementById(key);
+
+                    if(ePart == null) {
+                        if(ignoreMissingParts) {
+                            continue;
+                        }
+                        reject(`Unable to find sub-element with id '${key}' !`);
+                    }
+
+                    if(value instanceof Node) {
+                        ePart.appendChild(value);
+                    } else {
+                        ePart.innerHTML += value;
+                    }
+                }
+            }
+
+            resolve(eClone);
+        }
+    });
+}

static/resources/NibblePoker/js/nibblepoker-ui.mjs

@@ -0,0 +1,46 @@
+// NibblePoker - UI Scripts
+// Author: Herwin Bozet (@NibblePoker)
+// License: Public Domain (This code)
+
+export const animationStepCount = 10;
+
+export function getBezierBlend(progress) {
+	return (3 * progress ** 2) - (2 * progress ** 3);
+}
+
+export function fadeOut(element, time = 200) {
+	element.style.opacity = "1.0";
+	element.hidden = false;
+	return new Promise((resolve) => {
+		const delay = time / animationStepCount;
+		let i = 0;
+		const intervalId = setInterval(() => {
+			element.style.opacity = String(1 - getBezierBlend(i / animationStepCount));
+			i++;
+			if(i === animationStepCount) {
+				element.style.opacity = "0.0";
+				element.hidden = true;
+				clearInterval(intervalId);
+				resolve();
+			}
+		}, delay);
+	});
+}
+
+export function fadeIn(element, time = 200) {
+	element.style.opacity = "0.0";
+	element.hidden = false;
+	return new Promise((resolve) => {
+		const delay = time / animationStepCount;
+		let i = 0;
+		const intervalId = setInterval(() => {
+			element.style.opacity = String(getBezierBlend(i / animationStepCount));
+			i++;
+			if(i === animationStepCount) {
+				element.style.opacity = "1.0";
+				clearInterval(intervalId);
+				resolve();
+			}
+		}, delay);
+	});
+}

templates/applets/excel-password-remover.jinja

@@ -1,22 +1,35 @@
 <section id="{{ applet_data.id }}-eula">
-    {{ render_h2(l10n("eula.long", "commons", user_lang)) }}
+    {{ render_h2(l10n("disclaimer.warning", "commons", user_lang)) }}
     {{ render_paragraph(l10n("eula.1", applet_data.id, user_lang)) }}
     {{ render_paragraph(l10n("eula.2", applet_data.id, user_lang)) }}
     {{ render_paragraph(l10n("eula.3", applet_data.id, user_lang)) }}
-    {{ render_paragraph(l10n("eula.4", applet_data.id, user_lang)) }}
 </section>
 
 <section id="{{ applet_data.id }}-input">
     {{ render_h2(l10n("file.selection.title", applet_data.id, user_lang)) }}
-    <p>123</p>
+
+    {{ render_paragraph(l10n("file.selection.1", applet_data.id, user_lang)) }}
+
+    {{ render_file_input(applet_data.id + "-input-file", true, ".xlsx, .xlsm", true, true) }}
+
+    <div id="{{ applet_data.id }}-errors">
+        <div class="bkgd-red t-bold t-center w-full r-l border p-xs">
+            ⚠️ These styles require a special workaround to work properly ⚠️
+        </div>
+    </div>
 </section>
 
 <section id="{{ applet_data.id }}-details">
     {{ render_h2(l10n("details.title", applet_data.id, user_lang)) }}
-    <p>123</p>
+
+    <div id="{{ applet_data.id }}-details-empty">
+        {{ render_paragraph(l10n("details.empty.1", applet_data.id, user_lang)) }}
+    </div>
 </section>
 
+{% if is_standalone %}
     <section id="{{ applet_data.id }}-licenses">
         {{ render_h2(l10n("licenses.title", applet_data.id, user_lang)) }}
         <p>123</p>
     </section>
+{% endif %}

templates/base_www.jinja

@@ -18,7 +18,7 @@
     <link rel="prefetch" href="https://cdn.nibblepoker.lu/NibblePoker/StandardCSS/3px-tile-0.4.png" as="image" />
     {% block extra_preloads %}{% endblock %}
 
-    <link rel="stylesheet" href="https://cdn.nibblepoker.{{ domain_tld }}/FontAwesomePro/6.5.1/css/all.min.css">
+    <link rel="stylesheet" href="https://cdn.nibblepoker.{{ domain_tld }}/FontAwesomePro/6.7.2/css/all.min.css">
     <!--<link rel="stylesheet" href="https://cdn.nibblepoker.{{ domain_tld }}/NibblePoker/StandardCSS/nibblepoker.min.css">-->
     <link rel="stylesheet" href="https://cdn.nibblepoker.{{ domain_tld }}/NibblePoker/IndevCSS/nibblepoker.min.css">
     <link rel="stylesheet" href="https://cdn.nibblepoker.{{ domain_tld }}/Quantum/Quantum.min.css">
@@ -112,7 +112,7 @@
 	</a>
 </footer>
 
-<script src="{{ url_for("static", filename="resources/NibblePoker/js/nibblepoker.min.js") }}"></script>
+<!--<script src="{{ url_for("static", filename="resources/NibblePoker/js/nibblepoker.min.js") }}"></script>-->
 
 {% block extra_scripts %}{% endblock %}
 

templates/elements/file-input.jinja

@@ -2,7 +2,11 @@
     {% if file_upload_button %}
         <button id="{{ file_input_id }}-add" class="p-xs r-s border btn-primary">
             <i class="fa-duotone fa-solid fa-cloud-arrow-up mr-xs"></i>
-            {{ l10n("file.drop.upload", "commons", user_lang) }}
+            {% if file_multiple %}
+                {{ l10n("file.drop.upload.multiple", "commons", user_lang) }}
+            {% else %}
+                {{ l10n("file.drop.upload.single", "commons", user_lang) }}
+            {% endif %}
         </button>
     {% endif %}
 

templates/pages/about.jinja

@@ -97,3 +97,7 @@
 		{{ l10n("financing.text.isp", "about", user_lang) }}
 	</p>
 {% endblock %}
+
+{% block extra_scripts %}
+    <script src="{{ url_for("static", filename="resources/NibblePoker/js/nibblepoker-default.min.js") }}"></script>
+{% endblock %}

templates/pages/contact.jinja

@@ -28,3 +28,7 @@
 	</p>
 
 {% endblock %}
+
+{% block extra_scripts %}
+    <script src="{{ url_for("static", filename="resources/NibblePoker/js/nibblepoker-default.min.js") }}"></script>
+{% endblock %}

templates/pages/debug.jinja

@@ -119,3 +119,7 @@
 	</div>
 
 {% endblock %}
+
+{% block extra_scripts %}
+    <script src="{{ url_for("static", filename="resources/NibblePoker/js/nibblepoker-default.min.js") }}"></script>
+{% endblock %}

templates/pages/error.jinja

@@ -27,3 +27,7 @@
              draggable="false">
     {% endif %}
 {% endblock %}
+
+{% block extra_scripts %}
+    <script src="{{ url_for("static", filename="resources/NibblePoker/js/nibblepoker-default.min.js") }}"></script>
+{% endblock %}

templates/pages/links.jinja

@@ -62,3 +62,7 @@
     </p>
     <p class="mt-xxs ml-l">{{ l10n("gitea.text.1", "links", user_lang ) }}</p>
 {% endblock %}
+
+{% block extra_scripts %}
+    <script src="{{ url_for("static", filename="resources/NibblePoker/js/nibblepoker-default.min.js") }}"></script>
+{% endblock %}

templates/pages/privacy.jinja

@@ -179,3 +179,7 @@
         '<span class="ml-s">(' + l10n('french', "langs", user_lang) + ')</span>' ) }}
 
 {% endblock %}
+
+{% block extra_scripts %}
+    <script src="{{ url_for("static", filename="resources/NibblePoker/js/nibblepoker-default.min.js") }}"></script>
+{% endblock %}

templates/pages/project_index.jinja

@@ -38,3 +38,7 @@
 
     {% endfor %}
 {% endblock %}
+
+{% block extra_scripts %}
+    <script src="{{ url_for("static", filename="resources/NibblePoker/js/nibblepoker-default.min.js") }}"></script>
+{% endblock %}

templates/pages/root.jinja

@@ -52,3 +52,7 @@
     ]) }}
 
 {% endblock %}
+
+{% block extra_scripts %}
+    <script src="{{ url_for("static", filename="resources/NibblePoker/js/nibblepoker-default.min.js") }}"></script>
+{% endblock %}

templates/pages/tools_index.jinja

@@ -38,3 +38,7 @@
 
     {% endfor %}
 {% endblock %}
+
+{% block extra_scripts %}
+    <script src="{{ url_for("static", filename="resources/NibblePoker/js/nibblepoker-default.min.js") }}"></script>
+{% endblock %}

templates/pages/tools_page.jinja

@@ -28,5 +28,7 @@
 {% endblock %}
 
 {% block extra_scripts %}
+    <!--<script src="{{ url_for("static", filename="resources/NibblePoker/js/nibblepoker-default.min.js") }}"></script>-->
+
     {{ render_applet_scripts(applet_data, is_standalone) }}
 {% endblock %}

website/content/dataclasses.py

@@ -126,6 +126,9 @@ class ContentResource:
         self.scripts = [ContentResourceDefinition(x) for x in self.scripts]
         self.stylesheets = [ContentResourceDefinition(x) for x in self.stylesheets]
 
+        self.scripts: list[ContentResourceDefinition]
+        self.stylesheets: list[ContentResourceDefinition]
+
 
 @dataclass
 class ContentApplet:
@@ -135,6 +138,7 @@ class ContentApplet:
     def __post_init__(self):
         self.resources: dict
         self.resources = ContentResource(**self.resources)
+        self.resources: ContentResource
         # print(self.resources)
 
 
@@ -148,6 +152,7 @@ class ContentTool:
     def __post_init__(self):
         self.metadata: dict
         self.metadata = ContentMetadata(**self.metadata)
+        self.metadata: ContentMetadata
 
 
 @dataclass

website/renderers/applet.py

@@ -20,7 +20,7 @@ def render_applet_head(applet_data: ContentApplet, is_standalone: bool = False)
                     "./static/resources/NibblePoker/applets/",
                     applet_data.id,
                     applet_style.get_clean_path())
-                print(applet_style)
+                # print(applet_style)
             elif applet_style.is_standalone():
                 rsc_path = os.path.join(
                     "./static/resources/Standalone/",
@@ -61,6 +61,7 @@ def render_applet_scripts(applet_data: ContentApplet, is_standalone: bool = Fals
                     "./static/resources/NibblePoker/applets/",
                     applet_data.id,
                     applet_script.get_clean_path())
+                rsc_path = rsc_path.replace(".mjs", ".min.js")
             elif applet_script.is_standalone():
                 rsc_path = os.path.join(
                     "./static/resources/Standalone/",