Evergreen countdown timer that remembers the visitor (similar to Deadline Funnel)

<!-- Google Fonts link to use the "Inter" font -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400&display=swap" rel="stylesheet">

<div class="timer-container">
  <div id="countdown">--:--:--</div>
</div>

<style>
  /* Style for the timer container */
  .timer-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    background-color: #dc0000;
    width: 100%;
  }
  /* Timer styling */
  #countdown {
    font-size: 1.5rem;
    font-family: 'Inter', sans-serif;
    color: white;
    font-weight: 700;
  }
</style>

<script>
  // Set the timer duration (20 minutes = 20 * 60 * 1000 ms)
  const timerDuration = 20 * 60 * 1000; // 20 minutes in milliseconds
  const countdownEl = document.getElementById('countdown');
  const redirectUrl = "https://getsalesrocket.com/end";
  const localStorageKey = "countdownEndTime";
  const resetTimeDuration = 24 * 60 * 60 * 1000; // 24 hours in milliseconds (Change this variable for different reset times)

  // Function to start the countdown
  function startCountdown(endTime) {
    const interval = setInterval(() => {
      const currentTime = new Date().getTime();
      const distance = endTime - currentTime;

      if (distance <= 0) {
        clearInterval(interval);
        localStorage.removeItem(localStorageKey); // Clear the saved end time
        window.location.href = redirectUrl; // Redirect when time is up
      } else {
        const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((distance % (1000 * 60)) / 1000);

        // Display the timer in "MM:SS" format
        countdownEl.innerHTML = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
      }
    }, 1000);
  }

  // Get saved end time from localStorage
  function getSavedEndTime() {
    const savedEndTime = localStorage.getItem(localStorageKey);
    if (savedEndTime) {
      const currentTime = new Date().getTime();
      if (currentTime < savedEndTime) {
        return savedEndTime;
      } else {
        localStorage.removeItem(localStorageKey); // Time has passed, clear the old data
      }
    }
    return null;
  }

  // Main function to handle the timer logic
  function handleTimer() {
    const savedEndTime = getSavedEndTime();

    if (savedEndTime) {
      startCountdown(parseInt(savedEndTime, 10));
    } else {
      const endTime = new Date().getTime() + timerDuration;
      localStorage.setItem(localStorageKey, endTime);
      startCountdown(endTime);
    }
  }

  // After resetTimeDuration, allow access to the original page
  function checkAccess() {
    const savedEndTime = localStorage.getItem(localStorageKey);
    if (savedEndTime) {
      const timePassed = new Date().getTime() - parseInt(savedEndTime, 10);
      if (timePassed > resetTimeDuration) {
        localStorage.removeItem(localStorageKey); // Allow access after resetTimeDuration
      }
    }
  }

  // Run access check and then handle the timer
  checkAccess();
  handleTimer();
</script>