{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"world-clock","type":"registry:component","title":"World Clock Board","description":"Compare local times and dates across up to six time zones.","author":"Notion Arena","categories":["dashboards"],"tags":["widget","free","world clock","timezone","remote work","travel","time"],"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/world-clock","fileUrl":"https://notionarena.vercel.app/widgets/world-clock.html","downloadUrl":"https://notionarena.vercel.app/api/widget/world-clock","height":250,"minHeight":170,"maxHeight":360,"params":[{"key":"label","label":"Widget title","type":"text","default":"World clocks"},{"key":"zones","label":"Time zones","type":"text","default":"","help":"Up to six: Asia/Karachi::Islamabad||Europe/London::London||America/New_York::New York. Blank shows the sample zones."},{"key":"h24","label":"24-hour clock","type":"boolean","default":false},{"key":"accent","label":"Accent","type":"color","default":"#2383e2"},{"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/world-clock.html","type":"registry:file","target":"notion/widgets/world-clock.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>World Clocks</title>\n<style>\n:root{--bg:#fff;--fg:#37352f;--muted:#787774;--surface:#f7f7f5;--border:#e9e9e7;--accent:#2383e2;--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:var(--font);-webkit-font-smoothing:antialiased;overflow:hidden}\n.wrap{height:100%;min-height:170px;display:flex;flex-direction:column;gap:10px;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}.local{font-size:10px;color:var(--muted)}\n.clocks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;flex:1}.clock{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:3px;padding:9px;border:1px solid var(--border);border-radius:9px;background:var(--surface)}.city{font-size:10px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.time{font-size:clamp(18px,5vw,28px);font-weight:650;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--accent);white-space:nowrap}.date{font-size:9px;color:var(--muted);white-space:nowrap}.zone{font-size:8.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n.note{font-size:9.5px;color:var(--muted)}\n@media(max-width:420px){.clocks{grid-template-columns:repeat(2,minmax(0,1fr))}.wrap{padding:11px}.clock{padding:8px}.time{font-size:22px}}\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\">Time zones</div><div class=\"title\" id=\"title\">World clocks</div></div><div class=\"local\" id=\"local\"></div></header>\n  <section class=\"clocks\" id=\"clocks\" aria-label=\"Configured world clocks\"></section>\n  <div class=\"note\" id=\"note\"></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 bool(k,d){var v=c[k];return v===undefined?d:(v===true||v==='true'||v==='1');}\n  var theme=['auto','light','dark'].indexOf(String(c.theme||'auto'))>-1?String(c.theme||'auto'):'auto',ACCENT=safeColor(c.accent,'#2383e2');\n  var LABEL=String(c.label||'World clocks').slice(0,48),H24=bool('h24',false);\n  var DEFAULT=[{zone:'Asia/Karachi',label:'Islamabad'},{zone:'Europe/London',label:'London'},{zone:'America/New_York',label:'New York'}],zones=[];\n  String(c.zones||'').split('||').slice(0,6).forEach(function(entry){var cut=entry.indexOf('::'),zone=(cut<0?entry:entry.slice(0,cut)).trim(),label=(cut<0?'':entry.slice(cut+2)).trim();if(!zone)return;try{new Intl.DateTimeFormat(undefined,{timeZone:zone});zones.push({zone:zone,label:(label||zone.split('/').pop().replace(/_/g,' ')).slice(0,32)});}catch(e){}});\n  if(!zones.length)zones=DEFAULT;\n  document.documentElement.setAttribute('data-theme',theme);document.documentElement.style.setProperty('--accent',ACCENT);\n  document.getElementById('title').textContent=LABEL;document.title=LABEL;\n  document.getElementById('local').textContent='Your time: '+new Intl.DateTimeFormat(undefined,{hour:'2-digit',minute:'2-digit'}).format(new Date());\n  var host=document.getElementById('clocks'),nodes=[];\n  zones.forEach(function(item){var card=document.createElement('article'),city=document.createElement('div'),time=document.createElement('div'),date=document.createElement('div'),zone=document.createElement('div');card.className='clock';city.className='city';time.className='time';date.className='date';zone.className='zone';city.textContent=item.label;zone.textContent=item.zone;card.appendChild(city);card.appendChild(time);card.appendChild(date);card.appendChild(zone);host.appendChild(card);nodes.push({item:item,time:time,date:date});});\n  function paint(){var now=new Date();nodes.forEach(function(n){var opts=H24?{timeZone:n.item.zone,hour:'2-digit',minute:'2-digit',hourCycle:'h23'}:{timeZone:n.item.zone,hour:'numeric',minute:'2-digit',hour12:true};n.time.textContent=new Intl.DateTimeFormat(undefined,opts).format(now);n.date.textContent=new Intl.DateTimeFormat(undefined,{timeZone:n.item.zone,weekday:'short',month:'short',day:'numeric'}).format(now);});document.getElementById('local').textContent='Your time: '+new Intl.DateTimeFormat(undefined,{hour:'2-digit',minute:'2-digit'}).format(now);}\n  document.getElementById('note').textContent=zones.length+' configured zones, using this device clock.';\n  paint();setInterval(paint,15000);\n})();\n</script>\n</body>\n</html>\n"}]}