1. Count Down Timer: Setting Protected on Close Reopen, Left to Right Shrink
Count down Timer:
Left to Right Shrink
With:
Timer Setting protected on Page Minimige/Logout
Pree 5 Minutes Warning:
Session Over Massage:
Using:
Video
Implementation:
Post Edit Link:
Sdtt
Post Shared Link:
Sdft
Post Edit Link:
Post Shared Link:
Code:
html :
gs script :
<h2 style="font-family:Arial,sans-serif;text-align:center;margin:0 0 15px;">
⏳ Countdown Timer
</h2>
<div id="countdownBox" style="
width:280px;
height:300px;
margin:15px;
padding:0 15px;
border:1px solid #ccc;
border-radius:12px;
box-sizing:border-box;
position:relative;
overflow:visible;
">
<!-- Line 1 -->
<h3 style="text-align:center;margin:10px 0 15px;">
⏳ Event: Tropical Treat
</h3>
<!-- Line 2 -->
<button onclick="toggleSettings()" style="
width:100%;
padding:8px;
background:#0F5E05;
color:#fff;
border:none;
border-radius:6px;
cursor:pointer;">
🔻 ⚙️ Timer Settings ⚙️ 🔺
</button>
<div id="timerSettings" style="
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
gap:8px;
margin-top:10px;
">
<input id="startDate" type="date" style="height:35px;">
<select id="day" style="height:35px;"></select>
<select id="hour" style="height:35px;"></select>
<select id="minute" style="height:35px;"></select>
<select id="second" style="height:35px;"></select>
</div>
<!-- Timer -->
<div id="timerDisplay" style="
text-align:center;
font-size:28px;
font-weight:bold;
color:red;
padding:15px 0;">
00 Days 00:00:00
</div>
<!-- Progress Bar -->
<div style="
width:100%;
height:28px;
background:#ddd;
border-radius:20px;
overflow:hidden;">
<div id="countBar" style="
width:100%;
height:100%;
background:#00c853;">
</div>
</div>
<div id="percent" style="
text-align:center;
font-weight:bold;
margin-top:8px;">
100%
</div>
<!-- Buttons -->
<div style="text-align:center;">
<button onclick="startCountdown()" style="border-radius:6px;">▶ Start</button>
<button onclick="pauseCountdown()" style="border-radius:6px;">⏸ Pause</button>
<button onclick="resetCountdown()" style="border-radius:6px;">🔄 Reset</button>
</div>
<!-- Pre 5 Minutes Warning -->
<div id="SomeTimePopup" style="
display:none;
position:absolute;
left:0;
top:0;
width:75%;
height:80%;
background:#fff;
border:3px solid #0F5E05;
border-radius:12px;
box-shadow:0 0 20px rgba(0,0,0,.4);
padding:5px;
box-sizing:border-box;
z-index:9999;
text-align:center;">
<h2 style="color:red;margin:0;">
⏰ Some Time to Over the Session!
</h2>
<video autoplay muted loop playsinline controls
style="width:75%;height:50px;border-radius:8px;margin:10px 0;">
<source src="YOUR_VIDEO_LINK.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<br>
<button onclick="closeSomeTimePopup()">OK</button>
</div>
<!-- Session Over -->
<div id="timeUpPopup" style="
display:none;
position:absolute;
right:0;
top:0;
width:75%;
height:85%;
background:#fff;
border:3px solid #0F5E05;
border-radius:12px;
box-shadow:0 0 20px rgba(0,0,0,.4);
padding:5px;
box-sizing:border-box;
z-index:9999;
text-align:center;">
<h2 style="color:red;margin:0;">
⏰ Time Up! ⏰
</h2>
<p style="color:green;font-size:18px;font-weight:bold;margin:15px 0 5px;">
Click on <b>"Reset"</b> Button
</p>
<p style="color:skyblue;font-size:18px;font-weight:bold;margin:5px 0 15px;">
and Click on <b>"Start"</b>
</p>
<video autoplay muted loop playsinline controls
style="width:75%;height:50px;border-radius:8px;margin:10px 0;">
<source src="YOUR_VIDEO_LINK.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<br>
<button onclick="closePopup()">OK</button>
</div>
</div>
<script>
// Grab elements
const day = document.getElementById("day");
const hour = document.getElementById("hour");
const minute = document.getElementById("minute");
const second = document.getElementById("second");
const startDateInput = document.getElementById("startDate");
// Populate dropdowns
for (let i = 0; i <= 120; i++) {
day.innerHTML += `<option value="${i}">${i} Day</option>`;
}
for (let i = 0; i <= 23; i++) {
let value = String(i).padStart(2, "0");
hour.innerHTML += `<option value="${i}">${value} Hr</option>`;
}
for (let i = 0; i <= 59; i++) {
let value = String(i).padStart(2, "0");
minute.innerHTML += `<option value="${i}">${value} Min</option>`;
second.innerHTML += `<option value="${i}">${value} Sec</option>`;
}
// Variables
let totalSeconds = 0;
let remainingSeconds = 0;
let interval = null;
let endTime = 0;
let isRunning = false;
// Save state to localStorage
function saveState() {
const state = {
startDate: startDateInput.value,
day: day.value,
hour: hour.value,
minute: minute.value,
second: second.value,
endTime: endTime,
isRunning: isRunning
};
localStorage.setItem("countdownState", JSON.stringify(state));
}
//Timer Setting Button Open
function toggleSettings() {
const box = document.getElementById("timerSettings");
box.style.display = (box.style.display === "none") ? "block" : "none";
}
// Load state from localStorage
function loadState() {
const state = JSON.parse(localStorage.getItem("countdownState"));
if (state) {
startDateInput.value = state.startDate || "";
day.value = state.day || "0";
hour.value = state.hour || "0";
minute.value = state.minute || "0";
second.value = state.second || "0";
endTime = state.endTime || 0;
isRunning = state.isRunning || false;
if (endTime > 0) {
remainingSeconds = Math.max(0, Math.floor((endTime - Date.now()) / 1000));
totalSeconds =
Number(day.value) * 86400 +
Number(hour.value) * 3600 +
Number(minute.value) * 60 +
Number(second.value);
updateDisplay();
if (remainingSeconds <= 0) {
document.getElementById("timeUpPopup").style.display = "block";
} else if (isRunning) {
startCountdown(); // resume automatically
}
}
}
}
// Update display
function updateDisplay() {
remainingSeconds = Math.max(
0,
Math.floor((endTime - Date.now()) / 1000)
);
let days = Math.floor(remainingSeconds / 86400);
let hours = Math.floor((remainingSeconds % 86400) / 3600);
let minutes = Math.floor((remainingSeconds % 3600) / 60);
let seconds = remainingSeconds % 60;
document.getElementById("timerDisplay").innerHTML =
String(days).padStart(2, "0") + " Days " +
String(hours).padStart(2, "0") + ":" +
String(minutes).padStart(2, "0") + ":" +
String(seconds).padStart(2, "0");
let percentage = totalSeconds ? (remainingSeconds / totalSeconds) * 100 : 100;
const bar = document.getElementById("countBar");
bar.style.width = percentage + "%";
bar.style.marginLeft = (100 - percentage) + "%";
document.getElementById("percent").innerHTML = percentage.toFixed(1) + "%";
if (percentage > 50) {
bar.style.background = "#00c853";
} else if (percentage > 20) {
bar.style.background = "#ffb300";
} else {
bar.style.background = "#d50000";
}
// Show "Some Time Popup" when 5 minutes left
if (remainingSeconds === 300) {
document.getElementById("SomeTimePopup").style.display = "block";
}
// Time up
if (remainingSeconds <= 0 && isRunning) {
clearInterval(interval);
interval = null;
isRunning = false;
saveState();
document.getElementById("timeUpPopup").style.display = "block";
}
}
// Start countdown
function startCountdown() {
if (interval) return;
if (endTime === 0) {
totalSeconds =
Number(day.value) * 86400 +
Number(hour.value) * 3600 +
Number(minute.value) * 60 +
Number(second.value);
remainingSeconds = totalSeconds;
endTime = Date.now() + totalSeconds * 1000;
}
isRunning = true;
saveState();
updateDisplay();
interval = setInterval(updateDisplay, 1000);
}
// Pause
function pauseCountdown() {
clearInterval(interval);
interval = null;
isRunning = false;
saveState();
}
// Reset
function resetCountdown() {
clearInterval(interval);
interval = null;
totalSeconds =
Number(day.value) * 86400 +
Number(hour.value) * 3600 +
Number(minute.value) * 60 +
Number(second.value);
remainingSeconds = totalSeconds;
endTime = Date.now() + totalSeconds * 1000;
isRunning = false;
updateDisplay();
saveState();
}
// Close popups
function closeSomeTimePopup() {
document.getElementById("SomeTimePopup").style.display = "none";
}
function closePopup() {
document.getElementById("timeUpPopup").style.display = "none";
}
// Save state when leaving page
window.addEventListener("beforeunload", saveState);
// Initialize
loadState();
</script>
Comments
Post a Comment