about and splash screen styling

static/images/badgeAI.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 120"><style type="text/css">  
+	.st0{fill:#FFFFFF;}
+	.st1{font-family:&#39;Montserrat-Regular&#39;;}
+	.st2{font-size:38px;}
+	.st3{letter-spacing:-1;}
+	.st4{font-size:18px;}
+</style><text transform="matrix(1 0 0 1 0 65.5303)"><tspan class="st0 st1 st2">  A</tspan><tspan x="28.2" class="st0 st1 st2">  .</tspan><tspan x="38.1" class="st0 st1 st2 st3">  I</tspan><tspan x="48.8" class="st0 st1 st2">  .</tspan><tspan y="41.6" class="st0 st1 st2">  E</tspan><tspan x="24.7" y="41.6" class="st0 st1 st2">  x</tspan><tspan x="45.3" y="41.6" class="st0 st1 st2 st3">  p</tspan><tspan x="69.7" y="41.6" class="st0 st1 st2 st3">  e</tspan><tspan x="91.8" y="41.6" class="st0 st1 st2">  r</tspan><tspan x="106.9" y="41.6" class="st0 st1 st2 st3">  i</tspan><tspan x="115.6" y="41.6" class="st0 st1 st2 st3">  me</tspan><tspan x="175" y="41.6" class="st0 st1 st2 st3">  n</tspan><tspan x="198.4" y="41.6" class="st0 st1 st2">  t</tspan></text><text transform="matrix(1 0 0 1 0 15.291)" class="st0 st1 st4">  This is an</text></svg>

static/images/badgeFriends.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 120"><style type="text/css">  
+	.st0{fill:#FFFFFF;}
+	.st1{font-family:&#39;Montserrat-Regular&#39;;}
+	.st2{font-size:18px;}
+</style><text transform="matrix(1 0 0 1 0 15.291)"><tspan class="st0 st1 st2">  Made with </tspan><tspan y="23" class="st0 st1 st2">  some friends from</tspan></text><path class="st0" d="M69.3 95.3c0 7.7-6 13.4-13.5 13.4 -7.4 0-13.5-5.7-13.5-13.4 0-7.8 6-13.4 13.5-13.4C63.3 81.9 69.3 87.5 69.3 95.3zM63.4 95.3c0-4.8-3.5-8.1-7.6-8.1s-7.6 3.3-7.6 8.1c0 4.8 3.5 8.1 7.6 8.1S63.4 100.1 63.4 95.3z"/><path class="st0" d="M98.6 95.3c0 7.7-6 13.4-13.5 13.4 -7.4 0-13.5-5.7-13.5-13.4 0-7.8 6-13.4 13.5-13.4C92.5 81.9 98.6 87.5 98.6 95.3zM92.7 95.3c0-4.8-3.5-8.1-7.6-8.1s-7.6 3.3-7.6 8.1c0 4.8 3.5 8.1 7.6 8.1S92.7 100.1 92.7 95.3z"/><path class="st0" d="M126.6 82.7v24c0 9.9-5.8 14-12.7 14 -6.5 0-10.4-4.4-11.9-7.9l5.1-2.1c0.9 2.2 3.1 4.8 6.8 4.8 4.4 0 7.2-2.7 7.2-7.9v-1.9h-0.2c-1.3 1.6-3.9 3-7.1 3 -6.7 0-12.8-5.8-12.8-13.4 0-7.6 6.1-13.5 12.8-13.5 3.2 0 5.7 1.4 7.1 3h0.2v-2.2H126.6zM121.4 95.4c0-4.7-3.1-8.2-7.2-8.2 -4.1 0-7.5 3.5-7.5 8.2 0 4.7 3.4 8.1 7.5 8.1C118.3 103.4 121.4 100 121.4 95.4z"/><path class="st0" d="M136.4 68.5v39.4h-5.9V68.5H136.4z"/><path class="st0" d="M158.8 99.7l4.6 3c-1.5 2.2-5 5.9-11.2 5.9 -7.6 0-13.1-5.9-13.1-13.4 0-8 5.6-13.4 12.5-13.4 7 0 10.4 5.5 11.5 8.5l0.6 1.5 -17.9 7.4c1.4 2.7 3.5 4.1 6.5 4.1C155.2 103.4 157.3 102 158.8 99.7zM144.7 94.9l12-5c-0.7-1.7-2.6-2.8-5-2.8C148.8 87.1 144.6 89.7 144.7 94.9z"/><path class="st0" d="M21.1 108.7C9.6 108.7 0 99.4 0 87.9c0-11.5 9.6-20.8 21.1-20.8 6.3 0 10.9 2.5 14.3 5.7l-4 4c-2.4-2.3-5.7-4.1-10.3-4.1 -8.4 0-14.9 6.8-14.9 15.1S12.7 103 21.1 103c5.4 0 8.5-2.2 10.5-4.2 1.6-1.6 2.7-4 3.1-7.2H21.1V86h19.1c0.2 1 0.3 2.2 0.3 3.6 0 4.3-1.2 9.5-4.9 13.3C32 106.7 27.3 108.7 21.1 108.7z"/></svg>

static/images/yellow_play_triangle.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 600 600" enable-background="new 0 0 600 600" xml:space="preserve">
+<path fill="#F9BB2D" d="M300.7,45.3c-140.8,0-254.8,114-254.8,254.8s114,254.8,254.8,254.8s254.8-114,254.8-254.8
+	S441.5,45.3,300.7,45.3z M390.3,307.2l-131.7,88.4c-5.8,3.9-10.6,1.4-10.6-5.6V210.3c0-7,4.8-9.5,10.6-5.6L390.3,293
+	C396.1,296.9,396.1,303.3,390.3,307.2z"/>
+</svg>

static/src/Main.js

@@ -30,6 +30,10 @@ const splash = new Splash(document.body)
 splash.on('click', () => {
 	keyboard.activate()
 	tutorial.start()
+	about.showButton()
+})
+splash.on('about', () => {
+	about.open(true)
 })
 about.on('close', () => {
 	if (!splash.loaded || splash.isOpen()){

static/src/interface/About.js

@@ -56,7 +56,7 @@ 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'
@@ -93,7 +93,7 @@ export class About extends events.EventEmitter{
 
 		this._container.classList.remove('visible')
 
-		if (this._ytplayer){
+		if (this._ytplayer && this._ytplayer.stopVideo){
 			this._ytplayer.stopVideo()
 		}
 		this.emit('close')
@@ -101,7 +101,7 @@ export class About extends events.EventEmitter{
 			ga('send', 'event', 'AI-Duet', 'Click', 'About - Close')
 		}
 	}
-	open(){
+	open(play=false){
 		this._toggleButton.classList.add('close')
 		this._toggleButton.classList.remove('open')
 
@@ -111,8 +111,23 @@ export class About extends events.EventEmitter{
 		if (window.ga){
 			ga('send', 'event', 'AI-Duet', 'Click', 'About - Open')
 		}
+		if (play){
+			this._playVideo()
+		}
+	}
+	// waits until the player is ready to play the video, 
+	// otherwise goes back into waiting loop
+	_playVideo(retries=0){
+		if (this._ytplayer && this._ytplayer.playVideo){
+			this._ytplayer.playVideo()
+		} else if (retries < 10 && this.isOpen()){
+			setTimeout(() => this._playVideo(retries+1), 200);
+		}	
 	}
 	isOpen(){
 		return this._container.classList.contains('visible')
 	}
+	showButton(){
+		this._toggleButton.classList.add('show')
+	}
 }

static/src/interface/Splash.js

@@ -40,7 +40,7 @@ class Splash extends events.EventEmitter{
 		const subTitle = document.createElement('div')
 		subTitle.id = 'subTitle'
 		titleContainer.appendChild(subTitle)
-		subTitle.textContent = 'Trade melodies with a neural network.'
+		subTitle.textContent = 'A piano that responds to you.'
 
 		this._clicked = false
 		const loader = this._loader = new Loader(titleContainer)
@@ -50,10 +50,13 @@ class Splash extends events.EventEmitter{
 			this.emit('click')
 		})
 
-		const magenta = document.createElement('div')
+		const howItWorks = document.createElement('div')
-		magenta.id = 'magentaLink'
+		howItWorks.id = 'howItWorks'
-		titleContainer.appendChild(magenta)
+		titleContainer.appendChild(howItWorks)
-		magenta.innerHTML = 'Built using <a href="https://github.com/tensorflow/magenta" target="_blank">Magenta</a>'
+		howItWorks.textContent = 'How it works'
+		howItWorks.addEventListener('click', () => {
+			this.emit('about')
+		})
 
 		const badges = document.createElement('div')
 		badges.id = 'badges'
@@ -67,15 +70,27 @@ class Splash extends events.EventEmitter{
 		badges.appendChild(aiExperiments)
 
 		// break
-		const badgeBreak = document.createElement('div')
+		const break0 = document.createElement('div')
-		badgeBreak.id = 'badgeBreak'
+		break0.classList.add('badgeBreak')
-		badges.appendChild(badgeBreak)		
+		badges.appendChild(break0)
 
 		const googleFriends = document.createElement('a')
 		googleFriends.id = 'googleFriends'
 		googleFriends.classList.add('badge')
 		badges.appendChild(googleFriends)
 
+		//break two
+		const break1 = document.createElement('div')
+		break1.classList.add('badgeBreak')
+		badges.appendChild(break1)
+
+		const magenta = document.createElement('div')
+		magenta.id = 'magentaLink'
+		magenta.classList.add('badge')
+		const imgHtml = '<div id="img"></div>'
+		magenta.innerHTML = imgHtml + '<div id="text">Built using <a href="https://magenta.tensorflow.org/" target="_blank">Magenta</a></div>'
+		badges.appendChild(magenta)
+
 		const privacyAndTerms = document.createElement('div')
 		privacyAndTerms.id = 'privacyAndTerms'
 		privacyAndTerms.innerHTML = '<a target="_blank" href="https://www.google.com/intl/en/policies/privacy/">Privacy</a><span>&</span><a target="_blank" href="https://www.google.com/intl/en/policies/terms/">Terms</a>'

static/style/about.css

@@ -54,7 +54,11 @@
 		content: "?";
 		background-color: white;
 		border-radius: 50%;
+		display: none;
+	}
 
+	&.show.open:before {
+		display: inline-block;
 	}
 }
 
@@ -95,6 +99,7 @@
 		$mediumScreen : 700px;
 
 		#video {
+			top: 30px;
 			width: 100%;
 			cursor: pointer;
 			position: relative;
@@ -142,7 +147,7 @@
 
 			position: relative;
 			text-transform: none;
-			margin-top: 30px;
+			margin-top: 50px;
 			font-size: 16px;
 			line-height: 25px;
 

static/style/splash.css

@@ -1,6 +1,6 @@
 @import 'common.scss';
 
-$topMargin: 40px;
+$topMargin: 35px;
 
 #splash {
 	position: absolute;
@@ -37,45 +37,49 @@ $topMargin: 40px;
 
 		#title {
 			line-height: 60px;
-			font-size: 65px;
+			font-size: 55px;
 			letter-spacing: 1px;
-			font-weight: normal;
+			font-weight: 300;
 		}
 
-		#subTitle {
+		#subTitle, #howItWorks {
 			margin-top: $topMargin;
 			letter-spacing: 0.8px;
 			line-height: 30px;
-			font-size: 20px;
+			font-size: 15px;
-			width: 80%;
-			margin-left: auto;
-			margin-right: auto;
-			text-align: center;
-			font-weight: normal;
-		}
-
-		#magentaLink {
-			margin-top: $topMargin * 0.8;
-			letter-spacing: 0.8px;
-			line-height: 30px;
-			font-size: 20px;
 			width: 100%;
 			margin-left: auto;
 			margin-right: auto;
 			text-align: center;
-			font-weight: normal;
+			font-weight: 300;
-			color: #aaa;
+		}
-			font-size: 14px;
+
+		#howItWorks {
+			$size : 20px;
+			$margin: 30px;
 
-			a {
 			color: $orange;
-				text-decoration: underline;
+			width: auto;
-				cursor: pointer;
+			display: inline-block;
-				&:hover:active {
+			margin-left: $margin;
-					color: white;
+
-				}
+			&: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: 200px;
@@ -173,9 +177,10 @@ $topMargin: 40px;
 	$badgeMargin : 20px;
 	$badegOpacity: 0.7;
 
-	$smallScreen : 500px;
+	$smallScreen : 520px;
-	$smallBadgeWidth : 70px;
+	$smallBadgeWidth : 90px;
 	$smallBadgeHeight: 40px;
+	$smallBadgeMargin: 8px;
 
 	#badges {
 
@@ -186,6 +191,14 @@ $topMargin: 40px;
 
 		@media (max-width: $smallScreen) {
 			// bottom: $badgeMargin * 0.5;
+			bottom: 40px;
+			$badgesWidth : $smallBadgeWidth * 3 + $smallBadgeMargin * 3 + 2px;
+			width: $badgesWidth;
+			left: 50%;
+			margin-left: -$badgesWidth/2;
+			// left: $smallBadgeMargin * 2;			
+			// left: 50%;
+			// transform: translate(-50%, 0);
 		}
 
 		.badge {
@@ -197,10 +210,14 @@ $topMargin: 40px;
 			background-repeat: no-repeat;
 			background-size: 100% 100%;
 			opacity: $badegOpacity;
+			overflow: hidden;
 
 			@media (max-width: $smallScreen) {
 				width: $smallBadgeWidth;
 				height: $smallBadgeHeight;	
+				font-size: 10px!important;
+				margin-right: $smallBadgeMargin;
+				opacity: 1;
 			}
 		}
 
@@ -217,9 +234,71 @@ $topMargin: 40px;
 		#googleFriends {
 			cursor: initial;
 			background-image: url(../images/badgeFriends_master.svg);	
+			margin-right: 0px;
 		}
 
-		#badgeBreak{
+
+		#magentaLink {
+			font-weight: bold;
+			font-size: 10px;
+			margin-left: 0px;
+		    margin-right: 0px;
+
+			&:hover {
+				opacity: 1;
+			}
+
+			@media (max-width: $smallScreen) {
+				font-size: 8px;
+			}
+
+
+			div {
+				display: inline-block;
+				position: relative;
+			}
+
+			$imgSize : $badgeHeight;
+			$smallImg : $smallBadgeHeight;
+			#img {
+				background-image: url(../images/magenta_bw_logo.png);
+				background-size: 90% 90%;
+				background-position: left center;
+				background-repeat: no-repeat;
+				width: $imgSize;
+				height: $imgSize;
+				float: left;
+
+				@media (max-width: $smallScreen) {
+					width: $smallImg;
+					height: $smallImg;
+				}
+			}
+
+			#text {
+				margin-top: 15px;
+				float: right;
+				height: 100%;
+				width: $badgeWidth - $imgSize;
+
+				@media (max-width: $smallScreen) {
+					margin-top: 7px;
+					width: $smallBadgeWidth - $smallImg;
+				}
+
+				a {
+					color: $orange;
+					text-decoration: underline;
+					cursor: pointer;
+					&:hover:active {
+						color: white;
+					}
+				}
+			}
+
+		}
+
+		.badgeBreak{
 			display: inline-block;
 			position: relative;
 			margin-right: $badgeMargin;
@@ -235,6 +314,7 @@ $topMargin: 40px;
 			@media (max-width: $smallScreen) {
 				$smallBreakHeight: $smallBadgeHeight * $breakScale;
 				height: $smallBreakHeight;
+				margin-right: $smallBadgeMargin;
 			}
 		}
 	}
@@ -248,6 +328,17 @@ $topMargin: 40px;
 		width: auto;
 		font-weight: normal;
 
+		@media (max-width: $smallScreen) {
+			bottom: $smallBadgeMargin;
+			left: 50%;
+			right: initial;
+			transform: translate(-50%, 0);
+
+			* {
+				font-size: 8px!important;
+			}
+		}
+
 		* {
 			height: 14px;
 			line-height: 14px;