mmpSearch/pages/projetos.html

70 lines
2.4 KiB
HTML
Executable File

---
layout: default
title: MMPSearch - Projetos
permalink: /projetos/
---
<div class="publication">
<div class="container is-fluid">
<br />
<div class="tabs is-centered is-boxed is-medium mb-5">
{% include sidebar.html %}
</div>
<div class="columns">
<div class="column is-3">
<div class="box p-3" id="sidebar-filters"></div>
</div>
<div class="column is-9">
<div id="project-list" class="columns is-multiline"></div>
<div id="no-results" class="has-text-centered is-hidden mt-6">
<p class="subtitle has-text-grey">Nenhum projeto encontrado.</p>
</div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const projectList = document.getElementById("project-list");
const JSON_URL =
'{{ "/mmpSearch/src_mmpSearch/saida_analises/db_final_completo.json" | relative_url }}';
fetch(JSON_URL)
.then((r) => r.json())
.then((data) => {
renderAllCards(data);
// Aqui você chama as suas funções de filtro originais (applyGlobalFilters)
// que agora vão atuar sobre os elementos criados dinamicamente.
});
function renderAllCards(projects) {
projectList.innerHTML = projects
.map(
(p) => `
<div class="column is-4 project-item"
data-name="${p.file.toLowerCase()}"
data-bpm="${p.bpm || 0}">
<div class="card project-card" style="height: 100%; border-radius: 12px; background-color: #f0f8ff;">
<a href="{{ '/projeto/?id=' | relative_url }}${p.file}" style="text-decoration: none;">
<div class="card-content has-text-centered">
<div class="icon is-large has-text-info"><i class="fa-solid fa-music fa-2x"></i></div>
<p class="title is-6 mt-3">${p.file.replace(".html", "")}</p>
<span class="tag is-dark is-rounded">🎵 ${p.bpm || "N/A"} BPM</span>
</div>
</a>
<footer class="card-footer">
<a href="{{ '/projeto/?id=' | relative_url }}${p.file}" class="card-footer-item">Ver Detalhes</a>
</footer>
</div>
</div>
`,
)
.join("");
}
});
</script>