some styling changes
This commit is contained in:
parent
bc5f6c6e8a
commit
8a3011587d
30
index.html
30
index.html
|
@ -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>
|
||||||
|
|
||||||
|
|
||||||
|
|
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
12
parade.js
12
parade.js
|
@ -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;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue