XenForo Digital clock widget - HTML

[blu3men]

Digital Clock widget on forum sidebar or other position.

Appearance >> Widgets
Add new WIDGET HTML

Template:

<style type="text/css">
    @font-face {
  font-family: 'led';
  src: url('styles/fonts/clock/led.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

#date-time-container {
    text-align: center;
}

#server-date {
    font-size: 1.0em;
    color: #647fa5;
    margin-top: -23px;
    text-shadow: 0 0 2px #506b6f;
}

#server-time {
font-size: 3.3em;
    padding-top: 5px;
    padding-bottom:10px;
    text-shadow: 0 0 5px #74bff8;
    font-family: 'led';
    border-top: none;
    border-bottom: none;
    color: #000000;
    border-left: 2px solid #00b1ff;
    border-right: 2px solid #00b1ff;
    box-shadow: inset 0 0 10px #164e66;
    border-radius: 40px;
}

.sclock {
    cursor: url(styles/fonts/clock/set.cur), auto;
}
</style>

<div id="date-time-container">
    <div class="sclock" onclick="window.location = 'index.php?account/preferences';">
    <div id="server-time" data-server-time="{{ date($xf.time, 'Y-m-d H:i:s') }}"></div>
    
    <div id="server-date"></div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const serverTimeElement = document.getElementById('server-time');
        const serverDateElement = document.getElementById('server-date');
        let serverTime = new Date();
        const [dateString, timeString] = serverTimeElement.dataset.serverTime.split(' ');
        const [hours, minutes, seconds] = timeString.split(':').map(Number);
        const [year, month, day] = dateString.split('-').map(Number);
        serverTime.setFullYear(year, month - 1, day);
        serverTime.setHours(hours, minutes, seconds);

        const monthNames = [
            "January", "February", "March", "April", "May", "June",
            "July", "August", "September", "October", "November", "December"
        ];

        function updateServerTime() {
            serverTime.setSeconds(serverTime.getSeconds() + 1);
            const hours = serverTime.getHours().toString().padStart(2, '0');
            const minutes = serverTime.getMinutes().toString().padStart(2, '0');
            const seconds = serverTime.getSeconds().toString().padStart(2, '0');
            const day = serverTime.getDate().toString().padStart(2, '0');
            const month = monthNames[serverTime.getMonth()];
            const year = serverTime.getFullYear();
            const timeString = `${hours}:${minutes}:${seconds}`;
            const dateString = `${year}. ${month} ${day}.`;
            serverDateElement.textContent = dateString;
            serverTimeElement.textContent = timeString;
        }

        setInterval(updateServerTime, 1000);
        updateServerTime();
    });
</script>

UPLOAD
Upload the content of UPLOAD folder in your XF folder (Attached file).

Variable COLORS if you use light theme!
For example (#server-time):

color: #dcdfe5;
text-shadow: 0 0 5px #0c0c0c;
border-left: 2px solid #213138;
border-right: 2px solid #213138;
box-shadow: inset 0 0 10px #93b5c4;