interier/templates/sk/partials/topbar.eta

<% const timeIcon = `
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
            <circle cx="12" cy="12" r="10" />
            <path d="M12 6v6l4 2" />
        </g>
    </svg>
` %>

<% const dateIcon = `
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
            <path d="M8 2v4m8-4v4" />
            <rect width="18" height="18" x="3" y="4" rx="2" />
            <path d="M3 10h18M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01M16 18h.01" />
        </g>
    </svg>
` %>

<% const date = new Date() %>

<header>
    <p><%~ timeIcon %> <span id="topbarTime"><%= date.getHours() %>:<%= date.getMinutes() %></span></p>
    <p><span id="topbarDate"><%= date.getDate() %>. <%= date.getMonth() + 1 %>. <%= date.getFullYear() %></span> <%~ dateIcon %></p>

    <script defer>
        setInterval(() => {
            const topbarTime = document.querySelector("#topbarTime")
            const topbarDate = document.querySelector("#topbarDate")

            const date = new Date()

            const timeString = `${date.getHours().toString().padStart(2, `0`) }:${date.getMinutes().toString().padStart(2, `0`)}:${date.getSeconds().toString().padStart(2, `0`)}`
            const dateString = `${date.getDate() }. ${date.getMonth() + 1 }. ${date.getFullYear()}`

            topbarTime.textContent = timeString
            
            if (topbarDate.textContent !== dateString) {
                topbarDate.textContent = dateString
            }
        }, 1000)
    </script>
</header>