zakladka ustawien

static/css/style.css

@@ -812,4 +812,46 @@ td select.tom-dark {
 
 .text-danger {
   color: var(--danger) !important;
-}
+}
+
+/* ========== Kolorowe wskaźniki pod pickerem ========== */
+.color-indicators .indicator {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: .5rem;
+}
+
+.color-indicators .bar {
+  height: 10px;
+  border-radius: 6px;
+  border: 1px solid rgba(255,255,255,.25);
+  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
+}
+
+/* ========== Swatch + zapisy heksowe ========== */
+.swatch {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  display: inline-block;
+  border: 1px solid rgba(0,0,0,.15);
+}
+
+.hex,
+.hex-label {
+  font-variant-numeric: lining-nums;
+  letter-spacing: .2px;
+}
+
+/* ========== OCR textarea ========== */
+.settings-ocr-textarea {
+  font: inherit;
+  line-height: 1.45;
+}
+
+/* ========== Odznaka poziomu czułości ========== */
+.sens-badge { font-weight: 600; }
+.sens-low  { background: rgba(108,117,125,.25); color: #ced4da; }  /* szary */
+.sens-mid  { background: rgba(13,110,253,.25);  color: #9ec5fe; }  /* niebieski */
+.sens-high { background: rgba(220,53,69,.25);   color: #f1aeb5; }  /* czerwony */

static/js/admin_settings.js

@@ -0,0 +1,91 @@
+(function () {
+  const form = document.getElementById("settings-form");
+  const resetAllBtn = document.getElementById("reset-all");
+
+  function ensureHiddenClear(input) {
+    let hidden = input.parentElement.querySelector(`input[type="hidden"][name="${input.name}"]`);
+    if (!hidden) {
+      hidden = document.createElement("input");
+      hidden.type = "hidden";
+      hidden.name = input.name;
+      hidden.value = "";
+      input.parentElement.appendChild(hidden);
+    }
+  }
+  function removeHiddenClear(input) {
+    const hidden = input.parentElement.querySelector(`input[type="hidden"][name="${input.name}"]`);
+    if (hidden) hidden.remove();
+  }
+
+  // Podgląd: bary pod pickerem (Efektywny = override || auto)
+  function updatePreview(input) {
+    const card = input.closest(".col-12, .col-md-6, .col-lg-4");
+    const hexAutoEl = card.querySelector(".hex-auto");
+    const hexEffEl  = card.querySelector(".hex-effective");
+    const barAuto   = card.querySelector('.bar[data-kind="auto"]');
+    const barEff    = card.querySelector('.bar[data-kind="effective"]');
+
+    const raw = (input.value || "").trim();
+    const autoHex = hexAutoEl.textContent.trim();
+    const effHex  = (raw || autoHex).toUpperCase();
+
+    if (barEff) barEff.style.backgroundColor = effHex;
+    if (hexEffEl) hexEffEl.textContent = effHex;
+
+    if (!raw) ensureHiddenClear(input); else removeHiddenClear(input);
+  }
+
+  // Reset jednego / wszystkich
+  form.querySelectorAll(".reset-one").forEach(btn => {
+    btn.addEventListener("click", () => {
+      const name = btn.getAttribute("data-target");
+      const input = form.querySelector(`input[name="${name}"]`);
+      if (!input) return;
+      input.value = "";
+      updatePreview(input);
+    });
+  });
+  resetAllBtn?.addEventListener("click", () => {
+    form.querySelectorAll('input[type="color"].category-color').forEach(input => {
+      input.value = "";
+      updatePreview(input);
+    });
+  });
+
+  // Init + live dla pickerów
+  form.querySelectorAll('input[type="color"].category-color').forEach(input => {
+    updatePreview(input);
+    input.addEventListener("input", () => updatePreview(input));
+    input.addEventListener("change", () => updatePreview(input));
+  });
+
+  // Live etykiety dla czułości OCR
+  (function () {
+    const slider = document.getElementById("ocr_sensitivity");
+    const badge  = document.getElementById("ocr_sens_badge");
+    const value  = document.getElementById("ocr_sens_value");
+    if (!slider || !badge || !value) return;
+
+    function labelFor(v) {
+      v = Number(v);
+      if (v <= 3) return "Niski";
+      if (v <= 7) return "Średni";
+      return "Wysoki";
+    }
+    function clsFor(v) {
+      v = Number(v);
+      if (v <= 3) return "sens-low";
+      if (v <= 7) return "sens-mid";
+      return "sens-high";
+    }
+    function update() {
+      value.textContent = `(${slider.value})`;
+      badge.textContent = labelFor(slider.value);
+      badge.classList.remove("sens-low","sens-mid","sens-high");
+      badge.classList.add(clsFor(slider.value));
+    }
+    slider.addEventListener("input", update);
+    slider.addEventListener("change", update);
+    update();
+  })();
+})();