@jjlmoya/utils-hardware 1.20.0 → 1.22.0

package/src/tool/upsRuntimeCalculator/ups-runtime-calculator.css

@@ -0,0 +1,530 @@
+.ups-root {
+  --ups-ink: #111827;
+  --ups-muted: #667085;
+  --ups-soft: #f6f8fb;
+  --ups-card: #fff;
+  --ups-line: #d7deea;
+  --ups-accent: #0f9f7a;
+  --ups-accent-soft: #e7f6f1;
+  --ups-warn: #a16207;
+  --ups-warn-soft: #fff7e6;
+  --ups-shadow: rgb(17, 24, 39, 0.08);
+
+  color: var(--ups-ink);
+}
+
+.theme-dark .ups-root {
+  --ups-ink: #f7fafc;
+  --ups-muted: #a7b0bf;
+  --ups-soft: #151b24;
+  --ups-card: #1d2430;
+  --ups-line: #334155;
+  --ups-accent: #35c69b;
+  --ups-accent-soft: #18362e;
+  --ups-warn: #f4c76b;
+  --ups-warn-soft: #352817;
+  --ups-shadow: rgb(0, 0, 0, 0.24);
+}
+
+.ups-panel {
+  display: grid;
+  gap: 0.75rem;
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid var(--ups-line);
+  border-radius: 8px;
+  background: var(--ups-card);
+  box-shadow: 0 1rem 2.5rem var(--ups-shadow);
+  animation: ups-rise 420ms ease-out both;
+}
+
+.ups-console,
+.ups-dashboard,
+.ups-machine {
+  min-width: 0;
+}
+
+.ups-console,
+.ups-dashboard {
+  border: 1px solid var(--ups-line);
+  border-radius: 8px;
+  background: var(--ups-card);
+  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
+}
+
+.ups-console:focus-within,
+.ups-dashboard:hover,
+.ups-machine:hover {
+  border-color: color-mix(in srgb, var(--ups-accent) 42%, var(--ups-line));
+  box-shadow: 0 0.75rem 1.75rem var(--ups-shadow);
+  transform: translateY(-1px);
+}
+
+.ups-strip {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.7rem 0.75rem 0.35rem;
+  color: var(--ups-muted);
+  font-size: 0.78rem;
+  font-weight: 850;
+}
+
+.ups-add,
+.ups-device button {
+  display: grid;
+  place-items: center;
+  min-height: 2rem;
+  border: 1px solid var(--ups-line);
+  border-radius: 8px;
+  background: var(--ups-ink);
+  color: var(--ups-card);
+  font: inherit;
+  font-size: 0.8rem;
+  font-weight: 800;
+  cursor: pointer;
+  transition: background 160ms ease, transform 160ms ease, border-color 160ms ease;
+}
+
+.ups-add:hover,
+.ups-device button:hover {
+  background: var(--ups-accent);
+  border-color: var(--ups-accent);
+  transform: translateY(-1px);
+}
+
+.ups-add {
+  padding: 0 0.75rem;
+  white-space: nowrap;
+}
+
+.ups-devices {
+  display: grid;
+  gap: 0.45rem;
+  padding: 0.5rem 0.75rem 0.75rem;
+}
+
+.ups-device {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 7.2rem 2.25rem;
+  gap: 0.45rem;
+  align-items: end;
+}
+
+.ups-number-field input {
+  width: 100%;
+  min-height: 2.25rem;
+  padding: 0 0 0 0.65rem;
+  border: 0;
+  background: transparent;
+  color: var(--ups-ink);
+  font: inherit;
+  font-weight: 800;
+}
+
+.ups-number-field input:focus {
+  outline: 0;
+}
+
+.ups-number-field:focus-within {
+  border-color: var(--ups-accent);
+  background: var(--ups-card);
+  box-shadow: 0 0 0 3px var(--ups-accent-soft);
+}
+
+.ups-device-name {
+  width: 100%;
+  min-height: 2.25rem;
+  padding: 0 0.65rem;
+  border: 1px solid var(--ups-line);
+  border-radius: 8px;
+  background: var(--ups-soft);
+  color: var(--ups-ink);
+  font: inherit;
+  font-weight: 750;
+  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
+}
+
+.ups-device-name:focus {
+  outline: 0;
+  border-color: var(--ups-accent);
+  background: var(--ups-card);
+  box-shadow: 0 0 0 3px var(--ups-accent-soft);
+}
+
+.ups-number-field {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  min-height: 2.25rem;
+  border: 1px solid var(--ups-line);
+  border-radius: 8px;
+  background: var(--ups-soft);
+  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
+}
+
+.ups-number-field em {
+  padding: 0 0.65rem 0 0.35rem;
+  color: var(--ups-muted);
+  font-size: 0.72rem;
+  font-style: normal;
+  font-weight: 900;
+}
+
+.ups-number-field-large {
+  min-height: 2.65rem;
+}
+
+.ups-number-field-large input {
+  font-size: 1.05rem;
+}
+
+.ups-device label,
+.ups-controls label {
+  display: grid;
+  gap: 0.22rem;
+  color: var(--ups-muted);
+  font-size: 0.68rem;
+  font-weight: 800;
+}
+
+.ups-device button {
+  width: 2rem;
+  height: 2.25rem;
+  padding: 0;
+}
+
+.ups-trash-icon {
+  width: 1.05rem;
+  height: 1.05rem;
+}
+
+.ups-machine {
+  display: grid;
+  align-content: stretch;
+  gap: 0.65rem;
+  border: 1px solid var(--ups-line);
+  border-radius: 8px;
+  background: var(--ups-soft);
+  padding: 0.75rem;
+  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
+}
+
+.ups-shell {
+  position: relative;
+  display: grid;
+  place-items: center;
+  min-height: 13rem;
+  border: 1px solid var(--ups-line);
+  border-radius: 8px;
+  background: var(--ups-card);
+  overflow: hidden;
+}
+
+.ups-shell::before,
+.ups-shell::after {
+  position: absolute;
+  content: "";
+}
+
+.ups-shell::before {
+  inset: 0.85rem;
+  border: 1px solid var(--ups-line);
+  border-radius: 8px;
+}
+
+.ups-shell::after {
+  right: 1rem;
+  bottom: 1rem;
+  width: 0.65rem;
+  height: 0.65rem;
+  border-radius: 50%;
+  background: var(--ups-accent);
+  animation: ups-blink 1400ms ease-in-out infinite;
+}
+
+.ups-port-row,
+.ups-core {
+  display: none;
+}
+
+.ups-screen {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  place-items: center;
+  gap: 0.15rem;
+  animation: ups-breathe 2200ms ease-in-out infinite;
+}
+
+.ups-screen span {
+  color: var(--ups-ink);
+  font-size: 4.8rem;
+  font-weight: 900;
+  line-height: 0.9;
+}
+
+.ups-screen small {
+  color: var(--ups-muted);
+  font-size: 0.78rem;
+  font-weight: 850;
+}
+
+.ups-energy-rail {
+  position: relative;
+  height: 0.55rem;
+  overflow: hidden;
+  border-radius: 8px;
+  background: var(--ups-line);
+}
+
+.ups-energy-rail span {
+  display: block;
+  width: var(--ups-load-fill);
+  height: 100%;
+  border-radius: inherit;
+  background: var(--ups-accent);
+  transition: width 260ms ease;
+}
+
+.ups-energy-rail::after {
+  position: absolute;
+  inset: 0;
+  background: color-mix(in srgb, var(--ups-card) 36%, transparent);
+  content: "";
+  transform: translateX(-100%);
+  animation: ups-flow 1800ms ease-in-out infinite;
+}
+
+.ups-controls {
+  display: grid;
+  gap: 0.65rem;
+  padding: 0.75rem;
+}
+
+.ups-controls label {
+  grid-template-columns: minmax(8.8rem, 1.1fr) minmax(0, 1.4fr) 3rem;
+  align-items: center;
+}
+
+.ups-controls .ups-capacity {
+  grid-template-columns: minmax(11.5rem, 1.25fr) minmax(9.5rem, 0.95fr);
+  gap: 0.6rem;
+  padding: 0.65rem;
+  border: 1px solid var(--ups-line);
+  border-radius: 8px;
+  background: var(--ups-soft);
+}
+
+.ups-controls .ups-capacity .ups-number-field {
+  background: var(--ups-card);
+}
+
+.ups-controls input[type="range"] {
+  width: 100%;
+  accent-color: var(--ups-accent);
+  cursor: pointer;
+}
+
+.ups-controls strong {
+  color: var(--ups-ink);
+  text-align: right;
+}
+
+.ups-dashboard {
+  display: grid;
+  gap: 0.65rem;
+  padding: 0.75rem;
+}
+
+.ups-metrics {
+  display: grid;
+  gap: 0.55rem;
+}
+
+.ups-metrics article {
+  display: grid;
+  gap: 0.28rem;
+  min-height: 4.5rem;
+  padding: 0.7rem;
+  border: 1px solid var(--ups-line);
+  border-radius: 8px;
+  background: var(--ups-soft);
+  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
+}
+
+.ups-metrics article:hover {
+  border-color: color-mix(in srgb, var(--ups-accent) 42%, var(--ups-line));
+  background: var(--ups-accent-soft);
+  transform: translateY(-1px);
+}
+
+.ups-metrics span {
+  color: var(--ups-muted);
+  font-size: 0.68rem;
+  font-weight: 850;
+}
+
+.ups-metrics strong {
+  font-size: 1.35rem;
+  line-height: 1.05;
+}
+
+.ups-metrics i {
+  display: block;
+  width: 100%;
+  height: 0.3rem;
+  overflow: hidden;
+  border-radius: 8px;
+  background: var(--ups-line);
+}
+
+.ups-metrics i::before {
+  display: block;
+  width: var(--meter-fill, 40%);
+  height: 100%;
+  border-radius: inherit;
+  background: var(--ups-accent);
+  content: "";
+  transition: width 260ms ease;
+}
+
+.ups-summary {
+  margin: 0;
+  padding: 0.75rem;
+  border: 1px solid color-mix(in srgb, var(--ups-warn) 34%, var(--ups-line));
+  border-radius: 8px;
+  background: var(--ups-warn-soft);
+  color: var(--ups-ink);
+  font-size: 0.9rem;
+  font-weight: 750;
+  line-height: 1.25;
+  animation: ups-soft-pop 520ms ease both;
+}
+
+@media (min-width: 820px) {
+  .ups-panel {
+    grid-template-columns: minmax(18rem, 1fr) minmax(13rem, 0.75fr) minmax(18rem, 1fr);
+    grid-template-areas:
+      "load machine dashboard"
+      "controls machine dashboard";
+    align-items: stretch;
+  }
+
+  .ups-load {
+    grid-area: load;
+  }
+
+  .ups-controls {
+    grid-area: controls;
+  }
+
+  .ups-machine {
+    grid-area: machine;
+  }
+
+  .ups-dashboard {
+    grid-area: dashboard;
+  }
+}
+
+@media (min-width: 1080px) {
+  .ups-metrics {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 560px) {
+  .ups-device {
+    grid-template-columns: minmax(0, 1fr) 6.4rem 2.25rem;
+  }
+
+  .ups-controls label {
+    grid-template-columns: 1fr;
+  }
+
+  .ups-controls .ups-capacity {
+    grid-template-columns: 1fr;
+  }
+
+  .ups-controls strong {
+    text-align: left;
+  }
+}
+
+@keyframes ups-rise {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes ups-breathe {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.025);
+  }
+}
+
+@keyframes ups-blink {
+  0%,
+  100% {
+    opacity: 0.35;
+    transform: scale(0.8);
+  }
+
+  50% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes ups-flow {
+  0% {
+    transform: translateX(-100%);
+  }
+
+  55%,
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes ups-soft-pop {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ups-panel,
+  .ups-screen,
+  .ups-shell::after,
+  .ups-energy-rail::after,
+  .ups-summary {
+    animation: none;
+  }
+
+  .ups-console,
+  .ups-dashboard,
+  .ups-machine,
+  .ups-add,
+  .ups-device button,
+  .ups-metrics article {
+    transition: none;
+  }
+}

package/src/tools.ts

@@ -10,6 +10,8 @@ import { TONE_GENERATOR_TOOL } from './tool/toneGenerator/index';
 import { REFRESH_RATE_DETECTOR_TOOL } from './tool/refreshRateDetector/index';
 import { SPECTRUM_CANVAS_TOOL } from './tool/colorAccuracyTest/index';
 import { MOUSE_DOUBLE_CLICK_TEST_TOOL } from './tool/mouseDoubleClickTest/index';
+import { MOUSE_SCROLL_TEST_TOOL } from './tool/mouseScrollTest/index';
 import { MONITOR_GHOSTING_TEST_TOOL } from './tool/monitorGhostingTest/index';
+import { UPS_RUNTIME_CALCULATOR_TOOL } from './tool/upsRuntimeCalculator/index';
 
-export const ALL_TOOLS: ToolDefinition[] = [PIXELES_PANTALLA_TOOL, TEST_TECLADO_TOOL, TEST_MANDO_TOOL, PROBADOR_VIBRACION_MANDO_TOOL, TEST_RATON_TOOL, MOUSE_DOUBLE_CLICK_TEST_TOOL, ESTIMADOR_SALUD_BATERIA_TOOL, TONE_GENERATOR_TOOL, REFRESH_RATE_DETECTOR_TOOL, MONITOR_GHOSTING_TEST_TOOL, SPECTRUM_CANVAS_TOOL];
+export const ALL_TOOLS: ToolDefinition[] = [PIXELES_PANTALLA_TOOL, TEST_TECLADO_TOOL, TEST_MANDO_TOOL, PROBADOR_VIBRACION_MANDO_TOOL, TEST_RATON_TOOL, MOUSE_DOUBLE_CLICK_TEST_TOOL, MOUSE_SCROLL_TEST_TOOL, ESTIMADOR_SALUD_BATERIA_TOOL, TONE_GENERATOR_TOOL, REFRESH_RATE_DETECTOR_TOOL, MONITOR_GHOSTING_TEST_TOOL, SPECTRUM_CANVAS_TOOL, UPS_RUNTIME_CALCULATOR_TOOL];