<h1 class="center grey-text">Scan me!</h1>
<p class="center grey-text">Simple scan animation with three states: 
Scanning, capturing & captured  </p>
<div class="container center">
  
  <div class="row">

    
      <div class="col m12">
        <h1></h1>
        <div class="card">
        <div class="barcode scan center">
          <div class="marker">
            <div class="mark top left center-marker"></div>
            <div class="mark top right center-marker"></div>
            <div class="mark bottom left center-marker"></div>
            <div class="mark bottom right center-marker"></div>
          </div>
          <div class="valign-wrapper">
            <div class="valign">
              <table>
                <tr></tr>
              </table>
            </div>
          </div>
        </div>
        <div class="confirmation hide-confirm"> 
           <i class="material-icons md-lg green-text">done</i>
           <h4>Scanned!</h4> 
        </div>
      </div>
    </div>
    <div class="col m12">
      <button class="btn-large blue darken-3" >scan</a>
    </div>
  </div>
</div>

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);

html,
body{
  width: 100%;
  height: 100%;
  font-family: 'Open Sans', sans-serif;
 background-image: url('http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/tiny_grid.png');
}

h1{
  font-weight: lighter;
}

.container{
  width: 320px;
  height: 480px;
}
row{ height: 100%; }
.col{
  padding: 0 !important;
  margin: 0 auto;
  height: 100%;
}
.card{
  // padding: 100px 0;
  overflow: hidden;
  height: 250px;
}

.btn-large{
  text-align: center;
  width: 100%;
}

.valign-wrapper{
  height: 100%;
  .valign{
    margin: 0 auto;
  }
}
.confirmation{
  position: absolute;
  top: 25%; 
  right: 0; 
  bottom: 0; 
  left: 0;
  margin: auto;
  opacity: 1;
  transition: all .4s ease-in-out;
  z-index: 0;
  transform: scale(1);
  h4{
    margin: 0;
    padding: 0;
    font-weight: 200
  }
  i{
    font-size: 72px;
  }
}
.confirmation.hide-confirm{
  top: 100% !important;
  opacity: 0 !important;
  transform: scale(0.5);
}
.barcode{
  position: relative;
  margin: 0 auto;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: all .5s cubic-bezier(0.86, 0, 0.07, 1);
  position: relative;
  transform: scale(.8) ;
  top: 0;
  &::before{
    transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    content: '';
    position: absolute;
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0;
    display: block; 
    // height: 100%; 
    width: 220px;
    background: red; //#76ff03
    border: 1px solid red;
    height: 95px;
    margin: auto;
    opacity: 0.5;
  }
}

.scan{
    &::before{
      width: 0 !important;
      height: 0 !important;
      opacity: 0;
  }
}

.grow{
    &::before{
      width: 250px !important;
      height: 115px !important;
      opacity: 0.1;
  }
}

.green{
      background: transparent !important;
      
  
  .mark{
    background: green !important;
    border-color: transparent !important;
  }
    &::before{
      transition: all .4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
      background: #76ff03;
      opacity: 0.7;
      // height: 85px;
      // width:210px;
      border: 1px solid #76ff03;
  }
  
  .top{
    top: -110px;
  }
 
  .right{
    right: -70%;
  }
  .bottom{
    bottom: -110px;
  }
  .left{
    left: -70%;
  }
  
}

.yellow{
    background: transparent !important;
  transition: all .8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  
  .mark{
    background: #ff9100 !important ;
    border-color: transparent !important;
    transition: all .8s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
    opacity: 1;
    
  }
    &::before{
      background:  #ffeb3b;
      opacity: .6;
      border: 1px solid transparent;
  transition: all .8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
      
  }
  
  .top{
    top: -130px !important;
  }
 
  .right{
    right: -79% !important;
  }
  .bottom{
    bottom: -130px !important;
  }
  .left{
    left: -79% !important;
  }
  
}



table {
  border-collapse: block;
  width: 200px;
  transition: all .4s cubic-bezier(0.86, 0, 0.07, 1);
  position: relative;
}
tr{
  
}

td {
  width: 1px;
  height: 75px;
  padding: 0 !important;
}

.marker{
  // position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  
  .mark{
    height: 10px;
    width: 10px;
    position: absolute;
    border: 1px solid red;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: -1;
    transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    background: red;
    border-radius: 10px;
    transform: scale(1);
  }
  .center-marker{
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    transform: scale(0);
  }
  .top{
    top: -110px;
  }
  
  .top.right{
    border-radius: 10px 10px 10px 0
  }
  
  .top.left{
    border-radius: 10px 10px 0 10px
  }
  .right{
    right: -70%;
  }
  .bottom{
    bottom: -110px;
  }
  .bottom.right{
    border-radius: 0 10px 10px 10px
    
  }
  .left{
    left: -70%;
  }
  
  .bottom.left{
    border-radius: 10px 0 10px 10px
    
  }
}




.drop{
  opacity: 1 !important;
  transform: scale(1);
}

.payment-details{
  height: 100%
}

.sink{
  top: 100%;
}

var code = '11010010000100111011001011101111011010001110101110011001101110010010111101110111001011001001001';

table = $('tr');
for (var i = 0; i < code.length; i++) {
  if (code[i]==1) {
    table.append('<td bgcolor="black">')
    
 
  } else {
    table.append('<td bgcolor="white">')
  }
}

$('.barcode').addClass('drop');

$('button').click(function(e){
  e.stopPropagation()
  $(this).toggleClass('disabled').attr('disabled', 'disabled')
  $(this).click(false)
  $('.mark').toggleClass('center-marker')
  $('.barcode').toggleClass('scan z-depth-1')
  
  
  
  if($('.yellow').length > 0 || $('.green').length > 0){
    $('.barcode')
    .removeClass('green')
    .removeClass('yellow')
    .removeClass('grow')
  }else{
    
    // THIS IS SO BAD DONT EVER DO THIS!!!
    setTimeout(function(){
    $('.barcode').toggleClass('grow yellow')
      setTimeout(function(){
        $('.barcode').toggleClass('yellow')
        $('.barcode').toggleClass('green');
        $('.barcode').toggleClass('grow z-depth-1')
              $('.mark').toggleClass('center-marker ')
        
          setTimeout(function(){
            $('.barcode').toggleClass('sink');
            $('.confirmation').toggleClass('hide-confirm');
              setTimeout(function(){
              $('.barcode').toggleClass('green scan sink');
              $('.confirmation').toggleClass('hide-confirm');
              $('button').toggleClass('disabled').attr('disabled', false);
                  
            
              },1800)
              
                         
          },600)
      }, 600)
    
  }, 1000)
  }
})