<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Pomodoro</title>
<link href="https://fonts.googleapis.com/css?family=Monsieur+La+Doulaise" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<body class="shadowwhite ">
<div class="inline mainbox ">
<div style="width: 200px; height:100px; margin: 100px">
<h5 class="centertext">Break Length</h5>
<div class="inline minibox ">
<div class="btn enlarge" id="BLp">+</div>
<div class="centertext enlarge" id="BL">5</div>
<div class="btn enlarge" id="BLm">-</div>
</div>
</div>
<div style="width: 200px; height:100px; margin: 100px">
<h5 class="centertext ">Session length</h5>
<div class="inline minibox">
<div class="btn enlarge" id="SLp">+</div>
<div class="centertext enlarge " id="SL">25</div>
<div class="btn enlarge" id="SLm">-</div>
</div>
</div>
</div>
<div>
<div id="countBtn" class="btn circle centertext">
<div id='Sessiondiv'>Session</div>
<div id="counter">25</div>
</div>
</div>
<span class=" Monsieur_La_Doulaisefont" style="padding-left: 200px; font-size:70pt "> Pomodoro</span>
</body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/vanderdrilu/pomodoro-ZoVpPa */
.circle {
margin: -80px 45%;
width: 200px;
height: 200px;
border-radius: 100px 100px 100px 100px;
-moz-border-radius: 100px 100px 100px 100px;
text-align: center;
border: 3px solid olivedrab;
vertical-align: middle;
padding: 10px 10px;
font-size: 250%;
}
.enlarge {
font-size: 25pt;
}
.minibox {
width: 90%;
height: 50px;
}
.mainbox {
width: 100%;
height: 140px;
}
.inline {
display: flex;
padding: 20px;
margin: 10px;
justify-content: center;
align-items: center;
/* border: 1px solid darkgreen;*/
}
.centertext {
text-align: center;
}
.shadowwhite {
color: #000000;
text-shadow: 2px 2px 1px white;
}
.btn1 {
height: 40px;
background-color: transparent;
}
.break {
background-size: cover;
margin-top: 100px;
background-repeat: no-repeat;
background-image: url("https://st.depositphotos.com/1152339/3601/i/950/depositphotos_36011057-stock-photo-time-concept-break-time-on.jpg");
}
.work {
background-size: cover;
margin-top: 100px;
background-repeat: no-repeat;
background-image: url("http://cdn.wonderfulengineering.com/wp-content/uploads/2014/10/motivational-wallpaper-17.jpg");
}
button :visited, :focus :active {
outline: 0;
}
.Monsieur_La_Doulaisefont {
font-family: 'Monsieur La Doulaise', cursive;
}
/*Downloaded from https://www.codeseek.co/vanderdrilu/pomodoro-ZoVpPa */
$(document).ready(function () {
var Session_length = 25;
Session_length = $('#SL').text();
var Countdownlength = Session_length;
var rebootBoo = false;
var stoppedBoo = true;
circlecolor = 'green';
var breakPhase = false;
var Break_length = 5;
Break_length = $('#BL').text();
var circleheigth = $('#countBtn').height();
var coundowntimeMs;
var last_time = new Date();
var stop_time = new Date();
var restart_time = new Date();
var pausetimeMS = 0;
var coundowntime = new Date();
$('body').addClass('work');
var welcomeaudiourl = 'http://soundbible.com/grab.php?id=1758&type=wav';
var breakudiourl = 'http://soundbible.com/grab.php?id=2218&type=wav';
$('body').toggleClass('back1');
$('#countBtn').click(function () {
var timer;
iniciation();
});
function iniciation() {
if (stoppedBoo === false) {
stoppedBoo = true;
stop_time = new Date();
timerstopfunc();
}
else {
stoppedBoo = false;
restart_time = new Date();
pausetimeMS += restart_time.getTime() - stop_time.getTime();
if (breakPhase === false) {
reboot(Session_length);
$('#Sessiondiv').text("Session");
Countdownlength = Session_length;
playSound(welcomeaudiourl);
$('body').addClass('work');
$('body').removeClass('break');
}
else {
reboot(Break_length);
$('#Sessiondiv').text('Break');
Countdownlength = Break_length;
playSound(breakudiourl);
$('body').addClass('break');
$('body').removeClass('work');
}
coundowntime.setMinutes(Countdownlength);
coundowntime.setSeconds(0);
coundowntimeMs = coundowntime.getTime();
timerfunc();
}
}
function reboot(BreakorSession) {
if (rebootBoo === true) {
last_time = new Date();
stop_time = new Date();
restart_time = new Date();
pausetimeMS = 0;
rebootBoo = false;
}
}
function timerstopfunc() {
window.clearInterval(timer);
}
function timerfunc() {
timer = window.setInterval(disp, 1000);
}
function disp() {
var date = new Date();
var dateMS = date.getTime();
var lastMS = last_time.getTime();
var diff = dateMS - lastMS;
//nastavený čas 25 min mínus rozdiel medzi dvomi časmi plus pauza
diff = pausetimeMS + coundowntimeMs - diff;
var outdate = new Date(diff);
var min = outdate.getMinutes();
var sec = outdate.getSeconds();
var first = ((min * 60) + sec);
var second = (Countdownlength * 60);
var circlePercent = ((min * 60 + sec) / (Countdownlength * 60)) * 100;
$('#countBtn').css('background-image', 'linear-gradient( transparent ' +
circlePercent + '%,' + circlecolor + ' ' + (100 - circlePercent) + '% )');
var timeshort = (min < 10 ? '0' : '') + min + String.fromCharCode(58) + (sec < 10 ? '0' : '') + sec;
$('#counter').text(timeshort);
if (min == 0 && sec == 0 && breakPhase === false) {
breakPhase = true;
Countdownlength = Break_length;
circlecolor = 'darkorchid';
timerstopfunc();
stoppedBoo = true;
rebootBoo = true;
iniciation();
$('#countBtn').css('border', '3px solid ' + circlecolor);
}
else if (min == 0 && sec == 0 && breakPhase === true) {
breakPhase = false;
Countdownlength = Session_length;
circlecolor = 'green';
rebootBoo = true;
iniciation();
$('#countBtn').css('border', '3px solid ' + circlecolor);
timerstopfunc();
stoppedBoo = true;
iniciation();
}
}
$('#BLp').click(function () {
Break_length++;
changeBreak_length();
});
$('#BLm').click(function () {
if (Break_length > 1)
Break_length--;
changeBreak_length();
});
function changeBreak_length() {
$('#BL').text(Break_length);
}
$('#SLp').click(function () {
if (stoppedBoo === true) {
Session_length++;
changeSession_Length();
}
});
$('#SLm').click(function () {
if (stoppedBoo === true) {
if (Session_length > 1)
Session_length--;
changeSession_Length();
}
});
function changeSession_Length() {
$('#SL').text(Session_length);
$('#counter').text(Session_length);
last_time = new Date();
stop_time = new Date();
restart_time = new Date();
pausetimeMS = 0;
timerstopfunc();
}
function playSound(url) {
var a = new Audio(url);
a.play();
}
});