interier/templates/en/partials/topbar.eta

<% const timeIcon = `
    <svg class="icon" 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 class="icon" 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 ipIcon = `
    <svg class="icon" 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">
            <rect width="6" height="6" x="16" y="16" rx="1" />
            <rect width="6" height="6" x="2" y="16" rx="1" />
            <rect width="6" height="6" x="9" y="2" rx="1" />
            <path d="M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3m-7-4V8" />
        </g>
    </svg>
` %>

<% const homeIcon = `
    <svg class="icon" 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="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" />
            <path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
        </g>
    </svg>
` %>

<% const historyIcon = `
    <svg class="icon" 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="M3 12a9 9 0 1 0 9-9a9.75 9.75 0 0 0-6.74 2.74L3 8" />
            <path d="M3 3v5h5m4-1v5l4 2" />
        </g>
    </svg>
` %>

<% const settingsIcon = `
    <svg class="icon" 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="M9.671 4.136a2.34 2.34 0 0 1 4.659 0a2.34 2.34 0 0 0 3.319 1.915a2.34 2.34 0 0 1 2.33 4.033a2.34 2.34 0 0 0 0 3.831a2.34 2.34 0 0 1-2.33 4.033a2.34 2.34 0 0 0-3.319 1.915a2.34 2.34 0 0 1-4.659 0a2.34 2.34 0 0 0-3.32-1.915a2.34 2.34 0 0 1-2.33-4.033a2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" />
            <circle cx="12" cy="12" r="3" />
        </g>
    </svg>
` %>

<% const skFlag = `
    <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
        <mask id="SVGuywqVbel">
            <circle cx="256" cy="256" r="256" fill="#fff" />
        </mask>
        <g mask="url(#SVGuywqVbel)">
            <path fill="#0052b4" d="m0 160l256-32l256 32v192l-256 32L0 352z" />
            <path fill="#eee" d="M0 0h512v160H0z" />
            <path fill="#d80027" d="M0 352h512v160H0z" />
            <path fill="#eee" d="M64 63v217c0 104 144 137 144 137s144-33 144-137V63z" />
            <path fill="#d80027" d="M96 95v185a83 78 0 0 0 9 34h206a83 77 0 0 0 9-34V95z" />
            <path fill="#eee" d="M288 224h-64v-32h32v-32h-32v-32h-32v32h-32v32h32v32h-64v32h64v32h32v-32h64z" />
            <path fill="#0052b4" d="M152 359a247 231 0 0 0 56 24c12-3 34-11 56-24a123 115 0 0 0 47-45a60 56 0 0 0-34-10l-14 2a60 56 0 0 0-110 0a60 56 0 0 0-14-2c-12 0-24 4-34 10a123 115 0 0 0 47 45" />
        </g>
    </svg>
` %>

<% const date = new Date() %>

<header>
    <div class="links">
        <a role="button" href="/"><%~ skFlag %></a>
    </div>

    <p><%~ timeIcon %> <span id="topbarTime"><%= date.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: true }) %></span></p>
    
    <p><%~ dateIcon %> <span id="topbarDate"><%= date.toLocaleDateString('en-US', { weekday: "long", year: "numeric", month: "long", day: "numeric" }) %></span></p>
        
    <div class="links">
        <a role="button" href="/en"><%~ homeIcon %></a>
        <a role="button" href="/en/history"><%~ historyIcon %></a>
        <a role="button" href="/en/settings"><%~ settingsIcon %></a>
    </div>

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

            const date = new Date()

            const timeString = date.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: true })
            const dateString = date.toLocaleDateString('en-US', { weekday: "long", year: "numeric", month: "long", day: "numeric" })

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