33 lines
1.1 KiB
HTML
33 lines
1.1 KiB
HTML
{{ define "main" }}
|
|
<div class="tabs" id="tabs">
|
|
{{ $categories := slice "Books" "Movies" "TV Series" "Recipes" "YouTube" "Music" "Concerts" }}
|
|
{{ range $i, $cat := $categories }}
|
|
<div class="tab{{ if eq $i 0 }} active{{ end }}" data-tab="{{ $cat }}">{{ $cat }}</div>
|
|
{{ end }}
|
|
</div>
|
|
<div class="cards" id="cards">
|
|
{{ $current := "Books" }}
|
|
{{ range where .Site.RegularPages ".Params.category" $current }}
|
|
{{ partial "card.html" . }}
|
|
{{ end }}
|
|
</div>
|
|
<script>
|
|
// Simple tab switching (client-side, not Hugo)
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const tabs = document.querySelectorAll('.tab');
|
|
const cards = document.getElementById('cards');
|
|
const allCards = Array.from(cards.children);
|
|
tabs.forEach(tab => {
|
|
tab.addEventListener('click', function() {
|
|
tabs.forEach(t => t.classList.remove('active'));
|
|
this.classList.add('active');
|
|
const cat = this.getAttribute('data-tab');
|
|
allCards.forEach(card => {
|
|
card.style.display = card.innerHTML.includes(`category=\"${cat}\"`) ? '' : 'none';
|
|
});
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
{{ end }}
|