r/diversions
1
0
Fork 0
Code Pull requests Releases Activity

some styling changes

Browse source
This commit is contained in:
Cristina Cochior 2020-06-24 23:07:41 +02:00
parent bc5f6c6e8a
commit 8a3011587d
6 changed files with 7400 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
.DS_Store vendored Normal file
View file

Binary file not shown.

30
index.html
View file

@ -2,7 +2,7 @@
<html lang="en" dir="ltr"> <html lang="en" dir="ltr">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Parade</title> <title>The Weight of Things</title>
<style media="screen"> <style media="screen">
html,body{ html,body{
margin: 0; margin: 0;
@ -46,14 +46,16 @@
#annotation{ #annotation{
position: absolute; position: absolute;
top:0; top:1em;
left:0; left:1em;
padding: 5px; padding: 5px;
background:white; /* background:white; */
width: 25%;
font-size: 0.7em;
} }
#annotation img{ #annotation img{
height: 300px; width: 100%;
} }
#annotation .description{ #annotation .description{
@ -95,11 +97,21 @@
display:block; display:block;
} }
#nextButton{ #nextButton{
background: transparent;
border: 0.5px solid black;
font-size: 0.7em;
border-radius: 5px;
padding: 0.5em;
margin: 1em 0;
} }
body.finished #nextButton{ body.finished #nextButton{
display:none; display:none;
} }
h4 {
font-size: 1.4em;
}
</style> </style>
@ -131,14 +143,14 @@
<input type='button' value='Resume interview' id='resumeButton'> <input type='button' value='Resume interview' id='resumeButton'>
<audio id='interview' <audio id='interview'
src="/interview/interview-with-ellen.mp3"> src="/the-weight-of-things/interview/interview-with-ellen.mp3">
<track kind="captions" <track kind="captions"
srclang="en" srclang="en"
src="/interview/interview-with-ellen_v3.mp3.vtt"/> src="/the-weight-of-things/interview/interview-with-ellen_v3.mp3.vtt"/>
<track default kind="captions" <track default kind="captions"
srclang="nl" srclang="nl"
src="/interview/interview-with-ellen_v3.mp3 copy.vtt"/> src="/the-weight-of-things/interview/interview-with-ellen-NL.vtt"/>
</audio> </audio>
</div> </div>
@ -150,7 +162,7 @@
</div> </div>
<div id='workmsg'> <div id='workmsg'>
<h2>Annotate to listen...</h2> <h2>Keep the parade going...</h2>
</div> </div>

1891
interview/interview-with-ellen-NL.vtt Normal file
View file

File diff suppressed because it is too large Load diff

2725
interview/interview-with-ellen_v3.mp3.txt Normal file
View file

File diff suppressed because it is too large Load diff

2728
interview/interview-with-ellen_v3.mp3.vtt Normal file
View file

File diff suppressed because it is too large Load diff

12
parade.js
View file

@ -377,11 +377,11 @@ class Parade {
// This creates a basic Babylon Scene object // This creates a basic Babylon Scene object
this.scene = new BABYLON.Scene(this.engine); this.scene = new BABYLON.Scene(this.engine);
this.scene.clearColor = new BABYLON.Color3(.22,0.27,0.38); // color RGB this.scene.clearColor = new BABYLON.Color3(98,44,246); // color RGB
// this.scene.clearColor = new BABYLON.Color4(0.6, 0.6, 0.,0); // transparent - RGBA // this.scene.clearColor = new BABYLON.Color4(0.6, 0.6, 0.,0); // transparent - RGBA
this.scene.fogMode = BABYLON.Scene.FOGMODE_EXP; this.scene.fogMode = BABYLON.Scene.FOGMODE_EXP;
this.scene.fogColor = this.scene.clearColor; this.scene.fogColor = this.scene.clearColor;
this.scene.fogDensity = 0.002; this.scene.fogDensity = 0.000;
// let camera = new BABYLON.UniversalCamera("camera1", new BABYLON.Vector3( 0.0, 0.0, 120.86337575312979), this.scene); // let camera = new BABYLON.UniversalCamera("camera1", new BABYLON.Vector3( 0.0, 0.0, 120.86337575312979), this.scene);
// camera.rotation = new BABYLON.Vector3(0, Math.PI, 0); // camera.rotation = new BABYLON.Vector3(0, Math.PI, 0);
@ -517,10 +517,10 @@ class ParadeImage {
mat.roughness = 1; mat.roughness = 1;
mat.emissiveColor = new BABYLON.Color3.White(); mat.emissiveColor = new BABYLON.Color3.White();
var textPlane = BABYLON.MeshBuilder.CreatePlane("text", {width:planeWidth, height:planeHeight, sideOrientation: BABYLON.Mesh.DOUBLESIDE}, scene); // var textPlane = BABYLON.MeshBuilder.CreatePlane("text", {width:planeWidth, height:planeHeight, sideOrientation: BABYLON.Mesh.DOUBLESIDE}, scene);
textPlane.material = mat; // textPlane.material = mat;
textPlane.parent = this.mesh; // textPlane.parent = this.mesh;
textPlane.position.y = -4.3; // text sits below image // textPlane.position.y = -4.3;