Halaman

by ImKaizen

HTML

<div class="maintenancePage">
  <div class="mainContainer">
    <div class="mainBox">
      <div id="mainCount">
        <ul>
          <li><span id="countDays"></span>Day</li>
          <li><span id="countHours"></span>Hour</li>
          <li><span id="countMinutes"></span>Minute</li>
          <li><span id="countSeconds"></span>Second</li>
        </ul>
      </div>
      <div class="mainAnimation">
        <div class="mainOne spinOne"></div>
        <div class="mainTwo spinTwo"></div>
        <div class="mainThree spinOne"></div>
      </div>
      <div class="mainSubcontainer">
        <h1>Under maintenance</h1>
        <p>Update in progress. You can visit in any other time.</p>
        <p>Maintenance screen for <a href="#" target="_blank" title="Changelog">LiveAgent</a></p>
      </div>
    </div>
  </div>
</div>

CSS

/* 
Don't remove this credit!
Maintenance Page by Róbert Hegedúš / https://codepen.io/lilpirat
Countdown Timer by Matt Smith / https://codepen.io/AllThingsSmitty
*/
html, body{overflow:hidden}
.maintenancePage{position:fixed;width:100%;height:100%;font-family:"Noto Sans",sans-serif;top:0;left:0;overflow:hidden;z-index:999}
.mainContainer{margin:auto;width:100%;height:100%;text-align:center;position:relative}
.mainSubcontainer{margin-top:50px;margin-left:15px}
.mainBox{width:100%;height:100%;background:linear-gradient(11.7deg,#fafafa 53%,#ffffff 47%)}
.mainAnimation{margin-top:10%;display:inline-block}
#mainCount{text-align:center;margin-left:-50px}
#mainCount ul li{display:inline-block;color:#888;font-size:14px;list-style-type:none;padding:20px;text-transform:uppercase}
#mainCount ul li span{display:block;color:#333;font-size:18px;font-weight:bold}
.maintenancePage .mainContainer h1{color:#677880;font-size:50px;letter-spacing:2px;text-transform:uppercase}
.maintenancePage .mainContainer p{font-size:15px}
.maintenancePage .mainContainer p a{color:#009ee0;font-weight:bold;text-decoration:none}
.maintenancePage .mainContainer p a:hover{color:#009ee0}
.mainOne,.mainTwo,.mainThree{display:block;float:left}
.spinOne{-webkit-animation:spinOne 1.5s infinite linear;animation:spinOne 1.5s infinite linear}
.spinTwo{-webkit-animation:spinTwo 2s infinite linear;animation:spinTwo 2s infinite linear}
.mainOne{background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23989b9f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><g transform='translate(3.500000, 2.500000)'><path d='M8.5,7 C9.88088012,7 11,8.11911988 11,9.5 C11,10.8808801 9.88088012,12 8.5,12 C7.11911988,12 6,10.8808801 6,9.5 C6,8.11911988 7.11911988,7 8.5,7 Z'></path><path d='M16.6680023,4.75024695 L16.6680023,4.75024695 C15.9844554,3.55799324 14.4712377,3.15003899 13.2885153,3.83852352 C12.2597626,4.43613205 10.9740669,3.68838056...

JavaScript

<script>
(function(){
const second=1000,minute=second*60,hour=minute*60,day=hour*24;
let timeReach="Jan 28, 2023 00:00:00",
    mainCount=new Date(timeReach).getTime(),
    x=setInterval(function(){
      let now=new Date().getTime(),
        distance=mainCount-now;
          document.getElementById("countDays").innerText=Math.floor(distance/(day)),
          document.getElementById("countHours").innerText=Math.floor((distance%(day))/(hour)),
          document.getElementById("countMinutes").innerText=Math.floor((distance%(hour))/(minute)),
          document.getElementById("countSeconds").innerText=Math.floor((distance%(minute))/second)
    },0)
}())
</script>