Break Timer

<!-- Break Timer -- copy this whole block into any HTML page. -->
<!-- No build step, no dependencies -- plain HTML, CSS, and JS. -->

<div id="break-timer">
  <div class="bt-display">
    <span class="bt-phase" id="btPhase">Work</span>
    <span class="bt-clock" id="btClock">25:00</span>
    <span class="bt-cycle" id="btCycle">Cycle 1</span>
  </div>
  <div class="bt-settings">
    <label>Work (min) <input type="number" id="btWork" value="25" min="1" max="120"></label>
    <label>Break (min) <input type="number" id="btBreak" value="5" min="1" max="60"></label>
  </div>
  <div class="bt-controls">
    <button id="btStart" type="button">Start</button>
    <button id="btReset" type="button">Reset</button>
  </div>
</div>

<style>
  /* Minimal styling -- restyle freely to match your own site. */
  #break-timer { font-family: sans-serif; max-width: 320px; text-align: center; }
  .bt-display { margin-bottom: 12px; }
  .bt-clock { display: block; font-size: 2.5rem; font-weight: 700; }
  .bt-phase { display: block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
  .bt-cycle { display: block; font-size: 0.8rem; opacity: 0.7; }
  .bt-settings { display: flex; gap: 12px; justify-content: center; margin-bottom: 12px; }
  .bt-settings input { width: 60px; }
  .bt-controls button { padding: 8px 16px; margin: 0 4px; cursor: pointer; }
</style>

<script>
(function () {
  // Grab all the elements we need up front.
  var startBtn = document.getElementById('btStart');
  var resetBtn = document.getElementById('btReset');
  var clockEl = document.getElementById('btClock');
  var phaseEl = document.getElementById('btPhase');
  var cycleEl = document.getElementById('btCycle');
  var workInput = document.getElementById('btWork');
  var breakInput = document.getElementById('btBreak');

  // State: which phase we're in, how many seconds are left,
  // and which work/break cycle we're on.
  var phase = 'work';
  var secondsLeft = Number(workInput.value) * 60;
  var cycle = 1;
  var intervalId = null;

  // Turn a raw seconds count into "MM:SS" for display.
  function formatClock(totalSeconds) {
    var m = Math.floor(totalSeconds / 60).toString().padStart(2, '0');
    var s = Math.floor(totalSeconds % 60).toString().padStart(2, '0');
    return m + ':' + s;
  }

  // Push the current state onto the page.
  function render() {
    clockEl.textContent = formatClock(secondsLeft);
    phaseEl.textContent = phase === 'work' ? 'Work' : 'Break';
    cycleEl.textContent = 'Cycle ' + cycle;
  }

  // A short tone on each phase change, built with the Web Audio API
  // so there's no audio file to host or load.
  function beep() {
    try {
      var Ctx = window.AudioContext || window.webkitAudioContext;
      var ctx = new Ctx();
      var osc = ctx.createOscillator();
      var gain = ctx.createGain();
      osc.connect(gain);
      gain.connect(ctx.destination);
      osc.frequency.value = phase === 'work' ? 660 : 880;
      gain.gain.setValueAtTime(0.15, ctx.currentTime);
      osc.start();
      osc.stop(ctx.currentTime + 0.35);
    } catch (err) {
      // If the browser blocks audio (e.g. no user interaction yet), just skip it.
    }
  }

  // Flip from work to break, or break back to work, and load the
  // clock with whichever phase's duration comes next.
  function switchPhase() {
    beep();
    if (phase === 'work') {
      phase = 'break';
      secondsLeft = Number(breakInput.value) * 60;
    } else {
      phase = 'work';
      cycle += 1;
      secondsLeft = Number(workInput.value) * 60;
    }
    render();
  }

  // Runs once a second while the timer is active.
  function tick() {
    secondsLeft -= 1;
    if (secondsLeft <= 0) {
      switchPhase();
      return;
    }
    render();
  }

  function stop() {
    if (intervalId) {
      clearInterval(intervalId);
      intervalId = null;
    }
    startBtn.textContent = 'Start';
  }

  function start() {
    intervalId = setInterval(tick, 1000);
    startBtn.textContent = 'Pause';
  }

  // Start/pause toggle.
  startBtn.addEventListener('click', function () {
    if (intervalId) {
      stop();
    } else {
      start();
    }
  });

  // Reset always goes back to a fresh work phase, cycle 1.
  resetBtn.addEventListener('click', function () {
    stop();
    phase = 'work';
    cycle = 1;
    secondsLeft = Number(workInput.value) * 60;
    render();
  });

  // Let changing the inputs update the clock immediately, but only
  // if the timer isn't running and we're in the matching phase --
  // otherwise you'd yank time out from under an active countdown.
  workInput.addEventListener('change', function () {
    if (!intervalId && phase === 'work') {
      secondsLeft = Number(workInput.value) * 60;
      render();
    }
  });
  breakInput.addEventListener('change', function () {
    if (!intervalId && phase === 'break') {
      secondsLeft = Number(breakInput.value) * 60;
      render();
    }
  });

  render();
})();
</script>