Widget:Teste

De Wiki Gla
Revisão de 22h38min de 18 de agosto de 2025 por Gurren1 (discussão | contribs)
Ir para navegação Ir para pesquisar

<script> 

   (function () {
       const $ = (s) => document.querySelector(s);
       const $$ = (s) => Array.from(document.querySelectorAll(s));

       // ---- Tabs
       const tabBtns = $$('.tab-btn');
       const panels = $$('.tab-content');

       tabBtns.forEach(btn => {
           btn.addEventListener('click', () => {
               const id = btn.dataset.tab;
               tabBtns.forEach(b => b.classList.remove('is-active'));
               panels.forEach(p => p.classList.remove('is-active'));
               btn.classList.add('is-active');
               const panel = document.getElementById(id);
               if (panel) panel.classList.add('is-active');
           });
       });

       // ---- Skills
       const iconsContainer = document.querySelector('.cuadros-container');
       const iconItems = iconsContainer ? Array.from(iconsContainer.querySelectorAll('.cuadro')) : [];
       const descBox = document.querySelector('.descripcion-container');
       const videoBox = document.querySelector('.video-container');

       const videosCache = {};
       let totalVideos = 0, loadedVideos = 0, autoplay = false;

       // placeholder do vídeo
       let placeholder = null;
       if (videoBox) {
           placeholder = document.createElement('div');
           placeholder.className = 'video-placeholder';
           placeholder.innerHTML = '<img src="/images/d/d5/Icon_gla.png" alt="Carregando...">';
           videoBox.appendChild(placeholder);
       }
       const removePlaceholder = () => {
           if (!placeholder) return;
           placeholder.classList.add('fade-out');
           placeholder.addEventListener('transitionend', () => {
               placeholder?.remove();
               placeholder = null;
           }, { once: true });
       };

       // pré-carrega vídeos
       iconItems.forEach(el => {
           const src = (el.dataset.video || ).trim();
           const idx = el.dataset.index || ;
           if (!src || !videoBox || videosCache[idx]) return;

           totalVideos++;
           const v = document.createElement('video');
           v.controls = true;
           v.preload = 'auto';
           v.playsInline = true;
           v.style.display = 'none';
           v.dataset.index = idx;

           const source = document.createElement('source');
           source.src = src;
           source.type = 'video/webm';
           v.appendChild(source);

           v.addEventListener('canplay', () => {
               loadedVideos++;
               if (loadedVideos === 1) { v.pause(); v.currentTime = 0; }
               const active = document.querySelector('.cuadro.activo');
               if (active && active.dataset.index === idx) setTimeout(removePlaceholder, 180);
               if (loadedVideos === totalVideos) autoplay = true;
           });

           v.addEventListener('error', () => {
               loadedVideos++;
               removePlaceholder();
               if (loadedVideos === totalVideos) autoplay = true;
           });

           videoBox.appendChild(v);
           videosCache[idx] = v;
       });

       if (totalVideos === 0) removePlaceholder();

       // clique nas skills
       iconItems.forEach(el => {
           const name = el.dataset.name || ;
           const desc = (el.dataset.desc || ).replace(/(.*?)/g, '$1');
           const attrs = el.dataset.atr || ;
           const idx = el.dataset.index || ;
           const hasVideo = !!(el.dataset.video && el.dataset.video.trim() !== );

           el.title = name;

           el.addEventListener('click', () => {
               if (!autoplay && loadedVideos > 0) autoplay = true;

               // título + atributos + texto
               if (descBox) {
                   descBox.innerHTML = `

${name}

         ${renderAttributes(attrs)}
${desc}
       `;
               }

               // vídeo
               Object.values(videosCache).forEach(v => { v.pause(); v.style.display = 'none'; });
               if (videoBox) {
                   if (hasVideo && videosCache[idx]) {
                       const v = videosCache[idx];
                       videoBox.style.display = 'block';
                       v.style.display = 'block';
                       v.currentTime = 0;
                       if (autoplay) v.play().catch(() => { });
                   } else {
                       videoBox.style.display = 'none';
                   }
               }

               // estado ativo
               iconItems.forEach(i => i.classList.remove('activo'));
               el.classList.add('activo');
           });
       });

       // seleciona a primeira por padrão
       if (iconItems.length) iconItems[0].click();

       // scroll horizontal com roda do mouse
       if (iconsContainer) {
           iconsContainer.addEventListener('wheel', (e) => {
               if (e.deltaY) {
                   e.preventDefault();
                   iconsContainer.scrollLeft += e.deltaY;
               }
           });
       }

       // ---- Skins: setas
       initSkinsArrows();
       function initSkinsArrows() {
           const carousel = document.querySelector('.skins-carousel');
           const left = document.querySelector('.skins-arrow.left');
           const right = document.querySelector('.skins-arrow.right');
           if (!carousel || !left || !right) return;

           const scrollAmt = () => Math.round(carousel.clientWidth * 0.6);

           function update() {
               const max = carousel.scrollWidth - carousel.clientWidth;
               const x = carousel.scrollLeft;
               left.disabled = x <= 0;
               right.disabled = x >= max - 1;
           }
           function go(dir) {
               const max = carousel.scrollWidth - carousel.clientWidth;
               const next = dir < 0
                   ? Math.max(0, carousel.scrollLeft - scrollAmt())
                   : Math.min(max, carousel.scrollLeft + scrollAmt());
               carousel.scrollTo({ left: next, behavior: 'smooth' });
           }

           left.addEventListener('click', () => go(-1));
           right.addEventListener('click', () => go(1));
           carousel.addEventListener('scroll', update);
           new ResizeObserver(update).observe(carousel);
           update();
       }

       // ---- atributos (ordem fixa + espaços reservados)
       function renderAttributes(str) {
           const vals = (str || ).split(',').map(v => v.trim());
           const pve = vals[0]; const pvp = vals[1]; const ene = vals[2]; const cd = vals[3];

           const energia = (!ene || ene === '-' || isNaN(parseInt(ene, 10))) ? '-' :
               ((parseInt(ene, 10) > 0 ? '+' : ) + parseInt(ene, 10));
           const recarga = (!cd || cd === '-' || isNaN(parseInt(cd, 10))) ? '-' :
               (parseInt(cd, 10) + ' seg');

           const rows = [
               ['Recarga', recarga],
               ['Energia', energia],
               ['Poder', (isNaN(parseInt(pve, 10)) ? '-' : parseInt(pve, 10))],
               ['Poder PvP', (isNaN(parseInt(pvp, 10)) ? '-' : parseInt(pvp, 10))]
           ];

           return `

   ${rows.map(([label, value]) => `

       ${label}:
       ${value}

   `).join()}

`; 

       }
   })();

</script> <style> 

   /* -------------------- Base / resets -------------------- */
   img {
       pointer-events: none;
       user-select: none;
   }

   video {
       max-height: 33.25em;
       object-fit: fill;
   }

   .mw-body {
       padding: unset !important;
   }

   .mw-body-content {
       line-height: 1.5 !important;
   }

   /* Se sua wiki injeta parágrafos soltos acima, mantenha: */
   .mw-body-content p {
       display: none;
   }

   /* -------------------- Character container -------------------- */
   .character {
       position: relative;
       width: 100%;
       margin: 0 auto;
       color: #000;
       font-family: 'Noto Sans', sans-serif !important;
       user-select: none;
   }

   .character p {
       display: unset;
   }

   /* Header + banner + art */
   .character__header {
       position: relative;
       overflow: hidden;
       display: flex;
       flex-direction: column;
       gap: 10px;
   }

   .character__banner {
       position: absolute;
       inset: 0;
       z-index: -9;
       background-size: cover;
       background-position: center;
   }

   .character__banner::before {
       content: "";
       position: absolute;
       inset: 0;
       background: linear-gradient(to right, rgba(0, 0, 0, .6), rgba(0, 0, 0, .2));
   }

   .character__art {
       position: absolute;
       right: 3.5rem;
       top: -3.1rem;
       width: 34.3vw;
       height: auto;
       z-index: 1;
       pointer-events: none;
   }

   /* Topbar: avatar, nome e tags */
   .character__topbar {
       display: flex;
       flex-direction: column;
       align-items: flex-start;
       padding: 8px 20px;
       padding-top: 4px;
   }

   .character__namebox {
       display: flex;
       align-items: center;
       gap: 14px;
   }

   .character__avatar {
       margin-top: 8px;
       width: 100px;
       height: 100px;
       object-fit: none;
   }

   .character__name {
       font-family: 'Orbitron', sans-serif;
       font-weight: 900;
       font-size: 56px;
       color: #fff;
       text-shadow: 0 0 6px #000, 0 0 9px #000;
   }

   .character__tags {
       display: flex;
       gap: 9px;
       flex-wrap: wrap;
       margin-left: .28rem;
   }

   .character__tag {
       background: #353420;
       color: #fff;
       border-radius: 4px;
       padding: 1px 6px;
       font-size: .9em;
       font-weight: bold;
       outline: 2px solid #000;
       box-shadow: 0 0 2px rgb(0 0 0 / 70%);
   }

   .character.tier-bronze .character__tag--tier {
       outline-color: #7b4e2f !important;
   }

   .character.tier-silver .character__tag--tier {
       outline-color: #d6d2d2 !important;
   }

   .character.tier-gold .character__tag--tier {
       outline-color: #fcd300 !important;
   }

   .character.tier-diamond .character__tag--tier {
       outline-color: #60dae2 !important;
   }

   /* -------------------- Tabs -------------------- */
   .tabs {
       margin: 4px 0 4px 8px;
       display: flex;
       gap: 12px;
       justify-content: flex-start;
   }

   .tabs__btn {
       padding: 5px 20px;
       background: #333;
       color: #fff;
       border: 2px solid transparent;
       border-radius: 8px;
       font-size: 20px;
       font-weight: 600;
       line-height: 1;
       cursor: pointer;
       transition: background .15s ease, border-color .15s ease;
   }

   .tabs__btn.is-active {
       background: #156bc7;
       border-color: #156bc7;
   }

   .tabs__panel {
       display: none;
       background: #26211cd6;
       padding: 0 8px 8px;
       position: relative;
       z-index: 3;
   }

   .tabs__panel.is-active {
       display: block;
   }

   /* -------------------- Skills -------------------- */
   .skills {
       display: flex;
       gap: 20px;
   }

   .skills__icons {
       display: flex;
       gap: 10px;
       flex-wrap: nowrap;
       width: 100%;
       overflow-x: auto;
       overflow-y: hidden;
       padding: 10px 0 3px 1px;
       margin-bottom: 6px;
       position: relative;
       z-index: 4;
       justify-content: flex-start;
       scrollbar-width: thin;
       scrollbar-color: #ababab transparent;
       scroll-behavior: smooth;
   }

   .skills__icons::-webkit-scrollbar {
       height: 6px;
   }

   .skills__icons::-webkit-scrollbar-track {
       background: transparent;
   }

   .skills__icons::-webkit-scrollbar-thumb {
       background: #151515;
       border-radius: 3px;
   }

   .skills__icon {
       flex: 0 0 auto;
       width: 50px;
       height: 50px;
       border-radius: 5px;
       cursor: pointer;
       transition: transform .2s, box-shadow .2s;
   }

   .skills__icon.is-active {
       box-shadow: 0 0 0 1.5px #FFD700;
   }

   .skills__icon img {
       width: 100%;
       height: 100%;
       object-fit: cover;
   }

   /* Descrição da skill */
   .skills__desc {
       flex: 1;
       width: 50%;
       display: flex;
       flex-direction: column;
       gap: 10px;
       justify-content: center;
       min-height: 27.5rem;
       height: 100%;
       padding: 4px 16px !important;
       padding-top: 0 !important;
       background: #26211C;
       color: #fff;
       border-radius: 8px;
       position: relative;
       z-index: 99;
       box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
       backdrop-filter: blur(2px);
       text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
   }

   .skill__title h3 {
       font-size: 2.7em;
       margin: 0;
       padding-top: 0;
       text-align: center;
       color: #fff;
   }

   .skill__text {
       font-size: 1.2em;
       margin: 0;
   }

   .skill__text * {
       font-size: inherit !important;
       line-height: inherit;
   }

   /* Atributos (ordem fixa, linhas reservadas) */
   .attrs {
       display: flex;
       flex-direction: column;
       gap: 4px;
       margin: 4px 0 10px;
   }

   .skills__desc .attrs,
   .skills__desc .attrs * {
       text-shadow: none;
       font-family: 'Noto Sans', sans-serif;
   }

   .attrs__row {
       min-height: 22px;
       display: flex;
       align-items: center;
       gap: 6px;
   }

   .attrs__row--empty {
       visibility: hidden;
   }

   .attrs__label {
       font-weight: 700;
       color: #f0c87b;
       font-size: .95rem;
   }

   .attrs__value {
       color: #fff;
       font-weight: 800;
       font-size: 1.05rem;
       letter-spacing: .01em;
   }

   /* Vídeo da skill */
   .skills__video {
       position: relative;
       width: 43%;
       background: #000;
       display: flex;
       align-items: center;
       justify-content: center;
       border-radius: 2%;
       overflow: hidden;
       z-index: 999;
       box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
   }

   .video-placeholder {
       position: absolute;
       inset: 0;
       background: #000;
       display: flex;
       align-items: center;
       justify-content: center;
       z-index: 2;
       opacity: 1;
       transition: opacity .9s ease;
   }

   .video-placeholder img {
       width: 120px;
       height: auto;
       animation: breathe 2.5s ease-in-out infinite;
       filter: drop-shadow(0 0 6px rgba(255, 255, 255, .3));
   }

   .video-placeholder.fade-out {
       opacity: 0;
   }

   @keyframes breathe {

       0%,
       100% {
           transform: scale(1);
           opacity: 1;
       }

       50% {
           transform: scale(1.07);
           opacity: .85;
       }
   }

   video::-webkit-media-controls {
       opacity: 0;
       transition: opacity .3s;
   }

   video:hover::-webkit-media-controls {
       opacity: 1;
   }

   /* -------------------- Skins -------------------- */
   .skins__title {
       display: block;
       width: 47%;
       margin-bottom: 10px;
       padding-bottom: 0;
       font-family: 'Noto Sans', sans-serif !important;
       font-weight: 700;
       font-size: 40px;
       color: #fff;
       text-align: center;
       border-bottom: none;
   }

   .skins__wrapper {
       min-height: 21.1rem;
       max-height: 60%;
       padding: 0 16px 1px !important;
       background: #26211C;
       color: #fff;
       border-radius: 8px;
       position: relative;
       z-index: 99;
       box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
       backdrop-filter: blur(2px);
       display: flex;
       gap: 10px;
       justify-content: center;
       align-items: center;
       text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
       overflow: visible;
       transition: all .3s ease;
   }

   /* Gradientes laterais quando houver rolagem */
   .skins__wrapper::before,
   .skins__wrapper::after {
       content: "";
       position: absolute;
       top: 0;
       width: 60px;
       height: 100%;
       pointer-events: none;
       opacity: 0;
       transition: opacity .4s ease;
       z-index: 3;
   }

   .skins__wrapper::before {
       left: 0;
       background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
   }

   .skins__wrapper::after {
       right: 0;
       background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
   }

   .skins__wrapper.has-left::before,
   .skins__wrapper.has-right::after {
       opacity: 1;
   }

   .skins__carousel {
       display: flex;
       gap: 1vw;
       flex-grow: 1;
       overflow-x: auto;
       padding: 10px 0;
       scroll-behavior: smooth;
   }

   .skins__carousel.both-mask {
       mask-image: linear-gradient(to right, transparent 0px, black 40px, black calc(100% - 40px), transparent 100%);
   }

   .skins__carousel.left-mask {
       mask-image: linear-gradient(to right, transparent 0px, black 40px, black 100%);
   }

   .skins__carousel.right-mask {
       mask-image: linear-gradient(to right, black 0px, black calc(100% - 40px), transparent 100%);
   }

   .skins__carousel.no-mask {
       mask-image: none;
   }

   .skins__carousel::-webkit-scrollbar {
       display: none;
   }

   .skins__arrow {
       background: none;
       border: none;
       color: #fff;
       font-size: 36px;
       cursor: pointer;
       padding: 8px;
       z-index: 5;
       transition: opacity .3s ease, transform .3s ease;
   }

   .skins__arrow--left {
       margin-right: 8px;
   }

   .skins__arrow--right {
       margin-left: 8px;
   }

   .skins__arrow.hidden {
       opacity: 0;
       transform: scale(.8);
       pointer-events: none;
       visibility: hidden;
   }

   .skin-card {
       position: relative;
       width: 12vw;
       height: 39vh;
       flex: 0 0 auto;
       border: 2px solid #697EC9 !important;
       border-radius: 8px;
       overflow: hidden;
       background: #111;
       box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
   }

   .skin-card::before {
       content: "";
       position: absolute;
       inset: 0;
       border-radius: inherit;
       pointer-events: none;
       z-index: 2;
       box-shadow: inset 0 0 8px rgba(180, 180, 180, .18);
   }

   .skins--imageBanner {
       width: 100%;
       height: 109%;
   }

   .skins--imageBanner img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       filter: brightness(.5);
       scale: 1.1;
   }

   .skins--imageSkin img {
       position: absolute;
       bottom: 10px;
       left: 50%;
       transform: translateX(-50%);
       height: 140px;
       width: auto;
       z-index: 2;
       transition: transform .2s;
   }

   /* -------------------- Responsive (tela alta / mobile) -------------------- */
   @media (max-aspect-ratio: 3/4) {
       .skills {
           flex-direction: column-reverse;
           gap: 20px;
       }

       .skills__desc {
           padding: 22px !important;
       }

       .skills__icons {
           width: 98%;
           place-self: center;
           padding: 10px 0 16px 1px;
       }

       .skills__icon {
           width: 80px;
           height: 80px;
       }

       .skill__title h3 {
           font-size: 3.6em;
           margin-top: -14px;
       }

       .skill__text {
           font-size: 2.3em;
           margin-bottom: 5px;
       }

       .skills__video {
           width: 80%;
           border-radius: 3%;
           margin-top: 2%;
           align-self: center;
       }

       .character__art {
           display: none;
           width: 370px;
           height: 290px;
           right: .5rem;
           top: 1.1rem;
           z-index: 1;
       }

       .tabs__btn {
           padding: 10px 20px;
           font-size: 26px;
       }

       .tabs__panel {
           position: relative;
           z-index: 1;
           padding: 0 8px 20px;
       }

       .character__tag {
           padding: 0 5px;
           font-size: 1.4em;
       }

       .attrs__row {
           min-height: 26px;
       }

       .attrs__label {
           font-size: 1.2rem;
       }

       .attrs__value {
           font-size: 1.25rem;
       }

       .skins__carousel {
           gap: 20px;
       }

       .skin-card {
           width: 236px;
           height: 400px;
       }

       .skins--imageSkin img {
           height: 170px;
       }

       .skins__title {
           width: 100% !important;
       }

       .skins__arrow {
           display: none !important;
       }

       .skins__wrapper::before,
       .skins__wrapper::after {
           background: unset;
       }

       video::-webkit-media-controls {
           opacity: unset;
           transition: unset;
       }

       video:hover::-webkit-media-controls {
           opacity: unset;
       }
   }

</style>

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