Catálogo
body {
font-family: ‘Roboto’, sans-serif;
background-color: #1e2336;
color: #fff;
margin: 0;
}
a {
text-decoration: none;
color: white;
}
p {
color: white;
}
.containerButtons {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.button {
width: 70vw;
display: inline-block;
padding: 10px;
margin: 5px;
font-size: large;
border: 2px solid #fff;
border-radius: 10px;
text-align: center;
text-decoration: none;
color: #fff;
font-weight: bold;
background-color: transparent;
}
.button:hover {
cursor: pointer;
}
.container {
text-align: left;
flex-direction: column;
align-items: center;
height: 100vh;
width: 100%;
}
.catalog {
display: flex;
flex-direction: column;
align-items: center;
background-color: #1e2336;
width: 60rem;
margin-left: -10rem;
}
.catalogElement {
display: flex;
flex-direction: row;
width: 100%;
color: white;
}
.textContent {
width: 70%;
}
.lineContainer {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.tutorialButton {
background-color: transparent;
border: 2px solid #fff;
border-radius: 25px;
color: #fff;
font-size: 16px;
padding: 10px 20px;
text-align: center;
}
.image {
width: 310px; /* Defina a largura máxima da imagem */
height: 180px; /* Defina a altura máxima da imagem */
overflow: hidden; /* Esconda qualquer conteúdo que ultrapasse a área do contêiner */
display: flex; /* Use o display flex para centralizar a imagem */
justify-content: center; /* Alinhe a imagem horizontalmente no centro */
align-items: center; /* Alinhe a imagem verticalmente no centro */
padding-right: 2rem;
}
.image img {
width: 100%; /* Faça a largura da imagem ocupar 100% do contêiner */
height: auto; /* Faça a altura da imagem se ajustar automaticamente à largura */
object-fit: cover; /* Cortar a imagem para que preencha todo o contêiner */
aspect-ratio: 16/9; /* Mantenha a proporção 3×2 */
}
hr {
border: none;
border-top: 1px solid gray;
width: 70%;
margin: 1.2em 0 3rem 0;
}
.tags {
font-family: ‘Roboto Mono’, monospace;
color: rgb(132, 132, 132);
font-size: 0.8rem;
}
.espaçamento {
margin: 0 auto;
height: 5rem;
background-color: #1e2336;
}
const buttons = document.querySelectorAll(‘.button’);
const list = document.getElementById(‘list’);
list.classList.add(‘catalog’);
// Mapeamento dos IDs dos botões para funções
const buttonFunctions = {
button1: fetchConteudos,
button2: fetchMetaversos,
button3: fetchFerramentas,
button4: fetchLaboratorios
};
buttons.forEach(button => {
button.addEventListener(‘click’, () => {
const buttonId = button.id;
// Chama a função correspondente com base no ID do botão
if (buttonFunctions.hasOwnProperty(buttonId)) {
const fetchDataFunction = buttonFunctions[buttonId];
fetchDataFunction();
}
});
});
function fetchConteudos(){
// Limpa a lista atual
list.innerHTML = ”;
let url = ‘https://snowy-feather-log.glitch.me/conteudos’;
getLabels(url);
}
function fetchMetaversos(){
list.innerHTML = ”;
let ResourcesArray = [];
let url = ‘https://snowy-feather-log.glitch.me/metaversos’;
getLabels(url);
}
function fetchFerramentas(){
list.innerHTML = ”;
let url = ‘https://snowy-feather-log.glitch.me/ferramentas’;
getLabels(url);
}
function fetchLaboratorios(){
list.innerHTML = ”;
let url = ‘https://snowy-feather-log.glitch.me/laboratorios’;
getLabels(url);
}
function getLabels(url){
fetch(url)
.then((response) => response.json())
.then(json => {
const data = json;
const catalogo = data;
console.log(catalogo);
catalogo.forEach(item => {
var catalogElement = document.createElement(‘div’);
catalogElement.classList.add(‘catalogElement’);
var imageElement = document.createElement(‘div’);
imageElement.classList.add(‘image’);
imageElement.innerHTML = `
`;
catalogElement.appendChild(imageElement);
var textContent = document.createElement(‘div’);
textContent.classList.add(‘textContent’);
var lineContainer = document.createElement(‘div’);
lineContainer.classList.add(‘lineContainer’);
var titleElement = document.createElement(‘div’);
titleElement.innerHTML = `
${item.nome}
`;
lineContainer.appendChild(titleElement);
if (item.linkDoTutorial != “”){
var tutorialButton = document.createElement(‘div’);
tutorialButton.innerHTML = `
Tutorial
`;
lineContainer.appendChild(tutorialButton);
}
textContent.appendChild(lineContainer);
var descriptionElement = document.createElement(‘p’);
descriptionElement.innerHTML = `
${item.descrição}
`;
textContent.appendChild(descriptionElement);
var tagsElement = document.createElement(‘p’);
tagsElement.classList.add(‘tags’);
tagsElement.innerHTML += item.tags;
textContent.appendChild(tagsElement);
catalogElement.appendChild(textContent);
list.appendChild(catalogElement);
list.innerHTML += “
“;
});
});
}
// Simula o clique no botão 1 ao abrir a página
fetchConteudos();
[meu_plugin]
