physiclock/index.html at master · tunabrain/physiclock · 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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Physiclock | Benedikt Bitterli's Portfolio</title>
    <link rel="stylesheet" href="clock.css">
    <script type="text/javascript" src="clock.js"></script>
</head>

<script type="text/javascript">
    function clockStart() {
        var clock = new Clock(document.getElementById("clock"));

        document.getElementById("speedup").addEventListener('click', function() {
            clock.setSpeed(Math.min(clock.speed*2, 16));
        });
        document.getElementById("1159").addEventListener('click', function() {
            var date = new Date();
            date.setHours(11);
            date.setMinutes(59);
            date.setSeconds(55);
            date.setMilliseconds(0);
            clock.setTime(date);
            clock.reset();
        });

        var draw = function() {
            clock.update();
            clock.draw();
            window.requestAnimationFrame(draw);
        }

        window.requestAnimationFrame(draw);
    }
</script>

<body onload="clockStart();">
    <div style="position: absolute; left: 0; right: 0; top: 0; bottom: 40px;">
        <canvas id="clock" style="width: 100%; height: 100%;" width="400" height="400"></canvas>
    </div>
    <footer id="footer">
        <span class="clickable" id="speedup">Faster</span>
        <span class="clickable" id="1159">11:59</span>
        <a target="_blank" rel="noopener" href="https://benedikt-bitterli.me">Contact</a>
        <a target="_blank" rel="noopener" href="https://github.com/tunabrain/physiclock">Github</a>
    </footer>
</body>
</html>