superwallclock/generated.html at main · jleuth/superwallclock · 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
<!DOCTYPE html>
<html>
<head>
    <link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
    <style>
        body {
            background-color: black;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            color: white;
            font-family: 'Nunito', sans-serif;
            text-align: center;
        }
        #clock {
            font-size: 50px;
        }
        #date {
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div id="clock"></div>
    <div id="date"></div>

    <script>
        function updateClock() {
            var now = new Date();
            var localTime = now.getTime();
            var localOffset = now.getTimezoneOffset() * 60000;
            var utc = localTime + localOffset;
            var offset = -6;   // Time offset for CST
            var cst = utc + (3600000 * offset);
            var cstDate = new Date(cst);

            var hours = cstDate.getHours();
            var minutes = cstDate.getMinutes();
            var seconds = cstDate.getSeconds();
            var ampm = hours >= 12 ? 'PM' : 'AM';
            hours = hours % 12;
            hours = hours ? hours : 12; // the hour '0' should be '12'
            minutes = minutes < 10 ? "0" + minutes : minutes;
            seconds = seconds < 10 ? "0" + seconds : seconds;
            document.getElementById('clock').innerHTML = hours + ":" + minutes + ":" + seconds + ' ' + ampm;

            var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
            var day = cstDate.getDate();
            var monthIndex = cstDate.getMonth();
            var year = cstDate.getFullYear();
            document.getElementById('date').innerHTML = monthNames[monthIndex] + ' ' + day + ', ' + year;
        }
        setInterval(updateClock, 1000);
        updateClock();
    </script>
</body>
</html>