reforma da interface da página de projetos
Deploy / Deploy (push) Successful in 1m29s Details

This commit is contained in:
JotaChina 2025-12-15 19:02:32 -03:00
parent 9c68c3ea68
commit e9c9fd5875
1 changed files with 60 additions and 1 deletions

View File

@ -82,6 +82,32 @@ permalink: /projetos/
</div>
</div>
<div class="control has-icons-left">
<div class="select is-small is-rounded">
<select id="key-filter">
<option value="all">🎹 Todos os Tons</option>
<option value="C">C (Dó Maior)</option>
<option value="Db">Db (Réb Maior)</option>
<option value="D">D (Ré Maior)</option>
<option value="Eb">Eb (Mib Maior)</option>
<option value="E">E (Mi Maior)</option>
<option value="F">F (Fá Maior)</option>
<option value="Gb">Gb (Solb Maior)</option>
<option value="G">G (Sol Maior)</option>
<option value="Ab">Ab (Láb Maior)</option>
<option value="A">A (Lá Maior)</option>
<option value="Bb">Bb (Sib Maior)</option>
<option value="B">B (Si Maior)</option>
<option value="Cm">Cm (Dó Menor)</option>
<option value="C#m">C#m (Dó# Menor)</option>
<option value="Dm">Dm (Ré Menor)</option>
</select>
</div>
<div class="icon is-small is-left has-text-info">
<i class="fa-solid fa-music"></i>
</div>
</div>
</div>
</div>
@ -471,6 +497,17 @@ document.addEventListener('DOMContentLoaded', () => {
card.dataset.stars = estrelas;
card.dataset.intensity = intensidade;
card.dataset.bpm_real = bpm;
// Dentro do enrichCards, salve o tom 'cru' no dataset
let tomRaw = "Unknown";
if (info.analise_tecnica?.tom) {
// Ex: "Ab"
tomRaw = info.analise_tecnica.tom;
// Se a escala for minor, adiciona 'm'. Ex: "Ab" + "m" -> "Abm"
if (info.analise_tecnica.escala === 'minor') {
tomRaw += 'm';
}
}
card.dataset.key = tomRaw; // Salva no HTML: data-key="Ab" ou "Cm"
// Injeta HTML
const bpmContainer = card.querySelector('.bpm-container');
@ -500,6 +537,22 @@ document.addEventListener('DOMContentLoaded', () => {
if(genero === 'Electronic') color = 'is-info';
if(genero === 'Hip Hop') color = 'is-warning';
if(genero === 'Rock') color = 'is-danger';
let subTagsHTML = "";
if (info.analise_ia?.nuvem_tags && Array.isArray(info.analise_ia.nuvem_tags)) {
// Pega os 2 primeiros
const topTags = info.analise_ia.nuvem_tags.slice(0, 2);
topTags.forEach(t => {
// Dica: Use title para mostrar o score no hover (mouse em cima)
const scorePercent = Math.round(t.score * 100);
subTagsHTML += `
<span class="tag is-white is-rounded border-tag"
title="Confiança IA: ${scorePercent}%"
style="font-size: 0.65rem; color: #666;">
#${t.tag}
</span>`;
});
}
// Tag de Gênero
tagsRow.innerHTML += `<span class="tag ${color} is-light is-rounded" style="font-size: 0.7rem;">🤖 ${genero}</span>`;
@ -564,11 +617,17 @@ document.addEventListener('DOMContentLoaded', () => {
const col = c.closest('.project-column');
const g = c.dataset.genre;
const s = parseInt(c.dataset.stars || 0);
const k = c.dataset.key; // Pega o que salvamos ("Ab", "Cm", etc)
const matchG = (currentGenre === 'all' || g === currentGenre);
const matchS = (currentMinStars === 'all' || s === parseInt(currentMinStars)); // Lembra do === da resposta anterior
// Novo Match de Tom
// A lógica aqui é simples: se for 'all', passa. Se não, tem que ser igual.
const matchK = (currentKey === 'all' || k === currentKey);
const matchG = (currentGenre === 'all' || g === currentGenre);
const matchS = (currentMinStars === 'all' || s === parseInt(currentMinStars));
col.style.display = (matchG && matchS) ? 'block' : 'none';
col.style.display = (matchG && matchS && matchK) ? 'block' : 'none';
});
}