{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"count-up","type":"registry:component","title":"Event Count-Up","description":"See days, hours, and minutes elapsed since a chosen milestone.","author":"Notion Arena","categories":["time"],"tags":["widget","free","count-up","elapsed time","milestone","date","counter"],"meta":{"kind":"widget","tier":"free","version":"1.0.0","updatedAt":"2026-10-11","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/count-up","fileUrl":"https://notionarena.vercel.app/widgets/count-up.html","downloadUrl":"https://notionarena.vercel.app/api/widget/count-up","height":230,"minHeight":190,"maxHeight":360,"params":[{"key":"label","label":"Milestone label","type":"text","default":"Since launch"},{"key":"since","label":"Starting date","type":"date","default":"","help":"Blank starts 30 days ago."},{"key":"accent","label":"Accent","type":"color","default":"#0f7b6c"},{"key":"theme","label":"Theme","type":"select","default":"auto","options":[{"value":"auto","label":"Match Notion"},{"value":"light","label":"Light"},{"value":"dark","label":"Dark"}]}]},"files":[{"path":"widgets/count-up.html","type":"registry:file","target":"notion/widgets/count-up.html","content":"<!doctype html>\n<html lang=\"en\" data-theme=\"auto\">\n<head>\n<meta charset=\"utf-8\" /><meta name=\"viewport\" content=\"width=device-width,initial-scale=1\" />\n<title>Count Up</title>\n<style>\n:root{--bg:#fff;--fg:#37352f;--muted:#787774;--surface:#f7f7f5;--border:#e9e9e7;--accent:#0f7b6c;--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:#343434}\n@media(prefers-color-scheme:dark){html[data-theme=\"auto\"]{--bg:#191919;--fg:#e6e6e4;--muted:#9b9a97;--surface:#252525;--border:#343434}}\n*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:var(--bg);color:var(--fg);font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden}\n.wrap{height:100%;min-height:190px;display:flex;flex-direction:column;gap:11px;padding:14px;overflow:auto}.head{display:flex;align-items:center;justify-content:space-between;gap:8px}.kicker{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:650}.title{font-size:14px;font-weight:650;margin-top:2px}.date{width:130px;height:30px;border:1px solid var(--border);border-radius:7px;background:var(--surface);color:var(--fg);padding:4px 6px;font:inherit;font-size:10px}\n.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;flex:1}.unit{display:flex;min-width:0;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:1px solid var(--border);border-radius:9px;background:var(--surface);padding:7px}.value{font-size:clamp(21px,6vw,34px);font-weight:650;letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:var(--accent);line-height:1}.caption{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}.status{min-height:14px;text-align:center;color:var(--muted);font-size:10px}\n@media(max-width:340px){.wrap{padding:10px}.date{width:112px}.grid{gap:4px}.unit{padding:5px}.value{font-size:21px}}\n@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}\n</style>\n</head>\n<body><main class=\"wrap\">\n  <header class=\"head\"><div><div class=\"kicker\">Since this date</div><div class=\"title\" id=\"title\">Count up</div></div><input class=\"date\" id=\"since\" type=\"date\" aria-label=\"Count from date\" /></header>\n  <section class=\"grid\" aria-label=\"Elapsed time\"><div class=\"unit\"><span class=\"value\" id=\"days\">0</span><span class=\"caption\">Days</span></div><div class=\"unit\"><span class=\"value\" id=\"hours\">00</span><span class=\"caption\">Hours</span></div><div class=\"unit\"><span class=\"value\" id=\"minutes\">00</span><span class=\"caption\">Minutes</span></div></section>\n  <div class=\"status\" id=\"status\" aria-live=\"polite\"></div>\n</main>\n<script>\n(function(){\n  var cfgEl=document.getElementById('bk-config'),base={};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];q.forEach(function(v,k){c[k]=v;});\n  function safeColor(v,d){return /^#[0-9a-f]{6}$/i.test(String(v||''))?String(v):d;}\n  function iso(d){return d.getFullYear()+'-'+String(d.getMonth()+1).padStart(2,'0')+'-'+String(d.getDate()).padStart(2,'0');}\n  var theme=['auto','light','dark'].indexOf(String(c.theme||'auto'))>-1?String(c.theme||'auto'):'auto',ACCENT=safeColor(c.accent,'#0f7b6c'),LABEL=String(c.label||'Count up').slice(0,48);\n  document.documentElement.setAttribute('data-theme',theme);document.documentElement.style.setProperty('--accent',ACCENT);document.getElementById('title').textContent=LABEL;document.title=LABEL;\n  var start=new Date();start.setDate(start.getDate()-30);var input=document.getElementById('since');input.value=/^\\d{4}-\\d{2}-\\d{2}$/.test(String(c.since||''))?String(c.since):iso(start);\n  function paint(){var parts=input.value.split('-').map(Number);if(parts.length!==3||!parts[0])return;var target=new Date(parts[0],parts[1]-1,parts[2]),delta=Date.now()-target.getTime(),future=delta<0,total=Math.floor(Math.abs(delta)/1000),d=Math.floor(total/86400),h=Math.floor(total%86400/3600),m=Math.floor(total%3600/60);document.getElementById('days').textContent=String(d);document.getElementById('hours').textContent=String(h).padStart(2,'0');document.getElementById('minutes').textContent=String(m).padStart(2,'0');document.getElementById('status').textContent=(future?'Starts in ':'Since ')+target.toLocaleDateString(undefined,{year:'numeric',month:'short',day:'numeric'});}\n  input.addEventListener('input',paint);paint();setInterval(paint,1000);\n})();\n</script>\n</body>\n</html>\n"}]}