@jjlmoya/utils-hardware 1.24.0 → 1.26.0

package/src/tool/webBluetoothBleScanner/web-bluetooth-ble-scanner.css

@@ -0,0 +1,406 @@
+.wbb-root {
+  --wbb-ink: #132034;
+  --wbb-muted: #64748b;
+  --wbb-panel: #fff;
+  --wbb-soft: #eff7ff;
+  --wbb-line: #cfe0f3;
+  --wbb-blue: #1267d8;
+  --wbb-cyan: #00a6b7;
+  --wbb-green: #14966f;
+  --wbb-warn: #b45309;
+  --wbb-error: #c2410c;
+  --wbb-shadow: rgb(19, 32, 52, 0.12);
+
+  color: var(--wbb-ink);
+}
+
+.theme-dark .wbb-root {
+  --wbb-ink: #f8fafc;
+  --wbb-muted: #a9b7ca;
+  --wbb-panel: #151b25;
+  --wbb-soft: #0d1520;
+  --wbb-line: #304055;
+  --wbb-blue: #68a6ff;
+  --wbb-cyan: #3dd9e8;
+  --wbb-green: #57d9ad;
+  --wbb-warn: #f6bd60;
+  --wbb-error: #fb8a5f;
+  --wbb-shadow: rgb(0, 0, 0, 0.32);
+}
+
+.wbb-shell {
+  display: grid;
+  gap: 0.75rem;
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid var(--wbb-line);
+  border-radius: 8px;
+  background:
+    linear-gradient(135deg, color-mix(in srgb, var(--wbb-blue) 10%, transparent), transparent 42%),
+    var(--wbb-panel);
+  box-shadow: 0 1rem 2.6rem var(--wbb-shadow);
+}
+
+.wbb-radar {
+  position: relative;
+  display: grid;
+  place-items: center;
+  min-height: 17rem;
+  border: 1px solid var(--wbb-line);
+  border-radius: 8px;
+  background:
+    radial-gradient(circle at center, color-mix(in srgb, var(--wbb-cyan) 16%, transparent) 0 12%, transparent 13%),
+    repeating-radial-gradient(circle at center, transparent 0 2.2rem, var(--wbb-line) 2.25rem 2.32rem),
+    linear-gradient(180deg, var(--wbb-soft), var(--wbb-panel));
+  overflow: hidden;
+}
+
+.wbb-radar::before,
+.wbb-radar::after {
+  position: absolute;
+  inset: 50% auto auto 50%;
+  width: 70%;
+  height: 0.16rem;
+  background: linear-gradient(90deg, transparent, var(--wbb-cyan));
+  content: "";
+  transform-origin: left center;
+}
+
+.wbb-radar::before {
+  animation: wbb-sweep 4s linear infinite;
+}
+
+.wbb-radar::after {
+  opacity: 0.28;
+  transform: rotate(90deg);
+}
+
+.wbb-radar span {
+  position: relative;
+  z-index: 2;
+  display: grid;
+  place-items: center;
+  width: 6.25rem;
+  aspect-ratio: 1;
+  border: 0.5rem solid var(--wbb-panel);
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--wbb-blue), var(--wbb-cyan));
+  box-shadow: 0 1rem 2rem var(--wbb-shadow);
+}
+
+.wbb-radar span svg {
+  width: 3.25rem;
+  height: 3.25rem;
+  color: #fff;
+}
+
+.wbb-radar i,
+.wbb-radar b,
+.wbb-radar em {
+  position: absolute;
+  width: 0.86rem;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: var(--wbb-green);
+  box-shadow: 0 0 0 0.45rem color-mix(in srgb, var(--wbb-green) 18%, transparent);
+}
+
+.wbb-radar i {
+  left: 18%;
+  top: 28%;
+}
+
+.wbb-radar b {
+  right: 22%;
+  top: 20%;
+}
+
+.wbb-radar em {
+  right: 18%;
+  bottom: 24%;
+}
+
+.wbb-console {
+  display: grid;
+  gap: 0.7rem;
+  align-content: start;
+}
+
+.wbb-status,
+.wbb-privacy,
+.wbb-hint,
+.wbb-card {
+  border: 1px solid var(--wbb-line);
+  border-radius: 8px;
+  background: var(--wbb-panel);
+}
+
+.wbb-status {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: 0.55rem;
+  min-height: 3rem;
+  padding: 0.7rem;
+}
+
+.wbb-status span {
+  width: 0.72rem;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: var(--wbb-muted);
+  box-shadow: 0 0 0 0.28rem color-mix(in srgb, var(--wbb-muted) 18%, transparent);
+}
+
+.wbb-status span[data-state="busy"] {
+  background: var(--wbb-blue);
+}
+
+.wbb-status span[data-state="ok"] {
+  background: var(--wbb-green);
+}
+
+.wbb-status span[data-state="warn"] {
+  background: var(--wbb-warn);
+}
+
+.wbb-status span[data-state="error"] {
+  background: var(--wbb-error);
+}
+
+.wbb-status strong {
+  min-width: 0;
+  font-size: 0.9rem;
+  font-weight: 900;
+}
+
+.wbb-scan {
+  display: inline-grid;
+  grid-template-columns: auto minmax(0, auto);
+  place-content: center;
+  align-items: center;
+  gap: 0.5rem;
+  min-height: 4rem;
+  width: 100%;
+  border: 0;
+  border-radius: 8px;
+  background: linear-gradient(135deg, var(--wbb-blue), var(--wbb-cyan));
+  color: #fff;
+  font: inherit;
+  font-size: 1rem;
+  font-weight: 950;
+  cursor: pointer;
+  box-shadow: 0 0.9rem 1.6rem color-mix(in srgb, var(--wbb-blue) 24%, transparent);
+  transition: transform 160ms ease, filter 160ms ease;
+}
+
+.wbb-scan svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.wbb-scan:hover {
+  transform: translateY(-1px);
+}
+
+.wbb-scan:disabled {
+  cursor: wait;
+  filter: saturate(0.65);
+}
+
+.wbb-privacy {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 0.65rem;
+  padding: 0.8rem;
+  background: color-mix(in srgb, var(--wbb-green) 9%, var(--wbb-panel));
+}
+
+.wbb-privacy svg {
+  width: 1.35rem;
+  height: 1.35rem;
+  color: var(--wbb-green);
+}
+
+.wbb-privacy span {
+  display: grid;
+  gap: 0.18rem;
+  min-width: 0;
+}
+
+.wbb-privacy strong {
+  font-size: 0.86rem;
+  font-weight: 950;
+}
+
+.wbb-privacy small,
+.wbb-hint,
+.wbb-card p {
+  color: var(--wbb-muted);
+  font-size: 0.78rem;
+  font-weight: 750;
+  line-height: 1.35;
+}
+
+.wbb-device-list {
+  display: grid;
+  gap: 0.65rem;
+}
+
+.wbb-card {
+  display: grid;
+  gap: 0.7rem;
+  padding: 0.75rem;
+}
+
+.wbb-card-head {
+  display: grid;
+  gap: 0.18rem;
+}
+
+.wbb-card-head span,
+.wbb-card dt {
+  color: var(--wbb-muted);
+  font-size: 0.68rem;
+  font-weight: 900;
+  text-transform: uppercase;
+}
+
+.wbb-card-head strong {
+  font-size: 1.15rem;
+  font-weight: 950;
+  line-height: 1.1;
+}
+
+.wbb-card dl {
+  display: grid;
+  gap: 0.45rem;
+  margin: 0;
+}
+
+.wbb-card dl div {
+  display: grid;
+  gap: 0.18rem;
+  min-width: 0;
+  padding: 0.55rem;
+  border-radius: 8px;
+  background: var(--wbb-soft);
+}
+
+.wbb-card dd {
+  min-width: 0;
+  margin: 0;
+  color: var(--wbb-ink);
+  font-weight: 850;
+}
+
+.wbb-card code {
+  display: block;
+  max-width: 100%;
+  color: inherit;
+  font-size: 0.72rem;
+  overflow-wrap: anywhere;
+}
+
+.wbb-card ul {
+  display: grid;
+  gap: 0.45rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.wbb-card li {
+  display: grid;
+  gap: 0.2rem;
+  padding: 0.6rem;
+  border: 1px solid var(--wbb-line);
+  border-radius: 8px;
+  background: var(--wbb-soft);
+}
+
+.wbb-card li span {
+  font-size: 0.83rem;
+  font-weight: 950;
+}
+
+.wbb-card .wbb-empty {
+  color: var(--wbb-muted);
+  font-weight: 800;
+}
+
+.wbb-card p,
+.wbb-hint {
+  margin: 0;
+}
+
+.wbb-card button {
+  min-height: 2.7rem;
+  border: 1px solid var(--wbb-line);
+  border-radius: 8px;
+  background: var(--wbb-ink);
+  color: var(--wbb-panel);
+  font: inherit;
+  font-weight: 900;
+  cursor: pointer;
+}
+
+.wbb-warning {
+  background: color-mix(in srgb, var(--wbb-warn) 10%, var(--wbb-panel));
+}
+
+.wbb-warning strong {
+  color: var(--wbb-warn);
+}
+
+.wbb-hint {
+  padding: 0.75rem;
+  background: var(--wbb-soft);
+}
+
+@keyframes wbb-sweep {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (min-width: 860px) {
+  .wbb-shell {
+    grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.85fr);
+    align-items: stretch;
+  }
+
+  .wbb-radar {
+    min-height: 28rem;
+  }
+
+  .wbb-card dl {
+    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
+  }
+}
+
+@media (max-width: 560px) {
+  .wbb-shell {
+    padding: 0.55rem;
+  }
+
+  .wbb-radar {
+    min-height: 13rem;
+  }
+
+  .wbb-radar span {
+    width: 5rem;
+  }
+
+  .wbb-scan {
+    min-height: 3.5rem;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .wbb-radar::before,
+  .wbb-scan {
+    animation: none;
+    transition: none;
+  }
+}

package/src/tool/webUsbSerialMonitor/bibliography.astro

@@ -0,0 +1,15 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import type { KnownLocale } from '../../types';
+import { webUsbSerialMonitor } from './index';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props;
+const content = await webUsbSerialMonitor.i18n[locale]?.();
+---
+
+{content && content.bibliography.length > 0 && <SharedBibliography links={content.bibliography} />}
+

package/src/tool/webUsbSerialMonitor/bibliography.ts

@@ -0,0 +1,18 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'SparkFun - Serial Communication Basics',
+    url: 'https://learn.sparkfun.com/tutorials/serial-communication',
+  },
+  {
+    name: 'Arduino - Serial Reference and Guide',
+    url: 'https://docs.arduino.cc/language-reference/en/functions/communication/serial/',
+  },
+  {
+    name: 'Adafruit - Arduino Lesson 5: The Serial Monitor',
+    url: 'https://learn.adafruit.com/adafruit-arduino-lesson-5-the-serial-monitor',
+  },
+];
+
+