forked from cchan/lexhack-live
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
104 lines (95 loc) · 4.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<meta name='description' content='LexHack is a 12 hour hackathon for high schoolers of all programming abilities. [Live event website]'>
<meta name='author' content='Clive Chan (http://clive.io)'>
<title>LexHack</title>
<link rel='icon' type='image/ico' href='favicon.ico'>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script>
document.body.className="hasJS";
</script>
<div id="wrapper">
<h1>
<a href="http://lexhack.org" style="text-decoration:none;color:black;">
<span style='color:#fff;'>< <span class="first-letter">L</span>ex</span><span style='color:#ffc747'><span class="first-letter">H</span>ack ></span>
</a>
</h1>
<h2 id="live">
<a href="http://live.lexhack.org" style="text-decoration:none;color:black;">
{<span>live</span>}
</a>
</h2>
<table id="clock" class="slider">
<tr>
<td><span class="h">00</span><small>h</small></td>
<td><span class="m">00</span><small>m</small></td>
<td><span class="s">00</span><small>s</small></td>
</tr>
</table>
<table id="clock2" class="slider" style="font-size:12em;">
<tr>
<td><span class="h">00</span><small>h</small></td>
<td><span class="m">00</span><small>m</small></td>
<td><span class="s">00</span><small>s</small></td>
</tr>
</table>
<div id="caption" class="slider">
<span id="cap-text"><span style="display:inline-block;">LexHack is over!</span> <span style="display:inline-block;">Check out <a href='http://lexhack-2k15.devpost.com/submissions'>DevPost</a> for all the awesome submissions.</span></span>
<!-- <span style="color:#444">opening ceremony</span> <span style="color:#eee"><span>Sept. 19, 2015, 9AM</span> <span>@ LHS Auditorium</span></span>
--> </div>
<style>.heightless{font-size:4em;height:0;overflow-y:visible;margin-top:1.5em;margin-bottom:-1.5em;}</style>
<!-- <div class="heightless"><span id="spots150" class="slider">150 spots.</span> <span id="dontwait" class="slider">Don't wait.</span></div>
-->
<a href="http://start.lexhack.org" id="button1" class="">Start Guide</a>
<a href="http://live.lexhack.org/feed.html" id="button2" class="">Announcements/Hotline</a>
<a href="http://lexhack.org" id="button3" class="">Main Website</a>
</div>
<canvas id="testcanvas" style="display:none;"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="delaunay.js"></script>
<script src="sequencer.js"></script>
<script>
$(function(){
//TIMER
function updateTime(){
var result = "";
var totalSec = (Date.parse("Sep 19 2015 9:15:00 PM") - Date.now())/1000;
if(totalSec < 0) {totalSec = 0;$("#cap-text").html("LexHack is over! Check out <a href='http://lexhack-2k15.devpost.com/submissions'>DevPost</a> for all the awesome submissions.");}
else if(totalSec > 12*60*60) {totalSec = 12*60*60;$("#cap-text").text("LexHack is about to begin!");}
else {$("#cap-text").text("LexHack has begun!");}
var days = parseInt( totalSec / 86400 );
var hours = parseInt( totalSec / 3600 ) % 24;
var minutes = parseInt( totalSec / 60 ) % 60;
var seconds = totalSec % 60;
var seconds = Math.floor(seconds);
$(".d").html(days < 10 ? "0" + days : days);
$(".h").html(hours < 10 ? "0" + hours : hours);
$(".m").html(minutes < 10 ? "0" + minutes : minutes);
$(".s").html(seconds < 10 ? "0" + seconds : seconds);
}
//updateTime();
//setInterval(updateTime,1000);
sequencer.slidein("#clock,#clock2",500,function(){ //Basically when all the stuff has loaded. Pretty arbitrary. Looks nice fading in with clock, though.
$("#button1,#button2,#button3").css({top:"-20px"}); //so the window size isn't messed up on initial measurement
//First draw when the canvas starts fading in
$("#delaunay").css({opacity:0.6});
delaunay.redraw();
});
sequencer.slidein("#caption",500);
sequencer.slidein("#spots150",500);
sequencer.slidein("#dontwait",1000);
sequencer.fadeout("#spots150,#dontwait",1000);
sequencer.slidein("#button1",200);
sequencer.slidein("#button2",130);
sequencer.slidein("#button3",130,delaunay.start);//start after all the stuff has slid in
});
</script>
</body>
</html>