index.pug

html
  head
    link(href="https://fonts.googleapis.com/css?family=Roboto:400,900", rel="stylesheet")
    meta(name="viewport" content="width=device-width, initial-scale=1")
    style
      include:stylus index.styl
    script(src="index.js")
  body
    audio#bell(src="bell.mp3", preload) Your browser doesn't support the <audio> tag, so the bell sound won't work.
    svg#timer(viewBox="-43 -23 86 32")
      rect.change(data-seconds=10*60, x=-42.5, y=-23, width=17.5, height=12.5)
      rect.change(data-seconds=-10*60, x=-42.5, y=-10.5, width=17.5, height=12.5)
      rect.change(data-seconds=60, x=-25, y=-23, width=17.5, height=12.5)
      rect.change(data-seconds=-60, x=-25, y=-10.5, width=17.5, height=12.5)
      rect.change(data-seconds=10, x=7.5, y=-23, width=17.5, height=12.5)
      rect.change(data-seconds=-10, x=7.5, y=-10.5, width=17.5, height=12.5)
      rect.change(data-seconds=1, x=25, y=-23, width=17.5, height=12.5)
      rect.change(data-seconds=-1, x=25, y=-10.5, width=17.5, height=12.5)
      text#minutes(x="-25") 00
      text.colon(y="-2.5") :
      text#seconds(x="25") 00
      text.overtime(x="0",y="8") OVERTIME: STOP NOW
    .big.help.button(data-key="p") <kbd>Space</kbd>/<kbd>p</kbd>
        span#verb start/pause/resume timer
    .help
      span.tip <kbd class="button" data-key="+">+</kbd>/<kbd class="button" data-key="-">-</kbd> adjust timer duration
      span.tip.button(data-key="r") <kbd>r</kbd> reset timer
      span.tip.button(data-key="b") <kbd>b</kbd> ring bell
      span.tip.button(data-key="d") <kbd>d</kbd> dark/light
      a.tip(href="https://github.com/edemaine/timer") GitHub