55 lines
1.8 KiB
HTML
55 lines
1.8 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">
|
|
{{ range .Pages }}
|
|
{{ if .Params.category }}
|
|
{{ partial "card.html" . }}
|
|
{{ end }}
|
|
{{ end }}
|
|
</div>
|
|
<script>
|
|
// Tab switching with "All" default view
|
|
// (same as index.html)
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const tabs = document.querySelectorAll('.tab');
|
|
const cards = document.getElementById('cards');
|
|
const allCards = Array.from(cards.children);
|
|
|
|
// Add an "All" tab at the beginning
|
|
const tabsContainer = document.getElementById('tabs');
|
|
const allTab = document.createElement('div');
|
|
allTab.className = 'tab active';
|
|
allTab.textContent = 'All';
|
|
allTab.setAttribute('data-tab', 'all');
|
|
tabsContainer.prepend(allTab);
|
|
|
|
// Make other tabs inactive initially
|
|
tabs.forEach(tab => tab.classList.remove('active'));
|
|
|
|
// Add click handler for all tabs (including the new All tab)
|
|
document.querySelectorAll('.tab').forEach(tab => {
|
|
tab.addEventListener('click', function() {
|
|
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
|
|
this.classList.add('active');
|
|
const cat = this.getAttribute('data-tab');
|
|
|
|
allCards.forEach(card => {
|
|
if (cat === 'all') {
|
|
card.style.display = '';
|
|
} else {
|
|
// Add a data-category attribute to make filtering more reliable
|
|
const category = card.getAttribute('data-category');
|
|
card.style.display = (category === cat) ? '' : 'none';
|
|
}
|
|
});
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
{{ end }}
|