Skip to content

Instantly share code, notes, and snippets.

@pitch-gist

pitch-gist/gist:2999707

Created June 26, 2012 22:21
Show Gist options
  • Save pitch-gist/2999707 to your computer and use it in GitHub Desktop.
Save pitch-gist/2999707 to your computer and use it in GitHub Desktop.
Download ZIP
HTML: Simple Maintenance Page
Raw
gistfile1.html
<!doctype html>
<title>Site Maintenance</title>
<style>
body { text-align: center; padding: 150px; }
h1 { font-size: 50px; }
body { font: 20px Helvetica, sans-serif; color: #333; }
article { display: block; text-align: left; width: 650px; margin: 0 auto; }
a { color: #dc8100; text-decoration: none; }
a:hover { color: #333; text-decoration: none; }
</style>
<article>
<h1>We&rsquo;ll be back soon!</h1>
<div>
<p>Sorry for the inconvenience but we&rsquo;re performing some maintenance at the moment. If you need to you can always <a href="mailto:#">contact us</a>, otherwise we&rsquo;ll be back online shortly!</p>
<p>&mdash; The Team</p>
</div>
</article>
@avadhJethva
Copy link

avadhJethva commented Sep 8, 2025 •
edited
Loading

you can do smooth scroll with add millisecond

<script>
    const countDownDate = new Date('September 8, 2025 17:00:00').getTime();

    function updateCountdown() {
        const now = Date.now();
        const distance = countDownDate - now;

        if (distance < 0) return;

        const days = Math.floor(distance / (1000 * 60 * 60 * 24));
        const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((distance % (1000 * 60)) / 1000);
        const milliseconds = distance % 1000;

        document.querySelector('#days .label').textContent = days;
        document.querySelector('#hours .label').textContent = hours;
        document.querySelector('#minutes .label').textContent = minutes;
        document.querySelector('#seconds .label').textContent = seconds;

        document.querySelector('#days .circle').style.background = `conic-gradient(#4a90e2 ${(days % 365) * 100 / 365}%, #e0e0e0 0%)`;
        document.querySelector('#hours .circle').style.background = `conic-gradient(#4a90e2 ${(hours % 24) * 100 / 24}%, #e0e0e0 0%)`;
        document.querySelector('#minutes .circle').style.background = `conic-gradient(#4a90e2 ${(minutes % 60) * 100 / 60}%, #e0e0e0 0%)`;
        document.querySelector('#seconds .circle').style.background = `conic-gradient(#4a90e2 ${(seconds + milliseconds / 1000) * 100 / 60}%, #e0e0e0 0%)`;

        requestAnimationFrame(updateCountdown);
    }
    requestAnimationFrame(updateCountdown);
</script>

`

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment