DiVersions interface for The Weight of Things by Cristina Cochior.
https://di.versions.space/the-weight-of-things/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
167 lines
4.4 KiB
167 lines
4.4 KiB
<!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>
|
|
|