<link href="https://fonts.googleapis.com/css2?family=Kanit:wght@400;600&display=swap" rel="stylesheet">

<style>

    * {

        box-sizing: border-box;

        font-family: 'Kanit', sans-serif;

    }

    body {

        display: flex;

        justify-content: center;

        align-items: center;

        margin: 0;

        padding: 10px;

        background-color: transparent;

    }

    .timer-container {

        background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);

        padding: 30px;

        border-radius: 20px;

        box-shadow: 0 10px 25px rgba(0,0,0,0.15);

        text-align: center;

        width: 100%;

        max-width: 450px;

        border: 2px solid #e0e0e0;

    }

    h1 {

        color: #333;

        margin-top: 0;

        font-size: 22px;

    }

    .time-display {

        font-size: 70px;

        font-weight: 600;

        color: #ff6b6b;

        margin: 10px 0;

        text-shadow: 2px 2px 4px rgba(0,0,0,0.05);

        transition: color 0.3s;

    }

    .status-text {

        color: #e74c3c;

        font-size: 18px;

        font-weight: 600;

        height: 25px;

        margin-bottom: 15px;

    }

    .controls {

        display: flex;

        justify-content: center;

        gap: 10px;

        margin-bottom: 15px;

    }

    input[type="number"] {

        width: 70px;

        padding: 8px;

        font-size: 16px;

        border: 2px solid #ccc;

        border-radius: 8px;

        text-align: center;

        outline: none;

    }

    input[type="number"]:focus {

        border-color: #4facfe;

    }

    button {

        padding: 10px 18px;

        font-size: 16px;

        font-weight: 600;

        border: none;

        border-radius: 12px;

        cursor: pointer;

        color: white;

        transition: transform 0.1s, box-shadow 0.1s;

    }

    button:active {

        transform: scale(0.95);

    }

    .btn-start { background-color: #2ecc71; box-shadow: 0 4px #27ae60; }

    .btn-pause { background-color: #f1c40f; box-shadow: 0 4px #f39c12; color: #333; }

    .btn-reset { background-color: #e74c3c; box-shadow: 0 4px #c0392b; }

    .btn-start:hover { background-color: #27ae60; }

    .btn-pause:hover { background-color: #f39c12; }

    .btn-reset:hover { background-color: #c0392b; }

</style>

<div class="timer-container">

    <h1>⏳ นาฬิกาจับเวลา</h1>

    <div class="controls">

        <label style="font-size: 16px; display: flex; align-items: center;">

            เวลา (นาที): &nbsp;

            <input type="number" id="minutesInput" value="5" min="1">

        </label>

    </div>

    <div class="time-display" id="timeDisplay">05:00</div>

    <div class="status-text" id="statusMessage"></div>

    <div class="controls">

        <button class="btn-start" id="btnStart">▶️ เริ่ม</button>

        <button class="btn-pause" id="btnPause">⏸️ พัก</button>

        <button class="btn-reset" id="btnReset">🔄 รีเซ็ต</button>

    </div>

</div>

<audio id="alarmSound" src="https://actions.google.com/sounds/v1/alarms/bugle_tune.ogg" preload="auto"></audio>

<script>

    let countdown;

    let timeLeft = 0;

    let isRunning = false;

    const timeDisplay = document.getElementById('timeDisplay');

    const minutesInput = document.getElementById('minutesInput');

    const alarmSound = document.getElementById('alarmSound');

    const statusMessage = document.getElementById('statusMessage');

    function updateDisplay(seconds) {

        const mins = Math.floor(seconds / 60);

        const secs = seconds % 60;

        const displayMins = mins < 10 ? '0' + mins : mins;

        const displaySecs = secs < 10 ? '0' + secs : secs;

        timeDisplay.textContent = `${displayMins}:${displaySecs}`;

    }

    function startTimer() {

        if (isRunning) return; 

        statusMessage.textContent = ""; // เคลียร์ข้อความแจ้งเตือน

        if (timeLeft === 0) {

            const inputMins = parseInt(minutesInput.value);

            if (isNaN(inputMins) || inputMins <= 0) {

                statusMessage.textContent = "กรุณาใส่ตัวเลขนาทีให้ถูกต้องครับ";

                return;

            }

            timeLeft = inputMins * 60;

        }

        isRunning = true;

        countdown = setInterval(() => {

            timeLeft--;

            updateDisplay(timeLeft);

            if (timeLeft <= 0) {

                clearInterval(countdown);

                isRunning = false;

                // เล่นเสียงและเปลี่ยนสีตัวอักษร

                alarmSound.play().catch(e => console.log("เล่นเสียงไม่ได้")); 

                timeDisplay.style.color = "#c0392b"; 

                statusMessage.textContent = "⏰ หมดเวลาแล้วครับ!";

            }

        }, 1000);

    }

    function pauseTimer() {

        clearInterval(countdown);

        isRunning = false;

    }

    function resetTimer() {

        clearInterval(countdown);

        isRunning = false;

        timeLeft = 0;

        statusMessage.textContent = "";

        const inputMins = parseInt(minutesInput.value) || 0;

        updateDisplay(inputMins * 60);

        alarmSound.pause();

        alarmSound.currentTime = 0;

        timeDisplay.style.color = "#ff6b6b";

    }

    // ผูกคำสั่งกับปุ่มด้วย Event Listener แทน onclick ใน HTML

    document.getElementById('btnStart').addEventListener('click', startTimer);

    document.getElementById('btnPause').addEventListener('click', pauseTimer);

    document.getElementById('btnReset').addEventListener('click', resetTimer);

    minutesInput.addEventListener('input', () => {

        if (!isRunning) {

            const inputMins = parseInt(minutesInput.value) || 0;

            updateDisplay(inputMins * 60);

            timeLeft = 0; 

            statusMessage.textContent = "";

        }

    });

    updateDisplay(parseInt(minutesInput.value) * 60);

</script>

<link href="https://fonts.googleapis.com/css2?family=Kanit:wght@400;600&display=swap" rel="stylesheet">

<style>

    * {

        box-sizing: border-box;

        font-family: 'Kanit', sans-serif;

    }

    body {

        display: flex;

        justify-content: center;

        align-items: center;

        margin: 0;

        padding: 10px;

        background-color: transparent;

    }

    .timer-container {

        background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);

        padding: 30px;

        border-radius: 20px;

        box-shadow: 0 10px 25px rgba(0,0,0,0.15);

        text-align: center;

        width: 100%;

        max-width: 450px;

        border: 2px solid #e0e0e0;

    }

    h1 {

        color: #333;

        margin-top: 0;

        font-size: 22px;

    }

    .time-display {

        font-size: 70px;

        font-weight: 600;

        color: #ff6b6b;

        margin: 10px 0;

        text-shadow: 2px 2px 4px rgba(0,0,0,0.05);

        transition: color 0.3s;

    }

    .status-text {

        color: #e74c3c;

        font-size: 18px;

        font-weight: 600;

        height: 25px;

        margin-bottom: 15px;

    }

    .controls {

        display: flex;

        justify-content: center;

        gap: 10px;

        margin-bottom: 15px;

    }

    input[type="number"] {

        width: 70px;

        padding: 8px;

        font-size: 16px;

        border: 2px solid #ccc;

        border-radius: 8px;

        text-align: center;

        outline: none;

    }

    input[type="number"]:focus {

        border-color: #4facfe;

    }

    button {

        padding: 10px 18px;

        font-size: 16px;

        font-weight: 600;

        border: none;

        border-radius: 12px;

        cursor: pointer;

        color: white;

        transition: transform 0.1s, box-shadow 0.1s;

    }

    button:active {

        transform: scale(0.95);

    }

    .btn-start { background-color: #2ecc71; box-shadow: 0 4px #27ae60; }

    .btn-pause { background-color: #f1c40f; box-shadow: 0 4px #f39c12; color: #333; }

    .btn-reset { background-color: #e74c3c; box-shadow: 0 4px #c0392b; }

    .btn-start:hover { background-color: #27ae60; }

    .btn-pause:hover { background-color: #f39c12; }

    .btn-reset:hover { background-color: #c0392b; }

</style>

<div class="timer-container">

    <h1>⏳ นาฬิกาจับเวลา</h1>

    <div class="controls">

        <label style="font-size: 16px; display: flex; align-items: center;">

            เวลา (นาที): &nbsp;

            <input type="number" id="minutesInput" value="5" min="1">

        </label>

    </div>

    <div class="time-display" id="timeDisplay">05:00</div>

    <div class="status-text" id="statusMessage"></div>

    <div class="controls">

        <button class="btn-start" id="btnStart">▶️ เริ่ม</button>

        <button class="btn-pause" id="btnPause">⏸️ พัก</button>

        <button class="btn-reset" id="btnReset">🔄 รีเซ็ต</button>

    </div>

</div>

<audio id="alarmSound" src="https://actions.google.com/sounds/v1/alarms/bugle_tune.ogg" preload="auto"></audio>

<script>

    let countdown;

    let timeLeft = 0;

    let isRunning = false;

    const timeDisplay = document.getElementById('timeDisplay');

    const minutesInput = document.getElementById('minutesInput');

    const alarmSound = document.getElementById('alarmSound');

    const statusMessage = document.getElementById('statusMessage');

    function updateDisplay(seconds) {

        const mins = Math.floor(seconds / 60);

        const secs = seconds % 60;

        const displayMins = mins < 10 ? '0' + mins : mins;

        const displaySecs = secs < 10 ? '0' + secs : secs;

        timeDisplay.textContent = `${displayMins}:${displaySecs}`;

    }

    function startTimer() {

        if (isRunning) return; 

        statusMessage.textContent = ""; // เคลียร์ข้อความแจ้งเตือน

        if (timeLeft === 0) {

            const inputMins = parseInt(minutesInput.value);

            if (isNaN(inputMins) || inputMins <= 0) {

                statusMessage.textContent = "กรุณาใส่ตัวเลขนาทีให้ถูกต้องครับ";

                return;

            }

            timeLeft = inputMins * 60;

        }

        isRunning = true;

        countdown = setInterval(() => {

            timeLeft--;

            updateDisplay(timeLeft);

            if (timeLeft <= 0) {

                clearInterval(countdown);

                isRunning = false;

                // เล่นเสียงและเปลี่ยนสีตัวอักษร

                alarmSound.play().catch(e => console.log("เล่นเสียงไม่ได้")); 

                timeDisplay.style.color = "#c0392b"; 

                statusMessage.textContent = "⏰ หมดเวลาแล้วครับ!";

            }

        }, 1000);

    }

    function pauseTimer() {

        clearInterval(countdown);

        isRunning = false;

    }

    function resetTimer() {

        clearInterval(countdown);

        isRunning = false;

        timeLeft = 0;

        statusMessage.textContent = "";

        const inputMins = parseInt(minutesInput.value) || 0;

        updateDisplay(inputMins * 60);

        alarmSound.pause();

        alarmSound.currentTime = 0;

        timeDisplay.style.color = "#ff6b6b";

    }

    // ผูกคำสั่งกับปุ่มด้วย Event Listener แทน onclick ใน HTML

    document.getElementById('btnStart').addEventListener('click', startTimer);

    document.getElementById('btnPause').addEventListener('click', pauseTimer);

    document.getElementById('btnReset').addEventListener('click', resetTimer);

    minutesInput.addEventListener('input', () => {

        if (!isRunning) {

            const inputMins = parseInt(minutesInput.value) || 0;

            updateDisplay(inputMins * 60);

            timeLeft = 0; 

            statusMessage.textContent = "";

        }

    });

    updateDisplay(parseInt(minutesInput.value) * 60);

</script>