index.html

<!DOCTYPE html>
<html>
<head>
  <title>Talk Timer</title>

  <meta charset="utf-8">

  <meta property="og:title" content="Simple talk timer">
  <meta property="og:description" content="A simple one-page talk timer, excellent for lightning talks. Works offline, too." />
  <meta property="og:image" content="https://ddimitrov.name/talktimer/timer.png" />
  <meta property="og:image:alt" content="Screenshot of the talk timer in action." />
  <meta property="og:image:width" content="1441" />
  <meta property="og:image:height" content="1164" />

  <style type="text/css">
    body, html {
      min-height: 100%;
    }
    body {
      padding: 0;
      margin: 0;
      border: none;
      font-family: Arial, sans-serif;
    }
    .timer-display {
      display: none;
      text-align: center;
      line-height: 100%;
      font-size: 100px;
      white-space: nowrap;
      box-sizing: border-box;
      font-family: Impact, Arial, sans-serif;
      font-weight: bold;
      letter-spacing: -0.01em;
    }
    .timer-active .timer-display {
      display: block;
    }
    .timer-display .seconds {
      font-size: 0.7em;
      display: inline-block;
      width: 1.2em;
      text-align: left;
      font-weight: normal;
    }
    .hide-seconds .timer-display .seconds {
      display: none;
    }
    body {
      background-color: #000;
    }
    body .timer-display,
    body .help {
      color: #FFF;
    }
    .help {
      padding: 1em 2em;
    }
    .help fieldset {
      margin: 1em 0;
      border: 1px solid rgba(255, 255, 255, 0.3);
    }
    .help p .text {
      display: block;
      margin: 0.3em 0;
    }
    .help p.radio .text {
      display: inline-block;
    }
    .help input {
      font-size: 1.2em;
    }
    .help input[type=number] {
      width: 4em;
    }
    .timer-active .help {
      display: none;
    }
    html.timer-active,
    .timer-active body {
      background-color: green;
    }
    html.little-time-remaining,
    .little-time-remaining body {
      background-color: #C5B231;
    }
    html.no-time-remaining,
    .no-time-remaining body {
      background-color: #8f0000;
    }
    a[href=toggle-fullscreen] .enter { display: block; }
    a[href=toggle-fullscreen] .exit  { display: none; }
    .in-fullscreen a[href=toggle-fullscreen] .enter { display: none; }
    .in-fullscreen a[href=toggle-fullscreen] .exit  { display: block; }
    .controls {
      display: none;
      position: fixed;
      top: 0;
      right: 0;
    }
    .timer-active .controls {
      display: block;
    }
    .controls a {
      display: block;
      float: left;
      padding: 0.5em;
      margin: 0.3em 0.3em 0 0;
      width: 1em;
      height: 1em;
      text-align: center;
      font-weight: bold;
      font-size: 2.2em;
      line-height: 1em;
      text-decoration: none;
      color: rgba(255, 255, 255, 0.5);
      background-color: rgba(255, 255, 255, 0.2);
    }
    .github { float: right; }
    p a { color: #20C9FF; }
  </style>
  <script type="text/javascript" src="lib/vendor/zepto/zepto.min.js"></script>
  <script type="text/javascript">
    $(function () {
      var params = {};
      var startedAt = null;
      var updateTimerDisplayInterval = null;
      var totalDurationInSeconds = null;
      var warnAtInSeconds = null;
      var timerDisplay = $('.timer-display');

      var storeState = function (state) {
        if (window.localStorage === undefined) return;
        var prefix = '_talk_timer_';

        for (var fieldName in state) {
          localStorage[prefix + fieldName] = state[fieldName];
        }
      };

      var loadState = function () {
        var state = {};
        var prefix = '_talk_timer_';

        if (window.localStorage === undefined) return state;

        for (var key in localStorage) {
          if (key.indexOf(prefix) === 0) {
            state[key.substring(prefix.length)] = localStorage[key];
          }
        }

        return state;
      }

      var setStateInUI = function (state) {
        if (!state) return;

        for (var fieldName in state) {
          var value = state[fieldName];
          var field = $('form input[name="' + fieldName + '"]');

          if (field.eq(0).is('[type=radio]')) {
            field.filter('[value="' + value + '"]').prop('checked', true);
          } else {
            field.val(value);
          }
        }
      };

      var isHexColor = function (colorString) {
        return colorString.match(/^[0-9a-f]{3}|[0-9a-f]{6}$/);
      }

      var parseColor = function (colorString) {
        if (isHexColor(colorString)) {
          return '#' + colorString;
        } else {
          return colorString;
        }
      };

      var initializeFromParams = function (paramsString) {
        if (paramsString.match(/^\d+$/)) {
          params['time'] = paramsString;
          params['time-in'] = 'minutes';
          params['font-height-percentage'] = 70;
        } else if (paramsString !== '') {
          paramsString.split('&').forEach(function(keyValuePair) {
            var pairParts = keyValuePair.split('=');
            var name      = pairParts[0];
            var value     = pairParts[1];

            params[name] = value;
          });
        } else {
          params = {};
        }

        setStateInUI(params);

        if (params['time'] && params['time-in']) {
          totalDurationInSeconds = parseInt(params['time'], 10);

          if (params['time-in'] === 'minutes') {
            totalDurationInSeconds *= 60;
          }
        } else {
          totalDurationInSeconds = null;
        }

        if (!totalDurationInSeconds) {
          return;
        }

        if (params['warn-at'] && params['warn-time-in']) {
          warnAtInSeconds = parseInt(params['warn-at'], 10);

          if (params['warn-time-in'] === 'minutes') {
            warnAtInSeconds *= 60;
          }
        } else {
          warnAtInSeconds = 0;
        }

        $('html').toggleClass('hide-seconds', params['hide-seconds'] === 'true');

        storeState(params);

        restartTimer();
      };

      var updateTimerDisplay = function () {
        var elapsedTime                = Math.round((new Date() - startedAt) / 1000);
        var remainingDurationInSeconds = totalDurationInSeconds - elapsedTime;
        var remainingDurationMinutes   = Math.floor(Math.abs(remainingDurationInSeconds) / 60);
        var remainingDurationSeconds   = Math.abs(remainingDurationInSeconds % 60);

        if (remainingDurationSeconds < 10) {
          remainingDurationSeconds = '0' + remainingDurationSeconds;
        }

        if (remainingDurationInSeconds < 0) {
          remainingDurationMinutes = '-' + remainingDurationMinutes;
        }

        timerDisplay.html(remainingDurationMinutes + '<span class="seconds">:' + remainingDurationSeconds + '</span>');

        if (remainingDurationInSeconds <= warnAtInSeconds) {
          $('html').addClass('little-time-remaining');
        }

        if (remainingDurationInSeconds < 0) {
          $('html').addClass('no-time-remaining');
        }
      };

      var resizeTimerDisplay = function () {
        var height = parseInt($(window).height());
        var fontSizePercentage = params['font-height-percentage'] ? params['font-height-percentage'] / 100.0 : 0.7;

        timerDisplay
          .height(height)
          .css({
            fontSize: (height * fontSizePercentage),
            paddingTop: (height * (1 - fontSizePercentage) / 2)
          });
      };

      var restartTimer = function () {
        startedAt = new Date();

        stopTimer();

        $('html').removeClass('little-time-remaining no-time-remaining').addClass('timer-active');

        updateTimerDisplayInterval = setInterval(updateTimerDisplay, 1000);
        updateTimerDisplay();
        resizeTimerDisplay();
      };

      var stopTimer = function () {
        if (updateTimerDisplayInterval) {
          clearInterval(updateTimerDisplayInterval);
          updateTimerDisplayInterval = null;
        }

        $('html').removeClass('timer-active little-time-remaining no-time-remaining');
      };

      var requestFullscreenOn = function (element) {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullscreen) {
          element.webkitRequestFullscreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen();
        }
      };

      var areWeInFullscreen = function () {
        return (
          document.fullscreenElement ||
          document.webkitFullscreenElement ||
          document.mozFullScreenElement ||
          document.msFullscreenElement
        );
      };

      var exitFullscreen = function () {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      };

      $(window).resize(resizeTimerDisplay);

      $('a[href=toggle-fullscreen]').click(function(e) {
        e.preventDefault();

        if (areWeInFullscreen()) {
          exitFullscreen();
          $('html').removeClass('in-fullscreen');
        } else {
          requestFullscreenOn(document.documentElement);
          $('html').addClass('in-fullscreen');
        }
      });

      $('a[href=restart]').click(function(e) {
        e.preventDefault();

        restartTimer();
      });

      $('a[href=reset]').click(function(e) {
        e.preventDefault();

        stopTimer();
      });

      $('form').submit(function(e) {
        e.preventDefault();

        var paramsString = $(this).serialize();

        initializeFromParams(paramsString);
      });

      $('#get-link').click(function(e) {
        e.preventDefault();

        var paramsString = $('form').serialize();
        var baseUrl = window.location.toString().split('?')[0];

        var fullLink = baseUrl + '?' + paramsString;

        prompt('Full link to the timer with its current setup:', fullLink);
      });

      var paramsString = location.search.toString().replace(/^\?/, '');

      if (paramsString) {
        initializeFromParams(paramsString);
      } else {
        setStateInUI(loadState());
      }
    });
  </script>
</head>
<body>
  <div class="controls">
    <a href="toggle-fullscreen">
      <span class="enter">↗</span>
      <span class="exit">↙</span>
    </a>
    <a href="restart">↺</a>
    <a href="reset">&times;</a>
  </div>
  <div class="timer-display"></div>
  <div class="help">
    <h1>Talk Timer</h1>
    <form>
      <fieldset>
        <legend>Required</legend>

        <p class="radio">
          <label>
            <span class="text">Time:</span>
            <input name="time" type="number">
          </label>
          <label>
            <input type="radio" name="time-in" value="minutes" checked> minutes
          </label>
          <label>
            <input type="radio" name="time-in" value="seconds"> seconds
          </label>

          <input type="submit" value="Start timer">
        </p>
      </fieldset>

      <fieldset>
        <legend>Optional</legend>

        <p class="radio">
          <label>
            <span class="text">Show "warning" color at:</span>
            <input name="warn-at" type="number">
          </label>
          <label>
            <input type="radio" name="warn-time-in" value="minutes" checked> minutes
          </label>
          <label>
            <input type="radio" name="warn-time-in" value="seconds"> seconds
          </label>
        </p>
        <p class="radio">
          <span class="text">Show seconds:</span>
          <label>
            <input type="radio" name="hide-seconds" value="false" checked> Yes
          </label>
          <label>
            <input type="radio" name="hide-seconds" value="true"> No
          </label>
        </p>
        <p class="radio">
          <label>
            <span class="text">Font height (% from screen height):</span>
            <input name="font-height-percentage" type="number"> %
          </label>
        </p>
      </fieldset>

      <p>
        <span class="github">
          <a href="https://github.com/mitio/talktimer">View instructions and code at GitHub</a>
        </span>
        <input type="submit" value="Start timer">
        or
        <input type="button" value="Get link to the timer with the current setup" id="get-link">
      </p>
    </form>
  </div>
</body>
</html>