<!DOCTYPE html>

⎗
✓
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pomodoro</title>
    <style> 
        * {
            margin: 1px;
            font-family: monospace;
        }
        .title {
            margin-bottom: 8px;
        }
        .line {
            margin-bottom: 8px;
            margin-top: 8px;
        }
        .indicator {
            margin-left: 7px;
        }
        .line {
            display: none;
        }
    </style>
</head>
<body>
    <div id="title" class="title"> 
        <div> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ </div>
        <div> | - P - O - M - O - D - O - R - O - | </div>
        <div> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ </div>
    </div>
    <div id="state"> 
        <div id="total-sessions" class="indicator"> </div> 
        <div id="total-time" class="indicator"> </div>
        <div class="line"> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ </div>
        <div id="session-type" class="indicator"> </div>
        <div class="line"> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ </div>
        <div id="time-remaining" class="indicator"> </div>
    </div>
</body>
</html>

<script>
// Timer Options
const work_time=25;
const rest_time=5;
const long_rest_time=15;
const long_rest_interval=5;
const second = 1000;

// Language and Translation Options
const work_session_str = "Sesión de trabajo";
const long_rest_str = "Sesión de descanso largo";
const short_rest_str = "Sesión de descanso corto";
const total_sessions_str="Sesiones de trabajo totales";
const total_time_str = "Tiempo trabajado";
const press_ctrl_c_str = "Esperando pulsación CTRL+C";
const hours_str = "horas";
const minutes_str ="minutos";
const seconds_str ="segundos";
const and_str = "y";
const remaining_str ="restantes";

// HTML-linked labels
const session_type_tag = document.getElementById('session-type')
const total_sessions_tag = document.getElementById('total-sessions')
const total_time_tag = document.getElementById('total-time')
const time_remaining_tag = document.getElementById('time-remaining')

// Current URL for adding parameters
const url = new URL(window.location.href);

// Application Variables
let rest_counter=0;
let long_rest_counter=0;
let work_counter=0;
let is_rest_time=0;
let is_long_rest_time=0;
let total_work_minutes=0;
let work_hours =0;
let work_minutes =0
//
let seconds_counter = 0
let seconds_timer = 0
let minutes_counter = 0
let minutes_timer = 0
let hours_timer = 0
// 
let load_flag = false;

// Oscillator Settings
var context = new AudioContext();
var oscillator = context.createOscillator();
oscillator.type = "sine";
oscillator.start();
context.suspend()

/*
    Generates a beep using the previously created oscillator. 
    It is controlled by context.suspend() and context.resume()
*/
function beep (frequency, time) {
    oscillator.frequency.value = frequency;
    oscillator.connect(context.destination);
    context.resume();
    // Beep for 500 milliseconds
    setTimeout(function () {
        context.suspend()
    }, time);
}

/*
Modify the `time_remaining_tag` to set the times for each iteration. 
The main function must wait the same amount of time to synchronize.
*/
async function timer(countdown){
    let minutes_remaining;
    let seconds_remaining;
    countdown = countdown*60
    while (countdown > 0) {
        countdown--;
        minutes_remaining = Math.trunc(countdown / 60);
        seconds_remaining = Math.trunc (countdown % 60);
        time_remaining_tag.innerHTML=`${minutes_remaining} ${minutes_str} ${seconds_remaining} ${seconds_str} ${remaining_str}...`;
        await new Promise(r => setTimeout(r, second));
    }
}

/*
Two promises that call out to each other in an intermittent loop that projects a clock onto the screen.
The beep will sound every second. 
*/
async function waitingKeypress() {
    return new Promise((resolve) => {
        let stopped = false;

        function onKeyHandler(event) {
            if (event.ctrlKey && event.key.toLowerCase() === "c") {
                event.preventDefault();

                stopped = true;
                document.removeEventListener("keydown", onKeyHandler);

                context.suspend();
                resolve();
            }
        }

        document.addEventListener("keydown", onKeyHandler);
        seconds_counter = 0
        seconds_timer = 0
        minutes_counter = 0
        minutes_timer = 0
        hours_timer = 0

        async function playBeepLoop() {
            while (!stopped) {
                beep(250, second/2);
                seconds_counter++
                seconds_timer = Math.trunc(seconds_counter % 60)
                minutes_counter = Math.trunc(seconds_counter / 60)
                minutes_timer = Math.trunc(minutes_counter % 60)
                hours_timer = Math.trunc(minutes_counter / 60)

                if (seconds_timer < 10) seconds_timer = `0${seconds_timer}`
                if (minutes_timer < 10) minutes_timer = `0${minutes_timer}`
                if (hours_timer < 10) hours_timer = `0${hours_timer}`

                time_remaining_tag.innerHTML=`${press_ctrl_c_str} (${hours_timer}:${minutes_timer}:${seconds_timer})`;
                await new Promise((resolve) => {
                    setTimeout(resolve, second);
                });
            }
        }

        playBeepLoop();
    });
}

/*
    Load the session based on the values and calculate based on the work counter
*/
function loadSession() {
    const params = new URLSearchParams(window.location.search);
    work_counter = Number(params.get("work_counter")) || 0;
    rest_counter= work_counter*2;
    long_rest_counter=work_counter;
    is_rest_time=0;
    is_long_rest_time=work_counter;
    total_work_minutes=work_time*work_counter;
    work_hours = Math.trunc (total_work_minutes / 60)
    work_minutes = Math.trunc (total_work_minutes % 60)

}

/*
    Saves the work counter and updates it in the URL parameters
*/
function saveSession () {
    url.searchParams.set("work_counter", work_counter);
    window.history.replaceState({}, "", url);
}


async function main (){
    await waitingKeypress();
    var elements = document.querySelectorAll('.line');
    for(var i=0; i<elements.length; i++){
        elements[i].style.display = "block"
    }
    loadSession ()
    total_time_tag.innerHTML = `${total_time_str}: ${work_hours} ${hours_str} ${and_str} ${work_minutes} ${minutes_str}`
    while (true) {
        total_sessions_tag.innerHTML = `${total_sessions_str}: ${work_counter}`
        rest_counter++;
        is_rest_time = rest_counter%2;
        if (is_rest_time == 0) {          
            long_rest_counter++;
            is_long_rest_time = long_rest_counter % long_rest_interval;
            if (is_long_rest_time == 0) {
                session_type_tag.innerHTML=`${long_rest_str} — ${long_rest_time} ${minutes_str}`
                await timer (long_rest_time)
                await waitingKeypress();
            }
            else {
                session_type_tag.innerHTML=`${short_rest_str} — ${rest_time} ${minutes_str}`
                await timer (rest_time)
                await waitingKeypress();
            }
        }
        else {
            work_counter++
            session_type_tag.innerHTML=`${work_session_str} — ${work_time} ${minutes_str}`
            await timer (work_time)
            await waitingKeypress();
            saveSession ()


        }
        total_work_minutes = work_counter * work_time;
        work_hours = Math.trunc(total_work_minutes / 60)
        work_minutes = Math.trunc (total_work_minutes % 60)
        total_time_tag.innerHTML = `${total_time_str}: ${work_hours} ${hours_str} ${and_str} ${work_minutes} ${minutes_str}`
    }
}


main ()

/*
# Copyright (C) 2025 HURSZ
#
# This program is free software: you can redistribute it and/or modify
# it under the terms of the GNU General Public License as published by
# the Free Software Foundation, either version 3 of the License, or
# (at your option) any later version.
#
# This program is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
# GNU General Public License for more details.
#
# You should have received a copy of the GNU General Public License
# along with this program. If not, see <https://www.gnu.org/licenses/>.
*/

</script>
Warning
