79 lines
3.2 KiB
HTML
79 lines
3.2 KiB
HTML
<div class="prose mb-4">
|
|
<h1 class="m-0">Service's</h1>
|
|
<hr class="m-0 w-full" />
|
|
</div>
|
|
|
|
<div class="mt-4 flex justify-center">
|
|
<div class="flex gap-2">
|
|
{{range $key, $value := .Services}}
|
|
<a href="#{{$key}}" id="service-{{$key}}" 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-2xl 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/{{$key}}.svg" />
|
|
</div>
|
|
</div>
|
|
<div id="service-{{$key}}-label" class="w-24 text-center mt-2 rounded-2xl rounded-b-none py-1">
|
|
{{.Name}}
|
|
</div>
|
|
</a>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card bg-base-300" id="services-info">
|
|
{{range $key, $value := .Services}}
|
|
<div class="card-body hidden" id="service-{{$key}}-info">
|
|
<h2 class="card-title">{{.Name}}</h2>
|
|
<p>{{.Description}}</p>
|
|
<div class="card-actions justify-end">
|
|
<a href="/service/{{$key}}/info" class="btn bg-base-300">Info</a>
|
|
<a href="/service/{{$key}}" class="btn btn-primary">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("bg-base-300")
|
|
button2.href = "#" + button2.id.slice(8)
|
|
})
|
|
document.getElementById("service-" + button.id.slice(8) + "-label").classList.add("bg-base-300")
|
|
button.href = "/service/" + button.id.slice(8)
|
|
}, 0)
|
|
} else {
|
|
|
|
}
|
|
} else {
|
|
if (!element.classList.contains("hidden")) {
|
|
element.classList.add("hidden")
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
document.querySelectorAll('a[id^="service-"]').forEach(button => {
|
|
button.addEventListener('click', function (event) {
|
|
})
|
|
})
|
|
|
|
window.addEventListener('hashchange', function () {
|
|
hashChange()
|
|
});
|
|
|
|
hashChange()
|
|
</script>
|