about and splash screen styling
This commit is contained in:
Yotam Mann
parent
06e45fa266
commit
49148c97df
7
static/images/badgeAI.svg
Normal file
7
static/images/badgeAI.svg
Normal 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:'Montserrat-Regular';}
|
||||
.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 |
5
static/images/badgeFriends.svg
Normal file
5
static/images/badgeFriends.svg
Normal 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:'Montserrat-Regular';}
|
||||
.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 |
BIN
static/images/magenta_bw_logo.png
Normal file
BIN
static/images/magenta_bw_logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
9
static/images/yellow_play_triangle.svg
Normal file
9
static/images/yellow_play_triangle.svg
Normal 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 |
@ -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()){
|
||||
|
||||
@ -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')
|
||||
}
|
||||
}
|
||||
@ -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>'
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user