index template. Fix python requirement
This commit is contained in:
parent
2c5d105e7f
commit
96c4f6aec9
2 changed files with 58 additions and 1 deletions
|
@ -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
57
templates/index.html
Normal 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>
|
Loading…
Reference in a new issue