Countdown Timer on Lock Screen OR Cover Page

jasminesarian · September 9, 2020

Site URL: https://www.laboratoryartscollective.com/about

Is it possible to add a countdown timer to a website's lock screen or cover page? My client would like a dramatic countdown-to-launch landing page set as the home page for 7 days before website launch / a virtual launch party. I have code for a basic free countdown ticker, I just have no clue where/how to implement it, if it's at all even possible. Thanks in advance for any help!

CubeSquared · November 30, 2020

Add this to your site, under Settings - Advanced - Code Injection, then scroll down to the Lock Screen section, add this code. The sections in red will need changing to suit whatever you're counting down to and you can play around with fonts, colours, etc.

<div class="container">
<h1 id="headline">Countdown to my whatever:</h1>
<div id="countdown">
<ul>
<li><span id="days"></span>days</li>
<li><span id="hours"></span>Hours</li>
<li><span id="minutes"></span>Minutes</li>
<li><span id="seconds"></span>Seconds</li>
</ul>
</div>
<div class="message">
<div id="content">
<span class="emoji">🥳</span>
<span class="emoji">🎉</span>
<span class="emoji">🎂</span>
</div>
</div>
</div>
<style>
/* general styling */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

.sqs-slide-wrapper[data-slide-type="lock-screen"] .sqs-slide {
height: 100%;
margin: 0;
}

.sqs-slide-wrapper[data-slide-type="lock-screen"] .sqs-slide {
align-items: center;
background-color: #ffd54f;
display: flex;
font-family: -apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Oxygen-Sans,
Ubuntu,
Cantarell,
"Helvetica Neue",
sans-serif;
}

.container {
color: #333;
margin: 0 auto;
text-align: center;
}

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

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

li span {
display: block;
font-size: 4.5rem;
margin-bottom: 2rem;
}

.message {
font-size: 4rem;
}

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

.emoji {
padding: 0 .25rem;
}

@media all and (max-width: 768px) {
h1 {
font-size: 1.5rem;
}

li {
font-size: 1.125rem;
padding: .75rem;
}

li span {
font-size: 3.375rem;
}
}
</style>
<script>
(function () {
const second = 1000,
minute = second * 60,
hour = minute * 60,
day = hour * 24;

let birthday = "Dec 31, 2020 00:00:00",
countDown = new Date(birthday).getTime(),
x = setInterval(function() {

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

document.getElementById("days").innerText = Math.floor(distance / (day)),
document.getElementById("hours").innerText = Math.floor((distance % (day)) / (hour)),
document.getElementById("minutes").innerText = Math.floor((distance % (hour)) / (minute)),
document.getElementById("seconds").innerText = 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 = "It's my birthday!";
countdown.style.display = "none";
content.style.display = "block";

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

Hope this helps! Good luck. (www.twitter.com/cubesqddigital)

lepanipwoblem · May 8, 2021

Hi, I need your help !

I have included the code you indicated to have a count of time (hour and day) from today but when I look on the website I can see hours and days but not the corresponding numbers! would i have forgotten something

tuanphan · May 9, 2021

On 5/8/2021 at 9:02 PM, lepanipwoblem said:

Hi, I need your help !

I have included the code you indicated to have a count of time (hour and day) from today but when I look on the website I can see hours and days but not the corresponding numbers! would i have forgotten something

Can you share link to your site? We can help easier

lepanipwoblem · May 12, 2021

https://lepanipwoblem.com/boutique/punch-coco

tinypops · November 9, 2021

@CubeSquared & @tuanphan

Thank you for providing the above info. I'm using this code and it works "great"!
I've dangerously customized (read: bastardized 🥴) the code to auto display an image at the end of the countdown vs emojis. But i'm having 3 main issues that i'm hoping you can help me with...pleeeeaase? 🥺

1. Half the time the countdown numbers just don't load. Any ideas why? (img attached)

2. I try to customize css to reduce the leading between the h2 and body, but it then effects every h2 line-height on my site. (img attached)

and

3. When I try to insert a background image, it pretty much shuts my site down.

Any info would be super helpful and appreciated.

https://contrabass-round-d5yj.squarespace.com/
wethepeoplesbefore

tuanphan · November 11, 2021

On 11/10/2021 at 6:20 AM, tinypops said:

@CubeSquared & @tuanphan

Thank you for providing the above info. I'm using this code and it works "great"!
I've dangerously customized (read: bastardized 🥴) the code to auto display an image at the end of the countdown vs emojis. But i'm having 3 main issues that i'm hoping you can help me with...pleeeeaase? 🥺

1. Half the time the countdown numbers just don't load. Any ideas why? (img attached)

2. I try to customize css to reduce the leading between the h2 and body, but it then effects every h2 line-height on my site. (img attached)

and

3. When I try to insert a background image, it pretty much shuts my site down.

Any info would be super helpful and appreciated.

https://contrabass-round-d5yj.squarespace.com/
wethepeoplesbefore

#1. It looks fine to me

#2. It looks like you added something to code. Can you post current code in Code Block? I think some code is missing, thus you can't control spacing between that.

#3. Add image with code or? Which code did you try?

tinypops · November 12, 2021

#1 Maybe its just being buggy on my end? As long as it's working for others, I'm good!

#2. I was able to tinker around with it and the leading is working for me now, however, the image that I have set to display at the end of the countdown (which was working in the beginning) now no longer works, the entire section block disappears when the countdown is reached. Can you let me know what I'm doing wrong? Here is the code:

<div class="container">
  <h1 id="headline">CELEBRATING 25 YEARS</h1>
  <body id="body">Join First Peoples Fund and The Kennedy Center in honoring native culture sovereignty, heritage, and vitality.<body>
    <br>
    <br>
  </body>
  </body>
  <div>
  <div>
  </div>
  <div id="countdown">
    <ul>
      <li><span id="days"></span>days</li>
      <li><span id="hours"></span>Hours</li>
      <li><span id="minutes"></span>Minutes</li>
      <li><span id="seconds"></span>Seconds</li>
    </ul>
  </div>
  <div class="message">
    <div id="content">
    <span style="padding-right:3px; padding-top: 3px;">
    <img class="manImg" src="https://static1.squarespace.com/static/6165ed53b4dd8e5edd18bd8b/t/618d76478abf5f110597eb0b/1636660807800/countdown_deliver.jpg"></img>
    </span>
    </div>
  </div>
</div>
<style>
/* general styling */
* {
  align-items: center;
  box-sizing: border-box 1925 x 500;
  margin: 10;
  padding: 0;
}

.sqs-slide-wrapper[data-slide-type="lock-screen"] .sqs-slide {
  height: 100%;
  margin: 0;
}

.sqs-slide-wrapper[data-slide-type="lock-screen"] .sqs-slide {
  align-items: center;
  background-color: #ffffff;
  display: flex;
  font-family: -apple-system, 
    BlinkMacSystemFont, 
    "Segoe UI", 
    "Ariel"
    "Helvetica Neue", 
    sans-serif;
}

.container {
  color: #00000;
  margin: auto;
  text-align: center;
}

h1 {
  font-weight: regular;
  letter-spacing: .5rem; 
  text-transform: uppercase;
}

li {
  display: inline-block;
  font-size: 1em;
  list-style-type: none;
  padding: 2em;
  text-transform: uppercase;
}

li span {
  display: block;
  font-size: 8rem;
  margin-bottom: 4rem;
}

.message {
  font-size: 4rem;
}

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

.emoji {
  padding: 0.25rem;
}

@media all and (max-width: 768px) {
  h1 {
    font-size: 1.5rem;
  }
  
  li {
    font-size: 1.125rem;
    padding: .75rem;
  }
  
  li span {
    font-size: 3.375rem;
  }
}
</style>
<script>
(function () {
  const second = 1000,
        minute = second * 60,
        hour = minute * 60,
        day = hour * 24;

  let birthday = "feb 3, 2022 24:00:00",
      countDown = new Date(birthday).getTime(),
      x = setInterval(function() {    

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

        document.getElementById("days").innerText = Math.floor(distance / (day)),
          document.getElementById("hours").innerText = Math.floor((distance % (day)) / (hour)),
          document.getElementById("minutes").innerText = Math.floor((distance % (hour)) / (minute)),
          document.getElementById("seconds").innerText = 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 = "JOIN THE CELEBRATION";
          countdown.style.display = "none";
          content.style.display = "block";

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

#3. I've decided white is a lovely background color and i have bigger issue to worry about. 🤣

AdeAngles · November 15, 2023

Hi, I am launching my website and I'd like to create a launch page with a newsletter block and countdown timer.

When the timer is done, I'd like it to make my website public.

How can this be achieved?

AdeAngles · November 15, 2023

By using this method, is there a way to make the website go from private to public when the countdown is done?

In my case, I've completed my website and would like to have a cover page which includes the countdown+newsletter block and launches the website once the countdown is done.

tuanphan · November 30, 2023

On 11/16/2023 at 3:08 AM, AdeAngles said:

By using this method, is there a way to make the website go from private to public when the countdown is done?

In my case, I've completed my website and would like to have a cover page which includes the countdown+newsletter block and launches the website once the countdown is done.

You can consider create a new page, add countdown here, then when time is done, redirect to main homepage. What do you think?

marinkaswift · February 29

This is what my client wants! I have a super basic countdown but need it to automatically redirect to home page when the countdown hits zero. How do I do that?

Here's the code I have for the countdown:

<div class="js-countdown-timer" data-date="2024-03-07T13:00:00.000Z"></div>

tuanphan · March 2

On 2/29/2024 at 7:34 AM, marinkaswift said:

This is what my client wants! I have a super basic countdown but need it to automatically redirect to home page when the countdown hits zero. How do I do that?

Here's the code I have for the countdown:

<div class="js-countdown-timer" data-date="2024-03-07T13:00:00.000Z"></div>

I think you sent missing code, if your site has this code only, it won't show Countdown. (You can test it by put this line on a new site)

You can check all Code Injection, Code Block...and send all code

Julek · July 17

hi! is there a way to include changing time zones?

dkcavaliere · September 13

It took me quite a while to figure this out. I wanted to share here in case anyone else couldn't get the code to work. Also, if anyone can help me freeze the countdown at 0 0 0 0 when the date & time are reached, I would greatly appreciate it!

Be aware that I adjusted the naming, spacing, emojis and made the countdown timer continue to show even after the date & time are reached. To remove this, you just need to adjust the following:

instead of

countdown.style.display = "block";

use

countdown.style.display = "none";

This works in 2 parts:

1. You add a Markdown code block inside your page with the following code:

(taken from CubeSquared)

<div class="container">
  <h1 id="headline">Countdown to our Wedding</h1>
  <div id="countdown">
    <ul>
      <li><span id="days"></span>days</li>
      <li><span id="hours"></span>Hours</li>
      <li><span id="minutes"></span>Minutes</li>
      <li><span id="seconds"></span>Seconds</li>
    </ul>
  </div>
  <div class="message">
    <div id="content">
      <span class="emoji">🎊</span>
      <span class="emoji">💕</span>
      <span class="emoji">🥂</span>
    </div>
  </div>
</div>

<script>
(function () {
  const second = 1000,
        minute = second * 60,
        hour = minute * 60,
        day = hour * 24;

  let birthday = "Sep 10, 2025 14:00:00",
      countDown = new Date(birthday).getTime(),
      x = setInterval(function() {    

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

        document.getElementById("days").innerText = Math.floor(distance / (day)),
          document.getElementById("hours").innerText = Math.floor((distance % (day)) / (hour)),
          document.getElementById("minutes").innerText = Math.floor((distance % (hour)) / (minute)),
          document.getElementById("seconds").innerText = 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 = "It's our wedding day!";
          countdown.style.display = "block";
          content.style.display = "block";

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

2. You add the styling code to the Custom CSS area under website tools (also from CubeSquared):

/* countdown styling*/
#block-235dba99820ac497257a {
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.sqs-slide-wrapper[data-slide-type="lock-screen"] .sqs-slide {
  height: 100%;
  margin: 0;
}

.sqs-slide-wrapper[data-slide-type="lock-screen"] .sqs-slide {
  align-items: center;
  display: flex;
  font-family: -apple-system, 
    BlinkMacSystemFont, 
    "Segoe UI", 
    Roboto, 
    Oxygen-Sans, 
    Ubuntu, 
    Cantarell, 
    "Helvetica Neue", 
    sans-serif;
}

.container {
  color: #333;
  margin: 0 auto;
  text-align: center;
}

h1 {
  font-weight: normal;
  letter-spacing: .125rem;
  text-transform: uppercase;
  margin-bottom: 3rem;
}

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

li span {
  display: block;
  font-size: 4.5rem;
  margin-bottom: 2.5rem;
}

.message {
  font-size: 4rem;
  margin-top: 1.5rem;
}

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

.emoji {
  padding: 0 .25rem;
}

@media all and (max-width: 768px) {
  h1 {
    font-size: 1.5rem;
  }
  
  li {
    font-size: 1.125rem;
    padding: .75rem;
  }
  
  li span {
    font-size: 3.375rem;
  }
}
}

Edited September 16 by dkcavaliere

Countdown Timer on Lock Screen OR Cover Page

Recommended Posts

jasminesarian

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

CubeSquared

Posted Images

CubeSquared

lepanipwoblem

tuanphan

lepanipwoblem

tinypops

tuanphan

tinypops

AdeAngles

AdeAngles

tuanphan

marinkaswift

tuanphan

Julek

dkcavaliere

Create an account or sign in to comment

News

CubeSquared

Circle Benefits

Events

Circle Day

Resources

Product Updates

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources