@jjlmoya/utils-forensic-science 1.12.0 → 1.13.0

package/src/tool/voice-spectrogram-analyzer/voice-spectrogram-analyzer.css

@@ -0,0 +1,547 @@
+:root {
+  --n-va-paper: #f1eee4;
+  --n-va-ink: #10242a;
+  --n-va-muted: #52676b;
+  --n-va-panel: #e4ded0;
+  --n-va-panel-soft: #faf8f2;
+  --n-va-canvas: #06161c;
+  --n-va-grid: #254048;
+  --n-va-a: #35d6c5;
+  --n-va-b: #ff739e;
+  --n-va-a-line: #b8fff6;
+  --n-va-b-line: #ffd0df;
+  --n-va-cursor: #ffe99a;
+  --n-va-border: #a9afa7;
+  --n-va-shadow: rgba(10, 28, 33, 0.18);
+  --n-va-glow-a: rgba(53, 214, 197, 0.22);
+  --n-va-glow-b: rgba(255, 115, 158, 0.18);
+  --n-va-white: #fff;
+  --n-va-black: #000;
+}
+
+.theme-dark {
+  --n-va-paper: #111c20;
+  --n-va-ink: #eef4ee;
+  --n-va-muted: #a7b8b7;
+  --n-va-panel: #1c2b2e;
+  --n-va-panel-soft: #162326;
+  --n-va-canvas: #020a0d;
+  --n-va-grid: #1d363d;
+  --n-va-a: #43e7d5;
+  --n-va-b: #ff82aa;
+  --n-va-a-line: #c4fff8;
+  --n-va-b-line: #ffd7e3;
+  --n-va-cursor: #ffefa4;
+  --n-va-border: #42575a;
+  --n-va-shadow: rgba(0, 0, 0, 0.42);
+  --n-va-glow-a: rgba(67, 231, 213, 0.2);
+  --n-va-glow-b: rgba(255, 130, 170, 0.17);
+  --n-va-white: #fff;
+  --n-va-black: #000;
+}
+
+.voice-spectrogram {
+  position: relative;
+  overflow: hidden;
+  color: var(--n-va-ink);
+  background:
+    radial-gradient(circle at 10% 2%, var(--n-va-glow-a), transparent 28%),
+    radial-gradient(circle at 92% 22%, var(--n-va-glow-b), transparent 26%),
+    var(--n-va-paper);
+  border: 1px solid var(--n-va-border);
+  border-radius: 1.8rem;
+  box-shadow: 0 1.8rem 4rem var(--n-va-shadow);
+}
+
+.voice-spectrogram button,
+.voice-spectrogram input {
+  font-size: inherit;
+}
+
+.voice-spectrogram button {
+  color: var(--n-va-ink);
+}
+
+.voice-spectrogram-privacy {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  padding: 0.85rem clamp(1rem, 3vw, 2rem);
+  color: var(--n-va-muted);
+  background: var(--n-va-panel-soft);
+  border-bottom: 1px solid var(--n-va-border);
+}
+
+.voice-spectrogram-privacy span {
+  flex: 0 0 auto;
+  padding: 0.28rem 0.58rem;
+  color: var(--n-va-canvas);
+  background: var(--n-va-a);
+  border-radius: 99rem;
+  font-size: 0.72rem;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.voice-spectrogram-privacy p,
+.voice-spectrogram-comparison p,
+.voice-spectrogram-educational {
+  margin: 0;
+}
+
+.voice-spectrogram-load,
+.voice-spectrogram-comparison {
+  padding: clamp(1.1rem, 3vw, 2rem);
+}
+
+.voice-spectrogram-section-intro,
+.voice-spectrogram-instrument-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.voice-spectrogram-kicker {
+  margin: 0;
+  font-size: clamp(0.92rem, 1.8vw, 1.15rem);
+  font-weight: 900;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.voice-spectrogram-section-intro > span {
+  color: var(--n-va-muted);
+  font-size: 0.82rem;
+}
+
+.voice-spectrogram-samples {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+}
+
+.voice-spectrogram-sample {
+  position: relative;
+  min-width: 0;
+  padding: 0.85rem;
+  background: var(--n-va-panel-soft);
+  border: 1px solid var(--n-va-border);
+  border-radius: 1.2rem;
+  box-shadow: 0 0.8rem 1.8rem var(--n-va-shadow);
+}
+
+.voice-spectrogram-sample::before {
+  position: absolute;
+  inset: 0.55rem auto 0.55rem 0.55rem;
+  width: 0.22rem;
+  background: var(--n-va-a);
+  border-radius: 99rem;
+  content: "";
+}
+
+.voice-spectrogram-sample-b::before {
+  background: var(--n-va-b);
+}
+
+.voice-spectrogram-sample-index {
+  position: absolute;
+  top: -0.65rem;
+  left: 1.35rem;
+  padding: 0.22rem 0.55rem;
+  color: var(--n-va-canvas);
+  background: var(--n-va-a);
+  border-radius: 0.4rem;
+  font-size: 0.7rem;
+  font-weight: 900;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.voice-spectrogram-sample-b .voice-spectrogram-sample-index {
+  background: var(--n-va-b);
+}
+
+.voice-spectrogram-drop {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 0.65rem 1rem;
+  align-items: center;
+  min-height: 6.8rem;
+  padding: 1rem 1rem 0.75rem 1.35rem;
+  border: 1px dashed var(--n-va-border);
+  border-radius: 0.8rem;
+}
+
+.voice-spectrogram-drop strong,
+.voice-spectrogram-drop span {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.voice-spectrogram-drop strong {
+  margin-bottom: 0.25rem;
+}
+
+.voice-spectrogram-drop span,
+.voice-spectrogram-drop small,
+.voice-spectrogram-sample-foot {
+  color: var(--n-va-muted);
+  font-size: 0.76rem;
+}
+
+.voice-spectrogram-drop small {
+  grid-column: 1 / -1;
+}
+
+.voice-spectrogram-file {
+  display: inline-flex;
+  padding: 0.55rem 0.75rem;
+  color: var(--n-va-paper);
+  background: var(--n-va-ink);
+  border-radius: 0.55rem;
+  cursor: pointer;
+  font-size: 0.78rem;
+  font-weight: 800;
+}
+
+.voice-spectrogram-file input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.voice-spectrogram-sample-foot {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.8rem;
+  padding: 0.75rem 0.15rem 0.05rem 0.55rem;
+}
+
+.voice-spectrogram-presets {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 0.35rem;
+}
+
+.voice-spectrogram-presets button,
+.voice-spectrogram-segmented button {
+  padding: 0.28rem 0.5rem;
+  background: transparent;
+  border: 1px solid var(--n-va-border);
+  border-radius: 99rem;
+  cursor: pointer;
+  font-size: 0.7rem;
+}
+
+.voice-spectrogram-instrument {
+  margin: 0 clamp(0.65rem, 2vw, 1.25rem);
+  padding: clamp(0.75rem, 2vw, 1.25rem);
+  color: var(--n-va-white);
+  background: var(--n-va-canvas);
+  border: 1px solid var(--n-va-grid);
+  border-radius: 1.35rem;
+  box-shadow: inset 0 0 3rem var(--n-va-black), 0 1.2rem 2.8rem var(--n-va-shadow);
+}
+
+.voice-spectrogram-instrument-head > div:first-child {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  font-size: 0.78rem;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.voice-spectrogram-live-dot {
+  width: 0.6rem;
+  height: 0.6rem;
+  background: var(--n-va-a);
+  border-radius: 50%;
+  box-shadow: 0 0 0.8rem var(--n-va-a);
+}
+
+.voice-spectrogram-control-clusters {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 0.6rem;
+}
+
+.voice-spectrogram-segmented {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+}
+
+.voice-spectrogram-segmented > span {
+  margin-right: 0.25rem;
+  color: var(--n-va-muted);
+  font-size: 0.68rem;
+  text-transform: uppercase;
+}
+
+.voice-spectrogram-segmented button {
+  color: var(--n-va-muted);
+  border-color: var(--n-va-grid);
+}
+
+.voice-spectrogram-segmented button.is-active {
+  color: var(--n-va-canvas);
+  background: var(--n-va-cursor);
+  border-color: var(--n-va-cursor);
+}
+
+.voice-spectrogram-plate {
+  position: relative;
+  overflow: hidden;
+  border: 1px solid var(--n-va-grid);
+  border-radius: 0.9rem;
+}
+
+.voice-spectrogram-plate canvas {
+  display: block;
+  width: 100%;
+  height: clamp(24rem, 54vw, 34rem);
+}
+
+.voice-spectrogram-plate-glow {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: linear-gradient(90deg, var(--n-va-glow-a), transparent 38%, transparent 62%, var(--n-va-glow-b));
+  mix-blend-mode: screen;
+}
+
+.voice-spectrogram-transport {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  gap: 0.7rem;
+  align-items: center;
+  max-width: 34rem;
+  margin: 1rem auto 0;
+}
+
+.voice-spectrogram-transport button {
+  min-height: 2.8rem;
+  color: var(--n-va-white);
+  background: var(--n-va-grid);
+  border: 1px solid var(--n-va-grid);
+  border-radius: 99rem;
+  cursor: pointer;
+  font-weight: 800;
+}
+
+.voice-spectrogram-transport button:not(.voice-spectrogram-stop) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.55rem;
+}
+
+.voice-spectrogram-transport button span {
+  display: grid;
+  width: 1.5rem;
+  height: 1.5rem;
+  place-items: center;
+  color: var(--n-va-canvas);
+  background: var(--n-va-a);
+  border-radius: 50%;
+}
+
+.voice-spectrogram-transport button:last-child span {
+  background: var(--n-va-b);
+}
+
+.voice-spectrogram-stop {
+  padding: 0 1rem;
+  color: var(--n-va-cursor);
+  background: transparent;
+}
+
+.voice-spectrogram-legend {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.6rem 1.3rem;
+  margin-top: 0.85rem;
+  color: var(--n-va-muted);
+  font-size: 0.68rem;
+}
+
+.voice-spectrogram-legend span {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.voice-spectrogram-swatch {
+  width: 0.75rem;
+  height: 0.75rem;
+  background: var(--n-va-a);
+  border-radius: 0.2rem;
+}
+
+.voice-spectrogram-swatch-b {
+  background: var(--n-va-b);
+}
+
+.voice-spectrogram-line {
+  width: 1.2rem;
+  border-top: 2px solid var(--n-va-cursor);
+}
+
+.voice-spectrogram-comparison {
+  display: grid;
+  grid-template-columns: minmax(12rem, 0.7fr) minmax(0, 1.6fr);
+  gap: 1.4rem;
+  align-items: start;
+}
+
+.voice-spectrogram-comparison-copy p:last-child {
+  margin-top: 0.65rem;
+  color: var(--n-va-muted);
+  line-height: 1.6;
+}
+
+.voice-spectrogram-formants {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.65rem;
+}
+
+.voice-spectrogram-formants article {
+  position: relative;
+  overflow: hidden;
+  padding: 1rem;
+  background: var(--n-va-panel-soft);
+  border: 1px solid var(--n-va-border);
+  border-radius: 0.85rem;
+}
+
+.voice-spectrogram-formant-index {
+  display: block;
+  color: var(--n-va-muted);
+  font-size: 1.8rem;
+  font-weight: 900;
+  opacity: 0.4;
+}
+
+.voice-spectrogram-formants strong {
+  display: block;
+  min-height: 2.5rem;
+  font-size: 0.85rem;
+}
+
+.voice-spectrogram-formants dl,
+.voice-spectrogram-formants dd {
+  margin: 0;
+}
+
+.voice-spectrogram-formants dl > div {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.38rem 0;
+  border-top: 1px solid var(--n-va-border);
+  font-size: 0.75rem;
+}
+
+.voice-spectrogram-formants dt {
+  color: var(--n-va-muted);
+}
+
+.voice-spectrogram-formants dd {
+  min-width: 4.6rem;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  font-weight: 800;
+}
+
+.voice-spectrogram-educational {
+  padding: 0 2rem 1.5rem;
+  color: var(--n-va-muted);
+  font-size: 0.72rem;
+  line-height: 1.5;
+  text-align: center;
+}
+
+.voice-spectrogram button:focus-visible,
+.voice-spectrogram input:focus-visible,
+.voice-spectrogram-file:focus-within {
+  outline: 3px solid var(--n-va-cursor);
+  outline-offset: 3px;
+}
+
+@media (max-width: 760px) {
+  .voice-spectrogram-samples,
+  .voice-spectrogram-comparison {
+    grid-template-columns: 1fr;
+  }
+
+  .voice-spectrogram-instrument-head,
+  .voice-spectrogram-section-intro {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .voice-spectrogram-control-clusters {
+    justify-content: flex-start;
+  }
+
+  .voice-spectrogram-plate canvas {
+    height: 27rem;
+  }
+}
+
+@media (max-width: 520px) {
+  .voice-spectrogram-privacy {
+    align-items: flex-start;
+  }
+
+  .voice-spectrogram-drop {
+    grid-template-columns: 1fr;
+  }
+
+  .voice-spectrogram-drop small {
+    grid-column: auto;
+  }
+
+  .voice-spectrogram-sample-foot {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .voice-spectrogram-presets {
+    justify-content: flex-start;
+  }
+
+  .voice-spectrogram-formants {
+    grid-template-columns: 1fr;
+  }
+
+  .voice-spectrogram-transport {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .voice-spectrogram-stop {
+    grid-column: 1 / -1;
+    grid-row: 2;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .voice-spectrogram *,
+  .voice-spectrogram *::before,
+  .voice-spectrogram *::after {
+    scroll-behavior: auto;
+  }
+}

package/src/tools.ts

@@ -16,6 +16,7 @@ import { FORENSIC_FINGERPRINT_MINUTIAE_IDENTIFIER_TOOL } from './tool/forensic-f
 import { FIRE_PATTERN_ORIGIN_ANALYZER_TOOL } from './tool/fire-pattern-origin-analyzer/index';
 import { FORENSIC_TOOLMARK_STRIATION_MATCHER_TOOL } from './tool/forensic-toolmark-striation-matcher/index';
 import { TIME_OF_DEATH_ALGOR_MORTIS_CALCULATOR_TOOL } from './tool/time-of-death-algor-mortis-calculator/index';
+import { VOICE_SPECTROGRAM_ANALYZER_TOOL } from './tool/voice-spectrogram-analyzer/index';
 
 export const ALL_TOOLS: ToolDefinition[] = [
   FORENSIC_AGE_ESTIMATOR_TOOL,
@@ -33,5 +34,6 @@ export const ALL_TOOLS: ToolDefinition[] = [
   FORENSIC_FINGERPRINT_MINUTIAE_IDENTIFIER_TOOL,
   FIRE_PATTERN_ORIGIN_ANALYZER_TOOL,
   FORENSIC_TOOLMARK_STRIATION_MATCHER_TOOL,
-  TIME_OF_DEATH_ALGOR_MORTIS_CALCULATOR_TOOL
+  TIME_OF_DEATH_ALGOR_MORTIS_CALCULATOR_TOOL,
+  VOICE_SPECTROGRAM_ANALYZER_TOOL
 ];