colocando botões
This commit is contained in:
jotachina committed
1 parent
709b35befe
commit
73bdf5778a
18 files changed
+429
-352
No files matched your search
@@ -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';
|
||||
}
|
||||
|
||||
});
|
||||
+76
-51
@@ -1,67 +1,92 @@
|
||||
body{
|
||||
margin: 0;
|
||||
font-family: Arial, sans-serif;
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
/* Estilos para o layout */
|
||||
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh; /* Para ocupar pelo menos toda a altura da tela */
|
||||
}
|
||||
|
||||
.container{
|
||||
display:flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
header {
|
||||
background-color: #f0f0f0;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.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);
|
||||
.wrapper {
|
||||
display: flex;
|
||||
flex: 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 {
|
||||
width: 200px;
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.sidebar-button:hover{
|
||||
background-color: #1abc9c;
|
||||
.sidebar nav ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.main-content{
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
background-color: #ecf0f1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
.sidebar nav ul li {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.post-grid{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3,1fr);
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
.sidebar nav ul li a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.post{
|
||||
background-color: #3498db;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
border-radius: 5px;
|
||||
height: 150px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.container {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.post-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.post {
|
||||
background-color: #f0f0f0;
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
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 */
|
||||
}
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user