index template. Fix python requirement

This commit is contained in:
Ruben van de Ven 2022-01-19 10:55:30 +01:00
parent 2c5d105e7f
commit 96c4f6aec9
2 changed files with 58 additions and 1 deletions

View file

@ -5,7 +5,7 @@ description = "Draw an animated vector image"
authors = ["Ruben van de Ven <git@rubenvandeven.com>"] authors = ["Ruben van de Ven <git@rubenvandeven.com>"]
[tool.poetry.dependencies] [tool.poetry.dependencies]
python = "^3.7" python = "^3.9"
tornado = "^6.1" tornado = "^6.1"
coloredlogs = "^15.0.1" coloredlogs = "^15.0.1"
pydub = "^0.25.1" pydub = "^0.25.1"

57
templates/index.html Normal file
View file

@ -0,0 +1,57 @@
<html>
<head>
<title>Annotations</title>
<style>
body {
background: darkgray;
}
ul {
margin: 0;
padding: 0;
}
li {
display: inline-block;
;
}
img {
/* width: 400px; */
background: white;
}
</style>
</head>
<body>
{% for tag in index.tags %}
<h2>{{tag}}</h2>
<ul>
{% for annotation in index.tags[tag] %}
<li><img src="/annotation/{{ annotation.id }}.svg" data-audio="/annotation/{{ annotation.id }}.mp3"></li>
{% end %}
</ul>
{% end %}
<!-- <ul>
{% for annotation in index.annotations %}
<li>{{ annotation }}</li>
{% end %}
</ul> -->
</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) => {
audio.play();
});
image.addEventListener('mouseout', (e) => {
audio.pause();
audio.currentTime = 0;
});
}
</script>
</html>