Skip to content

Commit

Permalink
actualización cards
Browse files Browse the repository at this point in the history
  • Loading branch information
@lucasger78
lucasger78 committed Apr 19, 2024
1 parent 28472ac commit b1e8483
Show file tree
Hide file tree
Showing 18 changed files with 122 additions and 78 deletions.
Binary file modified cards/card08.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified cards/card09.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified cards/card12.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added cards/card13.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added cards/card14.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added cards/card15.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added cards/card16.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added cards/card17.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added cards/card18.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added cards/card19.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added cards/card20.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added cards/card21.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added cards/card22.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added cards/card24.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified cards/cards.psd
View file
Binary file not shown.
Binary file added cards/cards23.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ <h4 class="destacada-facc-mito">Mitológica:</h4>
<div class="gallery-facc">
<div class="content-gallery-mounstro-facc">
<img class="img-facc" src="cards/card10.jpg" alt="galeria-materiales">
<h4 class="destacada-facc-mounstro">Mounstruos:</h4>
<h4 class="destacada-facc-mounstro">Monstruo:</h4>
<p class="párrafo-materials-facc">De las profundidades más oscuras emergen los monstruos, horrores que desafían la razón y comprensión. Con su sed insaciable de caos y destrucción, arrasan todo a su paso, consumiendo los reinos en una vorágine de pesadilla y desesperación.</p>
<div class="info-btn">
<button class="btn btn-danger btn-info"><a class="btn-a" href="usuario.html">+ Info</a></button>
Expand Down
198 changes: 121 additions & 77 deletions js/cardsIndex.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ document.addEventListener("DOMContentLoaded", function() {
"imagen": "cards/card01.jpg",
"titulo": "Petg",
"habilidades": [
"Faccion: (Zombie)",
"Agilidad 80% (Velocidad y destreza física)",
"Inteligencia 90% (Habilidad para resolver problemas)",
"Fuerza 85% (Poder físico y capacidad de causar daño)",
Expand All @@ -14,6 +15,7 @@ document.addEventListener("DOMContentLoaded", function() {
"imagen": "cards/card02.jpg",
"titulo": "Petg",
"habilidades": [
"Faccion: (Ninja)",
"Agilidad 80% (Velocidad y destreza física)",
"Inteligencia 90% (Habilidad para resolver problemas)",
"Fuerza 85% (Poder físico y capacidad de causar daño)",
Expand All @@ -24,6 +26,7 @@ document.addEventListener("DOMContentLoaded", function() {
"imagen": "cards/card03.jpg",
"titulo": "Petg",
"habilidades": [
"Faccion: (Ninja)",
"Agilidad 80% (Velocidad y destreza física)",
"Inteligencia 90% (Habilidad para resolver problemas)",
"Fuerza 85% (Poder físico y capacidad de causar daño)",
Expand All @@ -34,6 +37,7 @@ document.addEventListener("DOMContentLoaded", function() {
"imagen": "cards/card04.jpg",
"titulo": "Petg",
"habilidades": [
"Faccion: (Ninja)",
"Agilidad 80% (Velocidad y destreza física)",
"Inteligencia 90% (Habilidad para resolver problemas)",
"Fuerza 85% (Poder físico y capacidad de causar daño)",
Expand All @@ -44,6 +48,7 @@ document.addEventListener("DOMContentLoaded", function() {
"imagen": "cards/card05.jpg",
"titulo": "Petg",
"habilidades": [
"Faccion: (Ninja)",
"Agilidad 80% (Velocidad y destreza física)",
"Inteligencia 90% (Habilidad para resolver problemas)",
"Fuerza 85% (Poder físico y capacidad de causar daño)",
Expand All @@ -54,6 +59,7 @@ document.addEventListener("DOMContentLoaded", function() {
"imagen": "cards/card06.jpg",
"titulo": "Petg",
"habilidades": [
"Faccion: (Mitológica)",
"Agilidad 80% (Velocidad y destreza física)",
"Inteligencia 90% (Habilidad para resolver problemas)",
"Fuerza 85% (Poder físico y capacidad de causar daño)",
Expand All @@ -64,6 +70,7 @@ document.addEventListener("DOMContentLoaded", function() {
"imagen": "cards/card07.jpg",
"titulo": "Petg",
"habilidades": [
"Faccion: (Mitológica)",
"Agilidad 80% (Velocidad y destreza física)",
"Inteligencia 90% (Habilidad para resolver problemas)",
"Fuerza 85% (Poder físico y capacidad de causar daño)",
Expand All @@ -74,6 +81,7 @@ document.addEventListener("DOMContentLoaded", function() {
"imagen": "cards/card08.jpg",
"titulo": "Petg",
"habilidades": [
"Faccion: (Mitológica)",
"Agilidad 80% (Velocidad y destreza física)",
"Inteligencia 90% (Habilidad para resolver problemas)",
"Fuerza 85% (Poder físico y capacidad de causar daño)",
Expand All @@ -84,6 +92,7 @@ document.addEventListener("DOMContentLoaded", function() {
"imagen": "cards/card09.jpg",
"titulo": "Petg",
"habilidades": [
"Faccion: (Monstruo)",
"Agilidad 80% (Velocidad y destreza física)",
"Inteligencia 90% (Habilidad para resolver problemas)",
"Fuerza 85% (Poder físico y capacidad de causar daño)",
Expand All @@ -94,6 +103,7 @@ document.addEventListener("DOMContentLoaded", function() {
"imagen": "cards/card10.jpg",
"titulo": "Petg",
"habilidades": [
"Faccion: (Monstruo)",
"Agilidad 80% (Velocidad y destreza física)",
"Inteligencia 90% (Habilidad para resolver problemas)",
"Fuerza 85% (Poder físico y capacidad de causar daño)",
Expand All @@ -104,6 +114,7 @@ document.addEventListener("DOMContentLoaded", function() {
"imagen": "cards/card11.jpg",
"titulo": "Petg",
"habilidades": [
"Faccion: (Ninja)",
"Agilidad 80% (Velocidad y destreza física)",
"Inteligencia 90% (Habilidad para resolver problemas)",
"Fuerza 85% (Poder físico y capacidad de causar daño)",
Expand All @@ -114,112 +125,145 @@ document.addEventListener("DOMContentLoaded", function() {
"imagen": "cards/card12.jpg",
"titulo": "Petg",
"habilidades": [
"Faccion: (Zombie)",
"Agilidad 80% (Velocidad y destreza física)",
"Inteligencia 90% (Habilidad para resolver problemas)",
"Fuerza 85% (Poder físico y capacidad de causar daño)",
"Percepción 75% (Sensibilidad para anticipar peligros)"
]
},
{
"imagen": "cards/card08.jpg",
"imagen": "cards/card13.jpg",
"titulo": "Petg",
"habilidades": [
"Faccion: (Monstruo)",
"Agilidad 80% (Velocidad y destreza física)",
"Inteligencia 90% (Habilidad para resolver problemas)",
"Fuerza 85% (Poder físico y capacidad de causar daño)",
"Percepción 75% (Sensibilidad para anticipar peligros)"
]
},
{
"imagen": "cards/card09.jpg",
"imagen": "cards/card14.jpg",
"titulo": "Petg",
"habilidades": [
"Faccion: (Zombie)",
"Agilidad 80% (Velocidad y destreza física)",
"Inteligencia 90% (Habilidad para resolver problemas)",
"Fuerza 85% (Poder físico y capacidad de causar daño)",
"Percepción 75% (Sensibilidad para anticipar peligros)"
]
},
{
"imagen": "cards/card07.jpg",
"imagen": "cards/card15.jpg",
"titulo": "Petg",
"habilidades": [
"Faccion: (Monstruo)",
"Agilidad 80% (Velocidad y destreza física)",
"Inteligencia 90% (Habilidad para resolver problemas)",
"Fuerza 85% (Poder físico y capacidad de causar daño)",
"Percepción 75% (Sensibilidad para anticipar peligros)"
]
},
{
"imagen": "cards/card11.jpg",
"imagen": "cards/card16.jpg",
"titulo": "Petg",
"habilidades": [
"Faccion: (Mitológica)",
"Agilidad 80% (Velocidad y destreza física)",
"Inteligencia 90% (Habilidad para resolver problemas)",
"Fuerza 85% (Poder físico y capacidad de causar daño)",
"Percepción 75% (Sensibilidad para anticipar peligros)"
]
},
{
"imagen": "cards/card12.jpg",
"imagen": "cards/card17.jpg",
"titulo": "Petg",
"habilidades": [
"Faccion: (Monstruo)",
"Agilidad 80% (Velocidad y destreza física)",
"Inteligencia 90% (Habilidad para resolver problemas)",
"Fuerza 85% (Poder físico y capacidad de causar daño)",
"Percepción 75% (Sensibilidad para anticipar peligros)"
]
},
{
"imagen": "cards/card03.jpg",
"imagen": "cards/card18.jpg",
"titulo": "Petg",
"habilidades": [
"Faccion: (Zombie)",
"Agilidad 80% (Velocidad y destreza física)",
"Inteligencia 90% (Habilidad para resolver problemas)",
"Fuerza 85% (Poder físico y capacidad de causar daño)",
"Percepción 75% (Sensibilidad para anticipar peligros)"
]
},
{
"imagen": "cards/card06.jpg",
"imagen": "cards/card19.jpg",
"titulo": "Petg",
"habilidades": [
"Faccion: (Mitológica)",
"Agilidad 80% (Velocidad y destreza física)",
"Inteligencia 90% (Habilidad para resolver problemas)",
"Fuerza 85% (Poder físico y capacidad de causar daño)",
"Percepción 75% (Sensibilidad para anticipar peligros)"
]
},
{
"imagen": "cards/card01.jpg",
"imagen": "cards/card20.jpg",
"titulo": "Petg",
"habilidades": [
"Faccion: (Zombie)",
"Agilidad 80% (Velocidad y destreza física)",
"Inteligencia 90% (Habilidad para resolver problemas)",
"Fuerza 85% (Poder físico y capacidad de causar daño)",
"Percepción 75% (Sensibilidad para anticipar peligros)"
]
},
{
"imagen": "cards/card04.jpg",
"imagen": "cards/card21.jpg",
"titulo": "Petg",
"habilidades": [
"Faccion: (Mitológica)",
"Agilidad 80% (Velocidad y destreza física)",
"Inteligencia 90% (Habilidad para resolver problemas)",
"Fuerza 85% (Poder físico y capacidad de causar daño)",
"Percepción 75% (Sensibilidad para anticipar peligros)"
]
},
{
"imagen": "cards/card05.jpg",
"imagen": "cards/card22.jpg",
"titulo": "Petg",
"habilidades": [
"Faccion: (Zombie)",
"Agilidad 80% (Velocidad y destreza física)",
"Inteligencia 90% (Habilidad para resolver problemas)",
"Fuerza 85% (Poder físico y capacidad de causar daño)",
"Percepción 75% (Sensibilidad para anticipar peligros)"
]
},
},
{
"imagen": "cards/card23.jpg",
"titulo": "Petg",
"habilidades": [
"Faccion: (Monstruo)",
"Agilidad 80% (Velocidad y destreza física)",
"Inteligencia 90% (Habilidad para resolver problemas)",
"Fuerza 85% (Poder físico y capacidad de causar daño)",
"Percepción 75% (Sensibilidad para anticipar peligros)"
]
},
{
"imagen": "cards/card24.jpg",
"titulo": "Petg",
"habilidades": [
"Faccion: (Ninja)",
"Agilidad 80% (Velocidad y destreza física)",
"Inteligencia 90% (Habilidad para resolver problemas)",
"Fuerza 85% (Poder físico y capacidad de causar daño)",
"Percepción 75% (Sensibilidad para anticipar peligros)"
]
},
];

// GENERAR CARRUSEL
Expand Down Expand Up @@ -306,70 +350,70 @@ new Swiper(".swiper-container", {
});
});

// GENERAR TARJETA
function generarTarjetas2() {
const swiperWrapper = document.getElementById("swiper-wrapper");

datos.forEach((item) => {
const divGallery = document.createElement("div");
divGallery.classList.add("gallery");

const divContentGallery = document.createElement("div");
divContentGallery.classList.add("content-gallery");

const img = document.createElement("img");
img.classList.add("img-gallery");
img.src = item.imagen;
img.alt = "galeria-materiales";

const h4 = document.createElement("h4");
h4.classList.add("title-materials");
h4.textContent = item.titulo;

const divHabilidades = document.createElement("div");
divHabilidades.classList.add("habilidades");

item.habilidades.forEach((habilidad) => {
const habilidadParts = habilidad.split("(");
const habilidadName = habilidadParts[0].trim();
const habilidadDesc = habilidadParts[1].replace(")", "").trim();

const spanNombre = document.createElement("span");
spanNombre.classList.add("habilidad");
spanNombre.textContent = habilidadName;

const spanDesc = document.createElement("span");
spanDesc.textContent = `(${habilidadDesc})`;

// Aplicar negrita solo al nombre de la habilidad
spanNombre.style.fontWeight = "bold";

divHabilidades.appendChild(spanNombre);
divHabilidades.appendChild(spanDesc);
divHabilidades.appendChild(document.createElement("br"));
});

const divInfoBtn = document.createElement("div");
divInfoBtn.classList.add("info-btn");

const button = document.createElement("button");
button.classList.add("btn", "btn-danger", "btn-info");
const link = document.createElement("a");
link.href = "usuario.html";
link.classList.add("action_btn");
link.textContent = "+ Info";
button.appendChild(link);

divContentGallery.appendChild(img);
divContentGallery.appendChild(h4);
divContentGallery.appendChild(divHabilidades);
divContentGallery.appendChild(divInfoBtn);
divInfoBtn.appendChild(button);
divGallery.appendChild(divContentGallery);
swiperWrapper.appendChild(divGallery);
});
}

// Inicializar la generación de tarjetas
generarTarjetas2();
// // GENERAR TARJETA
// function generarTarjetas2() {
// const swiperWrapper = document.getElementById("swiper-wrapper");

// datos.forEach((item) => {
// const divGallery = document.createElement("div");
// divGallery.classList.add("gallery");

// const divContentGallery = document.createElement("div");
// divContentGallery.classList.add("content-gallery");

// const img = document.createElement("img");
// img.classList.add("img-gallery");
// img.src = item.imagen;
// img.alt = "galeria-materiales";

// const h4 = document.createElement("h4");
// h4.classList.add("title-materials");
// h4.textContent = item.titulo;

// const divHabilidades = document.createElement("div");
// divHabilidades.classList.add("habilidades");

// item.habilidades.forEach((habilidad) => {
// const habilidadParts = habilidad.split("(");
// const habilidadName = habilidadParts[0].trim();
// const habilidadDesc = habilidadParts[1].replace(")", "").trim();

// const spanNombre = document.createElement("span");
// spanNombre.classList.add("habilidad");
// spanNombre.textContent = habilidadName;

// const spanDesc = document.createElement("span");
// spanDesc.textContent = `(${habilidadDesc})`;

// // Aplicar negrita solo al nombre de la habilidad
// spanNombre.style.fontWeight = "bold";

// divHabilidades.appendChild(spanNombre);
// divHabilidades.appendChild(spanDesc);
// divHabilidades.appendChild(document.createElement("br"));
// });

// const divInfoBtn = document.createElement("div");
// divInfoBtn.classList.add("info-btn");

// const button = document.createElement("button");
// button.classList.add("btn", "btn-danger", "btn-info");
// const link = document.createElement("a");
// link.href = "usuario.html";
// link.classList.add("action_btn");
// link.textContent = "+ Info";
// button.appendChild(link);

// divContentGallery.appendChild(img);
// divContentGallery.appendChild(h4);
// divContentGallery.appendChild(divHabilidades);
// divContentGallery.appendChild(divInfoBtn);
// divInfoBtn.appendChild(button);
// divGallery.appendChild(divContentGallery);
// swiperWrapper.appendChild(divGallery);
// });
// }

// // Inicializar la generación de tarjetas
// generarTarjetas2();

0 comments on commit b1e8483

Please sign in to comment.