diversions/index.html

180 lines
4.8 KiB
HTML
Raw Permalink Normal View History

2020-06-18 09:58:04 +02:00
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
2020-06-24 23:07:41 +02:00
<title>The Weight of Things</title>
2020-06-18 09:58:04 +02:00
<style media="screen">
html,body{
margin: 0;
overflow: hidden;
width: 100%;
height: 100%;
font-family: sans-serif;
}
2020-06-18 15:15:37 +02:00
body.paused canvas{
opacity: .6;
}
2020-06-18 09:58:04 +02:00
canvas{
margin:0;
width:100vw;
height:100vh;
2020-06-18 15:15:37 +02:00
opacity: 1;
transition: opacity 1s;
}
body.paused #subtitles{
color:darkgray;
2020-06-18 09:58:04 +02:00
}
/* audio{
position: absolute;
top:0;
} */
#subtitles{
position:fixed;
bottom:0;
width:100%;
color:white;
text-shadow: black 0 0 10px;;
text-align: center;
2020-06-18 15:15:37 +02:00
font-size: 25px;
}
#annotation{
position: absolute;
2020-06-24 23:07:41 +02:00
top:1em;
left:1em;
2020-06-18 15:15:37 +02:00
padding: 5px;
2020-06-24 23:07:41 +02:00
/* background:white; */
width: 25%;
font-size: 0.7em;
2020-06-18 15:15:37 +02:00
}
#annotation img{
2020-06-24 23:07:41 +02:00
width: 100%;
2020-06-18 15:15:37 +02:00
}
#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;
2020-06-18 09:58:04 +02:00
}
#resetButton, #resumeButton{
display:none;
}
body.finished #resetButton{
display:inline;
}
body.finished.paused #resumeButton{
display:block;
}
#nextButton{
2020-06-24 23:07:41 +02:00
background: transparent;
border: 0.5px solid black;
font-size: 0.7em;
border-radius: 5px;
padding: 0.5em;
margin: 1em 0;
}
body.finished #nextButton{
display:none;
}
2020-06-24 23:07:41 +02:00
h4 {
font-size: 1.4em;
}
2020-06-18 09:58:04 +02:00
</style>
2020-06-24 23:07:41 +02:00
2020-06-18 09:58:04 +02:00
<!-- Will automatically be injected if needed: <script src=https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js></script> -->
</head>
2020-06-18 15:15:37 +02:00
<body class='paused'>
2020-06-18 09:58:04 +02:00
<canvas id="renderCanvas" touch-action="none"></canvas> <!--touch-action="none" for best results from PEP-->
2020-06-24 23:07:41 +02:00
2020-06-18 09:58:04 +02:00
<div id='annotation'>
2020-06-18 15:15:37 +02:00
<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'>
2020-06-18 09:58:04 +02:00
</template>
2020-06-18 15:15:37 +02:00
<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'>
2020-06-24 23:07:41 +02:00
<audio id='interview'
src="/the-weight-of-things/interview/interview-with-ellen.mp3">
<track kind="captions"
srclang="en"
2020-06-24 23:07:41 +02:00
src="/the-weight-of-things/interview/interview-with-ellen_v3.mp3.vtt"/>
<track default kind="captions"
srclang="nl"
2020-06-24 23:07:41 +02:00
src="/the-weight-of-things/interview/interview-with-ellen-NL.vtt"/>
</audio>
2020-06-18 09:58:04 +02:00
</div>
<div id='subtitles'>
<div id='sub_nl'></div>
<div id='sub_en'></div>
2020-06-18 09:58:04 +02:00
</div>
2020-06-18 15:15:37 +02:00
<div id='workmsg'>
2020-06-24 23:07:41 +02:00
<h2>Keep the parade going...</h2>
2020-06-18 15:15:37 +02:00
</div>
<div id='time'>
</div>
2020-06-18 09:58:04 +02:00
<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>