add about page back, but without video and with more text

static/src/Main.js

@@ -38,6 +38,7 @@ splash.on('about', () => {
 about.on('close', () => {
 	if (!splash.loaded || splash.isOpen()){
 		splash.show()
+		keyboard._active = true
 	} else {
 
 		keyboard.activate()
@@ -54,6 +55,7 @@ about.on('open', () => {
 const idleTimeout = new IdleTimeout(
 	() => {
 		keyboard.deactivate();
+		about.close();
 		splash.show();
 		keyboard._active = true;
 	  },

static/src/interface/About.js

@@ -23,12 +23,28 @@ const tfLink = 'https://www.tensorflow.org/'
 const toneLink = 'https://github.com/Tonejs/Tone.js'
 const sourceCode = 'https://github.com/googlecreativelab/aiexperiments-ai-duet'
 
-const blurbCopy = `Built by Yotam Mann with friends on the Magenta and Creative Lab teams at Google. 
+const germanAboutCopy = `AI Duet nutzt maschinelles Lernen, um zu entscheiden, 
-					It uses <a target='_blank' href='${tfLink}'>TensorFlow</a>,
+						 wie es auf die Noten reagiert, die du spielst. Dafür wurde
-					<a target='_blank' href='${toneLink}'>Tone.js</a> and tools 
+						 das neuronale Netz mit einer Vielzahl an Melodien trainiert. 
-					from the <a target='_blank' href='${magentaLink}'>Magenta project</a>. 
+						 das neuronale Netz mit einer Vielzahl an Melodien trainiert. 
-					The open-source code is <a target='_blank' href='${sourceCode}'>available here</a>.
+						 Noten and Takten. Regeln dafür, wie Noten oder Akkorde
-					Click the keyboard, use your computer keys, or even plug in a MIDI keyboard.`
+						 verarbeitet werden sollen, wurden dem System nicht gegeben.`
+
+const englishAboutCopy = `AI Duet uses machine learning in order to decide on 
+						  how it responds to the notes you play. To do so,
+						  a neural network was trained with lots of melodies. 
+						  Over time, the system learned about relationships 
+						  between notes and timing. No rules predefine how
+						  notes or chords should be treated.`
+
+
+const germanMadeByCopy = `Programmierung und Konzept: Yotam Mann und Google’s 
+						  Creative Lab. Neuronales Netz: Google’s Magenta project.
+						  Der gesamte Quellcode ist Open Source: g.co/aiexperiments`
+
+const englishMadeByCopy = `Programming and Concept: Yotam Mann and Google’s 
+						   Creative Lab. Neural net: Google’s Magenta project.
+						   All the code is open source: g.co/aiexperiments`
 
 export class About extends events.EventEmitter{
 	constructor(container){
@@ -59,13 +75,13 @@ export class About extends events.EventEmitter{
 		const title = document.createElement('div')
 		title.id = 'title'
 		title.textContent = 'A.I. Duet'
-		// content.appendChild(title)
+		content.appendChild(title)
 
 		const video = document.createElement('div')
 		video.id = 'video'
-		//vid YT0k99hCY5I 
+		//vid YT0k99hCY5I
 		video.innerHTML = `<iframe id='youtube-iframe' src="https://www.youtube.com/embed/0ZE1bfPtvZo?modestbranding=0&showinfo=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe>`
-		content.appendChild(video)
+		// content.appendChild(video)
 
 		this._ytplayer = null
 
@@ -84,21 +100,38 @@ export class About extends events.EventEmitter{
 			})
 		})
 
-		const blurb = document.createElement('div')
+		const germanAbout = document.createElement('div')
-		blurb.id = 'blurb'
+		germanAbout.id = 'germanAbout'
-		content.appendChild(blurb)
+		content.appendChild(germanAbout)
-		blurb.innerHTML = blurbCopy
+		germanAbout.innerHTML = germanAboutCopy
+
+		const englishAbout = document.createElement('div')
+		englishAbout.id = 'englishAbout'
+		content.appendChild(englishAbout)
+		englishAbout.innerHTML = englishAboutCopy
+
+		const germanMadeBy = document.createElement('div')
+		germanMadeBy.id = 'germanMadeBy'
+		content.appendChild(germanMadeBy)
+		germanMadeBy.innerHTML = germanMadeByCopy
+
+		const englishMadeBy = document.createElement('div')
+		englishMadeBy.id = 'englishMadeBy'
+		content.appendChild(englishMadeBy)
+		englishMadeBy.innerHTML = englishMadeByCopy
 
 	}
+
+
 	close(){
 		this._toggleButton.classList.remove('close')
 		this._toggleButton.classList.add('open')
 
 		this._container.classList.remove('visible')
 
-		if (this._ytplayer && this._ytplayer.stopVideo){
+		// if (this._ytplayer && this._ytplayer.stopVideo){
-			this._ytplayer.stopVideo()
+		// 	this._ytplayer.stopVideo()
-		}
+		// }
 		this.emit('close')
 		if (window.ga){
 			ga('send', 'event', 'AI-Duet', 'Click', 'About - Close')
@@ -108,25 +141,25 @@ export class About extends events.EventEmitter{
 		this._toggleButton.classList.add('close')
 		this._toggleButton.classList.remove('open')
 
-		this._playButton.classList.add('visible')
+		// this._playButton.classList.add('visible')
 		this._container.classList.add('visible')
 		this.emit('open')
 		if (window.ga){
 			ga('send', 'event', 'AI-Duet', 'Click', 'About - Open')
 		}
-		if (play){
+		// if (play){
-			this._playVideo()
+		// 	this._playVideo()
-		}
+		// }
 	}
 	// waits until the player is ready to play the video, 
 	// otherwise goes back into waiting loop
-	_playVideo(retries=0){
+	// _playVideo(retries=0){
-		if (this._ytplayer && this._ytplayer.playVideo){
+	// 	if (this._ytplayer && this._ytplayer.playVideo){
-			this._ytplayer.playVideo()
+	// 		this._ytplayer.playVideo()
-		} else if (retries < 10 && this.isOpen()){
+	// 	} else if (retries < 10 && this.isOpen()){
-			setTimeout(() => this._playVideo(retries+1), 200);
+	// 		setTimeout(() => this._playVideo(retries+1), 200);
-		}	
+	// 	}
-	}
+	// }
 	isOpen(){
 		return this._container.classList.contains('visible')
 	}

static/src/interface/Splash.js

@@ -63,6 +63,14 @@ class Splash extends events.EventEmitter{
 		howItWorks.innerHTML = 'This experiment lets you play a duet with the computer.<br>Just play some notes, and the computer will respond to your melody.'
 		germanHowItWorks.innerHTML = 'In diesem Experiment kannst du ein Duett mit dem Computer spielen.<br>Spiele einfach ein paar Noten und der Computer reagiert auf deine Melodie.'
 
+        const aboutPageLink = document.createElement('div')
+		aboutPageLink.id = 'aboutPageLink'
+		titleContainer.appendChild(aboutPageLink)
+		aboutPageLink.textContent = 'How it works'
+		aboutPageLink.addEventListener('click', () => {
+			this.emit('about')
+		})
+
 		const badges = document.createElement('div')
 		badges.id = 'badges'
 		splash.appendChild(badges)

static/style/about.css

@@ -91,7 +91,7 @@
 			font-family: $font-family;
 			font-size: 40px;
 			line-height: 30px;
-			margin: 20px 0px 30px 0px;
+			margin: 130px 0px 50px 0px;
 			position: relative;
 		}
 
@@ -143,17 +143,38 @@
 			}
 		}
 
-		#blurb {
+		#germanAbout {
-
 			position: relative;
 			text-transform: none;
 			margin-top: 50px;
-			font-size: 14px;
+			font-size: 18px;
 			line-height: 25px;
+		}
 
-			a {
+		#englishAbout {
-				color: $orange;
+			position: relative;
-			}
+			text-transform: none;
+			margin-top: 10px;
+			font-size: 18px;
+			line-height: 25px;
+			font-style: italic;
+		}
+
+		#germanMadeBy {
+			position: relative;
+			text-transform: none;
+			margin-top: 50px;
+			font-size: 18px;
+			line-height: 25px;
+		}
+
+		#englishMadeBy {
+			position: relative;
+			text-transform: none;
+			margin-top: 10px;
+			font-size: 18px;
+			line-height: 25px;
+			font-style: italic;
 		}
 
 	}

static/style/splash.css

@@ -94,6 +94,35 @@ $topMargin: 35px;
 			font-style: italic;
 		}
 
+		#aboutPageLink {
+			$size : 20px;
+			$margin: 30px;
+
+			margin-top: $topMargin;
+			color: $orange;
+			width: auto;
+			display: inline-block;
+			margin-left: $margin;
+
+			/*&:before {*/
+				/*position: absolute;*/
+				/*width: $size;*/
+				/*height: $size;*/
+				/*margin-left: -$margin;*/
+				/*margin-top: $size / 4;*/
+				/*content : '';*/
+				/*background-image: url(../images/yellow_play_triangle.svg);*/
+			/*}*/
+
+			cursor: pointer;
+
+			transition: transform 0.1s;
+
+			&:hover {
+				transform: scale(1.1);
+			}
+		}
+
 		$loaderWidth: 398px;
 		$loaderHeight: 118px;