<!DOCTYPE html>
<html>
<head>
<title>Daily Moments of Rest</title>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
margin-top: 50px;
}
.container {
background-color: lightblue;
width: 500px;
margin: auto;
padding: 40px;
border-radius: 20px;
}
h1 {
margin: 10px;
}
h2 {
margin: 15px;
}
hr {
width: 80%;
margin: 30px auto;
}
#restMessage {
color: red;
font-weight: bold;
}
button {
background-color: lightgreen;
font-size: 20px;
padding: 10px 25px;
margin-top: 40px;
cursor: pointer;
border: none;
border-radius: 10px;
}
#messageBox {
display: none;
background-color: lightgreen;
font-size: 20px;
padding: 10px 25px;
margin-top: 20px;
border-radius: 10px;
}
</style>
</head>
<body>
<div class=”container”>
<h1 id=”bigCountdown”>80</h1>
<h1>Daily Moments of Rest Remaining</h1>
<hr>
<h2 id=”timer”>12:00</h2>
<h2 id=”restMessage”>rest time: 0 seconds</h2>
<button onclick=”showMessage()”>
Skip to next
</button>
<div id=”messageBox”>
rB says, nope! This is about NOT rushing.
</div>
</div>
<script>
let bigNumber = 80;
let cycleSeconds = 720; // 12 minutes
let remaining = cycleSeconds;
let restSeconds = 0;
// Main countdown: decreases every 12 minutes
setInterval(function() {
bigNumber–;
if (bigNumber < 0) {
bigNumber = 0;
}
document.getElementById(“bigCountdown”).innerHTML = bigNumber;
}, 720000);
// 12-minute repeating timer
setInterval(function() {
remaining–;
let minutes = Math.floor(remaining / 60);
let seconds = remaining % 60;
document.getElementById(“timer”).innerHTML =
minutes + “:” + seconds.toString().padStart(2, “0”);
restSeconds++;
// First 15 seconds = rest time
if (restSeconds <= 15) {
document.getElementById(“restMessage”).innerHTML =
“rest time: ” + restSeconds +
(restSeconds === 1 ? ” second” : ” seconds”);
document.getElementById(“restMessage”).style.color = “red”;
}
else {
document.getElementById(“restMessage”).innerHTML =
“time to next rest”;
document.getElementById(“restMessage”).style.color = “black”;
}
// Restart the 12-minute cycle
if (remaining <= 0) {
remaining = cycleSeconds;
restSeconds = 0;
document.getElementById(“restMessage”).innerHTML =
“rest time: 0 seconds”;
document.getElementById(“restMessage”).style.color = “red”;
}
}, 1000);
// Button message without stopping timers
function showMessage() {
let message = document.getElementById(“messageBox”);
message.style.display = “inline-block”;
setTimeout(function() {
message.style.display = “none”;
}, 4000);
}
</script>
</body>
</html>