chronodiagram/app/templates/index.html

137 lines
3.6 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
}
ul {
margin: 0;
padding: 0;
}
li {
display: inline-block;
;
}
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-01-19 10:55:30 +01:00
img {
/* width: 400px; */
background: white;
width: 300px;
height: 200px;
cursor: pointer;
padding: 20px;
}
.svganim_player {
display: inline-block;
position: relative;
width: 300px;
height: 200px;
overflow: hidden;
padding: 20px;
background: white;
}
.svganim_player svg {
width: 100%;
height: 100%;
}
.svganim_player.play:not(.loading) .controls {
visibility: hidden;
}
.svganim_player:hover .controls {
visibility: visible !important;
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="playlist.js"></script>
2022-01-19 10:55:30 +01:00
</head>
<body>
{% for tag in index.tags %}
<details>
<summary>
<h2>{{tag}} ({{len(index.tags[tag])}})</h2>
</summary>
<ul>
{% for annotation in index.tags[tag] %}
<li>
<img src="/annotation/{{ annotation.id }}.svg" loading="lazy" id="img-{{ annotation_hash(annotation.id) }}">
<div class="play" id="annotation-{{ annotation_hash(annotation.id) }}"></div>
<script type='text/javascript'>
(function () {
let imgEl = document.getElementById('img-{{ annotation_hash(annotation.id) }}');
imgEl.addEventListener('click', () => {
imgEl.style.display = 'none';
new Annotator(
document.getElementById("annotation-{{ annotation_hash(annotation.id) }}"),
"tags.json",
"{{ annotation.getJsonUrl() }}",
{ is_player: true, crop_to_fit: true, autoplay: true }
);
})
})();
</script>
</li>
<!-- <li><img src="/annotation/{{ annotation.id }}.svg" data-audio="/annotation/{{ annotation.id }}.mp3"></li> -->
{% end %}
</ul>
</details>
2022-01-19 10:55:30 +01:00
{% end %}
<!-- <ul>
{% for annotation in index.annotations %}
<li>{{ annotation }}</li>
{% end %}
</ul> -->
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>
let images = document.querySelectorAll('[data-audio]');
for (const image of images) {
const audio = new Audio(image.dataset.audio);
console.log(image, audio);
image.addEventListener('mouseover', (e) => {
2022-01-19 10:55:30 +01:00
audio.play();
});
image.addEventListener('mouseout', (e) => {
audio.pause();
audio.currentTime = 0;
});
}
</script>
</html>