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

De Wiki Gla
Ir para navegação Ir para pesquisar
Linha 1: Linha 1:
<div class="character--container">
<includeonly>
<div class="character--header">
<!-- Container Principal -->
<h2>{{{name|Nome do Personagem}}}</h2>
{{#widget:opendiv|class=personagem-container}}
<div class="character--info">
 
<!-- Cabeçalho do Personagem -->
{{#widget:opendiv|class=personagem-header}}
<h2>{{{nome|Nome do Personagem}}}</h2>
{{#widget:opendiv|class=personagem-info}}
<p><b>Classes:</b> {{{classes|N/A}}}</p>
<p><b>Classes:</b> {{{classes|N/A}}}</p>
<p><b>Tier:</b> {{{tier|N/A}}}</p>
<p><b>Tier:</b> {{{tier|N/A}}}</p>
</div>
{{#widget:closediv}} <!-- Fecha personagem-info -->
</div>
{{#widget:closediv}} <!-- Fecha personagem-header -->
 
<!-- Seção de Habilidades -->
{{#widget:opendiv|class=personagem-habilidades}}
<h3>Habilidades</h3>
 
<!-- Container das Abas de Habilidades -->
{{#widget:opendiv|class=habilidades-tabs}}
 
<!-- Ícones das Habilidades -->
{{#widget:opendiv|class=abas-icones}}
{{#widget:opendiv|class=tab-habilidade active" data-skill-id="1"}}
<img src="{{{icone_1|/images/default-icon.png}}}" alt="Habilidade 1">
{{#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:opendiv|class=tab-habilidade" data-skill-id="3"}}
<img src="{{{icone_3|/images/default-icon.png}}}" alt="Habilidade 3">
{{#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:opendiv|class=habilidade-info" data-skill-id="2"}}
<h4>{{{habilidade_2_nome|Habilidade 2}}}</h4>
<p><b>Nível:</b> {{{habilidade_2_nivel|N/A}}}</p>
<p><b>Descrição:</b> {{{habilidade_2_descricao|Sem descrição.}}}</p>
<div class="habilidade-video">{{{habilidade_2_video|}}}</div>
{{#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}}
<!-- Adicione mais habilidades se necessário -->
{{#widget:closediv}} <!-- Fecha abas-conteudo -->
 
{{#widget:closediv}} <!-- Fecha habilidades-tabs -->
{{#widget:closediv}} <!-- Fecha personagem-habilidades -->


<!-- Skins -->
{{#widget:closediv}} <!-- Fecha personagem-container -->
<div class="character--skins">
<b>Skins:</b>
<div class="skins-container">
{{{skin_1|<span>Sem skins disponíveis.</span>}}}
{{{skin_2|}}}
{{{skin_3|}}}
</div>
</div>


<!-- Habilidades -->
<!-- JavaScript para alternar entre as habilidades -->
<div class="character--skills">
<script>
<h3>Habilidades</h3>
document.addEventListener('DOMContentLoaded', function() {
<div class="skills-tabs">
    const tabs = document.querySelectorAll('.tab-habilidade');
<div class="tabs-header">
    const contents = document.querySelectorAll('.habilidade-info');
<button class="skill-tab active" data-skill-id="1">
    tabs.forEach(tab => {
<img src="{{{icon_1|/images/default-skill-icon.png}}}" alt="Skill 1">
        tab.addEventListener('click', function() {
</button>
            const skillId = this.getAttribute('data-skill-id');
<button class="skill-tab" data-skill-id="2">
            document.querySelector('.tab-habilidade.active').classList.remove('active');
<img src="{{{icon_2|/images/default-skill-icon.png}}}" alt="Skill 2">
            this.classList.add('active');
</button>
            document.querySelector('.habilidade-info.active').classList.remove('active');
<button class="skill-tab" data-skill-id="3">
            document.querySelector('.habilidade-info[data-skill-id="' + skillId + '"]').classList.add('active');
<img src="{{{icon_3|/images/default-skill-icon.png}}}" alt="Skill 3">
        });
</button>
    });
<button class="skill-tab" data-skill-id="4">
});
<img src="{{{icon_4|/images/default-skill-icon.png}}}" alt="Skill 4">
</script>
</button>
</includeonly>
<button class="skill-tab" data-skill-id="5">
<img src="{{{icon_5|/images/default-skill-icon.png}}}" alt="Skill 5">
</button>
</div>
<div class="tabs-content">
<div class="skill-content active" data-skill-id="1">
<h4>{{{skill_1_name|Habilidade 1}}}</h4>
<p><b>Nível:</b> {{{skill_1_level|N/A}}}</p>
<p><b>Descrição:</b> {{{skill_1_desc|Sem descrição.}}}</p>
<div class="skill-video">{{{skill_1_video|}}}</div>
</div>
<div class="skill-content" data-skill-id="2">
<h4>{{{skill_2_name|Habilidade 2}}}</h4>
<p><b>Nível:</b> {{{skill_2_level|N/A}}}</p>
<p><b>Descrição:</b> {{{skill_2_desc|Sem descrição.}}}</p>
<div class="skill-video">{{{skill_2_video|}}}</div>
</div>
<div class="skill-content" data-skill-id="3">
<h4>{{{skill_3_name|Habilidade 3}}}</h4>
<p><b>Nível:</b> {{{skill_3_level|N/A}}}</p>
<p><b>Descrição:</b> {{{skill_3_desc|Sem descrição.}}}</p>
<div class="skill-video">{{{skill_3_video|}}}</div>
</div>
<div class="skill-content" data-skill-id="4">
<h4>{{{skill_4_name|Habilidade 4}}}</h4>
<p><b>Nível:</b> {{{skill_4_level|N/A}}}</p>
<p><b>Descrição:</b> {{{skill_4_desc|Sem descrição.}}}</p>
<div class="skill-video">{{{skill_4_video|}}}</div>
</div>
<div class="skill-content" data-skill-id="5">
<h4>{{{skill_5_name|Habilidade 5}}}</h4>
<p><b>Nível:</b> {{{skill_5_level|N/A}}}</p>
<p><b>Descrição:</b> {{{skill_5_desc|Sem descrição.}}}</p>
<div class="skill-video">{{{skill_5_video|}}}</div>
</div>
</div>
</div>
</div>
</div>

Edição das 14h53min de 29 de novembro de 2024

Disponível em “http://wiki.gla.com.br/index.php?title=Predefinição:Teste&oldid=24826”