mmpSearch/pages/beats.md

---
layout: default
title: Beats Disponíveis
permalink: /beats/
---

<main class="main-content">
  <div class="publication">

    <div class="container">
      <br />

      <div class="tabs is-centered is-boxed is-medium mb-6">
        {% include sidebar.html %}
      </div>

      <div class="has-text-centered mb-6">
        <h1 class="title is-3 has-text-grey-dark">🎧 Beats Disponíveis</h1>
        <p class="subtitle is-6 has-text-grey">
          Ouça e baixe beats criados pela comunidade.
        </p>
        <div style="width: 60px; height: 4px; background-color: #3273dc; margin: 1rem auto; border-radius: 2px;"></div>
      </div>

      <div class="columns is-multiline">
        {% assign files = site.static_files %}
        {% for file in files %}
          {% if file.path contains '/wav/' %}

            <div class="column is-12-mobile is-6-tablet is-4-desktop is-3-widescreen">
              <div class="card beat-card"
                   style="height: 100%; background-color: #f0f8ff; border: 1px solid #cfe8fc; border-radius: 12px; display: flex; flex-direction: column; transition: all 0.3s ease;">

                <div class="card-content has-text-centered p-4" style="flex: 1; display: flex; flex-direction: column; justify-content: center;">

                  <div class="mb-3" style="width: 60px; height: 60px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto; box-shadow: 0 4px 10px rgba(0,0,0,0.05);">
                      <span class="icon is-large has-text-info"><i class="fa-solid fa-compact-disc fa-2x fa-spin-hover"></i></span>
                  </div>

                  {% assign file_name_clean = file.name | remove: '.wav' %}
                  {% assign project_url = "" %}

                  {% for projeto in site.data.all %}
                    {% if projeto.file == file_name_clean %}
                      {% assign project_url = "/mmp_pages/"
                          | append: projeto.file | downcase
                          | replace: ' ', '-' | replace: 'ç', 'c' | replace: 'ã', 'a' | replace: 'á', 'a' | replace: 'â', 'a' | replace: 'é', 'e' | replace: 'ê', 'e' | replace: 'í', 'i' | replace: 'ó', 'o' | replace: 'ô', 'o' | replace: 'õ', 'o' | replace: 'ú', 'u'
                          | append: ".html" %}
                    {% endif %}
                  {% endfor %}

                  <h3 class="title is-6 mb-3" style="color: #205081; word-break: break-word;">
                    {% if project_url != "" %}
                      <a href="{{ project_url | relative_url }}" class="beat-link" title="Ir para o projeto">
                        {{ file_name_clean }} <i class="fa-solid fa-arrow-up-right-from-square" style="font-size: 0.7em; margin-left: 4px;"></i>
                      </a>
                    {% else %}
                      {{ file_name_clean }}
                    {% endif %}
                  </h3>

                  <div class="audio-wrapper" style="width: 100%;">
                    <audio class="audio-player" controls style="width: 100%; height: 32px; border-radius: 20px;">
                      <source src="{{ file.path | relative_url }}" type="audio/wav">
                      Seu navegador não suporta áudio.
                    </audio>
                  </div>

                </div>
              </div>
            </div>

          {% endif %}
        {% endfor %}
      </div>

    </div>

  </div>
</main>

<style>
  /* Estilo do Card */
  .beat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(50, 115, 220, 0.15);
    border-color: #3273dc !important;
    background-color: #fff !important;
  }

  /* Animação do Disco ao passar o mouse */
  .beat-card:hover .fa-spin-hover {
    animation: spin 2s linear infinite;
  }
  @keyframes spin { 100% { transform: rotate(360deg); } }

  /* Link do Título */
  .beat-link {
    color: #205081;
    text-decoration: none;
    border-bottom: 1px dotted transparent;
    transition: all 0.2s;
  }
  .beat-link:hover {
    color: #3273dc;
    border-bottom-color: #3273dc;
  }

  /* Ajuste fino do player */
  audio::-webkit-media-controls-panel {
    background-color: #f1f3f5;
  }
  .beat-card:hover audio::-webkit-media-controls-panel {
    background-color: #eef6fc;
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Lógica para tocar apenas um áudio por vez
    const audioPlayers = document.querySelectorAll('.audio-player');
    
    audioPlayers.forEach(audio => {
      audio.addEventListener('play', function() {
        audioPlayers.forEach(otherAudio => {
          if (otherAudio !== audio && !otherAudio.paused) {
            otherAudio.pause();
            otherAudio.currentTime = 0; // Opcional: reinicia o outro
          }
        });
        
        // Adiciona um efeito visual ao card ativo
        const card = audio.closest('.beat-card');
        if(card) {
            card.style.borderColor = '#4caf50';
            card.style.backgroundColor = '#f0fff4';
        }
      });

      audio.addEventListener('pause', function() {
        const card = audio.closest('.beat-card');
        if(card) {
            card.style.borderColor = '#cfe8fc';
            card.style.backgroundColor = '#f0f8ff';
        }
      });
    });
  });
</script>