@jjlmoya/utils-chrono 1.11.0 → 1.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-chrono",
-    "version": "1.11.0",
+    "version": "1.16.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/category/index.ts

@@ -16,6 +16,9 @@ import { strapLengthCalculator } from '../tool/strap-length-calculator/entry';
 import { telemeterCalculator } from '../tool/telemeter-calculator/entry';
 import { siderealTimeTracker } from '../tool/sidereal-time-tracker/entry';
 import { gearTrainExplorer } from '../tool/gear-train-explorer/entry';
+import { perpetualCalendar } from '../tool/perpetual-calendar/entry';
+import { tourbillonVisualizer } from '../tool/tourbillon-visualizer/entry';
+import { gmtWorldTimer } from '../tool/gmt-world-timer/entry';
 
 export const chronoCategory: ChronoCategoryEntry = {
   icon: 'mdi:clock-outline',
@@ -37,6 +40,9 @@ export const chronoCategory: ChronoCategoryEntry = {
     telemeterCalculator,
     siderealTimeTracker,
     gearTrainExplorer,
+    perpetualCalendar,
+    tourbillonVisualizer,
+    gmtWorldTimer,
   ],
   i18n: {
     de: () => import('./i18n/de').then((m) => m.content),

package/src/entries.ts

@@ -34,6 +34,12 @@ export { siderealTimeTracker } from './tool/sidereal-time-tracker/entry';
 export type { SiderealTimeTrackerUI, SiderealTimeTrackerLocaleContent } from './tool/sidereal-time-tracker/entry';
 export { gearTrainExplorer } from './tool/gear-train-explorer/entry';
 export type { GearTrainExplorerUI, GearTrainExplorerLocaleContent } from './tool/gear-train-explorer/entry';
+export { perpetualCalendar } from './tool/perpetual-calendar/entry';
+export type { PerpetualCalendarUI, PerpetualCalendarLocaleContent } from './tool/perpetual-calendar/entry';
+export { tourbillonVisualizer } from './tool/tourbillon-visualizer/entry';
+export type { TourbillonUI, TourbillonLocaleContent } from './tool/tourbillon-visualizer/entry';
+export { gmtWorldTimer } from './tool/gmt-world-timer/entry';
+export type { GMTWorldTimerUI, GMTWorldTimerLocaleContent } from './tool/gmt-world-timer/entry';
 export { chronoCategory } from './category';
 
 import { watchAccuracyTracker } from './tool/watch-accuracy-tracker/entry';
@@ -54,6 +60,9 @@ import { strapLengthCalculator } from './tool/strap-length-calculator/entry';
 import { telemeterCalculator } from './tool/telemeter-calculator/entry';
 import { siderealTimeTracker } from './tool/sidereal-time-tracker/entry';
 import { gearTrainExplorer } from './tool/gear-train-explorer/entry';
+import { perpetualCalendar } from './tool/perpetual-calendar/entry';
+import { tourbillonVisualizer } from './tool/tourbillon-visualizer/entry';
+import { gmtWorldTimer } from './tool/gmt-world-timer/entry';
 
-export const ALL_ENTRIES = [watchAccuracyTracker, wristPresenceCalculator, demagnetizingTimer, watchSavingsPlanner, crownReferenceGuide, powerReserveEstimator, beatRateConverter, waterResistanceConverter, strapTaperCalculator, watchSizeComparator, lumeColorSimulator, moonPhaseVisualizer, tachymeterCalculator, serviceIntervalTracker, strapLengthCalculator, telemeterCalculator, siderealTimeTracker, gearTrainExplorer];
+export const ALL_ENTRIES = [watchAccuracyTracker, wristPresenceCalculator, demagnetizingTimer, watchSavingsPlanner, crownReferenceGuide, powerReserveEstimator, beatRateConverter, waterResistanceConverter, strapTaperCalculator, watchSizeComparator, lumeColorSimulator, moonPhaseVisualizer, tachymeterCalculator, serviceIntervalTracker, strapLengthCalculator, telemeterCalculator, siderealTimeTracker, gearTrainExplorer, perpetualCalendar, tourbillonVisualizer, gmtWorldTimer];
 

package/src/tests/locale_completeness.test.ts

@@ -22,7 +22,7 @@ describe('Locale Completeness Validation', () => {
   });
 
   it('all tools registered', () => {
-    expect(ALL_TOOLS.length).toBe(18);
+    expect(ALL_TOOLS.length).toBe(21);
   });
 
 });

package/src/tests/tool_validation.test.ts

@@ -5,7 +5,7 @@ import { chronoCategory } from '../data';
 describe('Tool Validation Suite', () => {
   describe('Library Registration', () => {
     it('should have tools in ALL_TOOLS', () => {
-      expect(ALL_TOOLS.length).toBe(18);
+      expect(ALL_TOOLS.length).toBe(21);
     });
 
 

package/src/tool/gmt-world-timer/bibliography.astro

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

package/src/tool/gmt-world-timer/bibliography.ts

@@ -0,0 +1,7 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  { name: 'Time Zone Map - TimeAndDate', url: 'https://www.timeanddate.com/time/map/' },
+  { name: 'IANA Time Zone Database', url: 'https://www.iana.org/time-zones' },
+  { name: 'UTC - Coordinated Universal Time', url: 'https://www.timeanddate.com/time/utc.html' },
+];

package/src/tool/gmt-world-timer/client.ts

@@ -0,0 +1,250 @@
+const STORAGE_KEY = 'gmt-world-timer-zones';
+
+interface ZoneItem {
+  id: string;
+  label: string;
+}
+
+const DEFAULT_ZONES: ZoneItem[] = [
+  { id: 'America/New_York', label: 'New York' },
+  { id: 'Europe/London', label: 'London' },
+  { id: 'Europe/Paris', label: 'Paris' },
+  { id: 'Asia/Tokyo', label: 'Tokyo' },
+];
+
+const ALL_ZONES: ZoneItem[] = [
+  { id: 'Pacific/Midway', label: 'Midway' },
+  { id: 'Pacific/Honolulu', label: 'Honolulu' },
+  { id: 'America/Anchorage', label: 'Anchorage' },
+  { id: 'America/Los_Angeles', label: 'Los Angeles' },
+  { id: 'America/Denver', label: 'Denver' },
+  { id: 'America/Chicago', label: 'Chicago' },
+  { id: 'America/New_York', label: 'New York' },
+  { id: 'America/Halifax', label: 'Halifax' },
+  { id: 'America/Argentina/Buenos_Aires', label: 'Buenos Aires' },
+  { id: 'Atlantic/Azores', label: 'Azores' },
+  { id: 'Europe/London', label: 'London' },
+  { id: 'Europe/Paris', label: 'Paris' },
+  { id: 'Europe/Berlin', label: 'Berlin' },
+  { id: 'Europe/Madrid', label: 'Madrid' },
+  { id: 'Europe/Rome', label: 'Rome' },
+  { id: 'Europe/Athens', label: 'Athens' },
+  { id: 'Europe/Moscow', label: 'Moscow' },
+  { id: 'Asia/Dubai', label: 'Dubai' },
+  { id: 'Asia/Karachi', label: 'Karachi' },
+  { id: 'Asia/Kolkata', label: 'Kolkata' },
+  { id: 'Asia/Dhaka', label: 'Dhaka' },
+  { id: 'Asia/Bangkok', label: 'Bangkok' },
+  { id: 'Asia/Shanghai', label: 'Shanghai' },
+  { id: 'Asia/Singapore', label: 'Singapore' },
+  { id: 'Asia/Tokyo', label: 'Tokyo' },
+  { id: 'Asia/Seoul', label: 'Seoul' },
+  { id: 'Australia/Sydney', label: 'Sydney' },
+  { id: 'Pacific/Noumea', label: 'Noumea' },
+  { id: 'Pacific/Auckland', label: 'Auckland' },
+];
+
+let zones: ZoneItem[] = [];
+
+function loadZones(): void {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (raw) {
+      const parsed: ZoneItem[] = JSON.parse(raw);
+      zones = parsed.filter((z) => ALL_ZONES.some((a) => a.id === z.id));
+    }
+  } catch {
+    zones = [];
+  }
+  if (zones.length === 0) zones = [...DEFAULT_ZONES];
+}
+
+function saveZones(): void {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(zones));
+}
+
+function getOffsetLabel(tz: string): string {
+  try {
+    const parts = new Intl.DateTimeFormat('en', { timeZone: tz, timeZoneName: 'shortOffset' }).formatToParts();
+    const off = parts.find((p) => p.type === 'timeZoneName');
+    return off ? off.value : '';
+  } catch {
+    return '';
+  }
+}
+
+function getZoneDate(tz: string): Date {
+  const now = new Date();
+  const localMs = now.getMilliseconds();
+  const localOff = now.getTimezoneOffset();
+  const parts = new Intl.DateTimeFormat('en', { timeZone: tz, timeZoneName: 'longOffset' }).formatToParts(now);
+  const offPart = parts.find((p) => p.type === 'timeZoneName');
+  if (!offPart || !offPart.value) return now;
+  const m = offPart.value.match(/GMT([+-]\d+)(?::(\d+))?/);
+  if (!m) return now;
+  const sign = m[1].startsWith('+') ? 1 : -1;
+  const h = parseInt(m[1].slice(1));
+  const min = m[2] ? parseInt(m[2]) : 0;
+  const tzOff = sign * (h * 60 + min);
+  const utcMs = now.getTime() + localOff * 60000;
+  return new Date(utcMs + tzOff * 60000 + localMs * 0);
+}
+
+function makeClockSVG(tz: string): string {
+  const d = getZoneDate(tz);
+  const h = d.getHours() % 12;
+  const m = d.getMinutes();
+  const s = d.getSeconds();
+  const ms = d.getMilliseconds();
+  const hA = (h / 12) * 360 + (m / 60) * 30;
+  const mA = (m / 60) * 360 + (s / 60) * 6;
+  const sA = (s / 60) * 360 + (ms / 1000) * 6;
+  const tick = [0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330].map((a) => {
+    const rad = (a - 90) * (Math.PI / 180);
+    const r1 = a % 90 === 0 ? 34 : 37;
+    const x1 = 50 + r1 * Math.cos(rad);
+    const y1 = 50 + r1 * Math.sin(rad);
+    const x2 = 50 + 43 * Math.cos(rad);
+    const y2 = 50 + 43 * Math.sin(rad);
+    const w = a % 90 === 0 ? '1.8' : '1';
+    return `<line x1="${x1.toFixed(1)}" y1="${y1.toFixed(1)}" x2="${x2.toFixed(1)}" y2="${y2.toFixed(1)}" stroke="var(--clock-marks)" stroke-width="${w}" stroke-linecap="round"/>`;
+  }).join('');
+  return `<svg class="gmt-card-clock" viewBox="0 0 100 100">
+    <circle cx="50" cy="50" r="46" fill="var(--clock-face)" stroke="var(--clock-bezel)" stroke-width="1.6"/>
+    ${tick}
+    <line x1="50" y1="50" x2="50" y2="27" stroke="var(--clock-hour)" stroke-width="3" stroke-linecap="round" transform="rotate(${hA.toFixed(1)},50,50)"/>
+    <line x1="50" y1="50" x2="50" y2="14" stroke="var(--clock-min)" stroke-width="1.8" stroke-linecap="round" transform="rotate(${mA.toFixed(1)},50,50)"/>
+    <line x1="50" y1="55" x2="50" y2="8" stroke="var(--clock-sec)" stroke-width="1" stroke-linecap="round" transform="rotate(${sA.toFixed(1)},50,50)"/>
+    <circle cx="50" cy="50" r="3" fill="var(--clock-hour)"/>
+  </svg>`;
+}
+
+function getTimeStr(tz: string): string {
+  try {
+    return new Intl.DateTimeFormat('en', {
+      timeZone: tz, hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false,
+    }).format(new Date());
+  } catch {
+    return '--:--:--';
+  }
+}
+
+function renderCard(z: ZoneItem): string {
+  const id = z.id.replace(/\//g, '-');
+  return `<div class="gmt-card" data-zone="${z.id}" id="card-${id}">
+    <button class="gmt-card-remove" data-remove="${z.id}" aria-label="Remove">&#x2715;</button>
+    <div class="gmt-card-clock-w" id="clock-${id}">${makeClockSVG(z.id)}</div>
+    <div class="gmt-card-info">
+      <div class="gmt-card-city">${z.label}</div>
+      <div class="gmt-card-time" id="time-${id}">${getTimeStr(z.id)}</div>
+      <div class="gmt-card-offset" id="off-${id}">${getOffsetLabel(z.id)}</div>
+    </div>
+  </div>`;
+}
+
+function renderGrid(): void {
+  const grid = document.getElementById('gmt-grid')!;
+  grid.innerHTML = zones.map(renderCard).join('');
+  grid.querySelectorAll('[data-remove]').forEach((btn) => {
+    btn.addEventListener('click', () => {
+      const id = (btn as HTMLElement).dataset.remove!;
+      removeZone(id);
+    });
+  });
+}
+
+function updateCards(): void {
+  for (const z of zones) {
+    const id = z.id.replace(/\//g, '-');
+    const clockEl = document.getElementById(`clock-${id}`);
+    const timeEl = document.getElementById(`time-${id}`);
+    if (clockEl) clockEl.innerHTML = makeClockSVG(z.id);
+    if (timeEl) timeEl.textContent = getTimeStr(z.id);
+  }
+  requestAnimationFrame(updateCards);
+}
+
+function addZone(z: ZoneItem): void {
+  if (zones.some((existing) => existing.id === z.id)) return;
+  zones.push(z);
+  saveZones();
+  renderGrid();
+}
+
+function removeZone(id: string): void {
+  zones = zones.filter((z) => z.id !== id);
+  saveZones();
+  renderGrid();
+  if (zones.length === 0) {
+    zones = [...DEFAULT_ZONES];
+    saveZones();
+    renderGrid();
+  }
+}
+
+function filterZones(q: string): ZoneItem[] {
+  return ALL_ZONES.filter((z) => {
+    const l = z.label.toLowerCase();
+    const i = z.id.toLowerCase();
+    return l.includes(q) || i.includes(q);
+  }).slice(0, 10);
+}
+
+function renderDropdownItems(dd: HTMLElement, matches: ZoneItem[]): void {
+  dd.innerHTML = matches
+    .map((z) => {
+      const taken = zones.some((existing) => existing.id === z.id);
+      return `<div class="gmt-dd-item ${taken ? 'taken' : ''}" data-add="${z.id}">
+        <span>${z.label}</span>
+        <span class="gmt-dd-offset">${getOffsetLabel(z.id)}</span>
+      </div>`;
+    })
+    .join('');
+  dd.querySelectorAll('[data-add]').forEach((el) => {
+    el.addEventListener('click', () => {
+      const zid = (el as HTMLElement).dataset.add!;
+      const zone = ALL_ZONES.find((z) => z.id === zid);
+      if (zone) addZone(zone);
+      (document.getElementById('gmt-search') as HTMLInputElement).value = '';
+      dd.classList.remove('open');
+    });
+  });
+  dd.classList.add('open');
+}
+
+function renderDropdown(query: string): void {
+  const dd = document.getElementById('gmt-dropdown')!;
+  const q = query.toLowerCase().trim();
+  if (!q) { dd.classList.remove('open'); return; }
+  const matches = filterZones(q);
+  if (matches.length === 0) {
+    dd.innerHTML = '<div class="gmt-dd-empty">No cities found</div>';
+    dd.classList.add('open');
+    return;
+  }
+  renderDropdownItems(dd, matches);
+}
+
+function init(): void {
+  loadZones();
+  renderGrid();
+  requestAnimationFrame(updateCards);
+
+  const search = document.getElementById('gmt-search') as HTMLInputElement;
+  const dd = document.getElementById('gmt-dropdown')!;
+
+  search.addEventListener('input', () => renderDropdown(search.value));
+  search.addEventListener('focus', () => {
+    if (search.value.trim()) renderDropdown(search.value);
+  });
+  document.addEventListener('click', (e) => {
+    if (!(e.target as HTMLElement).closest('.gmt-search-w')) {
+      dd.classList.remove('open');
+    }
+  });
+  search.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') dd.classList.remove('open');
+  });
+}
+
+init();

package/src/tool/gmt-world-timer/component.astro

@@ -0,0 +1,13 @@
+---
+import GmtPanel from './components/GmtPanel.astro';
+interface Props { ui: Record<string, string>; }
+const { ui } = Astro.props;
+---
+
+<link href="./gmt-world-timer.css" rel="stylesheet" />
+
+<div class="tool-main-card" data-ui={JSON.stringify(ui)}>
+  <GmtPanel labels={ui} />
+</div>
+
+<script src="./client.ts"></script>

package/src/tool/gmt-world-timer/components/GmtPanel.astro

@@ -0,0 +1,18 @@
+---
+interface Props { labels: Record<string, string>; }
+const { labels } = Astro.props;
+---
+
+<div class="gmt-tool">
+  <div class="gmt-search-w">
+    <input
+      type="text"
+      class="gmt-search"
+      id="gmt-search"
+      placeholder={labels.searchPlaceholder || 'Search city or time zone...'}
+      autocomplete="off"
+    />
+    <div class="gmt-dropdown" id="gmt-dropdown"></div>
+  </div>
+  <div class="gmt-grid" id="gmt-grid"></div>
+</div>

package/src/tool/gmt-world-timer/entry.ts

@@ -0,0 +1,34 @@
+import type { ChronoToolEntry, ToolLocaleContent } from '../../types';
+
+export type GMTWorldTimerUI = {
+  title: string;
+  searchPlaceholder: string;
+  addLabel: string;
+  removeLabel: string;
+  noResults: string;
+  yourZones: string;
+};
+
+export type GMTWorldTimerLocaleContent = ToolLocaleContent<GMTWorldTimerUI>;
+
+export const gmtWorldTimer: ChronoToolEntry<GMTWorldTimerUI> = {
+  id: 'gmt-world-timer',
+  icons: { bg: 'mdi:web', fg: 'mdi:clock-time-eight' },
+  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),
+  },
+};

package/src/tool/gmt-world-timer/gmt-world-timer.css

@@ -0,0 +1,239 @@
+.theme-dark .gmt-tool {
+  --clock-face: color-mix(in srgb, var(--bg-surface) 60%, #000);
+}
+
+.gmt-tool {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+
+  --clock-face: var(--bg-surface);
+  --clock-bezel: color-mix(in srgb, var(--accent) 35%, transparent);
+  --clock-marks: var(--text-muted);
+  --clock-hour: var(--accent);
+  --clock-min: var(--text-base);
+  --clock-sec: var(--color-error);
+}
+
+.gmt-search-w {
+  position: relative;
+  max-width: 420px;
+}
+
+.gmt-search {
+  width: 100%;
+  padding: 0.8rem 1.1rem;
+  border: 1.5px solid var(--border-base);
+  border-radius: 0.85rem;
+  background: var(--bg-surface);
+  color: var(--text-base);
+  font-size: 0.9rem;
+  outline: none;
+  transition: border-color 0.15s ease;
+  box-sizing: border-box;
+}
+
+.gmt-search:focus {
+  border-color: var(--accent);
+}
+
+.gmt-search::placeholder {
+  color: var(--text-base);
+  opacity: 0.3;
+}
+
+.gmt-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 50;
+  margin-top: 0.3rem;
+  border: 1px solid var(--border-base);
+  border-radius: 0.85rem;
+  background: var(--bg-surface);
+  max-height: 280px;
+  overflow-y: auto;
+  display: none;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+}
+
+.gmt-dropdown.open {
+  display: block;
+}
+
+.gmt-dd-item {
+  padding: 0.65rem 0.9rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 0.85rem;
+  color: var(--text-base);
+  transition: background 0.1s ease;
+}
+
+.gmt-dd-item:first-child {
+  border-radius: 0.85rem 0.85rem 0 0;
+}
+
+.gmt-dd-item:last-child {
+  border-radius: 0 0 0.85rem 0.85rem;
+}
+
+.gmt-dd-item:hover {
+  background: color-mix(in srgb, var(--accent) 12%, transparent);
+}
+
+.gmt-dd-item.taken {
+  opacity: 0.3;
+  pointer-events: none;
+}
+
+.gmt-dd-offset {
+  font-size: 0.75rem;
+  opacity: 0.5;
+}
+
+.gmt-dd-empty {
+  padding: 1rem;
+  text-align: center;
+  font-size: 0.8rem;
+  color: var(--text-base);
+  opacity: 0.4;
+}
+
+.gmt-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 1rem;
+}
+
+.gmt-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 1.75rem 1rem 1.15rem;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-base);
+  border-radius: 1.25rem;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  min-height: 300px;
+}
+
+.gmt-card:hover {
+  border-color: color-mix(in srgb, var(--accent) 40%, var(--border-base));
+  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
+}
+
+.gmt-card-remove {
+  position: absolute;
+  top: 0.6rem;
+  right: 0.6rem;
+  width: 1.6rem;
+  height: 1.6rem;
+  border: none;
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--text-base) 8%, transparent);
+  color: var(--text-base);
+  font-size: 0.85rem;
+  line-height: 1;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+
+.gmt-card:hover .gmt-card-remove {
+  opacity: 0.4;
+}
+
+.gmt-card-remove:hover {
+  opacity: 1;
+  background: color-mix(in srgb, var(--accent) 20%, transparent);
+  color: var(--accent);
+}
+
+.gmt-card-clock-w {
+  width: 160px;
+  height: 160px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.gmt-card-clock {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.gmt-card-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.2rem;
+}
+
+.gmt-card-city {
+  font-size: 0.8rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--text-base);
+  opacity: 0.5;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 180px;
+}
+
+.gmt-card-time {
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1.4;
+  color: var(--text-base);
+  letter-spacing: 0.05em;
+  font-variant-numeric: tabular-nums;
+  opacity: 0.8;
+}
+
+.gmt-card-offset {
+  font-size: 0.7rem;
+  font-weight: 500;
+  color: var(--text-base);
+  opacity: 0.35;
+  letter-spacing: 0.03em;
+}
+
+@media (max-width: 640px) {
+  .gmt-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 0.6rem;
+  }
+
+  .gmt-card {
+    padding: 1.2rem 0.6rem 0.85rem;
+    min-height: 220px;
+  }
+
+  .gmt-card-clock-w {
+    width: 120px;
+    height: 120px;
+  }
+
+  .gmt-card-time {
+    font-size: 0.85rem;
+  }
+}
+
+@media (max-width: 400px) {
+  .gmt-grid {
+    grid-template-columns: 1fr;
+    gap: 0.6rem;
+  }
+}

package/src/tool/gmt-world-timer/helpers.ts

@@ -0,0 +1,28 @@
+import type { WithContext, Thing } from 'schema-dts';
+import type { FAQItem, HowToStep } from '../../types';
+
+function buildFAQ(faq: FAQItem[]): WithContext<Thing> {
+  return {
+    '@context': 'https://schema.org', '@type': 'FAQPage',
+    'mainEntity': faq.map((f) => ({ '@type': 'Question', 'name': f.question, 'acceptedAnswer': { '@type': 'Answer', 'text': f.answer } })),
+  } as unknown as WithContext<Thing>;
+}
+
+function buildApp(title: string): WithContext<Thing> {
+  return {
+    '@context': 'https://schema.org', '@type': 'SoftwareApplication', 'name': title,
+    'operatingSystem': 'All', 'applicationCategory': 'UtilitiesApplication',
+    'browserRequirements': 'Requires HTML5. Requires JavaScript.',
+  } as unknown as WithContext<Thing>;
+}
+
+function buildHowTo(title: string, howTo: HowToStep[]): WithContext<Thing> {
+  return {
+    '@context': 'https://schema.org', '@type': 'HowTo', 'name': title,
+    'step': howTo.map((h) => ({ '@type': 'HowToStep', 'name': h.name, 'text': h.text })),
+  } as unknown as WithContext<Thing>;
+}
+
+export function buildSchemas(title: string, faq: FAQItem[], howTo: HowToStep[]): WithContext<Thing>[] {
+  return [buildFAQ(faq), buildApp(title), buildHowTo(title, howTo)];
+}