80 lines
2.6 KiB
HTML
80 lines
2.6 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="en">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
|
||
|
|
<link rel="shortcut icon" href="./theme/ico/favicon.ico" >
|
||
|
|
<link rel="stylesheet" href="./theme/css/bootstrap.min.css" >
|
||
|
|
<link rel="stylesheet" href="./theme/icons/all-icons.css" type="text/css" media="screen" />
|
||
|
|
<link rel="stylesheet" href="./theme/fonts/all-fonts.css" type="text/css" media="screen" />
|
||
|
|
<link rel="stylesheet" href="./theme/css/main.css" >
|
||
|
|
<script src="./theme/js/jquery-3.4.1.min.js" ></script>
|
||
|
|
<script src="./theme/js/popper.min.js" ></script>
|
||
|
|
<script src="./theme/js/bootstrap.min.js" ></script>
|
||
|
|
<meta name="author" content="Piotr Czaja" />
|
||
|
|
<meta name="keywords" content="projekt repozytorium" />
|
||
|
|
<meta name="description" content="Odliczanie czasu przerwy" />
|
||
|
|
<title>Przerwa</title>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function startTimer(duration, display) {
|
||
|
|
var timer = duration, minutes, seconds;
|
||
|
|
setInterval(function () {
|
||
|
|
minutes = parseInt(timer / 60, 10);
|
||
|
|
seconds = parseInt(timer % 60, 10);
|
||
|
|
|
||
|
|
minutes = minutes < 10 ? "0" + minutes : minutes;
|
||
|
|
seconds = seconds < 10 ? "0" + seconds : seconds;
|
||
|
|
|
||
|
|
display.textContent = minutes + ":" + seconds;
|
||
|
|
|
||
|
|
if (--timer < 0) {
|
||
|
|
document.getElementById("odliczacz").innerHTML = "<h1 class='font-weight-bold'>Zajęcia za chwilę zostaną wznowione.</h1><hr/><p>Proszę o wyciszenie i zajęcie miejsc.</p></div>"
|
||
|
|
}
|
||
|
|
}, 1000);
|
||
|
|
}
|
||
|
|
|
||
|
|
window.onload = function () {
|
||
|
|
var fiveMinutes = 60 * 15,
|
||
|
|
display = document.querySelector('#time');
|
||
|
|
startTimer(fiveMinutes, display);
|
||
|
|
};
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body
|
||
|
|
|
||
|
|
<div class="container">
|
||
|
|
<div class="jumbotron mt-3">
|
||
|
|
|
||
|
|
|
||
|
|
<div id="odliczacz"> <h1> Przerwa 15 min.</h1><hr/>
|
||
|
|
|
||
|
|
<div class="progress">
|
||
|
|
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p class="text-center" style="font-size:600%;"> <span id="time">15:00</span></p>
|
||
|
|
|
||
|
|
<div class="progress">
|
||
|
|
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div></div>
|
||
|
|
|
||
|
|
<div id='audio'></div>
|
||
|
|
<script type='text/javascript'>
|
||
|
|
$(document).ready(function (){
|
||
|
|
$("#audio").stop("true").delay('722000').queue(function() {
|
||
|
|
$(this).html('<audio autoplay="autoplay"><source src="GongPrzedSpotkaniem.mp3" type="audio/mp3" /></audio>');
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|
||
|
|
|