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

De Wiki Gla
Ir para navegação Ir para pesquisar
 
(12 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>
  <style>
        /* Container principal responsivo */
    body {
        .mw-tabber-container {
      margin: 0;
            width: 100%;
      padding: 40px 0;
            max-width: 100%;
      font-family: Arial, Helvetica, sans-serif;
            margin: 20px 0;
      background: #ffffff;
            border: 1px solid #a7d7f9;
      color: #000;
            border-radius: 4px;
    }
            background-color: #f8f9fa;
 
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    .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;
    }


        /* Container das abas */
    .skill-title {
        .mw-tabber-tabs {
      font-size: 26px;
            display: flex;
      font-weight: bold;
            flex-wrap: wrap;
      margin-bottom: 10px;
            background-color: #eaecf0;
    }
            border-bottom: 2px solid #a7d7f9;
            padding: 0;
            margin: 0;
            list-style: none;
        }


        /* Estilo individual de cada aba */
    .skill-description p {
        .mw-tabber-tab {
      margin: 4px 0;
            flex: 1 1 auto;
      font-size: 14px;
            min-width: 100px;
    }
            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-media {
            border-right: none;
      margin-top: 25px;
        }
      background: #1f1f1f;
      border-radius: 10px;
      overflow: hidden;
    }


        /* Hover nas abas */
    .skill-media iframe,
        .mw-tabber-tab:hover {
    .skill-media video {
            background-color: #f8f9fa;
      width: 100%;
            color: #0b0080;
      height: 420px;
        }
      display: block;
      border: none;
    }
  </style>
</head>


        /* Aba ativa */
<body>
        .mw-tabber-tab.active {
  <div class="skill-box">
            background-color: #ffffff;
            color: #0645ad;
            border-bottom: 3px solid #0645ad;
            font-weight: 600;
        }


        /* Container do conteúdo */
    <div class="skill-tabs">
        .mw-tabber-content {
      <button class="skill-tab active" data-skill="0">1</button>
            padding: 20px;
      <button class="skill-tab" data-skill="1">2</button>
            background-color: #ffffff;
      <button class="skill-tab" data-skill="2">3</button>
            min-height: 200px;
      <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>


        /* Painel de conteúdo individual */
    <h2 class="skill-title">Habilidade 1</h2>
        .mw-tabber-panel {
            display: none;
            animation: fadeIn 0.3s ease;
        }


        .mw-tabber-panel.active {
    <div class="skill-description"></div>
            display: block;
        }


        /* Animação de fade in */
    <div class="skill-media"></div>
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(5px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }


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


            .mw-tabber-tab {
  <script>
                border-right: none;
    const skills = [
                border-bottom: 1px solid #c8ccd1;
      {
                width: 100%;
        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"
      }
    ];


            .mw-tabber-tab.active {
    const tabs = document.querySelectorAll(".skill-tab");
                border-bottom: 3px solid #0645ad;
    const titleEl = document.querySelector(".skill-title");
                border-right: none;
    const descEl = document.querySelector(".skill-description");
            }
    const mediaEl = document.querySelector(".skill-media");


            .mw-tabber-content {
    function renderSkill(index) {
                padding: 15px;
      const skill = skills[index];
            }
        }


        /* Responsividade para mobile */
      titleEl.textContent = skill.title;
        @media (max-width: 480px) {
            .mw-tabber-tab {
                padding: 10px 15px;
                font-size: 13px;
            }


            .mw-tabber-content {
      descEl.innerHTML = "";
                padding: 12px;
      skill.description.forEach(text => {
                min-height: 150px;
         const p = document.createElement("p");
            }
        p.textContent = text;
        }
        descEl.appendChild(p);
    </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>


    <script>
      mediaEl.innerHTML = "";
        (function() {
            'use strict';


            // Inicializa todos os componentes de abas na página
      if (skill.type === "iframe") {
            function initTabbers() {
        const iframe = document.createElement("iframe");
                const tabbers = document.querySelectorAll('[data-tabber]');
        iframe.src = skill.src;
               
        iframe.allowFullscreen = true;
                tabbers.forEach(function(tabber) {
        mediaEl.appendChild(iframe);
                    const tabs = tabber.querySelectorAll('.mw-tabber-tab');
      }
                    const panels = tabber.querySelectorAll('.mw-tabber-panel');


                    tabs.forEach(function(tab) {
      if (skill.type === "video") {
                        tab.addEventListener('click', function() {
        const video = document.createElement("video");
                            const targetTab = this.getAttribute('data-tab');
        video.src = skill.src;
                           
        video.controls = true;
                            // Remove classe active de todas as abas
        video.loop = true;
                            tabs.forEach(function(t) {
        video.muted = true;
                                t.classList.remove('active');
        mediaEl.appendChild(video);
                            });
      }
                           
    }
                            // 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
    tabs.forEach(tab => {
            if (document.readyState === 'loading') {
      tab.addEventListener("click", () => {
                document.addEventListener('DOMContentLoaded', initTabbers);
        tabs.forEach(t => t.classList.remove("active"));
            } else {
        tab.classList.add("active");
                initTabbers();
        renderSkill(tab.dataset.skill);
            }
      });
    });


            // Suporte para MediaWiki (quando o conteúdo é carregado dinamicamente)
    renderSkill(0);
            if (typeof mw !== 'undefined' && mw.hook) {
  </script>
                mw.hook('wikipage.content').add(function() {
                    initTabbers();
                });
            }
        })();
    </script>
</body>
</body>
</html>
</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”