@jjlmoya/utils-hardware 1.14.0 → 1.16.0

package/src/tool/mousePollingTest/i18n/fr.ts

@@ -1,6 +1,7 @@
 import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { TestRatonUI } from '../ui';
+import { bibliography } from '../bibliography';
 
 const slug = 'test-taux-sondage-souris';
 const title = 'Test du Taux de Sondage de la Souris en Ligne';
@@ -87,21 +88,10 @@ export const content: ToolLocaleContent<TestRatonUI> = {
   slug,
   title,
   description,
-  faqTitle: 'Questions Fréquentes',
   faq: faqData,
-  bibliographyTitle: 'Références',
-  bibliography: [
-    {
-      name: 'Gamepad Polling Rate — Logitech',
-      url: 'https://www.logitechg.com/en-us/innovation/delta-zero.html',
-    },
-    {
-      name: 'USB HID Polling Rate — USB Implementers Forum',
-      url: 'https://www.usb.org/hid',
-    },
-  ],
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
+  bibliography,
   seo: [
     { type: 'title', text: 'Guide Complet sur le Taux de Sondage', level: 2 },
     {

package/src/tool/mousePollingTest/i18n/id.ts

@@ -1,6 +1,7 @@
 import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { TestRatonUI } from '../ui';
+import { bibliography } from '../bibliography';
 
 const slug = 'tes-mouse-polling-rate-online';
 const title = 'Tes Mouse Polling Rate Online';
@@ -87,21 +88,10 @@ export const content: ToolLocaleContent<TestRatonUI> = {
   slug,
   title,
   description,
-  faqTitle: 'Pertanyaan yang Sering Diajukan',
   faq: faqData,
-  bibliographyTitle: 'Referensi',
-  bibliography: [
-    {
-      name: 'Gamepad Polling Rate — Logitech',
-      url: 'https://www.logitechg.com/en-us/innovation/delta-zero.html',
-    },
-    {
-      name: 'USB HID Polling Rate — USB Implementers Forum',
-      url: 'https://www.usb.org/hid',
-    },
-  ],
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
+  bibliography,
   seo: [
     { type: 'title', text: 'Panduan Definitif tentang Polling Rate', level: 2 },
     {

package/src/tool/mousePollingTest/i18n/it.ts

@@ -1,6 +1,7 @@
 import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { TestRatonUI } from '../ui';
+import { bibliography } from '../bibliography';
 
 const slug = 'test-polling-rate-mouse-online';
 const title = 'Test Polling Rate Mouse Online';
@@ -87,21 +88,10 @@ export const content: ToolLocaleContent<TestRatonUI> = {
   slug,
   title,
   description,
-  faqTitle: 'Domande Frequenti',
   faq: faqData,
-  bibliographyTitle: 'Riferimenti',
-  bibliography: [
-    {
-      name: 'Gamepad Polling Rate — Logitech',
-      url: 'https://www.logitechg.com/en-us/innovation/delta-zero.html',
-    },
-    {
-      name: 'USB HID Polling Rate — USB Implementers Forum',
-      url: 'https://www.usb.org/hid',
-    },
-  ],
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
+  bibliography,
   seo: [
     { type: 'title', text: 'Guida definitiva alla Polling Rate', level: 2 },
     {

package/src/tool/mousePollingTest/i18n/ja.ts

@@ -1,6 +1,7 @@
 import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { TestRatonUI } from '../ui';
+import { bibliography } from '../bibliography';
 
 const slug = 'mouse-polling-rate-test';
 const title = 'オンライン・マウス・ポーリングレートテスト';
@@ -87,21 +88,10 @@ export const content: ToolLocaleContent<TestRatonUI> = {
   slug,
   title,
   description,
-  faqTitle: 'よくある質問',
   faq: faqData,
-  bibliographyTitle: 'リファレンス',
-  bibliography: [
-    {
-      name: 'Gamepad Polling Rate — Logitech',
-      url: 'https://www.logitechg.com/en-us/innovation/delta-zero.html',
-    },
-    {
-      name: 'USB HID Polling Rate — USB Implementers Forum',
-      url: 'https://www.usb.org/hid',
-    },
-  ],
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
+  bibliography,
   seo: [
     { type: 'title', text: 'ポーリングレート完全ガイド', level: 2 },
     {

package/src/tool/mousePollingTest/i18n/ko.ts

@@ -1,6 +1,7 @@
 import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { TestRatonUI } from '../ui';
+import { bibliography } from '../bibliography';
 
 const slug = 'mouse-polling-rate-test';
 const title = '온라인 마우스 폴링 레이트 테스트';
@@ -87,21 +88,10 @@ export const content: ToolLocaleContent<TestRatonUI> = {
   slug,
   title,
   description,
-  faqTitle: '자주 묻는 질문',
   faq: faqData,
-  bibliographyTitle: '참조',
-  bibliography: [
-    {
-      name: 'Gamepad Polling Rate — Logitech',
-      url: 'https://www.logitechg.com/en-us/innovation/delta-zero.html',
-    },
-    {
-      name: 'USB HID Polling Rate — USB Implementers Forum',
-      url: 'https://www.usb.org/hid',
-    },
-  ],
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
+  bibliography,
   seo: [
     { type: 'title', text: '폴링 레이트에 대한 결정적 가이드', level: 2 },
     {

package/src/tool/mousePollingTest/i18n/nl.ts

@@ -1,6 +1,7 @@
 import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { TestRatonUI } from '../ui';
+import { bibliography } from '../bibliography';
 
 const slug = 'muis-polling-rate-test-online';
 const title = 'Online Muis Polling Rate Test';
@@ -87,21 +88,10 @@ export const content: ToolLocaleContent<TestRatonUI> = {
   slug,
   title,
   description,
-  faqTitle: 'Veelgestelde Vragen',
   faq: faqData,
-  bibliographyTitle: 'Referenties',
-  bibliography: [
-    {
-      name: 'Gamepad Polling Rate — Logitech',
-      url: 'https://www.logitechg.com/en-us/innovation/delta-zero.html',
-    },
-    {
-      name: 'USB HID Polling Rate — USB Implementers Forum',
-      url: 'https://www.usb.org/hid',
-    },
-  ],
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
+  bibliography,
   seo: [
     { type: 'title', text: 'Definitieve Gids voor Polling Rate', level: 2 },
     {

package/src/tool/mousePollingTest/i18n/pl.ts

@@ -1,6 +1,7 @@
 import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { TestRatonUI } from '../ui';
+import { bibliography } from '../bibliography';
 
 const slug = 'test-polling-rate-myszki-online';
 const title = 'Online Test Polling Rate Myszki';
@@ -87,21 +88,10 @@ export const content: ToolLocaleContent<TestRatonUI> = {
   slug,
   title,
   description,
-  faqTitle: 'Często Zadawane Pytania',
   faq: faqData,
-  bibliographyTitle: 'Referencje',
-  bibliography: [
-    {
-      name: 'Gamepad Polling Rate — Logitech',
-      url: 'https://www.logitechg.com/en-us/innovation/delta-zero.html',
-    },
-    {
-      name: 'USB HID Polling Rate — USB Implementers Forum',
-      url: 'https://www.usb.org/hid',
-    },
-  ],
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
+  bibliography,
   seo: [
     { type: 'title', text: 'Definitywny Przewodnik po Polling Rate', level: 2 },
     {

package/src/tool/mousePollingTest/i18n/pt.ts

@@ -1,6 +1,7 @@
 import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { TestRatonUI } from '../ui';
+import { bibliography } from '../bibliography';
 
 const slug = 'teste-polling-rate-rato-online';
 const title = 'Teste de Polling Rate de Rato Online';
@@ -87,21 +88,10 @@ export const content: ToolLocaleContent<TestRatonUI> = {
   slug,
   title,
   description,
-  faqTitle: 'Perguntas Frequentes',
   faq: faqData,
-  bibliographyTitle: 'Referências',
-  bibliography: [
-    {
-      name: 'Gamepad Polling Rate — Logitech',
-      url: 'https://www.logitechg.com/en-us/innovation/delta-zero.html',
-    },
-    {
-      name: 'USB HID Polling Rate — USB Implementers Forum',
-      url: 'https://www.usb.org/hid',
-    },
-  ],
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
+  bibliography,
   seo: [
     { type: 'title', text: 'Guia Definitivo do Polling Rate', level: 2 },
     {

package/src/tool/mousePollingTest/i18n/ru.ts

@@ -1,6 +1,7 @@
 import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { TestRatonUI } from '../ui';
+import { bibliography } from '../bibliography';
 
 const slug = 'test-polling-rate-myshi-online';
 const title = 'Онлайн тест частоты опроса мыши';
@@ -87,21 +88,10 @@ export const content: ToolLocaleContent<TestRatonUI> = {
   slug,
   title,
   description,
-  faqTitle: 'Часто задаваемые вопросы',
   faq: faqData,
-  bibliographyTitle: 'Ссылки',
-  bibliography: [
-    {
-      name: 'Gamepad Polling Rate — Logitech',
-      url: 'https://www.logitechg.com/en-us/innovation/delta-zero.html',
-    },
-    {
-      name: 'USB HID Polling Rate — USB Implementers Forum',
-      url: 'https://www.usb.org/hid',
-    },
-  ],
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
+  bibliography,
   seo: [
     { type: 'title', text: 'Полное руководство по частоте опроса мыши', level: 2 },
     {

package/src/tool/mousePollingTest/i18n/sv.ts

@@ -1,6 +1,7 @@
 import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { TestRatonUI } from '../ui';
+import { bibliography } from '../bibliography';
 
 const slug = 'mus-polling-rate-test-online';
 const title = 'Online Mus Polling Rate Test';
@@ -87,21 +88,10 @@ export const content: ToolLocaleContent<TestRatonUI> = {
   slug,
   title,
   description,
-  faqTitle: 'Vanliga frågor',
   faq: faqData,
-  bibliographyTitle: 'Referenser',
-  bibliography: [
-    {
-      name: 'Gamepad Polling Rate — Logitech',
-      url: 'https://www.logitechg.com/en-us/innovation/delta-zero.html',
-    },
-    {
-      name: 'USB HID Polling Rate — USB Implementers Forum',
-      url: 'https://www.usb.org/hid',
-    },
-  ],
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
+  bibliography,
   seo: [
     { type: 'title', text: 'Den definitiva guiden till Polling Rate', level: 2 },
     {

package/src/tool/mousePollingTest/i18n/tr.ts

@@ -1,6 +1,7 @@
 import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { TestRatonUI } from '../ui';
+import { bibliography } from '../bibliography';
 
 const slug = 'fare-polling-hizi-testi-online';
 const title = 'Çevrimiçi Fare Polling Rate Testi';
@@ -87,21 +88,10 @@ export const content: ToolLocaleContent<TestRatonUI> = {
   slug,
   title,
   description,
-  faqTitle: 'Sıkça Sorulan Sorular',
   faq: faqData,
-  bibliographyTitle: 'Referanslar',
-  bibliography: [
-    {
-      name: 'Gamepad Polling Rate — Logitech',
-      url: 'https://www.logitechg.com/en-us/innovation/delta-zero.html',
-    },
-    {
-      name: 'USB HID Polling Rate — USB Implementers Forum',
-      url: 'https://www.usb.org/hid',
-    },
-  ],
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
+  bibliography,
   seo: [
     { type: 'title', text: 'Polling Rate Hakkında Kesin Kılavuz', level: 2 },
     {

package/src/tool/mousePollingTest/i18n/zh.ts

@@ -1,6 +1,7 @@
 import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { TestRatonUI } from '../ui';
+import { bibliography } from '../bibliography';
 
 const slug = 'mouse-polling-rate-test';
 const title = '在线鼠标回报率测试';
@@ -87,21 +88,10 @@ export const content: ToolLocaleContent<TestRatonUI> = {
   slug,
   title,
   description,
-  faqTitle: '常见问题',
   faq: faqData,
-  bibliographyTitle: '参考资料',
-  bibliography: [
-    {
-      name: 'Gamepad Polling Rate — Logitech',
-      url: 'https://www.logitechg.com/en-us/innovation/delta-zero.html',
-    },
-    {
-      name: 'USB HID Polling Rate — USB Implementers Forum',
-      url: 'https://www.usb.org/hid',
-    },
-  ],
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
+  bibliography,
   seo: [
     { type: 'title', text: '鼠标回报率权威指南', level: 2 },
     {

package/src/tool/mousePollingTest/mouse-polling-rate-test.css

@@ -1,8 +1,17 @@
 .tr-wrapper {
-      width: 100%;
-      max-width: 56rem;
-      margin: 0 auto;
-      color: var(--tr-text);
+  --tr-accent: #10b981;
+  --tr-accent-glow: rgba(16, 185, 129, 0.4);
+  --tr-surface: #fff;
+  --tr-surface-alt: #f1f5f9;
+  --tr-surface-dark: #020617;
+  --tr-border: #e2e8f0;
+  --tr-text: #0f172a;
+  --tr-text-muted: #64748b;
+
+  width: 100%;
+  max-width: 56rem;
+  margin: 0 auto;
+  color: var(--tr-text);
     }
 
     .tr-card {
@@ -140,4 +149,17 @@
       opacity: 0;
       transition: opacity 75ms;
       transform: translate(0, 0);
-    }
+    }
+
+.theme-dark .tr-wrapper {
+  --tr-surface: #0f172a;
+  --tr-surface-alt: #1e293b;
+  --tr-surface-dark: #020617;
+  --tr-border: #334155;
+  --tr-text: #f1f5f9;
+  --tr-text-muted: #94a3b8;
+}
+
+body.is-widget .tr-wrapper {
+  padding: 0;
+}

package/src/tool/mousePollingTest/seo.astro

@@ -1,7 +1,7 @@
 ---
 import { SEORenderer } from '@jjlmoya/utils-shared';
-import type { KnownLocale } from '../../types';
 import { testRaton } from './index';
+import type { KnownLocale } from '../../types';
 
 interface Props {
   locale?: KnownLocale;
@@ -9,6 +9,7 @@ interface Props {
 
 const { locale = 'es' } = Astro.props;
 const content = await testRaton.i18n[locale]?.();
+if (!content) return null;
 ---
 
-{content && <SEORenderer content={{ locale, sections: content.seo }} />}
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/refreshRateDetector/bibliography.astro

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

package/src/tool/refreshRateDetector/bibliography.ts

@@ -0,0 +1,20 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'VESA DisplayPort Standard - Monitor Refresh Rates',
+    url: 'https://www.vesa.org/standards/',
+  },
+  {
+    name: 'HDMI Specification - Refresh Rate Support',
+    url: 'https://www.hdmi.org/spec21Sub1',
+  },
+  {
+    name: 'MDN - requestAnimationFrame API',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame',
+  },
+  {
+    name: 'Screen Refresh Rate - Performance Best Practices',
+    url: 'https://web.dev/animations-guide/',
+  },
+];

package/src/tool/refreshRateDetector/component.astro

@@ -0,0 +1,206 @@
+---
+import type { KnownLocale } from '../../types';
+import type { RefreshRateDetectorUI } from './ui';
+
+interface Props {
+  locale?: KnownLocale;
+  ui?: Record<string, unknown>;
+}
+
+const { ui } = Astro.props;
+const t = (ui ?? {}) as RefreshRateDetectorUI;
+---
+
+<div id="rrd-root" class="rrd-wrapper" data-config={JSON.stringify({
+  currentHz: t.currentHz,
+  averageHz: t.averageHz,
+  maxHz: t.maxHz,
+  minHz: t.minHz,
+})}>
+  <div class="rrd-container">
+    <div class="rrd-card">
+      <div class="rrd-layout">
+      <div class="rrd-left">
+        <div class="rrd-metrics">
+          <div class="rrd-metric-item">
+            <div class="rrd-metric-label">{t.currentHz}</div>
+            <div class="rrd-metric-value" id="current-hz">—</div>
+            <div class="rrd-metric-unit">Hz</div>
+          </div>
+          <div class="rrd-metric-item">
+            <div class="rrd-metric-label">{t.averageHz}</div>
+            <div class="rrd-metric-value" id="average-hz">—</div>
+            <div class="rrd-metric-unit">Hz</div>
+          </div>
+          <div class="rrd-metric-item">
+            <div class="rrd-metric-label">{t.maxHz}</div>
+            <div class="rrd-metric-value" id="max-hz">—</div>
+            <div class="rrd-metric-unit">Hz</div>
+          </div>
+          <div class="rrd-metric-item">
+            <div class="rrd-metric-label">{t.minHz}</div>
+            <div class="rrd-metric-value" id="min-hz">—</div>
+            <div class="rrd-metric-unit">Hz</div>
+          </div>
+        </div>
+
+        <div class="rrd-mode-selector">
+          <button id="mode-fast" class="rrd-mode-btn selected" data-mode="fast" data-duration="3000">
+            {t.modeFast}
+          </button>
+          <button id="mode-stable" class="rrd-mode-btn" data-mode="stable" data-duration="10000">
+            {t.modeStable}
+          </button>
+        </div>
+      </div>
+
+      <div class="rrd-right">
+        <div class="rrd-monitor">
+          <div class="rrd-monitor-bezel">
+            <div class="rrd-monitor-screen">
+              <div class="rrd-monitor-content">
+                <div class="rrd-hz-display" id="hz-display">—</div>
+              </div>
+            </div>
+          </div>
+          <div class="rrd-monitor-stand"></div>
+        </div>
+      </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<link rel="stylesheet" href="./monitor-refresh-rate-detector.css" />
+
+<script>
+  interface State {
+    mode: 'fast' | 'stable';
+    duration: number;
+    frameTimestamps: number[];
+    startTime: number;
+    maxHz: number;
+    minHz: number;
+    averageHz: number;
+    currentHz: number;
+  }
+
+  const state: State = {
+    mode: 'fast',
+    duration: 3000,
+    frameTimestamps: [],
+    startTime: 0,
+    maxHz: 0,
+    minHz: Infinity,
+    averageHz: 0,
+    currentHz: 0,
+  };
+
+  const elements = {
+    currentHz: document.getElementById('current-hz'),
+    averageHz: document.getElementById('average-hz'),
+    maxHz: document.getElementById('max-hz'),
+    minHz: document.getElementById('min-hz'),
+    hzDisplay: document.getElementById('hz-display'),
+    modeFast: document.getElementById('mode-fast'),
+    modeStable: document.getElementById('mode-stable'),
+  };
+
+  function getFrameDeltas(timestamps: number[]): number[] {
+    const deltas: number[] = [];
+    for (let i = 1; i < timestamps.length; i++) {
+      const prev = timestamps[i - 1];
+      const curr = timestamps[i];
+      if (prev !== undefined && curr !== undefined) {
+        deltas.push(curr - prev);
+      }
+    }
+    return deltas;
+  }
+
+  function filterOutliers(deltas: number[]): number[] {
+    if (deltas.length === 0) return deltas;
+    const sorted = [...deltas].sort((a, b) => a - b);
+    const q1Index = Math.floor(sorted.length * 0.25);
+    const q3Index = Math.floor(sorted.length * 0.75);
+    const q1 = sorted[q1Index] ?? 0;
+    const q3 = sorted[q3Index] ?? 0;
+    const iqr = q3 - q1;
+    return deltas.filter(d => d >= q1 - 1.5 * iqr && d <= q3 + 1.5 * iqr);
+  }
+
+  function calculateHz(timestamps: number[]): number {
+    if (timestamps.length < 2) return 0;
+    const deltas = getFrameDeltas(timestamps);
+    if (deltas.length === 0) return 0;
+    const filtered = filterOutliers(deltas);
+    if (filtered.length === 0) return 0;
+    const avgDelta = filtered.reduce((a, b) => a + b) / filtered.length;
+    return avgDelta > 0 ? Math.round(1000 / avgDelta * 10) / 10 : 0;
+  }
+
+  function updateMetrics(): void {
+    if (state.frameTimestamps.length < 2) return;
+    const warmupTime = state.startTime + 500;
+    const warmedUpTimestamps = state.frameTimestamps.filter(t => t >= warmupTime);
+    if (warmedUpTimestamps.length < 2) return;
+
+    const recentHz = calculateHz(warmedUpTimestamps.slice(-60));
+    state.currentHz = recentHz;
+
+    const allHz: number[] = [];
+    for (let i = 1; i < warmedUpTimestamps.length; i++) {
+      const prev = warmedUpTimestamps[i - 1];
+      const curr = warmedUpTimestamps[i];
+      if (prev !== undefined && curr !== undefined) {
+        allHz.push(1000 / (curr - prev));
+      }
+    }
+
+    if (allHz.length > 0) {
+      state.maxHz = Math.max(...allHz);
+      state.minHz = Math.min(...allHz);
+      state.averageHz = allHz.reduce((a, b) => a + b) / allHz.length;
+    }
+
+    elements.currentHz!.textContent = state.currentHz.toFixed(1);
+    elements.averageHz!.textContent = state.averageHz.toFixed(1);
+    elements.maxHz!.textContent = state.maxHz.toFixed(1);
+    elements.minHz!.textContent = state.minHz.toFixed(1);
+    elements.hzDisplay!.textContent = state.currentHz.toFixed(0);
+  }
+
+  function measureFrame() {
+    state.frameTimestamps.push(performance.now());
+    updateMetrics();
+    requestAnimationFrame(measureFrame);
+  }
+
+  function restartMeasurement() {
+    state.frameTimestamps = [];
+    state.startTime = performance.now();
+    state.maxHz = 0;
+    state.minHz = Infinity;
+    state.averageHz = 0;
+    state.currentHz = 0;
+  }
+
+  elements.modeFast?.addEventListener('click', () => {
+    state.mode = 'fast';
+    state.duration = 3000;
+    elements.modeFast!.classList.add('selected');
+    elements.modeStable!.classList.remove('selected');
+    restartMeasurement();
+  });
+
+  elements.modeStable?.addEventListener('click', () => {
+    state.mode = 'stable';
+    state.duration = 10000;
+    elements.modeStable!.classList.add('selected');
+    elements.modeFast!.classList.remove('selected');
+    restartMeasurement();
+  });
+
+  restartMeasurement();
+  requestAnimationFrame(measureFrame);
+</script>