forked from scotch-io/pomodoro-on-the-rocks
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
311 lines (255 loc) · 11.7 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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--test
__ __
/ | / |
_______ _______ ______ _$$ |_ _______ $$ |____
/ | / | / \ / $$ | / |$$ \
/$$$$$$$/ /$$$$$$$/ /$$$$$$ |$$$$$$/ /$$$$$$$/ $$$$$$$ |
$$ \ $$ | $$ | $$ | $$ | __ $$ | $$ | $$ |
$$$$$$ |$$ \_____ $$ \__$$ | $$ |/ |$$ \_____ $$ | $$ |
/ $$/ $$ |$$ $$/ $$ $$/ $$ |$$ | $$ |
$$$$$$$/ $$$$$$$/ $$$$$$/ $$$$/ $$$$$$$/ $$/ $$/ 4 life
-->
<title>Pomodoro on the Rocks | A Simple and Beautiful Pomodoro Timer</title>
<!-- CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div id="logo">
<!-- SVG TOMATO -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="pomodoro" x="0px" y="0px" width="86.75px" height="77.914px" viewBox="0 0 86.75 77.914" enable-background="new 0 0 86.75 77.914" xml:space="preserve">
<path fill="#FEDD2B" d="M43.493,59.802c-0.026,0-0.051-0.004-0.077-0.004l3.995,3.439h-8.068l3.998-3.439 c-16.596-0.041-31.522-6.434-41.895-16.611c1.117,17.865,14.092,31.74,35.979,34.727h12.136 c21.887-2.984,34.86-16.857,35.979-34.726C75.132,53.396,60.148,59.802,43.493,59.802z"/>
<path fill="#FEDD2B" d="M41.58,6.934c1.506-0.531,2.09-0.531,3.595,0c1.546-2.74,3.915-5.312,6.392-6.24 C46.421-0.221,40.269-0.229,35.089,0.66C37.602,1.557,40.014,4.157,41.58,6.934z"/>
<path fill="#FEDD2B" d="M45.284,12.609h-3.781c0,0-0.655-3.279,0-3.984c0.668-0.719,3.187-0.791,3.782,0 C45.865,9.4,45.284,12.609,45.284,12.609z"/>
<path fill="#FEDD2B" d="M83.445,21.913c3-3-12-23-26-14c2.145-1.787,3.14-2.244,3.939-2.764c-0.945-1.273-2.607-2.309-4.724-3.109 c-1.938,1.999-4.3,5.343-4.3,8.016c7.884-2.742,15.398-3.365,21.275,3.169c-10.169-0.808-14.738-1.153-18.326,1.543 c2.947,1.606,6.42,4.435,6.037,14.034c-14.777-14.777-21.167-14.778-35.948,0c-0.383-9.6,3.089-12.428,6.036-14.034 c-3.587-2.696-8.157-2.351-18.326-1.543c5.877-6.534,13.394-5.911,21.276-3.169c0-2.711-2.429-6.113-4.383-8.102 c-2.151,0.778-3.865,1.789-4.873,3.031c0.968,0.535,1.808,0.955,4.175,2.928c-14-9-29,11-26,14 c-4.711,2.355-3.258,13.955-2.415,18.831c1.138,1.143,2.343,2.229,3.59,3.276v-3.445l1,0.878v3.391 c4.819,3.855,10.373,6.988,16.454,9.207v-3.206l1,0.405v3.153c6.23,2.149,12.987,3.349,20.055,3.39v-2.71h1.001v2.704 c16.646-0.16,31.574-6.709,41.869-17.045C86.702,35.87,88.156,24.269,83.445,21.913z"/>
</svg>
</div>
</header>
<div id="main">
<!-- MESSAGES -->
<h2 id="message">You're Gonna Do Great</h2>
<!-- TIMER -->
<div id="timer">
<span id="minutes">25</span>
:
<span id="seconds">00</span>
<div id="sessionHolder">Session <span id="sessionNumber">1</span></div>
</div>
<!-- INPUT FORM -->
<div id="taskInput">
<input type="text" id="taskName" placeholder="What are you going to accomplish?" />
</div>
<!-- BUTTONS FOR START, STOP RESET -->
<div id="buttons">
<button id="start">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Svg1" x="0px" y="0px" width="30px" height="50px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<path fill="#d8b705" d="M5.9,9.777C5.9,4.377,10.276,0,15.676,0c1.677,0,2.74,0.438,4.61,1.182l68.577,39.9c3.189,1.89,4.666,4.927,5.236,8.428 v0.982c-0.57,3.499-2.047,6.537-5.236,8.428L20.287,98.819c-1.871,0.745-2.934,1.181-4.61,1.181c-5.4,0-9.776-4.377-9.776-9.777 V9.777z"/>
</svg>
</button>
<button id="stop">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="30px" height="50px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<path fill="#d8b705" fill-rule="evenodd" clip-rule="evenodd" d="M0,11.581C0,5.185,5.185,0,11.582,0h76.836C94.815,0,100,5.185,100,11.581v76.837 C100,94.814,94.815,100,88.418,100H11.582C5.185,100,0,94.814,0,88.418V11.581z"/>
</svg>
</button>
<button id="reset">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Svg2" x="0px" y="0px" width="40px" height="50px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<path fill="#d8b705" d="M3.374,44.249l44.219-25.727c1.207-0.48,1.891-0.762,2.974-0.762c3.48,0,6.305,2.822,6.305,6.304v14.154l33.854-19.696 c1.205-0.48,1.891-0.762,2.973-0.762c3.48,0,6.303,2.822,6.303,6.304v51.871c0,3.482-2.822,6.304-6.303,6.304 c-1.082,0-1.768-0.28-2.973-0.761L56.871,61.781v14.154c0,3.482-2.824,6.304-6.305,6.304c-1.083,0-1.767-0.28-2.974-0.761 L3.374,55.751C1.318,54.532,0.367,52.573,0,50.316v-0.633C0.367,47.427,1.318,45.468,3.374,44.249z"/>
</svg>
</button>
</div>
</div>
<script>
(function () {
// register variables
var bigTime = 1499; // time in seconds
var mode = "normal"; // normal vs cooldown
var animation = "fadeToBlack"; // will be able to change in settings later
var color = "EC2E2B";
var cooldownColor = "265E9A";
var bgColor;
var percent;
var divisor = 300;
var session = 1;
var mins;
var secs;
var task;
var countdownID;
// messages
var messageType;
var normalMessages = [
"You are a champion.",
"Doing amazing.",
"Seek the greatness in life, ignore the rest.",
"Change the world, one little bit.",
"All things are possible.",
"Fear nothing.",
"Carpe diem.",
"Do a little more every day than you think you can.",
"Right on track.",
"The harder you work, the luckier you get.",
"You are inspiring.",
"Stay strong.",
"You are my hero.",
"No rest for the wicked.",
"You're on fire."
];
var cooldownMessages = [
"You earned a break.",
"Don't go too far.",
"Success!",
"Take a deep breath.",
"What's your next goal?",
"Rest is good.",
"Have a snack.",
"Stretchhhhhh"
];
var endMessages = [
"Let's make magic.",
"Change the world.",
"Let's get started.",
"You're gonna do great."
];
var quitMessages = [
"Don't stop.",
"Did you finish?",
"You'll get it next time."
];
// register elements
var minutes = document.getElementById("minutes");
var seconds = document.getElementById("seconds");
var message = document.getElementById("message");
var sessionNumber = document.getElementById("sessionNumber");
var task = document.getElementById("taskName");
// register start button
var start = document.getElementById("start");
start.addEventListener("click", startTimer, false);
// register stop button
var stop = document.getElementById("stop");
stop.addEventListener("click", stopTimer, false);
// register reset button
var reset = document.getElementById("reset");
reset.addEventListener("click", resetTimer, false);
// COUNTER ================================================================
function counter(eventInfo) {
// calculate the minutes and seconds from bigTime
mins = Math.floor(bigTime / 60);
secs = bigTime - mins * 60;
// change the HTML to show new minutes and seconds
minutes.innerHTML = (mins < 10 ? '0' : '') + mins;
seconds.innerHTML = (secs < 10 ? '0' : '') + secs;
// handle the animation
if (mode == "normal") {
if (animation == "fadeToBlack") {
percent = secs / divisor;
bgColor = shadeColor(bgColor, -percent);
document.body.style.background = "#" + bgColor;
// decrement divisor
if (divisor > 0)
divisor = divisor - 0.05;
}
}
// change the message at 00
if (secs == 0) {
if (mode == "normal") {
showMessage("normal");
} else {
showMessage("cooldown");
}
}
// switch modes when timer expires
if (bigTime == 0) {
if (mode == "normal") {
// go to cooldown
mode = "cooldown";
bigTime = 300;
divisor = 30;
// change background color to normal
document.body.style.background = "#" + cooldownColor;
// change message
showMessage("cooldown");
} else {
resetTimer();
}
} else {
// decrement
bigTime = bigTime - 1;
}
}
// ACTIONS =============================================================
function startTimer(eventInfo) {
bgColor = color;
bigTime = 1499; // get from app settings
divisor = 300;
// start the timer
countdownID = setInterval(function () { counter(); }, 1000);
// show message
showMessage("normal");
// show stop button
start.style.display = "none";
stop.style.display = "block";
reset.style.display = "none";
}
function stopTimer(eventInfo) {
// change message
showMessage("quit");
// stop timer
clearInterval(countdownID);
// show reset button
start.style.display = "none";
stop.style.display = "none";
reset.style.display = "block";
}
function resetTimer(eventInfo) {
// switch back to normal mode
mode = "normal";
bigTime = 1499;
bgColor = color;
// change session
session = session + 1;
sessionNumber.innerHTML = session;
// change styles to normal
minutes.innerHTML = "25";
seconds.innerHTML = "00";
document.body.style.background = "#" + color;
// change message
showMessage("end");
// show start button
start.style.display = "block";
stop.style.display = "none";
reset.style.display = "none";
// stop timer
clearInterval(countdownID);
}
function showMessage(messageType) {
switch (messageType) {
case "normal":
message.innerHTML = normalMessages[Math.floor(Math.random() * normalMessages.length)];
break;
case "cooldown":
message.innerHTML = cooldownMessages[Math.floor(Math.random() * cooldownMessages.length)];
break;
case "end":
message.innerHTML = endMessages[Math.floor(Math.random() * endMessages.length)];
break;
case "quit":
message.innerHTML = quitMessages[Math.floor(Math.random() * quitMessages.length)];
break;
}
}
// HELPER FUNCTIONS ====================================================
function shadeColor(color, percent) {
var num = parseInt(color, 16),
amt = Math.round(2.55 * percent),
R = (num >> 16) + amt,
B = (num >> 8 & 0x00FF) + amt,
G = (num & 0x0000FF) + amt;
return (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 + (B < 255 ? B < 1 ? 0 : B : 255) * 0x100 + (G < 255 ? G < 1 ? 0 : G : 255)).toString(16).slice(1);
}
})();
</script>
</body>
</html>