Professional Timer - MeggiTools

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Professional Timer</title>
  <style>
    body {
      font-family: 'Arial', sans-serif;
      background: linear-gradient(to right, #ffecd2 0%, #fcb69f 100%);
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }
    .timer-container {
      background: white;
      border-radius: 25px;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
      padding: 30px;
      text-align: center;
      max-width: 400px;
      width: 100%;
      animation: fadeIn 1s ease-in-out;
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    .timer {
      font-size: 3em;
      margin: 20px 0;
    }
    .controls {
      display: flex;
      justify-content: space-around;
      margin-top: 20px;
    }
    button {
      background: linear-gradient(to right, #56ccf2, #2f80ed);
      border: none;
      border-radius: 30px;
      color: white;
      padding: 10px 20px;
      font-size: 1em;
      cursor: pointer;
      transition: transform 0.2s, box-shadow 0.2s;
      outline: none;
    }
    button:hover {
      transform: scale(1.1);
      box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
    }
    button:active {
      transform: scale(1.05);
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    }
    button:disabled {
      background: #ccc;
      cursor: not-allowed;
    }
  </style>
</head>
<body>
  <div class="timer-container">
    <h1>⏰ Professional 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>