@jjlmoya/utils-forensic-science 1.20.0 → 1.21.0

package/src/tool/forensic-evidence-scale-calculator/forensic-evidence-scale-calculator.css

@@ -0,0 +1,516 @@
+.evidence-scale-tool {
+  color-scheme: dark;
+
+  --evidence-paper: #f3eee2;
+  --evidence-muted: #a9aca6;
+  --evidence-cyan: #39c2d2;
+  --evidence-coral: #db5d55;
+  --evidence-border: rgba(205, 214, 204, 0.17);
+  --evidence-panel: rgba(17, 22, 24, 0.94);
+  --evidence-tool-shadow: rgba(0, 0, 0, 0.24);
+  --evidence-tool-start: #111719;
+  --evidence-tool-end: #101419;
+  --evidence-tool-warm: #281b1d;
+  --evidence-line: rgba(205, 214, 204, 0.14);
+  --evidence-input-border: rgba(205, 214, 204, 0.24);
+  --evidence-input-bg: rgba(5, 8, 9, 0.5);
+  --evidence-menu-border: rgba(57, 194, 210, 0.35);
+  --evidence-menu-bg: #151d20;
+  --evidence-plane-border: rgba(57, 194, 210, 0.26);
+  --evidence-plane-bg: rgba(57, 194, 210, 0.08);
+  --evidence-result-bg: rgba(111, 34, 34, 0.58);
+  --evidence-output: #fff7e8;
+  --evidence-result-text: #f0c2af;
+  --evidence-label: #e4aaa0;
+  --evidence-code: #d9f4f0;
+  --evidence-warning-border: rgba(255, 205, 110, 0.4);
+  --evidence-warning-text: #ffe0a0;
+  --evidence-menu-active-text: #d9f4f0;
+  --evidence-active-bg: rgba(57, 194, 210, 0.14);
+  --evidence-rail-number: rgba(243, 238, 226, 0.5);
+  --evidence-menu-shadow: rgba(0, 0, 0, 0.35);
+  --evidence-svg-surface-start: #20252a;
+  --evidence-svg-surface-end: #0b0e10;
+  --evidence-svg-wash: #8d302e;
+  --evidence-svg-grid: #236d79;
+  --evidence-svg-silhouette: #131719;
+  --evidence-svg-object: #607b7d;
+  --evidence-svg-object-border: #e8e2d2;
+  --evidence-svg-object-mark: #b8d0cc;
+  --evidence-svg-object-shadow: #202c2e;
+  --evidence-svg-ruler: #e8e2d2;
+  --evidence-svg-ruler-ink: #111517;
+
+  display: grid;
+  grid-template-columns: minmax(0, 1.2fr) minmax(20rem, 0.8fr);
+  width: 100%;
+  overflow: hidden;
+  border: 1px solid var(--evidence-border);
+  border-radius: 1.35rem;
+  background:
+    radial-gradient(
+      circle at 12% 12%,
+      rgba(57, 194, 210, 0.08),
+      transparent 28%
+    ),
+    linear-gradient(
+      135deg,
+      var(--evidence-tool-start),
+      var(--evidence-tool-end) 55%,
+      var(--evidence-tool-warm)
+    );
+  color: var(--evidence-paper);
+  box-shadow: 0 1.4rem 3rem var(--evidence-tool-shadow);
+}
+
+.theme-light .evidence-scale-tool {
+  color-scheme: light;
+
+  --evidence-paper: #17212b;
+  --evidence-muted: #52606d;
+  --evidence-cyan: #087f8c;
+  --evidence-coral: #b83b36;
+  --evidence-border: rgba(20, 45, 52, 0.16);
+  --evidence-tool-shadow: rgba(26, 69, 75, 0.14);
+  --evidence-tool-start: #fffdfa;
+  --evidence-tool-end: #f1f7f5;
+  --evidence-tool-warm: #fff0e9;
+  --evidence-line: rgba(25, 63, 70, 0.14);
+  --evidence-input-border: rgba(23, 53, 59, 0.25);
+  --evidence-input-bg: rgba(255, 255, 255, 0.82);
+  --evidence-menu-border: rgba(8, 127, 140, 0.35);
+  --evidence-menu-bg: #fff;
+  --evidence-plane-border: rgba(8, 127, 140, 0.26);
+  --evidence-plane-bg: rgba(8, 127, 140, 0.08);
+  --evidence-result-bg: rgba(184, 59, 54, 0.12);
+  --evidence-output: #17212b;
+  --evidence-result-text: #8f302d;
+  --evidence-label: #8f302d;
+  --evidence-code: #0c5963;
+  --evidence-warning-border: rgba(173, 112, 16, 0.42);
+  --evidence-warning-text: #80570c;
+  --evidence-menu-active-text: #075d67;
+  --evidence-active-bg: rgba(8, 127, 140, 0.12);
+  --evidence-rail-number: rgba(23, 33, 43, 0.48);
+  --evidence-menu-shadow: rgba(25, 63, 70, 0.18);
+  --evidence-svg-surface-start: #fffefd;
+  --evidence-svg-surface-end: #e9f1ef;
+  --evidence-svg-wash: #c85048;
+  --evidence-svg-grid: #55aab2;
+  --evidence-svg-silhouette: #d9e3df;
+  --evidence-svg-object: #a9c7c0;
+  --evidence-svg-object-border: #375c60;
+  --evidence-svg-object-mark: #487f80;
+  --evidence-svg-object-shadow: #6e9491;
+  --evidence-svg-ruler: #fff9ec;
+  --evidence-svg-ruler-ink: #30464b;
+}
+
+.evidence-scale-scene,
+.evidence-scale-controls,
+.evidence-scale-results {
+  min-width: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.evidence-scale-scene {
+  display: flex;
+  min-height: 100%;
+  flex-direction: column;
+  padding: clamp(1.15rem, 2.5vw, 2rem);
+}
+
+.evidence-scale-scene-head,
+.evidence-scale-control-head {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.evidence-scale-scene-head {
+  align-items: flex-start;
+}
+
+.evidence-scale-kicker {
+  display: block;
+  color: var(--evidence-cyan);
+  font-size: 0.7rem;
+  font-weight: 800;
+  letter-spacing: 0.13em;
+  text-transform: uppercase;
+}
+
+.evidence-scale-scene h2 {
+  margin: 0.3rem 0 0;
+  font-size: clamp(1.25rem, 2vw, 1.75rem);
+  letter-spacing: -0.03em;
+}
+
+.evidence-scale-scene-note,
+.evidence-scale-control-head p,
+.evidence-scale-field small,
+.evidence-scale-plane small,
+.evidence-scale-rail-item small {
+  color: var(--evidence-muted);
+  font-size: 0.8rem;
+  line-height: 1.4;
+}
+
+.evidence-scale-scene-note {
+  max-width: 15rem;
+  text-align: right;
+}
+
+.evidence-scale-illustration {
+  display: flex;
+  min-height: 22rem;
+  flex: 1;
+  align-items: center;
+  margin: 1rem 0 1.2rem;
+  overflow: hidden;
+  border: 1px solid var(--evidence-line);
+  border-radius: 0.95rem;
+  background: var(--evidence-svg-surface-end);
+}
+
+.evidence-scale-illustration svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-height: 22rem;
+}
+
+.evidence-scale-scene-rail {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.65rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--evidence-line);
+}
+
+.evidence-scale-rail-item {
+  display: grid;
+  grid-template-columns: auto auto 1fr;
+  align-items: start;
+  gap: 0.45rem;
+  min-width: 0;
+}
+
+.evidence-scale-rail-item > span:last-child {
+  display: grid;
+  gap: 0.12rem;
+  min-width: 0;
+}
+
+.evidence-scale-rail-item strong {
+  overflow-wrap: anywhere;
+  font-size: 0.76rem;
+}
+
+.evidence-scale-rail-item small {
+  display: block;
+  overflow-wrap: anywhere;
+  font-size: 0.68rem;
+}
+
+.evidence-scale-rail-number {
+  color: var(--evidence-rail-number);
+  font-size: 0.62rem;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+}
+
+.evidence-scale-rail-dot,
+.evidence-scale-rail-mark {
+  display: inline-grid;
+  width: 0.65rem;
+  height: 0.65rem;
+  place-items: center;
+  margin-top: 0.12rem;
+  border-radius: 50%;
+}
+
+.evidence-scale-rail-mark {
+  color: var(--evidence-paper);
+  font-size: 0.8rem;
+  font-weight: 800;
+}
+
+.legend-coral {
+  background: var(--evidence-coral);
+}
+
+.legend-cyan {
+  background: var(--evidence-cyan);
+}
+
+.evidence-scale-side {
+  display: grid;
+  grid-template-rows: auto auto;
+  align-content: stretch;
+  min-width: 0;
+  border-left: 1px solid var(--evidence-line);
+}
+
+.evidence-scale-controls,
+.evidence-scale-results {
+  padding: clamp(1.15rem, 2.5vw, 2rem);
+}
+
+.evidence-scale-controls {
+  border-bottom: 1px solid var(--evidence-line);
+}
+
+.evidence-scale-control-head {
+  align-items: baseline;
+  margin-bottom: 1rem;
+}
+
+.evidence-scale-control-head p {
+  max-width: 19rem;
+  margin: 0;
+}
+
+.evidence-scale-field-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.8rem;
+}
+
+.evidence-scale-field {
+  display: grid;
+  gap: 0.35rem;
+  color: var(--evidence-paper);
+  font-size: 0.82rem;
+  font-weight: 700;
+}
+
+.evidence-scale-field input,
+.evidence-scale-choice-trigger {
+  width: 100%;
+  min-height: 2.6rem;
+  padding: 0.55rem 0.65rem;
+  border: 1px solid var(--evidence-input-border);
+  border-radius: 0.55rem;
+  background: var(--evidence-input-bg);
+  color: var(--evidence-paper);
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+}
+
+.evidence-scale-field input:focus-visible,
+.evidence-scale-choice-trigger:focus-visible,
+.evidence-scale-choice-menu button:focus-visible,
+.evidence-scale-plane input:focus-visible {
+  outline: 2px solid var(--evidence-cyan);
+  outline-offset: 2px;
+}
+
+.evidence-scale-unit {
+  position: relative;
+  max-width: 15rem;
+  margin-top: 0.8rem;
+}
+
+.evidence-scale-choice-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  cursor: pointer;
+  text-align: left;
+}
+
+.evidence-scale-choice-chevron {
+  color: var(--evidence-cyan);
+  font-size: 1.1rem;
+  line-height: 0.8;
+}
+
+.evidence-scale-choice-menu {
+  position: absolute;
+  z-index: 2;
+  right: 0;
+  left: 0;
+  display: grid;
+  gap: 0.25rem;
+  margin-top: 0.35rem;
+  padding: 0.35rem;
+  border: 1px solid var(--evidence-menu-border);
+  border-radius: 0.7rem;
+  background: var(--evidence-menu-bg);
+  box-shadow: 0 1rem 2rem var(--evidence-menu-shadow);
+}
+
+.evidence-scale-choice-menu[hidden] {
+  display: none;
+}
+
+.evidence-scale-choice-menu button {
+  padding: 0.65rem 0.7rem;
+  border: 0;
+  border-radius: 0.45rem;
+  background: transparent;
+  color: var(--evidence-paper);
+  cursor: pointer;
+  font-size: inherit;
+  font-weight: inherit;
+  text-align: left;
+}
+
+.evidence-scale-choice-menu button:hover,
+.evidence-scale-choice-menu button[aria-selected="true"] {
+  background: var(--evidence-active-bg);
+  color: var(--evidence-menu-active-text);
+}
+
+.evidence-scale-plane {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.65rem;
+  margin-top: 1rem;
+  padding: 0.75rem;
+  border: 1px solid var(--evidence-plane-border);
+  border-radius: 0.7rem;
+  background: var(--evidence-plane-bg);
+  cursor: pointer;
+}
+
+.evidence-scale-plane input {
+  margin-top: 0.2rem;
+  accent-color: var(--evidence-cyan);
+}
+
+.evidence-scale-plane span {
+  display: grid;
+  gap: 0.25rem;
+}
+
+.evidence-scale-plane strong {
+  font-size: 0.82rem;
+}
+
+.evidence-scale-disclaimer {
+  margin: 1rem 0 0;
+  color: var(--evidence-muted);
+  font-size: 0.72rem;
+  line-height: 1.5;
+}
+
+.evidence-scale-results {
+  background: linear-gradient(
+    145deg,
+    var(--evidence-result-bg),
+    transparent 72%
+  );
+}
+
+.evidence-scale-result-lead output {
+  display: block;
+  margin-top: 0.35rem;
+  color: var(--evidence-output);
+  font-size: clamp(2.2rem, 5vw, 4rem);
+  font-weight: 800;
+  letter-spacing: -0.07em;
+  line-height: 0.95;
+}
+
+.evidence-scale-result-lead p {
+  margin: 0.7rem 0 0;
+  color: var(--evidence-result-text);
+  font-size: 0.82rem;
+}
+
+.evidence-scale-readouts {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-top: 1.4rem;
+}
+
+.evidence-scale-readouts div {
+  display: grid;
+  gap: 0.3rem;
+  min-width: 0;
+}
+
+.evidence-scale-readouts span,
+.evidence-scale-trace > span {
+  color: var(--evidence-label);
+  font-size: 0.68rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.evidence-scale-readouts strong {
+  overflow-wrap: anywhere;
+  font-size: 0.95rem;
+}
+
+.evidence-scale-trace {
+  display: grid;
+  gap: 0.45rem;
+  margin-top: 1.2rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--evidence-line);
+}
+
+.evidence-scale-trace code {
+  overflow-wrap: anywhere;
+  color: var(--evidence-code);
+  font-size: 0.78rem;
+}
+
+.evidence-scale-warning {
+  display: none;
+  margin: 1rem 0 0;
+  padding: 0.7rem;
+  border: 1px solid var(--evidence-warning-border);
+  border-radius: 0.6rem;
+  color: var(--evidence-warning-text);
+  font-size: 0.76rem;
+  line-height: 1.45;
+}
+
+.evidence-scale-warning[data-visible="true"] {
+  display: block;
+}
+
+@media (max-width: 820px) {
+  .evidence-scale-tool {
+    grid-template-columns: 1fr;
+  }
+
+  .evidence-scale-side {
+    border-top: 1px solid var(--evidence-line);
+    border-left: 0;
+  }
+}
+
+@media (max-width: 520px) {
+  .evidence-scale-scene-head,
+  .evidence-scale-control-head,
+  .evidence-scale-readouts {
+    display: grid;
+  }
+
+  .evidence-scale-scene-note {
+    max-width: none;
+    text-align: left;
+  }
+
+  .evidence-scale-field-grid,
+  .evidence-scale-scene-rail {
+    grid-template-columns: 1fr;
+  }
+
+  .evidence-scale-illustration,
+  .evidence-scale-illustration svg {
+    min-height: 17rem;
+  }
+}

package/src/tool/forensic-evidence-scale-calculator/i18n/de.ts

@@ -0,0 +1,3 @@
+import { createLocalizedContent } from "./localized-content";
+
+export const content = createLocalizedContent("de");