From 878fe1cc1b70aab4d0750774c284cafabc9acc1f Mon Sep 17 00:00:00 2001
From: CommanderStrax <tjgerot@cox.net>
Date: Wed, 30 Dec 2015 23:09:12 -0600
Subject: [PATCH] Added countdown on home page

---
 web/pages/home.html | 279 +++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 275 insertions(+), 4 deletions(-)

diff --git a/web/pages/home.html b/web/pages/home.html
index dc203c7..9ff70c4 100644
--- a/web/pages/home.html
+++ b/web/pages/home.html
@@ -1,6 +1,277 @@
 <center class="fade_in">
-  <h1>EasyCTF 3</h1>
-  <h3 style="color: #44783f;"> Coming 2016 </h3>
-  <br>
-  <a class="twitter-timeline" href="https://twitter.com/easyctf" data-widget-id="680792667001884672">Tweets by @easyctf</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
+    <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>