<html>
<head>
<title>Pillow Talk - Timeline</title>

<link rel="stylesheet" href="/css/vis.min.css"></link>
<script src="/js/reconnecting-websocket.js"></script>
<script src="/js/moment.min.js"></script>
<script src="/js/vis.min.js"></script>
<style type="text/css">
	body{
		margin:0;
		background: #333;
		color:#999;
		font-family:sans-serif;
		overflow-x: hidden;
	}
	#line{
	width: 180%;
	}
	.vis-item{
	color:#ccc;
	}
    .vis-item.message {
    	background: lightgray;
    	color:rgb(85, 87, 83);
    }
    .vis-item.message.vis-range{
	     background-color: darkgray;
	     border-color: black;
			 border:none 0px;
     }

  	.vis-item.speech {
      background-color: greenyellow;
      border-color: green;
			border:none 0px;
			color: greenyellow;
    }

    .vis-text,.vis-labelset .vis-label {
	    color: #ccc;
	}
.vis-time-axis .vis-text{
	color: #ccc;
}

.vis-grid, .vis-foreground .vis-group{
border-color:#666 !important;
font-size: 4.5pt;
}
.vis-item-content{
	height: 5px !important;
	overflow:hidden;
}

.vis-dot.INFO{
		}
.vis-dot.WARNING{
	width: 10px;
	height:10px;
	background:yellow;
	border-color:yellow;
	border-radius:15px;
}
.vis-dot.ERROR{
	width: 20px;
	height:20px;
	background:orange;
	border-color:orangered;
	border-radius:15px;
}
.vis-dot.CRITICAL{
	width: 30px;
	height:30px;
	background:red;
	border-color:darkred;
	border-radius:15px;
}
.buttons{
	background: #669;
	border-radius: 2px;
	position: absolute;
	right:10px;
	bottom: 10px;
	z-index: 99999;
	padding: 5px;
}
.vis-tooltip{
font-size: 20pt;
}
.vis-group{
	transition: background-color 1s;
}
.status-gone{
	background-color: #774d00;
}
.status-blocked{
	background-color:gray;
}
.status-available{
	background-color: #660;
}
.status-running.is-available{
	/* When running in a loop, Hugvey is listening while available */
	background-color: #246f6f !important;
}
.status-running.lang-en-GB{
	background-color: #02547e;

}
.status-running.lang-fr-FR{
	background: #5a434d;
}
.status-running.lang-de-DE{
	background: slategray;
}
.vis-label .vis-inner div.title{
	display:inline-block;
	padding-top:0;
}
.vis-label .vis-inner div.times{
	float:right;
	font-size: 70%;line-height:1;
}
.vis-label .vis-inner div.times span{
display:block;
padding: 0 5px;
}
</style>
</head>
<body id='timeline'>
	<div class='buttons'>
	<label id='follow_button'><input id="follow_checkbox" type="checkbox" name="follow" value="follow" checked> Follow timeline</label>
	<!--  <label id='sound_button'><input id="play_sound_on_error" type="checkbox" name="play_sound_on_error" value="play_sound_on_error" checked> Play sound on error</label>-->
	</div>
	<div id='line'></div>

	<script type='application/javascript' src="/js/hugvey_timeline.js"></script>
</body>
</html>