<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Under Construction</title>
    <style>
      /* General Styling */
      body {
          margin: 0;
          font-family: 'Arial', sans-serif;
          background: linear-gradient(135deg, #2c3e50, #4a586e);
          color: #ffffff;
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100vh;
          overflow: hidden;
      }

      /* Container */
      .container {
          text-align: center;
          padding: 20px;
          max-width: 500px;
      }

      /* Title and Subtitle */
      h1 {
          font-size: 3rem;
          margin-bottom: 1rem;
      }

      p {
          font-size: 1.2rem;
          margin-bottom: 2rem;
          line-height: 1.6;
      }

      /* Countdown Timer */
      .countdown {
          display: flex;
          justify-content: space-around;
          gap: 10px;
      }

      .time {
          background: rgba(255, 255, 255, 0.2);
          padding: 20px;
          border-radius: 10px;
          text-align: center;
          width: 80px;
      }

      .time span {
          display: block;
          font-size: 2rem;
          font-weight: bold;
      }

      time small {
          font-size: 0.9rem;
          color: rgba(255, 255, 255, 0.8);
      }

      /* Responsive */
      @media (max-width: 600px) {
          h1 {
              font-size: 2rem;
          }
          p {
              font-size: 1rem;
          }
      }
    </style>
</head>
<body>
  <div class="container">
    <div class="content">
        <h1>We're Under Construction</h1>
        <p>We're working hard to bring you a better experience. Stay tuned!</p>
        
          <p>Updating Systems</p>
        
        
        
            <!-- Countdown Timer -->
            <div class="countdown">
                <div class="time">
                    <span id="days">00</span>
                    <small>Days</small>
                </div>
                <div class="time">
                    <span id="hours">00</span>
                    <small>Hours</small>
                </div>
                <div class="time">
                    <span id="minutes">00</span>
                    <small>Minutes</small>
                </div>
                <div class="time">
                    <span id="seconds">00</span>
                    <small>Seconds</small>
                </div>
            </div>
        
    </div>
</div>
<script>
    
    const targetDate = new Date("2025-03-31T21:58:34").getTime();

    function updateCountdown() {
        const now = new Date().getTime();
        const difference = targetDate - now;

        if (difference > 0) {
            const days = Math.floor(difference / (1000 * 60 * 60 * 24));
            const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((difference % (1000 * 60)) / 1000);

            document.getElementById("days").textContent = String(days).padStart(2, "0");
            document.getElementById("hours").textContent = String(hours).padStart(2, "0");
            document.getElementById("minutes").textContent = String(minutes).padStart(2, "0");
            document.getElementById("seconds").textContent = String(seconds).padStart(2, "0");
        } else {
            document.querySelector(".countdown").textContent = "We're Live!";
        }
    }

    setInterval(updateCountdown, 1000);
    
</script>
</body>
</html>
