JotaChina
/
mmpSearch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

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

This commit is contained in:
JotaChina 2025-12-15 18:05:33 -03:00
parent 984fdf2ca5
commit c6aded75e1
1 changed files with 70 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
pages/projetos.md
View File

@ -54,11 +54,13 @@ permalink: /projetos/
<div class="control has-icons-left"> <div class="control has-icons-left">
<div class="select is-small is-rounded"> <div class="select is-small is-rounded">
<select id="star-filter"> <select id="star-filter">
<option value="all">Todas Dificuldades</option> <select id="star-filter">
<option value="5">⭐⭐⭐⭐⭐ Expert</option> <option value="all">Todas Dificuldades</option>
<option value="4">⭐⭐⭐⭐ Avançado</option> <option value="5">🔥 Expert (Nível 5)</option>
<option value="3">⭐⭐⭐ Intermediário</option> <option value="4">⚡ Avançado (Nível 4)</option>
<option value="2">⭐⭐ Básico</option> <option value="3">🔷 Intermediário (Nível 3)</option>
<option value="2">🟢 Básico (Nível 2)</option>
</select>
</select> </select>
</div> </div>
<div class="icon is-small is-left has-text-warning"> <div class="icon is-small is-left has-text-warning">
@ -251,14 +253,21 @@ permalink: /projetos/
.project-card:hover .title { .project-card:hover .title {
color: #3273dc !important; color: #3273dc !important;
} }
.category-reveal summary { /* Correção para a barra não esticar */
list-style: none; .category-reveal {
transition: all 0.2s ease; width: 100%;
flex-shrink: 0; /* Impede que encolha demais */
flex-grow: 0; /* Impede que cresça para preencher espaço vazio */
} }
.category-reveal summary::-webkit-details-marker { display: none; }
.category-reveal summary:hover { .category-reveal summary {
background-color: #f8fbff; list-style: none;
border-color: #3273dc; transition: all 0.2s ease;
height: auto !important; /* Força altura automática */
min-height: 22px;
white-space: normal; /* Permite que o texto quebre se for longo */
display: flex;
align-items: center;
} }
.category-reveal[open] summary { .category-reveal[open] summary {
background-color: #eef6fc !important; background-color: #eef6fc !important;
@ -384,22 +393,33 @@ document.addEventListener('DOMContentLoaded', () => {
}) })
.catch(console.warn); .catch(console.warn);
// Função para desenhar as estrelas com COR FIXA (Gold) // Função atualizada para Badge de Dificuldade
function gerarEstrelas(num) { function renderizarDificuldade(num) {
const n = Math.round(num) || 0; const n = Math.round(num) || 1;
// Cor #f1c40f é o amarelo padrão de estrelas let label = "Básico";
let html = `<div style="color: #f1c40f; letter-spacing: 2px;" title="Complexidade: ${n}/5">`; let icon = "fa-leaf"; // Ícone padrão
let colorClass = "is-success"; // Verde
for (let i = 1; i <= 5; i++) { if (n >= 4.5) {
if (i <= n) { label = "Expert";
html += '<i class="fa-solid fa-star"></i>'; icon = "fa-fire";
} else { colorClass = "is-danger"; // Vermelho
// Estrela vazia em cinza claro para contraste } else if (n >= 3.5) {
html += '<i class="fa-regular fa-star" style="color: #dbdbdb;"></i>'; label = "Avançado";
} icon = "fa-bolt";
colorClass = "is-warning"; // Amarelo/Laranja
} else if (n >= 2.5) {
label = "Intermediário";
icon = "fa-layer-group";
colorClass = "is-info"; // Azul
} }
html += '</div>';
return html; // Retorna uma tag HTML bonita e visível
return `
<span class="tag ${colorClass} is-light is-rounded" title="Complexidade: ${n}/5" style="border: 1px solid rgba(0,0,0,0.1);">
<i class="fa-solid ${icon} mr-1"></i> ${label}
</span>
`;
} }
function enrichCards(data) { function enrichCards(data) {
@ -450,17 +470,18 @@ document.addEventListener('DOMContentLoaded', () => {
iaDiv.style.display = "flex"; iaDiv.style.display = "flex";
iaDiv.style.flexDirection = "column"; iaDiv.style.flexDirection = "column";
iaDiv.style.alignItems = "center"; iaDiv.style.alignItems = "center";
iaDiv.style.gap = "4px"; iaDiv.style.gap = "6px"; // Aumentei um pouco o gap
iaDiv.className = "mt-2"; iaDiv.className = "mt-3"; // Margem topo para separar do título
// 1. Estrelas // 1. Renderiza a Dificuldade (Nova função)
const starsDiv = document.createElement('div'); const diffDiv = document.createElement('div');
starsDiv.innerHTML = gerarEstrelas(estrelas); diffDiv.innerHTML = renderizarDificuldade(estrelas);
iaDiv.appendChild(starsDiv); iaDiv.appendChild(diffDiv);
// 2. Tags (Gênero + Tom) // 2. Tags (Gênero + Tom)
const tagsRow = document.createElement('div'); const tagsRow = document.createElement('div');
tagsRow.className = "tags is-centered mb-0"; tagsRow.className = "tags is-centered mb-0";
tagsRow.style.gap = "4px";
if(genero !== "Unknown") { if(genero !== "Unknown") {
let color = 'is-primary'; let color = 'is-primary';
@ -468,12 +489,21 @@ document.addEventListener('DOMContentLoaded', () => {
if(genero === 'Hip Hop') color = 'is-warning'; if(genero === 'Hip Hop') color = 'is-warning';
if(genero === 'Rock') color = 'is-danger'; if(genero === 'Rock') color = 'is-danger';
tagsRow.innerHTML += `<span class="tag ${color} is-light is-rounded mr-1">🤖 ${genero}</span>`; // Tag de Gênero
tagsRow.innerHTML += `<span class="tag ${color} is-light is-rounded" style="font-size: 0.7rem;">🤖 ${genero}</span>`;
} }
// Adiciona o Tom se existir
tagsRow.innerHTML += tomHtml; tagsRow.innerHTML += tomHtml;
iaDiv.appendChild(tagsRow); iaDiv.appendChild(tagsRow);
// Limpa o container antes de adicionar para evitar duplicatas se rodar 2x
bpmContainer.innerHTML = '';
// Re-adiciona o BPM original se necessário, ou apenas adiciona o novo bloco IA
if(card.dataset.bpm_real > 0) {
bpmContainer.innerHTML = `<span class="tag is-dark is-rounded is-light mb-1" style="font-size: 0.7rem; font-weight: bold; border: 1px solid #ccc;">🎵 ${Math.round(card.dataset.bpm_real)} BPM</span>`;
}
bpmContainer.appendChild(iaDiv); bpmContainer.appendChild(iaDiv);
} }
}); });