<center>
<h1>
<span id="m"></span>
<span>:</span>
<span id="s"></span>
الوقت المتبقي للتأكيد من قبل المدرب
</h1>
<br>
</center>
<script>
var s=60;
var m=4;
var time= setInterval(function() {timer()}, 1000);
function timer(){
s--;
if(s==-1){
m--;
s=59;
if(m==-1){
m=0;
s=0;
clearInterval(time);
alert(";)"انتهى الوقت المحدد للتأكيد
}
}
document.getElementById("m").innerHTML = m;
document.getElementById("s").innerHTML = s;
}
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Countdown Timer</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
background-color: #e0f7fa;
#container {
text-align: center;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
h1 {
font-size: 2.5em;
color: #00796b;
margin: 0;
#timer {
display: flex;
justify-content: center;
align-items: baseline;
font-size: 4em;
font-weight: bold;
color: #004d40;
span {
margin: 0 5px;
#controls {
margin-top: 20px;
button {
font-size: 1em;
padding: 10px 20px;
margin: 5px;
border: none;
border-radius: 5px;
cursor: pointer;
background-color: #004d40;
color: white;
transition: background-color 0.3s;
button:hover {
background-color: #00332e;
#notification {
margin-top: 20px;
font-size: 1.2em;
color: #d32f2f;
}
#timeInput {
font-size: 1em;
padding: 10px;
margin: 10px;
border: 1px solid #00796b;
border-radius: 5px;
</style>
</head>
<body>
<div id="container">
<h1>< الوقت المتبقي/h1>
<div id="timer">
<span id="m">04</span>
<span>:</span>
<span id="s">00</span>
</div>
<div id="controls">
<input type="number" id="timeInput" placeholder=" "أدخل الوقت بالثوانيmin="1">
<button id="start">Start Timer</button>
<button id="stop">Stop Timer</button>
<button id="reset">Reset Timer</button>
</div>
<div id="notification"></div>
</div>
<script>
let s = 0; // الثواني
let m = 0; // الدقائق
let timerInterval;
const timeInput = document.getElementById("timeInput");
function formatTime(seconds) {
const minutes = Math.floor(seconds / 60);
const secs = seconds % 60;
return {
minutes: minutes.toString().padStart(2, '0'),
seconds: secs.toString().padStart(2, '0')
};
function updateTimerDisplay() {
const { minutes, seconds } = formatTime(m * 60 + s);
document.getElementById("m").innerText = minutes;
document.getElementById("s").innerText = seconds;
function startTimer() {
clearInterval(timerInterval); // Ensure no multiple intervals are running
const totalSeconds = parseInt(timeInput.value, 10);
if (isNaN(totalSeconds) || totalSeconds <= 0) {
alert("Please enter a valid time in seconds.");
return;
s = totalSeconds % 60;
m = Math.floor(totalSeconds / 60);
updateTimerDisplay();
timerInterval = setInterval(() => {
if (s === 0 && m === 0) {
clearInterval(timerInterval);
document.getElementById("notification").innerText = ";"انتهى الوقت المحدد للتأكيد
document.getElementById("notification").classList.add("alert");
playAlertSound();
return;
if (s === 0) {
m--;
s = 59;
} else {
s--;
updateTimerDisplay();
}, 1000);
document.getElementById("notification").innerText = "";
document.getElementById("notification").classList.remove("alert");
function stopTimer() {
clearInterval(timerInterval);
function resetTimer() {
clearInterval(timerInterval);
m = 0;
s = 0;
updateTimerDisplay();
document.getElementById("notification").innerText = "";
function playAlertSound() {
const audio = new Audio('alert.mp3'); // Make sure you have an alert sound file in the same directory
audio.play();
document.getElementById("start").addEventListener("click", startTimer);
document.getElementById("stop").addEventListener("click", stopTimer);
document.getElementById("reset").addEventListener("click", resetTimer);
// Initialize display
updateTimerDisplay();
</script>
</body>
</html>
