reforma da interface da página de projetos

pages/projetos.md

@@ -53,12 +53,14 @@ permalink: /projetos/
 
                  <div class="control has-icons-left">
                    <div class="select is-small is-rounded">
+                     <select id="star-filter">
                        <select id="star-filter">
                           <option value="all">Todas Dificuldades</option>
-                       <option value="5">⭐⭐⭐⭐⭐ Expert</option>
+                          <option value="5">🔥 Expert (Nível 5)</option>
-                       <option value="4">⭐⭐⭐⭐ Avançado</option>
+                          <option value="4">⚡ Avançado (Nível 4)</option>
-                       <option value="3">⭐⭐⭐ Intermediário</option>
+                          <option value="3">🔷 Intermediário (Nível 3)</option>
-                       <option value="2">⭐⭐ Básico</option>
+                          <option value="2">🟢 Básico (Nível 2)</option>
+                        </select>
                      </select>
                    </div>
                    <div class="icon is-small is-left has-text-warning">
@@ -251,14 +253,21 @@ permalink: /projetos/
   .project-card:hover .title {
     color: #3273dc !important;
   }
+  /* Correção para a barra não esticar */
+  .category-reveal {
+      width: 100%;
+      flex-shrink: 0; /* Impede que encolha demais */
+      flex-grow: 0;   /* Impede que cresça para preencher espaço vazio */
+  }
+
   .category-reveal summary {
       list-style: none;
       transition: all 0.2s ease;
-  }
+      height: auto !important; /* Força altura automática */
-  .category-reveal summary::-webkit-details-marker { display: none; }
+      min-height: 22px;
-  .category-reveal summary:hover {
+      white-space: normal; /* Permite que o texto quebre se for longo */
-      background-color: #f8fbff;
+      display: flex;
-      border-color: #3273dc;
+      align-items: center;
   }
   .category-reveal[open] summary {
     background-color: #eef6fc !important;
@@ -384,22 +393,33 @@ document.addEventListener('DOMContentLoaded', () => {
     })
     .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>';
+      // Retorna uma tag HTML bonita e visível
-      return html;
+      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) {
@@ -450,17 +470,18 @@ document.addEventListener('DOMContentLoaded', () => {
           iaDiv.style.display = "flex";
           iaDiv.style.flexDirection = "column";
           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)
           const tagsRow = document.createElement('div');
           tagsRow.className = "tags is-centered mb-0";
+          tagsRow.style.gap = "4px";
           
           if(genero !== "Unknown") {
               let color = 'is-primary';
@@ -468,12 +489,21 @@ document.addEventListener('DOMContentLoaded', () => {
               if(genero === 'Hip Hop') color = 'is-warning';
               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;
+          
           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);
       }
     });