hugvey/www/timeline.html

144 lines
2.7 KiB
HTML
Raw Normal View History

2019-04-25 19:08:27 +02:00
<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>
2019-04-25 19:08:27 +02:00
<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{
2019-05-15 16:03:51 +02:00
color:#ccc;
2019-04-25 19:08:27 +02:00
}
.vis-item.message {
background: lightgray;
2019-04-30 21:15:38 +02:00
color:rgb(85, 87, 83);
2019-04-25 19:08:27 +02:00
}
.vis-item.message.vis-range{
background-color: darkgray;
2019-04-30 21:15:38 +02:00
border-color: black;
border:none 0px;
2019-04-25 19:08:27 +02:00
}
2019-08-29 10:15:33 +02:00
2019-04-25 19:08:27 +02:00
.vis-item.speech {
background-color: greenyellow;
border-color: green;
border:none 0px;
2019-08-29 10:15:33 +02:00
color: greenyellow;
2019-04-25 19:08:27 +02:00
}
2019-05-11 18:17:06 +02:00
2019-04-25 19:08:27 +02:00
.vis-text,.vis-labelset .vis-label {
2019-05-15 16:03:51 +02:00
color: #ccc;
2019-04-25 19:08:27 +02:00
}
.vis-time-axis .vis-text{
2019-05-15 16:03:51 +02:00
color: #ccc;
2019-04-25 19:08:27 +02:00
}
.vis-grid, .vis-foreground .vis-group{
border-color:#666 !important;
2019-04-26 19:01:33 +02:00
font-size: 4.5pt;
2019-04-25 19:08:27 +02:00
}
2019-05-16 16:16:44 +02:00
.vis-item-content{
height: 5px !important;
overflow:hidden;
}
2019-04-25 19:08:27 +02:00
2019-04-27 16:56:54 +02:00
.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;
2019-11-11 15:35:33 +01:00
right:10px;
2019-11-11 17:16:53 +01:00
bottom: 10px;
z-index: 99999;
padding: 5px;
}
2019-05-16 16:16:44 +02:00
.vis-tooltip{
font-size: 20pt;
}
2019-05-15 16:03:51 +02:00
.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;
}
2019-05-15 16:03:51 +02:00
.status-running.lang-en-GB{
background-color: #02547e;
2019-08-29 10:15:33 +02:00
2019-05-15 16:03:51 +02:00
}
.status-running.lang-fr-FR{
background: #f00;
}
.status-running.lang-fr-FR2{
2019-05-15 16:03:51 +02:00
background: #5a434d;
}
.status-running.lang-de-DE{
background: slategray;
}
2019-11-11 15:34:11 +01:00
.vis-label .vis-inner div.title{
display:inline-block;
padding-top:0;
}
.vis-label .vis-inner div.times{
float:right;
2019-11-11 16:20:08 +01:00
font-size: 70%;line-height:1;
2019-11-11 15:34:11 +01:00
}
.vis-label .vis-inner div.times span{
display:block;
padding: 0 5px;
}
2019-04-25 19:08:27 +02:00
</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>
2019-04-25 19:08:27 +02:00
<div id='line'></div>
2019-05-11 18:17:06 +02:00
2019-04-25 19:08:27 +02:00
<script type='application/javascript' src="/js/hugvey_timeline.js"></script>
</body>
2019-05-11 18:17:06 +02:00
</html>