@jjlmoya/utils-hardware 1.15.0 → 1.16.0

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>

package/src/tool/refreshRateDetector/entry.ts

@@ -0,0 +1,29 @@
+import type { HardwareToolEntry, ToolLocaleContent } from '../../types';
+import type { RefreshRateDetectorUI } from './ui';
+
+export type RefreshRateDetectorLocaleContent = ToolLocaleContent<RefreshRateDetectorUI>;
+
+export const refreshRateDetector: HardwareToolEntry<RefreshRateDetectorUI> = {
+  id: 'monitor-refresh-rate-detector',
+  icons: {
+    bg: 'mdi:monitor',
+    fg: 'mdi:speedometer',
+  },
+  i18n: {
+    en: () => import('./i18n/en').then((m) => m.content),
+    es: () => import('./i18n/es').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+    de: () => import('./i18n/de').then((m) => m.content),
+    it: () => import('./i18n/it').then((m) => m.content),
+    pt: () => import('./i18n/pt').then((m) => m.content),
+    nl: () => import('./i18n/nl').then((m) => m.content),
+    pl: () => import('./i18n/pl').then((m) => m.content),
+    sv: () => import('./i18n/sv').then((m) => m.content),
+    tr: () => import('./i18n/tr').then((m) => m.content),
+    ru: () => import('./i18n/ru').then((m) => m.content),
+    id: () => import('./i18n/id').then((m) => m.content),
+    ja: () => import('./i18n/ja').then((m) => m.content),
+    ko: () => import('./i18n/ko').then((m) => m.content),
+    zh: () => import('./i18n/zh').then((m) => m.content),
+  },
+};

package/src/tool/refreshRateDetector/i18n/de.ts

@@ -0,0 +1,196 @@
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { RefreshRateDetectorUI } from '../ui';
+import { bibliography } from '../bibliography';
+
+const slug = 'monitor-bildwiederholfrequenz-detektor';
+const title = 'Monitor Bildwiederholfrequenz Detektor';
+const description = 'Erkennen Sie sofort die Bildwiederholfrequenz Ihres Monitors mit Präzision unter Verwendung von requestAnimationFrame. Testen Sie die Bildstabilität und vergleichen Sie sie mit Industriestandards.';
+
+const faqData = [
+  {
+    question: 'Was ist die Bildwiederholfrequenz (Hz)?',
+    answer: 'Die Bildwiederholfrequenz gibt an, wie oft pro Sekunde Ihr Monitor das Bild aktualisiert. Ein 60-Hz-Monitor aktualisiert das Bild 60 Mal pro Sekunde, während ein 144-Hz-Monitor dies 144 Mal tut. Höhere Raten führen zu flüssigeren Bewegungen.',
+  },
+  {
+    question: 'Wie genau ist dieser Detektor?',
+    answer: 'Dieses Tool verwendet requestAnimationFrame, das sich mit dem Aktualisierungszyklus Ihres Monitors synchronisiert. Die Genauigkeit hängt von der Systemlast ab. Der stabile Modus misst über längere Zeiträume für eine höhere Präzision.',
+  },
+  {
+    question: 'Was ist der Unterschied zwischen dem stabilen und dem schnellen Modus?',
+    answer: 'Der schnelle Modus misst über eine kurze Zeit (~3 Sekunden) für schnelles Feedback. Der stabile Modus dauert länger (~10 Sekunden), um Systemrauschen herauszufiltern und zuverlässigere Ergebnisse zu liefern.',
+  },
+  {
+    question: 'Warum unterscheidet sich meine erkannte Hz-Zahl von den Angaben meines Monitors?',
+    answer: 'Dies kann passieren, wenn: Ihre Kabelverbindung locker ist, Treiber veraltet sind oder Ihre Betriebssystem-Skalierung stört. Versuchen Sie, Ihr Displaykabel aus- und wieder einzustecken oder die GPU-Treiber zu aktualisieren.',
+  },
+  {
+    question: 'Welche Bildwiederholfrequenzen unterstützen moderne Monitore?',
+    answer: 'Gängige Standards sind 60 Hz (Basis), 75 Hz, 120 Hz, 144 Hz (Gaming), 240 Hz (kompetitives Gaming) und 360 Hz (professioneller E-Sport).',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Tool laden',
+    text: 'Öffnen Sie einfach diese Seite. Der Detektor beginnt sofort mit der Messung.',
+  },
+  {
+    name: 'Auf Stabilisierung warten',
+    text: 'Wählen Sie den stabilen oder den schnellen Modus. Lassen Sie die Messung abschließen, ohne das Fenster zu bewegen.',
+  },
+  {
+    name: 'Tachometer prüfen',
+    text: 'Die Bildwiederholfrequenz Ihres Monitors erscheint als sanfte Skala mit Benchmark-Statistiken (Min/Max/Avg).',
+  },
+  {
+    name: 'Mit Standards vergleichen',
+    text: 'Das Tool zeigt an, welchem Standard Ihr Monitor entspricht (60, 75, 120, 144, 240, 360 Hz).',
+  },
+  {
+    name: 'Optional: Frame-Skipping testen',
+    text: 'Beobachten Sie das animierte Quadrat, das über den Bildschirm läuft, um die Flüssigkeit visuell zu bestätigen.',
+  },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowTo> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howToData.map((step, i) => ({
+    '@type': 'HowToStep',
+    position: i + 1,
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilityApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' },
+  inLanguage: 'de',
+};
+
+export const content: ToolLocaleContent<RefreshRateDetectorUI> = {
+  slug,
+  title,
+  description,
+  faq: faqData,
+  bibliography,
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Monitor Bildwiederholfrequenz-Detektor: Testen Sie Ihre Display-Hz online',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Erkennen Sie sofort die Bildwiederholfrequenz Ihres Monitors (60 Hz, 144 Hz, 240 Hz usw.) mit Präzision. Testen Sie die Bildstabilität und verifizieren Sie, dass Ihr Display die angegebenen Spezifikationen erfüllt.',
+    },
+    {
+      type: 'title',
+      text: 'Warum die Bildwiederholfrequenz des Monitors wichtig ist',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Die Bildwiederholfrequenz bestimmt, wie flüssig Bewegungen auf Ihrem Bildschirm erscheinen. Gamer profitieren von 144-Hz+-Monitoren, während allgemeine Benutzer 60 Hz als ausreichend empfinden. Dieses Tool hilft zu bestätigen, dass Ihr Monitor tatsächlich die beworbene Bildwiederholfrequenz liefert.',
+    },
+    {
+      type: 'title',
+      text: 'So erkennen Sie Ihre Bildwiederholfrequenz',
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        'Laden Sie diesen Detektor – die Messung beginnt sofort',
+        'Wählen Sie zwischen dem schnellen (3s) oder dem stabilen (10s) Messmodus',
+        'Lesen Sie die Hz-Zahl Ihres Monitors auf der Tachometerskala ab',
+        'Vergleichen Sie sie mit Industriestandards (60, 75, 120, 144, 240, 360 Hz)',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Gängige Standards für die Bildwiederholfrequenz',
+      level: 3,
+    },
+    {
+      type: 'table',
+      headers: ['Standard', 'Anwendungsfall', 'Typischer Benutzer'],
+      rows: [
+        ['60 Hz', 'Allgemeine Computeranwendung', 'Büro, Surfen im Web'],
+        ['75 Hz', 'Leichtes Gaming', 'Gelegenheitsspieler'],
+        ['120 Hz', 'Multimedia', 'Konsole, Streaming'],
+        ['144 Hz', 'Kompetitives Gaming', 'FPS, schnelle Spiele'],
+        ['240 Hz+', 'Professioneller E-Sport', 'Profi-Gamer, Streamer'],
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Fehlerbehebung: Display zeigt weniger Hz als erwartet an',
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        'Prüfen Sie die HDMI/DisplayPort-Kabelverbindungen – lose Kabel reduzieren die Bandbreite',
+        'Aktualisieren Sie Ihre GPU-Treiber (NVIDIA, AMD, Intel)',
+        'Überprüfen Sie die Betriebssystem-Anzeigeeinstellungen, um sicherzustellen, dass eine hohe Bildwiederholfrequenz aktiviert ist',
+        'Probieren Sie verschiedene Kabel oder Anschlüsse an Ihrem Monitor aus',
+        'Starten Sie Ihren Computer neu und testen Sie erneut',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Die Technik hinter diesem Detektor',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Dieses Tool verwendet die requestAnimationFrame-API des Browsers, die direkt mit dem Aktualisierungszyklus Ihres Monitors synchronisiert wird. Durch Messen der Zeit zwischen den Animationsframes berechnen wir Ihre exakte Bildwiederholfrequenz mit hoher Präzision – keine spezielle Hardware erforderlich.',
+    },
+  ],
+  ui: {
+    badge: 'Display Test',
+    title: 'Monitor Bildwiederholfrequenz Detektor',
+    description: 'Erkennen Sie sofort die Bildwiederholfrequenz Ihres Displays',
+    modeStable: 'Stabil (10s, präzise)',
+    modeFast: 'Schnell (3s, fix)',
+    measurementStatus: 'Messung läuft...',
+    currentHz: 'Aktuell',
+    averageHz: 'Durchschnitt',
+    maxHz: 'Maximum',
+    minHz: 'Minimum',
+    standardDetected: 'Standard erkannt',
+    frameSkippingTest: 'Frame-Skipping-Test',
+    startMeasurement: 'Messung starten',
+    resetMeasurement: 'Zurücksetzen',
+    copyResult: 'Ergebnis kopieren',
+    copiedFeedback: 'In die Zwischenablage kopiert!',
+    optimalConfiguration: '[OK] Optimale Konfiguration',
+    suboptimalConfiguration: '[WARNUNG] Unter dem Optimum',
+    unstableRefreshRate: '[WARNUNG] Instabile Bildwiederholfrequenz',
+    measurementNotStarted: 'Bereit zur Messung',
+    switchMonitorHint: 'Ziehen Sie das Fenster auf einen anderen Monitor, um diesen zu testen',
+    incompatibleBrowserMsg: 'Ihr Browser unterstützt requestAnimationFrame nicht',
+  },
+};

package/src/tool/refreshRateDetector/i18n/en.ts

@@ -0,0 +1,196 @@
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { RefreshRateDetectorUI } from '../ui';
+import { bibliography } from '../bibliography';
+
+const slug = 'monitor-refresh-rate-detector';
+const title = 'Monitor Refresh Rate Detector';
+const description = 'Instantly detect your monitor\'s refresh rate with precision using requestAnimationFrame. Test frame stability and compare with industry standards.';
+
+const faqData = [
+  {
+    question: 'What is refresh rate (Hz)?',
+    answer: 'Refresh rate is how many times per second your monitor updates the image. A 60Hz monitor refreshes 60 times per second, while 144Hz refreshes 144 times. Higher rates result in smoother motion.',
+  },
+  {
+    question: 'How accurate is this detector?',
+    answer: 'This tool uses requestAnimationFrame, which synchronizes with your monitor\'s refresh cycle. Accuracy depends on system load. The stable mode measures for longer periods for greater precision.',
+  },
+  {
+    question: 'What\'s the difference between Stable and Fast mode?',
+    answer: 'Fast mode measures for a short time (~3 seconds) for quick feedback. Stable mode takes longer (~10 seconds) to filter out system noise and provide more reliable results.',
+  },
+  {
+    question: 'Why is my detected Hz different from what my monitor says?',
+    answer: 'This can happen if: your cable connection is loose, drivers are outdated, or your OS scaling interferes. Try unplugging and re-plugging your display cable, or updating GPU drivers.',
+  },
+  {
+    question: 'What refresh rates do modern monitors support?',
+    answer: 'Common standards are 60Hz (basic), 75Hz, 120Hz, 144Hz (gaming), 240Hz (competitive gaming), and 360Hz (professional esports).',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Load the tool',
+    text: 'Simply open this page. The detector starts measuring immediately.',
+  },
+  {
+    name: 'Wait for stabilization',
+    text: 'Choose Stable or Fast mode. Let the measurement complete without moving the window.',
+  },
+  {
+    name: 'Check the speedometer',
+    text: 'Your monitor\'s refresh rate appears as a smooth dial, with benchmark stats (min/max/avg).',
+  },
+  {
+    name: 'Compare with standards',
+    text: 'The tool shows which standard your monitor matches (60, 75, 120, 144, 240, 360Hz).',
+  },
+  {
+    name: 'Optional: test frame skipping',
+    text: 'Watch the animated square cross the screen to visually confirm fluidity.',
+  },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowTo> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howToData.map((step, i) => ({
+    '@type': 'HowToStep',
+    position: i + 1,
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilityApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' },
+  inLanguage: 'en',
+};
+
+export const content: ToolLocaleContent<RefreshRateDetectorUI> = {
+  slug,
+  title,
+  description,
+  faq: faqData,
+  bibliography,
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Monitor Refresh Rate Detector: Test Your Display Hz Online',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Instantly detect your monitor\'s refresh rate (60Hz, 144Hz, 240Hz, etc.) with precision. Test frame stability and verify your display is performing at its rated specifications.',
+    },
+    {
+      type: 'title',
+      text: 'Why Monitor Refresh Rate Matters',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Refresh rate determines how smooth motion appears on your screen. Gamers benefit from 144Hz+ monitors, while general users find 60Hz adequate. This tool helps confirm your monitor is actually delivering its advertised refresh rate.',
+    },
+    {
+      type: 'title',
+      text: 'How to Detect Your Refresh Rate',
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        'Load this detector—measurement begins immediately',
+        'Choose between Fast (3s) or Stable (10s) measurement mode',
+        'Read your monitor\'s Hz from the speedometer dial',
+        'Compare against industry standards (60, 75, 120, 144, 240, 360Hz)',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Common Refresh Rate Standards',
+      level: 3,
+    },
+    {
+      type: 'table',
+      headers: ['Standard', 'Use Case', 'Typical User'],
+      rows: [
+        ['60Hz', 'General Computing', 'Office, Web Browsing'],
+        ['75Hz', 'Light Gaming', 'Casual Gamers'],
+        ['120Hz', 'Multimedia', 'Console, Streaming'],
+        ['144Hz', 'Competitive Gaming', 'FPS, Fast-Paced Games'],
+        ['240Hz+', 'Professional Esports', 'Pro Gamers, Streamers'],
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Troubleshooting: Display Shows Lower Hz Than Expected',
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        'Check HDMI/DisplayPort cable connections—loose cables reduce bandwidth',
+        'Update your GPU drivers (NVIDIA, AMD, Intel)',
+        'Check OS display settings to ensure high refresh rate is enabled',
+        'Try different cables or ports on your monitor',
+        'Restart your computer and re-test',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'The Tech Behind This Detector',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'This tool uses the browser\'s requestAnimationFrame API, which synchronizes directly with your monitor\'s refresh cycle. By measuring the time between animation frames, we calculate your exact refresh rate with high precision—no special hardware needed.',
+    },
+  ],
+  ui: {
+    badge: 'Display Test',
+    title: 'Monitor Refresh Rate Detector',
+    description: 'Detect your display\'s refresh rate instantly',
+    modeStable: 'Stable (10s, precise)',
+    modeFast: 'Fast (3s, quick)',
+    measurementStatus: 'Measuring...',
+    currentHz: 'Current',
+    averageHz: 'Average',
+    maxHz: 'Maximum',
+    minHz: 'Minimum',
+    standardDetected: 'Standard Detected',
+    frameSkippingTest: 'Frame Skipping Test',
+    startMeasurement: 'Start Measurement',
+    resetMeasurement: 'Reset',
+    copyResult: 'Copy Result',
+    copiedFeedback: 'Copied to clipboard!',
+    optimalConfiguration: '[OK] Optimal Configuration',
+    suboptimalConfiguration: '[WARNING] Below Optimal',
+    unstableRefreshRate: '[WARNING] Unstable Refresh Rate',
+    measurementNotStarted: 'Ready to measure',
+    switchMonitorHint: 'Drag window to another monitor to test it',
+    incompatibleBrowserMsg: 'Your browser doesn\'t support requestAnimationFrame',
+  },
+};