Digital & Analog Dual Clock

<div class="clock-app" id="clock-app">
  <div class="app-top-bar">
    <button id="theme-toggle" class="control-btn" title="Toggle Theme">
      <i class="fas fa-moon"></i>
    </button>
    <button id="format-toggle" class="control-btn" title="Toggle 12/24 Hour">
      <span id="format-label">12H</span>
    </button>
  </div>

  <div class="analog-clock">
    <div class="clock-face">
      <!-- 12 hour tick marks -->
      <span class="number number-12">12</span>
      <span class="number number-3">3</span>
      <span class="number number-6">6</span>
      <span class="number number-9">9</span>
      
      <div class="hand hour-hand" id="hour-hand"></div>
      <div class="hand minute-hand" id="min-hand"></div>
      <div class="hand second-hand" id="sec-hand"></div>
      <div class="center-dot"></div>
    </div>
  </div>

  <div class="digital-section">
    <div class="digital-time">
      <span id="dig-hours">00</span>:<span id="dig-minutes">00</span>:<span id="dig-seconds">00</span>
      <span id="dig-ampm" class="ampm-tag">AM</span>
    </div>
    <div id="full-date" class="full-date">Monday, January 1, 2026</div>
  </div>
</div>

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0f172a;
  color: #f8fafc;
  padding: 20px;
  transition: background 0.3s;
}
body.light-theme {
  background: #f1f5f9;
  color: #0f172a;
}
.clock-app {
  background: #1e293b;
  border-radius: 24px;
  padding: 28px;
  width: 100%;
  max-width: 380px;
  border: 1px solid #334155;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.3s;
}
body.light-theme .clock-app {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}
.app-top-bar {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 20px;
}
.control-btn {
  background: #334155;
  border: none;
  color: #94a3b8;
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
  transition: all 0.2s;
}
body.light-theme .control-btn {
  background: #f1f5f9;
  color: #475569;
}
.control-btn:hover {
  background: #8b5cf6;
  color: #ffffff;
}
.analog-clock {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: #0f172a;
  border: 8px solid #334155;
  position: relative;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5), 0 8px 20px rgba(0, 0, 0, 0.2);
  margin-bottom: 24px;
}
body.light-theme .analog-clock {
  background: #f8fafc;
  border-color: #e2e8f0;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05), 0 8px 20px rgba(0, 0, 0, 0.06);
}
.clock-face {
  position: relative;
  width: 100%;
  height: 100%;
}
.number {
  position: absolute;
  color: #94a3b8;
  font-weight: 700;
  font-size: 0.95rem;
}
.number-12 { top: 8px; left: 50%; transform: translateX(-50%); }
.number-3 { right: 10px; top: 50%; transform: translateY(-50%); }
.number-6 { bottom: 8px; left: 50%; transform: translateX(-50%); }
.number-9 { left: 10px; top: 50%; transform: translateY(-50%); }

.hand {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform-origin: bottom center;
  border-radius: 6px;
  transition: transform 0.05s cubic-bezier(0.4, 2.08, 0.55, 0.44);
}
.hour-hand {
  width: 6px;
  height: 55px;
  background: #8b5cf6;
  margin-left: -3px;
  z-index: 3;
}
.minute-hand {
  width: 4px;
  height: 75px;
  background: #38bdf8;
  margin-left: -2px;
  z-index: 4;
}
.second-hand {
  width: 2px;
  height: 85px;
  background: #ef4444;
  margin-left: -1px;
  z-index: 5;
}
.center-dot {
  width: 12px;
  height: 12px;
  background: #f8fafc;
  border: 3px solid #8b5cf6;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
}
.digital-section {
  text-align: center;
}
.digital-time {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: #f8fafc;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}
body.light-theme .digital-time {
  color: #0f172a;
}
.ampm-tag {
  font-size: 0.85rem;
  color: #8b5cf6;
  font-weight: 700;
  text-transform: uppercase;
}
.full-date {
  color: #94a3b8;
  font-size: 0.88rem;
  margin-top: 6px;
  font-weight: 500;
}
body.light-theme .full-date {
  color: #64748b;
}

let is24Hour = false;
let isDark = true;

const hourHand = document.getElementById('hour-hand');
const minHand = document.getElementById('min-hand');
const secHand = document.getElementById('sec-hand');

const digHours = document.getElementById('dig-hours');
const digMinutes = document.getElementById('dig-minutes');
const digSeconds = document.getElementById('dig-seconds');
const digAmpm = document.getElementById('dig-ampm');
const fullDate = document.getElementById('full-date');

const themeBtn = document.getElementById('theme-toggle');
const formatBtn = document.getElementById('format-toggle');
const formatLabel = document.getElementById('format-label');

function updateClock() {
  const now = new Date();

  const seconds = now.getSeconds();
  const minutes = now.getMinutes();
  const hours = now.getHours();

  // Analog hands angles
  const secDeg = (seconds / 60) * 360;
  const minDeg = ((minutes + seconds / 60) / 60) * 360;
  const hourDeg = (((hours % 12) + minutes / 60) / 12) * 360;

  secHand.style.transform = `rotate(${secDeg}deg)`;
  minHand.style.transform = `rotate(${minDeg}deg)`;
  hourHand.style.transform = `rotate(${hourDeg}deg)`;

  // Digital Time
  let displayHours = hours;
  let ampm = '';

  if (!is24Hour) {
    ampm = hours >= 12 ? 'PM' : 'AM';
    displayHours = hours % 12 || 12;
    digAmpm.style.display = 'inline';
    digAmpm.textContent = ampm;
  } else {
    digAmpm.style.display = 'none';
  }

  digHours.textContent = String(displayHours).padStart(2, '0');
  digMinutes.textContent = String(minutes).padStart(2, '0');
  digSeconds.textContent = String(seconds).padStart(2, '0');

  // Full date
  const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
  fullDate.textContent = now.toLocaleDateString('en-US', options);
}

// Format toggle
formatBtn.addEventListener('click', () => {
  is24Hour = !is24Hour;
  formatLabel.textContent = is24Hour ? '24H' : '12H';
  updateClock();
});

// Theme toggle
themeBtn.addEventListener('click', () => {
  isDark = !isDark;
  document.body.classList.toggle('light-theme', !isDark);
  themeBtn.innerHTML = isDark ? '<i class="fas fa-moon"></i>' : '<i class="fas fa-sun"></i>';
});

// Run every second
setInterval(updateClock, 1000);
updateClock();