espice.github.io/index.html at master · espice/espice.github.io · GitHub

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
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE HTML>
<HTML>
    <HEAD>
        <META name="viewport" content="initial-scale=1">
        <TITLE>
            eSpice v12.0
        </TITLE>
        <LINK rel="icon" href="images/favicon.ico" type="image/x-icon" />
        <!-- Embedding Google Fonts -->
        <LINK href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400,300' rel='stylesheet' type='text/css' />
        <!-- Embedding stylesheets -->
        <LINK rel="stylesheet" href="stylesheets/normalize.css" />
        <LINK rel="stylesheet" href="stylesheets/style.css" />
        <LINK rel="stylesheet" href="stylesheets/override.css" />
        <LINK rel="stylesheet" href="stylesheets/animate.css" />
        <!-- Embedding scripts -->
        <SCRIPT src="scripts/wow.min.js"></SCRIPT>
        <SCRIPT src="scripts/header.js"></SCRIPT>
        <SCRIPT type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js"></SCRIPT>
        <SCRIPT type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment.min.js"></SCRIPT>
        <!-- <SCRIPT src="scripts/jquery-2.1.0.min.js"></SCRIPT> -->
    </HEAD>
    <BODY>
        <DIV class="container">
            <DIV class="row">
                <DIV class="column full">
                    <IMG src="images/logo.png" class="wow fadeInDown banner"/>
                </DIV>
            </DIV>
            <DIV class="row">
                <DIV class="column half right">
                    <BUTTON class="ghost push wow fadeInUp" onclick="window.location.href = 'results.html';">
                    Results
                    </BUTTON>
                </DIV>
                <DIV class="column half left">
                    <BUTTON class="ghost push wow fadeInUp" href="#" onclick="window.location.href = 'details.html';">
                    Details
                    </BUTTON>
                </DIV>
            </DIV>
            <DIV class="row">
                <DIV class="column full">
                    <DIV id="countdown" class="wow fadeInUp"></DIV>
                    <CENTER>
                    <BUTTON id="changeBase" class="wow fadeInDown">Human Readable</BUTTON>
                    </CENTER>
                </DIV>
            </DIV>


        </DIV>
        <SCRIPT>
            new WOW().init();
            $(document).ready(function() {
                // countdown starts in binary
                var binary = true;
                var countdownInterval;
                var countdownContent;
                // current time
                var currentTime = moment();
                // event start time
                var eventTime = moment('2014-08-22 08:00'); //2014-08-22 08:00

                // check if event has started
                if (eventTime.unix() > currentTime.unix()) {

                    // update countdown at start
                    updateCountdown();

                    setTimeout(function() {
                        // update time before creating interval
                        currentTime = moment();

                        updateCountdown();
                        countdownInterval = setInterval(function() {
                            currentTime = moment();

                            updateCountdown();
                        }, 1000)
                    }, 1000 - currentTime.milliseconds());

                    // button onclick change base and update countdown
                    $('#changeBase').click(function() {
                        if (binary) {
                            $(this).text('Machine Readable');
                            binary = false;
                        } else {
                            $(this).text('Human Readable');
                            binary = true;
                        }
                        updateCountdown();
                    });
                } else {
                    $('#changeBase').remove();
                    $('#countdown').text('It\'s on');
                }

                function updateCountdown() {
                    if (binary) {
                        countdownContent = (eventTime.diff(currentTime, 'days') % 365).toString(2) + ' days ' + (eventTime.diff(currentTime, 'hours') % 24).toString(2) + ' hours ' + (eventTime.diff(currentTime, 'minutes') % 60).toString(2) + ' minutes ' + (eventTime.diff(currentTime, 'seconds') % 60).toString(2) + ' seconds';
                    } else {
                        countdownContent = eventTime.diff(currentTime, 'days') % 365 + ' days ' + eventTime.diff(currentTime, 'hours') % 24 + ' hours ' + eventTime.diff(currentTime, 'minutes') % 60 + ' minutes ' + eventTime.diff(currentTime, 'seconds') % 60 + ' seconds';
                    }

                    $('#countdown').text(countdownContent);

                    if(eventTime.unix() < currentTime.unix()) {
                        clearInterval(countdownInterval);
                        $('#changeBase').remove();
                        $('#countdown').text('It\'s on');
                    }
                }
            });
        </SCRIPT>
    </BODY>
</HTML>