chronodiagram/app/templates/index.html

201 lines
4.1 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
;
} */
2022-06-08 18:51:22 +02:00
#tags li.selected>ul>li.add-tag {
display: block;
2022-01-19 10:55:30 +01:00
}
2022-06-08 18:51:22 +02:00
#tags>li>ul>li.add-tag {
display: block;
;
}
2022-06-08 18:51:22 +02:00
#annotations .annotations-actions {
margin-bottom: 10px;
color: darkgray;
font-size: 80%;
border-bottom: solid 3px #444;
2022-06-14 17:32:20 +02:00
position: sticky;
top: 0;
background: rgb(39, 40, 41);
padding: 3px 0;
2022-06-08 18:51:22 +02:00
}
#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;
}
2022-06-08 18:51:22 +02:00
#tags li:hover>div>input.rm-tag {
display: inline-block;
}
2022-06-08 18:51:22 +02:00
#tags li div {
position: relative
}
2022-06-08 18:51:22 +02:00
#tags input.rm-tag:hover {
color: red;
transform: rotate(20deg);
}
2022-06-08 18:51:22 +02:00
#tags input.rm-tag {
/* display: none; */
2022-06-08 18:51:22 +02:00
position: absolute;
right: 0;
top: 0;
padding: 0;
background: none;
border: none;
color: white;
2022-06-08 18:51:22 +02:00
cursor: pointer;
}
#tags .selected>div {
background: lightblue
}
2022-06-08 18:51:22 +02:00
summary h2 {
display: inline-block;
cursor: pointer;
}
details[open] summary {
color: rgb(224, 196, 196);
}
/* details ul{
display: none;
}
details[open] ul{
display: block;;
} */
2022-06-08 18:51:22 +02:00
#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;
}
2022-06-08 18:51:22 +02:00
#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,
#annotations annotation-player {
display: inline-block;
position: relative;
width: 300px;
height: 200px;
}
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>