-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
130 lines (102 loc) · 4.09 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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Agile Timer</title>
<link rel="stylesheet" href="styles.css"></link>
<meta name="title" content="Agile timer - keep track of your time box">
<meta name="description" content="This agile timer helps you track your time box in your daily standup or other meetings">
<link rel="apple-touch-icon" href="timer.png">
<meta property="og:type" content="website">
<meta property="og:url" content="https://timer.digital-wachsen.de/">
<meta property="og:title" content="Agile timer - keep track of your time box">
<meta property="og:description" content="This agile timer helps you track your time box in your daily standup or other meetings">
<meta property="og:image" content="https://timer.digital-wachsen.de/timer.png">
<meta property="twitter:card" content="Agile Timer">
<meta property="twitter:url" content="https://timer.digital-wachsen.de/">
<meta property="twitter:title" content="Agile timer - keep track of your time box">
<meta property="twitter:description" content="This agile timer helps you track your time box in your daily standup or other meetings">
<meta property="twitter:image" content="https://timer.digital-wachsen.de/timer.png">
</head>
<body>
<div class="info touch">Touch and drag to setup timer</div>
<div class="info no-touch">Drag the mouse to setup timer</div>
<div id="currentTime"></div>
<svg id="timer" viewBox="0 0 1000 1000"></svg>
<div id="show-settings">⚙</div>
<a id="goGitHub" href="https://github.com/jschirrmacher/timer" target="_blank" rel="noreferrer">View on GitHub</a>
<div class="popup" id="settings">
<form>
<span class="close">×</span>
<h2>Settings</h2>
<fieldset>
<legend>General configuration</legend>
<label>
<input type="checkbox" id="hide-text">
Hide text
</label>
<label>
<input type="checkbox" id="relative">
Relative time
</label>
<label>
Area Radius
<input type="number" id="radius" class="numeric" data-unit="px">
</label>
<label>
Space in the middle
<input type="number" id="spacing" class="numeric" data-unit="px">
</label>
<label>
Opacity [%]
<input type="number" id="area-opacity" class="numeric" data-unit="%">
</label>
<label>
Ringtone
<select id="ringtone">
<option value="ringtones/A-Tone.mp3">A-Tone</option>
<option value="ringtones/Bell.mp3">Bell</option>
</select>
</label>
</fieldset>
<fieldset>
<legend>Ticks</legend>
<label>
Tick width
<input type="number" id="tick-width" class="numeric" data-unit="px">
</label>
<label>
Tick length
<input type="number" id="tick-length" class="numeric" data-unit="px">
</label>
<label>
Fives length
<input type="number" id="fives-length" class="numeric" data-unit="px">
</label>
</fieldset>
<fieldset>
<legend>Hands</legend>
<label>
Minute width
<input type="number" id="minute-hand-width" class="numeric" data-unit="px">
</label>
<label>
Minute length
<input type="number" id="minute-hand-length" class="numeric" data-unit="px">
</label>
<label>
Hour width
<input type="number" id="hour-hand-width" class="numeric" data-unit="px">
</label>
<label>
Hour length
<input type="number" id="hour-hand-length" class="numeric" data-unit="px">
</label>
</fieldset>
<button id="saveSettings">Save</button>
</form>
</div>
<div class="settings"></div>
<script src="script.js"></script>
</body>
</html>