It's pretty ugly, but this is what I came up with to create a countdown timer on the maintenance page. I used the custom HTML Block module to create the html for the page (the idea is when I launch I can change the content of this block module and it returns to a simple maintenance page).
The modification requires two files in the theme directory to be altered (in my case the Niara theme):
/themes/niara/maintenance.tpl
which should look like the following when modified:
<!DOCTYPE html>
<html lang="{$language_code|escape:'html':'UTF-8'}">
<head>
<meta charset="utf-8">
<title>{$meta_title|escape:'html':'UTF-8'}</title>
{if isset($meta_description)}
<meta name="description" content="{$meta_description|escape:'html':'UTF-8'}">
{/if}
{if isset($meta_keywords)}
<meta name="keywords" content="{$meta_keywords|escape:'html':'UTF-8'}">
{/if}
<meta name="robots" content="{if isset($nobots)}no{/if}index,follow">
<link rel="shortcut icon" href="{$favicon_url}">
<link href="{$css_dir}global.css" rel="stylesheet">
<link href="{$css_dir}maintenance.css" rel="stylesheet">
{if $isRtl}
<link href="{$css_dir}rtl.css" rel="stylesheet">
{/if}
</head>
<body>
<div id="maintenance" class="text-center">
<img class="center-block img-responsive" src="{$logo_url}" alt="" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}"{/if}>
<h1>{l s='Our Site is Currently Under Construction...'}</h1>
{$HOOK_MAINTENANCE}
</div>
{* hook h='displayMaintenance' *}
<script>
// Set the date we're counting down to
var countDownDate = new Date("November 15, 2022 12:00:00").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with the appropriate id
document.getElementById("days").innerHTML = days;
document.getElementById("hrs").innerHTML = hours;
document.getElementById("mins").innerHTML = minutes;
document.getElementById("secs").innerHTML = seconds;
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("countdown").innerHTML = "OOPS! We missed our launch date, please check back again soon!";
}
}, 1000);
</script>
</body>
</html>
Then go to the /themes/niara/css/maintenance.css page and modify to look like the following:
#maintenance {
padding: 30px 15px;
font-size: 1.3em;
}
#maintenance h1 {
font-size: 1.5em;
}
#countdown,.days,.hrs,.mins,.secs {
text-align: center;
font-size: 60px;
margin-top: 0px;margin-bottom:0px;
}
table{border-collapse: separate;}
#maint-timer-text {font-size:30px;}
#maint-timer-text td{text-align:center;padding:0.2em;margin-top: 0px;margin-bottom:0px;}
#timer-text.ttop{font-size:2em;margin-top:0.5em;}
#timer-text.tbottom{font-size:1.2em;margin-top:0.5em;}
div.ttext{width:500px;max-width:500px;text-align:center;}
.ttext,#countdown {
margin-left: auto;
margin-right: auto;
}
.tcell{background-color: #efefef;
background: -webkit-gradient(linear, left top, left bottom, from(#efefef), to(#fff));
background: -moz-linear-gradient(top, #efefef, #fff);
}
.bcell{background-color: #efefef;
background: -webkit-gradient(linear, left top, left bottom, from(#fff) to(#efefef));
background: -moz-linear-gradient(top, #fff, #efefef);
}
.top {
border-top: thin solid;
border-color: black;
-webkit-border-radius: 7px 7px 0 0;
border-radius: 7px 7px 0 0;
-moz-border-radius: 7px 7px 0 0;
}
.bottom {
border-bottom: thin solid;
border-color: black;
-webkit-border-radius: 0 0 7px 7px;
border-radius: 0 0 7px 7px;
-moz-border-radius: 0 0 7px 7px;
}
.left {
border-left: thin solid;
border-color: black;
}
.right {
border-right: thin solid;
border-color: black;
}
and finally the code for the custom HTML Block (hooked to the maintenance page) from the Back Office:
<div class="ttext">
<p id="timer-text" class="ttop">We Expect the Site to Launch</p>
</div>
<table id="countdown" width="500" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="top left right tcell"><span id="days">0</span></td>
<td></td>
<td class="top left right tcell"><span id="hrs">0</span></td>
<td></td>
<td class="top left right tcell"><span id="mins">0</span></td>
<td></td>
<td class="top left right tcell"><span id="secs">0</span></td>
</tr>
<tr id="maint-timer-text">
<td class="bottom left right bcell">DAYS</td>
<td></td>
<td class="bottom left right bcell">HRS</td>
<td></td>
<td class="bottom left right bcell">MINS</td>
<td></td>
<td class="bottom left right bcell">SECS</td>
</tr>
</tbody>
</table>
<div class="ttext">
<p id="timer-text" class="tbottom">- - From Today - -</p>
</div>
It's not as "polished" as I would normally do, but it displays a countdown suitable for my needs at the moment... Feel free to modify, but please include an attribution to obewanz at yahoo (you know the rest) and let me know what you came up with - if substantially different.
