index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>hii :D</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <style>
      body {
        margin: 0;
        font-family: Tahoma, sans-serif;
        font-style: italic;
        font-size: 2em;
        text-decoration: underline;
        color: #ccc;
        margin-left: 1em;
        min-height: 100vh;
        display: grid;
        grid-template-rows: 1fr auto;
      }
      #toggle-sounds {
        cursor: pointer;
      }
      a {
        color: inherit;
      }
      #timer-text:hover {
        cursor: url('favicon-32x32.png'), auto;
      }
      p:hover {
        color: lightpink;
        text-decoration: underline;
        text-decoration-color: lightpink;
      }
    </style>
  </head>
  <body>
    <section>
      <p><a href="https://github.com/reeceyang/sakura-timer">sakura timer</a></p>
      <p id="timer-text">hii :D</p>
      <p id="toggle-sounds">turn sounds on</p>
    </section>
    <footer><p><a href="https://github.com/reeceyang">made with &lt;3 by reece</a></footer>
  </body>
  <script>
  var playedBefore = false;
  var soundsOn = false;
  var workStart = new Audio('mixkit-phone-ring-bell-593.wav');
  var breakStart = new Audio('mixkit-achievement-bell-600.wav');

  document.getElementById("toggle-sounds").addEventListener("click", () => {
    soundsOn = !soundsOn;
    document.getElementById("toggle-sounds").innerHTML = "turn sounds " + (soundsOn ? "off" : "on");
  });

  setInterval(() => {
    var t = new Date();
    var min = t.getMinutes();
    var s = ""
    var m;
    if (min >= 5 && min < 30) {
      if (t.getSeconds() == 0) {
        m = (30 - min);
      } else {
        m = (29 - min);
      }
      s += "work  " + m.toString();
    } else if (min >= 35 && min < 60) {
      if (t.getSeconds() == 0) {
        m = (60 - min);
      }
      else {
        m = (59 - min);
      }
      s += "work  " + m.toString();
    } else if (min >= 30) {
      if (t.getSeconds() == 0) {
        m = (35 - min);
      }
      else {
        m = (34 - min);
      }
      s += "break " + m.toString();
    } else {
      if (t.getSeconds() == 0) {
        m = (5 - min);
      }
      else {
        m = (4 - min);
      }
      s += "break " + m.toString();
    }
    s += ":" + ((60 - t.getSeconds()) % 60).toString().padStart(2, "0") + " left";
    document.title = s;
    document.getElementById("timer-text").innerHTML = s;
    if (soundsOn) {
      if ((min == 5 || min == 35) && t.getSeconds() == 0 && !playedBefore) {
        workStart.play();
        playedBefore = true;
      } else if ((min == 0 || min == 30) && t.getSeconds() == 0 && !playedBefore) {
        breakStart.play();
        playedBefore = true;
      } else if (playedBefore) {
        playedBefore = false;
      }
    }
  }, 500);
  </script>
</html>