<div id="app-cover">
<div id="app">
<div id="layer1" class="layer">
<div id="front-message">Do you want to receive our weekly newsletter?</div>
<div id="buttons-cover">
<div class="action-button" id="yes-button">
<div class="action">
<span>Yes</span>
</div>
</div>
<div class="action-button" id="no-button">
<div class="action">
<span>No</span>
</div>
</div>
</div>
</div>
<div id="layer2" class="layer">
<div class="heading">Enter your email address</div>
<div class="back-button">
<svg class="svg-icon" viewBox="0 0 20 20">
<path fill="none" d="M8.388,10.049l4.76-4.873c0.303-0.31,0.297-0.804-0.012-1.105c-0.309-0.304-0.803-0.293-1.105,0.012L6.726,9.516c-0.303,0.31-0.296,0.805,0.012,1.105l5.433,5.307c0.152,0.148,0.35,0.223,0.547,0.223c0.203,0,0.406-0.08,0.559-0.236c0.303-0.309,0.295-0.803-0.012-1.104L8.388,10.049z"></path>
</svg>
</div>
<form method="post" action="" class="input-box-cover">
<input type="text" id="email-address" name="email" placeholder="Type here" spellcheck="false" autocomplete="off">
<button type="submit">Done</button>
</form>
<div class="working">
<span class="blink">Working ...</span>
<div class="close-button">
<svg class="svg-icon" viewBox="0 0 20 20">
<path fill="none" d="M15.898,4.045c-0.271-0.272-0.713-0.272-0.986,0l-4.71,4.711L5.493,4.045c-0.272-0.272-0.714-0.272-0.986,0s-0.272,0.714,0,0.986l4.709,4.711l-4.71,4.711c-0.272,0.271-0.272,0.713,0,0.986c0.136,0.136,0.314,0.203,0.492,0.203c0.179,0,0.357-0.067,0.493-0.203l4.711-4.711l4.71,4.711c0.137,0.136,0.314,0.203,0.494,0.203c0.178,0,0.355-0.067,0.492-0.203c0.273-0.273,0.273-0.715,0-0.986l-4.711-4.711l4.711-4.711C16.172,4.759,16.172,4.317,15.898,4.045z"></path>
</svg>
</div>
</div>
</div>
<div id="layer3" class="layer">
<div class="heading">Please let us know the reason</div>
<div class="back-button">
<svg class="svg-icon" viewBox="0 0 20 20">
<path fill="none" d="M8.388,10.049l4.76-4.873c0.303-0.31,0.297-0.804-0.012-1.105c-0.309-0.304-0.803-0.293-1.105,0.012L6.726,9.516c-0.303,0.31-0.296,0.805,0.012,1.105l5.433,5.307c0.152,0.148,0.35,0.223,0.547,0.223c0.203,0,0.406-0.08,0.559-0.236c0.303-0.309,0.295-0.803-0.012-1.104L8.388,10.049z"></path>
</svg>
</div>
<form method="post" action="" class="input-box-cover">
<textarea name="email" id="reason" maxlength="500" placeholder="Type here" spellcheck="false" autocomplete="off"></textarea>
<button type="submit">Done</button>
</form>
<div class="working">
<span class="blink">Working ...</span>
<div class="close-button">
<svg class="svg-icon" viewBox="0 0 20 20">
<path fill="none" d="M15.898,4.045c-0.271-0.272-0.713-0.272-0.986,0l-4.71,4.711L5.493,4.045c-0.272-0.272-0.714-0.272-0.986,0s-0.272,0.714,0,0.986l4.709,4.711l-4.71,4.711c-0.272,0.271-0.272,0.713,0,0.986c0.136,0.136,0.314,0.203,0.492,0.203c0.179,0,0.357-0.067,0.493-0.203l4.711-4.711l4.71,4.711c0.137,0.136,0.314,0.203,0.494,0.203c0.178,0,0.355-0.067,0.492-0.203c0.273-0.273,0.273-0.715,0-0.986l-4.711-4.711l4.711-4.711C16.172,4.759,16.172,4.317,15.898,4.045z"></path>
</svg>
</div>
</div>
</div>
</div>
</div>
*:focus
{
outline: none;
}
html, body
{
height: 100%;
min-height: 100%;
}
body
{
margin: 0;
background-color: #fff;
}
input, button, textarea
{
display: block;
font-size: 16px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
padding: 0;
margin: 0;
border: 0;
background-color: transparent;
}
body, button
{
font-family: 'Open Sans Condensed', Helvetica, sans-serif;
}
#app-cover
{
position: absolute;
top: 50%;
right: 0;
left: 0;
width: 440px;
margin: -127.5px auto 0 auto;
perspective: 700px;
transform: scale(1);
transition: 0.8s ease all;
}
#app-cover.hide
{
transform: scale(0);
}
#app
{
width: 440px;
height: 255px;
transition: 1s ease transform;
transform-style: preserve-3d;
transform-origin: center left;
}
#app.flipped
{
transform: translateX(100%) rotateY(180deg);
}
.layer
{
position: absolute;
width: 380px;
height: 165px;
padding: 40px 30px 50px 30px;
background-color: #222;
border-radius: 4px;
backface-visibility: hidden;
overflow: hidden;
}
#layer1
{
background: linear-gradient(130deg,#03A9F4,#3F51B5);
box-shadow: 0 20px 70px -20px #3d55b8;
z-index: 1;
}
#layer2
{
background: linear-gradient(130deg,#7cdc0c,green);
box-shadow: 0 20px 70px -20px #61b83d;
}
#layer3
{
background: linear-gradient(130deg,#ffa162,#cc5200);
box-shadow: 0 20px 70px -20px #b8873d;
}
.heading
{
color: #fff;
font-size: 30px;
font-weight: bold;
line-height: 1;
margin-bottom: 30px;
}
.back-button
{
position: absolute;
bottom: 49px;
left: 22px;
width: 30px;
height: 30px;
cursor: pointer;
}
#layer2 .input-box-cover
{
border-color: #40b006;
}
.input-box-cover input, .input-box-cover textarea
{
color: #fff;
width: 100%;
max-width: 100%;
min-width: 100%;
}
#layer2 .input-box-cover input::placeholder
{
color: green;
}
.input-box-cover button
{
position: absolute;
right: 30px;
bottom: 45px;
font-size: 18px;
line-height: 1;
padding: 9px 16px 11px 16px;
background-color: #fff;
border-radius: 100px;
cursor: pointer;
}
#layer2 .input-box-cover button
{
color: green;
}
#layer2 .input-box-cover button:active
{
box-shadow: 0 0 0 3px green, 0 0 0 5px #fff;
}
.working
{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
}
.working:before
{
content: '';
position: absolute;
top: -130px;
bottom: -130px;
left: -470px;
width: 440px;
border-radius: 100%;
transition: 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.14) all;
z-index: 2;
}
.working.active:before
{
left: -220px;
}
.working.done:before
{
width: 720px;
}
#layer2 .working:before
{
background-color: #01b901;
background: linear-gradient(130deg,#7cdc0c,#008000);
box-shadow: 10px 0 20px -8px #b3b3b3;
}
#layer2 .working:before, #layer3 .working:before
{
box-shadow: 10px 0 20px -8px #b3b3b3;
}
.working:after
{
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.95;
background-color: rgb(255, 255, 255);
z-index: 1;
}
.blink
{
position: absolute;
top: 50%;
left: -30px;
color: #fff;
font-size: 23px;
padding: 10px;
margin-top: -26px;
margin-left: -100px;
opacity: 1;
transition: 0.8s cubic-bezier(0, 0.94, 0.51, 0.96) all, 0.4s ease opacity;
animation: blink 1s ease 0.5s infinite;
z-index: 3;
}
.working.active .blink
{
left: 50%;
}
.blink.hide
{
opacity: 0;
}
@keyframes blink
{
0%{ opacity: 1; }
50%{ opacity: 0.4; }
100%{ opacity: 1; }
}
.working.done span
{
text-align: center;
width: 102px;
margin-left: -61px;
animation: unset;
}
.close-button
{
position: absolute;
top: 10px;
right: 10px;
width: 30px;
height: 30px;
cursor: pointer;
display: none;
z-index: 2;
}
.working.done .close-button
{
display: block;
}
.svg-icon
{
width: 30px;
height: 30px;
}
.svg-icon path, .svg-icon polygon, .svg-icon rect
{
fill: #fff;
}
.svg-icon circle
{
stroke: #fff;
stroke-width: 1;
}
#layer2, #layer3
{
padding: 45px 30px;
display: none;
z-index: 2;
}
#layer2.active, #layer3.active
{
display: block;
transform: rotateY(180deg);
}
#layer3 .input-box-cover textarea
{
height: 42px;
min-height: 42px;
max-height: 42px;
overflow-y: auto;
}
#layer3 .input-box-cover textarea::placeholder
{
color: #cc5200;
}
#layer3 .input-box-cover button
{
color: #cc5200;
}
#layer3 .input-box-cover button:active
{
box-shadow: 0 0 0 3px #cc5200, 0 0 0 5px #fff;
}
#layer3 .working:before
{
background-color: #e2742a;
background: linear-gradient(130deg,#ffa162,#cc5200);
}
#front-message
{
color: #fff;
font-size: 30px;
font-weight: 700;
text-align: center;
height: 82px;
margin-bottom: 35px;
}
#buttons-cover:after
{
content: '.';
display: block;
clear: both;
height: 0;
visibility: hidden;
}
.action-button
{
width: 50%;
}
.action
{
display: inline-block;
position: relative;
width: 24px;
height: 24px;
color: #fff;
font-size: 18px;
text-align: center;
padding: 12px;
cursor: pointer;
border-radius: 50%;
}
.action:before
{
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 50%;
z-index: 0;
}
.action span
{
position: relative;
z-index: 1;
}
#yes-button
{
float: left;
text-align: right;
}
#no-button
{
float: right;
text-align: left;
}
#yes-button .action
{
margin-right: 15px;
background: linear-gradient(120deg,#9eff2e,#75b300);
}
#no-button .action
{
margin-left: 15px;
background: linear-gradient(120deg,#ffa162,#cc5200);
}
$(function()
{
var appCover = $('#app-cover'), app = $('#app'), yesButton = $('#yes-button'), noButton = $('#no-button'), layer = $('.layer'), layer2 = $('#layer2'), layer3 = $('#layer3'), emailAddressInput = $('#email-address'), reasonInput = $('#reason'), backButton = $('.back-button'), form = $('form'), activeLayer, _layer, _email, _reason, regex, wElm, blink, closeButton, message = "Thank you";
function reviveForm()
{
app.removeClass('flipped');
appCover.fadeIn(0);
appCover.removeClass('hide');
}
function hideForm()
{
appCover.addClass('hide');
appCover.fadeOut(300);
setTimeout( function()
{
layer.removeClass('active');
$('.working').removeClass('active done').fadeOut(0);
$('.blink').text('Working ...');
} ,800);
closeButton.off('click');
setTimeout(function(){ reviveForm(); },2000);
}
function showEmailForm()
{
activeLayer = 1;
closeButton = layer2.find('.close-button');
closeButton.on('click',hideForm);
layer.removeClass('active');
$('.working').removeClass('active done').fadeOut(0);
$('.blink').text('Working ...');
layer2.addClass('active');
app.addClass('flipped');
setTimeout(function(){ emailAddressInput.val('').focus(); },1100);
}
function showReasonForm()
{
activeLayer = 2;
closeButton = layer3.find('.close-button');
closeButton.on('click',hideForm);
layer.removeClass('active');
layer3.addClass('active');
app.addClass('flipped');
setTimeout(function(){ reasonInput.val('').focus(); },1100);
}
function goBack()
{
app.removeClass('flipped');
setTimeout(function()
{
layer.removeClass('active');
if(activeLayer == 1 )
emailAddressInput.val('');
else
reasonInput.val('');
},1100);
closeButton.off('click');
}
function sendData(_layer)
{
wElm = _layer.find('.working');
blink = _layer.find('.blink');
wElm.fadeIn(100);
setTimeout(function(){ wElm.addClass('active'); },250);
/*
AJAX Call to send data to server
*/
setTimeout(function(){ wElm.addClass('done'); blink.text('Done'); },3250);
setTimeout(function(){ blink.addClass('hide'); },4450);
setTimeout(function(){ blink.text(message); },4850);
setTimeout(function(){ blink.removeClass('hide'); },5200);
if( activeLayer == 1 )
emailAddressInput.val('');
else
reasonInput.val('');
}
function submitForm(e)
{
e.preventDefault();
if( activeLayer == 1 )
{
_layer = layer2;
_email = emailAddressInput.val().trim();
if( _email.length > 0 )
{
regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if(regex.test(_email))
sendData(_layer);
else
{
emailAddressInput.focus();
return false;
}
}
else
{
emailAddressInput.focus();
return false;
}
}
else
{
_layer = layer3;
_reason = reasonInput.val().trim();
if( _reason.length > 0 )
sendData(_layer);
else
{
reasonInput.focus();
return false;
}
}
}
yesButton.on('click',showEmailForm);
noButton.on('click',showReasonForm);
backButton.on('click',goBack);
form.submit(function(e){submitForm(e);});
});