Widget:Droflax

{{{nombre}}}

Tier: {{{tier}}}

Clase: {{{clase}}}

       <img src="{{{imagen}}}" alt="Arte del personaje">

           <button class="tab-btn active" data-tab="habilidades">Habilidades</button>
           <button class="tab-btn" data-tab="skins">Skins</button>

<script> (function () {

   const buttons = document.querySelectorAll(".tab-btn");
   const contents = document.querySelectorAll(".tab-content");

   buttons.forEach(btn => {
       btn.addEventListener("click", () => {
           buttons.forEach(b => b.classList.remove("active"));
           contents.forEach(c => c.classList.remove("active"));
           btn.classList.add("active");
           const tab = btn.getAttribute("data-tab");
           document.getElementById(tab).classList.add("active");
       });
   });

})();

try {

   const habilidades = JSON.parse(`{{{habilidadesJson}}}`);
   const skins = JSON.parse(`{{{skinsJson}}}`);

   const cuadrosContainer = document.querySelector('.cuadros-container');
   const descripcionContainer = document.querySelector('.descripcion-container');
   const atributosContainer = document.querySelector('.atributos-container');
   const videoContainer = document.querySelector('.video-container');
   const contenedorSkins = document.querySelector('#skins');
   const cuadros = [];

   contenedorSkins.innerHTML = generarHTMLSkins(skins);

   habilidades.forEach((hab, index) => {
       const div = document.createElement('div');
       div.classList.add('cuadro');
       div.innerHTML = `<img src="${hab.icon}" alt="${hab.nombre}" style="width: 100%; height: 100%; object-fit: cover;">`;
       div.title = hab.nombre;
       div.addEventListener('click', () => {
           descripcionContainer.innerHTML = `

${hab.nombre}

Level: ${hab.level}

${hab.descripcion}

           `;
           atributosContainer.innerHTML = generarHTMLAtributos(hab.atributos);
           videoContainer.innerHTML = `
               <video id="video-habilidad" width="100%" height="250" controls loop playsinline>
                   <source src="${hab.video}" type="video/webm">
                   Tu navegador no soporta este video.
               </video>`;
           cuadros.forEach(c => c.classList.remove('activo'));
           div.classList.add('activo');
       });
       cuadros.push(div);
       cuadrosContainer.appendChild(div);
   });

   if (cuadros.length > 0) cuadros[0].click();

   function generarHTMLAtributos(valoresStr) {
       const valores = valoresStr.split(',').map(v => v.trim());
       const labels = ["Recarga", "Energía", "Poder PVE", "Poder PVP"];
       const icons = [
           "/images/b/b1/Icon-cooldown.png",
           "/images/3/38/Icon-energy.png",
           "/images/7/7a/Icon-pve.png",
           "/images/5/5f/Icon-pvp.png"
       ];

       return `

Atributos

           ${valores.map((valor, i) => {
               let formatted = valor === "-" ? "-" : parseInt(valor);
               formatted = (i === 1 && !isNaN(formatted)) ? `${formatted > 0 ? '+' : }${formatted}` : valor;
               return `

<span class="simple-tooltip simple-tooltip-inline tooltipstered" data-simple-tooltip="

${labels[i]}

">

                       <img src="${icons[i]}" class="cardAttribute--icon">

${formatted}${i === 0 && formatted !== '-' ? ' seg' : }

               `;
           }).join()}

`;

   }

   function generarHTMLSkins(listaSkins) {
       return `

           Skins

               ${listaSkins.map(skin => `

<span class="simple-tooltip simple-tooltip-inline tooltipstered" data-simple-tooltip="${skin.tooltip}">

                   <img class="skins--imageSkin" src="${skin.imagen}" alt="">
               `).join()}

`;

   }

} catch (err) {

   console.error("Error procesando datos JSON:", err);

} </script>

<style>

   .personaje-box {
       background: #1e1e1e;
       border-radius: 12px;
       padding: 16px;
       color: #fff;
       font-family: 'Segoe UI', sans-serif;
       max-width: 1100px;
       margin: auto;
       border: 2px solid #444;
   }

   .personaje-header {
       display: flex;
       gap: 20px;
       border-bottom: 2px solid #555;
       padding-bottom: 10px;
       flex-direction: column;
   }

   .personaje-header img {
       width: 230px;
       position: absolute;
       right: 16%;
   }

   .personaje-info .nombre {
       font-size: 32px;
       font-weight: bold;
   }

   .personaje-info .tier,
   .personaje-info .clase {
       font-size: 16px;
       color: #bbb;
   }

   .personaje-tabs {
       margin-block: 4px;
       display: flex;
       gap: 12px;
       justify-content: flex-start;
   }

   .tab-btn {
       padding: 8px 20px;
       background: #333;
       color: white;
       border: none;
       border-radius: 8px;
       font-size: 18px;
       cursor: pointer;
   }

   .tab-btn.active {
       background: #007bff;
       font-weight: bold;
   }

   .tab-content {
       display: none;
       margin-top: 20px;
       animation: fadeIn 0.4s ease;
   }

   .tab-content.active {
       display: block;
   }

   .habilidades-container {
       display: flex;
       gap: 20px;
   }

   .prueba {
       flex: 1;
       display: flex;
       flex-direction: column;
       gap: 10px;
   }

   .cuadros-container {
       display: flex;
       justify-content: center;
       flex-wrap: wrap;
       gap: 10px;
       width: 100%;
   }

   .cuadros-container .cuadro {
       width: 60px;
       height: 60px;
       border-radius: 5px;
       cursor: pointer;
   }

   .cuadro.activo {
       border: 1px solid #007bff;
   }

   .descripcion-container,
   .atributos-container {
       padding: 10px;
       background-color: #715757;
       border-radius: 5px;
   }

   .video-container {
       width: 400px;
       height: 200px;
       flex-shrink: 0;
       align-self: center;
       background-color: #000;
   }

   .attribute--cardsContainer {
       display: flex;
       justify-content: center;
       gap: 20px;
       flex-wrap: wrap;
       margin-top: 10px;
       background: unset;
       border: unset;
   }

   .cardAttribute {
       width: 80px;
       height: 90px;
       background-color: #473838;
       border-radius: 8px;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       text-align: center;
       padding: 5px;
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
       transition: transform 0.2s;
   }

   .cardAttribute--icon {
       height: 28px;
       margin-bottom: 14px;
   }

   .cardAttribute--value {
       font-size: 14px !important;
       font-weight: bold;
       margin: 0 !important;
       color: white;
       border-bottom: unset;
   }

   .attribute-title,
   .card-skins-title {
       font-size: 1.4em;
       text-align: center;
       justify-self: center;
       letter-spacing: 1px;
       font-family: sans-serif !important;
       border-bottom: 2px solid #9d9c9c;
       color: white !important;
       padding-bottom: 8px;
       margin-bottom: 16px;
       width: 75%;
   }

   .card-skins {
       padding: 16px;
       border-radius: 12px;
       box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
       margin-top: 20px;
   }

   .card-skins-title {
       display: block;
       border-bottom: unset;
       font-size: 18px;
       font-weight: bold;
       margin-bottom: 12px;
   }

   .skins--container {
       display: flex;
       gap: 16px;
       flex-wrap: wrap;
       justify-content: center;
   }

   .skins--imageSkin {
       width: 200px;
       height: auto;
       background-color: #fefefe;
       border-radius: 6px;
       border: 1px solid #ccc;
       transition: transform 0.2s;
   }

   .skins--imageSkin:hover {
       transform: scale(1.05);
   }

   @keyframes fadeIn {
       from {
           opacity: 0;
       }

       to {
           opacity: 1;
       }
   }

</style>