clock/index.html at main · CrazyKitty357/clock · 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>clock</title>
<style>
html, body {
    overflow: hidden;
}
#clock {
  font-family: Arial, sans-serif;
  font-size: 18px;
  color: #333;
}
</style>
</head>
<body>
<div id="clock"></div>

<script>
function updateClock() {
    var now = new Date();
    var hours = now.getHours();
    var minutes = now.getMinutes();
    var seconds = now.getSeconds();

    var format12h = false;
    var swapAMPM = false;
    var showSeconds = true;
    var clockColor = '#333'; // Default color
    var clockFont = 'Arial, sans-serif'; // Default font
    var clockSize = '18px'; // Default font size

    // Check if query parameters are present in the URL
    var urlParams = new URLSearchParams(window.location.search);
    if (urlParams.has('t')) {
        if (urlParams.get('t') === '12h') {
            format12h = true;
        } else if (urlParams.get('t') === '12hSwap') {
            format12h = true;
            swapAMPM = true;
        }
    }
    if (urlParams.has('seconds') && urlParams.get('seconds') === 'false') {
        showSeconds = false;
    }
    if (urlParams.has('color')) {
        var colorValue = urlParams.get('color');
        clockColor = colorValue.startsWith('#') ? colorValue : '#' + colorValue;
    }
    if (urlParams.has('font')) {
        clockFont = urlParams.get('font');
        var link = document.createElement('link');
        link.href = 'https://fonts.googleapis.com/css?family=' + clockFont.replace(/ /g, '+');
        link.rel = 'stylesheet';
        document.head.appendChild(link);
    }
    if (urlParams.has('sysfont')) {
        clockFont = urlParams.get('sysfont');
    }
    if (urlParams.has('size')) {
        clockSize = urlParams.get('size');
    }

    var ampm = '';
    if (format12h) {
        ampm = hours >= 12 ? 'PM' : 'AM'; // Set ampm before converting hours
        hours = hours % 12 || 12; // Convert 24-hour format to 12-hour format
        if (swapAMPM) {
            ampm = ampm === 'AM' ? 'PM' : 'AM'; // Swap AM and PM
        }
    } else {
        hours = hours < 10 ? '0' + hours : hours;
    }
    minutes = minutes < 10 ? '0' + minutes : minutes;
    seconds = seconds < 10 ? '0' + seconds : seconds;

    var timeString = hours + ':' + minutes;
    if (showSeconds) {
        timeString += ':' + seconds;
    }
    if (format12h) {
        timeString += ' ' + ampm;
    }
    var clockElement = document.getElementById('clock');
    clockElement.innerText = timeString;
    clockElement.style.color = clockColor;
    clockElement.style.fontFamily = clockFont;
    clockElement.style.fontSize = clockSize;
}

// Update the clock every second
setInterval(updateClock, 1000);

// Initial call to display the clock immediately
updateClock();
</script>
</body>
</html>