reformula buscas
Deploy / Deploy (push) Successful in 1m48s Details

This commit is contained in:
JotaChina 2025-12-17 17:03:33 -03:00
parent 95a7f55cdf
commit c2b3ec0176
3 changed files with 233 additions and 82 deletions

View File

@ -2,9 +2,9 @@
<ul>
<li>
<a href="{{ '/projetos/' | relative_url }}">
<span class="icon is-small"><i class="fa-solid fa-folder-open"></i></span>
<span>Projetos</span>
<a href="{{ '/buscas/' | relative_url }}">
<span class="icon is-small"><i class="fa-solid fa-magnifying-glass"></i></span>
<span>Buscas</span>
</a>
</li>
@ -16,16 +16,9 @@
</li>
<li>
<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="{{ '/buscas/' | relative_url }}">
<span class="icon is-small"><i class="fa-solid fa-magnifying-glass"></i></span>
<span>Buscas</span>
<a href="{{ '/projetos/' | relative_url }}">
<span class="icon is-small"><i class="fa-solid fa-folder-open"></i></span>
<span>Projetos</span>
</a>
</li>

104
_includes/sidebar.html.old Executable file
View File

@ -0,0 +1,104 @@
{% include modal_login.html %}
<ul>
<li>
<a href="{{ '/projetos/' | relative_url }}">
<span class="icon is-small"><i class="fa-solid fa-folder-open"></i></span>
<span>Projetos</span>
</a>
</li>
<li>
<a href="{{ '/samples/' | relative_url }}">
<span class="icon is-small"><i class="fa-solid fa-music"></i></span>
<span>Samples</span>
</a>
</li>
<li>
<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="{{ '/buscas/' | relative_url }}">
<span class="icon is-small"><i class="fa-solid fa-magnifying-glass"></i></span>
<span>Buscas</span>
</a>
</li>
<li>
<a href="{{ '/creation.html' | relative_url }}" class="has-text-primary">
<span class="icon is-small"><i class="fa-solid fa-wand-magic-sparkles"></i></span>
<span>Crie seu projeto</span>
</a>
</li>
<li>
<a href="{{ '/envie_seu_projeto/' | relative_url }}" class="has-text-primary">
<span class="icon is-small"><i class="fa-solid fa-cloud-arrow-up"></i></span>
<span>Envie seu projeto</span>
</a>
</li>
<li id="sidebar-btn-login">
<a href="#" class="has-text-info js-trigger-login">
<span class="icon is-small"><i class="fa-solid fa-right-to-bracket"></i></span>
<span>Entrar</span>
</a>
</li>
<li id="sidebar-btn-logout" class="is-hidden">
<a href="#" id="action-sidebar-logout" class="has-text-danger">
<span class="icon is-small"><i class="fa-solid fa-right-from-bracket"></i></span>
<span>Sair</span>
</a>
</li>
</ul>
<script>
document.addEventListener('DOMContentLoaded', async () => {
const loginLi = document.getElementById('sidebar-btn-login');
const logoutLi = document.getElementById('sidebar-btn-logout');
const logoutAction = document.getElementById('action-sidebar-logout');
try {
// Verifica status no servidor
const res = await fetch('/api/check_auth');
const data = await res.json();
if (data.logged_in) {
// Se logado: Esconde Login, Mostra Logout
if(loginLi) loginLi.classList.add('is-hidden');
if(logoutLi) logoutLi.classList.remove('is-hidden');
} else {
// Se visitante: Mostra Login, Esconde Logout
if(loginLi) loginLi.classList.remove('is-hidden');
if(logoutLi) logoutLi.classList.add('is-hidden');
}
} catch (e) {
console.error("Erro sidebar auth:", e);
}
// Lógica do botão Sair
if (logoutAction) {
logoutAction.addEventListener('click', async (e) => {
e.preventDefault();
// Adiciona loading visual (opcional)
logoutAction.classList.add('is-loading');
try {
await fetch('/api/logout', { method: 'POST' });
// Recarrega a página para resetar o estado visual
window.location.reload();
} catch (error) {
alert("Erro ao sair.");
logoutAction.classList.remove('is-loading');
}
});
}
});
</script>

View File

@ -269,52 +269,6 @@ permalink: /projetos/
{% elsif track.instrument_name %}{% assign p_insts_array = p_insts_array | push: track.instrument_name %}{% endif %}
{% endfor %}
{% assign p_patterns_str = project_patterns_flat | join: ',' %}
{% assign p_instruments_str = p_insts_array | uniq | join: ',' %}
{% assign p_plugins = page.tags.plugin | join: ',' %}
{% assign p_bassline = page.tags.bassline | join: ',' %}
{% assign p_automation = page.tags.automation | join: ',' %}
{% assign p_samples = page.tags.sample | join: ',' %}
{% assign p_name = page.title | default: page.name | downcase %}
<div class="column is-12-mobile is-6-tablet is-4-desktop is-4-widescreen project-item" data-name="{{ p_name }}" data-title="{{ page.title | escape }}" data-bpm="{{ p_bpm }}" data-plugins="{{ p_plugins }}" data-bassline="{{ p_bassline }}" data-automation="{{ p_automation }}" data-instruments="{{ p_instruments_str }}" data-samples="{{ p_samples }}" data-patterns="{{ p_patterns_str }}">
<div class="card project-card" data-title="{{ page.title | escape }}" style="height: 100%; background-color: #f0f8ff; border: 1px solid #cfe8fc; border-radius: 12px; display: flex; flex-direction: column; position: relative;">
<a href="{{ page.url | relative_url }}" style="text-decoration: none; flex: 1; display: flex; flex-direction: column;">
<div class="card-content has-text-centered p-4" style="flex: 1; display: flex; flex-direction: column;">
<div style="width: 50px; height: 50px; background-color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.5rem auto; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
<span class="icon" style="color: #3273dc;"><i class="fa-solid fa-music fa-lg"></i></span>
</div>
<p class="title is-6 mb-2" style="color: #205081; word-break: break-word; font-weight: 700; line-height: 1.2;">
{{ page.title | default: page.name | replace: '.html', '' }}
</p>
<div class="bpm-container mb-3" style="min-height: 25px;">
{% if p_bpm > 0 %}
<span class="tag is-dark is-rounded is-light" style="font-size: 0.7rem; font-weight: bold; border: 1px solid #ccc;">🎵 {{ p_bpm }} BPM</span>
{% else %}
<span class="tag is-white is-rounded border-tag" style="font-size: 0.65rem; color: #999;">⚠️ BPM N/A</span>
{% endif %}
</div>
<div style="flex: 1;"></div>
<div class="mt-auto pt-2" style="width: 100%; border-top: 1px dashed #eef6fc;">
{% assign unique_insts_page = p_insts_array | uniq | sort %}
{% if unique_insts_page.size > 0 %}
<details class="category-reveal mb-1" style="width: 100%;">
<summary class="tag is-white summary-btn"><div class="tag-label"><span>🎸</span> <span class="tag-text">INSTRUMENTS</span></div><span class="icon is-small chevron"><i class="fa-solid fa-chevron-down"></i></span></summary>
<div class="tags is-centered mt-1 mb-2 px-1" style="gap: 3px;">
{% for tag in unique_insts_page %}{% if tag != "" %}
<a href="{{ '/instruments/?instrument=' | append: tag | relative_url }}" class="tag is-light is-info clickable-tag" data-tag-value="{{ tag }}">{{ tag | truncate: 18 }}</a>
{% endif %}{% endfor %}
</div>
</details>
{% endif %}
{% assign has_patterns_display = false %}
{% capture patterns_html_content %}
<div class="px-1 py-1">
@ -382,6 +336,74 @@ permalink: /projetos/
</div>
</details>
{% endif %}
{% assign p_patterns_str = project_patterns_flat | join: ',' %}
{% assign p_instruments_str = p_insts_array | uniq | join: ',' %}
{% assign p_plugins = page.tags.plugin | join: ',' %}
{% assign p_bassline = page.tags.bassline | join: ',' %}
{% assign p_automation = page.tags.automation | join: ',' %}
{% assign p_samples = page.tags.sample | join: ',' %}
{% assign p_name = page.title | default: page.name | downcase %}
<div class="column is-12-mobile is-6-tablet is-4-desktop is-4-widescreen project-item" data-name="{{ p_name }}" data-title="{{ page.title | escape }}" data-bpm="{{ p_bpm }}" data-plugins="{{ p_plugins }}" data-bassline="{{ p_bassline }}" data-automation="{{ p_automation }}" data-instruments="{{ p_instruments_str }}" data-samples="{{ p_samples }}" data-patterns="{{ p_patterns_str }}">
<div class="card project-card" data-title="{{ page.title | escape }}" style="height: 100%; background-color: #f0f8ff; border: 1px solid #cfe8fc; border-radius: 12px; display: flex; flex-direction: column; position: relative; transition: all 0.3s ease;">
{% assign matching_beat = nil %}
{% if site.data.beats %}
{% assign proj_slug = page.file | slugify %}
{% for filename in site.data.beats %}
{% assign beat_slug = filename | remove: '.wav' | remove: '.mp3' | slugify %}
{% if beat_slug == proj_slug %}
{% assign matching_beat = filename %}
{% break %}
{% endif %}
{% endfor %}
{% endif %}
<a href="{{ page.url | relative_url }}" style="text-decoration: none; flex: 1; display: flex; flex-direction: column;">
<div class="card-content has-text-centered p-4" style="flex: 1; display: flex; flex-direction: column;">
<div style="width: 50px; height: 50px; background-color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.5rem auto; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
<span class="icon" style="color: #3273dc;"><i class="fa-solid fa-music fa-lg"></i></span>
</div>
<p class="title is-6 mb-2" style="color: #205081; word-break: break-word; font-weight: 700; line-height: 1.2;">
{{ page.title | default: page.name | replace: '.html', '' }}
</p>
<div class="bpm-container mb-3" style="min-height: 25px;">
{% if p_bpm > 0 %}
<span class="tag is-dark is-rounded is-light" style="font-size: 0.7rem; font-weight: bold; border: 1px solid #ccc;">🎵 {{ p_bpm }} BPM</span>
{% else %}
<span class="tag is-white is-rounded border-tag" style="font-size: 0.65rem; color: #999;">⚠️ BPM N/A</span>
{% endif %}
</div>
{% if matching_beat %}
<div class="audio-wrapper mb-3" style="width: 100%;" onclick="event.preventDefault();">
<audio class="audio-player" controls style="width: 100%; height: 28px; border-radius: 15px; opacity: 0.9;">
<source src="/mmpSearch/src_mmpSearch/wav/{{ matching_beat | url_encode }}" type="audio/wav">
Seu navegador não suporta áudio.
</audio>
</div>
{% endif %}
<div style="flex: 1;"></div>
<div class="mt-auto pt-2" style="width: 100%; border-top: 1px dashed #eef6fc;">
{% assign unique_insts_page = p_insts_array | uniq | sort %}
{% if unique_insts_page.size > 0 %}
<details class="category-reveal mb-1" style="width: 100%;">
<summary class="tag is-white summary-btn"><div class="tag-label"><span>🎸</span> <span class="tag-text">INSTRUMENTS</span></div><span class="icon is-small chevron"><i class="fa-solid fa-chevron-down"></i></span></summary>
<div class="tags is-centered mt-1 mb-2 px-1" style="gap: 3px;">
{% for tag in unique_insts_page %}{% if tag != "" %}
<a href="{{ '/instruments/?instrument=' | append: tag | relative_url }}" class="tag is-light is-info clickable-tag" data-tag-value="{{ tag }}">{{ tag | truncate: 18 }}</a>
{% endif %}{% endfor %}
</div>
</details>
{% endif %}
{% if page.tags.plugin.size > 0 %}
<details class="category-reveal mb-1" style="width: 100%;">
<summary class="tag is-white summary-btn"><div class="tag-label"><span>🔌</span> <span class="tag-text">PLUGINS</span></div><span class="icon is-small chevron"><i class="fa-solid fa-chevron-down"></i></span></summary>
@ -557,6 +579,10 @@ permalink: /projetos/
border-bottom: 1px dashed #f0f0f0;
}
.pattern-row:last-child { border-bottom: none; }
/* AUDIO PLAYER CUSTOM */
audio::-webkit-media-controls-panel { background-color: #f1f3f5; }
.project-card:hover audio::-webkit-media-controls-panel { background-color: #eef6fc; }
</style>
<script>
@ -739,6 +765,34 @@ document.addEventListener('DOMContentLoaded', function () {
// --- 3. LÓGICA DE UI E EVENT LISTENERS ---
// AUDIO PLAYER LOGIC
const audioPlayers = document.querySelectorAll('.audio-player');
audioPlayers.forEach(audio => {
audio.addEventListener('play', function() {
// Pausa outros
audioPlayers.forEach(otherAudio => {
if (otherAudio !== audio && !otherAudio.paused) {
otherAudio.pause();
}
});
// Highlight Visual
const card = audio.closest('.project-card');
if(card) {
card.style.borderColor = '#4caf50';
card.style.backgroundColor = '#f0fff4';
}
});
audio.addEventListener('pause', function() {
const card = audio.closest('.project-card');
if(card) {
// Volta ao original
card.style.borderColor = '#cfe8fc';
card.style.backgroundColor = '#f0f8ff';
}
});
});
// BPM Slider Logic
function updateSlider() {
let val1 = parseInt(sliderMin.value);