Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Countdown Timer on Lock Screen OR Cover Page


jasminesarian

Question

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!

Link to comment

4 answers to this question

Recommended Posts

  • 0

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)

Link to comment
  • 0

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

Link to comment
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...