chronodiagram/app/templates/index.html

203 lines
4.2 KiB
HTML
Raw Normal View History

2022-01-19 10:55:30 +01:00
<html>
<head>
<title>Annotations</title>
<link rel="stylesheet" href="svganim.css">
2022-01-19 10:55:30 +01:00
<style>
body {
background: rgb(39, 40, 41);
font-family: sans-serif;
color: white
2022-01-19 10:55:30 +01:00
}
#tags {
font-size: 80%;
padding: 0;
margin: 0;
}
#tags li {
line-height: 1.5;
list-style: none;
}
#tags .tag-id-root {
list-style: none;
;
}
#tags .tag-id-root>ul {
2022-01-19 10:55:30 +01:00
margin: 0;
padding: 0;
}
#tags li>div,
#tags li.add-tag {
cursor: pointer;
}
#tags .tag-id-root>div {
display: none;
}
/* #tags li:hover>ul>li.add-tag {
visibility: visible;
2022-01-19 10:55:30 +01:00
;
} */
#tags li.selected > ul>li.add-tag {
display: block;
2022-01-19 10:55:30 +01:00
}
#tags > li > ul >li.add-tag {
display: block;
;
}
#tags .add-tag {
display: none;
;
color: lightgray;
font-size: 80%;
}
#tags input[type="color"] {
cursor: pointer;
width: 15px;
height: 15px;
padding: 0;
border: solid 1px black;
border-radius: 2px;
vertical-align: middle;
margin-right: 10px;
}
#tags li:hover > div > input.rm-tag{
display: inline-block;
}
#tags li div{
position:relative
}
#tags input.rm-tag:hover{
color: red;
transform: rotate(20deg);
}
#tags input.rm-tag{
/* display: none; */
position:absolute;
right:0;
top:0;
padding:0;
background: none;
border: none;
color: white;
cursor:pointer;
}
#tags .selected>div {
background: lightblue
}
summary h2 {
display: inline-block;
cursor: pointer;
}
details[open] summary {
color: rgb(224, 196, 196);
}
/* details ul{
display: none;
}
details[open] ul{
display: block;;
} */
#annotation_manager {
display: grid;
gap: 20px;
grid-template-columns: 200px auto;
}
#tags {
grid-column: 1;
}
#annotations {
grid-column: 2;
}
#annotations ul {
grid-template-columns: repeat(auto-fill, 320px);
grid-gap: 20px;
display: grid;
list-style: none;
margin: 0;
padding: 0;
}
#annotations li {
}
#annotations img {
2022-01-19 10:55:30 +01:00
/* width: 400px; */
background: white;
width: 300px;
height: 200px;
cursor: pointer;
padding: 10px;
}
#annotations .svganim_player {
display: inline-block;
position: relative;
width: 300px;
height: 200px;
overflow: hidden;
padding: 10px;
background: white;
}
#annotations .svganim_player svg {
width: 100%;
height: 100%;
}
#annotations .svganim_player.play:not(.loading) .controls {
visibility: hidden;
}
#annotations .svganim_player:hover .controls {
visibility: visible !important;
2022-01-19 10:55:30 +01:00
}
2022-01-19 10:55:30 +01:00
</style>
<script src="assets/nouislider-15.5.0.js"></script>
<script src="assets/wNumb-1.2.0.min.js"></script>
<script src="annotate.js"></script>
<script src="annotations.js"></script>
2022-01-19 10:55:30 +01:00
</head>
<body>
<div id="annotation_manager">
<ul id="tags"></ul>
<div id="annotations"></div>
</div>
2022-01-19 11:15:55 +01:00
<hr>
<a href="?refresh=1">Reload index</a>
2022-01-19 10:55:30 +01:00
</body>
<script>
const am = new AnnotationManager(document.getElementById('annotation_manager'), 'tags.json');
2022-01-19 10:55:30 +01:00
</script>
</html>