Mudanças entre as edições de "Widget:Droflax"

De Wiki Gla
Ir para navegação Ir para pesquisar
Linha 1: Linha 1:
<includeonly>
<div class="personaje-box">
<div class="personaje-box">
    <div class="personaje-header">
  <div class="personaje-header">
        <div class="personaje-info">
    <div class="personaje-info">
            <div class="nombre">{{{nombre}}}</div>
      <div class="nombre">{{{nombre}}}</div>
            <div class="tier">Tier: {{{tier}}}</div>
      <div class="tier">Tier: {{{tier}}}</div>
            <div class="clase">Clase: {{{clase}}}</div>
      <div class="clase">Clase: {{{clase}}}</div>
        </div>
    </div>
        <img src="{{{imagen}}}" alt="Arte del personaje">
    <img src="{{{imagen}}}" alt="Arte del personaje" />
        <div class="personaje-tabs">
    <div class="personaje-tabs">
            <button class="tab-btn active" data-tab="habilidades">Habilidades</button>
      <button class="tab-btn active" data-tab="habilidades">Habilidades</button>
            <button class="tab-btn" data-tab="skins">Skins</button>
      <button class="tab-btn" data-tab="skins">Skins</button>
        </div>
     </div>
     </div>
  </div>


    <div class="tab-content active" id="habilidades">
  <div class="tab-content active" id="habilidades">
        <div class="habilidades-container">
    <div class="habilidades-container">
            <div class="prueba">
      <div class="prueba">
                <div class="cuadros-container"></div>
        <div class="cuadros-container"></div>
                <div class="descripcion-container"></div>
        <div class="descripcion-container"></div>
                <div class="atributos-container"></div>
        <div class="atributos-container"></div>
            </div>
      </div>
            <div class="video-container"></div>
      <div class="video-container"></div>
        </div>
     </div>
     </div>
  </div>


    <div class="tab-content" id="skins"></div>
  <div class="tab-content" id="skins">
    <!-- Skins se insertan aquí -->
  </div>
</div>
</div>


<script>
<script type="text/javascript">
(function () {
(function () {
    const buttons = document.querySelectorAll(".tab-btn");
  const habilidades = JSON.parse(`{{{habilidadesJson}}}`);
    const contents = document.querySelectorAll(".tab-content");
  const skins = JSON.parse(`{{{skinsJson}}}`);


    buttons.forEach(btn => {
  const cuadrosContainer = document.querySelector('.cuadros-container');
        btn.addEventListener("click", () => {
  const descripcionContainer = document.querySelector('.descripcion-container');
            buttons.forEach(b => b.classList.remove("active"));
  const atributosContainer = document.querySelector('.atributos-container');
            contents.forEach(c => c.classList.remove("active"));
  const videoContainer = document.querySelector('.video-container');
            btn.classList.add("active");
  const contenedorSkins = document.querySelector("#skins");
            const tab = btn.getAttribute("data-tab");
  const cuadros = [];
            document.getElementById(tab).classList.add("active");
        });
    });
})();


try {
  // Tabs
    const habilidades = JSON.parse(`{{{habilidadesJson}}}`);
  const buttons = document.querySelectorAll(".tab-btn");
    const skins = JSON.parse(`{{{skinsJson}}}`);
  const contents = document.querySelectorAll(".tab-content");


    const cuadrosContainer = document.querySelector('.cuadros-container');
  buttons.forEach(btn => {
     const descripcionContainer = document.querySelector('.descripcion-container');
     btn.addEventListener("click", () => {
    const atributosContainer = document.querySelector('.atributos-container');
      buttons.forEach(b => b.classList.remove("active"));
    const videoContainer = document.querySelector('.video-container');
      contents.forEach(c => c.classList.remove("active"));
    const contenedorSkins = document.querySelector('#skins');
    const cuadros = [];


    contenedorSkins.innerHTML = generarHTMLSkins(skins);
      btn.classList.add("active");
 
      const tab = btn.getAttribute("data-tab");
    habilidades.forEach((hab, index) => {
      document.getElementById(tab).classList.add("active");
        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 = `
                <h3 style="margin-bottom: 4px; color: white;">${hab.nombre}</h3>
                <p style="margin: 0 0 6px;">Level: ${hab.level}</p>
                <p>${hab.descripcion}</p>
            `;
            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();
  contenedorSkins.innerHTML = generarHTMLSkins(skins);


    function generarHTMLAtributos(valoresStr) {
  habilidades.forEach((hab, index) => {
        const valores = valoresStr.split(',').map(v => v.trim());
    const div = document.createElement('div');
        const labels = ["Recarga", "Energía", "Poder PVE", "Poder PVP"];
    div.classList.add('cuadro');
         const icons = [
    div.innerHTML = `<img src="${hab.icon}" alt="${hab.nombre}" style="width: 100%; height: 100%; object-fit: cover;">`;
            "/images/b/b1/Icon-cooldown.png",
    div.title = hab.nombre;
            "/images/3/38/Icon-energy.png",
    div.addEventListener('click', () => {
            "/images/7/7a/Icon-pve.png",
      descripcionContainer.innerHTML = `
            "/images/5/5f/Icon-pvp.png"
        <h3 style="margin-bottom: 4px; color: white;">${hab.nombre}</h3>
        ];
         <p style="margin: 0 0 6px;">Level: ${hab.level}</p>
        <p>${hab.descripcion}</p>
      `;
      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);
  });


        return `
  if (cuadros.length > 0) cuadros[0].click();
        <h4 class="attribute-title">Atributos</h4>
        <div class="attribute--cardsContainer">
            ${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="<p><b>${labels[i]}</b></p>">
                    <div class="cardAttribute">
                        <img src="${icons[i]}" class="cardAttribute--icon">
                        <h2 class="cardAttribute--value">${formatted}${i === 0 && formatted !== '-' ? ' seg' : ''}</h2>
                    </div>
                </span>`;
            }).join('')}
        </div>`;
    }


    function generarHTMLSkins(listaSkins) {
  function generarHTMLAtributos(valoresStr) {
        return `
    const valores = valoresStr.split(',').map(v => v.trim());
        <div class="card-skins">
    const labels = ["Recarga", "Energía", "Poder PVE", "Poder PVP"];
            <span class="card-skins-title">Skins</span>
    const icons = [
            <div class="skins--container">
      "/images/b/b1/Icon-cooldown.png",
                ${listaSkins.map(skin => `
      "/images/3/38/Icon-energy.png",
                <span class="simple-tooltip simple-tooltip-inline tooltipstered" data-simple-tooltip="<center><b>${skin.tooltip}</b></center>">
      "/images/7/7a/Icon-pve.png",
                    <img class="skins--imageSkin" src="${skin.imagen}" alt="">
      "/images/5/5f/Icon-pvp.png"
                 </span>`).join('')}
    ];
            </div>
    return `
        </div>`;
      <h4 class="attribute-title">Atributos</h4>
    }
      <div class="attribute--cardsContainer">
        ${valores.map((valor, i) => {
          let formatted;
          if (valor === "-") {
            formatted = "-";
          } else {
            let num = parseInt(valor);
            formatted = (i === 1 && !isNaN(num)) ? `${num > 0 ? '+' : ''}${num}` : valor;
          }
          return `
            <span class="simple-tooltip simple-tooltip-inline tooltipstered" data-simple-tooltip="<p><b>${labels[i]}</b></p>">
              <div class="cardAttribute">
                <img src="${icons[i]}" class="cardAttribute--icon">
                 <h2 class="cardAttribute--value">${formatted}${i === 0 && formatted !== '-' ? ' seg' : ''}</h2>
              </div>
            </span>`;
        }).join('')}
      </div>
    `;
  }


} catch (err) {
  function generarHTMLSkins(listaSkins) {
     console.error("Error procesando datos JSON:", err);
     return `
}
      <div class="card-skins">
        <span class="card-skins-title">Skins</span>
        <div class="skins--container">
          ${listaSkins.map(skin => `
            <span class="simple-tooltip simple-tooltip-inline tooltipstered" data-simple-tooltip="<center><b>${skin.tooltip}</b></center>">
              <img class="skins--imageSkin" src="${skin.imagen}" alt="">
            </span>`).join('')}
        </div>
      </div>
    `;
  }
})();
</script>
</script>
</includeonly>


<style>
<style>

Edição das 02h37min de 4 de maio de 2025


<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>

Disponível em “https://wiki.gla.com.br/index.php?title=Widget:Droflax&oldid=31935”