diff --git a/static/images/badgeAI.svg b/static/images/badgeAI.svg new file mode 100644 index 0000000..899ff6e --- /dev/null +++ b/static/images/badgeAI.svg @@ -0,0 +1,7 @@ + A . I . E x p e r i me n t This is an \ No newline at end of file diff --git a/static/images/badgeFriends.svg b/static/images/badgeFriends.svg new file mode 100644 index 0000000..fb94764 --- /dev/null +++ b/static/images/badgeFriends.svg @@ -0,0 +1,5 @@ + Made with some friends from \ No newline at end of file diff --git a/static/images/magenta_bw_logo.png b/static/images/magenta_bw_logo.png new file mode 100644 index 0000000..107e67f Binary files /dev/null and b/static/images/magenta_bw_logo.png differ diff --git a/static/images/yellow_play_triangle.svg b/static/images/yellow_play_triangle.svg new file mode 100644 index 0000000..868eb70 --- /dev/null +++ b/static/images/yellow_play_triangle.svg @@ -0,0 +1,9 @@ + + + + + + diff --git a/static/src/Main.js b/static/src/Main.js index dad4b77..63d1049 100644 --- a/static/src/Main.js +++ b/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()){ diff --git a/static/src/interface/About.js b/static/src/interface/About.js index ac6042e..da71538 100644 --- a/static/src/interface/About.js +++ b/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') + } } \ No newline at end of file diff --git a/static/src/interface/Splash.js b/static/src/interface/Splash.js index 6ed7123..f09c839 100644 --- a/static/src/interface/Splash.js +++ b/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') - magenta.id = 'magentaLink' - titleContainer.appendChild(magenta) - magenta.innerHTML = 'Built using Magenta' + const howItWorks = document.createElement('div') + howItWorks.id = 'howItWorks' + titleContainer.appendChild(howItWorks) + 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') - badgeBreak.id = 'badgeBreak' - badges.appendChild(badgeBreak) + const break0 = document.createElement('div') + break0.classList.add('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 = '
' + magenta.innerHTML = imgHtml + '
Built using Magenta
' + badges.appendChild(magenta) + const privacyAndTerms = document.createElement('div') privacyAndTerms.id = 'privacyAndTerms' privacyAndTerms.innerHTML = 'Privacy&Terms' diff --git a/static/style/about.css b/static/style/about.css index 72b3af3..3403e75 100644 --- a/static/style/about.css +++ b/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; diff --git a/static/style/splash.css b/static/style/splash.css index e145519..74ed661 100644 --- a/static/style/splash.css +++ b/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; - 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; + font-size: 15px; width: 100%; margin-left: auto; margin-right: auto; text-align: center; - font-weight: normal; - color: #aaa; - font-size: 14px; + font-weight: 300; + } - a { - color: $orange; - text-decoration: underline; - cursor: pointer; - &:hover:active { - color: white; - } + #howItWorks { + $size : 20px; + $margin: 30px; + + 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: 200px; @@ -173,9 +177,10 @@ $topMargin: 40px; $badgeMargin : 20px; $badegOpacity: 0.7; - $smallScreen : 500px; - $smallBadgeWidth : 70px; + $smallScreen : 520px; + $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; + 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;