214 lines
4.4 KiB
HTML
214 lines
4.4 KiB
HTML
<html>
|
|
|
|
<head>
|
|
<title>Annotations</title>
|
|
<link rel="stylesheet" href="svganim.css">
|
|
<style>
|
|
body {
|
|
background: rgb(39, 40, 41);
|
|
font-family: sans-serif;
|
|
color: white
|
|
}
|
|
|
|
#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 {
|
|
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;
|
|
;
|
|
} */
|
|
#tags li.selected>ul>li.add-tag {
|
|
display: block;
|
|
}
|
|
|
|
#tags>li>ul>li.add-tag {
|
|
display: block;
|
|
;
|
|
}
|
|
|
|
#annotations .annotations-actions {
|
|
margin-bottom: 10px;
|
|
color: darkgray;
|
|
font-size: 80%;
|
|
border-bottom: solid 3px #444;
|
|
position: sticky;
|
|
top: 0;
|
|
background: rgb(39, 40, 41);
|
|
padding: 3px 0;
|
|
}
|
|
|
|
|
|
|
|
#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 {
|
|
/* 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;
|
|
}
|
|
</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>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="annotation_manager">
|
|
<ul id="tags"></ul>
|
|
<div id="annotations"></div>
|
|
</div>
|
|
|
|
<hr>
|
|
<a href="?refresh=1">Reload index</a>
|
|
</body>
|
|
<script>
|
|
const am = new AnnotationManager(document.getElementById('annotation_manager'), 'tags.json');
|
|
</script>
|
|
|
|
</html> |