start1.addEventListener('click', () => {
            if (!timer1) {
                timer1 = startTimer(duration1, progress1, counter1, miniContainer1, time1);
            }
            paused1 = false;
        });

        pause1.addEventListener('click', () => {
            paused1 = !paused1;
        });

        reset1.addEventListener('click', () => {
            clearInterval(timer1);
            timer1 = null;
            paused1 = false;
            progress1.style.height = '0%';
            time1.innerText = '24.0'; 
            counter1.innerText = '0';
            miniContainer1.querySelectorAll('.mini-square').forEach(square => {
                square.classList.remove('active', 'clicked');
            });
        });

        edit1.addEventListener('click', () => {
            handleEditing(counter1, timer1);
        });

        miniContainer1.querySelectorAll('.mini-square').forEach((square, index) => {
            square.addEventListener('click', () => {
                if (square.classList.contains('active')) {
                    square.classList.add('clicked');
                    square.classList.remove('active');
                }
            });
        });
    </script>
</body>
</html>