Chalkboard Timer - MeggiTools

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Chalkboard Timer</title>
  <style>
    body {
      font-family: 'Chalkboard SE', sans-serif;
      background: #2c3e50;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }
    .timer-container {
      background: #34495e;
      border-radius: 15px;
      padding: 30px;
      text-align: center;
      max-width: 400px;
      width: 100%;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    }
    .timer {
      font-size: 3em;
      margin: 20px 0;
      color: #ecf0f1;
      text-shadow: 2px 2px #2c3e50;
    }
    .controls {
      display: flex;
      justify-content: space-around;
    }
    button {
      background: #e74c3c;
      border: none;
      border-radius: 5px;
      color: #fff;
      padding: 10px 20px;
      font-size: 1em;
      cursor: pointer;
      transition: background 0.3s;
    }
    button:hover {
      background: #c0392b;
    }
    button:disabled {
      background: #7f8c8d;
      cursor: not-allowed;
    }
  </style>
</head>
<body>
  <div class="timer-container">
    <h1>Chalkboard Timer</h1>
    <div class="timer" id="timer">00:00:00</div>
    <div class="controls">
      <button id="start">Start</button>
      <button id="stop" disabled>Stop</button>
      <button id="reset" disabled>Reset</button>
    </div>
  </div>
  <script>
    let timerInterval;
    let elapsedTime = 0;
    const timerElement = document.getElementById('timer');
    const startButton = document.getElementById('start');
    const stopButton = document.getElementById('stop');
    const resetButton = document.getElementById('reset');
    function updateTimer() {
      const hours = String(Math.floor(elapsedTime / 3600)).padStart(2, '0');
      const minutes = String(Math.floor((elapsedTime % 3600) / 60)).padStart(2, '0');
      const seconds = String(elapsedTime % 60).padStart(2, '0');
      timerElement.textContent = `${hours}:${minutes}:${seconds}`;
    }
    function startTimer() {
      startButton.disabled = true;
      stopButton.disabled = false;
      resetButton.disabled = true;
      timerInterval = setInterval(() => {
        elapsedTime++;
        updateTimer();
      }, 1000);
    }
    function stopTimer() {
      clearInterval(timerInterval);
      startButton.disabled = false;
      stopButton.disabled = true;
      resetButton.disabled = false;
    }
    function resetTimer() {
      elapsedTime = 0;
      updateTimer();
      resetButton.disabled = true;
    }
    startButton.addEventListener('click', startTimer);
    stopButton.addEventListener('click', stopTimer);
    resetButton.addEventListener('click', resetTimer);
  </script>
</body>
</html>