JSFiddle - React, Tailwind, and code Playground

Fliplet - Visual Update - Black Edition

by Hugo Carneiro

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<!-- SCREEN MOCKUP -->
<div class="fl-viewport-header">
  <span class="nav-title">
    <span>Screen title</span>
  </span>
  <span class="nav-right" data-fl-toggle-menu=".fl-menu">
      <i class="fa fa-bars" aria-hidden="true"></i>
    </span>
</div>
<div>
  <img src="https://drivenlocal.com/wp-content/uploads/2015/10/Material-design.jpg" />
</div>
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12">
      <h2>Aenean lacinia bibendum nulla sed consectetur.</h2>
      <p>Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non
        magna. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
      <p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent
        commodo cursus magna, vel scelerisque nisl consectetur et. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat
        porttitor ligula, eget lacinia odio sem nec elit.</p>
      <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet,...

CSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700');
html,
body {
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
}

.fl-viewport-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  margin: 0 auto;
  line-height: 43px;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 0 #fff;
  border-bottom: 1px solid rgba(127, 127, 127, 0.1);
  font-weight: 300;
  width: 100%;
  z-index: 10;
  text-align: center;
  color: #333;
  font-size: 1em;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.fl-viewport-header .nav-title {
  display: block;
  margin: 0 18.5%;
  text-align: center;
  padding: 0 16px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fl-viewport-header .nav-left,
.fl-viewport-header .nav-right {
  position: absolute;
  top: 0;
  height: 43px;
  cursor: pointer;
  right: 0;
  width: 44px;
  font-size: 1.5em;
}

.update-overlay.discreet {
  position: fixed;
  top: 20%;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  display: none;
}

.update-overlay-body {
  position: absolute;
  bottom: -100%;
  top: auto;
  left: 0;
  right: 0;
  max-height: 100%;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background: rgba(0, 0, 0, 0.85);
  color: #FFFFFF;
  padding: 15px;
  border-top: 1px solid #eaeaea;
  display: flex;
  flex-direction: column;
  -webkit-transition: bottom 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: bottom 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: all;
}

.update-overlay-body.expanded {
  bottom: 0...

JavaScript

var uploadFailed = false;
var interval;
var expanded = false;

function updateSuccess() {
	var updateSuccess = $('#update-success').html();
  $('.update-overlay-header').html(updateSuccess);
  $('.update-overlay.discreet').addClass('success');
  calculateHeight();
  
  if (!expanded) {
    interval = setTimeout(function(){
      $('.update-overlay.discreet').removeClass('success');
      $('.update-overlay-body').css("bottom", "");
      removeOverlay();
    }, 3000);
  }
}

function updateFail() {
	var updateFail = $('#update-fail').html();
  $('.update-overlay-header').html(updateFail);
  $('.update-overlay.discreet').addClass('failed');
  calculateHeight();
}

function updateDefault() {
	var updateDefault = $('#update-default').html();
  $('.update-overlay.discreet').removeClass('failed');
  $('.update-overlay.discreet').removeClass('success');
  $('.update-overlay-body').removeClass('expanded');
  setTimeout(function(){
  	$('.update-overlay.discreet').addClass('updating');
  	$('.update-overlay-header').html(updateDefault);
  }, 250);
}

function updateProcess() {
	$('.progress .progress-bar').animate({
    width: "100%"
  }, {
    duration: 3000,
    easing: "linear",
    step: function( now, fx ){       
    	if ( (now > 50 && now < 60) && uploadFailed ) {
        fx.end = now;
        $(this).finish();
      }
    },
    done: function() {
    	if (expanded) {
      	$('.update-overlay.discreet').removeClass('updating');
        if (uploadFailed) {
          updateFail();
        } else {
          updateSuccess();
        }
      } else {
      	var overlayBodyHeight = $('.update-overlay-body').outerHeight();
        setTimeout(function() {
          $('.update-overlay-body').css("bottom", -overlayBodyHeight);
          setTimeout(function() {
            $('.update-overlay-body').removeClass('expanded');
            $('.update-overlay.discreet').removeClass('updating');
            if (uploadFailed) {
              updateFail();
            } else {
   ...