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

De Wiki Gla
Ir para navegação Ir para pesquisar
m
m (Página substituída por '<style> .island-grid { display: flex; flex-wrap: wrap; gap: 16px; justify-content: flex-start; padding: 16px 0; } .island-card { background: #eeeded; box...')
Etiqueta: Substituído
Linha 1: Linha 1:
{literal}
<style>
<style>
    .utab {
.island-grid {
        font-family: "Segoe UI", Arial, sans-serif;
  display: flex;
        color: #e2ecff;
  flex-wrap: wrap;
        padding: 24px;
  gap: 16px;
        width: 100%;
  justify-content: flex-start;
        max-width: 1200px;
  padding: 16px 0;
        margin: 24px auto;
}
    }


    .utab__section {
.island-card {
        background: #0f1b2d;
  background: #eeeded;
        border-radius: 14px;
  box-shadow: rgba(0,0,0,0.24) 0px 3px 10px;
        padding: 20px;
  border-radius: 8px;
        border: 1px solid #203c5f;
  text-align: center;
        box-shadow: 0 10px 24px rgba(7, 14, 26, 0.35);
  padding: 20px 16px;
        display: block;
  width: calc(25% - 12px);
    }
  box-sizing: border-box;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: transform 0.15s, box-shadow 0.15s;
}


    .utab__level {
.island-card:hover {
        display: block;
  transform: translateY(-3px);
    }
  box-shadow: rgba(0,0,0,0.35) 0px 6px 16px;
}


    .utab__levels {
.island-card img.island-img {
        display: flex;
  width: 150px;
        flex-wrap: wrap;
  height: 150px;
        gap: 8px;
  object-fit: contain;
        margin-bottom: 16px;
}
    }


    .utab__levelBtn {
.island-card .island-name {
        border: 1px solid #274a74;
  font-size: 1.05em;
        background: #13243a;
  font-weight: bold;
        padding: 6px 12px;
  color: #000;
        border-radius: 10px;
}
        font-weight: 600;
        color: #cfe1ff;
        cursor: pointer;
        transition: all 0.2s ease;
    }


    .utab__levelBtn:hover {
.island-card .island-chests {
        border-color: #4a86d8;
  display: flex;
        color: #ffffff;
  align-items: center;
    }
  gap: 4px;
  font-weight: bold;
  font-size: 1em;
  color: #000;
}


    .utab__levelBtn.is-active {
.island-card .island-chests img {
        background: #2e7dd7;
  height: auto;
        border-color: #2e7dd7;
}
        color: #ffffff;
    }


    .utab__levelBtn:focus-visible {
@media (max-width: 900px) {
        outline: 2px solid rgba(46, 125, 215, 0.4);
  .island-card {
        outline-offset: 2px;
    width: calc(33.333% - 11px);
    }
  }
}


    .utab__display {
@media (max-width: 600px) {
        display: grid;
  .island-card {
        grid-template-columns: auto 1fr;
    width: calc(50% - 8px);
        gap: 18px;
  }
        align-items: start;
  .island-card img.island-img {
    }
    width: 100px;
    height: 100px;
  }
}


    .utab__display.is-image-empty {
@media (max-width: 360px) {
        grid-template-columns: 1fr;
  .island-card {
    }
    width: 100%;
 
  }
    .utab__display.is-fading {
}
        animation: utabFade 0.25s ease;
    }
 
    .utab__image {
        border-radius: 12px;
        border: 1px solid #203c5f;
        background: #0b1422;
        padding: 10px;
    }
 
    .utab__image img {
        display: block;
        height: auto;
        max-width: 100%;
        border-radius: 8px;
    }
 
    .utab__image.is-empty {
        display: none;
    }
 
    .utab__stats {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        color: #dbe7ff;
        font-size: 14px;
    }
 
    .utab__stats>.utab__stat {
        grid-column: 1 / -1;
    }
 
    .utab__stat {
        background: #13243a;
        border: 1px solid #274a74;
        border-radius: 10px;
        padding: 10px 12px;
    }
 
    .utab__statTitle {
        font-weight: 700;
        color: #8bb8ff;
    }
 
    .utab__statList {
        margin: 6px 0 0;
        padding-left: 18px;
        display: grid;
        gap: 2px;
        list-style: disc;
        list-style-position: outside;
    }
 
    .utab__statList li {
        display: list-item;
        text-align: left;
    }
 
    .utab__costRow {
        position: relative;
    }
 
    .utab__costBerry,
    .utab__costGems,
    .utab__costPoints {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-weight: 700;
        line-height: 1.1;
        font-size: 15px;
    }
 
    .utab__costBerry {
        color: #ffd166;
    }
 
    .utab__costGems {
        color: #57d889;
    }
 
    .utab__costPoints {
        color: #a6b0bf;
    }
 
    .utab__costIcon {
        display: none;
    }
 
    .utab__costBerry .utab__costIcon,
    .utab__costGems .utab__costIcon,
    .utab__costPoints .utab__costIcon,
    .utab__costBerry .utab__costText,
    .utab__costGems .utab__costText,
    .utab__costPoints .utab__costText {
        transform: none;
    }
 
    .utab__level--source {
        display: none;
    }
 
    @keyframes utabFade {
        from {
            opacity: 0;
            transform: translateY(4px);
        }
 
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
 
    @media (max-width: 720px) {
        .utab {
            padding: 16px;
        }
 
        .utab__display {
            grid-template-columns: 1fr;
        }
    }
</style>
</style>
{/literal}
{assign var=section value=$section|default:$1|lower}


<div class="utab">
<div class="island-grid">
    {if !$section || $section == "designer"}
{{{content}}}
    <section class="utab__section" data-tab="Designer">
        <div class="utab__level" data-level="1">
            <div class="utab__content">
                <div class="utab__mediaImage">[[File:Designer_lvl1.png]]</div>
                <ul class="utab__statList">
                    <li>1 pilar de artefato disponível</li>
                    <li>27 símbolos disponíveis</li>
                    <li>1 plano de fundo disponível</li>
                    <li>6 cores disponíveis</li>
                    <li>2% de EXP</li>
                    <li>4% de sorte</li>
                    <li>5% de pontos de aliança</li>
                </ul>
            </div>
        </div>
        <div class="utab__level" data-level="2">
            <div class="utab__content">
                <div class="utab__mediaImage">[[File:Designer_lvl2.png]]</div>
                <ul class="utab__statList">
                    <li>2 pilares de artefato disponíveis</li>
                    <li>9 planos de fundo disponíveis</li>
                    <li>47 símbolos disponíveis</li>
                    <li>12 cores disponíveis</li>
                    <li>4% de EXP</li>
                    <li>9% de sorte</li>
                    <li>12% de pontos de aliança</li>
                </ul>
            </div>
        </div>
        <div class="utab__level" data-level="3">
            <div class="utab__content">
                <div class="utab__mediaImage">[[File:Designer_lvl3.png]]</div>
                <ul class="utab__statList">
                    <li>2 pilares de artefato disponíveis</li>
                    <li>34 planos de fundo disponíveis</li>
                    <li>72 símbolos disponíveis</li>
                    <li>30 cores disponíveis</li>
                    <li>6% de EXP</li>
                    <li>15% de sorte</li>
                    <li>22% de pontos de aliança</li>
                </ul>
            </div>
        </div>
        <div class="utab__level" data-level="4">
            <div class="utab__content">
                <div class="utab__mediaImage">[[File:Designer_lvl4.png]]</div>
                <ul class="utab__statList">
                    <li>3 pilares de artefato disponíveis</li>
                    <li>34 planos de fundo disponíveis</li>
                    <li>92 símbolos disponíveis</li>
                    <li>30 cores disponíveis</li>
                    <li>8% de EXP</li>
                    <li>22% de sorte</li>
                    <li>35% de pontos de aliança</li>
                </ul>
            </div>
        </div>
        <div class="utab__level" data-level="5">
            <div class="utab__content">
                <div class="utab__mediaImage">[[File:Designer_lvl5.png]]</div>
                <ul class="utab__statList">
                    <li>4 pilares de artefato disponíveis</li>
                    <li>34 planos de fundo disponíveis</li>
                    <li>112 símbolos disponíveis</li>
                    <li>30 cores disponíveis</li>
                    <li>10% de EXP</li>
                    <li>30% de sorte</li>
                    <li>50% de pontos de aliança</li>
                </ul>
            </div>
        </div>
    </section>
    {/if}
    {if !$section || $section == "cofre"}
    <section class="utab__section" data-tab="Cofre">
        <div class="utab__level" data-level="1">
            <div class="utab__content">
                <div class="utab__mediaImage">[[File:Cofre_lvl1.png]]</div>
                <ul class="utab__statList">
                    <li>10% de bônus pra aliança</li>
                </ul>
            </div>
        </div>
        <div class="utab__level" data-level="2">
            <div class="utab__content">
                <div class="utab__mediaImage">[[File:Cofre_lvl2.png]]</div>
                <ul class="utab__statList">
                    <li>+ 100 espaços extra no cofre</li>
                    <li>25% de bônus pra aliança</li>
                </ul>
            </div>
        </div>
        <div class="utab__level" data-level="3">
            <div class="utab__content">
                <div class="utab__mediaImage">[[File:Cofre_lvl3.png]]</div>
                <ul class="utab__statList">
                    <li>+ 200 espaços extra no cofre</li>
                    <li>45% de bônus pra aliança</li>
                </ul>
            </div>
        </div>
        <div class="utab__level" data-level="4">
            <div class="utab__content">
                <div class="utab__mediaImage">[[File:Cofre_lvl4.png]]</div>
                <ul class="utab__statList">
                    <li>+ 300 espaços extra no cofre</li>
                    <li>75% de bônus pra aliança</li>
                </ul>
            </div>
        </div>
        <div class="utab__level" data-level="5">
            <div class="utab__content">
                <div class="utab__mediaImage">[[File:Cofre_lvl5.png]]</div>
                <ul class="utab__statList">
                    <li>+ 400 espaços extra no cofre</li>
                    <li>100% de bônus pra aliança</li>
                </ul>
            </div>
        </div>
    </section>
    {/if}
    {if !$section || $section == "salao principal"}
    <section class="utab__section" data-tab="Salão Principal">
        <div class="utab__level" data-level="1">
            <div class="utab__content">
                <div class="utab__mediaImage">[[File:SalaoPrincipal_lvl1.png]]</div>
                <ul class="utab__statList">
                    <li>Descrição do nível 1</li>
                </ul>
            </div>
        </div>
        <div class="utab__level" data-level="2">
            <div class="utab__content">
                <div class="utab__mediaImage">[[File:SalaoPrincipal_lvl2.png]]</div>
                <ul class="utab__statList">
                    <li>Descrição do nível 2</li>
                </ul>
            </div>
        </div>
        <div class="utab__level" data-level="3">
            <div class="utab__content">
                <div class="utab__mediaImage">[[File:SalaoPrincipal_lvl3.png]]</div>
                <ul class="utab__statList">
                    <li>Descrição do nível 3</li>
                </ul>
            </div>
        </div>
        <div class="utab__level" data-level="4">
            <div class="utab__content">
                <div class="utab__mediaImage">[[File:SalaoPrincipal_lvl4.png]]</div>
                <ul class="utab__statList">
                    <li>Descrição do nível 4</li>
                </ul>
            </div>
        </div>
        <div class="utab__level" data-level="5">
            <div class="utab__content">
                <div class="utab__mediaImage">[[File:SalaoPrincipal_lvl5.png]]</div>
                <ul class="utab__statList">
                    <li>Descrição do nível 5</li>
                </ul>
            </div>
        </div>
    </section>
    {/if}
    {if !$section || $section == "quartos"}
    <section class="utab__section" data-tab="Quartos">
        <div class="utab__level" data-level="1">
            <div class="utab__content">
                <div class="utab__mediaImage">[[File:Quartos_lvl1.png]]</div>
                <ul class="utab__statList">
                    <li>Descrição do nível 1</li>
                </ul>
            </div>
        </div>
        <div class="utab__level" data-level="2">
            <div class="utab__content">
                <div class="utab__mediaImage">[[File:Quartos_lvl2.png]]</div>
                <ul class="utab__statList">
                    <li>Descrição do nível 2</li>
                </ul>
            </div>
        </div>
        <div class="utab__level" data-level="3">
            <div class="utab__content">
                <div class="utab__mediaImage">[[File:Quartos_lvl3.png]]</div>
                <ul class="utab__statList">
                    <li>Descrição do nível 3</li>
                </ul>
            </div>
        </div>
        <div class="utab__level" data-level="4">
            <div class="utab__content">
                <div class="utab__mediaImage">[[File:Quartos_lvl4.png]]</div>
                <ul class="utab__statList">
                    <li>Descrição do nível 4</li>
                </ul>
            </div>
        </div>
        <div class="utab__level" data-level="5">
            <div class="utab__content">
                <div class="utab__mediaImage">[[File:Quartos_lvl5.png]]</div>
                <ul class="utab__statList">
                    <li>Descrição do nível 5</li>
                </ul>
            </div>
        </div>
    </section>
    {/if}
    {if !$section || $section == "sala de guerra"}
    <section class="utab__section" data-tab="Sala de Guerra">
        <div class="utab__level" data-level="1">
            <div class="utab__content">
                <div class="utab__mediaImage">[[File:SalaDeGuerra_lvl1.png]]</div>
                <ul class="utab__statList">
                    <li>Descrição do nível 1</li>
                </ul>
            </div>
        </div>
        <div class="utab__level" data-level="2">
            <div class="utab__content">
                <div class="utab__mediaImage">[[File:SalaDeGuerra_lvl2.png]]</div>
                <ul class="utab__statList">
                    <li>Descrição do nível 2</li>
                </ul>
            </div>
        </div>
        <div class="utab__level" data-level="3">
            <div class="utab__content">
                <div class="utab__mediaImage">[[File:SalaDeGuerra_lvl3.png]]</div>
                <ul class="utab__statList">
                    <li>Descrição do nível 3</li>
                </ul>
            </div>
        </div>
        <div class="utab__level" data-level="4">
            <div class="utab__content">
                <div class="utab__mediaImage">[[File:SalaDeGuerra_lvl4.png]]</div>
                <ul class="utab__statList">
                    <li>Descrição do nível 4</li>
                </ul>
            </div>
        </div>
        <div class="utab__level" data-level="5">
            <div class="utab__content">
                <div class="utab__mediaImage">[[File:SalaDeGuerra_lvl5.png]]</div>
                <ul class="utab__statList">
                    <li>Descrição do nível 5</li>
                </ul>
            </div>
        </div>
    </section>
    {/if}
    {if !$section || $section == "treinamento"}
    <section class="utab__section" data-tab="Treinamento">
        <div class="utab__level" data-level="1">
            <div class="utab__content">
                <div class="utab__mediaImage">[[File:Treinamento_lvl1.png]]</div>
                <ul class="utab__statList">
                    <li>Descrição do nível 1</li>
                </ul>
            </div>
        </div>
        <div class="utab__level" data-level="2">
            <div class="utab__content">
                <div class="utab__mediaImage">[[File:Treinamento_lvl2.png]]</div>
                <ul class="utab__statList">
                    <li>Descrição do nível 2</li>
                </ul>
            </div>
        </div>
        <div class="utab__level" data-level="3">
            <div class="utab__content">
                <div class="utab__mediaImage">[[File:Treinamento_lvl3.png]]</div>
                <ul class="utab__statList">
                    <li>Descrição do nível 3</li>
                </ul>
            </div>
        </div>
        <div class="utab__level" data-level="4">
            <div class="utab__content">
                <div class="utab__mediaImage">[[File:Treinamento_lvl4.png]]</div>
                <ul class="utab__statList">
                    <li>Descrição do nível 4</li>
                </ul>
            </div>
        </div>
        <div class="utab__level" data-level="5">
            <div class="utab__content">
                <div class="utab__mediaImage">[[File:Treinamento_lvl5.png]]</div>
                <ul class="utab__statList">
                    <li>Descrição do nível 5</li>
                </ul>
            </div>
        </div>
    </section>
    {/if}
    {if !$section || $section == "ferreiro"}
    <section class="utab__section" data-tab="Ferreiro">
        <div class="utab__level" data-level="1">
            <div class="utab__content">
                <div class="utab__mediaImage">[[File:Ferreiro_lvl1.png]]</div>
                <ul class="utab__statList">
                    <li>Descrição do nível 1</li>
                </ul>
            </div>
        </div>
        <div class="utab__level" data-level="2">
            <div class="utab__content">
                <div class="utab__mediaImage">[[File:Ferreiro_lvl2.png]]</div>
                <ul class="utab__statList">
                    <li>Descrição do nível 2</li>
                </ul>
            </div>
        </div>
        <div class="utab__level" data-level="3">
            <div class="utab__content">
                <div class="utab__mediaImage">[[File:Ferreiro_lvl3.png]]</div>
                <ul class="utab__statList">
                    <li>Descrição do nível 3</li>
                </ul>
            </div>
        </div>
        <div class="utab__level" data-level="4">
            <div class="utab__content">
                <div class="utab__mediaImage">[[File:Ferreiro_lvl4.png]]</div>
                <ul class="utab__statList">
                    <li>Descrição do nível 4</li>
                </ul>
            </div>
        </div>
        <div class="utab__level" data-level="5">
            <div class="utab__content">
                <div class="utab__mediaImage">[[File:Ferreiro_lvl5.png]]</div>
                <ul class="utab__statList">
                    <li>Descrição do nível 5</li>
                </ul>
            </div>
        </div>
    </section>
    {/if}
    {if !$section || $section == "cozinha"}
    <section class="utab__section" data-tab="Cozinha">
        <div class="utab__level" data-level="1">
            <div class="utab__content">
                <div class="utab__mediaImage">[[File:Cozinha_lvl1.png]]</div>
                <ul class="utab__statList">
                    <li>Descrição do nível 1</li>
                </ul>
            </div>
        </div>
        <div class="utab__level" data-level="2">
            <div class="utab__content">
                <div class="utab__mediaImage">[[File:Cozinha_lvl2.png]]</div>
                <ul class="utab__statList">
                    <li>Descrição do nível 2</li>
                </ul>
            </div>
        </div>
        <div class="utab__level" data-level="3">
            <div class="utab__content">
                <div class="utab__mediaImage">[[File:Cozinha_lvl3.png]]</div>
                <ul class="utab__statList">
                    <li>Descrição do nível 3</li>
                </ul>
            </div>
        </div>
        <div class="utab__level" data-level="4">
            <div class="utab__content">
                <div class="utab__mediaImage">[[File:Cozinha_lvl4.png]]</div>
                <ul class="utab__statList">
                    <li>Descrição do nível 4</li>
                </ul>
            </div>
        </div>
        <div class="utab__level" data-level="5">
            <div class="utab__content">
                <div class="utab__mediaImage">[[File:Cozinhalvl5.gif]]</div>
                <ul class="utab__statList">
                    <li>Descrição do nível 5</li>
                </ul>
            </div>
        </div>
    </section>
    {/if}
</div>
</div>
{literal}
<script>
    function handleArrowNavigation(event, buttons, activate) {
        const keys = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"];
        if (!keys.includes(event.key)) {
            return;
        }
        event.preventDefault();
        const currentIndex = buttons.findIndex((button) => button === document.activeElement);
        if (currentIndex === -1) {
            return;
        }
        let nextIndex = currentIndex;
        if (event.key === "Home") {
            nextIndex = 0;
        } else if (event.key === "End") {
            nextIndex = buttons.length - 1;
        } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
            nextIndex = (currentIndex - 1 + buttons.length) % buttons.length;
        } else if (event.key === "ArrowRight" || event.key === "ArrowDown") {
            nextIndex = (currentIndex + 1) % buttons.length;
        }
        activate(nextIndex, true);
    }
    function triggerFade(element) {
        element.classList.remove("is-fading");
        void element.offsetWidth;
        element.classList.add("is-fading");
    }
    function hasWikitext(value) {
        return typeof value === "string" && (value.includes("[[") || value.includes("{{"));
    }
    function hasStatWrapper(html) {
        if (typeof html !== "string") {
            return false;
        }
        return /class=["'][^"']*\butab__stat\b/.test(html);
    }
    function parseWikitextCached(raw, cacheKey, target) {
        if (!raw || !hasWikitext(raw)) {
            return Promise.resolve(raw);
        }
        if (target[cacheKey]) {
            return Promise.resolve(target[cacheKey]);
        }
        if (!window.mw || !mw.Api) {
            return Promise.resolve(raw);
        }
        const api = new mw.Api();
        return api
            .post({
                action: "parse",
                text: raw,
                contentmodel: "wikitext",
                prop: "text",
                formatversion: 2
            })
            .then((response) => {
                const html = response?.parse?.text || response?.parse?.text?.["*"] || raw;
                target[cacheKey] = html;
                return html;
            })
            .catch(() => raw);
    }
    const upgradeCosts = [
        { level: 1, berries: "50.000", gems: "10", points: "400" },
        { level: 2, berries: "250.000", gems: "10", points: "1.500" },
        { level: 3, berries: "400.000", gems: "20", points: "3.000" },
        { level: 4, berries: "1.000.000", gems: "50", points: "12.500" },
        { level: 5, berries: "1.800.000", gems: "90", points: "28.000" }
    ];
    function buildLevelUI(section) {
        const levelElements = Array.from(section.querySelectorAll(".utab__level"));
        if (!levelElements.length) {
            return;
        }
        const label = section.dataset.tab || "Níveis";
        const levels = levelElements.map((levelElement, index) => {
            const levelNumber = levelElement.dataset.level || String(index + 1);
            const contentElement = levelElement.querySelector(".utab__content") || levelElement;
            const rawHtml = contentElement.innerHTML.trim();
            const contentWrapper = document.createElement("div");
            contentWrapper.innerHTML = rawHtml;
            const mediaImage = contentWrapper.querySelector(".utab__mediaImage");
            const imageHtml = mediaImage ? mediaImage.innerHTML.trim() : "";
            if (mediaImage) {
                mediaImage.remove();
            }
            const statsHtml = contentWrapper.innerHTML.trim();
            return {
                level: levelNumber,
                imageHtml,
                statsHtml
            };
        });
        levelElements.forEach((levelElement) => {
            levelElement.classList.add("utab__level--source");
        });
        const nav = document.createElement("div");
        nav.className = "utab__levels";
        nav.setAttribute("role", "tablist");
        nav.setAttribute("aria-label", `Níveis de ${label}`);
        const display = document.createElement("div");
        display.className = "utab__display";
        const imageWrap = document.createElement("div");
        imageWrap.className = "utab__image";
        const stats = document.createElement("div");
        stats.className = "utab__stats";
        display.appendChild(imageWrap);
        display.appendChild(stats);
        const buttons = levels.map((level, index) => {
            const button = document.createElement("button");
            button.type = "button";
            button.className = "utab__levelBtn";
            button.textContent = `Nv ${level.level}`;
            button.setAttribute("role", "tab");
            button.setAttribute("aria-selected", "false");
            button.setAttribute("tabindex", "-1");
            button.addEventListener("click", () => activateLevel(index, true));
            button.addEventListener("keydown", (event) => handleArrowNavigation(event, buttons, activateLevel));
            nav.appendChild(button);
            return button;
        });
        section.prepend(display);
        section.prepend(nav);
        let renderToken = 0;
        function activateLevel(index, shouldFocus) {
            if (!levels.length) {
                return;
            }
            const safeIndex = Math.max(0, Math.min(index, levels.length - 1));
            const current = levels[safeIndex];
            const token = ++renderToken;
            buttons.forEach((button, buttonIndex) => {
                const isActive = buttonIndex === safeIndex;
                button.classList.toggle("is-active", isActive);
                button.setAttribute("aria-selected", isActive ? "true" : "false");
                button.setAttribute("tabindex", isActive ? "0" : "-1");
            });
            if (current.imageHtml) {
                imageWrap.innerHTML = current.imageHtml;
                imageWrap.classList.remove("is-empty");
                display.classList.remove("is-image-empty");
            } else {
                imageWrap.innerHTML = "";
                imageWrap.classList.add("is-empty");
                display.classList.add("is-image-empty");
            }
            const levelNumber = Number(current.level);
            const cost = upgradeCosts.find((item) => item.level === levelNumber);
            const costHtml = cost
                ? `
                    <div class="utab__stat utab__stat--cost">
                        <div class="utab__statTitle">Custo do upgrade</div>
                        <ul class="utab__statList">
                            <li class="utab__costRow">
                                <span class="utab__costBerry">
                                    <span class="utab__costText">${cost.berries} berries</span>
                                </span>
                            </li>
                            ${cost.gems ? `
                                <li class="utab__costRow">
                                    <span class="utab__costGems">
                                        <span class="utab__costText">${cost.gems} gemas</span>
                                    </span>
                                </li>
                            ` : ""}
                            <li class="utab__costRow">
                                <span class="utab__costPoints">
                                    <span class="utab__costText">${cost.points} pontos</span>
                                </span>
                            </li>
                        </ul>
                    </div>
                `
                : "";
            const statsBodyHtml = current.statsHtml
                ? (hasStatWrapper(current.statsHtml)
                    ? current.statsHtml
                    : `
                        <div class="utab__stat utab__stat--desc">
                            <div class="utab__statTitle">Informações</div>
                            ${current.statsHtml}
                        </div>
                    `)
                : "";
            stats.innerHTML = `${statsBodyHtml}${costHtml}`;
            triggerFade(display);
            const shouldParse =
                (current.imageHtml && hasWikitext(current.imageHtml)) ||
                (current.statsHtml && hasWikitext(current.statsHtml));
            if (shouldParse) {
                Promise.all([
                    parseWikitextCached(current.imageHtml, "parsedImageHtml", current),
                    parseWikitextCached(current.statsHtml, "parsedStatsHtml", current)
                ]).then(([parsedImage, parsedStats]) => {
                    if (renderToken !== token) {
                        return;
                    }
                    if (parsedImage && parsedImage !== current.imageHtml) {
                        imageWrap.innerHTML = parsedImage;
                        imageWrap.classList.remove("is-empty");
                        display.classList.remove("is-image-empty");
                    }
                    if (parsedStats && parsedStats !== current.statsHtml) {
                        const parsedBodyHtml = hasStatWrapper(parsedStats)
                            ? parsedStats
                            : `
                                <div class="utab__stat utab__stat--desc">
                                    <div class="utab__statTitle">Informações</div>
                                    ${parsedStats}
                                </div>
                            `;
                        stats.innerHTML = `${parsedBodyHtml}${costHtml}`;
                    }
                });
            }
            if (shouldFocus) {
                buttons[safeIndex].focus();
            }
        }
        activateLevel(0, false);
    }
    function initWidgets() {
        document.querySelectorAll(".utab").forEach((widget) => {
            widget.querySelectorAll(".utab__section").forEach(buildLevelUI);
        });
    }
    if (document.readyState === "loading") {
        document.addEventListener("DOMContentLoaded", initWidgets);
    } else {
        initWidgets();
    }
</script>
{/literal}

Edição das 22h13min de 12 de março de 2026

<style> .island-grid { 

 display: flex;
 flex-wrap: wrap;
 gap: 16px;
 justify-content: flex-start;
 padding: 16px 0;

}

.island-card { 

 background: #eeeded;
 box-shadow: rgba(0,0,0,0.24) 0px 3px 10px;
 border-radius: 8px;
 text-align: center;
 padding: 20px 16px;
 width: calc(25% - 12px);
 box-sizing: border-box;
 cursor: pointer;
 text-decoration: none;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 8px;
 transition: transform 0.15s, box-shadow 0.15s;

}

.island-card:hover { 

 transform: translateY(-3px);
 box-shadow: rgba(0,0,0,0.35) 0px 6px 16px;

}

.island-card img.island-img { 

 width: 150px;
 height: 150px;
 object-fit: contain;

}

.island-card .island-name { 

 font-size: 1.05em;
 font-weight: bold;
 color: #000;

}

.island-card .island-chests { 

 display: flex;
 align-items: center;
 gap: 4px;
 font-weight: bold;
 font-size: 1em;
 color: #000;

}

.island-card .island-chests img { 

 height: auto;

}

@media (max-width: 900px) { 

 .island-card {
   width: calc(33.333% - 11px);
 }

}

@media (max-width: 600px) { 

 .island-card {
   width: calc(50% - 8px);
 }
 .island-card img.island-img {
   width: 100px;
   height: 100px;
 }

}

@media (max-width: 360px) { 

 .island-card {
   width: 100%;
 }

} </style>

{{{content}}}

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