Mudanças entre as edições de "Predefinição:Teste"

De Wiki Gla
Ir para navegação Ir para pesquisar
Linha 1: Linha 1:
<includeonly>
<includeonly>
<!-- Container Principal -->
<td class="characterPage--characterSkills">
{{#widget:opendiv|class=personagem-container}}
{{#widget:opendiv|class=card}}
<span class="card-title">Habilidades</span>
{{#widget:opendiv|class=tabsContainer}}
<table>
<tr class="tabSkill--container">
<!-- Tabs -->
{{#if: {{{skill-tab1|}}} |
<td data-skill-id=1 class="tab-skill active">
{{#widget:opendiv}}
{{#widget:image|src={{{skill-tab1}}}}}
{{#widget:closediv}}
</td>
}}
{{#if: {{{skill-tab2|}}} |
<td data-skill-id=2 class="tab-skill">
{{#widget:opendiv}}
{{#widget:image|src={{{skill-tab2}}}}}
{{#widget:closediv}}
</td>
}}
</tr>


<!-- Cabeçalho do Personagem -->
<tr class="skillInfo--container">
{{#widget:opendiv|class=personagem-header}}
<!-- Skill Descriptions -->
<h2>{{{nome|Nome do Personagem}}}</h2>
{{#if: {{{nskill1|}}} |
{{#widget:opendiv|class=personagem-info}}
<td data-skill-id=1 class="skillInfo active" colspan="12">
<p><b>Classes:</b> {{{classes|N/A}}}</p>
{{#widget:opendiv|class=d-flex justify-between}}
<p><b>Tier:</b> {{{tier|N/A}}}</p>
{{#widget:opendiv|class=skillInfo--infoContainer}}
{{#widget:closediv}} <!-- Fecha personagem-info -->
<h1 class="skillInfo--name">{{{nskill1}}}</h1>
{{#widget:closediv}} <!-- Fecha personagem-header -->
<center><b>Level: {{{level1}}}</b></center>
<p class="skillInfo--description">{{{descskill1}}}</p>
{{#widget:opendiv|class=skillInfo--attributesContainer}}
<h1>Atributos</h1>
{{#widget:opendiv|class=attribute--cardsContainer}}
{{#tip-text: {{#widget:cardAttribute|icon=/images/b/b1/Icon-cooldown.png|value={{{cooldown1}}}}} | '''Recarga'''}}
{{#tip-text: {{#widget:cardAttribute|icon=/images/3/38/Icon-energy.png|value={{{energy1}}}}} | '''Energia'''}}
{{#tip-text: {{#widget:cardAttribute|icon=/images/7/7a/Icon-pve.png|value={{{powerpve1}}}}} | '''Poder PVE'''}}
{{#tip-text: {{#widget:cardAttribute|icon=/images/5/5f/Icon-pvp.png|value={{{powerpvp1}}}}} | '''Poder PVP'''}}
{{#widget:closediv}}
{{#widget:closediv}}
{{#widget:closediv}}
{{#widget:opendiv|class=skillInfo--videoContainer}}
{{#widget:video|src={{{video1}}}|class=skillInfo--skillVideo}}
{{#widget:closediv}}
{{#widget:closediv}}
</td>
}}


<!-- Seção de Habilidades -->
{{#if: {{{nskill2|}}} |
{{#widget:opendiv|class=personagem-habilidades}}
<td data-skill-id=2 class="skillInfo" colspan="12">
<h3>Habilidades</h3>
{{#widget:opendiv|class=d-flex justify-between}}
 
{{#widget:opendiv|class=skillInfo--infoContainer}}
<!-- Container das Abas de Habilidades -->
<h1 class="skillInfo--name">{{{nskill2}}}</h1>
{{#widget:opendiv|class=habilidades-tabs}}
<center><b>Level: {{{level2}}}</b></center>
 
<p class="skillInfo--description">{{{descskill2}}}</p>
<!-- Ícones das Habilidades -->
{{#widget:opendiv|class=skillInfo--attributesContainer}}
{{#widget:opendiv|class=abas-icones}}
<h1>Atributos</h1>
{{#widget:opendiv|class=tab-habilidade active" data-skill-id="1"}}
{{#widget:opendiv|class=attribute--cardsContainer}}
<img src="{{{icone_1|/images/default-icon.png}}}" alt="Habilidade 1">
{{#tip-text: {{#widget:cardAttribute|icon=/images/b/b1/Icon-cooldown.png|value={{{cooldown2}}}}} | '''Recarga'''}}
{{#tip-text: {{#widget:cardAttribute|icon=/images/3/38/Icon-energy.png|value={{{energy2}}}}} | '''Energia'''}}
{{#tip-text: {{#widget:cardAttribute|icon=/images/7/7a/Icon-pve.png|value={{{powerpve2}}}}} | '''Poder PVE'''}}
{{#tip-text: {{#widget:cardAttribute|icon=/images/5/5f/Icon-pvp.png|value={{{powerpvp2}}}}} | '''Poder PVP'''}}
{{#widget:closediv}}
{{#widget:closediv}}
{{#widget:closediv}}
{{#widget:opendiv|class=tab-habilidade" data-skill-id="2"}}
<img src="{{{icone_2|/images/default-icon.png}}}" alt="Habilidade 2">
{{#widget:closediv}}
{{#widget:closediv}}
{{#widget:opendiv|class=tab-habilidade" data-skill-id="3"}}
{{#widget:opendiv|class=skillInfo--videoContainer}}
<img src="{{{icone_3|/images/default-icon.png}}}" alt="Habilidade 3">
{{#widget:video|src={{{video2}}}|class=skillInfo--skillVideo}}
{{#widget:closediv}}
{{#widget:closediv}}
<!-- Adicione mais habilidades se necessário -->
{{#widget:closediv}} <!-- Fecha abas-icones -->
<!-- Conteúdo das Habilidades -->
{{#widget:opendiv|class=abas-conteudo}}
{{#widget:opendiv|class=habilidade-info active" data-skill-id="1"}}
<h4>{{{habilidade_1_nome|Habilidade 1}}}</h4>
<p><b>Nível:</b> {{{habilidade_1_nivel|N/A}}}</p>
<p><b>Descrição:</b> {{{habilidade_1_descricao|Sem descrição.}}}</p>
<div class="habilidade-video">{{{habilidade_1_video|}}}</div>
{{#widget:closediv}}
{{#widget:closediv}}
{{#widget:opendiv|class=habilidade-info" data-skill-id="2"}}
</td>
<h4>{{{habilidade_2_nome|Habilidade 2}}}</h4>
}}
<p><b>Nível:</b> {{{habilidade_2_nivel|N/A}}}</p>
</tr>
<p><b>Descrição:</b> {{{habilidade_2_descricao|Sem descrição.}}}</p>
</table>
<div class="habilidade-video">{{{habilidade_2_video|}}}</div>
{{#widget:closediv}}
{{#widget:closediv}}
{{#widget:opendiv|class=habilidade-info" data-skill-id="3"}}
<h4>{{{habilidade_3_nome|Habilidade 3}}}</h4>
<p><b>Nível:</b> {{{habilidade_3_nivel|N/A}}}</p>
<p><b>Descrição:</b> {{{habilidade_3_descricao|Sem descrição.}}}</p>
<div class="habilidade-video">{{{habilidade_3_video|}}}</div>
{{#widget:closediv}}
{{#widget:closediv}}
<!-- Adicione mais habilidades se necessário -->
</td>
{{#widget:closediv}} <!-- Fecha abas-conteudo -->
 
{{#widget:closediv}} <!-- Fecha habilidades-tabs -->
{{#widget:closediv}} <!-- Fecha personagem-habilidades -->
 
{{#widget:closediv}} <!-- Fecha personagem-container -->
 
<!-- JavaScript para alternar entre as habilidades -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const tabs = document.querySelectorAll('.tab-habilidade');
    const contents = document.querySelectorAll('.habilidade-info');
    tabs.forEach(tab => {
        tab.addEventListener('click', function() {
            const skillId = this.getAttribute('data-skill-id');
            document.querySelector('.tab-habilidade.active').classList.remove('active');
            this.classList.add('active');
            document.querySelector('.habilidade-info.active').classList.remove('active');
            document.querySelector('.habilidade-info[data-skill-id="' + skillId + '"]').classList.add('active');
        });
    });
});
</script>
</includeonly>
</includeonly>

Edição das 16h42min de 29 de novembro de 2024