Files
www-cancun/index.html
2020-02-16 13:47:06 +01:00

92 lines
2.6 KiB
HTML
Executable File

<!DOCTYPE html>
<html>
<head>
<title>Cancún Timer</title>
<meta charset="utf-8">
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Baloo+Bhaina');
body, html {
background-color: #00AAA0;
padding: 0;
margin: 0;
}
p {
padding: 0;
/*margin: inherit;*/
text-align: center;
font-family: 'Baloo Bhaina', cursive;
font-size: 25vmin;
vertical-align: center;
color: #FFB85F;
}
</style>
</head>
<body>
<p id="p">10:15:30</p>
<script type="text/javascript">
if (!String.prototype.padStart) {
String.prototype.padStart = function padStart(targetLength,padString) {
targetLength = targetLength>>0; //floor if number or convert non-number to 0;
padString = String(padString || ' ');
if (this.length > targetLength) {
return String(this);
}
else {
targetLength = targetLength-this.length;
if (targetLength > padString.length) {
padString += padString.repeat(targetLength/padString.length); //append to original to ensure we are longer than needed
}
return padString.slice(0,targetLength) + String(this);
}
};
}
notified = 0;
// request permission on page load
document.addEventListener('DOMContentLoaded', function () {
if (!Notification) {
alert('Desktop notifications not available in your browser.');
return;
}
if (Notification.permission !== "granted")
Notification.requestPermission();
notified = 1;
});
function notifyMe() {
if (Notification.permission !== "granted")
Notification.requestPermission();
else {
var notification = new Notification('Los gehts!', {
icon: 'http://findicons.com/files/icons/1341/summertime_snacks/128/nachos.png',
body: "Hey du! Ogo! Cancún wartet!",
});
var snd = new Audio("horn.wav"); // buffers automatically when created
snd.currentTime = 0;
snd.volume = 0.6;
snd.play();
}
}
function step() {
console.log(notified);
var pre = new Date();
var post = new Date('2017/03/16 16:45:00');
var notify = new Date('2017/03/16 16:00:00');
var diff = new Date(post-pre+pre.getTimezoneOffset()*60*1000);
document.getElementById("p").innerHTML = diff.getHours().toString().padStart(2, "0")+":"+(diff.getMinutes()).toString().padStart(2, "0")+":"+diff.getSeconds().toString().padStart(2, "0");
if (notified==1 && (notify-pre+pre.getTimezoneOffset()*60*1000)<0) {
notified = 2;
notifyMe();
}
}
step();
setInterval(step, 1000);
</script>
</body>
</html>