<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html;charset=UTF-8"> <title>Site Maintenance</title> <style type="text/css"> body{ text-align: center; padding-top: 50px; padding-left: 80px; font-family: sans-serif; font-weight: 100; font: 20px Helvetica, sans-serif; color: black; } h1{ font-size: 50px; font-weight: 100; font-size: 40px; margin: 40px 0px 20px; } #article{ display: block; text-align: left; margin: auto; } a{ color: #dc8100; text-decoration: none; } a:hover{ color: #333; text-decoration: none; } #clockdiv{ font-family: sans-serif; color: #fff; display: inline-block; font-weight: 100; text-align: center; font-size: 30px; } #clockdiv > div{ padding: 10px; border-radius: 3px; background: #00BF96; display: inline-block; } #clockdiv div > span{ padding: 15px; border-radius: 3px; background: #00816A; display: inline-block; } .smalltext{ padding-top: 5px; font-size: 16px; } </style> </head> <body> <div id="article"> <h1>We’ll be back very soon!</h1> <img src="/maintenance.jpg" /> <div> <p>Sorry for the inconvenience but we’re making some important changes. It shouldn’t take very long.</p> <p>We plan to be back online within 15 minutes.</p> <div id="clockdiv"> <div> <span class="minutes"></span> <div class="smalltext">Minutes</div> </div> <div> <span class="seconds"></span> <div class="smalltext">Seconds</div> </div> </div> </div> </div> <script type="text/javascript"> //<![CDATA[ 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); return { 'total': t, 'minutes': minutes, 'seconds': seconds }; } function initializeClock(id, endtime) { var clock = document.getElementById(id); var minutesSpan = clock.querySelector('.minutes'); var secondsSpan = clock.querySelector('.seconds'); function updateClock() { var t = getTimeRemaining(endtime); minutesSpan.innerHTML = ('0' + t.minutes).slice(-2); secondsSpan.innerHTML = ('0' + t.seconds).slice(-2); if (t.total <= 0) { clearInterval(timeinterval); window.location = window.location.href; } } updateClock(); var timeinterval = setInterval(updateClock, 1000); } function extractDomain(url) { var domain; //find & remove protocol (http, ftp, etc.) and get domain if (url.indexOf("://") > -1) { domain = url.split('/')[2]; } else { domain = url.split('/')[0]; } //find & remove port number domain = domain.split(':')[0]; return domain; } // if there's a cookie with the name myClock, use that value as the deadline var deadline = 0; if(document.cookie && document.cookie.match('myClock') && document.cookie.match(/(^|;)myClock=([^;]+)/)){ // get deadline value from cookie var deadline = document.cookie.match(/(^|;)myClock=([^;]+)/)[2]; var t = getTimeRemaining(deadline); if (t.total <= 0) { deadline = 0; } } // otherwise, set a deadline 10 minutes from now and // save it in a cookie with that name if(deadline == 0){ // create deadline 10 minutes from now var timeInMinutes = 15; var currentTime = Date.parse(new Date()); var deadline = new Date(currentTime + timeInMinutes*60*1000); // store deadline in cookie for future reference document.cookie = 'myClock=' + deadline + '; path=/; domain=' + extractDomain(window.location.href) + '; expires=' + deadline; } initializeClock('clockdiv', deadline); //]]> </script> </body> </html>