<script>
/* НАСТРОЙКИ */
var action_name = "До конца акции осталось:";
var action_end = "Акция закончилась! Спасибо за участие";
var deadline = "Dec 17, 2021 10:28:00";	
</script>


<style>
#countdown_warp {
  box-sizing: border-box;
  height: 100%;
  align-items: center;
  background-color: #ffd54f; /* ЦВЕТ ФОНА */
  display: flex;
  font-family: -apple-system, 
    BlinkMacSystemFont, 
    "Segoe UI", 
    Roboto, 
    Oxygen-Sans, 
    Ubuntu, 
    Cantarell, 
    "Helvetica Neue", 
    sans-serif;
  padding: 40px 0 40px 0;
}
#countdown_warp .container {
  color: #333;
  margin: 0 auto;
  text-align: center;
}

#countdown_warp h1 {
  font-weight: normal;
  letter-spacing: .125rem;
  text-transform: uppercase;
}

#countdown_warp ul {
  padding:0;
}
#countdown_warp li {
  display: inline-block;
  font-size: 1.5em;
  list-style-type: none;
  padding: 1em;
  text-transform: uppercase;
}

#countdown_warp li span {
  display: block;
  font-size: 4.5rem;
}

#countdown_warp .message {
  font-size: 4rem;
}

#countdown_warp #content {
  display: none;
  padding: 1rem;
}

#countdown_warp .emoji {
  padding: 0 .25rem;
}

@media all and (max-width: 768px) {
  #countdown_warp h1 {
    font-size: 1.5rem;
  }
  
  #countdown_warp li {
    font-size: 0.7rem;
    padding: .75rem;
  }
  
  #countdown_warp li span {
    font-size: 2.375rem;
  }
}
</style>

<div id="countdown_warp">
	<div class="container">
	  <h1 id="headline"><script>document.write(action_name)</script></h1>
	  <div id="countdown">
	    <ul>
	      <li><span id="days"></span><text id="days_text">Дней</text></li>
	      <li><span id="hours"></span><text id="hours_text">Часов</text></li>
	      <li><span id="minutes"></span><text id="minutes_text">Минут</text></li>
	      <li><span id="seconds"></span><text id="seconds_text">Секунд</text></li>
	    </ul>
	  </div>
	  <div class="message">
	    <div id="content">
	      <span class="emoji">🥳</span>
	      <span class="emoji">🎉</span>
	      <span class="emoji">🎂</span>
	    </div>
	  </div>
	</div>
</div>

<script>
function num_word(value, words){  
	value = Math.abs(value) % 100; 
	var num = value % 10;
	if(value > 10 && value < 20) return words[2]; 
	if(num > 1 && num < 5) return words[1];
	if(num == 1) return words[0]; 
	return words[2];
}
(function () {
  const second = 1000,
        minute = second * 60,
        hour = minute * 60,
        day = hour * 24;

  let deadline_count = deadline,
      countDown = new Date(deadline_count).getTime(),
      x = setInterval(function() {    

        let now = new Date().getTime(),
            distance = countDown - now;

          document.getElementById("days").innerText = Math.floor(distance / (day)),
          document.getElementById("days_text").innerText = num_word(Math.floor(distance / (day)), ['день', 'дня', 'дней']),
          document.getElementById("hours").innerText = Math.floor((distance % (day)) / (hour)),
          document.getElementById("hours_text").innerText = num_word(Math.floor((distance % (day)) / (hour)), ['час', 'часа', 'часов']),
          document.getElementById("minutes").innerText = Math.floor((distance % (hour)) / (minute)),
          document.getElementById("minutes_text").innerText = num_word(Math.floor((distance % (hour)) / (minute)), ['минута', 'минуты', 'минут']),
          document.getElementById("seconds").innerText = Math.floor((distance % (minute)) / second),
          document.getElementById("seconds_text").innerText = num_word(Math.floor((distance % (minute)) / second), ['секунда', 'секунды', 'секунд']);

        //do something later when date is reached
        if (distance < 0) {
          let headline = document.getElementById("headline"),
              countdown = document.getElementById("countdown"),
              content = document.getElementById("content");

          headline.innerText = action_end;
          countdown.style.display = "none";
          content.style.display = "block";

          clearInterval(x);
        }
        //seconds
      }, 0)
}());
</script>