colocando botões
This commit is contained in:
parent
5477310b98
commit
b78cf024c4
5
Gemfile
5
Gemfile
|
@ -8,8 +8,6 @@ source "https://rubygems.org"
|
|||
# This will help ensure the proper Jekyll version is running.
|
||||
# Happy Jekylling!
|
||||
gem "jekyll", "~> 4.3.3"
|
||||
# This is the default theme for new Jekyll sites. You may change this to anything you like.
|
||||
gem "minima", "~> 2.5"
|
||||
# If you want to use GitHub Pages, remove the "gem "jekyll"" above and
|
||||
# uncomment the line below. To upgrade, run `bundle update github-pages`.
|
||||
# gem "github-pages", group: :jekyll_plugins
|
||||
|
@ -25,9 +23,6 @@ platforms :mingw, :x64_mingw, :mswin, :jruby do
|
|||
gem "tzinfo-data"
|
||||
end
|
||||
|
||||
# Performance-booster for watching directories on Windows
|
||||
gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin]
|
||||
|
||||
# Lock `http_parser.rb` gem to `v0.6.x` on JRuby builds since newer versions of the gem
|
||||
# do not have a Java counterpart.
|
||||
gem "http_parser.rb", "~> 0.6.0", :platforms => [:jruby]
|
||||
|
|
|
@ -0,0 +1,13 @@
|
|||
<aside class="sidebar">
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="{{ site.baseurl }}/">Home</a></li>
|
||||
<li><a href="{{ site.baseurl }}/quantasVezesAparecemInstrumentos">Repetições</a></li>
|
||||
<li><a href="{{ site.baseurl }}/quaisProjetos/">Quais Projetos</a></li>
|
||||
<li><a href="{{ site.baseurl }}/beatsDisponiveis/">Beats Disponíveis</a></li>
|
||||
<li><a href="{{ site.baseurl }}/arquivosMMP/" class="active">Arquivos MMP</a></li>
|
||||
<li><a href="{{ site.baseurl }}/buscas/">Buscas</a></li>
|
||||
<li><a href="{{ site.baseurl }}/about/">Sobre</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
|
@ -1,55 +1,33 @@
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="pt-br">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="assets/css/main.css">
|
||||
<title>{{ page.title }}</title>
|
||||
<!-- Adicione outros links de estilos necessários -->
|
||||
<link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
|
||||
<script src="{{ site.baseurl }}/assets/js/search.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<a href="/~jotachina/mmpSearch/_site/">Home</a>
|
||||
<a href="/~jotachina/mmpSearch/_site/quantasVezesAparecemInstrumentos">Repetições</a>
|
||||
<a href="/~jotachina/mmpSearch/_site/quaisProjetos/">Quais projetos usam quais instrumentos?</a>
|
||||
<a href="/~jotachina/mmpSearch/_site/beatsDisponiveis/">Beats disponíveis</a>
|
||||
<a href="/~jotachina/mmpSearch/_site/arquivosMMP/">Projetos disponíveis</a>
|
||||
<a href="/~jotachina/mmpSearch/_site/about/">Sobre</a>
|
||||
</nav>
|
||||
<header style="background-color: #f0f0f0; padding: 20px;">
|
||||
<h1>MMPSearch</h1>
|
||||
<img src="/assets/images/logo.jpg" alt="Logo MMPSearch">
|
||||
</header>
|
||||
|
||||
{% include sidebar.html %}
|
||||
|
||||
<main class="main-content">
|
||||
<div class="container">
|
||||
<aside>
|
||||
<div class="post-grid">
|
||||
<div class="post">1</div>
|
||||
<div class="post">1</div>
|
||||
<div class="post">1</div>
|
||||
<div class="post">1</div>
|
||||
<div class="post">1</div>
|
||||
<div class="post">1</div>
|
||||
<div class="post">1</div>
|
||||
<div class="post">1</div>
|
||||
<div class="post">1</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
</main>
|
||||
<div class="contet">
|
||||
<div class="wrapper">
|
||||
{{ content }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<!-- Rodapé -->
|
||||
Alice UFSJ
|
||||
<p>Alice UFSJ</p>
|
||||
<div class="footer-images">
|
||||
<a href="link-da-imagem1.html"><img src="/assets/images/image1.jpg" alt="Imagem 1"></a>
|
||||
<a href="link-da-imagem2.html"><img src="/assets/images/image2.jpg" alt="Imagem 2"></a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Scripts no final da página para melhor performance -->
|
||||
<!-- Adicione outros scripts conforme necessário -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
|
@ -1,45 +1,36 @@
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="pt-br">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="assets/css/main.css">
|
||||
<title></title>
|
||||
<!-- Adicione outros links de estilos necessários -->
|
||||
<link rel="stylesheet" href="/~jotachina/mmpSearch/_site/assets/css/style.css">
|
||||
<script src="/~jotachina/mmpSearch/_site/assets/js/search.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<a href="/~jotachina/mmpSearch/_site/">Home</a>
|
||||
<a href="/~jotachina/mmpSearch/_site/quantasVezesAparecemInstrumentos">Repetições</a>
|
||||
<a href="/~jotachina/mmpSearch/_site/quaisProjetos/">Quais projetos usam quais instrumentos?</a>
|
||||
<a href="/~jotachina/mmpSearch/_site/beatsDisponiveis/">Beats disponíveis</a>
|
||||
<a href="/~jotachina/mmpSearch/_site/arquivosMMP/">Projetos disponíveis</a>
|
||||
<a href="/~jotachina/mmpSearch/_site/about/">Sobre</a>
|
||||
</nav>
|
||||
<header style="background-color: #f0f0f0; padding: 20px;">
|
||||
<h1>MMPSearch</h1>
|
||||
<img src="/assets/images/logo.jpg" alt="Logo MMPSearch">
|
||||
</header>
|
||||
|
||||
<aside class="sidebar">
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/~jotachina/mmpSearch/_site/">Home</a></li>
|
||||
<li><a href="/~jotachina/mmpSearch/_site/quantasVezesAparecemInstrumentos">Repetições</a></li>
|
||||
<li><a href="/~jotachina/mmpSearch/_site/quaisProjetos/">Quais Projetos</a></li>
|
||||
<li><a href="/~jotachina/mmpSearch/_site/beatsDisponiveis/">Beats Disponíveis</a></li>
|
||||
<li><a href="/~jotachina/mmpSearch/_site/arquivosMMP/" class="active">Arquivos MMP</a></li>
|
||||
<li><a href="/~jotachina/mmpSearch/_site/buscas/">Buscas</a></li>
|
||||
<li><a href="/~jotachina/mmpSearch/_site/about/">Sobre</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<main class="main-content">
|
||||
<div class="container">
|
||||
<aside>
|
||||
<div class="post-grid">
|
||||
<div class="post">1</div>
|
||||
<div class="post">1</div>
|
||||
<div class="post">1</div>
|
||||
<div class="post">1</div>
|
||||
<div class="post">1</div>
|
||||
<div class="post">1</div>
|
||||
<div class="post">1</div>
|
||||
<div class="post">1</div>
|
||||
<div class="post">1</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
</main>
|
||||
<div class="contet">
|
||||
<div class="wrapper">
|
||||
<style type="text/css" media="screen">
|
||||
.container {
|
||||
margin: 10px auto;
|
||||
|
@ -62,15 +53,14 @@
|
|||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<!-- Rodapé -->
|
||||
Alice UFSJ
|
||||
<p>Alice UFSJ</p>
|
||||
<div class="footer-images">
|
||||
<a href="link-da-imagem1.html"><img src="/assets/images/image1.jpg" alt="Imagem 1"></a>
|
||||
<a href="link-da-imagem2.html"><img src="/assets/images/image2.jpg" alt="Imagem 2"></a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Scripts no final da página para melhor performance -->
|
||||
<!-- Adicione outros scripts conforme necessário -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="4.3.3">Jekyll</generator><link href="/~jotachina/mmpSearch/_site/feed.xml" rel="self" type="application/atom+xml" /><link href="/~jotachina/mmpSearch/_site/" rel="alternate" type="text/html" /><updated>2024-07-27T13:50:03-03:00</updated><id>/~jotachina/mmpSearch/_site/feed.xml</id><title type="html">Your awesome title</title><subtitle>Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.</subtitle><entry><title type="html">Welcome to Jekyll!</title><link href="/~jotachina/mmpSearch/_site/jekyll/update/2024/07/25/welcome-to-jekyll.html" rel="alternate" type="text/html" title="Welcome to Jekyll!" /><published>2024-07-25T17:06:48-03:00</published><updated>2024-07-25T17:06:48-03:00</updated><id>/~jotachina/mmpSearch/_site/jekyll/update/2024/07/25/welcome-to-jekyll</id><content type="html" xml:base="/~jotachina/mmpSearch/_site/jekyll/update/2024/07/25/welcome-to-jekyll.html"><![CDATA[<p>You’ll find this post in your <code class="language-plaintext highlighter-rouge">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class="language-plaintext highlighter-rouge">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>
|
||||
<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="4.3.3">Jekyll</generator><link href="/~jotachina/mmpSearch/_site/feed.xml" rel="self" type="application/atom+xml" /><link href="/~jotachina/mmpSearch/_site/" rel="alternate" type="text/html" /><updated>2024-07-28T13:15:01-03:00</updated><id>/~jotachina/mmpSearch/_site/feed.xml</id><title type="html">Your awesome title</title><subtitle>Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.</subtitle><entry><title type="html">Welcome to Jekyll!</title><link href="/~jotachina/mmpSearch/_site/jekyll/update/2024/07/25/welcome-to-jekyll.html" rel="alternate" type="text/html" title="Welcome to Jekyll!" /><published>2024-07-25T17:06:48-03:00</published><updated>2024-07-25T17:06:48-03:00</updated><id>/~jotachina/mmpSearch/_site/jekyll/update/2024/07/25/welcome-to-jekyll</id><content type="html" xml:base="/~jotachina/mmpSearch/_site/jekyll/update/2024/07/25/welcome-to-jekyll.html"><![CDATA[<p>You’ll find this post in your <code class="language-plaintext highlighter-rouge">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class="language-plaintext highlighter-rouge">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>
|
||||
|
||||
<p>Jekyll requires blog post files to be named according to the following format:</p>
|
||||
|
||||
|
|
|
@ -1,57 +1,63 @@
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="pt-br">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="assets/css/main.css">
|
||||
<title>MMPSearch</title>
|
||||
<!-- Adicione outros links de estilos necessários -->
|
||||
<link rel="stylesheet" href="/~jotachina/mmpSearch/_site/assets/css/style.css">
|
||||
<script src="/~jotachina/mmpSearch/_site/assets/js/search.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<a href="/~jotachina/mmpSearch/_site/">Home</a>
|
||||
<a href="/~jotachina/mmpSearch/_site/quantasVezesAparecemInstrumentos">Repetições</a>
|
||||
<a href="/~jotachina/mmpSearch/_site/quaisProjetos/">Quais projetos usam quais instrumentos?</a>
|
||||
<a href="/~jotachina/mmpSearch/_site/beatsDisponiveis/">Beats disponíveis</a>
|
||||
<a href="/~jotachina/mmpSearch/_site/arquivosMMP/">Projetos disponíveis</a>
|
||||
<a href="/~jotachina/mmpSearch/_site/about/">Sobre</a>
|
||||
</nav>
|
||||
<header style="background-color: #f0f0f0; padding: 20px;">
|
||||
<h1>MMPSearch</h1>
|
||||
<img src="/assets/images/logo.jpg" alt="Logo MMPSearch">
|
||||
</header>
|
||||
|
||||
<aside class="sidebar">
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/~jotachina/mmpSearch/_site/">Home</a></li>
|
||||
<li><a href="/~jotachina/mmpSearch/_site/quantasVezesAparecemInstrumentos">Repetições</a></li>
|
||||
<li><a href="/~jotachina/mmpSearch/_site/quaisProjetos/">Quais Projetos</a></li>
|
||||
<li><a href="/~jotachina/mmpSearch/_site/beatsDisponiveis/">Beats Disponíveis</a></li>
|
||||
<li><a href="/~jotachina/mmpSearch/_site/arquivosMMP/" class="active">Arquivos MMP</a></li>
|
||||
<li><a href="/~jotachina/mmpSearch/_site/buscas/">Buscas</a></li>
|
||||
<li><a href="/~jotachina/mmpSearch/_site/about/">Sobre</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
|
||||
<div class="wrapper">
|
||||
<main class="main-content">
|
||||
<div class="container">
|
||||
<aside>
|
||||
<div class="post-grid">
|
||||
<div class="post">1</div>
|
||||
<div class="post">1</div>
|
||||
<div class="post">1</div>
|
||||
<div class="post">1</div>
|
||||
<div class="post">1</div>
|
||||
<div class="post">1</div>
|
||||
<div class="post">1</div>
|
||||
<div class="post">1</div>
|
||||
<div class="post">1</div>
|
||||
<!-- Exemplo de posts -->
|
||||
<div class="post">Post 1</div>
|
||||
<div class="post">Post 2</div>
|
||||
<div class="post">Post 3</div>
|
||||
<div class="post">Post 4</div>
|
||||
<div class="post">Post 5</div>
|
||||
<div class="post">Post 6</div>
|
||||
<div class="post">Post 7</div>
|
||||
<div class="post">Post 8</div>
|
||||
<div class="post">Post 9</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
</main>
|
||||
<div class="contet">
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<!-- Rodapé -->
|
||||
Alice UFSJ
|
||||
<p>Alice UFSJ</p>
|
||||
<div class="footer-images">
|
||||
<a href="link-da-imagem1.html"><img src="/assets/images/image1.jpg" alt="Imagem 1"></a>
|
||||
<a href="link-da-imagem2.html"><img src="/assets/images/image2.jpg" alt="Imagem 2"></a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Scripts no final da página para melhor performance -->
|
||||
<!-- Adicione outros scripts conforme necessário -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
|
@ -1,18 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
/* Error: Can't find stylesheet to import.
|
||||
* ,
|
||||
* 1 | @import 'variables';
|
||||
* | ^^^^^^^^^^^
|
||||
* '
|
||||
* assets/main.scss 1:9 root stylesheet */
|
||||
body::before {
|
||||
font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono", "Droid Sans Mono", monospace, monospace;
|
||||
white-space: pre;
|
||||
display: block;
|
||||
padding: 1em;
|
||||
margin-bottom: 1em;
|
||||
border-bottom: 2px solid black;
|
||||
content: "Error: Can't find stylesheet to import.\a ╷\a 1 │ @import 'variables';\a │ ^^^^^^^^^^^\a ╵\a assets/main.scss 1:9 root stylesheet";
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=main.css.map */
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"sourceRoot":"","sources":["../main.css"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;EACE;EAEA;EACA;EACA;EACA;EACA;EACA","file":"main.css"}
|
|
@ -1,68 +0,0 @@
|
|||
body {
|
||||
margin: 0;
|
||||
font-family: Arial, sans-serif;
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 200px;
|
||||
background-color: #2c3e50;
|
||||
color: #ecf0f1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20px;
|
||||
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.sidebar-button {
|
||||
background-color: #34495e;
|
||||
color: #ecf0f1;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sidebar-button:hover {
|
||||
background-color: #1abc9c;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
background-color: #ecf0f1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.post-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.post {
|
||||
background-color: #3498db;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
border-radius: 5px;
|
||||
height: 150px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=main.css.map */
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"sourceRoot":"","sources":["../main.scss"],"names":[],"mappings":"AAAA;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"main.css"}
|
|
@ -0,0 +1,56 @@
|
|||
document.addEventListener("DOMContentLoaded", function() {
|
||||
var fileItemsMMP = document.querySelectorAll('#file-list-mmp .file-item');
|
||||
var fileItemsWAV = document.querySelectorAll('#file-list-wav li');
|
||||
|
||||
// Buscar por instrumento usando o campo de entrada para MMP
|
||||
var searchButton = document.getElementById('search-button');
|
||||
searchButton.addEventListener('click', function() {
|
||||
var searchInput = document.getElementById('instrument-search').value.trim().toLowerCase();
|
||||
if (searchInput === '') {
|
||||
resetSearchMMP();
|
||||
return;
|
||||
}
|
||||
fileItemsMMP.forEach(function(item) {
|
||||
var instrumentsList = item.querySelectorAll('.instrument-list .instrument-name');
|
||||
var hasInstrument = false;
|
||||
instrumentsList.forEach(function(instrument) {
|
||||
var instrumentName = instrument.getAttribute('data-instrument').toLowerCase();
|
||||
if (instrumentName.includes(searchInput)) {
|
||||
hasInstrument = true;
|
||||
}
|
||||
});
|
||||
if (hasInstrument) {
|
||||
item.style.display = 'block';
|
||||
} else {
|
||||
item.style.display = 'none';
|
||||
}
|
||||
});
|
||||
// Exibir a lista de arquivos MMP após a busca
|
||||
document.getElementById('file-list-mmp').style.display = 'block';
|
||||
});
|
||||
|
||||
// Buscar por nome do arquivo WAV
|
||||
var searchWavButton = document.getElementById('search-wav-button');
|
||||
searchWavButton.addEventListener('click', function() {
|
||||
var searchInput = document.getElementById('file-wav-search').value.trim().toLowerCase();
|
||||
fileItemsWAV.forEach(function(item) {
|
||||
var fileName = item.querySelector('span').textContent.toLowerCase();
|
||||
if (fileName.includes(searchInput)) {
|
||||
item.style.display = 'block';
|
||||
} else {
|
||||
item.style.display = 'none';
|
||||
}
|
||||
});
|
||||
// Exibir a lista de arquivos WAV após a busca
|
||||
document.getElementById('file-list-wav').style.display = 'block';
|
||||
});
|
||||
|
||||
// Função para resetar a busca para arquivos MMP
|
||||
function resetSearchMMP() {
|
||||
fileItemsMMP.forEach(function(item) {
|
||||
item.style.display = 'block';
|
||||
});
|
||||
document.getElementById('file-list-mmp').style.display = 'none';
|
||||
}
|
||||
|
||||
});
|
115
assets/main.scss
115
assets/main.scss
|
@ -1,67 +1,92 @@
|
|||
body{
|
||||
margin: 0;
|
||||
/* Estilos para o layout */
|
||||
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.container{
|
||||
display:flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sidebar{
|
||||
width: 200px;
|
||||
background-color: #2c3e50;
|
||||
color: #ecf0f1;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh; /* Para ocupar pelo menos toda a altura da tela */
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: #f0f0f0;
|
||||
padding: 20px;
|
||||
box-shadow: 2px 0 5px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.sidebar-button{
|
||||
background-color: #34495e;
|
||||
color: #ecf0f1;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
.wrapper {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 200px;
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.sidebar nav ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sidebar nav ul li {
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sidebar-button:hover{
|
||||
background-color: #1abc9c;
|
||||
.sidebar nav ul li a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.main-content{
|
||||
.container {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
background-color: #ecf0f1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.post-grid{
|
||||
.post-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3,1fr);
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.post{
|
||||
background-color: #3498db;
|
||||
color: #fff;
|
||||
.post {
|
||||
background-color: #f0f0f0;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
border-radius: 5px;
|
||||
height: 150px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: #ccc;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-images {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.footer-images img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 5px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* Estilos para tornar o layout responsivo */
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.wrapper {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 100%;
|
||||
order: 2; /* Altera a ordem para colocar a sidebar abaixo no layout mobile */
|
||||
}
|
||||
|
||||
.container {
|
||||
order: 1; /* Coloca a área de conteúdo antes da sidebar no layout mobile */
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -1,9 +1,22 @@
|
|||
---
|
||||
# Feel free to add content and custom Front Matter to this file.
|
||||
# To modify the layout, see https://jekyllrb.com/docs/themes/#overriding-theme-defaults
|
||||
|
||||
layout: default
|
||||
|
||||
title: "MMPSearch"
|
||||
title: MMPSearch
|
||||
---
|
||||
|
||||
<main class="main-content">
|
||||
<div class="container">
|
||||
<div class="post-grid">
|
||||
<!-- Exemplo de posts -->
|
||||
<div class="post">Post 1</div>
|
||||
<div class="post">Post 2</div>
|
||||
<div class="post">Post 3</div>
|
||||
<div class="post">Post 4</div>
|
||||
<div class="post">Post 5</div>
|
||||
<div class="post">Post 6</div>
|
||||
<div class="post">Post 7</div>
|
||||
<div class="post">Post 8</div>
|
||||
<div class="post">Post 9</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
|
22
mmp_files.md
22
mmp_files.md
|
@ -4,28 +4,32 @@ title: Arquivos MMP Processados
|
|||
permalink: /arquivosMMP/
|
||||
---
|
||||
|
||||
<h2>Arquivos MMP disponíveis:</h2>
|
||||
<main class="main-content">
|
||||
<div class="container">
|
||||
<h2>Arquivos MMP disponíveis:</h2>
|
||||
|
||||
<ul>
|
||||
{% for files in site.data %}
|
||||
<ul>
|
||||
{% for files in site.data %}
|
||||
{% assign file_data = files %}
|
||||
{% for item in file_data %}
|
||||
{% if item.file %}
|
||||
<li>File path: <strong>{{ item.file }}</strong></li>
|
||||
<li><strong>Arquivo:</strong> {{ item.file }}</li>
|
||||
{% endif %}
|
||||
{% if item.bpm %}
|
||||
<li>BPM: {{ item.bpm }}</li>
|
||||
<li><strong>BPM:</strong> {{ item.bpm }}</li>
|
||||
{% endif %}
|
||||
<ul>
|
||||
{% for track in item.tracks %}
|
||||
<li>{{ track.track_name }} ({{ track.type }})</li>
|
||||
<li><strong>Nome da Faixa:</strong> {{ track.track_name }} ({{ track.type }})</li>
|
||||
<ul>
|
||||
{% for instrument in track.instruments %}
|
||||
<li>{{ instrument.instrument_name }}</li>
|
||||
<li><strong>Instrumento:</strong> {{ instrument.instrument_name }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</main>
|
||||
|
|
|
@ -1,12 +1,14 @@
|
|||
---
|
||||
layout: default
|
||||
title: Instrumentos Similares
|
||||
title: Projetos com Instrumentos Similares
|
||||
permalink: /quaisProjetos/
|
||||
---
|
||||
|
||||
<h2>Arquivos que possuem instrumentos similares:</h2>
|
||||
<ul>
|
||||
{% for item in site.data.processed_data %}
|
||||
<main class="main-content">
|
||||
<div class="container">
|
||||
<h2>Arquivos que possuem instrumentos similares:</h2>
|
||||
<ul>
|
||||
{% for item in site.data.processed_data %}
|
||||
<li>{{ item.instrument_name }}:
|
||||
<ul>
|
||||
{% for file_name in item.files %}
|
||||
|
@ -14,5 +16,8 @@ permalink: /quaisProjetos/
|
|||
{% endfor %}
|
||||
</ul>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
|
|
@ -1,19 +1,23 @@
|
|||
---
|
||||
layout: default
|
||||
title: Quantidade de repetições de instrumentos
|
||||
title: Quantidade de Repetições de Instrumentos
|
||||
permalink: /quantasVezesAparecemInstrumentos/
|
||||
---
|
||||
|
||||
<h2>Quantidade de vezes que cada instrumento é utilizado:</h2>
|
||||
<ul id="instrument-list">
|
||||
{% for item in site.data.processed_data %}
|
||||
<main class="main-content">
|
||||
<div class="container">
|
||||
<h2>Quantidade de vezes que cada instrumento é utilizado:</h2>
|
||||
<ul id="instrument-list">
|
||||
{% for item in site.data.processed_data %}
|
||||
<li data-count="{{ item.count }}">{{ item.instrument_name }}: {{ item.count }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
// Apenas para deixar em ordem decrescente
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
// Ordenação dos itens em ordem decrescente por contagem
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
var instrumentList = document.getElementById('instrument-list');
|
||||
var items = Array.from(instrumentList.children);
|
||||
|
||||
|
@ -27,5 +31,6 @@ document.addEventListener("DOMContentLoaded", function() {
|
|||
items.forEach(function(item) {
|
||||
instrumentList.appendChild(item);
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
@ -0,0 +1,73 @@
|
|||
---
|
||||
layout: default
|
||||
title: Arquivos MMP Disponíveis
|
||||
permalink: /buscas/
|
||||
---
|
||||
|
||||
<main class="content">
|
||||
<div class="container">
|
||||
<h2>Arquivos MMP disponíveis:</h2>
|
||||
|
||||
<div id="tags">
|
||||
<strong>Instrumentos:</strong>
|
||||
<ul id="instrument-tags">
|
||||
{% assign all_instruments = site.data.all_instruments %}
|
||||
{% for instrument in all_instruments %}
|
||||
<li class="tag" data-instrument="{{ instrument }}">{{ instrument }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="search">
|
||||
<label for="instrument-search">Buscar instrumento:</label>
|
||||
<input type="text" id="instrument-search" placeholder="Digite o nome do instrumento...">
|
||||
<button id="search-button">Buscar</button>
|
||||
</div>
|
||||
|
||||
<div id="search-wav">
|
||||
<label for="file-wav-search">Buscar beat:</label>
|
||||
<input type="text" id="file-wav-search" placeholder="Buscar por nome do arquivo">
|
||||
<button id="search-wav-button">Buscar</button>
|
||||
</div>
|
||||
|
||||
<ul id="file-list-wav" style="display: none;">
|
||||
{% assign files = site.static_files %}
|
||||
{% for file in files %}
|
||||
{% if file.path contains '/mmp/wav/' %}
|
||||
<li class="file-wav-item">
|
||||
<span>{{ file.name }}</span><br>
|
||||
<audio controls>
|
||||
<source src="{{ file.path | relative_url }}" type="audio/wav">
|
||||
Seu navegador não suporta o elemento de áudio.
|
||||
</audio>
|
||||
</li>
|
||||
<br>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
<ul id="file-list-mmp" style="display: none;">
|
||||
{% for files in site.data %}
|
||||
{% assign file_data = files %}
|
||||
{% for item in file_data %}
|
||||
{% if item.file %}
|
||||
<li class="file-item" data-file="{{ item.file }}">
|
||||
<strong>Arquivo:</strong> {{ item.file }}<br>
|
||||
{% if item.bpm %}
|
||||
<strong>BPM:</strong> {{ item.bpm }}<br>
|
||||
{% endif %}
|
||||
<strong>Instrumentos:</strong>
|
||||
<ul class="instrument-list">
|
||||
{% for track in item.tracks %}
|
||||
{% for instrument in track.instruments %}
|
||||
<li class="instrument-name" data-instrument="{{ instrument.instrument_name }}">{{ instrument.instrument_name }}</li>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</main>
|
28
wavFiles.md
28
wavFiles.md
|
@ -1,27 +1,29 @@
|
|||
---
|
||||
layout: default
|
||||
title: Músicas
|
||||
title: Beats Disponíveis
|
||||
permalink: /beatsDisponiveis/
|
||||
---
|
||||
|
||||
<h1>Lista de Beats</h1>
|
||||
<main class="main-content">
|
||||
<div class="container">
|
||||
<h1>Lista de Beats</h1>
|
||||
<p>Aqui estão os beats disponíveis.</p>
|
||||
|
||||
Aqui estão os beats disponíveis.
|
||||
|
||||
<ul>
|
||||
{% assign files = site.static_files %}
|
||||
{% for file in files %}
|
||||
<ul>
|
||||
{% assign files = site.static_files %}
|
||||
{% for file in files %}
|
||||
{% if file.path contains '/mmp/wav/' %}
|
||||
<li>
|
||||
<span> {{ file.name }} </span>
|
||||
<br>
|
||||
<span>{{ file.name }}</span><br>
|
||||
<audio controls>
|
||||
<source src="{{ file.path | relative_url }}"
|
||||
type="audio/wav">
|
||||
<source src="{{ file.path | relative_url }}" type="audio/wav">
|
||||
Seu navegador não suporta o elemento de áudio.
|
||||
</audio>
|
||||
</li>
|
||||
<br>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
|
Loading…
Reference in New Issue