test2

/*Downloaded from https://www.codeseek.co/--pk--/test2-gmWJaL */
body {
  	background-color: #2c2e41;
    font-family: "Helvetica Neue", sans-serif;
}
.mainBox {
  margin: 15px;
  max-width: 800px;
}
.box {
    background: #2ecc71;
    padding: 5px;
    margin-bottom: 15px;
    border-radius: 10px 10px 0px 0px;
    height: 80px;
}
.alert2 {
  background: #e74c3c;
}
.alert1 {
  background: #e67e22;
}
.box .row {
  width:100%;
  position: relative;
}
.workplace {
  background: rgba(0,0,0,0.13);
  border-radius: 8px 0px 0px 0px;
  padding: 4px 0px;
  width: 150px;
  height: 55px;
  text-align: center;
  font-size: 42px;
  font-weight: 900;
  color: #000;
  left:0px;
  position: absolute;
  top:0;
}
.material {
  background: rgba(0,0,0,0.13);
  padding: 4px 0px;
  margin-left: 155px;
  margin-right: 155px;
  height: 55px;
  text-align: center;
  font-size: 45px;
  font-weight: 900;
  color: #fff;
  overflow: hidden;
}

.time {
  background: rgba(0,0,0,0.13);
  padding: 4px 0px;
  width: 150px;
  height: 55px;
  text-align: center;
  font-size: 15px;
  color: #333;
  border-radius: 0px 8px 0px 0px;
  right:0px;
  position: absolute;
  top:0;
}
.timeFrom{
  color:#fff;
}

.bar-container {
  float: right;
  height: 9px;
  background: rgba(0,0,0,0.4);
  width: 100%;
  margin: 7px 0px;
  overflow: hidden;
}

.bar {
  float: left;
  background: #f1c40f;
  width: 0%;
  height: 5px;
  margin-top: 2px;
}

/*Downloaded from https://www.codeseek.co/--pk--/test2-gmWJaL */
$(document).ready(function() {

 refreshTable();
 getSorted();
 setInterval(function(){ refreshTable() }, 3000);
  
 function refreshTable() {                  
  $( ".box" ).each(function() { 
    s_DT = $(this).attr('deliveryTime'); //String Delivery Time (seconds)
    s_ST = $(this).attr('startTime'); //String Start Time
    d_ST = moment.utc(s_ST).format('YYYY/MM/DD HH:mm:ss'); //Date Sart Time
    d_ET = moment(moment(d_ST)).add(s_DT, 'seconds'); //Date End Time
    remain = d_ET.diff(moment.utc(), 'seconds');
    $(this).find(".row > .time > .dTime").html(moment().startOf('day').seconds(s_DT).format('HH:mm'));
    $(this).find(".row > .time > .timeFrom").html(moment(s_ST).format('HH:mm:ss'));
    if (remain>0) {
      $(this).find(".row > .time > .endTime").html(moment().startOf('day').seconds(remain).format('HH:mm'));
      if (remain<601) { //10 minut do termínu
        $(this).addClass('alert1');
      }
       $(this).find(".bar-container > .bar").width((remain/s_DT)*100+"%");
    } else {
      $(this).find(".row > .time > .endTime").html('--:--');
      $(this).removeClass('alert1');
      $(this).addClass('alert2');
      $(this).height('64px'); //zmenšít červený box
      $(this).find('.bar-container').hide();
    }
    $(this).attr('sort',remain);
  });

} // end of function refreshTable
  
function getSorted() {
$('.box').sort(function (a, b) {
  return $(a).attr('sort') - $(b).attr('sort');
}).each(function (_, container) {
  $(container).parent().append(container);
});
}
 
});