Clock Widgets

<!-- WorldTime Clock Widget -->
<div id="worldtime-widget"></div>
<script>
(function() {
  const config = {
    timezone: 'America/New_York',
    city: 'New York',
    country: 'United States',
    bgColor: '#ffffff',
    textColor: '#1e293b',
    accentColor: '#3b82f6',
    size: 'medium',
    showSeconds: true
  };

  const container = document.getElementById('worldtime-widget');
  container.style.cssText = 'background:' + config.bgColor + ';color:' + config.textColor + ';padding:24px;border-radius:16px;font-family:system-ui,-apple-system,sans-serif;text-align:center;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1);';

  const cityLabel = document.createElement('div');
  cityLabel.style.cssText = 'font-size:' + (config.size === 'small' ? '12px' : config.size === 'large' ? '16px' : '14px') + ';opacity:0.7;margin-bottom:8px;';
  cityLabel.textContent = config.city + ', ' + config.country;

  const timeDisplay = document.createElement('div');
  timeDisplay.style.cssText = 'font-size:' + (config.size === 'small' ? '28px' : config.size === 'large' ? '48px' : '36px') + ';font-weight:300;font-family:ui-monospace,monospace;margin-bottom:4px;';

  const dateDisplay = document.createElement('div');
  dateDisplay.style.cssText = 'font-size:' + (config.size === 'small' ? '11px' : config.size === 'large' ? '14px' : '12px') + ';opacity:0.6;';

  container.appendChild(cityLabel);
  container.appendChild(timeDisplay);
  container.appendChild(dateDisplay);

  function update() {
    const now = new Date();
    const time = now.toLocaleTimeString('en-US', {
      timeZone: config.timezone,
      hour12: false,
      hour: '2-digit',
      minute: '2-digit',
      second: config.showSeconds ? '2-digit' : undefined
    });
    const date = now.toLocaleDateString('en-US', {
      timeZone: config.timezone,
      weekday: 'short',
      month: 'short',
      day: 'numeric'
    });
    timeDisplay.textContent = time;
    dateDisplay.textContent = date;
  }

  update();
  setInterval(update, 1000);
})();
</script>