Countdown Timer Widget

Preview

<!-- Countdown Widget by ToolBird -->
<div id="countdown-widget-tb"></div>
<style>.countdown-widget { background: #1a1a2e; color: #ffffff; padding: 32px; border-radius: 16px; text-align: center; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } .countdown-title { font-size: 20px; margin-bottom: 20px; font-weight: 600; } .countdown-units { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; } .countdown-unit { display: flex; flex-direction: column; align-items: center; } .countdown-value { font-size: 48px; font-weight: 700; line-height: 1; } .countdown-label { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; opacity: 0.7; margin-top: 8px; } .countdown-unit { background: #e9456015; padding: 16px 20px; border-radius: 12px; min-width: 80px; }</style>
<script>
(function(){
  var target = new Date("2026-04-24T05:45").getTime();
  var units = ['days','hours','minutes','seconds'];
  function update(){
    var d = target - Date.now();
    if(d<0) d=0;
    var vals = {
      days: Math.floor(d/86400000),
      hours: Math.floor((d/3600000)%24),
      minutes: Math.floor((d/60000)%60),
      seconds: Math.floor((d/1000)%60)
    };
    var html = '<div class="countdown-title">Launch Day</div>';
    html += '<div class="countdown-units">';
    units.forEach(function(u){
      html += '<div class="countdown-unit"><span class="countdown-value">'+String(vals[u]).padStart(2,'0')+'</span><span class="countdown-label">'+u+'</span></div>';
    });
    html += '</div>';
    document.getElementById('countdown-widget-tb').className='countdown-widget';
    document.getElementById('countdown-widget-tb').innerHTML=html;
  }
  update();
  setInterval(update,1000);
})();
</script>