index.html


<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Timer Clock</title>
  <meta name="description" content="Clock">
  <meta name="author" content="Pradeep Sharma">

  <link href='https://fonts.googleapis.com/css?family=Lato:100,300,400' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/style.css">

  <script src="js/jquery-1.12.3.min.js"></script>
  <script src="js/buzz.min.js"></script>
  <link rel="icon" href="favicon.icon" height="10" width="10">

  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body background="Dark.jpg">

  <button class="action" id="reset" style="background: none">RESET</button>

  <a href="#openModal" id="instructions" >?</a>

  <div id="openModal" class="modalDialog">
    <div>

      <a href="#close" title="Close" class="close">X</a>

      <h2>Online Timer Clock</h2>

      <p>The Online Timer Clock is a time management method that uses a timer to break down work into intervals separated by short breaks.</p>

      <p>By default, this app is set to a <strong>25 minutes work session</strong> and a <strong>5 minute break session</strong>.</p>

      <p>You can adjust the work and break sessions by toggling the plus and minus buttons next to the respective session length.</p>

      <p>When a session has completed, a short ding will sound and you'll switch to the next session type.</p>

      <p>Made by <a href="https://www.facebook.com/Technophile2004/" target="_blank">Pradeep Sharma</a>. View on <a href="https://github.com/pradeepsharma2004" target="_blank">Github</a></p>

    </div>
  </div>

  <section class="parent">
    <div class="child">

      <div id="clock">

        <div id="time">
          <span id="minutes"></span>:<span id="seconds">00</span>
        </div>

      </div>

      <div id="settings">

        <div id="session-controls">
          <button class="action" id="decrease-session" style="background: none">-</button>
          <span id="session-length">25</span>
          <button class="action" id="increase-session" style="background: none">+</button>
        </div>

        <div id="startpause">
          <button class="action" id="start" style="background: none">Start</button>
          <button class="action" id="pause" style="background: none">Pause</button>
        </div>

        <div id="break-controls">
          <button class="action" id="decrease-break" style="background: none">-</button>
          <span id="break-length">5</span>
          <button class="action" id="increase-break" style="background: none">+</button>
        </div>

      </div>

    </div>
  </section>

  <footer class="site-footer">
    <div id="notice"></div>
  </footer>

  <script src="js/app.js"></script>
</body>
</html>