diversions/index.html

167 lines
4.4 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;
}
body.paused canvas{
opacity: .6;
}
canvas{
margin:0;
width:100vw;
height:100vh;
opacity: 1;
transition: opacity 1s;
}
body.paused #subtitles{
color:darkgray;
}
/* 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: 25px;
}
#annotation{
position: absolute;
top:0;
left:0;
padding: 5px;
background:white;
}
#annotation img{
height: 300px;
}
#annotation .description{
display:none;
}
#time{
position: fixed;
bottom: 0;
right: 0;
padding: 5px;
color:white;
}
#workmsg{
display:none;
}
body.paused #workmsg{
position:absolute;
top: calc(50vh - 20px);
text-align: center;
color:gray;
display: block;
width: 520px;
left: calc(50% - 150px);
font-size: 30px;
}
#resetButton, #resumeButton{
display:none;
}
body.finished #resetButton{
display:inline;
}
body.finished.paused #resumeButton{
display:block;
}
#nextButton{
}
body.finished #nextButton{
display:none;
}
</style>
<!-- Will automatically be injected if needed: <script src=https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js></script> -->
</head>
<body class='paused'>
<canvas id="renderCanvas" touch-action="none"></canvas> <!--touch-action="none" for best results from PEP-->
<div id='annotation'>
<template id="annotationContentTemplate">
<img class='img'>
<div class='name'></div>
<div class='description'></div>
Position of image in parade:
<input type='range' min="0" max="110" class='weight'>
</template>
<div id='annotationContent'>
<!-- contents of template will come here through the javascript -->
</div>
<input type='button' value='Next image' id='nextButton'>
<input type='button' value='Restart weighing' id='resetButton'>
<!-- button is needed because audio cannot auto-start without a user clicking on the page -->
<input type='button' value='Resume interview' id='resumeButton'>
<audio id='interview'
src="/interview/interview-with-ellen.mp3">
<track kind="captions"
srclang="en"
src="/interview/interview-with-ellen_v3.mp3.vtt"/>
<track default kind="captions"
srclang="nl"
src="/interview/interview-with-ellen_v3.mp3 copy.vtt"/>
</audio>
</div>
<div id='subtitles'>
<div id='sub_nl'></div>
<div id='sub_en'></div>
</div>
<div id='workmsg'>
<h2>Annotate to listen...</h2>
</div>
<div id='time'>
</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>