massive frontend refactoring (works good)

frontend/js/modals/modal-base.js

@@ -0,0 +1,33 @@
+const container = () => document.getElementById('modal-container');
+
+export function showModal(html) {
+    container().innerHTML = `<div class="modal-overlay" onclick="ModalBase.closeOnBg(event)">${html}</div>`;
+}
+
+export function closeModal() {
+    container().innerHTML = '';
+}
+
+export function closeOnBg(e) {
+    if (e.target.classList.contains('modal-overlay')) closeModal();
+}
+
+export function stepperHtml(id, value, step, placeholder, inputmode = 'decimal') {
+    const v = value !== '' && value != null ? value : '';
+    return `<div class="stepper-field">
+        <button type="button" class="stepper-btn" onclick="ModalBase.stepValue('${id}', -${step})">−</button>
+        <input type="number" id="${id}" step="${step}" value="${v}" placeholder="${placeholder}" inputmode="${inputmode}">
+        <button type="button" class="stepper-btn" onclick="ModalBase.stepValue('${id}', ${step})">+</button>
+    </div>`;
+}
+
+export function stepValue(id, delta) {
+    const input = document.getElementById(id);
+    if (!input) return;
+    const current = parseFloat(input.value) || 0;
+    const step = parseFloat(input.step) || 1;
+    const newVal = Math.max(0, current + delta);
+    input.value = parseFloat((Math.round(newVal / step) * step).toFixed(4));
+}
+
+window.ModalBase = { closeOnBg, closeModal, stepValue };