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 @@
+
\ 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 @@
+
\ 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 + ''
+ 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;