Cyber Monday Landing Page Clock

author(s): Nancy Dillon

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>


<div class="landingpage">
    <div id="content">
        <div id="cyber">
            <img src="https://www.highcharts.com/samples/graphics/cyber-monday/cyber.svg" alt="Cyber">
        </div>
        <div id="countdown">
            <div id="days" class="gauge"></div>
            <div id="hours" class="gauge"></div>
            <div id="minutes" class="gauge"></div>
            <div id="seconds" class="gauge"></div>
        </div>
        <div id="week">
            <img src="https://www.highcharts.com/samples/graphics/cyber-monday/week.svg" alt="Week">
            <div id="date">
                <span>Nov 27 -</span>
                <span>Dec 03</span>
            </div>
        </div>
        <div id="date-below">
            <span>Nov 27 -</span>
            <span>Dec 03</span>
        </div>

        <h1 id="header">Get ready for a <span>big deal</span> in:</h1>
        <a id="stop" href="#">stop animation</a>
    </div>
    <div id="container"></div>
</div>

<!--
<div id="countdown2">
<span id="days2">0</span> days
<span id="hours2">0</span> hours
<span id="minutes2">0</span> minutes
<span id="seconds2">0</span> seconds
</div> -->

CSS

/* ibm-plex-sans-100 - latin */
@font-face {
    font-display: swap;
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 100;
    src: url("https://www.highcharts.com/samples/graphics/cyber-monday/fonts/ibm-plex-sans-v19-latin-100.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ibm-plex-sans-200 - latin */
@font-face {
    font-display: swap;
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 200;
    src: url("https://www.highcharts.com/samples/graphics/cyber-monday/fonts/ibm-plex-sans-v19-latin-200.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ibm-plex-sans-300 - latin */
@font-face {
    font-display: swap;
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 300;
    src: url("https://www.highcharts.com/samples/graphics/cyber-monday/fonts/ibm-plex-sans-v19-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ibm-plex-sans-regular - latin */
@font-face {
    font-display: swap;
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 400;
    src: url("https://www.highcharts.com/samples/graphics/cyber-monday/fonts/ibm-plex-sans-v19-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ibm-plex-sans-500 - latin */
@font-face {
    font-display: swap;
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 500;
    src: url("https://www.highcharts.com/samples/graphics/cyber-monday/fonts/ibm-plex-sans-v19-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ibm-plex-sans-600 - latin */
@font-face {
    font-display: swap;
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 600;
    src: url("https://www.highcharts.com/samples/graphics/cyber-monday/fonts/ibm-plex-sans-v19-latin-600.woff2")...

JavaScript

// Set the date you're counting down to
let countDownDate = new Date('2023-11-27T07:00:00Z').getTime();

Math.easeOutQuint = function (pos) {
    return (Math.pow((pos - 1), 5) + 1);
};

const imgPath = 'https://www.highcharts.com/samples/graphics/cyber-monday/';

const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

/* shared gauge options */
const gaugeOptions = {

    chart: {
        type: 'solidgauge',
        backgroundColor: 'transparent',
        plotBackgroundColor: 'transparent',
        plotBackgroundImage: null,
        plotBorderWidth: 0,
        plotShadow: false
    },

    title: {
        text: ''
    },
    exporting: {
        enabled: false
    },
    credits: {
        enabled: false
    },
    plotOptions: {
        solidgauge: {
            animation: false,
            innerRadius: '96%',
            dataLabels: {
                useHTML: true,
                style: {
                    textOutline: 'none'
                }
            }
        }
    },
    tooltip: {
        enabled: false
    },
    pane: {
        startAngle: 0,
        endAngle: 360,
        center: ['50%', '50%'],
        size: '100%'
    },
    yAxis: {
        tickPosition: 'inside',
        tickColor: 'transparent',
        reversed: true,
        tickLength: 3,
        tickWidth: 8,
        minorTickInterval: null,
        labels: {
            enabled: false
        },
        lineWidth: 0
    },
    responsive: {
        rules: [
            {
                condition: {
                    maxWidth: 79
                },
                chartOptions: {
                    chart: {
                        margin: 5
                    },
                    caption: {
                        y: -10
                    },
                    pane: {
                        background: {
                            backgroundColor: '#000'
                        }
                    },
                    plotOptions: {
             ...