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

De Wiki Gla
Ir para navegação Ir para pesquisar
 
(6 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 1: Linha 1:
<noinclude>
Esta widget exibe requisitos em abas (Normal / Hard) de forma responsiva.


<head>
=== Parâmetros ===
  <meta charset="UTF-8">
{| class="wikitable"
  <title>Skill Viewer - Mixed Media</title>
! Parâmetro !! Descrição !! Padrão
 
|-
  <style>
| normal_nivel = Nível mínimo para o modo Normal || 140
    body {
|-
      margin: 0;
| normal_equip || Equipamento recomendado (Normal) || Set +8
      padding: 40px 0;
|-
      font-family: Arial, Helvetica, sans-serif;
| hard_personagem || Requisito de personagem (Hard) || personagem 4 ou 5 estrelas (Diamante)
      background: #ffffff;
|-
      color: #000;
| hard_equip || Equipamento recomendado (Hard) || Set +16
    }
|-
 
| normal_extra || Linha extra de requisito Normal (opcional) || (vazio)
    .skill-box {
|-
      max-width: 900px;
| hard_extra || Linha extra de requisito Hard (opcional) || (vazio)
      margin: 0 auto;
|}
      text-align: center;
    }
 
    .skill-tabs {
      display: flex;
      justify-content: center;
      gap: 12px;
      margin-bottom: 25px;
    }
 
    .skill-tab {
      width: 45px;
      height: 45px;
      background: #222;
      color: #fff;
      border: none;
      border-radius: 6px;
      font-size: 18px;
      font-weight: bold;
      cursor: pointer;
    }
 
    .skill-tab.active {
      background: #000;
    }
 
    .skill-title {
      font-size: 26px;
      font-weight: bold;
      margin-bottom: 10px;
    }
 
    .skill-description p {
      margin: 4px 0;
      font-size: 14px;
    }
 
    .skill-media {
      margin-top: 25px;
      background: #1f1f1f;
      border-radius: 10px;
      overflow: hidden;
    }
 
    .skill-media iframe,
    .skill-media video {
      width: 100%;
      height: 420px;
      display: block;
      border: none;
    }
  </style>
</head>
 
<body>
  <div class="skill-box">
 
    <div class="skill-tabs">
      <button class="skill-tab active" data-skill="0">1</button>
      <button class="skill-tab" data-skill="1">2</button>
      <button class="skill-tab" data-skill="2">3</button>
      <button class="skill-tab" data-skill="3">4</button>
      <button class="skill-tab" data-skill="4">5</button>
      <button class="skill-tab" data-skill="5">6</button>
    </div>
 
    <h2 class="skill-title">Habilidade 1</h2>
 
    <div class="skill-description"></div>
 
    <div class="skill-media"></div>


=== Exemplo de uso ===
<pre>
{{#widget:Gb
| normal_nivel = 140
| normal_equip = Set +8
| hard_personagem = personagem 4 ou 5 estrelas (Diamante)
| hard_equip = Set +16
}}
</pre>
</noinclude><includeonly><html>
<style>
.rtab-wrap{font-family:sans-serif;max-width:600px;margin:0 auto}
.rtab-btns{display:flex;border-bottom:2px solid #a2a9b1;margin-bottom:0}
.rtab-btn{padding:8px 22px;font-size:14px;font-weight:bold;color:#54595d;background:transparent;border:none;border-bottom:3px solid transparent;margin-bottom:-2px;cursor:pointer;display:flex;align-items:center;gap:6px}
.rtab-btn:hover{color:#202122}
.rtab-btn.active{color:#202122;border-bottom-color:#3680b0}
.rtab-badge{font-size:11px;padding:2px 8px;border-radius:20px;font-weight:bold}
.badge-n{background:#ddeeff;color:#185FA5}
.badge-h{background:#fce8e8;color:#a32d2d}
.rtab-panel{display:none;padding:14px 2px}
.rtab-panel.active{display:block}
.rtab-title{font-size:11px;font-weight:bold;color:#72777d;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
.rtab-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.rtab-list li{display:flex;align-items:flex-start;gap:8px;font-size:14px;color:#202122;line-height:1.5}
.rtab-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:5px}
.dot-n{background:#3680b0}
.dot-h{background:#e24b4a}
@media(max-width:480px){.rtab-btn{padding:8px 14px;font-size:13px}}
</style>
<div class="rtab-wrap">
  <div class="rtab-btns">
    <button class="rtab-btn active" onclick="rtSwitch('n',this)">
      Normal <span class="rtab-badge badge-n">Nível {{{normal_nivel|140}}}</span>
    </button>
    <button class="rtab-btn" onclick="rtSwitch('h',this)">
      Hard <span class="rtab-badge badge-h">{{{hard_equip|Set +16}}}</span>
    </button>
  </div>
  <div id="rtpanel-n" class="rtab-panel active">
    <div class="rtab-title">Requisitos — Normal</div>
    <ul class="rtab-list">
      <li><span class="rtab-dot dot-n"></span><span>Nível mínimo: <b>{{{normal_nivel|140}}}</b></span></li>
      <li><span class="rtab-dot dot-n"></span><span>Equipamento recomendado: <b>{{{normal_equip|Set +8}}}</b></span></li>
      {{{normal_extra|}}}
    </ul>
  </div>
  <div id="rtpanel-h" class="rtab-panel">
    <div class="rtab-title">Requisitos — Hard</div>
    <ul class="rtab-list">
      <li><span class="rtab-dot dot-h"></span><span>Recomendado utilizar um <b>{{{hard_personagem|personagem 4 ou 5 estrelas (Diamante)}}}</b></span></li>
      <li><span class="rtab-dot dot-h"></span><span>Equipamento recomendado: <b>{{{hard_equip|Set +16}}}</b></span></li>
      {{{hard_extra|}}}
    </ul>
   </div>
   </div>
 
</div>
  <script>
<script>
    const skills = [
function rtSwitch(tab,btn){
      {
  ['n','h'].forEach(function(t){
        title: "Habilidade 1",
     document.getElementById('rtpanel-'+t).classList.remove('active');
        description: [
  });
          "Descrição da habilidade 1",
  document.querySelectorAll('.rtab-btn').forEach(function(b){b.classList.remove('active');});
          "Cooldown: 10s"
  document.getElementById('rtpanel-'+tab).classList.add('active');
        ],
  btn.classList.add('active');
        type: "iframe",
}
        src: "https://www.youtube.com/embed/dQw4w9WgXcQ"
</script>
      },
</html></includeonly>
      {
        title: "Habilidade 2",
        description: [
          "Descrição da habilidade 2",
          "Dano em área"
        ],
        type: "video",
        src: "https://wiki.gla.com.br/index.php?title=Especial:FilePath/Kaku-RankyakuSen.mp4"
      },
      {
        title: "Habilidade 3",
        description: [
          "Descrição da habilidade 3"
        ],
        type: "iframe",
        src: "https://player.vimeo.com/video/76979871"
      },
      {
        title: "Habilidade 4",
        description: [
          "Descrição da habilidade 4"
        ],
        type: "video",
        src: "https://www.w3schools.com/html/mov_bbb.mp4"
      },
      {
        title: "Habilidade 5",
        description: [
          "Descrição da habilidade 5"
        ],
        type: "iframe",
        src: "https://www.youtube.com/embed/3tmd-ClpJxA"
      },
      {
        title: "Habilidade 6",
        description: [
          "Descrição da habilidade 6",
          "Ultimate"
        ],
        type: "video",
        src: "videos/skill6.webm"
      }
    ];
 
     const tabs = document.querySelectorAll(".skill-tab");
    const titleEl = document.querySelector(".skill-title");
    const descEl = document.querySelector(".skill-description");
    const mediaEl = document.querySelector(".skill-media");
 
    function renderSkill(index) {
      const skill = skills[index];
 
      titleEl.textContent = skill.title;
 
      descEl.innerHTML = "";
      skill.description.forEach(text => {
        const p = document.createElement("p");
        p.textContent = text;
        descEl.appendChild(p);
      });
 
      mediaEl.innerHTML = "";
 
      if (skill.type === "iframe") {
        const iframe = document.createElement("iframe");
        iframe.src = skill.src;
        iframe.allowFullscreen = true;
        mediaEl.appendChild(iframe);
      }
 
      if (skill.type === "video") {
        const video = document.createElement("video");
        video.src = skill.src;
        video.controls = true;
        video.loop = true;
        video.muted = true;
        mediaEl.appendChild(video);
      }
    }
 
    tabs.forEach(tab => {
      tab.addEventListener("click", () => {
        tabs.forEach(t => t.classList.remove("active"));
        tab.classList.add("active");
        renderSkill(tab.dataset.skill);
      });
    });
 
    renderSkill(0);
  </script>
</body>
</html>

Edição atual tal como às 05h06min de 17 de março de 2026

Esta widget exibe requisitos em abas (Normal / Hard) de forma responsiva.

Parâmetros

Parâmetro Descrição Padrão
normal_nivel = Nível mínimo para o modo Normal 140
normal_equip Equipamento recomendado (Normal) Set +8
hard_personagem Requisito de personagem (Hard) personagem 4 ou 5 estrelas (Diamante)
hard_equip Equipamento recomendado (Hard) Set +16
normal_extra Linha extra de requisito Normal (opcional) (vazio)
hard_extra Linha extra de requisito Hard (opcional) (vazio)

Exemplo de uso

{{#widget:Gb
 | normal_nivel = 140
 | normal_equip = Set +8
 | hard_personagem = personagem 4 ou 5 estrelas (Diamante)
 | hard_equip = Set +16
}}
Disponível em “https://wiki.gla.com.br/index.php?title=Widget:Gb&oldid=45067”