easyctf-2017/web/pages/home.html

<center class="fade_in">
    <br>
    <h1>EasyCTF 3</h1>
    <style>
        *,
        *:after,
        *:before {
            box-sizing: border-box;
        }

        html,
        body,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        table,
        tr,
        td,
        p,
        a,
        hr,
        div,
        span,
        input,
        button,
        textarea {
            margin: 0;
            padding: 0;
            border: 0;
            font-weight: 100;
            text-decoration: none;
            background: transparent;
        }

        html {
            position: relative;
            min-height: 100%;
        }

        body {
            width: 100%;
            height: 100%;
            background-color: #F0F0F0;
        }

        [hidden] {
            display: none;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
        }

        .finish {
            -webkit-animation: done 1s infinite;
            animation: done 1s infinite;
        }

        .wrapper {
            width: 100%;
            max-width: 1000px;
            margin: 100px auto;
        }

        .cell {
            width: 100%;
        }

        .count-down {
            color: #6f6f6f;
            font-size: 10em;
            font-weight: 100;
            text-align: center;
            -webkit-animation: flash 1s infinite;
            animation: flash 1s infinite;
        }

        .friday-count {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -webkit-flex-direction: row;
            -ms-flex-direction: row;
            flex-direction: row;
            -webkit-box-pack: justify;
            -webkit-justify-content: space-between;
            -ms-flex-pack: justify;
            justify-content: space-between;
            -webkit-box-align: stretch;
            -webkit-align-items: stretch;
            -ms-flex-align: stretch;
            align-items: stretch;
            height: 0;
        }

        .friday-count .work-hour {
            -webkit-box-flex: 1;
            -webkit-flex: 1 1;
            -ms-flex: 1 1;
            flex: 1 1;
            background: #111;
            margin: 0 5px;
            height: 100%;
        }

        .friday-count .work-hour .progress {
            background: #f44;
            width: 100%;
            height: 0;
        }

        @-webkit-keyframes flash {
            0% {
                opacity: 0.5;
            }
            5% {
                opacity: 0.5;
            }
            10% {
                opacity: 1;
            }
            95% {
                opacity: 1;
            }
            100% {
                opacity: 0.5;
            }
        }

        @keyframes flash {
            0% {
                opacity: 0.5;
            }
            5% {
                opacity: 0.5;
            }
            10% {
                opacity: 1;
            }
            95% {
                opacity: 1;
            }
            100% {
                opacity: 0.5;
            }
        }

        @-webkit-keyframes done {
            0% {
                background: #333;
            }
            50% {
                background: #f44;
            }
            100% {
                background: #333;
            }
        }

        @keyframes done {
            0% {
                background: #333;
            }
            50% {
                background: #f44;
            }
            100% {
                background: #333;
            }
        }
    </style>
    <script type="text/javascript">
        countDown(".count-down", ".friday-count", 11, 3, 16);

        //wd:weekday		s:starthour		e:endhour
        function countDown(count, tally, wd, s, e) {
            var currentDate = new Date().getTime();
            var impendingDate = setDayHour(wd, s).getTime();
            var endOfDay = setDayHour(wd, e).getTime();

            window.requestAnimationFrame(countInterval);

            function countInterval() {
                var countTo;
                var d = new Date();

                if (d.getDay() == wd && d.getHours() >= s && d.getHours() <= e + 5) {
                    countTo = endOfDay - d.getTime();

                    //initiate tallies
                    if ($(tally).find(".work-hour").length < Math.abs(s - e)) {
                        $(count).animate({
                            "font-size": "5em"
                        }, 400);
                        $(tally).animate({
                            "height": "300px"
                        }, 400);

                        for (i = 0; i < Math.abs(s - e); i++) {
                            $(tally).append("<div class='work-hour'><div class='progress'></div></div>");
                            if (i < Math.abs(s - d.getHours())) {
                                $(tally + " .progress:eq(" + i + ")").css("height", "100%");
                            }
                        }
                    }

                    if (d.getHours() >= e) {
                        $("body").addClass("finish");
                        return false;
                    }

                    for (i = 0; i < Math.abs(s - e); i++) {
                        if (i < Math.abs(s - d.getHours())) {
                            $(tally + " .progress:eq(" + i + ")").css("height", "100%");
                        }
                    }
                    $(tally + " .progress:eq(" + Math.abs(s - d.getHours()) + ")").css("height", ((d.getMinutes() * 1.67) + (d.getSeconds() * .0167) + 0.4847 + "%"));
                } else {
                    countTo = impendingDate - d.getTime();
                }

                var milliseconds = countTo;
                var days = parseInt(milliseconds / 86400000);
                milliseconds = milliseconds % 86400000;
                var hours = zeroPad(parseInt(milliseconds / 3600000), 2);
                milliseconds = milliseconds % 3600000;
                var minutes = zeroPad(parseInt(milliseconds / 60000), 2);
                milliseconds = milliseconds % 60000;
                var seconds = zeroPad(parseInt(milliseconds / 1000), 2);
                milliseconds = milliseconds % 1000;
                milliseconds = zeroPad(parseInt(milliseconds / 10), 2);

                var display = days + ":" + hours + ":" + minutes + ":" + seconds + ":" + milliseconds;

                $(count).html(display);

                window.requestAnimationFrame(countInterval)
            };


            function setDayHour(day, hour) {
                var d = new Date();

                for (var i = 0; i <= 6; i++) {
                    if (d.getDay() == day) {
                        d.setHours(hour);
                        d.setMinutes(00);
                        break;
                    }
                    d.setDate(d.getDate() + 1);
                };

                return d;
            }

            function zeroPad(number, width) {
                width -= number.toString().length;
                if (width > 0) {
                    return new Array(width + (/\./.test(number) ? 2 : 1)).join('0') + number;
                }
                return number + "";
            }
        }
    </script>
    <br>
    <div class="wrapper">
        <div class="cell count-down">00:00:00:00</div>
        <div class="cell friday-count"></div>
    </div>
</center>