mmpSearch/pages/beats.md

layout, title, permalink

layout	title	permalink
default	Beats Disponíveis	/beats/

<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">
    {% if site.data.beats %}
        {% for filename in site.data.beats %}

        <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 = filename | remove: '.wav' | remove: '.mp3' %}
              {% assign project_url = "" %}

              {% for projeto in site.data.all %}
                {% assign proj_slug = projeto.file | slugify %}
                {% assign beat_slug = file_name_clean | slugify %}
                
                {% if proj_slug == beat_slug %}
                  {% assign project_url = "/projetos/" | append: proj_slug | 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="/mmpSearch/src_mmpSearch/wav/{{ filename | url_encode }}" type="audio/wav">
                  Seu navegador não suporta áudio.
                </audio>
              </div>

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

        {% endfor %}
    {% else %}
        <div class="column is-12">
            <div class="notification is-warning has-text-centered">
                Nenhum beat encontrado (beats.json vazio ou inexistente).
            </div>
        </div>
    {% endif %}
  </div>

</div>

<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>