76 lines
2.5 KiB
HTML
76 lines
2.5 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>CAT</title>
|
||
|
|
<script type='application/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
|
||
|
|
<script type='application/javascript'>
|
||
|
|
var last_update = Date.now() // milisecond timestamp
|
||
|
|
$(document).ready(function() {
|
||
|
|
var html = $("html");
|
||
|
|
var indicator = $(".indicator");
|
||
|
|
websocket = (window.location.href + "ws").replace("http", "ws"); // Will break if http appears later in the url
|
||
|
|
if (window.WebSocket) {
|
||
|
|
ws = new WebSocket(websocket);
|
||
|
|
}
|
||
|
|
else if (window.MozWebSocket) {
|
||
|
|
ws = MozWebSocket(websocket);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
console.log('WebSocket Not Supported');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
window.onbeforeunload = function(e) {
|
||
|
|
ws.close(1000);
|
||
|
|
};
|
||
|
|
ws.onmessage = function (evt) {
|
||
|
|
// console.log(evt.data)
|
||
|
|
html.css("background-image", "url(" + evt.data + ")")
|
||
|
|
console.log("Got message length " + evt.data.length)
|
||
|
|
last_update = Date.now()
|
||
|
|
};
|
||
|
|
ws.onopen = function() {
|
||
|
|
indicator.css("background-color", "#090")
|
||
|
|
console.log("connected")
|
||
|
|
};
|
||
|
|
ws.onclose = function(evt) {
|
||
|
|
console.log("disconnected")
|
||
|
|
indicator.css("background-color", "#F00")
|
||
|
|
};
|
||
|
|
setInterval(function(){
|
||
|
|
indicator.html((Date.now() - last_update)/1000)
|
||
|
|
}, 200)
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
html {
|
||
|
|
background-attachment: fixed;
|
||
|
|
background-clip: border-box;
|
||
|
|
background-image: url(/latest.jpg);
|
||
|
|
background-position-x: 50%;
|
||
|
|
background-position-y: 50%;
|
||
|
|
background-size: cover;
|
||
|
|
}
|
||
|
|
.indicator {
|
||
|
|
position: absolute;
|
||
|
|
top: 20px;
|
||
|
|
left: 20px;
|
||
|
|
width: 40px;
|
||
|
|
height: 40px;
|
||
|
|
border-radius: 100%;
|
||
|
|
text-align: center;
|
||
|
|
color: #fff;
|
||
|
|
font-family: sans-serif;
|
||
|
|
font-size: 10px;
|
||
|
|
background-color: #FF0;
|
||
|
|
padding: 15px 0px;
|
||
|
|
line-height: 10px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="indicator">0</div>
|
||
|
|
</body>
|
||
|
|
</html>
|