flow/time.html at main · QQSHI13/flow · 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
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-3PSNCFVT76"></script>
<script>
 window.dataLayer = window.dataLayer || [];
 function gtag(){dataLayer.push(arguments);}
 gtag('js', new Date());

 gtag('config', 'G-3PSNCFVT76');
</script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Simple fullscreen clock display">
    <meta name="theme-color" content="#111213">
    <title>Time</title>

    <!-- PWA Manifest -->
    <link rel="manifest" href="manifest.json">

    <style>
        .blank {
            display: inline-block;
            box-sizing: content-box;
            cursor: normal;
            padding: 5% 10%;
            border: 1px solid #69696962;
            border-radius: 50px;
            font: normal 1500%/normal Arial, Helvetica, sans-serif;
            color: rgba(255, 255, 255, 0.9);
            text-indent: 1px;
            text-overflow: clip;
            letter-spacing: 1px;
            word-spacing: 24px;
            background: rgba(96, 96, 96, 0.36);
            box-shadow: 7px 7px 11px 0 rgba(0, 0, 0, 0.46);
            text-shadow: 5px 5px 11px rgba(0, 0, 0, 0.64);
            transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
        }

        body, html {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        body {
            background-color: rgb(17, 18, 19);
            font: normal;
            color: rgb(255, 255, 255);
            z-index: -1000;
            min-height: 100vh;
            position: relative;
        }

        #time {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        #tim {
            overflow-y: auto;
            overflow-x: hidden;
        }
    </style>
</head>

<body id="tim">
    <div class="blank" id="time"></div>

    <script>
        // Clock interval reference for cleanup
        let clockInterval;

        function updateTime() {
            const date = new Date();
            const hour = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');
            const timeElement = document.getElementById('time');
            if (timeElement) {
                timeElement.textContent = hour + ':' + minutes;
            }
        }

        // Initialize clock
        updateTime();
        clockInterval = setInterval(updateTime, 1000);

        // Clear interval when page is hidden to prevent memory leak
        document.addEventListener('visibilitychange', () => {
            if (document.hidden) {
                if (clockInterval) {
                    clearInterval(clockInterval);
                    clockInterval = null;
                }
            } else {
                updateTime();
                clockInterval = setInterval(updateTime, 1000);
            }
        });
    </script>

    <!-- Service Worker Registration -->
    <script>
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('sw.js')
                    .then(registration => {
                        console.log('SW registered:', registration);

                        // Auto-refresh when a new service worker takes control
                        navigator.serviceWorker.addEventListener('controllerchange', () => {
                            console.log('New service worker activated - reloading page');
                            window.location.reload();
                        });
                    })
                    .catch(error => {
                        console.log('SW registration failed:', error);
                    });
            });
        }
    </script>
</body>
</html>