.overlay
.green-line
.result
h2 Results
.graph
.first
.day Mon
.second
.day Tue
.third
.day Wed
.speech-bubble
.intro Hello! I am Baymax. Your personal healthcare companion. Press the scan button so that I can scan you and predict your happiness levels for the next 3 days.
button Start scanning
.container
.right
.left
.face
.eyes
.body
.chip
.hand-right
.finger
.finger
.finger
.finger
.left-curve
.right-curve
.thumb
.hand-left
@import url('https://fonts.googleapis.com/css?family=Roboto:100,400,500')
$face: #ddd
$body: linear-gradient(to left, #606c88 , #3f4c6b)
$bay-body: #ddd
html, body
height: 100%
body
background: $body
margin: 0
.overlay
display: none
position: fixed
height: 100%
width: 100%
background: rgba(0, 0, 0, 0.85)
z-index: 110
.green-line
content: ""
position: absolute
width: 100%
border: 2px solid #4BE85A
.scan
animation: scan 1s linear alternate
animation-iteration-count: 4
.result
display: none
position: absolute
bottom: 150px
right: 500px
background: #fff
padding: 0px 50px 65px
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.2), -4px 4px 4px 0px rgba(0, 0, 0, 0.2)
h2
font-family: roboto
font-weight: 100
color: #777
text-transform: uppercase
font-size: 48px
.graph
position: relative
height: 160px
border-left: 2px solid #888
border-bottom: 2px solid #888
display: flex
justify-content: space-around
align-items: flex-end
.first, .second, .third
position: relative
transition: all 0.9s ease-out
.day
position: absolute
bottom: -40px
color: #888
font-family: roboto
font-size: 14px
left: 50%
transform: translate(-50%)
text-align: center
.first
height: 0px
width: 40px
background: linear-gradient( #43cea2 , #185a9d)
.second
height: 0px
width: 40px
background: linear-gradient( #43cea2 , #185a9d)
.third
height: 0px
width: 40px
background: linear-gradient( #43cea2 , #185a9d)
.speech-bubble
position: absolute
bottom: 320px
right: 30px
height: 210px
width: 400px
background: #fff
border-radius: 20px
box-sizing: border-box
padding: 20px
z-index: 1
.intro
font-family: roboto
color: #888
font-size: 18px
line-height: 28px
button
margin-top: 15px
padding: 10px 15px
font-weight: 500
font-family: roboto
text-transform: uppercase
background: #4BE85A
border: none
color: #fff
border-radius: 10px
cursor: pointer
&:focus
outline: none
&::after
content: ""
position: absolute
bottom: -20px
left: calc(50% - 50px)
box-sizing: border-box
border-top: 20px solid #fff
border-right: 15px solid transparent
border-left: 15px solid transparent
.container
position: absolute
right: 0
bottom: 0
height: 360px
width: 500px
overflow: hidden
.face
position: absolute
right: 100px
top: 55px
height: 120px
width: 180px
background: $face
border-radius: 50%
z-index: 100
.eyes
position: absolute
top: 60px
left: calc(50% - 40px)
height: 5px
width: 80px
background: #333
&::after, &::before
content: ""
position: absolute
top: -13px
height: 24px
width: 20px
background: #333
border-radius: 50%
&::after
right: -10px
transform: rotate(-10deg)
&::before
transform: rotate(10deg)
.body
position: absolute
bottom: -380px
right: 10px
height: 600px
width: 380px
background: $bay_body
border-radius: 50% 50%
overflow: hidden
z-index: 10
.chip
position: absolute
height: 46px
width: 46px
background: #b0cbd2
border-radius: 50%
top: 85px
right: 85px
z-index: 10
border: 10px solid #fff
overflow: hidden
&::after
content: ""
position: absolute
bottom: 0px
height: 20px
width: 100%
background: #cadde1
&::before
content: ""
position: absolute
bottom: 20px
left: calc(50% - 12px)
width: 24px
box-sizing: border-box
border-bottom: 6px solid #cadde1
border-left: 4px solid transparent
border-right: 4px solid transparent
&::after
content: ""
position: absolute
left: calc(50% - 120px)
bottom: 30px
height: 500px
width: 240px
background: #fff
border-radius: 50%
&::before
content: ""
position: absolute
top: -190px
left: calc(50% - 130px)
height: 240px
width: 280px
background: rgba(0, 0, 0, 0.1)
border-radius: 50%
.hand-left
position: absolute
height: 250px
width: 100px
background: #cacaca
border-radius: 50%
right: 10px
bottom: -80px
z-index: 5
transform: rotate(-20deg)
.hand-right
position: absolute
left: 90px
bottom: -50px
height: 180px
width: 90px
background: $bay_body
border-radius: 0px 0px 0 0
transform: rotate(-15deg)
transform-origin: 50% 130px
z-index: 20
.finger
width: 20px
position: absolute
background: #eaeaea
border-radius: 10px
z-index: -1
display: flex
flex-direction: column
justify-content: space-around
padding: 8px 0
box-sizing: border-box
&::after, &::before
content: ""
height: 3px
width: 100%
background: rgba(0, 0, 0, 0.03)
&:nth-child(1)
left: 0
height: 50px
top: -40px
&:nth-child(2)
left: 22px
height: 50px
top: -48px
&:nth-child(3)
left: 44px
height: 50px
top: -52px
&:nth-child(4)
left: 66px
height: 50px
top: -46px
.thumb
position: absolute
right: -15px
top: -15px
height: 35px
width: 20px
border-radius: 10px 10px 7px 7px
background: #eaeaea
z-index: 20
transform: rotate(50deg)
display: flex
flex-direction: column
justify-content: space-around
box-sizing: border-box
padding: 5px 0px
&::after, &::before
content: ""
height: 3px
width: 100%
background: rgba(0, 0, 0, 0.03)
z-index: 30
&:nth-child(4)
left: 66px
height: 50px
top: -46px
&::after
content: ""
position: absolute
top: -17px
height: 35px
width: 90px
border-radius: 50%
background: $bay_body
.left-curve
content: ""
position: absolute
left: -7px
height: 150px
width: 14px
background: $bay_body
border-radius: 50%
.right-curve
content: ""
position: absolute
right: -7px
height: 150px
width: 14px
background: $bay_body
border-radius: 50%
box-shadow: 9px 27px 0px 8px rgba(0, 0, 0, 0.1)
@keyframes scan
0%
top: 0px
100%
top: 100%
$(document).ready(function(){
$('button').click(function(){
$('.speech-bubble').hide();
$('.overlay').fadeIn(300, function(){
$('.green-line').addClass("scan"); })
setTimeout(function(){
$('.overlay').fadeOut(300, function(){
$('.green-line').removeClass("scan");
$('.result').fadeIn("fast", function(){
var x = (Math.floor(Math.random()*41) + 60);
var y = (Math.floor(Math.random()*41) + 60);
var z = (Math.floor(Math.random()*41) + 60);
var d = new Date();
var day = d.getDay();
$(".first").css({"height" : parseInt(x * 1.5)+"px"});
$(".first .day").html(Day(day) + "<br>" + x+"%");
$(".second").css({"height" : parseInt(y * 1.5)+"px"});
$(".second .day").html(Day(day + 1)+ "<br>" + y+"%");
$(".third").css({"height" : parseInt(z * 1.5)+"px"});
$(".third .day").html(Day(day + 2)+ "<br>" + z+"%");
});
});
}, 5000);
});
});
function Day(a){
switch(a)
{
case 0:
case 7:
return "Sun";
case 1:
case 8:
return "Mon";
case 2:
return "Tue";
case 3:
return "Wed";
case 4:
return "Thu";
case 5:
return "Fri";
case 6:
return "Sat";
}
}
Also see: Tab Triggers