Browse Source

index template. Fix python requirement

absolute
Ruben van de Ven 4 months ago
parent
commit
96c4f6aec9
  1. 2
      pyproject.toml
  2. 57
      templates/index.html

2
pyproject.toml

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

57
templates/index.html

@ -0,0 +1,57 @@ @@ -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>
Loading…
Cancel
Save