Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix the sad 0's on the splash after actf ends #2

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 17 additions & 10 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,13 @@
<body class="pa3 pt1">
<h1 class="f1 white center mw7" style="margin-bottom: 0.5rem;">ångstromCTF</h1>
<p class="f4 white center mw7">A cybersecurity competition for high schoolers.</p>
<div class="ba pb4 pt3 center mw7 white mv4">
<div class="tc mv4">
<h3 class="f2 mb3">March 13 to 18</h3>
<div class="f3">8 PM EDT</div>
<div class="ba pb4 pt3 center mw7 white mt4">
<div class="tc">
<h3 class="f2 mb3">We'll be back!</h3>
<div class="f3 fw2">Spring 2021</div>
</div>
<div class="center tc"><a class="f4 black bg-white no-underline dim br2 pv2 ph3" href="https://2020.angstromctf.com">Register now!</a></div>
<div id="timer" class="flex flex-wrap justify-center ph4 mv4">

<div id="timer" class="flex flex-wrap justify-center ph4 mt4 mb1">
<div class="flex">
<svg class="pa1">
<circle class="background" r="50" cx="50%" cy="50%"></circle>
Expand Down Expand Up @@ -47,10 +47,17 @@ <h3 class="f2 mb3">March 13 to 18</h3>
</svg>
</div>
</div>
<p class="f4 center tc pb1">Past years:</p>
<div class="center tc pb4"><a class="f4 white b--solid bw1 no-underline dim br2 pv2 ph3" href="https://2019.angstromctf.com">2019</a>
<a class="f4 white b--solid bw1 no-underline dim br2 pv2 ph3 ml1" href="https://2018.angstromctf.com">2018</a>
<a class="f4 white b--solid bw1 no-underline dim br2 pv2 ph3 ml1" href="https://2017.angstromctf.com">2017</a></div>
<span id="push"></span>
<p class="f4 center tc pb1 mt3">Past years:</p>
<div class="center tc pb4">
<a class="f4 white b--solid bw1 no-underline dim br2 pv2 ph3" href="https://2020.angstromctf.com">2020</a>

<a class="f4 white b--solid bw1 no-underline dim br2 pv2 ph3 ml1" href="https://2019.angstromctf.com">2019</a>

<a class="f4 white b--solid bw1 no-underline dim br2 pv2 ph3 ml1" href="https://2018.angstromctf.com">2018</a>

<a class="f4 white b--solid bw1 no-underline dim br2 pv2 ph3 ml1" href="https://2017.angstromctf.com">2017</a>
</div>
</div>
<div class="ba ph4 center mw7 pt1 pb4 mv4 white">
<h3 class="f2">Sponsors</h3>
Expand Down
38 changes: 36 additions & 2 deletions timer.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,43 @@ function setValue (name, value) {
node.textContent = value
}

function setClass (name, c){
var node = document.getElementById(name)
node.classList = c
}

function setProgress (name, ratio) {
node = document.getElementById('progress-'+name)
node.setAttribute('stroke-dashoffset', (1 - ratio) * 6.28 * 50)
}


function step (timestamp) {
var present = new Date()
var competition = Date.parse("2020-03-18T20:00:00.000-04:00")
var delta = (competition - present) / 1000

var delta;

var competitionStart = Date.parse("2020-03-13T20:00:00.000-04:00"),
competitionEnd = Date.parse("2020-03-18T20:00:00.000-04:00")


if (competitionEnd - present < 0){
// actf ended
document.getElementById("timer").remove()

setClass("push", "dib mb3")

return

} else if (competitionStart - present < 0){
// actf is going on
delta = (competitionEnd - present) / 1000

} else {
// actf has not started
delta = (competitionStart - present) / 1000
}

delta = delta > 0 ? delta : 0
setValue('day', Math.floor(delta / 86400))
setProgress('day', delta / 31536000)
Expand All @@ -24,7 +52,13 @@ function step (timestamp) {
delta = delta % 60
setValue('second', Math.floor(delta))
setProgress('second', delta / 60)

window.requestAnimationFrame(step)
}

window.requestAnimationFrame(step)