-
Notifications
You must be signed in to change notification settings - Fork 9
/
pomodoro.html
59 lines (55 loc) · 2.5 KB
/
pomodoro.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="pomodoro.css"/>
</head>
<body>
<div id="container">
<img src="../icons/options.png" id="config" class="top-commands" title="options"/>
<a href="https://github.com/macmorning/pomodoro-webext" title="get some help or post a request on github" target="_blank"><img id="help" src="../icons/question.png" class="top-commands"/></a>
<div role="main">
<div id="parameters">
<div id="standardTimers">
<label for="streakTimer">Streak duration: <span id="streakTimer_value"></span>min</label>
<input id="streakTimer" min="1" max="90" value="30" type="range">
<label for="pauseTimer">Break duration: <span id="pauseTimer_value"></span>min</label>
<input id="pauseTimer" min="1" max="90" value="5" type="range">
</div>
<div id="advancedTimers">
<label title="Comma separated numbers, ex: 30,5,30,5,30,10" for="advancedTimersInput">Timers: <img src="../icons/question.png" width="15px"/></label><br/>
<input id="advancedTimersInput" name="advancedTimersInput" type="text">
</div>
<button id="startBtn">Start!</button>
<button id="skipBtn">Skip</button>
</div>
<div id="clockContainer" title="click to pause">
<div id="timeCounter"></div>
<div id="onABreak"></div>
<div id="streaksCounter">
<div id="streaksCounterValue"></div>
<div id="streaksCounterText">streaks completed</div>
</div>
<svg id="clock" viewBox="0 0 100 100">
<defs>
<clipPath id="clipClock">
<circle cx="50" cy="50" r="45"/>
</clipPath>
</defs>
<g clip-path="url(#clipClock)">
<rect id="clockFace" x="0" y="0" width="100" height="100"/>
<circle class="mark" cx="50" cy="50" r="45"/>
<line id="mark12" class="mark" x1="50" y1="0" x2="50" y2="8"/>
<line id="mark3" class="mark" x1="100" y1="50" x2="92" y2="50"/>
<line id="mark6" class="mark" x1="50" y1="100" x2="50" y2="92"/>
<line id="mark9" class="mark" x1="0" y1="50" x2="8" y2="50"/>
<line id="clockHandSeconds" x1="50" y1="50" x2="50" y2="10"/>
<line id="clockHandMinutes" x1="50" y1="50" x2="50" y2="20"/>
</g>
</svg>
</div>
</div>
<script src="pomodoro.js"></script>
</div>
</body>
</html>