tabbit

Mon Oct 22 2018
Copied to clipboard! Copy reply
<div class="rto-wrap">

  <div class="rto-container">
    
      <div class="rto-header">
        IF YOU ORDER IN THE NEXT TEN MINUTES:
      </div>
      
      <div class="rto-body">
        
        <div class="offer-price">
          <h3>save an additional</h3>
          <div class='rto-offer-price'>$10</div>
          <h3>on your order</h3>
        </div> <!-- /offer-price -->

        <div class="progress-bar">
          <div id="svgcontainer">
            <svg height="300" width="300" id="svg">
              <circle id="progressbg" cx="150" cy="150" r="120" stroke-width="10" fill="transparent" stroke-dasharray="753.9822368615503" />
              <circle id="progress" cx="150" cy="150" r="120" stroke-width="10" fill="transparent" stroke-dasharray="753.9822368615503" />
            </svg>

            <div class="countdown-clock">

              <div class='timeleft'>

                <div id='hours'>
                  <div class="digits">
                    <span class="digit"></span>
                    <span class="word-mobile">m</span>
                  </div>
                  <div class="word">Hours</div>
                </div>

                <div class='colon'>:</div>

                <div id='minutes'>
                  <div class="digits">
                    <span class="digit">09</span>
                    <span class="word-mobile">m</span>
                  </div>        
                  <div class="word">Minutes</div>
                </div>

                <div class='colon'>:</div>

                <div id='seconds'>
                  <div class="digits">
                    <span class="digit">09</span>
                    <span class="word-mobile">s</span>
                  </div>
                  <div class="word">Seconds</div>
                </div>      

              </div>       
            </div>
          </div>
        </div> <!--/ progress-bar -->
      </div> <!-- /rto-body -->
      
      <div class="rto-footer">
        <a href="">SHOP NOW</a>
      </div>

      <div class="rto-gradient"></div>

  </div>
</div>


<style>


  /* White blurry backgorund */
  .rto-gradient {
      display: none;
      background: pink;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      position: absolute;
      background: rgba(255,255,255,0.8);
      z-index: 1;   
  }

  /*  used to center rto container */
  .rto-wrap {    
      position: absolute;
      top: 0; 
      left: 0;
      height: 100%;
      width: 100%;
      text-align: center;
      z-index: 100;
      background: rgba(255,255,255,0.8);
  }





  .rto-container {
    z-index: 150009999999;
    text-align:center;
    max-width: 650px;
    background: #363635;  
    margin: 10vh auto;
  }

  .rto-header {
    background: #EAB726;
    padding: 2.2em 1em;
  }

  .rto-body {  
    display: flex;
    color: #fff;
    padding: 2em 3em;
  }

  .rto-body > * {
    width: 50%;
  }

  .rto-body .offer-price {
    text-transform: uppercase;
    order: 1;
    margin-top: 2em;
  }

  .rto-body h3 {
    font-weight: lighter;
  }

  .rto-offer-price {
    font-weight: 100;
    font-size: 102px;
  }

  .rto-footer {
    padding: 0 0 2em 0;
  }

  .rto-footer a {
    background: #34A4D9;
    display: inline-block;
    color: #fff;
    padding: 1em 6em;
    text-decoration: none;
    font-weight: 500;
    border-radius: 4px;
  }




  .timeleft {
    display: table;
    width: 100%;
    align-items: center;
    font-size: 28px;
    
  }

  .timeleft > div {
    display: table-cell;
    font-size: 52px;
    
  }

  #hours, #hours + .colon {
    display: none;
  }

  .digits {
    display: table;
  }

  .digits > span {
    display: table-cell;
    text-align: center;
    font-weight: 700;
    width: 100px;
  }

  .digits > span:last-of-type {
    font-size: 70%;
    margin: 0 auto;
    width: 1px;
    overflow: hidden;
    display: block;
    font-weight: 100;
    
  }
  .word {
    font-size: 10px;
    text-transform: uppercase;
  }

  .word-mobile {
    display: none;
  }


  .countdown-clock {
    width: 60%;
    text-align: center;
    position: absolute;
    top: 97px;
    left: 20%;
    font-size: 42px;
    font-weight: 100;
    color: #fff;
    transition: all 1s linear;
    /*transform: rotate(90deg);*/
  }

  #svgcontainer{
    position: relative;
    display: inline-block;
    width: 300px;	
  }

  #svg{
    position:relative;
    transform: rotate(90deg);
  }

  #progressbg {
    z-index:0;
    position:absolute;
    top:0px;
    box-shadow: 5px 5px 5px 5px #333;
    stroke: #2B2B2A;
  }

  #progress {
    stroke-dashoffset: 0;
    stroke: #2769BF;
    transition: all 1s linear;
    z-index:1;
    position:absolute;
    top:0px;  
    

  }




  @media (max-width: 650px) {
    
    .rto-container {
      max-width: 355px;
      margin: 1em auto;
      border-radius: 5px;
    }
    
  
    .rto-header {
      padding: 2em 0;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
    }
    .rto-body {
      flex-direction: column;
      padding: 0;
    }
    
    .rto-body > * {
      width: 100%;
    }
    .rto-body .offer-price {
      order: 1; 
      margin-top: 1em;
      line-height: 59px;
    }
    
    .rto-body h3 {
      margin: 0;
    }
    
    .rto-body .progress-bar {
      order: 2;
      height: 267px;
      overflow: hidden;
    }

    .countdown-clock {
      top: 91px;
      left: 26%;
      width: 57%;
    }
    
    .word {
      display: none;
    }

    .digits > span:last-of-type {
      display: inline-block;
      width: auto;
      position: relative;
      bottom: -10px;
    }
    .digit {
      width: 50%!important;
    }

    #seconds .digits > .digit {
      width: 75%!important;
    }
    .colon {
      display: none!important;
    }
    .timeleft > div {
      font-size: 42px;
    }

    .rto-footer a {
      padding: 0.5em 6em;
    }
  }





  @keyframes colorfade {
    0% {
      stroke: #2769BF
    }
    
    25% {
      stroke: #EAB726;
      
    }
    
    
    40% {
      stroke: #d45322f2
      
    }
    
    75% {
      
    }
    100% {
      stroke: #d41818
    }
  }
</style>

<script>

  // Shortcut for document.querySelector
  var qs = document.querySelector.bind(document)

  // Must match css media query - shrinking circle radius & pos
  if (window.innerWidth < 650)
  {
    qs('#progress').setAttribute('r', 100)
    qs('#progressbg').setAttribute('r', 100)

    qs('#progress').setAttribute('cx', 120)
    qs('#progressbg').setAttribute('cx', 120)
    
  }



  // Progress variables
  var $hours = qs('#hours .digit')
  var $minutes = qs('#minutes .digit')
  var $seconds = qs('#seconds .digit')


  /* Clock
  **********************************/
  // if you change this, also change
  // #progress animation-duration to the
  // equivalent number of seconds
  var timeInMinutes = 10; 
  var deadline = new Date(Date.parse(new Date()) + timeInMinutes*60*1000);

  qs('#progress').style.animationDuration = timeInMinutes * 60

  // UPDATED
  var fullTime = getTimeRemaining(deadline).total;

  function getTimeRemaining(endtime)
  {
    var t = Date.parse(endtime) - Date.parse(new Date());
    var seconds = Math.floor( (t/1000) % 60 );
    var minutes = Math.floor( (t/1000/60) % 60 );
    var hours = Math.floor( (t/(1000*60*60)) % 24 );
    var days = Math.floor( t/(1000*60*60*24) );
    
    
    if (minutes == 1 && !qs('#progress').style.animationName)
    {
      qs('#progress').style.animationName = 'colorfade'
    }
    return {
      'total': t,
      'days': days,
      'hours': hours,
      'minutes': minutes,
      'seconds': seconds
    };
  }

  function initializeClock(endtime)
  { 
    var timeinterval = setInterval(function() {
      var t = getTimeRemaining(endtime);
      var seconds = ('0' + t.seconds).slice(-2);
      
      // progress bar remaining UPDATED
      var pbr =  (t.total / fullTime) * 100;
      
      
      updateSliderValue(t.hours, t.minutes, seconds, false, pbr);

      if(t.total<=0)
      {      
        clearInterval(timeinterval);
        document.querySelector('.rto-container').style.display = 'none'
        document.querySelector('.rto-gradient').style.display = 'none'
        document.querySelector('.rto-wrap').style.display = 'none'
      }
    },1000);
  }




  /* Progress bar
  **************************************/

  /*
  * Updates progress bar and value
  * @param {str} hours - hours left
  * @param {str} minutes - minutes left
  * @param {str} seconds - seconds left
  * @param {bool} showHours - show/hide hours left
  * @param {int} barValue - number of total seconds left. 
  */
  function updateSliderValue(hours, mins, secs, showHours, barValue) 
  { 
    
    if (showHours)
    {
      qs('#hours').style.display = 'table-cell'
      qs('.colon').style.display = 'table-cell'    
    }
    
    $hours.innerHTML = hours
    $minutes.innerHTML = mins
    $seconds.innerHTML = secs
    var radius = qs('#progress').getAttribute('r');
    var circumference = 2 * Math.PI * radius;
    
    // Controls the loading circle %
    
    var progress_in_pixels = -(circumference * (100-barValue) / 100);
    qs('#progress').style.strokeDashoffset = progress_in_pixels+'px';
    
    
    
  /*
    if(qs('#slider').value < 25){
      qs('#progress').style.stroke = 'red';
      qs('#slidervalue').style.color = 'red';
    }
    else if(yb.id('slider').value >= 75){
      qs('#progress').style.stroke = '#7df';
      qs('#slidervalue').style.color = '#7df';
    }
    else{
      qs('#progress').style.stroke = 'gold';
      qs('#slidervalue').style.color = 'gold';
    }
    */
    
  }



  /* Initialize everything
  **************************************/
  initializeClock(deadline);


</script>