From 60728dada00a63eb5a75e148cb150109daba739a Mon Sep 17 00:00:00 2001 From: Lucas Conti Date: Wed, 10 Apr 2024 09:31:31 -0300 Subject: [PATCH] =?UTF-8?q?actualizaci=C3=B3n=20general=2010/04?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- cards.html | 24 ++--- cartaForm.html | 4 +- css/styles.css | 23 ++++ js/users.js | 288 +++++++++++++++++++++++++++++++++++++++++++++++++ users.html | 2 +- usuario.html | 1 + 6 files changed, 327 insertions(+), 15 deletions(-) create mode 100644 js/users.js diff --git a/cards.html b/cards.html index dfb5035..af103c1 100644 --- a/cards.html +++ b/cards.html @@ -79,7 +79,7 @@

Petg:

Fuerza 85% (Poder físico y capacidad de causar daño)
Percepción 75% (Sensibilidad para anticipar peligros)

- +
@@ -93,7 +93,7 @@

Abs:

Fuerza 85% (Poder físico y capacidad de causar daño)
Percepción 75% (Sensibilidad para anticipar peligros)

- +
@@ -106,7 +106,7 @@

Flexibles:

Fuerza 85% (Poder físico y capacidad de causar daño)
Percepción 75% (Sensibilidad para anticipar peligros)

- +
@@ -119,7 +119,7 @@

Pla:

Fuerza 85% (Poder físico y capacidad de causar daño)
Percepción 75% (Sensibilidad para anticipar peligros)

- +
@@ -132,7 +132,7 @@

Pcabs:

Fuerza 85% (Poder físico y capacidad de causar daño)
Percepción 75% (Sensibilidad para anticipar peligros)

- +
@@ -145,7 +145,7 @@

Nylon:

Fuerza 85% (Poder físico y capacidad de causar daño)
Percepción 75% (Sensibilidad para anticipar peligros)

- +
@@ -161,7 +161,7 @@

Petg:

Fuerza 85% (Poder físico y capacidad de causar daño)
Percepción 75% (Sensibilidad para anticipar peligros)

- +
@@ -174,7 +174,7 @@

Abs:

Fuerza 85% (Poder físico y capacidad de causar daño)
Percepción 75% (Sensibilidad para anticipar peligros)

- +
@@ -187,7 +187,7 @@

Flexibles:

Fuerza 85% (Poder físico y capacidad de causar daño)
Percepción 75% (Sensibilidad para anticipar peligros)

- +
@@ -200,7 +200,7 @@

Pla:

Fuerza 85% (Poder físico y capacidad de causar daño)
Percepción 75% (Sensibilidad para anticipar peligros)

- +
@@ -213,7 +213,7 @@

Pcabs:

Fuerza 85% (Poder físico y capacidad de causar daño)
Percepción 75% (Sensibilidad para anticipar peligros)

- +
@@ -226,7 +226,7 @@

Nylon:

Fuerza 85% (Poder físico y capacidad de causar daño)
Percepción 75% (Sensibilidad para anticipar peligros)

- +
diff --git a/cartaForm.html b/cartaForm.html index 7b274a5..8258602 100644 --- a/cartaForm.html +++ b/cartaForm.html @@ -33,7 +33,7 @@
-
  • Home
    • +
  • Home
  • Cartas
  • Usuarios
  • Contacto
    • diff --git a/css/styles.css b/css/styles.css index 27f9722..2a9b160 100644 --- a/css/styles.css +++ b/css/styles.css @@ -148,6 +148,7 @@ header { } + /* -----RESPONSIVE----- */ @media(max-width: 992px){ .navbar .links, @@ -768,4 +769,26 @@ h3{ /* END FOOTER */ +/* PERFIL USUARIO */ +.img-user{ + width: auto; + height: auto; + text-align: left; + margin: 0 auto; + /* border-radius: 10px; */ + box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), + 0 5px 5px rgba(0, 0, 0, 0.15); + transition: .4s; +} + +.img-user { + filter: grayscale(100%); + transition: filter 0.3s ease-in-out; /* Transición suave para el filtro */ +} + +/* Cambia la imagen a color cuando se hace hover */ +.img-user:hover { + filter: grayscale(0%); +} + diff --git a/js/users.js b/js/users.js new file mode 100644 index 0000000..8750641 --- /dev/null +++ b/js/users.js @@ -0,0 +1,288 @@ +document.addEventListener("DOMContentLoaded", function() { + const datos = [ + { + "imagen": "https://randomuser.me/api/portraits/women/34.jpg", + "usuario": "Petg", + "datos": [ + "e-mail: abs@example.com", + "Fecha de Nacimiento: 1995/08/15", + "Nacionalidad: Estados Unidos", + "Mazo: 100" + ] + }, + { + "imagen": "https://randomuser.me/api/portraits/men/44.jpg", + "usuario": "GamerX", + "datos": [ + "e-mail: gamerx@example.com", + "Fecha de Nacimiento: 1992/04/21", + "Nacionalidad: Canadá", + "Mazo: 75" + ] + }, + { + "imagen": "https://randomuser.me/api/portraits/men/3.jpg", + "usuario": "ProGamer", + "datos": [ + "e-mail: progamer@example.com", + "Fecha de Nacimiento: 1993/10/15", + "Nacionalidad: Estados Unidos", + "Mazo: 90" + ] + }, + { + "imagen": "https://randomuser.me/api/portraits/women/4.jpg", + "usuario": "CyberPlayer", + "datos": [ + "e-mail: cyberplayer@example.com", + "Fecha de Nacimiento: 1990/07/08", + "Nacionalidad: Reino Unido", + "Mazo: 85" + ] + }, + { + "imagen": "https://randomuser.me/api/portraits/men/25.jpg", + "usuario": "GamingMaster", + "datos": [ + "e-mail: gamingmaster@example.com", + "Fecha de Nacimiento: 1988/12/03", + "Nacionalidad: Australia", + "Mazo: 100" + ] + }, + { + "imagen": "https://randomuser.me/api/portraits/men/6.jpg", + "usuario": "Abs", + "usuario": "SkillfulGamer", + "datos": [ + "e-mail: skillfulgamer@example.com", + "Fecha de Nacimiento: 1995/03/27", + "Nacionalidad: Alemania", + "Mazo: 80" + ] + }, + { + "imagen": "https://randomuser.me/api/portraits/women/27.jpg", + "usuario": "GameAddict", + "datos": [ + "e-mail: gameaddict@example.com", + "Fecha de Nacimiento: 1991/05/12", + "Nacionalidad: Francia", + "Mazo: 95" + ] + }, + { + "imagen": "https://randomuser.me/api/portraits/women/8.jpg", + "usuario": "GamingNinja", + "datos": [ + "e-mail: gamingninja@example.com", + "Fecha de Nacimiento: 1987/09/19", + "Nacionalidad: Japón", + "Mazo: 110" + ] + }, + { + "imagen": "https://randomuser.me/api/portraits/women/9.jpg", + "usuario": "GamerProdigy", + "datos": [ + "e-mail: gamerprodigy@example.com", + "Fecha de Nacimiento: 1994/02/28", + "Nacionalidad: Corea del Sur", + "Mazo: 120" + ] + }, + { + "imagen": "https://randomuser.me/api/portraits/men/50.jpg", + "usuario": "LegendaryGamer", + "datos": [ + "e-mail: legendarygamer@example.com", + "Fecha de Nacimiento: 1989/06/15", + "Nacionalidad: México", + "Mazo: 105" + ] + }, + { + "imagen": "https://randomuser.me/api/portraits/men/39.jpg", + "usuario": "ElitePlayer", + "datos": [ + "e-mail: eliteplayer@example.com", + "Fecha de Nacimiento: 1996/11/23", + "Nacionalidad: Brasil", + "Mazo: 115" + ] + }, + { + "imagen": "https://randomuser.me/api/portraits/men/12.jpg", + "usuario": "GameChampion", + "datos": [ + "e-mail: gamechampion@example.com", + "Fecha de Nacimiento: 1992/08/30", + "Nacionalidad: España", + "Mazo: 100" + ] + }, + { + "imagen": "https://randomuser.me/api/portraits/men/33.jpg", + "usuario": "ProGamerX", + "datos": [ + "e-mail: progamerx@example.com", + "Fecha de Nacimiento: 1993/04/17", + "Nacionalidad: Italia", + "Mazo: 95" + ] + }, + { + "imagen": "https://randomuser.me/api/portraits/women/14.jpg", + "usuario": "CyberMaster", + "datos": [ + "e-mail: cybermaster@example.com", + "Fecha de Nacimiento: 1997/11/08", + "Nacionalidad: Portugal", + "Mazo: 80" + ] + }, + { + "imagen": "https://randomuser.me/api/portraits/men/40.jpg", + "usuario": "GamingLegend", + "datos": [ + "e-mail: gaminglegend@example.com", + "Fecha de Nacimiento: 1986/03/25", + "Nacionalidad: Argentina", + "Mazo: 110" + ] + }, + { + "imagen": "https://randomuser.me/api/portraits/women/26.jpg", + "usuario": "SkillfulPlayer", + "datos": [ + "e-mail: skillfulplayer@example.com", + "Fecha de Nacimiento: 1990/09/12", + "Nacionalidad: Chile", + "Mazo: 105" + ] + }, + { + "imagen": "https://randomuser.me/api/portraits/men/17.jpg", + "usuario": "GameAddictX", + "datos": [ + "e-mail: gameaddictx@example.com", + "Fecha de Nacimiento: 1995/01/29", + "Nacionalidad: Perú", + "Mazo: 100" + ] + }, + { + "imagen": "https://randomuser.me/api/portraits/men/18.jpg", + "usuario":"GamingNinjaX", + "datos": [ + "e-mail: gamingninjax@example.com", + "Fecha de Nacimiento: 1988/07/04", + "Nacionalidad: Colombia", + "Mazo: 90" + ] + }, + { + "imagen": "https://randomuser.me/api/portraits/men/19.jpg", + "usuario": "GamerProdigyX", + "datos": [ + "e-mail: gamerprodigyx@example.com", + "Fecha de Nacimiento: 1994/11/21", + "Nacionalidad: Venezuela", + "Mazo: 95" + ] + }, + { + "imagen": "https://randomuser.me/api/portraits/men/20.jpg", + "usuario": "LegendaryGamerX", + "datos": [ + "e-mail: legendgamerx@example.com", + "Fecha de Nacimiento: 1987/05/18", + "Nacionalidad: Ecuador", + "Mazo: 105" + ] + }, + { + "imagen": "https://randomuser.me/api/portraits/men/21.jpg", + "usuario": "ElitePlayerX", + "datos": [ + "e-mail: eliteplayerx@example.com", + "Fecha de Nacimiento: 1996/08/07", + "Nacionalidad: Bolivia", + "Mazo: 110" + ] + }, + { + "imagen": "https://randomuser.me/api/portraits/men/22.jpg", + "usuario": "GameChampionX", + "datos": [ + "e-mail: gamechampionx@example.com", + "Fecha de Nacimiento: 1992/12/03", + "Nacionalidad: Uruguay", + "Mazo: 120" + ] + } + + // Agrega más objetos JSON según necesites + ]; + + function generarTarjetas() { + const swiperWrapper = document.getElementById("swiper-wrapper"); + + datos.forEach((item) => { + const divSlide = document.createElement("div"); + divSlide.classList.add("swiper-slide"); + + 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-slide"); + img.src = item.imagen; + img.alt = "galeria-materiales"; + + const h4 = document.createElement("h4"); + h4.classList.add("title-materials", "title-slide"); + h4.textContent = item.usuario; + + const p = document.createElement("p"); + p.classList.add("párrafo-materials", "p-slide"); + item.datos.forEach((habilidad) => { + const span = document.createElement("span"); + span.classList.add("habilidad", "habilidad-slide"); + span.textContent = habilidad; + p.appendChild(span); + p.appendChild(document.createElement("br")); + }); + + const divInfoBtn = document.createElement("div"); + divInfoBtn.classList.add("info-btn", "btn-slide"); + + const button = document.createElement("button"); + button.classList.add("btn", "btn-danger", "btn-info"); + button.innerHTML = '+ Info'; + + divContentGallery.appendChild(img); + divContentGallery.appendChild(h4); + divContentGallery.appendChild(p); + divContentGallery.appendChild(divInfoBtn); + divInfoBtn.appendChild(button); + divGallery.appendChild(divContentGallery); + divSlide.appendChild(divGallery); + swiperWrapper.appendChild(divSlide); + }); + } + + // Inicializar Swiper después de generar las tarjetas + generarTarjetas(); + new Swiper(".swiper-container", { + slidesPerView: 5, + loop: true, + navigation: { + nextEl: ".swiper-button-next", + prevEl: ".swiper-button-prev", + }, + }); +}); diff --git a/users.html b/users.html index f165c6d..07ce439 100644 --- a/users.html +++ b/users.html @@ -121,7 +121,7 @@

    Follow Us

    - + diff --git a/usuario.html b/usuario.html index ec29818..f2c4312 100644 --- a/usuario.html +++ b/usuario.html @@ -79,6 +79,7 @@

    Usuarios

    +

    Nylon

    Ubicados en la Ciudad de Córdoba trabajamos los últimos seis años con reconocidas marcas y empresas que eligieron y siguen eligiendo un trato personalizado y completamente a medida de sus proyectos.