167 lines
4.4 KiB
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>
|