@jjlmoya/utils-chrono 1.8.0 → 1.10.0

package/src/tool/telemeter-calculator/audio.ts

@@ -0,0 +1,59 @@
+let audioCtx: AudioContext | null = null;
+
+function initAudio() {
+  if (!audioCtx) {
+    audioCtx = new (window.AudioContext || (window as Window & { webkitAudioContext?: typeof AudioContext }).webkitAudioContext)();
+  }
+}
+
+export function playPusherSound() {
+  initAudio();
+  if (!audioCtx) return;
+
+  const osc = audioCtx.createOscillator();
+  const gainNode = audioCtx.createGain();
+
+  osc.connect(gainNode);
+  gainNode.connect(audioCtx.destination);
+
+  osc.type = 'sine';
+  osc.frequency.setValueAtTime(800, audioCtx.currentTime);
+  osc.frequency.exponentialRampToValueAtTime(100, audioCtx.currentTime + 0.05);
+
+  gainNode.gain.setValueAtTime(0.08, audioCtx.currentTime);
+  gainNode.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.05);
+
+  osc.start();
+  osc.stop(audioCtx.currentTime + 0.05);
+}
+
+export function playThunderSound() {
+  initAudio();
+  if (!audioCtx) return;
+
+  const bufferSize = audioCtx.sampleRate * 1.5;
+  const buffer = audioCtx.createBuffer(1, bufferSize, audioCtx.sampleRate);
+  const data = buffer.getChannelData(0);
+
+  for (let i = 0; i < bufferSize; i++) {
+    data[i] = Math.random() * 2 - 1;
+  }
+
+  const noiseNode = audioCtx.createBufferSource();
+  noiseNode.buffer = buffer;
+
+  const lowpass = audioCtx.createBiquadFilter();
+  lowpass.type = 'lowpass';
+  lowpass.frequency.setValueAtTime(80, audioCtx.currentTime);
+  lowpass.frequency.linearRampToValueAtTime(30, audioCtx.currentTime + 1.2);
+
+  const gainNode = audioCtx.createGain();
+  gainNode.gain.setValueAtTime(0.3, audioCtx.currentTime);
+  gainNode.gain.linearRampToValueAtTime(0.001, audioCtx.currentTime + 1.2);
+
+  noiseNode.connect(lowpass);
+  lowpass.connect(gainNode);
+  gainNode.connect(audioCtx.destination);
+
+  noiseNode.start();
+}

package/src/tool/telemeter-calculator/bibliography.astro

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

package/src/tool/telemeter-calculator/bibliography.ts

@@ -0,0 +1,16 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'Speed of Sound in Air - Physics LibreTexts',
+    url: 'https://phys.libretexts.org/Bookshelves/University_Physics/University_Physics_(OpenStax)/Book%3A_University_Physics_I_-_Mechanics_Sound_Oscillations_and_Waves_(OpenStax)/17%3A_Sound/17.03%3A_Speed_of_Sound',
+  },
+  {
+    name: 'A Deep Dive into Your Watch\'s Bezel',
+    url: 'https://www.brigadewatches.com/blogs/news/part-1-the-bezel-of-the-watch',
+  },
+  {
+    name: 'How to Use a Tachymeter, Telemeter, and Pulsations Scale - Craft + Tailored',
+    url: 'https://journal.craftandtailored.com/how-to-use-a-tachymeter-telemeter-and-pulsations-scale/',
+  },
+];

package/src/tool/telemeter-calculator/client.ts

@@ -0,0 +1,269 @@
+import { playPusherSound, playThunderSound } from './audio';
+import { getSpeedOfSound, formatDistance } from './helpers';
+
+const pusherStart = document.getElementById('pusher-start') as HTMLElement;
+const pusherReset = document.getElementById('pusher-reset') as HTMLElement;
+const btnFlash = document.getElementById('btn-flash') as HTMLButtonElement;
+const btnSound = document.getElementById('btn-sound') as HTMLButtonElement;
+const btnReset = document.getElementById('btn-reset') as HTMLButtonElement;
+
+const tempSlider = document.getElementById('temp-slider') as HTMLInputElement;
+const tempDisplay = document.getElementById('temp-display') as HTMLElement;
+const speedDisplay = document.getElementById('speed-display') as HTMLElement;
+
+const resultPrimary = document.getElementById('result-primary') as HTMLElement;
+const resultSecondary = document.getElementById('result-secondary') as HTMLElement;
+const resultTime = document.getElementById('result-time') as HTMLElement;
+
+const dialDigitalTime = document.getElementById('dial-digital-time') as SVGTextElement;
+const dialAmbientIndicator = document.getElementById('dial-ambient-indicator') as SVGTextElement;
+const secondsHandGroup = document.getElementById('seconds-hand-group') as SVGGElement;
+
+const lightningOverlay = document.getElementById('lightning-overlay') as HTMLElement;
+const soundRipple = document.getElementById('sound-ripple') as HTMLElement;
+
+const historyListContainer = document.getElementById('history-list') as HTMLElement;
+const emptyHistoryEl = document.getElementById('empty-history') as HTMLElement;
+const ticksG = document.getElementById('tel-ticks') as SVGElement;
+
+const unitButtons = document.querySelectorAll('.tel-chip-btn');
+
+let isRunning = false;
+let startTime = 0;
+let elapsedTime = 0;
+let rafId = 0;
+let tempCelsius = 20;
+let unitSystem = 'metric';
+
+interface HistoryItem {
+  timestamp: string;
+  distance: string;
+  time: string;
+}
+
+function buildTicks() {
+  if (!ticksG) return;
+  ticksG.innerHTML = '';
+  const CX = 135;
+  const CY = 135;
+  const R_IN = 88;
+
+  for (let i = 0; i < 60; i++) {
+    const angle = (i * 6) * Math.PI / 180;
+    const isMajor = i % 5 === 0;
+    const length = isMajor ? 6 : 3;
+
+    const x1 = CX + R_IN * Math.sin(angle);
+    const y1 = CY - R_IN * Math.cos(angle);
+    const x2 = CX + (R_IN + length) * Math.sin(angle);
+    const y2 = CY - (R_IN + length) * Math.cos(angle);
+
+    const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+    line.setAttribute('x1', String(x1));
+    line.setAttribute('y1', String(y1));
+    line.setAttribute('x2', String(x2));
+    line.setAttribute('y2', String(y2));
+    line.classList.add(isMajor ? 'tel-tick-major' : 'tel-tick-minor');
+    ticksG.appendChild(line);
+  }
+}
+
+function updateEnvironmentalReadouts() {
+  const speed = getSpeedOfSound(tempCelsius);
+  if (unitSystem === 'metric') {
+    speedDisplay.textContent = `${speed.toFixed(1)} m/s`;
+    dialAmbientIndicator.textContent = `${tempCelsius.toFixed(1)}°C`;
+  } else {
+    const speedFt = speed * 3.28084;
+    speedDisplay.textContent = `${speedFt.toFixed(1)} ft/s`;
+    const tempFahr = (tempCelsius * 9/5) + 32;
+    dialAmbientIndicator.textContent = `${tempFahr.toFixed(1)}°F`;
+  }
+}
+
+function updateCalculations() {
+  const result = formatDistance(elapsedTime, tempCelsius, unitSystem);
+  resultTime.textContent = result.timeText;
+  dialDigitalTime.textContent = `${elapsedTime.toFixed(1)}s`;
+  resultPrimary.textContent = result.primary;
+  resultSecondary.textContent = result.secondary;
+
+  const handAngle = (elapsedTime * 6) % 360;
+  secondsHandGroup.style.transform = `rotate(${handAngle}deg)`;
+}
+
+function tick(timestamp: number) {
+  if (!startTime) startTime = timestamp;
+  elapsedTime = (timestamp - startTime) / 1000;
+  updateCalculations();
+  rafId = requestAnimationFrame(tick);
+}
+
+function startTimer() {
+  playPusherSound();
+  if (isRunning) return;
+  isRunning = true;
+  startTime = 0;
+  elapsedTime = 0;
+
+  btnFlash.disabled = true;
+  btnSound.disabled = false;
+  btnReset.disabled = true;
+  pusherReset.classList.add('disabled');
+
+  lightningOverlay.classList.add('flash-active');
+  setTimeout(() => {
+    lightningOverlay.classList.remove('flash-active');
+  }, 400);
+
+  rafId = requestAnimationFrame(tick);
+}
+
+function stopTimer() {
+  playPusherSound();
+  playThunderSound();
+  if (!isRunning) return;
+  isRunning = false;
+  cancelAnimationFrame(rafId);
+
+  btnFlash.disabled = false;
+  btnSound.disabled = true;
+  btnReset.disabled = false;
+  pusherReset.classList.remove('disabled');
+
+  soundRipple.classList.add('ripple-active');
+  setTimeout(() => {
+    soundRipple.classList.remove('ripple-active');
+  }, 800);
+
+  addHistoryItem();
+}
+
+function resetTimer() {
+  playPusherSound();
+  if (isRunning) {
+    isRunning = false;
+    cancelAnimationFrame(rafId);
+  }
+  elapsedTime = 0;
+  startTime = 0;
+  updateCalculations();
+
+  btnFlash.disabled = false;
+  btnSound.disabled = true;
+  btnReset.disabled = true;
+  pusherReset.classList.add('disabled');
+}
+
+function addHistoryItem() {
+  const item: HistoryItem = {
+    timestamp: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' }),
+    distance: resultPrimary.textContent || '0.00 km',
+    time: `${elapsedTime.toFixed(2)}s`
+  };
+
+  const list = getHistory();
+  list.unshift(item);
+  if (list.length > 5) {
+    list.pop();
+  }
+  localStorage.setItem('telemeter_history', JSON.stringify(list));
+  renderHistory();
+}
+
+function getHistory(): HistoryItem[] {
+  const data = localStorage.getItem('telemeter_history');
+  return data ? JSON.parse(data) : [];
+}
+
+function renderHistory() {
+  const items = getHistory();
+  if (items.length === 0) {
+    emptyHistoryEl.style.display = 'block';
+    const oldItems = historyListContainer.querySelectorAll('.tel-history-item');
+    oldItems.forEach(el => el.remove());
+    return;
+  }
+
+  emptyHistoryEl.style.display = 'none';
+  const oldItems = historyListContainer.querySelectorAll('.tel-history-item');
+  oldItems.forEach(el => el.remove());
+
+  items.forEach(item => {
+    const row = document.createElement('div');
+    row.className = 'tel-history-item';
+
+    const timeSpan = document.createElement('span');
+    timeSpan.className = 'tel-history-item-time';
+    timeSpan.textContent = item.timestamp;
+
+    const elapsedSpan = document.createElement('span');
+    elapsedSpan.className = 'tel-history-item-elapsed';
+    elapsedSpan.textContent = item.time;
+
+    const distSpan = document.createElement('span');
+    distSpan.className = 'tel-history-item-dist';
+    distSpan.textContent = item.distance;
+
+    row.appendChild(timeSpan);
+    row.appendChild(elapsedSpan);
+    row.appendChild(distSpan);
+
+    historyListContainer.appendChild(row);
+  });
+}
+
+pusherStart.addEventListener('click', () => {
+  if (pusherStart.classList.contains('disabled')) return;
+  if (isRunning) {
+    stopTimer();
+  } else {
+    startTimer();
+  }
+});
+
+pusherReset.addEventListener('click', () => {
+  if (pusherReset.classList.contains('disabled')) return;
+  resetTimer();
+});
+
+btnFlash.addEventListener('click', startTimer);
+btnSound.addEventListener('click', stopTimer);
+btnReset.addEventListener('click', resetTimer);
+
+tempSlider.addEventListener('input', (e) => {
+  tempCelsius = parseFloat((e.target as HTMLInputElement).value);
+  if (unitSystem === 'metric') {
+    tempDisplay.textContent = `${tempCelsius}°C`;
+  } else {
+    const tempFahr = (tempCelsius * 9/5) + 32;
+    tempDisplay.textContent = `${tempFahr.toFixed(0)}°F`;
+  }
+  updateEnvironmentalReadouts();
+  updateCalculations();
+});
+
+unitButtons.forEach(btn => {
+  btn.addEventListener('click', () => {
+    unitButtons.forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+    unitSystem = btn.getAttribute('data-unit') || 'metric';
+
+    const tempVal = parseFloat(tempSlider.value);
+    if (unitSystem === 'metric') {
+      tempDisplay.textContent = `${tempVal}°C`;
+    } else {
+      const tempFahr = (tempVal * 9/5) + 32;
+      tempDisplay.textContent = `${tempFahr.toFixed(0)}°F`;
+    }
+
+    updateEnvironmentalReadouts();
+    updateCalculations();
+  });
+});
+
+buildTicks();
+updateEnvironmentalReadouts();
+updateCalculations();
+renderHistory();
+pusherReset.classList.add('disabled');

package/src/tool/telemeter-calculator/component.astro

@@ -0,0 +1,15 @@
+---
+import TelemeterPanel from './components/TelemeterPanel.astro';
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="tool-main-card" data-ui={JSON.stringify(ui)}>
+  <TelemeterPanel labels={ui} />
+</div>
+
+<script src="./client.ts"></script>

package/src/tool/telemeter-calculator/components/TelemeterPanel.astro

@@ -0,0 +1,224 @@
+---
+interface Props {
+  labels: Record<string, string>;
+}
+
+const { labels } = Astro.props;
+---
+
+<div class="tel-card">
+  <div class="tel-top">
+    <h3 class="tel-h">{labels.title}</h3>
+  </div>
+
+  <div class="tel-grid">
+    <div class="tel-visualizer-section">
+      <div class="tel-lightning-overlay" id="lightning-overlay"></div>
+      <div class="tel-ripple" id="sound-ripple"></div>
+
+      <div class="tel-watch-container">
+        <svg class="tel-svg-dial" viewBox="0 0 270 270" id="tel-svg">
+          <defs>
+            <linearGradient id="tel-case-grad" x1="0%" y1="0%" x2="100%" y2="100%">
+              <stop offset="0%" stop-color="#9ca3af" />
+              <stop offset="50%" stop-color="#4b5563" />
+              <stop offset="100%" stop-color="#1f2937" />
+            </linearGradient>
+            <radialGradient id="tel-dial-grad" cx="50%" cy="50%" r="50%">
+              <stop offset="0%" stop-color="#1e293b" />
+              <stop offset="70%" stop-color="#0f172a" />
+              <stop offset="100%" stop-color="#020617" />
+            </radialGradient>
+            <linearGradient id="tel-metal-grad" x1="0%" y1="0%" x2="0%" y2="100%">
+              <stop offset="0%" stop-color="#f3f4f6" />
+              <stop offset="30%" stop-color="#d1d5db" />
+              <stop offset="70%" stop-color="#9ca3af" />
+              <stop offset="100%" stop-color="#4b5563" />
+            </linearGradient>
+            <linearGradient id="tel-metal-grad-dark" x1="0%" y1="0%" x2="0%" y2="100%">
+              <stop offset="0%" stop-color="#9ca3af" />
+              <stop offset="100%" stop-color="#374151" />
+            </linearGradient>
+            <marker id="tel-arrow" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
+              <path d="M 0 0 L 10 5 L 0 10 z" fill="var(--accent)" />
+            </marker>
+            <marker id="tel-arrow-gray" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
+              <path d="M 0 0 L 10 5 L 0 10 z" fill="var(--text-base)" fill-opacity="0.4" />
+            </marker>
+          </defs>
+
+          <circle class="tel-case-bg" cx="135" cy="135" r="112" />
+          <circle class="tel-bezel-bg" cx="135" cy="135" r="102" />
+          <circle class="tel-bezel-inner" cx="135" cy="135" r="82" />
+          <circle class="tel-dial-face" cx="135" cy="135" r="80" />
+
+          <g id="pusher-start" class="tel-svg-pusher" transform="translate(135, 135) rotate(-33)">
+            <rect x="110" y="-5" width="12" height="10" fill="url(#tel-metal-grad-dark)" stroke="#374151" stroke-width="0.5" />
+            <rect x="122" y="-7" width="6" height="14" rx="1.5" fill="url(#tel-metal-grad)" stroke="#1f2937" stroke-width="0.5" />
+            <rect x="100" y="-20" width="35" height="40" fill="transparent" style="cursor: pointer;" />
+          </g>
+
+          <g id="pusher-reset" class="tel-svg-pusher" transform="translate(135, 135) rotate(33)">
+            <rect x="110" y="-5" width="12" height="10" fill="url(#tel-metal-grad-dark)" stroke="#374151" stroke-width="0.5" />
+            <rect x="122" y="-7" width="6" height="14" rx="1.5" fill="url(#tel-metal-grad)" stroke="#1f2937" stroke-width="0.5" />
+            <rect x="100" y="-20" width="35" height="40" fill="transparent" style="cursor: pointer;" />
+          </g>
+
+          <g class="tel-svg-crown" transform="translate(135, 135)">
+            <rect x="110" y="-6" width="8" height="12" fill="url(#tel-metal-grad-dark)" stroke="#374151" stroke-width="0.5" />
+            <rect x="118" y="-10" width="8" height="20" rx="1.5" fill="url(#tel-metal-grad)" stroke="#1f2937" stroke-width="0.5" />
+            <line x1="120" y1="-8" x2="120" y2="8" stroke="#4b5563" stroke-width="0.5" />
+            <line x1="122" y1="-8" x2="122" y2="8" stroke="#4b5563" stroke-width="0.5" />
+            <line x1="124" y1="-8" x2="124" y2="8" stroke="#4b5563" stroke-width="0.5" />
+          </g>
+
+          <text class="tel-dial-brand" x="135" y="105" text-anchor="middle">TELEMETER</text>
+          <text class="tel-dial-subbrand" x="135" y="114" text-anchor="middle">KM (OUTER) & MI (INNER)</text>
+
+          <g id="tel-ticks"></g>
+
+          <text class="tel-bezel-label-km" x="135" y="44" transform="rotate(17.5, 135, 135)">1k</text>
+          <text class="tel-bezel-label-km" x="135" y="44" transform="rotate(35, 135, 135)">2k</text>
+          <text class="tel-bezel-label-km" x="135" y="44" transform="rotate(52.4, 135, 135)">3k</text>
+          <text class="tel-bezel-label-km" x="135" y="44" transform="rotate(70, 135, 135)">4k</text>
+          <text class="tel-bezel-label-km" x="135" y="44" transform="rotate(87.4, 135, 135)">5k</text>
+          <text class="tel-bezel-label-km" x="135" y="44" transform="rotate(174.9, 135, 135)">10k</text>
+          <text class="tel-bezel-label-km" x="135" y="44" transform="rotate(262, 135, 135)">15k</text>
+          <text class="tel-bezel-label-km" x="135" y="44" transform="rotate(349.5, 135, 135)">20k</text>
+
+          <text class="tel-bezel-label-mi" x="135" y="60" transform="rotate(28.1, 135, 135)">1m</text>
+          <text class="tel-bezel-label-mi" x="135" y="60" transform="rotate(56.3, 135, 135)">2m</text>
+          <text class="tel-bezel-label-mi" x="135" y="60" transform="rotate(84.4, 135, 135)">3m</text>
+          <text class="tel-bezel-label-mi" x="135" y="60" transform="rotate(112.5, 135, 135)">4m</text>
+          <text class="tel-bezel-label-mi" x="135" y="60" transform="rotate(140.7, 135, 135)">5m</text>
+          <text class="tel-bezel-label-mi" x="135" y="60" transform="rotate(281.4, 135, 135)">10m</text>
+
+          <text class="tel-helper-text" x="175" y="16" text-anchor="middle">START/STOP</text>
+          <path d="M 180 20 Q 220 20 236 50" fill="none" stroke="var(--accent)" stroke-width="1.25" stroke-dasharray="2,2" marker-end="url(#tel-arrow)" />
+
+          <text class="tel-helper-text tel-helper-text-gray" x="175" y="258" text-anchor="middle">RESET</text>
+          <path d="M 180 254 Q 220 254 236 224" fill="none" stroke="var(--text-base)" stroke-opacity="0.4" stroke-width="1.25" stroke-dasharray="2,2" marker-end="url(#tel-arrow-gray)" />
+
+          <text class="tel-digital-time" id="dial-digital-time" x="135" y="170" text-anchor="middle">00.0s</text>
+          <text class="tel-ambient-indicator" id="dial-ambient-indicator" x="135" y="190" text-anchor="middle">20.0°C</text>
+
+          <g class="tel-seconds-hand-group" id="seconds-hand-group">
+            <line class="tel-seconds-hand" x1="135" y1="135" x2="135" y2="40" />
+            <line class="tel-seconds-hand-counterweight" x1="135" y1="135" x2="135" y2="148" />
+            <circle class="tel-hand-center" cx="135" cy="135" r="5" />
+            <circle class="tel-center-pin" cx="135" cy="135" r="2" />
+          </g>
+        </svg>
+      </div>
+    </div>
+
+    <div class="tel-controls-section">
+      <div class="tel-trigger-dashboard">
+        <button type="button" class="tel-trigger-pad pad-flash" id="btn-flash">
+          <div class="pad-icon-wrap">
+            <svg class="pad-icon" viewBox="0 0 24 24" width="18" height="18">
+              <path d="M7 2v11h3v9l7-12h-4l4-8H7z" fill="currentColor"></path>
+            </svg>
+          </div>
+          <div class="pad-content">
+            <span class="pad-title">{labels.triggerFlash}</span>
+            <span class="pad-desc">See visual event</span>
+          </div>
+        </button>
+
+        <button type="button" class="tel-trigger-pad pad-sound" id="btn-sound" disabled>
+          <div class="pad-icon-wrap">
+            <svg class="pad-icon" viewBox="0 0 24 24" width="18" height="18">
+              <path d="M14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.07-.91 7-4.49 7-8.77s-2.93-7.86-7-8.77zm2.5 8.77c0-1.77-1-3.29-2.5-4.03v8.05c1.5-.73 2.5-2.25 2.5-4.02zM3 9v6h4l5 5V4L7 9H3z" fill="currentColor"></path>
+            </svg>
+          </div>
+          <div class="pad-content">
+            <span class="pad-title">{labels.triggerSound}</span>
+            <span class="pad-desc">Hear acoustic event</span>
+          </div>
+        </button>
+      </div>
+
+      <div class="tel-reset-bar">
+        <button type="button" class="tel-reset-btn" id="btn-reset" disabled>
+          <svg viewBox="0 0 24 24" width="14" height="14">
+            <path d="M17.65 6.35A7.958 7.958 0 0012 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0112 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" fill="currentColor"></path>
+          </svg>
+          <span>{labels.reset}</span>
+        </button>
+      </div>
+
+      <div class="tel-setting-panel">
+        <div class="tel-field">
+          <div class="tel-label-row">
+            <span class="tel-label">{labels.unitSystem}</span>
+            <div class="tel-unit-chips">
+              <button type="button" class="tel-chip-btn active" data-unit="metric">{labels.metric}</button>
+              <button type="button" class="tel-chip-btn" data-unit="imperial">{labels.imperial}</button>
+            </div>
+          </div>
+        </div>
+
+        <div class="tel-field">
+          <div class="tel-label-row">
+            <span class="tel-label">{labels.temperature}</span>
+            <span class="tel-label-value" id="temp-display">20°C</span>
+          </div>
+          <div class="tel-slider-wrapper">
+            <input type="range" class="tel-slider" id="temp-slider" min="-20" max="50" value="20" step="1" />
+          </div>
+        </div>
+
+        <div class="tel-field">
+          <span class="tel-label">{labels.speedOfSound}</span>
+          <span class="tel-speed-badge" id="speed-display">343.3 m/s</span>
+        </div>
+      </div>
+
+      <div class="tel-results-panel">
+        <div class="tel-results-primary">
+          <span class="tel-label">{labels.distanceResult}</span>
+          <span class="tel-results-val" id="result-primary">0.00 km</span>
+          <span class="tel-results-subval" id="result-secondary">0 m</span>
+        </div>
+        <div class="tel-results-details">
+          <div class="tel-detail-item">
+            <span class="tel-detail-lbl">{labels.elapsedTime}</span>
+            <span class="tel-detail-val" id="result-time">0.00 s</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="tel-steps-section">
+        <div class="tel-step-row">
+          <div class="tel-step-marker">1</div>
+          <span class="tel-step-text">{labels.step1}</span>
+        </div>
+        <div class="tel-step-row">
+          <div class="tel-step-marker">2</div>
+          <span class="tel-step-text">{labels.step2}</span>
+        </div>
+        <div class="tel-step-row">
+          <div class="tel-step-marker">3</div>
+          <span class="tel-step-text">{labels.step3}</span>
+        </div>
+      </div>
+
+      <div class="tel-tip-row">
+        <svg class="tel-tip-icon" viewBox="0 0 24 24" width="16" height="16">
+          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="currentColor"></path>
+        </svg>
+        <span class="tel-tip-text">{labels.tipContent}</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="tel-history-section">
+    <div class="tel-history-header">
+      <h4 class="tel-history-title">{labels.historyTitle}</h4>
+    </div>
+    <div class="tel-history-list" id="history-list">
+      <div class="tel-empty-history" id="empty-history">{labels.noHistory}</div>
+    </div>
+  </div>
+</div>

package/src/tool/telemeter-calculator/entry.ts

@@ -0,0 +1,53 @@
+import type { ChronoToolEntry, ToolLocaleContent } from '../../types';
+
+export type TelemeterCalculatorUI = {
+  title: string;
+  triggerFlash: string;
+  triggerSound: string;
+  stop: string;
+  reset: string;
+  settings: string;
+  unitSystem: string;
+  metric: string;
+  imperial: string;
+  temperature: string;
+  speedOfSound: string;
+  distanceResult: string;
+  elapsedTime: string;
+  historyTitle: string;
+  noHistory: string;
+  sec: string;
+  km: string;
+  m: string;
+  mi: string;
+  ft: string;
+  step1: string;
+  step2: string;
+  step3: string;
+  tipTitle: string;
+  tipContent: string;
+};
+
+export type TelemeterCalculatorLocaleContent = ToolLocaleContent<TelemeterCalculatorUI>;
+
+export const telemeterCalculator: ChronoToolEntry<TelemeterCalculatorUI> = {
+  id: 'telemeter-calculator',
+  icons: { bg: 'mdi:weather-lightning', fg: 'mdi:waveform' },
+  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),
+  },
+};