{"id":258,"date":"2025-04-11T13:01:11","date_gmt":"2025-04-11T13:01:11","guid":{"rendered":"https:\/\/askqustion.in\/?p=258"},"modified":"2025-04-11T13:01:13","modified_gmt":"2025-04-11T13:01:13","slug":"pomodoro-timer","status":"publish","type":"post","link":"https:\/\/askqustion.in\/?p=258","title":{"rendered":"pomodoro timer"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Pomodoro Timer<\/title>\n    <style>\n        body {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            min-height: 100vh;\n            background-color: #f0f0f0; \/* Light gray background *\/\n            font-family: sans-serif;\n            margin: 0;\n        }\n\n        .pomodoro-container {\n            background-color: #ffffff; \/* White container *\/\n            padding: 30px 40px;\n            border-radius: 15px;\n            box-shadow: 0 5px 15px rgba(0,0,0,0.1);\n            text-align: center;\n            width: 90%;\n            max-width: 400px;\n        }\n\n        h1 {\n            color: #333;\n            margin-bottom: 15px;\n        }\n\n        #timer-mode {\n            font-size: 1.2em;\n            color: #555;\n            margin-bottom: 20px;\n            font-weight: bold;\n        }\n\n        #timer-display {\n            font-size: 5em; \/* Larger timer text *\/\n            font-weight: bold;\n            color: #d9534f; \/* Default red color for work *\/\n            margin-bottom: 30px;\n            line-height: 1;\n        }\n\n        .buttons button {\n            padding: 12px 25px;\n            margin: 5px;\n            border: none;\n            border-radius: 5px;\n            cursor: pointer;\n            font-size: 1em;\n            transition: background-color 0.3s ease, transform 0.1s ease;\n        }\n\n        .buttons button:active {\n            transform: scale(0.98); \/* Slight press effect *\/\n        }\n\n        #start {\n            background-color: #5cb85c; \/* Green *\/\n            color: white;\n        }\n        #start:hover {\n            background-color: #4cae4c;\n        }\n\n        #pause {\n            background-color: #f0ad4e; \/* Orange *\/\n            color: white;\n        }\n         #pause:hover {\n            background-color: #ec971f;\n        }\n\n        #reset {\n            background-color: #d9534f; \/* Red *\/\n            color: white;\n        }\n         #reset:hover {\n            background-color: #c9302c;\n        }\n\n        .modes button {\n            padding: 8px 15px;\n            margin: 10px 5px 0 5px; \/* Add top margin *\/\n            border: 1px solid #ccc;\n            border-radius: 5px;\n            cursor: pointer;\n            font-size: 0.9em;\n            background-color: #eee;\n            transition: background-color 0.3s ease, border-color 0.3s ease;\n        }\n\n        .modes button:hover {\n             background-color: #ddd;\n        }\n\n        .modes button.active {\n            background-color: #aaa; \/* Darker gray for active mode *\/\n            font-weight: bold;\n            border-color: #888;\n        }\n\n        \/* Different background colors for modes (optional) *\/\n        .pomodoro-container.work-mode { background-color: #fff0f0; }\n        .pomodoro-container.short-break-mode { background-color: #f0fff0; }\n        .pomodoro-container.long-break-mode { background-color: #f0f0ff; }\n\n    <\/style>\n<\/head>\n<body>\n    <div class=\"pomodoro-container\" id=\"pomodoro-container\">\n        <h1>\u092a\u094b\u092e\u094b\u0921\u094b\u0930\u094b \u091f\u093e\u0907\u092e\u0930<\/h1>\n        <div id=\"timer-mode\">\u0915\u093e\u0930\u094d\u092f (Work)<\/div>\n        <div id=\"timer-display\">25:00<\/div>\n        <div class=\"buttons\">\n            <button id=\"start\">\u0938\u094d\u091f\u093e\u0930\u094d\u091f (Start)<\/button>\n            <button id=\"pause\">\u092a\u0949\u091c (Pause)<\/button>\n            <button id=\"reset\">\u0930\u0940\u0938\u0947\u091f (Reset)<\/button>\n        <\/div>\n        <div class=\"modes\">\n             <button id=\"mode-work\" class=\"active\">\u0915\u093e\u0930\u094d\u092f (25 \u092e\u093f\u0928\u091f)<\/button>\n             <button id=\"mode-short-break\">\u091b\u094b\u091f\u093e \u092c\u094d\u0930\u0947\u0915 (5 \u092e\u093f\u0928\u091f)<\/button>\n             <button id=\"mode-long-break\">\u0932\u0902\u092c\u093e \u092c\u094d\u0930\u0947\u0915 (15 \u092e\u093f\u0928\u091f)<\/button>\n        <\/div>\n    <\/div>\n\n    <script>\n        const timerDisplay = document.getElementById('timer-display');\n        const timerModeDisplay = document.getElementById('timer-mode');\n        const startButton = document.getElementById('start');\n        const pauseButton = document.getElementById('pause');\n        const resetButton = document.getElementById('reset');\n        const workModeButton = document.getElementById('mode-work');\n        const shortBreakModeButton = document.getElementById('mode-short-break');\n        const longBreakModeButton = document.getElementById('mode-long-break');\n        const container = document.getElementById('pomodoro-container');\n\n        const workDuration = 25 * 60; \/\/ 25 minutes in seconds\n        const shortBreakDuration = 5 * 60; \/\/ 5 minutes\n        const longBreakDuration = 15 * 60; \/\/ 15 minutes\n\n        let timerInterval = null;\n        let timeLeft = workDuration; \/\/ Initial time\n        let currentMode = 'work'; \/\/ 'work', 'shortBreak', 'longBreak'\n        let isPaused = true; \/\/ Timer is initially paused\n\n        \/\/ --- Helper Functions ---\n\n        function formatTime(seconds) {\n            const minutes = Math.floor(seconds \/ 60);\n            const remainingSeconds = seconds % 60;\n            \/\/ Add leading zero if seconds < 10\n            return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;\n        }\n\n        function updateDisplay() {\n            timerDisplay.textContent = formatTime(timeLeft);\n            \/\/ Update page title to show time when running\n            if (!isPaused) {\n                 document.title = `${formatTime(timeLeft)} - ${timerModeDisplay.textContent}`;\n            } else {\n                 document.title = \"Pomodoro Timer\";\n            }\n        }\n\n        function updateModeDisplayAndColor() {\n             let modeText = '';\n             let displayColor = '';\n             let containerClass = '';\n\n             \/\/ Remove existing mode classes\n             container.classList.remove('work-mode', 'short-break-mode', 'long-break-mode');\n             \/\/ Remove active class from all mode buttons\n             workModeButton.classList.remove('active');\n             shortBreakModeButton.classList.remove('active');\n             longBreakModeButton.classList.remove('active');\n\n\n             switch (currentMode) {\n                case 'shortBreak':\n                    modeText = '\u091b\u094b\u091f\u093e \u092c\u094d\u0930\u0947\u0915 (Short Break)';\n                    displayColor = '#5cb85c'; \/\/ Green for break\n                    containerClass = 'short-break-mode';\n                    shortBreakModeButton.classList.add('active');\n                    break;\n                case 'longBreak':\n                    modeText = '\u0932\u0902\u092c\u093e \u092c\u094d\u0930\u0947\u0915 (Long Break)';\n                    displayColor = '#5bc0de'; \/\/ Blue for long break\n                    containerClass = 'long-break-mode';\n                    longBreakModeButton.classList.add('active');\n                    break;\n                case 'work':\n                default:\n                    modeText = '\u0915\u093e\u0930\u094d\u092f (Work)';\n                    displayColor = '#d9534f'; \/\/ Red for work\n                    containerClass = 'work-mode';\n                    workModeButton.classList.add('active');\n                    break;\n            }\n            timerModeDisplay.textContent = modeText;\n            timerDisplay.style.color = displayColor;\n            container.classList.add(containerClass);\n        }\n\n\n        function stopTimer() {\n            clearInterval(timerInterval);\n            timerInterval = null;\n            isPaused = true;\n            document.title = \"Pomodoro Timer\"; \/\/ Reset title when stopped\/paused\n        }\n\n        function startTimer() {\n            if (timerInterval !== null) return; \/\/ Already running\n\n            isPaused = false;\n            timerInterval = setInterval(() => {\n                timeLeft--;\n                updateDisplay();\n\n                if (timeLeft <= 0) {\n                    stopTimer();\n                    alert(`${timerModeDisplay.textContent} \u0938\u0924\u094d\u0930 \u0938\u092e\u093e\u092a\u094d\u0924! (Session Ended!)`);\n                    \/\/ Optional: Automatically switch to the next mode or reset\n                    \/\/ For simplicity, we just stop and alert here. User can manually switch.\n                }\n            }, 1000); \/\/ Run every second\n        }\n\n        function pauseTimer() {\n            if (!isPaused) {\n                 stopTimer(); \/\/ Use stopTimer to clear interval and set pause state\n            }\n        }\n\n        function resetTimer() {\n             stopTimer(); \/\/ Stop the timer first\n             switch (currentMode) {\n                 case 'shortBreak':\n                    timeLeft = shortBreakDuration;\n                    break;\n                 case 'longBreak':\n                    timeLeft = longBreakDuration;\n                    break;\n                 case 'work':\n                 default:\n                    timeLeft = workDuration;\n                    break;\n             }\n             updateDisplay(); \/\/ Update display with reset time\n        }\n\n        function switchMode(mode) {\n             stopTimer();\n             currentMode = mode;\n             resetTimer(); \/\/ Reset time to the new mode's duration\n             updateModeDisplayAndColor(); \/\/ Update text, colors, and button states\n             updateDisplay(); \/\/ Show the initial time for the new mode\n        }\n\n\n        \/\/ --- Event Listeners ---\n\n        startButton.addEventListener('click', () => {\n             if(isPaused){ \/\/ Only start if paused or stopped\n                 startTimer();\n             }\n        });\n\n        pauseButton.addEventListener('click', pauseTimer);\n\n        resetButton.addEventListener('click', resetTimer);\n\n        workModeButton.addEventListener('click', () => switchMode('work'));\n        shortBreakModeButton.addEventListener('click', () => switchMode('shortBreak'));\n        longBreakModeButton.addEventListener('click', () => switchMode('longBreak'));\n\n        \/\/ --- Initial Setup ---\n        updateModeDisplayAndColor(); \/\/ Set initial mode text and colors\n        updateDisplay(); \/\/ Show initial time\n\n    <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Pomodoro Timer \u092a\u094b\u092e\u094b\u0921\u094b\u0930\u094b \u091f\u093e\u0907\u092e\u0930 \u0915\u093e\u0930\u094d\u092f (Work) 25:00 \u0938\u094d\u091f\u093e\u0930\u094d\u091f (Start) \u092a\u0949\u091c (Pause) \u0930\u0940\u0938\u0947\u091f (Reset) \u0915\u093e\u0930\u094d\u092f (25 \u092e\u093f\u0928\u091f) \u091b\u094b\u091f\u093e \u092c\u094d\u0930\u0947\u0915 (5 \u092e\u093f\u0928\u091f) \u0932\u0902\u092c\u093e \u092c\u094d\u0930\u0947\u0915 (15 \u092e\u093f\u0928\u091f)<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-258","post","type-post","status-publish","format-standard","hentry","category-blog"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/askqustion.in\/index.php?rest_route=\/wp\/v2\/posts\/258","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/askqustion.in\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/askqustion.in\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/askqustion.in\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/askqustion.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=258"}],"version-history":[{"count":1,"href":"https:\/\/askqustion.in\/index.php?rest_route=\/wp\/v2\/posts\/258\/revisions"}],"predecessor-version":[{"id":259,"href":"https:\/\/askqustion.in\/index.php?rest_route=\/wp\/v2\/posts\/258\/revisions\/259"}],"wp:attachment":[{"href":"https:\/\/askqustion.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=258"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/askqustion.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=258"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/askqustion.in\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=258"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}