master-clock.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LED Masterclock with NTP Sync</title>
    <link href="https://cdn.jsdelivr.net/npm/dseg@0.46.0/css/dseg.css" rel="stylesheet">
    <style>
        body {
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: black;
            height: 100vh;
            font-family: 'Courier New', Courier, monospace;
            overflow: hidden;
        }

        .clock-container {
            position: relative;
            width: 100vmin;
            height: 100vmin;
        }

        .segments, .hour-marker {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .segment {
            position: absolute;
            width: 2.5%;
            height: 2.5%;
            background-color: rgba(255, 0, 0, 0.2);
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform-origin: 50% 50%;
            transition: background-color 0.2s;
        }

        .segment.active {
            background-color: red;
        }

        .hour-marker {
            position: absolute;
            width: 2.5%;
            height: 2.4%;
            background-color: red;
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform-origin: 50% 50%;
        }

        .time-display {
            position: absolute;
            top: 55%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            font-family: 'DSEG7-Classic', monospace;
            color: red;
        }

        .time-display .time {
            font-size: 17vmin;
            letter-spacing: 0.5vmin;
        }

        .time-display .seconds {
            font-size: 15vmin;
        }

        .custom-text {
            position: absolute;
            top: 75%;
            left: 50%;
            transform: translate(-50%, 0);
            text-align: center;
            color: red;
            font-size: 6vmin;
            font-family: monospace;
        }

        .sync-info {
            position: absolute;
            top: 1%;
            left: 1%;
            color: rgb(94, 0, 0);
            padding: 10px;
            border-radius: 5px;
            font-size: 2vmin;
        }
    </style>
</head>
<body>
    <div class="clock-container">
        <div class="segments"></div>
        <div class="time-display">
            <div class="time">00:00</div>
            <div class="seconds">00</div>
        </div>
        <div class="custom-text" id="customText">Your Custom Text</div>
        <div class="sync-info" id="syncInfo">NTP Sync: Checking...</div>
    </div>

    <script>
        const segmentsContainer = document.querySelector('.segments');
        const timeDisplay = document.querySelector('.time');
        const secondsDisplay = document.querySelector('.seconds');
        const customTextDisplay = document.getElementById('customText');
        const syncInfoDisplay = document.getElementById('syncInfo');

        const customText = "CUSTOM TEXT";
        customTextDisplay.textContent = customText;

        // Generate segments and hour markers
        for (let i = 0; i < 60; i++) {
            const segment = document.createElement('div');
            segment.classList.add('segment');
            segment.style.transform = `rotate(${i * 6}deg) translate(0, -45vmin)`;
            segmentsContainer.appendChild(segment);
        }

        for (let i = 0; i < 12; i++) {
            const hourMarker = document.createElement('div');
            hourMarker.classList.add('hour-marker');
            hourMarker.style.transform = `rotate(${i * 30 - 90}deg) translate(0, -42vmin)`;
            segmentsContainer.appendChild(hourMarker);
        }

        const segments = document.querySelectorAll('.segment');

        function updateClock() {
            const now = new Date();
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = now.getSeconds();

            // Update time display
            timeDisplay.textContent = `${hours}:${minutes}`;
            secondsDisplay.textContent = String(seconds).padStart(2, '0');

            // Update segments
            segments.forEach((segment, index) => {
                segment.classList.toggle('active', index <= seconds);
            });

            // Synchronize updates with system clock
            const nextUpdate = 1000 - now.getMilliseconds();
            setTimeout(updateClock, nextUpdate);
        }

        async function fetchNtpTime() {
            try {
                // Try WorldTimeAPI first
                const response = await fetch('https://worldtimeapi.org/api/timezone/Etc/UTC');
                if (!response.ok) {
                    throw new Error(`HTTP ${response.status}`);
                }
                const data = await response.json();

                // WorldTimeAPI returns datetime in ISO 8601 format
                const ntpTime = new Date(data.datetime);
                const localTime = new Date();
                const timeDiff = Math.abs(localTime - ntpTime);

                syncInfoDisplay.innerHTML = `NTP Sync: Success<br>Diff: ${timeDiff}ms<br>Timezone: ${Intl.DateTimeFormat().resolvedOptions().timeZone}`;
            } catch (error) {
                try {
                    // Fallback to timeapi.io
                    const response = await fetch('https://timeapi.io/api/time/current/zone?timeZone=UTC');
                    if (!response.ok) {
                        throw new Error(`HTTP ${response.status}`);
                    }
                    const data = await response.json();

                    const ntpTime = new Date(`${data.dateTime}Z`);
                    const localTime = new Date();
                    const timeDiff = Math.abs(localTime - ntpTime);

                    syncInfoDisplay.innerHTML = `NTP Sync: Success (fallback)<br>Diff: ${timeDiff}ms<br>Timezone: ${Intl.DateTimeFormat().resolvedOptions().timeZone}`;
                } catch (fallbackError) {
                    syncInfoDisplay.textContent = 'NTP Sync: Failed';
                }
            }
        }

        // Start the clock and fetch NTP time every 30 seconds
        updateClock();
        fetchNtpTime();
        setInterval(fetchNtpTime, 30000);
    </script>
</body>
</html>