Just copy-paste the code into your address bar or save it as bookmark.
data:text/html,<body id=o onload="w=_=>new Date;s=w();setInterval`t=w()-s;o.innerHTML=[36e5,6e4,1e3,10].map(u=>(v=t>=u?~~(t/u):0,t%=u,v>9?v:'0'+v)).join(':')`"style=font:20vw'>
It doesn't have the milliseconds.
data:text/html,<body id=o onload="w=_=>new Date;s=w();setInterval`t=w()-s;o.innerHTML=[36e5,6e4,1e3].map(u=>(v=t>=u?~~(t/u):0,t%=u,v>9?v:'0'+v)).join(':')`"style=font:27vw'>
Adjust the time at "3e5" which equates to 300,000 ms. 60k ms is one minute.
data:text/html,<body id=o onload="w=_=>new Date();s=w();setInterval`t=3e5-(w()-s);o.innerHTML=[36e5,6e4,1e3].map(u=>{v=t>=u?~~(t/u):0;t%=u;return v>9?v:'0'+v}).join(':')`"style=font:27vw/96vh'>
Adjust the time at "3e5" which equates to 300,000 ms. 60k ms is one minute.
Click to start and restart timer.
data:text/html,<center id=o style=font:20vw/96vh' onclick="a=0;p=_=>{a=1;d=new AudioContext();l=d.createOscillator();l.frequency.value=800;l.connect(d.destination);l.start();setTimeout(()=>l.stop(),1e3)};w=_=>new Date();s=w();setInterval`t=3e5-(w()-s);if(t<=0&&!a)p();o.innerHTML=[36e5,6e4,1e3].map(u=>(v=t>=u?~~(t/u):0,t%=u,v>9?v:'0'+v)).join(':')`">5m
Same but uses an emoji. 371b
data:text/html,<meta charset=utf8><center id=o style=font:20vw/96vh' onclick="a=0;p=_=>{a=1;d=new AudioContext();l=d.createOscillator();l.frequency.value=800;l.connect(d.destination);l.start();setTimeout(()=>l.stop(),1e3)};w=_=>new Date();s=w();setInterval`t=3e5-(w()-s);if(t<=0&&!a)p();o.innerHTML=[36e5,6e4,1e3].map(u=>(v=t>=u?~~(t/u):0,t%=u,v>9?v:'0'+v)).join(':')`">⌚
Select the time to start the timer. It will beep when thet timer is done.
<body onload="s.innerHTML=[0,1,2,3,5].map(b=>`<option>${b}`).join``;p=_=>{a=1;d=new AudioContext();l=d.createOscillator();l.frequency.value=800;l.connect(d.destination);l.start();setTimeout(_=>l.stop(),1e3)}"><select id=s
onchange="e=event;a=0;w=_=>new Date();s=w();setInterval`t=e.target.value*6e4-(w()-s);if(t<=0&&!a)p();o.innerHTML=[36e5,6e4,1e3].map(u=>(v=t>=u?~~(t/u):0,t%=u,v>9?v:'0'+v)).join(':')`"></select>m<p id=o style=font:27vw/9vh'>
See original gist.
data:text/html,Alarm<select id=h></select>:<select id=m></select> <input style=border:0><body onload='p=u=>(u>9?"":"0")+u;b=_=>{d=new AudioContext;l=d.createOscillator();l.frequency.value=800;l.connect(d.destination);l.start();setTimeout(()=>l.stop(),500)};u=n=>Array(n).fill().map((_,i)=>`<option>${p(i)}</option>`).join``;h.innerHTML=u(24);m.innerHTML=u(60);setInterval(()=>{d=new Date;a=[H,M,S]=[d.getHours(),d.getMinutes(),d.getSeconds()].map(p);e=H===h.value&&M===m.value;if(e)b();o.style.color=(e&&S%2?"red":"");o.innerHTML=a.join`:`;},1000)'><center id=o style=font:25vw/90vh'>
Just the countdown timer (192b)
data:text/html,<body id=a onload='setInterval(_=>{t=(new Date("2025-1-1")-Date.now())/1e4;a.innerHTML=[8640,360,6,.1].map(u=>(v=t>=u?~~(t/u):0,t%=u,v>9?v:"0"+v)).join`:`},9)'style=font:20vw'>Add a custom header (274b)
data:text/html,<body onload='setInterval(_=>{t=(new Date("2025-1-1")-Date.now())/1e4;a.innerHTML=[8640,360,6,.1].map(u=>(v=t>=u?~~(t/u):0,t%=u,v>9?v:"0"+v)).join`:`},9)'style=text-align:center;font:15vw'><p contenteditable spellcheck=false></p><p id=a></p><style>p{margin:0}