index.html

<style>
  @font-face {
            font-family: 'Century Gothic';
            src: url('.\\Century\\Gothic.ttf');
        }
  span {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
  }
  div {
    font-family: Century Gothic;
    height: 100%;
    line-height: 100px;
    text-align: center;
  }
</style>
<body>
  <div>
    <span>
        <h1 style="text-align:center">hi go take a break now</h1>
        <h1 style="text-align:center" id="timer"></h1>
    </span>
</div>
<script src="/socket.io.js"></script>
<script>
  var socket = io('http://localhost:8899');
  var interval = setInterval(async function() {
      var focused = document.hasFocus();
      if(!focused) {
        clearInterval(interval);
        socket.emit("unfocused")
        window.close()
      }
  }, 100);
  socket.on('close', () => {window.close()})
  socket.on('time', (t) => {
    document.getElementById('timer').innerText = "Time left: " + t + " seconds.";
  })
</script>
</body>


