Urgency Countdown Bar Generator

<style>
.ub-bar{position:fixed;top:0;left:0;right:0;background:#1a1a2e;color:#ffffff;padding:10px 16px;font-family:system-ui,sans-serif;font-size:14px;text-align:center;z-index:9999;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.ub-msg{font-weight:500}
.ub-timer{display:inline-flex;gap:4px;font-weight:700}
.ub-unit{background:#ef4444;color:#fff;padding:2px 6px;border-radius:4px;min-width:28px;text-align:center;font-size:15px}
.ub-sep{font-weight:700;color:#ef4444}
.ub-progress{position:absolute;bottom:0;left:0;height:3px;background:#ef4444;transition:width 1s linear}
</style>

<div class="ub-bar" id="ubBar">
  <span class="ub-msg">Sale ends in:</span>
  <span class="ub-timer" id="ubTimer"></span>
  <div class="ub-progress" id="ubProg" style="width:100%"></div>
</div>

<script>
(function(){var t=9000,bar=document.getElementById("ubBar"),tm=document.getElementById("ubTimer"),pg=document.getElementById("ubProg");
function pad(n){return n<10?"0"+n:n}
function tick(){if(t<=0){bar.querySelector(".ub-msg").textContent="Sale has ended!";tm.style.display="none";pg.style.width="0%";return}
var h=Math.floor(t/3600),m=Math.floor((t%3600)/60),s=t%60;
tm.innerHTML='<span class="ub-unit">'+pad(h)+'</span><span class="ub-sep">:</span><span class="ub-unit">'+pad(m)+'</span><span class="ub-sep">:</span><span class="ub-unit">'+pad(s)+'</span>';
pg.style.width=Math.round((t/9000)*100)+"%";t--;setTimeout(tick,1000)}
tick()})();
</script>