-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
104 lines (102 loc) · 4.66 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<html>
<head>
<link rel="stylesheet" type="text/css" href="timer.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="timer.js"></script>
</head>
<body>
<div class="timer-wrapper">
<div class="timer-notification-area">
<div class="timer-display">00:00.00</div>
<div class="timer-float-placeholder">
<div class="timer-float-info">
<div class="timer-info">
<div class="info-text-title">Round</div>
<div class="info-text round-number">-</div>
</div>
</div>
<div class="timer-float-info">
<div class="timer-info timer-display-like">
<div class="info-text-smaller round-type">Work</div>
</div>
</div>
</div>
</div>
<div class="timer-controls">
<div class="timer-control-set">
<span class="timer-control-label">Rounds: </span>
<input class="timer-control-input input-rounds" value="8"></input>
</div>
<div class="timer-control-set">
<span class="timer-control-label">Rest: </span>
<input class="timer-control-input input-rest" value="10"></input>
</div>
<div class="timer-control-set">
<span class="timer-control-label">Work: </span>
<input class="timer-control-input input-work" value="20"></input>
</div>
<div class="timer-control-set">
<input type="button" class="timer-action timer-start" value="Start"/>
</div>
</div>
<div class="timer-footer">
Tabata Timer
<div class="timer-explanation">
<div class="timer-explanation-entry"><span style="font-weight:bold">Keyboard:</span></div>
<div class="timer-explanation-entry">
<span style="font-weight:bold">
<span class="keyboard-button">Space</span>
/
<span class="keyboard-button">Return</span>/
<span class="keyboard-button">s</span>
</span> - Start/Stop timer</div>
<div class="timer-explanation-entry">
<span style="font-weight:bold">
<span class="keyboard-button">r</span>
</span> - Start timer
</div>
<div class="timer-explanation-entry">
<span style="font-weight:bold">
<span class="keyboard-button">p</span>
</span> - Stop timer
</div>
</div>
</div>
</div>
<div class="timer-disclaimer">
By <a href="https://github.com/natemago">natemago</a>.
See the <a href="javascript:;" class="credits-popup-show">credits</a>.
<div>
Browse the source on <a href="https://github.com/natemago/tabata-timer">Github</a>. <br/>
Licensed under <a href="https://www.gnu.org/copyleft/gpl.html">GPLv3</a>
</div>
</div>
<div class="overlay-container" style="display: none;">
<div class="timer-info global-notification">
Work!
</div>
</div>
<div class="credits-popup" style="display: none;">
<h3>Credits</h3>
<p>
Created by Pavle Jonoski. Please visit the project on <a href="https://github.com/natemago/tabata-timer">Github</a>.
<p>
<h4>Sounds used:<h4>
<ul>
<li>Start (whistle) - by <a href="http://www.freesound.org/people/zerolagtime/sounds/184726/">zerolagtime</a></li>
<li>End (alarm bell) - by <a href="http://www.freesound.org/people/bone666138/sounds/198841/">bone666138</a></li>
<li>End round (gong) - by <a href="http://www.freesound.org/people/Benboncan/sounds/66952/">Benboncan</a> (shortened, cut from the end to ~2s)</li>
<li>Warning (digital alarm) - by <a href="http://www.freesound.org/people/reecord2/sounds/96063/">reecord2</a></li>
</ul>
<p>
Color palette <a href="http://www.colourlovers.com/palette/1196612/storm_at_lit_tower">ac chrome white</a> by <a href="http://www.colourlovers.com/lover/avilluk">avilluk</a>
<p>
<div class="credits-popup-actions">
<div class="credits-popup-close timer-action">OK</div>
</div>
</div>
<!--<audio src="audio/start.wav" controls="">Not working?</audio>
<pre class="console">
</pre>-->
</body>
</html>