Added icons (pls fix right side)

web/css/style.css

@@ -9,6 +9,10 @@ h1 {
     /* Firefox 18- */
     color: #999999;
 }
+img#icn {
+    position:relative;
+    bottom:1px;
+}
 ::-moz-placeholder {
     /* Firefox 19+ */
     color: #999999;

web/index.html

@@ -21,18 +21,18 @@
 
 		    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 		      <ul class="nav navbar-nav navbar-fixed">
-		        <li><a href="/about">About</a></li>
+		        <li><a href="/about"><img src="images/info.png" id="icn" alt="information icon">&nbsp;&nbsp;About</a></li>
-						<li><a href="/rules">Rules</a></li>
+						<li><a href="/rules"><img src="images/rules.png" id="icn" alt="">&nbsp;&nbsp;Rules</a></li>
-						<li><a href="/updates">Updates</a></li>
+						<li><a href="/updates"><img src="images/updates.png" id="icn" alt="">&nbsp;&nbsp;Updates</a></li>
-						<li><a href="/chat">Chat</a></li>
+						<li><a href="/chat"><img src="images/chat.png" id="icn" alt="">&nbsp;&nbsp;Chat</a></li>
-						<li><a href="/scoreboard">Scoreboard</a></li>
+						<li><a href="/scoreboard"><img src="images/scoreboard.png" id="icn" alt="">&nbsp;&nbsp;Scoreboard</a></li>
 		      </ul>
 		      <ul class="nav navbar-nav navbar-right">
-						<li><a href="/programming">Programming</a></li>
+						<li><a href="/programming"><img src="images/programming.png" id="icn" alt="programming icon">&nbsp;&nbsp;Programming</a></li>
-						<li><a href="/shell">Shell</a></li>
+						<li><a href="/shell"><img src="images/terminal.png" id="icn" alt="shell icon">&nbsp;&nbsp;Shell</a></li>
-						<li><a href="/problems">Problems</a></li>
+						<li><a href="/problems"><img src="images/problems.png" id="icn" alt="problems icon">&nbsp;&nbsp;Problems</a></li>
-		        <li><a href="/login">Login</a></li>
+		        <li><a href="/login"><img src="images/login.png" id="icn" alt="login icon">&nbsp;&nbsp;Login</a></li>
-						<li><a href="/register">Register</a></li>
+						<li><a href="/register"><img src="images/register.png" id="icn" alt="register icon">&nbsp;&nbsp;Register</a></li>
 		      </ul>
 		    </div>
 		  </div>

web/pages/home.html

@@ -1,277 +1,5 @@
 <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>