Analog-Digital Clock, Stopwatch and Timer Panel

<div class="flex items-center justify-center min-h-screen w-full bg-black p-4 font-sans text-white">
  <style>
    .clock-face {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      position: relative;
      background: #000;
      margin-bottom: 30px;
    }

    .tick {
      position: absolute;
      left: 50%;
      top: 0;
      width: 1px;
      height: 50%;
      transform-origin: bottom center;
      pointer-events: none;
    }

    .tick.major::after {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      height: 4px;
      width: 4px;
      border-radius: 50%;
      background: #fff;
    }

    .hand {
      position: absolute;
      bottom: 50%;
      left: 50%;
      transform-origin: bottom center;
      z-index: 10;
      border-radius: 4px;
    }

    .hand-hour {
      width: 4px;
      height: 25%;
      margin-left: -2px;
      background: #fff;
    }

    .hand-minute {
      width: 4px;
      height: 38%;
      margin-left: -2px;
      background: #fff;
    }

    .hand-second {
      width: 1px;
      height: 45%;
      background: #444;
      margin-left: -0.5px;
    }

    .center-cap {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 6px;
      height: 6px;
      background: #000;
      border: 1px solid #444;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      z-index: 12;
    }

    .brand-tiny {
      position: absolute;
      top: 65px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 8px;
      letter-spacing: 1px;
      color: #333;
    }
  </style>

  <div class="grid grid-cols-1 md:grid-cols-3 gap-6 w-full max-w-6xl">
    <!-- Main Clock -->
    <div
      class="bg-zinc-950 border border-zinc-900 rounded-xl p-10 flex flex-col items-center relative hover:border-zinc-700 transition-colors">
      <div class="text-[10px] uppercase tracking-[2px] text-zinc-500 mb-5">Current Epoch</div>
      <div class="clock-face" id="face-1">
        <div class="brand-tiny">CHRONOS</div>
        <div class="hand hand-hour" id="clockHour"></div>
        <div class="hand hand-minute" id="clockMin"></div>
        <div class="hand hand-second" id="clockSec"></div>
        <div class="center-cap"></div>
      </div>
      <div class="font-mono text-xl tracking-widest mb-6" id="clockDigital">00:00:00</div>
      <div class="h-7"></div>
    </div>

    <!-- Stopwatch -->
    <div
      class="bg-zinc-950 border border-zinc-900 rounded-xl p-10 flex flex-col items-center relative hover:border-zinc-700 transition-colors">
      <div class="text-[10px] uppercase tracking-[2px] text-zinc-500 mb-5">Elapsed Interval</div>
      <div class="clock-face" id="face-2">
        <div class="brand-tiny">VELOCITY</div>
        <div class="hand hand-second" id="swHand"></div>
        <div class="center-cap"></div>
      </div>
      <div class="font-mono text-xl tracking-widest mb-6" id="swDigital">00:00.00</div>
      <div class="flex gap-3">
        <button class="border border-zinc-500 text-[10px] uppercase px-4 py-1.5 rounded hover:bg-white hover:text-black transition-all tracking-wider" onclick="toggleStopwatch()" id="swBtn">Start</button>
        <button class="border border-zinc-500 text-[10px] uppercase px-4 py-1.5 rounded hover:bg-white hover:text-black transition-all tracking-wider" onclick="resetStopwatch()">Reset</button>
      </div>
    </div>

    <!-- Timer -->
    <div
      class="bg-zinc-950 border border-zinc-900 rounded-xl p-10 flex flex-col items-center relative hover:border-zinc-700 transition-colors">
      <div class="text-[10px] uppercase tracking-[2px] text-zinc-500 mb-5">Remaining Phase</div>
      <div class="clock-face" id="face-3">
        <div class="brand-tiny">HORIZON</div>
        <div class="hand hand-second" id="timerHand"></div>
        <div class="center-cap"></div>
      </div>
      <div class="font-mono text-xl tracking-widest mb-6" id="timerDigital">10:00.00</div>
      <div class="flex gap-3">
        <button class="border border-zinc-500 text-[10px] uppercase px-4 py-1.5 rounded hover:bg-white hover:text-black transition-all tracking-wider" onclick="toggleTimer()" id="timerBtn">Start</button>
        <button class="border border-zinc-500 text-[10px] uppercase px-4 py-1.5 rounded hover:bg-white hover:text-black transition-all tracking-wider" onclick="resetTimer()">Set</button>
      </div>
    </div>
  </div>

  <script>
    document.querySelectorAll('.clock-face').forEach(face => {
      for (let i = 0; i < 12; i++) {
        const tick = document.createElement('div');
        tick.className = 'tick major';
        tick.style.transform = `rotate(${i * 30}deg)`;
        face.appendChild(tick);
      }
    });

    function updateClock() {
      const now = new Date();
      const s = now.getSeconds() + now.getMilliseconds() / 1000;
      const m = now.getMinutes() + s / 60;
      const h = (now.getHours() % 12) + m / 60;
      document.getElementById('clockSec').style.transform = `rotate(${s * 6}deg)`;
      document.getElementById('clockMin').style.transform = `rotate(${m * 6}deg)`;
      document.getElementById('clockHour').style.transform = `rotate(${h * 30}deg)`;
      document.getElementById('clockDigital').innerText = now.getHours().toString().padStart(2, '0') + ":" + now.getMinutes().toString().padStart(2, '0') + ":" + now.getSeconds().toString().padStart(2, '0');
    }

    let swRunning = false, swTime = 0, swInterval;
    function toggleStopwatch() {
      const btn = document.getElementById('swBtn');
      if (swRunning) { clearInterval(swInterval); btn.innerText = 'Start'; } 
      else {
        swInterval = setInterval(() => {
          swTime += 10;
          const ms = Math.floor((swTime % 1000) / 10), s = Math.floor((swTime / 1000) % 60), m = Math.floor(swTime / 60000);
          document.getElementById('swDigital').innerText = `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}.${ms.toString().padStart(2, '0')}`;
          document.getElementById('swHand').style.transform = `rotate(${(swTime / 1000) * 6}deg)`;
        }, 10);
        btn.innerText = 'Stop';
      }
      swRunning = !swRunning;
    }

    function resetStopwatch() {
      clearInterval(swInterval); swTime = 0; swRunning = false;
      document.getElementById('swBtn').innerText = 'Start';
      document.getElementById('swDigital').innerText = '00:00.00';
      document.getElementById('swHand').style.transform = 'rotate(0deg)';
    }

    let timerRunning = false, timerTime = 600000, timerInterval;
    function toggleTimer() {
      const btn = document.getElementById('timerBtn');
      if (timerRunning) { clearInterval(timerInterval); btn.innerText = 'Start'; } 
      else {
        timerInterval = setInterval(() => {
          if (timerTime <= 0) { clearInterval(timerInterval); return; }
          timerTime -= 10;
          const ms = Math.floor((timerTime % 1000) / 10), s = Math.floor((timerTime / 1000) % 60), m = Math.floor(timerTime / 60000);
          document.getElementById('timerDigital').innerText = `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}.${ms.toString().padStart(2, '0')}`;
          document.getElementById('timerHand').style.transform = `rotate(${(timerTime / 1000) * 6}deg)`;
        }, 10);
        btn.innerText = 'Stop';
      }
      timerRunning = !timerRunning;
    }

    function resetTimer() {
      clearInterval(timerInterval); timerTime = 600000; timerRunning = false;
      document.getElementById('timerBtn').innerText = 'Start';
      document.getElementById('timerDigital').innerText = '10:00.00';
      document.getElementById('timerHand').style.transform = 'rotate(0deg)';
    }

    setInterval(updateClock, 50);
    updateClock();
  </script>
</div>