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

De Wiki Gla
Ir para navegação Ir para pesquisar
Etiqueta: Revertido
 
(11 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 1: Linha 1:
<!DOCTYPE html>
 
<html lang="pt-BR">
<head>
<head>
    <meta charset="UTF-8">
  <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Skill Viewer - Mixed Media</title>
    <title>Componente de Abas - MediaWiki</title>
    <style>
        /* Container principal responsivo */
        .mw-tabber-container {
            width: 100%;
            max-width: 100%;
            margin: 20px 0;
            border: 1px solid #a7d7f9;
            border-radius: 4px;
            background-color: #f8f9fa;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }


        /* Container das abas */
  <style>
        .mw-tabber-tabs {
    body {
            display: flex;
      margin: 0;
            flex-wrap: wrap;
      padding: 40px 0;
            background-color: #eaecf0;
      font-family: Arial, Helvetica, sans-serif;
            border-bottom: 2px solid #a7d7f9;
      background: #ffffff;
            padding: 0;
      color: #000;
            margin: 0;
    }
            list-style: none;
        }


        /* Estilo individual de cada aba */
    .skill-box {
        .mw-tabber-tab {
      max-width: 900px;
            flex: 1 1 auto;
      margin: 0 auto;
            min-width: 100px;
      text-align: center;
            padding: 12px 20px;
    }
            cursor: pointer;
            background-color: #eaecf0;
            border: none;
            border-right: 1px solid #c8ccd1;
            text-align: center;
            font-size: 14px;
            font-weight: 500;
            color: #0645ad;
            transition: all 0.2s ease;
            user-select: none;
            position: relative;
        }


        .mw-tabber-tab:last-child {
    .skill-tabs {
            border-right: none;
      display: flex;
        }
      justify-content: center;
      gap: 12px;
      margin-bottom: 25px;
    }


        /* Hover nas abas */
    .skill-tab {
        .mw-tabber-tab:hover {
      width: 45px;
            background-color: #f8f9fa;
      height: 45px;
            color: #0b0080;
      background: #222;
        }
      color: #fff;
      border: none;
      border-radius: 6px;
      font-size: 18px;
      font-weight: bold;
      cursor: pointer;
    }


        /* Aba ativa */
    .skill-tab.active {
        .mw-tabber-tab.active {
      background: #000;
            background-color: #ffffff;
    }
            color: #0645ad;
            border-bottom: 3px solid #0645ad;
            font-weight: 600;
        }


        /* Container do conteúdo */
    .skill-title {
        .mw-tabber-content {
      font-size: 26px;
            padding: 20px;
      font-weight: bold;
            background-color: #ffffff;
      margin-bottom: 10px;
            min-height: 200px;
    }
        }


        /* Painel de conteúdo individual */
    .skill-description p {
        .mw-tabber-panel {
      margin: 4px 0;
            display: none;
      font-size: 14px;
            animation: fadeIn 0.3s ease;
    }
        }


        .mw-tabber-panel.active {
    .skill-media {
            display: block;
      margin-top: 25px;
        }
      background: #1f1f1f;
      border-radius: 10px;
      overflow: hidden;
    }


        /* Animação de fade in */
    .skill-media iframe,
        @keyframes fadeIn {
    .skill-media video {
            from {
      width: 100%;
                opacity: 0;
      height: 420px;
                transform: translateY(5px);
      display: block;
            }
      border: none;
            to {
    }
                opacity: 1;
  </style>
                transform: translateY(0);
</head>
            }
        }


        /* Responsividade para tablets */
<body>
        @media (max-width: 768px) {
  <div class="skill-box">
            .mw-tabber-tabs {
                flex-direction: column;
            }


            .mw-tabber-tab {
     <div class="skill-tabs">
                border-right: none;
      <button class="skill-tab active" data-skill="0">1</button>
                border-bottom: 1px solid #c8ccd1;
      <button class="skill-tab" data-skill="1">2</button>
                width: 100%;
      <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>
            .mw-tabber-tab.active {
      <button class="skill-tab" data-skill="5">6</button>
                border-bottom: 3px solid #0645ad;
                border-right: none;
            }
 
            .mw-tabber-content {
                padding: 15px;
            }
        }
 
        /* Responsividade para mobile */
        @media (max-width: 480px) {
            .mw-tabber-tab {
                padding: 10px 15px;
                font-size: 13px;
            }
 
            .mw-tabber-content {
                padding: 12px;
                min-height: 150px;
            }
        }
    </style>
</head>
<body>
    <!-- Exemplo de uso do componente -->
     <div class="mw-tabber-container" data-tabber>
        <ul class="mw-tabber-tabs">
            <li class="mw-tabber-tab active" data-tab="tab1">Aba 1</li>
            <li class="mw-tabber-tab" data-tab="tab2">Aba 2</li>
            <li class="mw-tabber-tab" data-tab="tab3">Aba 3</li>
        </ul>
        <div class="mw-tabber-content">
            <div class="mw-tabber-panel active" data-panel="tab1">
                <h3>Conteúdo da Aba 1</h3>
                <p>Este é o conteúdo da primeira aba. Você pode adicionar qualquer HTML aqui.</p>
            </div>
            <div class="mw-tabber-panel" data-panel="tab2">
                <h3>Conteúdo da Aba 2</h3>
                <p>Este é o conteúdo da segunda aba. A troca entre abas é instantânea!</p>
            </div>
            <div class="mw-tabber-panel" data-panel="tab3">
                <h3>Conteúdo da Aba 3</h3>
                <p>Este é o conteúdo da terceira aba. O componente é totalmente responsivo.</p>
            </div>
        </div>
     </div>
     </div>


     <script>
     <h2 class="skill-title">Habilidade 1</h2>
        (function() {
            'use strict';


            // Inicializa todos os componentes de abas na página
    <div class="skill-description"></div>
            function initTabbers() {
                const tabbers = document.querySelectorAll('[data-tabber]');
               
                tabbers.forEach(function(tabber) {
                    const tabs = tabber.querySelectorAll('.mw-tabber-tab');
                    const panels = tabber.querySelectorAll('.mw-tabber-panel');


                    tabs.forEach(function(tab) {
    <div class="skill-media"></div>
                        tab.addEventListener('click', function() {
                            const targetTab = this.getAttribute('data-tab');
                           
                            // Remove classe active de todas as abas
                            tabs.forEach(function(t) {
                                t.classList.remove('active');
                            });
                           
                            // Remove classe active de todos os painéis
                            panels.forEach(function(p) {
                                p.classList.remove('active');
                            });
                           
                            // Adiciona classe active na aba clicada
                            this.classList.add('active');
                           
                            // Adiciona classe active no painel correspondente
                            const targetPanel = tabber.querySelector('[data-panel="' + targetTab + '"]');
                            if (targetPanel) {
                                targetPanel.classList.add('active');
                            }
                        });
                    });
                });
            }


            // Inicializa quando o DOM estiver pronto
  </div>
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', initTabbers);
            } else {
                initTabbers();
            }


            // Suporte para MediaWiki (quando o conteúdo é carregado dinamicamente)
  <script>
            if (typeof mw !== 'undefined' && mw.hook) {
    const skills = [
                mw.hook('wikipage.content').add(function() {
      {
                    initTabbers();
        title: "Habilidade 1",
                });
        description: [
            }
          "Descrição da habilidade 1",
         })();
          "Cooldown: 10s"
    </script>
        ],
</body>
        type: "iframe",
</html>
        src: "https://www.youtube.com/embed/dQw4w9WgXcQ"
<style>
      },
/* Conserta o header das abas para um fundo fixo único e altura consistente */
      {
.mw-tabber-tabs {
        title: "Habilidade 2",
    display: flex;
        description: [
    flex-wrap: wrap;
          "Descrição da habilidade 2",
    background-color: #eaecf0;
          "Dano em área"
    border-bottom: 2px solid #a7d7f9;
        ],
    padding: 0;
        type: "video",
    margin: 0;
        src: "https://wiki.gla.com.br/index.php?title=Especial:FilePath/Kaku-RankyakuSen.mp4"
    list-style: none;
      },
    position: relative;
      {
    min-height: 48px; /* Altura fixa para evitar 'tremida' */
        title: "Habilidade 3",
     box-sizing: border-box;
        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"
      }
     ];


/* Todas as abas: altura fixa e alinhamento centralizado */
    const tabs = document.querySelectorAll(".skill-tab");
.mw-tabber-tab {
     const titleEl = document.querySelector(".skill-title");
    flex: 1 1 auto;
     const descEl = document.querySelector(".skill-description");
     min-width: 100px;
     const mediaEl = document.querySelector(".skill-media");
     padding: 12px 20px;
    cursor: pointer;
    background-color: transparent;
     border: none;
    border-right: 1px solid #c8ccd1;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: #0645ad;
    transition: color 0.2s ease, background-color 0.2s;
    user-select: none;
    position: relative;
    height: 48px; /* Altura igual à do container do header */
    line-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}


.mw-tabber-tab:last-child {
    function renderSkill(index) {
    border-right: none;
      const skill = skills[index];
}


/* Corrige background do header nas abas no hover/active para não sobrescrever o container */
      titleEl.textContent = skill.title;
.mw-tabber-tab.active {
    background-color: transparent;
    color: #0645ad;
    border-bottom: 3px solid #0645ad;
    font-weight: 600;
    z-index: 2;
}


.mw-tabber-tab:hover:not(.active) {
      descEl.innerHTML = "";
    background-color: rgba(248,249,250, 0.4);
      skill.description.forEach(text => {
    color: #0b0080;
        const p = document.createElement("p");
}
        p.textContent = text;
        descEl.appendChild(p);
      });


/* CONTEÚDO: Mantém altura fixa para evitar 'tremida' do layout principal */
      mediaEl.innerHTML = "";
.mw-tabber-content {
    position: relative;
    padding: 20px;
    background-color: #ffffff;
    min-height: 200px;
    /* Mantém altura mínima e transição só no conteúdo */
    transition: opacity 0.24s;
}


/* Painéis: Transição suave para fade-in/fade-out, ocupa mesmo espaço sempre */
      if (skill.type === "iframe") {
.mw-tabber-panel {
        const iframe = document.createElement("iframe");
    opacity: 0;
        iframe.src = skill.src;
    pointer-events: none;
        iframe.allowFullscreen = true;
    position: absolute;
        mediaEl.appendChild(iframe);
    left: 0; right: 0; top: 0; bottom: 0;
      }
    width: 100%;
    transition: opacity 0.24s;
    z-index: 0;
}


.mw-tabber-panel.active {
      if (skill.type === "video") {
    opacity: 1;
        const video = document.createElement("video");
    pointer-events: auto;
        video.src = skill.src;
    position: relative;
        video.controls = true;
    z-index: 1;
        video.loop = true;
}
        video.muted = true;
        mediaEl.appendChild(video);
      }
    }


/* Garante altura estável do conteúdo, mesmo com tamanhos distintos nos painéis */
    tabs.forEach(tab => {
.mw-tabber-content {
      tab.addEventListener("click", () => {
    min-height: 200px;
        tabs.forEach(t => t.classList.remove("active"));
    /* Você pode definir uma altura máxima se desejar */
        tab.classList.add("active");
    /* max-height: 400px; */
        renderSkill(tab.dataset.skill);
    overflow: auto;
      });
    position: relative;
     });
     /* isola contexto de painéis absolutos */
}


/* Para evitar "pulo" do conteúdo, força height igual a maior painel (opcional, ideal JS dinâmico) */
    renderSkill(0);
</style>
  </script>
</body>
</html>

Edição atual tal como às 23h34min de 28 de dezembro de 2025

<head> 

 <meta charset="UTF-8">
 <title>Skill Viewer - Mixed Media</title>

 <style>
   body {
     margin: 0;
     padding: 40px 0;
     font-family: Arial, Helvetica, sans-serif;
     background: #ffffff;
     color: #000;
   }

   .skill-box {
     max-width: 900px;
     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> 

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

Habilidade 1

 <script>
   const skills = [
     {
       title: "Habilidade 1",
       description: [
         "Descrição da habilidade 1",
         "Cooldown: 10s"
       ],
       type: "iframe",
       src: "https://www.youtube.com/embed/dQw4w9WgXcQ"
     },
     {
       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>

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