Added countdown on home page
This commit is contained in:
CommanderStrax
parent
78617dab06
commit
878fe1cc1b
1 changed files with 275 additions and 4 deletions
|
|
@ -1,6 +1,277 @@
|
||||||
<center class="fade_in">
|
<center class="fade_in">
|
||||||
<h1>EasyCTF 3</h1>
|
<br>
|
||||||
<h3 style="color: #44783f;"> Coming 2016 </h3>
|
<h1>EasyCTF 3</h1>
|
||||||
<br>
|
<style>
|
||||||
<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>
|
*,
|
||||||
|
*: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>
|
</center>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue