<div class="dsp">
    <p id="display"></p>
    <p>
    <button id="start-stop">Start Timer</button>
    </p>
    <p>
    	Reset timer to <input type="number" id="timer-length" placeholder="30" /> minutes.
    	<button id="reset-length">Reset</button>
    	
    </p>
</div>
<div id="resngth">Сброс</div>


<script>

let mnts = 20; //Минуты

var start = document.getElementById("start-stop");
var dis = document.getElementById("display");
var reset = document.getElementById("reset-length");
var newTimerLength = mnts*60*1000;

var finishTime;
var savedTime;
var timerLength = mnts*60*1000;
var timeoutID;
var timerStartButtonLabel = "Start Timer";
var timerPauseButtonLabel = "Pause Timer";


if(localStorage.getItem('timerFinishTime2')){
	UpdateTimer();
	start.innerHTML = timerPauseButtonLabel;
}else{
	//UpdateTimerDis(timerLength);
	if(localStorage.getItem('timeFirst2')){
	    
	    $('.uc-end-block').addClass('show--block');
            $('.uc-start-block').addClass('hide-start-block').removeClass('show--block');
            $('.uc-timer1, .uc-timer2').addClass('hide-start-block');

		    //t_lazyload_update();

	};
	
};


if(localStorage.getItem('timerSavedTime2')){
	var savedTime = localStorage.getItem('timerSavedTime') * 1;
  UpdateTimerDis(savedTime);
}


reset.onclick = function () {
    
    localStorage.removeItem('timeFirst2');
	newTimerLength = document.getElementById("timer-length").value * 60 * 1000;
	if(!newTimerLength){ newTimerLength = mnts*60*1000; }
	timerLength = newTimerLength;
	ClearTimer();
	start.innerHTML = timerStartButtonLabel;
	
}

start.onclick = function () {
		if(localStorage.getItem('timerIsRunning2')){
		//	PauseTimer();
		}else{
			StartTimer();
		}  
}

function ClearTimer() {
  if (timeoutID != undefined) window.clearTimeout(timeoutID);
	localStorage.removeItem('timerFinishTime2');
	localStorage.removeItem('timerSavedTime2');
	localStorage.removeItem('timerIsRunning2');
	
	UpdateTimerDis(timerLength);
}

function UpdateTimer() {
    finishTime = localStorage.getItem('timerFinishTime2');
    var timeLeft = (finishTime - new Date());
	
		if(timeLeft > 0){
			timeoutID = window.setTimeout(UpdateTimer, 1000);
			
			$('.uc-start-block').addClass('show--block');
			//t_lazyload_update();
			
			
		}else{
		    
		    
		    $('.uc-end-block').addClass('show--block');
            $('.uc-start-block').addClass('hide-start-block').removeClass('show--block');
            $('.uc-timer1, .uc-timer2').addClass('hide-start-block');
		    //t_lazyload_update();
		    
		    
			timeLeft = 0;
			if (timeoutID != undefined) window.clearTimeout(timeoutID);
			localStorage.removeItem('timerIsRunning2');
			localStorage.removeItem('timerFinishTime2');
			localStorage.removeItem('timerSavedTime2');
			
		}
		
		UpdateTimerDis(timeLeft);
}

function UpdateTimerDis(millis) {
	dis.innerHTML = "Time Left: " + millisToMinutesAndSeconds(millis);
}



function StartTimer() {
	start.innerHTML = timerPauseButtonLabel;
	
	if(localStorage.getItem('timerSavedTime2')){
		savedTime = localStorage.getItem('timerSavedTime2') * 1;
		localStorage.removeItem('timerSavedTime2');
	}else{
		savedTime = timerLength;
	}
	
	localStorage.setItem('timerIsRunning2', true);
	localStorage.setItem('timerFinishTime2', ((new Date()).getTime() + savedTime));
	if (timeoutID != undefined) window.clearTimeout(timeoutID);
	UpdateTimer();
}

function millisToMinutesAndSeconds(millis) {
		var hours = Math.floor(millis / 3600000);
		var minutes = (Math.floor(millis / 60000))-(hours*60);
		if(minutes > 59){
			minutes = 0;
		}
		var seconds = ((millis % 60000) / 1000).toFixed(0);
		if(seconds > 59){
			seconds = 0;
		}
		
		$('.timer_minute .tn-atom').text( (minutes < 10 ? '0' : '') + minutes );
        $('.timer_seconds .tn-atom').text( (seconds < 10 ? '0' : '') + seconds );
		
		return hours + ":" + (minutes < 10 ? '0' : '') + minutes + ":" + (seconds < 10 ? '0' : '') + seconds;
}    






$(document).ready(function(){
    
let timeFirst = true;

if(localStorage.getItem('timeFirst2'))  timeFirst = false;




let block_show = null;
let block_show2 = null;
 
function scrollTracking(){
    
  
    
    if(block_show==null && block_show2==null && timeFirst ){
        
 
        
    	let wt = $(window).scrollTop();
    	let wh = $(window).height();
    	let et = $('.uc-timer1 .timer_minute').offset().top;
    	let eh = $('.uc-timer1 .timer_minute').outerHeight();
     
        let et2 = $('.uc-timer2 .timer_minute').offset().top;
    	let eh2 = $('.uc-timer2 .timer_minute').outerHeight();
     
    	if (wt + wh >= et && wt + wh - eh * 2 <= et + (wh - eh)){
    		if (block_show == null || block_show == false) {
    		
                
                $('#start-stop')[0].click();
                timeFirst = false;
                localStorage.setItem('timeFirst2', 1);


    		};
    		block_show = true;
    		
    		
    	};
    	
    	if (wt + wh >= et2 && wt + wh - eh2 * 2 <= et2 + (wh - eh2)){
    		if (block_show2 == null || block_show2 == false) {
    			
    			
    			$('#start-stop')[0].click();
                timeFirst = false;
                localStorage.setItem('timeFirst2', 1);

    		};
    		block_show2 = true;

    	};
	
    };
	
};

 
$(window).scroll(function(){
	scrollTracking();
});
	
scrollTracking();


});



$(document).on('click', '#resngth', function(){
//$('#resngth').click(function(){
    localStorage.removeItem('timeFirst2');
});

</script>




<style>
.uc-end-block, .uc-start-block , .hide-start-block{
    display:none;
}
.show--block{
    display:block;
}

.dsp{
    display: none;
}

#resngth {
    width: 150px;
    height: 60px;
    margin: 30px;
    background-color: #e2e2e2;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    box-shadow: 0 0 4px 0px #5b5b5b;
}
</style>