@jjlmoya/utils-health 1.26.0 → 1.28.0

package/src/tool/correctedReticulocyteIndex/corrected-reticulocyte-index-calculator.css

@@ -0,0 +1,419 @@
+.rpi {
+  --rpi-bg: #fbfaf8;
+  --rpi-panel: #fff;
+  --rpi-panel-2: #f6f1ef;
+  --rpi-ink: #22191b;
+  --rpi-muted: #76676b;
+  --rpi-line: #e3d8d5;
+  --rpi-input: #fff;
+  --rpi-red: #b9232f;
+  --rpi-red-dark: #841721;
+  --rpi-yellow: #b76a14;
+  --rpi-green: #17764a;
+  --rpi-amber-bg: #fff8e7;
+  --rpi-amber-ink: #733b08;
+  --rpi-shadow: rgba(77, 37, 42, 0.14);
+
+  width: 100%;
+  overflow: hidden;
+  border: 1px solid var(--rpi-line);
+  border-radius: 8px;
+  background: var(--rpi-bg);
+  color: var(--rpi-ink);
+  box-shadow: 0 20px 50px var(--rpi-shadow);
+}
+
+.theme-dark .rpi {
+  --rpi-bg: #100d10;
+  --rpi-panel: #191317;
+  --rpi-panel-2: #22171b;
+  --rpi-ink: #fff7f7;
+  --rpi-muted: #d0bcc0;
+  --rpi-line: #3d2a30;
+  --rpi-input: #0d090c;
+  --rpi-red: #f05252;
+  --rpi-red-dark: #9b1c1c;
+  --rpi-yellow: #f59e0b;
+  --rpi-green: #22c55e;
+  --rpi-amber-bg: #241706;
+  --rpi-amber-ink: #f8d67a;
+  --rpi-shadow: rgba(0, 0, 0, 0.36);
+}
+
+.rpi__warning {
+  display: grid;
+  grid-template-columns: 1.8rem 1fr;
+  gap: 0.85rem;
+  padding: 1rem clamp(1rem, 3vw, 1.35rem);
+  border-bottom: 1px solid color-mix(in srgb, var(--rpi-yellow) 54%, var(--rpi-line));
+  background:
+    linear-gradient(90deg, color-mix(in srgb, var(--rpi-yellow) 12%, transparent), transparent 54%),
+    var(--rpi-amber-bg);
+  color: var(--rpi-amber-ink);
+}
+
+.rpi__warning-icon {
+  width: 1.8rem;
+  height: 1.8rem;
+  margin-top: 0.1rem;
+}
+
+.rpi__warning strong {
+  display: block;
+  margin-bottom: 0.28rem;
+  font-size: 0.83rem;
+  font-weight: 950;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.rpi__warning span {
+  display: block;
+  max-width: 92ch;
+  font-size: 0.86rem;
+  font-weight: 650;
+  line-height: 1.5;
+}
+
+.rpi__report {
+  display: grid;
+  background: var(--rpi-panel-2);
+}
+
+.rpi__inputs {
+  display: grid;
+  gap: 0.75rem;
+  padding: clamp(0.85rem, 2.4vw, 1.15rem);
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--rpi-red) 5%, transparent), transparent),
+    var(--rpi-panel-2);
+}
+
+.rpi__field {
+  display: grid;
+  gap: 0.65rem;
+  padding: 0.9rem;
+  border: 1px solid var(--rpi-line);
+  border-radius: 8px;
+  background: var(--rpi-panel);
+}
+
+.rpi__field span {
+  color: var(--rpi-muted);
+  font-size: 0.72rem;
+  font-weight: 900;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+}
+
+.rpi__input {
+  width: 100%;
+  min-width: 0;
+  padding: 0.55rem 0.7rem;
+  border: 1px solid color-mix(in srgb, var(--rpi-line) 72%, var(--rpi-red));
+  border-radius: 8px;
+  background: var(--rpi-input);
+  color: var(--rpi-ink);
+  font: inherit;
+  font-size: clamp(1.65rem, 5vw, 2.45rem);
+  font-weight: 950;
+  line-height: 1;
+  outline: none;
+}
+
+.rpi__input::placeholder {
+  color: color-mix(in srgb, var(--rpi-muted) 42%, transparent);
+}
+
+.rpi__input:focus {
+  border-color: var(--rpi-red);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rpi-red) 16%, transparent);
+}
+
+.rpi__presets {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.35rem;
+}
+
+.rpi__preset {
+  min-height: 2.15rem;
+  border: 1px solid var(--rpi-line);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--rpi-muted);
+  font: inherit;
+  font-size: 0.72rem;
+  font-weight: 900;
+  cursor: pointer;
+}
+
+.rpi__preset--active {
+  border-color: var(--rpi-red);
+  background: var(--rpi-red);
+  color: #fff;
+}
+
+.rpi__result {
+  display: grid;
+  margin: 0 clamp(0.85rem, 2.4vw, 1.15rem) clamp(0.85rem, 2.4vw, 1.15rem);
+  overflow: hidden;
+  border: 1px solid var(--rpi-line);
+  border-radius: 8px;
+  background: var(--rpi-panel);
+}
+
+.rpi__sphere {
+  position: relative;
+  display: grid;
+  place-items: center;
+  min-height: 18rem;
+  padding: 1rem;
+  background:
+    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--rpi-red) 12%, transparent), transparent 42%),
+    var(--rpi-panel);
+}
+
+.rpi__sphere svg {
+  width: min(78%, 13.5rem);
+  height: auto;
+  opacity: 0.92;
+  filter: drop-shadow(0 18px 24px rgba(83, 24, 31, 0.18));
+}
+
+.rpi__sphere-orbit {
+  fill: none;
+  stroke: color-mix(in srgb, var(--rpi-red) 28%, var(--rpi-line));
+  stroke-width: 2;
+  stroke-dasharray: 6 8;
+}
+
+.rpi__sphere-core {
+  fill: color-mix(in srgb, var(--rpi-red) 12%, var(--rpi-panel));
+  stroke: color-mix(in srgb, var(--rpi-red) 56%, var(--rpi-line));
+  stroke-width: 4;
+}
+
+.theme-dark .rpi__sphere-core {
+  fill: color-mix(in srgb, var(--rpi-red-dark) 56%, #130b0f);
+}
+
+.rpi__sphere-fill {
+  fill: url("#rpiSphereGlow");
+  opacity: 0.72;
+  transition: d 180ms ease;
+}
+
+.rpi__sphere-shine {
+  fill: rgba(255, 255, 255, 0.7);
+}
+
+.rpi__sphere-value {
+  position: absolute;
+  display: grid;
+  gap: 0.2rem;
+  place-items: center;
+  min-width: 9rem;
+  padding: 0.55rem 0.7rem;
+  border: 1px solid color-mix(in srgb, var(--rpi-line) 64%, transparent);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--rpi-panel) 82%, transparent);
+  text-align: center;
+  box-shadow: 0 12px 28px rgba(60, 25, 31, 0.12);
+}
+
+.theme-dark .rpi__sphere-value {
+  background: rgba(12, 8, 11, 0.78);
+}
+
+.rpi__sphere-value span {
+  color: var(--rpi-muted);
+  font-size: 0.72rem;
+  font-weight: 950;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.rpi__sphere-value strong {
+  color: var(--rpi-ink);
+  font-size: clamp(3.1rem, 12vw, 4.75rem);
+  font-weight: 1000;
+  line-height: 0.9;
+}
+
+.rpi__readout {
+  display: grid;
+  align-content: center;
+  gap: 0.72rem;
+  padding: clamp(1rem, 3vw, 1.35rem);
+  border-top: 1px solid var(--rpi-line);
+  background:
+    linear-gradient(135deg, color-mix(in srgb, var(--rpi-red) 7%, transparent), transparent 58%),
+    var(--rpi-panel);
+}
+
+.rpi__badge {
+  width: fit-content;
+  padding: 0.35rem 0.62rem;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--rpi-red) 14%, transparent);
+  color: var(--rpi-red);
+  font-size: 0.74rem;
+  font-weight: 950;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.rpi__readout strong {
+  color: var(--rpi-red);
+  font-size: clamp(1.6rem, 5vw, 2.45rem);
+  line-height: 1;
+}
+
+.rpi__readout p {
+  max-width: 62ch;
+  margin: 0;
+  color: var(--rpi-muted);
+  font-size: 0.95rem;
+  line-height: 1.55;
+}
+
+.rpi__result[data-band="borderline"] .rpi__badge,
+.rpi__result[data-band="borderline"] .rpi__readout strong {
+  color: var(--rpi-yellow);
+}
+
+.rpi__result[data-band="adequate"] .rpi__badge,
+.rpi__result[data-band="adequate"] .rpi__readout strong {
+  color: var(--rpi-green);
+}
+
+.rpi__result[data-band="borderline"] .rpi__badge {
+  background: color-mix(in srgb, var(--rpi-yellow) 15%, transparent);
+}
+
+.rpi__result[data-band="adequate"] .rpi__badge {
+  background: color-mix(in srgb, var(--rpi-green) 15%, transparent);
+}
+
+.rpi__metrics {
+  display: grid;
+  gap: 0.75rem;
+  padding: 0 clamp(0.85rem, 2.4vw, 1.15rem) clamp(0.85rem, 2.4vw, 1.15rem);
+  background: var(--rpi-panel-2);
+}
+
+.rpi__metric {
+  display: grid;
+  gap: 0.35rem;
+  padding: 0.9rem;
+  border: 1px solid var(--rpi-line);
+  border-radius: 8px;
+  background: var(--rpi-panel);
+}
+
+.rpi__metric span {
+  color: var(--rpi-muted);
+  font-size: 0.68rem;
+  font-weight: 950;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.rpi__metric strong {
+  color: var(--rpi-ink);
+  font-size: clamp(1.75rem, 6vw, 2.65rem);
+  line-height: 1;
+}
+
+.rpi__formula {
+  display: grid;
+  gap: 0.75rem;
+  padding: 0 clamp(0.85rem, 2.4vw, 1.15rem) clamp(0.85rem, 2.4vw, 1.15rem);
+  background: var(--rpi-panel-2);
+}
+
+.rpi__formula-card,
+.rpi__factor-card {
+  display: grid;
+  gap: 0.65rem;
+  padding: 0.9rem;
+  border: 1px solid var(--rpi-line);
+  border-radius: 8px;
+  background:
+    linear-gradient(135deg, color-mix(in srgb, var(--rpi-red) 5%, transparent), transparent 62%),
+    var(--rpi-panel);
+}
+
+.rpi__formula-card {
+  grid-template-columns: 0.78rem 1fr;
+  align-items: start;
+}
+
+.rpi__formula-mark {
+  width: 0.78rem;
+  min-height: 100%;
+  border-radius: 999px;
+  background: linear-gradient(180deg, var(--rpi-red), color-mix(in srgb, var(--rpi-red) 18%, transparent));
+}
+
+.rpi__formula-copy {
+  display: grid;
+  gap: 0.42rem;
+}
+
+.rpi__formula-copy strong {
+  color: var(--rpi-ink);
+  font-size: 0.86rem;
+}
+
+.rpi__formula-copy span,
+.rpi__factor-grid span {
+  color: var(--rpi-muted);
+  font-size: 0.82rem;
+  line-height: 1.45;
+}
+
+.rpi__factor-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.45rem;
+}
+
+.rpi__factor-grid span {
+  min-height: 2.35rem;
+  padding: 0.48rem 0.55rem;
+  border: 1px solid color-mix(in srgb, var(--rpi-line) 80%, transparent);
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--rpi-panel-2) 64%, transparent);
+  font-weight: 750;
+}
+
+@media (max-width: 430px) {
+  .rpi__factor-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (min-width: 720px) {
+  .rpi__inputs {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .rpi__result {
+    grid-template-columns: minmax(280px, 0.78fr) minmax(360px, 1.22fr);
+  }
+
+  .rpi__readout {
+    border-top: 0;
+    border-left: 1px solid var(--rpi-line);
+  }
+
+  .rpi__metrics {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .rpi__formula {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(260px, 0.86fr);
+  }
+}

package/src/tool/correctedReticulocyteIndex/entry.ts

@@ -0,0 +1,27 @@
+import type { HealthToolEntry } from '../../types';
+import type { CorrectedReticulocyteIndexUI } from './ui';
+
+export const correctedReticulocyteIndex: HealthToolEntry<CorrectedReticulocyteIndexUI> = {
+  id: 'correctedReticulocyteIndex',
+  icons: {
+    bg: 'mdi:water-opacity',
+    fg: 'mdi:chart-bell-curve-cumulative',
+  },
+  i18n: {
+    de: () => import('./i18n/de').then((m) => m.content),
+    en: () => import('./i18n/en').then((m) => m.content),
+    es: () => import('./i18n/es').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+    id: () => import('./i18n/id').then((m) => m.content),
+    it: () => import('./i18n/it').then((m) => m.content),
+    ja: () => import('./i18n/ja').then((m) => m.content),
+    ko: () => import('./i18n/ko').then((m) => m.content),
+    nl: () => import('./i18n/nl').then((m) => m.content),
+    pl: () => import('./i18n/pl').then((m) => m.content),
+    pt: () => import('./i18n/pt').then((m) => m.content),
+    ru: () => import('./i18n/ru').then((m) => m.content),
+    sv: () => import('./i18n/sv').then((m) => m.content),
+    tr: () => import('./i18n/tr').then((m) => m.content),
+    zh: () => import('./i18n/zh').then((m) => m.content),
+  },
+};