@jjlmoya/utils-drones 1.39.0 → 1.41.0

package/src/tool/fpv-drone-lap-timer/fpv-drone-lap-timer.css

@@ -0,0 +1,705 @@
+:root {
+  --fpv-bg-card: #fff;
+  --fpv-bg-subtle: #f8fafc;
+  --fpv-bg-inner: #f1f5f9;
+  --fpv-border: #cbd5e1;
+  --fpv-border-subtle: #e2e8f0;
+  --fpv-text: #0f172a;
+  --fpv-muted: #64748b;
+  --fpv-cyan: #0284c7;
+  --fpv-cyan-glow: rgba(2, 132, 199, 0.25);
+  --fpv-emerald: #059669;
+  --fpv-emerald-glow: rgba(5, 150, 105, 0.25);
+  --fpv-amber: #d97706;
+  --fpv-amber-glow: rgba(217, 119, 6, 0.25);
+  --fpv-rose: #e11d48;
+  --fpv-shadow: rgba(15, 23, 42, 0.08);
+  --fpv-active-btn: #0284c7;
+}
+
+.theme-dark .fpv-lap-timer-card {
+  --fpv-bg-card: #0c121e;
+  --fpv-bg-subtle: #111a2b;
+  --fpv-bg-inner: #182337;
+  --fpv-border: #24324a;
+  --fpv-border-subtle: #1b263b;
+  --fpv-text: #f8fafc;
+  --fpv-muted: #94a3b8;
+  --fpv-cyan: #38bdf8;
+  --fpv-cyan-glow: rgba(56, 189, 248, 0.35);
+  --fpv-emerald: #34d399;
+  --fpv-emerald-glow: rgba(52, 211, 153, 0.35);
+  --fpv-amber: #fbbf24;
+  --fpv-amber-glow: rgba(251, 191, 36, 0.35);
+  --fpv-rose: #fb7185;
+  --fpv-shadow: rgba(0, 0, 0, 0.45);
+  --fpv-active-btn: #0284c7;
+}
+
+.fpv-lap-timer-card {
+  display: grid;
+  grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
+  gap: 1.5rem;
+  align-items: start;
+  margin: 0 auto;
+  border: 1px solid var(--fpv-border);
+  border-radius: 1.5rem;
+  background: var(--fpv-bg-card);
+  box-shadow: 0 1rem 3rem var(--fpv-shadow);
+  color: var(--fpv-text);
+  padding: clamp(1rem, 2.5vw, 1.75rem);
+  box-sizing: border-box;
+}
+
+@media (max-width: 960px) {
+  .fpv-lap-timer-card {
+    grid-template-columns: 1fr;
+  }
+}
+
+.fpv-lap-timer-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  padding: 1.25rem;
+  border: 1px solid var(--fpv-border);
+  border-radius: 1rem;
+  background: var(--fpv-bg-subtle);
+  box-sizing: border-box;
+}
+
+.fpv-lap-timer-sidebar-header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.fpv-lap-timer-kicker {
+  font-size: 0.68rem;
+  font-weight: 900;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--fpv-cyan);
+}
+
+.fpv-lap-timer-sidebar-title {
+  margin: 0;
+  font-size: 1.05rem;
+  font-weight: 800;
+  letter-spacing: -0.01em;
+}
+
+.fpv-lap-timer-presets {
+  display: flex;
+  flex-direction: column;
+  gap: 0.45rem;
+}
+
+.fpv-lap-timer-preset {
+  padding: 0.55rem 0.85rem;
+  border: 1px solid var(--fpv-border);
+  border-radius: 0.55rem;
+  background: var(--fpv-bg-inner);
+  color: var(--fpv-text);
+  font-size: 0.82rem;
+  font-weight: 700;
+  text-align: left;
+  cursor: pointer;
+  transition: border-color 0.2s, background 0.2s, color 0.2s;
+}
+
+.fpv-lap-timer-preset:hover {
+  border-color: var(--fpv-cyan);
+  color: var(--fpv-cyan);
+}
+
+.fpv-lap-timer-preset.active {
+  border-color: var(--fpv-cyan);
+  background: color-mix(in srgb, var(--fpv-cyan) 14%, var(--fpv-bg-inner));
+  color: var(--fpv-cyan);
+}
+
+.fpv-lap-timer-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 0.85rem;
+}
+
+.fpv-lap-timer-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.fpv-lap-timer-field-label {
+  font-size: 0.78rem;
+  font-weight: 700;
+  color: var(--fpv-muted);
+}
+
+.fpv-lap-timer-field-label small {
+  font-weight: 500;
+  opacity: 0.8;
+}
+
+.fpv-lap-timer-field input[type="number"] {
+  width: 100%;
+  padding: 0.55rem 0.75rem;
+  border: 1px solid var(--fpv-border);
+  border-radius: 0.55rem;
+  background: var(--fpv-bg-inner);
+  color: var(--fpv-text);
+  font-size: 0.92rem;
+  font-weight: 700;
+  box-sizing: border-box;
+}
+
+.fpv-lap-timer-checkbox {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.35rem 0;
+  font-size: 0.82rem;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.fpv-lap-timer-checkbox input[type="checkbox"] {
+  width: 1.15rem;
+  height: 1.15rem;
+  accent-color: var(--fpv-cyan);
+  cursor: pointer;
+}
+
+.fpv-lap-timer-specs-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  padding: 0.85rem 1rem;
+  border: 1px solid var(--fpv-border-subtle);
+  border-radius: 0.75rem;
+  background: var(--fpv-bg-inner);
+  font-size: 0.8rem;
+}
+
+.fpv-lap-timer-spec-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.fpv-lap-timer-spec-row span {
+  color: var(--fpv-muted);
+  font-weight: 600;
+}
+
+.fpv-lap-timer-spec-row strong {
+  font-weight: 800;
+}
+
+.fpv-lap-timer-stage {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  min-width: 0;
+}
+
+.fpv-lap-timer-hud {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: clamp(1.25rem, 3vw, 2rem);
+  border: 1px solid var(--fpv-border);
+  border-radius: 1.25rem;
+  background: var(--fpv-bg-subtle);
+  box-shadow: 0 0.5rem 1.5rem var(--fpv-shadow);
+  text-align: center;
+}
+
+.fpv-lap-timer-hud-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  margin-bottom: 0.75rem;
+}
+
+.fpv-lap-timer-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  padding: 0.35rem 0.75rem;
+  border: 1px solid var(--fpv-border);
+  border-radius: 9999px;
+  background: var(--fpv-bg-inner);
+  font-size: 0.78rem;
+  font-weight: 700;
+}
+
+.fpv-lap-timer-status-dot {
+  width: 0.55rem;
+  height: 0.55rem;
+  border-radius: 50%;
+  background: var(--fpv-muted);
+}
+
+.fpv-lap-timer-status-running .fpv-lap-timer-status-dot {
+  background: var(--fpv-emerald);
+  box-shadow: 0 0 8px var(--fpv-emerald);
+}
+
+.fpv-lap-timer-status-countdown .fpv-lap-timer-status-dot {
+  background: var(--fpv-amber);
+  box-shadow: 0 0 8px var(--fpv-amber);
+}
+
+.fpv-lap-timer-digits {
+  font-size: clamp(3rem, 7vw, 4.75rem);
+  font-weight: 900;
+  letter-spacing: 0.05em;
+  color: var(--fpv-cyan);
+  line-height: 1.05;
+  text-shadow: 0 0 24px var(--fpv-cyan-glow);
+}
+
+.fpv-lap-timer-hud-sublabel {
+  margin-top: 0.4rem;
+  font-size: 0.8rem;
+  font-weight: 800;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--fpv-muted);
+}
+
+.fpv-lap-timer-trigger-box {
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+}
+
+.fpv-lap-timer-giant-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 5.25rem;
+  padding: 1rem 2rem;
+  border: 2px solid var(--fpv-cyan);
+  border-radius: 1rem;
+  background: var(--fpv-cyan);
+  color: #fff;
+  font-size: clamp(1.3rem, 2.8vw, 1.85rem);
+  font-weight: 900;
+  letter-spacing: 0.06em;
+  cursor: pointer;
+  box-shadow: 0 0.5rem 2rem var(--fpv-cyan-glow);
+  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.2s ease;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.fpv-lap-timer-giant-btn:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 0.75rem 2.5rem var(--fpv-cyan-glow);
+}
+
+.fpv-lap-timer-giant-btn:active:not(:disabled) {
+  transform: scale(0.98);
+  box-shadow: 0 0.2rem 1rem var(--fpv-cyan-glow);
+}
+
+.fpv-lap-timer-giant-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
+
+.fpv-lap-timer-btn-countdown-active {
+  border-color: var(--fpv-amber);
+  background: var(--fpv-amber);
+  animation: fpv-lap-timer-pulse 0.5s ease infinite alternate;
+}
+
+@keyframes fpv-lap-timer-pulse {
+  from {
+    transform: scale(1);
+    opacity: 0.85;
+  }
+  to {
+    transform: scale(1.02);
+    opacity: 1;
+  }
+}
+
+.fpv-lap-timer-hint {
+  text-align: center;
+  font-size: 0.78rem;
+  font-weight: 600;
+  color: var(--fpv-muted);
+}
+
+.fpv-lap-timer-controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  justify-content: center;
+}
+
+.fpv-lap-timer-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
+  padding: 0.65rem 1.35rem;
+  border: 1px solid var(--fpv-border);
+  border-radius: 0.65rem;
+  background: var(--fpv-bg-inner);
+  color: var(--fpv-text);
+  font-size: 0.88rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: border-color 0.2s, background 0.2s;
+}
+
+.fpv-lap-timer-btn:hover:not(:disabled) {
+  border-color: var(--fpv-cyan);
+  background: var(--fpv-bg-subtle);
+}
+
+.fpv-lap-timer-btn-primary {
+  border-color: var(--fpv-emerald);
+  background: var(--fpv-emerald);
+  color: #fff;
+  box-shadow: 0 0.35rem 1.25rem var(--fpv-emerald-glow);
+}
+
+.fpv-lap-timer-btn-primary:hover:not(:disabled) {
+  background: #047857;
+  border-color: #047857;
+}
+
+.fpv-lap-timer-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.fpv-lap-timer-telemetry-deck {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1.25rem;
+  border: 1px solid var(--fpv-border);
+  border-radius: 1rem;
+  background: var(--fpv-bg-subtle);
+}
+
+.fpv-lap-timer-telemetry-status-row {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.fpv-lap-timer-consistency-chip {
+  border-color: var(--fpv-emerald);
+  color: var(--fpv-emerald);
+}
+
+.fpv-lap-timer-rating-elite {
+  border-color: var(--fpv-emerald);
+  color: var(--fpv-emerald);
+}
+
+.fpv-lap-timer-rating-pro {
+  border-color: var(--fpv-cyan);
+  color: var(--fpv-cyan);
+}
+
+.fpv-lap-timer-rating-club {
+  border-color: var(--fpv-amber);
+  color: var(--fpv-amber);
+}
+
+.fpv-lap-timer-rating-novice {
+  border-color: var(--fpv-muted);
+  color: var(--fpv-muted);
+}
+
+.fpv-lap-timer-telemetry-grid {
+  display: grid;
+  grid-template-columns: 1.15fr 0.85fr;
+  gap: 1rem;
+}
+
+@media (max-width: 720px) {
+  .fpv-lap-timer-telemetry-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.fpv-lap-timer-racetrack-box,
+.fpv-lap-timer-pace-box {
+  border: 1px solid var(--fpv-border);
+  border-radius: 0.75rem;
+  background: var(--fpv-bg-inner);
+  padding: 1rem;
+}
+
+.fpv-lap-timer-racetrack-svg {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+.fpv-lap-timer-track-bg {
+  stroke: var(--fpv-border);
+  stroke-width: 10px;
+}
+
+.fpv-lap-timer-track-active {
+  stroke-width: 10px;
+  stroke-linecap: round;
+  transition: stroke-dashoffset 0.4s ease;
+}
+
+.fpv-lap-timer-gate {
+  fill: var(--fpv-bg-card);
+  stroke-width: 3px;
+}
+
+.fpv-lap-timer-gate-sf {
+  stroke: var(--fpv-emerald);
+  fill: var(--fpv-emerald);
+}
+
+.fpv-lap-timer-gate-sector {
+  stroke: var(--fpv-cyan);
+}
+
+.fpv-lap-timer-gate-label {
+  fill: var(--fpv-muted);
+  font-size: 8px;
+  font-weight: 700;
+  text-anchor: middle;
+}
+
+.fpv-lap-timer-drone-center {
+  text-anchor: middle;
+}
+
+.fpv-lap-timer-center-time {
+  fill: var(--fpv-cyan);
+  font-size: 20px;
+  font-weight: 900;
+  letter-spacing: 0.05em;
+}
+
+.fpv-lap-timer-center-sub {
+  fill: var(--fpv-muted);
+  font-size: 9px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.fpv-lap-timer-center-speed {
+  fill: var(--fpv-emerald);
+  font-size: 11px;
+  font-weight: 800;
+}
+
+.fpv-lap-timer-pace-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.75rem;
+}
+
+.fpv-lap-timer-pace-header h4 {
+  margin: 0;
+  font-size: 0.88rem;
+  font-weight: 700;
+}
+
+.fpv-lap-timer-fastest-pill {
+  font-size: 0.75rem;
+  font-weight: 800;
+  color: var(--fpv-cyan);
+}
+
+.fpv-lap-timer-pace-chart {
+  overflow-x: auto;
+}
+
+.fpv-lap-timer-bars-svg {
+  width: 100%;
+  height: 104px;
+  display: block;
+}
+
+.fpv-lap-timer-chart-axis {
+  stroke: var(--fpv-border);
+  stroke-width: 1.5px;
+}
+
+.fpv-lap-timer-bar-normal {
+  fill: var(--fpv-cyan);
+  opacity: 0.75;
+  transition: height 0.3s ease, y 0.3s ease;
+}
+
+.fpv-lap-timer-bar-best {
+  fill: var(--fpv-emerald);
+  opacity: 1;
+}
+
+.fpv-lap-timer-bar-label {
+  fill: var(--fpv-muted);
+  font-size: 9px;
+  font-weight: 700;
+  text-anchor: middle;
+}
+
+.fpv-lap-timer-empty-notice {
+  padding: 1.75rem 1rem;
+  text-align: center;
+  font-size: 0.82rem;
+  color: var(--fpv-muted);
+}
+
+.fpv-lap-timer-table-wrap {
+  overflow-x: auto;
+  border: 1px solid var(--fpv-border);
+  border-radius: 0.75rem;
+}
+
+.fpv-lap-timer-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.86rem;
+  text-align: left;
+}
+
+.fpv-lap-timer-table th {
+  padding: 0.65rem 0.85rem;
+  border-bottom: 1px solid var(--fpv-border);
+  background: var(--fpv-bg-inner);
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--fpv-muted);
+}
+
+.fpv-lap-timer-table td {
+  padding: 0.65rem 0.85rem;
+  border-bottom: 1px solid var(--fpv-border-subtle);
+}
+
+.fpv-lap-timer-tr:hover {
+  background: var(--fpv-bg-inner);
+}
+
+.fpv-lap-timer-row-best {
+  background: rgba(16, 185, 129, 0.08);
+}
+
+.fpv-lap-timer-lap-tag {
+  font-weight: 800;
+}
+
+.fpv-lap-timer-best-mini {
+  display: inline-block;
+  margin-left: 0.4rem;
+  padding: 0.15rem 0.35rem;
+  border-radius: 4px;
+  background: var(--fpv-emerald);
+  color: #fff;
+  font-size: 0.65rem;
+  font-weight: 800;
+}
+
+.fpv-lap-timer-delta-pill {
+  display: inline-block;
+  padding: 0.2rem 0.45rem;
+  border-radius: 4px;
+  font-size: 0.8rem;
+  font-weight: 700;
+}
+
+.fpv-lap-timer-delta-best {
+  color: var(--fpv-emerald);
+}
+
+.fpv-lap-timer-delta-good {
+  color: var(--fpv-cyan);
+}
+
+.fpv-lap-timer-delta-slow {
+  color: var(--fpv-rose);
+}
+
+.fpv-lap-timer-subtle {
+  color: var(--fpv-muted);
+}
+
+.fpv-lap-timer-table-empty {
+  padding: 1.5rem;
+  text-align: center;
+  border: 1px dashed var(--fpv-border);
+  border-radius: 0.75rem;
+  color: var(--fpv-muted);
+  font-size: 0.84rem;
+}
+
+.fpv-lap-timer-footer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  align-items: center;
+  justify-content: flex-end;
+  padding-top: 0.25rem;
+}
+
+.fpv-lap-timer-notice {
+  font-size: 0.82rem;
+  font-weight: 700;
+  color: var(--fpv-emerald);
+}
+
+.fpv-lap-timer-drone-racer {
+  pointer-events: none;
+}
+
+.fpv-lap-timer-drone-arm {
+  stroke: var(--fpv-text);
+  stroke-width: 1.6px;
+  stroke-linecap: round;
+}
+
+.fpv-lap-timer-drone-motor {
+  fill: var(--fpv-border);
+  stroke: var(--fpv-text);
+  stroke-width: 0.8px;
+}
+
+.fpv-lap-timer-drone-rotor-blur {
+  fill: var(--fpv-cyan);
+  opacity: 0.45;
+  stroke: var(--fpv-cyan);
+  stroke-width: 0.5px;
+}
+
+.fpv-lap-timer-drone-body {
+  fill: var(--fpv-bg);
+  stroke: var(--fpv-cyan);
+  stroke-width: 1.2px;
+}
+
+.fpv-lap-timer-drone-cam {
+  fill: #fff;
+}
+
+.fpv-lap-timer-drone-led {
+  fill: var(--fpv-emerald);
+}