tijl.dev-core/web/views/services.html

<div class="z-[99] mt-4 flex justify-center">
    <div class="flex gap-2">
        {{range .Services}}
        <a href="#{{.Slug}}" id="service-{{.Slug}}" class="group"
            onmouseover="this.querySelector('img').style.transform='scale({{incfloat .Scale 1.1}})';"
            onmouseout="this.querySelector('img').style.transform='scale({{incfloat .Scale 1}})';">
            <div class="relative w-24 h-24 rounded-3xl shadow-2xl" style="background-color: {{.Color}};">
                <div class="absolute inset-0 flex items-center justify-center">
                    <img alt="{{.Name}} logo"
                        class="text-white transform transition-transform duration-300 drop-shadow-2xl"
                        style="transform: scale({{incfloat .Scale 1}});" src="/static/assets/{{.Slug}}.svg" />
                </div>
            </div>
            <div id="service-{{.Slug}}-label"
                class="w-24 text-center mt-2 -mb-[2px] border-2 border-base-300 rounded-2xl rounded-b-none py-1">
                {{.Name}}
            </div>
        </a>
        {{end}}
    </div>
</div>

<div class="bg-base-100 rounded-2xl border-base-300 border-2" id="services-info">
    {{range .Services}}
    <div class="card-body hidden" id="service-{{.Slug}}-info">
        <h2 class="card-title">{{.Name}}</h2>
        <p>{{.Description}}</p>
        <div class="card-actions justify-end">
            <a href="/service/{{.Slug}}/info" class="btn">{{$.T.info}}</a>
            <a href="/service/{{.Slug}}" class="btn btn-primary">{{$.T.open}}</a>
        </div>
    </div>
    {{end}}
</div>

<script>
    function hashChange() {
        if (window.location.hash) {
            let button = document.getElementById("service-" + window.location.hash.slice(1))
            document.querySelectorAll('div[id^="service-"][id$="-info"]').forEach(element => {
                if (element.id == button.id + "-info") {
                    if (element.classList.contains("hidden")) {
                        element.classList.remove("hidden")
                        setTimeout(() => {
                            document.querySelectorAll('a[id^="service-"]').forEach(button2 => {
                                document.getElementById("service-" + button2.id.slice(8) + "-label").classList.remove("border-b-base-100")
                                button2.href = "#" + button2.id.slice(8)
                            })
                            document.getElementById("service-" + button.id.slice(8) + "-label").classList.add("border-b-base-100")
                            button.href = "/service/" + button.id.slice(8)
                        }, 0)
                    } else {

                    }
                } else {
                    if (!element.classList.contains("hidden")) {
                        element.classList.add("hidden")
                    }
                }
            })
        } else {
            window.location = window.location + "#" + `{{.DefaultService}}`
            hashChange()
        }
    }

    document.querySelectorAll('a[id^="service-"]').forEach(button => {
        button.addEventListener('click', function (event) {
        })
    })

    window.addEventListener('hashchange', function () {
        hashChange()
    });

    hashChange()
</script>