Countdown Date

                    <section class="p-6 max-w-md mx-auto">
  <!-- 日期倒计时组件 -->
  <div class="bg-white rounded-2xl shadow-lg p-8 border border-gray-100 overflow-hidden relative">
    <!-- 背景装饰 -->
    <div class="absolute -right-12 -top-12 w-40 h-40 bg-blue-50 rounded-full opacity-50"></div>
    <div class="absolute -left-12 -bottom-12 w-40 h-40 bg-purple-50 rounded-full opacity-30"></div>
    
    <!-- 顶部装饰线 -->
    <div class="h-1 w-20 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full mb-6 relative z-10"></div>
    
    <h3 class="text-2xl font-bold text-gray-800 mb-2 text-left relative z-10">New Product Launch</h3>
    <p class="text-gray-500 text-sm mb-8 relative z-10 max-w-xs">Mark your calendar for our exciting new release and be the first to experience it.</p>
    
    <div class="grid grid-cols-4 gap-4 relative z-10">
      <!-- 天数 -->
      <div class="flex flex-col items-center">
        <div class="bg-gradient-to-br from-blue-500 to-blue-600 w-full pt-2 pb-3 rounded-xl shadow-md relative overflow-hidden group">
          <div class="absolute inset-0 bg-white opacity-10 group-hover:opacity-0 transition-opacity duration-300"></div>
          <span id="date-days" class="text-3xl font-bold text-white block text-center tabular-nums">24</span>
        </div>
        <span class="text-xs mt-2 text-gray-600 font-medium tracking-wider uppercase">DAYS</span>
      </div>
      
      <!-- 小时 -->
      <div class="flex flex-col items-center">
        <div class="bg-gradient-to-br from-blue-600 to-indigo-600 w-full pt-2 pb-3 rounded-xl shadow-md relative overflow-hidden group">
          <div class="absolute inset-0 bg-white opacity-10 group-hover:opacity-0 transition-opacity duration-300"></div>
          <span id="date-hours" class="text-3xl font-bold text-white block text-center tabular-nums">18</span>
        </div>
        <span class="text-xs mt-2 text-gray-600 font-medium tracking-wider uppercase">HOURS</span>
      </div>
      
      <!-- 分钟 -->
      <div class="flex flex-col items-center">
        <div class="bg-gradient-to-br from-indigo-600 to-purple-600 w-full pt-2 pb-3 rounded-xl shadow-md relative overflow-hidden group">
          <div class="absolute inset-0 bg-white opacity-10 group-hover:opacity-0 transition-opacity duration-300"></div>
          <span id="date-minutes" class="text-3xl font-bold text-white block text-center tabular-nums">45</span>
        </div>
        <span class="text-xs mt-2 text-gray-600 font-medium tracking-wider uppercase">MINUTES</span>
      </div>
      
      <!-- 秒钟 -->
      <div class="flex flex-col items-center">
        <div class="bg-gradient-to-br from-purple-600 to-pink-600 w-full pt-2 pb-3 rounded-xl shadow-md relative overflow-hidden group">
          <div class="absolute inset-0 bg-white opacity-10 group-hover:opacity-0 transition-opacity duration-300"></div>
          <span id="date-seconds" class="text-3xl font-bold text-white block text-center tabular-nums">19</span>
        </div>
        <span class="text-xs mt-2 text-gray-600 font-medium tracking-wider uppercase">SECONDS</span>
      </div>
    </div>
    
    <div class="mt-8 text-center relative z-10">
      <div class="inline-flex items-center px-4 py-2 bg-gray-50 rounded-full">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-blue-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
        </svg>
        <span class="text-sm text-gray-700">Target Date: <span id="target-date" class="font-semibold text-blue-600">November 15, 2023</span></span>
      </div>
    </div>
  </div>

  <script>
    // 工具函数：获取两个日期之间的时间差（毫秒）
    function getTimeRemaining(endtime) {
      const total = Date.parse(endtime) - Date.now();
      const seconds = Math.floor((total / 1000) % 60);
      const minutes = Math.floor((total / 1000 / 60) % 60);
      const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
      const days = Math.floor(total / (1000 * 60 * 60 * 24));

      return {
        total,
        days,
        hours,
        minutes,
        seconds
      };
    }

    // 格式化数字为两位数（补零）
    function formatNumber(num) {
      return num < 10 ? `0${num}` : num;
    }

    // 日期倒计时初始化
    function initDateCountdown(endtime) {
      const daysElement = document.getElementById('date-days');
      const hoursElement = document.getElementById('date-hours');
      const minutesElement = document.getElementById('date-minutes');
      const secondsElement = document.getElementById('date-seconds');
      
      function updateClock() {
        const t = getTimeRemaining(endtime);
        
        if (daysElement) daysElement.textContent = formatNumber(t.days);
        if (hoursElement) hoursElement.textContent = formatNumber(t.hours);
        if (minutesElement) minutesElement.textContent = formatNumber(t.minutes);
        if (secondsElement) secondsElement.textContent = formatNumber(t.seconds);
        
        if (t.total <= 0) {
          clearInterval(timeinterval);
        }
      }
      
      updateClock();
      const timeinterval = setInterval(updateClock, 1000);
      return timeinterval;
    }

    // 设置倒计时结束时间（当前时间 + 25天）
    const deadline = new Date();
    deadline.setDate(deadline.getDate() + 25);
    
    // 格式化日期显示
    const targetDateElement = document.getElementById('target-date');
    if (targetDateElement) {
      const options = { year: 'numeric', month: 'long', day: 'numeric' };
      targetDateElement.textContent = deadline.toLocaleDateString('en-US', options);
    }
    
    // 初始化日期倒计时
    initDateCountdown(deadline);
  </script>
</section>