diversions/index.html
2020-06-18 09:58:04 +02:00

74 lines
1.9 KiB
HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Parade</title>
<style media="screen">
html,body{
margin: 0;
overflow: hidden;
width: 100%;
height: 100%;
font-family: sans-serif;
}
canvas{
margin:0;
width:100vw;
height:100vh;
}
/* audio{
position: absolute;
top:0;
} */
#subtitles{
position:fixed;
bottom:0;
width:100%;
color:white;
text-shadow: black 0 0 10px;;
text-align: center;
font-size: 20px;
}
</style>
<!-- Will automatically be injected if needed: <script src=https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js></script> -->
</head>
<body>
<canvas id="renderCanvas" touch-action="none"></canvas> <!--touch-action="none" for best results from PEP-->
<div id='annotation'>
<template id="annotationContent">
<img id='img'>
<input type='number' id='weight'>
</template>
</div>
<audio id='interview'
src="/interview/interview-with-ellen.mp3">
<track default kind="captions"
srclang="en"
src="/interview/interview-with-ellen_v3.mp3.vtt"/>
</audio>
<div id='subtitles'>
</div>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
<script src="parade.js"></script>
</body>
</html>