about and splash screen styling

This commit is contained in:
Yotam Mann 2017-02-13 17:30:17 -05:00
parent 06e45fa266
commit 49148c97df
9 changed files with 194 additions and 43 deletions

View File

@ -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>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -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>

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

View File

@ -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>

After

Width:  |  Height:  |  Size: 724 B

View File

@ -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()){

View File

@ -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')
}
}

View File

@ -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 <a href="https://github.com/tensorflow/magenta" target="_blank">Magenta</a>'
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 = '<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>'

View File

@ -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;

View File

@ -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;
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;