examples/hanzo-app/apps/antipode.html

<!--hz {"title":"Timezones","archetype":"utility / scheduling","creator":"data","desc":"Timezone planner: live analogue and digital clocks per city, a 24-hour overlap band that shades working hours, a meeting slot picker that converts across every zone and an ICS export.","nav":[["#/","Planner"]]} -->
<div class="row" style="margin-bottom:12px">
  <h1 style="margin:0">Timezones</h1><span class="tag acc" id="here"></span>
  <span class="spacer"></span>
  <select id="add" style="max-width:230px"></select>
  <input id="when" type="datetime-local" style="max-width:210px">
  <button id="ics">Export invite</button>
</div>
<div class="grid k4" id="clocks" style="margin-bottom:16px"></div>
<div class="pane"><header>Overlap · working hours 09:00–18:00 local <span class="spacer"></span><span class="small muted" id="best"></span></header>
  <div class="scroll-x" id="band" style="padding:12px"></div></div>
<div class="pane" style="margin-top:14px"><header>The chosen moment in every zone</header>
  <div class="scroll-x"><table id="conv"></table></div></div>
<p class="hz-note" style="margin-top:14px">Every conversion uses the browser's own IANA timezone database through <code>Intl.DateTimeFormat</code>, so daylight-saving transitions are handled correctly rather than approximated with fixed offsets.</p>
<script>
const {h,fill,$,store,fmt,toast,submit} = hz;
const ZONES = ['America/Los_Angeles','America/New_York','America/Sao_Paulo','Europe/London','Europe/Amsterdam',
  'Africa/Lagos','Asia/Dubai','Asia/Kolkata','Asia/Singapore','Asia/Tokyo','Australia/Sydney','Pacific/Auckland'];
const picked = store('tz.picked', ['America/Los_Angeles','Europe/Amsterdam','Asia/Singapore','Asia/Tokyo']);
const local = Intl.DateTimeFormat().resolvedOptions().timeZone;
$('#here').textContent = 'You are in '+local;
fill($('#add'), [h('option',{value:''},'Add a city…'), ...ZONES.map(z=>h('option',{value:z},z.split('/')[1].replace(/_/g,' ')+'  ·  '+z))]);
$('#add').onchange = e => { if(!e.target.value) return;
  picked.set(v=>[...new Set([...v, e.target.value])].slice(0,8)); e.target.value=''; render(); };
const now = new Date();
$('#when').value = new Date(now.getTime() - now.getTimezoneOffset()*6e4 + 3600e3)
  .toISOString().slice(0,16);
$('#when').oninput = convert;

const parts = (d, tz) => Object.fromEntries(new Intl.DateTimeFormat('en-GB',{timeZone:tz,
  hour:'2-digit',minute:'2-digit',second:'2-digit',weekday:'short',day:'2-digit',month:'short',hour12:false})
  .formatToParts(d).map(p=>[p.type,p.value]));
const hourIn = (d, tz) => +parts(d,tz).hour + (+parts(d,tz).minute)/60;
const offset = tz => { const d=new Date();
  const s = new Intl.DateTimeFormat('en-GB',{timeZone:tz,timeZoneName:'shortOffset'}).formatToParts(d)
    .find(p=>p.type==='timeZoneName').value;
  return s.replace('GMT','UTC') || 'UTC'; };

function face(tz){
  const p = parts(new Date(), tz);
  const hh = +p.hour, mm = +p.minute, ss = +p.second;
  const day = hh>=6 && hh<19;
  const hand = (len,ang,w,col)=>hz.svg('line',{x1:50,y1:50,
    x2:50+len*Math.sin(ang), y2:50-len*Math.cos(ang), stroke:col,'stroke-width':w,'stroke-linecap':'round'});
  return h('div.stat',
    h('div.row',{style:{gap:'10px',alignItems:'center'}},
      hz.svg('svg',{viewBox:'0 0 100 100',width:56,height:56},
        hz.svg('circle',{cx:50,cy:50,r:46,fill: day? 'rgba(91,140,255,.10)':'rgba(139,92,246,.14)',
          stroke:'currentColor','stroke-opacity':.25}),
        ...Array.from({length:12},(_,i)=>hz.svg('line',{x1:50+40*Math.sin(i*Math.PI/6),
          y1:50-40*Math.cos(i*Math.PI/6), x2:50+45*Math.sin(i*Math.PI/6), y2:50-45*Math.cos(i*Math.PI/6),
          stroke:'currentColor','stroke-opacity':.3,'stroke-width':1.5})),
        hand(24,(hh%12+mm/60)*Math.PI/6,4,'currentColor'),
        hand(36,(mm+ss/60)*Math.PI/30,3,'currentColor'),
        hand(40,ss*Math.PI/30,1.5,'#f4685e')),
      h('div',
        h('div.k',tz.split('/')[1].replace(/_/g,' ')),
        h('div.v',{style:{fontSize:'21px'}}, p.hour+':'+p.minute),
        h('div.small.muted', p.weekday+' '+p.day+' '+p.month+' · '+offset(tz)))),
    h('button.g.sm',{style:{marginTop:'6px'},onclick:()=>{picked.set(v=>v.filter(x=>x!==tz));render();}},'Remove'));
}
function band(){
  const zs = picked.get();
  const rows = zs.map(tz=>{
    const nowH = hourIn(new Date(), tz);
    const cells = Array.from({length:24},(_,utc)=>{
      // What local hour is UTC hour `utc` today, in this zone?
      const d = new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth(), new Date().getUTCDate(), utc));
      const lh = +parts(d,tz).hour;
      return {utc, lh, work: lh>=9 && lh<18, awake: lh>=7 && lh<23};
    });
    return {tz, cells, nowH};
  });
  const score = Array.from({length:24},(_,utc)=>rows.filter(r=>r.cells[utc].work).length);
  const best = score.indexOf(Math.max(...score));
  $('#best').textContent = 'best overlap at '+String(best).padStart(2,'0')+':00 UTC — '+
    Math.max(...score)+' of '+rows.length+' cities in working hours';
  fill($('#band'), h('div',{style:{minWidth:'720px'}},
    h('div',{style:{display:'grid',gridTemplateColumns:'150px repeat(24,1fr)',gap:'2px',marginBottom:'4px'}},
      h('span.small.muted','UTC hour'),
      ...Array.from({length:24},(_,u)=>h('span.small.muted',{style:{textAlign:'center',fontSize:'10px'}},u))),
    rows.map(r=>h('div',{style:{display:'grid',gridTemplateColumns:'150px repeat(24,1fr)',gap:'2px',marginBottom:'3px'}},
      h('span.small.trunc', r.tz.split('/')[1].replace(/_/g,' ')),
      ...r.cells.map(c=>h('div',{title: r.tz+' '+String(c.lh).padStart(2,'0')+':00',
        style:{height:'22px',borderRadius:'4px',display:'grid',placeItems:'center',fontSize:'9px',
          color: c.work? '#08090c':'var(--fg3)',
          background: c.work? 'var(--ok)' : c.awake? 'var(--bg3)' : 'transparent',
          border: c.awake? '1px solid var(--line)':'1px solid transparent'}}, c.lh)))),
    h('div',{style:{display:'grid',gridTemplateColumns:'150px repeat(24,1fr)',gap:'2px',marginTop:'5px'}},
      h('span.small.muted','cities free'),
      ...score.map((s,u)=>h('div',{style:{textAlign:'center',fontSize:'10px',fontWeight:600,
        color: u===best? 'var(--warn)':'var(--fg3)'}}, s)))));
}
function convert(){
  const when = $('#when').value ? new Date($('#when').value) : new Date();
  fill($('#conv'),
    h('thead',h('tr',h('th','City'),h('th','Local time'),h('th','Date'),h('th','Offset'),h('th','Working hours?'))),
    h('tbody', picked.get().map(tz=>{ const p = parts(when,tz), lh = +p.hour;
      return h('tr', h('td.b',tz.split('/')[1].replace(/_/g,' ')),
        h('td.num.b',p.hour+':'+p.minute),
        h('td.small.muted',p.weekday+' '+p.day+' '+p.month),
        h('td.small',offset(tz)),
        h('td', lh>=9&&lh<18 ? h('span.tag.ok','yes') : lh>=7&&lh<23 ? h('span.tag.warn','awake') : h('span.tag.bad','night')));
    })));
}
$('#ics').onclick = () => {
  const when = new Date($('#when').value || Date.now());
  const dt = d => new Date(d).toISOString().replace(/[-:]/g,'').split('.')[0]+'Z';
  const body = ['BEGIN:VCALENDAR','VERSION:2.0','PRODID:-//Hanzo Example//Timezones//EN','BEGIN:VEVENT',
    'UID:'+Date.now()+'@example.invalid','DTSTAMP:'+dt(Date.now()),'DTSTART:'+dt(when),'DTEND:'+dt(when.getTime()+30*6e4),
    'SUMMARY:Cross-timezone sync','DESCRIPTION:Generated by an official Hanzo example.','END:VEVENT','END:VCALENDAR'].join('\r\n');
  h('a',{download:'meeting.ics',href:URL.createObjectURL(new Blob([body],{type:'text/calendar'}))}).click();
  submit('timezones.invite',{zones:picked.get(), at:when.toISOString()}).catch(()=>{});
  toast('Invite downloaded');
};
function render(){ fill($('#clocks'), picked.get().map(face)); band(); convert(); }
render(); setInterval(()=>fill($('#clocks'), picked.get().map(face)), 1000);
</script>