mmpSearch/pages/beats.md

layout	title	permalink
default	Beats Disponíveis	/beats/

{% include sidebar.html %}

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

  <div class="tabs is-centered is-boxed is-medium mb-6">
    <ul>
      <li><a href="{{ '/mmp_pages/' | relative_url }}"><span class="icon is-small"><i class="fa-solid fa-folder-open"></i></span><span>Projetos Disponíveis</span></a></li>
      <li><a href="{{ '/search/' | relative_url }}"><span class="icon is-small"><i class="fa-solid fa-magnifying-glass"></i></span><span>Buscas</span></a></li>
      <li class="is-active"><a href="{{ '/beats/' | relative_url }}"><span class="icon is-small"><i class="fa-solid fa-headphones"></i></span><span>Beats</span></a></li>
      <li><a href="{{ '/create/' | relative_url }}" class="has-text-primary"><span class="icon is-small"><i class="fa-solid fa-plus-circle"></i></span><span>Crie seu projeto</span></a></li>
    </ul>
  </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>