135 lines
No EOL
3 KiB
HTML
135 lines
No EOL
3 KiB
HTML
<html>
|
|
|
|
<head>
|
|
<title>a simple pomodoro huhu ba-ka!</title>
|
|
<style>
|
|
body {
|
|
background-color: #222222;
|
|
color: #ffffff;
|
|
font-family: monospace;
|
|
}
|
|
|
|
button {
|
|
font-family: monospace;
|
|
font-size: 24px;
|
|
border-radius: none;
|
|
border: none;
|
|
padding: 5px 10px;
|
|
}
|
|
|
|
.box-pomodoro {
|
|
width: 320px;
|
|
padding: 10px;
|
|
margin: auto;
|
|
top: 50%;
|
|
left: 50%;
|
|
position: absolute;
|
|
transform: translate(-50%, -50%);
|
|
text-align: center;
|
|
background-color: #555555;
|
|
}
|
|
|
|
#type {
|
|
font-size: 36pt;
|
|
margin: 0;
|
|
}
|
|
|
|
#timer {
|
|
margin-top: 15px;
|
|
font-size: 48pt;
|
|
}
|
|
</style>
|
|
<script async="" defer="" src="https://xa.ba-ka.org/tracker.js" data-website-id="cm9iohk0l025fmqg5xf2gxhy4">
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="box-pomodoro">
|
|
<h3>pomodoro</h3>
|
|
<h2 id="type">focus</h2>
|
|
<h1 id="timer">25:00</h1>
|
|
<button id="startpause" onclick="startpause()">start</button>
|
|
<button id="reset" onclick="reset()">reset</button>
|
|
<div style="margin-bottom: 20px;"></div>
|
|
</div>
|
|
<script>
|
|
let isRunning = false;
|
|
let buttonStartPause = document.getElementById("startpause");
|
|
let buttonReset = document.getElementById("reset");
|
|
let textTimer = document.getElementById("timer");
|
|
let textType = document.getElementById("type");
|
|
let breakAudio = new Audio("break.mp3");
|
|
let focusAudio = new Audio("focus.mp3");
|
|
let breakTime = 5 * 60;
|
|
let focusTime = 25 * 60;
|
|
let timer = focusTime;
|
|
let timerInterval = null;
|
|
let isFocusSession = true;
|
|
|
|
function updateDisplayTimer()
|
|
{
|
|
const minutes = Math.floor(timer / 60);
|
|
const seconds = timer % 60;
|
|
textTimer.textContent = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
|
|
textType.textContent = isFocusSession ? "focus" : "break";
|
|
}
|
|
|
|
updateDisplayTimer();
|
|
|
|
function startpause()
|
|
{
|
|
if (!isRunning)
|
|
{
|
|
isRunning = true;
|
|
buttonStartPause.innerHTML = "pause";
|
|
console.log("start pomodoro");
|
|
timerInterval = setInterval(() => {
|
|
timer--;
|
|
updateDisplayTimer();
|
|
if (timer <= 0)
|
|
{
|
|
isFocusSession = !isFocusSession;
|
|
timer = isFocusSession ? focusTime : breakTime;
|
|
if (isFocusSession)
|
|
{
|
|
focusAudio.play();
|
|
}
|
|
else
|
|
{
|
|
breakAudio.play();
|
|
}
|
|
if (Notification?.permission === "granted")
|
|
{
|
|
// todo: add request notif permission system, currently we enable manually..
|
|
new Notification(isFocusSession ? "back to focus!" : "it's break time :D!");
|
|
}
|
|
}
|
|
}, 1000);
|
|
}
|
|
else
|
|
{
|
|
clearInterval(timerInterval);
|
|
isRunning = false;
|
|
buttonStartPause.innerHTML = "start";
|
|
console.log("pause pomodoro");
|
|
}
|
|
}
|
|
|
|
function reset()
|
|
{
|
|
|
|
buttonStartPause.innerHTML = "start";
|
|
clearInterval(timerInterval);
|
|
isRunning = false;
|
|
isFocusSession = true;
|
|
textType.textContent = "focus";
|
|
timer = focusTime;
|
|
updateDisplayTimer();
|
|
console.log("reset pomodoro");
|
|
}
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
</html> |