I need to show timer in my application developed in zoho creator.
Timer should count up from given time.
Note: There is no JS support.

<% 
bidding_rec = Bidding[ID != 0];
%>
<style>
<% thisapp.Component.timerComponent(bidding_rec.Start_Time) %>
</style>

<div class="clock">
  <div class="minute-tens"></div>
  <div class="minute-digits"></div>
  <div class="colon"> : </div>
  <div class="tens"></div>
  <div class="digits"></div>
</div>

function timerComponent(timerStartTime){
    //"29-Jul-2024 10:00:00";
    hr = timerStartTime.getHour()
    style =".tens, .digits, .colon, .minute-tens, .minute-digits { display: inline-block; } .minute-tens:before { content: '0'; } .digits:before { content: '0'; } .tens:before { content: '0'; } .minute-digits:before { content: '0'; } .digits:before { animation: digitcount 10s ease 0s 6; } .tens:before { animation: tencount1 10s ease 0s, tencount2 10s ease 10s, tencount3 10s ease 20s, tencount4 10s ease 30s, tencount5 10s ease 40s, tencount6 10s ease 50s; } .minute-digits:before { animation: minute-digitcount1 60s ease 0s; } @keyframes digitcount { 10% { content: '9'; } 20% { content: '8'; } 30% { content: '7'; } 40% { content: '6'; } 50% { content: '5'; } 60% { content: '4'; } 70% { content: '3'; } 80% { content: '2'; } 90% { content: '1'; } 100% { content: '0'; } } @-webkit-keyframes digitcount { 10% { content: '9'; } 20% { content: '8'; } 30% { content: '7'; } 40% { content: '6'; } 50% { content: '5'; } 60% { content: '4'; } 70% { content: '3'; } 80% { content: '2'; } 90% { content: '1'; } 100% { content: '0'; } } @keyframes tencount1 { 0%, 10% { content: '0'; } 10%, 100% { content: '5'; } } @keyframes tencount2 { 0%, 10% { content: '5'; } 10%, 100% { content: '4'; } } @keyframes tencount3 { 0%, 10% { content: '4'; } 10%, 100% { content: '3'; } } @keyframes tencount4 { 0%, 10% { content: '3'; } 10%, 100% { content: '2'; } } @keyframes tencount5 { 0%, 10% { content: '2'; } 10%, 100% { content: '1'; } } @keyframes tencount6 { 0%, 10% { content: '1'; } 10%, 100% { content: '0'; } } @-webkit-keyframes tencount1 { 0%, 10% { content: '0'; } 10%, 100% { content: '5'; } } @-webkit-keyframes tencount2 { 0%, 10% { content: '5'; } 10%, 100% { content: '4'; } } @-webkit-keyframes tencount3 { 0%, 10% { content: '4'; } 10%, 100% { content: '3'; } } @-webkit-keyframes tencount4 { 0%, 10% { content: '3'; } 10%, 100% { content: '2'; } } @-webkit-keyframes tencount5 { 0%, 10% { content: '2'; } 10%, 100% { content: '1'; } } @-webkit-keyframes tencount6 { 0%, 10% { content: '1'; } 10%, 100% { content: '0'; } } @keyframes minute-digitcount1 { 0%, 1.7% { content: '1'; } 1.7%, 100% { content: '0'; } } @-webkit-keyframes minute-digitcount1 { 0%, 1.7% { content: '1'; } 1.7%, 100% { content: '0'; } }";
    return style;
}