Jan Tuomi
298 lines
6.3 KiB
HTML
298 lines
6.3 KiB
HTML
<html>
|
|
<head>
|
|
<title>Coffee Cups @Guild Room - AYY SIK RY</title>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="refresh" content="3600">
|
|
<meta http-equiv="cache-control" content="max-age=0" />
|
|
<meta http-equiv="cache-control" content="no-cache" />
|
|
<meta http-equiv="expires" content="0" />
|
|
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
|
|
<meta http-equiv="pragma" content="no-cache" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
|
<style>
|
|
body {
|
|
background-color: white;
|
|
font-family: monospace;
|
|
color: black;
|
|
}
|
|
#container{
|
|
position:relative;
|
|
width:95%;
|
|
margin-left:auto;
|
|
margin-right:auto;
|
|
height:100%;
|
|
overflow:hidden;
|
|
|
|
}
|
|
#upper{
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: bottom center;
|
|
background-image: url("/static/img/smokes.png");
|
|
transform-origin: bottom;
|
|
animation: smokes 8s ease-in-out 0s infinite;
|
|
opacity:0;
|
|
height:40%;
|
|
}
|
|
#lower{
|
|
position:relative;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: top center;
|
|
background-image: url("/static/img/coffeecup3.png");
|
|
height:60%;
|
|
}
|
|
#scale{
|
|
position:absolute;
|
|
top:80%;
|
|
width:90%;
|
|
height:10%;
|
|
margin: 0% 5% 0% 5%;
|
|
background: lightgrey;
|
|
border-radius: 10px;
|
|
overflow:hidden;
|
|
}
|
|
#scale2{
|
|
width: 0%;
|
|
transition: width 2s;
|
|
height:100%;
|
|
background: green;
|
|
border-radius: 10px;
|
|
}
|
|
#brewtime{
|
|
text-align:right;
|
|
position:absolute;
|
|
right:0px;
|
|
z-index:5;
|
|
font-size:10vw;
|
|
}
|
|
#address{
|
|
text-align:left;
|
|
position:absolute;
|
|
left:0px;
|
|
z-index:5;
|
|
font-size:4vw;
|
|
color: #333;
|
|
}
|
|
noscript{
|
|
color:red;
|
|
}
|
|
#text{
|
|
color:green;
|
|
position:absolute;
|
|
top:50%;
|
|
left:50%;
|
|
}
|
|
.brewing{
|
|
animation: brewing 5s ease-in-out 0s infinite;
|
|
}
|
|
.hurry{
|
|
color:red !important;
|
|
}
|
|
.unknown{
|
|
color:orange !important;
|
|
animation: unknown 5s ease-in-out 0s infinite;
|
|
}
|
|
.friday{
|
|
animation: friday 20s ease-in-out 0s infinite;
|
|
}
|
|
.normal{
|
|
animation: normal 1000s ease-in-out 0s infinite;
|
|
}
|
|
.coffeeready{
|
|
animation: coffeeready 10s ease-in-out 0s;
|
|
}
|
|
@keyframes smokes {
|
|
0% {transform: skewX(-10deg);}
|
|
50% {transform: skewX(10deg);}
|
|
100% {transform: skewX(-10deg);}
|
|
}
|
|
@keyframes brewing {
|
|
0% {color:green;}
|
|
50% {color: transparent;}
|
|
100% {color:green;}
|
|
}
|
|
@keyframes coffeeready {
|
|
0% {background-color:white;}
|
|
25% {background-color:green;}
|
|
50% {background-color:white;}
|
|
75% {background-color:green;}
|
|
100% {background-color:white;}
|
|
}
|
|
@keyframes unknown {
|
|
0%,40% {transform: rotate(0deg);}
|
|
60%,100% {transform: rotate(360deg);}
|
|
}
|
|
@keyframes friday {
|
|
0% {transform: rotate(0deg);}
|
|
100% {transform: rotate(360deg);}
|
|
}
|
|
@keyframes normal {
|
|
0%,49% {transform: rotate(0deg);}
|
|
50%,100% {transform: rotate(360deg);}
|
|
}
|
|
</style>
|
|
<script>
|
|
var len = 0;
|
|
var lastBrew = "∞";
|
|
var brewtext = "";
|
|
|
|
$(document).ready(function(){
|
|
$('#text').bind("DOMSubtreeModified", resize);
|
|
updateTime();
|
|
setInterval(updateTime,1000);
|
|
formatBrewTime();
|
|
setInterval(formatBrewTime,10000);
|
|
});
|
|
|
|
$(window).resize(resize);
|
|
|
|
var defaultBackoffTime = 1000;
|
|
var modified = 0;
|
|
|
|
|
|
|
|
function fetchdata(data, status){
|
|
var backoffTime = defaultBackoffTime;
|
|
modified = 1;
|
|
if (typeof status !== 'undefined'){
|
|
if (status == "success"){
|
|
backoffTime = defaultBackoffTime;
|
|
parseData(data);
|
|
}
|
|
else if (status == "error"){
|
|
backoffTime *= 2;
|
|
modified = 0
|
|
handleError();
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
|
|
$.getJSON("/coffee/cups", fetchdata);
|
|
setInterval(function() {
|
|
$.getJSON("/coffee/cups", fetchdata);
|
|
}, 2000);
|
|
|
|
function formatBrewTime(){
|
|
if(!brewtext && lastBrew instanceof Date){
|
|
var now = new Date();
|
|
var timeDiff = Math.max(now.getTime()-lastBrew.getTime(),0);
|
|
if(timeDiff < 3600000)
|
|
tmp = Math.round(timeDiff/60000) + ' min';
|
|
else
|
|
tmp = '~' + Math.round(timeDiff/3600000*2)/2 + ' h';
|
|
$("#brewtime").html(tmp);
|
|
}else
|
|
$("#brewtime").html(brewtext);
|
|
}
|
|
|
|
function handleError(){
|
|
setData("?",0,0,Number.MAX_VALUE,Number.MAX_VALUE);
|
|
}
|
|
|
|
function parseData(data) {
|
|
if (data) {
|
|
var date = new Date(data.date);
|
|
lastBrew = new Date(data.last_brew);
|
|
var now = new Date();
|
|
var cups = data.cups;
|
|
var brewing = data.brewing;
|
|
var timeDiff = Math.max(now.getTime() - lastBrew.getTime(),0);
|
|
var opa = Math.max(100-timeDiff/90000,0);
|
|
setData(cups, data.temp, opa,now.getTime()-date.getTime(), timeDiff, brewing);
|
|
}
|
|
else{
|
|
handleError();
|
|
}
|
|
}
|
|
|
|
function setData(cups, temp, opa, timeFromUpdate, timeFromBrew, brewing){
|
|
var now = new Date();
|
|
if(cups == 0)
|
|
opa = 0;
|
|
brewtext = "";
|
|
$("#upper").css({opacity: opa/100});
|
|
$("#scale2").css({width: Math.min(cups/9*100,100) + '%'});
|
|
$("#text,body").removeClass();
|
|
|
|
if(timeFromUpdate > 600000){
|
|
cups = "?";
|
|
brewtext = "∞";
|
|
$("#text").addClass("unknown");
|
|
}
|
|
else if(brewing){
|
|
cups = "+";
|
|
brewtext = ":)";
|
|
$("#text").addClass("brewing");
|
|
}
|
|
else if(cups <= 2){
|
|
$("#text").addClass("hurry");
|
|
}
|
|
formatBrewTime();
|
|
if($("#text").html() == "+" && !brewing)
|
|
$("body").addClass("coffeeready");
|
|
|
|
cups = Number(cups).toFixed(1);
|
|
var cupsString = cups.toString();
|
|
len = cupsString.length;
|
|
$("#text").html(cups);
|
|
}
|
|
|
|
function updateTime(){
|
|
var now = new Date();
|
|
$("#time").html(formatTime(now.getHours(),now.getMinutes(),now.getSeconds()));
|
|
}
|
|
|
|
function formatTime(hours, minutes, seconds){
|
|
var str = "";
|
|
|
|
if(hours < 10)
|
|
str += "0";
|
|
str += hours;
|
|
|
|
str += ":";
|
|
|
|
if(minutes < 10)
|
|
str += "0";
|
|
str += minutes;
|
|
|
|
str += ":";
|
|
|
|
if(seconds < 10)
|
|
str += "0";
|
|
str += seconds;
|
|
|
|
return str;
|
|
}
|
|
function resize(){
|
|
var w = $("#container").width();
|
|
var h = $("#container").height();
|
|
var s = w > h ? h : w;
|
|
var font = s*0.8*0.38/Math.sqrt(len);
|
|
$("#text").css({ top: s*0.16-font/2 + 'px', fontSize: font + 'px', marginLeft: -font*len*3/10 + 'px'});
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
|
|
<body>
|
|
<div id="container">
|
|
<span id="brewtime"></span>
|
|
<span id="address">
|
|
Kahvivaaka
|
|
<noscript><br>This page uses JavaScript!</noscript>
|
|
<br><span id="time"></span></span>
|
|
</span>
|
|
<div id="upper">
|
|
</div>
|
|
<!--Kahvinkeitin on rikki. Varakeittimellä keitettyä kahvia saattaa olla.-->
|
|
<div id="lower" class="normal">
|
|
<div id="text"></div>
|
|
<div id="scale"><div id="scale2"></div></div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|