{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"countdown","type":"registry:component","title":"Event Countdown","description":"Days, hours, minutes and seconds ticking down to any target date.","author":"Notion Arena","categories":["time"],"tags":["widget","free","countdown","deadline","launch","date"],"meta":{"kind":"widget","tier":"free","version":"1.1.0","updatedAt":"2026-09-14","notionPlan":"Free","emoji":"⏳","delivery":["embed","html-block","download"],"capabilities":{"interactive":true,"offlineSafe":true,"persistsLocally":false,"writesToNotion":false,"needsNetwork":false},"embedUrl":"https://notionarena.vercel.app/embed/countdown","fileUrl":"https://notionarena.vercel.app/widgets/countdown.html","downloadUrl":"https://notionarena.vercel.app/api/widget/countdown","height":200,"minHeight":160,"maxHeight":360,"params":[{"key":"to","label":"Target date","type":"date","default":"2026-12-31","help":"ISO date, optional time: 2026-12-31T18:00"},{"key":"label","label":"Event name","type":"text","default":"Launch day"},{"key":"accent","label":"Accent","type":"color","default":"#d9730d"},{"key":"theme","label":"Theme","type":"select","default":"auto","options":[{"value":"auto","label":"Match Notion"},{"value":"light","label":"Light"},{"value":"dark","label":"Dark"}]},{"key":"compact","label":"Compact","type":"boolean","default":false}]},"files":[{"path":"widgets/countdown.html","type":"registry:file","target":"notion/widgets/countdown.html","content":"<!doctype html>\n<html lang=\"en\" data-theme=\"auto\">\n<head>\n<meta charset=\"utf-8\" />\n<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\" />\n<title>Event Countdown</title>\n<style>\n:root{--bg:#ffffff;--fg:#37352f;--muted:#787774;--surface:#f7f7f5;--border:#e9e9e7;--accent:#d9730d;\n--font:ui-sans-serif,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Helvetica,Arial,sans-serif}\nhtml[data-theme=\"dark\"]{--bg:#191919;--fg:#e6e6e4;--muted:#9b9a97;--surface:#252525;--border:#2f2f2f}\n@media (prefers-color-scheme:dark){html[data-theme=\"auto\"]{--bg:#191919;--fg:#e6e6e4;--muted:#9b9a97;--surface:#252525;--border:#2f2f2f}}\n*{box-sizing:border-box}html,body{margin:0;height:100%}\nbody{background:var(--bg);color:var(--fg);font-family:var(--font);-webkit-font-smoothing:antialiased;overflow:hidden}\n.wrap{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:18px;text-align:center}\n.label{font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:600}\n.units{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}\n.unit{min-width:78px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}\n.unit b{display:block;font-size:30px;font-weight:650;letter-spacing:-.035em;font-variant-numeric:tabular-nums;line-height:1.1;color:var(--accent)}\n.unit span{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}\n.target{font-size:12px;color:var(--muted)}\n.done b{color:var(--accent)}\n.compact .unit{min-width:60px;padding:7px 9px;border-radius:9px}\n.compact .unit b{font-size:21px}\n.wrap.compact{gap:8px}\n.bar{width:min(420px,100%);height:5px;border-radius:99px;background:var(--border);overflow:hidden}\n.bar i{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .6s ease}\n@media (max-width:420px){.unit{min-width:64px}.unit b{font-size:24px}}\n@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}\n</style>\n</head>\n<body>\n<div class=\"wrap\" id=\"wrap\">\n  <div class=\"label\" id=\"label\">Launch day</div>\n  <div class=\"units\" id=\"units\">\n    <div class=\"unit\"><b id=\"d\">0</b><span>days</span></div>\n    <div class=\"unit\"><b id=\"h\">0</b><span>hrs</span></div>\n    <div class=\"unit\"><b id=\"m\">0</b><span>min</span></div>\n    <div class=\"unit\"><b id=\"s\">0</b><span>sec</span></div>\n  </div>\n  <div class=\"bar\"><i id=\"bar\"></i></div>\n  <div class=\"target\" id=\"target\"></div>\n</div>\n<script>\n(function(){\n  var cfgEl=document.getElementById('bk-config'),base={};\n  try{base=cfgEl?JSON.parse(cfgEl.textContent||'{}'):{};}catch(e){}\n  var q=new URLSearchParams(location.search),c={};for(var k in base)c[k]=base[k];\n  q.forEach(function(v,k){c[k]=v;});\n  function bool(k,d){var v=c[k];return v===undefined?d:(v===true||v==='true'||v==='1');}\n\n  var ACCENT=c.accent||'#d9730d';\n  if(c.theme)document.documentElement.setAttribute('data-theme',c.theme);\n  if(bool('compact',false))document.getElementById('wrap').classList.add('compact');\n  document.documentElement.style.setProperty('--accent',ACCENT);\n  document.getElementById('label').textContent=c.label||'Launch day';\n\n  var raw=c.to||'';\n  var target=raw?new Date(raw.indexOf('T')>-1?raw:raw+'T00:00:00'):null;\n  if(!target||isNaN(target))target=new Date(Date.now()+30*864e5);\n  // The bar shows at least a 30-day window, so a target three days away still\n  // reads as \"almost full\" rather than \"barely started\".\n  var MIN_WINDOW=864e5*30;\n  function window_(){\n    var span=Math.max(target.getTime()-Date.now(),MIN_WINDOW);\n    return {span:span,startAt:target.getTime()-span};\n  }\n\n  var ids={d:document.getElementById('d'),h:document.getElementById('h'),m:document.getElementById('m'),s:document.getElementById('s')};\n  var bar=document.getElementById('bar'),wrap=document.getElementById('wrap'),label=document.getElementById('label');\n  document.getElementById('target').textContent=target.toLocaleString(undefined,{weekday:'short',year:'numeric',month:'short',day:'numeric',hour:'2-digit',minute:'2-digit'});\n  function pad(n){return n<10?'0'+n:''+n;}\n  function paint(){\n    var diff=target.getTime()-Date.now();\n    if(diff<=0){\n      ids.d.textContent='00';ids.h.textContent='00';ids.m.textContent='00';ids.s.textContent='00';\n      bar.style.width='100%';\n      if(!wrap.classList.contains('done')){wrap.classList.add('done');label.textContent=(c.label||'Launch day')+' · done 🎉';}\n      document.title='Done';\n      return;\n    }\n    var s=Math.floor(diff/1000),dd=Math.floor(s/86400),hh=Math.floor(s%86400/3600),mm=Math.floor(s%3600/60),ss=s%60;\n    ids.d.textContent=dd>99?String(dd):pad(dd);ids.h.textContent=pad(hh);ids.m.textContent=pad(mm);ids.s.textContent=pad(ss);\n    var w=window_();\n    var pct=Math.min(100,Math.max(0,((Date.now()-w.startAt)/w.span)*100));\n    bar.style.width=pct.toFixed(2)+'%';\n    document.title=dd+'d '+pad(hh)+':'+pad(mm)+':'+pad(ss);\n  }\n  paint();setInterval(paint,1000);\n})();\n</script>\n</body>\n</html>\n"}]}