Countdown thingy UI

by secretgspot

HTML

<script src="https://raw.github.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js"></script>
<header class="header"></header>
<div class="wrapper">
    <section class="time days">
        <h3>00</h3>
        <p>days</p>
    </section>
    <section class="time hours">
        <h3>00</h3>
        <p>hours</p>
    </section>
    <section class="time mins">
        <h3>00</h3>
        <p>mins</p>
    </section>
    <section class="time secs">
        <h3>00</h3>
        <p>secs</p>
    </section>
</div>
<p class="message">UNTIL THE N00BS ARIVE</p>

CSS

body {
    background: url(https://lh3.googleusercontent.com/-A06jOV3d5j8/TxMA6WMOJ6I/AAAAAAAAgc0/BH0zGvd57jg/s1600/IMG_2559.JPG) no-repeat;
    background-size: cover;
}

.header {
    background: #fff url(http://branding.neumont.edu/cmsimages/neumont_logo_lg.gif) no-repeat center;
    height: 80px;
    box-shadow: 0 1px 0 0 rgba(0,0,0,.1);
}

.wrapper {
    width: 560px;
    min-height: 100px;
    margin: 60px auto 0;
}

.time {
    padding-top: 7px;
    width: 80px;
    height: 80px;
    border-top-right-radius: 13px;
    float: left;
    margin: 0 30px;
    box-shadow: inset 0 0 35px 0 rgba(0,0,0,.9), 0 0 10px 0 rgba(0,0,0,.7), /* blurry shadows */
                inset 0 0 0 1px rgba(255,255,255,.4), 0 0 0 1px #232323; /* borders */
    background: linear-gradient(top, rgba(0,0,0,.7) 0%,rgba(0,0,0,.2) 100%), /* semi-transparent top to bottom */
                linear-gradient(-75deg, rgba(255,255,255,0) 0%,rgba(255,255,255,.5) 40%,rgba(255,255,255,0) 40%); /* light diagonal overlay */
}

.time h3 {
    text-align: center;
    font: bold 40px 'Helvetica', sans-serif;
    color: #eee;
    -webkit-background-clip: text;
    background-image: -webkit-linear-gradient(#fff 0%,#ddd 100%);
    -webkit-text-fill-color: transparent;
}

.time p {
    text-align: center;
    font: bold 20px 'Helvetica', sans-serif;
    color: #eee;
    -webkit-background-clip: text;
    background-image: -webkit-linear-gradient(top, #fff 0%,#ddd 100%);
    -webkit-text-fill-color: transparent;
}

.message {
    font: bold 30px Helvetica, sans-serif;
    color: #fff;
    text-align: center;
    text-shadow: 0 0 10px rgba(0,0,0,.4);
    padding-top: 30px;
}

JavaScript

function updateTime(element, time) {
    $(element).text(time);
}

function countdown(update) {

    var time = unixTime - Math.round(new Date().getTime() / 1000),
        days = Math.floor(time / 86400),
        hours = Math.floor((time - days * 86400) / 3600),
        mins = Math.floor((time - days * 86400 - hours * 3600) / 60),
        secs = time - days * 86400 - hours * 3600 - mins * 60;

    if ((hours == 23 && mins == 59 && secs == 59) || update) updateTime(elements.days, days);

    if ((mins == 59 && secs == 59) || update) updateTime(elements.hours, hours);

    if (secs == 59 || update) updateTime(elements.mins, mins);

    updateTime(elements.secs, secs);

    if (time > 0) window.setTimeout(countdown, 1000);

}

var elements = {
    days:  '.days h3',
    hours: '.hours h3',
    mins:  '.mins h3',
    secs:  '.secs h3'
},
    unixTime = 1349460000; // see epochconverter.com for easy time converter :)

if (new Date().getTime() / 1000 <= unixTime) {
    countdown(true);
} else {
    $('.message').text("THE N00BS ARE HERE");
}