Tạo trang "Coming Soon" (Sắp ra mắt) với CSS và JavaScript

Trang Coming Soon với background toàn màn hình, bộ đếm ngược thời gian thực tế bằng JavaScript.

Ví dụ

<!DOCTYPE html>
<html>
<style>
  body {
    height: 100vh;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
  }
  .timer {
    text-align: center;
    font-size: 60px;
    margin-top: 0px;
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
  }
  .bgimg {
    background-image: url("https://i.picsum.photos/id/829/800/800.jpg");
    height: 100%;
    background-position: center;
    background-size: cover;
    position: relative;
    color: white;
    font-size: 25px;
  }
  .middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }
  hr {
    margin: 20px auto;
    width: 40%;
    border-color: rgba(255,255,255,0.5);
  }
  @media (max-width: 600px) {
    .timer { font-size: 40px; }
  }
</style>
<body>
  <div class="bgimg">
    <div class="middle">
      <h1>SẮP RA MẮT</h1>
      <hr />
      <h2 class="timer"></h2>
    </div>
  </div>
  <script>
    // Đặt ngày mục tiêu (ví dụ: 30 ngày từ bây giờ)
    const countDownDate = new Date();
    countDownDate.setDate(countDownDate.getDate() + 30);
    countDownDate.setHours(12, 0, 0, 0);
    
    const timerEl = document.querySelector(".timer");
    const updateTimer = () => {
      const now = new Date().getTime();
      const timeLeft = countDownDate - now;
      
      if (timeLeft < 0) {
        timerEl.innerHTML = "ĐÃ RA MẮT!";
        clearInterval(interval);
        return;
      }
      
      const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
      const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
      
      timerEl.innerHTML = `${days}ng ${hours}g ${minutes}p ${seconds}s`;
    };
    
    updateTimer();
    const interval = setInterval(updateTimer, 1000);
  </script>
</body>
</html>

Kết quả

Trang toàn màn hình với ảnh nền, chữ "SẮP RA MẮT", đường kẻ ngang, bộ đếm ngược ngày/giờ/phút/giây cập nhật realtime.

Tính năng

• Background cover full viewport
• Timer cập nhật mỗi giây (setInterval)
• Tự động dừng khi hết hạn
• Responsive font-size trên mobile