<!doctype HTML> <html> <head> <title>Timer</title> <meta charset="utf-8"> <link rel="stylesheet" href="design/reset.css"> <link rel="stylesheet" href="design/design.css"> <link rel="stylesheet" href="design/font-awesome/css/font-awesome.min.css"> <link rel="icon" type="image/png" href="images/icon.png"> <script src="elm.js"></script> </head> <body> </body> <script> var timer = Elm.fullscreen(Elm.Main, { initialTime: new Date().getTime(), clickAway: [] }); timer.ports.clickPosition.subscribe(function(pos) { const element = document.elementFromPoint(pos.x, pos.y); if(element.nodeName != 'BUTTON') { timer.ports.clickAway.send([]); } }); const sound = new Audio('alarm.wav'); sound.addEventListener('ended', function() { this.currentTime = 0; this.play(); }, false); timer.ports.ringingTimers.subscribe(function(isRinging) { if(isRinging) { document.title = "~\\ Timer /~"; sound.play(); } else { document.title = "Timer"; sound.pause(); sound.currentTime = 0; } }); </script> </html>