reforma da interface da página de projetos

pages/projetos.md

@@ -21,7 +21,7 @@ permalink: /projetos/
     </div>
 
     <div class="box has-background-white-ter mb-6 p-0" style="border: 1px solid #dbdbdb; overflow: hidden;">
-      
+
       <div class="p-3 is-clickable" id="filter-toggle-btn" style="cursor: pointer; display: flex; align-items: center; justify-content: space-between; background-color: #f5f5f5;">
         <div class="icon-text has-text-weight-bold has-text-grey-dark">
           <span class="icon"><i class="fa-solid fa-sliders"></i></span>
@@ -35,13 +35,13 @@ permalink: /projetos/
       <div id="filter-content" style="display: none; border-top: 1px solid #e8e8e8;">
         <div class="p-4">
           <div class="columns is-vcentered is-multiline">
-            
+
             <div class="column is-narrow">
               <span class="tag is-info is-light has-text-weight-bold">
                 <i class="fa-solid fa-robot mr-1"></i> Filtro IA:
               </span>
             </div>
-            
+
             <div class="column">
               <div class="buttons" id="genre-filters">
                 <button class="button is-small is-rounded is-active is-info" data-genre="all">Todos</button>
@@ -50,15 +50,17 @@ permalink: /projetos/
 
             <div class="column is-narrow">
                <div class="field has-addons" style="flex-wrap: wrap; gap: 5px;">
-                 
+
                  <div class="control has-icons-left">
                    <div class="select is-small is-rounded">
                      <select id="star-filter">
-                       <option value="all">Todas Dificuldades</option>
-                       <option value="5">⭐⭐⭐⭐⭐ Expert</option>
-                       <option value="4">⭐⭐⭐⭐ Avançado</option>
-                       <option value="3">⭐⭐⭐ Intermediário</option>
-                       <option value="2">⭐⭐ Básico</option>
+                       <select id="star-filter">
+                          <option value="all">Todas Dificuldades</option>
+                          <option value="5">🔥 Expert (Nível 5)</option>
+                          <option value="4">⚡ Avançado (Nível 4)</option>
+                          <option value="3">🔷 Intermediário (Nível 3)</option>
+                          <option value="2">🟢 Básico (Nível 2)</option>
+                        </select>
                      </select>
                    </div>
                    <div class="icon is-small is-left has-text-warning">
@@ -121,7 +123,7 @@ permalink: /projetos/
                     {% else %}
                       <div class="mb-3 bpm-container" style="min-height: 24px;"></div>
                     {% endif %}
-                    
+
                     <div style="flex: 1;"></div>
 
                     {% if page.tags %}
@@ -251,14 +253,21 @@ permalink: /projetos/
   .project-card:hover .title {
     color: #3273dc !important;
   }
-  .category-reveal summary {
-    list-style: none;
-    transition: all 0.2s ease;
+  /* 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::-webkit-details-marker { display: none; }
-  .category-reveal summary:hover {
-      background-color: #f8fbff;
-      border-color: #3273dc;
+
+  .category-reveal summary {
+      list-style: none;
+      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 {
     background-color: #eef6fc !important;
@@ -384,22 +393,33 @@ document.addEventListener('DOMContentLoaded', () => {
     })
     .catch(console.warn);
 
-  // Função para desenhar as estrelas com COR FIXA (Gold)
-  function gerarEstrelas(num) {
-      const n = Math.round(num) || 0;
-      // Cor #f1c40f é o amarelo padrão de estrelas
-      let html = `<div style="color: #f1c40f; letter-spacing: 2px;" title="Complexidade: ${n}/5">`;
-      
-      for (let i = 1; i <= 5; i++) {
-          if (i <= n) {
-              html += '<i class="fa-solid fa-star"></i>'; 
-          } else {
-              // Estrela vazia em cinza claro para contraste
-              html += '<i class="fa-regular fa-star" style="color: #dbdbdb;"></i>'; 
-          }
+  // Função atualizada para Badge de Dificuldade
+  function renderizarDificuldade(num) {
+      const n = Math.round(num) || 1;
+      let label = "Básico";
+      let icon = "fa-leaf"; // Ícone padrão
+      let colorClass = "is-success"; // Verde
+
+      if (n >= 4.5) {
+          label = "Expert";
+          icon = "fa-fire";
+          colorClass = "is-danger"; // Vermelho
+      } else if (n >= 3.5) {
+          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) {
@@ -450,17 +470,18 @@ document.addEventListener('DOMContentLoaded', () => {
           iaDiv.style.display = "flex";
           iaDiv.style.flexDirection = "column";
           iaDiv.style.alignItems = "center";
-          iaDiv.style.gap = "4px";
-          iaDiv.className = "mt-2";
+          iaDiv.style.gap = "6px"; // Aumentei um pouco o gap
+          iaDiv.className = "mt-3"; // Margem topo para separar do título
 
-          // 1. Estrelas
-          const starsDiv = document.createElement('div');
-          starsDiv.innerHTML = gerarEstrelas(estrelas);
-          iaDiv.appendChild(starsDiv);
+          // 1. Renderiza a Dificuldade (Nova função)
+          const diffDiv = document.createElement('div');
+          diffDiv.innerHTML = renderizarDificuldade(estrelas);
+          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);
       }
     });
@@ -570,4 +600,4 @@ document.addEventListener('DOMContentLoaded', () => {
     border: 1px solid #dbdbdb;
     color: #555;
 }
-</style>
+</style>