Added icons (pls fix right side)

This commit is contained in:
CommanderStrax 2016-01-01 14:41:21 -06:00
parent 3649834b40
commit 47b97255f8
15 changed files with 14 additions and 282 deletions

View file

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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 56 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.6 KiB

After

Width:  |  Height:  |  Size: 516 B

BIN
web/images/info.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 466 B

BIN
web/images/login.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 293 B

BIN
web/images/problems.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 592 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 458 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 54 KiB

BIN
web/images/register.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 461 B

BIN
web/images/rules.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 349 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.1 KiB

After

Width:  |  Height:  |  Size: 430 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4 KiB

After

Width:  |  Height:  |  Size: 335 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3 KiB

After

Width:  |  Height:  |  Size: 466 B

View file

@ -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="/rules">Rules</a></li>
<li><a href="/updates">Updates</a></li>
<li><a href="/chat">Chat</a></li>
<li><a href="/scoreboard">Scoreboard</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"><img src="images/rules.png" id="icn" alt="">&nbsp;&nbsp;Rules</a></li>
<li><a href="/updates"><img src="images/updates.png" id="icn" alt="">&nbsp;&nbsp;Updates</a></li>
<li><a href="/chat"><img src="images/chat.png" id="icn" alt="">&nbsp;&nbsp;Chat</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="/shell">Shell</a></li>
<li><a href="/problems">Problems</a></li>
<li><a href="/login">Login</a></li>
<li><a href="/register">Register</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"><img src="images/terminal.png" id="icn" alt="shell icon">&nbsp;&nbsp;Shell</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"><img src="images/login.png" id="icn" alt="login icon">&nbsp;&nbsp;Login</a></li>
<li><a href="/register"><img src="images/register.png" id="icn" alt="register icon">&nbsp;&nbsp;Register</a></li>
</ul>
</div>
</div>

View file

@ -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>