97 lines
3.0 KiB
HTML
97 lines
3.0 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-container">
|
|
{{ range $cat := slice "Books" "Movies" "TV Series" "Recipes" "YouTube" "Music" "Concerts" }}
|
|
<div class="category-cards" id="category-{{ $cat | urlize }}">
|
|
{{ range where $.Site.RegularPages "Params.category" $cat }}
|
|
{{ if not (eq .Params.draft true) }}
|
|
{{ partial "card.html" . }}
|
|
{{ end }}
|
|
{{ end }}
|
|
</div>
|
|
{{ end }}
|
|
|
|
<!-- All cards section (shown by default) -->
|
|
<div class="category-cards active" id="category-all">
|
|
{{ range .Site.RegularPages }}
|
|
{{ if not (eq .Params.draft true) }}
|
|
{{ partial "card.html" . }}
|
|
{{ end }}
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
<style>
|
|
.cards-container {
|
|
width: 100%;
|
|
}
|
|
.category-cards {
|
|
display: none; /* Hide all category sections by default */
|
|
}
|
|
.category-cards.active {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 20px;
|
|
justify-content: center;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// 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
|
|
document.querySelectorAll('.tab').forEach(tab => {
|
|
tab.classList.remove('active');
|
|
});
|
|
allTab.classList.add('active');
|
|
|
|
// Add click handler for all tabs
|
|
document.querySelectorAll('.tab').forEach(tab => {
|
|
tab.addEventListener('click', function() {
|
|
const selectedCategory = this.getAttribute('data-tab');
|
|
|
|
// Update active tab
|
|
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
|
|
this.classList.add('active');
|
|
|
|
// Hide all category sections
|
|
document.querySelectorAll('.category-cards').forEach(section => {
|
|
section.classList.remove('active');
|
|
});
|
|
|
|
// Show the selected category section
|
|
if (selectedCategory === 'all') {
|
|
document.getElementById('category-all').classList.add('active');
|
|
} else {
|
|
// Convert to URL-friendly format for element ID matching
|
|
const sectionId = 'category-' + selectedCategory.toLowerCase().replace(/\s+/g, '-');
|
|
const section = document.getElementById(sectionId);
|
|
if (section) {
|
|
section.classList.add('active');
|
|
} else {
|
|
// Fallback to showing all if category not found
|
|
document.getElementById('category-all').classList.add('active');
|
|
console.log('Category section not found:', sectionId);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
// Trigger the "All" tab by default
|
|
allTab.click();
|
|
});
|
|
</script>
|
|
{{ end }}
|