<div id="timer-container" style="text-align: center; font-family: Arial, sans-serif; margin-top: 20px; position: relative;">

  <div id="timer" style="font-size: 48px; margin-bottom: 20px;">

   02:03

  </div>

  <button onclick="resetTimer()" style="font-size: 18px; padding: 10px 20px; margin: 5px;">

   Reset

  </button>

  <!-- Fade overlay with click-to-dismiss -->

  <div id="fade-overlay" style="

  display: none;

  position: fixed;

  top: 0; left: 0;

  width: 100vw;

  height: 100vh;

  background: rgba(0, 0, 0, 0.6);

  z-index: 9999;

  cursor: pointer;

 " onclick="dismissFade()">

  </div>

  </div>

  <script id="1202124180">

  let initialTime = 123; // 2 minutes, 3 seconds

 let timeLeft = initialTime;

 let timerId;

 let running = false;

 const overlay = document.getElementById("fade-overlay");

 function updateDisplay() {

  const minutes = String(Math.floor(timeLeft / 60)).padStart(2, '0');

  const seconds = String(timeLeft % 60).padStart(2, '0');

  document.getElementById('timer').textContent = `${minutes}:${seconds}`;

 }

 function startTimer() {

  if (running) return;

  running = true;

  timerId = setInterval(() => {

   if (timeLeft > 0) {

    timeLeft--;

    updateDisplay();

   } else {

    clearInterval(timerId);

    overlay.style.display = "block";

    running = false;

   }

  }, 1000);

 }

 function resetTimer() {

  clearInterval(timerId);

  timeLeft = initialTime;

  overlay.style.display = "none";

  running = false;

  updateDisplay();

  startTimer();

 }

 // Dismiss the fade overlay without restarting the timer

 function dismissFade() {

  overlay.style.display = "none";

 }

 updateDisplay();

 window.onload = startTimer;

  </script>

 </div>

 </div>

</div>