728x90
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mint Pomodoro</title>
<style>
body {
background-color: #121212;
color: #98ff98;
font-family: 'Courier New', Courier, monospace;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
text-align: center;
background-color: #1e1e1e;
padding: 40px;
border-radius: 10px;
box-shadow: 0 0 20px rgba(152, 255, 152, 0.3);
}
h1 {
margin-bottom: 20px;
font-size: 2.5em;
}
.timer {
font-size: 3em;
margin-bottom: 20px;
}
.controls {
margin-top: 20px;
}
button {
background-color: #121212;
color: #98ff98;
border: 2px solid #98ff98;
padding: 10px 20px;
font-size: 1em;
border-radius: 5px;
cursor: pointer;
margin: 5px;
transition: background-color 0.3s, color 0.3s;
}
button:hover {
background-color: #98ff98;
color: #121212;
}
</style>
</head>
<body>
<div class="container">
<h1>Mint Pomodoro</h1>
<div class="timer" id="timer">25:00</div>
<div class="controls">
<button id="labButton">Start Lab Pomodoro (25 min)</button>
<button id="shortBreakButton">Short Break (5 min)</button>
<button id="longBreakButton">Long Break (15 min)</button>
<br>
<button id="stopButton" disabled>Stop</button>
</div>
</div>
<script>
let countdown;
let remainingTime = 0;
const timerDisplay = document.getElementById('timer');
const labButton = document.getElementById('labButton');
const shortBreakButton = document.getElementById('shortBreakButton');
const longBreakButton = document.getElementById('longBreakButton');
const stopButton = document.getElementById('stopButton');
// Update the timer display (mm:ss)
function updateDisplay(seconds) {
const minutes = Math.floor(seconds / 60);
const secs = seconds % 60;
timerDisplay.textContent =
(minutes < 10 ? '0' : '') + minutes + ':' +
(secs < 10 ? '0' : '') + secs;
}
function startTimer(duration) {
clearInterval(countdown);
remainingTime = duration;
updateDisplay(remainingTime);
labButton.disabled = true;
shortBreakButton.disabled = true;
longBreakButton.disabled = true;
stopButton.disabled = false;
countdown = setInterval(() => {
remainingTime--;
updateDisplay(remainingTime);
if (remainingTime <= 0) {
clearInterval(countdown);
showNotification();
labButton.disabled = false;
shortBreakButton.disabled = false;
longBreakButton.disabled = false;
stopButton.disabled = true;
}
}, 1000);
}
function stopTimer() {
clearInterval(countdown);
labButton.disabled = false;
shortBreakButton.disabled = false;
longBreakButton.disabled = false;
stopButton.disabled = true;
}
function showNotification() {
if (!("Notification" in window)) {
alert("Time's up!");
return;
}
if (Notification.permission === "granted") {
new Notification("Mint Pomodoro", { body: "Time's up!" });
} else if (Notification.permission !== "denied") {
Notification.requestPermission().then(function (permission) {
if (permission === "granted") {
new Notification("Mint Pomodoro", { body: "Time's up!" });
} else {
alert("Time's up!");
}
});
} else {
alert("Time's up!");
}
}
labButton.addEventListener('click', () => startTimer(25 * 60));
shortBreakButton.addEventListener('click', () => startTimer(5 * 60));
longBreakButton.addEventListener('click', () => startTimer(15 * 60));
stopButton.addEventListener('click', stopTimer);
</script>
</body>
</html>
728x90
'hacking sorcerer' 카테고리의 다른 글
| smart_home.py (0) | 2025.04.05 |
|---|---|
| random = security high ? (0) | 2025.04.01 |
| pingudad in a while (0) | 2025.03.14 |
| generate_password_verify.py (0) | 2025.03.12 |
| the simplest dp problem (0) | 2025.03.11 |