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

De Wiki Gla
Ir para navegação Ir para pesquisar
m (Limpou toda a página)
Etiquetas: Reversão manual anulando
 
(215 revisões intermediárias por 3 usuários não estão sendo mostradas)
Linha 1: Linha 1:
<div class="infobox-boss-wide">
    <div class="infobox-boss-right">
        <div class="infobox-skill-info-area">
            <div class="skill-box">
                <div class="infobox-skill-tabs" id="skill-tabs"></div>
                <div class="skill-desc" id="desc-text"></div>
            </div>
        </div>
        <div class="infobox-skill-video-area" id="skill-videos"></div>
    </div>
</div>
<script src="//api.html5media.info/1.2.2/html5media.min.js"></script>
<script>
    (function () {
        const raw = document.getElementById('infoboxboss-data');
        if (!raw) return;


        const habilidades = [];
        for (let i = 1; i <= 10; i++) {
            const nome = raw.dataset[`hab${i}`];
            const descricao = raw.dataset[`de${i}`];
            const videoFile = raw.dataset[`vid${i}`];
            if (!nome || !videoFile) continue;
            habilidades.push({
                nome,
                descricao,
                videoUrl: `https://wiki.gla.com.br/index.php/Special:FilePath/${videoFile}`,
                id: `video${i}`
            });
        }
        const tabsContainer = document.getElementById('skill-tabs');
        const videoContainer = document.getElementById('skill-videos');
        const descText = document.getElementById('desc-text');
        habilidades.forEach((hab, idx) => {
            const btn = document.createElement('button');
            btn.className = 'infobox-skill-tab' + (idx === 0 ? ' active' : '');
            btn.dataset.video = hab.id;
            btn.textContent = hab.nome;
            tabsContainer.appendChild(btn);
            const videoWrapper = document.createElement('div');
            videoWrapper.id = hab.id;
            videoWrapper.className = 'skill-video';
            videoWrapper.style.display = idx === 0 ? 'block' : 'none';
            const video = document.createElement('video');
            video.className = 'infobox-skill-video';
            video.controls = true;
            video.preload = 'auto';
            const source = document.createElement('source');
            source.src = hab.videoUrl;
            source.type = 'video/mp4';
            video.appendChild(source);
            videoWrapper.appendChild(video);
            videoContainer.appendChild(videoWrapper);
        });
        if (habilidades.length) {
            habilidades[0].descricao = habilidades[0].descricao.replace(/'''(.*?)'''/g, '<b>$1</b>');
            descText.innerHTML = `${habilidades[0].descricao}`;
        }
        const tabs = document.querySelectorAll('.infobox-skill-tab');
        const videos = document.querySelectorAll('.skill-video');
        tabs.forEach((tab, idx) => {
            tab.addEventListener('click', () => {
                tabs.forEach(t => t.classList.remove('active'));
                tab.classList.add('active');
                habilidades[idx].descricao = habilidades[idx].descricao.replace(/'''(.*?)'''/g, '<b>$1</b>');
                descText.innerHTML = `${habilidades[idx].descricao}`;
                videos.forEach(v => {
                    v.style.display = (v.id === habilidades[idx].id) ? 'block' : 'none';
                    const videoTag = v.querySelector('video');
                    if (v.id === habilidades[idx].id) {
                        videoTag.load();
                        videoTag.play();
                    } else {
                        videoTag.pause();
                    }
                });
            });
        });
        raw.remove();
    })();
</script>
<style>
    .skill-box {
        background: none;
        color: #222;
        border-radius: 12px;
        box-shadow: none;
        width: 100%;
        max-width: 700px;
        box-sizing: border-box;
        padding: 24px 24px 20px 24px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 18px;
        backdrop-filter: blur(2px);
        margin: 0 auto 24px auto;
        margin-bottom: 0px;
    }
    .skill-video {
        aspect-ratio: 16 / 9;
    }
</style>

Edição atual tal como às 19h10min de 12 de setembro de 2025

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