99 lines
3.6 KiB
HTML
99 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title id="tab_title">Pomodoro</title>
|
|
<link id="dynamic-favicon" rel="icon" type="image/ico"
|
|
href="images/red_tomato.ico">
|
|
<!-- Original favicon courtesy of http://icons8.com -->
|
|
<link rel="stylesheet"
|
|
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
|
|
<link rel='stylesheet' type='text/css'
|
|
href='http://fonts.googleapis.com/css?family=Indie+Flower'>
|
|
<link rel="stylesheet" href="pomodoro.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header>
|
|
<div id="titlebox">
|
|
<div id="title">Pomodoro</div>
|
|
<div id="subtitle">A simple workflow tool</div>
|
|
</div>
|
|
</header>
|
|
<div class="content">
|
|
<p>
|
|
<div><span id="timer"></span></div>
|
|
<button id="btn_start" class="btn_default">start</button>
|
|
<button id="btn_pause" class="btn_default">pause</button>
|
|
<button id="btn_reset" class="btn_default">reset</button>
|
|
</p>
|
|
<p>
|
|
<button id="btn_pomodoro" class="btn_default">pomodoro (25m)</button>
|
|
<button id="btn_shortbreak" class="btn_default">short break (5m)</button>
|
|
<button id="btn_longbreak" class="btn_default">long break (15m)</button>
|
|
</p>
|
|
<p>
|
|
<button id="btn_custom" class="btn_default">
|
|
<label for="ipt_custom">custom:</label>
|
|
</button>
|
|
<input type="number" id="ipt_custom" value="45" min="0" max="100000000">
|
|
<select id="custom_units">
|
|
<option value="seconds">seconds</option>
|
|
<option value="minutes" selected>minutes</option>
|
|
<option value="hours">hours</option>
|
|
</select>
|
|
</p>
|
|
</div>
|
|
<footer>
|
|
<div class="footerbox">
|
|
<h1>How it works:</h1>
|
|
<ol>
|
|
<li>Choose a task to focus on</li>
|
|
<li>Work for 25 uninterrupted minutes</li>
|
|
<li>Break for 5 minutes</li>
|
|
<li>Every four cycles, take a 15-30 minute<br>
|
|
break instead, preferably outside</li>
|
|
</ol>
|
|
<br>
|
|
<a href="https://en.wikipedia.org/wiki/Pomodoro_Technique" target="_blank">
|
|
Read more at Wikipedia
|
|
</a>
|
|
</div>
|
|
<div class="footerbox">
|
|
<h1>Options:</h1>
|
|
<div id="options">
|
|
<label for="alarm_select" id="lbl_alarm">Alarm:</label><br>
|
|
<select id="alarm_select">
|
|
<option value="none">None</option>
|
|
<option value="alarm_chime">Chime</option>
|
|
<option value="alarm_bell" selected>Bell</option>
|
|
<option value="alarm_beeps">Beeps</option>
|
|
<option value="alarm_boops">Boops</option>
|
|
</select>
|
|
<br><br>
|
|
<label for="alarm_volume" id="lbl_volume">Volume:</label><br>
|
|
<input type="range" id="alarm_volume" min=0 max=100 value=50>
|
|
</div>
|
|
<br>
|
|
</div>
|
|
<div class="credits">
|
|
Created by
|
|
<a href="../index.html">Andy Roche</a> -
|
|
<a href="https://github.com/rocheio/rocheio.github.io/tree/master/pomodoro">Github</a>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
<audio id="alarm_chime">
|
|
<source src="audio/one_chime.mp3" type="audio/mpeg"></audio>
|
|
<audio id="alarm_bell">
|
|
<source src="audio/one_bell.mp3" type="audio/mpeg"></audio>
|
|
<audio id="alarm_beeps">
|
|
<source src="audio/three_beeps.mp3" type="audio/mpeg"></audio>
|
|
<audio id="alarm_boops">
|
|
<source src="audio/three_boops.mp3" type="audio/mpeg"></audio>
|
|
<!-- Audio courtesy of https://soundcloud.com/andyouarewho -->
|
|
<script type="text/javascript" src="../resources/mousetrap.js"></script>
|
|
<script type="text/javascript" src="pomodoro.js"></script>
|
|
</body>
|
|
</html> |